/* ============================================================================
   fitness-store — custom theme CSS
   ============================================================================
   The real file lives at public/themes/fitness-store/custom.css on the server
   and is edited in the admin Theme Editor under fitness-store → @assets. It is
   NOT in git: like the rest of the theme it belongs to this installation.

   REGISTRY — every customisation applied here, so nothing is a surprise later:

     1. Montserrat site-wide                      (fonts)
     2. Static page content /content/{slug}       (.prose is inert in the front
                                                   build, so lists/headings need
                                                   their own rules)
     3. Header row 2, desktop                     (search/nav packing, bold
                                                   quick-nav, aligning the nav
                                                   and BLOG with ΚΑΤΗΓΟΡΙΕΣ)
     4. Mobile breadcrumb                         (scrolls instead of squashing)
     5. Mobile sticky add-to-cart                 (product page)
     6. Page width, desktop                       (driven by --fs-page-max)
     7. Mobile product gallery                    (swipe strip, peek of the next)
     8. Mobile gallery dots + title spacing
     9. Mobile product page (photo size, cookie button, price/title)
    10. Header main links                         (ΚΑΤΗΓΟΡΙΕΣ + quick-nav: same
                                                   size/weight, dark grey)
    11. Product page price                        (same look as the product card)
    12. «Προστέθηκε στο καλάθι» alert             (light grey, not brand orange)

   Knobs are at the top of the file; change those rather than hunting through
   the rules.
   ============================================================================ */

:root {
    /* How wide pages run on desktop — three knobs, one per region.
       `none` = edge to edge; a length caps it and the gutters return.

       Content is capped so the page stops stretching on wide monitors (2400px
       measured off myprotein, which caps content and leaves its header
       full-bleed); header and footer stay edge to edge, which is what the
       banner and the footer block are designed for.

       Header and footer fall back to --fs-page-max when unset, so setting only
       that one still moves everything together. */
    --fs-page-max: 2400px;
    --fs-header-max: none;
    --fs-footer-max: none;

    /* Header main links — ΚΑΤΗΓΟΡΙΕΣ and the quick-nav (ΠΡΟΣΦΟΡΕΣ / ΒΡΕΣ ΤΟ
       ΣΤΟΧΟ ΣΟΥ / BRANDS). One weight, one size, one colour for all of them;
       see section 10. Dark grey on purpose, not black. */
    --fs-header-nav-color: #3f3f46;
    --fs-header-nav-hover: #b74916;
    --fs-header-nav-size: 18px;
    --fs-header-nav-weight: 800;
}

/* --- 1. Site-wide Montserrat font --- */
:root {
    --font-sans: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
    --default-font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
}
body, button, input, select, textarea,
h1, h2, h3, h4, h5, h6, p, a, span, div, li, td, th, label {
    font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif !important;
}

/* --- 2. Static page content (/content/{slug}) ---
   The page template wraps the body in .prose, but @tailwindcss/typography is
   not part of the front build, so .prose is inert and the CSS reset strips
   list markers and heading weights — imported pages rendered as flat text.
   Restore the minimum readable defaults. */
