/* =========================================================================
   TBF Premium Store Skin — v1.0
   Drop-in CSS for a Kadence + WooCommerce client store.

   HOW THIS IS THEMED
   ---------------------------------------------------------------------
   Do NOT edit colours in this file. The TBF Premium Store Skin plugin
   prints a :root block AFTER this stylesheet with the client's brand
   values (Appearance -> Store Skin), and the cascade does the rest. The
   tokens below are fallbacks so the sheet still renders correctly if the
   plugin's inline style is ever stripped by an optimiser.
   ========================================================================= */

:root {
    /* ---- BRAND TOKENS — the only block you edit per client ---- */
    --sk-deep:        #062A24;   /* darkest — footer, CTA bands            */
    --sk-primary:     #0B3B32;   /* brand green — hero, headers            */
    --sk-primary-mid: #105547;   /* hovers, gradients                      */
    --sk-gold:        #C9A961;   /* primary metallic                       */
    --sk-gold-light:  #E3C88F;   /* highlights, hairlines on dark          */
    --sk-gold-deep:   #A8873F;   /* pressed states                         */
    --sk-cream:       #F7F2E8;   /* page ground                            */
    --sk-ink:         #1C1B19;   /* body text                              */

    /* ---- Derived — usually leave alone ---- */
    --sk-ink-soft:    #5A5651;
    --sk-line:        rgba(201, 169, 97, .28);
    --sk-line-dark:   rgba(255, 255, 255, .14);
    --sk-white:       #FFFFFF;

    --sk-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
    --sk-body:    "Jost", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* A single spacing scale. Section rhythm is what separates a premium
       store from a template — cramped vertical space reads as cheap no
       matter how good the palette is. */
    --sk-s1: 8px;
    --sk-s2: 16px;
    --sk-s3: 28px;
    --sk-s4: 48px;
    --sk-s5: 80px;
    --sk-s6: 120px;

    --sk-ease: cubic-bezier(.22, .61, .36, 1);
}

/* =========================================================================
   1. FOUNDATION
   ========================================================================= */

body {
    background: var(--sk-cream);
    color: var(--sk-ink);
    font-family: var(--sk-body);
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5,
.entry-title,
.woocommerce-loop-product__title,
.product_title {
    font-family: var(--sk-display);
    font-weight: 500;
    letter-spacing: .005em;
    line-height: 1.15;
    color: var(--sk-primary);
}

/* Display sizes use clamp() so the same rule serves phone and desktop —
   one less breakpoint to keep in sync when this is ported. */
h1, .entry-title { font-size: clamp(2.2rem, 5.2vw, 4rem); }
h2               { font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
h3               { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }

p { color: var(--sk-ink-soft); }

::selection { background: var(--sk-gold); color: var(--sk-deep); }

/* The eyebrow label above a heading — small caps, wide tracking, gold.
   Used on the hero and every section head. */
.sk-eyebrow {
    font-family: var(--sk-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--sk-gold-deep);
    margin-bottom: var(--sk-s2);
    display: block;
}

/* Hairline rule with a gold centre — a cheap, very effective luxury cue. */
.sk-rule {
    width: 68px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--sk-gold), transparent);
    margin: var(--sk-s3) auto;
    border: 0;
}

/* =========================================================================
   2. HEADER
   ========================================================================= */

.site-header-wrap,
#masthead {
    background: var(--sk-primary);
    border-bottom: 1px solid var(--sk-line-dark);
}

.site-header-row,
.site-header-main-section-left,
.site-header-main-section-right { background: transparent; }

/* Logo sizing — the mark is detailed, so it needs room to read. */
.site-branding img,
.custom-logo {
    max-height: 62px;
    width: auto;
}

/* Menu: light on green, gold on hover, gold underline that grows from
   the centre. */
.main-navigation .primary-menu-container > ul > li > a,
#primary-menu > li > a {
    color: rgba(255, 255, 255, .88) !important;
    font-family: var(--sk-body);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    position: relative;
    padding: 10px 0;
    margin: 0 var(--sk-s2);
    transition: color .3s var(--sk-ease);
}

.main-navigation .primary-menu-container > ul > li > a::after,
#primary-menu > li > a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 0;
    height: 1px;
    background: var(--sk-gold);
    transform: translateX(-50%);
    transition: width .35s var(--sk-ease);
}

.main-navigation .primary-menu-container > ul > li > a:hover,
#primary-menu > li > a:hover { color: var(--sk-gold-light) !important; }

.main-navigation .primary-menu-container > ul > li > a:hover::after,
#primary-menu > li > a:hover::after,
#primary-menu > li.current-menu-item > a::after { width: 100%; }

#primary-menu > li.current-menu-item > a { color: var(--sk-gold-light) !important; }

/* Header icons (search / cart) inherit the same treatment. */
.site-header-item .kadence-header-cart-wrap a,
.search-toggle-open { color: rgba(255,255,255,.88) !important; }
.site-header-item .kadence-header-cart-wrap a:hover,
.search-toggle-open:hover { color: var(--sk-gold-light) !important; }

/* =========================================================================
   3. BUTTONS
   ========================================================================= */

.wp-block-button__link,
.button,
button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    font-family: var(--sk-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    border-radius: 0;                 /* square = tailored; pills read casual */
    padding: 16px 38px;
    border: 1px solid transparent;
    transition: all .35s var(--sk-ease);
    box-shadow: none;
}

/* Primary — gold on green */
.wp-block-button__link,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.single_add_to_cart_button,
.checkout-button {
    background: var(--sk-gold) !important;
    color: var(--sk-deep) !important;
    border-color: var(--sk-gold) !important;
}

.wp-block-button__link:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover {
    background: transparent !important;
    color: var(--sk-gold) !important;
    border-color: var(--sk-gold) !important;
}

/* Outline variant */
.is-style-outline .wp-block-button__link {
    background: transparent !important;
    border-color: var(--sk-primary) !important;
    color: var(--sk-primary) !important;
}
.is-style-outline .wp-block-button__link:hover {
    background: var(--sk-primary) !important;
    color: var(--sk-cream) !important;
}

/* On dark bands the outline flips to gold. */
.sk-dark .is-style-outline .wp-block-button__link {
    border-color: var(--sk-gold) !important;
    color: var(--sk-gold) !important;
}
.sk-dark .is-style-outline .wp-block-button__link:hover {
    background: var(--sk-gold) !important;
    color: var(--sk-deep) !important;
}

/* =========================================================================
   4. DARK BAND — reusable section wrapper
   Add the class `sk-dark` to any Group block to get the brand green
   treatment with correct text colours throughout.
   ========================================================================= */

.sk-dark {
    background:
        radial-gradient(120% 100% at 50% 0%, var(--sk-primary-mid) 0%, var(--sk-primary) 45%, var(--sk-deep) 100%);
    color: rgba(255, 255, 255, .84);
    position: relative;
}

.sk-dark h1, .sk-dark h2, .sk-dark h3, .sk-dark h4 { color: var(--sk-white); }
.sk-dark p { color: rgba(255, 255, 255, .74); }
.sk-dark .sk-eyebrow { color: var(--sk-gold-light); }
.sk-dark a { color: var(--sk-gold-light); }

/* Gold hairline top and bottom — frames the band without a hard edge. */
.sk-dark::before,
.sk-dark::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--sk-gold), transparent);
    opacity: .5;
}
.sk-dark::before { top: 0; }
.sk-dark::after  { bottom: 0; }

