/* ==========================================================================
   Casa Visatoare — storefront design system
   Marketplace-density layout on the brand's handmade palette.
   Sections: tokens · base · layout · header · nav · components · pages
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    /* brand */
    --brand: #C07285;
    --brand-dark: #A2596C;
    --brand-light: #F3E4E8;
    --brand-tint: #FBF4F6;

    /* ink */
    --ink: #56547D;
    --ink-strong: #3B3A57;
    --ink-muted: #737391;
    --ink-soft: #9A9AB0;

    /* surfaces */
    --bg: #FAF6F3;
    --surface: #FFFFFF;
    --surface-alt: #F4EDE7;
    --border: #EBE1DC;
    --border-strong: #DCCEC7;

    /* status */
    --sale: #C4553F;
    --sale-bg: #FCEDE9;
    --success: #1E7A4C;
    --success-bg: #E6F4EC;
    --danger: #B02A2A;
    --danger-bg: #FBE9E9;
    --info-bg: #EEEBF5;
    --star: #E8A93B;

    /* type */
    --font-body: "ABeeZee", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-head: "marcellus", Georgia, serif;
    --font-script: "dancing", cursive;

    /* geometry */
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(59, 58, 87, .06), 0 1px 3px rgba(59, 58, 87, .04);
    --shadow: 0 2px 8px rgba(59, 58, 87, .07), 0 4px 16px rgba(59, 58, 87, .05);
    --shadow-lg: 0 8px 30px rgba(59, 58, 87, .12);

    --header-h: 132px;
    --container: 1320px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-strong);
    background: var(--bg);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
    font-family: var(--font-head);
    color: var(--ink-strong);
    margin: 0 0 .5em;
    line-height: 1.25;
    font-weight: 400;
}

h1 { font-size: 32px; font-size: clamp(26px, 3.2vw, 38px); }
h2 { font-size: 26px; font-size: clamp(22px, 2.4vw, 30px); }
h3 { font-size: 20px; }
h4 { font-size: 17px; }

p { margin: 0 0 1em; }

a { color: var(--brand-dark); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--brand); }

img { max-width: 100%; height: auto; display: block; }
/* <picture> e inline si, oricat de gol ar fi, isi lasa un rand de text sub
   imagine — asta impinge in jos orice container care isi tine proportia cu
   padding-hack, cum sunt cardurile de produs si galeria. `contents` il scoate
   cu totul din asezare: imaginea se comporta exact ca inainte de a fi invelita. */
picture { display: contents; }

ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
ul.plain { list-style: none; padding: 0; margin: 0; }

small, .small { font-size: 13px; }
.muted { color: var(--ink-muted); }
.soft { color: var(--ink-soft); }
.strong { font-weight: 700; }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }

hr { border: 0; border-top: 1px solid var(--border); margin: 24px 0; }

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--brand); color: #fff; padding: 10px 18px; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 20px;
}

.container-narrow { max-width: 820px; }

.section { padding: 44px 0; }
.section-sm { padding: 28px 0; }
.section-tight { padding: 20px 0; }

.stack > * + * { margin-top: 16px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.row-gap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-products { grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); }

.section-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; margin-bottom: 22px; flex-wrap: wrap;
}
.section-head h2 { margin: 0; }
.section-head .eyebrow {
    font-family: var(--font-script);
    color: var(--brand);
    font-size: 22px;
    display: block;
    line-height: 1;
    margin-bottom: 2px;
}
.section-head .link-more { font-weight: 700; font-size: 14px; white-space: nowrap; }

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */

/* Language hint — a single quiet line above the topbar, offered once to
   visitors whose browser asks for the other language. Kept deliberately plain:
   it is a suggestion, not a call to action, and must not compete with the
   header. See templates/partials/_language_hint.html.twig. */