article.prose ol { list-style: decimal; padding-left: 1.6rem; margin: 0 0 1rem; }
article.prose ul { list-style: disc; padding-left: 1.6rem; margin: 0 0 1rem; }
article.prose li { margin: 0.35rem 0; }
article.prose p { margin: 0 0 0.9rem; }
article.prose h2 { font-size: 1.35rem; font-weight: 700; margin: 1.6rem 0 0.6rem; }
article.prose h3 { font-size: 1.15rem; font-weight: 700; margin: 1.3rem 0 0.5rem; }
article.prose a { color: #b74916; text-decoration: underline; }
article.prose table { width: 100%; border-collapse: collapse; margin: 0 0 1rem; }
article.prose th, article.prose td { border: 1px solid #e5e7eb; padding: 0.5rem 0.65rem; }

/* --- 3. Header layout & sizing (desktop) --- */
@media (min-width: 1024px) {
    /* Row 2 is as tall as the logo cell; without this the stacked items in
       cells 2-2 (search + nav) and 2-3 (actions + Blog) get spread across the
       full height (align-content:stretch) leaving a big vertical gap. Pack each
       pair together with a small, consistent gap. */
    .header-cell-2-2, .header-cell-2-3 {
        align-content: center !important;
        row-gap: 4px !important;
    }
    .header-cell-2-2 {
        justify-content: space-between !important;
    }
    .header-cell-2-2 .header-element-search {
        margin-top: -6px !important;
    }
    /* Center the quick-nav (ΠΡΟΣΦΟΡΕΣ / ΒΡΕΣ ΤΟ ΣΤΟΧΟ ΣΟΥ / BRANDS) under search,
       and give it some air from the search box above it. */
    .header-cell-2-2 .header-element-headernav {
        width: 100% !important;
        margin-top: 10px !important;
    }
    .header-cell-2-2 .fs-headernav {
        justify-content: center !important;
    }
    /* (weight/size/colour of the nav links moved to section 10, so ΚΑΤΗΓΟΡΙΕΣ
       and the quick-nav are driven by the same knobs. A rule here would out-
       specify it — .header-cell-2-2 .fs-headernav a beats .fs-headernav a.) */

    /* Line up the quick-nav and BLOG with the ΚΑΤΗΓΟΡΙΕΣ button, which sits at
       the bottom of cell 2-1. The three cells centre their own stacks
       independently and the stacks have different heights, so their last rows
       land at three different heights. Nudged with transform (not margin) on
       purpose: a margin would change the stack height and re-centre the search
       box / account icons above them. Offsets align the text mid-lines. */
    .header-cell-2-2 .header-element-headernav {
        transform: translateY(22px) !important;
    }
    .header-cell-2-3 .header-element-customhtml-6 {
        transform: translateY(38px) !important;
    }

    /* Bigger header text & icons */
    .header-row-1 a, .header-row-1 span, .header-row-1 p { font-size: 15px !important; }
    .header-row-1 svg { width: 1.2rem !important; height: 1.2rem !important; }
    .header-element-menu-button, .header-element-menu-button span,
    .header-element-customhtml-6, .header-element-customhtml-6 a, .header-element-customhtml-6 span { font-size: 18px !important; }
    .header-element-menu-button svg { width: 1.7rem !important; height: 1.7rem !important; }
    /* Αριστερά 2.6rem ήταν ο χώρος του παλιού φακού, που πλέον είναι κουμπί ΔΕΞΙΑ:
       ο κέρσορας ξεκινούσε 24px μετά το αυτόματο κείμενο. Δεξιά 1rem έστελνε μεγάλο
       κείμενο κάτω από το κουμπί και το ×. (03/10/2026) */
    .header-element-search input { font-size: 18px !important; padding: 0.9rem 5.25rem 0.9rem 1.25rem !important; }
    .header-element-search svg { width: 1.4rem !important; height: 1.4rem !important; }
    .header-element-actions a svg { width: 2.1rem !important; height: 2.1rem !important; }
}

/* --- 4+5. Mobile: breadcrumb + sticky add-to-cart --- */
@media (max-width: 767px) {
    /* The trail is a nowrap flex row with no overflow handling: on this
       product it is 1376px wide across 5 levels, so on a phone the labels
       squeezed into each other and pushed the page sideways. Let it scroll
       as one line instead, and stop the links from shrinking. */
    nav[aria-label="Breadcrumb"] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    nav[aria-label="Breadcrumb"]::-webkit-scrollbar { display: none; }
    nav[aria-label="Breadcrumb"] ol {
        flex-wrap: nowrap;
        white-space: nowrap;
    }
    nav[aria-label="Breadcrumb"] ol li,
    nav[aria-label="Breadcrumb"] ol a,
    nav[aria-label="Breadcrumb"] ol span,
    nav[aria-label="Breadcrumb"] ol svg { flex-shrink: 0; }
    nav[aria-label="Breadcrumb"] ol a,
    nav[aria-label="Breadcrumb"] ol [aria-current="page"] { font-size: 0.8125rem; }

    /* Add to cart pinned to the bottom of the screen: on a phone the button
       scrolls out of view as soon as the description starts, and the customer
       has to scroll back up to buy. The real button is moved — not a copy —
       so the Livewire wiring, disabled states and stock checks come with it. */
    #product-addtocart-section {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        background: #fff;
        padding: 10px 12px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
    }
    #product-addtocart-section #addToCartButton {
        width: 100% !important;
        margin: 0 !important;
    }
    /* Room at the end of the page so the bar never sits over the footer.
       Scoped with :has() so only the product page pays for it. */
    body:has(#product-addtocart-section) { padding-bottom: 86px; }
}

/* --- 6. Page width on desktop -----------------------------------------------
   Pages were laid out inside centred containers — max-w-[1408px] for content,
   max-w-7xl for older blocks, Tailwind's .container for the home blocks — which
   left wide monitors with empty gutters down both sides.

   Prefixed with `body` on purpose: the compiled front bundle ships
   `.max-w-7xl{max-width:1440px!important}`, so a plain `.max-w-7xl` rule of
   equal specificity is a coin toss on load order. `body .max-w-7xl` outranks it
   outright.

   Desktop only; the containers keep their own px-4/sm:px-6/lg:px-8 padding, so
   text never touches the edge, and phones/tablets are untouched. */
@media (min-width: 1024px) {
    body .max-w-\[1408px\],
    body .max-w-7xl,
    body .container,
    body .fs-ftr-wrap { max-width: var(--fs-page-max) !important; }
}

/* --- 7. Mobile product gallery ----------------------------------------------
   On a phone the gallery stacked one big square image above a row of four
   small thumbnails: the extra photos read as decoration, not as "there is more
   to see", and each one took a tap.

   Turned into a single horizontal strip that snaps, with each slide at 82% of
   the width — so the next photo is half visible and the swipe is discoverable
   without dots or arrows.

   No markup change: `display: contents` dissolves the thumbnail grid so its
   links become slides of the same strip as the main image. The lightbox
   (data-gall="gallery") keeps working, since the anchors are untouched. */
@media (max-width: 767px) {
    #product-gallery {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 12px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-bottom: 14px;
    }
    #product-gallery::-webkit-scrollbar { display: none; }

    /* The container holding the thumbnails stops laying them out and hands them
       over as slides — works for the thumbs-left column and the thumbs-bottom
       row alike. `display: contents` does not move them in the DOM, so they are
       still addressed through their parent below. */
    #product-gallery > .col-span-1,
    #product-gallery > .grid { display: contents; }

    /* The main photo leads on a phone. In thumbs-left it sits after the
       thumbnails in the markup, which is right for desktop, so pull it forward
       here instead of changing the markup. */
    #product-gallery > .col-span-4 { order: -1; }

    #product-gallery > .col-span-4,
    #product-gallery > div:first-child,
    #product-gallery > .col-span-1 > a,
    #product-gallery > .grid > a {
        flex: 0 0 82%;
        scroll-snap-align: center;
        margin-bottom: 0 !important;
        /* space-y-3 puts margin-top on every thumbnail after the first; in a
           row that reads as a gap on one side only. */
        margin-top: 0 !important;
        max-width: none !important;
    }
}