/* =========================================================================
   5. WOOCOMMERCE — PRODUCT GRID
   This is where a store is won or lost. The defaults are functional and
   completely characterless.
   ========================================================================= */

.woocommerce ul.products {
    gap: var(--sk-s4) var(--sk-s3);
    margin-top: var(--sk-s4);
}

.woocommerce ul.products li.product {
    background: transparent;
    border: 0;
    padding: 0;
    text-align: center;
    transition: transform .5s var(--sk-ease);
}

/* Image: fixed 3:4 frame so a mixed-ratio catalogue still lines up.
   object-fit keeps the subject rather than squashing it. */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product .product-image img {
    aspect-ratio: 3 / 4;
    object-fit: cover;
    width: 100%;
    border-radius: 0;
    margin-bottom: var(--sk-s3);
    transition: transform 1.1s var(--sk-ease), filter .6s var(--sk-ease);
}

.woocommerce ul.products li.product:hover a img { transform: scale(1.045); }

/* The frame that clips the zoom. */
.woocommerce ul.products li.product .product-image,
.woocommerce ul.products li.product > a:first-of-type {
    display: block;
    overflow: hidden;
    background: var(--sk-white);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--sk-display);
    font-size: 1.12rem !important;
    font-weight: 500;
    line-height: 1.3;
    color: var(--sk-primary) !important;
    padding: 0 var(--sk-s2) var(--sk-s1) !important;
    transition: color .3s var(--sk-ease);
}

.woocommerce ul.products li.product:hover .woocommerce-loop-product__title {
    color: var(--sk-gold-deep) !important;
}

.woocommerce ul.products li.product .price {
    font-family: var(--sk-body);
    font-size: 14px !important;
    font-weight: 400;
    letter-spacing: .06em;
    color: var(--sk-ink-soft) !important;
}

.woocommerce ul.products li.product .price del { opacity: .45; margin-right: 6px; }
.woocommerce ul.products li.product .price ins {
    text-decoration: none;
    color: var(--sk-gold-deep) !important;
}

/* Add-to-cart appears on hover on desktop; always visible on touch, where
   there is no hover and a hidden button is simply a missing button. */
.woocommerce ul.products li.product .button {
    margin-top: var(--sk-s2);
    background: transparent !important;
    color: var(--sk-primary) !important;
    border: 1px solid var(--sk-line) !important;
    padding: 11px 26px;
    font-size: 11px;
}
.woocommerce ul.products li.product .button:hover {
    background: var(--sk-primary) !important;
    color: var(--sk-cream) !important;
    border-color: var(--sk-primary) !important;
}

@media (hover: hover) and (min-width: 768px) {
    .woocommerce ul.products li.product .button {
        opacity: 0;
        transform: translateY(6px);
        transition: opacity .35s var(--sk-ease), transform .35s var(--sk-ease),
                    background .3s var(--sk-ease), color .3s var(--sk-ease);
    }
    .woocommerce ul.products li.product:hover .button {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Sale badge — a gold seal, not a red sticker. */
.woocommerce span.onsale {
    background: var(--sk-gold) !important;
    color: var(--sk-deep) !important;
    font-family: var(--sk-body);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    border-radius: 0;
    padding: 7px 14px;
    min-height: 0;
    min-width: 0;
    line-height: 1;
    top: 14px;
    left: 14px;
    right: auto;
    margin: 0;
}

/* =========================================================================
   6. SINGLE PRODUCT
   ========================================================================= */

.single-product div.product .product_title {
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    margin-bottom: var(--sk-s2);
}

.single-product div.product .price {
    font-family: var(--sk-body);
    font-size: 1.3rem !important;
    color: var(--sk-gold-deep) !important;
    letter-spacing: .04em;
    margin-bottom: var(--sk-s3);
}

.single-product div.product .woocommerce-product-details__short-description {
    padding-top: var(--sk-s3);
    border-top: 1px solid var(--sk-line);
}

.single-product .quantity input.qty {
    border: 1px solid var(--sk-line);
    border-radius: 0;
    padding: 14px 10px;
    font-family: var(--sk-body);
}

.woocommerce-tabs ul.tabs li a {
    font-family: var(--sk-body) !important;
    font-size: 12px !important;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* =========================================================================
   7. CATEGORY TILES (homepage)
   Image with a green scrim and a gold label — reads as editorial rather
   than as a product thumbnail.
   ========================================================================= */

/* The tile takes its height from its own aspect-ratio, not from the
   image inside it. A category with no thumbnail set — the normal state of
   a store on day one — would otherwise collapse to zero height and the
   whole collections row would render as blank space. */
.sk-cat {
    position: relative;
    overflow: hidden;
    display: block;
    aspect-ratio: 4 / 5;
    background: linear-gradient(160deg, var(--sk-primary-mid), var(--sk-deep));
}

.sk-cat img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.2s var(--sk-ease);
}

.sk-cat::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6,42,36,0) 42%, rgba(6,42,36,.82) 100%);
    transition: background .5s var(--sk-ease);
}

.sk-cat:hover img { transform: scale(1.06); }
.sk-cat:hover::after {
    background: linear-gradient(180deg, rgba(6,42,36,.15) 0%, rgba(6,42,36,.88) 100%);
}

.sk-cat-label {
    position: absolute;
    left: 0; right: 0; bottom: var(--sk-s3);
    z-index: 2;
    text-align: center;
    color: var(--sk-white);
    font-family: var(--sk-display);
    font-size: 1.5rem;
    line-height: 1.2;
    pointer-events: none;
}

.sk-cat-label small {
    display: block;
    margin-top: 6px;
    font-family: var(--sk-body);
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--sk-gold-light);
}

/* =========================================================================
   8. SECTION RHYTHM
   ========================================================================= */

.sk-section { padding-block: var(--sk-s6); }
.sk-section-sm { padding-block: var(--sk-s5); }

.sk-section-head { text-align: center; margin-bottom: var(--sk-s4); }
.sk-section-head p { max-width: 46ch; margin-inline: auto; }

/* Trust strip — thin, quiet, gold-dotted separators. */
.sk-trust {
    border-block: 1px solid var(--sk-line);
    padding-block: var(--sk-s3);
}
.sk-trust p {
    font-family: var(--sk-body);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sk-ink-soft);
    margin: 0;
}

/* =========================================================================
   9. FOOTER
   ========================================================================= */

.site-footer,
#colophon,
.site-footer-wrap {
    background: var(--sk-deep) !important;
    color: rgba(255,255,255,.72);
    border-top: 1px solid var(--sk-line);
}

.site-footer a { color: rgba(255,255,255,.72) !important; transition: color .3s var(--sk-ease); }
.site-footer a:hover { color: var(--sk-gold-light) !important; }
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4,
.site-footer strong { color: var(--sk-white); }

/* =========================================================================
   10. FORMS / NOTICES
   ========================================================================= */

/* background-COLOR, never the `background` shorthand. The shorthand also
   resets background-repeat/position/size to their initial values, and a
   theme that paints a <select> arrow with a background-image in a
   separate rule then tiles that arrow across the whole control. */
input[type="text"], input[type="email"], input[type="tel"],
input[type="search"], input[type="password"], input[type="number"],
textarea, select, .select2-container .select2-selection {
    border: 1px solid var(--sk-line) !important;
    border-radius: 0 !important;
    padding: 14px 16px !important;
    font-family: var(--sk-body);
    background-color: var(--sk-white);
    transition: border-color .3s var(--sk-ease);
}

