/* =========================================================
   SAGVIRA COMPONENT LAYER
   Additions that sit on top of css/sagvira-theme.css:
   toasts, wishlist states, empty states, skeletons, forms,
   pagination, reveal animation, 404 + policy pages.
   Load AFTER sagvira-theme.css.
========================================================= */

/* ---------------------------------------------------------
   TOAST STACK
--------------------------------------------------------- */
.sag-toast-host {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
    pointer-events: none;
}

.sag-toast-host .sag-toast {
    position: static;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: min(360px, calc(100vw - 48px));
    transform: translateY(16px);
    opacity: 0;
    pointer-events: auto;
}

.sag-toast-host .sag-toast.is-visible {
    transform: translateY(0);
    opacity: 1;
}

.sag-toast-host .sag-toast.is-error {
    border-left-color: #D32F2F;
}

.sag-toast-host .sag-toast i {
    color: var(--sag-gold);
    font-size: 15px;
    flex-shrink: 0;
}

.sag-toast-host .sag-toast.is-error i {
    color: #FF7B7B;
}

.sag-toast-action {
    margin-left: auto;
    color: var(--sag-gold);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
}

@media (max-width: 768px) {
    .sag-toast-host {
        right: 16px;
        left: 16px;
        bottom: 78px;
        align-items: stretch;
    }
    .sag-toast-host .sag-toast { max-width: none; }
}

/* ---------------------------------------------------------
   WISHLIST BUTTON STATES
--------------------------------------------------------- */
.sag-wishlist-toggle.is-active,
.sag-card-wish.is-active {
    background: #FFFFFF;
    color: #D32F2F;
}

.sag-wishlist-toggle.is-active i { color: #D32F2F; }

.sag-wishlist-toggle:focus-visible,
.sag-add-bag-btn:focus-visible,
.sag-nav-link:focus-visible,
.sag-action-btn:focus-visible,
.sag-tab-btn:focus-visible,
.sag-dock-item:focus-visible,
.sag-faq-question:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--sag-gold);
    outline-offset: 2px;
    border-radius: 3px;
}

.sag-add-bag-btn.is-added {
    background: var(--sag-green);
    border-color: var(--sag-green);
    color: #FFFFFF;
}

/* Hide a counter badge entirely when it would read zero. */
.sag-action-badge[data-count="0"][data-sag-hide-empty],
.sag-dock-badge[data-count="0"][data-sag-hide-empty] {
    display: none;
}

/* ---------------------------------------------------------
   EMPTY STATES
--------------------------------------------------------- */
.sag-empty {
    text-align: center;
    padding: 64px 24px;
    max-width: 520px;
    margin: 0 auto;
}

.sag-empty-icon {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--sag-stone-bg);
    border: 1px solid var(--sag-border-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 28px;
    color: var(--sag-gold);
}

.sag-empty h2 {
    font-family: var(--sag-font-serif);
    font-size: 30px;
    font-weight: 600;
    color: var(--sag-black);
    margin-bottom: 10px;
}

.sag-empty p {
    font-size: 13.5px;
    color: var(--sag-gray-text);
    line-height: 1.7;
    margin-bottom: 24px;
}

.sag-empty-note {
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px 16px;
    color: var(--sag-gray-text);
    font-size: 13.5px;
}

/* ---------------------------------------------------------
   FORMS
--------------------------------------------------------- */
.sag-field { margin-bottom: 16px; }

.sag-field label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--sag-charcoal);
    margin-bottom: 7px;
}

.sag-field .req { color: #D32F2F; }

.sag-input,
.sag-field input,
.sag-field select,
.sag-field textarea {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--sag-border);
    border-radius: var(--sag-radius);
    font-family: var(--sag-font-sans);
    font-size: 13.5px;
    color: var(--sag-charcoal);
    background: #FFFFFF;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sag-input:focus,
.sag-field input:focus,
.sag-field select:focus,
.sag-field textarea:focus {
    border-color: var(--sag-gold);
    box-shadow: 0 0 0 3px var(--sag-gold-light);
    outline: none;
}

.sag-field.has-error input,
.sag-field.has-error select,
.sag-field.has-error textarea {
    border-color: #D32F2F;
}

.sag-field-error {
    display: none;
    font-size: 11.5px;
    color: #D32F2F;
    margin-top: 6px;
    font-weight: 600;
}

.sag-field.has-error .sag-field-error { display: block; }

.sag-field-hint {
    font-size: 11.5px;
    color: var(--sag-muted);
    margin-top: 6px;
}

.sag-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

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

/* ---------------------------------------------------------
   TOOLBAR (shop filters / sort)
--------------------------------------------------------- */
.sag-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 0 22px;
    border-bottom: 1px solid var(--sag-border);
    margin-bottom: 26px;
}

.sag-result-count {
    font-size: 12.5px;
    color: var(--sag-gray-text);
    font-weight: 600;
}

.sag-result-count strong { color: var(--sag-black); }

.sag-sort {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--sag-gray-text);
}

.sag-sort select {
    padding: 9px 12px;
    border: 1px solid var(--sag-border);
    border-radius: var(--sag-radius);
    font-family: var(--sag-font-sans);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sag-black);
    background: #FFFFFF;
    cursor: pointer;
}

.sag-chip-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.sag-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 100px;
    border: 1px solid var(--sag-border-gold);
    background: var(--sag-stone-bg);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--sag-charcoal);
    cursor: pointer;
}

.sag-chip button {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--sag-muted);
    font-size: 12px;
    line-height: 1;
    padding: 0;
}

.sag-chip:hover { border-color: var(--sag-gold); }

/* ---------------------------------------------------------
   PAGE HEADER (inner pages)
--------------------------------------------------------- */
.sag-page-head {
    background: var(--sag-stone-bg);
    border-bottom: 1px solid var(--sag-border);
    padding: 44px 32px;
    text-align: center;
}

.sag-page-head h1 {
    font-family: var(--sag-font-serif);
    font-size: clamp(30px, 5vw, 44px);
    font-weight: 600;
    color: var(--sag-black);
    margin-bottom: 8px;
}

.sag-page-head p {
    font-size: 13.5px;
    color: var(--sag-gray-text);
    max-width: 620px;
    margin: 0 auto;
    line-height: 1.7;
}

.sag-breadcrumbs {
    font-size: 11.5px;
    color: var(--sag-muted);
    letter-spacing: 0.4px;
    margin-bottom: 12px;
}

.sag-breadcrumbs a { color: var(--sag-gray-text); }
.sag-breadcrumbs a:hover { color: var(--sag-gold); }

/* ---------------------------------------------------------
   PROSE (policy / about pages)
--------------------------------------------------------- */
.sag-prose {
    max-width: 780px;
    margin: 0 auto;
    padding: 56px 24px 80px;
}

.sag-prose h2 {
    font-family: var(--sag-font-serif);
    font-size: 26px;
    font-weight: 600;
    color: var(--sag-black);
    margin: 34px 0 12px;
}

.sag-prose h3 {
    font-size: 15px;
    font-weight: 800;
    color: var(--sag-black);
    margin: 22px 0 8px;
}

.sag-prose p,
.sag-prose li {
    font-size: 14px;
    line-height: 1.85;
    color: var(--sag-gray-text);
    margin-bottom: 12px;
}

.sag-prose ul,
.sag-prose ol { padding-left: 22px; margin-bottom: 16px; }

.sag-prose strong { color: var(--sag-black); }

.sag-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0 24px;
    font-size: 13px;
}

.sag-prose th,
.sag-prose td {
    border: 1px solid var(--sag-border);
    padding: 11px 13px;
    text-align: left;
}

.sag-prose th {
    background: var(--sag-stone-bg);
    font-weight: 800;
    color: var(--sag-black);
}

/* ---------------------------------------------------------
   REVEAL ON SCROLL
--------------------------------------------------------- */
[data-sag-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-sag-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    [data-sag-reveal] { opacity: 1; transform: none; transition: none; }
    * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------------------------------------------------------
   SKIP LINK
--------------------------------------------------------- */
.sag-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    background: var(--sag-black);
    color: #FFFFFF;
    padding: 12px 20px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.sag-skip-link:focus {
    left: 8px;
    top: 8px;
}

/* ---------------------------------------------------------
   404
--------------------------------------------------------- */
.sag-404 {
    text-align: center;
    padding: 90px 24px 110px;
}

.sag-404-code {
    font-family: var(--sag-font-serif);
    font-size: clamp(76px, 16vw, 148px);
    line-height: 1;
    color: var(--sag-gold);
    margin-bottom: 8px;
}

/* ---------------------------------------------------------
   ORDER SUMMARY LINES (cart / checkout parity)
--------------------------------------------------------- */
.sag-sum-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--sag-gray-text);
    padding: 7px 0;
}

