/* Storefront theme. */

:root {
    --sf-bg:          #ffffff;
    --sf-surface:     #f8fafc;
    --sf-border:      #e2e8f0;
    --sf-text:        #0f172a;
    --sf-muted:       #64748b;
    --sf-accent:      #ff5722;
    --sf-accent-hover:#e64a19;
    --sf-danger:      #dc2626;
    --sf-radius:      8px;
    --sf-shadow:      0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
    --sf-font:        system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body.sf-body {
    font-family: var(--sf-font);
    background: var(--sf-bg);
    color: var(--sf-text);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ----------------------------------------------------------- banners */

.sf-banner {
    padding: 10px 16px;
    text-align: center;
    font-size: 14px;
    position: relative;
}

.sf-banner-sticky {
    position: sticky;
    top: 0;
    z-index: 30;
}

.sf-banner-marquee {
    overflow: hidden;
    white-space: nowrap;
    text-align: start;
    direction: ltr;
}

/* Only the text moves: the track starts fully outside the right edge
   (padding-left equals the banner width), crosses to the left edge, repeats. */
.sf-marquee-track {
    display: inline-block;
    padding-left: 100%;
    white-space: nowrap;
    will-change: transform;
    animation: sf-marquee 18s linear infinite;
}

.sf-banner-marquee:hover .sf-marquee-track { animation-play-state: paused; }

@keyframes sf-marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
    .sf-marquee-track { animation: none; padding-left: 0; }
}

.sf-banner-close {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    font-size: 20px;
    line-height: 1;
    color: inherit;
    cursor: pointer;
    opacity: 0.6;
}

.sf-banner-close:hover { opacity: 1; }

/* ----------------------------------------------------------- header */

.sf-header {
    background: var(--sf-bg);
    border-bottom: 1px solid var(--sf-border);
    position: sticky;
    top: 0;
    z-index: 20;
}

.sf-header-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 12px 24px;
    max-width: 1280px;
    margin: 0 auto;
}

.sf-logo {
    font-size: 20px;
    font-weight: 700;
    color: var(--sf-accent);
    flex-shrink: 0;
}

.sf-nav {
    display: flex;
    gap: 18px;
    flex: 1;
    overflow: visible; /* dropdowns must not be clipped */
}

.sf-nav a {
    font-size: 14px;
    color: var(--sf-text);
    white-space: nowrap;
    padding: 4px 0;
}

.sf-nav a:hover { color: var(--sf-accent); }

.sf-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.sf-search input {
    width: 220px;
    padding: 7px 12px;
    border: 1px solid var(--sf-border);
    border-radius: 999px;
    font: inherit;
    font-size: 13px;
    outline: none;
    background: var(--sf-surface);
}

.sf-search input:focus {
    background: var(--sf-bg);
    border-color: var(--sf-accent);
}

.sf-cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: var(--sf-text);
}

.sf-cart:hover { color: var(--sf-accent); }

.sf-cart-count {
    position: absolute;
    top: -6px;
    right: -8px;
    background: var(--sf-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 999px;
    min-width: 18px;
    text-align: center;
}

.sf-lang-select {
    font: inherit;
    font-size: 13px;
    padding: 4px 6px;
    border: 1px solid var(--sf-border);
    border-radius: 6px;
    background: var(--sf-bg);
    cursor: pointer;
}

/* ------------------------------------------------------------ main */

.sf-main {
    min-height: 60vh;
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px;
}

/* ------------------------------------------------------------ hero */

.sf-hero {
    text-align: center;
    padding: 48px 24px;
    background: linear-gradient(135deg, var(--sf-surface), #eef2f7);
    border-radius: 12px;
    margin-bottom: 32px;
}

.sf-hero-title {
    font-size: 36px;
    font-weight: 700;
    margin: 0 0 12px;
    letter-spacing: -0.02em;
}

.sf-hero-sub {
    font-size: 16px;
    color: var(--sf-muted);
    margin: 0 0 24px;
}

/* -------------------------------------------------------- sections */

.sf-section {
    margin-bottom: 40px;
}

.sf-section-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 16px;
}

.sf-section-more {
    text-align: center;
    margin-top: 20px;
}

/* ---------------------------------------------------- category strip */

.sf-category-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.sf-category-card {
    background: var(--sf-surface);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    padding: 12px;
    text-align: center;
    transition: transform 120ms ease, border-color 120ms ease;
}

.sf-category-card:hover {
    transform: translateY(-2px);
    border-color: var(--sf-accent);
}

.sf-category-card img {
    width: 100%;
    height: 90px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 8px;
}

.sf-category-name {
    font-size: 13px;
    font-weight: 500;
}

/* ------------------------------------------------------------ grid */

.sf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.sf-card {
    display: flex;
    flex-direction: column;
    background: var(--sf-bg);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    overflow: hidden;
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.sf-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(15,23,42,0.08);
}

.sf-card-image {
    position: relative;
    aspect-ratio: 1;
    background: var(--sf-surface);
    overflow: hidden;
}

.sf-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sf-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--sf-danger);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 7px;
    border-radius: 4px;
}

.sf-card-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sf-card-title {
    font-size: 13px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}

.sf-card-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 15px;
}

.sf-price-now {
    color: var(--sf-accent);
    font-weight: 600;
}

.sf-price-old {
    color: var(--sf-muted);
    font-size: 12px;
    font-weight: 400;
}

.sf-price-lg { font-size: 26px; }
.sf-price-lg-old { font-size: 16px; }

.sf-card-rating {
    font-size: 12px;
    color: #f59e0b;
    letter-spacing: -1px;
}

.sf-rating-text {
    color: var(--sf-muted);
    margin-left: 6px;
    letter-spacing: normal;
}

/* ------------------------------------------------------ breadcrumb */

.sf-breadcrumb {
    font-size: 13px;
    color: var(--sf-muted);
    margin-bottom: 16px;
}

.sf-breadcrumb a { color: var(--sf-muted); }
.sf-breadcrumb a:hover { color: var(--sf-accent); }

