/* ============================================================================
   KOTN-STYLE EDITORIAL THEME  —  ShopKing storefront (Girliyapa)
   Scoped to `.kotn-store` (the frontend wrapper) so the admin/POS is untouched.
   Aesthetic: modern brand — Public Sans + Urbanist, Dalfa lime/cyan on black,
   flat underlined CTAs (no pills, no radius), full-bleed photography, whitespace.
   Pure CSS overlay — load AFTER app.css + custom.css. No recompile needed for
   the styles themselves (Vue markup changes do need the bundled build).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&family=Urbanist:wght@400;500;600;700&display=swap');

:root {
    --kotn-black:   #000000;
    --kotn-white:   #ffffff;
    --kotn-cream:   #f0ede8;
    --kotn-card:    #f4f2f0;
    --kotn-line:    #e7e3dd;
    --kotn-muted:   #6b6b6b;
    --kotn-red:     #c0392b;
    /* Dalfa Solutions brand palette (lime + cyan on black).
       Two tones for the lime, because a soft ground alone is too light for
       white label text — fills and grounds stay separate values.
         --kotn-pink       soft cyan ground: bars, section tints
         --kotn-accent     logo lime for fills, links and active states
         --kotn-accent-soft faint lime wash for hover and chips */
    --kotn-pink:        #D4F1FC;
    --kotn-accent:      #A4D037;
    --kotn-accent-soft: #EEF6D4;
    /* Deeper lime for accent-on-tint pairings (soft ground + accent labels). */
    --kotn-accent-deep: #6B9A12;
    /* Neutral chip/field surface. Kept separate from the accent so quantity
       steppers and form fields stay neutral when the brand colour changes. */
    --kotn-surface:     #F7F7FC;
    /* Kept as an alias so any rule still naming the old token follows the
       new accent instead of silently reverting to orange. */
    --kotn-orange:      #A4D037;
    /* bg-secondary resolves through this. It was never defined, so the cart
       icon's background collapsed to nothing. */
    --kotn-secondary: #1f1f39;
    --kotn-body:    'Public Sans', system-ui, -apple-system, sans-serif;
    --kotn-display: 'Urbanist', system-ui, sans-serif;
}

/* ---- 1. Typography (cascades to all storefront content) ----------------- */
.kotn-store,
.kotn-store input, .kotn-store select, .kotn-store textarea, .kotn-store button {
    font-family: var(--kotn-body) !important;
    letter-spacing: 0.01em;
    color: var(--kotn-black);
}
.kotn-store { background: var(--kotn-white); line-height: 1.5; }

/* ---- 1b. Icon-font rescue -----------------------------------------------
   The typography rule above lists `.kotn-store button` (class + element =
   specificity 0,1,1), which outranks the icon font's own
   `[class^="lab-"] { font-family:"Iconly" !important }` (0,1,0). Both carry
   !important, and !important ties are resolved by specificity — so the body
   font won and every icon rendered ON a <button> fell back to DM Sans, which
   has no glyph at those private-use codepoints (\e028 = heart, etc.). The
   browser then drew its placeholder box: the "stacked bars" tofu.

   Icons sitting on <i>/<span> were never affected, which is why this looked
   intermittent. These selectors are 0,2,1 so they win cleanly, and they only
   touch elements that actually carry a lab- icon class — the body font is
   untouched everywhere else. */
.kotn-store button[class*="lab-"],
.kotn-store button[class*="lab-"]::before,
.kotn-store button[class*="lab-"]::after,
.kotn-store input[class*="lab-"],
.kotn-store select[class*="lab-"],
.kotn-store textarea[class*="lab-"],
.kotn-store a[class*="lab-"],
.kotn-store a[class*="lab-"]::before {
    font-family: "Iconly" !important;
}

.kotn-store h1, .kotn-store h2, .kotn-store h3.section-heading,
.kotn-store .section-title, .kotn-store .banner-title {
    font-family: var(--kotn-display) !important;
    font-weight: 400 !important;
    letter-spacing: 0.01em;
}
.kotn-store h1 { font-size: clamp(40px, 7vw, 96px); line-height: 1.05; }
.kotn-store h2 { font-size: clamp(28px, 4.5vw, 56px); line-height: 1.1; }
/* generic section headings in this theme use the display face */
.kotn-store section > .container > h2,
.kotn-store section h2,
.kotn-store h2.capitalize {
    font-family: var(--kotn-display) !important;
    font-weight: 500 !important;
}

