/* ==========================================================================
   Terracotta theme — bold, warm, editorial boutique
   ========================================================================== */
:root {
    --color-bg: #faf6f2; /* warm cream, not stark white — reads premium/boutique */
    --color-bg-alt: #f3ece4;
    --color-ink: #1a1512;
    --color-ink-soft: #6b5d56;
    --color-line: #e6dcd2;
    --color-accent: #b95c3a; /* terracotta */
    --color-accent-ink: #ffffff;
    --color-cta: #3c4620; /* dark olive — "Acheter maintenant" buttons */
    --color-cta-ink: #ffffff;
    --color-danger: #b3261e;
    --color-gold: #a67c3d; /* sparing use: dividers, badges, fine details */

    --font-body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --font-heading: "Fraunces", Georgia, "Times New Roman", serif;

    --container-w: 1320px;
    --radius: 0px;
    /* Interactive controls (inputs, selects, buttons) are rounded even though
       cards and sections stay square — the editorial identity lives in the
       layout, while the things you click read as modern UI rather than
       1990s form chrome. Themes can retune this independently of --radius. */
    --control-radius: 10px;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-soft: 0 1px 2px rgba(26, 21, 18, 0.04), 0 12px 32px rgba(26, 21, 18, 0.06);
    --shadow-pop: 0 4px 6px -2px rgba(26, 21, 18, 0.05), 0 12px 28px -4px rgba(26, 21, 18, 0.16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* overflow-x: clip (not hidden) deliberately — hidden with no explicit
   overflow-y computes overflow-y to auto per spec, which silently turns
   body/html into their own scroll container and breaks position:sticky
   on everything inside (the header, in particular) since the element
   sticks relative to a box that never actually scrolls. */
html, body { overflow-x: clip; max-width: 100%; }
body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-ink);
    background: var(--color-bg);
    font-size: 15px;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
[x-cloak] { display: none !important; }
body.no-scroll { overflow: hidden; }
button, a { touch-action: manipulation; }

/* Single, on-brand focus treatment for every interactive element. Uses
   :focus-visible so mouse clicks stay clean and only keyboard/AT users see
   the ring — the only accessible-focus styling this theme had before. */
a, button, input, select, textarea, summary, [tabindex] {
    outline-offset: 2px;
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
.btn:focus-visible { outline-offset: 3px; }

.eyebrow {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-ink-soft);
    margin: 0 0 8px;
}

.announcement-bar {
    background: var(--color-ink);
    color: var(--color-bg);
    text-align: center;
    padding: 9px 16px;
    position: relative;
    overflow: hidden;
}
.announcement-bar__text {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.announcement-bar[x-data] .announcement-bar__text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.announcement-bar[x-data] { min-height: 36px; }

.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: #000;
    color: #fff;
    padding: 8px 12px;
    z-index: 100;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
    border-bottom: 1px solid var(--color-line);
    position: sticky;
    top: 0;
    background: var(--color-bg);
    z-index: 40;
    box-shadow: 0 0 0 rgba(17, 17, 17, 0);
    transition: box-shadow .2s ease;
}
.site-header--scrolled { box-shadow: 0 2px 16px rgba(17, 17, 17, 0.08); }
.site-header__bar {
    max-width: var(--container-w);
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 24px;
    transition: padding .2s ease;
}
.site-header--scrolled .site-header__bar { padding-top: 8px; padding-bottom: 8px; }
.site-header--scrolled .site-header__logo { font-size: 16px; }
@media (max-width: 600px) {
    .site-header__bar { padding: 10px 16px; gap: 12px; }
}
.site-header__logo {
    font-family: var(--font-heading);
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 19px;
    margin: 0 auto;
    order: 2;
    transition: font-size .2s ease;
}
.site-nav { display: flex; gap: 26px; order: 1; }
.site-nav__item { position: relative; }
.site-nav__link {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 8px 0;
    position: relative;
}
.site-nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 2px;
    height: 1px;
    background: var(--color-ink);
    transition: right .2s var(--ease);
}
.site-nav__link:hover::after { right: 0; }
.site-nav__chevron { transition: transform .18s var(--ease); }
.site-nav__chevron.is-open { transform: rotate(180deg); }
.site-nav__dropdown {
    position: absolute;
    top: 100%;
    left: -16px;
    background: var(--color-bg);
    border: 1px solid var(--color-line);
    min-width: 220px;
    padding: 10px 0;
    box-shadow: 0 16px 32px rgba(0,0,0,0.1);
}
.site-nav__dropdown-link {
    display: block;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    border-left: 2px solid transparent;
    transition: background-color .12s ease, border-color .12s ease;
}
.site-nav__dropdown-link:hover,
.site-nav__dropdown-link:focus-visible {
    background: #f7f2ef;
    border-left-color: var(--color-accent);
}

.site-nav__dropdown--enter,
.site-nav__dropdown--leave { transition: opacity .16s var(--ease), transform .16s var(--ease); }
.site-nav__dropdown--enter-start { opacity: 0; transform: translateY(-6px); }
.site-nav__dropdown--enter-end { opacity: 1; transform: translateY(0); }

.site-header__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; order: 3; }
.icon-btn {
    position: relative;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    color: var(--color-ink);
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.icon-btn:hover { background: #f7f2ef; }
.icon-btn:active { transform: scale(0.92); }
.icon-btn__badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--color-accent);
    color: #fff;
    font-size: 10px;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 999px;
    transition: transform .15s var(--ease);
}

.lang-switch { position: relative; }
.lang-switch__toggle { width: auto; padding: 0 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; border-radius: 999px; }
.lang-switch__dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--color-bg);
    border: 1px solid var(--color-line);
    min-width: 140px;
    padding: 6px 0;
    box-shadow: 0 16px 32px rgba(0,0,0,0.1);
    z-index: 10;
}
.lang-switch__link { display: block; padding: 8px 16px; font-size: 13px; transition: background-color .12s ease; }
.lang-switch__link:hover, .lang-switch__link:focus-visible { background: #f7f2ef; }
.lang-switch__link.is-active { font-weight: 700; color: var(--color-accent); }

.site-nav-mobile { border-top: 1px solid var(--color-line); padding: 8px 16px; overflow: hidden; }
.site-nav-mobile--enter,
.site-nav-mobile--leave { transition: opacity .16s var(--ease), transform .16s var(--ease); }
.site-nav-mobile--enter-start { opacity: 0; transform: translateY(-8px); }
.site-nav-mobile--enter-end { opacity: 1; transform: translateY(0); }

.site-nav-mobile__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 0;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
    list-style: none;
}
.site-nav-mobile__item summary::-webkit-details-marker { display: none; }
.site-nav-mobile__marker { transition: transform .18s var(--ease); flex-shrink: 0; }
.site-nav-mobile__item[open] .site-nav-mobile__marker { transform: rotate(180deg); }
.site-nav-mobile__item--link {
    display: block;
    padding: 14px 0;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.site-nav-mobile__children { display: flex; flex-direction: column; padding-left: 12px; }
.site-nav-mobile__children a {
    padding: 10px 0;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-ink-soft);
    transition: color .12s ease;
}
.site-nav-mobile__children a:hover, .site-nav-mobile__children a:focus-visible { color: var(--color-ink); }

/* ==========================================================================
   Hero (split panel: statement + editorial image)
   ========================================================================== */
.hero {
    background: var(--color-accent);
    color: var(--color-ink);
    max-width: none;
    text-align: left;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
}
.hero__content {
    padding: 64px 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.hero .eyebrow { color: rgba(0,0,0,0.6); }
.hero__brand {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 68px;
    line-height: 0.98;
    letter-spacing: -0.01em;
    text-transform: none;
    margin: 0 0 20px;
}
.hero__text {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    max-width: 420px;
    margin: 0 0 32px;
    color: rgba(26, 21, 18, 0.82);
}
.hero__cta { width: auto; align-self: flex-start; padding-left: 30px; padding-right: 30px; }
.hero__media { overflow: hidden; align-self: center; aspect-ratio: var(--hero-image-ratio, 4/3); background: #111; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; }
    .hero__content { padding: 40px 20px 32px; }
    .hero__brand { font-size: 44px; }
    .hero__media { order: -1; }
}

/* ==========================================================================
   Sections / layout rhythm
   ========================================================================== */
.section { max-width: var(--container-w); margin: 0 auto; padding: 40px 24px; }
.section__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 20px;
}
.section__header h2 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin: 0;
}
.link-more {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-accent);
}
.link-more:hover { text-decoration: underline; }

/* ==========================================================================
   Category grid — portrait cards
   ========================================================================== */