/* ------------------------------------------------------- page head */

.sf-page-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.sf-page-title {
    font-size: 26px;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.01em;
}

.sf-page-count {
    color: var(--sf-muted);
    font-size: 13px;
}

/* ---------------------------------------------------- filter chips */

.sf-filter-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.sf-chip {
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--sf-surface);
    border: 1px solid var(--sf-border);
    font-size: 13px;
    white-space: nowrap;
    transition: background 100ms ease, color 100ms ease;
}

.sf-chip:hover {
    border-color: var(--sf-accent);
    color: var(--sf-accent);
}

.sf-chip.is-active {
    background: var(--sf-accent);
    border-color: var(--sf-accent);
    color: #fff;
}

/* ------------------------------------------------------- pagination */

.sf-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 32px;
}

.sf-pagination-info {
    color: var(--sf-muted);
    font-size: 13px;
}

/* ------------------------------------------------------------ product */

.sf-product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 48px;
}

@media (max-width: 800px) {
    .sf-product {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.sf-product-gallery {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sf-gallery-main {
    aspect-ratio: 1;
    background: var(--sf-surface);
    border-radius: var(--sf-radius);
    overflow: hidden;
}

.sf-gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sf-gallery-thumbs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
}

.sf-gallery-thumbs img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--sf-border);
    cursor: pointer;
    flex-shrink: 0;
}

.sf-gallery-thumbs img:hover { border-color: var(--sf-accent); }

.sf-product-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sf-product-title {
    font-size: 28px;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.02em;
}

.sf-product-rating {
    font-size: 14px;
    color: #f59e0b;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sf-product-rating span {
    color: var(--sf-muted);
    font-size: 13px;
    letter-spacing: normal;
}

.sf-product-price {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.sf-product-sku {
    font-size: 13px;
    color: var(--sf-muted);
}

.sf-product-sku code {
    background: var(--sf-surface);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

.sf-option-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sf-option-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--sf-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sf-option-values {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sf-option-value {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    border: 2px solid var(--sf-border);
    border-radius: var(--sf-radius);
    background: var(--sf-bg);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    transition: border-color 100ms ease;
    min-width: 60px;
}

.sf-option-value img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
}

.sf-option-value:hover { border-color: var(--sf-accent); }

.sf-option-value.is-active {
    border-color: var(--sf-accent);
    background: rgba(255,87,34,0.05);
}

.sf-product-actions {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    flex-wrap: wrap;
    padding-top: 8px;
}

.sf-qty {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--sf-muted);
}

.sf-qty input {
    width: 70px;
    padding: 10px 12px;
    font: inherit;
    font-size: 14px;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    background: var(--sf-bg);
}

.sf-out-of-stock {
    color: var(--sf-danger);
    font-weight: 500;
    margin: 0;
}

.sf-merch {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--sf-surface);
    border-radius: var(--sf-radius);
    padding: 14px 16px;
    font-size: 13px;
}

.sf-merch-item {
    display: flex;
    gap: 10px;
}

.sf-merch-label {
    font-weight: 500;
    min-width: 80px;
    color: var(--sf-muted);
}

.sf-product-desc {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--sf-border);
}

.sf-product-desc h2 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px;
}

.sf-product-desc div {
    color: var(--sf-text);
    white-space: pre-wrap;
    line-height: 1.7;
}

/* ------------------------------------------------------------ reviews */

.sf-reviews {
    border-top: 1px solid var(--sf-border);
    padding-top: 32px;
}

.sf-reviews h2 {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 20px;
}

.sf-review {
    padding: 16px;
    background: var(--sf-surface);
    border-radius: var(--sf-radius);
    margin-bottom: 12px;
}

.sf-review-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    align-items: baseline;
    flex-wrap: wrap;
}

.sf-review-stars {
    color: #f59e0b;
    letter-spacing: -1px;
}

.sf-review-body {
    margin: 8px 0;
    line-height: 1.6;
}

.sf-review-photos {
    display: flex;
    gap: 8px;
    margin: 10px 0;
    flex-wrap: wrap;
}

.sf-review-photos img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--sf-border);
}

.sf-review-reply {
    background: var(--sf-bg);
    border-left: 3px solid var(--sf-accent);
    padding: 10px 14px;
    margin-top: 10px;
    border-radius: 0 6px 6px 0;
}

.sf-review-reply-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--sf-muted);
    letter-spacing: 0.05em;
}

.sf-review-reply p {
    margin: 4px 0 0;
    font-size: 14px;
}

/* ----------------------------------------------------------- buttons */

.sf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    background: var(--sf-bg);
    color: var(--sf-text);
    cursor: pointer;
    transition: background 100ms ease, border-color 100ms ease;
    text-decoration: none;
    white-space: nowrap;
}

.sf-btn:hover { background: var(--sf-surface); }
.sf-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.sf-btn-primary {
    background: var(--sf-accent);
    border-color: var(--sf-accent);
    color: #fff;
}

.sf-btn-primary:hover {
    background: var(--sf-accent-hover);
    border-color: var(--sf-accent-hover);
}

.sf-btn-buy {
    background: #111827;
    border-color: #111827;
    color: #fff;
}

.sf-btn-buy:hover { background: #1f2937; }

.sf-btn-block { width: 100%; }

/* ------------------------------------------------------------- cart */

.sf-cart-page { max-width: 900px; margin: 0 auto; }

.sf-cart-items {
    background: var(--sf-bg);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    margin-bottom: 20px;
    overflow: hidden;
}

.sf-cart-item {
    display: grid;
    grid-template-columns: 80px 1fr auto auto 32px;
    gap: 16px;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--sf-border);
}

.sf-cart-item:last-child { border-bottom: none; }

.sf-cart-thumb {
    width: 80px;
    height: 80px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--sf-surface);
}

.sf-cart-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sf-cart-title {
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 4px;
}

.sf-cart-price {
    color: var(--sf-muted);
    font-size: 13px;
}

