.ys-aff-landing { --ys-aff-page-bg: #f6f8fb; --ys-aff-surface: #ffffff; --ys-aff-surface-subtle: #f8fafc; --ys-aff-border: #dbe3ef; --ys-aff-border-strong: #cbd5e1; --ys-aff-text: #0f172a; --ys-aff-muted: #64748b; --ys-aff-primary: var(--ys-ec-btn-color, var(--ys-ec-primary, #2563eb)); --ys-aff-primary-strong: var(--ys-ec-primary-dark, #1d4ed8); --ys-aff-price: #c0392b; --ys-aff-disabled-bg: #e5e7eb; --ys-aff-disabled-text: #94a3b8; margin: 0; background: var(--ys-aff-page-bg); color: var(--ys-aff-text); } .ys-aff-landing-container { max-width: 980px; margin: 0 auto; padding: 16px; } .ys-aff-onepage-root { width: 100%; max-width: none; margin: 0; padding: 16px; box-sizing: border-box; container-name: ys-aff-onepage; container-type: inline-size; --ys-aff-page-bg: #f6f8fb; --ys-aff-surface: #ffffff; --ys-aff-surface-subtle: #f8fafc; --ys-aff-border: #dbe3ef; --ys-aff-border-strong: #cbd5e1; --ys-aff-text: #0f172a; --ys-aff-muted: #64748b; --ys-aff-primary: var(--ys-ec-btn-color, var(--ys-ec-primary, #2563eb)); --ys-aff-primary-strong: var(--ys-ec-primary-dark, #1d4ed8); --ys-aff-price: #c0392b; --ys-aff-disabled-bg: #e5e7eb; --ys-aff-disabled-text: #94a3b8; --ys-aff-card-shadow: 0 1px 4px rgba(15, 23, 42, .08); --ys-aff-focus: rgba(37, 99, 235, .18); /* v1.0.68 沾黏分類列的頂端偏移。full 模式自建 、沒有主題 header， 所以恆為 0；只有 shortcode 模式可能需要，由站級 filter `ys_aff_onepage_sticky_offset` 覆寫，不新增資料庫欄位。 */ --ys-aff-sticky-offset: 0px; background: transparent; color: var(--ys-aff-text); } /* * v1.1.0 per-landing content width. `theme` is deliberately identical to the * 1.0.73 default. `full` breaks out of a centered theme container; `manual` * is an independently centered width capped by the actual viewport. Product * side tracks live below this root, so checkout never inherits their narrowing. */ .ys-aff-onepage-root[data-ys-aff-content-width="theme"] { width: 100%; max-width: none; margin-inline: 0; } .ys-aff-onepage-root[data-ys-aff-content-width="full"] { width: var(--ys-aff-viewport-width, 100vw); max-width: var(--ys-aff-viewport-width, 100vw); margin-inline: calc(50% - (var(--ys-aff-viewport-width, 100vw) / 2)); } .ys-aff-onepage-root[data-ys-aff-content-width="manual"] { --ys-aff-manual-effective-width: max(320px, var(--ys-aff-content-width)); width: min(var(--ys-aff-viewport-width, 100vw), var(--ys-aff-manual-effective-width)); max-width: min(var(--ys-aff-viewport-width, 100vw), var(--ys-aff-manual-effective-width)); margin-inline: calc((100% - min(var(--ys-aff-viewport-width, 100vw), var(--ys-aff-manual-effective-width))) / 2); } .ys-aff-onepage-root, .ys-aff-checkout-region { scroll-margin-top: 96px; } .ys-aff-landing[data-ys-aff-theme="dark"], .ys-aff-onepage-root[data-ys-aff-theme="dark"] { --ys-aff-page-bg: #0f172a; --ys-aff-surface: #152238; --ys-aff-surface-subtle: #1d2d49; --ys-aff-border: #33445f; --ys-aff-border-strong: #63849a; --ys-aff-text: #f8fbff; --ys-aff-muted: #b6c3d6; --ys-aff-primary: #38bdf8; --ys-aff-primary-strong: #0ea5e9; --ys-aff-price: #7dd3fc; --ys-aff-disabled-bg: #25344f; --ys-aff-disabled-text: #7f91ad; --ys-aff-card-shadow: none; --ys-aff-focus: rgba(56, 189, 248, .22); --ys-ec-card-bg: var(--ys-aff-surface); --ys-ec-bg: var(--ys-aff-page-bg); --ys-ec-text: var(--ys-aff-text); --ys-ec-text-muted: var(--ys-aff-muted); --ys-ec-border: var(--ys-aff-border); --ys-ec-border-light: var(--ys-aff-border); --ys-ec-primary: var(--ys-aff-primary); --ys-ec-primary-dark: var(--ys-aff-primary); --ys-ec-success: #86efac; background: var(--ys-aff-page-bg); } .ys-aff-landing[data-ys-aff-theme="dark"] { background: var(--ys-aff-page-bg); color: var(--ys-aff-text); } .ys-aff-hero { padding: 32px 0; text-align: center; } /* 外層只負責「分類列 + 內容區」的關係，不再決定商品欄數 */ .ys-aff-product-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 28px; } /* v1.0.68 商品卡容器：auto 規則逐字沿用 1.0.67，預設零行為變化 */ .ys-aff-product-grid__items { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } .ys-aff-product-grid__empty { grid-column: 1 / -1; padding: 32px; text-align: center; } .ys-aff-product-card { display: flex; flex-direction: column; gap: 0; background: var(--ys-aff-surface); border: 1px solid var(--ys-aff-border); border-radius: 8px; padding: 22px; overflow: hidden; box-shadow: var(--ys-aff-card-shadow); } .ys-aff-product-card__image-frame { padding: 0; } .ys-aff-product-card__content { display: flex; flex: 1 1 auto; flex-direction: column; gap: 10px; padding: 20px 0 0; } .ys-aff-product-media { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; background: var(--ys-aff-surface-subtle); color: var(--ys-aff-muted); } .ys-aff-product-card img { width: 100%; height: 100%; object-fit: cover; } .ys-aff-product-media-placeholder { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border: 1px solid var(--ys-aff-border); border-radius: 8px; font-weight: 700; letter-spacing: 0; } .ys-aff-product-card h3 { margin: 0; font-size: clamp(1.18rem, 1rem + .35vw, 1.55rem); line-height: 1.25; color: var(--ys-aff-text); } .ys-aff-product-intro { color: var(--ys-aff-muted); font-size: 1rem; line-height: 1.45; } .ys-aff-product-card .price { margin: 0; color: var(--ys-aff-price); font-size: 1.15rem; font-weight: 700; } .ys-aff-product-price-original { color: var(--ys-aff-muted); font-weight: 500; margin-right: 6px; text-decoration: line-through; } .ys-aff-qty-stepper input:focus, .ys-aff-btn-primary:focus { outline: 3px solid var(--ys-aff-focus); outline-offset: 2px; } .ys-aff-qty-stepper { display: inline-flex; align-items: center; gap: 4px; margin: 2px 0; } .ys-aff-product-card > .ys-aff-qty-stepper { display: grid; grid-template-columns: minmax(34px, 58px) minmax(44px, 1fr) minmax(34px, 58px); width: 100%; margin: 18px 0 0; } .ys-aff-qty-stepper--card-hidden { display: none !important; } .ys-aff-qty-stepper button { width: 100%; height: 48px; border: 1px solid var(--ys-aff-border); border-radius: 6px; background: var(--ys-aff-surface-subtle); color: var(--ys-aff-text); cursor: pointer; font-size: 1.25rem; font-weight: 700; } .ys-aff-qty-stepper.is-disabled { opacity: .62; } .ys-aff-qty-stepper button:disabled, .ys-aff-qty-stepper input:disabled { cursor: not-allowed; background: var(--ys-aff-disabled-bg, #e5e7eb); color: var(--ys-aff-disabled-text, #94a3b8); } .ys-aff-qty-stepper input { width: 56px; min-height: 48px; text-align: center; border: 1px solid var(--ys-aff-border); border-radius: 6px; background: var(--ys-aff-surface); color: var(--ys-aff-text); } .ys-aff-product-card > .ys-aff-qty-stepper input { width: 100%; min-width: 0; box-sizing: border-box; padding-inline: 4px; font-variant-numeric: tabular-nums; appearance: textfield; } .ys-aff-product-card > .ys-aff-qty-stepper input::-webkit-inner-spin-button, .ys-aff-product-card > .ys-aff-qty-stepper input::-webkit-outer-spin-button { margin: 0; appearance: none; } .ys-aff-checkout-region { background: var(--ys-aff-surface); border: 1px solid var(--ys-aff-border); border-radius: 8px; padding: 20px 16px 32px; margin-top: 24px; box-shadow: var(--ys-aff-card-shadow); } .ys-aff-checkout-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .ys-aff-checkout-summary__totals { font-weight: 600; } .ys-aff-checkout-summary__divider { margin: 0 8px; color: var(--ys-aff-muted); } .ys-aff-checkout-summary__hint, .ys-aff-checkout-state { margin: 0; color: var(--ys-aff-muted); font-size: .95rem; } .ys-aff-inline-checkout { margin: 16px auto 0; padding-top: 16px; border-top: 1px solid var(--ys-aff-border); } /* Core 結帳預設有 1140px 上限；一頁式內必須跟隨本頁內容寬度。 */ .ys-aff-onepage-root .ys-aff-inline-checkout .ys-ec-checkout-wrapper { width: 100%; max-width: none; margin-right: 0; margin-left: 0; box-sizing: border-box; } .ys-aff-checkout-state--error { color: #ef4444; } .ys-aff-checkout-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ys-aff-checkout-fallback { color: var(--ys-aff-primary); font-weight: 600; text-decoration: none; } .ys-aff-btn-primary { background: var(--ys-aff-primary); color: #fff; border: 0; padding: 12px 20px; border-radius: 6px; cursor: pointer; font-size: 1rem; font-weight: 600; } .ys-aff-product-card > .ys-aff-btn-primary { width: 100%; min-height: 56px; margin: 16px 0 0; font-size: 1.05rem; } .ys-aff-btn-primary:hover { background: var(--ys-aff-primary-strong); } .ys-aff-btn-primary:disabled { background: var(--ys-aff-disabled-bg, #e5e7eb); color: var(--ys-aff-disabled-text, #94a3b8); cursor: not-allowed; } .ys-aff-variant-modal[hidden] { display: none !important; } .ys-aff-variant-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; } .ys-aff-variant-modal__overlay { position: absolute; inset: 0; background: rgba(15, 23, 42, .58); } .ys-aff-variant-modal__dialog { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(180px, 280px) minmax(280px, 420px); gap: 20px; width: min(760px, 100%); max-height: min(680px, calc(100vh - 40px)); overflow: auto; background: var(--ys-aff-surface); border: 1px solid var(--ys-aff-border); border-radius: 8px; color: var(--ys-aff-text); padding: 18px; box-shadow: 0 18px 50px rgba(15, 23, 42, .2); } .ys-aff-variant-modal__close { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border: 1px solid var(--ys-aff-border); border-radius: 999px; background: var(--ys-aff-surface); color: var(--ys-aff-text); cursor: pointer; font-size: 20px; line-height: 1; } .ys-aff-variant-modal__media { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 8px; background: var(--ys-aff-surface-subtle); color: var(--ys-aff-muted); } .ys-aff-variant-modal__media img { width: 100%; height: 100%; object-fit: cover; } .ys-aff-variant-modal__main { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding-right: 28px; } .ys-aff-variant-modal__main h3, .ys-aff-variant-modal__price { margin: 0; } .ys-aff-variant-modal__price { color: var(--ys-aff-price); font-size: 1.15rem; font-weight: 700; } .ys-aff-variant-modal__options { display: grid; gap: 8px; } .ys-aff-variant-modal__group { display: grid; gap: 8px; } .ys-aff-variant-modal__group-label { color: var(--ys-aff-text); font-size: .92rem; font-weight: 700; } .ys-aff-variant-modal__selected-value { color: var(--ys-aff-muted); font-weight: 600; } .ys-aff-variant-modal__choice-row { display: flex; flex-wrap: wrap; gap: 8px; } .ys-aff-variant-modal__choice { min-width: 52px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--ys-aff-border); border-radius: 8px; background: var(--ys-aff-surface); color: var(--ys-aff-text); cursor: pointer; font-weight: 700; text-align: center; } .ys-aff-variant-modal__choice:hover, .ys-aff-variant-modal__choice.is-selected { border-color: var(--ys-aff-primary); background: var(--ys-aff-primary-soft); box-shadow: 0 0 0 3px var(--ys-aff-focus); } .ys-aff-variant-modal__choice:disabled { background: var(--ys-aff-disabled-bg); color: var(--ys-aff-disabled-text); cursor: not-allowed; box-shadow: none; } .ys-aff-variant-modal__option { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--ys-aff-border); border-radius: 8px; background: var(--ys-aff-surface); color: var(--ys-aff-text); cursor: pointer; text-align: left; } .ys-aff-variant-modal__option:hover, .ys-aff-variant-modal__option.is-selected { border-color: var(--ys-aff-primary); box-shadow: 0 0 0 3px var(--ys-aff-focus); } .ys-aff-variant-modal__option:disabled { background: var(--ys-aff-disabled-bg); color: var(--ys-aff-disabled-text); cursor: not-allowed; box-shadow: none; } .ys-aff-variant-modal__option-label { font-weight: 700; } .ys-aff-variant-modal__option-meta, .ys-aff-variant-modal__message { color: var(--ys-aff-muted); font-size: .9rem; } .ys-aff-variant-modal__message.is-error { color: #ef4444; } .ys-aff-variant-modal__qty { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; gap: 4px; } .ys-aff-variant-modal__qty button, .ys-aff-variant-modal__qty input { min-height: 36px; border: 1px solid var(--ys-aff-border); background: var(--ys-aff-surface); color: var(--ys-aff-text); } .ys-aff-variant-modal__qty button { cursor: pointer; } .ys-aff-variant-modal__qty input { border-radius: 6px; text-align: center; } .ys-aff-modal-open { overflow: hidden; } .ys-aff-onepage-root[data-ys-aff-theme="dark"] .ys-aff-inline-checkout .ys-ec-checkout-section, .ys-aff-onepage-root[data-ys-aff-theme="dark"] .ys-aff-inline-checkout .ys-ec-order-summary { background: var(--ys-aff-surface); border-color: var(--ys-aff-border); box-shadow: none; color: var(--ys-aff-text); } .ys-aff-onepage-root[data-ys-aff-theme="dark"] .ys-aff-inline-checkout .ys-ec-section-title, .ys-aff-onepage-root[data-ys-aff-theme="dark"] .ys-aff-inline-checkout .ys-ec-order-summary h3 { color: var(--ys-aff-text); border-color: var(--ys-aff-border-strong); } .ys-aff-onepage-root[data-ys-aff-theme="dark"] .ys-aff-inline-checkout input, .ys-aff-onepage-root[data-ys-aff-theme="dark"] .ys-aff-inline-checkout select, .ys-aff-onepage-root[data-ys-aff-theme="dark"] .ys-aff-inline-checkout textarea { background: #111c30; border-color: var(--ys-aff-border); color: var(--ys-aff-text); } .ys-aff-onepage-root[data-ys-aff-theme="dark"] .ys-aff-inline-checkout input::placeholder, .ys-aff-onepage-root[data-ys-aff-theme="dark"] .ys-aff-inline-checkout textarea::placeholder { color: #8ea0bc; } .ys-aff-onepage-root[data-ys-aff-theme="dark"] .ys-aff-inline-checkout .ys-ec-card-option, .ys-aff-onepage-root[data-ys-aff-theme="dark"] .ys-aff-inline-checkout .ys-ec-shipping-method, .ys-aff-onepage-root[data-ys-aff-theme="dark"] .ys-aff-inline-checkout .ys-ec-payment-method { background: var(--ys-aff-surface-subtle); border-color: var(--ys-aff-border); color: var(--ys-aff-text); } .ys-aff-onepage-root[data-ys-aff-theme="dark"] .ys-aff-inline-checkout .ys-ec-card-option.is-selected, .ys-aff-onepage-root[data-ys-aff-theme="dark"] .ys-aff-inline-checkout .ys-ec-card-option.selected { border-color: var(--ys-aff-primary); } .ys-aff-onepage-root[data-ys-aff-theme="dark"] .ys-aff-inline-checkout .ys-ec-checkout-submit-mobile { background: var(--ys-aff-surface); border-color: var(--ys-aff-border); box-shadow: none; } .ys-aff-onepage-hide-cart-chrome .ys-aff-product-card { scroll-margin-top: 24px; } body.ys-aff-onepage-hide-cart-chrome .ys-ec-mini-cart, body.ys-aff-onepage-hide-cart-chrome .ys-ec-floating-cart, body.ys-aff-onepage-hide-cart-chrome .ys-ec-cart-float, body.ys-aff-onepage-hide-cart-chrome [data-ys-ec-mini-cart], body.ys-aff-onepage-hide-cart-chrome [data-ys-ec-floating-cart] { display: none !important; } @media (max-width: 680px) { .ys-aff-variant-modal { align-items: flex-end; padding: 12px; } .ys-aff-variant-modal__dialog { grid-template-columns: 1fr; max-height: calc(100vh - 24px); padding: 16px; } .ys-aff-variant-modal__media { max-height: 240px; } .ys-aff-variant-modal__main { padding-right: 0; } } /* ── v1.0.66 分類篩選側欄（選用） ─────────────────────────── */ .ys-aff-product-grid--with-filter { grid-template-columns: 220px minmax(0, 1fr); align-items: start; } .ys-aff-category-filter { grid-column: 1; grid-row: 1; position: sticky; top: 24px; display: flex; flex-direction: column; gap: 8px; } /* * v1.0.72：手機版分類列不再折疊，展開鈕隨之移除。 * 下拉選單只存在於 select 模式且只在手機斷點可見； * 桌機一律走按鈕列，所以這裡無條件藏起來。 */ .ys-aff-category-filter__select-label, .ys-aff-category-filter__select { display: none; } .ys-aff-category-filter__list { display: flex; flex-direction: column; gap: 6px; } .ys-aff-category-filter__item { appearance: none; border: 1px solid rgba(0, 0, 0, 0.12); background: #fff; color: inherit; border-radius: 8px; padding: 10px 14px; text-align: left; font-size: 14px; line-height: 1.4; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; } .ys-aff-category-filter__item:hover { border-color: rgba(0, 0, 0, 0.28); } .ys-aff-category-filter__item.is-active { background: #111; border-color: #111; color: #fff; } [data-ys-aff-theme="dark"] .ys-aff-category-filter__item { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.18); } [data-ys-aff-theme="dark"] .ys-aff-category-filter__item.is-active { background: #fff; border-color: #fff; color: #111; } .ys-aff-card-filtered-out { display: none !important; } @media (max-width: 782px) { .ys-aff-product-grid--with-filter { grid-template-columns: minmax(0, 1fr); } .ys-aff-category-filter { grid-column: 1; grid-row: auto; position: static; } /* * v1.0.72 inline（預設）：分類列在手機上**直接橫向展開**。 * 🔴 1.0.71 以前這裡是 `display: none` 加一個 `.is-open` 才顯示—— * 分類完全不可見，使用者要先知道那顆按鈕可以點。本版拿掉折疊。 */ .ys-aff-category-filter__list { display: flex; flex-direction: row; flex-wrap: wrap; } /* select 模式：手機改用下拉，按鈕列讓位（但留在 DOM 裡供 JS 同步狀態）。 */ .ys-aff-category-filter--mobile-select .ys-aff-category-filter__list { display: none; } .ys-aff-category-filter--mobile-select .ys-aff-category-filter__select-label { display: block; font-size: 13px; line-height: 1.4; margin-bottom: 6px; opacity: 0.75; } .ys-aff-category-filter--mobile-select .ys-aff-category-filter__select { display: block; width: 100%; appearance: none; border: 1px solid rgba(0, 0, 0, 0.12); background: #fff; color: inherit; border-radius: 8px; padding: 10px 14px; font-size: 14px; line-height: 1.4; cursor: pointer; } [data-ys-aff-theme="dark"] .ys-aff-category-filter--mobile-select .ys-aff-category-filter__select { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.18); color: inherit; } } /* ── v1.0.68 商品欄數與頂部橫向分類列 ─────────────────────── */ /* * 欄數只設一組「桌機值」，平板／手機由下方斷點推導。 * 選擇器走 data 屬性而非 inline style：樣板一旦出現 `style=`， * v10024 的硬性斷言就會紅。 */ [data-ys-aff-cols="2"] > .ys-aff-product-grid__items { grid-template-columns: repeat(2, minmax(0, 1fr)); } [data-ys-aff-cols="3"] > .ys-aff-product-grid__items { grid-template-columns: repeat(3, minmax(0, 1fr)); } [data-ys-aff-cols="4"] > .ys-aff-product-grid__items { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* 4 欄不放寬 980px 容器（那是全站一頁式版面基準）：改把側欄縮到 180px */ [data-ys-aff-cols="4"][data-ys-aff-nav-position="side"].ys-aff-product-grid--with-filter { grid-template-columns: 180px minmax(0, 1fr); } /* 頂部模式：分類列整列跨滿，內容區獨佔一條 track */ [data-ys-aff-nav-position="top"].ys-aff-product-grid--with-filter { grid-template-columns: minmax(0, 1fr); } .ys-aff-category-filter--top { grid-column: 1 / -1; grid-row: auto; position: static; top: auto; } .ys-aff-category-filter--top .ys-aff-category-filter__list { flex-direction: row; flex-wrap: wrap; } /* * 頂部分類列嵌在主題內容區時，不應再疊一層黑／白按鈕底色。 * active 以邊框、文字與字重表達；side 模式維持原有填色外觀。 */ .ys-aff-category-filter--top .ys-aff-category-filter__item { background: transparent; } .ys-aff-category-filter--top .ys-aff-category-filter__item:hover { background: transparent; border-color: var(--ys-aff-border-strong); } .ys-aff-category-filter--top .ys-aff-category-filter__item.is-active { background: transparent; border-color: var(--ys-aff-primary); color: var(--ys-aff-primary-strong); font-weight: 600; } [data-ys-aff-theme="dark"] .ys-aff-category-filter--top .ys-aff-category-filter__item { background: transparent; border-color: var(--ys-aff-border-strong); color: var(--ys-aff-primary); } [data-ys-aff-theme="dark"] .ys-aff-category-filter--top .ys-aff-category-filter__item.is-active { background: transparent; border-color: var(--ys-aff-primary); color: var(--ys-aff-primary); } .ys-aff-category-filter--top .ys-aff-category-filter__item:focus-visible { outline: 3px solid var(--ys-aff-focus); outline-offset: 2px; } /* * 🔴 沾黏只作用於 top。side 模式自 1.0.66 起就無條件 sticky； * 讓預設 0 的新旗標連帶管 side＝把既有站台的側欄沾黏關掉。 * 陰影值刻意避開 v10037 禁用的兩個字面。 */ .ys-aff-category-filter--top.ys-aff-category-filter--sticky { position: sticky; top: var(--ys-aff-sticky-offset, 0px); z-index: 20; background: var(--ys-aff-surface, #fff); padding: 8px 0; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06); } .ys-aff-category-filter__status { margin: 0; font-size: 13px; color: var(--ys-aff-muted, #64748b); } /* * 沾黏列會蓋住捲動錨點（JS 回跳結帳區用 scrollIntoView block:'start'）。 * 只在沾黏開啟時讓出 bar 高度，不動 1.0.50 既有的 96px 錨點規則。 */ [data-ys-aff-nav-position="top"]:has(.ys-aff-category-filter--sticky) .ys-aff-product-card, .ys-aff-onepage-root:has(.ys-aff-category-filter--sticky) [data-ys-aff-checkout-region] { scroll-margin-top: calc(var(--ys-aff-sticky-offset, 0px) + 64px); } @media (max-width: 1024px) { [data-ys-aff-cols="3"] > .ys-aff-product-grid__items, [data-ys-aff-cols="4"] > .ys-aff-product-grid__items { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 側欄回到 220px：平板上限 2 欄，不需要為 4 欄擠側欄 */ [data-ys-aff-cols="4"][data-ys-aff-nav-position="side"].ys-aff-product-grid--with-filter { grid-template-columns: 220px minmax(0, 1fr); } } @media (max-width: 782px) { /* * 🔴 手機一律堆疊。:697 的單欄設定只有 0,1,0，壓不過 4 欄那兩條 * `[data-ys-aff-cols="4"][data-ys-aff-nav-position="side"].ys-aff-product-grid--with-filter`（0,3,0）—— * 不補這條，手機上選了 4 欄的頁面會繼續留著側欄軌道。 */ [data-ys-aff-cols][data-ys-aff-nav-position="side"].ys-aff-product-grid--with-filter, [data-ys-aff-cols][data-ys-aff-nav-position="top"].ys-aff-product-grid--with-filter { grid-template-columns: minmax(0, 1fr); } /* * 🔴 特異度必須壓過上一段 782px 區塊的 `.ys-aff-category-filter { position: static; }` * （0,1,0）——否則手機沾黏會被安靜地關掉。這裡是 0,2,0。 */ [data-ys-aff-nav-position="top"] .ys-aff-category-filter--sticky { position: sticky; top: var(--ys-aff-sticky-offset, 0px); } /* * 手機頂列改單行水平捲動。 * 🔴 select 模式不適用這條：下面多一層 --mobile-select 把 list 藏起來， * 而這條的特異度（0,3,0）高於它（0,2,0），所以必須把 select 排除掉， * 否則 top+select 會同時出現下拉與按鈕列。 */ [data-ys-aff-nav-position="top"] .ys-aff-category-filter--top:not( .ys-aff-category-filter--mobile-select ) .ys-aff-category-filter__list { display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } [data-ys-aff-nav-position="top"] .ys-aff-category-filter__item { flex: 0 0 auto; scroll-snap-align: start; } } @media (max-width: 640px) { [data-ys-aff-cols] > .ys-aff-product-grid__items { grid-template-columns: minmax(0, 1fr); } } /* * Manual widths can make a landing narrower than the browser viewport. These * component breakpoints mirror the viewport fallbacks above using the root's * real content box. Product/category descendants alone own side tracks; * checkout remains the next full-width root sibling. */ @container ys-aff-onepage (max-width: 900px) { .ys-aff-onepage-root[data-ys-aff-content-width="manual"] [data-ys-aff-cols="3"] > .ys-aff-product-grid__items, .ys-aff-onepage-root[data-ys-aff-content-width="manual"] [data-ys-aff-cols="4"] > .ys-aff-product-grid__items { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container ys-aff-onepage (max-width: 782px) { .ys-aff-onepage-root[data-ys-aff-content-width="manual"] [data-ys-aff-cols][data-ys-aff-nav-position="side"].ys-aff-product-grid--with-filter, .ys-aff-onepage-root[data-ys-aff-content-width="manual"] [data-ys-aff-cols][data-ys-aff-nav-position="top"].ys-aff-product-grid--with-filter { grid-template-columns: minmax(0, 1fr); } } /* Core checkout media queries follow the viewport. A narrow manual root needs * the equivalent structural single-column rule without moving checkout into * the category/product grid. */ @container ys-aff-onepage (max-width: 768px) { .ys-aff-onepage-root[data-ys-aff-content-width="manual"] .ys-aff-inline-checkout .ys-ec-checkout-columns, .ys-aff-onepage-root[data-ys-aff-content-width="manual"] .ys-aff-inline-checkout .ys-ec-checkout-content { grid-template-columns: minmax(0, 1fr); gap: 0; } .ys-aff-onepage-root[data-ys-aff-content-width="manual"] .ys-aff-inline-checkout .ys-ec-checkout-sidebar { position: static; order: -1; margin-bottom: 20px; } .ys-aff-onepage-root[data-ys-aff-content-width="manual"] .ys-aff-inline-checkout .ys-ec-form-row-half, .ys-aff-onepage-root[data-ys-aff-content-width="manual"] .ys-aff-inline-checkout .ys-ec-info-grid { grid-template-columns: minmax(0, 1fr); } .ys-aff-onepage-root[data-ys-aff-content-width="manual"] .ys-aff-inline-checkout .ys-ec-checkout-section { padding: 16px; } .ys-aff-onepage-root[data-ys-aff-content-width="manual"] .ys-aff-inline-checkout .ys-ec-checkout-top-review .ys-ec-table thead { display: none; } .ys-aff-onepage-root[data-ys-aff-content-width="manual"] .ys-aff-inline-checkout .ys-ec-checkout-top-review .ys-ec-table tbody { display: grid; gap: 0; } .ys-aff-onepage-root[data-ys-aff-content-width="manual"] .ys-aff-inline-checkout .ys-ec-checkout-top-review .ys-ec-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(108px, auto); grid-template-areas: "product product" "price total" "qty remove"; gap: 0; padding: 0 0 12px; border: 0; border-radius: 0; background: transparent; overflow: visible; } .ys-aff-onepage-root[data-ys-aff-content-width="manual"] .ys-aff-inline-checkout .ys-ec-checkout-top-review .ys-ec-table tbody tr + tr { padding-top: 12px; border-top: 1px solid var(--ys-ec-border-light); } .ys-aff-onepage-root[data-ys-aff-content-width="manual"] .ys-aff-inline-checkout .ys-ec-checkout-top-review .ys-ec-table tbody td { border: 0; padding: 10px 16px 8px; } .ys-aff-onepage-root[data-ys-aff-content-width="manual"] .ys-aff-inline-checkout .ys-ec-checkout-top-review .ys-ec-td-product { grid-area: product; width: auto; border-bottom: 0; } .ys-aff-onepage-root[data-ys-aff-content-width="manual"] .ys-aff-inline-checkout .ys-ec-checkout-top-review .ys-ec-item-row { align-items: center; gap: 14px; } .ys-aff-onepage-root[data-ys-aff-content-width="manual"] .ys-aff-inline-checkout .ys-ec-checkout-top-review .ys-ec-item-thumb { width: 76px; height: 76px; border-radius: 8px; flex: 0 0 76px; } .ys-aff-onepage-root[data-ys-aff-content-width="manual"] .ys-aff-inline-checkout .ys-ec-checkout-top-review .ys-ec-item-title { font-size: 17px; line-height: 1.35; } .ys-aff-onepage-root[data-ys-aff-content-width="manual"] .ys-aff-inline-checkout .ys-ec-checkout-top-review .ys-ec-td-price { grid-area: price; } .ys-aff-onepage-root[data-ys-aff-content-width="manual"] .ys-aff-inline-checkout .ys-ec-checkout-top-review .ys-ec-td-qty { grid-area: qty; } .ys-aff-onepage-root[data-ys-aff-content-width="manual"] .ys-aff-inline-checkout .ys-ec-checkout-top-review .ys-ec-td-total { grid-area: total; align-self: center; justify-content: flex-end; } .ys-aff-onepage-root[data-ys-aff-content-width="manual"] .ys-aff-inline-checkout .ys-ec-checkout-top-review .ys-ec-td-price, .ys-aff-onepage-root[data-ys-aff-content-width="manual"] .ys-aff-inline-checkout .ys-ec-checkout-top-review .ys-ec-td-qty, .ys-aff-onepage-root[data-ys-aff-content-width="manual"] .ys-aff-inline-checkout .ys-ec-checkout-top-review .ys-ec-td-total { display: flex; align-items: center; min-width: 0; text-align: left; } .ys-aff-onepage-root[data-ys-aff-content-width="manual"] .ys-aff-inline-checkout .ys-ec-checkout-top-review .ys-ec-td-remove { grid-area: remove; align-self: center; justify-self: end; padding-left: 4px; } .ys-aff-onepage-root[data-ys-aff-content-width="manual"] .ys-aff-inline-checkout .ys-ec-checkout-top-review .ys-ec-td-price::before, .ys-aff-onepage-root[data-ys-aff-content-width="manual"] .ys-aff-inline-checkout .ys-ec-checkout-top-review .ys-ec-td-qty::before, .ys-aff-onepage-root[data-ys-aff-content-width="manual"] .ys-aff-inline-checkout .ys-ec-checkout-top-review .ys-ec-td-total::before { content: attr(data-label) "\FF1A"; display: inline-block; flex: 0 0 auto; min-width: 42px; margin-right: 8px; font-size: 14px; color: var(--ys-ec-text-muted); } .ys-aff-onepage-root[data-ys-aff-content-width="manual"] .ys-aff-inline-checkout .ys-ec-checkout-top-review .ys-ec-qty-control { display: inline-flex; flex: 1 1 auto; min-width: 0; max-width: 164px; vertical-align: middle; } .ys-aff-onepage-root[data-ys-aff-content-width="manual"] .ys-aff-inline-checkout .ys-ec-checkout-top-review .ys-ec-qty-sm .ys-ec-qty-btn { flex: 0 0 30px; width: 30px; min-width: 30px; height: 34px; min-height: 34px; } .ys-aff-onepage-root[data-ys-aff-content-width="manual"] .ys-aff-inline-checkout .ys-ec-checkout-top-review .ys-ec-qty-sm .ys-ec-qty-input { flex: 1 1 58px; width: clamp(48px, 16vw, 82px); min-width: 48px; height: 34px; min-height: 34px; padding-inline: 4px; } .ys-aff-onepage-root[data-ys-aff-content-width="manual"] .ys-aff-inline-checkout .ys-ec-credit-input-row { grid-template-columns: minmax(0, 1fr) auto; } .ys-aff-onepage-root[data-ys-aff-content-width="manual"] .ys-aff-inline-checkout .ys-ec-credit-input-row label, .ys-aff-onepage-root[data-ys-aff-content-width="manual"] .ys-aff-inline-checkout .ys-ec-credit-use-max { grid-column: 1 / -1; width: 100%; } .ys-aff-onepage-root[data-ys-aff-content-width="manual"] .ys-aff-inline-checkout .ys-ec-credit-input-group { min-width: 120px; } } @container ys-aff-onepage (max-width: 640px) { .ys-aff-onepage-root[data-ys-aff-content-width="manual"] [data-ys-aff-cols] > .ys-aff-product-grid__items { grid-template-columns: minmax(0, 1fr); } } /* At the physical 320px floor, the Core mobile table's shared qty/remove row * still leaves less than the 30+48+30 control contract. Give both controls a * full row instead of shrinking the numeric track out of view. */ @container ys-aff-onepage (max-width: 480px) { .ys-aff-onepage-root[data-ys-aff-content-width="manual"] .ys-aff-inline-checkout .ys-ec-checkout-top-review .ys-ec-table tbody tr { grid-template-areas: "product product" "price total" "qty qty" "remove remove"; } .ys-aff-onepage-root[data-ys-aff-content-width="manual"] .ys-aff-inline-checkout .ys-ec-checkout-top-review .ys-ec-td-remove { width: 100%; justify-self: stretch; text-align: right; } }