.category-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}
.category-card { text-align: center; }
.category-card__image {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 0;
    margin-bottom: 12px;
    background: #f1eae6;
}
.category-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease); }
.category-card:hover .category-card__image img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
    .category-card__image img { transition: none; }
    .category-card:hover .category-card__image img { transform: none; }
}
.category-card__label {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .12s ease;
}
.category-card:hover .category-card__label { color: var(--color-accent); }
@media (max-width: 900px) {
    .category-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    /* 3 cramped ~98px columns become a swipeable rail instead — each tile
       gets room to breathe and the label no longer has to fight for space. */
    .category-grid {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(120px, 30%);
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 24px;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    .category-card { scroll-snap-align: start; }
}

/* ==========================================================================
   Trust bar
   ========================================================================== */
.trust-bar { background: var(--color-bg-alt); padding: 28px 24px; }
.trust-bar__grid {
    max-width: var(--container-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.trust-bar__item { display: flex; align-items: center; gap: 12px; }
.trust-bar__icon { flex-shrink: 0; width: 28px; height: 28px; color: var(--color-accent); }
.trust-bar__label { font-family: var(--font-heading); font-weight: 600; font-size: 13px; line-height: 1.3; }
@media (max-width: 900px) {
    .trust-bar__grid { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonials { padding: 72px 24px; }
.testimonials__header { max-width: var(--container-w); margin: 0 auto 40px; text-align: center; }
.testimonials__header h2 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 28px;
    letter-spacing: 0.01em;
    margin: 0;
}
.testimonials__grid {
    max-width: var(--container-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}
.testimonial__stars { display: flex; gap: 3px; color: var(--color-gold); margin-bottom: 18px; }
.testimonial__stars svg { width: 15px; height: 15px; }
.testimonial__quote {
    font-family: var(--font-heading);
    font-size: 19px;
    font-style: italic;
    font-weight: 500;
    line-height: 1.5;
    margin: 0 0 20px;
}
.testimonial__author { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-ink-soft); }
@media (max-width: 900px) {
    .testimonials__grid { grid-template-columns: 1fr; gap: 40px; }
    .testimonials { padding: 56px 24px; }
}

/* ==========================================================================
   Feature split banner
   ========================================================================== */
.feature-banner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 460px;
}
.feature-banner__image { overflow: hidden; align-self: center; aspect-ratio: var(--feature-image-ratio, 4/3); background: #111; }
.feature-banner__image img { width: 100%; height: 100%; object-fit: cover; }
.feature-banner__spotlight {
    background: var(--color-accent);
    padding: 32px;
    display: flex;
    flex-direction: column;
}
.feature-banner__spotlight-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 20px;
    font-family: var(--font-heading);
}
.feature-banner__spotlight-name { font-weight: 800; font-size: 14px; text-transform: uppercase; }
.feature-banner__spotlight-price { font-weight: 700; font-size: 14px; }
.feature-banner__spotlight-media {
    flex: 1;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    margin-bottom: 20px;
    min-height: 200px;
}
.feature-banner__spotlight-media img { max-height: 240px; width: auto; object-fit: contain; }
.feature-banner__spotlight .btn { max-width: 320px; }
@media (max-width: 900px) {
    .feature-banner { grid-template-columns: 1fr; min-height: 0; }
}

/* ==========================================================================
   Product cards / scroller / grid
   ========================================================================== */
.product-scroll {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 1fr);
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 24px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--color-line) transparent;
}
@media (max-width: 600px) {
    .product-scroll { grid-auto-columns: minmax(168px, 66%); gap: 14px; }
}
.product-scroll::-webkit-scrollbar { height: 6px; }
.product-scroll::-webkit-scrollbar-track { background: transparent; }
.product-scroll::-webkit-scrollbar-thumb { background: var(--color-line); border-radius: 999px; }
.product-scroll::-webkit-scrollbar-thumb:hover { background: var(--color-ink-soft); }
.product-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px 20px;
}
@media (max-width: 900px) {
    .product-grid { grid-template-columns: repeat(2, 1fr); }
}
.product-card {
    display: block;
    scroll-snap-align: start;
}
.product-card__media {
    position: relative;
    display: block;
    aspect-ratio: 1;
    background: #f5f2f0;
    overflow: hidden;
    margin-bottom: 14px;
    border: 1px solid var(--color-line);
    transition: border-color .15s ease;
}
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease); }
.product-card:hover .product-card__media { border-color: var(--color-ink); }
.product-card:hover .product-card__media img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
    .product-card__media img { transition: none; }
    .product-card:hover .product-card__media img { transform: none; }
}
.product-card__name a { transition: color .12s ease; }
.product-card__name a:hover { color: var(--color-accent); }
.product-card__badge {
    position: absolute;
    top: 10px;
    right: 10px;
    left: auto;
    background: var(--color-accent);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 4px 8px;
}
.product-card__name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    margin: 0 0 4px;
}
.product-card__price { font-size: 13px; color: var(--color-ink-soft); margin: 0 0 12px; }
.product-card__actions { display: flex; flex-direction: column; gap: 8px; }
.product-card__actions select {
    min-height: 44px;
    border: 1px solid var(--color-line);
    padding: 6px 30px 6px 8px;
    font-size: 13px;
    background: #fff;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23111111' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 7px;
    transition: border-color .12s ease;
}
.product-card__actions select:focus { border-color: var(--color-ink); outline: none; }

/* ==========================================================================
   Product actions (shared "Add to cart" / "Buy now" component)
   ========================================================================== */
.product-actions { display: flex; flex-direction: column; gap: 8px; }
.product-actions__variant {
    min-height: 44px;
    border: 1px solid var(--color-line);
    padding: 6px 30px 6px 8px;
    font-size: 13px;
    background: #fff;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23111111' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 7px;
    transition: border-color .12s ease;
}
.product-actions__variant:focus { border-color: var(--color-ink); outline: none; }
.product-actions__buttons { display: flex; gap: 8px; }
.product-actions__cart-form { display: contents; }
.product-actions__unavailable { font-size: 12px; color: var(--color-ink-soft); margin: 0; }
.product-actions--compact .product-actions__buttons { flex-direction: column; }
.product-actions--compact .product-actions__buttons .btn { padding: 8px 10px; font-size: 11px; }
.product-actions--compact .btn__subtitle { display: none; }
.pdp .product-actions { max-width: 380px; margin-bottom: 24px; }
.pdp .product-actions__buttons .btn { max-width: 220px; }

/* ==========================================================================
   Buttons — "Acheter maintenant / Le paiement à la livraison"
   ========================================================================== */
.btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 44px;
    width: 100%;
    padding: 10px 14px;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid var(--color-cta);
    border-radius: var(--control-radius);
    transition: opacity .15s ease, transform .1s ease;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:not(:disabled):active { transform: translateY(1px); }
.btn--solid { background: var(--color-cta); color: var(--color-cta-ink); }
.btn--solid:hover { opacity: 0.88; }
.btn__subtitle {
    display: block;
    font-size: 9px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.85;
}
.btn--outline { background: #fff; color: var(--color-ink); border-color: var(--color-line); flex-direction: row; }
.btn--outline::after { content: none; }
.btn--outline:hover { background: var(--color-ink); color: #fff; border-color: var(--color-ink); }

/* ==========================================================================
   Brand tiles
   ========================================================================== */
.brand-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.brand-card { display: block; }
.brand-card__image { aspect-ratio: 4/5; overflow: hidden; background: #f5f2f0; }
.brand-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease); }
.brand-card:hover .brand-card__image img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
    .brand-card__image img { transition: none; }
    .brand-card:hover .brand-card__image img { transform: none; }
}
.brand-card__label {
    display: block;
    background: var(--color-accent);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-align: center;
    padding: 14px 8px;
    transition: background-color .15s ease;
}
.brand-card:hover .brand-card__label { background: var(--color-ink); }
@media (max-width: 900px) {
    .brand-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Ticker marquee
   ========================================================================== */
.ticker {
    background: #000;
    color: #fff;
    overflow: hidden;
    padding: 20px 0;
    white-space: nowrap;
}
.ticker__track {
    display: inline-flex;
    animation: ticker-scroll 22s linear infinite;
}
.ticker__item {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 34px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 0 32px;
}
@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .ticker__track { animation: none; }
}

/* ==========================================================================
   CTA banner
   ========================================================================== */