/* --- 8. Mobile gallery dots + room before the title ------------------------
   Dots mirror myprotein's progress bar under the photos: short bars, the
   current one filled. Hidden on desktop, where the thumbnails are laid out
   normally and there is nothing to page through. */
.fs-gal-dots { display: none; }

@media (max-width: 767px) {
    /* The title sat right against the last photo. */
    #product-gallery { margin-bottom: 14px; }

    .fs-gal-dots {
        display: flex;
        justify-content: center;
        gap: 6px;
        margin: 10px 0 4px;
    }
    .fs-gal-dot {
        width: 22px;
        height: 3px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: #d1d5db;
        cursor: pointer;
        transition: background .2s ease;
    }
    .fs-gal-dot.is-active { background: #b74916; }
}

/* --- 9. Mobile product page corrections --------------------------------
   All measured against a phone screenshot of this page next to myprotein's.

   The cookie button is the serious one: it is position:fixed bottom-left at
   z-index 999, painted with --btn-bg — the same orange as the add-to-cart bar
   it lands on (z-index 40). Two orange rectangles on top of each other read as
   one, and the customer taps the wrong thing. It gets lifted clear of the bar
   on pages that have one, rather than restyled, so it stays recognisable. */
@media (max-width: 767px) {
    /* 1 + 2. A bigger photo, and room between the dots and the title. */
    #product-gallery > .col-span-4,
    #product-gallery > div:first-child,
    #product-gallery > .col-span-1 > a,
    #product-gallery > .grid > a { flex-basis: 90% !important; }

    .fs-gal-dots { margin-bottom: 22px; }

    /* 3. Clear the sticky add-to-cart bar (~66px) plus the phone's home bar. */
    body:has(#product-addtocart-section) .cookie-settings-btn {
        bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* 4. The price is the number the customer is looking for; it was smaller
          than the product title next to it. Scoped to the product page so the
          listing cards keep their own scale. */
    body:has(.fs-pdp-info) h1 {
        font-size: 1.5rem;
        line-height: 1.25;
    }
    body:has(.fs-pdp-info) .tb-price {
        font-size: 1.75rem;
        font-weight: 700;
    }
    body:has(.fs-pdp-info) .tb-price-sale {
        font-size: 1.05rem;
    }
}

/* --- 10. Header main links: ΚΑΤΗΓΟΡΙΕΣ + quick-nav ---
   One look for the whole top line. Every rule needs !important:
   the ΚΑΤΗΓΟΡΙΕΣ button is drawn by the header block editor with inline
   styles (font-weight:600; color:currentColor) and inline beats a plain
   stylesheet rule, while the nav carries Tailwind's `text-black`.
   Knobs: --fs-header-nav-* at the top of this file. */

.header-element-menu-button button,
.header-element-menu-button button span,
.header-element-menu-button button svg,
.fs-headernav,
.fs-headernav a,
.fs-headernav a span,
.fs-headernav svg {
    color: var(--fs-header-nav-color) !important;
}

.header-element-menu-button button span,
.fs-headernav a,
.fs-headernav a span {
    font-weight: var(--fs-header-nav-weight) !important;
}

.header-element-menu-button button:hover,
.header-element-menu-button button:hover span,
.header-element-menu-button button:hover svg,
.fs-headernav a:hover,
.fs-headernav a:hover span,
.fs-headernav a:hover svg {
    color: var(--fs-header-nav-hover) !important;
}

/* Size is desktop-only: on a phone the quick-nav wraps and 18px would push it
   onto three lines. */
@media (min-width: 1024px) {
    .header-element-menu-button button span,
    .header-cell-2-2 .fs-headernav a,
    .header-cell-2-2 .fs-headernav a span {
        font-size: var(--fs-header-nav-size) !important;
    }
}


/* --- 11. Product page price = the product card's price ---------------------
   The card shows 38px / weight 500 / upright / #b74916; the product page was
   showing 24px / weight 900 / italic / black — the same number in two
   different voices. Matched here rather than in the blades because the
   variation picker rewrites that markup on every change, so a class added to
   the template would not survive; the .tb-price hooks do.

   Desktop only: the mobile sizes in section 9 were tuned separately on a real
   phone and still apply below 768px.

   Hooked on .fs-pdp-info (the product info column), NOT on
   #product-addtocart-section: that section is only rendered for some products,
   so every rule hanging off it was silently dead on the rest — which is why
   this page kept its old 24px italic black price. The section-9 mobile rules
   had the same hole and were moved over too.

   !important on the colour beats `.tb-price { color: var(--color-price)
   !important }` in override.css. Knobs at the top of this section. */
@media (min-width: 768px) {
    .fs-pdp-info .tb-price {
        font-size: var(--fs-pdp-price-size, 2.4rem);
        font-weight: var(--fs-pdp-price-weight, 500);
        font-style: normal;
        color: var(--fs-pdp-price-color, #b74916) !important;
        line-height: 1.05;
    }
    .fs-pdp-info .tb-price-sale {
        font-size: var(--fs-pdp-old-size, 1.125rem);
        font-weight: 600;
        font-style: normal;
        color: var(--fs-pdp-old-color, #31353d) !important;
    }
}


/* --- 12. "Το προϊόν προστέθηκε στο καλάθι" alert --------------------------
   The Livewire view styles it with Tailwind's bg-blue-50 / text-blue-800, but
   override.css maps every pale utility background inside #main-content to
   --badge-bg (#b74916) with !important — so the confirmation came out solid
   brand orange, shouting louder than the Add to cart button itself.

   Repainted here rather than in the Livewire blade because that view is core,
   shared with the other installations. Knobs below. */
#main-content .alert-success [role="alert"] {
    background-color: var(--fs-cart-alert-bg, #f3f4f6) !important;
    border-color: var(--fs-cart-alert-border, #e2e5e9) !important;
    color: var(--fs-cart-alert-text, #374151) !important;
}
#main-content .alert-success [role="alert"] svg {
    color: var(--fs-cart-alert-icon, #9ca3af) !important;
}
#main-content .alert-success [role="alert"] a {
    color: var(--fs-cart-alert-link, #b74916) !important;
    text-decoration: underline;
}

/* ── Sticky header: γιατί χρειάζεται αυτός ο κανόνας ─────────────────────────
   Το widget του Google Translate φορτώνει δικό του stylesheet από το gstatic
   που κάνει το <body> scroll container (overflow-x: hidden). Όταν το body
   είναι scroll container, το `position: sticky` του header κολλάει ΜΕΣΑ στο
   body — που κυλάει μαζί με τη σελίδα — άρα φαίνεται σαν να μην κολλάει
   καθόλου. Το `clip` κόβει το οριζόντιο ξεχείλισμα το ίδιο, αλλά ΔΕΝ φτιάχνει
   scroll container. Η specificity `html body` νικά το gstatic (`body`) ακόμα
   κι αν εκείνο έχει !important. Μετρήθηκε 26/09/2026: με hidden το header
   έφευγε στο scroll, με clip μένει στο top: 0. ───────────────────────────── */
html body {
    overflow-x: clip !important;
}

/* ── Mobile header: ίδιο μέγεθος σε όλα τα εικονίδια, χωρίς λεκτικά ────────
   Το header render-άρεται τρεις φορές, μία ανά breakpoint, και εμφανίζεται
   μόνο το αντίστοιχο wrapper — γι αυτό όλα εδώ είναι κάτω από το
   `.device-elements-mobile` και ΔΕΝ αγγίζουν desktop/tablet.

   Αιτία: στο κινητό τα τρία στοιχεία της αριστερής στήλης δεν χωρούσαν και το
   λογότυπο έπεφτε πάνω στον επιλογέα γλώσσας. Το «MENU» και το μέγεθος του
   φακού ρυθμίζονται από το manifest· εδώ μένουν όσα δεν έχουν ρύθμιση: το
   εικονίδιο του hamburger (inline style στο component), τα εικονίδια ενεργειών
   (η ρύθμιση header.actions.iconClass είναι ΚΟΙΝΗ για όλα τα breakpoints) και
   η εμφάνιση του επιλογέα γλώσσας. Το λογότυπο εξαιρείται. ──────────────── */

/* Ένα μέγεθος για όλα. */
.device-elements-mobile button[aria-controls] > svg,
.device-elements-mobile a.group svg {
    width: 1.5rem !important;
    height: 1.5rem !important;
}

/* hamburger: το κείμενο είναι πλέον κενό, οπότε φεύγει και το κενό του. */
.device-elements-mobile button[aria-controls] {
    gap: 0 !important;
    padding: 0.35rem 0.4rem !important;
}

/* Γλώσσα: μόνο η σημαία — χωρίς φόντο, χωρίς περίγραμμα, χωρίς το όνομα
   («Ελληνικά» = το δεύτερο span, μετά τη σημαία). */
.device-elements-mobile .gt-lang__btn {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    gap: 0.15rem;
    padding: 0.2rem 0.15rem;
}
.device-elements-mobile .gt-lang__btn > span + span { display: none !important; }
.device-elements-mobile .gt-lang__btn > span { font-size: 1.15rem !important; line-height: 1 !important; }
.device-elements-mobile .gt-lang__chev { width: 10px; height: 10px; opacity: 0.55; }

/* ── Κινητό: κουμπί cookies μόνο ως εικονίδιο ──────────────────────────────
   Το πλατύ κουμπί έπιανε όλη την κάτω αριστερή γωνία πάνω από το περιεχόμενο.
   Με το μπισκότο ως εικονίδιο (core view) το λεκτικό δεν χρειάζεται εδώ. ─── */
@media (max-width: 767.98px) {
    .cookie-settings-btn .cookie-settings-btn__label { display: none !important; }
    .cookie-settings-btn {
        padding: 0.7rem !important;
        border-radius: 9999px !important;
        min-width: 0 !important;
        gap: 0 !important;
    }
    .cookie-settings-btn .cookie-settings-btn__icon {
        width: 1.35rem !important;
        height: 1.35rem !important;
        margin: 0 !important;
    }
}

/* --- Mobile: σκιά κάτω από το header, λιγότερος χώρος πάνω από το breadcrumb (03/10/2026) --- */
@media (max-width: 767px) {
    /* Η μπάρα είναι το ίδιο το <header>, που είναι sticky: η σκιά ακολουθεί
       όταν κυλά η σελίδα και ξεχωρίζει την μπάρα από το περιεχόμενο από κάτω.
       (Η λέξη «MENU» κρύφτηκε από το manifest, όχι από εδώ.) */
    html body header:has(.device-elements-mobile) {
        box-shadow: 0 2px 10px rgba(17, 24, 39, 0.08);
    }

    /* Πάνω από τη διαδρομή υπήρχαν 40px κενό: 24px padding του περιέχοντος
       στοιχείου και 16px από το mt-4 του manifest. Στο κινητό αρκούν 10px. */
    html body div:has(> nav[aria-label="Breadcrumb"]) { padding-top: 0.625rem; }
    html body nav[aria-label="Breadcrumb"] { margin-top: 0; }
}

/* --- Mobile menu: εικονίδια κατηγοριών όπως στο κύριο μενού (07/10/2026) ---
   Τα εικονίδια είναι SVG από το admin του μενού· ίδιο χρώμα και fill με το desktop
   (text-gray-700, fill-current), λίγο μικρότερα για το στενό πλάτος. */
.fs-mmenu-icon { color: #374151; }
.fs-mmenu-icon > svg { width: 1.6rem; height: 1.6rem; fill: currentColor; }
.fs-mmenu-icon > img { width: 2rem; height: 2rem; object-fit: contain; }

/* --- 13. Σελίδα προϊόντος: τιμή, επιλογή γεύσης, μήνυμα, χωρίς καρδούλα (09/10/2026) ---
   Με id + `html body` ώστε να νικούν και τις Tailwind κλάσεις του component
   (text-sm, text-gray-700) και το override.css (ανοιχτά φόντα → πορτοκαλί). */

/* Τιμή: μεγάλη, στο χρώμα του καταστήματος. Σε προσφορά η νέα τιμή είναι η
   .tb-price-sale και η παλιά (.tb-price) ακολουθεί διαγραμμένη και μικρή. */
html body #product-price-display,
html body #product-price-display > .tb-price:only-child,
html body #product-price-display .tb-price-sale {
    font-size: 2.4rem !important;
    font-weight: 800 !important;
    font-style: normal !important;
    color: #b74916 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.01em;
}
html body #product-price-display .tb-price-sale ~ .tb-price {
    font-size: 1.25rem !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
}
@media (max-width: 767.98px) {
    html body #product-price-display,
    html body #product-price-display > .tb-price:only-child,
    html body #product-price-display .tb-price-sale { font-size: 2rem !important; }
}

/* Επιλογή γεύσης: μεγαλύτερη ετικέτα και καθαρό, εμφανές πεδίο. */
html body #tb-standalone-variations > span,
html body #product-variations-section > span {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin-bottom: 0.5rem !important;
}
html body #tb-var-select,
html body #product-variations-section select {
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: #111827 !important;
    background-color: #fff !important;
    /* Το περίγραμμα το κρατά κανόνας του Tailwind μέσα σε @layer (κερδίζει και
       το !important μας)· το ίδιο αποτέλεσμα με εσωτερική σκιά. */
    box-shadow: inset 0 0 0 2px #6b7280 !important;
    border-color: transparent !important;
    border-radius: 0.6rem !important;
    padding: 0.75rem 2.5rem 0.75rem 1rem !important;
    min-height: 3.1rem;
    cursor: pointer;
}
html body #tb-var-select:focus,
html body #product-variations-section select:focus {
    box-shadow: inset 0 0 0 2px #b74916, 0 0 0 3px rgba(183, 73, 22, 0.18) !important;
    outline: none !important;
}

/* Μήνυμα σφάλματος πάνω από το «Προσθήκη στο καλάθι»: λευκά γράμματα σε
   κόκκινο φόντο (πριν: κόκκινα γράμματα σε πορτοκαλί, σχεδόν αόρατα). */
html body #main-content .bg-red-50.border-red-200 {
    background-color: #dc2626 !important;
    border-color: #b91c1c !important;
}
html body #main-content .bg-red-50.border-red-200 .text-red-700 {
    color: #fff !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
}
html body #main-content .bg-red-50.border-red-200 svg {
    color: #fff !important;
}

