/* ==========================================================================
   GLOBAL OVERFLOW GUARD — full-bleed homepage sections
   ==========================================================================
   Every homepage block (hero, feature matrix, roadmap, model browser) is
   injected by the zonehomeblocks module INSIDE the theme's centred container,
   so each one breaks out to the viewport edge with:

       width:100vw; left:50%; margin-left:-50vw;

   100vw is the viewport width INCLUDING the scrollbar. On macOS scrollbars are
   overlays and occupy no layout space, so this looks perfect. On Windows and
   Android the scrollbar is ~17px of real layout width, so 100vw is ~17px wider
   than the space actually available: each of those sections then pushes the
   document ~9px wider than the screen. The visible result is a horizontal
   scrollbar and a page that can be dragged sideways on a phone.

   `overflow-x:clip` on the root removes that overflow. `clip` is used instead
   of `hidden` deliberately: `hidden` turns <html> into a scroll container and
   breaks `position:sticky` (the sticky header). `clip` does not.
   ========================================================================== */
html {
    overflow-x: clip;
}
/* Fallback for browsers without overflow:clip (pre-2020). */
@supports not (overflow: clip) {
    html {
        overflow-x: hidden;
    }
}

/* ==========================================================================
   ACCOUNT LINKS — RESTORED (previously hidden)
   ==========================================================================
   Two blocks used to live here that hid almost every account link, leaving only
   "Information" and "My Garage":

     1. #left-column .block-myaccount-infos a:not([href*="identity"]) ...
        #left-column .links a:not([href*="identity"]) ...
        #left-column [class*="account"] a:not([href*="identity"]) ...
     2. header [class*="user-info"] .dropdown-menu a:not([href*="identity"]) ...
     3. #history-link, #order-slip-link, #addresses-link, #discounts-link,
        #returns-link and the plural variants — display:none !important
     4. #left-column .block-myaccount-infos a[href*="history"|"order"|"slip"|
        "address"|"discount"|"follow"] — display:none !important

   They are all removed: order history, credit slips, addresses, vouchers and
   merchandise returns are visible again, in both the account sidebar and the
   header account dropdown.

   The same rules were also duplicated in assets/css/custom_rtl.css, a file that
   is not loaded and is not about RTL at all. That file has been emptied for the
   same reason, so it cannot hide these links if it is ever linked by mistake.

   If the links ever disappear again, check for these selectors in the Back
   Office's custom-CSS field before looking anywhere else: an earlier copy of this
   code was pasted there, and anything in that field is emitted into the page
   independently of this file.
   ========================================================================== */


/* ==========================================================================
   PRIME MEMBERSHIP — TuniTag dark + gold restyle
   ==========================================================================
   The vendor module (tfprimemembershippro) ships a light template: white
   cards, hard `5px 5px #ddd` offset shadows, and a blue/purple gradient price
   header. It predates TuniTag branding and looked like a different product on
   the page where customers buy a Smart Key.

   These rules move the plans page and "my membership" onto the site's own
   palette (measured live): page #141414, surface #242424, gold #d4af37,
   gold-pressed #b29126.

   Scoped to .tt-membership, a class added to both templates, so no other page
   is affected. Kept in the THEME rather than the module so a vendor module
   update does not erase it. The class is applied in the module templates, so
   those templates must still be re-patched after a vendor update — see
   prestashop/modules/tfprimemembershippro/TUNITAG_PATCHES.md

   !important is used deliberately: the vendor sheet targets #tfmain, an ID,
   so ordinary class selectors cannot outrank it.
   ========================================================================== */

/* --- Page header card (replaces the inline white box + offset shadow) --- */
#tfmain.tt-membership .tt-mem-header,
#main.tt-membership .tt-mem-header {
    background: #1b1b1b;
    border: 1px solid #2e2e2e;
    border-left: 3px solid #d4af37;
    border-radius: 14px;
    padding: 16px 22px;
    margin: 0 0 22px;
    box-shadow: none;
}

#tfmain.tt-membership .tt-mem-title,
#main.tt-membership .tt-mem-title {
    margin: 0;
    padding: 0;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #f5f5f5;
}

/* The vendor markup leaves a bare <hr> under the header; it renders as a
   bright line on the dark background. */
#tfmain.tt-membership > hr,
#main.tt-membership > hr {
    display: none;
}

#tfmain.tt-membership .tt-mem-btn,
#main.tt-membership .tt-mem-btn {
    float: none !important;
    background: #d4af37 !important;
    border: 1px solid #d4af37 !important;
    color: #111 !important;
    font-weight: 700;
    border-radius: 999px;
    padding: 9px 22px;
}

#tfmain.tt-membership .tt-mem-btn:hover,
#main.tt-membership .tt-mem-btn:hover {
    background: #b29126 !important;
    border-color: #b29126 !important;
    color: #111 !important;
}

/* --- Plan cards --- */
#tfmain.tt-membership .price-box {
    background: #1b1b1b;
    border: 1px solid #2e2e2e;
    border-radius: 16px;
    box-shadow: none;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease;
}

#tfmain.tt-membership .price-box:hover {
    border-color: rgba(212, 175, 55, .45);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
}

/* Kill the vendor's blue/purple gradient and its white overlay layer. */
#tfmain.tt-membership .price-box .price-header {
    background: #242424 !important;
    background-image: none !important;
    filter: none !important;
    color: #f5f5f5 !important;
    min-height: 0;
    padding: 24px 20px;
}

#tfmain.tt-membership .price-box .price-header:before {
    display: none !important;
}

#tfmain.tt-membership .price-box .price-header h4 {
    color: #d4af37;
    font-weight: 700;
    letter-spacing: .06em;
}

#tfmain.tt-membership .price-box .price-body {
    padding: 20px;
    background: #1b1b1b;
}

#tfmain.tt-membership .price-box .price-list,
#tfmain.tt-membership .price-list {
    max-height: none;
    min-height: 0;
}

#tfmain.tt-membership .price-box .presta-desc {
    color: #a0a0a0;
    height: auto;
    max-height: 160px;
}

#tfmain.tt-membership .price-box .price-rate {
    color: #f5f5f5;
}

#tfmain.tt-membership .price-box .price-rate .rate {
    color: #d4af37;
    font-weight: 700;
}

#tfmain.tt-membership .price-box .price-rate small,
#tfmain.tt-membership .price-box .price-rate sup {
    color: #a0a0a0;
}

/* --- Buttons inside the cards --- */
#tfmain.tt-membership .price-box .btn-outline-primary {
    border: 1px solid #d4af37;
    color: #d4af37;
    background: transparent;
    border-radius: 999px;
    font-weight: 700;
}

#tfmain.tt-membership .price-box .btn-outline-primary:hover {
    background: #d4af37;
    border-color: #d4af37;
    color: #111;
}

/* Purchase button. The vendor layer draws a white overlay via :before and
   only reveals its gradient on hover; both are removed so the button is a
   solid gold CTA at rest. */
#tfmain.tt-membership .price-box .price-footer .bttn-white,
#tfmain.tt-membership .bttn-white,
#tfmain.tt-membership .bttn-default {
    background: #d4af37 !important;
    background-image: none !important;
    color: #111 !important;
    border: none;
    border-radius: 999px;
    padding: 12px 34px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

#tfmain.tt-membership .bttn-white:before,
#tfmain.tt-membership .bttn-default:before {
    display: none !important;
}

#tfmain.tt-membership .bttn-white:hover,
#tfmain.tt-membership .bttn-white.active,
#tfmain.tt-membership .bttn-default:hover {
    background: #b29126 !important;
    color: #111 !important;
}

/* --- The card picture, and the card's place in the row -------------------
   THE PICTURE WAS THE WORST OF IT. The vendor template wrote
   width="150" height="159" on the product image: a 0.94:1 portrait box around a
   1.54:1 landscape photograph, painted with the browser default
   object-fit:fill. Measured on the live page, the source is 502x325 and it was
   being drawn at 150x159 inside a 328px-wide wrapper — squashed horizontally,
   and then left as a stamp in a wide empty area. That is what reads as "cropped
   small from left and right": it was not cropped, it was distorted and small.

   The fix is in two places on purpose. The template now carries the image's OWN
   aspect ratio in the width/height attributes, which is what those attributes
   are for — reserving the right space before the file loads so the card does not
   jump. These rules then scale it and refuse to distort it: width:100% with
   object-fit:contain means a replacement picture of any other shape still
   renders whole rather than stretched or cut.

   The .lnr rocket span is neutralised rather than hidden. ZOneTheme does not
   ship LineIcons, so it contributes no glyph — but it does inherit
   .price-icon's 60px font-size and reserve a line box above the picture. */
#tfmain.tt-membership .price-box .price-icon,
#tfmain.tt-membership .price-box .price-icon .lnr {
    font-size: 0;
    line-height: 0;
    margin: 0;
    padding: 0;
}

#tfmain.tt-membership .price-box .tt-plan-img,
#prestaModal .tt-plan-img {
    display: block;
    width: 100%;
    height: auto;
    /* Both dimensions are definite here, so object-fit takes effect: if a taller
       picture is ever uploaded it is letterboxed inside this cap, not squashed
       by it. The letterbox bands are invisible — the artwork's own background is
       near-black on a near-black card. */
    max-height: 300px;
    object-fit: contain;
    margin: 0 auto;
    border: 1px solid #2e2e2e;
    border-radius: 12px;
}

/* ONE CARD IN A THIRD OF THE PAGE. The vendor emits col-sm-4 to a row that
   happens to hold a single Smart Key, so two thirds of the page sat empty and
   the card looked orphaned. Flex with a max-width lets the same markup hold one,
   two or three keys: one centres, and more than one sit side by side and wrap
   when there is no room. Nothing here assumes a count. */
#tfmain.tt-membership .page-content > .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    margin-left: 0;
    margin-right: 0;
}

#tfmain.tt-membership .page-content > .row > [class*="col-"] {
    float: none;
    width: auto;
    flex: 1 1 300px;
    /* 480px rather than a third of the page: it is the width at which the
       description holds a comfortable 65-ish characters per line, and it still
       leaves room for two keys side by side on a 1440 screen. */
    max-width: 480px;
    margin-bottom: 30px;
    /* Column direction so .price-box and the vendor's .tfbottom spacer stack
       instead of sitting side by side, which is what a plain display:flex would
       do to them on a phone. */
    display: flex;
    flex-direction: column;
}

/* Cards in a row are the same height whatever their copy length, so the two
   buttons line up. */
#tfmain.tt-membership .page-content > .row > [class*="col-"] > .price-box {
    flex: 1 1 auto;
    width: 100%;
}

/* The spacer the vendor emits for phones. Wrapped-row spacing is the
   margin-bottom above, so this would double it. */
#tfmain.tt-membership .tfbottom {
    display: none !important;
}

/* --- Name, description, price: one rhythm down the card --- */

#tfmain.tt-membership .price-box .price-header h4 {
    margin: 16px 0 0;
    font-size: 20px;
    line-height: 1.25;
}

/* The vendor set height:120px with overflow:auto, so a description longer than
   that got its own scrollbar inside a card — a small scrolling box on the page
   where someone is deciding to buy. Our earlier rule lifted the fixed height but
   left the overflow behind; both go.

   The live description is 1087 characters with its paragraph and bullet
   structure flattened away, which renders as a 19-line wall and is what pushed
   the card to 1022px tall. NO AMOUNT OF CSS MAKES A PARAGRAPH THAT LONG SHORT.
   The real fix is the text itself, in the module's plan form — see the note in
   TUNITAG_PATCHES.md. The clamp below is only a guard so that a long value
   cannot wreck the card again: at 8 lines it holds roughly 520 characters, so a
   description of the recommended length is shown in full with nothing hidden,
   and only genuinely excessive text is trimmed with an ellipsis. */
#tfmain.tt-membership .price-box .presta-desc {
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 8;
    line-clamp: 8;
    height: auto;
    max-height: none;
    overflow: hidden;
    margin: 10px 0 0;
    font-size: 0.86rem;
    line-height: 1.62;
    text-align: left;
    /* Long unbroken tokens (a pasted URL, an email) must wrap, not force the
       card wider than its column. */
    overflow-wrap: anywhere;
}

/* The vendor separates the price from the access period with two literal <br>
   tags. Hidden here and replaced with margin, so the spacing is part of the
   stylesheet rather than baked into the markup. */
#tfmain.tt-membership .price-box .price-rate br {
    display: none;
}

#tfmain.tt-membership .price-box .price-rate {
    margin: 20px 0 0;
    padding: 0 20px;
    line-height: 1.2;
}

/* --- The price, written the way the rest of the site writes it --------------
   The card and the modal both show the price as one small grey currency beside
   one large white number — "TND 89,99". The proportions are not invented: they
   are measured off the treatment the product page already uses, from the supplied
   reference. The currency's cap height is 0.54 of the number's, its ink is
   #c2c7d2 against the number's #ffffff, and it is centred on the number rather
   than sitting on its baseline.

   Both halves are sized in em from the container, so changing the number's size
   in one place keeps the ratio — the currency is never a fixed px that drifts
   when the number is resized.

   line-height:1 on the container is what lets align-items:center produce the
   measured optical centring; with a taller line box the small span would sit
   high. Scoped to the two places that use it rather than defined globally, so
   nothing else on the site inherits the treatment by accident. */
#tfmain.tt-membership .price-box .price-rate .rate.tt-price,
#prestaModal .presta-price .tt-price {
    display: inline-flex;
    align-items: center;
    gap: .18em;
    font-family: Montserrat, sans-serif;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

#tfmain.tt-membership .price-box .price-rate .tt-price-cur,
#prestaModal .tt-price-cur {
    font-size: .54em;
    font-weight: 600;
    letter-spacing: .02em;
    color: #c2c7d2;
}

#tfmain.tt-membership .price-box .price-rate .tt-price-num,
#prestaModal .tt-price-num {
    font-weight: 800;
    color: #fff;
}

#tfmain.tt-membership .price-box .price-rate .rate {
    font-size: 40px;
    margin-bottom: 6px;
}