/* ---- 2. Flat: kill rounded corners & shadows --------------------------- */
.kotn-store .rounded, .kotn-store .rounded-lg, .kotn-store .rounded-xl,
.kotn-store .rounded-2xl, .kotn-store .rounded-3xl, .kotn-store .rounded-md,
.kotn-store .rounded-sm, .kotn-store .shadow-card, .kotn-store .sm\:shadow-card,
.kotn-store .shadow-xs, .kotn-store .shadow-badge, .kotn-store .shadow-hover,
.kotn-store .shadow, .kotn-store .shadow-lg, .kotn-store .shadow-md {
    border-radius: 0 !important;
    box-shadow: none !important;
}
.kotn-store .rounded-full { border-radius: 9999px !important; }

/* ---- 3. Header: flat white, hairline, centered logo (desktop) ---------- */
.kotn-store header { background: var(--kotn-white) !important; box-shadow: none !important; border-bottom: 1px solid var(--kotn-line); }
/* The logo used to be absolutely centred across the ENTIRE nav bar
   (left:50% + translate(-50%,-50%)). The search input occupies its own flex
   slot around that same horizontal centre, so the two overlapped — the logo
   landed inside the search box. Centring across a container that also holds
   the search field can't work; the logo goes back into normal flow and
   flexbox orders it correctly. */
@media (min-width: 1024px) {
    .kotn-store header img[alt="logo"] {
        position: static;
        transform: none;
        width: 132px !important;
    }
}
.kotn-store .header-nav-list a {
    font-size: 14px !important; letter-spacing: 0.04em;
    font-weight: 400 !important; text-transform: capitalize;
}
/* This flattens pill-shaped header chrome (the search field, language
   selector). It was matching on [class*="rounded"], which also caught the
   cart button's `rounded-full` — forcing a white background behind a
   `text-white` icon, i.e. invisible. Icon elements are excluded, and
   genuinely round controls keep their radius. */
.kotn-store header [class*="rounded"]:not([class*="lab-"]):not(.rounded-full) {
    border-radius: 0 !important;
    background: var(--kotn-white) !important;
    border: 1px solid var(--kotn-line) !important;
}

/* Cart / bag button: round, filled, visible. */
.kotn-store header [class*="lab-"].rounded-full {
    border-radius: 9999px !important;
    background: var(--kotn-secondary) !important;
    color: var(--kotn-white) !important;
    border: 0 !important;
}

/* ---- 4. Hero: full-bleed, one slide at a time -------------------------- */
.kotn-store .banner-swiper img,
.kotn-store .banner-swiper .swiper-slide img { border-radius: 0 !important; width: 100%; object-fit: cover; }
.kotn-store .banner-swiper { border-radius: 0 !important; }
.kotn-store .banner-swiper .swiper-pagination-bullet { background: var(--kotn-white); opacity: .6; }
.kotn-store .banner-swiper .swiper-pagination-bullet-active { background: var(--kotn-white); opacity: 1; }

.kotn-store .kotn-hero { width: 100%; }
.kotn-store .kotn-hero-swiper .swiper-slide { height: auto; }

/* Arrows sit on photography, so they need their own ground to stay visible. */
.kotn-store .kotn-hero-swiper .swiper-button-next,
.kotn-store .kotn-hero-swiper .swiper-button-prev {
    width: 44px; height: 44px; border-radius: 9999px;
    background: rgba(255, 255, 255, .9); color: var(--kotn-black);
}
.kotn-store .kotn-hero-swiper .swiper-button-next::after,
.kotn-store .kotn-hero-swiper .swiper-button-prev::after { font-size: 15px; font-weight: 700; }
.kotn-store .kotn-hero-swiper .swiper-pagination-bullet { background: var(--kotn-white); opacity: .55; }
.kotn-store .kotn-hero-swiper .swiper-pagination-bullet-active { opacity: 1; }
.kotn-store .kotn-hero-panel { position: relative; display: block; overflow: hidden; }
.kotn-store .kotn-hero-img {
    width: 100%; height: 56vh; max-height: 640px; min-height: 280px;
    object-fit: cover; display: block; transition: transform .6s ease;
}
@media (min-width: 768px) {
    .kotn-store .kotn-hero-img {
        height: 72vh; max-height: 760px;
    }
}
.kotn-store .kotn-hero-panel:hover .kotn-hero-img { transform: scale(1.02); }
.kotn-store .kotn-hero-cta {
    position: absolute; left: 32px; bottom: 40px; color: #fff; font-size: 16px;
    text-decoration: underline; text-underline-offset: 5px; letter-spacing: .02em;
    text-shadow: 0 1px 10px rgba(0,0,0,.45);
}

