/**
 * ecport_overrides.css
 * 商品詳細ページ等のUI差分修正（テーマ標準に近づける）
 * .tf-main-product でスコープしテーマ全体に影響しない
 */

/* ===== iOS Safari 既知バグ回避 ===== */
/* scroll-behavior: smooth は iOS Safari でフリーズの可能性 → auto に上書き */
html { scroll-behavior: auto !important; }
.preload-container { display: none !important; }

/* ===== ECport 共通ユーティリティ ===== */

/* --- 画像サムネイル --- */
.ec-thumb-sm  { width: 40px; height: 40px; object-fit: cover; }
.ec-thumb-md  { width: 60px; height: 60px; object-fit: cover; }
.ec-thumb-lg  { width: 80px; height: 80px; object-fit: cover; }
.ec-thumb-xl  { width: 120px; height: 120px; object-fit: cover; }

/* --- テキスト表示 --- */
.ec-prewrap { white-space: pre-wrap; line-height: 1.8; }

/* ===== Phase 1: 日本語テキスト基盤 ===== */

/* 日本語テキストの折り返し・溢れ防止（グローバル） */
h1, h2, h3, h4, h5, h6,
p, li, td, th, dt, dd, label, figcaption,
.card-title, .cart-title, .cart-info {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* 価格・バッジ等、改行させたくない要素 */
.price, .cart-price, .cart-total,
.total-value, .total-price,
.tf-cart-totals-discounts span,
.tf-cart-totals-line span:last-child,
.checkout-product-item .content .price,
.ec-order-total,
.ec-status-badge,
.ec-badge-default {
    white-space: nowrap;
}

/* 在庫0時のAdd to cart無効化 */
.tf-main-product .btn-add-to-cart.disabled {
    pointer-events: none;
    opacity: 0.65;
    cursor: not-allowed;
}

/* 右カラム 情報ブロックの余白 */
.tf-main-product .tf-product-info-list > * + * {
    margin-top: 1.25rem;
}

.tf-main-product .tf-product-info-title {
    margin-bottom: 0.5rem;
}

.tf-main-product .tf-product-info-price {
    margin-top: 0.5rem;
}

.tf-main-product .tf-product-info-variant-picker .variant-picker-item + .variant-picker-item {
    margin-top: 1.25rem;
}

.tf-main-product .tf-product-info-quantity {
    margin-top: 1rem;
}

.tf-main-product .tf-product-info-buy-button {
    margin-top: 1.25rem;
}

/* タブ領域 */
.tf-main-product ~ section .widget-content-tab .widget-content-inner {
    padding: 1.5rem 0;
}

/* タブコンテンツ内の余白・画像 */
.tf-main-product ~ section .widget-content-tab .tf-tab-content img {
    max-width: 100%;
    height: auto;
}
.tf-main-product ~ section .widget-content-tab .tf-tab-content figure {
    margin: 1rem 0;
}

/* 商品詳細: メイン画像を正方形に統一 */
.tf-product-media-wrap .tf-product-media-main .item img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
/* 商品詳細: サムネイルも正方形に統一 */
.tf-product-media-wrap .tf-product-media-thumbs .item img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* 左画像: thumbs-slider / swiper はテーマ標準のgapを使用 */

/* カテゴリー棚: 7列グリッド */
.category-shelves-section [data-grid="grid-7"] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 20px;
}
@media (max-width: 1199.98px) {
    .category-shelves-section [data-grid="grid-7"] {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (max-width: 767.98px) {
    .category-shelves-section [data-grid="grid-7"] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ボタン・フォント テーマ既定に揃える */
.tf-main-product .tf-btn.btn-fill {
    min-height: 48px;
    font-size: 1rem;
    line-height: 1.7;
}

/* ===== 商品一覧ページ モバイル対応 ===== */

/* デスクトップではフィルターボタンを非表示 */
.filterShop.tf-btn-filter {
    display: none;
}

/* 1149px以下: サイドバーがoffcanvasになるのでコンテンツを全幅に */
@media (max-width: 1149px) {
    .filterShop.tf-btn-filter {
        display: inline-flex;
    }
    .tf-row-flex {
        flex-direction: column;
    }
    .tf-row-flex .tf-shop-sidebar {
        width: 100%;
    }
    .tf-row-flex .tf-shop-content {
        width: 100%;
    }
}

/* ===== チェックアウト: ECPort独自UI ===== */

/* ログインバナー（ログイン済み） */
.form-checkout .ec-checkout-login-banner {
    padding: 12px 16px;
    background-color: #f0f7f0;
    border: 1px solid #c3e6cb;
    border-radius: 6px;
}

/* ログインフォーム（未ログイン時の折りたたみ） */
.form-checkout .ec-checkout-login-form {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 16px;
}

/* エラー表示エリア */
.form-checkout .ec-checkout-errors {
    background-color: #fff3f3;
    border: 1px solid #f5c6cb;
    border-radius: 6px;
    padding: 12px 16px;
}
.form-checkout .ec-checkout-errors .ec-error-title {
    color: #dc3545;
    margin: 0;
}
.form-checkout .ec-checkout-errors .ec-error-list {
    margin: 8px 0 0 16px;
    padding: 0;
    color: #dc3545;
    font-size: 14px;
}

/* ソーシャルギフトオプション */
.form-checkout .ec-gift-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 12px 16px;
    background: #fff3e0;
    border: 1px solid #ffe0b2;
    border-radius: 6px;
}
.form-checkout .ec-gift-toggle::after,
.form-checkout .ec-checkout-section label::after {
    content: none;
}
.form-checkout .ec-gift-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
}
.form-checkout .ec-gift-note {
    margin: 8px 0 0 0;
    font-size: 13px;
    color: #888;
    line-height: 1.7;
}
.form-checkout .ec-gift-info {
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 16px;
}
.form-checkout .ec-gift-info p:first-child {
    margin: 0 0 8px;
    font-size: 14px;
    color: #e65100;
}
.form-checkout .ec-gift-info p:last-child {
    margin: 0;
    font-size: 13px;
    color: #888;
}

/* チェックアウト ステップカード */
.form-checkout .ec-checkout-section {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}
.form-checkout .ec-checkout-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #f8f8f8;
    border-bottom: 1px solid #e0e0e0;
}
.form-checkout .ec-checkout-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #222;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}
.form-checkout .ec-checkout-section-body {
    padding: 20px 16px;
}