/* The arrow needs room on the right, and the theme owns where it sits. */
select {
    padding-right: 42px !important;
    background-repeat: no-repeat;
    background-position: right 14px center;
}
input:focus, textarea:focus, select:focus {
    border-color: var(--sk-gold) !important;
    outline: none;
    box-shadow: none !important;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    border-top-color: var(--sk-gold) !important;
    background: var(--sk-white);
    font-family: var(--sk-body);
    font-size: 14px;
    border-radius: 0;
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--sk-gold-deep) !important; }

/* =========================================================================
   11. MOBILE
   Client sees this on a phone first. Spacing has to come down or the
   generous desktop rhythm turns into endless scrolling.
   ========================================================================= */

@media (max-width: 767px) {
    :root {
        --sk-s5: 52px;
        --sk-s6: 64px;
    }

    .site-branding img, .custom-logo { max-height: 46px; }

    .woocommerce ul.products { gap: var(--sk-s3) var(--sk-s2); }
    .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 1rem !important; }

    .sk-cat-label { font-size: 1.2rem; bottom: var(--sk-s2); }

    .wp-block-button__link, .button, .woocommerce a.button {
        padding: 14px 28px;
        font-size: 11px;
    }
}

/* Respect a reader who has asked for less motion. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* =========================================================================
   12. ANNOUNCEMENT BAR
   A slow marquee of proof points above the header. Duplicated content and
   a 50% translate gives a seamless loop without JS; the copy is repeated
   in the markup because a CSS-only marquee has to have something to
   scroll into.
   ========================================================================= */

.sk-announce {
    background: var(--sk-deep);
    color: var(--sk-gold-light);
    font-family: var(--sk-body);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    padding: 11px 0;
    overflow: hidden;
    white-space: nowrap;
    border-bottom: 1px solid rgba(var(--sk-gold-rgb), .25);
}

.sk-announce-track {
    display: inline-block;
    animation: sk-marquee 38s linear infinite;
}
.sk-announce-track span { padding: 0 var(--sk-s3); }
.sk-announce-track span::after {
    content: "·";
    padding-left: var(--sk-s3);
    opacity: .5;
}

@keyframes sk-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* A marquee is motion the reader did not ask for — stop it outright when
   they have said they want less of it, rather than merely slowing it. */
@media (prefers-reduced-motion: reduce) {
    .sk-announce-track { animation: none; }
    .sk-announce { text-align: center; }
}

/* =========================================================================
   13. TRUST / BENEFIT BADGE ROW
   ========================================================================= */

.sk-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sk-s3) var(--sk-s5);
    padding-block: var(--sk-s4);
}

.sk-badge {
    text-align: center;
    min-width: 130px;
    font-family: var(--sk-body);
    font-size: 12px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--sk-ink-soft);
    line-height: 1.6;
}

.sk-badge b {
    display: block;
    font-size: 22px;
    font-weight: 400;
    font-family: var(--sk-display);
    color: var(--sk-gold-deep);
    margin-bottom: 6px;
    letter-spacing: 0;
    text-transform: none;
}

.sk-dark .sk-badge   { color: rgba(255,255,255,.78); }
.sk-dark .sk-badge b { color: var(--sk-gold-light); }

/* =========================================================================
   14. HERITAGE TIMELINE
   Vertical gold spine with a dot per milestone. Reads as a story rather
   than three stacked paragraphs.
   ========================================================================= */

.sk-timeline { position: relative; max-width: 760px; margin-inline: auto; }

.sk-timeline::before {
    content: "";
    position: absolute;
    left: 78px;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--sk-gold), transparent);
    opacity: .55;
}

.sk-milestone {
    position: relative;
    display: grid;
    grid-template-columns: 78px 1fr;
    gap: var(--sk-s3);
    padding-bottom: var(--sk-s4);
}

.sk-milestone-year {
    font-family: var(--sk-display);
    font-size: 1.5rem;
    color: var(--sk-gold-deep);
    line-height: 1;
    padding-top: 2px;
    text-align: right;
}

.sk-milestone-body { padding-left: var(--sk-s2); }

.sk-milestone-body h3 {
    font-size: 1.25rem;
    margin: 0 0 6px;
}

.sk-milestone-body p {
    font-size: 15px;
    line-height: 1.8;
    margin: 0;
}

/* The dot sits on the spine. */
.sk-milestone::after {
    content: "";
    position: absolute;
    left: 74px;
    top: 8px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--sk-gold);
    box-shadow: 0 0 0 4px rgba(var(--sk-gold-rgb), .18);
}

.sk-dark .sk-milestone-year   { color: var(--sk-gold-light); }
.sk-dark .sk-milestone-body p { color: rgba(255,255,255,.74); }

@media (max-width: 600px) {
    .sk-timeline::before { left: 4px; }
    .sk-milestone { grid-template-columns: 1fr; gap: 4px; padding-left: var(--sk-s3); }
    .sk-milestone-year { text-align: left; font-size: 1.2rem; }
    .sk-milestone-body { padding-left: 0; }
    .sk-milestone::after { left: 0; }
}

/* =========================================================================
   15. CATEGORY TILE — CTA variant (matches the reference store's
   "SHOP NOW" under each collection)
   ========================================================================= */

.sk-cat-label em {
    display: block;
    margin-top: 10px;
    font-family: var(--sk-body);
    font-style: normal;
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--sk-white);
    border-bottom: 1px solid var(--sk-gold);
    padding-bottom: 3px;
    width: fit-content;
    margin-inline: auto;
    opacity: .9;
    transition: color .3s var(--sk-ease);
}
.sk-cat:hover .sk-cat-label em { color: var(--sk-gold-light); }

/* =========================================================================
   16. NEWSLETTER BAND
   ========================================================================= */

.sk-news-form {
    display: flex;
    gap: 0;
    max-width: 460px;
    margin: var(--sk-s3) auto 0;
}

.sk-news-form input[type="email"] {
    flex: 1;
    border: 1px solid rgba(var(--sk-gold-rgb), .5) !important;
    background: transparent !important;
    color: #fff !important;
    padding: 15px 18px !important;
    font-size: 14px;
}
.sk-news-form input[type="email"]::placeholder { color: rgba(255,255,255,.5); }

.sk-news-form button {
    background: var(--sk-gold);
    color: var(--sk-deep);
    border: 1px solid var(--sk-gold);
    padding: 15px 30px;
    cursor: pointer;
}
.sk-news-form button:hover {
    background: transparent;
    color: var(--sk-gold);
}

@media (max-width: 520px) {
    .sk-news-form { flex-direction: column; gap: var(--sk-s1); }
}

/* =========================================================================
   17. SKIN FOOTER

   The plugin renders its own <footer class="sk-footer">, so the theme's
   widget footer is suppressed rather than styled. Scoped to the
   sk-has-footer body class: with the setting off, section 9 above still
   themes whatever the client built in the widget editor.
   ========================================================================= */

body.sk-has-footer .site-footer,
body.sk-has-footer #colophon { display: none !important; }

.sk-footer {
    background: var(--sk-deep);
    color: rgba(255, 255, 255, .72);
    font-family: var(--sk-body);
    border-top: 1px solid var(--sk-line);
    margin-top: var(--sk-s5);
}

.sk-footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