#tfmain.tt-membership .price-box .price-rate small {
    display: block;
    font-size: 0.78rem;
    line-height: 1.5;
}

/* Both buttons span the card, so the two calls to action read as one column and
   are the same size to tap on a phone. */
#tfmain.tt-membership .price-box .price-body {
    padding: 18px 20px 0;
    margin-top: auto;
}

#tfmain.tt-membership .price-box .price-body .btn-outline-primary {
    display: block;
    width: 100%;
    padding: 12px 18px;
}

#tfmain.tt-membership .price-box .price-footer {
    margin: 12px 0 0;
    padding: 0 20px 24px;
}

#tfmain.tt-membership .price-box .price-footer .bttn-white {
    display: block;
    width: 100%;
    padding: 13px 18px;
    text-align: center;
}

/* --- "View features" modal (lives outside the section, so keyed on its id) ---
   The popup as the vendor shipped it: Bootstrap grid columns dropped straight
   into .modal-body with no .row around them, a 60px invisible LineIcons glyph
   above the picture, a square-bulleted feature list, and two floated buttons.
   On a phone the columns stacked, but the picture kept the vendor's 150x159 box
   and the list ran to whatever height it wanted.

   Rebuilt on the theme's own grid. Every class the vendor's script addresses is
   kept, so nothing in views/js/front/primelist.js has to know about this. */

#prestaModal .modal-dialog {
    /* Bootstrap's 600px is tight for a picture beside a list of six features; and
       on a phone the margin gives the dialog breathing room from the edges. */
    max-width: 720px;
    margin: 1.5rem auto;
    width: calc(100% - 2rem);
}

#prestaModal .modal-content {
    background: #1b1b1b;
    border: 1px solid #2e2e2e;
    border-radius: 16px;
    color: #f5f5f5;
    /* The dialog carries a gold hairline on the top edge, so the popup reads as
       part of the same family as the header card on the page behind it. */
    border-top: 3px solid #d4af37;
    overflow: hidden;
}

#prestaModal .modal-body {
    color: #f5f5f5;
    padding: 26px 26px 22px;
}

/* --- Picture beside the details, stacked on a phone --- */
#prestaModal .tt-modal-grid {
    display: flex;
    align-items: flex-start;
    gap: 26px;
}

#prestaModal .tt-modal-media {
    flex: 0 0 258px;
    max-width: 258px;
}

#prestaModal .tt-modal-info {
    flex: 1 1 auto;
    min-width: 0;
}

/* The vendor wrapped the picture in a .lnr span, which inherits .price-icon's
   60px font-size on the card and reserves a line box here. Neutralised, exactly
   as on the card. */
#prestaModal .presta-modal-plan-img {
    display: block;
    font-size: 0;
    line-height: 0;
}

#prestaModal .presta-plan-name {
    color: #d4af37;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
    margin: 0 0 6px;
}

#prestaModal .presta-duration {
    color: #a0a0a0;
    font-size: .86rem;
    line-height: 1.5;
}

#prestaModal .presta-price {
    margin-top: 16px;
    /* The number is the largest thing in the dialog after the name, so it gets
       the room: 36px here against the card's 40px. */
    font-size: 36px;
}

/* --- The feature list ---
   Was list-style-type: square, browser default padding. Now a ticked list with
   its own scroll area, so a plan with twenty features cannot push the buttons off
   the bottom of a phone screen. */
#prestaModal .presta-card {
    margin-top: 22px;
}

#prestaModal .presta-card h5 {
    margin: 0;
    padding: 0 0 10px;
    border-bottom: 1px solid #2e2e2e;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #8d95a3;
}

#prestaModal .presta-features-count {
    color: #d4af37;
}

#prestaModal .presta-prime-features {
    list-style: none;
    margin: 0;
    padding: 12px 0 0;
    max-height: 40vh;
    overflow-y: auto;
    /* Keeps a long list's scrollbar off the rounded corner. */
    overscroll-behavior: contain;
}

#prestaModal .presta-prime-features li {
    position: relative;
    padding: 0 0 9px 22px;
    color: #d8d8d8;
    font-size: .88rem;
    line-height: 1.55;
}

/* The tick is a plain U+2713 rather than a Font Awesome glyph: it renders in any
   font the dialog falls back to, so the list cannot lose its marks if the icon
   font is ever missing. Gold, to match the ticks under the buy button. */
#prestaModal .presta-prime-features li:before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    color: #d4af37;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.7;
}

/* --- Footer ---
   The vendor floated both buttons right, which put Close in the reading position
   and Order yours furthest out. Side by side, stacked on a phone, with the
   primary action last. */
#prestaModal .presta-modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #2e2e2e;
}

#prestaModal .presta-modal-close,
#prestaModal .presta-modal-purchase-btn {
    float: none;
    margin: 0;
    /* box-sizing matters here: this element computes to content-box, so the
       theme's 44px tap target was being measured on the content box and the 11px
       padding and 1px border were then added on top of it — measured, the primary
       button rendered 68px tall next to the Close button's 44px. Border-box makes
       the target the visible size. inline-flex centres the label in whatever
       height results instead of leaving it at the top of the content box. */
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tt-tap, 44px);
    height: auto;
    padding: 11px 24px;
    border-radius: 999px;
    font-weight: 700;
}

#prestaModal .presta-modal-close {
    background: transparent;
    border: 1px solid #4a4a4a;
    color: #d8d8d8;
    /* The source string is 'close' and it is the key the FR/AR translations are
       stored under, so it is not changed in the template. Capitalised for display
       only, so it matches "Order yours" beside it without orphaning a translation. */
    text-transform: capitalize;
}

#prestaModal .presta-modal-close:hover {
    background: #2a2a2a;
    border-color: #5a5a5a;
    color: #fff;
}

#prestaModal .presta-modal-purchase-btn {
    background: #d4af37;
    border: 1px solid #d4af37;
    color: #111;
}

#prestaModal .presta-modal-purchase-btn:hover {
    background: #b29126;
    border-color: #b29126;
    color: #111;
}

/* Stacked on a phone: picture above the details, full-width buttons, and the
   primary action nearest the thumb. */
@media (max-width: 575px) {
    #prestaModal .modal-body {
        padding: 20px 18px 18px;
    }

    #prestaModal .tt-modal-grid {
        display: block;
    }

    #prestaModal .tt-modal-media {
        flex: none;
        max-width: none;
        margin-bottom: 20px;
    }

    #prestaModal .presta-plan-name {
        font-size: 1.2rem;
    }

    #prestaModal .presta-price {
        font-size: 32px;
    }

    #prestaModal .presta-prime-features {
        max-height: none;
    }

    #prestaModal .presta-modal-footer {
        display: flex;
        /* Column, not column-reverse: keeps the DOM order — Close then Order
           yours — which is the desktop order, and puts the primary action at the
           bottom of the dialog, nearest the thumb. */
        flex-direction: column;
        align-items: stretch;
    }
}

/* --- My membership: the plans table --- */
#main.tt-membership .prsta-table {
    background: transparent;
    color: #f5f5f5;
}

#main.tt-membership .prsta-table thead th {
    background: #242424;
    color: #d4af37;
    border-color: #2e2e2e;
    font-weight: 700;
}

#main.tt-membership .prsta-table td {
    background: transparent;
    color: #e8e8e8;
    border-color: #2e2e2e;
}

#main.tt-membership .prsta-table tbody tr:hover,
#main.tt-membership .prsta-table.table-hover tbody tr:hover {
    background: #1f1f1f;
}

#main.tt-membership .prsta-table .btn-primary {
    background: #d4af37 !important;
    border-color: #d4af37 !important;
    color: #111 !important;
    border-radius: 999px;
    font-weight: 700;
}

/* --- Shared empty state --- */
.tt-membership .presta-no-plan {
    color: #a0a0a0;
}

/* --- Page surface: defeat the vendor's unqualified white panel ---------------
   myprime.css (loaded only by the myprime controller) ships a bare ID rule:

       #main { background:#FFF; padding:15px; box-shadow:0 0 0 5px #FFF; }

   Every override above targets descendants (#main.tt-membership ...), never
   #main itself, so that white panel won and painted white text on a white
   background. The only reason the text became readable on hover is Bootstrap's
   .table-hover tbody tr:hover { background-color: rgba(0,0,0,.075) }, which
   darkened the row underneath. Neutralise the panel, keep the vendor's
   padding/margin. */
#main.tt-membership,
#tfmain.tt-membership {
    background: transparent !important;
    box-shadow: none !important;
}

/* --- My membership table on small screens -----------------------------------
   The table is 8 columns wide with no responsive handling: .table-labeled in the
   theme only sets vertical-align and label chips, so the row simply ran off the
   right edge. Below the md breakpoint each row becomes a stacked card and every
   cell shows its own column name, read from data-label (translated in
   myprime.tpl so EN/FR/AR all work). */
@media (max-width: 991.98px) {
    #main.tt-membership .prsta-table,
    #main.tt-membership .prsta-table tbody,
    #main.tt-membership .prsta-table tr,
    #main.tt-membership .prsta-table td {
        display: block;
        width: 100%;
    }

    /* Column names are redundant once each value is labelled. */
    #main.tt-membership .prsta-table thead {
        display: none;
    }

    #main.tt-membership .prsta-table {
        margin: 0;
    }

    #main.tt-membership .prsta-table tbody tr {
        background: #1b1b1b;
        border: 1px solid #2e2e2e;
        border-radius: 14px;
        margin-bottom: 16px;
        padding: 6px 16px;
        overflow: hidden;
    }

    #main.tt-membership .prsta-table td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        padding: 11px 0;
        border: 0;
        border-bottom: 1px solid #262626;
        text-align: right;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    #main.tt-membership .prsta-table td:last-child {
        border-bottom: 0;
    }

    /* Keep the row's control from forcing the row wider than the screen. A
       flex item defaults to min-width:auto, so a long label such as
       "Link a new Smart Key" would otherwise refuse to shrink. */
    #main.tt-membership .prsta-table td::before {
        content: attr(data-label);
        flex: 0 0 44%;
        min-width: 0;
        font-weight: 700;
        color: #d4af37;
        text-align: left;
        line-height: 1.4;
    }

    #main.tt-membership .prsta-table td .btn {
        margin-left: auto;
        min-width: 0;
        max-width: 100%;
        white-space: normal;
        text-align: center;
    }
}

/* Arabic reads right-to-left, so the label/value pair mirrors with it. */
html[lang="ar"] #main.tt-membership .prsta-table td {
    text-align: left;
}
html[lang="ar"] #main.tt-membership .prsta-table td::before {
    text-align: right;
}

/* ==========================================================================
   THEME COLOUR OVERRIDE — remove the stray electric blue #204dff
   ==========================================================================
   WHY THIS EXISTS
   ---------------
   Theme colours are NOT stored in this theme. The zonecolorsfonts module
   reads them from the ps_zcolorsfonts table and injects a <style> block at
   runtime (hooked to displayHeader).

   One of those stored values is #204dff, a bright electric blue. It is
   wired into the site's global link colour, the product price colour, the
   cart badge, discount flags and every checked checkbox/radio. Mapped back
   through the module's selector.xml, the value sits in fields the vendor
   named "Pink" / "… on Hover" — which is how a blue ended up somewhere
   nobody would look for it.

   Fixing it in the Back Office colour editor would work, but a database
   value is not version-controlled, not backed up, and can be silently
   overwritten by anyone re-saving that form. Overriding it here instead
   keeps the fix in git, reviewable and revertible.

   WHY !important
   --------------
   The injected <style> is emitted AFTER the theme's compiled CSS link
   (measured: link at byte 1126, <style> at byte 8544), so on equal
   specificity it wins. !important is required, not decorative.

   SCOPE
   -----
   Only the selectors that still resolve to blue are listed. The module's
   injected block contains 52 rules and several already re-specify the same
   selectors as gold further down; those 23 selectors resolve correctly and
   are deliberately left alone. Values come from the measured live palette:
   gold #d4af37, gold-pressed #b29126, page #141414.
   ========================================================================== */

/* --- Global link and interactive-text hover --- */
a:hover,
.btn-link:hover,
.page-link:hover,
.btn-teriary:hover,
.btn.btn-teriary:hover,
.icon-link:hover,
.dropdown .expand-more:hover,
.dropdown a.expand-more:hover,
.dropdown-item:hover,
.dropdown-item:focus,
.ui-autocomplete.ui-menu .ui-menu-item .ui-state-focus,
.ui-autocomplete.ui-menu .ui-menu-item .ui-state-hover,
.page-my-account #content .links a:hover,
#header .left-nav-trigger .left-nav-icon:hover,
.feature a:hover,
.feature2 .fa,
.feature2 .material-icons {
    color: #d4af37 !important;
}

/* --- Prices and product names --- */
.product-price,
.price-total,
.product-name a:hover,
a.product-name:hover,
.cart-items-review .product-line-grid .product-prices .qty {
    color: #d4af37 !important;
}

/* --- Checkout step markers --- */
.checkout-step-order .step-part.current .part-icon,
.checkout-step-order .step-part.current.reachable.complete .part-icon {
    color: #d4af37 !important;
}

/* --- Checkboxes and radios: gold instead of blue --- */
.custom-checkbox input[type="checkbox"]:hover + .check-shape,
.custom-radio input[type="radio"]:hover + .check-shape,
.custom-checkbox input[type="checkbox"]:checked + .check-shape,
.custom-radio input[type="radio"]:checked + .check-shape,
.custom-checkbox .check-shape.color .check-circle,
.custom-radio .check-shape.color .check-circle {
    border-color: #d4af37 !important;
}

/* Filled states need dark glyphs: the theme draws these marks in white,
   which is unreadable on gold. */
.custom-checkbox input[type="checkbox"]:checked + .check-shape,
.custom-radio input[type="radio"]:checked + .check-shape {
    background-color: #d4af37 !important;
    color: #141414 !important;
}

/* --- Selected thumbnails, swatches and tree markers --- */
.main-product-details .product-images li.thumb-container .thumb.selected,
#product-modal .product-images img.selected,
.product-swatches .swatches-list > li.selected > span.color .check-circle,
.category-tree > ul > li > a:hover:before,
.banner2 a:before {
    border-color: #d4af37 !important;
}