/* Η «καρδούλα» που πετάει από το κουμπί (product-scripts.js, core) — εδώ όχι. */
html body .heart { display: none !important; }


/* --- 14. Κινητό μενού (09/10/2026) ---
   - Κουμπί: μόνο το hamburger, χωρίς τη λέξη «MENU» (το manifest έχει buttonText=null,
     που το component διαβάζει ως «Menu»).
   - Βελάκια υπομενού: μικρότερα και χωρίς τα αρνητικά περιθώρια του core (inline
     style 2.25rem, margin -0.5rem) που τα κολλούσαν το ένα στο άλλο.
   - 3ο επίπεδο: μεγαλύτερα και σκούρα γράμματα (ήταν text-xs, γκρι 400). */
.device-elements-mobile .header-element-menu-button button > span { display: none !important; }
[id^="mb-"][id$="-panel"] .submenu-toggle {
    width: 1.75rem !important;
    height: 1.75rem !important;
    margin: 0 0 0 0.5rem !important;
}
[id^="mb-"][id$="-panel"] .submenu-toggle svg { width: 0.85rem !important; height: 0.85rem !important; }
/* Όλα τα επίπεδα με μαύρα γράμματα· 2ο και 3ο λίγο μεγαλύτερα. Το επίπεδο φαίνεται
   από τις κλάσεις του core menu_item: 1ο = text-sm font-medium, 2ο = text-sm,
   3ο+ = text-xs. */