.cta-banner {
    text-align: center;
    padding: 64px 24px;
    background: #fff;
}
.cta-banner h2 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 26px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin: 0 0 8px;
}
.cta-banner p { display: none; }
.cta-banner .btn {
    display: inline-flex;
    width: auto;
    background: none;
    border: none;
    color: var(--color-accent);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    font-size: 14px;
    min-height: 0;
    padding: 0;
}
.cta-banner .btn::after { content: none; }
.cta-banner .btn:hover { text-decoration: underline; opacity: 1; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
    border-top: 1px solid var(--color-line);
    margin-top: 0;
    background: var(--color-bg-alt);
}
.site-footer__inner {
    max-width: var(--container-w);
    margin: 0 auto;
    padding: 56px 24px 48px;
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1.2fr;
    gap: 40px;
    align-items: start;
}
@media (max-width: 900px) {
    .site-footer__inner { grid-template-columns: 1fr 1fr; row-gap: 36px; }
}
@media (max-width: 600px) {
    .site-footer__inner { grid-template-columns: 1fr; }
}
.site-footer__brand-name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 20px;
    margin: 0 0 16px;
}
.site-footer__contact { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.site-footer__contact .eyebrow { font-weight: 700; }
.site-footer__contact a { transition: color .12s ease; }
.site-footer__contact a:hover { color: var(--color-accent); }
.site-footer__address { color: var(--color-ink-soft); margin: 0; }
.site-footer__newsletter label {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 10px;
}
.site-footer__newsletter-row { display: flex; border-bottom: 1px solid var(--color-ink); }
.site-footer__newsletter-row input {
    flex: 1;
    min-height: 44px;
    border: none;
    background: transparent;
    padding: 10px 0;
    font-size: 16px;
}
.site-footer__newsletter-row button {
    border: none;
    background: none;
    color: var(--color-ink);
    padding: 0 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    transition: color .12s ease;
}
.site-footer__newsletter-row button:hover { color: var(--color-accent); }
.field-error { color: var(--color-danger); font-size: 12px; margin-top: 6px; display: block; }
.site-footer__social { display: flex; flex-direction: row; gap: 10px; }
.site-footer__social-link {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid var(--color-line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-ink);
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.site-footer__social-link svg { width: 18px; height: 18px; }
.site-footer__social-link:hover { background: var(--color-accent); color: #fff; border-color: var(--color-accent); transform: translateY(-2px); }
.site-footer__map { grid-column: span 1; }
.site-footer__map iframe {
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--color-line);
    display: block;
}
@media (max-width: 900px) {
    .site-footer__map { grid-column: span 2; }
}
@media (max-width: 600px) {
    .site-footer__map { grid-column: span 1; }
}
.site-footer__wordmark {
    text-align: center;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0;
    padding-top: 8px;
    border-top: 1px solid var(--color-line);
}
.site-footer__bottom {
    text-align: center;
    font-size: 11px;
    color: var(--color-ink-soft);
    padding: 12px 24px 24px;
}

@media (max-width: 900px) {
    .site-footer__inner { grid-template-columns: 1fr; }
    .site-footer__social { justify-content: flex-start; }
}

/* ==========================================================================
   PLP — collection hero + filter bar
   ========================================================================== */
.breadcrumbs { display: none; }
.page-title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 34px;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    margin: 0 0 8px;
}
.page-description { color: rgba(0,0,0,0.7); font-size: 14px; max-width: 640px; margin: 0; }
.empty-state { color: var(--color-ink-soft); font-size: 14px; padding: 40px 0; text-align: center; }
@media (max-width: 600px) {
    .page-title { font-size: 24px; }
}

.collection-hero { background: var(--color-accent); padding: 40px 24px; }
.collection-hero .section { padding: 0; }
.collection-hero .breadcrumbs { display: block; color: rgba(0,0,0,0.6); }
.collection-hero .breadcrumbs a { text-decoration: underline; }

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    max-width: var(--container-w);
    margin: 0 auto;
    padding: 12px 24px;
    border-bottom: 1px solid var(--color-line);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-ink-soft);
}
.filter-bar__group { position: relative; flex: none; }
.filter-bar__trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 14px;
    background: none;
    border: 1px solid transparent;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    color: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .12s ease, color .12s ease;
}
.filter-bar__trigger:hover,
.filter-bar__trigger[aria-expanded="true"] { border-color: var(--color-line); color: var(--color-ink); }
.filter-bar__panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 20;
    min-width: 220px;
    max-width: calc(100vw - 32px);
    background: var(--color-bg);
    border: 1px solid var(--color-line);
    padding: 8px;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1);
    text-transform: none;
    letter-spacing: normal;
    font-weight: 500;
}
.filter-bar__option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 0 8px;
    font-size: 13px;
    color: var(--color-ink);
    cursor: pointer;
    white-space: nowrap;
}
.filter-bar__option:hover { background: #f7f2ef; }
.filter-bar__option input { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--color-accent); }
.filter-bar__panel--price { min-width: 240px; padding: 14px; }
.filter-bar__price-row { display: flex; gap: 10px; margin-bottom: 12px; }
.filter-bar__price-row label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--color-ink-soft); flex: 1; min-width: 0; }
.filter-bar__price-row input {
    min-height: 40px;
    border: 1px solid var(--color-line);
    background: #fff;
    padding: 0 10px;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-ink);
    text-transform: none;
    letter-spacing: normal;
}
.filter-bar__price-row input:focus { border-color: var(--color-ink); outline: none; }
.filter-bar__panel--price .btn { min-height: 40px; }
.filter-bar__clear {
    flex: none;
    color: var(--color-ink-soft);
    text-decoration: underline;
    text-underline-offset: 2px;
    padding: 0 4px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
.filter-bar__clear:hover { color: var(--color-ink); }
.filter-bar__spacer { margin-left: auto; display: flex; align-items: center; gap: 16px; flex: none; }
.filter-bar__count { color: var(--color-ink); font-weight: 400; text-transform: none; letter-spacing: 0; white-space: nowrap; }
.filter-bar__sort {
    min-height: 44px;
    border: 1px solid var(--color-line);
    background-color: #fff;
    padding: 0 28px 0 12px;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    color: var(--color-ink);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23111111' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 7px;
    cursor: pointer;
}
.filter-bar__sort:focus { border-color: var(--color-ink); outline: none; }
@media (max-width: 600px) {
    .filter-bar__spacer { margin-left: 0; }
    /* .filter-bar__panel is positioned absolute relative to its own
       trigger button (.filter-bar__group) — on a narrow viewport a
       trigger that isn't near the left edge (e.g. "Prix", after
       "Marque") pushes the panel's right edge well past the screen, so
       part of it (the Max input, the Appliquer button) is unreachable.
       Anchoring to the viewport instead, centered, sidesteps that
       regardless of where the trigger happens to sit in the wrapped row.
       [dir="rtl"] is reasserted at equal specificity so this isn't lost
       to the higher-specificity RTL override further down the file. */
    .filter-bar__panel,
    html[dir="rtl"] .filter-bar__panel {
        position: fixed;
        left: 16px;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        width: auto;
        max-width: none;
        max-height: calc(100vh - 32px);
        overflow-y: auto;
    }
    .filter-bar__panel--price { min-width: 0; }
}

.brand-header { display: flex; align-items: center; gap: 20px; margin-top: 0; }
.brand-header__logo { width: 80px; height: 80px; object-fit: contain; background: #fff; flex: 0 0 auto; }

.pagination-wrap { margin-top: 32px; }

/* ==========================================================================
   Pagination — replaces Laravel's Tailwind-classed default view (see
   components/pagination.blade.php), whose utility classes do nothing here
   since this storefront doesn't load Tailwind; that's what let the arrow
   <svg>s render at a huge unstyled default size instead of this 44px
   touch-target-sized control.
   ========================================================================== */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.pagination__arrow {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-line);
    border-radius: var(--control-radius);
    background: none;
    color: var(--color-ink);
    text-decoration: none;
    transition: border-color .14s ease, color .14s ease;
}
.pagination__arrow:hover { border-color: var(--color-accent); color: var(--color-accent); }
.pagination__arrow--disabled { opacity: .35; pointer-events: none; }
[dir="rtl"] .pagination__arrow svg { transform: scaleX(-1); }
.pagination__pages { display: flex; align-items: center; gap: 4px; }
.pagination__page {
    min-width: 40px;
    height: 40px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--control-radius);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-ink-soft);
    text-decoration: none;
    transition: background-color .14s ease, color .14s ease;
}
.pagination__page:hover { background: var(--color-line); }
.pagination__page--current { background: var(--color-accent); color: var(--color-accent-ink); }
.pagination__dots {
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-ink-soft);
}

/* ==========================================================================
   PDP
   ========================================================================== */
.pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
@media (max-width: 900px) {
    .pdp { grid-template-columns: 1fr; }
}
.product-gallery { display: flex; flex-direction: column; padding: 24px; }
@media (min-width: 900px) {
    /* Stays in view while the info column (now much longer, landing-page
       style) scrolls past it — opts out of the grid's align-items:stretch
       so it can size to its own content instead of the taller column. */
    .product-gallery { position: sticky; top: 96px; align-self: start; }
}
.product-gallery__main {
    aspect-ratio: 1;
    background: #fff;
    border: 1px solid var(--color-line);
    overflow: hidden;
}
@media (min-width: 900px) {
    /* Capped by viewport height (not just column width) so a wide desktop
       window can't make the sticky image taller than the screen. */
    .product-gallery__main { max-width: min(100%, 52vh); margin: 0 auto; }
}
.product-gallery__main img { width: 100%; height: 100%; object-fit: contain; }
.product-gallery__thumbs { display: flex; gap: 10px; margin-top: 12px; padding: 0 4px; }
@media (min-width: 900px) {
    .product-gallery__thumbs { max-width: min(100%, 52vh); margin-left: auto; margin-right: auto; }
}
.product-gallery__thumb {
    width: 56px;
    height: 56px;
    padding: 4px;
    border: 1px solid var(--color-line);
    background: #fff;
    cursor: pointer;
    overflow: hidden;
}
.product-gallery__thumb.is-active { border-color: var(--color-ink); border-width: 2px; }
.product-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }

.pdp__info {
    background: var(--color-accent);
    padding: 32px;
    display: flex;
    flex-direction: column;
}
@media (min-width: 900px) {
    .pdp__info { padding: 56px 48px; }
}
.pdp__eyebrow {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-ink);
    margin: 0 0 8px;
}
.pdp__brand {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-decoration: underline;
}
.pdp__name {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 30px;
    line-height: 1.1;
    text-transform: uppercase;
    margin: 10px 0 6px;
}
.pdp__price { font-size: 22px; font-weight: 700; margin: 0 0 16px; }
@media (max-width: 600px) {
    .pdp__name { font-size: 22px; }
    .pdp__price { font-size: 17px; }
}
.pdp__stock--out {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    background: var(--color-danger);
    padding: 4px 10px;
    margin-bottom: 12px;
}
.pdp__form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 24px; max-width: 340px; }
.pdp__form label { width: 100%; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.pdp__form select {
    width: 100%;
    min-height: 44px;
    border: 1px solid rgba(0,0,0,0.25);
    padding: 10px 34px 10px 12px;
    font-size: 16px;
    background: #fff;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23111111' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 11px 8px;
    transition: border-color .12s ease;
}
.pdp__form select:focus { border-color: var(--color-ink); outline: none; }
.pdp__form .btn { max-width: 320px; }
.pdp__description {
    padding-top: 20px;
    border-top: 1px solid rgba(0,0,0,0.15);
}
.pdp__description h2 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 10px;
}
.pdp__description p { font-size: 13px; line-height: 1.7; color: var(--color-ink); }

/* ==========================================================================
   PDP — "about the brand" (real brand data, not fabricated per-product copy).
   A cream card floating inside the accent-colored info column: breaks up
   the block of solid color, keeps text at its originally-designed contrast
   (the accent background is too close in tone to --color-ink-soft to use
   it directly), and — deliberately — adds genuine height to the info
   column so the sticky gallery beside it has real room to be sticky in,
   rather than only working for products with unusually long descriptions.
   ========================================================================== */
