/* =============================================================================
   IOptic2026 — Redesign skin
   -----------------------------------------------------------------------------
   Layered on top of responsive.css / IOpticMini2027.rtl.css / IOptic2024.rtl.css.
   Registered LAST in Views/Shared/Head.cshtml so it wins on equal specificity.

   Reference: https://storage.googleapis.com/ioptic-qlikpics/branches/iopticnewd.html

   RULES OF ENGAGEMENT
   - Styling only. No markup contract is changed here.
   - !important is used ONLY to beat inline style="" attributes that exist in
     the Razor views (each occurrence is commented with the reason).
   - The glasses-wizard and lens plugin sheets load BEFORE this one; nothing
     here blanket-overrides .product-item internals they depend on.
   ========================================================================== */

/* =============================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
    --color-primary: #84754e; /* headings, prices, icons */
    --color-primary-dark: #5c4f34; /* hover, text on gold */
    --color-accent: #b8a67a; /* CTAs, badges */
    --color-accent-dark: #9c8a5e; /* CTA hover, gradient stops */
    --color-bg: #ffffff;
    --color-bg-soft: #faf8f2; /* section + input backgrounds */
    --color-line: #ece7d6; /* all borders */
    --color-text: #2d2d2d;
    --color-text-muted: #888888;
    --color-white: #ffffff;
    --color-ink: #1a1a1a; /* announcement bar */
    --brand-gradient-diag: linear-gradient(135deg, #8f7e54 0%, #e0c88c 50%, #8f7e54 100%);
    --gold-bar: linear-gradient(135deg, var(--color-accent-dark) 0%, var(--color-accent) 50%, var(--color-accent-dark) 100%);
    --radius: 14px;
    --radius-sm: 8px;
    --shadow-card: 0 14px 30px rgba(27, 58, 75, .10);
    --shadow-gold: 0 10px 22px rgba(132, 117, 78, .14);
    --container-wide: 1680px;
    --font-main: 'Rubik', Arial, Helvetica, sans-serif;

    /* MOBILE HEADER BAND — one source of truth (see section 12).
       Below 992px both the announcement strip and the header bar are `position: fixed`,
       so nothing further down the page can discover their height on its own: every
       offset has to be told it, and three hand-copied numbers had already drifted apart
       once. Everything that depends on the band derives from these three.

       --m-band-gap is clearance, and it is not decoration: the bar carries
       `box-shadow: 0 2px 8px`, which paints roughly 10px past its own box while
       occupying no layout space. With the spacer set to exactly the band height, the
       first thing on the page started precisely where the bar ended and sat under that
       shadow — which is the hero banner tucking beneath the header. */
    --m-topbar-h: 34px;
    --m-bar-h: 70px;
    --m-band-gap: 14px;
}

/* =============================================================================
   2. BASE / TYPOGRAPHY
   ========================================================================== */
body {
    font-family: var(--font-main);
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
button, input, select, textarea,
.btn, .form-control {
    font-family: var(--font-main);
}

/* the mega-menu sheet sets its own stack on these */
.wsmenu, .wsmenu-list, .wsmenu-list a, .wsmegamenu, .wsmobileheader {
    font-family: var(--font-main);
}

a {
    color: inherit;
}

a:hover {
    color: var(--color-primary);
}

/* Wide container — scoped to the shell + homepage so inner pages keep their
   current measure (see plan: "shell + homepage first"). */
@media (min-width: 1400px) {
    #header > .container,
    #masthead > .container,
    .footer > .container,
    .html-home-page .content > .container,
    .html-home-page #main > .container {
        max-width: var(--container-wide);
    }
}

/* Shared section heading — matches the mockup's .section-title */
.section-title,
.recomended-products > .title h2,
.bestsellers-products > .title h2,
.related-products-grid > .title h2,
.also-purchased-products-grid > .title h2,
.bannerrow-public .banertitle,
.home-page .title h2 {
    font-size: 26px;
    font-weight: 700;
    text-align: center;
    color: var(--color-primary);
    margin: 0 0 30px;
    letter-spacing: .2px;
}

/* =============================================================================
   3. ANNOUNCEMENT BAR  (Views/Shared/_TopBar.cshtml)
   ========================================================================== */
.ioptic-topbar {
    background: var(--color-ink);
    color: var(--color-white);
    font-size: 13px;
    line-height: 1.4;
    padding: 9px 12px;
    letter-spacing: .2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
}

.ioptic-topbar svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--color-accent);
}

.ioptic-topbar strong,
.ioptic-topbar b {
    color: var(--color-accent);
    font-weight: 700;
}

@media (max-width: 560px) {
    .ioptic-topbar {
        font-size: 11.5px;
        padding: 7px 10px;
    }

    .ioptic-topbar svg {
        display: none;
    }
}

/* =============================================================================
   4. HEADER  (Views/Shared/_Header.cshtml)
   Layout: logo | search | actions   (RTL: logo sits right)
   ========================================================================== */
#header {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-line);
}

/* The mockup insets .header-row by 24px (its .container padding is overridden by the
   row's own `padding:16px 24px`). Bootstrap's .container already contributes 12px
   here, so 12px more lands on the same 24px edge without re-padding the container —
   which also wraps the HeaderMiddle/HeaderAfter widget zones. */
#header .header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 12px;
}

#header .header-brand {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* IOptic2024.rtl.css gives .header-logo `padding:5px 0` and `min-height:65px`, which
   made the 44px logo occupy a 65px box and pushed the row to 97px instead of the
   mockup's 76px (16 + 44 + 16). Zero both. */
#header .header-logo {
    margin: 0;
    padding: 0;
    min-height: 0;
    font-size: 0;
    line-height: 0;
    display: flex;
    align-items: center;
}

/* display:block — as an inline image it sat on a baseline and added descender space
   below the logo, which also inflated the row. */
#header .header-logo img {
    display: block;
    height: 44px;
    width: auto;
    object-fit: contain;
    padding: 0;
}

#header .header-actions-col {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
}

/* the .navbar wrapper kept for the Bootstrap cart dropdown */
#header .header-actions-col > .navbar {
    flex: 1;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    min-height: 0;
}

/* ----- admin quick-link bar (signed-in admins only) -----
   Anchored to .navbar (Bootstrap sets position:relative on it), which is the
   header-actions wrapper. `right` puts it at the logo end of that wrapper — the
   requested position. `left:auto` is required because the previous inline style
   used left, and both would otherwise stretch the box across the wrapper.
   The wrapper renders empty for non-admins, so :empty collapses it. */
.admin-header-bar {
    position: absolute;
    top: 3px;
    right: 10px;
    left: auto;
    z-index: 1000;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    box-shadow: var(--shadow-gold);
}

.admin-header-bar:empty {
    display: none;
}

.admin-header-bar a,
.admin-header-bar .admin-header-links a {
    display: inline-block;
    padding: 10px;
    color: var(--color-white);
    white-space: nowrap;
}

.admin-header-bar a:hover {
    color: var(--color-white);
    text-decoration: underline;
}

/* ----- header links row ----- */
.header-links {
    width: 100%;
}

.header-links > ul.nav {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 22px; /* mockup .header-actions gap */
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    float: none;
}

.header-links > ul.nav > li {
    float: none;
}

/* empty spacer <li>s in the view */
.header-links > ul.nav > li:empty {
    display: none;
}

/* .cart-small-screen carries `d-sm-block d-md-none` on its <a>, not on the <li>, so
   above 768px the link vanished but the list item stayed in the flex row as a
   zero-width item — consuming one full 22px gap and shifting the whole action group
   inward. Hide the item itself instead. */
@media (min-width: 768px) {
    .header-links > ul.nav > li.cart-small-screen {
        display: none;
    }
}

/* ACTION ORDER — the mockup reads (RTL, right to left) סניפים · עגלה · איזור אישי.
   The view emits branches, then account/login, then #topcartlink, so cart and
   account arrive swapped. Reorder with flex `order` rather than moving markup,
   which would disturb the cart dropdown and the AjaxCart selectors.
   Anything not listed (tax/currency/language selectors, private messages) keeps
   the default 4 and trails the group. */
.header-links > ul.nav > li {
    order: 4;
}

.header-links > ul.nav > li.search-div {
    order: 1;
}

.header-links > ul.nav > li.ico-branches-item {
    order: 2;
}

.header-links > ul.nav > li#topcartlink {
    order: 3;
}

/* icon-above-label, DIRECT children only — the flyout-cart dropdown lives deeper
   inside #topcartlink and must keep its own layout.
   padding is 0: the mockup's .header-action has none, and the 22px flex `gap` above
   is the whole spacing between actions. The 4px/8px that used to sit here widened
   each action by 16px and pushed the group 48px off the mockup's position. */
.header-links > ul.nav > li > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 0;
    font-size: 11.5px;
    line-height: 1.05; /* mockup measures 12px for the label line under a 22px icon */
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
    position: relative;
    transition: color .15s ease;
}

.header-links > ul.nav > li > a:hover {
    color: var(--color-primary);
    text-decoration: none;
}

/* the action glyphs are the mockup's inline SVGs (see HeaderLinks/Default.cshtml) */
.header-links > ul.nav > li > a > svg {
    display: block;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--color-primary);
}

/* kept for any action still rendered as a linearicons character (widget zones,
   selector components) so it lines up with the SVG ones */
.header-links > ul.nav > li > a > span:first-child:not(.action-label):not(.number) {
    font-size: 22px !important; /* beats inline style="font-size:20px" in HeaderLinks */
    line-height: 1;
    color: var(--color-primary);
}

.header-links > ul.nav > li > .searchbtn i,
.header-links > ul.nav > li > a i {
    font-size: 18px;
    margin: 0;
    color: var(--color-primary);
}

/* explicit reset so nothing above leaks into the flyout cart */
.header-links .dropdown-menu a {
    display: block;
    flex-direction: row;
    font-size: inherit;
    padding: revert;
}

/* ----- search -----
   Desktop only. Below 768px responsive.css turns .search-box into an absolutely
   positioned overlay toggled by .searchbtn/.search-display — that behaviour is
   left completely alone. */
@media (min-width: 768px) {

/* auto margins on both inline sides absorb the free space either side of the
   search, so the pill sits centred and every action after it is pushed to the
   far (left) edge as one tight group — the mockup's space-between look. */
.header-links > ul.nav > li.search-div {
    flex: 0 1 480px;
    max-width: 480px;
    min-width: 0;
    margin-inline: auto;
    position: static;
}

/* position:relative makes .search-box the offset parent for the jQuery UI
   autocomplete panel (it is appended here via appendTo:'.search-box'), so the panel
   can be pinned flush under the pill instead of being placed against some distant
   positioned ancestor. */
.search-box {
    max-width: none;
    margin-top: 0;
    width: 100%;
    position: relative;
}

#small-search-box-form .form-group.input-group {
    display: flex;
    align-items: center;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    border-radius: 999px;
    padding: 9px 16px; /* mockup .header-search */
    gap: 8px;
    margin: 0;
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* In the mockup the magnifier leads the pill (right edge in RTL). SearchBox emits
   the input first and the submit button last, so it would land on the left. Flip
   with `order` — moving it in markup would break the input-group/autocomplete. */
#small-search-box-form .input-group-append {
    order: -1;
}

/* WCAG 2.4.7 Focus Visible / 2.4.11 Focus Appearance.
   The input sets `outline: none` (below), so the pill itself must carry the
   indicator. The previous ring — rgba(184,166,122,.18) — measured 1.24:1 against
   the cream fill, i.e. effectively invisible to a keyboard user. --color-primary
   gives 4.53:1 on the white header and 4.27:1 on the cream fill, both clearing
   the 3:1 minimum. */
#small-search-box-form .form-group.input-group:focus-within {
    border-color: var(--color-primary);
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: none;
}

/* Mirrors the mockup's `.header-search input` exactly: no explicit height and no
   padding of its own — the pill's own 9px/16px padding plus the 8px gap set the
   shape. An explicit height here made the pill ~54px instead of the mockup's ~41px,
   and extra input padding double-spaced the text away from the magnifier. */
.search-box .form-control,
#small-searchterms {
    flex: 1;
    width: auto !important; /* beats .search-box .input-group > .form-control width:120px !important */
    min-width: 0;
    height: auto;
    line-height: normal;
    border: none;
    border-bottom: none;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    font-size: 14px;
    font-family: inherit;
    color: var(--color-text);
    /* the mockup's input keeps the UA default 1px/2px, which is what makes the pill
       38px tall rather than 36px; anything larger double-spaces it off the magnifier */
    padding: 1px 2px;
    margin: 0;
    /* IOptic2024.rtl.css centres EVERY input (`input, select, textarea, .form-control
       { text-align:center }`), which floated the placeholder in the middle of the pill.
       The mockup starts it flush against the magnifier. */
    text-align: start;
}