[id^="mb-"][id$="-panel"] a.menu-link.text-sm.font-medium { color: #111827 !important; }
[id^="mb-"][id$="-panel"] a.menu-link.text-sm:not(.font-medium) {
    font-size: 1rem !important;
    color: #111827 !important;
}
[id^="mb-"][id$="-panel"] a.menu-link.text-xs {
    font-size: 0.95rem !important;
    color: #111827 !important;
}

/* PDP brand card: logos are wide (e.g. 600x132) — wider box, contain, never crop. 2026-10-11 */
a.fs-pdp-brand .fs-pdp-brand-logo {
    width: 5.5rem; height: 2.75rem; overflow: visible; border-radius: 0.375rem;
}
a.fs-pdp-brand .fs-pdp-brand-logo img {
    display: block; width: auto; height: auto;
    max-width: 100%; max-height: 100%; object-fit: contain; object-position: center;
}

/* Πίνακες συστατικών (HTML προμηθευτή, με width% και πολλές στήλες): στο κινητό
   ξεχείλιζαν και έσπρωχναν όλη τη σελίδα δεξιά. Ο πίνακας κυλά οριζόντια μέσα στο
   panel. Το contain:inline-size μηδενίζει το εγγενές πλάτος του panel, ώστε ο
   πίνακας να μη φουσκώνει τη στήλη του grid που το περιέχει. */
.tb-product-acc { max-width: 100%; min-width: 0; }
.tb-product-acc .tb-acc-panel,
.tb-technical-specs {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    contain: inline-size;
}

/* «Προσθήκη στο καλάθι» χωρίς επιλεγμένη γεύση: το κουμπί είναι disabled, αλλά
   το χρώμα του θέματος το έδειχνε ενεργό. Θαμπό μέχρι να διαλέξει ο πελάτης. */
button.disabled\:cursor-not-allowed:disabled { opacity: .5 !important; pointer-events: none; }
/* Το disabled κουμπί έχει pointer-events:none (για να πιάνεται το κλικ και να βγαίνει
   «Παρακαλώ επιλέξτε…»), οπότε τον κέρσορα τον δίνει ο γονέας του — ίδιο μέγεθος. */
div:has(> button.disabled\:cursor-not-allowed:disabled) { cursor: pointer; }

/* --- 14. Σελίδα προϊόντος: τιμή προσφοράς ΔΙΠΛΑ στην κανονική, σε άλλο χρώμα (12/10/2026) ---
   Τρία διαφορετικά markup φτάνουν εδώ:
   (α) μεταβλητό, από τον server: #product-price-display > div.flex-col > .tb-price (νέα) + .line-through (παλιά)
   (β) μετά από επιλογή γεύσης (orange product-scripts): #product-price-display > .tb-price-sale (νέα) + .line-through (παλιά)
   (γ) απλό / πακέτο (orange product-price-simple): p.productPrice > .tb-price-sale (νέα) + .line-through (παλιά)
   Τα tb-price / tb-price-sale έχουν ΑΝΑΠΟΔΟ νόημα από markup σε markup· το μόνο κοινό
   σημάδι είναι ότι η παλιά τιμή έχει πάντα .line-through. Γι' αυτό τα selectors
   κρέμονται από εκεί. Οι κάρτες των λιστών δεν έχουν ούτε #product-price-display ούτε
   είναι μέσα στο .fs-pdp-info, άρα δεν αγγίζονται. */
:root {
    --fs-pdp-sale-color: #d0021b;
    --fs-pdp-was-color: #6b7280;
}

html body #product-price-display:has(> .line-through),
html body #product-price-display .flex-col:has(> .line-through),
html body .fs-pdp-info .productPrice:has(> .line-through) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    column-gap: 0.75rem;
    row-gap: 0.25rem;
}