/* --- Cart badge, discount flags and menu badge ---
   These are filled chips. The theme sets white text on them, which fails
   contrast on gold, so the text is darkened to the page colour. */
.cart-preview .cart-header .cart-products-count,
#header .sticky-icon-cart .cart-products-count,
.discount-percentage,
.discount-amount,
.product-flags .product-flag.discount span,
.product-flags .product-flag.on-sale span,
.anav-top .amenu-link > sup {
    background-color: #d4af37 !important;
    color: #141414 !important;
}

/* ==========================================================================
   DESIGN TOKENS
   ==========================================================================
   The single source of truth for TuniTag brand values on the website. These
   match lib/theme/app_colors.dart in the Flutter app, so the site and the app
   cannot drift apart. Use these instead of hard-coding hex values in new work.
   ========================================================================== */
:root {
    --tt-gold: #d4af37;          /* goldMetal — the only brand gold */
    --tt-gold-pressed: #b29126;  /* hover / active state            */
    --tt-gold-dim: rgba(212, 175, 55, .13);
    --tt-gold-line: rgba(212, 175, 55, .30);
    --tt-page: #0a0a0a;          /* page background (app background) */
    --tt-surface: #111111;       /* card surface                    */
    --tt-surface-2: #141414;     /* raised surface                  */
    --tt-line: #222222;          /* hairline border                 */
    --tt-text: #ffffff;
    --tt-body: #a4a4ac;
    --tt-mute: #6a6a6a;
    --tt-radius: 14px;
    --tt-radius-pill: 999px;
    --tt-tap: 44px;              /* minimum touch target            */
}

/* ==========================================================================
   KEYBOARD FOCUS
   ==========================================================================
   The vendor theme removes outlines in several places, which makes the site
   look unfinished when tabbing and fails WCAG 2.4.7. One consistent gold ring
   on every focusable element fixes both.
   ========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--tt-gold);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ==========================================================================
   MOBILE READABILITY & TOUCH TARGETS
   ==========================================================================
   Measured on the live site at a 375px viewport (iPhone-class). Two real
   problems were found, both theme-level, so fixing them here fixes every page
   at once.

   1. TAP TARGETS below the 44x44px minimum in WCAG 2.5.5 / Apple's HIG.
      Measured before this fix:
        cart button          34 x 34 px
        sign-in link         82 x 24 px
        language switcher    90 x 26 px
        footer social icons  40 x 40 px
        "Become Prime" link 177 x 20 px
      On a phone these are genuinely hard to hit.

   2. TEXT below 12px. Almost all of it lived in the OLD homepage blocks and is
      fixed in the block markup itself; the only theme-level case left is the
      cart counter at 10px, handled below.

   Sizing is applied to the interactive element itself with min-width/min-height
   rather than by adding margins, so the visual design is untouched and only the
   hit area grows. min-* deliberately never shrinks anything already larger.
   ========================================================================== */
@media (max-width: 991.98px) {

    /* --- Cart button --- */
    ul.cart-header > li > a.cart-link,
    #header .cart-link,
    #header .sticky-icon-cart > a {
        min-width: var(--tt-tap);
        min-height: var(--tt-tap);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* --- Sign in / my account --- */
    li > div.account-link > a,
    .account-link > a {
        min-height: var(--tt-tap);
        display: inline-flex;
        align-items: center;
    }

    /* --- Language switcher --- */
    .language-selector .dropdown-current,
    .language-selector .btn-unstyle.dropdown-current {
        min-height: var(--tt-tap);
        display: inline-flex;
        align-items: center;
    }

    /* --- Footer social icons --- */
    ul.social-links > li > a {
        min-width: var(--tt-tap);
        min-height: var(--tt-tap);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* --- Prime advertisement link --- */
    .presta_prime_advertisement a {
        min-height: var(--tt-tap);
        display: inline-flex;
        align-items: center;
    }

    /* --- Logo link (image link: give it a real hit area) --- */
    .header-logo > a {
        min-height: var(--tt-tap);
        display: inline-flex;
        align-items: center;
    }

    /* --- Cart counter: lift off the 10px floor --- */
    .cart-preview .cart-header .cart-products-count,
    #header .sticky-icon-cart .cart-products-count,
    a.cart-link .cart-products-count {
        font-size: 12px !important;
        line-height: 1;
    }

    /* --- Product and cart controls ---
       Measured on the live product page at 390px: the quantity stepper buttons
       rendered 30x32 and the primary "Add to cart" button was 34px tall. These
       are the main controls on the page, so they take the full 44px. */
    #add-to-cart-or-refresh .add-to-cart,
    .product-add-to-cart .add-to-cart {
        min-height: var(--tt-tap);
    }

    .product-quantity-touchspin .bootstrap-touchspin-down,
    .product-quantity-touchspin .bootstrap-touchspin-up,
    .product-quantity-touchspin input.form-control {
        min-width: var(--tt-tap);
        min-height: var(--tt-tap);
    }

    /* The cart and checkout pages reuse the same touchspin widget. */
    .cart-item .bootstrap-touchspin-down,
    .cart-item .bootstrap-touchspin-up,
    .cart-item input.js-cart-line-product-quantity {
        min-width: var(--tt-tap);
        min-height: var(--tt-tap);
    }

    /* --- Forms and call-to-action buttons ---
       Measured across the auth, contact and membership pages: primary buttons
       rendered 34px tall and form fields 42px. Anything a visitor is expected to
       tap gets the full 44px. */
    .btn,
    button.btn,
    input.btn,
    a.btn,
    #submit-login,
    #presta_features,
    .tt-plan-features,
    .tt-mem-btn,
    .form-control,
    .form-control-submit {
        min-height: var(--tt-tap);
    }

    /* --- Cookie banner ---
       The accept control is an <a> styled as a button, so it needs the full
       44px. Note the :not() on the rule below: #cookieMessage a is an ID rule and
       would otherwise outrank this class rule and hold the button at 24px.

       The inline policy links really are inside a sentence, so they only clear
       the 24px minimum that WCAG 2.5.8 sets for inline links — stretching them to
       44px would reflow the banner. */
    .cookie-close-button {
        min-height: var(--tt-tap);
    }
    #cookieMessage a:not(.cookie-close-button) {
        display: inline-block;
        min-height: 24px;
        line-height: 24px;
    }

    /* --- Footer links ---
       Two separate Back Office authored footer blocks carry link lists, and the
       theme's markup nests them differently: the legal block wraps its items in
       ul, the account block does not. Matching `li a` rather than `ul li a`
       covers both. The heading link in .column-title is included too.

       At 20px these were well under a comfortable target; they sit in a vertical
       list, so a full 44px row costs nothing but a slightly taller footer. Scoped
       to the list items: the inline contact address inside a sentence is left
       alone for the same reason as the cookie links. */
    #footer .linklist li a,
    #footer .column-title a {
        display: inline-block;
        min-height: var(--tt-tap);
        line-height: var(--tt-tap);
    }
}

/* ==========================================================================
   PAGE SURFACES — align the site chrome with the app palette
   ==========================================================================
   The site had drifted into five near-identical dark greys — #0f0f0f, #141414,
   #242424, #262626 and #3b3b3b — arriving partly from the theme and partly from
   the colour settings stored in the database. Individually each looks fine;
   together they read as slightly mismatched bands, and that is a large part of
   why pages felt assembled rather than designed.

   They are normalised onto the three-step dark scale the app already uses
   (lib/theme/app_colors.dart):

       #0a0a0a   appBackground   page surface
       #141414   systemChrome    raised chrome — header bar, footer bar, breadcrumb
       #252525   surfaceCard     cards

   The homepage blocks paint themselves #0a0a0a, so this also removes the seam
   where a block meets the surrounding page.

   !important is required: these values are emitted from the database by the
   colour/font module, so an ordinary author rule cannot be relied on to win.
   ========================================================================== */
#wrapper,
#header,
#footer {
    background-color: #0a0a0a !important;
}

/* Raised bars: one step up from the page, matching the app's chrome colour. */
#header .header-bottom,
#header .header-top,
#footer .footer-bottom,
#footer .footer-top {
    background-color: #141414 !important;
}

/* Was #3b3b3b — a grey that appears nowhere in the palette. */
.breadcrumb-wrapper {
    background-color: #141414 !important;
}

/* ==========================================================================
   TYPE FLOOR — nothing below 12px
   ==========================================================================
   Measured on the live product pages: the tax caption under the price rendered
   at 11.2px, and it is the one piece of small print a buyer needs to read.
   12px is the practical floor below which body copy stops being comfortable.
   ========================================================================== */
.tax-shipping-delivery-label,
.labels-tax-long,
.aeuc_tax_label {
    font-size: 12px !important;
    font-style: normal;
}

/* ==========================================================================
   FOOTER LINKS — check first
   ==========================================================================
   The footer link block is authored in the Back Office and its markup carries

       onmouseover="this.style.color='#dfb75c'"

   #dfb75c is one of the three golds retired in favour of the single brand gold,
   so this looked like a guaranteed source of brand drift. It is not. The
   database styling already forces the footer link colour and its hover state
   with !important, which outranks the inline value the handler writes, so the
   retired gold never renders. Measured on the live site: resting #ffffff, hover
   #d4af37.

   Nothing is overridden here deliberately. If the database styling is ever
   changed, this is the place to add a rule — not before.
   ========================================================================== */

/* ==========================================================================
   REDUCED MOTION
   ==========================================================================
   Respect the OS "reduce motion" setting across the whole site (vendor
   animations included), and make anchor jumps instant for those users.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    html {
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   ARABIC / RTL — moved
   ==========================================================================
   The Arabic rules for the homepage blocks (.tth / .ttf / .ttr / .ttm) now live
   in assets/css/tunitag-blocks.css, next to the styles they override. They were
   moved so the block CSS exists in exactly one place.

   Theme-level Arabic concerns, if any arise, still belong in this file.
   ========================================================================== */


/* ==========================================================================
   MOBILE HEADER — one 60px row: the shaped mark at the left, three bare icons right
   ==========================================================================
   CSS ONLY. No template and no module is touched, so this ships as one file.

       before   #header 100px   strip 40px + bar 60px   logo 48px, centred
       after    #header  60px   strip gone              mark 44px, hard left

   On a 390x844 phone the header goes from 12% of the first screen to 7%, and
   from 39% before any of this work started.

   WHAT MOVES, AND WHY HIDING THE STRIP IS SAFE

   The 40px strip held exactly two things: the Prime CTA, already unhooked from
   displayNav1, and the language switcher. Read on the live site across the
   homepage, a CMS page, the cart and a product page, .header-nav contains 37
   elements and every one of them belongs to the language block — nothing
   page-specific is hooked into it. The switcher is also in the drawer
   (.sidebar-language, 300x71, all three languages reachable), so hiding the row
   removes no route to anything.

   THE MARK IS BLACK BECAUSE THE ARTWORK NEEDS IT

   The artwork is 55 black paths and 3 gold ones (#d4af37). Measured against this
   grey bar the gold comes out at 1.77:1 — below the 3:1 a UI element needs, so
   it disappears and the emblem reads as a dark smudge. Against black the same
   gold measures 9.99:1, and the 55 black paths merge into the container, leaving
   the gold to carry the mark. The container is the fix; the shape is the style.

   THE SHAPE BELONGS TO THE MARK ALONE

   34% 0 34% 0 — a squircle with the top-right and bottom-left corners drawn to a
   point — is the mark's signature, and nothing else in the bar carries it. The
   first build put the same shape on all four objects, which gave them all equal
   weight and left the eye nowhere to land; the three controls are now unfilled
   glyphs precisely so the shape reads as the brand rather than as a motif.

   WHY EVERY SELECTOR STARTS WITH #header

   theme.css reaches for IDs, so a class-only override loses however many classes
   are stacked on it. Two vendor rules matter most here:

       #header .header-logo .svg-logo{min-width:120px}
           holds the logo at 120px square, which is what makes the bar 136px tall
       #header .mobile-header-version .header-right{padding:6px;min-height:50px}
           the 12px a first attempt at this left unaccounted for

   991.98px is not a guess: theme.css switches to the mobile header tree at
   @media(max-width:991.98px), and a 991px breakpoint would leave the
   991px-991.98px band with the mobile header but none of these rules.
   ========================================================================== */