.sk-footer > .sk-footer-inner {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: var(--sk-s4);
    padding-top: var(--sk-s5);
    padding-bottom: var(--sk-s4);
}

.sk-fcol h3 {
    font-family: var(--sk-body);
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--sk-gold-light);
    margin: 0 0 var(--sk-s3);
    font-weight: 600;
}

.sk-fcol ul { list-style: none; margin: 0; padding: 0; }
.sk-fcol li { margin: 0 0 12px; font-size: 15px; line-height: 1.6; }
.sk-fcol a {
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
    transition: color .3s var(--sk-ease);
}
.sk-fcol a:hover { color: var(--sk-gold-light); }

.sk-fbrand {
    font-family: var(--sk-display);
    font-size: 30px;
    letter-spacing: .04em;
    color: var(--sk-white);
    margin-bottom: var(--sk-s2);
}
.sk-flogo img { max-width: 190px; height: auto; margin-bottom: var(--sk-s2); }
.sk-flogo a { display: inline-block; }

.sk-fabout {
    font-size: 15px;
    line-height: 1.75;
    max-width: 38ch;
    margin: 0 0 var(--sk-s3);
}

.sk-fsocial { display: flex; flex-wrap: wrap; gap: var(--sk-s2); }
.sk-fsocial a {
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--sk-line);
}
.sk-fsocial a:hover { border-bottom-color: var(--sk-gold-light); }

.sk-fcontact li { line-height: 1.7; }

.sk-footer-bottom {
    border-top: 1px solid var(--sk-line-dark);
}
.sk-footer-bottom .sk-footer-inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sk-s2);
    justify-content: space-between;
    align-items: center;
    padding-top: var(--sk-s3);
    padding-bottom: var(--sk-s3);
    font-size: 13px;
    color: rgba(255, 255, 255, .55);
}
.sk-fpay { letter-spacing: .06em; }

@media (max-width: 1024px) {
    .sk-footer > .sk-footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: var(--sk-s4) var(--sk-s3);
        padding-top: var(--sk-s4);
    }
    .sk-fcol-brand { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
    .sk-footer > .sk-footer-inner { grid-template-columns: 1fr; }
    .sk-footer-bottom .sk-footer-inner { justify-content: center; text-align: center; }
    .sk-fabout { max-width: none; }
}

/* =========================================================================
   18. HOMEPAGE SHORTCODE LAYOUT

   The [tbf_home] shortcode emits plain sections rather than block
   markup, so it carries its own wrapper/rhythm rules instead of relying
   on the theme's alignfull handling — which differs per theme and is the
   first thing to break when a client switches away from Kadence.
   ========================================================================= */

.sk-wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

.sk-sec        { padding-block: var(--sk-s5); }
.sk-sec-tight  { padding-block: var(--sk-s3); }

/* Full-bleed for the dark bands even inside a constrained theme wrapper. */
.sk-hero,
.sk-sec.sk-dark {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.sk-hero { padding-block: var(--sk-s6); text-align: center; }
.sk-hero h1 {
    font-family: var(--sk-display);
    font-size: clamp(2.4rem, 6vw, 4.2rem);
    line-height: 1.08;
    margin: 0 0 var(--sk-s3);
    color: var(--sk-white);
}

.sk-eyebrow {
    font-family: var(--sk-body);
    font-size: 11px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--sk-gold-light);
    margin: 0 0 var(--sk-s3);
}

.sk-h2 {
    font-family: var(--sk-display);
    font-size: clamp(1.7rem, 3.4vw, 2.6rem);
    text-align: center;
    margin: 0 0 var(--sk-s4);
}

.sk-lede {
    max-width: 62ch;
    margin: 0 auto var(--sk-s4);
    text-align: center;
    font-size: 17px;
    line-height: 1.8;
}

.sk-center { text-align: center; margin-top: var(--sk-s4); }
.sk-hero-cta { display: flex; gap: var(--sk-s2); justify-content: center; flex-wrap: wrap; margin: 0; }

.sk-btn {
    display: inline-block;
    background: var(--sk-gold);
    color: var(--sk-deep);
    border: 1px solid var(--sk-gold);
    padding: 15px 34px;
    font-family: var(--sk-body);
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .3s var(--sk-ease), color .3s var(--sk-ease);
}
.sk-btn:hover { background: transparent; color: var(--sk-gold); }

.sk-btn-ghost { background: transparent; color: var(--sk-gold); }
.sk-btn-ghost:hover { background: var(--sk-gold); color: var(--sk-deep); }
.sk-sec:not(.sk-dark) .sk-btn-ghost { color: var(--sk-gold-deep); border-color: var(--sk-gold-deep); }
.sk-sec:not(.sk-dark) .sk-btn-ghost:hover { background: var(--sk-gold-deep); color: var(--sk-white); }

.sk-cat-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sk-s2);
}

.sk-reviews {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sk-s3);
}
.sk-review {
    border: 1px solid var(--sk-line);
    padding: var(--sk-s3);
    margin: 0;
    background: var(--sk-white);
}
.sk-review p { font-size: 16px; line-height: 1.8; margin: 0 0 var(--sk-s2); font-style: italic; }
.sk-review cite {
    font-family: var(--sk-body);
    font-style: normal;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--sk-gold-deep);
}

@media (max-width: 900px) {
    .sk-cat-row { grid-template-columns: repeat(2, 1fr); }
    .sk-reviews { grid-template-columns: 1fr; }
    .sk-sec { padding-block: var(--sk-s4); }
    .sk-hero { padding-block: var(--sk-s5); }
}

@media (max-width: 520px) {
    .sk-cat-row { grid-template-columns: 1fr; }
}

/* =========================================================================
   19. THEME CHROME CORRECTIONS

   Three things the theme does that fight a full-bleed homepage. Each is
   scoped so it only applies where it is wanted: the header fix is global
   (the brand is unreadable on a dark bar in every case), the spacing fix
   only on the page that carries [tbf_home].
   ========================================================================= */

/* Kadence colours the site title from the body ink token, which on a dark
   header bar renders near-black on dark green — effectively invisible. */
.site-header .brand,
.site-header .site-title,
.site-header .site-title a {
    color: var(--sk-gold-light) !important;
}
.site-header .site-description { color: rgba(255, 255, 255, .6) !important; }

/* The page ground behind everything, so the gap either side of a
   constrained layout is cream rather than raw white. */
.site.wp-site-blocks,
body { background-color: var(--sk-cream); }

/* An 80px gap between the header and a full-bleed hero reads as a
   rendering fault, not as breathing room. */
body.sk-home .content-area { margin-top: 0; }
body.sk-home .entry-content > .sk-hero:first-child { margin-top: 0; }

/* Kadence boxes page content in a white card; a full-bleed homepage needs
   the card to be transparent or the dark bands sit on a white slab. */