/* Νέα τιμή: έντονη, πρώτη, σε κόκκινο που ξεχωρίζει από το πορτοκαλί του καταστήματος. */
html body #product-price-display:has(> .line-through) > :not(.line-through),
html body #product-price-display .flex-col:has(> .line-through) > :not(.line-through),
html body .fs-pdp-info .productPrice:has(> .line-through) > :not(.line-through) {
    font-size: 2.4rem !important;
    font-weight: 800 !important;
    font-style: normal !important;
    color: var(--fs-pdp-sale-color) !important;
    line-height: 1.1 !important;
    margin: 0 !important;
}

/* Παλιά τιμή: γκρι, διαγραμμένη, μικρότερη, δεξιά στην ίδια γραμμή. */
html body #product-price-display:has(> .line-through) > .line-through,
html body #product-price-display .flex-col:has(> .line-through) > .line-through,
html body .fs-pdp-info .productPrice:has(> .line-through) > .line-through {
    font-size: 1.35rem !important;
    font-weight: 500 !important;
    font-style: normal !important;
    color: var(--fs-pdp-was-color) !important;
    text-decoration-color: var(--fs-pdp-was-color);
    line-height: 1.1 !important;
    margin: 0 !important;
}

@media (max-width: 767.98px) {
    html body #product-price-display:has(> .line-through) > :not(.line-through),
    html body #product-price-display .flex-col:has(> .line-through) > :not(.line-through),
    html body .fs-pdp-info .productPrice:has(> .line-through) > :not(.line-through) {
        font-size: 2rem !important;
    }
    html body #product-price-display:has(> .line-through) > .line-through,
    html body #product-price-display .flex-col:has(> .line-through) > .line-through,
    html body .fs-pdp-info .productPrice:has(> .line-through) > .line-through {
        font-size: 1.15rem !important;
    }
}