@media (max-width:991.98px){
  /* ---------- the strip is gone; the header is a single 60px row ---------- */
  #header .mobile-header-version .header-nav{display:none}

  /* ---------- the bar ---------- */
  #header .mobile-header-version .main-header{
    background:#83848a;padding:0;position:relative;
    /* The bar is 60px and that number is written down nowhere: it is this padding
       around a 44px row. The search panel has to cover the whole bar, so it needs
       the same value — hence a variable, so the two cannot drift apart. */
    --tt-bar-pad:8px;
  }
  #header .mobile-header-version .main-header .container{
    padding-top:var(--tt-bar-pad);padding-bottom:var(--tt-bar-pad);
  }
  /* the theme's own scroll layer would otherwise flash black over the grey */
  #header .mobile-header-version .sticky-background{background:#83848a}
  /* white on #83848a is 3.73:1 and fails AA, so every glyph in the bar is ink */
  #header .mobile-header-version .main-header,
  #header .mobile-header-version .main-header a,
  #header .mobile-header-version .main-header i{color:#1a1a1a}

  /* ---------- layout: four controls right, the mark left ----------
     The theme splits the controls into two groups inside .header-right:
     .mobile-display-left (the hamburger) and .display-top (basket + account),
     and the theme's own search sits in front of both. Ordering the groups and
     packing them to the right gives [search][cart][sign in][menu] with the menu
     on the outermost corner, where the thumb lands, and leaves the left end of
     the bar free for the mark. */
  #header .mobile-header-version .header-wrapper{
    display:flex;align-items:center;justify-content:space-between;min-height:0;
  }
  /* ---------- the four are one tight group, not four spread-out ones ----------
     Three separate rules were adding spacing on top of each other:

       .header-right{gap:8px}                      search | cart+account | menu
       .display-top{gap:8px}                       cart | account
       #header .display-top>div{margin-left:2%}    the theme's own, on each of the two

     What the eye actually read between two glyphs was 10px of empty box + the
     flex gap + the share of that 2% margin — and the percentage is the one that
     made the spacing uneven, because it resolved against .display-top's own
     shrinking width rather than against the bar. Measured on the live shop, ink
     to ink: 27.8px between the magnifier and the basket, 31.6px between the
     basket and the account, 28.0px between the account and the menu, spread over
     200px of a 390px bar.

     All three are set to zero instead of to some new magic number. The boxes are
     transparent and 44px wide with a 24px glyph centred in them, so with no gap
     the glyphs still stand 20px apart — the tight grouping the approved design
     asks for — while every control keeps its full 44x44 target. The percentage
     margin is zeroed rather than merely outbid, because it is what made the
     spacing uneven in the first place. */
  #header .mobile-header-version .header-right{
    display:flex;align-items:center;justify-content:flex-end;gap:0 !important;
    width:auto;margin-inline-start:auto;margin-inline-end:0;padding:0;min-height:0;
  }
  #header .mobile-header-version .display-top{
    order:1;display:flex;align-items:center;justify-content:flex-end;gap:0 !important;
    height:44px;flex:0 0 auto !important;width:auto;
  }
  #header .mobile-header-version .display-top>div{margin-left:0 !important;margin-right:0 !important}
  #header .mobile-header-version .mobile-display-left{order:2}  #header .mobile-header-version .display-top>*{
    height:44px;display:flex;align-items:center;margin-top:0;margin-bottom:0;
  }
  #header .mobile-header-version .mobile-display-left{
    display:flex;align-items:center;height:44px;flex:0 0 auto !important;
  }

  /* ---------- the four controls are bare icons ----------
     One object in this bar is allowed to carry weight, and it is the mark. The
     controls are glyphs on the bar itself — no fill, no ring, no shape — so the
     eye lands on the brand instead of on four competing blobs.

     The chip treatment existed for a reason and it is gone with it: gold on
     #83848a is 1.77:1, so a gold chip needed a #7a5f0f ring just to have an
     edge. Unfilled ink glyphs on the same bar measure 4.67:1, which clears AA
     for the glyph as text and 3:1 for it as a UI component. */
  #header .mobile-header-version .mobile-menu-icon,
  #header .mobile-header-version .display-top .shopping-cart-module,
  #header .mobile-header-version .display-top .customer-signin-module{
    width:32px;min-width:0;height:44px;border-radius:0;
    background:transparent;color:#1a1a1a;box-shadow:none;
    display:flex;align-items:center;justify-content:center;
  }
  /* the cart link and the menu icon each carried a fill of their own */
  #header .mobile-header-version .display-top .cart-link,
  #header .mobile-header-version .mobile-menu-icon{
    width:32px;min-width:0;height:44px;padding:0;
    background:transparent;border-radius:0;box-shadow:none;
  }
  #header .mobile-header-version .display-top .cart-header,
  #header .mobile-header-version .display-top .cart-header > li{
    width:32px;min-width:0;margin:0;padding:0;
  }
  #header .mobile-header-version .display-top .cart-total-value{display:none !important}
  #header .mobile-header-version .display-top .cart-link i,
  #header .mobile-header-version .shopping-cart-module i{color:#1a1a1a}

  /* the theme lifts the sign-in into the strip with this rule:
       .mobile-header-version .customer-signin-module{position:absolute;right:0;top:-32px}
     Put it back in the flow, to the left of the menu. left and right are both
     reset because the RTL build flips the same vendor rule to left:0. */
  #header .mobile-header-version .display-top .customer-signin-module{
    position:static;top:auto;right:auto;left:auto;order:2;
  }
  #header .mobile-header-version .display-top .shopping-cart-module{order:1}

  /* ---------- the account is an icon in the bar, not a label ----------
     The theme renders a person icon plus a text label: "Sign in" (55px),
     "Identifiez-vous" (French, 114px), "تسجيل الدخول" (Arabic, 86px). That label
     is what made the bar's min-content width 435px on a 390px phone. The approved
     design draws the account as an icon, so this matches the design and removes
     the overflow. The <a> keeps its title attribute, so it keeps an accessible
     name in every language. */
  #header .mobile-header-version .display-top .customer-signin-module .user-info,
  #header .mobile-header-version .display-top .customer-signin-module ul,
  #header .mobile-header-version .display-top .customer-signin-module li{
    width:32px;min-width:0;height:44px;margin:0;padding:0;
  }
  /* The theme draws a box around this one itself:
       .user-info .account-link{border:2px solid;border-radius:3px}
     `solid` with no colour written means currentColor, so it took the bar's ink
     and put a visible square around the account icon while the basket and the
     menu beside it stayed bare. Four bare glyphs is the design; this is the
     fourth one. It also sits next to the search magnifier, so a box here reads
     as "this one is selected". */
  #header .mobile-header-version .display-top .customer-signin-module .account-link{
    width:32px;min-width:0;height:44px;margin:0;padding:0;
    border:0;border-radius:0;
  }
  #header .mobile-header-version .display-top .customer-signin-module a{
    width:32px;min-width:0;height:44px;padding:0;
    display:flex;align-items:center;justify-content:center;
  }
  /* the theme gives this <i> a block box, so the flex line stretched it to 15x44
     and the person glyph painted at the top with empty space beneath. Pinning the
     glyph to its own 24px box and centring it fixes the alignment. */
  #header .mobile-header-version .display-top .customer-signin-module a > i{
    width:24px;height:24px;line-height:24px;font-size:24px;
    align-self:center;flex:0 0 24px;
  }
  #header .mobile-header-version .display-top .customer-signin-module a > span{
    display:none;   /* icon only, matching the basket's 24px glyph */
  }

  /* ---------- the cart dropdown is dead weight here, and it is 300px wide ----------
     theme.css renders it as a hover panel for the desktop header with a fixed
     300px width, anchored to the cart chip:
         .cart-preview .cart-dropdown{position:absolute;top:45px;right:0;width:300px;visibility:hidden}
         .lang-rtl .cart-preview .cart-dropdown{right:auto;left:0}
     Only `.desktop-header-version .cart-preview:hover` ever reveals it, and a
     touch screen has no hover, so on mobile it can never be seen. It is not
     inert, though: it is visibility:hidden rather than display:none, so it still
     contributes its 300px to the document's scroll width. In RTL the chips pack
     to the left, the cart lands near the left edge, and `left:0` sends that
     300px off the right of a 390px screen — a 31px phantom horizontal scroll in
     Arabic. Removing it is both correct for touch and the root-cause fix. */
  #header .mobile-header-version .cart-preview .cart-dropdown{display:none}

  /* ---------- the mark: the blade container, hard against the leading edge ----------
     .header-logo is a <div> holding a single <a><img></a> and no text, so the
     div itself becomes the container. That is why this is CSS-only: nothing in
     header.tpl has to change to gain the shape.
     The radius is the mark's own: the three controls beside it are unfilled and
     square-cornered, so this is the only shaped object in the bar. */
  #header .mobile-header-version .header-logo{
    position:absolute;top:50%;left:12px;right:auto;transform:translateY(-50%);
    width:44px;height:44px;max-width:none;padding:0;z-index:4;
    background:#000;border-radius:34% 0 34% 0;overflow:hidden;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 1px 4px rgba(0,0,0,.42);
  }
  #header .mobile-header-version .header-logo > a{
    display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;line-height:0;
  }
  /* the container is square and the artwork inside it is not, so the artwork is
     inset to 72% of the container: 32px inside 44px. That margin is what keeps
     the gold ring clear of the two pointed corners, which would otherwise clip
     it. min-width and !important are here to beat
     #header .header-logo .svg-logo{min-width:120px} and the inline
     style="width: 100px" the template puts on the <img>. */
  #header .mobile-header-version .header-logo .svg-logo{
    width:32px !important;height:32px !important;min-width:0 !important;max-width:none;
  }

  /* ---------- the Arabic build mirrors, so the mark does too ----------
     The Arabic storefront sets no dir attribute; RTL arrives as a body class
     (body.lang-rtl) that the vendored _rtl build keys off — the same build that
     flips the cart dropdown to left:0. A flex line inside it mirrors, so
     justify-content:flex-end packs the chips against the LEFT edge and the three
     of them read menu, sign in, cart from the left. That is the correct mirror
     of cart, sign in, menu, so only the mark has to move: `left` is physical, so
     leaving it at 12px would park it on top of the menu chip. */
  body.lang-rtl #header .mobile-header-version .header-logo,
  html[dir="rtl"] #header .mobile-header-version .header-logo{
    left:auto;right:12px;
  }
  /* dir=rtl already mirrors flex. A physical margin-left:auto kept the icon
     cluster on the same side as the logo, so the mark sat on top of the menu. */

  /* ==========================================================================
     MOBILE SEARCH

     The module will not render it (see the comment in header.tpl), so the theme
     does. Two decisions are made here and both are deliberate:

     1. IT OPENS AS AN OVERLAY, NOT BY REFLOWING THE ROW.
        The mark is position:absolute, so anything that widened the flex row would
        have to grow into the space the mark occupies. Rather than reflow three
        controls around a field that appears and disappears, the panel is laid
        over the bar and given the bar's own background. The row underneath never
        moves, which is why opening and closing cannot shift a single control —
        and it gives the field the full 374px of the bar to be typed into instead
        of the ~150px that would be left between the mark and the icon cluster.

     2. THE TOGGLE IS THE FIRST CONTROL, BEFORE THE BASKET.
        Its `order:0` puts it ahead of .display-top (order 1) and
        .mobile-display-left (order 2), so the cluster reads
        search, basket, sign in, menu.

     The toggle is an <a> to the search page, not a <button>: with JS unavailable
     the magnifier navigates, which is a working search. The panel stays hidden in
     that case, and assets/js/mobile-search.js is what makes it appear. */
  #header .mobile-header-version .mobile-search{
    order:0;display:flex;align-items:center;flex:0 0 auto !important;width:32px;
  }
  #header .mobile-header-version .mobile-search-toggle{
    width:32px;height:44px;flex:none;
    display:flex;align-items:center;justify-content:center;
    color:#1a1a1a;text-decoration:none;background:transparent;
  }
  #header .mobile-header-version .mobile-search-toggle i{font-size:24px}

  #header .mobile-header-version .mobile-search-panel{display:none}
  #header .mobile-header-version .mobile-search[data-open="1"] .mobile-search-panel{
    display:flex;position:absolute;z-index:8;align-items:center;
    /* The containing block here is .header-wrapper: a 44px row centred inside the
       60px bar. Growing the panel by the bar's own padding on each side makes it
       cover the bar exactly, without hard-coding 60px. */
    top:50%;transform:translateY(-50%);
    height:calc(100% + var(--tt-bar-pad) * 2);
    /* 62px = the mark's 12px offset + its 44px + a 6px gap, so the field opens
       alongside the brand instead of over it. Everything here is logical, so
       Arabic mirrors for free: inline-start is the side the mark is on in both
       directions (see the mark's own RTL rule). 8px at the other end lines the
       field up with the bar's edge. */
    inset-inline-start:62px;inset-inline-end:8px;
    /* opaque, and the same grey as the bar, so it reads as the bar rather than as
       a panel laid on top of it */
    background:#83848a;
  }
  #header .mobile-header-version .mobile-search-form{
    display:flex;align-items:center;gap:6px;width:100%;margin:0;
  }
  #header .mobile-header-version .mobile-search-input{
    flex:1;min-width:0;height:44px;
    border-radius:10px;border:1px solid #6f7075;
    /* ink on a light field: 15.6:1, so what is typed is the most legible thing
       in the bar while it is being typed */
    /* 16px is not a taste call. iOS Safari zooms the page in when a field under
       16px takes focus, which leaves the visitor scrolled sideways on a page they
       never asked to zoom. Guarding that with @supports(-webkit-touch-callout)
       only works in Safari, so the value is simply 16px everywhere. */
    background:rgba(255,255,255,.72);color:#1a1a1a;
    padding:0 12px;font-size:16px;line-height:normal;
    -webkit-appearance:none;appearance:none;
  }
  #header .mobile-header-version .mobile-search-input::placeholder{color:#4a4b50;opacity:1}
  #header .mobile-header-version .mobile-search-input:focus{outline:none;border-color:#1a1a1a}
  #header .mobile-header-version .mobile-search-submit,
  #header .mobile-header-version .mobile-search-close{
    width:44px;height:44px;flex:none;padding:0;border:0;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    background:transparent;color:#1a1a1a;border-radius:10px;
  }
  #header .mobile-header-version .mobile-search-submit i,
  #header .mobile-header-version .mobile-search-close i{font-size:24px}


  /* ==========================================================================
     THE DRAWER OPENS ON THE SIDE OF ITS OWN BUTTON

     The theme parks its sidebar against the inline-START edge and slides it in
     from there — `.st-menu{left:0}`, hidden at translate3d(-100%,0,0) — while the
     trigger sits at the far end of the bar. So the drawer has always opened on the
     opposite side from the button that opened it, in both languages:

       English   button right (x331..375)   drawer docked left  (x0..300)
       Arabic    button left  (x15..59)     drawer docked right (x90..390)

     Moving the trigger to the end of the bar is what made it obvious.

     The two states are written physically rather than with inset-inline because
     the theme keys RTL off body.lang-rtl and there is no dir attribute to style
     against — the live Arabic page has dir="null" and body.lang-rtl.

     Two things are deliberately NOT restated here:
       - the open position. The theme's own
           .st-effect-left.st-menu-open .st-effect-left.st-menu{transform:translateZ(0)}
         already brings it to rest, and it carries four classes of specificity, so
         it outranks the closed-state transform below. Restating it would take a
         selector longer than four classes to win, for nothing.
       - the scrim. `.st-effect-left.st-menu:after{display:none}` is the theme's
         own choice, and the full-height `.st-overlay` already separates the panel
         from the page.

     Scoped to the mobile breakpoint on purpose: the drawer markup is rendered on
     desktop too (layout-both-columns.tpl includes it unconditionally) and nothing
     there may move. */
  body .st-menu.st-effect-left{
    left:auto;right:0;
    -webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);
  }
  body.lang-rtl .st-menu.st-effect-left{
    right:auto;left:0;
    -webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);
  }
  /* the close button belongs on the inner edge now — away from the screen edge the
     panel is flush against, and back where a thumb can reach it. The theme puts it
     at right:0 for a left-docked panel, which on a right-docked one would land in
     the far corner. */
  body .st-menu.st-effect-left > .st-menu-close{right:auto;left:0}
  body.lang-rtl .st-menu.st-effect-left > .st-menu-close{right:0;left:auto}

  /* ==========================================================================
     THE DRAWER'S PALETTE, AND THE MISSING FLAGS

     Why nothing inside the drawer could be read. The theme's back-office colour
     settings inject an inline <style> in the page head that paints the drawer and
     its text, and the theme's own stylesheet paints the drawer's content blocks:
     the two disagree. Measured on the live site, English, drawer open:

       .st-menu             (panel)   bg #242424   <- back-office setting
       .st-menu-title       "Menu"    bg #f7f7f7   <- theme.css, hardcoded light
       nav wrapper                    bg #f7f7f7   <- theme.css, hardcoded light
       .sidebar-header-phone          bg #f7f7f7   <- theme.css, hardcoded light
       .sidebar-account               bg #f7f7f7   <- theme.css, hardcoded light
       every text colour              fg #e9e9e9   <- back-office setting

     So the text was #e9e9e9 on a #f7f7f7 block: 1.13:1. The "Menu" title measured
     1.01:1, the close X 1.01:1, and the megamenu links were gold #d4af37 on the
     same light block, 1.96:1. Only two things could be seen: .logout-link, which
     theme.css paints red, and the language and currency strips — those are the
     only blocks with no light background of their own, so they sat on the dark
     panel and their light text was legible.

     The fix settles the drawer on one surface. The dark fill is left where it
     belongs — on the page and on the desktop dropdowns the same setting paints —
     and the drawer becomes the light surface the theme was drawn for, so every
     text colour can be ink. `body` plus two classes is what carries it: the
     setting arrives on a plain `.st-menu`, which this outranks.

     `.current .dropdown-item` is spelled out in full because theme.css has
     `.sidebar-language .language-list .current .dropdown-item{color:#fff}` — four
     classes — so anything shorter loses to it. */
  body .st-menu.st-effect-left{background:#fff;color:#1a1a1a}

  body .st-menu.st-effect-left,
  body .st-menu.st-effect-left a,
  body .st-menu.st-effect-left .st-menu-title,
  body .st-menu.st-effect-left .st-menu-close,
  body .st-menu.st-effect-left .dropdown-item,
  body .st-menu.st-effect-left .amenu-link,
  body .st-menu.st-effect-left .account-link,
  body .st-menu.st-effect-left .account-link span,
  body .st-menu.st-effect-left .account-link i,
  body .st-menu.st-effect-left .l-code,
  body .st-menu.st-effect-left .sidebar-currency{
    color:#1a1a1a;
  }
  /* the open language keeps its marker, but reads as ink on the gold: white on it
     was 2.1:1, ink is 9.99:1 */
  body .st-menu.st-effect-left .sidebar-language .language-list .current .dropdown-item{
    color:#1a1a1a;
  }
  /* the blocks keep the theme's slightly-off-white so they still read as separate
     rows against the white panel */
  body .st-menu.st-effect-left .sidebar-account,
  body .st-menu.st-effect-left .sidebar-header-phone,
  body .st-menu.st-effect-left .st-menu-title{
    background:#f7f7f7;
  }

  /* ---------- the flags ----------
     The drawer's copy of the language list has no flags, and it cannot be fixed
     by styling what is there, because the flag is not there: the theme's own
     bundle copies the language dropdown in and then does
         .find('.l-name').remove()
     and the flag <img> lives inside .l-name
     (see modules/ps_languageselector/ps_languageselector.tpl). The drawer is left
     with nothing but the iso code — 'EN', 'AR', 'FR' — which is what is on screen
     today.

     So the flag is rebuilt from the iso code the link already carries in
     data-iso-code. The numbering is the store's own id_lang, i.e. the same
     /img/l/N.jpg the language selector renders, which is why the Arabic flag here
     is the one already uploaded for Arabic rather than a new asset.

     TO ADD A LANGUAGE: add one line below. The code is its data-iso-code and the
     number is its id_lang (Languages -> the language's id in the back office). */
  body .st-menu.st-effect-left #js-language-sidebar .dropdown-item{
    display:inline-flex;align-items:center;justify-content:center;
  }
  body .st-menu.st-effect-left #js-language-sidebar .dropdown-item::before{
    content:"";display:inline-block;width:16px;height:11px;flex:none;
    margin-inline-end:7px;vertical-align:-1px;border-radius:1px;
    background-repeat:no-repeat;background-position:center;background-size:16px 11px;
  }
  body .st-menu.st-effect-left #js-language-sidebar .dropdown-item[data-iso-code="en"]::before{background-image:url(/img/l/1.jpg)}
  body .st-menu.st-effect-left #js-language-sidebar .dropdown-item[data-iso-code="ar"]::before{background-image:url(/img/l/2.jpg)}
  body .st-menu.st-effect-left #js-language-sidebar .dropdown-item[data-iso-code="fr"]::before{background-image:url(/img/l/3.jpg)}

  /* ---------------------------------------------------------------- app strip
     THE STORE BADGES PINNED TO THE BOTTOM OF THE DRAWER.

     The drawer is the only navigation a phone visitor sees, and until now it held
     two links, neither of which reached the app. The app is the free product and
     the top of the funnel, so it sits at the end of the drawer and scrolls with it.

     It sits in normal flow at the end of the drawer. It used to be sticky, which
     kept the two store badges painted over whatever category was open.

     THE GEOMETRY IS MEASURED, NOT ASSUMED, AND IT COST TWO PASSES TO GET RIGHT.
     The drawer is 300px and docked right, so it occupies x90..390 on a 390px
     screen. It carries NO horizontal padding — its only padding is
     padding-bottom:30px — and the 10px inset the menu rows show comes from
     .anav-top's own margins, which is why those rows sit at x100..380.

     The first version bled -15px on both sides and landed at x75..405: 15px past
     each edge, second badge ending exactly on the viewport edge. The second
     cancelled 30px of padding that does not exist, giving x60..390, a 330px strip
     in a 300px drawer. Both rendered. Both were wrong, and only measurement said
     so. So: no horizontal margin, and this block carries its own 10px padding to
     land the badges on the same line as the menu rows above them.

     THE TWO BADGES STACK, and that is what this block was changed for. Side by side
     in a 300px drawer they were 145px each — an icon and two short lines squeezed
     into a column, running the full width of the drawer. Stacked, each is a
     full-width row, and it holds in Arabic too, where the drawer docks left. */

  body .st-menu.st-effect-left .st-menu-app{
    position:static;
    margin:18px 0 0;padding:14px 10px 16px;
    background:#fff;border-top:1px solid #e6e6e6;
  }
  body .st-menu.st-effect-left .st-menu-app-head{
    display:flex;align-items:center;gap:9px;margin:0 0 10px;
  }
  body .st-menu.st-effect-left .st-menu-app-head i{font-size:13px;color:#8a6a12!important;line-height:1;}
  body .st-menu.st-effect-left .st-menu-app-head span{
    font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#333!important;
  }
  body .st-menu.st-effect-left .st-menu-app-head em{
    flex:1 1 auto;height:1px;background:#cdcdcd;
  }
  body .st-menu.st-effect-left .st-menu-app-head b{
    font-size:11px;font-weight:400;color:#4a4a4a!important;
  }
  body .st-menu.st-effect-left .st-menu-app-row{
    display:flex;flex-direction:column;gap:8px;
  }
  body .st-menu.st-effect-left .st-menu-app-badge{
    flex:0 0 auto;width:100%;box-sizing:border-box;
    display:flex;align-items:center;gap:10px;padding:11px 12px;
    background:#141414!important;border:1px solid #2f2f2f;border-radius:11px;
    text-decoration:none!important;
  }
  body .st-menu.st-effect-left .st-menu-app-badge i{
    flex:0 0 auto;font-size:19px;color:#d4af37!important;line-height:1;width:20px;text-align:center;
  }
  body .st-menu.st-effect-left .st-menu-app-badge small{
    display:block;font-size:9.5px;line-height:1.3;color:#a6a6a6!important;
  }
  body .st-menu.st-effect-left .st-menu-app-badge b{
    display:block;font-size:12px;font-weight:600;line-height:1.3;color:#fff!important;
  }
}