.sag-sum-line strong { color: var(--sag-black); font-weight: 700; }
.sag-sum-line.is-discount,
.sag-sum-line.is-discount strong { color: var(--sag-green); }

.sag-sum-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-top: 1px solid var(--sag-border);
    margin-top: 10px;
    padding-top: 14px;
    font-size: 15px;
    font-weight: 800;
    color: var(--sag-black);
}

.sag-sum-total span:last-child { font-size: 21px; }

.sag-free-ship-bar {
    background: var(--sag-green-bg);
    border: 1px solid #CFE7D5;
    border-radius: var(--sag-radius);
    padding: 11px 14px;
    font-size: 12px;
    color: var(--sag-green);
    font-weight: 700;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.sag-ship-meter {
    height: 4px;
    background: #DCEADF;
    border-radius: 100px;
    overflow: hidden;
    margin-top: 8px;
}

.sag-ship-meter span {
    display: block;
    height: 100%;
    background: var(--sag-green);
    border-radius: 100px;
    transition: width 0.4s ease;
}

/* ---------------------------------------------------------
   MOBILE DRAWER COUNT PILLS
--------------------------------------------------------- */
.sag-drawer-count {
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 100px;
    background: var(--sag-black);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.sag-drawer-count[data-count="0"] {
    background: var(--sag-border);
    color: var(--sag-muted);
}

/* =========================================================
   HEADER v2 — two rows, prominent search
   Row 1: identity, search, account actions.
   Row 2: category navigation (desktop) / hidden (mobile).
   On phones row 2 collapses and the search becomes its own
   full-width row, which is how shopping apps present it.
========================================================= */
.sag-header {
    background: #FFFFFF;
    border-bottom: 1px solid var(--sag-border);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.sag-header-primary {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px;
    height: 72px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.sag-header-secondary {
    border-top: 1px solid var(--sag-border);
    background: #FFFFFF;
}

.sag-header-secondary .sag-desktop-nav {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px;
    height: 46px;
    display: flex;
    align-items: center;
    gap: 30px;
}

.sag-header .sag-logo {
    flex: 0 0 auto;
    margin-right: 4px;
}

/* ---- the search field itself ---- */
.sag-header .sag-search-wrap {
    flex: 1 1 auto;
    max-width: 560px;
    position: relative;
    display: flex;
    align-items: center;
}

.sag-header .sag-search-wrap input {
    width: 100%;
    height: 46px;
    background: #FFFFFF;
    border: 1px solid #E4E4E4;
    border-radius: 8px;
    padding: 0 48px 0 16px;
    font-size: 14px;
    font-family: var(--sag-font-sans);
    color: var(--sag-charcoal);
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    -webkit-appearance: none;
    appearance: none;
}

.sag-header .sag-search-wrap input::placeholder {
    color: #9A9A9A;
}

.sag-header .sag-search-wrap input:focus {
    border-color: var(--sag-gold);
    box-shadow: 0 0 0 3px var(--sag-gold-light);
}

/* Safari renders a native clear button that collides with ours. */
.sag-header .sag-search-wrap input::-webkit-search-decoration,
.sag-header .sag-search-wrap input::-webkit-search-cancel-button,
.sag-header .sag-search-wrap input::-webkit-search-results-button {
    -webkit-appearance: none;
    appearance: none;
}

.sag-header .sag-search-wrap button[type="submit"] {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 38px;
    border: none;
    background: transparent;
    color: var(--sag-charcoal);
    font-size: 15px;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sag-header .sag-search-wrap button[type="submit"]:hover {
    background: var(--sag-stone-bg);
    color: var(--sag-gold);
}

/* ---- live suggestions ---- */
.sag-search-suggestions {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #FFFFFF;
    border: 1px solid var(--sag-border);
    border-radius: 10px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
    padding: 6px;
    z-index: 1200;
    max-height: 380px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.sag-search-suggestions[hidden] { display: none; }

.sag-suggest-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--sag-charcoal);
    text-decoration: none;
}

.sag-suggest-item:hover,
.sag-suggest-item.is-active {
    background: var(--sag-stone-bg);
}

.sag-suggest-item img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--sag-border);
    flex-shrink: 0;
}

.sag-suggest-body { flex: 1; min-width: 0; }

.sag-suggest-name {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--sag-black);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sag-suggest-meta {
    display: block;
    font-size: 11.5px;
    color: var(--sag-muted);
}

.sag-suggest-price {
    font-size: 13px;
    font-weight: 800;
    color: var(--sag-black);
    white-space: nowrap;
}

.sag-suggest-heading {
    padding: 8px 10px 4px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--sag-muted);
}

.sag-suggest-empty {
    padding: 16px 12px;
    font-size: 13px;
    color: var(--sag-gray-text);
}

/* ---- header actions ---- */
.sag-header-actions {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sag-header .sag-action-btn {
    position: relative;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--sag-charcoal);
    font-size: 17px;
}

.sag-header .sag-action-btn:hover {
    background: var(--sag-stone-bg);
    color: var(--sag-gold);
}

.sag-header .sag-track-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 42px;
    padding: 0 16px;
    border: 1px solid var(--sag-border-gold);
    border-radius: 100px;
    background: var(--sag-stone-bg);
    color: var(--sag-black);
    font-size: 12.5px;
    font-weight: 800;
    white-space: nowrap;
}

.sag-header .sag-track-btn i { color: var(--sag-gold); }

.sag-header .sag-track-btn:hover {
    border-color: var(--sag-gold);
    background: #FFFFFF;
}

/* =========================================================
   HEADER — PHONE
========================================================= */
@media (max-width: 991px) {
    .sag-header-primary {
        height: 60px;
        padding: 0 14px;
        gap: 10px;
        flex-wrap: wrap;
    }

    /* Search drops to its own full-width row, always visible. */
    .sag-header .sag-search-wrap {
        display: flex;
        order: 10;
        flex: 1 0 100%;
        max-width: none;
        margin: 0 0 12px;
    }

    .sag-header-primary { height: auto; padding-top: 10px; }

    .sag-header .sag-search-wrap input {
        height: 44px;
        border-radius: 100px;
        background: var(--sag-stone-bg);
        font-size: 16px; /* 16px stops iOS Safari zooming on focus */
    }

    .sag-header-secondary { display: none; }

    .sag-header .sag-track-btn span { display: none; }

    .sag-header .sag-track-btn {
        padding: 0;
        width: 44px;
        height: 44px;
        justify-content: center;
    }

    .sag-header .sag-logo a { font-size: 19px; }
    .sag-header .sag-logo .sub { display: none; }
}

@media (max-width: 380px) {
    .sag-header .sag-account-btn { display: none; }
}

/* =========================================================
   FOOTER v2 — light, in the reference storefront's idiom
========================================================= */
.footer {
    background: #FFFFFF;
    color: var(--sag-charcoal);
    padding: 0;
    border-top: 1px solid var(--sag-border);
}

.footer-top {
    max-width: 1440px;
    margin: 0 auto;
    padding: 48px 24px 32px;
    display: grid;
    grid-template-columns: minmax(240px, 300px) 1fr;
    gap: 48px;
    align-items: start;
}

.footer-brand h2 {
    font-family: var(--sag-font-display);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 3px;
    color: var(--sag-black);
    margin-bottom: 12px;
}

.footer-brand p {
    font-size: 13px;
    line-height: 1.75;
    color: var(--sag-gray-text);
    margin-bottom: 18px;
}

.footer-label {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--sag-muted);
    margin-bottom: 8px;
}

.footer-newsletter h3 {
    font-size: 16px;
    font-weight: 800;
    color: var(--sag-black);
    margin-bottom: 14px;
    letter-spacing: -0.01em;
}

.newsletter-form {
    display: flex;
    gap: 8px;
    max-width: 420px;
}

.newsletter-form input {
    flex: 1;
    min-width: 0;
    height: 46px;
    padding: 0 16px;
    border: 1px solid #E4E4E4;
    border-radius: 8px;
    background: #FFFFFF;
    font-size: 14px;
    font-family: var(--sag-font-sans);
    color: var(--sag-charcoal);
}

.newsletter-form input:focus {
    outline: none;
    border-color: var(--sag-gold);
    box-shadow: 0 0 0 3px var(--sag-gold-light);
}

.newsletter-form button {
    height: 46px;
    padding: 0 22px;
    background: var(--sag-black);
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
}

.newsletter-form button:hover { background: var(--sag-gold); color: var(--sag-black); }

/* ---- link columns ---- */
.footer-middle {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px 36px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 32px;
}

.footer-column h4 {
    font-size: 13px;
    font-weight: 800;
    color: var(--sag-black);
    margin-bottom: 14px;
    letter-spacing: -0.01em;
}