.search-box .form-control:focus,
#small-searchterms:focus {
    border: none;
    box-shadow: none;
    outline: none;
    background: transparent;
}

#small-searchterms::placeholder {
    color: var(--color-text-muted);
}

.search-box .input-group-append {
    flex: 0 0 auto;
    flex-shrink: 0; /* mockup .header-search svg */
    display: flex;
    align-items: center;
}

/* height/width/position are reset because IOptic2024.rtl.css and responsive.css both
   give .search-icon a 30px box (and responsive.css absolutely positions it for the
   mobile overlay). Inside the desktop pill it is a plain 18px flex item. */
.search-icon {
    background: none;
    border: none;
    border-radius: 999px;
    color: var(--color-text-muted);
    font-size: 18px;
    line-height: 1;
    padding: 0;
    width: 18px;
    height: 18px;
    position: static;
    transition: color .15s ease;
}

.search-icon:hover {
    color: var(--color-accent-dark);
}

} /* end desktop-only search block */

/* the magnifier SVG, at every width — the mobile overlay renders the same button */
.search-icon > svg {
    display: block;
    width: 18px;
    height: 18px;
}

/* =============================================================================
   4b. SEARCH AUTOCOMPLETE  (jQuery UI, appended into .search-box)
   -----------------------------------------------------------------------------
   The panel is styled at ALL widths — the mobile header renders its own SearchBox
   and the dropdown was unstyled there too.

   jQuery UI sets `width`, `top` and `left` inline on the panel from the input's
   measurements, which lands it off-centre and far too wide inside our flex pill.
   Those three are the only things here that need !important — everything else is
   just out-ranking the bundled jquery-ui.min.css.
   ========================================================================== */
.search-box .ui-autocomplete {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: auto !important;
    top: 100% !important;
    margin-top: 6px;
    box-sizing: border-box;
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    background: var(--color-white);
    padding: 6px;
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1100;
    font-family: var(--font-main);
}

.search-box .ui-autocomplete .ui-menu-item {
    list-style: none;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    width: auto;
}

.search-box .ui-autocomplete .ui-menu-item a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-text);
    text-align: start;
    text-decoration: none;
    transition: background .12s ease, color .12s ease;
}

.search-box .ui-autocomplete .ui-menu-item a img {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    object-fit: contain;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    padding: 2px;
}

.search-box .ui-autocomplete .ui-menu-item a span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* jquery-ui.min.css paints the focused row #007fff with a #003eff border and a
   -1px margin. Beat all of it — these selectors out-specify
   `.ui-widget-content .ui-state-active` and this sheet loads later. */
.search-box .ui-autocomplete .ui-menu-item a.ui-state-active,
.search-box .ui-autocomplete .ui-menu-item a.ui-state-focus,
.search-box .ui-autocomplete .ui-menu-item a.ui-state-hover,
.search-box .ui-autocomplete .ui-menu-item a:hover,
.search-box .ui-autocomplete .ui-menu-item a:focus {
    margin: 0;
    border: none;
    background: var(--color-bg-soft);
    color: var(--color-primary);
    font-weight: 600;
}

/* jQuery UI sets .ui-state-active as you arrow through the list, so this IS the
   keyboard focus indicator. The tint alone is 1.06:1 against the white panel —
   far under 3:1 — so the row needs a real outline. Inset offset keeps it from
   spilling outside the panel's rounded edge. */
.search-box .ui-autocomplete .ui-menu-item a.ui-state-active,
.search-box .ui-autocomplete .ui-menu-item a.ui-state-focus,
.search-box .ui-autocomplete .ui-menu-item a:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

/* the "see all results" row appended in SearchBox/Default.cshtml */
.search-box .ui-autocomplete .search-all-link {
    border-top: 1px solid var(--color-line);
    margin-top: 6px;
    padding-top: 6px;
}

.search-box .ui-autocomplete .search-all-link a {
    justify-content: center;
    font-weight: 700;
    color: var(--color-primary);
}

.search-box .ui-autocomplete .search-all-link a:hover {
    background: var(--color-accent);
    color: var(--color-primary-dark);
}

/* the mobile header's search panel is not inside the desktop pill */
.search-box-mobile .ui-autocomplete {
    width: 100% !important;
    left: 0 !important;
    right: auto !important;
}

/* ----- cart ----- */
#topcartlink > a {
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* Badge geometry copied from the mockup's .cart-badge: a 16px circle whose top-left
   corner overhangs the icon box (top:-4px / left:-8px, i.e. outwards in RTL).
   Scoped to the direct child of #topcartlink so the .cart-small-screen link, which
   shows its quantity inline next to a text label, is not turned into a badge.
   The bracketed "(0)" that the resource supplies is trimmed to "0" by the script in
   HeaderLinks/Default.cshtml — three glyphs never fit a 16px circle. */
#topcartlink > a > .number {
    position: absolute;
    top: -4px;
    /* The mockup writes `left:-8px`, which lands 8px outside the ICON only because its
       <a> is barely wider than the icon. Our label is localized and can be much wider,
       so anchor to the (centred) icon instead — 50% - 11px is the icon's left edge,
       minus the same 8px overhang — and the badge stays glued at any label width. */
    left: calc(50% - 19px);
    right: auto;
    background: var(--color-accent);
    color: var(--color-white);
    font-size: 10px;
    font-weight: 700;
    width: 16px;
    min-width: 16px;
    height: 16px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

#topcartlink .dropdown-menu {
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 8px;
}

@media (max-width: 980px) {
    .header-links > ul.nav > li.search-div {
        max-width: none;
    }
}

/* =============================================================================
   5. CATEGORY NAV BAR  (Components/TopMenu — .wsmenu / webslidemenu)
   ========================================================================== */
.masthead > .container {
    padding-left: 0;
    padding-right: 0;
}

/* ===== DESKTOP BAR ONLY =====================================================
   webslidemenu switches to the off-canvas drawer at `max-width: 991px`, where it
   sets .wsmenu-list to `background:#fff` and the links to `color:#666` with
   12px vertical padding and a 1px bottom rule.

   Everything below therefore MUST stay inside `min-width: 992px`. Unscoped, the
   gold-bar styling leaked into the drawer: white text on the white panel (rows
   looked blank), `padding: 0 16px` collapsed the row height, and `border: none`
   removed the item separators.
   ========================================================================== */
@media (min-width: 992px) {

.masthead {
    background: var(--gold-bar);
}

.wsmenu {
    background: transparent;
}

/* LAYOUT IS DELIBERATELY NOT TOUCHED HERE.
   webslidemenu builds the bar as display:table / table-cell, and the mega panel is
   `position:absolute; width:100%; left:0; top:50px` resolved against .wsmenu
   (position:relative). Three things therefore must NOT be overridden:
     1. `position` on .wsmenu-list > li — giving the li a position re-anchors the
        panel to that one narrow cell and collapses the full-width megamenu.
     2. `display` on .wsmenu-list / > li — switching to flex blockifies the
        table-cells and breaks the even distribution across the bar.
     3. `line-height:50px` on > a — the panel's top:50px offset is measured from it,
        so adding vertical padding pushes the bar taller than the panel expects and
        the panel overlaps the menu.
   Everything below is colour, weight and size only. */
.wsmenu > .wsmenu-list {
    background: transparent;
    width:80%;
}

.wsmenu > .wsmenu-list > li > a {
    padding: 0 16px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--color-white);
    background: transparent;
    border: none;
    transition: background .15s ease, color .15s ease;
}

/* the base sheet re-pads the anchor on hover (0 3px -> 0 6px), which makes the bar
   jitter. Pin the same padding as the resting state. */
.wsmenu > .wsmenu-list > li > a:hover,
.wsmenu > .wsmenu-list > li:hover > a,
.wsmenu > .wsmenu-list > li > a:focus {
    padding: 0 16px;
    background: rgba(255, 255, 255, .14);
    color: var(--color-white);
}

.wsmenu > .wsmenu-list > li > a > .arrow:after,
.wsmenu > .wsmenu-list > li > a i {
    color: rgba(255, 255, 255, .75);
}

/* ----- mega panels ----- */
.wsmenu > .wsmenu-list > li > .wsmegamenu,
.wsmenu > .wsmenu-list > li > ul.sub-menu {
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow-card);
}

.wsmenu > .wsmenu-list > li > .wsmegamenu .title,
.wsmenu > .wsmenu-list > li > .wsmegamenu h4 {
    color: var(--color-primary);
    font-weight: 700;
    font-size: 14.5px;
}

.wsmenu > .wsmenu-list > li > .wsmegamenu .link-list li a,
.wsmenu > .wsmenu-list > li > ul.sub-menu > li > a {
    color: var(--color-text);
    font-size: 13.5px;
    border-bottom: 1px solid transparent;
    transition: color .15s ease, background .15s ease;
}

.wsmenu > .wsmenu-list > li > .wsmegamenu .link-list li a:hover,
.wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover {
    color: var(--color-primary);
    background: var(--color-bg-soft);
}

/* NOTE: no grayscale filter on .wsmegamenu img. The mockup's desaturated logo
   treatment belongs to the homepage brand strip (.brand-tile img) only — applying
   it here would also wash out category thumbnails in the menu, which the menu
   never did before. */

} /* end desktop-only nav bar block (min-width: 992px) */

/* SUBMENU CHEVRON  (TopMenu/Default.cshtml — .nav-caret)
   Mirrors the mockup's `.main-nav > li > a svg { width:11px; height:11px; opacity:.75 }`
   on a `gap:6px` flex row. The bar here cannot be flexed — webslidemenu lays it out as
   display:table with `line-height:50px` on the anchor, and the mega panel's `top:50px`
   offset is measured from that (see the layout note above) — so the chevron stays inline
   and the 6px arrives as a logical margin on the label side. -0.5px puts the 11px box
   dead centre in the 50px row, which is where align-items:center puts it in the mockup.

   Deliberately OUTSIDE the min-width:992px block, and `color:inherit` rather than white:
   the same anchors become the off-canvas drawer rows below 992px, where webslidemenu
   paints them #666 on white. A hard-coded white chevron would vanish there. */
.wsmenu > .wsmenu-list > li > a > .nav-caret {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-inline-start: 6px;
    vertical-align: -0.5px;
    opacity: .75;
    color: inherit;
}

/* ----- mobile header bar (below 992px) -------------------------------------
   Rebuilt to mirror the reference page's header row: brand at the start edge,
   the same branches / cart / account actions at the other end, drawn with the
   identical 22px gold outline icons and 11.5px labels the desktop row uses.
   The drawer toggle and the search toggle — which the reference page has no
   counterpart for — are grouped after the actions at the far end.

   webslidemenu-rtl.css sets .wsmobileheader to `height:54px; text-align:center`
   and pins .wsanimated-arrow with `position:absolute; right:0`; the labels need
   a taller bar and the toggle has to become a flow item, so both are reset here.
   Height comes from --m-bar-h (section 1), which is also what the in-flow spacer under
   the fixed band is calculated from — so the bar and the space reserved for it can no
   longer drift apart.
   -------------------------------------------------------------------------- */
.wsmobileheader {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-line);
    box-shadow: 0 2px 8px rgba(132, 117, 78, .08);
    height: var(--m-bar-h);
    text-align: start;
}

/* Three-column grid, NOT flex + space-between. With space-between the free space is
   split around the brand, so the logo's position depended on how wide the two side
   clusters happened to be — the hamburger is ~30px, the labelled actions ~150px, so
   the logo sat off-centre and moved again whenever a label or the cart badge changed
   width. `minmax(0, 1fr)` on both side columns makes them exactly equal whatever they
   contain, which puts the auto-width centre column dead centre by construction.
   The side clusters still sit hard against the two edges, exactly as before. */
.wsmobileheader .mobile-header-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    height: var(--m-bar-h);
    padding: 0 16px;
}

.wsmobileheader .mobile-brand {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    min-width: 0;
    /* no margin: any margin here is inside the centred column and would offset the
       logo by half of it. The old `margin-right: 20px` (plus 50px on the image) was
       hand-tuned to fake centring at one specific width. */
    margin: 0;
    justify-self: center;
}

/* webslidemenu-rtl.css pushes this image around with `margin-right:25%` and a
   120px cap for the old table cell — neither applies to a flex row. */
.wsmobileheader .mobile-brand img,
.wsmobileheader .mobile-brand .logo-container {
    display: block;
    /* the reference keeps its 44px logo at every width, but it also carries only three
       actions and no drawer/search toggle; 38px is the largest that still fits all five
       controls plus the brand on a 390px screen */
    height: 48px;
    width: auto;
    /* max-width:100% so a long logo shrinks inside the centre column instead of
       pushing into the side clusters on the narrowest screens */
    max-width: 100%;
    margin: 0;
    object-fit: contain;
}