/* ---- 5. Product cards: light-grey, minimal, no gimmicks ---------------- */
.kotn-store .miron {
    background: var(--kotn-card) !important;
    border-radius: 0 !important; box-shadow: none !important;
    padding: 0 !important; transition: none !important;
}
.kotn-store .miron:hover { box-shadow: none !important; }
.kotn-store .miron .rounded-xl, .kotn-store .miron img { border-radius: 0 !important; }
.kotn-store .miron img { aspect-ratio: 2 / 3; object-fit: cover; transition: opacity .3s ease; }
.kotn-store .miron:hover img { transform: none !important; opacity: .92; }
.kotn-store .miron label.bg-secondary, .kotn-store .miron .bg-secondary {
    background: transparent !important; color: var(--kotn-red) !important;
    box-shadow: none !important; border-radius: 0 !important; padding: 0 !important;
    font-size: 11px !important; font-weight: 600 !important;
    letter-spacing: .04em; text-transform: uppercase;
}
.kotn-store .miron .vue-star-rating { opacity: .55; }
.kotn-store .miron h3 {
    font-family: var(--kotn-body) !important; font-size: 14px !important;
    font-weight: 400 !important; text-transform: none !important; padding: 14px 14px 2px;
}
.kotn-store .miron h3 a:hover { color: var(--kotn-black) !important; text-decoration: underline; }
.kotn-store .miron h4, .kotn-store .miron .text-xl {
    font-family: var(--kotn-body) !important; font-size: 14px !important;
    font-weight: 400 !important; color: var(--kotn-black) !important; padding: 0 14px 16px;
}
.kotn-store .miron del { color: var(--kotn-muted) !important; }
.kotn-store .miron .px-1 { padding-left: 14px !important; padding-right: 14px !important; }
.kotn-store .miron .lab-line-heart, .kotn-store .miron .lab-fill-heart {
    background: transparent !important; box-shadow: none !important;
}

/* ---- 6. Buttons & CTAs: flat, black or underlined ---------------------- */
.kotn-store .btn, .kotn-store button, .kotn-store a.bg-primary,
.kotn-store input[type="submit"], .kotn-store .bg-primary { border-radius: 0 !important; }
/* The brand token stays the brand colour. This previously remapped to ink,
   which silently turned pagination, CTAs and link hovers black — an
   editorial choice that outlived its welcome. */
.kotn-store .bg-primary { background-color: var(--kotn-accent) !important; }
.kotn-store .text-primary { color: var(--kotn-accent) !important; }
.kotn-store .border-primary { border-color: var(--kotn-accent) !important; }
.kotn-store .cta-link, .kotn-store a.cta {
    background: none !important; border: none !important; border-radius: 0 !important;
    text-decoration: underline; text-underline-offset: 4px; font-size: 14px;
    color: var(--kotn-black); cursor: pointer;
}

/* ---- 7. Whitespace + container -------------------------------------- */
.kotn-store .container { max-width: 1440px; }

/* ---- 8. Footer: brand ground, hairline --------------------------------- */
.kotn-store footer { background: var(--kotn-pink) !important; color: var(--kotn-black); border-top: 1px solid rgba(0,0,0,.06); }
.kotn-store footer a { color: var(--kotn-black) !important; }
.kotn-store footer a:hover { color: var(--kotn-accent-deep) !important; text-decoration: underline; text-underline-offset: 3px; }