/* ==== BEGIN checkout-mobile-fields (port chronoro ef86cc2, 2026-10-17) ====
   Στο ταμείο τα grids είναι `grid-cols-1 sm:grid-cols-6`, αλλά τα παιδιά έχουν ΑΝΕΥ ΟΡΟΥ
   `col-span-3/6`: στη μία στήλη του κινητού δημιουργούν άρρητες στήλες και τα πεδία
   βγαίνουν στενά/άνισα. Κάτω από το sm, κάθε πεδίο πιάνει όλη τη γραμμή. */
@media (max-width: 639.98px) {
    form[action="/checkout"] .grid > [class*="col-span-"] {
        grid-column: 1 / -1 !important;
    }
}
/* ==== END checkout-mobile-fields ==== */

/* ==== BEGIN flavour-select (σελίδα προϊόντος, 2026-10-17) ====
   Το πεδίο «Γεύση» έμοιαζε σχεδόν αόρατο στο κινητό. Αιτίες:
   (α) πραγματικό περίγραμμα δεν υπήρχε ποτέ (preflight: border-width 0) — μόνο
       εσωτερική σκιά, που το iOS Safari ΔΕΝ ζωγραφίζει σε select με appearance:auto·
   (β) το `#main-content .border-gray-300 { border-color: … !important }` (1,1,0)
       νικούσε το παλιό `html body #tb-var-select` (1,0,2) στο χρώμα περιγράμματος.
   Λύση: appearance:none + αληθινό border + δικό μας βελάκι, με selector (2,0,2)+. */
html body #tb-standalone-variations > span,
html body #product-variations-section > span {
    display: block !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: 0.5rem !important;
}
html body #tb-standalone-variations #tb-var-select,
html body #product-variations-section select:not([multiple]) {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    display: block !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 0.75rem 2.75rem 0.75rem 1rem !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    color: #111 !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.9rem center !important;
    background-size: 1.25rem 1.25rem !important;
    border: 2px solid #1a1a1a !important;
    border-radius: 0.6rem !important;
    box-shadow: none !important;
    cursor: pointer;
}
html body #tb-standalone-variations #tb-var-select:hover,
html body #product-variations-section select:not([multiple]):hover {
    border-color: #b74916 !important;
}
html body #tb-standalone-variations #tb-var-select:focus,
html body #tb-standalone-variations #tb-var-select:focus-visible,
html body #product-variations-section select:not([multiple]):focus,
html body #product-variations-section select:not([multiple]):focus-visible {
    border-color: #b74916 !important;
    box-shadow: 0 0 0 3px rgba(183, 73, 22, 0.35) !important;
    outline: none !important;
}
/* ==== END flavour-select ==== */

/* ==== BEGIN cart-mobile (σελίδα /cart, 2026-10-17) ====
   1. Badge έκπτωσης: το override.css δίνει στο .text-red-800 το --badge-text (#fff) αλλά
      ΔΕΝ ξαναχρωματίζει το .bg-red-100 → λευκό σε ροζ. Λύση: συμπαγές primary + λευκό bold.
   2. Γραμμή καλαθιού στο κινητό: η σειρά τιμής (τιμή + διαγραμμένη + badge) δεν τυλίγει και
      το .flex-1 γύρω της δεν έχει min-width:0 → σπρώχνει το κουμπί αφαίρεσης έξω από την
      κάρτα (overflow:hidden) = αόρατο. Λύση: wrap + min-width:0 + κάδος πάνω δεξιά, 44px.
   3. Βελάκι «Προϊόντα για να συμπληρώσετε…»: το :style του Alpine (string) ΑΝΤΙΚΑΘΙΣΤΑ το
      inline style του svg (width/height:20px) με "" → svg χωρίς διαστάσεις, που στο Safari
      καταρρέει σε 0 πλάτος = σκέτος κύκλος. Λύση: ρητές διαστάσεις + περιστροφή από aria-expanded. */

/* 1. Discount badge (όλα τα πλάτη) */
#main-content section.lg\:col-span-8 > div > .divide-y > div.p-6.group span.bg-red-100.text-red-800 {
    background-color: var(--color-primary, #b74916) !important;
    color: #fff !important;
    font-weight: 700 !important;
    white-space: nowrap;
}