.footer-column a {
    display: block;
    font-size: 13px;
    color: var(--sag-gray-text);
    padding: 5px 0;
    line-height: 1.5;
}

.footer-column a:hover { color: var(--sag-gold); }

/* ---- socials ---- */
.footer-socials {
    display: flex;
    gap: 12px;
    justify-content: center;
    padding: 28px 24px;
    border-top: 1px solid var(--sag-border);
    margin: 0 24px;
}

.footer-socials a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--sag-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sag-charcoal);
    font-size: 15px;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.footer-socials a:hover {
    border-color: var(--sag-gold);
    color: var(--sag-gold);
    background: var(--sag-stone-bg);
}

/* ---- promo band ---- */
.footer-band {
    background: var(--sag-stone-bg);
    border-top: 1px solid var(--sag-border-gold);
    border-bottom: 1px solid var(--sag-border-gold);
    padding: 30px 24px;
    text-align: center;
}

.footer-band h3 {
    font-size: 19px;
    font-weight: 800;
    color: var(--sag-black);
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}

.footer-band p {
    font-size: 13px;
    color: var(--sag-gray-text);
    margin-bottom: 16px;
}

.footer-band-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ---- popular searches: an internal-linking block for crawlers ---- */
.footer-seo {
    max-width: 1440px;
    margin: 0 auto;
    padding: 30px 24px 10px;
}

.footer-seo h4 {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--sag-black);
    margin-bottom: 14px;
}

.footer-seo-group {
    margin-bottom: 14px;
}

.footer-seo-group strong {
    display: block;
    font-size: 12px;
    color: var(--sag-charcoal);
    margin-bottom: 6px;
    font-weight: 700;
}

.footer-seo-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 0;
    align-items: center;
}

.footer-seo-links a {
    font-size: 12px;
    color: var(--sag-muted);
    padding: 2px 0;
}

.footer-seo-links a:hover { color: var(--sag-gold); }

.footer-seo-links a:not(:last-child)::after {
    content: '\00a0\00b7\00a0';
    color: var(--sag-border);
}

/* ---- bottom bar ---- */
.footer-bottom {
    max-width: 1440px;
    margin: 0 auto;
    padding: 20px 24px 28px;
    border-top: 1px solid var(--sag-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.footer-bottom p {
    font-size: 11.5px;
    color: var(--sag-muted);
    line-height: 1.7;
    margin: 0;
    max-width: 720px;
}

.payment-methods {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.payment-methods span {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--sag-gray-text);
    border: 1px solid var(--sag-border);
    border-radius: 4px;
    padding: 5px 9px;
    background: #FFFFFF;
    white-space: nowrap;
}

@media (max-width: 860px) {
    .footer-top {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 36px 18px 26px;
    }
    .footer-middle { padding: 0 18px 28px; gap: 24px; }
    .footer-bottom { padding: 18px; flex-direction: column; align-items: flex-start; }
    .footer-seo { padding: 24px 18px 6px; }
    .newsletter-form { max-width: none; }
}

/* =========================================================
   ACCOUNT / PHONE SIGN-IN
========================================================= */
.sag-auth {
    max-width: 1080px;
    margin: 0 auto;
    padding: 48px 24px 80px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 40px;
    align-items: start;
}

.sag-auth-card {
    background: #FFFFFF;
    border: 1px solid var(--sag-border);
    border-radius: 14px;
    padding: 36px 34px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.03);
}

.sag-auth-card h1 {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--sag-black);
    margin-bottom: 8px;
}

.sag-auth-sub {
    font-size: 13.5px;
    color: var(--sag-gray-text);
    line-height: 1.7;
    margin-bottom: 24px;
}

/* ---- phone field with a fixed country code ---- */
.sag-phone-input {
    display: flex;
    align-items: stretch;
    border: 1px solid #E4E4E4;
    border-radius: 8px;
    overflow: hidden;
    background: #FFFFFF;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.sag-phone-input:focus-within {
    border-color: var(--sag-gold);
    box-shadow: 0 0 0 3px var(--sag-gold-light);
}

.sag-phone-cc {
    display: flex;
    align-items: center;
    padding: 0 14px;
    background: var(--sag-stone-bg);
    border-right: 1px solid #E4E4E4;
    font-size: 14px;
    font-weight: 700;
    color: var(--sag-charcoal);
}

.sag-phone-input input {
    flex: 1;
    min-width: 0;
    height: 52px;
    border: none;
    outline: none;
    padding: 0 14px;
    font-size: 16px;
    letter-spacing: 0.5px;
    font-family: var(--sag-font-sans);
    background: transparent;
    color: var(--sag-charcoal);
}

.sag-field.has-error .sag-phone-input { border-color: #D32F2F; }

.sag-auth-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 20px;
    font-size: 12.5px;
    color: var(--sag-gray-text);
    line-height: 1.6;
    cursor: pointer;
}

.sag-auth-consent input { margin-top: 2px; flex-shrink: 0; }

.sag-auth-submit {
    width: 100%;
    height: 52px;
    font-size: 13px;
    justify-content: center;
}

.sag-auth-legal {
    font-size: 11.5px;
    color: var(--sag-muted);
    line-height: 1.7;
    margin-top: 18px;
}

.sag-auth-legal a { color: var(--sag-gray-text); text-decoration: underline; }
.sag-auth-legal a:hover { color: var(--sag-gold); }

/* ---- OTP ---- */
.sag-auth-back {
    background: none;
    border: none;
    padding: 0;
    margin-bottom: 18px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--sag-gray-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.sag-auth-back:hover { color: var(--sag-gold); }

.sag-otp-row {
    display: flex;
    gap: 10px;
    margin-bottom: 22px;
}

.sag-otp-box {
    flex: 1;
    min-width: 0;
    height: 58px;
    text-align: center;
    font-size: 22px;
    font-weight: 800;
    color: var(--sag-black);
    border: 1px solid #E4E4E4;
    border-radius: 8px;
    background: #FFFFFF;
    font-family: var(--sag-font-sans);
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    -webkit-appearance: none;
    appearance: none;
}

.sag-otp-box:focus {
    border-color: var(--sag-gold);
    box-shadow: 0 0 0 3px var(--sag-gold-light);
}

.sag-auth-resend {
    font-size: 12.5px;
    color: var(--sag-gray-text);
    margin-top: 16px;
}

.sag-auth-resend button {
    background: none;
    border: none;
    padding: 0;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--sag-gold);
    cursor: pointer;
    font-family: var(--sag-font-sans);
}

.sag-auth-resend button:disabled { color: var(--sag-muted); cursor: default; }

/* ---- signed in ---- */
.sag-auth-done-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--sag-green-bg);
    color: var(--sag-green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 18px;
}

.sag-auth-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 24px 0 18px;
}

.sag-auth-links .sag-btn-primary,
.sag-auth-links .sag-btn-secondary {
    width: 100%;
    justify-content: center;
    height: 48px;
}

.sag-auth-signout {
    background: none;
    border: none;
    padding: 0;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--sag-muted);
    text-decoration: underline;
    cursor: pointer;
    font-family: var(--sag-font-sans);
}

/* ---- benefits rail ---- */
.sag-auth-benefits {
    background: var(--sag-stone-bg);
    border: 1px solid var(--sag-border-gold);
    border-radius: 14px;
    padding: 28px 24px;
}

.sag-auth-benefits h2 {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--sag-black);
    margin-bottom: 18px;
}

.sag-auth-benefits ul { list-style: none; margin: 0; padding: 0; }

.sag-auth-benefits li {
    display: flex;
    gap: 13px;
    padding: 12px 0;
    border-bottom: 1px solid var(--sag-border-gold);
}

.sag-auth-benefits li:last-child { border-bottom: none; }

.sag-auth-benefits li i {
    color: var(--sag-gold);
    font-size: 16px;
    margin-top: 3px;
    flex-shrink: 0;
    width: 18px;
    text-align: center;
}

.sag-auth-benefits strong {
    display: block;
    font-size: 13px;
    color: var(--sag-black);
    margin-bottom: 2px;
}

.sag-auth-benefits span {
    font-size: 12px;
    color: var(--sag-gray-text);
    line-height: 1.6;
}

@media (max-width: 860px) {
    .sag-auth {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 24px 16px 60px;
    }
    .sag-auth-card { padding: 26px 20px; border-radius: 12px; }
    .sag-auth-card h1 { font-size: 21px; }
    .sag-otp-row { gap: 7px; }
    .sag-otp-box { height: 52px; font-size: 19px; }
}

/* =========================================================
   MOBILE APP LAYER
   Makes the phone experience read like a native shopping app:
   safe-area aware chrome, thumb-sized targets, snap-scrolling
   rails, a taller labelled dock and a sticky buy bar.
========================================================= */