.wsmobileheader .mobile-actions,
.wsmobileheader .mobile-utils {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* keep each cluster pinned to its own outer edge within its grid column */
.wsmobileheader .mobile-utils {
    justify-self: start;
}

.wsmobileheader .mobile-actions {
    justify-self: end;
}

.wsmobileheader .mobile-actions {
    gap: 5px; /* mockup uses 22px; 18 keeps four labelled icons on a 390px screen */
}

.wsmobileheader .mobile-utils {
    gap: 16px;
}

/* identical to the desktop .header-links action, minus the label wrapping */
.wsmobileheader .mobile-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    position: relative;
    font-size: 10px;
    line-height: 1.05;
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
    text-decoration: none;
}

.wsmobileheader .mobile-action > svg {
    display: block;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--color-primary);
}

/* same badge as the desktop cart: a 16px circle overhanging the icon's top-left */
.wsmobileheader .mobile-action-cart > .number {
    position: absolute;
    top: -4px;
    left: calc(50% - 19px);
    right: auto;
    width: 16px;
    min-width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    float: none;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-white);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The toggle was `position:absolute; right:0; top:0` with a 28px top padding that
   positioned its bars. As a flex item it needs an explicit box, and the bars —
   which are absolutely positioned with auto offsets — need explicit ones too, or
   the ::before at top:-7px would sit outside the anchor. The .wsactive X animation
   is untouched: it only re-offsets ::before/::after relative to this same span. */
.wsmobileheader .wsanimated-arrow {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    width: 23px;
    height: 22px;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    align-self: center;
}

.wsmobileheader .wsanimated-arrow span {
    top: 10px;
    right: 0;
    left: auto;
}

/* OPEN-DRAWER STATE.
   webslidemenu slides the whole bar 340px aside while the drawer is open, so only the
   bar's start edge stays on screen. The toggle used to be `position:absolute; right:0`
   and rode that edge; as a flow item at the far end it would slide off and the X — the
   drawer's close button — would be unreachable (only the .overlapblackbg tap would
   remain). Put it back on the start edge for this state and clear the brand and the
   actions out from under it. */
.wsactive .wsmobileheader .mobile-brand,
.wsactive .wsmobileheader .mobile-actions {
    opacity: 0;
    pointer-events: none;
}

.wsactive .wsmobileheader .wsanimated-arrow {
    position: absolute;
    top: 24px;
    inset-inline-start: 16px;
    inset-inline-end: auto;
}

/* the slide-down search panel sits under the bar, full width */
.wsmobileheader .search-box-mobile {
    width: 100%;
    padding: 0 16px 12px;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-line);
}

@media (max-width: 400px) {
    .wsmobileheader .mobile-header-row {
        gap: 10px;
        padding: 0 12px;
    }

    .wsmobileheader .mobile-actions {
        gap: 12px;
    }

    .wsmobileheader .mobile-utils {
        gap: 12px;
    }

    .wsmobileheader .mobile-brand img,
    .wsmobileheader .mobile-brand .logo-container {
        height: 30px;
    }
}

/* ----- what the mobile bar replaces --------------------------------------- */
@media (max-width: 991px) {
    /* Below 992px .wsmobileheader IS the header. The desktop row kept rendering behind
       it between 768 and 991 — responsive.css only hides .topbar .header-links at
       <=767 — so two icon rows overlapped there. */
    #header .header-row {
        display: none;
    }

    /* The announcement strip is real flow content that the fixed bar used to cover.
       The reference keeps it visible above the header at every width and sticks the
       two together, so give the strip a known height, pin it, and drop the bar below
       it. clamp() keeps the sentence on one line down to ~320px without the height
       ever changing, which is what the offsets below depend on.

       FIXED, not sticky — this is the fix for banners appearing through the header on
       mobile. webslidemenu-rtl.css:565-574 moves the whole scroll model off the
       viewport at this breakpoint:

           html { overflow: hidden; height: 100% }
           body { height: 100%; overflow-y: auto; overflow-x: hidden }

       so BODY is the scroller. `position: fixed` still resolves against the viewport,
       which is why .wsmobileheader below stays put — but `position: sticky` resolves
       against that body scrollport, and in this configuration (a sticky child of the
       scroll container itself, inside an overflow-hidden html) it does not hold. The
       strip scrolled away with the page while the bar stayed pinned at top:34px,
       leaving a 34px window above the bar with nothing behind it. Page content — the
       hero banner, being the first thing in the document — showed straight through
       it, which reads exactly as "the banner is behind the header".

       Both bands are viewport-pinned now, so no gap can open between them at any
       scroll position. */
    /* Geometry comes from the --m-* tokens in section 1; nothing here hard-codes it. */
    .ioptic-topbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10003;
        height: var(--m-topbar-h);
        padding: 0 10px;
        font-size: clamp(9.5px, 2.9vw, 12px);
        white-space: nowrap;
        overflow: hidden;
    }

    .wsmobileheader {
        top: var(--m-topbar-h);
    }

    /* webslidemenu-rtl.css collapses #header to 50px so the fixed bar has something to
       sit over. Both bars are out of flow, so this spacer carries the whole band plus
       the shadow clearance: 34 + 70 + 14 = 118px. */
    #header {
        height: calc(var(--m-topbar-h) + var(--m-bar-h) + var(--m-band-gap));
    }
}

/* DRAWER TOP OFFSET.
   .wsactive .wsmenu is `position:absolute; top:0` (webslidemenu's iOS-15 fix) and
   no ancestor is positioned, so it anchors to the document top. .wsmobileheader is
   `position:fixed; top:0; height:54px; z-index:10002` and paints over it, but
   .wsmenu-list carries no top offset in webslidemenu or in any theme sheet.

   The offset itself now lives in section 16 with the rest of the drawer, and is 34px
   rather than the full 104px band: the mobile bar slides aside while the drawer is
   open, so reserving its height only opened a blank gap where the drawer's own header
   belongs. Only the strip is still overhead. */
@media (max-width: 991px) {
    /* the drawer scrolls internally; let the last row clear the viewport bottom
       without the 110px iOS-only pad leaving a gap on other browsers */
    .wsmenu > .wsmenu-list > li:last-child {
        padding-bottom: 24px;
    }
}

.wsmobileheader .wsanimated-arrow span,
.wsmobileheader .wsanimated-arrow span:before,
.wsmobileheader .wsanimated-arrow span:after {
    background: var(--color-primary);
}

.wsmobileheader a,
.wsmobileheader i {
    color: var(--color-primary);
}

.wsmobileheader .cart-qty,
.wsmobileheader .number {
    background: var(--color-accent);
    color: var(--color-white);
}

/* =============================================================================
   6. SECTION RHYTHM  (homepage widget zones)
   ========================================================================== */

.html-home-page .recommended-product-content > div {
    padding: 48px 0;
}

.html-home-page .bannerrow-public {
    padding: 10px 0;
}

.html-home-page .bannerrow-public:first-child {
    padding-top: 0; /* hero banner is full-bleed, like the mockup */
}

/* Banners are full-bleed artwork — no corner rounding. The images are supplied
   pre-composed by the merchant, so rounding them clipped the artwork. */
.bannerrow-public .bannerrow-image-src,
.bannerrow-public .img-responsive {
    border-radius: 0;
    width: 100%;
    height: auto;
}

/* DO NOT give .bannerspacer a height. The class is overloaded in the BannerRows
   plugin: in Col1/Col2/Col3/Col4/Col6 it is the WRAPPER around the banner image
   (`<div class="bannerspacer"><a><picture><img class="d-block w-100">`), and only
   in Trend/FlexTopics is it a real spacer (`<div class="bannerspacer">&nbsp;</div>`).
   A fixed height here collapsed every banner, including the homepage hero carousel.
   The spacer form sizes itself from the &nbsp; line box, which is what it did
   before this stylesheet existed. */

/* slick arrows in brand palette */
.slick-prev:before,
.slick-next:before {
    color: var(--color-primary);
    opacity: .85;
}

.slick-dots li.slick-active button:before {
    color: var(--color-accent);
}

/* =============================================================================
   7. PRODUCT CARD  (_ProductBox / _ProductBoxClean / _ProductBoxlens)
   ========================================================================== */
.product-item {
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-white);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: box-shadow .15s ease, transform .15s ease;
    flex-direction: column;
    align-content: center;
    justify-content: center;
}

.product-item:hover {
    box-shadow: var(--shadow-card);
    transform: translateY(-2px);
}

.product-item > .picture {
    position: relative;
    background: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    overflow: hidden;
}

/* The flex container above makes the <a> a flex item, so it no longer stretches to the
   container's width the way it did as a plain block. The square box comes from
   `.item-box .picture a::before { padding-top: 100% }`, and that percentage resolves
   against the <a>'s OWN width - which, left auto, is circular and collapses to zero.
   The result is a 0x0 <a>, and the absolutely positioned <img> inside it (max-height:100%)
   renders at 0x0 even though the file loaded fine. A definite width restores the box. */
.product-item > .picture a {
    width: 100%;
}

.product-item > .picture img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    margin: 0 auto;
    transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}

.product-item:hover > .picture img {
    transform: scale(1.04);
}

.product-item > .details {
    padding: 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-top:0px;
    margin-top:-13px;
}

/* .product-title is no longer emitted by the theme's own boxes (they all use the
   <a><h3> shape below) — these two rules are kept for plugin-rendered product boxes
   that still ship the old markup. */
.product-item .product-title {
    order: 2;
}

/* The product name is a bare <a><h3> in all three boxes. Without this it would
   default to order:0 and jump above the brand line. */
.product-item .details > a {
    order: 2;
}

.product-item .details > a h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.4;
    margin: 6px 0 0px; /* mockup .product-info .name */
    /* two lines' worth, so cards with a one-line name keep their price row aligned
       with the rest of the row */
    min-height: 36px;
}

.product-item .details > a:hover h3 {
    color: var(--color-primary);
}

.product-item .product-title a {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.4;
    display: block;
}

.product-item .product-title a:hover {
    color: var(--color-primary);
    text-decoration: none;
}

/* the GTIN line doubles as the mockup's brand row */
.product-item .details > .sku {
    order: 3;
    font-size:11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    height:40px;
}

.product-item .description {
    order: 3;
    font-size: 12.5px;
    color: var(--color-text-muted);
}

.product-item .add-info {
    order: 4;
    margin-top: auto;
}

.product-item .prices {
    /* mockup .product-info .price carries only margin-bottom:12px — the gap above comes
       from the name's 10px bottom margin. Keeping a 10px top here as well would double it. */
    margin: 0 0 12px;
}

.product-item .price.actual-price {
    font-size: 17px;
    font-weight: 800;
    color: var(--color-primary);
}

.product-item .price.old-price {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: line-through;
    margin-left: 6px;
}

.product-item .product-box-add-to-cart-button {
    width: 100%;
    /* IOpticMini2027.rtl.css caps this button at `max-width: 100px` (base AND :hover).
       `width: 100%` does not defeat a max-width — they are separate properties — so the
       pill stayed pinned at 100px however wide the card got. The mockup sets no max-width
       at all, so it has to be cleared explicitly, in both states. */
    max-width: none;
    /* !important because IOpticMini2027.rtl.css sets padding:5px on both the base and
       :hover rule; without it the pill changed height on hover. */
    padding: 10px !important;
    margin-top: auto;
    border: none;
    border-radius: 999px;
    background: var(--color-accent);
    /* --color-ink, not --color-primary-dark: accent+primary-dark measures 3.34:1,
       under the 4.5:1 WCAG AA needs for 13px text. accent+ink is 7.27:1 and looks
       near-identical. Hover goes to primary-dark+white (8.01:1) rather than
       accent-dark+white, which was 3.38:1 — the old hover failed too. */
    color: var(--color-ink);
    font-size: 13px;
    font-weight: 700;
    transition: background .15s ease, color .15s ease;
}

.product-item .product-box-add-to-cart-button:hover {
    background: var(--color-primary-dark);
    color: var(--color-white);
}

/* ----- discount / out-of-stock corner ribbons -----
   The geometry used to ship as an inline <style> block inside _ProductBox /
   _ProductBoxClean, i.e. re-emitted once per card and free to drift between the two
   copies. It lives here now; only .BoxOutOfStock is rendered by the theme's boxes,
   .BoxDiscount comes from widgets in the ProductBoxAddinfoBefore zone. */
.product-item .BoxOutOfStock,
.product-item .BoxDiscount {
    position: absolute;
    left: -5px;
    top: -5px;
    z-index: 1;
    overflow: hidden;
    width: 105px;
    height: 105px;
    text-align: right;
}