.pdp__brand-about {
    margin-top: 24px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--color-bg);
    border: 1px solid rgba(0, 0, 0, 0.08);
}
.pdp__brand-about-logo {
    width: 72px;
    height: 72px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--color-line);
    flex-shrink: 0;
}
.pdp__brand-about-name {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 16px;
    text-transform: uppercase;
    margin: 2px 0 8px;
}
.pdp__brand-about-desc {
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-ink-soft);
    margin: 0 0 8px;
}
@media (max-width: 600px) {
    .pdp__brand-about { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ==========================================================================
   PDP — mobile sticky buy bar (the "do not break mobile view" answer to the
   desktop sticky gallery: a slim bottom bar instead of a sticky image, so
   the purchase CTA stays reachable without eating scarce mobile height)
   ========================================================================== */
.pdp-sticky-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 110;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--color-bg);
    border-top: 1px solid var(--color-line);
    box-shadow: 0 -4px 16px rgba(17, 17, 17, 0.1);
}
.pdp-sticky-bar__thumb {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border: 1px solid var(--color-line);
    flex-shrink: 0;
    background: #fff;
}
.pdp-sticky-bar__info { flex: 1; min-width: 0; }
.pdp-sticky-bar__name {
    font-size: 12px;
    font-weight: 700;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pdp-sticky-bar__price { font-size: 12px; color: var(--color-ink-soft); margin: 0; }
.pdp-sticky-bar__cta { width: auto; flex-shrink: 0; min-height: 44px; padding: 0 18px; }
.pdp-sticky-bar--enter,
.pdp-sticky-bar--leave { transition: transform .2s var(--ease), opacity .2s var(--ease); }
.pdp-sticky-bar--enter-start { transform: translateY(100%); opacity: 0; }
.pdp-sticky-bar--enter-end { transform: translateY(0); opacity: 1; }
@media (min-width: 900px) {
    .pdp-sticky-bar { display: none; }
}
/* The mobile cart FAB shares the bottom-right corner — lift it above the
   sticky bar (present, even if not currently x-shown) so they never overlap. */
body:has(.pdp-sticky-bar) .cart-fab { bottom: 78px; }
body:has(.pdp-sticky-bar) .checkout-fab { bottom: 78px; }

.brand-tags {
    background: var(--color-accent);
    padding: 32px 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 32px;
}
.brand-tags a {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 24px;
    text-transform: none;
}
.brand-tags sup { font-size: 13px; font-weight: 600; margin-left: 2px; }

/* ==========================================================================
   Cart / checkout / thank-you / search — palette + touch-target pass
   ========================================================================== */
.cart {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    align-items: start;
}
@media (max-width: 900px) {
    .cart { grid-template-columns: 1fr; }
}
.cart__lines { display: flex; flex-direction: column; gap: 20px; }
.cart-line {
    display: grid;
    grid-template-columns: 72px 1fr auto auto auto;
    gap: 16px;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-line);
}
.cart-line__media { width: 72px; height: 72px; background: #f5f2f0; overflow: hidden; flex: 0 0 auto; }
.cart-line__media img { width: 100%; height: 100%; object-fit: cover; }
.cart-line__name { font-family: var(--font-heading); font-weight: 700; font-size: 13px; text-transform: uppercase; display: block; transition: color .12s ease; }
.cart-line__name:hover { color: var(--color-accent); }
.cart-line__variant, .cart-line__price { font-size: 12px; color: var(--color-ink-soft); margin: 4px 0 0; }
.cart-line__qty { display: flex; align-items: center; gap: 8px; }
.cart-line__qty .btn { width: auto; min-height: 44px; padding: 0 12px; }
.cart-line__total { font-family: var(--font-heading); font-weight: 700; font-size: 13px; white-space: nowrap; }
@media (max-width: 600px) {
    .cart-line {
        grid-template-columns: 64px 1fr auto;
        grid-template-areas:
            "media info remove"
            "qty   qty  total";
        row-gap: 12px;
    }
    .cart-line__media { grid-area: media; width: 64px; height: 64px; }
    .cart-line__info { grid-area: info; }
    .cart-line__remove { grid-area: remove; }
    .cart-line__qty { grid-area: qty; }
    .cart-line__total { grid-area: total; justify-self: end; align-self: center; }
}

.cart__summary, .checkout__summary {
    border: 1px solid var(--color-line);
    padding: 24px;
}
.cart__summary h2, .checkout__summary h2 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 16px;
}
.cart__summary-row, .checkout__summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid var(--color-line);
}
.cart__summary-row:first-child, .checkout__summary-row:first-child { padding-top: 0; margin-top: 0; border-top: none; }
.checkout__summary-row--total {
    font-weight: 700;
    font-size: 17px;
    font-family: var(--font-heading);
    margin-top: 14px;
    padding: 14px 14px 12px;
    background: color-mix(in srgb, var(--color-accent) 8%, transparent);
}
.checkout__summary-row--total span:last-child { color: var(--color-accent); }
.cart__summary-note { font-size: 12px; color: var(--color-ink-soft); margin: 8px 0 20px; }
.checkout__summary-line { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--color-ink-soft); margin-bottom: 10px; }
.cart__checkout, .checkout__form .btn, .form-row input, .form-row select, .form-row textarea { border-radius: var(--control-radius); }

.checkout {
    display: grid;
    /* minmax(0, …), not bare fr units — see the .checkout__form comment
       below: without it, a wide child (the wilaya <select> especially —
       its intrinsic width is driven by its longest option text regardless
       of width:100%) refuses to let this track shrink, which then forces
       every ancestor to overflow the viewport in turn. */
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    margin-top: 24px;
}
@media (max-width: 900px) {
    .checkout { grid-template-columns: minmax(0, 1fr); }
}
/* Direct grid items still default to min-width:auto — belt-and-suspenders
   alongside the minmax(0, …) tracks above (see the .checkout__form comment
   further down for the full story on why this class of bug is worth
   guarding twice). */
.checkout > * { min-width: 0; }
.checkout__main {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.checkout__form h2,
.checkout__summary h2,
.checkout-items__header h2 {
    /* A small terracotta kicker mark — these headings are otherwise plain
       uppercase black-on-cream, and the whole flow reads flat without it. */
    position: relative;
    padding-inline-start: 14px;
}
.checkout__form h2::before,
.checkout__summary h2::before,
.checkout-items__header h2::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: var(--color-accent);
}
.checkout__form h2 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 20px 0 12px;
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
}
.checkout__form h2:first-child { margin-top: 0; }
.checkout__badge {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
    padding: 3px 8px;
    border-radius: 999px;
}
/* Below the summary card's total now, not above the button inside the
   form — the button moved (see checkout/create.blade.php), and this
   reassurance line moved with it. */
.checkout__payment-note { font-size: 12.5px; color: var(--color-ink-soft); text-align: center; margin: 12px 0 0; }
/* Admin → Store Settings → Checkout — pins the submit button (and total) to
   the bottom of the screen on mobile so it's reachable while scrolling
   through a long delivery form. Desktop's two-column layout doesn't have
   the same reachability problem, so this only changes anything below 900px. */
@media (max-width: 900px) {
    .checkout__submit-wrap--sticky {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 150;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        background: color-mix(in srgb, var(--color-bg) 94%, transparent);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-top: 1px solid var(--color-line);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
    }
    .checkout__submit-wrap--sticky .checkout__payment-note { margin: 6px 0 0; }
    /* Reserves room in the summary card so its last row isn't covered by
       the fixed bar above, and hides the cart FAB so two floating elements
       never stack on the same screen edge. */
    body:has(.checkout__submit-wrap--sticky) .checkout__summary { padding-bottom: 92px; }
    body:has(.checkout__submit-wrap--sticky) .cart-fab { display: none; }
}

/* ==========================================================================
   Checkout items — the cart, editable in place. Same boxed-card treatment
   as .checkout__form/.checkout__summary; rows reuse the drawer's qty-stepper
   idiom at a larger size since this is the primary list now, not a sidebar.
   ========================================================================== */
.checkout-items {
    border: 1px solid var(--color-line);
    background: #fff;
    padding: 24px;
}
.checkout-items__empty { font-size: 14px; color: var(--color-ink-soft); }
.checkout-items__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 16px;
}
.checkout-items__header h2 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.checkout-items__count {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: normal;
    text-transform: none;
    color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 14%, transparent);
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.checkout-items__clear {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 12px;
    text-decoration: underline;
    color: var(--color-ink-soft);
    padding: 0;
    flex-shrink: 0;
}
.checkout-items__clear:hover { color: var(--color-accent); }
.checkout-items__list { display: flex; flex-direction: column; gap: 16px; }
.checkout-item {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) auto;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-line);
}
.checkout-item:last-child { padding-bottom: 0; border-bottom: none; }
.checkout-item__media {
    width: 88px;
    height: 88px;
    border: 1px solid var(--color-line);
    background: color-mix(in srgb, var(--color-accent) 5%, var(--color-bg));
    padding: 6px;
    display: block;
}
.checkout-item__media img { width: 100%; height: 100%; object-fit: contain; }
.checkout-item__name { font-size: 14px; font-weight: 600; color: var(--color-ink); display: block; margin-bottom: 2px; }
.checkout-item__variant { font-size: 12.5px; color: var(--color-ink-soft); margin: 0 0 4px; }
.checkout-item__price { font-size: 12.5px; color: var(--color-ink-soft); margin: 0 0 10px; }
.checkout-item__controls { display: flex; align-items: center; gap: 14px; }
.checkout-item__qty {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--color-line);
    padding: 3px 10px;
    transition: border-color .14s ease;
}
.checkout-item__qty:hover { border-color: var(--color-accent); }
.checkout-item__qty-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    color: var(--color-ink);
    transition: color .14s ease;
}
.checkout-item__qty-btn:hover { color: var(--color-accent); }
.checkout-item__qty-value { font-size: 13.5px; min-width: 14px; text-align: center; }
.checkout-item__remove {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-line);
    background: none;
    cursor: pointer;
    color: var(--color-ink-soft);
    flex-shrink: 0;
    transition: color .14s ease, border-color .14s ease;
}
.checkout-item__remove:hover { color: var(--color-accent); border-color: var(--color-accent); }
.checkout-item__total { font-size: 14px; font-weight: 600; white-space: nowrap; align-self: start; }
@media (max-width: 520px) {
    .checkout-item { grid-template-columns: 64px minmax(0, 1fr); }
    .checkout-item__media { width: 64px; height: 64px; }
    .checkout-item__total { grid-column: 2; justify-self: start; margin-top: 6px; }
}

/* ==========================================================================
   Checkout form — two fields per row, on every viewport (the customer asked
   for density here specifically: fewer rows to scroll through, mobile
   included, rather than the usual mobile-first single-column stack).
   CSS Grid rather than a blade-side row-pairing wrapper: each .form-row
   stays an independent element (Alpine x-show on any one of them just
   removes it from grid flow — display:none participates in nothing — so
   conditional fields like the stop-desk picker reflow correctly without
   extra markup). Fields that don't make sense halved (headings, the
   delivery-type radio choice, the notes textarea, the payment note, the
   submit button) are pinned to the full row via :has()/direct-child
   selectors instead of a class added to every one of them in the blade file.
   ========================================================================== */
.checkout__form {
    display: grid;
    /* minmax(0, 1fr), not a bare 1fr — a plain 1fr track won't shrink below
       its content's intrinsic width, so a wide input/select would blow the
       column (and the whole page) out past the viewport on narrow screens. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 16px;
    /* Same boxed-card treatment .checkout__summary already had — the form
       used to just blend into the page background. */
    border: 1px solid var(--color-line);
    background: #fff;
    padding: 24px;
}
/* Grid items default to min-width:auto, which — independently of the
   minmax(0, …) tracks above — lets an item's own intrinsic content (the
   wilaya <select>'s widest option, in particular) refuse to shrink and
   overflow its cell anyway. min-width:0 removes that floor; width:100%
   on the actual input/select still fills whatever space is left. */