/* Respect the notch and the home indicator on iOS. */
:root {
    --sag-safe-top: env(safe-area-inset-top, 0px);
    --sag-safe-bottom: env(safe-area-inset-bottom, 0px);
    --sag-dock-height: 62px;
}

@media (max-width: 768px) {
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body {
        /* Room for the dock plus the home indicator. */
        padding-bottom: calc(var(--sag-dock-height) + var(--sag-safe-bottom));
        /* `overscroll-behavior-y: contain` used to live here to stop iOS
           rubber-banding. It also stops a scroll that starts on <body>
           from chaining to the scroller that can actually move, which
           broke touch scrolling outright. It belongs on the drawer and
           the sheets, which are real scrollers -- see .sag-sheet-open. */
    }

    /* Kill the grey flash when tapping, the way apps do. */
    a, button, .sag-card, .sag-dock-item, .sag-story-bubble {
        -webkit-tap-highlight-color: transparent;
    }

    /* Every tappable thing clears the 44px accessibility minimum. */
    .sag-dock-item,
    .sag-action-btn,
    .mobile-menu-btn,
    .close-menu,
    .sag-wishlist-toggle,
    .sag-tab-btn {
        min-height: 44px;
        min-width: 44px;
    }

    /* ---- dock ---- */
    .sag-mobile-bottom-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1400;
        background: rgba(255, 255, 255, 0.94);
        -webkit-backdrop-filter: saturate(180%) blur(12px);
        backdrop-filter: saturate(180%) blur(12px);
        border-top: 1px solid var(--sag-border);
        padding-bottom: var(--sag-safe-bottom);
        box-shadow: 0 -2px 18px rgba(0, 0, 0, 0.05);
    }

    .sag-mobile-dock {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        height: var(--sag-dock-height);
    }

    .sag-dock-item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.2px;
        color: var(--sag-muted);
        text-decoration: none;
        transition: color 0.18s ease;
    }

    .sag-dock-item i { font-size: 18px; line-height: 1; }

    .sag-dock-item.active {
        color: var(--sag-black);
    }

    .sag-dock-item.active i { color: var(--sag-gold); }

    /* A small bar above the active item, like a tab indicator. */
    .sag-dock-item.active::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 26px;
        height: 3px;
        border-radius: 0 0 3px 3px;
        background: var(--sag-gold);
    }

    .sag-dock-badge {
        position: absolute;
        top: 6px;
        left: 50%;
        margin-left: 4px;
        min-width: 17px;
        height: 17px;
        padding: 0 5px;
        border-radius: 100px;
        background: #D32F2F;
        color: #FFFFFF;
        font-size: 10px;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }

    /* ---- horizontal rails scroll and snap like app carousels ---- */
    .sag-stories-container,
    .sag-tab-pills,
    .sag-reels-grid {
        display: flex;
        /* The base rules wrap these; a rail must not, or it stacks
           into rows instead of scrolling. */
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 14px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 14px 16px;
        margin: 0;
    }

    .sag-stories-container::-webkit-scrollbar,
    .sag-tab-pills::-webkit-scrollbar,
    .sag-reels-grid::-webkit-scrollbar { display: none; }

    .sag-stories-container > *,
    .sag-tab-pills > *,
    .sag-reels-grid > * {
        scroll-snap-align: start;
        flex: 0 0 auto;
    }

    /* ---- two-up product grid, app style ---- */
    .sag-products-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        padding: 0 14px;
    }

    .sag-card {
        border-radius: 12px;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.03);
    }
    .sag-card:hover { transform: none; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.03); }
    .sag-card-body { padding: 12px 12px 14px; }
    .sag-card-title { font-size: 13.5px; line-height: 1.35; min-height: 36px; margin-bottom: 8px; }
    .sag-price-row { font-size: 14px; gap: 6px; margin-bottom: 10px; }
    .sag-price-row strong { font-size: 16px; }
    .sag-price-row del { font-size: 12px; }
    .sag-price-row .discount-percent { font-size: 11.5px; }
    .sag-add-bag-btn {
        height: 42px;
        font-size: 11px;
        letter-spacing: 1px;
        border-radius: 8px;
    }
    .sag-wishlist-toggle {
        width: 34px;
        height: 34px;
        font-size: 13.5px;
        top: 10px;
        right: 10px;
    }
    .sag-badge {
        font-size: 10px;
        padding: 3px 6px;
        top: 10px;
        left: 10px;
    }

    /* Full-bleed sections read as app screens. */
    .sag-hero-section,
    .sag-trust-strip,
    .sag-quick-track { border-radius: 0; }

    .sag-section-header { padding: 26px 16px 14px; }
    .sag-section-title { font-size: clamp(20px, 5vw, 24px); line-height: 1.28; word-break: break-word; overflow-wrap: break-word; }

    /* Modals become bottom sheets. */
    .order-modal .modal-box {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: none;
        border-radius: 18px 18px 0 0;
        padding: 26px 20px calc(26px + var(--sag-safe-bottom));
        animation: sag-sheet-up 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @keyframes sag-sheet-up {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

    /* Drawer gets a grabber and rounded edge. */
    .mobile-menu {
        width: 86vw;
        max-width: 340px;
        padding-top: calc(20px + var(--sag-safe-top));
    }

    .mobile-nav a {
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

/* ---------------------------------------------------------
   STICKY BUY BAR — the product page's app-style purchase rail
--------------------------------------------------------- */
.sag-buy-bar {
    display: none;
}

@media (max-width: 768px) {
    .sag-buy-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(var(--sag-dock-height) + var(--sag-safe-bottom));
        z-index: 1300;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        background: #FFFFFF;
        border-top: 1px solid var(--sag-border);
        box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.07);
        transform: translateY(130%);
        transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .sag-buy-bar.is-visible { transform: translateY(0); }

    .sag-buy-bar-price {
        flex: 0 0 auto;
        line-height: 1.2;
    }

    .sag-buy-bar-price strong {
        display: block;
        font-size: 16px;
        font-weight: 800;
        color: var(--sag-black);
    }

    .sag-buy-bar-price span {
        font-size: 10.5px;
        color: var(--sag-muted);
    }

    .sag-buy-bar button {
        flex: 1;
        height: 46px;
        border: none;
        border-radius: 10px;
        background: var(--sag-black);
        color: #FFFFFF;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 1px;
        text-transform: uppercase;
        cursor: pointer;
        font-family: var(--sag-font-sans);
    }

    .sag-buy-bar button.is-secondary {
        flex: 0 0 46px;
        background: var(--sag-stone-bg);
        color: var(--sag-black);
        border: 1px solid var(--sag-border-gold);
        font-size: 16px;
    }
}

/* ---------------------------------------------------------
   PULL-TO-REFRESH GUARD
   Prevents the page bouncing behind fixed chrome on iOS.
--------------------------------------------------------- */
@media (max-width: 768px) {
    .mobile-menu.active,
    body.sag-sheet-open { overscroll-behavior: none; }
}

/* =========================================================
   REVENUE LAYER
========================================================= */
.sag-nudge {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-wrap: wrap;
    padding: 12px 15px;
    margin-bottom: 12px;
    border: 1px solid var(--sag-border-gold);
    background: var(--sag-stone-bg);
    border-radius: 10px;
    font-size: 12.5px;
    color: var(--sag-charcoal);
    line-height: 1.5;
}

.sag-nudge i { color: var(--sag-gold); font-size: 15px; flex-shrink: 0; }
.sag-nudge span { flex: 1; min-width: 160px; }

.sag-nudge a {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--sag-black);
    border-bottom: 1.5px solid var(--sag-gold);
    padding-bottom: 1px;
    white-space: nowrap;
}

/* ---- exit-intent reminder ---- */
.sag-reminder-overlay {
    position: fixed;
    inset: 0;
    z-index: 99998;
    background: rgba(17, 17, 17, 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    transition: opacity 0.26s ease;
}

.sag-reminder-overlay.is-open { opacity: 1; }

.sag-reminder {
    position: relative;
    background: #FFFFFF;
    border-radius: 16px;
    padding: 34px 30px 28px;
    max-width: 400px;
    width: 100%;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
    transform: translateY(14px);
    transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}

.sag-reminder-overlay.is-open .sag-reminder { transform: translateY(0); }

.sag-reminder-img {
    width: 86px;
    height: 86px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid var(--sag-border);
    margin: 0 auto 16px;
}

.sag-reminder h2 {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--sag-black);
    margin-bottom: 7px;
}

.sag-reminder p {
    font-size: 13.5px;
    color: var(--sag-gray-text);
    margin-bottom: 22px;
}

.sag-reminder-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sag-reminder-actions .sag-btn-primary {
    width: 100%;
    justify-content: center;
    height: 48px;
}

.sag-reminder-dismiss {
    background: none;
    border: none;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--sag-muted);
    cursor: pointer;
    padding: 6px;
    font-family: var(--sag-font-sans);
}