.product-item .BoxOutOfStock span,
.product-item .BoxDiscount span {
    display: block;
    position: absolute;
    top: 26px;
    left: -26px;
    width: 126px;
    line-height: 20px;
    text-align: center;
    text-transform: none;
    font-size: 11px;
    color: var(--color-white);
    transform: rotate(-45deg);
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
}

.product-item .BoxOutOfStock span::before,
.product-item .BoxDiscount span::before,
.product-item .BoxOutOfStock span::after,
.product-item .BoxDiscount span::after {
    content: "";
    position: absolute;
    top: 100%;
    z-index: -1;
    border: 3px solid transparent;
}

.product-item .BoxOutOfStock span::before,
.product-item .BoxDiscount span::before {
    left: 0;
}

.product-item .BoxOutOfStock span::after,
.product-item .BoxDiscount span::after {
    right: 0;
}

.product-item .BoxOutOfStock span {
    font-weight: normal;
    background: linear-gradient(#210101 0%, #000000 100%);
}

.product-item .BoxOutOfStock span::before {
    border-top-color: #000;
    border-left-color: #000;
}

.product-item .BoxOutOfStock span::after {
    border-top-color: #000;
    border-right-color: #000;
}

/* the ribbon keeps its shape, brand palette on top */
.product-item .BoxDiscount span {
    font-size: 12px;
    font-weight: 700;
    background: var(--brand-gradient-diag);
    color: #3a2f18;
}

.product-item .BoxDiscount span::before,
.product-item .BoxDiscount span::after {
    border-top-color: var(--color-accent-dark);
    border-left-color: var(--color-accent-dark);
    border-right-color: var(--color-accent-dark);
}

/* ----- recommended / bestseller carousels ----- */
/* SLIDE SIZING — why the gutter is padding, not margin.
   slick writes an inline `width` on every slide (listWidth / slidesToShow). A
   margin sits OUTSIDE that width, so each of the 8 slides took width+margins and
   the track overflowed .slick-list, whose `overflow: hidden` clipped the last
   card. The plugin ships `style="...margin:10px"` inline on .item-box, which is
   where that came from.

   So: the slide is a transparent, padded wrapper (padding is inside the width
   thanks to the global border-box), and the card chrome moves to .product-item. */
.recomended-products .item-box,
.bestsellers-products .item-box {
    border: 0 !important; /* beats inline border:1px solid #ddd */
    border-radius: 0;
    /* half the gap between two neighbouring cards, so 12px => 24px apart — same as the
       product-page grids below. !important beats the plugin's inline padding:10px. */
    padding: 0 4px !important;
    margin: 0 !important; /* beats inline margin:10px — this was the overflow */
    background: none;
    overflow: visible;
    /* no `height` here: slick.css sets .slick-slide { height: 100% }, which is what
       lets .product-item stretch to equal heights across the row. */
}

/* the visible card */
.recomended-products .item-box .product-item,
.bestsellers-products .item-box .product-item,
.related-products-grid .item-box .product-item,
.also-purchased-products-grid .item-box .product-item {
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: var(--color-white);
    overflow: hidden;
    height: 100%;
    transition: box-shadow .15s ease;
}

.recomended-products .item-box .product-item:hover,
.bestsellers-products .item-box .product-item:hover {
    box-shadow: var(--shadow-card);
    transform: none; /* no lift inside a carousel — it clips against .slick-list */
}

/* ----- related / also-purchased grids (product page) -----
   Same card as the carousels above, but laid out with Bootstrap columns rather than
   slick — see the note at the top of RelatedProducts/Default.cshtml. The card chrome
   is reset off the column and drawn on .product-item, exactly as it is for a slide;
   the column keeps a bottom margin because these rows wrap, and unlike a slide it
   is free to lift on hover. */
/* GUTTER — keep these two numbers in step. The column padding below is half the gap
   between two neighbouring cards, so --bs-gutter-x must be twice that padding: the
   row's negative margins (-gutter/2) have to cancel the outermost columns' padding
   exactly, or the strip sits off-centre against the rest of the page. 16px padding
   => 32px between cards, and 32px here. */
.related-products-grid .item-grid > .row,
.also-purchased-products-grid .item-grid > .row {
    --bs-gutter-x: 32px;
}

.related-products-grid .item-box,
.also-purchased-products-grid .item-box {
    border: 0;
    border-radius: 0;
    padding: 0 16px; /* the gutter, inside the width thanks to the global border-box */
    margin: 0 0 32px; /* rows wrap — this is the gap between them */
    background: none;
    width:15%;
    margin:10px;
    /* no `height`: .row is a flex container, so the column already stretches to the
       tallest card on its line and .product-item's height:100% fills it. */
}

/* Related / also-purchased sit at the bottom of the product page. Match the vertical
   rhythm the homepage gives its recommended strip (.html-home-page
   .recommended-product-content), and drop the 10px that IOptic2024.rtl.css puts under
   `.related-products-grid .title` — the shared section-title rule above already
   carries the 30px gap on the <h2> itself, so the two stacked. */
/* FULL-BLEED, to match the homepage recommended strip.
   That strip is rendered straight into .page-body with no .container around it and
   nothing in the chain (.content / #main / .page-body) sets a width, so it spans the
   whole viewport. The product page, by contrast, wraps everything in .container
   (1320px at xxl), so the strip has to break back out of it: the containing block is
   the container's content box, which makes `50%` half of it, and `50% - 50vw` is
   exactly the distance from its edge to the viewport edge. The 12px inline padding is
   the same breathing room the homepage cards get from their slide gutter. */
.related-products-grid,
.also-purchased-products-grid {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 48px 12px 8px;
}

/* 100vw counts the vertical scrollbar, so the break-out above overhangs the document
   by the scrollbar's width and raises a horizontal scrollbar. Clipping it on the root
   element propagates to the viewport, which is exactly the scroller we want to stop
   scrolling sideways; overflow-y is untouched, so the page scrolls normally.

   NOTE THE SELECTOR: this theme puts the page classes on <html>, not <body> — see
   _Root.Head.cshtml, `<html ... class="NopHtml.GeneratePageCssClasses()">`, which is
   why they are all named `html-*`. `body.html-product-details-page` matches nothing. */
html.html-product-details-page {
    overflow-x: hidden;
}

.related-products-grid > .title,
.also-purchased-products-grid > .title {
    margin-bottom: 0;
}



/* =============================================================================
   8. CATEGORY / BANNER TILES  (BannerRows Col2 / Col3 / Col4 grids)
   ========================================================================== */
.bannerrow-public .row > [class*="col-"] a {
    display: block;
    position: relative;
    border-radius: 0;
    overflow: hidden;
}

.bannerrow-public .row > [class*="col-"] a img {
    transition: transform .7s cubic-bezier(.2, .7, .2, 1);
    width: 100%;
}

.bannerrow-public .row > [class*="col-"] a:hover img {
    transform: scale(1.05);
}

.bannerrow-public .row > [class*="col-"] a:hover {
    box-shadow: 0 24px 50px rgba(46, 38, 22, .22);
}

/* The rules above are for the promo TILE grids (Col2/Col3/Col4/Col6). They are
   descendant selectors, so they also caught the hero slider's anchors — giving a
   full-bleed carousel rounded corners, a hover zoom and a lift. Opt the carousel
   back out; it is a banner, not a tile. */
.bannerrow-public .carousel-item a,
.bannerrow-public .carousel-item a:hover {
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
}

.bannerrow-public .carousel-item a img,
.bannerrow-public .carousel-item a:hover img {
    transform: none;
}

.category-page .row {
    --bs-gutter-x: 0.2rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--bs-gutter-y) * -1);
    margin-left: calc(var(--bs-gutter-x) / -2);
    margin-right: calc(var(--bs-gutter-x) / -2);
}

.offer {
    border:0px;
}
/* =============================================================================
   9. NEWSLETTER  (Components/NewsletterBox)
   ========================================================================== */
.newsletter .newsletter-subscribe {
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    padding: 20px;
}

.newsletter .newsletter-subscribe h4 {
    color: var(--color-primary-dark);
    font-size: 15px;
    font-weight: 800;
    margin: 0 0 8px;
}

.newsletter .newsletter-lead {
    font-size: 13px;
    color: var(--color-text-muted);
    margin: 0 0 14px;
    font-weight: 400;
}

/* The pill is the container, clipping borderless children — the mockup's `.newsletter`
   approach. This is why the consent block had to move out of .input-group in
   NewsletterBox/Default.cshtml: overflow:hidden here would otherwise swallow it.
   Drawing the two halves as separately-bordered boxes (the previous attempt) left
   the button a few px taller than the field; clipping both to one container makes
   them identical by construction. */
.newsletter .newsletter-email .form-group.input-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    margin: 0 0 14px;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    overflow: hidden;
    background: var(--color-white);
}

.newsletter .newsletter-subscribe-text,
.newsletter #newsletter-email {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    /* 12px, not 10px, to match the mockup's `.newsletter input` — and to match the
       button's own 12px. With 10px the button was the taller of the two flex items and
       set the pill height on its own, so the field's text sat off-centre in the pill. */
    padding: 10px 16px;
    font-size: 13px;
    font-family: inherit;
    line-height: 1.5;
    color: var(--color-text);
    height: auto;
}

/* the container owns the border now, so focus tints the container, not the input */
.newsletter .newsletter-subscribe-text:focus,
.newsletter #newsletter-email:focus {
    outline: none;
    box-shadow: none;
    border: 0;
    background: transparent;
}

/* Same as the header search: the input clears its own outline, so the pill carries
   the indicator. The old border-only change (#ece7d6 -> #b8a67a) was 1.93:1 against
   the resting border, below the 3:1 minimum. */
.newsletter .newsletter-email .form-group.input-group:focus-within {
    border-color: var(--color-primary);
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.newsletter #newsletter-email::placeholder {
    color: var(--color-text-muted);
}

.newsletter .newsletter-email .input-group-append {
    display: flex;
    align-items: stretch;
    flex: 0 0 auto;
}

/* borderless and square — the container's radius + overflow:hidden shape the cap,
   so the button can never differ in height from the field */
.newsletter .newsletter-subscribe-button {
    border: 0;
    border-radius: 0;
    padding: 12px 20px;
    background: var(--color-accent);
    color: var(--color-primary-dark);
    font-weight: 700;
    font-size: 13px;
    line-height: 1.5;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}

.newsletter .newsletter-subscribe-button:hover {
    background: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    color: var(--color-white);
}

/* consent row — now a sibling of the pill, not a flex item inside it.
   The checkbox itself is visually hidden and drawn via label:before by the inline
   <style> in NewsletterBox; mirrors the mockup's .footer-consent. */
.newsletter .control-group {
    margin: 0 !important; /* beats inline style="margin-top:10px" on the div */
    padding: 0;
    display: block;
}

.newsletter .form-group-newsletter {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    /* no margin-top: the mockup's gap above the consent row is the pill's own
       `margin: 0 0 14px`. A 10px here stacked on top of that and made it 24px. */
    margin-top: 0;
}

.newsletter .form-group-newsletter label {
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--color-text-muted);
    cursor: pointer;
    margin-top:16px;
}

.newsletter .control-group label:before {
    border-color: var(--color-primary) !important;
}

.newsletter .control-group input:checked + label:after {
    border-color: var(--color-primary) !important;
}

/* =============================================================================
   10. FOOTER  (Components/Footer)
   ========================================================================== */
.footer {
    background: var(--gold-bar);
    color: #edf1f1;
    font-size: 13.5px;
    padding: 56px 0 0; /* mockup `footer { padding:56px 0 0 }` */
    margin-top: 0px;
    border: none;
}

/* TYPOGRAPHY RESET FOR THE LINK COLUMNS.
   Three inherited rules made this block read nothing like the mockup:
     - IOptic2024.rtl.css `body { font-weight:500; line-height:20px }` — every link
       rendered semi-bold on 20px leading instead of 400 on ~15px, which also stretched
       each row from 25px to 34px and made the columns a third taller than the mockup.
     - IOptic2024.rtl.css `.footer { text-align:center }` — the mockup's columns are
       start-aligned (right in RTL); centred, every link floated on its own axis.
   Scoped to .footer-upper so .footer-lower keeps its centred copyright line. */
.footer .footer-upper {
    font-weight: 400;
    line-height: normal;
    text-align: start;
    /* mockup insets .footer-top by 24px; Bootstrap's .container already gives 12 */
    padding: 0 12px;
}

/* COLUMN COUNT ADAPTS TO THE PAGE.
   Inner pages render 5 blocks: 4 link columns + .follow-us (social + newsletter).
   The homepage renders only 4 — Footer/Default.cshtml skips its follow-us block
   there because the hub section owns the newsletter (keeping #newsletter-email
   unique). So the default is 5 columns and the homepage overrides to 4.
   The last column is wider: it holds the subscribe pill, which is cramped at 1fr. */