/* クーポン適用済み */
.widget-wrap-checkout .ec-coupon-applied {
    background: #d4edda;
    border-radius: 4px;
    padding: 8px;
}
.widget-wrap-checkout .ec-coupon-remove-btn {
    background: none;
    border: none;
    color: #dc3545;
    cursor: pointer;
    text-decoration: underline;
}

/* 割引表示 */
.widget-wrap-checkout .ec-discount-amount {
    color: #198754;
}

/* ===== マイページ: ECPort独自UI ===== */

/* ユーザー情報カード */
.my-account-content .ec-user-card {
    background: #fafafa;
    border-radius: 8px;
    padding: 20px;
    border: 1px solid #eee;
    margin-bottom: 30px;
}
.my-account-content .ec-user-card h5 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
}
.my-account-content .ec-user-card .ec-user-email {
    color: #888;
    font-size: 14px;
    margin: 0;
}

/* 配送先カード */
.my-account-content .ec-address-card {
    border: 1px solid var(--main, #222);
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.my-account-content .ec-address-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.my-account-content .ec-address-name {
    font-weight: 600;
    font-size: 15px;
}
.my-account-content .ec-badge-default {
    display: inline-block;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 500;
    background: var(--main, #222);
    color: #fff;
    border-radius: 10px;
}
.my-account-content .ec-address-body {
    font-size: 14px;
    color: #555;
    line-height: 1.7;
    word-break: break-word;
    overflow-wrap: break-word;
}
.my-account-content .ec-address-body .ec-label-muted {
    color: #999;
}

/* ステータスバッジ */
.my-account-content .ec-status-badge {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    color: #fff;
    display: inline-block;
}

/* SPカード */
.my-account-content .ec-order-card-sp {
    display: block;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 10px;
    text-decoration: none;
    color: inherit;
}
.my-account-content .ec-order-card-sp .ec-order-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.my-account-content .ec-order-card-sp .ec-order-number {
    font-weight: 600;
    font-size: 14px;
}
.my-account-content .ec-order-card-sp .ec-status-badge {
    font-size: 12px;
}
.my-account-content .ec-order-card-sp .ec-order-card-footer {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #888;
}
.my-account-content .ec-order-card-sp .ec-order-total {
    font-weight: 500;
    color: #333;
}

/* セクション見出し */
.my-account-content .ec-section-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 12px;
}

/* ===== 共通フラッシュメッセージ ===== */
.ec-flash-error {
    padding: 12px 16px;
    background: #f8d7da;
    border-radius: 4px;
    color: #721c24;
}
.ec-flash-success {
    padding: 12px 16px;
    background: #d4edda;
    border-radius: 4px;
    color: #155724;
}
.ec-flash-warning {
    padding: 12px 16px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    color: #856404;
}

/* ===== z-index スケール =====
 * navbar:        1000 (Bootstrap default)
 * dropdown:      1100 (Bootstrap default)
 * Bootstrap modal-backdrop: 1050
 * Bootstrap modal:          1055
 * cart-added overlay:       1060 (Bootstrap モーダルの上)
 * toast:                    1090 (最前面)
 */

/* ===== トースト通知 ===== */
#ec-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1090;
    min-width: 280px;
    max-width: 480px;
    padding: 14px 20px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.7;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    transition: opacity .3s;
}

/* ===== カート追加モーダル ===== */
.ec-cart-added-overlay {
    position: fixed;
    inset: 0;
    z-index: 1060;
    background: rgba(0,0,0,.45);
}
.ec-cart-added-dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #fff;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 8px 30px rgba(0,0,0,.2);
    overflow: hidden;
}
.ec-cart-added-header {
    padding: 24px 24px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ec-cart-added-header .ec-check-icon {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ec-cart-added-header .ec-check-icon span {
    font-size: 16px;
    font-weight: 600;
}
.ec-cart-added-close {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    color: #666;
}
.ec-cart-added-body {
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.ec-cart-added-body img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #eee;
    flex-shrink: 0;
}
.ec-cart-added-body .ec-added-name {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ec-cart-added-body .ec-added-price {
    margin: 0;
    font-size: 14px;
    color: #666;
}
.ec-cart-added-actions {
    padding: 0 24px 24px;
    display: flex;
    gap: 10px;
}
.ec-cart-added-continue {
    flex: 1;
    padding: 12px;
    border: 1px solid #222;
    background: #fff;
    color: #222;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}
.ec-cart-added-go {
    flex: 1;
    padding: 12px;
    border: none;
    background: #222;
    color: #fff;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

/* ===== ゲスト登録フォーム（注文完了ページ） ===== */
.ec-guest-register {
    background: #f8f9fa;
    padding: 24px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
}

/* ===== iOS Safari スクロール修正 ===== */
/* WOW.js の visibility:hidden がiOSでスクロール不能の原因になるため無効化。
   全要素を即座に表示し、パフォーマンスも向上する。 */
.wow {
    visibility: visible !important;
    animation-name: none !important;
}

/* 各セクションの横幅超過を防止（bodyにoverflow-xは設定しない） */
.builder-section,
.flat-categorie,
.flat-seller {
    max-width: 100%;
    overflow-x: clip;
}

/* ===== CSS Grid + aspect-ratio Safari バグ対策 ===== */
[data-grid] > * {
    min-height: 0;
    min-width: 0;
}

/* ===== data-grid レスポンシブ対応 ===== */
@media (max-width: 767px) {
    [data-grid=grid-3],
    [data-grid=grid-4],
    [data-grid=grid-5],
    [data-grid=grid-6] {
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }
}
@media (min-width: 768px) and (max-width: 1024px) {
    [data-grid=grid-4],
    [data-grid=grid-5],
    [data-grid=grid-6] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ===== カテゴリーグリッド: モバイルでDiscoveryカード非表示 ===== */
@media (max-width: 767px) {
    .flat-categorie .discovery-new-item {
        display: none;
    }
}

/* ===== モバイル対応: 全体 ===== */

/* 商品グリッド: CSS フォールバック（shop.js のバックアップ） */
@media (max-width: 767px) {
    .tf-grid-layout.tf-col-4,
    .tf-grid-layout.tf-col-3,
    .tf-grid-layout.tf-col-5,
    .tf-grid-layout.tf-col-6 {
        grid-template-columns: 1fr 1fr;
    }
}
@media (min-width: 768px) and (max-width: 1149px) {
    .tf-grid-layout.tf-col-4,
    .tf-grid-layout.tf-col-5,
    .tf-grid-layout.tf-col-6 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 商品一覧: 検索フォームinput */
.ec-search-input {
    max-width: 360px;
    flex: 1 1 auto;
}

/* 商品カード画像: フォールバック */
/* aspect-ratio は iOS Safari の CSS Grid 内で高さ無限膨張バグを起こすため、
   padding-top による従来手法でアスペクト比を実現する */
.card-product .card-product-wrapper {
    background-color: #f5f5f5;
    position: relative;
    overflow: hidden;
}
.card-product .card-product-wrapper .product-img {
    display: block;
    width: 100%;
}
.card-product .card-product-wrapper .product-img img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* 商品カード: ボタン状態別スタイル */
.card-product .ec-btn-add-to-cart {
    border: 1px solid #222;
    background: #fff;
    color: #222;
    width: 100%;
    justify-content: center;
    transition: background .2s, color .2s;
}
.card-product .ec-btn-add-to-cart:hover {
    background: #222;
    color: #fff;
}
.card-product .ec-btn-out-of-stock {
    border: 1px solid #ccc;
    background: #f5f5f5;
    color: #999;
    width: 100%;
    justify-content: center;
    pointer-events: none;
}
.card-product .ec-btn-purchase-request {
    border: 1px solid #0d6efd;
    background: #0d6efd;
    color: #fff;
    width: 100%;
    justify-content: center;
    transition: background .2s;
}
.card-product .ec-btn-purchase-request:hover {
    background: #0b5ed7;
    color: #fff;
}

/* 商品カード: テキスト折り返し */
.card-product .card-product-info .title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

/* 商品カード: カートに追加ボタン
   テーマ標準の .tf-btn に overflow:hidden が設定されているため
   SP表示でカード幅が狭い際にボタン内テキストが見切れる問題を修正。
   テキストの折り返しを許可し、ボタン幅をカード幅に追従させる。 */
.card-product .card-product-info .tf-btn {
    overflow: visible;
    white-space: normal;
    text-align: center;
    width: 100%;
    justify-content: center;
    line-height: 1.5;
}

/* ===== モバイル（767px以下） ===== */
@media (max-width: 767px) {

    /* --- ツールバー --- */
    .tf-shop-control.grid-3 {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    .tf-shop-control .tf-control-filter {
        order: 1;
        flex: 1 1 auto;
    }
    .tf-shop-control .tf-control-sorting {
        order: 2;
        flex: 0 0 auto;
    }
    .tf-shop-control .tf-control-sorting .tf-dropdown-sort {
        width: auto;
    }
    /* レイアウト切替: モバイルでは非表示（常に2列） */
    .tf-shop-control .tf-control-layout {
        display: none;
    }

    /* --- 検索フォーム --- */
    .flat-spacing-2 .mb_20 .d-flex.gap-10 {
        flex-wrap: wrap;
    }
    .ec-search-input {
        max-width: 100% !important;
        width: 100%;
        flex: 1 1 100%;
    }
    .flat-spacing-2 .mb_20 .d-flex.gap-10 .tf-btn {
        flex: 1 1 auto;
    }

    /* --- 商品カード: quick-add ボタンを常時表示 --- */
    .card-product .card-product-wrapper .list-product-btn.absolute-2 {
        opacity: 1;
        visibility: visible;
        bottom: 10px;
    }

    /* --- ページネーション --- */
    .tf-pagination-wrap .wg-pagination {
        flex-wrap: wrap;
        gap: 6px;
        justify-content: center;
    }
    .tf-pagination-wrap .wg-pagination .pagination-item {
        width: 36px;
        height: 34px;
        font-size: 13px;
    }

    /* --- チェックアウト: 2カラム→1カラム --- */
    .tf-page-cart-wrap.layout-2 {
        grid-template-columns: 1fr;
    }

    /* --- カート追加モーダル --- */
    .ec-cart-added-dialog {
        width: 95%;
    }
    .ec-cart-added-header {
        padding: 16px 16px 0;
    }
    .ec-cart-added-body {
        padding: 16px;
    }
    .ec-cart-added-actions {
        padding: 0 16px 16px;
        flex-direction: column;
    }

    /* --- トースト --- */
    #ec-toast {
        min-width: auto;
        max-width: 90vw;
        left: 5%;
        right: 5%;
        transform: none;
    }

    /* --- マイページ --- */
    .my-account-content .ec-user-card {
        padding: 16px;
    }
    .my-account-content .ec-address-card {
        padding: 12px;
    }

    /* --- チェックアウト注文概要: 商品画像サイズ --- */
    .widget-wrap-checkout .checkout-product-item .img-product {
        width: 56px;
        height: 56px;
    }
    .widget-wrap-checkout .checkout-product-item .content {
        font-size: 13px;
    }

    /* --- フッター: 決済アイコン中央寄せ --- */
    .footer-bottom-wrap {
        justify-content: center !important;
        text-align: center;
    }

    /* --- ゲスト登録フォーム --- */
    .ec-guest-register {
        padding: 16px;
    }

    /* --- Phase 2: フォーム2カラム→1カラム --- */
    .box.grid-2 {
        grid-template-columns: 1fr;
    }

    /* --- Phase 2: ボタン最小幅 --- */
    .tf-btn {
        min-width: 100px;
    }
    /* 短いボタンのみnowrap（長文ボタンは折り返し許容） */
    .tf-btn.btn-sm {
        white-space: nowrap;
    }
}

/* ===== Phase 2: 小型スマホ（480px以下） ===== */
@media (max-width: 480px) {
    /* セクション余白を詰める */
    .flat-spacing-11 {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    /* チェックアウトセクション */
    .form-checkout .ec-checkout-section-header {
        padding: 10px 12px;
        gap: 8px;
    }
    .form-checkout .ec-checkout-section-body {
        padding: 16px 12px;
    }

    /* 注文概要の商品名 */
    .widget-wrap-checkout .checkout-product-item .content .name {
        font-size: 12px;
    }

    /* ページネーション縮小 */
    .tf-pagination-wrap .wg-pagination .pagination-item {
        width: 32px;
        height: 30px;
        font-size: 12px;
    }
}

/* ===== タブレット（768px〜1149px） ===== */
@media (min-width: 768px) and (max-width: 1149px) {
    /* レイアウト切替: 4列以上を非表示 */
    .tf-shop-control .sw-layout-4,
    .tf-shop-control .sw-layout-5,
    .tf-shop-control .sw-layout-6 {
        display: none;
    }
}

/* ===== 商品一覧: 商品カード画像なし時のプレースホルダー ===== */
.card-product .card-product-wrapper .product-img img[src=""],
.card-product .card-product-wrapper .product-img img:not([src]) {
    visibility: hidden;
}
.card-product .card-product-wrapper .product-img img[src=""] + .img-hover,
.card-product .card-product-wrapper .product-img img:not([src]) + .img-hover {
    display: none;
}

/* ===== Phase 3: テーブル・モーダル レスポンシブ ===== */

/* テーブルの横スクロール対応（モバイルのみ） */
@media (max-width: 767px) {
    .tf-page-cart-item {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .tf-page-cart-item .tf-table-page-cart {
        min-width: 500px;
    }
}

/* クイックビュー・クイック追加モーダルの商品名折り返し */
.modal-dialog .tf-product-info-title,
#qv-name {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* （ミニカート商品名は追加修正セクションに正しいセレクタで定義） */

/* モーダルのスマホ対応 */
@media (max-width: 480px) {
    .ec-cart-added-dialog {
        width: 96%;
        border-radius: 8px;
    }
    .modal-dialog {
        margin: 8px;
    }
}

/* ===== 追加修正: 未対応項目 ===== */

/* お知らせバー: テキスト溢れ防止 */
.top-bar-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* ヘッダーナビアイコン: タブレットで間隔詰め */
@media (min-width: 768px) and (max-width: 1024px) {
    .nav-icon.gap-20 {
        gap: 12px;
    }
}

/* フォームエラーメッセージの折り返し */
.text-danger,
.tf-message-error,
.ec-checkout-errors .ec-error-list li {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* ミニカートモーダルの商品名（正しいセレクタ） */
.tf-mini-cart-item .tf-mini-cart-info .title {
    word-break: break-word;
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* フッター: ニュースレター入力のスマホ対応 */
@media (max-width: 480px) {
    .subscribe-content {
        flex-wrap: wrap;
    }
    .subscribe-content input {
        width: 100%;
        flex: 1 1 100%;
    }
    .subscribe-content .tf-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ===== チェックアウト: 合計行の行間 ===== */
.tf-cart-totals-line {
    padding: 6px 0;
}

/* ===== スティッキーカートバー ===== */
.tf-sticky-btn-atc {
    padding-right: 60px;
}
.tf-sticky-btn-atc .tf-sticky-atc-btns,
.tf-sticky-btn-atc .tf-sticky-atc-infos form {
    display: flex;
    align-items: stretch;
    gap: 12px;
}
.tf-sticky-btn-atc .wg-quantity {
    height: auto;
    display: flex;
    align-items: stretch;
}
.tf-sticky-btn-atc .wg-quantity input,
.tf-sticky-btn-atc .wg-quantity .btn-quantity {
    height: auto;
}
.tf-sticky-btn-atc .tf-btn {
    display: inline-flex;
    align-items: center;
}
@media (max-width: 767px) {
    .tf-sticky-btn-atc {
        padding-right: 0;
    }
    .tf-sticky-btn-atc .tf-sticky-atc-infos form {
        flex-direction: row;
    }
    .tf-sticky-btn-atc .tf-btn {
        flex: 1;
        justify-content: center;
    }
}

/* ===== 商品一覧: サイドバーフィルター ===== */
/* デスクトップではサイドバーは常に表示されるため、閉じるヘッダーは不要 */
.sidebar-filter .canvas-header {
    display: none;
}
@media (max-width: 1150px) {
    .sidebar-filter .canvas-header {
        display: flex;
    }
}

/* ── 商品詳細 ブロックコンテンツ ── */
.editor-tab-content {
    padding: 1.5rem 0;
    line-height: 1.8;
    font-size: 0.95rem;
}
.editor-tab-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1em 0;
}
.editor-tab-content figure {
    margin: 1.5em 0;
}
.editor-tab-content .ratio {
    max-width: 100%;
    margin: 1.5em 0;
}
.editor-tab-content h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 1.5em 0 0.5em;
}
.editor-tab-content h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 1.2em 0 0.4em;
}
.editor-tab-content h4 {
    font-size: 1rem;
    font-weight: 600;
    margin: 1em 0 0.3em;
}
.editor-tab-content p {
    margin: 0.8em 0;
}

/* ── ショップ詳細 ブロックコンテンツ ── */
.shop-description {
    line-height: 1.8;
    font-size: 0.95rem;
}
.shop-description img {
    max-width: 100%;
    height: auto;
    margin: 1em 0;
}
.shop-description h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 1.5em 0 0.5em;
}
.shop-description h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 1.2em 0 0.4em;
}
.shop-description p {
    margin: 0.8em 0;
}

/* チェックアウトフォームのラベル必須マーク: CSS ::after を無効化し HTML 側で制御 */
.form-checkout label::after {
    content: none;
}

/* ===== ショップオプション（BECOS風カードUI） ===== */
.so-choice-list { display: flex; flex-direction: column; gap: 4px; }
.so-choice-card {
    display: flex; align-items: center; gap: 12px;
    border: 2px solid #e5e7eb; border-radius: 6px; padding: 6px 10px;
    transition: border-color .15s;
}
.so-choice-card:hover { border-color: #aaa; }
.so-choice-card.so-selected { border-color: #d97706; }
.so-choice-img {
    width: 80px; height: 60px; object-fit: cover; border-radius: 4px; flex-shrink: 0;
}
.so-choice-none-thumb {
    width: 80px; height: 60px; display: flex; align-items: center; justify-content: center;
    background: #f3f4f6; border-radius: 4px; color: #6b7280; font-size: 14px; flex-shrink: 0;
}
.so-choice-info { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; font-size: 14px; }
.so-choice-price { color: #6b7280; font-size: 13px; }
.so-choice-price-free { color: #6b7280; font-size: 13px; }

/* フッター: メルマガ説明文を1行表示 */
.footer-newsletter .footer-menu_item { white-space: nowrap; }

/* ===== 法務ページ (利用規約・プライバシーポリシー・特商法) ===== */
.legal-content {
    font-size: 15px;
    line-height: 1.85;
    color: #333;
}
.legal-content > p { margin-bottom: 1em; }
.legal-content .legal-heading {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1a1a1a;
    margin: 2.5em 0 0.75em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid #eee;
}
.legal-content .legal-heading:first-child { margin-top: 0; }
.legal-content ol,
.legal-content ul {
    padding-left: 1.5em;
    margin: 0.5em 0 1em;
}
.legal-content ol li,
.legal-content ul li { margin-bottom: 0.4em; }
.legal-content .legal-effective-date {
    font-size: 0.85rem;
    color: #888;
}
.legal-content .legal-contact-box {
    margin-top: 3em;
    padding: 1.25em 1.5em;
    background: #f7f8fa;
    border-radius: 6px;
}
.legal-content .legal-contact-title {
    font-weight: 600;
    margin-bottom: 0.4em;
    color: #1a1a1a;
}
.legal-content .legal-contact-body { margin: 0; font-size: 0.95rem; }

/* 特商法テーブル */
.legal-content .legal-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5em;
}
.legal-content .legal-table th,
.legal-content .legal-table td {
    padding: 14px 18px;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
    vertical-align: top;
    font-size: 0.95rem;
}
.legal-content .legal-table th {
    width: 220px;
    background: #f7f8fa;
    font-weight: 600;
    color: #1a1a1a;
    white-space: nowrap;
}
@media (max-width: 640px) {
    .legal-content .legal-table th,
    .legal-content .legal-table td {
        display: block;
        width: 100%;
        white-space: normal;
    }
    .legal-content .legal-table th { border-bottom: none; padding-bottom: 4px; }
    .legal-content .legal-table td { padding-top: 4px; padding-bottom: 14px; }
}

/* 既存の richtext で書かれた法務ページ向けの最低限の整形 */
.legal-content h1, .legal-content h2, .legal-content h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 2em 0 0.75em;
}
.legal-content h1 { font-size: 1.25rem; }

/* ============================================================
 * iOS Safari auto-zoom 防止: focus 時 zoom を起こす入力欄を
 * mobile (<640px) で 16px 以上に強制。PC では既存サイズ維持。
 * ============================================================ */
@media (max-width: 639px) {
  textarea,
  input[type=text],
  input[type=password],
  input[type=datetime],
  input[type=datetime-local],
  input[type=date],
  input[type=month],
  input[type=time],
  input[type=week],
  input[type=number],
  input[type=email],
  input[type=url],
  input[type=search],
  input[type=tel],
  input[type=color],
  select,
  .nice-select,
  .nice-select.small,
  .nice-select .list,
  .wg-quantity input,
  .form-control,
  .form-select {
    font-size: 16px;
  }
}