.sag-reminder-dismiss:hover { color: var(--sag-charcoal); }

.sag-reminder-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: none;
    background: none;
    color: var(--sag-muted);
    font-size: 15px;
    cursor: pointer;
    border-radius: 8px;
}

.sag-reminder-close:hover { background: var(--sag-stone-bg); color: var(--sag-black); }

/* ---- resume pill ---- */
.sag-resume-pill {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 1350;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 42px 11px 15px;
    background: var(--sag-black);
    color: #FFFFFF;
    border-radius: 100px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.26);
    transform: translateY(140%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    max-width: calc(100vw - 40px);
}

.sag-resume-pill.is-visible { transform: translateY(0); }

.sag-resume-pill i { color: var(--sag-gold); font-size: 16px; }

.sag-resume-pill strong {
    display: block;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.3;
}

.sag-resume-pill small {
    display: block;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.72);
}

.sag-resume-close {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
    border-radius: 50%;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sag-resume-close:hover { background: rgba(255, 255, 255, 0.24); }

@media (max-width: 768px) {
    /* Sits above the dock, and never over the buy bar. */
    .sag-resume-pill {
        left: 14px;
        right: 14px;
        bottom: calc(var(--sag-dock-height) + var(--sag-safe-bottom) + 12px);
        max-width: none;
    }
    body.sag-has-buy-bar .sag-resume-pill { display: none; }
}

/* ---------------------------------------------------------
   MOBILE DENSITY
   Desktop section rhythm (70-90px) reads as dead space on a
   phone. Apps sit closer together.
--------------------------------------------------------- */
@media (max-width: 768px) {
    .sag-comparison-section,
    .sag-reels-section,
    .sag-gifting-grid,
    .sag-reviews-section,
    .sag-faq-section,
    .sag-bestsellers {
        margin-bottom: 36px;
        padding-left: 0;
        padding-right: 0;
    }

    .sag-reviews-section { padding: 30px 0; }
    .sag-faq-container { padding: 0 14px; }

    /* The comparison table scrolls rather than squeezing. */
    .sag-comparison-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 14px;
    }
    .sag-comparison-table { min-width: 520px; }
}

/* =========================================================
   HERO — full-bleed banner carousel (Palmonas Transform Engine)
   Hardware-accelerated translate3d sliding with desktop mouse drag
   and mobile touch gestures.
========================================================= */
.sag-hero {
    position: relative;
    background: var(--sag-card-bg);
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

.sag-hero-track {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    transform: translate3d(0, 0, 0);
    will-change: transform;
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.sag-hero-track.is-dragging {
    cursor: grabbing;
    transition: none !important;
}

.sag-hero-track::-webkit-scrollbar { display: none; }
.sag-hero-track:focus-visible { outline: 2px solid var(--sag-gold); outline-offset: -3px; }

.sag-hero-slide {
    position: relative;
    flex: 0 0 100%;
    min-width: 100%;
    width: 100%;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    transition: none !important;
}

.sag-hero-slide picture,
.sag-hero-slide img {
    display: block;
    width: 100%;
    height: clamp(320px, 34vw, 480px);
    object-fit: cover;
    object-position: center 28%;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    transform: none !important;
    transition: none !important;
}

/* A scrim from the left keeps the caption legible over any photograph. */
.sag-hero-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        rgba(17, 17, 17, 0.72) 0%,
        rgba(17, 17, 17, 0.46) 38%,
        rgba(17, 17, 17, 0.08) 66%,
        rgba(17, 17, 17, 0) 100%
    );
    pointer-events: none;
}

.sag-hero-caption {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 clamp(20px, 6vw, 80px);
    pointer-events: none;
}

.sag-hero-kicker {
    font-size: clamp(10px, 1.1vw, 12px);
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--sag-gold);
}

.sag-hero-heading {
    font-family: var(--sag-font-display);
    font-size: clamp(26px, 3.6vw, 46px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: #FFFFFF;
    max-width: 16ch;
    margin: 0;
}

.sag-hero-sub {
    font-size: clamp(12.5px, 1.3vw, 15px);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
    max-width: 38ch;
    margin: 0;
}

.sag-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    min-height: 46px;
    padding: 0 26px;
    background: #FFFFFF;
    color: var(--sag-black);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.sag-hero-slide:hover .sag-hero-btn { background: var(--sag-gold); }

/* ---- arrows ---- */
.sag-hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    color: var(--sag-black);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
    transition: background 0.2s ease, opacity 0.2s ease;
}

.sag-hero-arrow:hover { background: #FFFFFF; }
.sag-hero-arrow.is-prev { left: 16px; }
.sag-hero-arrow.is-next { right: 16px; }
.sag-hero-arrow[disabled] { opacity: 0.35; cursor: default; }

/* ---- dots ---- */
.sag-hero-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.sag-hero-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background 0.2s ease, width 0.2s ease;
}

.sag-hero-dot.is-active {
    width: 22px;
    border-radius: 100px;
    background: #FFFFFF;
}

@media (max-width: 767px) {
    .sag-hero-slide picture,
    .sag-hero-slide img {
        height: clamp(380px, 92vw, 460px);
        object-position: center 24%;
    }

    /* Bottom-anchored caption over a vertical scrim reads better on a phone. */
    .sag-hero-slide::after {
        background: linear-gradient(
            to top,
            rgba(17, 17, 17, 0.82) 0%,
            rgba(17, 17, 17, 0.38) 42%,
            rgba(17, 17, 17, 0) 72%
        );
    }

    .sag-hero-caption {
        justify-content: flex-end;
        padding: 0 18px 46px;
        gap: 8px;
    }

    .sag-hero-heading { max-width: 20ch; }
    .sag-hero-arrow { display: none; }
    .sag-hero-dots { bottom: 16px; }
}

/* =========================================================
   FAQ — the accordion had no container and the <button> kept
   the browser's default grey chrome, so rows rendered at
   fit-content width with a grey background.
========================================================= */
.sag-faq-container {
    max-width: 880px;
    margin: 0 auto 70px;
    padding: 0 24px;
}

.sag-faq-item {
    border-bottom: 1px solid var(--sag-border);
}

.sag-faq-item:first-child {
    border-top: 1px solid var(--sag-border);
}

.sag-faq-question {
    width: 100%;
    margin: 0;
    padding: 20px 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: none;
    border: none;
    border-radius: 0;
    text-align: left;
    cursor: pointer;
    font-family: var(--sag-font-sans);
    -webkit-appearance: none;
    appearance: none;
}

.sag-faq-question > span {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--sag-black);
    letter-spacing: -0.01em;
}

.sag-faq-question:hover > span { color: var(--sag-gold); }

.sag-faq-question > i {
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--sag-muted);
    transition: transform 0.3s ease, color 0.3s ease;
}

.sag-faq-item.active .sag-faq-question > i {
    transform: rotate(180deg);
    color: var(--sag-gold);
}

.sag-faq-answer {
    display: none;
    padding: 0 4px 22px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--sag-gray-text);
    max-width: 68ch;
}

.sag-faq-item.active .sag-faq-answer { display: block; }

@media (max-width: 768px) {
    .sag-faq-container { padding: 0 16px; margin-bottom: 36px; }
    .sag-faq-question { padding: 17px 2px; }
    .sag-faq-question > span { font-size: 14px; }
    .sag-faq-answer { font-size: 13.5px; padding-bottom: 18px; }
}

/* =========================================================
   CATEGORY STORIES — labels were clipped to one nowrap line,
   so "Best Sellers" became "BEST SEL...".
========================================================= */
.sag-stories-container {
    justify-content: center;
}