.footer .footer-upper > .row.row-cols-5 {
    display: grid;
    grid-template-columns: repeat(4, 1fr) 1.6fr;
    gap: 32px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    margin: 0;
}

.html-home-page .footer .footer-upper > .row.row-cols-5 {
    grid-template-columns: repeat(4, 1fr);
}

.footer .footer-upper > .row.row-cols-5 > .col {
    width: auto;
    max-width: none;
    flex: none;
    padding: 0;
}

/* follow-us is the last column (leftmost in RTL): social on top, newsletter below */
.footer .footer-block.follow-us {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
}

.footer .footer-block.follow-us .social {
    flex: 0 0 auto;
}

.footer .footer-block.follow-us .newsletter {
    flex: 0 1 auto;
    max-width: none;
}

/* line-height:normal — Bootstrap's `h4 { line-height:1.2 }` made the heading 17.4px
   tall against the mockup's 16px, which pushed every link in the column down by 1.4px. */
.footer .footer-block .title h4,
.footer .footer-block .title strong {
    color: var(--color-white);
    font-size: 14.5px;
    font-weight: 700;
    line-height: normal;
    margin: 0 0 16px;
}

/* the mockup's row rhythm is exactly `li { margin-bottom:10px }` on a 15px line.
   IOptic2024.rtl.css adds `.footer-block .list li { padding:2px 0 }` on top, and the
   list itself carries a 30px bottom margin that the mockup does not have. */
.footer .footer-block .list {
    margin-bottom: 0;
    /* responsive.css turns every column into a collapsed accordion panel below 768px
       (`display:none` plus a cream box with its own padding). The mockup shows all four
       columns open at every width, so the panel styling is neutralised here — and the
       toggle script that opened them was removed from Footer/Default.cshtml with it. */
    display: block;
    background: none;
    padding: 0;
}

/* the chevron only ever meant "tap to expand"; nothing expands now */
.footer .footer-block .title .delimiter {
    display: none;
}

.footer .footer-block .list li {
    margin-bottom: 10px;
    padding: 0;
}

/* links are #EDF1F1 (the footer's own text colour) and go pure white on hover — the
   mockup reserves #fff for the column headings and the hover state */
.footer .footer-block .list li a,
.footer a {
    color: #edf1f1;
    transition: color .15s ease;
}

.footer .footer-block .list li a:hover,
.footer a:hover {
    color: var(--color-white);
    text-decoration: underline;
}

.footer h3,
.footer h3::after {
    color: var(--color-white);
    border-color: rgba(255, 255, 255, .25);
}

/* social pills */
.footer .social-icons .networks {
    display: flex;
    gap: 14px;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* IOptic2024.rtl.css `.follow-us .social li { margin: 0 5px }` doubles up with the flex
   `gap` above — the mockup's .footer-social spacing is the 14px gap alone */
.footer .social-icons .networks > li {
    margin: 0;
    padding: 0;
}

.footer .social-icons .networks li a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, border-color .15s ease;
}

.footer .social-icons .networks li a:hover {
    background: rgba(255, 255, 255, .18);
    border-color: var(--color-white);
}

/* mockup `.footer-social svg { width:16px; height:16px; color:var(--color-white) }` —
   white here rather than the hub's brand colour, because these circles sit on the gold
   bar. The previous <img> glyphs had no fill declared and so painted black on it. */
.footer .social-icons .networks li a svg {
    display: block;
    width: 16px;
    height: 16px;
    color: var(--color-white);
}

/* ONE separator only.
   The mockup draws a single hairline under the link columns (.footer-top's
   border-bottom, which we put on .row.row-cols-5) and nothing around the bottom
   bar. Previously .footer-lower AND the always-empty .footer-info each added
   their own border-top plus 18px of padding, so three rules stacked up with
   ~160px of dead gold between the last link and the bottom of the page. */
.footer .footer-lower {
    padding: 18px 0;
    font-size: 12px;
    /* same body-inherited 500/20px as the link columns above — the mockup's
       .footer-bottom is 400 on normal leading */
    font-weight: 400;
    line-height: normal;
    color: #d6dedf;
    text-align: center;
    border-top: none;
}

/* .footer-info is emitted empty on every page in this theme (verified on both the
   home and inner pages) — collapse it rather than paying padding + a rule for it.
   The :empty guard means it still lays out correctly if content is ever added. */
.footer .footer-info {
    padding: 0;
    border-top: none;
}

.footer .footer-info:empty {
    display: none;
}

/* homepage-only copyright line, below the separator (see Footer/Default.cshtml) */
.footer .footer-copyright {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 12px;
    color: #edf1f1;
    flex-wrap: wrap;
}

.footer .footer-copyright img {
    width: 20px;
    height: auto;
    flex-shrink: 0;
}

.footer .footer-copyright a {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}


.scrollup {
    background: var(--color-accent);
    color: var(--color-primary-dark);
    border-radius: 50%;
    border: none;
    box-shadow: var(--shadow-gold);
    transition: background .15s ease, color .15s ease;
}

.scrollup:hover {
    background: var(--color-accent-dark);
    color: var(--color-white);
}

/* cookie popup in brand palette */
#cookiePopup {
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

#cookiePopup .btn,
#cookiePopup button {
    background: var(--color-accent);
    color: var(--color-primary-dark);
    border: none;
    border-radius: 999px;
    font-weight: 700;
}

/* =============================================================================
   10b. BRAND TILE STRIP  (_HomeBrands.cshtml — mockup .brands-section)
   Values ported verbatim from the mockup stylesheet.
   ========================================================================== */
.brands-section {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-line);
    padding: 40px 0;
    margin-bottom:0px;
}

.brands-section .section-title.small-gap {
    margin-bottom: 20px;
}

.brands-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.brand-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 110px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: transparent;
    padding: 12px;
    transition: box-shadow .15s ease, transform .15s ease;
}

.brand-tile:hover {
    box-shadow: var(--shadow-gold);
    transform: translateY(-2px);
}

.brand-tile img {
    max-width: 100%;
    max-height: 66px;
    object-fit: contain;
    filter: grayscale(1) opacity(.7);
    transition: filter .15s ease;
}

.brand-tile:hover img {
    filter: grayscale(0) opacity(1);
}

/* =============================================================================
   10c. CATEGORY CARDS  (_HomeCategoryGrid.cshtml — mockup .category-grid)
   Full-bleed photo + frosted glass panel. Each card sets --cat-color; the photo
   layer falls back to that tint when a category has no picture.
   ========================================================================== */
.category-section {
    background: var(--color-bg-soft);
    border-bottom: 1px solid var(--color-line);
    padding: 56px 0;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
}

.category-card {
    position: relative;
    display: block;
    height: 400px;
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s ease;
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 50px rgba(46, 38, 22, .22);
}

.category-card .cat-photo-link {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
}

.category-card .cat-photo {
    position: absolute;
    inset: 0;
    display: block;
    background-color: var(--cat-color, var(--color-bg-soft));
    background-size: cover;
    background-position: center;
    transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}

.category-card:hover .cat-photo {
    transform: scale(1.07);
}

/* shade so the glass panel reads on any image */
.category-card .cat-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(38, 31, 18, .55) 0%, rgba(38, 31, 18, .12) 40%, transparent 70%);
}

.category-card .cat-info {
    position: absolute;
    z-index: 1;
    left: 7px;
    right: 7px;
    bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .35);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .4);
    transition: background .35s ease, border-color .35s ease;
}

.category-card:hover .cat-info {
    background: rgba(255, 255, 255, .22);
    border-color: rgba(255, 255, 255, .55);
}

.category-card .cat-info h3 {
    font-size: 22px;
    font-weight: 800;
    color: var(--color-white);
    margin: 0;
    text-align: right;
    letter-spacing: .3px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}

.category-card .cat-info h3 a {
    color: var(--color-white);
}

.category-card .cat-buttons {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.category-card .cat-buttons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 17px;
    border-radius: 999px;
    border: 1.5px solid rgba(255, 255, 255, .6);
    background: rgba(255, 255, 255, .18);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-white);
    white-space: nowrap;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.category-card .cat-buttons a:hover {
    background: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-primary-dark);
    text-decoration: none;
}

/* =============================================================================
   10d. HUB — newsletter | magazine | social  (_HomeHub.cshtml)
   ========================================================================== */
.hub-section {
    padding: 56px 0;
    background: var(--color-bg-soft);
}

.hub-grid {
    display: grid;
    grid-template-columns: 1.15fr 1.15fr 0.7fr;
    gap: 44px;
    align-items: stretch;
}

.hub-col {
    display: flex;
    flex-direction: column;
}

/* headings are h2/h3 for document outline (the mockup's h5/h6 skipped a level
   after the category cards' h3); the classes carry the visual weight instead */
.hub-col .hub-col-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--color-primary-dark);
    margin: 0 0 18px;
}

.hub-newsletter-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* the component already draws its own panel — don't double it up. In the hub the
   panel sits on the cream section background, so it goes white for contrast (in
   the footer it stays cream against the gold gradient). */

/* In the mockup, .hub-newsletter-box IS the bordered panel and carries flex:1, so it
   fills the hub column and centres its content. Here the panel is the component's
   .newsletter-subscribe, two levels down, so the fill has to be handed through both
   wrappers — otherwise the panel stops at content height and floats in the middle of
   the column, shorter than the magazine cards beside it. */
.hub-newsletter-box .newsletter {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.hub-newsletter-box .newsletter-subscribe {
    margin: 0;
    background: var(--color-white);
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* NewsletterBox renders its own <h4>ניוזלטר</h4>. The hub column already has an
   <h5> heading above the panel, so the component's heading is a duplicate here.
   Hidden in the hub only — the footer instance still needs it. */
.hub-newsletter-box .newsletter-subscribe h4 {
    display: none;
}

.hub-newsletter-box .newsletter > div:last-child {
    display: none; /* footer copyright/WideCommerce logo belongs in the footer only */
}

.hub-articles ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
    margin: 0;
    padding: 0;
}

.hub-articles li {
    flex: 1;
    display: flex;
}

.hub-articles li a {
    flex: 1;
    display: flex;
    gap: 14px;
    align-items: center;
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    padding: 16px;
    transition: box-shadow .15s ease;
}

.hub-articles li a:hover {
    box-shadow: var(--shadow-card);
    text-decoration: none;
}

.hub-articles img {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.hub-articles .mag-date {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-muted);
    letter-spacing: .3px;
}

.hub-articles .hub-article-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--color-primary);
    margin: 3px 0 0;
    line-height: 1.4;
}

.hub-social-icons .networks,
.hub-social-icons .social-icons {
    display: flex;
    gap: 14px;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* the base sheet leaves a 6px inline margin on each <li>, which added to the flex `gap`
   made the circles 20px apart instead of the mockup's 14 and shunted the pair 6px off
   the column's start edge */
.hub-social-icons .networks > li {
    margin: 0;
    padding: 0;
}

.hub-social-icons .networks li a {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease;
}

/* mockup: `.hub-social-icons a svg { width:19px; height:19px; color:var(--color-primary) }`
   and on hover the circle fills with the brand colour while the glyph flips to white */
.hub-social-icons .networks li a svg {
    display: block;
    width: 19px;
    height: 19px;
    color: var(--color-primary);
    transition: color .15s ease;
}

.hub-social-icons .networks li a:hover {
    background: var(--color-primary);
}

.hub-social-icons .networks li a:hover svg {
    color: var(--color-white);
}

/* =============================================================================
   10e. BEST SELLER badge — CSS-only, scoped to the plugin's bestsellers row.
   ProductOverviewModel carries no "is bestseller" flag, so the badge is attached
   to the .bestsellers-products wrapper rather than added to the product markup.
   ========================================================================== */
.bestsellers-products .product-item > .picture {
    position: relative;
}

.bestsellers-products .product-item > .picture::after {
    content: "BEST SELLER";
    position: absolute;
    top: 10px;
    right: 10px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--brand-gradient-diag);
    color: #3a2f18;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: .3px;
    line-height: 1.25;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .22);
    text-transform: uppercase;
    pointer-events: none;
    z-index: 2;
}

/* =============================================================================
   11. SHARED CONTROLS — buttons, prices, links on inner pages
   These inherit the palette without changing any inner-page layout.
   ========================================================================== */