.sf-cart-qty {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sf-cart-qty-btn {
    width: 28px;
    height: 28px;
    border: 1px solid var(--sf-border);
    background: var(--sf-bg);
    border-radius: 6px;
    font: inherit;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.sf-cart-qty-btn:hover { background: var(--sf-surface); }

.sf-cart-qty-num {
    min-width: 24px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.sf-cart-line-total {
    font-weight: 600;
    text-align: right;
    min-width: 80px;
}

.sf-cart-remove {
    background: transparent;
    border: none;
    font-size: 20px;
    color: var(--sf-muted);
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}

.sf-cart-remove:hover { color: var(--sf-danger); }

.sf-cart-summary {
    background: var(--sf-surface);
    border-radius: var(--sf-radius);
    padding: 20px;
}

.sf-cart-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
}

.sf-cart-summary-total {
    font-size: 18px;
    font-weight: 600;
    border-top: 1px solid var(--sf-border);
    margin-top: 8px;
    padding-top: 16px;
}

.sf-cart-summary .sf-btn { margin-top: 16px; }

/* ------------------------------------------------------------ search */

.sf-search-page { max-width: 1200px; }

.sf-search-page-form {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
    max-width: 560px;
}

.sf-search-page-form input {
    flex: 1;
    padding: 10px 16px;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    font: inherit;
    font-size: 14px;
    outline: none;
}

.sf-search-page-form input:focus {
    border-color: var(--sf-accent);
}

.sf-search-count {
    color: var(--sf-muted);
    font-size: 13px;
    margin-bottom: 16px;
}

/* -------------------------------------------------------------- login */

.sf-login {
    max-width: 380px;
    margin: 60px auto;
    padding: 32px;
    background: var(--sf-surface);
    border-radius: 12px;
    border: 1px solid var(--sf-border);
}

.sf-login-title {
    text-align: center;
    font-size: 22px;
    margin: 0 0 24px;
}

.sf-login-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sf-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
}

.sf-field span { color: var(--sf-muted); }

.sf-field input {
    padding: 10px 12px;
    font: inherit;
    font-size: 14px;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    background: var(--sf-bg);
}

.sf-field input:focus {
    outline: none;
    border-color: var(--sf-accent);
    box-shadow: 0 0 0 3px rgba(255,87,34,0.12);
}

.sf-login-error {
    background: #fee2e2;
    color: #991b1b;
    border-radius: var(--sf-radius);
    padding: 10px 12px;
    font-size: 13px;
    margin-bottom: 12px;
}

.sf-login-note {
    text-align: center;
    font-size: 13px;
    color: var(--sf-muted);
    margin: 20px 0 0;
}

.sf-login-note a:hover { color: var(--sf-accent); }

/* ------------------------------------------------------------ footer */

.sf-footer {
    background: var(--sf-surface);
    border-top: 1px solid var(--sf-border);
    margin-top: 48px;
    padding: 32px 24px;
}

.sf-footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sf-footer-nav {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.sf-footer-nav a {
    font-size: 13px;
    color: var(--sf-muted);
}

.sf-footer-nav a:hover { color: var(--sf-accent); }

.sf-footer-copy {
    color: var(--sf-muted);
    font-size: 12px;
    margin: 0;
}

/* ------------------------------------------------------------ empty */

.sf-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--sf-muted);
}

.sf-notfound {
    text-align: center;
    padding: 80px 24px;
}

.sf-notfound h1 {
    font-size: 72px;
    margin: 0 0 16px;
    color: var(--sf-accent);
}

/* ------------------------------------------------------- toast */

.sf-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #0f172a;
    color: #fff;
    padding: 12px 20px;
    border-radius: 999px;
    font-size: 13px;
    box-shadow: 0 8px 24px rgba(15,23,42,0.2);
    opacity: 0;
    transition: opacity 150ms ease, transform 150ms ease;
    pointer-events: none;
    z-index: 200;
}

.sf-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ------------------------------------------------------- modal */

.sf-modal {
    position: fixed;
    inset: 0;
    z-index: 150;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.sf-modal[hidden] { display: none; }

.sf-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,0.55);
}

.sf-modal-content {
    position: relative;
    background: var(--sf-bg);
    border-radius: 12px;
    max-width: 1000px;
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    padding: 28px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.25);
}

.sf-modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: transparent;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: var(--sf-muted);
}

.sf-modal-close:hover { color: var(--sf-text); }

.sf-modal-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 20px;
}

body.sf-modal-open { overflow: hidden; }

/* ------------------------------------------------------- checkout */

.sf-checkout-page {
    max-width: 1200px;
    margin: 0 auto;
}

.sf-checkout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 32px;
    align-items: start;
}

@media (max-width: 900px) {
    .sf-checkout-grid {
        grid-template-columns: 1fr;
    }
}

.sf-checkout-block {
    background: var(--sf-bg);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    padding: 20px;
    margin-bottom: 20px;
}

.sf-checkout-block h2 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px;
}

.sf-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

@media (max-width: 600px) {
    .sf-form-row { grid-template-columns: 1fr; }
}

.sf-checkout .sf-field { margin-bottom: 12px; }

.sf-checkout .sf-field textarea {
    padding: 10px 12px;
    font: inherit;
    font-size: 14px;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    background: var(--sf-bg);
    resize: vertical;
    width: 100%;
    font-family: inherit;
}

.sf-checkout .sf-field textarea:focus {
    outline: none;
    border-color: var(--sf-accent);
    box-shadow: 0 0 0 3px rgba(255,87,34,0.12);
}

.sf-shipping-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sf-shipping-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 2px solid var(--sf-border);
    border-radius: var(--sf-radius);
    cursor: pointer;
    transition: border-color 100ms ease, background 100ms ease;
}

.sf-shipping-option:hover { border-color: var(--sf-accent); }

.sf-shipping-option.is-active {
    border-color: var(--sf-accent);
    background: rgba(255,87,34,0.05);
}

.sf-shipping-option input { margin: 0; flex-shrink: 0; }