body.sk-home .entry.content-bg,
body.sk-home .content-bg {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Product cards. 3:4 matches the size the plugin registers for the
   WooCommerce thumbnail, so the displayed box and the generated file
   agree and the image is cropped once rather than twice.

   object-position sits above centre because clothing shots are framed
   with the garment in the upper two thirds — centring the crop is what
   takes the tops of heads off. */
ul.products li.product img {
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center 28%;
    width: 100%;
    height: auto;
}

/* =========================================================================
   20. HOMEPAGE COMPONENTS v2

   Layout ideas borrowed from a reference design, rebuilt on the brand
   tokens. The reference hard-coded its palette, which is exactly what
   makes a design un-portable: re-skinning it for the next client would
   mean editing CSS instead of picking two colours.
   ========================================================================= */

/* ---- Section head: eyebrow / heading / rule ---- */
.sk-head { text-align: center; max-width: 720px; margin: 0 auto var(--sk-s4); }
.sk-head h2 {
    font-family: var(--sk-display);
    font-size: clamp(1.9rem, 3.6vw, 2.9rem);
    margin: 0;
}
.sk-head .sk-eyebrow { margin-bottom: 10px; }
.sk-head .sk-rule {
    display: block;
    width: 48px; height: 1px;
    background: var(--sk-gold);
    margin: 18px auto 0;
}
.sk-dark .sk-head h2 { color: var(--sk-white); }
.sk-dark .sk-eyebrow  { color: var(--sk-gold-light); }

/* A mid-tone band so the page is not a hard alternation of cream and
   near-black across nine sections. */
.sk-band {
    background: var(--sk-white);
    border-block: 1px solid var(--sk-line);
    width: 100vw; max-width: 100vw;
    margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}

/* ---- Trust strip ---- */
.sk-trust {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--sk-s3);
}
.sk-trust-item {
    border-left: 1px solid rgba(var(--sk-gold-rgb), .4);
    padding-left: 20px;
}
.sk-tag {
    font-family: var(--sk-body);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--sk-gold);
    display: block;
    margin-bottom: 6px;
}
.sk-trust-item h4 {
    font-family: var(--sk-display);
    font-size: 1.2rem;
    font-weight: 400;
    margin: 0 0 4px;
    color: var(--sk-white);
}
.sk-trust-item p { font-size: 14px; margin: 0; color: rgba(255,255,255,.62); }

.sk-sec:not(.sk-dark) .sk-trust-item h4 { color: var(--sk-primary); }
.sk-sec:not(.sk-dark) .sk-trust-item p  { color: var(--sk-ink-soft); }

/* ---- Bento category grid ---- */
.sk-bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 260px;
    gap: var(--sk-s2);
}
/* The tall/wide modifiers override the tile's own aspect-ratio, which is
   only there to stop an image-less tile collapsing. */
.sk-bento .sk-cat { aspect-ratio: auto; height: 100%; }
.sk-cat-tall { grid-row: span 2; }
.sk-cat-wide { grid-column: span 2; }

/* ---- Stats ---- */
.sk-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sk-s3);
    margin: var(--sk-s4) 0;
    padding: var(--sk-s3) 0;
    border-top: 1px solid rgba(var(--sk-gold-rgb), .3);
    border-bottom: 1px solid rgba(var(--sk-gold-rgb), .3);
    text-align: center;
}
.sk-stat-num {
    display: block;
    font-family: var(--sk-display);
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    color: var(--sk-gold);
    line-height: 1.1;
    margin-bottom: 6px;
}
.sk-stat-desc {
    font-family: var(--sk-body);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255,255,255,.6);
}

/* ---- Centred timeline (overrides the left-spine version in section 14) ---- */
.sk-timeline { max-width: 940px; }
.sk-timeline::before { left: 50%; transform: translateX(-50%); }

.sk-milestone {
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: start;
}
.sk-milestone-year {
    width: auto;
    text-align: right;
    padding-right: 44px;
    font-size: clamp(1.2rem, 2.2vw, 1.5rem);
}
.sk-milestone-body { padding-left: 44px; }
.sk-milestone::after { left: 50%; transform: translateX(-50%); }

/* ---- Reviews ---- */
.sk-stars { color: var(--sk-gold); font-size: 14px; letter-spacing: 4px; margin-bottom: var(--sk-s2); }
.sk-review cite { display: block; font-style: normal; }
.sk-review cite strong {
    display: block;
    font-family: var(--sk-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--sk-primary);
    text-transform: none;
}
.sk-review cite span {
    font-family: var(--sk-body);
    font-size: 12px;
    color: var(--sk-ink-soft);
    letter-spacing: 0;
    text-transform: none;
}

@media (max-width: 900px) {
    .sk-bento { grid-template-columns: 1fr; grid-auto-rows: 230px; }
    .sk-cat-tall, .sk-cat-wide { grid-row: auto; grid-column: auto; }
    .sk-stats { grid-template-columns: 1fr; }

    .sk-timeline::before { left: 4px; transform: none; }
    .sk-milestone { grid-template-columns: 1fr; margin-left: var(--sk-s3); }
    .sk-milestone-year { text-align: left; padding-right: 0; }
    .sk-milestone-body { padding-left: 0; }
    .sk-milestone::after { left: 0; transform: none; }
}

/* =========================================================================
   21. HOMEPAGE COMPONENTS v3

   Structural ideas from a second reference pass. Same rule as section 20:
   the layout is worth taking, the hard-coded near-black palette is not —
   this store's product, cart and account pages are cream, and a homepage
   that is the only dark page in the site reads as a different website.
   ========================================================================= */

/* ---- Crest divider: hairline with a diamond seated on it ---- */
.sk-head .sk-rule { position: relative; width: 68px; }
.sk-head .sk-rule::after {
    content: "\25C6";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: var(--sk-cream);
    padding: 0 7px;
    color: var(--sk-gold);
    font-size: 7px;
    line-height: 1;
}
.sk-dark .sk-head .sk-rule::after { background: var(--sk-deep); }
.sk-band .sk-head .sk-rule::after { background: var(--sk-white); }

/* ---- Metallic numerals. A flat gold works everywhere; the gradient is
        a progressive enhancement for browsers that support text clipping,
        so an unsupported browser gets gold rather than invisible text. ---- */
.sk-gold-foil { color: var(--sk-gold); }