.lang-hint {
    background: var(--brand-tint);
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.lang-hint .container {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
}
.lang-hint i { color: var(--brand-dark); }
.lang-hint-go {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.lang-hint-go:hover { color: var(--brand-dark); }
.lang-hint-close {
    margin-left: auto;
    color: var(--ink-soft);
    line-height: 1;
    padding: 4px;
}
.lang-hint-close:hover { color: var(--ink); }
.lang-hint-close i { color: inherit; margin: 0; }

/* Language switcher in the topbar. */
.lang-switch { display: inline-flex; gap: 6px; align-items: center; }
.lang-switch strong { color: #fff; font-weight: 700; }
.lang-switch a { opacity: .75; }
.lang-switch a:hover { opacity: 1; }

.topbar {
    background: var(--ink-strong);
    color: rgba(255, 255, 255, .86);
    font-size: 13px;
}
.topbar a { color: rgba(255, 255, 255, .86); }
.topbar a:hover { color: #fff; }
.topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; }
.topbar-links { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.topbar i { margin-right: 6px; color: var(--brand); }

.site-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 60;
}
.site-header.is-stuck { box-shadow: var(--shadow); }

.header-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 26px;
    padding: 14px 0;
}

.header-brand { display: flex; align-items: center; gap: 12px; }
.logo { display: flex; align-items: center; gap: 10px; }
.logo-mark {
    font-family: var(--font-script);
    font-size: 30px;
    color: var(--brand);
    line-height: 1;
    white-space: nowrap;
}
.logo-sub {
    display: block;
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* search */
.search { position: relative; }
.search-form {
    display: flex;
    align-items: stretch;
    background: var(--surface-alt);
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    transition: border-color .15s ease, background .15s ease;
}
.search-form:focus-within { border-color: var(--brand); background: #fff; }
.search-input {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 12px 20px;
    font: inherit;
    color: var(--ink-strong);
    min-width: 0;
}
.search-input:focus { outline: none; }
.search-input::placeholder { color: var(--ink-soft); }
.search-btn {
    border: 0;
    background: var(--brand);
    color: #fff;
    padding: 0 26px;
    border-radius: var(--radius-pill);
    margin: 4px;
    cursor: pointer;
    font-size: 15px;
    transition: background .15s ease;
}
.search-btn:hover { background: var(--brand-dark); }

.suggestions {
    position: absolute;
    top: calc(100% + 8px);
    left: 0; right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    z-index: 80;
}
.suggestions[hidden] { display: none; }
.suggestion {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 11px 18px;
    color: var(--ink-strong);
    border-bottom: 1px solid var(--border);
}
.suggestion:last-child { border-bottom: 0; }
.suggestion:hover, .suggestion.is-active { background: var(--brand-tint); color: var(--brand-dark); }
.suggestion-name { font-weight: 600; }
.suggestion-cat { font-size: 12px; color: var(--ink-soft); }
.suggestion-price { color: var(--brand); font-weight: 700; white-space: nowrap; }

/* header actions */
.header-actions { display: flex; align-items: center; gap: 6px; }
.header-action {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 12px;
    border-radius: var(--radius);
    color: var(--ink);
    position: relative;
    transition: background .15s ease, color .15s ease;
}
.header-action:hover { background: var(--brand-tint); color: var(--brand-dark); }
.header-action i { font-size: 19px; }
.header-action-text { display: flex; flex-direction: column; line-height: 1.15; }
.header-action-text small { font-size: 11px; color: var(--ink-soft); }
.header-action-text span { font-size: 14px; font-weight: 700; }
.header-icon { position: relative; display: inline-flex; }
.header-badge {
    position: absolute;
    top: -7px; left: 10px;
    min-width: 19px; height: 19px;
    padding: 0 5px;
    background: var(--brand);
    color: #fff;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff;
}
/* display:flex above would otherwise defeat the hidden attribute. */
.header-badge[hidden] { display: none; }

.avatar-bubble {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--brand-light);
    color: var(--brand-dark);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px;
}

.burger {
    display: none;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--ink);
    width: 42px; height: 42px;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 18px;
}

/* --------------------------------------------------------------------------
   5. Category nav + mega menu
   -------------------------------------------------------------------------- */
.site-nav {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.nav-list {
    display: flex; align-items: center; gap: 2px;
    list-style: none; margin: 0; padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.nav-list::-webkit-scrollbar { display: none; }
.nav-item { position: relative; flex: 0 0 auto; }
.nav-link {
    display: flex; align-items: center; gap: 8px;
    padding: 13px 15px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
}
.nav-link:hover, .nav-item:hover > .nav-link, .nav-link.is-active {
    color: var(--brand-dark);
    border-bottom-color: var(--brand);
}
.nav-link i { font-size: 14px; color: var(--brand); }
.nav-link .caret { font-size: 10px; color: var(--ink-soft); }
.nav-link-sale { color: var(--sale); }
.nav-link-sale i { color: var(--sale); }

.megamenu {
    position: absolute;
    top: 100%; left: 0;
    min-width: 260px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 10px;
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    z-index: 70;
}
.nav-item:hover .megamenu, .nav-item:focus-within .megamenu {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.megamenu a {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 9px 14px;
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-size: 14px;
}
.megamenu a:hover { background: var(--brand-tint); color: var(--brand-dark); }
.megamenu .count { font-size: 12px; color: var(--ink-soft); }

/* mobile drawer */
.drawer {
    position: fixed; top: 0; right: 30%; bottom: 0; left: 0;
    background: var(--surface);
    z-index: 120;
    transform: translateX(-100%);
    transition: transform .25s ease;
    overflow-y: auto;
    padding: 18px;
    box-shadow: var(--shadow-lg);
}
.drawer.is-open { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.drawer a { display: block; padding: 11px 6px; border-bottom: 1px solid var(--border); color: var(--ink); font-weight: 600; }
.drawer a.sub { padding-left: 22px; font-weight: 400; font-size: 14px; color: var(--ink-muted); }
.overlay {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(59, 58, 87, .45);
    z-index: 110;
    opacity: 0; visibility: hidden;
    transition: opacity .2s ease, visibility .2s;
}
.overlay.is-open { opacity: 1; visibility: visible; }

/* --------------------------------------------------------------------------
   6. Buttons, badges, forms
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 11px 22px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font: inherit;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
    cursor: pointer;
    text-align: center;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); color: #fff; }
.btn-dark { background: var(--ink-strong); color: #fff; }
.btn-dark:hover { background: var(--ink); color: #fff; }
.btn-outline { background: transparent; border-color: var(--border-strong); color: var(--ink); }
.btn-outline:hover { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-tint); }
.btn-ghost { background: var(--surface-alt); color: var(--ink); }
.btn-ghost:hover { background: var(--brand-light); color: var(--brand-dark); }
.btn-sale { background: var(--sale); color: #fff; }
.btn-sale:hover { background: #A9432F; color: #fff; }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-lg { padding: 14px 30px; font-size: 16px; }
.btn:disabled, .btn.is-disabled {
    background: var(--surface-alt);
    color: var(--ink-soft);
    cursor: not-allowed;
    border-color: transparent;
}

.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .02em;
}
.badge-sale { background: var(--sale); color: #fff; }
.badge-new { background: var(--ink-strong); color: #fff; }
.badge-soft { background: var(--brand-light); color: var(--brand-dark); }
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.badge-warn { background: #FDF3E2; color: #9A6410; }
.badge-outline { border: 1px solid var(--border-strong); color: var(--ink-muted); }

.chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 13px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    font-size: 13px;
    color: var(--ink);
}
.chip a, .chip button {
    border: 0; background: none; color: var(--ink-soft); cursor: pointer; padding: 0; line-height: 1; font-size: 13px;
}
.chip a:hover, .chip button:hover { color: var(--sale); }

label, .form-label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 5px; }

.field, input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="number"], input[type="search"], select, textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    font: inherit;
    font-size: 14.5px;
    color: var(--ink-strong);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.field:focus, input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-light);
}
textarea { resize: vertical; min-height: 96px; }
select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239A9AB0'><path d='M7 10l5 5 5-5z'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 34px; }

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.form-row { margin-bottom: 16px; }
.form-row-full { grid-column: 1 / -1; }
.form-help { font-size: 12.5px; color: var(--ink-soft); margin-top: 5px; }
.form-error {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: grid;
    gap: 3px;
}
.form-error li {
    color: var(--danger);
    font-size: 12.5px;
    line-height: 1.45;
    display: flex; align-items: flex-start; gap: 6px;
    animation: field-error-in .18s ease;
}
@keyframes field-error-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .form-error li { animation: none; } }
/* The warning glyph is generated, so every message carries it without the
   templates having to remember. */
.form-error li::before {
    content: "\f06a";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 11.5px;
    line-height: 1.45;
    flex: 0 0 auto;
}
.field.is-invalid, .form-row.has-error .field {
    border-color: var(--danger);
    background: var(--danger-bg);
}
.field.is-invalid:focus, .form-row.has-error .field:focus {
    box-shadow: 0 0 0 3px rgba(190, 60, 70, .14);
}

.checkbox {
    display: flex; align-items: flex-start; gap: 10px;
    font-weight: 400; font-size: 14px; color: var(--ink); cursor: pointer;
}
.checkbox input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--brand); flex: 0 0 auto; }

.radio-cards { display: grid; gap: 10px; }
.radio-card {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.radio-card:hover { border-color: var(--brand); }
.radio-card input { accent-color: var(--brand); margin-top: 3px; }
.radio-card.is-selected { border-color: var(--brand); background: var(--brand-tint); }
.radio-card-body { flex: 1; }
.radio-card-title { font-weight: 700; color: var(--ink-strong); }
.radio-card-desc { font-size: 13px; color: var(--ink-muted); }

/* quantity stepper */
.qty {
    display: inline-flex; align-items: center;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    overflow: hidden;
    background: var(--surface);
}
.qty button {
    border: 0; background: none; width: 38px; height: 40px;
    color: var(--ink); font-size: 15px; cursor: pointer;
}
.qty button:hover { background: var(--surface-alt); color: var(--brand-dark); }
.qty input {
    width: 46px; border: 0; text-align: center; font: inherit; font-weight: 700;
    color: var(--ink-strong); background: transparent; padding: 0;
    -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty input:focus { outline: none; box-shadow: none; }

/* --------------------------------------------------------------------------
   7. Cards, ratings, flashes
   -------------------------------------------------------------------------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px;
}
.card-flush { padding: 0; overflow: hidden; }
.card-title { font-size: 17px; margin-bottom: 14px; }

.stars { color: var(--star); font-size: 13px; letter-spacing: 1px; white-space: nowrap; }
.stars-lg { font-size: 17px; }
.stars-sm { font-size: 11px; }
.rating-row { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-muted); }

/* --------------------------------------------------------------------------
   Feedback: toasts, in-page notices, form errors.

   One visual language for all three, so "something happened" always looks the
   same: a coloured disc with an icon, a short bold headline, then the detail.
   Colour alone never carries the meaning — the icon and the headline repeat it,
   which is what makes this readable for colour-blind users and in greyscale.
   -------------------------------------------------------------------------- */
.flashes {
    position: fixed; top: 84px; right: 20px; z-index: 200;
    display: grid; gap: 12px; width: min(400px, calc(100vw - 40px));
}
.flash {
    position: relative;
    display: flex; align-items: flex-start; gap: 13px;
    padding: 15px 16px 15px 15px;
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 12px 34px rgba(59, 58, 87, .16), 0 2px 6px rgba(59, 58, 87, .08);
    border: 1px solid var(--border);
    font-size: 14px;
    overflow: hidden;
    animation: flash-in .28s cubic-bezier(.16, 1, .3, 1);
}
.flash.is-leaving { animation: flash-out .2s ease forwards; }
@keyframes flash-in  { from { opacity: 0; transform: translateX(24px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes flash-out { to   { opacity: 0; transform: translateX(24px); } }

/* The icon disc carries the colour; the card itself stays neutral. */
.flash-icon {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 15px;
}
.flash-icon i { margin: 0; }
.flash-body { flex: 1; min-width: 0; }
.flash-title {
    display: block;
    font-weight: 700; font-size: 13.5px;
    color: var(--ink-strong);
    margin-bottom: 2px;
    letter-spacing: .01em;
}
.flash-text { color: var(--ink-muted); line-height: 1.5; word-wrap: break-word; }

/* Cat mai e pana la transport gratuit, in interiorul toastului de "adaugat in
   cos". Aceleasi culori si aceeasi grosime ca bara din pagina cosului: e
   acelasi lucru spus in alt loc, deci trebuie sa arate la fel. */
.flash-nudge { display: block; margin-top: 10px; }
.flash-nudge .track {
    display: block; height: 6px; background: var(--surface-alt);
    border-radius: var(--radius-pill); overflow: hidden;
}
.flash-nudge .fill {
    display: block; height: 100%; border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--brand), var(--brand-dark));
    transition: width .3s ease;
}
.flash-nudge-text { display: block; margin-top: 6px; font-size: 12.5px; color: var(--ink-muted); }
.flash-nudge.is-reached { font-size: 12.5px; color: var(--success); }
.flash-close {
    flex: 0 0 auto;
    border: 0; background: none; padding: 2px 0 0;
    color: var(--ink-soft); cursor: pointer; font-size: 13px;
    transition: color .15s;
}
.flash-close:hover { color: var(--ink); }

/* Thin bar showing how long the toast has left. */
.flash-timer {
    position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
    transform-origin: left;
    opacity: .5;
}

.flash-success .flash-icon { background: var(--success-bg); color: var(--success); }
.flash-success .flash-timer { background: var(--success); }
.flash-error   .flash-icon,
.flash-danger  .flash-icon { background: var(--danger-bg); color: var(--danger); }
.flash-error   .flash-timer,
.flash-danger  .flash-timer { background: var(--danger); }
.flash-info    .flash-icon { background: var(--brand-tint); color: var(--brand-dark); }
.flash-info    .flash-timer { background: var(--brand); }

@media (max-width: 620px) {
    .flashes { top: auto; bottom: 16px; right: 16px; left: 16px; width: auto; }
    @keyframes flash-in  { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
    @keyframes flash-out { to   { opacity: 0; transform: translateY(20px); } }
}
@media (prefers-reduced-motion: reduce) {
    .flash, .flash.is-leaving { animation: none; }
    .flash-timer { display: none; }
}

/* A single communication preference: checkbox, bold label, explanation.
   Bigger hit area than a bare checkbox, because these are toggled rarely and
   often on a phone. */
.pref {
    display: flex; gap: 13px; align-items: flex-start;
    padding: 14px 4px;
    margin: 0;
}
.pref label { cursor: pointer; font-weight: inherit; margin: 0; }
.pref + .pref { border-top: 1px solid var(--border); }

/* Switch: a real checkbox, visually replaced by a track and a thumb. The input
   keeps focus, keyboard and screen-reader behaviour; only its appearance goes. */
.switch { position: relative; flex: 0 0 auto; display: inline-flex; margin-top: 1px; }
.switch input {
    position: absolute; inset: 0;
    width: 100%; height: 100%; margin: 0;
    opacity: 0; cursor: pointer; z-index: 1;
}
.switch-track {
    width: 42px; height: 24px;
    border-radius: 999px;
    background: var(--border-strong);
    display: block;
    transition: background .18s ease;
}
.switch-thumb {
    position: absolute; top: 3px; left: 3px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(59, 58, 87, .3);
    transition: transform .18s cubic-bezier(.3, 1.4, .5, 1);
}
.switch input:checked ~ .switch-track { background: var(--brand); }
.switch input:checked ~ .switch-track .switch-thumb { transform: translateX(18px); }
.switch input:focus-visible ~ .switch-track { box-shadow: 0 0 0 3px var(--brand-tint); }
.switch input:disabled ~ .switch-track { opacity: .55; cursor: progress; }

/* While the change is in flight. */
.pref.is-saving { opacity: .6; }
.pref.is-saving .switch input { cursor: progress; }

@media (prefers-reduced-motion: reduce) {
    .switch-track, .switch-thumb { transition: none; }
}
.pref-body { display: grid; gap: 3px; }
.pref-body strong { font-size: 14.5px; color: var(--ink-strong); }
.pref-body .muted { font-size: 13px; line-height: 1.5; }
.pref:hover .pref-body strong { color: var(--brand-dark); }
.pref-body [data-subscription-since]:empty { display: none; }

/* Subscription history: a plain vertical log. Green for opting in, muted for
   opting out — the icon repeats it, so the meaning does not rest on colour. */
.timeline-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.log-entry { display: flex; gap: 12px; align-items: flex-start; padding: 9px 2px; }
.log-entry + .log-entry { border-top: 1px solid var(--border); }
.log-dot {
    flex: 0 0 auto;
    width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: 11px;
}
.log-dot i { margin: 0; }
.log-subscribed .log-dot { background: var(--success-bg); color: var(--success); }
.log-unsubscribed .log-dot { background: var(--surface-alt); color: var(--ink-soft); }
.log-body { display: grid; gap: 1px; }
.log-body strong { font-size: 13.5px; color: var(--ink-strong); font-weight: 600; }

/* Summary above a form that failed validation: says how many fields need
   attention and links to each one, so long forms do not need scanning. */
/* Square button holding a single icon: used for the delete action on a
   wishlist card, where a full label would crowd the primary button. */
.btn-icon {
    flex: 0 0 auto;
    width: 38px; padding-left: 0; padding-right: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.btn-icon:hover { color: var(--danger); border-color: var(--danger); }
.btn-icon i { margin: 0; }

/* Secondary action next to a destructive one: same weight, quieter colour, so
   "save for later" does not compete with "remove". */
.link-muted {
    border: 0; background: none; padding: 0;
    color: var(--ink-soft); cursor: pointer;
    font-size: inherit; font-family: inherit;
    transition: color .15s;
}
.link-muted:hover { color: var(--brand-dark); }
.link-muted i { margin-right: 5px; }

.form-alert {
    display: flex; gap: 13px; align-items: flex-start;
    padding: 14px 16px;
    margin-bottom: 20px;
    border-radius: var(--radius);
    background: var(--danger-bg);
    border: 1px solid rgba(190, 60, 70, .18);
}
.form-alert .flash-icon { background: rgba(255, 255, 255, .7); color: var(--danger); }
.form-alert-title { font-weight: 700; font-size: 14px; color: var(--danger); margin: 0 0 4px; }
.form-alert ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.form-alert li { font-size: 13.5px; color: var(--ink); }
.form-alert a { color: var(--danger); text-decoration: underline; text-underline-offset: 2px; }

.notice {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 14px 18px;
    border-radius: var(--radius);
    background: var(--info-bg);
    color: var(--ink);
    font-size: 14px;
}
.notice i { color: var(--brand); margin-top: 3px; }
.notice-success { background: var(--success-bg); color: var(--success); }
.notice-success i { color: var(--success); }
.notice-warn { background: #FDF3E2; color: #7A4F0B; }
.notice-warn i { color: #B57C1B; }
.notice-danger { background: var(--danger-bg); color: var(--danger); }
.notice-danger i { color: var(--danger); }

.empty-state { text-align: center; padding: 60px 20px; }
.empty-state i { font-size: 46px; color: var(--border-strong); margin-bottom: 14px; display: block; }

.breadcrumbs {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    font-size: 13px; color: var(--ink-soft);
    padding: 14px 0;
}
.breadcrumbs a { color: var(--ink-muted); }
.breadcrumbs a:hover { color: var(--brand); }
.breadcrumbs .sep { color: var(--border-strong); }

/* --------------------------------------------------------------------------
   8. Product card
   -------------------------------------------------------------------------- */
.product-card {
    position: relative;
    display: flex; flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-strong); }

.product-thumb {
    position: relative;
    display: block;
    background: var(--surface-alt);
    overflow: hidden;
}
/* Padding-hack keeps the square even on browsers without aspect-ratio support. */
.product-thumb::before { content: ""; display: block; padding-top: 100%; }
.product-thumb img {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .4s ease;
}
.product-card:hover .product-thumb img { transform: scale(1.04); }
.product-thumb .placeholder {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-soft); font-size: 13px;
}

.product-flags { position: absolute; top: 10px; left: 10px; display: grid; gap: 6px; justify-items: start; z-index: 2; }

.wishlist-btn {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    width: 36px; height: 36px;
    border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    color: var(--ink-soft);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: color .15s ease, transform .15s ease;
}
.wishlist-btn:hover { color: var(--brand); transform: scale(1.08); }
.wishlist-btn.is-active { color: var(--brand); }

.product-body { display: flex; flex-direction: column; gap: 7px; padding: 15px 16px 17px; flex: 1; }
.product-cat { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.product-name {
    font-size: 14.5px; font-weight: 600; color: var(--ink-strong); line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 2.8em;
}
.product-name:hover { color: var(--brand-dark); }

.price-row { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-top: auto; }
.price { font-size: 19px; font-weight: 700; color: var(--brand-dark); font-family: var(--font-head); }
.price-old { font-size: 13.5px; color: var(--ink-soft); text-decoration: line-through; }
.price-save { font-size: 12px; color: var(--sale); font-weight: 700; }

.stock-line { font-size: 12.5px; display: flex; align-items: center; gap: 6px; }
.stock-in { color: var(--success); }
.stock-low { color: #B57C1B; }
.stock-out { color: var(--ink-soft); }

.product-actions { display: flex; gap: 8px; margin-top: 4px; }
.product-actions .btn { flex: 1; }

/* horizontal rail */
/* Raftul de produse.

   Fara JavaScript ramane o banda care se deruleaza — cu degetul pe telefon, cu
   bara pe calculator. Cand shop.js adauga sagetile, primeste `is-carousel` si
   atunci bara dispare: derularea se face din butoane, iar pe ecranele tactile
   tot cu degetul. */
.rail {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(224px, 1fr);
    gap: 18px; overflow-x: auto; padding-bottom: 6px;
    scroll-snap-type: x proximity;
}
.rail > * { scroll-snap-align: start; }
.rail:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: var(--radius); }
.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-pill); }

.rail.is-carousel { scrollbar-width: none; padding-bottom: 0; }
.rail.is-carousel::-webkit-scrollbar { display: none; }

/* Sagetile stau in capul sectiunii, langa titlu, nu peste fotografii: acolo nu
   acopera niciun produs si nu se bat cu inimioara de pe card. */
/* Legatura "vezi toate" si sagetile stau impreuna, la dreapta: cu
   space-between si trei elemente, legatura ar pluti singura la mijloc. */
.section-head .link-more { margin-left: auto; }
.rail-nav { display: flex; gap: 8px; }
.rail-nav button {
    width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid var(--border-strong); background: var(--surface);
    color: var(--ink); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: border-color .15s ease, color .15s ease, opacity .15s ease;
}
.rail-nav button:hover:not(:disabled) { border-color: var(--brand); color: var(--brand-dark); }
.rail-nav button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.rail-nav button:disabled { opacity: .35; cursor: default; }

@media (max-width: 720px) {
    /* Pe telefon nu au ce cauta: raftul se trage cu degetul, iar sagetile ar
       sari pe randul urmator si ar lua din latimea titlului. Bara subtire se
       intoarce, ca sa ramana semnul ca mai sunt produse la dreapta. */
    .rail-nav { display: none; }
    .rail.is-carousel { scrollbar-width: thin; padding-bottom: 6px; }
    .rail.is-carousel::-webkit-scrollbar { display: block; height: 6px; }
}


/* --------------------------------------------------------------------------
   9. Catalog page
   -------------------------------------------------------------------------- */
.catalog-layout { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 28px; align-items: start; }

.filters {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    position: sticky;
    top: calc(var(--header-h) + 12px);
    overflow: hidden;
}
.filters-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 15px 18px; border-bottom: 1px solid var(--border);
    font-weight: 700; color: var(--ink-strong);
}
.filter-group { border-bottom: 1px solid var(--border); padding: 15px 18px; }
.filter-group:last-child { border-bottom: 0; }
.filter-group > h4 { font-family: var(--font-body); font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); margin-bottom: 11px; }
.filter-list { display: grid; gap: 9px; }
.filter-list a, .filter-option {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-size: 14px; color: var(--ink);
}
.filter-list a:hover { color: var(--brand-dark); }
.filter-list a.is-active { color: var(--brand-dark); font-weight: 700; }
.filter-list .count { font-size: 12px; color: var(--ink-soft); }
.filter-sub { padding-left: 14px; display: grid; gap: 8px; margin-top: 8px; border-left: 2px solid var(--border); }
.price-inputs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.price-inputs .field { padding: 9px 11px; font-size: 14px; }

.toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    flex-wrap: wrap;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 20px;
}
.toolbar-count { font-size: 14px; color: var(--ink-muted); }
.toolbar-count strong { color: var(--ink-strong); }
.toolbar-sort { display: flex; align-items: center; gap: 10px; }
.toolbar-sort select { width: auto; min-width: 190px; padding-top: 8px; padding-bottom: 8px; }
.filters-toggle { display: none; }

.active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }

.pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 34px; flex-wrap: wrap; }
.pagination a, .pagination span {
    min-width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    color: var(--ink);
    font-size: 14px; font-weight: 600;
    background: var(--surface);
}
.pagination a:hover { border-color: var(--brand); color: var(--brand-dark); }
.pagination .is-current { background: var(--brand); border-color: var(--brand); color: #fff; }
.pagination .is-disabled { color: var(--ink-soft); background: var(--surface-alt); border-color: var(--border); }
.pagination .gap { border: 0; background: none; min-width: 20px; }

/* --------------------------------------------------------------------------
   10. Product page
   -------------------------------------------------------------------------- */
.product-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) 320px; gap: 30px; align-items: start; }

.gallery { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: start; }
.gallery-thumbs { display: grid; gap: 10px; }
.gallery-thumb {
    position: relative;
    border: 2px solid var(--border); border-radius: var(--radius-sm);
    overflow: hidden; cursor: pointer; background: var(--surface-alt); padding: 0;
}
.gallery-thumb::before { content: ""; display: block; padding-top: 100%; }
.gallery-thumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

/* Indicatorul de incarcare al galeriei.

   Apare doar cand fotografia noua intarzie peste 120 ms — vezi shop.js. Poza
   dinainte ramane pe ecran, doar putin stinsa: e mai bine sa vezi ce aveai
   decat un dreptunghi gol, iar schimbarea se face dintr-o data, cand noua
   fotografie e gata de desenat. */
.gallery-loader {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .45);
}
.gallery-loader[hidden] { display: none; }
.gallery-loader__spinner {
    width: 34px; height: 34px; border-radius: 50%;
    border: 3px solid var(--brand-light);
    border-top-color: var(--brand);
    animation: gallery-spin .7s linear infinite;
}
@keyframes gallery-spin { to { transform: rotate(360deg); } }

.gallery-main.is-loading img { opacity: .55; }
.gallery-main img { transition: opacity .18s ease; }

@media (prefers-reduced-motion: reduce) {
    /* Fara rotire pentru cine a cerut mai putina miscare: ramane un disc care
       pulseaza incet, deci tot se vede ca se intampla ceva. */
    .gallery-loader__spinner {
        animation: gallery-pulse 1.2s ease-in-out infinite;
        border-color: var(--brand);
    }
    .gallery-main img { transition: none; }
}
@keyframes gallery-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.gallery-thumb.is-active { border-color: var(--brand); }
.gallery-main {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.gallery-main::before { content: ""; display: block; padding-top: 100%; }
.gallery-main img, .gallery-main .placeholder {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
}
.gallery-flags { position: absolute; top: 14px; left: 14px; display: grid; gap: 7px; justify-items: start; }

.product-title { font-size: 28px; font-size: clamp(24px, 2.6vw, 32px); margin-bottom: 10px; }
.product-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--ink-muted); padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.product-lead { font-size: 15.5px; color: var(--ink-muted); }
.product-desc { font-size: 15px; line-height: 1.75; color: var(--ink); }

.spec-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.spec-list li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px dashed var(--border); font-size: 14px; }
.spec-list li:last-child { border-bottom: 0; }
.spec-list .label { color: var(--ink-muted); }
.spec-list .value { font-weight: 600; color: var(--ink-strong); }