.sag-story-bubble {
    flex: 0 0 auto;
    width: 88px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.sag-story-avatar-wrap,
.sag-story-avatar-inner {
    flex: 0 0 auto;
}

/* Every thumbnail crops identically, so the row reads as one set. */
.sag-story-avatar-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.sag-story-label {
    width: 100%;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.3;
    color: var(--sag-charcoal);
    text-transform: uppercase;
    text-align: center;
    /* Two lines, then clamp — never a mid-word ellipsis. */
    white-space: normal;
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}

@media (max-width: 768px) {
    .sag-stories-container { justify-content: flex-start; }
    .sag-story-bubble { width: 78px; }
    .sag-story-label { font-size: 10px; }
}

/* =========================================================
   PRODUCT GALLERY
   Desktop: stage image + thumbnail strip.
   Phone:   full-bleed swipe rail with dots, and the thumbnail
            strip is hidden — it was rendering as oversized tiles
            behind the sticky buy bar.
========================================================= */
.sag-pdp-swipe { display: none; }

@media (max-width: 991px) {
    .sag-pdp-swipe {
        display: block;
        position: relative;
        overflow: hidden;
        margin: 0 calc(50% - 50vw) 12px;
        width: 100vw;
        max-width: 100vw;
        background: var(--sag-card-bg);
    }

    .sag-pdp-swipe-track {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        touch-action: pan-y;
        user-select: none;
        -webkit-user-select: none;
        will-change: transform;
    }

    .sag-pdp-swipe-slide {
        flex: 0 0 100vw;
        width: 100vw;
        min-width: 100vw;
        max-width: 100vw;
        position: relative;
        box-sizing: border-box;
    }

    .sag-pdp-swipe-slide img {
        display: block;
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }

    .sag-pdp-swipe .sag-badge {
        position: absolute;
        top: 12px;
        left: 12px;
        z-index: 3;
    }

    .sag-pdp-swipe .sag-wishlist-toggle {
        position: absolute;
        top: 10px;
        right: 12px;
        z-index: 3;
        width: 44px;
        height: 44px;
    }

    .sag-pdp-swipe-dots {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 12px;
        z-index: 3;
        display: flex;
        justify-content: center;
        gap: 7px;
        /* A pill behind the dots keeps them readable over pale product
           photography, where bare dots disappear. */
        padding: 7px 11px;
        border-radius: 100px;
        background: rgba(255, 255, 255, 0.82);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    }

    .sag-pdp-swipe-dots .sag-hero-dot {
        background: rgba(17, 17, 17, 0.28);
    }

    .sag-pdp-swipe-dots .sag-hero-dot.is-active {
        background: var(--sag-black);
    }

    /* The desktop stage and thumbnails step aside on phones. */
    .sag-gallery-sticky .sag-stage-img-wrap,
    .sag-gallery-sticky .sag-thumb-strip {
        display: none;
    }

    .sag-gallery-sticky {
        position: static;
        top: auto;
    }
}

/* =========================================================
   LAYOUT SYSTEM
   One container width, one gutter and one vertical rhythm for
   every block on the page. Before this, section headers carried
   a 60px top margin on top of 70-90px section margins, which
   stacked into 130-150px of dead space above every heading, and
   each block used a different gutter (20 / 24 / 32px) so nothing
   lined up down the left edge.
========================================================= */
:root {
    --sag-container: 1320px;
    --sag-gutter: clamp(16px, 3.4vw, 40px);
    --sag-section-space: clamp(34px, 4.6vw, 64px);
    --sag-header-space: clamp(18px, 2.2vw, 30px);
}

/* ---- one gutter, one max width ---- */
.sag-header-primary,
.sag-header-secondary .sag-desktop-nav,
.sag-section-header,
.sag-products-grid,
.sag-gifting-grid,
.sag-reels-grid,
.sag-reviews-grid,
.sag-faq-container,
.sag-trust-grid,
.sag-stories-container,
.footer-top,
.footer-middle,
.footer-seo,
.footer-bottom {
    max-width: var(--sag-container);
    margin-inline: auto;
    padding-inline: var(--sag-gutter);
    box-sizing: border-box;
}

/* ---- vertical rhythm belongs to the section, not the heading ---- */
.sag-home-section,
.sag-reels-section,
.sag-reviews-section,
.sag-faq-section,
.sag-bestsellers {
    padding-block: var(--sag-section-space);
    margin-block: 0;
}

.sag-gifting-grid {
    /* Spacing below comes from the next section's padding, so the two
       do not stack into a double gap. */
    padding-block: 0 var(--sag-section-space);
    margin-block: 0;
}

.sag-section-header {
    margin: 0 auto var(--sag-header-space);
    padding-block: 0;
}

/* Grids no longer carry their own bottom margin; the section does. */
.sag-products-grid,
.sag-reviews-grid,
.sag-reels-grid {
    margin-block: 0;
}

/* ---- nav sits centred, like the rest of the page ---- */
.sag-header-secondary .sag-desktop-nav {
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 4px;
}

/* ---- trust strip lines up with everything else ---- */
.sag-trust-strip {
    padding-block: clamp(18px, 2.4vw, 28px);
}

/* =========================================================
   FOOTER ALIGNMENT
   The newsletter column was 1044px wide, so the form floated in
   a large empty area, and the four link columns spread to 324px
   each across the full width.
========================================================= */
.footer-top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 56px);
    padding-block: clamp(32px, 4vw, 52px) clamp(20px, 2.6vw, 30px);
    align-items: start;
}

.footer-brand p {
    max-width: 42ch;
}

.footer-newsletter {
    max-width: 480px;
}

.newsletter-form {
    max-width: none;
}

.footer-middle {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 40px);
    padding-block: 0 clamp(26px, 3.4vw, 40px);
}

.footer-socials {
    max-width: var(--sag-container);
    margin-inline: auto;
    padding-block: clamp(20px, 2.6vw, 28px);
}

.footer-seo {
    padding-block: clamp(22px, 3vw, 32px) clamp(8px, 1.2vw, 12px);
}

.footer-bottom {
    padding-block: clamp(16px, 2vw, 22px) clamp(22px, 3vw, 30px);
    align-items: flex-start;
    gap: clamp(14px, 2vw, 24px);
}

.footer-bottom p {
    max-width: 86ch;
}

@media (max-width: 900px) {
    .footer-top { grid-template-columns: minmax(0, 1fr); }
    .footer-middle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-newsletter { max-width: none; }
}

@media (max-width: 520px) {
    .footer-middle { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .footer-bottom { flex-direction: column; }
    .newsletter-form { flex-direction: column; }
    .newsletter-form button { width: 100%; }
}

/* =========================================================
   GRID DENSITY ACROSS BREAKPOINTS
   Fixed column counts left gaps or crushed cards between the
   phone and desktop cases.
========================================================= */
.sag-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: clamp(12px, 1.6vw, 26px);
}

.sag-reviews-grid,
.sag-gifting-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(14px, 2vw, 24px);
}

.sag-reels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: clamp(12px, 1.6vw, 22px);
}