@supports (-webkit-background-clip: text) or (background-clip: text) {
    .sk-gold-foil {
        background: linear-gradient(135deg,
            var(--sk-gold-deep) 0%,
            var(--sk-gold-light) 28%,
            var(--sk-gold) 52%,
            var(--sk-gold-light) 74%,
            var(--sk-gold-deep) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
}

/* ---- 12-column bento ---- */
.sk-bento {
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 320px;
}
.sk-t7 { grid-column: span 7; }
.sk-t5 { grid-column: span 5; }
.sk-t4 { grid-column: span 4; }
.sk-t8 { grid-column: span 8; }

/* ---- Split heritage block ---- */
.sk-split {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: var(--sk-s5);
    align-items: center;
    text-align: left;
}
.sk-split-body h2 {
    font-family: var(--sk-display);
    font-size: clamp(1.9rem, 3.4vw, 2.8rem);
    color: var(--sk-white);
    margin: 0 0 var(--sk-s2);
    line-height: 1.18;
}
.sk-split-body p {
    color: rgba(255, 255, 255, .72);
    line-height: 1.85;
    margin: 0 0 var(--sk-s3);
    max-width: 56ch;
}

.sk-plate { border: 1px solid rgba(var(--sk-gold-rgb), .35); padding: 20px; }
.sk-plate-inner {
    background: rgba(0, 0, 0, .22);
    border: 1px solid var(--sk-line-dark);
    padding: var(--sk-s5) var(--sk-s3);
    text-align: center;
}
.sk-plate-num {
    display: block;
    font-family: var(--sk-display);
    font-size: clamp(3rem, 7vw, 4.8rem);
    line-height: 1;
    margin-bottom: 10px;
}

/* Inside the split the stats are a left-aligned triad, not a full band. */
.sk-split .sk-stats {
    border-bottom: 0;
    padding-bottom: 0;
    margin: 0 0 var(--sk-s4);
    text-align: left;
    gap: var(--sk-s2);
}
.sk-split .sk-stat-num { font-size: clamp(1.5rem, 2.6vw, 2rem); }

/* ---- Testimonial quote mark ---- */
.sk-review { position: relative; padding-top: var(--sk-s4); }
.sk-quote {
    position: absolute;
    top: 10px; left: var(--sk-s3);
    font-family: var(--sk-display);
    font-size: 3.4rem;
    line-height: 1;
    color: var(--sk-gold);
    opacity: .38;
}

/* ---- Restrained tile hover ---- */
.sk-cat { transition: transform .5s var(--sk-ease), box-shadow .5s var(--sk-ease); }
.sk-cat:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(var(--sk-deep-rgb), .28); }

@media (max-width: 1024px) {
    .sk-split { grid-template-columns: 1fr; gap: var(--sk-s4); }
    .sk-plate-inner { padding: var(--sk-s4) var(--sk-s3); }
}

@media (max-width: 900px) {
    .sk-bento { grid-template-columns: 1fr; grid-auto-rows: 240px; }
    .sk-t7, .sk-t5, .sk-t4, .sk-t8 { grid-column: auto; }
}

/* =========================================================================
   22. CART FEEDBACK

   Buy Now, the fly-to-cart ghost, the cart bump and the toast. All of it
   is confirmation: on an AJAX store the add is otherwise silent, and a
   silent add gets pressed twice.
   ========================================================================= */

/* ---- Buy Now ---- */
.sk-buy-now {
    background: transparent !important;
    color: var(--sk-primary) !important;
    border: 1px solid var(--sk-primary) !important;
    margin-left: var(--sk-s1);
}
.sk-buy-now:hover {
    background: var(--sk-primary) !important;
    color: var(--sk-cream) !important;
}
.sk-buy-now.is-working { opacity: .7; pointer-events: none; }

/* On a phone the two buttons stack rather than shrink to unreadable. */
@media (max-width: 480px) {
    .woocommerce form.cart .button,
    .sk-buy-now { width: 100%; margin: var(--sk-s1) 0 0; }
}

.single_add_to_cart_button.is-working { opacity: .7; }

/* ---- Fly-to-cart ghost ---- */
.sk-fly {
    position: fixed;
    z-index: 99999;
    pointer-events: none;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 12px 30px rgba(var(--sk-deep-rgb), .35);
    transition: transform .72s cubic-bezier(.55, -0.2, .3, 1), opacity .72s ease-in;
    will-change: transform, opacity;
}

/* ---- Cart icon bump ---- */
.sk-cart-bump { animation: sk-bump .55s var(--sk-ease); }

@keyframes sk-bump {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.28); }
    60%  { transform: scale(.94); }
    100% { transform: scale(1); }
}

/* ---- Toast ---- */
.sk-toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 99998;
    display: flex;
    align-items: center;
    gap: var(--sk-s2);
    max-width: min(420px, calc(100vw - 48px));
    padding: 16px 20px;
    background: var(--sk-deep);
    color: var(--sk-white);
    border: 1px solid rgba(var(--sk-gold-rgb), .4);
    box-shadow: 0 18px 44px rgba(var(--sk-deep-rgb), .34);
    font-family: var(--sk-body);
    transform: translateY(14px);
    opacity: 0;
    transition: transform .34s var(--sk-ease), opacity .34s var(--sk-ease);
}
.sk-toast.is-in { transform: translateY(0); opacity: 1; }

.sk-toast-tick {
    flex: none;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--sk-gold);
    color: var(--sk-deep);
    font-size: 14px;
    line-height: 1;
}

.sk-toast-text { min-width: 0; }
.sk-toast-text b {
    display: block;
    font-size: 13px;
    letter-spacing: .06em;
    font-weight: 500;
}
.sk-toast-text em {
    display: block;
    font-style: normal;
    font-size: 12px;
    color: rgba(255, 255, 255, .62);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-toast-links {
    margin-left: auto;
    display: flex;
    gap: var(--sk-s2);
    flex: none;
}
.sk-toast-links a {
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sk-gold-light);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .3s var(--sk-ease);
}
.sk-toast-links a:hover { border-bottom-color: var(--sk-gold-light); }
.sk-toast-links .sk-toast-go { color: var(--sk-gold); }

@media (max-width: 560px) {
    .sk-toast {
        right: 12px; left: 12px; bottom: 12px;
        max-width: none;
        flex-wrap: wrap;
    }
    .sk-toast-links { margin-left: 0; width: 100%; }
}

/* The bump and the ghost are decoration; the toast still says what
   happened, so nothing is lost by switching them off. */
@media (prefers-reduced-motion: reduce) {
    .sk-fly { display: none; }
    .sk-cart-bump { animation: none; }
    .sk-toast { transition: none; }
}

/* =========================================================================
   23. PRODUCT CARD ACTION

   Kadence reveals the loop add-to-cart on hover, absolutely positioned
   over the title and price. Two problems with that on a store like this:

     - There is no hover on a phone or tablet. Most of this traffic is
       mobile, and on mobile the button is simply never shown.
     - Absolute positioning puts it on top of the title and price, so
       whenever it IS shown, it hides the two things the shopper was
       reading.

   The markup order is already correct (title, price, excerpt, button), so
   putting the wrapper back in normal flow fixes both at once — no
   template override, no child theme.
   ========================================================================= */

ul.products li.product .product-action-wrap {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    margin-top: var(--sk-s2);
    padding: 0;
    width: 100%;
}

ul.products li.product .product-details { padding-bottom: var(--sk-s3); }

/* Outline by default so a grid of eight products is not eight gold
   slabs; it fills on hover and on keyboard focus. */
ul.products li.product .product-action-wrap .button {
    display: block;
    width: 100%;
    padding: 13px 16px;
    font-size: 11px;
    letter-spacing: .18em;
    background: transparent;
    color: var(--sk-primary);
    border: 1px solid var(--sk-line);
    text-align: center;
}

ul.products li.product .product-action-wrap .button:hover,
ul.products li.product .product-action-wrap .button:focus-visible {
    background: var(--sk-primary);
    border-color: var(--sk-primary);
    color: var(--sk-cream);
}

/* Woo's own states: the spinner while the request is in flight, and the
   "View cart" link it appends afterwards. */
ul.products li.product .button.loading { opacity: .65; pointer-events: none; }

ul.products li.product .button.added {
    background: var(--sk-gold);
    border-color: var(--sk-gold);
    color: var(--sk-deep);
}

ul.products li.product .added_to_cart {
    display: block;
    margin-top: var(--sk-s1);
    font-family: var(--sk-body);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sk-gold-deep);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
ul.products li.product .added_to_cart:hover { border-bottom-color: var(--sk-gold-deep); }

/* A tap target below 44px fails on a phone. */
@media (max-width: 768px) {
    ul.products li.product .product-action-wrap .button { padding: 15px 12px; }
}

/* =========================================================================
   24. SINGLE PRODUCT PANELS

   The tab strip has been moved into the summary column as <details>
   panels. Native <details> rather than a JS accordion: it opens without
   JavaScript, it is keyboard operable and screen-reader announced for
   free, and browser find-in-page can still reach text inside a closed
   panel.
   ========================================================================= */