/* The column headings (Support, Legal, Contact) are marked `text-white` in
   the markup because the footer was originally dark. On a light ground that
   is ~1.4:1 — effectively invisible. Section 12 restores `.text-white` for
   several element types but not h1-h4, which is why these survived unnoticed.
   Inside the footer specifically, headings take the ink colour instead. */
.kotn-store footer h1.text-white,
.kotn-store footer h2.text-white,
.kotn-store footer h3.text-white,
.kotn-store footer h4.text-white,
.kotn-store footer h5.text-white,
.kotn-store footer p.text-white,
.kotn-store footer span.text-white,
.kotn-store footer div.text-white { color: var(--kotn-black) !important; }

/* Social / payment icon chips sitting on the pink need a ground of their own
   or they read as floating marks. */
.kotn-store footer .rounded-full { background: rgba(255,255,255,.55); }

/* ---- 9. A11y / polish -------------------------------------------------- */
.kotn-store a, .kotn-store button, .kotn-store [role="button"], .kotn-store .cursor-pointer { cursor: pointer; }
.kotn-store a:focus-visible, .kotn-store button:focus-visible,
.kotn-store input:focus-visible, .kotn-store select:focus-visible {
    outline: 2px solid var(--kotn-black); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .kotn-store *, .kotn-store *::before, .kotn-store *::after { transition: none !important; animation: none !important; }
}

/* ====================================================================== */
/*  10. Checkout + basket flow                                            */
/*  Added for the redesigned journey: the stripped checkout shell, the     */
/*  add-to-bag confirmation, filter chips and the stacked buy box.        */
/*  Scoped to .kotn-store like everything above, so the admin theme is     */
/*  untouched.                                                            */
/* ====================================================================== */