/* 2. Γραμμή καλαθιού: κινητό */
@media (max-width: 639.98px) {
    #main-content section.lg\:col-span-8 > div > .divide-y > div.p-6.group {
        position: relative;
        padding: 1rem 0.75rem 1rem 1rem !important;
    }
    #main-content section.lg\:col-span-8 > div > .divide-y > div.p-6.group > .flex {
        gap: 0.875rem;
    }
    #main-content section.lg\:col-span-8 > div > .divide-y > div.p-6.group > .flex > * {
        margin: 0 !important;
    }
    #main-content section.lg\:col-span-8 > div > .divide-y > div.p-6.group > .flex > .flex-shrink-0 img {
        width: 80px !important;
        height: 80px !important;
    }
    #main-content section.lg\:col-span-8 > div > .divide-y > div.p-6.group .justify-between > .flex-1 {
        min-width: 0;
    }
    #main-content section.lg\:col-span-8 > div > .divide-y > div.p-6.group h3 {
        padding-right: 2.5rem;
        font-size: 1rem !important;
        line-height: 1.35 !important;
    }
    /* σειρές SKU/brand, τιμής, ποσότητας: τυλίγουν αντί να ξεχειλίζουν */
    #main-content section.lg\:col-span-8 > div > .divide-y > div.p-6.group .flex.items-center.space-x-4 {
        flex-wrap: wrap;
        gap: 0.375rem 0.625rem;
    }
    #main-content section.lg\:col-span-8 > div > .divide-y > div.p-6.group .flex.items-center.space-x-4 > * {
        margin: 0 !important;
    }
    #main-content section.lg\:col-span-8 > div > .divide-y > div.p-6.group .flex.items-center.space-x-4 > span.text-2xl {
        font-size: 1.375rem !important;
        line-height: 1.2 !important;
    }
    #main-content section.lg\:col-span-8 > div > .divide-y > div.p-6.group .flex.items-center.space-x-4 > span.text-lg.line-through {
        font-size: 0.9375rem !important;
    }
    #main-content section.lg\:col-span-8 > div > .divide-y > div.p-6.group span.bg-gray-100.rounded-full {
        white-space: nowrap;
    }
    /* κουμπί αφαίρεσης (ή λουκέτο συνδεδεμένου): πάνω δεξιά στη γραμμή */
    #main-content section.lg\:col-span-8 > div > .divide-y > div.p-6.group .justify-between > .ml-4 {
        position: absolute;
        top: 0.375rem;
        right: 0.375rem;
        margin: 0 !important;
        z-index: 2;
    }
}
/* κάδος: ορατός, 44px στόχος (και στο desktop, μόνο μεγαλύτερος στόχος) */
#main-content section.lg\:col-span-8 > div > .divide-y > div.p-6.group .js-remove-from-cart button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 !important;
    border-radius: 9999px !important;
    color: #374151 !important;
    background-color: #f3f4f6 !important;
}
#main-content section.lg\:col-span-8 > div > .divide-y > div.p-6.group .js-remove-from-cart button:hover,
#main-content section.lg\:col-span-8 > div > .divide-y > div.p-6.group .js-remove-from-cart button:focus-visible {
    color: #fff !important;
    background-color: #dc2626 !important;
}
#main-content section.lg\:col-span-8 > div > .divide-y > div.p-6.group .js-remove-from-cart button svg {
    width: 22px !important;
    height: 22px !important;
}

/* 3. Βελάκι προτάσεων (κινητό + desktop) */
[wire\:snapshot*="cart-reward-nudge"] button[aria-expanded] {
    min-height: 44px !important;
}
[wire\:snapshot*="cart-reward-nudge"] button[aria-expanded] > span[aria-hidden] {
    width: 36px !important;
    height: 36px !important;
    background: var(--color-primary, #b74916) !important;
    color: #fff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
[wire\:snapshot*="cart-reward-nudge"] button[aria-expanded] > span[aria-hidden] > svg {
    display: block !important;
    width: 26px !important;
    height: 26px !important;
    flex: none !important;
    transition: transform 0.2s ease;
    transform: rotate(0deg);
}
[wire\:snapshot*="cart-reward-nudge"] button[aria-expanded] > span[aria-hidden] > svg path {
    stroke: currentColor;
    stroke-width: 1.25;
    stroke-linejoin: round;
}
[wire\:snapshot*="cart-reward-nudge"] button[aria-expanded="true"] > span[aria-hidden] > svg {
    transform: rotate(180deg) !important;
}
/* ==== END cart-mobile ==== */

/* Μηνύματα επιτυχίας (π.χ. «Ελέγξτε το email σας»): το override.css βάφει κάθε .bg-green-50 με το
   πορτοκαλί του badge → πράσινο κείμενο πάνω σε πορτοκαλί. Ήπιο πράσινο φόντο, σκούρο κείμενο. (22/10/2026) */
#main-content .bg-green-50.border-green-500 { background-color: #f0fdf4 !important; border-left-color: #16a34a !important; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
#main-content .bg-green-50.border-green-500 .text-green-800 { color: #14532d !important; }
#main-content .bg-green-50.border-green-500 .text-green-700 { color: #166534 !important; }
#main-content .bg-green-50.border-green-500 svg { color: #16a34a !important; }

/* Κάρτα προϊόντος: τίτλος έως 2 γραμμές (ThemeBuilder titleLines=2) με σταθερό ύψος 2 γραμμών,
   ώστε οι τιμές να μένουν στην ίδια ευθεία ανεξάρτητα από το μήκος του τίτλου. (22/10/2026) */
.pc-dynamic h3 { min-height: 2.8em; }