.checkout__form > * { min-width: 0; }
.checkout__form .form-row:has(textarea),
.checkout__form .form-row:has(.delivery-type-choice),
.checkout__form .form-row:has(#delivery_stop_desk_id) {
    grid-column: 1 / -1;
}

/* ==========================================================================
   Checkout summary card additions — collapsible promo trigger + the submit
   button now living at the bottom of this card (see checkout/create.blade.php
   for why: form="checkout-form" submits the form above from outside it).
   ========================================================================== */
.checkout__promo-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 40px;
    padding: 0;
    margin: 4px 0 10px;
    background: none;
    border: none;
    border-top: 1px solid var(--color-line);
    padding-top: 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-ink-soft);
    cursor: pointer;
    text-align: start;
    transition: color .12s ease;
}
.checkout__promo-trigger:hover { color: var(--color-ink); }
.checkout__promo-trigger svg:first-child { color: var(--color-accent); flex-shrink: 0; }
.checkout__promo-trigger span { flex: 1; }
.checkout__promo-trigger-chevron { flex-shrink: 0; transition: transform .18s var(--ease); }
.checkout__promo-trigger-chevron.is-open { transform: rotate(180deg); }

.promo-form--enter { transition: opacity .18s var(--ease), transform .18s var(--ease); }
.promo-form--enter-start { opacity: 0; transform: translateY(-4px); }
.promo-form--enter-end { opacity: 1; transform: translateY(0); }

.checkout__submit {
    flex-direction: row;
    gap: 8px;
    margin-top: 18px;
}
/* Most stores only ever have one active delivery provider, so the provider
   select doesn't render at all (see checkout/create.blade.php) — when it's
   absent, give the wilaya select the full row instead of leaving it paired
   with an empty cell. */
.checkout__form:not(:has(#delivery_provider_id)) .form-row:has(#shipping_wilaya_code) {
    grid-column: 1 / -1;
}
.checkout__form .form-row { margin-bottom: 12px; }

.form-row { margin-bottom: 16px; }
.form-row label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 6px;
}

.thankyou { max-width: 640px; }
.thankyou__summary { margin: 24px 0; }

.search-form { display: flex; gap: 10px; max-width: 480px; margin-top: 16px; }
.search-form .btn { width: auto; padding: 0 20px; }

.cart-line__qty input {
    width: 56px;
    min-height: 44px;
    border: 1px solid var(--color-line);
    padding: 8px;
    font-size: 16px;
    text-align: center;
    transition: border-color .12s ease;
}
.form-row input, .form-row select, .form-row textarea {
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--color-line);
    border-radius: var(--control-radius);
    padding: 11px 14px;
    font-size: 16px;
    background: #fff;
    font-family: inherit;
    transition: border-color .14s var(--ease), box-shadow .14s var(--ease);
}
.form-row input:hover, .form-row select:hover, .form-row textarea:hover { border-color: var(--color-ink-soft); }
.form-row textarea { min-height: 88px; }
.delivery-type-choice { display: flex; flex-direction: column; gap: 8px; }
.delivery-type-choice__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid var(--color-line);
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
}
.delivery-type-choice__option input { width: auto; min-height: auto; margin-right: 8px; }
.delivery-type-choice__option:has(input:checked) { border-color: var(--color-ink); background: var(--color-bg-alt); }
.cart-line__qty input:focus,
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 16%, transparent);
    outline: none;
}
.form-row input.has-error,
.form-row select.has-error,
.form-row textarea.has-error {
    border-color: var(--color-danger);
}
.form-row input.has-error:focus,
.form-row select.has-error:focus,
.form-row textarea.has-error:focus {
    box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.12);
}
.form-row select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23111111' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 11px 8px;
    padding-right: 34px;
}
.search-form input {
    flex: 1;
    min-height: 44px;
    border: 1px solid var(--color-line);
    padding: 10px 14px;
    font-size: 16px;
}

/* ==========================================================================
   Buy-now modal
   ========================================================================== */
.buy-now-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.buy-now-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 17, 17, 0.6);
}
.buy-now-modal__backdrop--enter,
.buy-now-modal__backdrop--leave { transition: opacity .2s var(--ease); }
.buy-now-modal__backdrop--enter-start { opacity: 0; }
.buy-now-modal__backdrop--enter-end { opacity: 1; }
.buy-now-modal__panel {
    position: relative;
    background: #fff;
    width: 100%;
    max-width: 440px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 28px 24px;
}
.buy-now-modal__panel--enter,
.buy-now-modal__panel--leave { transition: opacity .2s var(--ease), transform .2s var(--ease); }
.buy-now-modal__panel--enter-start { opacity: 0; transform: translateY(12px) scale(0.98); }
.buy-now-modal__panel--enter-end { opacity: 1; transform: translateY(0) scale(1); }
.buy-now-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    background: none;
    cursor: pointer;
    color: var(--color-ink);
    transition: background-color .12s ease;
}
.buy-now-modal__close:hover { background: #f2ede9; }
.buy-now-modal__product {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--color-line);
}
.buy-now-modal__product-image {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border: 1px solid var(--color-line);
    padding: 4px;
    flex-shrink: 0;
}
.buy-now-modal__product-name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    margin: 0 0 2px;
}
.buy-now-modal__product-price { font-size: 13px; color: var(--color-ink-soft); margin: 0; }
.buy-now-modal h2 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0 0 16px;
}
.buy-now-modal .form-row { margin-bottom: 14px; }
.buy-now-modal .form-row label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 6px;
}
.buy-now-modal__payment-note { font-size: 12px; color: var(--color-ink-soft); margin: 0 0 16px; }
.buy-now-modal .btn { width: 100%; }

/* ==========================================================================
   Cart drawer (slides in from the right — desktop and mobile alike)
   ========================================================================== */
.cart-drawer { position: fixed; inset: 0; z-index: 210; }
.cart-drawer__backdrop { position: absolute; inset: 0; background: rgba(17, 17, 17, 0.5); }
.cart-drawer__backdrop--enter,
.cart-drawer__backdrop--leave { transition: opacity .2s var(--ease); }
.cart-drawer__backdrop--enter-start { opacity: 0; }
.cart-drawer__backdrop--enter-end { opacity: 1; }
.cart-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 420px;
    background: #fff;
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 24px rgba(17, 17, 17, 0.12);
}
.cart-drawer__panel--enter,
.cart-drawer__panel--leave { transition: transform .25s var(--ease); }
.cart-drawer__panel--enter-start { transform: translateX(100%); }
.cart-drawer__panel--enter-end { transform: translateX(0); }
.cart-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid var(--color-line);
    flex-shrink: 0;
}
.cart-drawer__header h2 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0;
}
.cart-drawer__close {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    background: none;
    cursor: pointer;
    color: var(--color-ink);
    transition: background-color .12s ease;
}
.cart-drawer__close:hover { background: #f2ede9; }
#cart-drawer-content { flex: 1; overflow-y: auto; padding: 20px; }
.cart-drawer__empty { font-size: 14px; color: var(--color-ink-soft); }
.cart-drawer__lines { display: flex; flex-direction: column; gap: 16px; }
.cart-drawer__line {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-line);
}
.cart-drawer__line-media {
    width: 64px;
    height: 64px;
    border: 1px solid var(--color-line);
    padding: 4px;
    display: block;
}
.cart-drawer__line-media img { width: 100%; height: 100%; object-fit: contain; }
.cart-drawer__line-name { font-size: 13px; font-weight: 600; color: var(--color-ink); display: block; margin-bottom: 2px; }
.cart-drawer__line-variant { font-size: 12px; color: var(--color-ink-soft); margin: 0 0 4px; }
.cart-drawer__line-price { font-size: 12px; color: var(--color-ink-soft); margin: 0 0 8px; }
.cart-drawer__line-controls { display: flex; align-items: center; gap: 12px; }
.cart-drawer__qty {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--color-line);
    padding: 2px 8px;
}
.cart-drawer__qty-btn {
    width: 22px;
    height: 22px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    color: var(--color-ink);
}
.cart-drawer__qty-value { font-size: 13px; min-width: 14px; text-align: center; }
.cart-drawer__remove { border: none; background: none; cursor: pointer; font-size: 12px; text-decoration: underline; color: var(--color-ink-soft); padding: 0; }
.cart-drawer__remove:hover { color: var(--color-ink); }
.cart-drawer__line-total { font-size: 13px; font-weight: 600; white-space: nowrap; }
.cart-drawer__footer { border-top: 1px solid var(--color-line); padding: 16px 20px 20px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; }
.cart-drawer__summary-row { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; }
.cart-drawer__summary-note { font-size: 12px; color: var(--color-ink-soft); margin: 0; }

.cart-fab {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 120;
    width: 52px;
    height: 52px;
    border-radius: 999px;
    background: var(--color-cta);
    color: var(--color-cta-ink);
    border: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(17, 17, 17, 0.25);
}
/* Admin → Store Settings → Checkout. Opposite corner from the cart FAB
   (pill + label instead of a bare circle, so the two are never confused for
   the same action at a glance). */
.checkout-fab {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 119;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 16px 0 14px;
    border-radius: 999px;
    background: var(--color-cta);
    color: var(--color-cta-ink);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(17, 17, 17, 0.25);
}
.cart-fab__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--color-ink);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes badge-bump {
    0% { transform: scale(1); }
    35% { transform: scale(1.35); }
    65% { transform: scale(0.92); }
    100% { transform: scale(1); }
}
.icon-btn__badge.is-bumping,
.cart-fab__badge.is-bumping { animation: badge-bump .4s var(--ease); }
@media (prefers-reduced-motion: reduce) {
    .icon-btn__badge.is-bumping,
    .cart-fab__badge.is-bumping { animation: none; }
}

/* ==========================================================================
   Cart toast — feedback for "add to cart" that doesn't yank the drawer open
   ========================================================================== */