.sk-panels {
    margin-top: var(--sk-s4);
    border-top: 1px solid var(--sk-line);
}

.sk-panel { border-bottom: 1px solid var(--sk-line); }

.sk-panel > summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 34px 18px 0;
    position: relative;
    font-family: var(--sk-body);
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--sk-primary);
    transition: color .3s var(--sk-ease);
}
.sk-panel > summary::-webkit-details-marker { display: none; }
.sk-panel > summary:hover { color: var(--sk-gold-deep); }

/* Chevron drawn in CSS so there is no icon font or SVG to load. */
.sk-panel > summary::after {
    content: "";
    position: absolute;
    right: 6px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 1px solid var(--sk-gold-deep);
    border-bottom: 1px solid var(--sk-gold-deep);
    transform: translateY(-70%) rotate(45deg);
    transition: transform .3s var(--sk-ease);
}
.sk-panel[open] > summary::after { transform: translateY(-25%) rotate(-135deg); }

.sk-panel-body { padding: 0 0 var(--sk-s3); }
.sk-panel-body > h2 { display: none; }   /* the summary already names it */
.sk-panel-body p { font-size: 15px; line-height: 1.85; }
.sk-panel-body ul { padding-left: 20px; }
.sk-panel-body li { font-size: 15px; line-height: 1.8; color: var(--sk-ink-soft); }
.sk-panel-body table { font-size: 14px; }

/* ---- Assurance row ---- */
.sk-assurance {
    list-style: none;
    margin: var(--sk-s3) 0 0;
    padding: var(--sk-s3) 0 0;
    border-top: 1px solid var(--sk-line);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px var(--sk-s3);
}
.sk-assurance li {
    position: relative;
    padding-left: 22px;
    font-family: var(--sk-body);
    font-size: 12px;
    letter-spacing: .04em;
    color: var(--sk-ink-soft);
}
.sk-assurance li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--sk-gold-deep);
    font-size: 12px;
}

@media (max-width: 480px) {
    .sk-assurance { grid-template-columns: 1fr; }
}

/* =========================================================================
   25. PAGE TITLE HERO

   Kadence paints the archive/page title band #EDF2F7 — a blue-grey that
   belongs to no part of this palette and reads as an unstyled strip
   between the emerald header and the cream page.
   ========================================================================= */

.entry-hero-container-inner,
.entry-hero .entry-hero-container-inner {
    background: var(--sk-cream) !important;
    border-bottom: 1px solid var(--sk-line);
}

.entry-hero .page-title,
.entry-hero .archive-title,
.entry-hero .entry-title {
    font-family: var(--sk-display);
    color: var(--sk-primary);
    letter-spacing: .01em;
}

/* The category description, where the client has written one. */
.entry-hero .archive-description p,
.entry-hero .taxonomy-description p {
    max-width: 62ch;
    margin-inline: auto;
    font-size: 15px;
    line-height: 1.8;
}

/* Breadcrumbs sit in the same band. */
.entry-hero .kadence-breadcrumbs,
.woocommerce-breadcrumb {
    font-family: var(--sk-body);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sk-ink-soft);
}
.woocommerce-breadcrumb a { color: var(--sk-gold-deep); text-decoration: none; }
.woocommerce-breadcrumb a:hover { color: var(--sk-primary); }

/* Result count and the sorting select share a row; align them and stop
   the count reading as body copy. */
.woocommerce-result-count {
    font-family: var(--sk-body);
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sk-ink-soft);
}

/* =========================================================================
   26. LOGO

   Sized in ems of nothing in particular — just two numbers, header and
   footer — because a logo is the one asset that differs per client and
   the one most likely to arrive at the wrong dimensions. Constraining
   height (not width) means a wide lockup and a square monogram both sit
   correctly on the header row without per-client CSS.
   ========================================================================= */

.site-branding .custom-logo,
.site-header .custom-logo {
    height: 66px;
    width: auto;
    max-width: none;
    object-fit: contain;
}

.sk-flogo img {
    width: auto;
    height: 118px;
    max-width: 100%;
    object-fit: contain;
}

@media (max-width: 768px) {
    .site-branding .custom-logo,
    .site-header .custom-logo { height: 48px; }
    .sk-flogo img { height: 92px; }
}

/* =========================================================================
   27. TYPESET LOCKUP

   Structured after the group's existing mark: a drawn symbol on top, the
   name below it in wide-tracked capitals, then a tagline in smaller
   capitals tracked wider still. That vertical hierarchy — symbol, name,
   line — is what the two brands share; the letterforms and the colours
   are what tell them apart.

   Set in live type, so it is sharp at every size, weighs about a
   kilobyte, and a new client changes it by typing their name into
   Settings → General.
   ========================================================================= */

body.sk-lockup .site-branding .site-title,
body.sk-lockup .site-header .site-title,
body.sk-lockup .sk-fbrand {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 4px 0;
    font-family: var(--sk-display);
    font-size: 27px;
    font-weight: 500;
    line-height: 1;
    /* Capitals with generous tracking. Mixed case at this size reads as
       body copy with a picture over it, not as a mark. */
    text-transform: uppercase;
    letter-spacing: .24em;
    /* Tracking adds space after the last letter too, which throws the
       whole lockup off centre. */
    text-indent: .24em;
}