/* ==========================================================================
   THE CART SIDEBAR  (.st-menu-right)
   ==========================================================================
   Opened from the basket button when the module is set to the sidebar mini cart
   rather than the header dropdown. Measured live, with one Smart Key in the cart,
   at 1440 and 390 — the panel exists at BOTH widths, so unlike the menu drawer
   above there is no media query around this block.

   WHAT WAS WRONG, and where each came from. Three separate light-mode leftovers,
   none of them a colour of ours:

     .cart-preview .cart-title    bg #f7f7f7    <- theme.css, "Shopping Cart"
     .cart-preview .cart-bottom   bg #f7f7f7    <- theme.css, the totals block
     .cart-products-count         bg #d1ecf1    <- Bootstrap .alert-info

   The panel itself is dark — the module's own stylesheet paints a plain
   `.st-menu-right` with #242424 from a Back-Office setting — so the two #f7f7f7
   bands read as bright slabs, and both carry light text: "Shopping Cart" computed
   to rgb(248,248,255) and the Subtotal / Shipping / Total labels to pure white.
   White on #f7f7f7 is 1.04:1. That is the "texts in white on a white page".

   The blue behind "There is 1 item in your cart" is not our blue and not a badge:
   the paragraph is emitted as `class="cart-products-count alert-info"`, and
   Bootstrap's .alert-info is #d1ecf1 on #0c5460. The existing gold badge rule
   above cannot catch it because it is keyed on `.cart-preview .cart-header`,
   and this paragraph lives in .cart-bottom.

   So: the two light bands are made dark, .alert-info is neutralised, and every
   text colour in the panel is stated explicitly. Stating them rather than relying
   on inheritance is deliberate — the label colour was arriving from a rule in the
   module's injected stylesheet, and chasing that with specificity is how the next
   one gets missed.

   Scoped to .st-menu-right so the left menu drawer, the header dropdown and the
   checkout page are untouched. !important is used for the same reason as the
   membership block below: the module's colours arrive from an injected stylesheet
   whose order against this file is not guaranteed.
   ========================================================================== */

/* --- The title band --- */
.st-menu-right .cart-preview .cart-title,
.st-menu-right .cart-title {
    background: transparent !important;
    border-bottom: 1px solid #2e2e2e !important;
    color: #d4af37 !important;
    font-size: .8rem !important;
    font-weight: 700;
    letter-spacing: .12em;
    padding: 18px 16px !important;
}

/* --- The totals band --- */
.st-menu-right .cart-preview .cart-bottom {
    background: transparent !important;
    border-top: 1px solid #2e2e2e !important;
    padding: 14px 16px 18px !important;
}

/* The vendor's "There is 1 item in your cart." is a Bootstrap alert. It is a
   statement of fact about a cart the visitor just filled, not a warning, so it
   loses the alert colouring entirely and reads as a quiet line of body copy.
   The icon-free left border Bootstrap draws goes with it. */
.st-menu-right .cart-bottom .cart-products-count,
.st-menu-right .cart-products-count.alert-info {
    background: #1b1b1b !important;
    border: 1px solid #2e2e2e !important;
    border-radius: 9px;
    color: #a4a4ac !important;
    padding: 8px 12px !important;
    margin: 0 0 14px !important;
    font-size: .82rem;
    line-height: 1.45;
    text-align: center;
}

/* --- Every line of text in the panel ---
   label / .price pairs in the subtotals, and the product name. The labels were
   pure white, which is invisible on the light band above and merely loud on the
   dark one; they are supporting text, so they take the muted ink and the values
   take the bright ink. */
.st-menu-right .cart-preview,
.st-menu-right .cart-preview a,
.st-menu-right .cart-product-line .product-name,
.st-menu-right .cart-product-line .product-attributes {
    color: #e8e8e8 !important;
}

.st-menu-right .cart-product-line .product-name {
    font-weight: 600;
    line-height: 1.35;
}

.st-menu-right .cart-product-line .product-name:hover,
.st-menu-right .cart-preview a:hover {
    color: #d4af37 !important;
}

.st-menu-right .cart-summary-line label,
.st-menu-right .cart-summary-line small,
.st-menu-right .cart-bottom small {
    color: #a4a4ac !important;
    font-weight: 400;
}

.st-menu-right .cart-summary-line .price,
.st-menu-right .cart-product-line .product-price,
.st-menu-right .cart-product-line .product-qty,
.st-menu-right .cart-product-line .x-character {
    color: #e8e8e8 !important;
    font-variant-numeric: tabular-nums;
}

/* The one number the visitor is looking for. */
.st-menu-right .cart-summary-line .price-total,
.st-menu-right .cart-total .price-total {
    color: #d4af37 !important;
    font-weight: 700;
}

/* The tax line sits under the total at 90% in the markup and reads as a footnote,
   so it is muted rather than competing with the total above it. */
.st-menu-right .cart-tax span,
.st-menu-right .cart-tax i {
    color: #8d95a3 !important;
    font-style: normal;
}

/* --- The product row --- */
.st-menu-right .cart-preview .cart-product-line + .cart-product-line {
    border-top: 1px dashed #2e2e2e;
}

.st-menu-right .cart-product-line .product-image img {
    border-radius: 8px;
    border: 1px solid #2e2e2e;
    background: #141414;
}

/* The trash icon. The theme's .icon-link:hover is in the module's colour list, so
   it is stated here; removing an item is destructive, so it is the one control in
   the panel that goes red rather than gold. */