.buybox {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    position: sticky;
    top: calc(var(--header-h) + 12px);
    box-shadow: var(--shadow-sm);
}
.buybox .price { font-size: 30px; }
.buybox-price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.buybox-actions { display: grid; gap: 10px; margin: 16px 0; }
.buybox-perks { display: grid; gap: 11px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 13.5px; }
.perk { display: flex; gap: 11px; align-items: flex-start; color: var(--ink-muted); }
.perk i { color: var(--brand); width: 17px; text-align: center; margin-top: 2px; }
.perk strong { color: var(--ink-strong); display: block; font-size: 13.5px; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 22px; overflow-x: auto; }
.tab {
    padding: 12px 20px; border: 0; background: none; cursor: pointer;
    font: inherit; font-weight: 700; font-size: 14.5px; color: var(--ink-muted);
    border-bottom: 3px solid transparent; white-space: nowrap;
}
.tab-link { display: inline-block; text-decoration: none; }
.tab:hover { color: var(--brand-dark); }
.tab.is-active { color: var(--brand-dark); border-bottom-color: var(--brand); }
.tab-panel[hidden] { display: none; }

/* reviews
   Sectiunea de pe pagina produsului: sumar cu histograma pe care se poate da
   click, chip-uri de filtrare, sortare si carduri. Clasele `.review*` de baza
   sunt folosite si de /cont/recenzii, de aceea cardul din catalog isi adauga
   `.review-card` peste ele in loc sa le rescrie. */