.cart-toast {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 84px;
    z-index: 130;
    display: flex;
    justify-content: center;
    pointer-events: none;
}
@media (min-width: 900px) {
    .cart-toast { left: auto; right: 24px; bottom: 24px; justify-content: flex-end; }
}
.cart-toast__panel {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 400px;
    background: var(--color-ink);
    color: #fff;
    padding: 12px 12px 12px 16px;
    box-shadow: var(--shadow-soft);
}
@media (min-width: 900px) {
    .cart-toast__panel { width: auto; }
}
.cart-toast__icon { flex-shrink: 0; color: #8fbf6f; }
.cart-toast__message {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cart-toast__action {
    flex-shrink: 0;
    background: none;
    border: none;
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    min-height: 44px;
    padding: 0 4px;
    white-space: nowrap;
}
.cart-toast__close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .12s ease;
}
.cart-toast__close:hover { color: #fff; }

.cart-toast--enter,
.cart-toast--leave { transition: opacity .2s var(--ease), transform .2s var(--ease); }
.cart-toast--enter-start { opacity: 0; transform: translateY(12px); }
.cart-toast--enter-end { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .cart-toast--enter, .cart-toast--leave { transition: opacity .15s ease; }
    .cart-toast--enter-start { transform: none; }
}

/* ==========================================================================
   Utilities (kept last so they always win over component rules of equal specificity)
   ========================================================================== */
.mobile-only { display: flex; }
.desktop-only { display: none; }
@media (min-width: 900px) {
    .mobile-only { display: none; }
    .desktop-only { display: flex; }
}

/* ==========================================================================
   RTL (Arabic, etc.) — <html dir="rtl"> is set from the active locale in
   layout.blade.php. `direction` is an inherited CSS property that the `dir`
   attribute sets automatically, so flex/grid layouts already mirror on
   their own; everything below is the handful of *physical* left/right
   values (absolute/fixed positioning, drawer slide direction) that don't.
   ========================================================================== */
[dir="rtl"] .skip-link { left: auto; right: -999px; }
[dir="rtl"] .skip-link:focus { left: auto; right: 8px; }

[dir="rtl"] .site-nav__dropdown { left: auto; right: -16px; }
[dir="rtl"] .lang-switch__dropdown { right: auto; left: 0; }
[dir="rtl"] .filter-bar__panel { left: auto; right: 0; }

[dir="rtl"] .icon-btn__badge { right: auto; left: 2px; }
[dir="rtl"] .product-card__badge { right: auto; left: 10px; }

[dir="rtl"] .cart-drawer__panel {
    right: auto;
    left: 0;
    box-shadow: 8px 0 24px rgba(17, 17, 17, 0.12);
}
[dir="rtl"] .cart-drawer__panel--enter-start { transform: translateX(-100%); }

[dir="rtl"] .cart-fab { right: auto; left: 16px; }
[dir="rtl"] .cart-fab__badge { right: auto; left: -4px; }
[dir="rtl"] .checkout-fab { left: auto; right: 16px; }

@media (min-width: 900px) {
    [dir="rtl"] .cart-toast { left: 24px; right: auto; justify-content: flex-start; }
}

/* ==========================================================================
   Select menu — the enhanced dropdown that replaces the native <select>
   chrome (see resources/js/select-menu.js). The native control stays in the
   DOM as the source of truth; everything below styles the listbox built
   around it. Deliberately reuses the popover language already established
   by .site-nav__dropdown (cream panel, hairline border, deep soft shadow,
   2px accent rule on the hovered row) so it reads as part of the theme
   rather than a bolted-on widget.
   ========================================================================== */
.select-menu {
    position: relative;
    width: 100%;
}

/* Kept rendered rather than display:none so browsers can still anchor the
   native validation bubble to a `required` select that has no value. */
.select-menu__native {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    appearance: none;
    border: 0;
    padding: 0;
    margin: 0;
}

.select-menu__trigger {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: var(--control-radius);
    font: inherit;
    font-size: 16px;
    color: var(--color-ink);
    text-align: start;
    cursor: pointer;
    transition: border-color .14s var(--ease), box-shadow .14s var(--ease), background-color .14s var(--ease);
}
.select-menu__trigger:hover { border-color: var(--color-ink-soft); }
.select-menu.is-open .select-menu__trigger {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 16%, transparent);
}
.select-menu__trigger:focus-visible {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 25%, transparent);
}

.select-menu__value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.select-menu__value.is-placeholder { color: var(--color-ink-soft); }

.select-menu__chevron {
    flex-shrink: 0;
    display: inline-flex;
    width: 10px;
    color: var(--color-ink-soft);
    transition: transform .18s var(--ease);
}
.select-menu__chevron svg { width: 10px; height: 7px; }
.select-menu.is-open .select-menu__chevron { transform: rotate(180deg); }

.select-menu.is-disabled { opacity: .55; }
.select-menu.is-disabled .select-menu__trigger { cursor: not-allowed; background: var(--color-bg-alt); }

.select-menu.has-error .select-menu__trigger { border-color: var(--color-danger); }
.select-menu.has-error .select-menu__trigger:focus-visible { box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.12); }

.select-menu__panel {
    position: absolute;
    z-index: 40;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    min-width: 100%;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: var(--control-radius);
    box-shadow: var(--shadow-pop);
    overflow: hidden;
    animation: select-menu-in .16s var(--ease);
}
.select-menu.is-above .select-menu__panel {
    top: auto;
    bottom: calc(100% + 6px);
    animation-name: select-menu-in-up;
}
@keyframes select-menu-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes select-menu-in-up {
    from { opacity: 0; transform: translateY(6px) scale(0.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.select-menu__search { padding: 8px 8px 4px; }
.select-menu__search-input {
    width: 100%;
    min-height: 40px;
    padding: 9px 12px;
    border: 1px solid var(--color-line);
    border-radius: calc(var(--control-radius) - 3px);
    background: var(--color-bg-alt);
    font: inherit;
    font-size: 15px;
    color: var(--color-ink);
    transition: border-color .14s var(--ease), background-color .14s var(--ease);
}
.select-menu__search-input:focus {
    outline: none;
    background: #fff;
    border-color: var(--color-accent);
}

.select-menu__list {
    max-height: 280px;
    overflow-y: auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    overscroll-behavior: contain;
}

/* A rounded, inset highlight row rather than a full-bleed bar with an accent
   rule — reads as a modern menu instead of a table of links. */
.select-menu__option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: calc(var(--control-radius) - 3px);
    font-size: 15px;
    line-height: 1.3;
    color: var(--color-ink);
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}
.select-menu__option + .select-menu__option { margin-top: 2px; }
.select-menu__option:hover,
.select-menu__option.is-active { background: var(--color-bg-alt); }
.select-menu__option.is-selected {
    font-weight: 600;
    color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 9%, transparent);
}
.select-menu__option.is-placeholder { color: var(--color-ink-soft); }
.select-menu__option.is-disabled {
    opacity: .45;
    cursor: not-allowed;
    background: none;
}

.select-menu__option-label { flex: 1; min-width: 0; }
.select-menu__option-check {
    flex-shrink: 0;
    display: inline-flex;
    width: 12px;
    opacity: 0;
}
.select-menu__option-check svg { width: 12px; height: 12px; }
.select-menu__option.is-selected .select-menu__option-check { opacity: 1; }

.select-menu__empty {
    margin: 0;
    padding: 16px 14px;
    font-size: 14px;
    color: var(--color-ink-soft);
    text-align: center;
}

/* Context sizing — the wrapper inherits each original select's class with a
   `-menu` suffix, so the few places that were not simply full-width keep
   their intended footprint. */
.filter-bar__sort-menu { width: auto; min-width: 240px; }
.filter-bar__sort-menu .select-menu__trigger {
    font-size: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
}
.product-actions__variant-menu .select-menu__trigger,
.product-card__actions .select-menu__trigger {
    min-height: 44px;
    padding: 8px 12px;
    font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
    .select-menu__panel { animation: none; }
    .select-menu__chevron,
    .select-menu__trigger,
    .select-menu__option { transition: none; }
}

/* --------------------------------------------------------------------------
   Promo code form (cart summary, checkout summary, buy-now modal)
   -------------------------------------------------------------------------- */
.promo-form { margin: 14px 0; }
.promo-form__title {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}
.promo-form__row { display: flex; gap: 8px; }
.promo-form__input {
    /* 2:1 ratio against .promo-form__apply below — both use the `flex`
       grow shorthand (flex-basis: 0%) so they split the row proportionally
       regardless of the button label's length in any locale. */
    flex: 2;
    min-width: 0;
    min-height: 44px;
    border: 1px solid var(--color-line);
    border-radius: var(--control-radius, 0);
    background: #fff;
    color: var(--color-ink);
    padding: 0 12px;
    font: inherit;
    text-transform: uppercase;
    transition: border-color .12s ease;
}
.promo-form__input::placeholder { text-transform: none; }
.promo-form__input:focus { border-color: var(--color-ink); outline: none; }
.promo-form__input.has-error { border-color: var(--color-danger); }
.promo-form__apply { flex: 1; min-width: 0; white-space: nowrap; min-height: 44px; }
.promo-form__error { font-size: 12.5px; color: var(--color-danger); margin-top: 6px; }
.promo-form__dropped {
    padding: 9px 12px;
    border: 1px solid color-mix(in srgb, var(--color-danger) 35%, transparent);
    background: color-mix(in srgb, var(--color-danger) 8%, transparent);
    margin-bottom: 10px;
}
.promo-form--applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px dashed var(--color-accent);
    border-radius: var(--control-radius, 0);
    background: color-mix(in srgb, var(--color-accent) 7%, transparent);
}
.promo-form__label { font-weight: 600; font-size: 13.5px; color: var(--color-accent); overflow-wrap: anywhere; }
.promo-form__remove {
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    font-size: 12.5px;
    color: var(--color-ink-soft);
    text-decoration: underline;
    padding: 0;
    white-space: nowrap;
}
.promo-form__remove:hover { color: var(--color-danger); }
.cart__summary-row--discount span:last-child,
.cart-drawer__summary-row--discount span:last-child,
.checkout__summary-row--discount span:last-child { color: var(--color-accent); font-weight: 700; }
.checkout__summary-free-shipping s { color: var(--color-ink-soft); margin-inline-end: 6px; }
.buy-now-modal__promo-summary { margin-top: 10px; border-top: 1px solid var(--color-line); padding-top: 8px; }

/* ==========================================================================
   TECHPOS IDENTITY — a faithful port of the original theme-techpos project's
   own layout mechanics (fixed-panel hero slideshow, split services section,
   shape+image overlap, stats+testimonials block, SVG-backed footer), not
   just its color palette. Everything above this line is the "default"
   theme's structural CSS (still used as-is for the parts this theme
   deliberately keeps: product cards, category/brand grids, cart, checkout,
   promo form, filter bar — none of which existed in the original project).
   Header/hero/services/spotlight/stats/testimonials/footer below are fully
   bespoke (tp-* classes), replacing rather than reskinning the default
   theme's .site-header/.hero/.trust-bar/.site-footer, since this theme's
   actual page structure is genuinely different from every other theme here.
   ========================================================================== */