.st-menu-right .cart-product-line .remove-from-cart,
.st-menu-right .cart-product-line .remove-from-cart i {
    color: #8a8a8a !important;
}

.st-menu-right .cart-product-line .remove-from-cart:hover,
.st-menu-right .cart-product-line .remove-from-cart:hover i {
    color: #e05a5a !important;
}

/* --- The quantity stepper ---
   Bootstrap Touchspin. The theme styles it light, and its +/- glyphs are
   Material Icons that computed to rgb(33,37,41) — near-black on a dark panel,
   which is another control that was effectively invisible. */
.st-menu-right .bootstrap-touchspin .btn.btn-touchspin,
.st-menu-right .bootstrap-touchspin .bootstrap-touchspin-down,
.st-menu-right .bootstrap-touchspin .bootstrap-touchspin-up {
    background: #1b1b1b !important;
    border: 1px solid #2e2e2e !important;
    color: #e8e8e8 !important;
}

.st-menu-right .bootstrap-touchspin .btn.btn-touchspin:hover {
    background: #262626 !important;
    border-color: #3d3d3d !important;
    color: #fff !important;
}

.st-menu-right .bootstrap-touchspin .btn.btn-touchspin i {
    color: inherit !important;
    font-size: 16px;
    vertical-align: middle;
}

.st-menu-right .bootstrap-touchspin input.form-control,
.st-menu-right .bootstrap-touchspin .js-cart-line-product-quantity {
    background: #141414 !important;
    border-color: #2e2e2e !important;
    color: #e8e8e8 !important;
    box-shadow: none !important;
}

/* --- The close control ---
   theme.css puts a #fd6282 hover on it, which is one of the vendor pinks and not
   a colour this site uses anywhere. */
.st-menu-right .st-menu-close {
    color: #b9b9b9 !important;
}

.st-menu-right .st-menu-close:hover {
    color: #d4af37 !important;
}

.st-menu-right .st-menu-close i {
    font-weight: 400;
}

/* --- The checkout button --- */
.st-menu-right .cart-action .btn.btn-primary,
.st-menu-right .cart-action a.btn {
    background: #d4af37 !important;
    border: 1px solid #d4af37 !important;
    color: #111 !important;
    font-weight: 700;
    border-radius: 999px;
    padding: 11px 22px;
}

.st-menu-right .cart-action .btn.btn-primary:hover,
.st-menu-right .cart-action a.btn:hover {
    background: #b29126 !important;
    border-color: #b29126 !important;
    color: #111 !important;
}

/* --- The update spinner ---
   Shown while the cart is recalculated after a quantity change. It is a
   full-panel overlay, and the theme's backdrop is light, which flashes the whole
   sidebar white on every tap of + or -. Kept dark so the panel does not blink. */
.st-menu-right .js-cart-update-quantity .page-loading-backdrop {
    background: rgba(20, 20, 20, .72) !important;
}

.st-menu-right .uil-spin-css > span > span,
.st-menu-right .uil-spin-css span div {
    background: #d4af37 !important;
}

/* ==========================================================================
   THE CART AND THE CHECKOUT  (page-cart, page-order, page-order-confirmation)
   ==========================================================================
   The three pages a buyer walks through: /en/cart, then /en/order with its three
   steps, then the confirmation. Scoped by the page class PrestaShop puts on
   <body> rather than by a block class, because the faults below are spread across
   the whole flow — the step 1 form, the address cards, the payment options and
   the order summary all sit in different wrappers.

   It is deliberately NOT site-wide. The same light patches exist on the account
   pages, the contact form and the sign-in page, because they all come from the
   same two sources. Widening this to the whole site is a separate decision with
   its own pass; see the note at the end of this block.

   WHAT WAS WRONG. Every light patch measured here traces to a stylesheet that is
   not ours, and the single largest source is one line in the module's own
   injected stylesheet:

     .form-control, .form-control:focus, .custom-checkbox .check-shape,
     .custom-radio .check-shape, ... , .custom-select {
       background-color: rgb(248, 248, 255);
     }

   That is "ghost white" — #f8f8ff, a near-white with the blue channel a full
   seven points above red and green. It is the "light blue cover" on the form
   fields. It lands on every input, select and checkbox shape in the flow, with
   dark ink on top, so the fields read as pale blue slabs cut into a black page.

   The rest, element by element:

     #order-summary-content        border 3px #d1ecf1   theme.css
     .summary-message.alert-info   #d1ecf1 on white text theme.css + Bootstrap
     .alert-info / -success / -danger / -warning   Bootstrap's four pastels
     .address-item.selected        border #007ad1      theme.css   (vendor blue)
     .cart-summary .cart-products-count   .alert-info   theme.css + Bootstrap
     .cart-summary .cart-detailed-actions background #f7f7f7  theme.css
     .btn-touchspin, the quantity input, .promo-code .btn   theme.css
     .address-footer, .payment-line+.payment-line,
       .order-options, .delivery-option:before   border-top #ededed  theme.css
     a.payment_module_adv          border #d6d4d4      theme.css
     .page-loading-backdrop        hsla(0,0%,100%,.5)  theme.css
     .table                        ink #212529 on a dark box   Bootstrap

   Two of those were not merely off-brand, they were unreadable:

     .summary-message ("Please check your order before payment")
         white #f8f8ff on #d1ecf1 .................. 1.17:1
     .cart-detailed-actions (the band the "Proceed to checkout" button sits in)
         #e9e9e9 on #f7f7f7 ........................ 1.13:1 — the sidebar's twin

   THE COLOURS ARE THE ONES ALREADY IN USE. Surfaces #1b1b1b on the #242424 box,
   borders #2e2e2e, ink #e8e8e8 and #a4a4ac, gold #d4af37 — the same set as the
   cart sidebar block above, so the drawer and the page it sits on agree.

   THE ALERTS KEEP THEIR MEANING. Bootstrap's four pastels are all the same
   weight; the dark replacements separate them by hue at equal weight, which is
   what they were for: gold for "look at this", green for done, red for refused,
   amber for caution. The text colours are chosen to clear AA against their own
   tinted surface, not against the page.

   !important throughout, for the same reason as the sidebar block: the module's
   colours arrive from a stylesheet injected after the theme's, and its order
   against this file is a Back-Office setting away from changing.

   IF YOU WANT THIS EVERYWHERE: drop the :is() scope from the rules below. It was
   left on because those other pages have not been measured, and the light fields
   may well be deliberate there.
   ========================================================================== */

/* --- Fields ---------------------------------------------------------------
   background-color, never the background shorthand: a select draws its arrow as
   a background-image, and the shorthand would wipe it. color-scheme is what makes
   the browser paint the native dropdown list and the number spinners dark too —
   without it a dark field still opens a white menu. */
:is(body.page-cart, body.page-order, body.page-order-confirmation) .form-control,
:is(body.page-cart, body.page-order, body.page-order-confirmation) .custom-select,
:is(body.page-cart, body.page-order, body.page-order-confirmation) .input-group-text,
:is(body.page-cart, body.page-order, body.page-order-confirmation) .form-control:focus {
    background-color: #1b1b1b !important;
    border-color: #2e2e2e !important;
    color: #e8e8e8 !important;
    color-scheme: dark;
}

:is(body.page-cart, body.page-order, body.page-order-confirmation) .form-control:focus,
:is(body.page-cart, body.page-order, body.page-order-confirmation) .custom-select:focus {
    border-color: #d4af37 !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, .16) !important;
}

:is(body.page-cart, body.page-order, body.page-order-confirmation) .form-control::placeholder {
    color: #8d95a3 !important;
    opacity: 1;
}

:is(body.page-cart, body.page-order, body.page-order-confirmation) .form-control:disabled,
:is(body.page-cart, body.page-order, body.page-order-confirmation) .form-control[readonly] {
    background-color: #141414 !important;
    color: #a4a4ac !important;
}

:is(body.page-cart, body.page-order, body.page-order-confirmation) .form-control-label,
:is(body.page-cart, body.page-order, body.page-order-confirmation) .form-control-comment {
    color: #a4a4ac !important;
}

/* The Show / Hide toggle the theme pins to the right of every password field on
   the personal-information step. It is an .input-group-btn > .btn and the theme
   paints it #c7c7c7, so it was the last pale chip on the page once the fields
   behind it went dark. */
:is(body.page-cart, body.page-order, body.page-order-confirmation) .input-group-btn > .btn {
    background-color: #1b1b1b !important;
    border-color: #2e2e2e !important;
    color: #e8e8e8 !important;
}

:is(body.page-cart, body.page-order, body.page-order-confirmation) .input-group-btn > .btn:hover {
    background-color: #262626 !important;
    border-color: #3d3d3d !important;
    color: #fff !important;
}

/* --- Checkboxes and radios ------------------------------------------------
   The base shape is the ghost-white box. The checked state is already gold, from
   the global rule near the top of this file; it is restated here at a specificity
   above this base so the two cannot drift apart if that rule is ever moved. */
:is(body.page-cart, body.page-order, body.page-order-confirmation) .custom-checkbox .check-shape,
:is(body.page-cart, body.page-order, body.page-order-confirmation) .custom-radio .check-shape {
    background-color: #1b1b1b !important;
    border-color: #4a4a4a !important;
}

:is(body.page-cart, body.page-order, body.page-order-confirmation) .custom-checkbox input[type="checkbox"]:checked + .check-shape,
:is(body.page-cart, body.page-order, body.page-order-confirmation) .custom-radio input[type="radio"]:checked + .check-shape {
    background-color: #d4af37 !important;
    border-color: #d4af37 !important;
    color: #141414 !important;
}

/* --- Alerts ---------------------------------------------------------------
   Same weight, different hue. Bootstrap sized these as pastel chips; on a dark
   page the tint has to come from a border rather than from the fill, or the
   chip becomes the brightest thing on the screen. */
:is(body.page-cart, body.page-order, body.page-order-confirmation) .alert {
    border-width: 1px;
    border-style: solid;
    border-radius: 9px;
}

:is(body.page-cart, body.page-order, body.page-order-confirmation) .alert-info {
    background-color: #1b1b1b !important;
    border-color: rgba(212, 175, 55, .42) !important;
    color: #d4af37 !important;
}

:is(body.page-cart, body.page-order, body.page-order-confirmation) .alert-success {
    background-color: #14231a !important;
    border-color: rgba(78, 201, 127, .42) !important;
    color: #4ec97f !important;
}

:is(body.page-cart, body.page-order, body.page-order-confirmation) .alert-danger {
    background-color: #241417 !important;
    border-color: rgba(255, 122, 122, .42) !important;
    color: #ff7a7a !important;
}

:is(body.page-cart, body.page-order, body.page-order-confirmation) .alert-warning {
    background-color: #241d12 !important;
    border-color: rgba(229, 181, 103, .42) !important;
    color: #e5b567 !important;
}

:is(body.page-cart, body.page-order, body.page-order-confirmation) .alert a {
    color: inherit !important;
    text-decoration: underline;
}

/* --- The order summary frame ---------------------------------------------
   The vendor frames the "check your order" block in 3px of #d1ecf1. The frame is
   doing real work — it is the one box the buyer is asked to read before paying —
   so it keeps a coloured frame rather than losing it, in our gold at the weight
   a 3px line needs. */
:is(body.page-cart, body.page-order, body.page-order-confirmation) #order-summary-content {
    border-color: rgba(212, 175, 55, .35) !important;
}

/* --- Address cards --------------------------------------------------------
   The selected card was outlined in the vendor blue. Border only: the card body
   keeps the box colour it already had.

   The unselected card is also restated. Its outline was measured at 2px #c7c7c7
   and the card carries the theme's own opacity:.6, so on a dark page the choice
   between the two cards was being made by a near-white box against a gold one —
   two loud outlines, no hierarchy. Quieting the unselected one to the same
   #2e2e2e the rest of the page uses leaves the gold to mean "this one". */
:is(body.page-cart, body.page-order, body.page-order-confirmation) #checkout-addresses-step .address-item {
    border-color: #2e2e2e !important;
}

:is(body.page-cart, body.page-order, body.page-order-confirmation) #checkout-addresses-step .address-item.selected {
    border-color: #d4af37 !important;
}

:is(body.page-cart, body.page-order, body.page-order-confirmation) #checkout-addresses-step .address-item .address-footer,
:is(body.page-cart, body.page-order, body.page-order-confirmation) .page-addresses .address .address-footer,
:is(body.page-cart, body.page-order, body.page-order-confirmation) .page-order-detail .messages .message {
    border-top-color: #2e2e2e !important;
}

/* --- Payment and delivery -------------------------------------------------
   Every divider the vendor draws in #ededed. Collected into one rule because
   they are all the same hairline and all need the same colour. */
:is(body.page-cart, body.page-order, body.page-order-confirmation) #checkout-payment-step .payment-line + .payment-line,
:is(body.page-cart, body.page-order, body.page-order-confirmation) #checkout-delivery-step .order-options,
:is(body.page-cart, body.page-order, body.page-order-confirmation) .checkout-step-display .delivery-option:before,
:is(body.page-cart, body.page-order, body.page-order-confirmation) .page-order-detail .order-items .order-item + .order-item,
:is(body.page-cart, body.page-order, body.page-order-confirmation) .page-order-detail .shipping-lines .shipping-line + .shipping-line {
    border-top-color: #2e2e2e !important;
}

:is(body.page-cart, body.page-order, body.page-order-confirmation) a.payment_module_adv {
    border-color: #2e2e2e !important;
}

/* The bordered text buttons — "Billing address differs from shipping address",
   "add new address". The theme draws them as a 2px #e9e9e9 outline on the page
   colour, which made the least important control on the step the brightest
   rectangle on it. A filled surface at the same weight as the voucher button
   above puts them back below the primary action, where they belong. */
:is(body.page-cart, body.page-order, body.page-order-confirmation) .btn.btn-teriary {
    background-color: #1b1b1b !important;
    border-color: #2e2e2e !important;
    color: #e8e8e8 !important;
}