.reviews { background: var(--brand-tint); }
.reviews-hero {
    display: grid; grid-template-columns: 210px minmax(0, 1fr) 260px; gap: 30px;
    align-items: center; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 24px 26px; margin-bottom: 18px;
}
.reviews-score { text-align: center; border-right: 1px solid var(--border); padding-right: 24px; }
.reviews-score__value { font-size: 50px; font-family: var(--font-head); color: var(--ink-strong); line-height: 1; }
.reviews-score__value small { font-size: 19px; color: var(--ink-soft); }
.reviews-score__count { margin: 8px 0 0; font-size: 13px; color: var(--ink-muted); }
.reviews-recommend { margin: 10px 0 0; font-size: 13px; color: var(--success); }
.reviews-recommend i { margin-right: 4px; }
.reviews-recommend strong { color: var(--success); }

.reviews-bars { display: grid; gap: 6px; }
.reviews-bar {
    display: grid; grid-template-columns: 52px minmax(0, 1fr) 34px; gap: 12px; align-items: center;
    font-size: 13px; color: var(--ink-muted); text-decoration: none;
    padding: 4px 8px; border-radius: var(--radius-sm); border: 1px solid transparent;
}
.reviews-bar:hover { background: var(--brand-tint); color: var(--ink-strong); }
.reviews-bar.is-active { background: var(--brand-tint); border-color: var(--brand-light); color: var(--ink-strong); font-weight: 700; }
.reviews-bar.is-empty { opacity: .5; pointer-events: none; }
.reviews-bar__label { white-space: nowrap; }
.reviews-bar__label i { color: var(--star); font-size: 11px; }
.reviews-bar__track { height: 9px; background: var(--surface-alt); border-radius: var(--radius-pill); overflow: hidden; }
.reviews-bar__fill { display: block; height: 100%; background: var(--star); border-radius: var(--radius-pill); }
.reviews-bar__count { text-align: right; }