:root {
    --color-bg: #ffffff;
    --color-bg-alt: #f7f7f7;
    --color-ink: #1a1a1a;
    --color-ink-soft: #8f8f8f; /* the original project's own body-copy gray, exactly */
    --color-line: #ececec;
    --color-accent: #c41622; /* the original project's own brand red, exactly */
    --color-accent-ink: #ffffff;
    --color-cta: #c41622;
    --color-cta-ink: #ffffff;
    --color-danger: #d92626;
    --color-gold: #c99a3e;

    --tp-ink-soft: #3b3a3a; /* headings-on-white color the original uses for testimonial names/titles */
    --tp-hero-gradient: linear-gradient(135deg, #e2202d, #84000a);
    --tp-action-gradient: linear-gradient(to left, #e2202d, #84000a);

    --font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --font-heading: "Poppins", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

    --radius: 16px;
    --control-radius: 999px;
    --shadow-soft: 0 1px 2px rgba(196, 22, 34, 0.04), 0 12px 32px rgba(196, 22, 34, 0.08);
    --shadow-pop: 0 4px 6px -2px rgba(196, 22, 34, 0.08), 0 12px 28px -4px rgba(196, 22, 34, 0.18);
}

/* Clears the fixed .tp-header on every page except the homepage — there,
   .tp-hero itself starts at true viewport top so its background sits behind
   the transparent-over-hero header (see .tp-hero__slides's own top: 76px,
   which only offsets the CONTENT, not the section's background). */
body:not(.tp-has-hero) { padding-top: 76px; }

/* --------------------------------------------------------------------------
   Rounded corners — default's cards are deliberately square; this theme
   wants the original's "moderate-to-large rounded corners" language.
   -------------------------------------------------------------------------- */
.category-card__image,
.product-card__media,
.brand-card__image,
.product-gallery__main,
.product-gallery__thumb {
    border-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   Product cards — a soft red-tinted hover lift. Suspended while a variant
   dropdown inside is open (see resources/js/select-menu.js's .is-open
   class) so an open dropdown never gets trapped in the hover transform's
   stacking context and painted under the next row's card.
   -------------------------------------------------------------------------- */
.product-card__media { transition: box-shadow .2s var(--ease); }
.product-card:hover:not(:has(.select-menu.is-open)) .product-card__media { box-shadow: var(--shadow-pop); }
@media (prefers-reduced-motion: reduce) {
    .product-card__media { transition: none; }
}

/* --------------------------------------------------------------------------
   The original's CTA-link pattern, reused for every "En savoir plus"-style
   link across sections: an arrow slides into place on hover.
   -------------------------------------------------------------------------- */
.tp-heading {
    font-family: var(--font-heading);
    font-weight: 800;
    line-height: 1.15;
    font-size: clamp(24px, 2.4vw, 34px);
    margin: 0 0 20px;
}
.tp-heading::before {
    content: "";
    display: block;
    width: 90px;
    height: 6px;
    background: var(--color-accent);
    border-radius: 10px;
    margin-bottom: 18px;
}
.tp-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-accent);
    text-decoration: none;
    padding: 12px 18px;
    border-radius: var(--control-radius);
    transition: background-color .2s var(--ease), color .2s var(--ease);
}
.tp-action--inline { padding: 0; }
.tp-action__arrow {
    display: inline-block;
    font-style: normal;
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.tp-action:hover { background: var(--color-accent); color: #fff; }
.tp-action--inline:hover { background: none; color: var(--color-accent); }
.tp-action:hover .tp-action__arrow { opacity: 1; transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
    .tp-action, .tp-action__arrow { transition: none; }
}

/* ==========================================================================
   Header — fixed overlay, transparent atop the homepage hero (matching the
   original's header.scss), solid everywhere else since every other page
   here (collections/product/cart/checkout) has no hero for it to float
   over and needs genuinely visible nav, unlike the original's single page.
   ========================================================================== */
.tp-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 500;
    min-height: 76px;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 14px 32px;
    background: #fff;
    color: var(--color-ink);
    box-shadow: 0 2px 16px rgba(17, 17, 17, 0.06);
    transition: background-color .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease);
}
body:not(.tp-has-hero) .tp-header,
.tp-header--scrolled {
    background: #fff;
    color: var(--color-ink);
}
body.tp-has-hero .tp-header:not(.tp-header--scrolled) {
    background: transparent;
    color: #fff;
    box-shadow: none;
}
.tp-header__logo {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 19px;
    letter-spacing: .01em;
    order: 2;
    margin: 0 auto;
}
.tp-header__logo img { display: block; }
/* display intentionally NOT set here — .mobile-only/.desktop-only (from the
   default-derived base layer above) already own show/hide per breakpoint;
   overriding it here unconditionally would fight and win against them
   regardless of viewport, showing the hamburger on desktop and the desktop
   nav on mobile at the same time. Only the mobile-specific grid layout for
   the 3 bars is added, scoped to the same breakpoint .mobile-only uses. */
.tp-header__toggle {
    gap: 5px;
    width: 32px;
    padding: 8px 0;
    background: none;
    border: none;
    cursor: pointer;
    order: 1;
}
@media (max-width: 899px) {
    .tp-header__toggle { display: grid; }
}
.tp-header__toggle span { display: block; height: 2px; background: currentColor; border-radius: 2px; }
.tp-header__center { align-items: center; gap: 28px; order: 1; }
.tp-header__item { position: relative; }
.tp-header__item > a {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: inherit;
    text-decoration: none;
}
.tp-header__chevron { transition: transform .18s var(--ease); }
.tp-header__chevron.is-open { transform: rotate(180deg); }
.tp-header__dropdown {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    color: var(--color-ink);
    border-radius: var(--radius);
    box-shadow: var(--shadow-pop);
    padding: 10px;
    min-width: 200px;
    display: flex;
    flex-direction: column;
}
.tp-header__dropdown a { padding: 9px 12px; border-radius: 10px; font-size: 13px; color: inherit; text-decoration: none; }
.tp-header__dropdown a:hover { background: var(--color-bg-alt); }
.tp-header__actions { align-items: center; gap: 14px; order: 3; }
.tp-header__icon-btn {
    position: relative;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
}
.tp-header--scrolled .tp-header__icon-btn:hover,
body:not(.tp-has-hero) .tp-header__icon-btn:hover { background: var(--color-bg-alt); }
.tp-header__badge {
    position: absolute;
    top: 0; right: 0;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--color-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: grid;
    place-items: center;
}
.tp-header__lang { position: relative; }
.tp-header__lang-toggle { background: none; border: none; color: inherit; font-weight: 700; font-size: 12px; cursor: pointer; padding: 8px; }
.tp-header__lang-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #fff;
    color: var(--color-ink);
    border-radius: 12px;
    box-shadow: var(--shadow-pop);
    padding: 6px;
    min-width: 120px;
}
.tp-header__lang-dropdown a { display: block; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: inherit; text-decoration: none; }
.tp-header__lang-dropdown a:hover, .tp-header__lang-dropdown a.is-active { background: var(--color-bg-alt); }
@media (max-width: 900px) {
    .tp-header { padding: 12px 16px; }
}

/* Mobile nav — full-screen red-gradient overlay, each item fanning in on
   open (pure CSS nth-child stagger — a CSS animation on a descendant
   naturally restarts whenever an ancestor goes from display:none back to
   visible, so no JS is needed to retrigger it). */