:is(body.page-cart, body.page-order, body.page-order-confirmation) .btn.btn-teriary:hover {
    background-color: #262626 !important;
    border-color: #3d3d3d !important;
    color: #fff !important;
}

/* --- The order table ------------------------------------------------------
   Bootstrap sets .table ink to #212529, which is invisible on the dark box the
   final summary sits in. */
:is(body.page-cart, body.page-order, body.page-order-confirmation) .table {
    color: #e8e8e8 !important;
}

:is(body.page-cart, body.page-order, body.page-order-confirmation) .table td,
:is(body.page-cart, body.page-order, body.page-order-confirmation) .table th,
:is(body.page-cart, body.page-order, body.page-order-confirmation) .table thead th,
:is(body.page-cart, body.page-order, body.page-order-confirmation) .table tbody + tbody,
:is(body.page-cart, body.page-order, body.page-order-confirmation) .table-bordered,
:is(body.page-cart, body.page-order, body.page-order-confirmation) .table-bordered td,
:is(body.page-cart, body.page-order, body.page-order-confirmation) .table-bordered th {
    border-color: #2e2e2e !important;
}

/* --- The cart page --------------------------------------------------------
   The band the "Proceed to checkout" button sits in, the quantity stepper and
   the voucher field. The stepper is the same widget as the sidebar's and takes
   the same treatment, which is why the declarations match that block. */
:is(body.page-cart, body.page-order, body.page-order-confirmation) .cart-summary .cart-detailed-actions {
    background-color: transparent !important;
}

:is(body.page-cart, body.page-order, body.page-order-confirmation) .cart-summary .cart-products-count {
    margin: 0 0 12px !important;
    padding: 9px 12px !important;
}

:is(body.page-cart, body.page-order, body.page-order-confirmation) .bootstrap-touchspin .btn.btn-touchspin {
    background-color: #1b1b1b !important;
    border-color: #2e2e2e !important;
    color: #e8e8e8 !important;
}

:is(body.page-cart, body.page-order, body.page-order-confirmation) .bootstrap-touchspin .btn.btn-touchspin:hover {
    background-color: #262626 !important;
    border-color: #3d3d3d !important;
    color: #fff !important;
}

:is(body.page-cart, body.page-order, body.page-order-confirmation) .bootstrap-touchspin .btn.btn-touchspin i {
    color: inherit !important;
}

:is(body.page-cart, body.page-order, body.page-order-confirmation) .cart-voucher .promo-code .btn {
    background-color: #1b1b1b !important;
    border-color: #2e2e2e !important;
    color: #e8e8e8 !important;
}

:is(body.page-cart, body.page-order, body.page-order-confirmation) .cart-voucher .promo-code .btn:hover {
    background-color: #262626 !important;
    border-color: #3d3d3d !important;
}

/* The hairlines inside the summary: the dividers between the subtotal rows and
   the wrapper around the quantity stepper, both #ededed / #c7c7c7 from theme.css.
   The stepper in particular had a pale halo around a control that is otherwise
   dark, which read as a mistake.

   The OUTER outline of the boxes is deliberately left alone. .light-box-bg and
   .box-bg carry border:1px solid #c7c7c7 from theme.css and every box on the
   site has it — the product page and the homepage included. Quieting it here
   alone would make the checkout stop matching the pages either side of it. If
   those hairlines are ever to become #2e2e2e they should change everywhere at
   once, which is a site-wide pass rather than this one. */
:is(body.page-cart, body.page-order, body.page-order-confirmation) .cart-items .cart-item + .cart-item {
    border-top-color: #2e2e2e !important;
}

:is(body.page-cart, body.page-order, body.page-order-confirmation) .bootstrap-touchspin {
    border-color: #2e2e2e !important;
}

/* --- Removing an address is destructive ---------------------------------- */
:is(body.page-cart, body.page-order, body.page-order-confirmation) .cancel-address {
    color: #ff7a7a !important;
}

:is(body.page-cart, body.page-order, body.page-order-confirmation) .cancel-address:hover {
    color: #ff9a9a !important;
}

/* --- The update spinner ---------------------------------------------------
   The theme's backdrop is white at 50% and covers the whole block, so every tap
   of a quantity stepper or the voucher button flashed the panel white. It is the
   same overlay as the sidebar's, and takes the same dark fill. */
:is(body.page-cart, body.page-order, body.page-order-confirmation) .page-loading-overlay .page-loading-backdrop {
    background-color: rgba(20, 20, 20, .72) !important;
}

/* ==========================================================================
   DESKTOP HEADER — the app card
   ==========================================================================
   Every selector below contains .desktop-header-version. The phone header is
   a different element, .mobile-header-version, built by the other branch of
   header.tpl, and none of these rules can match it.
   ========================================================================== */

#header .desktop-header-version {
    background: transparent;
    padding: 14px 16px 10px;
}

#header .desktop-header-version .tt-webhead {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px 8px 8px 14px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

#header .desktop-header-version .tt-webhead .header-logo {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 72px;
    padding: 8px;
    background: #000;
    border-radius: 16px;
    box-shadow: 0 0 0 1px rgba(212, 175, 55, .45);
    max-width: none;
}

#header .desktop-header-version .tt-webhead .header-logo > a {
    display: flex;
    align-items: center;
    line-height: 0;
}

#header .desktop-header-version .tt-webhead .header-logo img,
#header .desktop-header-version .tt-webhead .header-logo .svg-logo {
    height: 56px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none;
}

#header .desktop-header-version .tt-webhead-menu {
    flex: 1 1 auto;
    min-width: 0;
}

#header .desktop-header-version .tt-webhead .anav-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
    margin: 0;
    padding: 4px;
    background: #111;
    border-radius: 12px;
}

#header .desktop-header-version .tt-webhead .amenu-link {
    padding: 8px 12px;
    border-radius: 9px;
    color: #a4a4ac;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: 0;
}

/* The theme paints the whole <li> white on hover, and the site-wide
   a:hover rule forces gold text with !important. Together that is a gold
   label on a gold pill, which cannot be read. The pill stays gold; the
   words are forced dark, and the white <li> fill is removed. */
#header .desktop-header-version #amegamenu .anav-top .amenu-item:hover,
#header .desktop-header-version #amegamenu .anav-top .amenu-item.hover {
    background: transparent;
}

#header .desktop-header-version .tt-webhead .amenu-link > span:after {
    display: none;
}

#header .desktop-header-version .tt-webhead .amenu-item:hover > .amenu-link,
#header .desktop-header-version .tt-webhead .amenu-item.current > .amenu-link,
#header .desktop-header-version .tt-webhead .amenu-item.active > .amenu-link,
#header .desktop-header-version .tt-webhead .amenu-item:hover > .amenu-link > span,
#header .desktop-header-version .tt-webhead .amenu-item.current > .amenu-link > span,
#header .desktop-header-version .tt-webhead .amenu-item.active > .amenu-link > span {
    background: #d4af37;
    color: #141414 !important;
}

#header .desktop-header-version .tt-webhead .amenu-item:hover > .amenu-link > span,
#header .desktop-header-version .tt-webhead .amenu-item.current > .amenu-link > span,
#header .desktop-header-version .tt-webhead .amenu-item.active > .amenu-link > span {
    background: transparent;
}

#header .desktop-header-version .tt-webhead .adropdown .dropdown-wrapper {
    background: #fff;
    border-radius: 14px;
}

#header .desktop-header-version .header-right {
    flex: 1 1 420px;
    min-width: 0;
    margin: 0;
}

#header .desktop-header-version .tt-webhead-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

#header .desktop-header-version .tt-webhead-tools .display-top {
    display: contents;
}

#header .desktop-header-version .tt-webhead .searchbar-wrapper {
    order: 1;
    flex: 1 1 180px;
    width: auto;
    max-width: 260px;
    min-width: 160px;
    margin: 0;
}

#header .desktop-header-version .tt-webhead .search-widget {
    width: 100%;
    margin: 0;
}

#header .desktop-header-version .tt-webhead .search-widget form input[type="text"] {
    height: 40px;
    margin: 0;
    padding: 0 16px 0 40px;
    border-radius: 999px;
    background: #111 !important;
    border: 1px solid #333 !important;
    color: #e8e8e8 !important;
}

#header .desktop-header-version .tt-webhead .search-widget form input[type="text"]:focus {
    border-color: #d4af37 !important;
}

#header .desktop-header-version .tt-webhead .search-widget form input::placeholder {
    color: #6e6e76;
}

#header .desktop-header-version .tt-webhead .search-widget form [type="submit"] {
    left: 0;
    right: auto;
    width: 40px;
    height: 40px;
    background: transparent !important;
    color: #a4a4ac !important;
    border-radius: 999px;
}

#header .desktop-header-version .tt-webhead .language-selector-wrapper {
    order: 2;
    flex: none;
}

#header .desktop-header-version .tt-webhead .language-selector {
    position: relative;
}

#header .desktop-header-version .tt-webhead .language-selector .dropdown-current {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid #3a3a3a;
    background: #111;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#header .desktop-header-version .tt-webhead .language-selector .dropdown-current > span:not(:first-child) {
    display: none;
}

#header .desktop-header-version .tt-webhead .language-selector .dropdown-current img {
    width: 22px;
    height: 15px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .18);
}

#header .desktop-header-version .tt-webhead .customer-signin-module {
    order: 3;
    flex: none;
}

#header .desktop-header-version .tt-webhead .user-info {
    text-align: left;
}

#header .desktop-header-version .tt-webhead .account-link {
    border: 0;
    border-radius: 0;
    background: transparent;
}

#header .desktop-header-version .tt-webhead .account-link > a {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px 0 12px;
    border-radius: 999px;
    border: 1px solid #3a3a3a;
    background: #111;
    color: #e8e8e8;
    font-weight: 600;
    font-size: 13.5px;
    white-space: nowrap;
}

#header .desktop-header-version .tt-webhead .account-link > a:hover {
    border-color: #d4af37;
    color: #d4af37;
}

#header .desktop-header-version .tt-webhead .account-link .material-icons {
    font-size: 18px;
    line-height: 1;
    height: auto;
}

#header .desktop-header-version .tt-webhead .shopping-cart-module {
    order: 4;
    flex: none;
}

#header .desktop-header-version .tt-webhead .cart-link {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 999px;
    background: #111 !important;
    border: 1px solid #3a3a3a !important;
    color: #e8e8e8 !important;
}

#header .desktop-header-version .tt-webhead .cart-link:hover {
    border-color: #d4af37 !important;
    color: #d4af37 !important;
}

#header .desktop-header-version .tt-webhead .cart-total-value {
    display: none !important;
}

#header .desktop-header-version .tt-webhead .cart-design {
    position: static;
    display: block;
    font-size: 16px;
    line-height: 1;
}

#header .desktop-header-version .tt-webhead .cart-design .fa {
    display: block;
    line-height: 1;
}

/* The theme centres this badge with left:0; right:0; margin:auto, which
   parks the number on top of the basket. Pin it to the corner instead. */
#header .desktop-header-version .tt-webhead .cart-products-count {
    position: absolute;
    top: -7px;
    right: -8px;
    left: auto;
    margin: 0;
    width: auto;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

/* ==========================================================================
   FOOTER
   ==========================================================================
   Wide screen: centered logo, information links in a row, phone and email
   in one bar with the gold contact form at the end.
   Phone: the same logo, information links in a wrapping row, phone and
   email in a dark card, and the form as its own gold block under that card.
   Social circles are shared. A coloured mark crosses one circle at a time.
   The header categories are not repeated. The phone header is not touched.
   ========================================================================== */

#footer .tt-foot-logo {
    display: block;
    text-align: center;
}

#footer .tt-foot-logo a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #000;
    line-height: 0;
}

#footer .footer-about-us,
#footer .block-newsletter,
#footer .footer-menu h3,
#footer .block-social .h4,
#footer .footer-bottom img {
    display: none !important;
}

#footer .block-social .social-links {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

#footer .block-social .social-links li,
#footer .block-social .social-links li.facebook,
#footer .block-social .social-links li.youtube,
#footer .block-social .social-links li.instagram,
#footer .block-social .social-links li.tiktok {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    background: none !important;
    background-image: none !important;
    border: 0;
    border-radius: 0;
}

#footer .block-social .social-links a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    height: auto;
    overflow: visible;
    text-indent: 0;
    white-space: normal;
    color: #a4a4ac;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
}

#footer .block-social .social-links i {
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid #3a3a3a;
    background: #111;
    color: #e8e8e8;
}

#footer .block-social .social-links svg {
    position: relative;
    z-index: 1;
    width: 15px;
    height: 15px;
    fill: currentColor;
}

#footer .block-social .social-links i::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 22px;
    margin-left: -4px;
    margin-top: -11px;
    border-radius: 999px;
    pointer-events: none;
    opacity: 0;
    animation: tt-soc-sweep 8s linear infinite;
    animation-fill-mode: backwards;
}

#footer .block-social .facebook:hover a,
#footer .block-social .facebook:hover i { color: #1877f2; border-color: #1877f2; }
#footer .block-social .youtube:hover a,
#footer .block-social .youtube:hover i { color: #ff0000; border-color: #ff0000; }
#footer .block-social .instagram:hover a,
#footer .block-social .instagram:hover i { color: #c13584; border-color: #c13584; }
#footer .block-social .tiktok:hover a,
#footer .block-social .tiktok:hover i { color: #fff; border-color: #6a6a6a; }
#footer .block-social .facebook:hover svg { fill: #1877f2; }
#footer .block-social .youtube:hover svg { fill: #ff0000; }
#footer .block-social .instagram:hover svg { fill: #c13584; }
#footer .block-social .tiktok:hover svg { fill: #fff; }

