/*
|--------------------------------------------------------------------------
| IRONWORKS — ScaanMe "gym-store" design system
|--------------------------------------------------------------------------
| Concept  : industrial strength. Asphalt + signal red + concrete panels.
| Type     : 'Archivo' 800 UPPERCASE display · 'Inter' body · 'Cairo' Arabic.
| Geometry : 8px radius, 2px borders, bolted plate frames, weight-plate discs.
| Texture  : diagonal grip-tape bands (pure CSS, performance-cheap).
| Motion   : hard-snap 0.22s cubic-bezier(.2,.9,.25,1) — one verb everywhere.
| RTL      : logical properties throughout. Reduced-motion layer at the end.
|--------------------------------------------------------------------------
*/

:root {
    --iw-bg: var(--tk-bg, #121314);            /* asphalt */
    --iw-bg-2: color-mix(in srgb, var(--tk-bg, #121314), #000 28%);          /* the pit */
    --iw-panel: color-mix(in srgb, var(--tk-bg, #121314), #fff 6%);         /* concrete panel */
    --iw-panel-2: color-mix(in srgb, var(--tk-bg, #121314), #fff 11%);       /* raised concrete */
    --iw-line: rgb(from var(--tk-text, #F4F4F2) r g b / .10);
    --iw-line-2: rgb(from var(--tk-text, #F4F4F2) r g b / .20);
    --iw-red: var(--tk-primary, #E5383B);           /* signal red */
    --iw-red-deep: color-mix(in srgb, var(--tk-primary, #E5383B), #000 22%);
    --iw-red-soft: rgb(from var(--tk-primary, #E5383B) r g b / .14);
    --iw-txt: var(--tk-text, #F4F4F2);           /* white stencil */
    --iw-muted: color-mix(in srgb, var(--tk-text, #F4F4F2), var(--tk-bg, #121314) 38%);
    --iw-dim: color-mix(in srgb, var(--tk-text, #F4F4F2), var(--tk-bg, #121314) 62%);
    --iw-ok: var(--tk-success, #3FB36C);            /* gym-board green LED */
    --iw-r: 8px;
    --iw-r-sm: 5px;
    --iw-bw: 2px;
    --iw-font-d: var(--tk-font-header, 'Archivo'), 'Cairo', system-ui, sans-serif;
    --iw-font-b: var(--tk-font-content, 'Inter'), 'Cairo', system-ui, sans-serif;
    --iw-ease: cubic-bezier(.2, .9, .25, 1);
    --iw-dur: .22s;
    --iw-grip: repeating-linear-gradient(-45deg, rgb(from var(--tk-text, #F4F4F2) r g b / .028) 0 2px, transparent 2px 9px);
    --iw-shadow: 0 10px 26px -12px rgba(0, 0, 0, .55);
}

/* ============================ BASE ============================ */

body.iw-body {
    margin: 0;
    background-color: var(--iw-bg);
    background-image: var(--iw-grip);
    color: var(--iw-txt);
    font-family: var(--iw-font-b);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

.iw-body a { color: var(--iw-txt); text-decoration: none; }
.iw-body a:hover { color: var(--iw-red); }

.iw-page {
    min-height: 100vh;
    padding-block-end: 88px; /* clearance for the sticky red cart bar */
}

@media (min-width: 992px) {
    .iw-page { padding-block-end: 0; }
}

.iw-sec {
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: 16px;
    padding-block: 26px;
}

.iw-sec-head { margin-block-end: 16px; }

.iw-sec-title {
    font-family: var(--iw-font-d);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: clamp(20px, 4.6vw, 30px);
    line-height: 1.05;
    margin: 4px 0 0;
    color: var(--iw-txt);
}

.iw-sec-sub { color: var(--iw-muted); font-size: 14px; margin: 6px 0 0; }

/* Stencil kicker: red dash + spaced caps */
.iw-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--iw-font-d);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--iw-muted);
}

.iw-kicker::before {
    content: "";
    width: 22px;
    height: 3px;
    background: var(--iw-red);
    flex: 0 0 auto;
}

/* Grip-tape divider band */
.iw-band {
    height: 14px;
    border-block: 1px solid rgb(from var(--tk-primary, #E5383B) r g b / .45);
    background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--tk-bg, #121314), #fff 6%) 0 9px, color-mix(in srgb, var(--tk-bg, #121314), #000 14%) 9px 18px);
}

/* Session notes */
.iw-note {
    max-width: 1180px;
    margin: 14px auto 0;
    margin-inline: max(16px, calc((100% - 1180px) / 2));
    padding: 12px 16px;
    border-radius: var(--iw-r);
    border: var(--iw-bw) solid var(--iw-line-2);
    background: var(--iw-panel);
    font-family: var(--iw-font-d);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 13px;
}

.iw-note.ok { border-color: rgb(from var(--tk-success, #3FB36C) r g b / .55); color: var(--tk-success-soft, #B9E6CC); }
.iw-note.bad { border-color: rgb(from var(--tk-primary, #E5383B) r g b / .55); color: #F3B9BA; }

/* ============================ PRELOADER ============================ */

.iw-body .preloader-wrapper {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--iw-bg);
}

.iw-loader {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 3px solid var(--iw-line-2);
    border-block-start-color: var(--iw-red);
    animation: iw-spin .8s linear infinite;
}

@keyframes iw-spin { to { transform: rotate(360deg); } }

/* ============================ TOPBAR ============================ */

.iw-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgb(from var(--tk-bg, #0C0D0E) r g b / .92);
    backdrop-filter: blur(8px);
    border-block-end: var(--iw-bw) solid var(--iw-line);
}

.iw-topbar-in {
    max-width: 1180px;
    margin-inline: auto;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.iw-logo { display: flex; align-items: center; gap: 10px; min-width: 0; }

.iw-logo img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: var(--iw-r-sm);
    border: var(--iw-bw) solid var(--iw-red);
    background: var(--iw-panel);
    flex: 0 0 auto;
}

.iw-logo-name {
    font-family: var(--iw-font-d);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 42vw;
}

.iw-topbar-actions { display: flex; align-items: center; gap: 10px; }

.iw-cart-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: var(--iw-r);
    background: var(--iw-red);
    border: var(--iw-bw) solid var(--iw-red);
    color: #fff;
    font-family: var(--iw-font-d);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 12px;
    cursor: pointer;
    transition: transform var(--iw-dur) var(--iw-ease), background-color var(--iw-dur) var(--iw-ease);
}

.iw-cart-btn:hover { background: var(--iw-red-deep); color: #fff; transform: translateY(-2px); }
.iw-cart-btn:active { transform: translateY(0) scale(.97); }
.iw-cart-btn i { font-size: 17px; }

.iw-badge {
    position: absolute;
    inset-block-start: -8px;
    inset-inline-end: -8px;
    min-width: 20px;
    height: 20px;
    padding-inline: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--iw-r-sm);
    background: var(--iw-txt);
    color: var(--iw-bg);
    font-family: var(--iw-font-d);
    font-weight: 800;
    font-size: 11px;
    border: 2px solid var(--iw-bg);
}

/* Language switcher (platform include) tuned to the bench */
.iw-body .lang .form-select.small-btn {
    background-color: var(--iw-panel);
    color: var(--iw-txt);
    border: var(--iw-bw) solid var(--iw-line-2);
    border-radius: var(--iw-r) !important;
    font-family: var(--iw-font-d);
    font-weight: 700;
    font-size: 12px;
    padding: 7px 26px 7px 10px;
}

/* ============================ BUTTONS ============================ */

.iw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: var(--iw-r);
    border: var(--iw-bw) solid transparent;
    font-family: var(--iw-font-d);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: transform var(--iw-dur) var(--iw-ease), background-color var(--iw-dur) var(--iw-ease),
        border-color var(--iw-dur) var(--iw-ease), color var(--iw-dur) var(--iw-ease);
}

.iw-btn i { font-size: 17px; }
.iw-btn:hover { transform: translateY(-2px); }
.iw-btn:active { transform: translateY(0) scale(.97); }

.iw-btn-primary { background: var(--iw-red); border-color: var(--iw-red); color: #fff; }
.iw-btn-primary:hover { background: var(--iw-red-deep); border-color: var(--iw-red-deep); color: #fff; }

.iw-btn-ghost { background: transparent; border-color: var(--iw-line-2); color: var(--iw-txt); }
.iw-btn-ghost:hover { border-color: var(--iw-red); color: var(--iw-red); }

.iw-btn-dark { background: var(--iw-panel-2); border-color: var(--iw-panel-2); color: var(--iw-txt); }
.iw-btn-dark:hover { border-color: var(--iw-line-2); color: var(--iw-txt); }

.iw-btn-block { width: 100%; }

/* ============================ HERO ============================ */

.iw-hero {
    max-width: 1180px;
    margin-inline: auto;
    padding: 30px 16px 8px;
    display: grid;
    gap: 22px;
}

.iw-h1 {
    display: flex;
    flex-direction: column;
    margin: 10px 0 0;
    font-family: var(--iw-font-d);
    font-weight: 900;
    text-transform: uppercase;
    line-height: .94;
    letter-spacing: .01em;
    font-size: clamp(40px, 11.5vw, 84px);
}

.iw-h1-solid { color: var(--iw-txt); }

/* Outline stencil line — the screenshot moment */
.iw-h1-ghost {
    color: transparent;
    -webkit-text-stroke: 2px var(--iw-red);
}

@supports not (-webkit-text-stroke: 2px red) {
    .iw-h1-ghost { color: var(--iw-red); }
}

.iw-hero-sub {
    color: var(--iw-muted);
    font-size: 15px;
    max-width: 46ch;
    margin: 14px 0 0;
}

.iw-cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 18px; }

/* Bolted steel plate frame (shared with gallery) */
.iw-bolts { position: relative; }

.iw-bolts::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        radial-gradient(circle 3px at 11px 11px, var(--iw-dim) 97%, transparent),
        radial-gradient(circle 3px at calc(100% - 11px) 11px, var(--iw-dim) 97%, transparent),
        radial-gradient(circle 3px at 11px calc(100% - 11px), var(--iw-dim) 97%, transparent),
        radial-gradient(circle 3px at calc(100% - 11px) calc(100% - 11px), var(--iw-dim) 97%, transparent);
}

.iw-hero-media {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border-radius: var(--iw-r);
    border: var(--iw-bw) solid var(--iw-line-2);
    background: var(--iw-panel) var(--iw-grip);
    box-shadow: var(--iw-shadow);
}

.iw-hero-media::-webkit-scrollbar { display: none; }

.iw-hero-slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    aspect-ratio: 16 / 10;
}

.iw-hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (min-width: 900px) {
    .iw-hero {
        grid-template-columns: 1.05fr .95fr;
        align-items: center;
        padding-block: 44px 16px;
    }
}

/* ============================ TRUST STRIP ============================ */

.iw-trust {
    max-width: 1180px;
    margin-inline: auto;
    padding: 18px 16px 6px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
}

.iw-trust-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: var(--iw-r);
    border: var(--iw-bw) solid var(--iw-line);
    background: var(--iw-panel);
    font-family: var(--iw-font-d);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 10.5px;
    color: var(--iw-muted);
}

.iw-trust-chip i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--iw-r-sm);
    background: var(--iw-red-soft);
    color: var(--iw-red);
    font-size: 14px;
}

/* ============================ GEAR CATEGORY CHIPS ============================ */

.iw-cat-rail {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-block: 8px 12px;
    justify-content: flex-start;
    scrollbar-width: none;
}

.iw-cat-rail::-webkit-scrollbar { display: none; }

@media (min-width: 900px) {
    .iw-cat-rail { flex-wrap: wrap; justify-content: center; }
}

.iw-chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px 7px 7px;
    border-radius: var(--iw-r);
    border: var(--iw-bw) solid var(--iw-line);
    background: var(--iw-panel);
    transition: transform var(--iw-dur) var(--iw-ease), border-color var(--iw-dur) var(--iw-ease),
        background-color var(--iw-dur) var(--iw-ease);
}

.iw-chip:hover { transform: translateY(-2px); border-color: var(--iw-red); color: var(--iw-txt); }

.iw-chip.active {
    border-color: var(--iw-red);
    background: var(--iw-red-soft);
}

/* Red icon plate */
.iw-chip-plate {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: var(--iw-r-sm);
    background: var(--iw-red);
    padding: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 19px;
}

.iw-chip-plate img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 3px;
    display: block;
}

.iw-chip-name {
    font-family: var(--iw-font-d);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: 12px;
    white-space: nowrap;
}

/* ============================ PRODUCT CARDS ============================ */

.iw-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--iw-r);
    border: var(--iw-bw) solid var(--iw-line);
    background: var(--iw-panel);
    overflow: hidden;
    transition: transform var(--iw-dur) var(--iw-ease), border-color var(--iw-dur) var(--iw-ease),
        box-shadow var(--iw-dur) var(--iw-ease);
}

.iw-card:hover {
    transform: translateY(-3px);
    border-color: var(--iw-red);
    box-shadow: var(--iw-shadow);
}

.iw-card-media {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--iw-panel-2) var(--iw-grip);
    overflow: hidden;
}

.iw-img-main,
.iw-img-alt {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .3s var(--iw-ease), transform .3s var(--iw-ease);
}

.iw-img-alt { opacity: 0; }
.iw-card:hover .iw-img-main { transform: scale(1.05); }
.iw-card:hover .iw-img-alt { opacity: 1; }

/* Stamped label badge */
.iw-stamp {
    position: absolute;
    z-index: 2;
    inset-block-start: 10px;
    inset-inline-start: 10px;
    padding: 3px 9px;
    border: 2px solid var(--iw-red);
    outline: 1.5px solid rgb(from var(--tk-primary, #E5383B) r g b / .4);
    outline-offset: 2.5px;
    border-radius: 3px;
    background: rgb(from var(--tk-bg, #121314) r g b / .85);
    color: var(--iw-red);
    font-family: var(--iw-font-d);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 10.5px;
    transform: rotate(-4deg);
}

/* Ghost stencil rank for the Top picks rail */
.iw-rank {
    position: absolute;
    z-index: 2;
    inset-block-start: 2px;
    inset-inline-end: 10px;
    font-family: var(--iw-font-d);
    font-weight: 900;
    font-size: 46px;
    line-height: 1.1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgb(from var(--tk-text, #F4F4F2) r g b / .4);
}

@supports not (-webkit-text-stroke: 1.5px #fff) {
    .iw-rank { color: rgb(from var(--tk-text, #F4F4F2) r g b / .25); }
}

.iw-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    flex: 1 1 auto;
}

.iw-card-name {
    font-family: var(--iw-font-d);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: 13.5px;
    line-height: 1.25;
    margin: 0;
    color: var(--iw-txt);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.iw-card-sub {
    color: var(--iw-muted);
    font-size: 12px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.iw-price-row {
    margin-block-start: auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
}

.iw-price { display: flex; flex-direction: column; min-width: 0; }

.iw-price-now {
    font-family: var(--iw-font-d);
    font-weight: 800;
    font-size: 16px;
    color: var(--iw-txt);
}

.iw-price-was { color: var(--iw-dim); font-size: 12px; }

.iw-save {
    display: inline-block;
    margin-inline-start: 5px;
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--iw-red);
    color: #fff;
    font-family: var(--iw-font-d);
    font-weight: 800;
    font-size: 10.5px;
}

/* Red plate add button */
.iw-add {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--iw-r);
    background: var(--iw-red);
    color: #fff;
    font-size: 19px;
    cursor: pointer;
    transition: transform var(--iw-dur) var(--iw-ease), background-color var(--iw-dur) var(--iw-ease);
}

.iw-add:hover { background: var(--iw-red-deep); color: #fff; transform: translateY(-2px); }
.iw-add:active { transform: translateY(0) scale(.94); }

/* Gym-board stock lettering: letter-spaced caps + LED square */
.iw-board {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    /* +2px inline pad over the 5/9 baseline so the .22em-tracked caps never
       kiss the border (founder: "text must not touch container edges"). The
       trailing letter-spacing already adds a sliver after the last glyph, so
       we keep a hair more room on the inline-end. */
    padding-block: 5px;
    padding-inline: 11px 9px;
    border-radius: 4px;
    border: 1px solid var(--iw-line);
    background: var(--iw-bg-2);
    font-family: var(--iw-font-d);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .22em;
    font-size: 9.5px;
    color: #D8DADB;
    white-space: nowrap;
}

.iw-board::before { content: ""; width: 7px; height: 7px; border-radius: 2px; flex: 0 0 auto; }
.iw-board-ok::before { background: var(--iw-ok); box-shadow: 0 0 6px rgb(from var(--tk-success, #3FB36C) r g b / .8); }
.iw-board-no::before { background: var(--iw-red); box-shadow: 0 0 6px rgb(from var(--tk-primary, #E5383B) r g b / .8); }

/* Weight-plate price disc (Top picks + product page) */
.iw-disc {
    position: absolute;
    z-index: 2;
    inset-block-end: 10px;
    inset-inline-end: 10px;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px;
    overflow: hidden;
    background: var(--iw-panel);
    border: 3px solid var(--iw-red);
    box-shadow:
        inset 0 0 0 2px var(--iw-bg-2),
        inset 0 0 0 9px var(--iw-panel-2),
        inset 0 0 0 11px var(--iw-bg-2),
        0 8px 18px rgba(0, 0, 0, .5);
}

.iw-disc-now {
    font-family: var(--iw-font-d);
    font-weight: 800;
    font-size: 12px;
    line-height: 1.1;
    color: var(--iw-txt);
    word-break: break-word;
}

.iw-disc-was { font-size: 9px; color: var(--iw-dim); text-decoration: line-through; line-height: 1.2; }

/* ============================ RAILS & GRID ============================ */

.iw-rail {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-block: 6px 14px;
    scrollbar-width: thin;
    scrollbar-color: var(--iw-red) var(--iw-panel);
}

.iw-rail::-webkit-scrollbar { height: 5px; }
.iw-rail::-webkit-scrollbar-track { background: var(--iw-panel); border-radius: 3px; }
.iw-rail::-webkit-scrollbar-thumb { background: var(--iw-red); border-radius: 3px; }

.iw-rail > .iw-card { flex: 0 0 76%; scroll-snap-align: start; }

@media (min-width: 560px) { .iw-rail > .iw-card { flex-basis: 46%; } }
@media (min-width: 900px) { .iw-rail > .iw-card { flex-basis: 31%; } }
@media (min-width: 1100px) { .iw-rail > .iw-card { flex-basis: 23.5%; } }

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

@media (min-width: 760px) { .iw-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 1100px) { .iw-grid { grid-template-columns: repeat(4, 1fr); } }

/* ============================ TOOLBAR & FORMS ============================ */

.iw-toolbar {
    display: grid;
    gap: 10px;
    margin-block-end: 18px;
    padding: 12px;
    border-radius: var(--iw-r);
    border: var(--iw-bw) solid var(--iw-line);
    background: var(--iw-panel);
}

@media (min-width: 760px) {
    .iw-toolbar { grid-template-columns: 1.2fr 1.1fr .8fr; align-items: center; }
}

.iw-tool-row { display: flex; gap: 8px; }
.iw-tool-row .grow { flex: 1 1 auto; min-width: 0; }

.iw-body .form-control,
.iw-body .form-select,
.iw-body textarea.form-control {
    background-color: var(--iw-bg-2);
    border: var(--iw-bw) solid var(--iw-line-2);
    border-radius: var(--iw-r);
    color: var(--iw-txt);
    font-family: var(--iw-font-b);
    /* founder remark: inputs must not crowd — comfortable inner padding (>=12px).
       Physical longhands (not the `padding` shorthand) so the per-direction
       <select> chevron override below can adjust one side without resetting
       the others. */
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 14px;
    padding-right: 14px;
}

/* The native <select> chevron is painted by the platform (Tabler/store.css)
   at the physical right edge with a physical-shorthand `padding`. In RTL that
   pins the arrow over the (right-aligned) label and wastes the start padding.
   We mirror it explicitly per direction. `select.form-select` raises
   specificity above the platform's `.form-select` padding shorthand so the
   chevron-side clearance actually applies. */
.iw-body select.form-select {
    /* store.css sets `padding: … !important` on .form-select, so the
       chevron-side clearance must also be !important to land. */
    padding-left: 14px !important;
    padding-right: 38px !important;
    background-position-x: calc(100% - 14px);
}

.iw-body[dir="rtl"] select.form-select {
    padding-left: 38px !important;
    padding-right: 14px !important;
    background-position-x: 14px;
}

.iw-body .form-control::placeholder { color: var(--iw-dim); }

.iw-body .form-control:focus,
.iw-body .form-select:focus {
    background-color: var(--iw-bg-2);
    border-color: var(--iw-red);
    box-shadow: 0 0 0 3px var(--iw-red-soft);
    color: var(--iw-txt);
}

.iw-body .form-select option { background: var(--iw-bg-2); color: var(--iw-txt); }

.iw-body .form-label { color: var(--iw-muted); font-weight: 600; }

.iw-body .form-check-input {
    background-color: var(--iw-bg-2);
    border: var(--iw-bw) solid var(--iw-line-2);
}

.iw-body .form-check-input:checked { background-color: var(--iw-red); border-color: var(--iw-red); }
.iw-body .form-check-label { color: var(--iw-txt); }

/* ============================ EMPTY STATES (CSS barbell) ============================ */

.iw-empty { text-align: center; padding: 42px 16px; }

.iw-empty h3 {
    font-family: var(--iw-font-d);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 10px 0 4px;
    color: var(--iw-txt);
}

.iw-empty p { color: var(--iw-muted); margin: 0 0 16px; }

.iw-empty-art,
.iw-empty-cart-art {
    position: relative;
    width: 150px;
    height: 64px;
    margin: 0 auto 6px;
    opacity: .9;
}

.iw-empty-art::before,
.iw-empty-cart-art::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 50%;
    height: 6px;
    transform: translateY(-50%);
    background: var(--iw-dim);
    border-radius: 3px;
}

.iw-empty-art::after,
.iw-empty-cart-art::after {
    content: "";
    position: absolute;
    top: 50%;
    inset-inline-start: 18px;
    width: 14px;
    height: 58px;
    transform: translateY(-50%);
    background: var(--iw-red);
    border-radius: 4px;
    box-shadow:
        18px 0 0 -8px var(--iw-red),
        82px 0 0 -8px var(--iw-red),
        100px 0 0 0 var(--iw-red);
}

.iw-empty-cart-art { width: 120px; height: 50px; }

.iw-empty-cart-art::after {
    inset-inline-start: 12px;
    width: 11px;
    height: 46px;
    box-shadow:
        14px 0 0 -7px var(--iw-red),
        68px 0 0 -7px var(--iw-red),
        82px 0 0 0 var(--iw-red);
}

/* ============================ PAGINATION ============================ */

.iw-body .pagination { gap: 5px; }

.iw-body .pagination .page-link {
    background: var(--iw-panel);
    border: var(--iw-bw) solid var(--iw-line);
    color: var(--iw-txt);
    border-radius: var(--iw-r-sm);
    font-family: var(--iw-font-d);
    font-weight: 700;
    min-width: 36px;
    text-align: center;
}

.iw-body .pagination .page-link:hover { border-color: var(--iw-red); color: var(--iw-red); }

.iw-body .pagination .page-item.active .page-link {
    background: var(--iw-red);
    border-color: var(--iw-red);
    color: #fff;
}

.iw-body .pagination .page-item.disabled .page-link { color: var(--iw-dim); background: var(--iw-bg-2); }

/* ============================ FOOTER ============================ */

.iw-footer {
    background: var(--iw-bg-2);
    border-block-start: var(--iw-bw) solid var(--iw-line);
    margin-block-start: 26px;
}

.iw-footer-grid {
    max-width: 1180px;
    margin-inline: auto;
    padding: 26px 16px;
    display: grid;
    gap: 18px;
}

@media (min-width: 760px) {
    .iw-footer-grid { grid-template-columns: 1fr auto; align-items: start; }
}

.iw-footer-brand {
    font-family: var(--iw-font-d);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 19px;
    margin-block-end: 6px;
}

.iw-copy { color: var(--iw-muted); font-size: 13px; margin: 0; }
.iw-copy a { color: var(--iw-txt); border-block-end: 1px solid var(--iw-line-2); }
.iw-copy a:hover { color: var(--iw-red); border-color: var(--iw-red); }

.iw-policy-links {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
}

.iw-policy-links a {
    color: var(--iw-muted);
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-family: var(--iw-font-d);
    font-weight: 700;
}

.iw-policy-links a:hover { color: var(--iw-red); }

.iw-socials { display: flex; justify-content: center; gap: 9px; }

.iw-socials a {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--iw-r);
    border: var(--iw-bw) solid var(--iw-line);
    background: var(--iw-panel);
    color: var(--iw-muted);
    font-size: 18px;
    transition: transform var(--iw-dur) var(--iw-ease), border-color var(--iw-dur) var(--iw-ease),
        color var(--iw-dur) var(--iw-ease);
}

.iw-socials a:hover { transform: translateY(-2px); border-color: var(--iw-red); color: var(--iw-red); }

/* ============================ STICKY RED CART BAR ============================ */

.iw-dock {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 1040;
    background: var(--iw-red);
    border-block-start: 2px solid var(--iw-red-deep);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .45);
}

.iw-dock-in {
    max-width: 560px;
    margin-inline: auto;
    display: flex;
    align-items: stretch;
    padding: 8px 10px;
    padding-block-end: calc(8px + env(safe-area-inset-bottom, 0px));
    gap: 6px;
}

.iw-dock-link,
.iw-dock-cart {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 4px;
    border-radius: var(--iw-r-sm);
    color: rgba(255, 255, 255, .85);
    font-family: var(--iw-font-d);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 10px;
    cursor: pointer;
}

.iw-dock-link i,
.iw-dock-cart i { font-size: 19px; }

.iw-dock-link:hover,
.iw-dock-cart:hover { color: #fff; }

.iw-dock-link.active { color: #fff; background: rgba(0, 0, 0, .22); }

.iw-dock-cart { position: relative; background: rgba(0, 0, 0, .22); color: #fff; }

.iw-dock-count {
    position: absolute;
    inset-block-start: 2px;
    inset-inline-end: calc(50% - 24px);
    min-width: 17px;
    height: 17px;
    padding-inline: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: #fff;
    color: var(--iw-red);
    font-size: 10px;
    font-weight: 800;
}

.iw-dock-count.is-empty { opacity: .55; }

/* ============================ OFFCANVAS CART ============================ */

.iw-body .offcanvas {
    background: color-mix(in srgb, var(--tk-bg, #121314), #fff 3%);
    color: var(--iw-txt);
    border-inline-start: var(--iw-bw) solid var(--iw-line-2);
}

.iw-body .offcanvas-header { border-block-end: var(--iw-bw) solid var(--iw-line); }

.iw-body .offcanvas-title {
    font-family: var(--iw-font-d);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--iw-txt);
}

.iw-body .offcanvas-footer {
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    border-block-start: var(--iw-bw) solid var(--iw-line);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.iw-body .offcanvas .btn-close { filter: invert(1) grayscale(1); }

.iw-cart-item {
    border-radius: var(--iw-r);
    border: var(--iw-bw) solid var(--iw-line);
    background: var(--iw-panel);
    padding: 12px;
}

.iw-cart-thumb {
    width: 84px;
    height: 84px;
    border-radius: var(--iw-r-sm);
    overflow: hidden;
    border: var(--iw-bw) solid var(--iw-line);
    background: var(--iw-panel-2);
}

.iw-cart-name {
    font-family: var(--iw-font-d);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    color: var(--iw-txt);
    margin: 0;
}

.iw-cart-sub { color: var(--iw-muted); font-size: 11.5px; }

.iw-cart-price {
    font-family: var(--iw-font-d);
    font-weight: 800;
    color: var(--iw-red);
    font-size: 14px;
}

.iw-qty-btn,
.iw-del-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--iw-r-sm);
    border: var(--iw-bw) solid var(--iw-line-2);
    background: var(--iw-bg-2);
    color: var(--iw-txt);
    padding: 0;
    cursor: pointer;
    transition: border-color var(--iw-dur) var(--iw-ease), background-color var(--iw-dur) var(--iw-ease);
}

.iw-qty-btn svg,
.iw-del-btn svg { width: 16px; height: 16px; }

.iw-qty-btn:hover { border-color: var(--iw-red); }

.iw-qty-num {
    width: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--iw-font-d);
    font-weight: 800;
    font-size: 14px;
}

.iw-del-btn {
    margin-inline-start: 10px;
    border-color: rgb(from var(--tk-primary, #E5383B) r g b / .5);
    background: var(--iw-red-soft);
    color: var(--iw-red);
}

.iw-del-btn:hover { background: var(--iw-red); color: #fff; }

.iw-total {
    font-family: var(--iw-font-d);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 16px;
    margin: 0;
    color: var(--iw-txt);
}

.iw-total-num { color: var(--iw-red); }

/* ============================ MODALS ============================ */

.iw-body .modal-content {
    background: color-mix(in srgb, var(--tk-bg, #121314), #fff 4%);
    color: var(--iw-txt);
    border: var(--iw-bw) solid var(--iw-line-2);
    border-radius: var(--iw-r);
}

.iw-body .modal-header { border-block-end: var(--iw-bw) solid var(--iw-line); }
.iw-body .modal-footer { border-block-start: var(--iw-bw) solid var(--iw-line); }

.iw-body .modal-title {
    font-family: var(--iw-font-d);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--iw-txt);
}

.iw-body .modal .btn-close { filter: invert(1) grayscale(1); }
.iw-body .modal .text-muted { color: var(--iw-muted) !important; }

/* ============================ SINGLE PRODUCT ============================ */

.iw-back {
    max-width: 1180px;
    margin: 16px auto 0;
    padding-inline: 16px;
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--iw-font-d);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 12px;
    color: var(--iw-muted);
    width: fit-content;
}

.iw-back:hover { color: var(--iw-red); }

/* Directional arrows follow the *document* direction, not the PHP locale.
   The blade still emits the right glyph when the cache is warm, but a stale
   view-cache or a query-string locale reset can desync the icon from dir.
   Mirroring the horizontal arrow glyphs in RTL guarantees they always point
   the correct way (back = toward inline-start, CTA = toward inline-end). */
.iw-body[dir="rtl"] .iw-back i,
.iw-body[dir="rtl"] .iw-cat-tile-cta i {
    transform: scaleX(-1);
}

.iw-pd {
    max-width: 1180px;
    margin-inline: auto;
    padding: 18px 16px 8px;
    display: grid;
    gap: 24px;
}

@media (min-width: 900px) {
    .iw-pd { grid-template-columns: 1fr 1fr; align-items: start; }
}

.iw-gallery-main {
    display: block;
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--iw-r);
    border: var(--iw-bw) solid var(--iw-line-2);
    background: var(--iw-panel) var(--iw-grip);
    overflow: hidden;
    box-shadow: var(--iw-shadow);
}

.iw-gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; }

.iw-thumbs {
    display: flex;
    gap: 9px;
    overflow-x: auto;
    padding-block: 10px 4px;
    scrollbar-width: none;
}

.iw-thumbs::-webkit-scrollbar { display: none; }

.iw-thumb {
    flex: 0 0 72px;
    height: 72px;
    border-radius: var(--iw-r-sm);
    border: var(--iw-bw) solid var(--iw-line);
    overflow: hidden;
    background: var(--iw-panel-2);
    cursor: pointer;
    transition: border-color var(--iw-dur) var(--iw-ease), transform var(--iw-dur) var(--iw-ease);
}

.iw-thumb:hover { border-color: var(--iw-red); transform: translateY(-2px); }
.iw-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.iw-pd-name {
    font-family: var(--iw-font-d);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.02;
    letter-spacing: .01em;
    font-size: clamp(26px, 6.5vw, 42px);
    margin: 8px 0 0;
}

.iw-pd-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-block: 14px 4px;
}

.iw-pd-badges .iw-stamp { position: static; display: inline-block; }

/* Price bench: weight-plate disc + was/save */
.iw-price-panel {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-block: 14px;
    padding: 14px;
    border-radius: var(--iw-r);
    border: var(--iw-bw) solid var(--iw-line);
    background: var(--iw-panel) var(--iw-grip);
}

.iw-price-panel .iw-disc {
    position: static;
    width: 96px;
    height: 96px;
    flex: 0 0 auto;
}

.iw-price-panel .iw-disc-now { font-size: 14px; }

.iw-price-label {
    font-family: var(--iw-font-d);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .2em;
    font-size: 10px;
    color: var(--iw-dim);
    margin-block-end: 4px;
}

.iw-pd-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-block: 14px 4px;
}

.iw-pd-actions .iw-btn { flex: 1 1 200px; }

.iw-prose { color: var(--iw-muted); font-size: 14.5px; }
.iw-prose p { margin-block: 0 10px; }
.iw-prose h1, .iw-prose h2, .iw-prose h3, .iw-prose h4 {
    font-family: var(--iw-font-d);
    text-transform: uppercase;
    color: var(--iw-txt);
}
.iw-prose img { max-width: 100%; border-radius: var(--iw-r); }
.iw-prose ul, .iw-prose ol { padding-inline-start: 20px; }

/* Share include re-skinned for the dark floor */
.iw-body .share-title { color: var(--iw-muted); font-family: var(--iw-font-d); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }
.iw-body .share-icon { background: var(--iw-panel); border: var(--iw-bw) solid var(--iw-line); }
.iw-body .share-icon.x { color: var(--iw-txt); }
.iw-body .share-icon.email { color: var(--iw-muted); }
.iw-body .share-icon:hover { background: var(--iw-panel-2); box-shadow: none; border-color: var(--iw-red); }
.iw-body .share-icon.whatsapp:hover,
.iw-body .share-icon.telegram:hover,
.iw-body .share-icon.facebook:hover,
.iw-body .share-icon.instagram:hover,
.iw-body .share-icon.x:hover,
.iw-body .share-icon.email:hover,
.iw-body .share-icon.copy:hover { background: var(--iw-panel-2); }

/* ============================ CATEGORY EDITORIAL TILES ============================ */

.iw-cat-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

@media (min-width: 700px) { .iw-cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .iw-cat-grid { grid-template-columns: repeat(3, 1fr); } }

.iw-cat-tile {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: var(--iw-r);
    border: var(--iw-bw) solid var(--iw-line);
    overflow: hidden;
    background: var(--iw-panel-2);
    transition: transform var(--iw-dur) var(--iw-ease), border-color var(--iw-dur) var(--iw-ease),
        box-shadow var(--iw-dur) var(--iw-ease);
}

.iw-cat-tile:hover { transform: translateY(-3px); border-color: var(--iw-red); box-shadow: var(--iw-shadow); }

.iw-cat-tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s var(--iw-ease);
}

.iw-cat-tile:hover img { transform: scale(1.05); }

.iw-cat-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(from var(--tk-bg, #0C0D0E) r g b / .92) 0%, rgb(from var(--tk-bg, #0C0D0E) r g b / .25) 55%, rgb(from var(--tk-bg, #0C0D0E) r g b / .05) 100%);
}

.iw-cat-tile-num {
    position: absolute;
    z-index: 2;
    inset-block-start: 10px;
    inset-inline-start: 10px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--iw-r-sm);
    background: var(--iw-red);
    color: #fff;
    font-family: var(--iw-font-d);
    font-weight: 800;
    font-size: 13px;
}

.iw-cat-tile-name {
    position: absolute;
    z-index: 2;
    inset-block-end: 14px;
    inset-inline-start: 14px;
    inset-inline-end: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-family: var(--iw-font-d);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: clamp(16px, 3vw, 21px);
    color: var(--iw-txt);
}

.iw-cat-tile-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    border-radius: var(--iw-r-sm);
    border: 2px solid var(--iw-red);
    color: var(--iw-red);
    background: rgb(from var(--tk-bg, #121314) r g b / .7);
    font-size: 10.5px;
    letter-spacing: .14em;
}

.iw-cat-tile:hover .iw-cat-tile-cta { background: var(--iw-red); color: #fff; }

/* ============================ POLICY PAGES ============================ */

.iw-policy { max-width: 880px; margin-inline: auto; padding: 26px 16px; }

.iw-policy-title {
    font-family: var(--iw-font-d);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .02em;
    line-height: 1.05;
    font-size: clamp(26px, 7vw, 44px);
    margin: 8px 0 18px;
    padding-block-end: 14px;
    border-block-end: var(--iw-bw) solid var(--iw-line);
}

.iw-policy .iw-prose { color: color-mix(in srgb, var(--tk-text, #F4F4F2), var(--tk-bg, #121314) 18%); }
.iw-policy .iw-prose a { color: var(--iw-red); }

/* ============================ REVEAL (additive) ============================ */

.iw-anim [data-iw-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .45s var(--iw-ease), transform .45s var(--iw-ease);
}

.iw-anim [data-iw-reveal].is-in { opacity: 1; transform: none; }

/* ============================ WALLET / MISC ============================ */

.scaanme-wallet-buttons { margin-block: 22px !important; }

.iw-body .alert-float { z-index: 2100; }

/* ============================ REDUCED MOTION ============================ */

@media (prefers-reduced-motion: reduce) {

    .iw-body *,
    .iw-body *::before,
    .iw-body *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .iw-loader { animation: none; border-block-start-color: var(--iw-red); }
    .iw-anim [data-iw-reveal] { opacity: 1; transform: none; }
}


/* ============================================================
   Cart toast — bulletproof compact pill.
   Overrides the legacy inline showAlert() sizing (width:75% /
   inset-inline:0) that made the Tabler solid alert blow up to a
   half-screen green panel. Forces a centered top toast, auto height.
   ============================================================ */
.alert-float {
    position: fixed !important;
    inset-block-start: 16px !important;
    inset-block-end: auto !important;
    bottom: auto !important;
    inset-inline: 16px !important;
    z-index: 4000;
    width: auto !important;
    max-width: 420px !important;
    margin-inline: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 13px 20px !important;
    border: 0 !important;
    border-radius: 14px !important;
    text-align: center !important;
    font-weight: 600;
    font-size: 14.5px;
    line-height: 1.4;
    background: var(--tk-success-deep, #1f7a4d) !important;
    color: #fff !important;
    box-shadow: 0 16px 38px -10px rgba(0, 0, 0, .42);
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
}
.alert-float.show {
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
}
.alert-float .btn-close,
.alert-float .alert-icon { display: none !important; }
@media (prefers-reduced-motion: reduce) {
    .alert-float { transition: none; }
}


/* ============================================================
   GLOBAL CONTAINMENT BASELINE (founder remark: diagonal-scroll
   drift / horizontal "wiggle" on mobile + zoom-out).
   overflow-x:clip on html is sticky-safe (unlike hidden) and
   stops the horizontal pan; overscroll-behavior-x:none kills the
   rubber-band; max-width:100% + min-width:0 prevent any child
   from forcing the document wider than the viewport.
   ============================================================ */
html { overflow-x: clip; }
body { overflow-x: clip; overscroll-behavior-x: none; max-width: 100%; }
/* horizontal scrollers keep their swipe to themselves */
.car-track, .reel, .film-reel, .tm-track, .letters, .marquee, .marquee-track,
[class*="-track"], [class*="-rail"], [class*="-carousel"], [class*="-scroll"] {
    overscroll-behavior-x: contain;
    max-width: 100vw;
}