/* ---- Checkout shell: no nav, so the header carries the reassurance ---- */
.kotn-checkout header { background: #fff; }
.kotn-checkout header .container { min-height: 64px; }
/* The lock sits optically low against uppercase text without this. */
.kotn-checkout header i { position: relative; top: 1px; }

/* The stripped shell has no footer to close the page, so the body needs
   its own breathing room at the bottom. */
.kotn-checkout > section:last-child { padding-bottom: 4rem; }

/* ---- Cart drawer: the just-added confirmation ------------------------- */
/* Body scroll lives on the flex middle pane (see FrontendCartComponent). */
.kotn-store #cart-canvas .overscroll-contain { overscroll-behavior: contain; }

/* The free-shipping bar reads as progress rather than decoration only if
   it animates from where it was, not from zero on every re-render. */
.kotn-store #cart-canvas .bg-slate-900 { will-change: width; }

/* ---- Filter chips ---------------------------------------------------- */
/* Chips are removable, so the cross must look like the affordance it is. */
.kotn-store [class*="rounded-full"] > .lab-line-cross { opacity: .55; transition: opacity .2s ease; }
.kotn-store button:hover > .lab-line-cross { opacity: 1; }

/* ---- Buy box: primary action ----------------------------------------- */
/* Full-width primary CTA. The disabled state must not read as "loading",
   so it desaturates rather than fades to near-invisible. */
.kotn-store button[disabled] { cursor: not-allowed; filter: saturate(.35); opacity: .8; }

/* Uppercase button text needs tracking to stay legible at weight. */
.kotn-store .uppercase.tracking-wide { letter-spacing: .06em; }

/* ---- Cross-sell rail -------------------------------------------------- */
/* Horizontal rail: hide the scrollbar on desktop but keep it operable by
   wheel, trackpad and keyboard. */
.kotn-store .overflow-x-auto { scrollbar-width: thin; }
.kotn-store .overflow-x-auto::-webkit-scrollbar { height: 4px; }
.kotn-store .overflow-x-auto::-webkit-scrollbar-thumb {
    background: var(--kotn-line); border-radius: 4px;
}

/* ---- Guest checkout lanes -------------------------------------------- */
/* Two equal cards; on one column the guest lane should come first, which
   is already the DOM order, so nothing is reordered here — only spaced. */
.kotn-checkout .grid > div { align-content: start; }

/* ====================================================================== */
/*  11. Editorial refinement pass                                         */
/*                                                                        */
/*  Sections 1-9 already establish the palette and the flat geometry. What */
/*  was still soft: pill CTAs, sentence-case navigation, loose cards and a */
/*  price block with no hierarchy. This tightens those.                    */
/*                                                                        */
/*  Specificity notes, because two earlier bugs came from exactly this:    */
/*   - `.kotn-store .rounded-full` (0,2,0) forces pills. Squaring a CTA    */
/*     therefore needs to outrank it, hence `button.rounded-full.w-full`   */
/*     (0,3,1). Blanket-killing .rounded-full is what made the cart icon   */
/*     invisible before — icon buttons keep their radius here.             */
/*   - Nothing below names a bare `.kotn-store button`, which is the       */
/*     selector that stole the icon font in section 1b.                    */
/* ====================================================================== */

/* ---- 11a. CTAs: rectangles, not pills --------------------------------- */
/* Full-width actions only: the buy box, drawer, checkout and guest lanes.
   Icon-only round controls are untouched because they are never .w-full. */
.kotn-store button.rounded-full.w-full,
.kotn-store a.rounded-full.w-full,
.kotn-store .field-button {
    border-radius: 0 !important;
    height: 52px;
    font-size: 13px;
    font-weight: 600 !important;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* The primary action is solid black; the secondary is a hairline outline.
   One filled button per screen is the whole hierarchy. */
.kotn-store button.rounded-full.w-full.bg-slate-900,
.kotn-store button.rounded-full.w-full.\!bg-primary,
.kotn-store .field-button {
    /* background-color, not the `background` shorthand: a shorthand carrying
       var() resolves as a pending-substitution value and was losing to
       Tailwind's plain .bg-slate-400 here. The longhand applies cleanly. */
    background-color: var(--kotn-accent) !important;
    color: var(--kotn-white) !important;
    border: 1px solid var(--kotn-accent) !important;
}
.kotn-store button.rounded-full.w-full.bg-white,
.kotn-store button.rounded-full.w-full.border {
    background-color: transparent !important;
    border: 1px solid var(--kotn-black) !important;
    color: var(--kotn-black) !important;
}
.kotn-store button.rounded-full.w-full:hover:not([disabled]),
.kotn-store .field-button:hover { opacity: .85; }

/* ---- 11b. Navigation: uppercase, tracked ------------------------------ */
.kotn-store .header-nav-list a {
    font-size: 12px !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
}

/* ---- 11c. Product grid: denser, full-bleed ---------------------------- */
/* Hairline gutters read as a contact sheet rather than a set of cards. */
.kotn-store .grid.grid-cols-2 { gap: 2px !important; }
@media (min-width: 768px) { .kotn-store .grid.md\:grid-cols-3 { gap: 2px !important; } }
@media (min-width: 1024px) { .kotn-store .grid.lg\:grid-cols-4 { gap: 2px !important; } }

.kotn-store .miron { background: transparent !important; }
.kotn-store .miron img { aspect-ratio: 3 / 4; }
.kotn-store .miron h3 { padding: 12px 2px 0; font-size: 13px !important; line-height: 1.35; }
.kotn-store .miron h4, .kotn-store .miron .text-xl { padding: 2px 2px 18px; font-size: 13px !important; }
.kotn-store .miron .px-1 { padding-left: 2px !important; padding-right: 2px !important; }

/* ---- 11d. Price hierarchy --------------------------------------------- */
/* Sale price carries the weight; the original recedes rather than shouting.
   Identical logic on the grid, the product page and the basket, so the
   colours never have to be relearned. */
.kotn-store del, .kotn-store .miron del {
    color: var(--kotn-muted) !important;
    font-weight: 400 !important;
    text-decoration-thickness: 1px;
}
.kotn-store .text-shopperz-red, .kotn-store .miron .text-shopperz-red { color: var(--kotn-red) !important; }

/* ---- 11e. Product page: tighter buy box ------------------------------- */
.kotn-store section h2.text-3xl,
.kotn-store section h2.sm\:text-4xl {
    font-size: clamp(26px, 3vw, 38px) !important;
    line-height: 1.08;
    letter-spacing: -.01em;
}
/* Variation swatches as squares, matching the CTA geometry. */
.kotn-store .rounded-full.bg-\[\#F7F7FC\] { border-radius: 0 !important; }

/* ---- 11f. Labels: small caps for supporting copy ---------------------- */
.kotn-store dt.capitalize,
.kotn-store .db-field-title {
    font-size: 11px !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 600 !important;
    color: var(--kotn-muted);
}

/* ---- 11g. Checkout shell --------------------------------------------- */
.kotn-checkout header { border-bottom: 1px solid var(--kotn-line); }
.kotn-checkout .rounded-2xl { border-radius: 0 !important; border-color: var(--kotn-line) !important; }
.kotn-checkout input { border-radius: 0 !important; }

/* ====================================================================== */
/*  12. Utility-colour rescue                                             */
/*                                                                        */
/*  Section 1 sets `.kotn-store button { color: var(--kotn-black) }` to    */
/*  cascade the ink colour. That selector is (0,1,1); Tailwind's           */
/*  `.text-white` is (0,1,0), so the blanket rule outranked it and every   */
/*  white label on a dark button rendered black-on-black — invisible.      */
/*                                                                        */
/*  This is the same failure as the icon-font tofu in section 1b: a bare   */
/*  `.kotn-store button` rule beating a utility class. The fix is the      */
/*  same shape — restate the utility at (0,2,1) so it wins cleanly,        */
/*  touching only elements that actually carry the class.                  */
/*                                                                        */
/*  Visible on: selected variation swatches (colour and size), the primary */
/*  buy-box CTA, the checkout CTAs and the cart-drawer checkout button.    */
/* ====================================================================== */

.kotn-store button.text-white,
.kotn-store a.text-white,
.kotn-store span.text-white,
.kotn-store label.text-white,
.kotn-store div.text-white,
.kotn-store button.text-white *,
.kotn-store a.text-white * {
    color: var(--kotn-white) !important;
}

/* Same trap, inverted: a dark label deliberately placed on a light chip. */
.kotn-store button.text-black,
.kotn-store a.text-black {
    color: var(--kotn-black) !important;
}

/* ====================================================================== */
/*  13. Product card hover image swap                                     */
/*                                                                        */
/*  The second image comes from the product's existing media collection    */
/*  (every product here has 2+), exposed as `hover_cover`. No extra        */
/*  column, no second upload field.                                        */
/*                                                                        */
/*  The secondary <img> is only rendered when it differs from the cover,   */
/*  so a single-image product simply has nothing to fade to.              */
/* ====================================================================== */

.kotn-store .product-img-wrap {
    position: relative;
    overflow: hidden;
    /* Matches the 3/4 card ratio set in section 11c, so the swap cannot
       change the card's height mid-transition. */
    aspect-ratio: 3 / 4;
    width: 100%;
}
.kotn-store .product-img-wrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.kotn-store .product-img-secondary {
    opacity: 0;
    transition: opacity .45s ease;
}
/* .miron is the card root this theme already targets. */
.kotn-store .miron:hover .product-img-secondary,
.kotn-store .group:hover .product-img-secondary { opacity: 1; }

/* A crossfade rather than a cover-up: the primary recedes as the second
   arrives, which avoids a hard edge where the two images differ in crop. */
.kotn-store .miron:hover .product-img-primary,
.kotn-store .group:hover .product-img-primary { opacity: 0; }
.kotn-store .product-img-primary { transition: opacity .45s ease; }

/* Touch devices have no hover: the swap would either never fire or stick
   after a tap. Coarse pointers get the primary image only. */
@media (hover: none), (pointer: coarse) {
    .kotn-store .product-img-secondary { display: none !important; }
    .kotn-store .miron:hover .product-img-primary,
    .kotn-store .group:hover .product-img-primary { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .kotn-store .product-img-primary,
    .kotn-store .product-img-secondary { transition: none !important; }
}

/* ====================================================================== */
/*  14. Pagination: brand accent on the active page                       */
/*                                                                        */
/*  PaginationComponent.vue already marks the current page with           */
/*  `bg-primary` — the correct brand token. It rendered black only        */
/*  because section 6 remaps `.bg-primary` to the editorial ink colour.   */
/*                                                                        */
/*  Rather than weaken that remap (which would turn every CTA orange      */
/*  again), this restores the brand colour for pagination alone.          */
/*  Specificity: .kotn-store nav[aria-label] button.bg-primary = (0,3,2), */
/*  which clears section 6's (0,2,0) !important cleanly.                  */
/* ====================================================================== */

.kotn-store nav[aria-label="Pagination"] button.bg-primary {
    background-color: var(--kotn-accent) !important;
    color: #fff !important;
}

/* Hover on the inactive numbers uses the same token, so the colour the
   shopper sees on hover is the colour the page turns when clicked. */
.kotn-store nav[aria-label="Pagination"] button:hover:not([disabled]) {
    background-color: var(--kotn-accent) !important;
    color: #fff !important;
}

/* The active page is not a hover target — keep it from shifting on hover. */
.kotn-store nav[aria-label="Pagination"] button.bg-primary:hover {
    background-color: var(--kotn-accent) !important;
}

/* ====================================================================== */
/*  15. Flash sale treatment                                              */
/*                                                                        */
/*  The flash grid reuses the same card component as every other section,  */
/*  so the distinction is made in CSS scoped to .kotn-flash rather than by */
/*  forking the component.                                                 */
/* ====================================================================== */

/* Sale ribbon: squared to match section 11's geometry, not a pill. */
.kotn-store .kotn-sale-badge {
    background: var(--kotn-black);
    border-radius: 0;
    letter-spacing: .08em;
    text-transform: uppercase;
    box-shadow: none;
}

/* The savings figure is the part shoppers act on, so it gets the accent. */
.kotn-store .kotn-discount-badge {
    background: var(--kotn-accent);
    color: #fff;
    border-radius: 0;
    letter-spacing: .04em;
}

/* Section ground: a tint that separates the block without competing with
   the product photography sitting on it. */
.kotn-store .kotn-flash {
    background: var(--kotn-accent-soft);
    padding: 40px 0 44px;
    margin-left: 0;
    margin-right: 0;
}
.kotn-store .kotn-flash .container { background: transparent; }

.kotn-store .kotn-flash-timer {
    color: var(--kotn-accent);
    font-variant-numeric: tabular-nums;   /* stops the digits jittering */
    letter-spacing: .02em;
}

/* Hover feedback distinct from the standard grid: the card lifts slightly
   instead of only crossfading its image. */
.kotn-store .kotn-flash .miron {
    transition: transform .35s ease, box-shadow .35s ease;
}
.kotn-store .kotn-flash .miron:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .10) !important;
}

@media (prefers-reduced-motion: reduce) {
    .kotn-store .kotn-flash .miron,
    .kotn-store .kotn-flash .miron:hover { transform: none !important; transition: none !important; }
}

/* ====================================================================== */
/*  16. Mobile bottom bar — brand ground                                  */
/*                                                                        */
/*  The bar sits on the soft pink rather than the accent: a full-strength  */
/*  deep pink strip across the bottom of every page fights the product     */
/*  photography above it.                                                  */
/*                                                                        */
/*  Ink is dark, not white. On a soft ground white text fails contrast —  */
/*  effectively invisible — while near-black clears 13:1.                  */
/* ====================================================================== */

.kotn-store .kotn-bottom-bar {
    background: var(--kotn-pink) !important;
    border-top: 1px solid rgba(0, 0, 0, .06);
    /* Fixed bar on iOS: without this the home-indicator strip cuts through
       the labels, which a white bar hid but a coloured one will not. */
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
}

/* Items inherit ink from the bar, so the markup does not have to carry a
   colour that only makes sense against one background. */
.kotn-store .kotn-bottom-bar a,
.kotn-store .kotn-bottom-bar button {
    color: var(--kotn-black) !important;
}
.kotn-store .kotn-bottom-bar a:hover,
.kotn-store .kotn-bottom-bar button:hover,
.kotn-store .kotn-bottom-bar .router-link-active {
    color: var(--kotn-accent-deep) !important;
}

/* The raised cart button keeps its own fill and stays the one saturated
   element on the bar. Its icon must stay white against the deep pink. */
.kotn-store .kotn-bottom-bar .lab-line-bag {
    background: var(--kotn-accent) !important;
    color: #fff !important;
}

/* ====================================================================== */
/*  17. Admin-driven type scale + footer typography                       */
/*                                                                        */
/*  These read the --kotn-size-* / --kotn-footer-* tokens that            */
/*  themeService writes onto :root from the admin Theme settings. Each     */
/*  one falls back to the value the editorial pass established, so the     */
/*  storefront still renders correctly if the settings never load.        */
/* ====================================================================== */

.kotn-store {
    font-size: var(--kotn-size-base, 17px);
}

/* Page and product titles. */
.kotn-store h1,
.kotn-store section h2.text-3xl,
.kotn-store section h2.sm\:text-4xl {
    font-size: var(--kotn-size-title, 46px) !important;
    line-height: 1.08;
}

/* Section headings. */
.kotn-store h2,
.kotn-store h3.section-heading,
.kotn-store .section-title {
    font-size: var(--kotn-size-heading, 32px) !important;
    line-height: 1.15;
}

/* Supporting copy: card text, captions, meta. */
.kotn-store .miron h3,
.kotn-store .miron h4,
.kotn-store .miron .text-xl,
.kotn-store .text-description,
.kotn-store dt.capitalize {
    font-size: var(--kotn-size-detail, 14px) !important;
}

/* ---- Footer typography, controlled separately ------------------------ */
/* The footer is the one block shop owners most often want smaller or in a
   different colour, so it gets its own tokens rather than inheriting. */
.kotn-store footer,
.kotn-store footer a,
.kotn-store footer p,
.kotn-store footer span,
.kotn-store footer li {
    color: var(--kotn-footer-color, #1A1A1A) !important;
    font-size: var(--kotn-footer-size, 15px);
}
.kotn-store footer h1,
.kotn-store footer h2,
.kotn-store footer h3,
.kotn-store footer h4,
.kotn-store footer h5 {
    color: var(--kotn-footer-color, #1A1A1A) !important;
    font-size: var(--kotn-footer-heading, 22px) !important;
}
/* Hover keeps the accent so links stay obviously interactive. */
.kotn-store footer a:hover { color: var(--kotn-accent-deep) !important; }

/* ====================================================================== */
/*  18. Repoint hardcoded utilities at the theme tokens                   */
/*                                                                        */
/*  Most storefront sections have no stylesheet of their own — their       */
/*  colours are Tailwind utilities written into the Vue markup and         */
/*  compiled into app.css as fixed values:                                 */
/*                                                                        */
/*      bg-white x57   bg-[#F7F7FC] x12   bg-gray-100 x9                  */
/*      bg-[#FFF4F1] x9   bg-primary-slate x5   bg-[#EFF0F6] x4           */
/*                                                                        */
/*  Those never consult a custom property, which is why changing a theme   */
/*  colour only visibly moved the one section whose CSS I had written      */
/*  against the tokens. Rewriting 57 markup sites would be churn; mapping  */
/*  the utilities to the tokens here fixes every section at once and       */
/*  keeps the markup untouched.                                            */
/*                                                                        */
/*  Scoped to .kotn-store throughout, so the admin panel is unaffected.    */
/* ====================================================================== */

/* Page and card surfaces follow the page colour. */
.kotn-store .bg-white { background-color: var(--kotn-white) !important; }

/* Neutral chips, steppers and fields. */
.kotn-store .bg-\[\#F7F7FC\],
.kotn-store .bg-\[\#EFF0F6\],
.kotn-store .bg-gray-50,
.kotn-store .bg-gray-100,
.kotn-store .bg-gray-200 { background-color: var(--kotn-surface) !important; }

/* Brand-tinted surfaces follow the soft accent, so a theme change carries
   through to every promo tint rather than only the flash-sale block. */
.kotn-store .bg-\[\#FFF4F1\],
.kotn-store .bg-\[\#FFE8E8\],
.kotn-store .bg-primary-slate { background-color: var(--kotn-accent-soft) !important; }

/* Brand-tinted text that pairs with those surfaces. */
.kotn-store .text-primary-slate { color: var(--kotn-accent) !important; }

/* Hardcoded near-black text and grounds follow the ink token. */
.kotn-store .text-black { color: var(--kotn-black) !important; }
.kotn-store .bg-black:not(.kotn-bottom-bar) { background-color: var(--kotn-black) !important; }