.sf-shipping-info {
    display: flex;
    justify-content: space-between;
    flex: 1;
    gap: 12px;
}

.sf-shipping-label { font-size: 14px; }
.sf-shipping-cost { font-weight: 600; color: var(--sf-accent); }

.sf-checkout-side {
    position: sticky;
    top: 90px;
    background: var(--sf-surface);
    border-radius: var(--sf-radius);
    padding: 20px;
}

.sf-checkout-side h2 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px;
}

.sf-checkout-items {
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    padding: 12px;
    margin-bottom: 16px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--sf-bg);
}

.sf-checkout-item {
    display: flex;
    gap: 12px;
    padding: 8px 0;
    align-items: center;
    border-bottom: 1px solid var(--sf-border);
}

.sf-checkout-item:last-child { border-bottom: none; }

.sf-checkout-thumb {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--sf-surface);
}

.sf-checkout-thumb img { width: 100%; height: 100%; object-fit: cover; }

.sf-checkout-info { flex: 1; min-width: 0; }

.sf-checkout-title {
    font-size: 13px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sf-checkout-line-total {
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
}

.sf-checkout-totals {
    border-top: 1px solid var(--sf-border);
    padding-top: 12px;
    margin-bottom: 16px;
}

.sf-checkout-total-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 14px;
}

.sf-checkout-total-row.sf-total-grand {
    font-size: 18px;
    font-weight: 700;
    color: var(--sf-accent);
    border-top: 1px solid var(--sf-border);
    margin-top: 8px;
    padding-top: 12px;
}

.sf-coupon {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.sf-coupon input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    font: inherit;
    font-size: 13px;
    text-transform: uppercase;
}

.sf-coupon input:focus {
    outline: none;
    border-color: var(--sf-accent);
}

.sf-coupon-message {
    font-size: 12px;
    min-height: 1.4em;
    margin-bottom: 12px;
}