.tp-nav-mobile {
    position: fixed;
    inset: 0;
    z-index: 600;
    background: var(--tp-hero-gradient);
    color: #fff;
    padding: 96px 32px 32px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.tp-nav-mobile__item, .tp-nav-mobile__item--link {
    color: #fff;
    text-decoration: none;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.tp-nav-mobile__item summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; }
.tp-nav-mobile__item summary::-webkit-details-marker { display: none; }
.tp-nav-mobile__children { display: flex; flex-direction: column; padding-top: 10px; gap: 4px; }
.tp-nav-mobile__children a { color: rgba(255, 255, 255, 0.85); text-decoration: none; padding: 8px 0; font-size: 13.5px; }
.tp-nav-mobile__langs { display: flex; gap: 16px; margin-top: 20px; }
.tp-nav-mobile__langs a { color: rgba(255, 255, 255, 0.85); text-decoration: none; font-weight: 700; }
.tp-nav-mobile__langs a.is-active { color: #fff; text-decoration: underline; }
@media (prefers-reduced-motion: no-preference) {
    .tp-nav-mobile__item { animation: tp-nav-item-in .35s var(--ease) backwards; }
    .tp-nav-mobile__item:nth-child(1) { animation-delay: .03s; }
    .tp-nav-mobile__item:nth-child(2) { animation-delay: .08s; }
    .tp-nav-mobile__item:nth-child(3) { animation-delay: .13s; }
    .tp-nav-mobile__item:nth-child(4) { animation-delay: .18s; }
    .tp-nav-mobile__item:nth-child(5) { animation-delay: .23s; }
    .tp-nav-mobile__item:nth-child(6) { animation-delay: .28s; }
}
@keyframes tp-nav-item-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Hero — a plain, fixed-height auto-advancing slider (Admin → Themes →
   Theme options → Hero slider slides). Each .tp-hero__slide is absolutely
   stacked and crossfades via a CSS opacity transition; theme.js only
   toggles which one has .is-active on a timer — nothing scroll-linked, so
   there's no pin/fixed-position lifecycle that can fail to release.
   ========================================================================== */
.tp-hero {
    position: relative;
    height: min(640px, 85vh);
    background: var(--color-ink);
    background-image: var(--tp-hero-gradient);
    background-repeat: no-repeat;
    background-size: 70vw 100%;
    background-position: top right;
    overflow: hidden;
}
.tp-hero__slides { position: relative; height: 100%; }
.tp-hero__slide {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 32px;
    max-width: var(--container-w);
    margin: 0 auto;
    padding: 76px 56px 0;
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s ease;
}
.tp-hero__slide.is-active { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
    .tp-hero__slide { transition: none; }
}
.tp-hero__copy { display: flex; flex-direction: column; align-items: flex-start; }
.tp-hero__subtitle {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
    max-width: 42ch;
    margin: 0 0 10px;
}
.tp-hero__title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(30px, 3.6vw, 48px);
    line-height: 1.1;
    margin: 6px 0 12px;
}
.tp-hero__cta {
    margin-top: 18px;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 12px 26px;
    border-radius: var(--control-radius);
    background: #fff;
    color: var(--color-ink);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-decoration: none;
}
.tp-hero__cta:hover { background: var(--color-ink); color: #fff; }
.tp-hero__image { display: flex; justify-content: center; }
.tp-hero__image img {
    width: 100%;
    max-width: 400px;
    aspect-ratio: 1;
    object-fit: contain;
    filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.35));
}
.tp-hero__dots {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 6;
    display: flex;
    gap: 10px;
}
.tp-hero__dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    border: none;
    padding: 0;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease;
}
.tp-hero__dot.is-active { background: #fff; transform: scale(1.2); }
.tp-hero__clients {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
    padding: 20px 24px;
    background: color-mix(in srgb, var(--color-ink) 85%, black);
}
.tp-hero__clients img { height: 26px; width: auto; opacity: .85; }
@media (max-width: 900px) {
    .tp-hero { height: auto; min-height: 560px; background-size: cover; }
    .tp-hero__slide {
        position: static;
        grid-template-columns: 1fr;
        text-align: center;
        padding: 96px 24px 56px;
        display: none;
    }
    .tp-hero__slide.is-active { display: grid; }
    .tp-hero__copy { align-items: center; }
    .tp-hero__subtitle { margin-inline: auto; }
    .tp-hero__image img { max-width: 240px; margin: 0 auto; }
    .tp-hero__dots { bottom: 12px; }
    .tp-hero__clients { gap: 24px; }
}

/* ==========================================================================
   Services — text column + 2×2 icon grid, the original's #services split.
   The icons are the original project's own flat white SVGs, styled with a
   solid-color background applied directly to the <img> (exactly how the
   original does it — the SVGs have no background of their own).
   ========================================================================== */
.tp-services {
    max-width: var(--container-w);
    margin: 0 auto;
    padding: 72px 32px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
.tp-services__text { color: var(--color-ink-soft); line-height: 1.7; margin: 0 0 20px; }
.tp-services__right { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 24px; }
.tp-services__item { color: var(--color-ink-soft); }
.tp-services__item img {
    width: 56px;
    height: 56px;
    padding: 14px;
    box-sizing: border-box;
    background: var(--color-accent);
    border-radius: 999px;
    box-shadow: 0 3px 15px rgba(196, 22, 34, 0.27);
    margin-bottom: 14px;
}
.tp-services__item h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    color: var(--color-ink);
    margin: 0;
}
@media (max-width: 900px) {
    .tp-services { grid-template-columns: 1fr; padding: 48px 24px; text-align: center; }
    .tp-services__left { display: flex; flex-direction: column; align-items: center; }
    .tp-heading::before { margin-inline: auto; }
    .tp-services__right { grid-template-columns: 1fr 1fr; }
    .tp-services__item { display: flex; flex-direction: column; align-items: center; }
}

/* ==========================================================================
   Stats
   ========================================================================== */
.tp-stats { background: var(--color-ink); padding: 48px 24px; }
.tp-stats__grid {
    max-width: var(--container-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    text-align: center;
}
.tp-stats__value { display: block; font-family: var(--font-heading); font-weight: 800; font-size: clamp(26px, 3vw, 38px); color: #fff; }
.tp-stats__label { display: block; margin-top: 4px; font-size: 12.5px; letter-spacing: .03em; text-transform: uppercase; color: rgba(255, 255, 255, 0.65); }
@media (max-width: 900px) {
    .tp-stats__grid { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
}

/* ==========================================================================
   Spotlight — the original's shape.svg + screenshot overlap section
   (#erp/.second-stage), repurposed to show a real product.
   ========================================================================== */
.tp-spotlight {
    max-width: var(--container-w);
    margin: 0 auto;
    padding: 80px 32px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}
.tp-spotlight__art { position: relative; aspect-ratio: 1; }
.tp-spotlight__shape { position: absolute; inset: -15%; width: 130%; height: 130%; opacity: .9; z-index: 0; }
.tp-spotlight__product {
    position: relative;
    z-index: 1;
    width: 78%;
    height: 78%;
    margin: 11%;
    object-fit: contain;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.18));
}
.tp-spotlight__text { color: var(--color-ink-soft); line-height: 1.7; margin: 0 0 24px; }
.tp-spotlight__product-info { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.tp-spotlight__name { font-family: var(--font-heading); font-weight: 700; }
.tp-spotlight__price { color: var(--color-accent); font-weight: 700; }
.tp-spotlight .product-actions { max-width: 360px; }
@media (max-width: 900px) {
    .tp-spotlight { grid-template-columns: 1fr; padding: 48px 24px; text-align: center; }
    .tp-spotlight__content { display: flex; flex-direction: column; align-items: center; }
    .tp-heading::before { margin-inline: auto; }
    .tp-spotlight__product-info { justify-content: center; }
}

/* ==========================================================================
   Stats-heading + testimonials — the original's third-stage: a centered
   heading, then a testimonial rail (horizontal scroll-snap — no jQuery/Owl
   Carousel dependency needed for the same swipeable-cards feel) paired
   with an "about us" text column.
   ========================================================================== */
.tp-testimonials-block { padding: 72px 24px; }
.tp-testimonials-block__heading {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 40px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(24px, 3.4vw, 38px);
    color: var(--tp-ink-soft);
}
.tp-testimonials {
    max-width: var(--container-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 56px;
    align-items: center;
}
.tp-testimonials__rail {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 8px 4px 16px;
    -webkit-overflow-scrolling: touch;
}
.tp-testimonial {
    scroll-snap-align: start;
    flex: 0 0 min(340px, 85vw);
    background: var(--color-bg-alt);
    border-radius: 40px;
    padding: 36px 28px;
    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.08);
}
.tp-testimonial__stars { color: var(--color-accent); display: flex; gap: 2px; margin-bottom: 14px; }
.tp-testimonial__stars svg { width: 15px; height: 15px; }
.tp-testimonial__quote { font-size: 13.5px; line-height: 1.6; color: var(--color-ink); margin: 0 0 16px; }
.tp-testimonial__author { font-family: var(--font-heading); font-weight: 700; color: var(--tp-ink-soft); margin: 0; }
.tp-testimonials__side h3 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(20px, 2.2vw, 26px); color: var(--tp-ink-soft); margin: 0 0 14px; }
.tp-testimonials__side p { color: var(--color-ink-soft); line-height: 1.7; margin: 0 0 20px; }
.tp-testimonials__cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 24px;
    border-radius: var(--control-radius);
    background-image: var(--tp-action-gradient);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
}
@media (max-width: 900px) {
    .tp-testimonials { grid-template-columns: 1fr; gap: 32px; text-align: center; }
    .tp-testimonials__side { display: flex; flex-direction: column; align-items: center; }
}

/* ==========================================================================
   Footer — SVG background, 2-column (contact/newsletter · logo+social),
   copyright bar, matching the original's footer.scss layout.
   ========================================================================== */
.tp-footer {
    position: relative;
    background: var(--color-bg) url("/theme-assets/techpos/images/footer.svg") no-repeat top center;
    background-size: cover;
    color: var(--color-ink);
    /* The wave's black/red seam runs diagonally from ~13% of the footer's
       WIDTH down from the top at the left edge, up to almost the very top
       at the right edge (footer.svg's own geometry) — a flat pixel value
       would clear it at one viewport width and not another, so top padding
       is expressed relative to width (clamped so it stays sane at very
       narrow/very wide sizes) to keep scaling with the background image. */
    padding: clamp(150px, 15vw, 260px) 32px 32px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 56px;
    max-width: none;
}
.tp-footer__eyebrow { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-ink); margin: 0 0 10px; }
.tp-footer__left a { display: block; color: var(--color-ink-soft); text-decoration: none; font-weight: bold; margin-bottom: 6px; }
.tp-footer__address { color: var(--color-ink); font-size: 13px; margin: 6px 0 0; }
.tp-footer__newsletter { margin-top: 28px; max-width: 360px; }
.tp-footer__newsletter label { display: block; font-weight: 700; margin-bottom: 8px; }
.tp-footer__newsletter-row { display: flex; gap: 8px; }
.tp-footer__newsletter-row input {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    border-radius: var(--control-radius);
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    padding: 0 16px;
    font: inherit;
}
.tp-footer__newsletter-row input::placeholder { color: rgba(255, 255, 255, 0.6); }
.tp-footer__newsletter-row button {
    min-height: 44px;
    padding: 0 22px;
    border-radius: var(--control-radius);
    border: none;
    background: #fff;
    color: var(--color-ink);
    font-weight: 700;
    cursor: pointer;
}
.tp-footer__map { margin-top: 24px; border-radius: var(--radius); overflow: hidden; max-width: 420px; }
.tp-footer__map iframe { width: 100%; height: 220px; border: 0; display: block; }
.tp-footer__right { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.tp-footer__logo { font-family: var(--font-heading); font-weight: 800; font-size: 22px; margin: 0; }
.tp-footer__social { display: flex; gap: 10px; }
.tp-footer__social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: #fff; }
.tp-footer__social svg { width: 17px; height: 17px; }
.tp-footer__bottom { grid-column: 1 / -1; text-align: center; color: rgba(255, 255, 255, 0.6); font-size: 12.5px; padding-top: 32px; }
@media (max-width: 900px) {
    .tp-footer { grid-template-columns: 1fr; padding: 130px 24px 24px; text-align: center; }
    .tp-footer__left { display: flex; flex-direction: column; align-items: center; }
    .tp-footer__newsletter-row { max-width: 320px; margin: 0 auto; }
}

/* ==========================================================================
   RTL
   ========================================================================== */
[dir="rtl"] .tp-hero { background-position: top left; }
[dir="rtl"] .tp-nav-mobile { background: linear-gradient(225deg, #e2202d, #84000a); }
[dir="rtl"] .tp-action__arrow { transform: translateX(10px); }
[dir="rtl"] .tp-action:hover .tp-action__arrow { transform: translateX(0); }