.reviews-cta { border-left: 1px solid var(--border); padding-left: 24px; }
.reviews-cta__lead { margin: 0 0 12px; font-size: 13.5px; color: var(--ink-muted); }
.reviews-cta__lead i { color: var(--brand); }

.reviews-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    margin-bottom: 14px;
}
.reviews-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.review-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px;
    background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
    font-size: 13px; font-weight: 600; color: var(--ink-muted); text-decoration: none; white-space: nowrap;
}
.review-chip:hover { border-color: var(--brand); color: var(--brand-dark); }
.review-chip i { color: var(--star); font-size: 11px; }
.review-chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.review-chip.is-active i, .review-chip.is-active .review-chip__count { color: #fff; }
.review-chip__count { color: var(--ink-soft); font-weight: 400; }

.reviews-sort { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--ink-muted); }
.reviews-sort__label { white-space: nowrap; }
.reviews-sort .field { width: auto; padding: 8px 12px; font-size: 13px; }

.review-list { display: grid; gap: 12px; }
.review { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--border); }
.review:last-child { border-bottom: 0; }
/* Pe pagina produsului fiecare recenzie e o cartela de sine statatoare, ca sa
   se citeasca una cate una; in cont raman randuri intr-un card comun. */
.review-card {
    background: var(--surface); border: 1px solid var(--border); border-bottom: 1px solid var(--border);
    border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-sm);
}
.review-card[hidden] { display: none; }
.review-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--brand-light); color: var(--brand-dark);
    display: flex; align-items: center; justify-content: center; font-weight: 700;
}
/* Culoarea vine din id, deci acelasi om are mereu aceeasi bulina. */
.review-avatar--1 { background: #E7EDF5; color: #3F5E85; }
.review-avatar--2 { background: var(--success-bg); color: var(--success); }
.review-avatar--3 { background: #FDF0DC; color: #9A6B15; }
.review-avatar--4 { background: var(--info-bg); color: #5A4E86; }
.review-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 5px; }
.review-author { font-weight: 700; color: var(--ink-strong); }
.review-date { font-size: 12.5px; color: var(--ink-soft); }
/* Doar pe cardurile din pagina produsului data pleaca la marginea din dreapta;
   in /cont/recenzii randul ramane cum era. */
.review-card .review-date { margin-left: auto; }
.review-rating { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.review-title { font-weight: 700; margin: 6px 0 4px; color: var(--ink-strong); }
.review-body { color: var(--ink); font-size: 14.5px; margin-top: 6px; }
/* Taierea se face doar cand JavaScript a masurat ca e nevoie, ca sa nu ascunda
   text pe care nimic nu il mai poate desface. */
.review-body.is-clamped {
    display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
.review-more {
    border: 0; background: none; padding: 0; margin-top: 6px; cursor: pointer;
    font: inherit; font-size: 13px; font-weight: 700; color: var(--brand-dark);
}
.review-more:hover { text-decoration: underline; }

.reviews-empty {
    display: flex; align-items: center; gap: 10px; justify-content: center;
    padding: 34px 20px; background: var(--surface); border: 1px dashed var(--border-strong);
    border-radius: var(--radius); color: var(--ink-muted); font-size: 14px;
}
.reviews-empty[hidden] { display: none; }
.reviews-empty i { color: var(--ink-soft); font-size: 18px; }
.reviews-more-wrap { text-align: center; margin-top: 16px; }

.reviews-none {
    text-align: center; padding: 40px 20px; background: var(--surface);
    border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); color: var(--ink-muted);
}
.reviews-none i { font-size: 30px; color: var(--star); margin-bottom: 10px; display: block; }
.reviews-none p { margin: 0 0 6px; }

.review-form { margin-bottom: 18px; }
.review-form.is-collapsed { display: none; }

/* Stelele formularului: radio-uri obisnuite, doar imbracate. Ordinea din DOM
   e 5 → 1, iar `row-reverse` le aseaza 1 → 5 pe ecran — asa poate un hover sa
   aprinda si stelele dinainte, folosind fratii care il urmeaza in DOM. */
.rating-stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.rating-stars input { position: absolute; opacity: 0; width: 0; height: 0; }
.rating-stars label {
    margin: 0; cursor: pointer; font-size: 26px; line-height: 1; color: var(--border-strong);
    transition: color .12s ease, transform .12s ease;
}
.rating-stars input:checked ~ label { color: var(--star); }
/* Cat timp cursorul e pe rand, el da nota afisata: alegerea deja facuta se stinge,
   altfel doua note ar parea aprinse in acelasi timp. */
.rating-stars:hover input:checked ~ label { color: var(--border-strong); }
.rating-stars label:hover, .rating-stars label:hover ~ label { color: var(--star); transform: scale(1.06); }
.rating-stars input:focus-visible + label { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 3px; }

.rating-input { display: flex; flex-wrap: wrap; gap: 8px; }
.rating-input label { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); cursor: pointer; font-weight: 600; font-size: 13.5px; margin: 0; }
.rating-input input { accent-color: var(--brand); }

/* --------------------------------------------------------------------------
   11. Cart & checkout
   -------------------------------------------------------------------------- */
.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 26px; align-items: start; }

.cart-line {
    display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 18px;
    padding: 18px; border-bottom: 1px solid var(--border);
}
.cart-line:last-child { border-bottom: 0; }
.cart-line-img { width: 104px; height: 104px; border-radius: var(--radius); overflow: hidden; background: var(--surface-alt); }
.cart-line-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-line-name { font-weight: 700; color: var(--ink-strong); font-size: 15px; }
.cart-line-meta { font-size: 13px; color: var(--ink-muted); margin-top: 3px; }
.cart-line-controls { display: flex; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.cart-line-total { text-align: right; font-weight: 700; font-size: 17px; color: var(--ink-strong); white-space: nowrap; }
.link-danger { color: var(--ink-soft); font-size: 13px; background: none; border: 0; cursor: pointer; padding: 0; }
.link-danger:hover { color: var(--danger); }

.summary { position: sticky; top: calc(var(--header-h) + 12px); }
.summary-line { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; font-size: 14.5px; color: var(--ink); }
.summary-line .value { font-weight: 600; }
.summary-line.is-discount { color: var(--success); }
.summary-total {
    display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
    padding-top: 14px; margin-top: 10px; border-top: 1px solid var(--border);
}
.summary-total .label { font-weight: 700; font-size: 16px; }
.summary-total .value { font-family: var(--font-head); font-size: 26px; color: var(--brand-dark); font-weight: 700; }

.shipping-progress { margin: 14px 0 4px; }
.shipping-progress .track { height: 7px; background: var(--surface-alt); border-radius: var(--radius-pill); overflow: hidden; }
.shipping-progress .fill { height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-dark)); border-radius: var(--radius-pill); transition: width .3s ease; }
.shipping-progress p { font-size: 13px; margin: 8px 0 0; color: var(--ink-muted); }
/* Pragul atins: bara plina si textul in verde, fara sa fie nevoie de reload. */
.shipping-progress.is-reached .fill { background: var(--success); }
.shipping-progress.is-reached p { color: var(--success); }