.sf-coupon-message.is-success { color: #16a34a; }
.sf-coupon-message.is-error { color: var(--sf-danger); }

/* -------------------------------------------------- order confirm */

.sf-order-confirm {
    max-width: 560px;
    margin: 60px auto;
    text-align: center;
    padding: 40px;
    background: var(--sf-surface);
    border-radius: 12px;
}

.sf-order-confirm h1 {
    font-size: 32px;
    color: var(--sf-accent);
    margin: 0 0 16px;
}

.sf-order-number {
    font-size: 22px;
    font-weight: 700;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    padding: 8px 16px;
    background: var(--sf-bg);
    border-radius: 8px;
    display: inline-block;
    margin: 16px 0;
    letter-spacing: 0.05em;
}
/* ===================================================== round 3 additions */

/* Stars: one element painted with a gold-to-gray gradient clipped to the glyphs.
   .sf-pNN sets how much is gold (NN percent, steps of half a star). */
.sf-stars{--sf-pct:0%;display:inline-block;white-space:nowrap;line-height:1;font-size:1.15em;letter-spacing:0;vertical-align:middle;
  color:var(--sf-star,#f5b301);
  background:linear-gradient(90deg,var(--sf-star,#f5b301) 0,var(--sf-star,#f5b301) var(--sf-pct),#d1d5db var(--sf-pct),#d1d5db 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .sf-stars{-webkit-text-fill-color:currentColor}
  .sf-p0,.sf-p10,.sf-p20{color:#d1d5db}
}
.sf-p0{--sf-pct:0%}.sf-p10{--sf-pct:10%}.sf-p20{--sf-pct:20%}.sf-p30{--sf-pct:30%}.sf-p40{--sf-pct:40%}.sf-p50{--sf-pct:50%}
.sf-p60{--sf-pct:60%}.sf-p70{--sf-pct:70%}.sf-p80{--sf-pct:80%}.sf-p90{--sf-pct:90%}.sf-p100{--sf-pct:100%}
.sf-product-rating{margin:4px 0}
.sf-rating-link{display:inline-flex;gap:8px;align-items:center;color:inherit;text-decoration:none}
.sf-rating-text{font-size:.9em;color:var(--sf-muted,#6b7280)}
.sf-card-rating{display:flex;gap:6px;align-items:center;margin-top:6px;font-size:.85em}

/* Card with add-to-cart */
.sf-card-wrap{display:flex;flex-direction:column;gap:8px}
.sf-card-wrap .sf-card{flex:1}
.sf-card-add{width:100%;text-align:center;justify-content:center}

/* Gallery slider */
.sf-gallery-frame{position:relative;overflow:hidden;aspect-ratio:1;background:var(--sf-surface);border-radius:var(--sf-radius)}
.sf-gal-track{display:flex;height:100%;will-change:transform}
.sf-gal-slide{flex:0 0 100%;height:100%}
.sf-gal-slide img,.sf-gal-slide video{width:100%;height:100%;object-fit:cover;display:block}
.sf-gal-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:40px;height:40px;border:0;border-radius:50%;background:#000a;color:#fff;font-size:26px;line-height:1;cursor:pointer}
.sf-gal-prev{inset-inline-start:8px}.sf-gal-next{inset-inline-end:8px}
.sf-gal-btn:hover{background:#000d}
.sf-gallery-badge{position:absolute;top:10px;inset-inline-start:10px;inset-inline-end:auto;z-index:3;font-size:14px;padding:4px 10px}
.sf-gallery-thumbs{display:flex;gap:8px;overflow-x:auto;padding:2px}
.sf-thumb{flex:0 0 auto;width:64px;height:64px;padding:0;border:2px solid var(--sf-border);border-radius:6px;overflow:hidden;background:#fff;cursor:pointer}
.sf-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.sf-thumb.is-active{border-color:var(--sf-accent)}
.sf-thumb-video{display:flex;align-items:center;justify-content:center;height:100%}

/* Options + selection */
.sf-option-value{position:relative}
.sf-option-value.is-active{border-color:var(--sf-accent);box-shadow:0 0 0 2px var(--sf-accent)}
.sf-option-value.is-active::after{content:"✓";position:absolute;top:2px;inset-inline-end:4px;font-size:12px;color:var(--sf-accent);font-weight:700}
.sf-option-hint{font-size:.85em;color:var(--sf-muted,#6b7280);margin:4px 0}
.sf-option-hint.is-warn{color:var(--sf-danger,#dc2626)}
.sf-selection{border:1px solid var(--sf-border);border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:6px}
.sf-sel-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sf-sel-name{flex:1;min-width:120px}
.sf-sel-qty{display:inline-flex;align-items:center;gap:8px}
.sf-sel-qty button{width:26px;height:26px;border:1px solid var(--sf-border);background:#fff;border-radius:6px;cursor:pointer}
.sf-sel-price{font-weight:600}

/* Reviews form */
.sf-review-form{margin-top:20px;display:flex;flex-direction:column;gap:10px;max-width:560px}
.sf-rate-input{display:flex;gap:2px}
.sf-rate-star{border:0;background:none;font-size:30px;line-height:1;color:#d1d5db;cursor:pointer;padding:0 2px}
.sf-rate-star.is-on{color:#f5b301}
.sf-hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.sf-review-msg.is-ok{color:#15803d}.sf-review-msg.is-err{color:#b91c1c}
.sf-review-photos img{width:72px;height:72px;object-fit:cover;border-radius:6px;margin-inline-end:6px}

/* Related */
.sf-related{margin-top:32px}

/* Checkout location selects */
.sf-form-row-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:640px){.sf-form-row-3{grid-template-columns:1fr}}
.sf-field select{width:100%}

/* ------------------------------------------------------------------ menus */
.sf-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sf-nav a,.sf-nav .sf-nav-parent{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;text-decoration:none;color:inherit}
.sf-nav-icon{font-size:1.1em;line-height:1}
.sf-nav-group{position:relative;display:inline-flex;align-items:center}
.sf-nav-toggle{border:0;background:none;cursor:pointer;color:inherit;padding:2px 4px}
.sf-subnav{display:none;position:absolute;top:100%;inset-inline-start:0;min-width:200px;background:var(--sf-bg,#fff);border:1px solid var(--sf-border);border-radius:8px;box-shadow:0 8px 24px #0002;padding:6px;z-index:60;flex-direction:column}
.sf-nav-group:hover>.sf-subnav,.sf-nav-group:focus-within>.sf-subnav,.sf-nav-group.is-open>.sf-subnav{display:flex}
.sf-subnav .sf-nav-group{display:flex;flex-direction:column;align-items:stretch}
.sf-subnav .sf-subnav{position:static;box-shadow:none;border:0;padding-inline-start:12px;display:none}
.sf-subnav .sf-nav-group.is-open>.sf-subnav{display:flex}
.sf-menu-btn{border:0;background:none;font-size:24px;cursor:pointer;color:inherit;padding:4px 8px}
.sf-menu-btn-mobile{display:none}
@media (max-width:768px){
}
.sf-drawer[hidden]{display:none}
.sf-drawer{position:fixed;inset:0;z-index:1200}
.sf-drawer-backdrop{position:absolute;inset:0;background:#0007}
.sf-drawer-panel{position:absolute;top:0;bottom:0;inset-inline-start:0;width:min(320px,85vw);background:var(--sf-bg,#fff);padding:48px 12px 16px;overflow:auto;display:flex;flex-direction:column;gap:4px}
.sf-drawer-panel a,.sf-drawer-panel .sf-nav-parent{display:flex;gap:8px;padding:10px 8px;text-decoration:none;color:inherit;border-radius:6px}
.sf-drawer-panel a:hover{background:var(--sf-surface,#f3f4f6)}
.sf-drawer-panel .sf-nav-group{flex-wrap:wrap}
.sf-drawer-panel .sf-subnav{position:static;display:none;width:100%;box-shadow:none;border:0;padding-inline-start:14px}
.sf-drawer-panel .sf-nav-group.is-open>.sf-subnav{display:flex}
.sf-drawer-close{position:absolute;top:8px;inset-inline-end:10px;border:0;background:none;font-size:30px;cursor:pointer}
.sf-footer-nav{display:flex;gap:12px;flex-wrap:wrap}

/* ------------------------------------------- theme variables (Appearance) */
body.sf-body{font-size:var(--sf-font-size,15px)}
a{color:var(--sf-link,inherit)}
.sf-header{background:var(--sf-header-bg,var(--sf-bg));color:var(--sf-header-text,var(--sf-text))}
.sf-header a{color:var(--sf-header-text,inherit)}
.sf-footer{background:var(--sf-footer-bg,var(--sf-surface));color:var(--sf-footer-text,var(--sf-text))}
.sf-footer a{color:var(--sf-footer-text,inherit)}
.sf-btn-primary,.sf-btn-buy{color:var(--sf-btn-text,#fff)}
.sf-price-now{color:var(--sf-price,var(--sf-accent))}
.sf-badge-discount{background:var(--sf-badge,var(--sf-accent))}
.sf-rate-star.is-on{color:var(--sf-star,#f5b301)}

/* review media + lightbox */
.sf-review-photos img,.sf-review-reply img{cursor:zoom-in}
.sf-review-reply{margin-top:8px;padding:8px 12px;border-inline-start:3px solid var(--sf-accent);background:var(--sf-surface,#f9fafb);border-radius:6px}
.sf-review-reply img,.sf-review-reply video{max-width:160px;max-height:160px;border-radius:6px;display:block;margin-top:6px}
.sf-review-reply-label{font-weight:600;font-size:.9em}
.sf-lightbox{position:fixed;inset:0;z-index:2000;background:#000d;display:flex;align-items:center;justify-content:center;padding:16px}
.sf-lightbox>img{max-width:94vw;max-height:90vh;object-fit:contain;border-radius:6px;cursor:default}
.sf-lightbox-close{position:absolute;top:10px;inset-inline-end:14px;border:0;background:none;color:#fff;font-size:40px;cursor:pointer;line-height:1}
.sf-lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);border:0;background:#0008;color:#fff;font-size:34px;width:46px;height:60px;cursor:pointer;border-radius:8px}
.sf-lightbox-prev{inset-inline-start:12px}.sf-lightbox-next{inset-inline-end:12px}
body.sf-modal-open{overflow:hidden}

/* availability label (colours customizable in Appearance) */
.sf-stock{display:inline-block;padding:3px 12px;border-radius:999px;font-size:.85em;font-weight:600;margin:6px 0;color:var(--sf-stock-text,#fff)}
.sf-stock-in{background:var(--sf-stock-in,#16a34a);color:var(--sf-stock-in-text,#fff)}
.sf-stock-out{background:var(--sf-stock-out,#dc2626);color:var(--sf-stock-out-text,#fff)}
.sf-option-value.is-out{opacity:.45;cursor:not-allowed;text-decoration:line-through}

/* more theme variables */
.sf-price-old{color:var(--sf-sale-old,var(--sf-muted))}
.sf-btn-buy{background:var(--sf-btn2,var(--sf-accent));color:var(--sf-btn2-text,#fff)}
.sf-card{background:var(--sf-card-bg,var(--sf-surface));border-color:var(--sf-card-border,var(--sf-border))}
.sf-field input,.sf-field select,.sf-field textarea{background:var(--sf-input-bg,#fff);border-color:var(--sf-input-border,var(--sf-border))}
.sf-nav a:hover,.sf-drawer-panel a:hover{background:var(--sf-menu-hover,var(--sf-surface))}
.sf-banner{background:var(--sf-banner-bg,var(--sf-accent))}
.sf-review-msg.is-ok{color:var(--sf-success,#15803d)}.sf-review-msg.is-err,.sf-option-hint.is-warn{color:var(--sf-danger,#b91c1c)}

/* header: dropdown reachable without losing hover (no gap) */
.sf-nav-group>.sf-subnav{margin-top:0}
.sf-nav-group::after{content:"";position:absolute;left:0;right:0;top:100%;height:8px} /* hover bridge */
.sf-header-inner{overflow:visible}

/* ------------------------------------------- mobile bottom menu bar */
.sf-mbar{display:none}
@media (max-width:768px){
  .sf-mbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:1100;background:var(--sf-mbar-bg,var(--sf-bg,#fff));color:var(--sf-mbar-text,var(--sf-text,#111));
    border-top:1px solid var(--sf-border);box-shadow:0 -4px 16px #0002;padding-bottom:env(safe-area-inset-bottom,0)}
  .sf-mbar-items{display:flex;justify-content:space-around;align-items:stretch}
  .sf-mbar-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;background:none;border:0;color:inherit;text-decoration:none;font-size:11px;cursor:pointer;min-width:0}
  .sf-mbar-icon{font-size:20px;line-height:1}
  .sf-mbar-label{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sf-mbar-group{position:relative;flex:1;display:flex}
  .sf-mbar-sub{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);min-width:160px;background:var(--sf-mbar-bg,var(--sf-bg,#fff));border:1px solid var(--sf-border);border-radius:10px;box-shadow:0 -6px 20px #0003;padding:6px;display:flex;flex-direction:column}
  .sf-mbar-sub[hidden]{display:none}
  .sf-mbar-sub a{padding:10px 12px;color:inherit;text-decoration:none;display:flex;gap:8px;border-radius:6px}
  body.sf-has-mbar{padding-bottom:64px}
}

/* ------------------------------------------------------------------- RTL */
html[dir="rtl"] body.sf-body{direction:rtl;text-align:right}
html[dir="rtl"] .sf-card-title,html[dir="rtl"] .sf-product-info{text-align:right}
html[dir="rtl"] .sf-gal-track{direction:ltr}            /* slider math stays physical */
html[dir="rtl"] .sf-gallery-frame{direction:ltr}
html[dir="rtl"] .sf-marquee-track{direction:ltr}
html[dir="rtl"] input[type="tel"],html[dir="rtl"] input[type="email"],html[dir="rtl"] input[type="number"]{direction:ltr;text-align:right}
html[dir="rtl"] .sf-subnav{inset-inline-start:auto;inset-inline-end:0}
html[dir="rtl"] .sf-drawer-panel{inset-inline-start:0}

/* ============================================== gallery thumbnail strip =
 *
 * The thumbs live inside a wrapper that also holds the two scroll buttons.
 * The critical fix is `min-width: 0` on the strip itself: as a flex item
 * it would otherwise use `min-width: auto` (its content width), grow past
 * the gallery column, stretch the 2-column product grid, and — because
 * .sf-gallery-frame has aspect-ratio: 1 — grow the main image frame along
 * with it. With `min-width: 0` the strip shrinks to the column width and
 * a horizontal scrollbar appears instead.
 */

.sf-gallery-thumbs-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
}

.sf-gallery-thumbs {
    flex: 1 1 auto;
    min-width: 0;             /* the fix */
    max-width: 100%;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;       /* explicit: prevents any vertical growth */
    height: 72px;             /* fixed height, matches thumb + padding */
    padding: 2px;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

/* The two scroll chevrons. Square-ish, matching the thumb height so the
   strip and the buttons sit on the same baseline. */
.sf-thumbs-nav {
    flex: 0 0 auto;
    width: 28px;
    height: 64px;
    padding: 0;
    border: 1px solid var(--sf-border);
    border-radius: 6px;
    background: var(--sf-surface);
    cursor: pointer;
    font: inherit;
    font-size: 20px;
    line-height: 1;
    color: var(--sf-text);
    transition: border-color 100ms ease, color 100ms ease;
}

.sf-thumbs-nav:hover:not(:disabled) {
    border-color: var(--sf-accent);
    color: var(--sf-accent);
}

.sf-thumbs-nav:disabled {
    opacity: 0.35;
    cursor: default;
}

/* The gallery column must never exceed its grid cell — belt and braces
   alongside the `.sf-product-gallery { min-width: 0 }` rule already in
   the responsive section. */
.sf-product-gallery {
    min-width: 0;
    max-width: 100%;
}


/* quantity stepper (same look as the cart) */
.sf-qty{display:flex;align-items:center;gap:10px;margin:8px 0}
.sf-qty-stepper{display:inline-flex;align-items:center;border:1px solid var(--sf-border);border-radius:8px;overflow:hidden}
.sf-qty-btn{width:36px;height:36px;border:0;background:var(--sf-surface,#f3f4f6);font-size:18px;cursor:pointer;line-height:1}
.sf-qty-num{min-width:44px;text-align:center;font-weight:600;padding:0 6px}
.sf-stock{align-self:flex-start;width:fit-content;max-width:100%}

/* ======================================================= responsive layout */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{max-width:100%;overflow-x:hidden}
img,video,svg,canvas,iframe{max-width:100%;height:auto}
table{display:block;max-width:100%;overflow-x:auto}
.sf-main,.sf-product,.sf-product-info,.sf-product-gallery,.sf-grid>*,.sf-cart-item,.sf-checkout,.sf-field{min-width:0}
h1,h2,h3,p,a,span,div{overflow-wrap:anywhere}

/* brand (text / logo / both) */
.sf-logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.sf-logo-img{height:var(--sf-logo-h,40px);width:auto;max-width:60vw;object-fit:contain;display:block}
.sf-logo-text{white-space:nowrap}

/* header: collapses to a side menu when too narrow */
.sf-menu-btn-header{display:none}
.sf-header.is-collapsed .sf-menu-btn-header{display:inline-block}
.sf-header.is-collapsed .sf-nav{position:absolute;visibility:hidden;pointer-events:none;white-space:nowrap;left:0;top:0}
.sf-header{position:sticky}
.sf-header-inner{flex-wrap:wrap}
.sf-header-actions{display:flex;align-items:center;gap:12px;margin-inline-start:auto;min-width:0}

@media (max-width:768px){
  .sf-header-inner{padding:8px 12px;gap:10px}
  /* search sits on its own row below the header line */
  .sf-header-actions{display:contents}
  .sf-search{order:20;flex:1 0 100%;width:100%}
  .sf-search input{width:100%}
  .sf-cart{margin-inline-start:auto}
  .sf-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .sf-card-title{font-size:13px}
  .sf-product{grid-template-columns:1fr;gap:16px}
  .sf-cart-item{display:grid;grid-template-columns:64px 1fr;gap:8px}
  .sf-cart-item .sf-cart-qty,.sf-cart-item .sf-cart-line-total,.sf-cart-item .sf-cart-remove{grid-column:2}
  .sf-form-row,.sf-form-row-3{grid-template-columns:1fr}
  .sf-modal-box,.sf-buy-modal-box{width:100%;max-width:100%;max-height:100vh;border-radius:0}
  .sf-footer-inner{padding:16px 12px}
  main,.sf-main{padding-left:12px;padding-right:12px}
  .sf-banner{padding:8px 10px}
}
@media (max-width:420px){
  .sf-grid{gap:8px}
  .sf-product-title{font-size:20px}
  .sf-btn{padding-left:12px;padding-right:12px}
  .sf-product-actions{flex-wrap:wrap}
  .sf-product-actions .sf-btn{flex:1 1 100%}
}

/* ============================================== header order ==========  */
@media (min-width: 769px) {
    .sf-header-actions  { display: contents; }
    .sf-menu-btn-header { order: 1; }
    .sf-logo            { order: 2; }
    .sf-nav             { order: 3; flex: 1 1 auto; }
    .sf-search          { order: 4; }
    .sf-cart            { order: 5; }
    .sf-lang-select     { order: 6; }
}

/* ============================================== category carousels =====
 *
 * A `.sf-cat-rows` wrapper holds one or more `.sf-cat-row` groups. Each
 * group is a title (optional) plus a `.sf-cat-carousel` row. Each
 * carousel row is a flex strip: a nav button, a scrollable `.sf-cat-track`,
 * and a second nav button.
 *
 * The track hides its native scrollbar (matching the admin side) because
 * the prev/next buttons and drag-scroll already provide the interaction.
 *
 * `.sf-cat-track { min-width: 0 }` is critical: as a flex item its default
 * is `min-width: auto` (content width), which would make the row wider
 * than its container whenever there are many categories, breaking the
 * scroll and the whole page layout.
 *
 * Category widths come from `--sf-cat-w`, set inline on each carousel from
 * the `categories_item_width` setting. The media queries below shrink that
 * value further on small viewports so more items fit without horizontal
 * scroll. `min()` picks whichever is smaller — the operator's width or the
 * mobile cap — so a shop that sets 100px stays at 100px on mobile, while
 * one that sets 200px gets shrunk to the cap.
 */

.sf-cat-rows {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sf-cat-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sf-cat-row-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.01em;
    color: var(--sf-text, #0f172a);
}

.sf-cat-carousel {
    display: flex;
    align-items: stretch;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
}

.sf-cat-track {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 2px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

.sf-cat-track::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.sf-cat-nav {
    flex: 0 0 auto;
    align-self: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--sf-border);
    border-radius: 50%;
    background: var(--sf-bg);
    color: var(--sf-text);
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}

.sf-cat-nav:hover:not(:disabled) {
    border-color: var(--sf-accent);
    color: var(--sf-accent);
    background: var(--sf-surface);
}

.sf-cat-nav:disabled { opacity: 0.25; cursor: default; }
.sf-cat-nav[hidden]  { display: none; }

/* Display mode: names (chips) */
.sf-cat-chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--sf-surface);
    border: 1px solid var(--sf-border);
    font-size: 13px;
    white-space: nowrap;
    color: var(--sf-text);
    transition: border-color 100ms ease, color 100ms ease;
}

.sf-cat-chip:hover {
    border-color: var(--sf-accent);
    color: var(--sf-accent);
}

/* Display mode: images only (tiles) */
.sf-cat-tile {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: min(var(--sf-cat-w, 160px), 160px);
    aspect-ratio: 1;
    border-radius: var(--sf-radius);
    overflow: hidden;
    background: var(--sf-surface);
    border: 1px solid var(--sf-border);
    transition: transform 120ms ease, border-color 120ms ease;
}

.sf-cat-tile:hover {
    transform: translateY(-2px);
    border-color: var(--sf-accent);
}

.sf-cat-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Display mode: image and name (cards) */
.sf-cat-card {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: min(var(--sf-cat-w, 160px), 160px);
    background: var(--sf-surface);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    padding: 8px;
    text-align: center;
    transition: transform 120ms ease, border-color 120ms ease;
}

.sf-cat-card:hover {
    transform: translateY(-2px);
    border-color: var(--sf-accent);
}

.sf-cat-card img {
    width: 100%;
    height: calc(var(--sf-cat-w, 160px) * 0.6);
    max-height: 100px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 6px;
    display: block;
}

.sf-cat-name {
    display: block;
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* RTL: mirror the arrows so they still point away from the edge */
html[dir="rtl"] .sf-cat-prev,
html[dir="rtl"] .sf-cat-next {
    transform: scaleX(-1);
}

/* Small viewport: shrink the operator's chosen width further so more
   cards fit before the scroll. `min()` caps whichever is larger:
   a carousel with --sf-cat-w = 100px stays at 100px, one with 200px
   shrinks to 130px. */
@media (max-width: 900px) {
    .sf-cat-card { width: min(var(--sf-cat-w, 160px), 140px); }
    .sf-cat-tile { width: min(var(--sf-cat-w, 160px), 140px); }
    .sf-cat-card img { height: min(calc(var(--sf-cat-w, 160px) * 0.6), 90px); }
}

@media (max-width: 600px) {
    .sf-cat-card { width: min(var(--sf-cat-w, 160px), 120px); }
    .sf-cat-tile { width: min(var(--sf-cat-w, 160px), 120px); }
    .sf-cat-card img { height: min(calc(var(--sf-cat-w, 160px) * 0.55), 72px); }
    .sf-cat-nav { width: 30px; height: 30px; font-size: 16px; }
    .sf-cat-track { gap: 8px; }
    .sf-cat-rows { gap: 16px; }
    .sf-cat-row-title { font-size: 16px; }
}

.sf-parcel-preview {
    margin: 16px 0;
    padding: 16px;
    border: 1px solid var(--sf-border, #e5e5e5);
    border-radius: 8px;
    background: var(--sf-bg-soft, #fafafa);
}
.sf-parcel-preview-head h3 { margin: 0 0 6px; font-size: 1.05rem; }
.sf-parcel-preview-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    margin: 12px 0;
}
.sf-parcel-preview-card {
    padding: 12px;
    border: 1px solid var(--sf-border, #e5e5e5);
    border-radius: 6px;
    background: #fff;
}
.sf-parcel-preview-card h4 { margin: 0 0 8px; font-size: 0.95rem; }
.sf-parcel-preview-card ul { margin: 0 0 8px; padding-left: 18px; font-size: 0.9rem; }
.sf-parcel-preview-card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; font-size: 0.9rem; }
.sf-parcel-preview-card dd { margin: 0; text-align: right; }
.sf-parcel-preview-total {
    padding-top: 10px;
    border-top: 1px dashed var(--sf-border, #e5e5e5);
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.95rem;
    text-align: right;
}
.sf-parcels-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    margin: 20px 0;
}
.sf-parcel-card {
    padding: 16px;
    border: 1px solid var(--sf-border, #e5e5e5);
    border-radius: 8px;
    background: #fff;
}
.sf-parcel-card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.sf-parcel-card-head h2 { margin: 0; font-size: 1rem; }
.sf-parcel-tracking { font-size: 0.9rem; margin-bottom: 8px; }
.sf-parcel-items { list-style: none; padding: 0; margin: 0 0 10px; }
.sf-parcel-item { display: flex; justify-content: space-between; gap: 8px; font-size: 0.9rem; padding: 4px 0; border-bottom: 1px dashed #eee; }
.sf-parcel-totals { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; margin: 0; font-size: 0.9rem; }
.sf-parcel-totals dd { margin: 0; text-align: right; }
.sf-parcel-total-label, .sf-parcel-total-value { font-weight: 600; }
.sf-parcels-summary {
    margin-top: 20px;
    padding: 16px;
    border: 1px solid var(--sf-border, #e5e5e5);
    border-radius: 8px;
    background: #fafafa;
    max-width: 400px;
}
.sf-parcels-summary dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; margin: 8px 0 0; }
.sf-parcels-summary dd { margin: 0; text-align: right; }
.sf-parcel-notice { padding: 12px; background: #fff8e6; border-left: 3px solid #f0b400; border-radius: 4px; }

/* ---------------------------------------------------------------
   Checkout: order summary rendered below the form, full width.
   The grid stops laying out as two columns (main + sidebar); the
   summary becomes a sibling that sits below the form.
   ---------------------------------------------------------------- */
.sf-checkout-grid-stacked {
    grid-template-columns: minmax(0, 1fr);
}

.sf-checkout-side-full {
    position: static;
    margin-top: 24px;
    max-width: 100%;
}

/* Keep the item list readable across the wide full-width block. */
.sf-checkout-side-full .sf-checkout-items {
    max-width: 720px;
}

/* Right-align totals, coupon, and Place order so they line up
   underneath the item list rather than stretching across the page. */
.sf-checkout-side-full .sf-checkout-totals {
    max-width: 480px;
    margin-left: auto;
    margin-top: 16px;
}

.sf-checkout-side-full .sf-coupon {
    max-width: 480px;
    margin-left: auto;
    margin-top: 12px;
}

.sf-checkout-side-full [data-sf-submit] {
    max-width: 480px;
    margin-left: auto;
    margin-top: 16px;
    display: block;
}