.button-1,
.button-2,
.btn-primary,
.register-button,
.btn-default,
.login .btn-default,
.checkout-as-guest-button,
.account-page .button-1,
.order-list-page .button-2,
.address-list-page .button-2,
.change-password-button,
.pdf-invoice-button,
.product-details-page .add-to-cart-button,
.order-summary-content .checkout-button,
.checkout-page .button-1 {
    background: var(--color-accent);
    border-color: var(--color-accent);
    /* See the contrast note on .product-box-add-to-cart-button: ink is 7.27:1 on
       accent, primary-dark was only 3.34:1. */
    color: var(--color-ink);
    border-radius: 999px;
    font-weight: 700;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

    .button-1:hover,
    .button-2:hover,
    .btn-primary:hover,
    .btn-default:hover,
    .register-button:hover,
    .login .btn-default:hover,
    .checkout-as-guest-button:hover,
    .account-page .button-1:hover,
    .order-list-page .button-2:hover,
    .address-list-page .button-2:hover,
    .change-password-button:hover,
    .pdf-invoice-button:hover,
    .product-details-page .add-to-cart-button:hover,
    .order-summary-content .checkout-button:hover,
    .checkout-page .button-1:hover {
        background: var(--color-primary-dark);
        border-color: var(--color-primary-dark);
        color: var(--color-white);
    }

/* Store branch topic pages (e.g. /optic_doron_ramat_aviv): the "navigate via
   Waze" CTA. Its markup is topic body HTML held in the DB, not a view, and it
   is styled by .contact-store .gradient-btn in IOptic2024.rtl.css — the
   PickupInStore plugin's own ExploreShops.css does not load on these pages.
   Only colour/shape/type is restated here; the layout that rule sets
   (display:block, width:300px, margin auto, padding:15px) is left alone. */
.contact-store .gradient-btn {
    background: var(--color-accent);
    color: var(--color-ink);
    border-radius: 999px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    transition: background .15s ease, color .15s ease;
}

    .contact-store .gradient-btn:hover {
        background: var(--color-primary-dark);
        color: var(--color-white);
    }

/* ----- PDP tab strip -----
   Underline tabs rather than filled ones: the active tab was a black slab
   (color-styles/black.css:82), and any filled tab — black or bronze — reads as
   a button and competes with the real CTA above it. Nothing here is filled, so
   add-to-cart stays the only solid element on the page.
   The !importants match the ones black.css uses on background/border/colour;
   without them that rule wins regardless of load order. */
.product-details-page .nav-tabs {
    border-bottom: 1px solid var(--color-line);
}

.product-details-page .nav-tabs .nav-link {
    background: transparent;
    border: 0;
    /* transparent 3px keeps every tab the same height, so nothing shifts
       vertically when the active one gains its underline. */
    border-bottom: 3px solid transparent;
    border-radius: 0;
    color: var(--color-text);
    font-weight: 600;
    transition: color .15s ease, border-color .15s ease;
}

    .product-details-page .nav-tabs .nav-link:hover {
        color: var(--color-primary);
        border-bottom-color: var(--color-accent);
        /* IOpticMini2027.rtl.css:50 draws a 2px ring on :hover AND :focus. On a
           borderless tab that ring reads as a stray box, so it is dropped for
           hover (colour + underline already signal it) and kept for keyboard
           focus below, where it is the only affordance. */
        outline: 0;
    }

    .product-details-page .nav-tabs .nav-link:focus-visible {
        outline: 2px solid rgba(141, 113, 42, .5);
        outline-offset: 2px;
    }

    .product-details-page .nav-tabs .nav-item.show .nav-link,
    .product-details-page .nav-tabs .nav-link.active {
        background: transparent !important;
        border: 0 !important;
        border-bottom: 3px solid var(--color-primary) !important;
        border-radius: 0;
        color: var(--color-primary) !important;
        font-weight: 700;
    }

    /* The label is an <h2> inside the button: it must not keep a heading colour,
       and its default bottom margin would push the underline away from the text. */
    .product-details-page .nav-tabs .nav-link h2 {
        color: inherit;
        margin: 0;
    }

/* ----- PDP primary CTA ("add to cart") -----
   IOpticMini2027.rtl.css:1595 paints this #000 with a hover that inverts to
   white. Solid bronze (--color-primary + white = 4.53:1) instead: it reads as
   premium rather than "sale button", and keeps a hierarchy the all-gold
   alternative would flatten — bronze buys, gold stays on prices and headings.
   Note the button's class is fs_add_to_cart_button; the .add-to-cart-button in
   the shared block above never matches on this theme's PDP. */
.product-details-page .overview .fs_add_to_cart_button,
.variant-overview .fs_add_to_cart_button {
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
    color: var(--color-white);
    border-radius: 999px;
    font-weight: 700;
    /* uppercase is a no-op on the Hebrew label and only shouts at Latin brand
       names, so it goes. */
    text-transform: none;
    /* was a fixed 214px, which clips longer labels; keep the size as a floor. */
    width: auto;
    min-width: 214px;
}

    /* !important is required, not stylistic: the rule this overrides
       (.overview .fs_add_to_cart_button:hover) sets background/color/border with
       !important itself, so only !important can beat it. The selector here is
       one class more specific so it also wins the important-vs-important tie. */
    .product-details-page .overview .fs_add_to_cart_button:hover,
    .variant-overview .fs_add_to_cart_button:hover {
        background-color: var(--color-primary-dark) !important;
        border: 1px solid var(--color-primary-dark) !important;
        color: var(--color-white) !important;
    }

    /* Reuses the gold ring already used by .gradient-btn, so keyboard focus has
       one idiom across the theme. */
    .product-details-page .overview .fs_add_to_cart_button:focus-visible,
    .variant-overview .fs_add_to_cart_button:focus-visible {
        outline: 0;
        box-shadow: 0 0 0 4px rgba(141, 113, 42, .4);
    }

/* Order history + address list pages: .order-list-page/.address-list-page
   .button-2 (retry/cancel/return/details, edit/delete-address) still carry
   IOpticMini2027.rtl.css's padding:0 18px 0 0 and font-size:16px — zero
   top/bottom padding with only one-sided horizontal padding, so text sat
   left-flush and overflowed the pill's rounded edges vertically. */
.order-list-page .button-2,
.address-list-page .button-2 {
    padding: 8px 18px;
    font-size: 13px;
    line-height: 1.25;
    text-align: center;
}

/* News / blog "read more": same pill as the order-history .button-2 above.
   It was a bare teal text link (colour from color-styles/black.css:204), so
   unlike the other buttons this one has to be built up rather than recoloured —
   hence the background/padding/radius here as well as the palette. Scoped to
   .news-items/.blog-posts to outrank IOptic2024.rtl.css's own two-class rules
   on the same elements. */
.news-items .read-more,
.blog-posts .read-more {
    display: inline-block;
    background: var(--color-accent);
    border: 1px solid var(--color-accent);
    color: var(--color-ink);
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    /* uppercase is a no-op on the Hebrew label, as on the PDP CTA */
    text-transform: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

    .news-items .read-more:hover,
    .blog-posts .read-more:hover {
        background: var(--color-primary-dark);
        border-color: var(--color-primary-dark);
        color: var(--color-white);
    }

    /* IOptic2024.rtl.css greys every <i> in .news-items to #aaa, which leaves the
       chevron washed out on the gold fill; inherit the label colour instead. */
    .news-items .read-more i,
    .blog-posts .read-more i {
        color: inherit;
    }

/* Bootstrap 5 ships .btn:focus{box-shadow:0 0 0 .25rem rgba(13,110,253,.25)} —
   a bright blue halo, which is what haloed the gold pills when clicked. Same
   specificity here, and this file loads after bootstrap, so it wins.
   Split by focus type on purpose: a mouse click gets no ring (the press is its
   own feedback), keyboard focus gets the brand gold ring — the same idiom as
   the PDP tabs and add-to-cart. :focus-visible must stay after :focus, since a
   keyboard focus matches both and the later rule wins the tie. */
.btn:focus {
    outline: 0;
    box-shadow: none;
}

.btn:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(141, 113, 42, .35);
}

.page-title h1,
.page-title h2,
.product-details-page .product-name h1 {
    color: var(--color-primary);
    font-weight: 700;
    margin-right:10px;
}

.prices .actual-price,
.product-price span {
    color: var(--color-primary);
}

/* Login page: submit button centered within the same column the input fields
   use. The row markup mismatched col widths — label col-md-3 + input col-md-8
   (11 cols) vs. this row's old offset-md-3 col-md-9 (12 cols) — so the button's
   box was wider than and offset from the actual input field. Login.cshtml now
   uses col-md-8 here too (see remember-wrapper below) so centering lands on
   the input field itself. */
.login-page .returning-wrapper .buttons {
    text-align: center;
}

/* Remember-me checkbox and forgot-password link pinned to opposite ends of one
   row instead of clumping together (float-right alone just trailed the
   checkbox/label rather than reaching the far edge); nowrap + normalized
   checkbox sizing keeps the checkbox, label and link on one baseline instead of
   the checkbox's native size/margin nudging it off the label's line. */
.login-page .remember-wrapper .custom-control.custom-checkbox {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
}

.login-page .remember-wrapper .custom-control-input {
    width: 16px;
    height: 16px;
    margin: 0;
    flex: none;
}

.login-page .remember-wrapper .custom-control-label {
    margin: 0;
}

.login-page .remember-wrapper .forgot-password {
    float: none;
    margin-inline-start: auto;
    white-space: nowrap;
    margin-left: 25px;
}

/* =============================================================================
   12. RESPONSIVE
   ========================================================================== */
/* min-width:992px matters here: unbounded, this reached below the 991px drawer
   breakpoint and collapsed the mobile menu rows to zero vertical padding. */
@media (min-width: 992px) and (max-width: 1200px) {
    /* horizontal padding only — vertical padding would push the bar past the
       mega panel's top:50px offset (see section 5) */
    .wsmenu > .wsmenu-list > li > a,
    .wsmenu > .wsmenu-list > li > a:hover {
        padding: 0 11px;
        font-size: 13.5px;
    }
}

@media (max-width: 980px) {
    #header .header-row {
        gap: 14px;
        padding: 12px 0;
    }

    #header .header-logo img {
        height: 38px;
    }

    .html-home-page .bannerrow-public,
    .html-home-page .recommended-product-content > div {
        padding: 10px 0;
    }

    .section-title,
    .recomended-products > .title h2,
    .bestsellers-products > .title h2,
    .related-products-grid > .title h2,
    .also-purchased-products-grid > .title h2,
    .bannerrow-public .banertitle {
        font-size: 22px;
        margin-bottom: 22px;
    }

    /* horizontal padding stays — the strip is full-bleed, so 0 would put the cards
       hard against the screen edges */
    .related-products-grid,
    .also-purchased-products-grid {
        padding: 0px 0px;
    }

    /* mockup @media (max-width:980px): `.footer-top { grid-template-columns:1fr 1fr }`,
       gap unchanged at 32px. The 5th block (inner pages only) wraps onto its own row
       and spans the width so the subscribe pill stays usable. */
    .footer .footer-upper > .row.row-cols-5,
    .html-home-page .footer .footer-upper > .row.row-cols-5 {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    .footer .footer-block.follow-us {
        grid-column: 1 / -1;
        padding-top: 24px;
        border-top: 1px solid rgba(255, 255, 255, .12);
    }

    /* mockup @media (max-width:980px) */
    .brands-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .category-grid {
        grid-template-columns: 1fr;
    }

    .hub-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .brands-section,
    .category-section,
    .hub-section {
        padding: 20px 0;
    }
}

@media (max-width: 767px) {
    /* the mobile drawer owns the header on small screens */
    .header-links > ul.nav {
        gap: 2px;
    }

    .header-links ul li a {
        font-size: 10.5px;
        padding: 4px 5px;
    }
}

@media (max-width: 560px) {
    #header .header-row {
        flex-wrap: wrap;
    }

    /* NOTE: no `.footer { padding-top }` override and no single-column fallback here.
       The mockup has one footer breakpoint (980px -> two columns) and keeps both its
       56px top padding and the two columns all the way down. */
    .footer .footer-block.follow-us {
        flex-direction: column;
    }

    .product-item > .details {
        padding: 12px;
    }

    /* mockup @media (max-width:560px) */
    .brands-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .category-grid {
        gap: 18px;
    }

    .category-card {
        height: 320px;
    }

    .category-card .cat-info {
        flex-direction: column;
        align-items: stretch;
        left: 7px;
        right: 7px;
        bottom: 14px;
        padding: 5px 18px;
        gap: 2px;
    }

    .category-card .cat-buttons {
        justify-content: flex-end;
    }

    .category-card .cat-info h3 {
        font-size: 22px;
        text-align: right;
    }

    .product-details-page .product-ribbons {
        /* relative, not absolute — this also agrees with the plugin's
       `position: relative !important` inside its max-width:768px media query */
        position: relative;
        height: 0;
        margin: 0;
        margin-left: 1% !important;
        /* the gallery's inline #img-container is z-index:888 */
        z-index: 890;
    }

    .related-products-grid .item-box,
    .also-purchased-products-grid .item-box {
        border: 0;
        border-radius: 0;
        padding: 0 16px; /* the gutter, inside the width thanks to the global border-box */
        margin: 0 0 32px; /* rows wrap — this is the gap between them */
        background: none;
        width:48% !important;
        margin: 2px;
        /* no `height`: .row is a flex container, so the column already stretches to the
       tallest card on its line and .product-item's height:100% fills it. */
    }

   
}