/* Raftul "Completeaza comanda" de sub cos. Marginea de sus il desparte clar de
   linia de finalizare, ca sa nu para inca un pas obligatoriu al comenzii. */
.cart-closers { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.cart-closers .section-head { margin-bottom: 18px; }
.cart-closers .eyebrow { color: var(--brand-dark); }

/* Ambalajul cadou la finalizare. Fundalul cald il desparte de campurile
   obligatorii de deasupra: e o optiune, nu inca un lucru de completat. */
.gift-wrap {
    padding: 14px 16px;
    background: var(--surface-alt); border-radius: var(--radius);
    border: 1px solid var(--line);
}
/* Iconita de cadou din capul pasului, in culoarea brandului: pasul asta e
   singurul optional din formular, iar semnul il spune inainte de titlu. */
.checkout-step-head h3 .fa-gift { color: var(--brand); margin-right: 6px; }
.gift-wrap .gift-message { margin: 12px 0 0 28px; }
.gift-wrap .gift-message textarea { resize: vertical; }

.coupon-form { display: flex; gap: 8px; }
.coupon-form .field { flex: 1; text-transform: uppercase; }

.checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 26px; align-items: start; }
.checkout-step { margin-bottom: 22px; }
.checkout-step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.step-number {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--brand); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px; flex: 0 0 auto;
}
.checkout-step-head h3 { margin: 0; font-size: 19px; }