/* ---- The symbol ---- */
body.sk-lockup .site-title::before,
body.sk-lockup .sk-fbrand::before {
    content: "";
    display: block;
    width: 64px;
    height: 40px;
    margin: 0 0 11px;
    text-indent: 0;
    background-image: var(--sk-crown);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* ---- The tagline ----
   A hairline above it separates the two type sizes, the way the
   reference mark uses white space — but at header scale white space
   alone is not enough to read as deliberate. */
body.sk-lockup .site-title::after,
body.sk-lockup .sk-fbrand::after {
    content: var(--sk-tagline);
    display: block;
    margin-top: 9px;
    padding-top: 8px;
    text-indent: .42em;
    font-family: var(--sk-body);
    font-size: 8px;
    font-weight: 400;
    letter-spacing: .42em;
    line-height: 1;
    text-transform: uppercase;
    border-top: 1px solid rgba(var(--sk-gold-rgb), .42);
    align-self: stretch;
    text-align: center;
}

/* ---- Colour ---- */
body.sk-lockup .site-header .site-title { color: var(--sk-gold-light); }

@supports (-webkit-background-clip: text) or (background-clip: text) {
    body.sk-lockup .site-header .site-title {
        background: linear-gradient(168deg,
            var(--sk-gold-deep) 0%,
            var(--sk-gold-light) 30%,
            var(--sk-gold) 55%,
            var(--sk-gold-light) 78%,
            var(--sk-gold-deep) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    /* Pseudo-elements fall outside the clipped box and would inherit
       transparent, so they carry their own fill. */
    body.sk-lockup .site-header .site-title::after {
        -webkit-text-fill-color: var(--sk-gold);
        color: var(--sk-gold);
        opacity: .82;
    }
}

body.sk-lockup .sk-fbrand {
    align-items: flex-start;
    font-size: 23px;
    color: var(--sk-gold-light);
}
body.sk-lockup .sk-fbrand::before { background-position: left center; }
body.sk-lockup .sk-fbrand::after { text-align: left; opacity: .72; }

@media (max-width: 768px) {
    body.sk-lockup .site-branding .site-title,
    body.sk-lockup .site-header .site-title { font-size: 20px; letter-spacing: .2em; text-indent: .2em; }
    body.sk-lockup .site-title::before { width: 50px; height: 31px; margin-bottom: 8px; }
    body.sk-lockup .site-title::after { font-size: 7px; letter-spacing: .3em; text-indent: .3em; }
}

/* =========================================================================
   28. PRODUCT CARD — CANCEL THE HOVER SLIDE

   Section 23 puts the loop add-to-cart back into normal flow. Kadence's
   "action on hover" mode has a second half though: on hover it slides
   the whole details block up 2rem to clear space for the button it was
   about to absolutely-position underneath.

       li.product:hover .entry-content-wrap { transform: translateY(-2rem) }

   With the button already in flow there is nothing to clear, so the
   slide only drags the title up over the bottom of the product image —
   which is exactly the "name disappears on hover" symptom.

   Cancelling the transform is enough; the mode's other rules were
   already neutralised in section 23.
   ========================================================================= */

ul.products.woo-archive-action-on-hover li.product:hover .entry-content-wrap,
ul.products.woo-archive-action-on-hover li.product:focus-within .entry-content-wrap,
.wc-block-grid__product.woo-archive-action-on-hover:hover .entry-content-wrap,
.wc-block-grid__product.woo-archive-action-on-hover:focus-within .entry-content-wrap {
    transform: none !important;
}

/* The block-grid card carries its own copy of the absolute-positioned
   button, under a different class name. Same treatment. */
.wc-block-grid__product .wc-block-grid__product-add-to-cart {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin-top: var(--sk-s2);
    padding: 0;
}

/* Kadence reserves bottom padding for the button it was going to float
   there. In flow that reads as a gap under the price. */
ul.products li.product .product-details.entry-content-wrap { padding-bottom: var(--sk-s2); }

/* =========================================================================
   29. BLOCKS CART & CHECKOUT

   Section 10 sets one padding for every input on the site. That is right
   for a contact form and wrong here: the Blocks checkout uses floating
   labels, and it positions the label from the input's own padding. Force
   the padding smaller and the label lands on top of the value the
   customer just typed — on the one page where confusion costs an order.

   So these fields keep WooCommerce's vertical geometry and take only the
   border, colour and radius from the skin.
   ========================================================================= */

.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-text-input input[type="password"],
.wc-block-components-address-form input,
.wc-block-components-form input[type="text"],
.wc-block-components-form input[type="email"],
.wc-block-components-form input[type="tel"] {
    /* WooCommerce's own values — room above the value for the label to
       sit in once it shrinks. */
    padding: 1.5em 16px 0.5em !important;
    line-height: 1.375;
}

.wc-block-components-combobox-control input.components-combobox-control__input,
.wc-block-components-select .wc-blocks-components-select__select {
    padding: 1.5em 16px 0.5em !important;
    line-height: 1.375;
}

/* The label is absolutely positioned inside the field; leave its
   placement to WooCommerce and restyle only how it reads. */
.wc-block-components-text-input label,
.wc-block-components-combobox-control label,
.wc-block-components-select__label {
    font-family: var(--sk-body);
    color: var(--sk-ink-soft);
}

.wc-block-components-text-input.is-active label,
.wc-block-components-combobox-control.is-active label {
    color: var(--sk-gold-deep);
}

/* Field chrome, matched to the rest of the store. */
.wc-block-components-text-input input,
.wc-block-components-combobox-control input,
.wc-block-components-select .wc-blocks-components-select__select,
.wc-block-components-textarea {
    border: 1px solid var(--sk-line) !important;
    border-radius: 0 !important;
    background-color: var(--sk-white);
    font-family: var(--sk-body);
}
.wc-block-components-text-input input:focus,
.wc-block-components-combobox-control input:focus,
.wc-block-components-select .wc-blocks-components-select__select:focus {
    border-color: var(--sk-gold) !important;
    outline: none;
    box-shadow: none !important;
}

/* Panels, totals and the summary card. */
.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-components-order-summary,
.wp-block-woocommerce-checkout-order-summary-block {
    border: 1px solid var(--sk-line);
    border-radius: 0;
    background: var(--sk-white);
}

.wc-block-components-totals-item__label,
.wc-block-components-product-name {
    font-family: var(--sk-body);
    color: var(--sk-ink);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-family: var(--sk-display);
    color: var(--sk-primary);
}

.wc-block-components-checkout-place-order-button,
.wc-block-components-checkout-return-to-cart-button { border-radius: 0 !important; }

/* Headings in the checkout column. */
.wp-block-woocommerce-checkout .wc-block-components-title {
    font-family: var(--sk-display);
    color: var(--sk-primary);
}

/* =========================================================================
   30. HERO SLIDESHOW

   Slides are stacked and crossfaded rather than slid sideways: a
   horizontal track needs the images to share an aspect ratio, and a
   catalogue of phone photographs never does. Opacity is also the one
   property (with transform) a browser can animate without repainting.

   The scrim is not decoration. Hero copy sits on top of photographs
   whose brightness we cannot predict, and white text on a pale saree is
   unreadable. A fixed dark wash guarantees contrast whatever the client
   uploads.
   ========================================================================= */

.sk-hero { position: relative; overflow: hidden; }
.sk-hero > .sk-wrap { position: relative; z-index: 2; }

.sk-hero-media { position: absolute; inset: 0; z-index: 0; }

.sk-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.4s var(--sk-ease);
    /* A very slow drift stops a still photograph looking like a stalled
       page. 14s against a 6.5s interval means it never reaches the end
       of its travel, so there is no visible snap back. */
    animation: sk-drift 14s ease-out forwards;
}
.sk-slide.is-on { opacity: 1; }

@keyframes sk-drift {
    from { transform: scale(1.06); }
    to   { transform: scale(1); }
}

.sk-hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    /* ONE layer, not two. Stacking a linear and a radial wash multiplies
       them: .70 over .25 is .775, and at the edges .78 over .80 is .956 —
       the photograph was still loading, still costing bandwidth, and 4%
       visible. Contrast for the hero copy needs about .55 here; anything
       past that is just paying for an image nobody can see. */
    background: linear-gradient(
        180deg,
        rgba(var(--sk-deep-rgb), .38) 0%,
        rgba(var(--sk-deep-rgb), .58) 55%,
        rgba(var(--sk-deep-rgb), .72) 100%);
}

/* ---- Dots ---- */
.sk-hero-dots {
    position: absolute;
    z-index: 3;
    left: 0; right: 0;
    bottom: var(--sk-s4);
    display: flex;
    justify-content: center;
    gap: 10px;
}

.sk-hero-dots button {
    width: 28px;
    height: 2px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, .34);
    cursor: pointer;
    transition: background .4s var(--sk-ease), width .4s var(--sk-ease);
}
.sk-hero-dots button:hover { background: rgba(255, 255, 255, .6); }
.sk-hero-dots button[aria-selected="true"] { background: var(--sk-gold); width: 46px; }

/* The dots are a real tap target; the visible bar is only 2px tall. */
.sk-hero-dots button::before {
    content: "";
    position: absolute;
    margin: -14px 0 0 0;
    width: 28px;
    height: 30px;
}

@media (prefers-reduced-motion: reduce) {
    .sk-slide { animation: none; transition: none; }
}

@media (max-width: 768px) {
    .sk-hero-dots { bottom: var(--sk-s3); }
    .sk-hero-dots button { width: 20px; }
    .sk-hero-dots button[aria-selected="true"] { width: 32px; }
}