@media (max-width: 768px) {
    .sag-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding-inline: var(--sag-gutter);
    }

    /* =========================================================
       MOBILE PHONE HORIZONTAL CAROUSELS (max-width: 768px)
       Our Promise, Curated Collections, and Jewellery in Motion
       behave as native touch-swipeable scroll-snap rails with
       edge peek cues and hidden scrollbars.
    ========================================================= */
    .sag-reviews-grid,
    .sag-reviews-section .sag-reviews-grid,
    .sag-gifting-grid,
    .sag-reels-grid,
    .sag-reels-section .sag-reels-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        padding-top: 6px !important;
        padding-bottom: 22px !important;
        padding-inline: 16px !important;
        scroll-padding-inline: 16px !important;
        margin-inline: 0 !important;
    }

    .sag-reviews-grid::-webkit-scrollbar,
    .sag-reviews-section .sag-reviews-grid::-webkit-scrollbar,
    .sag-gifting-grid::-webkit-scrollbar,
    .sag-reels-grid::-webkit-scrollbar,
    .sag-reels-section .sag-reels-grid::-webkit-scrollbar {
        display: none !important;
    }

    /* 1. Our Promise Cards Carousel */
    .sag-reviews-grid,
    .sag-reviews-section .sag-reviews-grid {
        gap: 14px !important;
    }

    .sag-reviews-grid .sag-review-card,
    .sag-reviews-grid .sag-promise-card {
        flex: 0 0 84% !important;
        max-width: 320px !important;
        min-width: 260px !important;
        scroll-snap-align: start !important;
        scroll-snap-stop: normal !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
        border-radius: 14px !important;
        border: 1px solid var(--sag-border) !important;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05) !important;
        background: #FFFFFF !important;
        padding: 22px 20px !important;
    }

    .sag-promise-card .sag-promise-title {
        font-size: 17px !important;
        font-weight: 700 !important;
        margin: 10px 0 8px !important;
        line-height: 1.3 !important;
        color: var(--sag-black) !important;
    }

    .sag-promise-card .sag-review-text {
        font-size: 13px !important;
        line-height: 1.5 !important;
        color: var(--sag-muted) !important;
        margin-bottom: 16px !important;
    }

    .sag-promise-card .sag-promise-link {
        font-size: 12.5px !important;
        font-weight: 700 !important;
        color: var(--sag-gold) !important;
        text-decoration: none !important;
        margin-top: auto !important;
    }

    /* 2. Curated Collections / Gifting Carousel */
    .sag-gifting-grid {
        gap: 14px !important;
        margin-bottom: 36px !important;
    }

    .sag-gifting-grid .sag-gifting-card {
        flex: 0 0 82% !important;
        max-width: 310px !important;
        min-width: 250px !important;
        height: 290px !important;
        scroll-snap-align: start !important;
        scroll-snap-stop: normal !important;
        margin: 0 !important;
        border-radius: 14px !important;
        position: relative !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: flex-end !important;
        padding: 22px !important;
    }

    .sag-gifting-card .sag-gifting-content {
        position: relative !important;
        z-index: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }

    .sag-gifting-card .sag-gifting-tag {
        font-size: 11px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        color: var(--sag-gold) !important;
        display: block !important;
    }

    .sag-gifting-card .sag-gifting-title {
        font-size: 21px !important;
        font-weight: 700 !important;
        color: #FFFFFF !important;
        line-height: 1.25 !important;
        margin: 0 !important;
    }

    .sag-gifting-card .sag-gifting-btn {
        font-size: 12px !important;
        font-weight: 700 !important;
        color: var(--sag-gold) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        border-bottom: 1.5px solid var(--sag-gold) !important;
        padding-bottom: 2px !important;
        align-self: flex-start !important;
        margin-top: 4px !important;
    }

    /* 3. Jewellery in Motion / Reels Carousel */
    .sag-reels-grid,
    .sag-reels-section .sag-reels-grid {
        gap: 12px !important;
    }

    .sag-reels-grid .sag-reel-card {
        flex: 0 0 72% !important;
        max-width: 250px !important;
        min-width: 210px !important;
        height: 350px !important;
        scroll-snap-align: start !important;
        scroll-snap-stop: normal !important;
        margin: 0 !important;
        border-radius: 14px !important;
        position: relative !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .sag-reel-card .sag-reel-overlay {
        padding: 18px 16px !important;
    }

    .sag-reel-card .sag-reel-title {
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        margin-bottom: 4px !important;
    }

    .sag-reel-card .sag-reel-sub {
        font-size: 11.5px !important;
        margin-bottom: 12px !important;
        opacity: 0.9 !important;
    }

    .sag-reel-card .sag-reel-btn {
        font-size: 11.5px !important;
        padding: 6px 14px !important;
    }

    /* 4. Four-Pillar Trust Strip Carousel */
    .sag-trust-strip {
        padding-block: 16px !important;
        overflow: hidden !important;
    }

    .sag-trust-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        gap: 12px !important;
        padding-inline: 16px !important;
        padding-block: 2px !important;
        scroll-padding-inline: 16px !important;
        margin-inline: 0 !important;
    }

    .sag-trust-grid::-webkit-scrollbar {
        display: none !important;
    }

    .sag-trust-item {
        flex: 0 0 auto !important;
        width: 275px !important;
        min-height: 72px !important;
        scroll-snap-align: start !important;
        scroll-snap-stop: normal !important;
        background: var(--sag-stone-bg, #FAFAF8) !important;
        border: 1px solid var(--sag-border) !important;
        border-radius: 12px !important;
        padding: 10px 14px !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        box-sizing: border-box !important;
    }

    .sag-trust-icon {
        width: 38px !important;
        height: 38px !important;
        border-radius: 50% !important;
        background: #FFFFFF !important;
        color: var(--sag-gold) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 15px !important;
        flex-shrink: 0 !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    }

    .sag-trust-text {
        display: flex !important;
        flex-direction: column !important;
        min-width: 0 !important;
        flex: 1 !important;
    }

    .sag-trust-text h4 {
        font-size: 13px !important;
        font-weight: 700 !important;
        color: var(--sag-black) !important;
        margin: 0 0 2px 0 !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
    }

    .sag-trust-text p {
        font-size: 11px !important;
        color: var(--sag-muted) !important;
        line-height: 1.35 !important;
        margin: 0 !important;
        white-space: normal !important;
    }
}


/* ---------------------------------------------------------
   HERO — image only
   The caption and its scrim are retired: the banner artwork
   carries the message, as it does on the reference storefront.
--------------------------------------------------------- */
.sag-hero-slide::after { content: none; }
.sag-hero-caption { display: none; }

/* Clean floating pagination dots without background pill */
.sag-hero-dots::before {
    content: none !important;
    display: none !important;
}

.sag-hero-dots {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    bottom: 16px !important;
    z-index: 5 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.sag-hero-dot {
    width: 8px !important;
    height: 8px !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.75) !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35) !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.sag-hero-dot.is-active {
    width: 24px !important;
    border-radius: 100px !important;
    background: #FFFFFF !important;
    border-color: #FFFFFF !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45) !important;
}

/* Cloned loop slides must never be read out or counted twice. */
.sag-hero-slide[data-clone] { pointer-events: auto; }


/* The reviews band keeps its tinted background full-bleed while its
   contents line up with every other block. */
.sag-reviews-section {
    padding-inline: 0;
}

.sag-reviews-section .sag-section-header,
.sag-reviews-section .sag-reviews-grid {
    max-width: var(--sag-container);
    margin-inline: auto;
    padding-inline: var(--sag-gutter);
    box-sizing: border-box;
}

/* A short line of copy under a section heading. The storefront had
   this inline on the reels section; WordPress needs it as a class. */
.sag-section-lede {
    max-width: var(--sag-container-narrow);
    margin: -8px auto 22px;
    padding-inline: var(--sag-gutter);
    box-sizing: border-box;
    text-align: center;
    color: var(--sag-gray-text);
    font-size: 14px;
    line-height: 1.6;
}

/* =========================================================
   THE ANNOUNCEMENT CRAWLER
   The bar rotates through four messages. Each one is
   `white-space: nowrap` and centred, so on a 320px phone a
   634px message hung 157px off both ends and the bar's
   `overflow: hidden` quietly cut the start and the end off --
   a shopper saw "USE CODE" with the code itself clipped away.
   When a message does not fit, it now crawls: the text is
   duplicated and the pair slides by exactly half its width, so
   the loop is seamless and the whole message is readable.
========================================================= */
@keyframes sag-crawl {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.sag-ticker-item.is-crawling {
    animation: sag-crawl var(--sag-crawl-duration, 14s) linear infinite;
    will-change: transform;
}

.sag-announcement-bar:has(.sag-ticker-item.is-crawling) {
    justify-content: flex-start;
}

/* The duplicate exists only to make the wrap seamless. */
.sag-ticker-run + .sag-ticker-run {
    padding-left: 3.5em;
}

.sag-ticker-item.is-crawling .sag-ticker-run {
    padding-right: 3.5em;
}

/* Someone reading with motion turned down gets a static bar that
   simply wraps instead of a strip sliding past them. */
@media (prefers-reduced-motion: reduce) {
    .sag-ticker-item.is-crawling {
        animation: none;
    }
    .sag-ticker-item {
        white-space: normal;
        text-align: center;
    }
    .sag-ticker-item .sag-ticker-run + .sag-ticker-run {
        display: none;
    }
}

/* =========================================================
   RESPONSIVE IMAGES
   Every <img> is now wrapped in <picture> so the browser can
   pick a WebP at the width it will actually paint. <picture>
   is an inline box by default, which would sit between the
   image and the layout rules written for it -- a card image
   styled `height: 100%` would resolve against the picture and
   collapse. `display: contents` removes that box entirely, so
   the <img> lays out exactly as it did before the wrapper.
========================================================= */
picture {
    display: contents;
}

/* =========================================================
   THE SAGVIRA PROMISE CARDS
   The homepage used to carry three invented customer reviews.
   They are now three commitments, each linking to the page that
   states the full terms, so the cards reuse the review card shell
   but read as statements rather than quotes.
========================================================= */
.sag-promise-card {
    text-decoration: none;
    color: inherit;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.sag-promise-card:hover,
.sag-promise-card:focus-visible {
    transform: translateY(-4px);
    border-color: var(--sag-border-gold);
    box-shadow: 0 16px 36px rgba(17, 17, 17, 0.08);
}

.sag-promise-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--sag-stone-bg);
    color: var(--sag-gold);
    font-size: 16px;
    transition: transform 0.2s ease, background 0.2s ease;
}

.sag-promise-card:hover .sag-promise-icon {
    transform: scale(1.06);
    background: #FAF7F2;
}

.sag-promise-title {
    font-size: clamp(16px, 1.8vw, 18px);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--sag-black);
    margin: 0 0 10px;
    line-height: 1.3;
}

/* The quote styling on .sag-review-text is wrong for a statement. */
.sag-promise-card .sag-review-text {
    font-style: normal;
    font-size: clamp(13px, 1.3vw, 14px);
    color: #4A4A4A;
    line-height: 1.65;
    margin-bottom: 18px;
    flex: 1;
}

.sag-promise-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--sag-gold);
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s ease, color 0.2s ease;
}

.sag-promise-card:hover .sag-promise-link {
    gap: 10px;
    color: var(--sag-black);
}