.mini-line { display: flex; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border); }
.mini-line:last-of-type { border-bottom: 0; }
.mini-line img { width: 48px; height: 48px; border-radius: var(--radius-sm); object-fit: cover; background: var(--surface-alt); }
.mini-line .name { font-size: 13.5px; font-weight: 600; color: var(--ink-strong); line-height: 1.35; }
.mini-line .qty-label { font-size: 12.5px; color: var(--ink-soft); }
.mini-line .amount { margin-left: auto; font-weight: 700; font-size: 14px; white-space: nowrap; }

/* order status timeline */
.timeline { display: flex; gap: 0; margin: 22px 0; }
.timeline-step { flex: 1; text-align: center; position: relative; font-size: 12.5px; color: var(--ink-soft); }
.timeline-step::before {
    content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px; background: var(--border);
}
.timeline-step:first-child::before { display: none; }
.timeline-dot {
    width: 32px; height: 32px; margin: 0 auto 8px;
    border-radius: 50%; background: var(--surface); border: 2px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    position: relative; z-index: 1; color: var(--ink-soft);
}
.timeline-step.is-done .timeline-dot { background: var(--brand); border-color: var(--brand); color: #fff; }
.timeline-step.is-done { color: var(--ink-strong); font-weight: 600; }
.timeline-step.is-done::before { background: var(--brand); }
.timeline-step.is-cancelled .timeline-dot { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }

/* --------------------------------------------------------------------------
   12. Account
   -------------------------------------------------------------------------- */
.account-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 26px; align-items: start; }
.account-nav { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.account-nav a {
    display: flex; align-items: center; gap: 11px;
    padding: 13px 18px; color: var(--ink); font-size: 14.5px; font-weight: 600;
    border-bottom: 1px solid var(--border);
}
.account-nav a:last-child { border-bottom: 0; }
.account-nav a i { width: 18px; text-align: center; color: var(--ink-soft); }
.account-nav a:hover { background: var(--brand-tint); color: var(--brand-dark); }
.account-nav a.is-active { background: var(--brand-tint); color: var(--brand-dark); box-shadow: inset 3px 0 0 var(--brand); }
.account-nav a.is-active i { color: var(--brand); }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; }
.stat .value { font-family: var(--font-head); font-size: 28px; color: var(--ink-strong); line-height: 1.1; }
.stat .label { font-size: 13px; color: var(--ink-muted); }

.order-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 16px; }
.order-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    padding: 15px 20px; background: var(--surface-alt); border-bottom: 1px solid var(--border);
}
.order-card-body { padding: 16px 20px; }
.order-ref { font-weight: 700; color: var(--ink-strong); }

.table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.table th {
    text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--ink-soft); font-weight: 700; padding: 10px 12px; border-bottom: 1px solid var(--border);
}
.table td { padding: 13px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table .right { text-align: right; }

/* --------------------------------------------------------------------------
   13. Home
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    background: linear-gradient(135deg, #F7EFEA 0%, #F3E4E8 100%);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
    align-items: center;
    gap: 30px;
    margin-top: 22px;
}
.hero-body { padding: 46px 0 46px 46px; }
.hero .eyebrow { font-family: var(--font-script); font-size: 28px; color: var(--brand); display: block; line-height: 1; }
.hero h1 { font-size: 38px; font-size: clamp(30px, 4vw, 46px); margin: 8px 0 14px; }
.hero p { font-size: 16px; color: var(--ink-muted); max-width: 46ch; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.hero-media { position: relative; }
.hero-media::before { content: ""; display: block; padding-top: 75%; }
.hero-media img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

.usp-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-top: 26px; }
.usp { display: flex; gap: 13px; align-items: center; padding: 18px 20px; background: var(--surface); }
.usp i { font-size: 21px; color: var(--brand); }
.usp strong { display: block; font-size: 14px; color: var(--ink-strong); }
.usp span { font-size: 12.5px; color: var(--ink-muted); }

.category-tile {
    position: relative; display: block; overflow: hidden;
    border-radius: var(--radius-lg); background: var(--surface-alt);
    border: 1px solid var(--border);
}
.category-tile::before { content: ""; display: block; padding-top: 75%; }
.category-tile img {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease;
}
.category-tile:hover img { transform: scale(1.05); }
.category-tile .label {
    position: absolute; right: 0; bottom: 0; left: 0;
    padding: 30px 18px 16px;
    background: linear-gradient(to top, rgba(59, 58, 87, .8), transparent);
    color: #fff; font-family: var(--font-head); font-size: 18px;
}
.category-tile .label small { display: block; font-family: var(--font-body); font-size: 12px; opacity: .85; }
.category-tile-plain {
    display: flex; align-items: center; gap: 12px;
    padding: 18px; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); color: var(--ink-strong); font-weight: 600;
}
.category-tile-plain:hover { border-color: var(--brand); color: var(--brand-dark); }
.category-tile-plain i { color: var(--brand); font-size: 19px; }

.promo-band {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px;
}
.promo {
    padding: 30px; border-radius: var(--radius-lg); color: #fff;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
}
.promo h3 { color: #fff; margin-bottom: 8px; }
.promo p { opacity: .9; margin-bottom: 16px; }
.promo-dark { background: linear-gradient(135deg, var(--ink) 0%, var(--ink-strong) 100%); }

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.newsletter {
    background: var(--surface-alt);
    border-top: 1px solid var(--border);
    padding: 34px 0;
    margin-top: 60px;
}
.newsletter-inner { display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; }
.newsletter h3 { margin: 0 0 4px; }
.newsletter p { margin: 0; color: var(--ink-muted); font-size: 14px; }
.newsletter form { display: flex; gap: 9px; min-width: 320px; flex: 1; max-width: 480px; }

.site-footer { background: var(--ink-strong); color: rgba(255, 255, 255, .74); padding: 46px 0 0; }
.site-footer h4 { color: #fff; font-family: var(--font-body); font-size: 14px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; }
.site-footer a { color: rgba(255, 255, 255, .74); font-size: 14px; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 34px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.footer-brand .logo-mark { color: #fff; }
.footer-contact { display: grid; gap: 9px; font-size: 14px; }
.footer-contact i { color: var(--brand); width: 16px; }
.footer-social { display: flex; gap: 10px; margin-top: 16px; }
.footer-social a {
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    display: flex; align-items: center; justify-content: center;
}
.footer-social a:hover { background: var(--brand); }
/* Randul obligatoriu ANPC/SOL: discret, dar tot un rand de legaturi reale —
   ascunse in text marunt gri, ar rata exact scopul pentru care sunt cerute. */
.footer-authorities {
    margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12);
    display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px;
}
.footer-authorities a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.footer-authorities a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.footer-bottom {
    margin-top: 10px; padding: 18px 0; border-top: 1px solid rgba(255, 255, 255, .12);
    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px;
}
.payment-methods { display: flex; gap: 10px; align-items: center; font-size: 20px; opacity: .8; }