/* =============================================================================
   11. QUICKRIBBONS BADGE — product details gallery
   ==========================================================================
   Two things in QuickRibbons/Views/Public/Script.cshtml (rendered into
   BodyEndHtmlTagBefore) shape this, and both have to be worked around here:

   1. Its footer <script> RELOCATES the badge on DOM ready:
          $('.product-ribbons').insertBefore($('.gallery'));
      The widget zone renders it as the first child of .gallery, but by the time the
      page is interactive it is a SIBLING immediately before .gallery, inside the
      .col-md-6 gallery column. So any `.gallery .product-ribbons` rule matches only
      until that line runs, then silently stops applying.

   2. Its <style> sets `.product-ribbons { position: absolute; z-index: 9 }` with no
      offsets. Absolute + auto offsets keeps the element at its static position but
      takes it out of flow, so it overlapped the first thumbnail. That block also
      styles the image by ID (#product-ribbon-picture-1/-2, `width: 50px !important`)
      and re-asserts `position: relative !important` under max-width:768px.

   Approach: keep .product-ribbons IN flow but zero-height. Its static position is
   exactly the top-left corner of the gallery column, which makes it a stable anchor
   without editing the plugin (shared with the other themes in this solution) or the
   column markup. The image is then offset from that anchor.

   The ID selectors + !important below are not decoration: they are the minimum needed
   to outrank the plugin's own ID rules, which are themselves !important. */
.product-details-page .product-ribbons {
    /* relative, not absolute — this also agrees with the plugin's
       `position: relative !important` inside its max-width:768px media query */
    position: relative;
    height: 0;
    margin: 0;
    margin-left:10%;
    /* the gallery's inline #img-container is z-index:888 */
    z-index: 890;
}

/* The image cannot be made `position: absolute` from a stylesheet at all. The plugin
   writes the Ribbons.ProductImageCss column straight onto the element:

       <img id="product-ribbon-picture-1" style="position: relative !important;" ...>

   An !important declaration in a style ATTRIBUTE outranks every author stylesheet rule,
   `!important` or not — so `position: absolute !important` here was silently discarded
   and the image stayed relative, in flow, which under RTL put it back at the top-RIGHT
   of the column, on the thumbnail. (This is the part that kept the badge in place.)

   So work with `position: relative` instead of against it: lay the image out flush to
   the physical left edge with margins, then use relative top/left offsets — which DO
   apply to a relatively positioned box — to inset it 10px. Everything below is plain
   specificity (1,3,0) over the plugin's (1,0,0), including its max-width:768px block,
   so no !important is needed on our side. */
.product-details-page .product-ribbons #product-ribbon-picture-1,
.product-details-page .product-ribbons #product-ribbon-picture-2 {
    display: block;
    /* margin-right:auto + margin-left:0 pins a block box to the physical left edge in
       both directions; no margin-top, so nothing collapses through the 0-height parent
       and .gallery does not shift down */
    margin: 0 auto 0 0;
    /* relative offsets from that static position = 10px inset from the column corner */
    top: 10px;
    left: 10px;
    /* the plugin sets left AND right; under RTL right is the one that wins, which is
       what dragged the badge back toward the thumbnails */
    right: auto;
    float: none;
    /* the main image opens fancybox on click and scales on hover — the badge sits over
       it, so it must stay decorative to the pointer */
    pointer-events: none;
}

/* =============================================================================
   13. NEWS LIST  (Views/News/List.cshtml)
   ==========================================================================
   Markup is  .row > .news-items.col-md-6 > .news-section.news-item — the COLUMN
   carries the grid gutter, the inner .news-item is the visible grey panel.

   Two older rules are why the panels currently touch:

     IOptic2024.rtl.css:3020   .news-items { padding: 15px 0 }
       Bootstrap puts the horizontal gutter on the column as `padding: 0 calc(
       var(--bs-gutter-x) / 2)`. Overwriting the shorthand with `0` on the sides
       zeroes it, so the two panels in a row butt together with no gap at all.

     IOptic2024.rtl.css:3099   .news-list-page .news-items .news-item { padding: 10px }
       10px of breathing room inside a panel holding a heading, a date, a
       paragraph and an image.

   Fix: hand the horizontal rhythm back to Bootstrap's own gutter, carry the
   vertical rhythm on the column's own margin, and pad the panel.
   ========================================================================== */

/* Horizontal padding is exactly Bootstrap's own column gutter, restored — this is
   the declaration IOptic2024.rtl.css overwrote.

   The row spacing is a plain margin-bottom rather than --bs-gutter-y on the parent
   .row, because the NewsListPageBeforeItems widget zone can emit its own .row as a
   sibling and a gutter variable set on the shared parent would reach it too. The
   trailing 24px under the last row lands above the pager, where it is wanted anyway.

   Flex so the panel fills the column: .row stretches its columns to equal height
   already, but the panel inside would otherwise stop at its own content — which is
   what leaves two side-by-side cards ending at different heights when one excerpt
   is shorter than the other. */
.news-list-page .news-items {
    display: flex;
    padding: 0 calc(var(--bs-gutter-x) * .5);
    margin-bottom: 24px;
}

.news-list-page .news-items > .news-item {
    flex: 1 1 auto;
    /* The horizontal 24px is deliberately the same as the inner .news-body row's
       gutter. That row carries Bootstrap's -12px side margins while its columns add
       +12px of padding, and the two cancel — so the body text lines up with the
       heading in .news-head, whose .col-md-12 children sit outside any .row and so
       have no padding of their own (bare .col-* is width-only in Bootstrap 5).
       Change this to a value below 12px and the body row's negative margin starts
       pulling text out past the panel's padding box. */
    padding: 22px 24px;
    border-radius: var(--radius-sm);
}

/* .news-head's own 20px is the gap down to the body copy; the title-to-date gap is
   tighter than that, so the pair reads as one block. */
.news-list-page .news-item .news-head {
    margin-bottom: 16px;
}

.news-list-page .news-item .news-body img {
    border-radius: var(--radius-sm);
}

@media (max-width: 767.98px) {
    /* col-md-8 / col-md-4 stack here, so the image needs a vertical gap in place of
       the horizontal gutter it had beside the text. */
    .news-list-page .news-item .news-body > .row > .col-md-4 {
        margin-top: 16px;
    }
}

/* =============================================================================
   14. PAGER  (Nop.Web.Framework/UI/Paging/Pager.cs -> .pagination)
   ==========================================================================
   Pager.cs renders the two states as DIFFERENT elements, which is why they need
   separate rules here:

     current page   Pager.cs:425   <li class="page-item active"><span>1</span></li>
     other pages    Pager.cs:497   <li class="page-item"><a class="page-link">2</a></li>

   There is no <a> inside the active <li>, so every existing
   `.pagination li.active a.page-link` rule in IOptic2024.rtl.css is dead markup —
   the current page was picking up only `.pagination li.active`, i.e. #fff text on
   `rgba(0,0,0,.2)` over a white page. That is white on ~#ccc, about 1.6:1, which is
   the washed-out "1" in the reference shot.

   IOptic2024.rtl.css declares the whole pager twice (1591-1644, then 1650-1721) and
   the second copy wins, so the #000 circles and the #3c6382 blue hover are what
   actually ship. The rules below match those selectors exactly and win on load order,
   since this sheet is the last <link> in the document.
   ========================================================================== */

/* Inactive pages: white circle, gold ring, gold number.

   The ring is an inset box-shadow rather than a border on purpose. The circles are
   sized with a fixed `width/height: 38px` and centred with `line-height: 38px`, and
   under Bootstrap's global border-box sizing a real 1px border would eat into the
   content box and drop the digit half a pixel off centre. A box-shadow costs no
   layout at all, so the existing geometry is untouched. */
.pagination li a.page-link {
    background-color: var(--color-white);
    color: var(--color-primary);
    box-shadow: inset 0 0 0 1px var(--color-accent);
}

/* Current page: solid gold, white text. */
.pagination li.active {
    background-color: var(--color-primary);
    color: var(--color-white);
    /* the anchors carry `margin: 0 6px 6px` but this <li> carried only margin-left,
       which is why the gap either side of the current page was uneven */
    margin: 0 6px 6px;
}

/* Hover/focus is a cream fill with a dark-brown digit rather than the tan-on-tan
   pairing, which measured 3.3:1 — below AA. This reads at 7.5:1 and is still
   plainly distinct from both the white inactive circle and the solid gold current
   one, so the three states never look alike. */
.pagination li a.page-link:hover,
.pagination li a.page-link:focus,
.pagination li.active a.page-link:hover,
.pagination li.active a.page-link {
    background: var(--color-bg-soft);
    color: var(--color-primary-dark);
    box-shadow: inset 0 0 0 1px var(--color-primary);
}

/* The ::before is a scaling glow behind the circle (z-index:-1), tinted #8D712A with
   a #3c6382 blue drop-shadow. Behind the old solid-black circles only its blue rim
   showed; behind a white circle it would flash a hard gold ring on hover and fight
   the outline. The colour change above is the hover affordance, so retire the glow
   rather than retint it. */
.pagination li a.page-link:before,
.pagination li a.page-link:hover:before,
.pagination li a.page-link:focus:before,
.pagination li.active a.page-link:before,
.pagination li.active a.page-link:hover:before {
    display: none;
}

/* =============================================================================
   15. HERO BANNER — FULL BLEED  (BannerRows PublicInfo.cshtml)
   ==========================================================================
   When a DisplayOrder group holds more than one row the plugin wraps the carousel
   in a grid (PublicInfo.cshtml:28-32):

       .bannerrow-public > .row > .col-sm-12 > #mybanners

   Bootstrap's grid is a matched pair — `.row` pulls itself out by half a gutter on
   each side and `.row > *` pads the same amount back in, so the two cancel and a
   full-width column ends up flush with its parent. IOptic2024.rtl.css:43 breaks that
   pair globally:

       .row { margin: 0; margin-bottom: 10px; padding: 0; }

   The negative margins are gone but the column keeps its padding, so every
   full-width row on the site is left inset by half a gutter. --bs-gutter-x is the
   stock 1.5rem and no sheet overrides the root font-size, so that is 12px a side —
   the white strip marked in red on the hero.

   Fixed from the COLUMN rather than by restoring the row's negative margins: a
   100%-wide child pulled 12px past its parent on each side is exactly what raises a
   stray horizontal scrollbar, and the usual `overflow-x: hidden` remedy is already
   spent on <html> for the product-page break-out (section 7). Zeroing the column's
   padding lands the banner flush with no overflow to clean up after.

   Scoped on `.col-sm-12` deliberately — that class is unique to this carousel
   wrapper. The tile templates build their grids from `col-6`, `col col-md-2`,
   `col col-md-4` and `col-6 col-md-3`, and they rely on that same padding as the gap
   BETWEEN tiles, so a blanket rule under .bannerrow-public would collapse it. The
   single-banner path renders its template straight into .bannerrow-public with no
   .row at all, and is already full width. */
.bannerrow-public > .row > .col-sm-12 {
    padding-left: 0;
    padding-right: 0;
}

/* =============================================================================
   16. MOBILE DRAWER — OPEN STATE  (webslidemenu: .wsmenu / .wsmenu-list)
   ==========================================================================
   GEOMETRY IS LOAD-BEARING. 340px appears in three places that have to agree, and
   nothing in this section changes any of them:
       webslidemenu-rtl.css:597   .wsmenu-list      width: 340px / margin-right: -340px
       webslidemenu-rtl.css:1180  .overlapblackbg   width: calc(100% - 340px)
       webslidemenu-rtl.css:943   .wsactive .wsmobileheader / .wsmenucontainer
                                                     margin-right: 340px
   The drawer does not overlay the page: opening it pushes the page and the mobile
   bar 340px aside and slides the panel into the gap. All of the below works with
   that, not against it.
   ========================================================================== */