#footer .block-social .facebook i::after {
    background: #1877f2;
    box-shadow: 0 0 16px 8px #1877f2, 0 0 32px 16px rgba(24, 119, 242, .7);
}
#footer .block-social .youtube i::after {
    background: #ff0000;
    box-shadow: 0 0 16px 8px #ff0000, 0 0 32px 16px rgba(255, 0, 0, .7);
    animation-delay: 2s;
}
#footer .block-social .instagram i::after {
    background: linear-gradient(#833ab4, #e1306c, #f77737);
    box-shadow: 0 0 16px 8px #c13584, 0 0 32px 16px rgba(193, 53, 132, .7);
    animation-delay: 4s;
}
#footer .block-social .tiktok i::after {
    background: rgba(255, 255, 255, .85);
    box-shadow: 0 0 16px 8px rgba(255, 255, 255, .75), 0 0 32px 16px rgba(255, 255, 255, .4);
    animation-delay: 6s;
}

@keyframes tt-soc-sweep {
    0%    { transform: translate(-22px, -22px) rotate(20deg); opacity: 0; }
    2%    { opacity: 1; }
    6%    { transform: translate(-10px, -18px) rotate(38deg); }
    10%   { transform: translate(2px, -14px) rotate(55deg); }
    14%   { transform: translate(10px, -6px) rotate(75deg); }
    17%   { transform: translate(16px, 2px) rotate(95deg); }
    21%   { transform: translate(8px, 16px) rotate(130deg); opacity: 1; }
    25%   { transform: translate(-8px, 24px) rotate(160deg); opacity: 0; }
    25.01%, 100% { transform: translate(-22px, -22px) rotate(20deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    #footer .block-social .social-links i::after { animation: none; opacity: 0; }
}

@media (min-width: 992px) {

    #footer .tt-foot-logo {
        display: block;
        text-align: center;
        margin: 0 0 22px;
    }

    #footer .tt-foot-logo a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 68px;
        padding: 8px;
        background: #000;
        border-radius: 16px;
        box-shadow: 0 0 0 1px rgba(212, 175, 55, .45);
        line-height: 0;
    }

    #footer .tt-foot-logo img {
        height: 52px;
        width: auto;
    }

    #footer .footer-main {
        padding: 48px 16px 8px;
    }

    #footer .footer-main > .container,
    #footer .footer-main .main-main {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    #footer .footer-left,
    #footer .footer-right,
    #footer .footer-menu,
    #footer .footer-menu > .row,
    #footer .footer-menu .linklist {
        flex: none;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        float: none;
    }

    #footer .footer-right {
        order: 1;
    }

    #footer .footer-left {
        order: 2;
    }

    #footer .footer-about-us,
    #footer .block-newsletter,
    #footer .footer-menu h3,
    #footer .block-social .h4 {
        display: none !important;
    }

    #footer .footer-menu .linklist > div {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        text-align: center !important;
    }

    #footer .footer-menu .linklist > div > div {
        flex: none !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
        text-align: center !important;
    }

    #footer .footer-menu .linklist ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 0;
        margin: 0;
        padding: 0;
        list-style: none;
        line-height: 1.4 !important;
    }

    #footer .footer-menu .linklist li {
        margin: 0 !important;
        padding: 0;
    }

    #footer .footer-menu .linklist li a {
        display: inline-block;
        padding: 0 14px;
        border-left: 1px solid #3a3a3a;
        color: #e8e8e8 !important;
        font-weight: 600;
        font-size: 13.5px !important;
        line-height: 1.3;
        text-decoration: none;
    }

    #footer .footer-menu .linklist li:first-child a {
        border-left: 0;
        padding-left: 0;
    }

    #footer .footer-menu .linklist li a:before {
        display: none;
    }

    #footer .footer-menu .linklist li a:hover {
        color: #d4af37 !important;
    }

    #footer .footer-menu .linklist > div > div:last-child {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
    }

    #footer .footer-menu .linklist > div > div:last-child > div {
        display: inline-flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
        background: #111;
        border: 1px solid #3a3a3a;
        border-radius: 14px;
        overflow: hidden;
    }

    #footer .footer-menu .linklist p {
        display: flex !important;
        align-items: center;
        justify-content: center;
        align-self: center;
        gap: 8px;
        margin: 0 !important;
        padding: 0 18px !important;
        height: 46px;
        border-right: 1px solid #3a3a3a;
        font-size: 0 !important;
        line-height: 1 !important;
        color: #e8e8e8 !important;
        box-sizing: border-box;
    }

    #footer .footer-menu .linklist p::before {
        font-family: FontAwesome;
        font-size: 14px;
        font-weight: 400;
        line-height: 1;
    }

    #footer .footer-menu .linklist p:first-child::before { content: "\f095"; }
    #footer .footer-menu .linklist p:nth-child(2)::before { content: "\f0e0"; }

    #footer .footer-menu .linklist p span,
    #footer .footer-menu .linklist p a {
        font-size: 13.5px !important;
        font-weight: 600;
        line-height: 1.2;
        color: #e8e8e8 !important;
    }

    #footer .footer-menu .linklist > div > div:last-child > div > div {
        display: flex !important;
        margin: 0 !important;
        background: #d4af37 !important;
    }

    #footer .footer-menu a[href*="contact-us"],
    #footer .footer-menu a[href*="nous-contacter"],
    #footer .footer-menu .linklist div[style*="margin-top"] > a {
        display: flex !important;
        align-items: center;
        justify-content: center;
        height: 46px;
        padding: 0 18px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #d4af37 !important;
        background-color: #d4af37 !important;
        color: #141414 !important;
        font-family: inherit !important;
        font-size: 13.5px !important;
        font-weight: 700 !important;
        letter-spacing: 0 !important;
        line-height: 1 !important;
        text-transform: none !important;
    }

    #footer .footer-menu a[href*="contact-us"]:hover,
    #footer .footer-menu a[href*="nous-contacter"]:hover,
    #footer .footer-menu .linklist div[style*="margin-top"] > a:hover {
        color: #141414 !important;
        background: #d4af37 !important;
        background-color: #d4af37 !important;
        filter: brightness(1.05);
    }

    #footer .footer-bottom {
        background-color: transparent !important;
        padding: 16px 16px 32px;
        text-align: center;
    }

    #footer .footer-bottom .row,
    #footer .footer-bottom [class*="col-"] {
        justify-content: center;
        text-align: center !important;
        width: 100%;
        max-width: 100%;
        flex: none;
    }

    #footer .footer-bottom p {
        text-align: center !important;
    }
}

@media (max-width: 991.98px) {

    #footer .tt-foot-logo {
        margin: 22px 0 4px;
    }

    #footer .tt-foot-logo a {
        height: 60px;
        padding: 6px;
        border-radius: 14px;
        box-shadow: 0 0 0 1px rgba(212, 175, 55, .45);
    }

    #footer .tt-foot-logo img {
        height: 44px;
        width: auto;
    }

    #footer .footer-main {
        padding: 8px 16px 12px;
    }

    #footer .footer-main > .container,
    #footer .footer-main .main-main,
    #footer .footer-left,
    #footer .footer-right,
    #footer .footer-menu,
    #footer .footer-menu > .row,
    #footer .footer-menu .linklist {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none;
    }

    #footer .footer-right { order: 1; }
    #footer .footer-left { order: 2; }

    #footer .footer-menu .linklist > div {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        gap: 16px !important;
        text-align: center !important;
    }

    #footer .footer-menu .linklist > div > div {
        flex: none !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        text-align: center !important;
    }

    #footer .footer-menu .linklist ul {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center;
        gap: 0;
        margin: 20px 0 16px !important;
        padding: 0 !important;
        list-style: none;
        line-height: 1.35 !important;
    }

    #footer .footer-menu .linklist li {
        margin: 0 !important;
        padding: 0;
        line-height: 1.35 !important;
    }

    #footer .footer-menu .linklist li a {
        display: inline-block !important;
        min-height: 0 !important;
        height: auto !important;
        border: 0;
        border-left: 1px solid #3a3a3a;
        padding: 0 10px 8px !important;
        color: #e8e8e8 !important;
        font-weight: 600;
        font-size: 13px !important;
        line-height: 1.35 !important;
        text-decoration: none;
    }

    #footer .footer-menu .linklist li:first-child a {
        border-left: 0;
        padding-left: 10px !important;
    }

    #footer .footer-menu .linklist li a:before { display: none; }
    #footer .footer-menu .linklist li a:hover { color: #d4af37 !important; }

    #footer .footer-menu .linklist > div > div:last-child {
        display: flex !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #footer .footer-menu .linklist > div > div:last-child > div {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        background: transparent !important;
        border: 0 !important;
        overflow: visible;
    }

    #footer .footer-menu .linklist p {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        align-self: stretch;
        gap: 8px;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 12px 14px !important;
        background: #111;
        border: 1px solid #3a3a3a;
        font-size: 0 !important;
        line-height: 1.2 !important;
        color: #e8e8e8 !important;
        box-sizing: border-box;
    }

    #footer .footer-menu .linklist p:first-child {
        border-radius: 14px 14px 0 0;
        border-bottom: 0;
    }

    #footer .footer-menu .linklist p:nth-child(2) {
        border-radius: 0 0 14px 14px;
    }

    #footer .footer-menu .linklist p::before {
        font-family: FontAwesome;
        font-size: 14px;
        font-weight: 400;
    }

    #footer .footer-menu .linklist p:first-child::before { content: "\f095"; }
    #footer .footer-menu .linklist p:nth-child(2)::before { content: "\f0e0"; }

    #footer .footer-menu .linklist p span,
    #footer .footer-menu .linklist p a {
        font-size: 13.5px !important;
        font-weight: 600;
        color: #e8e8e8 !important;
    }

    #footer .footer-menu .linklist > div > div:last-child > div > div {
        display: block !important;
        width: 100% !important;
        margin: 10px 0 0 !important;
        background: transparent !important;
    }

    #footer .footer-menu a[href*="contact-us"],
    #footer .footer-menu a[href*="nous-contacter"],
    #footer .footer-menu .linklist div[style*="margin-top"] > a {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100% !important;
        height: 46px;
        padding: 0 16px !important;
        border: 0 !important;
        border-radius: 14px !important;
        background: #d4af37 !important;
        background-color: #d4af37 !important;
        color: #141414 !important;
        font-family: inherit !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
    }

    #footer .footer-menu a[href*="contact-us"]:hover,
    #footer .footer-menu a[href*="nous-contacter"]:hover,
    #footer .footer-menu .linklist div[style*="margin-top"] > a:hover {
        color: #141414 !important;
        background: #d4af37 !important;
        background-color: #d4af37 !important;
    }

    #footer .footer-bottom {
        background-color: transparent !important;
        padding: 8px 16px 28px;
        text-align: center;
    }

    #footer .footer-bottom .row,
    #footer .footer-bottom [class*="col-"],
    #footer .footer-bottom p {
        justify-content: center;
        text-align: center !important;
        width: 100%;
        max-width: 100%;
    }
}

/* Arabic footer. The page stays right to left. Phone numbers and email
   addresses do not: they are the same strings as English. */
html[dir="rtl"] #footer .footer-menu .linklist > div > div:last-child > div {
    direction: ltr;
}

html[dir="rtl"] #footer .footer-menu .linklist p span[dir="ltr"],
html[dir="rtl"] #footer .footer-menu .linklist p a[href^="mailto:"],
html[dir="rtl"] #footer .footer-menu .linklist p a[href^="tel:"] {
    direction: ltr;
    unicode-bidi: isolate;
}

/* Checkout product names and the "show details" cart window.
   The theme paints .product-name in dark gray, which disappears on the dark
   checkout. The details dialog is Bootstrap's white modal. */
body.page-order .product-name,
body.page-order .product-name a,
body.page-cart .product-name,
body.page-cart .product-name a,
#header .cart-dropdown .product-name,
#header .cart-dropdown .product-name a {
    color: #e8e8e8 !important;
}

#cart-summary-product-list .modal-content,
#cart-summary-product-list .modal-header,
#cart-summary-product-list .modal-body,
#header .cart-preview .cart-dropdown,
#header .cart-preview .cart-dropdown .cart-title,
#header .cart-preview .cart-dropdown .cart-bottom {
    background-color: #141414 !important;
    color: #e8e8e8 !important;
    border-color: #2e2e2e !important;
}

#cart-summary-product-list .modal-title,
#cart-summary-product-list .close,
#cart-summary-product-list .product-name,
#cart-summary-product-list .qty,
#header .cart-dropdown .cart-title,
#header .cart-dropdown .cart-summary-line label,
#header .cart-dropdown .product-attributes {
    color: #e8e8e8 !important;
}

#cart-summary-product-list .price,
#cart-summary-product-list .product-price,
#header .cart-dropdown .price,
#header .cart-dropdown .product-price {
    color: #d4af37 !important;
}

#cart-summary-product-list .modal-header {
    border-bottom: 1px solid #2e2e2e !important;
}

#header .cart-dropdown .cart-product-line + .cart-product-line,
#cart-summary-product-list .cart-item + .cart-item {
    border-top: 1px solid #2e2e2e;
}

/* Account order tables. Bootstrap paints .table ink #212529. On the dark
   account page that hides the reference, date, payment, product and shipping
   rows. Status pills keep their own colours. */
body#history .table,
body#order-detail .table,
body#history .table td,
body#history .table th,
body#order-detail .table td,
body#order-detail .table th,
body#history .table a.li-a,
body#order-detail .table a {
    color: #e8e8e8 !important;
}

body#history .table .thead-default th,
body#order-detail .table .thead-default th {
    background-color: #1b1b1b !important;
    color: #a4a4ac !important;
    border-color: #2e2e2e !important;
}

body#history .table td,
body#history .table th,
body#order-detail .table td,
body#order-detail .table th,
body#history .table-bordered,
body#order-detail .table-bordered {
    border-color: #2e2e2e !important;
}

body#history .table .label,
body#order-detail .table .label,
body#order-detail .history-lines .label {
    color: #fff !important;
}

body#history .table .price,
body#order-detail .table .price,
body#history .order-actions a,
body#order-detail .order-actions a {
    color: #d4af37 !important;
}

html[dir="rtl"] #footer .footer-menu .linklist li a {
    border-left: 0 !important;
    border-inline-start: 1px solid #3a3a3a;
}

html[dir="rtl"] #footer .footer-menu .linklist li:first-child a {
    border-inline-start: 0;
    padding-inline-start: 0 !important;
}