.awb-line {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 16px 0 0; padding: 12px 16px; font-size: 14px;
    background: var(--brand-tint); border: 1px solid var(--brand-light); border-radius: var(--radius);
}
.awb-line i { color: var(--brand-dark); }
.awb-line strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }

/* Bannerul de cookie-uri: sta jos, peste continut, si nu pleaca pana nu se
   alege ceva. Cele doua butoane au aceeasi greutate vizuala — un „respinge"
   mai mic sau mai palid decat „accept" nu e un refuz oferit cu adevarat. */
.cookie-bar {
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 200;
    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    max-width: 900px; margin: 0 auto; padding: 18px 22px;
    background: var(--surface); border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.cookie-bar__text { flex: 1 1 320px; }
.cookie-bar__text strong { display: block; color: var(--ink-strong); font-size: 15px; margin-bottom: 3px; }
.cookie-bar__text p { margin: 0; font-size: 13.5px; color: var(--ink-muted); line-height: 1.55; }
.cookie-bar__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-bar__actions form { margin: 0; }
.cookie-bar__actions .btn { white-space: nowrap; }

@media (max-width: 560px) {
    .cookie-bar { left: 10px; right: 10px; bottom: 10px; padding: 16px; }
    .cookie-bar__actions { width: 100%; }
    .cookie-bar__actions form, .cookie-bar__actions .btn { flex: 1; width: 100%; }
}

/* --------------------------------------------------------------------------
   15. Utilities & responsive
   -------------------------------------------------------------------------- */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (max-width: 1200px) {
    .product-layout { grid-template-columns: minmax(0, 1fr) 320px; }
    .product-layout .product-info { grid-column: 1 / -1; grid-row: 2; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 991px) {
    :root { --header-h: 108px; }
    /* Two rows on small screens so the search box keeps its full width. */
    .header-main {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "brand actions"
            "search search";
        gap: 12px 14px;
    }
    .header-brand { grid-area: brand; }
    .search { grid-area: search; }
    .header-actions { grid-area: actions; justify-self: end; }
    .burger { display: inline-flex; align-items: center; justify-content: center; }
    .site-nav { display: none; }
    .catalog-layout { grid-template-columns: 1fr; }
    .filters {
        position: fixed; top: 0; bottom: 0; left: 0; width: 88vw; max-width: 340px; z-index: 130;
        border-radius: 0; transform: translateX(-100%); transition: transform .25s ease;
        overflow-y: auto; top: 0;
    }
    .filters.is-open { transform: translateX(0); }
    .filters-toggle { display: inline-flex; }
    .cart-layout, .checkout-layout, .account-layout, .product-layout { grid-template-columns: 1fr; }
    /* .filters stays fixed here — it becomes the off-canvas filter panel. */
    .buybox, .summary { position: static; }
    .hero { grid-template-columns: 1fr; }
    .hero-body { padding: 34px 24px; }
    .hero-media { display: none; }
    .reviews-hero { grid-template-columns: 1fr; gap: 18px; }
    .reviews-score { border-right: 0; border-bottom: 1px solid var(--border); padding: 0 0 16px; }
    .reviews-cta { border-left: 0; border-top: 1px solid var(--border); padding: 16px 0 0; }
    .header-action-text { display: none; }
}

@media (max-width: 720px) {
    .grid-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .form-grid { grid-template-columns: 1fr; }
    .gallery { grid-template-columns: 1fr; }
    .gallery-thumbs { grid-auto-flow: column; grid-auto-columns: 66px; overflow-x: auto; }
    .cart-line { grid-template-columns: 78px minmax(0, 1fr); }
    .cart-line-img { width: 78px; height: 78px; }
    .cart-line-total { grid-column: 2; text-align: left; }
    .flashes { left: 12px; right: 12px; top: 72px; max-width: none; }
    .footer-grid { grid-template-columns: 1fr; gap: 26px; }
    .product-body { padding: 12px; }
    .price { font-size: 17px; }
    .section { padding: 30px 0; }
    .newsletter form { min-width: 0; }
    .timeline { font-size: 11px; }
    .reviews-toolbar { align-items: stretch; }
    .reviews-chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
    .reviews-sort { width: 100%; }
    .reviews-sort .field { flex: 1; }
    .review-card { padding: 14px; }
    .review-card .review-date { margin-left: 0; width: 100%; }
}

@media print {
    .topbar, .site-header, .site-nav, .site-footer, .newsletter, .flashes, .btn { display: none !important; }
    body { background: #fff; }
}


/* --- Product video ------------------------------------------------------ */
/* Clipurile produsului, scrise din panou. Facada e o poza a produsului: pana
   la primul click nu pleaca nicio cerere catre YouTube sau Vimeo. */
.video-list { display: grid; gap: 22px; }
.video { margin: 0; }
.video__facade,
.video__player {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    background: #10101a;
}
.video__facade img { width: 100%; height: 100%; object-fit: cover; }
.video__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 26px;
    background: rgba(16, 16, 26, .35);
    transition: background .15s ease;
}
.video__facade:hover .video__play,
.video__facade:focus-visible .video__play { background: rgba(16, 16, 26, .5); }
.video__caption { margin-top: 10px; font-size: 14px; }
.video__desc { display: block; margin-top: 4px; color: var(--muted, #737391); }