@media (max-width: 991px) {

    /* ----- scrim -----
       The stock rule ramps opacity over 1.5s, which reads as the drawer opening
       before its backdrop catches up. Match the 0.25s the panel slide uses. */
    .wsmenu .overlapblackbg {
        background-color: rgba(26, 26, 26, .55);
        transition: opacity .25s ease-in-out !important;
    }

    /* ----- panel ----- */
    .wsmenu > .wsmenu-list {
        /* Clears the fixed announcement strip only — NOT the whole header band. The
           mobile bar slides out of the way while the drawer is open, so reserving its
           height here just left an empty white gap above the first row (visible in the
           reference shot). The drawer's own header fills that space instead. */
        padding-top: var(--m-topbar-h);
        background: var(--color-white);
        box-shadow: -18px 0 44px rgba(26, 26, 26, .20);
        text-align: right;
    }

    /* ----- drawer header ----- */
    .wsmenu > .wsmenu-list > li.wsmenu-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        height: 62px;
        padding: 0 20px;
        border-bottom: 1px solid var(--color-line);
        background: var(--color-bg-soft);
    }

    .wsmenu-head-title {
        color: var(--color-primary);
        font-size: 15px;
        font-weight: 700;
        letter-spacing: .3px;
    }

    .wsmenu-head-close {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 38px;
        height: 38px;
        padding: 0;
        border: 1px solid var(--color-line);
        border-radius: 50%;
        background: var(--color-white);
        color: var(--color-primary);
        cursor: pointer;
        transition: background .15s ease, color .15s ease;
    }

    .wsmenu-head-close:hover,
    .wsmenu-head-close:focus-visible {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--color-white);
    }

    /* The stock close affordance was the hamburger itself, riding the sliver of
       .wsmobileheader still on screen once the bar had been pushed 340px aside — a
       grey slab floating in the scrim with an X on it, which is the odd block in the
       reference shot. The drawer has a real close button now, so retire the slab and
       the X together. Tapping the scrim still closes, as before. */
    .wsactive .wsmobileheader {
        background: transparent;
        box-shadow: none;
        border: none;
    }

    .wsactive .wsmobileheader .wsanimated-arrow {
        display: none;
    }

    /* ----- rows ----- */
    .wsmenu > .wsmenu-list > li > a {
        display: flex;
        align-items: center;
        /* MUST stay static (webslidemenu's own value). A positioned anchor paints
           above the absolutely-positioned .wsmenu-click that sits over the row, and
           that toggle is what opens the subcategories — see the note on it below. */
        min-height: 54px;
        /* end-side padding keeps the label clear of the chevron */
        padding: 12px 20px 12px 52px;
        border-bottom: 1px solid var(--color-line);
        color: var(--color-text);
        font-size: 15px;
        font-weight: 500;
        line-height: 1.35;
        transition: background .15s ease, color .15s ease;
    }

    /* webslidemenu's own :hover re-declares `padding: 0 6px`, which made the row jump
       on touch-hover; restate the padding so only the colours change */
    .wsmenu > .wsmenu-list > li > a:hover,
    .wsmenu > .wsmenu-list > li > a:focus,
    .wsmenu > .wsmenu-list > li > a:active {
        padding: 12px 20px 12px 52px;
        background: var(--color-bg-soft);
        color: var(--color-primary);
    }

    /* ----- submenu toggle -----
       webslidemenu prepends `<span class="wsmenu-click">` to every row that has
       children and sizes it `position:absolute; width:100%; height:49px` — an
       invisible sheet over the WHOLE row, so tapping anywhere on a parent category
       expands it. That is how this drawer has always worked and it stays that way;
       only the height changes, to cover the taller rows above.

       (An earlier revision narrowed this to a 58px chevron-only target so the label
       would navigate instead. That is the more common drawer contract but it is not
       this drawer's, and losing one-tap access to the subcategories is the worse
       trade. Reverted.) */
    .wsmenu > .wsmenu-list > li > .wsmenu-click {
        height: 54px;
    }

    /* The plugin's own arrow glyph is display:none (set in TopMenu/Default.cshtml), so
       the visible chevron is the .nav-caret svg inside the anchor. Park it at the end
       edge of the row rather than trailing the label, and flip it on expand.

       Positioned against the <li> — which webslidemenu already sets `position:
       relative` — and NOT against the anchor. Making the anchor a containing block
       also makes it a positioned box, which puts it ABOVE the absolutely positioned
       .wsmenu-click in paint order; the toggle then receives no taps at all and no
       submenu can open. `top` is therefore a fixed half-row rather than 50%, since
       the <li> grows to include the expanded panel.

       pointer-events:none so the chevron never intercepts a tap meant for the
       full-row toggle underneath it. */
    .wsmenu > .wsmenu-list > li > a > .nav-caret {
        position: absolute;
        top: 27px;
        left: 22px;
        margin: 0;
        width: 13px;
        height: 13px;
        opacity: 1;
        color: var(--color-primary);
        transform: translateY(-50%);
        transition: transform .2s ease;
        pointer-events: none;
    }

    .wsmenu > .wsmenu-list > li > .wsmenu-click.ws-activearrow ~ a > .nav-caret {
        transform: translateY(-50%) rotate(180deg);
    }

    /* ----- account group -----
       The last rows (register / login, or my-account / logout) are a different kind of
       destination from the catalogue above them. `:has()` keeps the rule on the row
       itself without inventing a wrapper in the markup; where it is unsupported the
       rows simply stay in the main list, which is the current behaviour. */
    .wsmenu > .wsmenu-list > li:has(> a.ico-register),
    .wsmenu > .wsmenu-list > li:has(> a.ico-account) {
        margin-top: 10px;
        border-top: 1px solid var(--color-line);
    }

    .wsmenu > .wsmenu-list > li > a.ico-register,
    .wsmenu > .wsmenu-list > li > a.ico-login,
    .wsmenu > .wsmenu-list > li > a.ico-account,
    .wsmenu > .wsmenu-list > li > a.ico-logout {
        gap: 10px;
        color: var(--color-primary-dark);
        font-weight: 600;
    }

    .wsmenu > .wsmenu-list > li > a > .l-icon {
        font-size: 18px;
        color: var(--color-primary);
    }

    /* ----- submenu panel -----
       .wsmegamenu is the desktop mega panel reused as an accordion body down here. */
    .wsmenu > .wsmenu-list > li > .wsmegamenu {
        background: var(--color-bg-soft);
        border-bottom: 1px solid var(--color-line);
    }

    .wsmenu > .wsmenu-list > li > .wsmegamenu .wstheading > a {
        color: var(--color-primary);
        font-weight: 700;
    }
}

/* The drawer header is markup that only makes sense off-canvas; above the breakpoint
   .wsmenu-list is the horizontal desktop bar and it would render as a stray cell. */
@media (min-width: 992px) {
    .wsmenu > .wsmenu-list > li.wsmenu-head {
        display: none;
    }
}

/* =============================================================================
   17. QUICKRIBBONS BADGE — product cards  (.ribbons, in grids and sliders)
   ==========================================================================
   Section 11 handles the details-page variant (.product-ribbons). This is the other
   one the plugin ships, and it lands in every product card: recommended strip,
   related, also-purchased, category grids.

   Why the badge sits ABOVE the card instead of on it. QuickRibbons/Views/Public/
   Script.cshtml:86-90 moves it out of the card on DOM ready:

       $(".product-item").each(function () {
           $(this).find('div.ribbons').insertBefore($(this));
       });

   so what was a child of .product-item becomes its previous SIBLING, inside
   .item-box. The plugin then positions the image `absolute; top:4px; left:0` against
   .ribbons — but .ribbons is a zero-height block sitting above the card, so top:4px
   is 4px below the top of nothing, and the badge floats in the gap. At the plugin's
   own `width: 40px` that reads as a small misplacement; at the size the artwork is
   actually being served it becomes the full-width disc in the reference shot,
   pushing every card down by its own height.

   THE BADGE CANNOT BE TAKEN OUT OF FLOW FROM HERE. The plugin writes the Ribbons.Css
   column into the style ATTRIBUTE, and for this store that column holds:

       <div class="ribbons" style="position: relative !important;">

   An !important declaration in a style attribute outranks every author rule,
   !important or not, so `position: absolute` on this element is silently discarded.
   Same wall section 11 hit on the details page.

   So work WITH the relative box rather than against it: give it ZERO HEIGHT. A
   zero-height box contributes nothing to the flow, while the image inside — which the
   plugin positions `absolute; top: 4px` against it — still paints over the card below.
   Same result, no argument with the cascade.

   (An earlier revision set `height: 56px` here on the assumption the `position:
   absolute` above had taken. It had not, so the badge became a 56px in-flow block above
   every card that has one — which is exactly why the one product WITHOUT a ribbon sat
   56px higher than the other seven in the strip.) */
.item-box {
    position: relative;
}

.item-box > .ribbons {
    /* `position` is deliberately not declared: it is unwinnable, and `relative` is what
       this needs anyway — it is the containing block the plugin's own `top: 4px`
       resolves against. Likewise no top/inset offsets: .item-box's padding already puts
       this box flush with the card's start edge, and the plugin's own top/right place
       the artwork within it. */
    width: 56px;
    height: 0;
    margin: 0;
    padding: 0;
    /* MUST stay visible. The badge lives entirely outside a zero-height box, so
       `hidden` would clip it away to nothing. */
    overflow: visible;
    z-index: 3;
    /* the whole card is a link — the badge must not eat the tap */
    pointer-events: none;
}

/* The plugin writes the Ribbons.ImageCss column straight onto the element as a style
   ATTRIBUTE, and an !important declaration there outranks every author stylesheet
   rule, !important or not. `width` therefore cannot be won back from here — which is
   the same wall section 11 ran into on the details page.

   max-width and max-height are DIFFERENT properties, so they are not in that fight at
   all: they clamp the used size whatever the inline `width` claims.

   In PIXELS, not percentages. A percentage resolves against the containing block, which
   is now zero pixels tall — `max-height: 100%` would collapse the badge to nothing. */
.item-box > .ribbons img {
    display: block;
    max-width: 56px !important;
    max-height: 56px !important;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* The caption the plugin overlays on the artwork. `inset: 0` would collapse it against
   the zero-height parent, so it gets the badge's own box explicitly. */
.item-box > .ribbons .ribbons-text {
    position: absolute;
    top: 4px;
    inset-inline-start: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
}

@media (max-width: 575px) {
    /* Cards are roughly half a phone wide in the sliders — a smaller badge so it does
       not cover the product image it is meant to annotate. Width only: the height stays
       0 for the reason above, and any offset here would push the cards out of line
       again, which is the bug this section exists to fix. */
    .item-box > .ribbons {
        width: 46px;
    }

    .item-box > .ribbons img {
        max-width: 46px !important;
        max-height: 46px !important;
    }

    .item-box > .ribbons .ribbons-text {
        width: 46px;
        height: 46px;
    }

   

    .product-item .details > a h3 {
        font-size: 14px;
        font-weight: 600;
        color: var(--color-text);
        line-height: 1.4;
        margin: 6px 0 0;
        min-height: 47px;
    }

    .bannerrow-public {
        margin-right: 0;
        margin-left: 0;
        width: 100%;
        height: auto;
        padding-top: 0;
        margin-top: -14px;
    }
}


/* Checkout "add to cart" (DiscountRules.CheckoutProducts widget).
   Its #000 comes from an inline <style> block inside the plugin's own view
   (Views/WidgetsCheckoutProducts/PublicInfo.cshtml), not from a stylesheet.
   That block sits in the page BODY, so it is later in document order than every
   <link> in <head> — including this file. With both declarations !important and
   both selectors a single class, the tie broke on order and the plugin won no
   matter what this file said.
   !important vs !important is decided by specificity FIRST, so the fix is to
   outweigh the plugin's `.applytocart-button` (0,1,0) rather than to shout
   louder. Two selectors are used so this survives either the wrapper or the
   element changing: .applytocart .applytocart-button is (0,2,0), and
   input.applytocart-button is (0,1,1).
   Only background-color needs !important here — it is the only property the
   plugin marks important; the rest is won on specificity alone. */
.applytocart .applytocart-button,
input.applytocart-button {
    min-width: 160px;
    border: 1px solid var(--color-accent);
    border-radius: 999px;
    background-color: var(--color-accent) !important;
    padding: 8px 18px;
    margin: 10px 0;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-ink);
    /* uppercase is a no-op on the Hebrew label, as elsewhere in this file */
    text-transform: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

    .applytocart .applytocart-button:hover,
    input.applytocart-button:hover {
        background-color: var(--color-primary-dark) !important;
        border-color: var(--color-primary-dark);
        color: var(--color-white);
    }


.btn-success,
input.btn-success {
    min-width: 100px;
    border: 1px solid var(--color-accent);
    border-radius: 999px;
    background-color: var(--color-accent) !important;
    padding: 8px 18px;
    margin: 0px 0;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-ink);
    /* uppercase is a no-op on the Hebrew label, as elsewhere in this file */
    text-transform: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn-success:hover,
input.btn-success:hover {
        background-color: var(--color-primary-dark) !important;
        border-color: var(--color-primary-dark);
        color: var(--color-white);
    }