/* =========================================================
   PRODUCT GALLERY — DESKTOP THUMBNAILS
   .sag-thumb carried no styles at all, so the buttons flexed to
   fill the strip and rendered as oversized tiles under the main
   image. They are now a uniform row, aligned to the stage, with
   an overflow tile once there are more images than fit.
========================================================= */
.sag-thumb-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
    align-items: flex-start;
}

.sag-thumb {
    flex: 0 0 auto;
    width: 74px;
    height: 74px;
    padding: 0;
    border: 1.5px solid var(--sag-border);
    border-radius: 8px;
    background: var(--sag-card-bg);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.18s ease, transform 0.18s ease;
    -webkit-appearance: none;
    appearance: none;
    line-height: 0;
}

.sag-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sag-thumb:hover {
    border-color: var(--sag-border-gold);
    transform: translateY(-1px);
}

.sag-thumb.active {
    border-color: var(--sag-gold);
    box-shadow: 0 0 0 2px var(--sag-gold-light);
}

.sag-thumb:focus-visible {
    outline: 2px solid var(--sag-gold);
    outline-offset: 2px;
}

/* The "+N" tile, as on large marketplaces. */
.sag-thumb-more {
    flex: 0 0 auto;
    width: 74px;
    height: 74px;
    border: 1.5px solid var(--sag-border-gold);
    border-radius: 8px;
    background: #FFFFFF;
    color: var(--sag-black);
    font-family: var(--sag-font-sans);
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s ease;
}

.sag-thumb-more:hover { background: var(--sag-stone-bg); }

.sag-gallery-hint {
    margin-top: 10px;
    font-size: 11.5px;
    color: var(--sag-muted);
    text-align: center;
}

@media (max-width: 1200px) {
    .sag-thumb,
    .sag-thumb-more { width: 66px; height: 66px; }
}

/* =========================================================
   PAGE CONTAINERS
   Every page previously declared its own max-width, gutter and
   vertical margin (1000-1440px, 24/32px, 30-90px), so nothing
   lined up between pages. They all sit on the shared tokens now.
========================================================= */
:root {
    --sag-container-mid: 1180px;    /* forms and carts */
    --sag-container-narrow: 980px;  /* prose */
}

/* ---- wide ---- */
.shop-page-wrap,
.collections-grid,
.sag-pdp-layout,
.about-pillars-grid {
    max-width: var(--sag-container);
    margin-inline: auto;
    padding-inline: var(--sag-gutter);
    box-sizing: border-box;
}

/* ---- medium ---- */
.cart-container,
.checkout-container,
.contact-container {
    max-width: var(--sag-container-mid);
    margin-inline: auto;
    padding-inline: var(--sag-gutter);
    box-sizing: border-box;
}

/* ---- prose ---- */
.about-story-section,
.craft-container {
    max-width: var(--sag-container-narrow);
    margin-inline: auto;
    padding-inline: var(--sag-gutter);
    box-sizing: border-box;
}

/* ---- one vertical rhythm for every page body ---- */
.shop-page-wrap,
.collections-grid,
.sag-pdp-layout,
.cart-container,
.checkout-container,
.contact-container,
.about-pillars-grid,
.about-story-section {
    margin-block: var(--sag-section-space);
}

/* The reels band is full-bleed; its contents carry the gutter. */
.sag-reels-section {
    padding-inline: 0;
}

.sag-reels-section .sag-section-header,
.sag-reels-section .sag-reels-grid {
    max-width: var(--sag-container);
    margin-inline: auto;
    padding-inline: var(--sag-gutter);
    box-sizing: border-box;
}

/* ---- inner page grids stay readable at every width ---- */
.shop-page-wrap {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: clamp(20px, 3vw, 44px);
    align-items: start;
}

.collections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(16px, 2.4vw, 28px);
}

.sag-pdp-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(24px, 3.4vw, 50px);
}

.cart-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: clamp(20px, 3vw, 40px);
    align-items: start;
}

.checkout-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
    gap: clamp(20px, 3vw, 40px);
    align-items: start;
}

.contact-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(20px, 3vw, 40px);
    align-items: start;
}

.about-pillars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(16px, 2.4vw, 28px);
}

@media (max-width: 991px) {
    .shop-page-wrap,
    .sag-pdp-layout,
    .cart-container,
    .checkout-container {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Filters collapse above the results rather than squeezing beside them. */
    .shop-page-wrap .shop-sidebar {
        order: -1;
    }
}

/* ---- remaining page bodies on the shared gutter ---- */
#wishlist-root,
.sag-404,
.sag-auth {
    max-width: var(--sag-container);
    margin-inline: auto;
    padding-inline: var(--sag-gutter);
    box-sizing: border-box;
}

#wishlist-root {
    padding-block: var(--sag-section-space);
}

.sag-404 {
    padding-block: clamp(48px, 8vw, 90px);
}

.sag-auth {
    max-width: var(--sag-container-mid);
    padding-block: var(--sag-section-space);
}

.sag-prose {
    max-width: var(--sag-container-narrow);
    margin-inline: auto;
    padding-inline: var(--sag-gutter);
    padding-block: var(--sag-section-space);
    box-sizing: border-box;
}

.sag-page-head {
    padding-inline: var(--sag-gutter);
    padding-block: clamp(26px, 3.6vw, 44px);
}

/* =========================================================
   CATEGORY STORY BUBBLES — box model
   The avatar elements are <span>s. Without an explicit display
   they stay inline, so the inner ring took its height from
   line-height (102px instead of 55px), pushing the label up over
   the image. WordPress exposed this because it renders the <img>
   with its own width/height attributes.
========================================================= */
.sag-story-bubble {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    text-decoration: none;
}

.sag-story-avatar-wrap {
    display: block;
    flex: 0 0 auto;
    box-sizing: border-box;
    position: relative;
}

.sag-story-avatar-inner {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    line-height: 0;
}

.sag-story-avatar-inner img,
.sag-story-avatar-inner picture {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* WordPress prints width/height attributes; ignore them here. */
    max-width: none;
    aspect-ratio: 1 / 1;
}

/* Empty bubble (no featured image yet) still holds its circle. */
.sag-story-avatar-inner:empty {
    background: var(--sag-card-bg);
}

/* =========================================================
   WOOCOMMERCE PRODUCT GRID — phone density
   ul.products used auto-fill with a 230px minimum, which on a
   375px screen leaves room for exactly one column. Shops show
   two. The breakpoints below are explicit rather than derived
   from a minimum width, so the count never collapses.
========================================================= */
@media (max-width: 768px) {
    .woocommerce ul.products,
    ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px;
        padding-inline: var(--sag-gutter);
    }

    .woocommerce ul.products li.product .woocommerce-loop-product__title,
    ul.products li.product .woocommerce-loop-product__title {
        font-size: 13px;
        line-height: 1.35;
    }

    .woocommerce ul.products li.product .price,
    ul.products li.product .price {
        font-size: 14px;
        gap: 6px;
    }

    .woocommerce ul.products li.product .button,
    ul.products li.product .button,
    ul.products li.product .added_to_cart {
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10.5px;
        padding: 0 10px;
    }
}

@media (max-width: 380px) {
    .woocommerce ul.products,
    ul.products {
        gap: 10px;
    }
}

/* The WordPress admin bar overlaps the fixed dock for logged-in users. */
body.admin-bar .sag-mobile-bottom-bar {
    /* the dock stays put; the bar only affects the top */
    bottom: 0;
}

/* =========================================================
   SAGVIRA STOREFRONT ADMIN MANAGEMENT BAR
========================================================= */
.sag-admin-bar {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    background: #111111;
    color: #FFFFFF;
    border-bottom: 2px solid var(--sag-gold);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 16px;
    font-size: 0.8rem;
    font-family: var(--sag-font-sans);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    flex-wrap: wrap;
    gap: 10px;
}
.sag-admin-bar a {
    color: #FFFFFF;
    text-decoration: none;
    transition: color 0.15s ease;
}
.sag-admin-bar-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.sag-admin-bar-brand {
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--sag-gold) !important;
    display: flex;
    align-items: center;
    gap: 6px;
}
.sag-admin-bar-stat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #222222;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.74rem;
    color: #DDDDDD;
}
.sag-admin-bar-stat strong {
    color: #FFFFFF;
}
.sag-admin-bar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.sag-admin-bar-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #252525;
    color: #FFFFFF !important;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.76rem;
    font-weight: 700;
    border: 1px solid #333333;
    cursor: pointer;
}
.sag-admin-bar-btn:hover {
    background: var(--sag-gold);
    color: #111111 !important;
    border-color: var(--sag-gold);
}
.sag-admin-bar-btn.is-lock {
    background: #331515;
    border-color: #551d1d;
    color: #FF8A80 !important;
}
.sag-admin-bar-btn.is-lock:hover {
    background: #D32F2F;
    color: #FFFFFF !important;
}