/* Aurora skin for the Catalog storefront: product page, listings (category, search, promotions, new, brand), /categorii,
   brands, and the catalog page-builder blocks (category tiles, brand logos, product grid, search).
   The theme overrides in templates/modules/catalog do not load modules/Catalog/assets/css/catalog.css; the blocks still do
   (inline, after this file), so block rules below are scoped one class deeper than catalog.css. Tokens: tokens.css. */
:root { --cat-brand: var(--c-brand); --cat-accent: var(--c-action); --cat-bg: var(--c-bg); --cat-surface: var(--c-surface); --cat-text: var(--c-text); --cat-muted: var(--c-muted); --cat-border: var(--c-border); --cat-danger: var(--c-sale); --cat-success: var(--c-success); --cat-radius: var(--radius); --cat-font: var(--font-body); }

/* ---------- Page frame and headers ---------- */
.cat-wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); padding-bottom: clamp(3rem, 6vw, 5rem); }
.cf-main .cat-wrap { padding-inline: 0; }
.cat-wrap > .breadcrumbs { padding-top: 1.1rem; }
.ch-head { margin: .75rem 0 clamp(1.5rem, 3vw, 2.25rem); }
.ch-head h1 { margin: 0 0 .4rem; }
.ch-lead { margin: 0; color: var(--c-muted); font-size: 1.05rem; max-width: 75ch; }
.ch-empty { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; padding: clamp(2.5rem, 6vw, 4rem) 1.25rem; border-radius: var(--radius-lg); background: var(--c-surface); color: var(--c-muted); }
.ch-empty p { margin: 0; max-width: 48ch; }
.ch-empty-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--c-bg); color: var(--c-muted); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ch-empty-icon .icon { width: 1.75rem; height: 1.75rem; }

/* Category / brand header: text beside a photo, on a soft surface */
.ch-hero { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 1rem; margin: .75rem 0 1.75rem; background: var(--c-surface); border-radius: var(--radius-lg); overflow: hidden; }
.ch-hero-text { padding: clamp(1.25rem, 3.5vw, 2.5rem); min-width: 0; }
.ch-hero h1 { margin: 0 0 .5rem; overflow-wrap: anywhere; }
.ch-intro { max-width: 68ch; font-size: 1.02rem; line-height: 1.6; color: var(--c-text); margin-bottom: .75rem; }
.ch-intro p { margin: 0 0 .5rem; }
.ch-intro > :last-child { margin-bottom: 0; }
.ch-count { margin: 0; color: var(--c-muted); font-weight: 700; font-size: .95rem; }
.ch-count a { font-weight: 700; }
.ch-hero-media { display: none; }
.ch-hero-media img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 640px) {
  .ch-hero.has-image { grid-template-columns: minmax(0, 1fr) minmax(220px, 36%); align-items: stretch; }
  .ch-hero.has-image .ch-hero-text { align-self: center; }
  .ch-hero-media { display: block; min-height: 220px; max-height: 320px; }
}

/* ---------- Image tiles (subcategories, search suggestions) ---------- */
.tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tiles > li { display: flex; min-width: 0; }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 900px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tiles-sm { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.tile { display: flex; flex-direction: column; width: 100%; background: var(--c-bg); border: var(--rule); border-radius: var(--radius); overflow: hidden; color: var(--c-text); transition: box-shadow .2s var(--ease), border-color .2s, transform .2s var(--ease); }
.tile:hover { text-decoration: none; box-shadow: var(--shadow); border-color: var(--c-border-strong); transform: translateY(-2px); }
.tile-media { aspect-ratio: 4 / 3; background: var(--c-surface); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--c-border-strong); }
.tile-media img { width: 100%; height: 100%; object-fit: cover; }
.tile-media .icon { width: 2.25rem; height: 2.25rem; }
.tile-name { padding: .7rem .85rem 0; font-weight: 800; font-size: .98rem; line-height: 1.3; overflow-wrap: anywhere; }
.tile-name:last-child { padding-bottom: .8rem; }
.tile-count { padding: .15rem .85rem .75rem; color: var(--c-muted); font-size: .85rem; }
.tile:hover .tile-name { color: var(--c-brand); }
.ch-subs { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
@media (max-width: 359px) { .tile-name { font-size: .9rem; padding-inline: .65rem; } .tile-count { padding-inline: .65rem; } }

/* ---------- /categorii ---------- */
.ci-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .ci-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } }
@media (min-width: 1024px) { .ci-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ci-card { display: flex; flex-direction: column; background: var(--c-bg); border: var(--rule); border-radius: var(--radius); overflow: hidden; scroll-margin-top: calc(var(--header-h) + 1rem); min-width: 0; }
.ci-media { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; background: var(--c-surface); overflow: hidden; color: var(--c-border-strong); }
.ci-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); }
.ci-media .icon { width: 3rem; height: 3rem; }
.ci-card:hover .ci-media img { transform: scale(1.03); }
.ci-body { display: flex; flex-direction: column; flex: 1; padding: 1.1rem 1.25rem 1rem; }
.ci-title { font-size: 1.35rem; margin: 0; }
.ci-title a { color: var(--c-text); }
.ci-title a:hover { color: var(--c-brand); text-decoration: none; }
.ci-count { margin: .15rem 0 .75rem; color: var(--c-muted); font-size: .92rem; font-weight: 600; }
.ci-subs { list-style: none; margin: 0 0 .25rem; padding: 0; }
.ci-subs li + li { border-top: var(--rule); }
.ci-subs a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; color: var(--c-text); font-weight: 600; }
.ci-subs a:hover { color: var(--c-brand); text-decoration: none; }
.ci-sub-count { color: var(--c-muted); font-weight: 600; font-size: .88rem; font-variant-numeric: tabular-nums; }
.ci-desc { color: var(--c-muted); font-size: .95rem; margin: 0 0 .5rem; }
.ci-more { margin-top: auto; display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; font-weight: 800; align-self: flex-start; }

/* ---------- Listing: filter column + results ---------- */
.lst { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) { .lst.has-sidebar { grid-template-columns: 264px minmax(0, 1fr); gap: 2.25rem; } }
.lst-results { min-width: 0; }
.lst-backdrop, .lst-close, .lst-panel-foot { display: none; }
.lst-panel-head { display: flex; align-items: center; gap: .75rem; padding-bottom: .5rem; }
.lst-panel-head h2 { font-size: 1.25rem; margin: 0; }
.lst-reset { margin-left: auto; font-weight: 700; font-size: .92rem; display: inline-flex; align-items: center; min-height: 44px; }
.lst-group { border-top: var(--rule); }
.lst-group > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: .5rem; min-height: 52px; font-weight: 800; font-size: 1rem; }
.lst-group > summary::-webkit-details-marker { display: none; }
.lst-group > summary .icon { color: var(--c-muted); transition: transform .2s; }
.lst-group[open] > summary .icon { transform: rotate(180deg); }
.lst-group[open] { padding-bottom: .6rem; }
.lst-option { display: flex; align-items: center; gap: .7rem; min-height: 44px; color: var(--c-text); font-size: .96rem; border-radius: var(--radius-sm); }
.lst-option:hover { text-decoration: none; color: var(--c-brand); }
.lst-box { width: 22px; height: 22px; flex: none; border: 2px solid var(--c-border-strong); border-radius: 6px; background: var(--c-bg); color: transparent; display: inline-flex; align-items: center; justify-content: center; transition: background-color .15s, border-color .15s; }
.lst-box .icon { width: 14px; height: 14px; stroke-width: 3.2; }
.lst-option:hover .lst-box { border-color: var(--c-brand); }
.lst-option.active .lst-box { background: var(--c-brand); border-color: var(--c-brand); color: var(--c-brand-ink); }
.lst-option.active { font-weight: 700; }
.lst-option-label { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.3; }
.lst-option-count { color: var(--c-muted); font-size: .86rem; font-variant-numeric: tabular-nums; }
.lst-price { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: .4rem; padding-top: .15rem; }
.lst-price label { display: flex; flex-direction: column; gap: .25rem; font-size: .82rem; font-weight: 600; color: var(--c-muted); min-width: 0; }
.lst-price input { min-height: 44px !important; padding: .4rem .6rem !important; }
.lst-price-sep { padding-bottom: .7rem; color: var(--c-muted); }
.lst-price-hint { grid-column: 1 / -1; margin: 0; font-size: .85rem; color: var(--c-muted); }
.lst-price .btn { grid-column: 1 / -1; min-height: 44px; }
@media (max-width: 1023px) {
  .lst-filters { position: fixed; inset: 0; z-index: var(--z-drawer); visibility: hidden; pointer-events: none; transition: visibility 0s linear .3s; }
  .lst-filters.open { visibility: visible; pointer-events: auto; transition: none; }
  .lst-backdrop { display: block; position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; margin: 0; background: rgba(31, 35, 40, .5); opacity: 0; transition: opacity .25s; cursor: pointer; }
  .lst-filters.open .lst-backdrop { opacity: 1; }
  .lst-panel { position: absolute; left: 0; top: 0; bottom: 0; width: min(380px, 90vw); background: var(--c-bg); display: flex; flex-direction: column; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; box-shadow: var(--shadow-lg); transform: translateX(-102%); transition: transform .3s var(--ease); }
  .lst-filters.open .lst-panel { transform: none; }
  .lst-panel-head { padding: .5rem .5rem .5rem 1.1rem; border-bottom: var(--rule); }
  .lst-reset + .lst-close { margin-left: 0; }
  .lst-close { display: inline-flex; margin-left: auto; }
  .lst-panel-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 1.1rem 1rem; }
  .lst-panel-body > .lst-group:first-child { border-top: 0; }
  .lst-panel-foot { display: block; padding: .75rem 1.1rem calc(.75rem + env(safe-area-inset-bottom)); border-top: var(--rule); }
  .lst-panel-foot .btn { min-height: 48px; }
}

.lst-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; padding-bottom: 1rem; margin-bottom: 1.25rem; border-bottom: var(--rule); }
.lst-total { margin: 0; font-size: 1rem; }
.lst-toggle { display: none; }
.lst-toggle-count { min-width: 22px; height: 22px; padding: 0 .4rem; border-radius: var(--radius-pill); background: var(--c-brand); color: var(--c-brand-ink); font-size: .8rem; display: inline-flex; align-items: center; justify-content: center; }
.lst-sort { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.lst-sort label { font-weight: 700; font-size: .95rem; white-space: nowrap; }
.lst-sort select { width: auto; min-height: 44px; padding: .45rem 2.25rem .45rem .85rem; font-size: .95rem; cursor: pointer; }
@media (max-width: 1023px) {
  .lst-toolbar { gap: .6rem; }
  .lst-total { width: 100%; }
  .lst-toggle { display: inline-flex; flex: 1 1 0; min-height: 46px; }
  .lst-sort { flex: 1 1 0; margin-left: 0; min-width: 0; }
  .lst-sort select { width: 100%; min-height: 46px; }
  .lst-sort label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.lst-chips { list-style: none; margin: -.25rem 0 1.25rem; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.lst-chip { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 .85rem 0 1rem; border-radius: var(--radius-pill); background: var(--c-brand-soft); color: var(--c-brand); font-weight: 700; font-size: .92rem; }
.lst-chip:hover { text-decoration: none; background: color-mix(in srgb, var(--c-brand) 16%, var(--c-bg)); }
.lst-chip-reset { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .5rem; font-weight: 700; font-size: .92rem; color: var(--c-text); text-decoration: underline; text-underline-offset: .18em; }
.lst-empty { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; padding: clamp(2.5rem, 6vw, 4rem) 1.25rem; border-radius: var(--radius-lg); background: var(--c-surface); color: var(--c-muted); }
.lst-empty p { margin: 0; max-width: 48ch; font-size: 1.05rem; }
.lst-empty-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--c-bg); display: inline-flex; align-items: center; justify-content: center; }
.lst-empty-icon .icon { width: 1.75rem; height: 1.75rem; }
@media (min-width: 1024px) { .lst.has-sidebar .lst-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }

/* ---------- Search page ---------- */
.srch-form { display: flex; gap: .5rem; max-width: 760px; margin-top: 1.25rem; }
.srch-field { position: relative; flex: 1; min-width: 0; }
.srch-field input { height: 52px !important; min-height: 52px !important; border: 2px solid var(--c-surface-2) !important; border-radius: var(--radius-pill) !important; background: var(--c-surface-2) !important; padding: 0 1.1rem 0 3rem !important; }
.srch-field input:focus { background: var(--c-bg) !important; border-color: var(--c-brand) !important; box-shadow: none; }
.srch-icon { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); color: var(--c-muted); display: inline-flex; pointer-events: none; }
.srch-btn { min-height: 52px; border-radius: var(--radius-pill); padding-inline: 1.6rem; }
@media (max-width: 479px) { .srch-btn { padding-inline: 1.1rem; } .srch-field input { padding-left: 2.6rem !important; } .srch-icon { left: .9rem; } }
.srch-empty { display: flex; gap: 1.25rem; align-items: flex-start; padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--c-surface); border-radius: var(--radius-lg); }
.srch-empty h2 { font-size: 1.4rem; margin: .35rem 0 .4rem; }
.srch-empty p { margin: 0 0 .75rem; color: var(--c-text); max-width: 62ch; }
.srch-tips { margin: 0; padding-left: 1.2rem; color: var(--c-muted); }
.srch-tips li { margin-bottom: .3rem; }
@media (max-width: 559px) { .srch-empty { flex-direction: column; } }
.srch-browse { margin-top: clamp(2rem, 4vw, 3rem); }

/* Autocomplete under the search fields (catalog.js) */
.cat-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: var(--z-dropdown); display: none; background: var(--c-bg); border: var(--rule); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; }
.cat-suggest.open { display: block; }
.cat-suggest a { display: flex; align-items: center; gap: .75rem; padding: .55rem 1rem; min-height: 56px; color: var(--c-text); font-size: .95rem; }
.cat-suggest a:hover, .cat-suggest a.active { background: var(--c-surface); text-decoration: none; }
.cat-suggest img { width: 44px; height: 44px; object-fit: cover; border-radius: var(--radius-sm); background: var(--c-surface); flex: none; }
.cat-suggest .s-name { font-weight: 700; line-height: 1.3; }
.cat-suggest .s-sku { font-size: .82rem; color: var(--c-muted); }
.cat-suggest .s-price { margin-left: auto; font-weight: 800; white-space: nowrap; }
.cat-suggest .s-more { justify-content: center; font-weight: 800; color: var(--c-brand); border-top: var(--rule); }

/* ---------- Brands ---------- */
.br-letters { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 2rem; }
.br-letters a { min-width: 44px; height: 44px; padding: 0 .5rem; border-radius: var(--radius-sm); background: var(--c-surface); color: var(--c-text); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.br-letters a:hover { background: var(--c-brand-soft); color: var(--c-brand); text-decoration: none; }
.br-group { margin-bottom: clamp(2rem, 4vw, 2.75rem); scroll-margin-top: calc(var(--header-h) + 1rem); }
.br-group h2 { font-size: 1.5rem; margin: 0 0 .9rem; }
.br-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.br-grid > li { display: flex; min-width: 0; }
@media (min-width: 640px) { .br-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .br-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .br-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.br-card { width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem; padding: 1.25rem .85rem 1.1rem; background: var(--c-bg); border: var(--rule); border-radius: var(--radius); color: var(--c-text); transition: box-shadow .2s var(--ease), border-color .2s; }
.br-card:hover { text-decoration: none; box-shadow: var(--shadow); border-color: var(--c-border-strong); }
.br-logo { height: 64px; display: flex; align-items: center; justify-content: center; margin-bottom: .35rem; }
.br-logo img { max-height: 56px; max-width: 100%; width: auto; object-fit: contain; }
.br-initial { width: 56px; height: 56px; border-radius: 50%; background: var(--c-brand-soft); color: var(--c-brand); font-weight: 800; font-size: 1.45rem; display: inline-flex; align-items: center; justify-content: center; }
.br-name { font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.br-card:hover .br-name { color: var(--c-brand); }
.br-count { color: var(--c-muted); font-size: .88rem; }
.br-head { grid-template-columns: auto minmax(0, 1fr); gap: 0; }
.br-head-logo { margin-left: clamp(1.25rem, 3.5vw, 2.5rem); width: clamp(72px, 12vw, 136px); aspect-ratio: 4 / 3; border-radius: var(--radius); background: #fff; border: var(--rule); display: flex; align-items: center; justify-content: center; padding: .6rem; }
.br-head-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
@media (max-width: 479px) { .br-head { grid-template-columns: minmax(0, 1fr); } .br-head-logo { margin: 1.25rem 0 0 1.25rem; width: 88px; } .br-head .ch-hero-text { padding-top: .75rem; } }

/* ---------- Product page ---------- */
.pdp-main { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); margin-top: .75rem; }
@media (min-width: 900px) { .pdp-main { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; } }
@media (min-width: 1200px) { .pdp-main { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3.5rem; } }
.pdp-gallery { min-width: 0; }
@media (min-width: 900px) { .pdp-gallery { position: sticky; top: calc(var(--header-h) + 1rem); } }
.pdp-stage { position: relative; aspect-ratio: 1; background: var(--c-surface); border-radius: var(--radius); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.pdp-stage img { width: 100%; height: 100%; object-fit: contain; }
.pdp-stage:has(.pdp-noimg) { aspect-ratio: 4 / 3; }
.pdp-noimg { display: flex; flex-direction: column; align-items: center; gap: .6rem; color: var(--c-muted); font-weight: 600; }
.pdp-noimg .icon { width: 4rem; height: 4rem; color: var(--c-border-strong); }
.pdp-badges { position: absolute; top: 1rem; left: 1rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.pdp-badges .badge { font-size: .92rem; padding: .35rem .65rem; }
.pdp-thumbs { display: flex; gap: .6rem; margin-top: .75rem; overflow-x: auto; padding: 3px; scrollbar-width: thin; }
.pdp-thumbs button { flex: none; width: 76px; height: 76px; padding: 0; border: 2px solid transparent; border-radius: var(--radius-sm); background: var(--c-surface); cursor: pointer; overflow: hidden; transition: border-color .15s; }
.pdp-thumbs button:hover { border-color: var(--c-border-strong); }
.pdp-thumbs button.active { border-color: var(--c-brand); }
.pdp-thumbs img { width: 100%; height: 100%; object-fit: cover; }

.pdp-summary { min-width: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.pdp-head { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }
.pdp-brand { font-weight: 800; font-size: 1rem; padding-block: .15rem; }
.pdp-title { font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.25rem); line-height: 1.15; margin: 0; overflow-wrap: anywhere; }
.pdp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.25rem; margin-top: .25rem; color: var(--c-muted); font-size: .92rem; }
.pdp-meta strong { color: var(--c-text); font-weight: 700; }
.pdp-rating { font-size: .92rem; min-height: 32px; }
.pdp-rating .stars .icon { width: 1.1rem; height: 1.1rem; }
.pdp-rating:hover { text-decoration: none; }
.pdp-rating:hover span:last-child { text-decoration: underline; }
.pdp-rating > span:last-child { color: var(--c-link); font-weight: 600; }
.pdp-rating-none { font-weight: 600; }
.pdp-short { font-size: 1.05rem; line-height: 1.6; max-width: 62ch; }
.pdp-short p { margin: 0 0 .5rem; }
.pdp-short > :last-child { margin-bottom: 0; }
.pdp-plate .plate-head span:first-child { white-space: normal; }
.pdp-plate .plate-head a { font-weight: 700; font-size: .9rem; white-space: nowrap; display: inline-flex; align-items: center; min-height: 32px; }
.pdp-plate.pc-5 .plate-cell:last-child { grid-column: span 2; }
@media (max-width: 479px) {
  .pdp-plate:not(.pc-1) { --plate-cols: 2 !important; }
  .pdp-plate.pc-odd:not(.pc-1) .plate-cell:last-child { grid-column: 1 / -1; }
}
.pdp-label { font-size: 1rem; font-weight: 800; margin: 0 0 .6rem; padding: 0; }
.pdp-variants { border: 0; margin: 0; padding: 0; min-width: 0; }
.pdp .cat-variant-list { display: flex; flex-direction: column; gap: .5rem; }
.pdp .cat-variant { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .2rem .75rem; align-items: center; min-height: 52px; padding: .65rem .9rem; border: 1px solid var(--c-border-strong); border-radius: var(--radius-sm); cursor: pointer; }
.pdp .cat-variant:hover { border-color: var(--c-brand); }
.pdp .cat-variant.active { border-color: var(--c-brand); background: var(--c-brand-soft); box-shadow: inset 0 0 0 1px var(--c-brand); }
.pdp .cat-variant input { margin: 0; }
.pdp .cat-variant-name { font-weight: 700; }
.pdp .cat-variant-attrs { grid-column: 2; font-size: .85rem; color: var(--c-muted); }
.pdp .cat-variant-price { grid-row: 1 / span 2; grid-column: 3; font-weight: 800; white-space: nowrap; }
.pdp-bundle ul { margin: 0; padding-left: 1.2rem; }

/* Buy box */
.pdp-buy { display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.1rem, 2.5vw, 1.5rem); border: var(--rule); border-radius: var(--radius); background: var(--c-bg); box-shadow: var(--shadow-sm); }
.pdp-pricebar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .5rem 1rem; }
.pdp-price { min-width: 0; }
.pdp-price .price-lg .price-final { font-size: clamp(2rem, 1.6rem + 1.2vw, 2.6rem); line-height: 1.05; }
.pdp-price .price-old { font-size: 1rem; }
.pdp-price .price-alt { font-size: .9rem; margin-top: .3rem; }
.pdp-price .price-hidden { font-size: 1.5rem; }
.pdp-price .cat-price-final { font-size: 2.25rem; font-weight: 800; letter-spacing: -.02em; }
.pdp-deal { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; padding-bottom: .3rem; }
.pdp-deal .badge { font-size: 1rem; padding: .35rem .65rem; }
.pdp-save { color: var(--c-sale); font-weight: 800; font-size: .92rem; }
html[data-vat="net"] .pdp-save { display: none; }
.pdp-vat { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.pdp-vat > span { color: var(--c-muted); font-weight: 600; font-size: .92rem; }
.pdp-vat .vat-switch button { min-height: 40px; }
.pdp-tiers { width: 100%; border-collapse: collapse; font-size: .95rem; background: var(--c-surface); border-radius: var(--radius-sm); overflow: hidden; }
.pdp-tiers caption { text-align: left; font-weight: 800; padding-bottom: .4rem; }
.pdp-tiers td { padding: .5rem .8rem; border-top: 1px solid var(--c-bg); }
.pdp-tiers td:last-child { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.pdp-stock { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .55rem; font-size: 1rem; }
.pdp-stock .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--stock-color, var(--c-muted)); }
.pdp-stock.stock-in_stock .dot { background: var(--c-success-dot); }
.pdp-stock strong { font-weight: 800; color: var(--c-text); }
.pdp-stock.stock-in_stock strong { color: var(--c-success); }
.pdp-stock.stock-out_of_stock strong { color: var(--c-danger); }
.pdp-stock.stock-backorder strong, .pdp-stock.stock-preorder strong, .pdp-stock.stock-on_request strong { color: var(--c-warning); }
.pdp-stock-qty { color: var(--c-muted); font-weight: 600; font-size: .92rem; }
.pdp-delivery { flex-basis: 100%; display: flex; align-items: center; gap: .45rem; color: var(--c-text); font-size: .95rem; padding-left: 1.2rem; }
.pdp-delivery .icon { color: var(--c-muted); }
.pdp-rule { display: flex; align-items: center; gap: .45rem; margin: 0; padding: .55rem .8rem; font-size: .92rem; color: var(--c-warning); background: var(--c-warning-soft); border-radius: var(--radius-sm); }
.pdp-note { margin: 0; color: var(--c-muted); font-size: .95rem; }
.pdp-form { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; align-items: stretch; margin: 0; }
.pdp-qty { display: grid; grid-template-columns: 48px minmax(52px, 64px) 48px; height: 52px; border: 1px solid var(--c-border-strong); border-radius: var(--radius-sm); overflow: hidden; background: var(--c-bg); }
.pdp-qty button { border: 0; background: var(--c-bg); color: var(--c-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.pdp-qty button:hover { background: var(--c-surface); color: var(--c-brand); }
.pdp-qty button:focus-visible { box-shadow: inset var(--focus); border-radius: 0; }
.pdp-qty input { width: 100%; height: 100%; min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; text-align: center; font-weight: 800; font-size: 1.05rem; -moz-appearance: textfield; }
.pdp-qty input:focus { box-shadow: inset var(--focus) !important; }
.pdp-qty input::-webkit-outer-spin-button, .pdp-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pdp-add, .pdp-cta, .pdp-ask { height: 52px; min-height: 52px; padding-block: 0; }
.pdp-add { width: 100%; font-size: 1.08rem; }
.pdp-ask { white-space: normal; text-align: center; }
@media (max-width: 359px) {
  .pdp-form { grid-template-columns: minmax(0, 1fr); }
  .pdp-qty { grid-template-columns: 52px minmax(0, 1fr) 52px; }
  .pdp-add { font-size: 1rem; }
}
.pdp-terms { margin: 0; padding-top: 1rem; border-top: var(--rule); display: flex; flex-direction: column; gap: .7rem; }
.pdp-terms > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .15rem 1rem; align-items: start; }
.pdp-terms dt { display: flex; align-items: center; gap: .55rem; font-weight: 800; font-size: .95rem; }
.pdp-terms dt .icon { color: var(--c-brand); width: 1.15rem; height: 1.15rem; }
.pdp-terms dd { margin: 0; color: var(--c-muted); font-size: .95rem; line-height: 1.45; }
@media (max-width: 479px) { .pdp-terms > div { grid-template-columns: minmax(0, 1fr); } .pdp-terms dd { padding-left: 1.7rem; } }
.pdp-help { display: flex; align-items: center; gap: .8rem; min-height: 56px; padding: .8rem 1rem; border-radius: var(--radius); background: var(--c-brand-soft); color: var(--c-text); font-size: .95rem; line-height: 1.4; }
.pdp-help:hover { text-decoration: none; }
.pdp-help:hover span { text-decoration: underline; text-underline-offset: .18em; }
.pdp-help > .icon { color: var(--c-brand); }
.pdp-help > .icon:first-child { width: 1.4rem; height: 1.4rem; }
.pdp-help span { flex: 1; }
.pdp-share { display: flex; align-items: center; gap: .5rem; color: var(--c-muted); font-size: .92rem; font-weight: 600; }
.pdp-share a { width: 44px; height: 44px; border-radius: 50%; background: var(--c-surface); color: var(--c-text); display: inline-flex; align-items: center; justify-content: center; }
.pdp-share a:hover { color: var(--c-brand); background: var(--c-brand-soft); }

/* Section navigation and details */
.pdp-nav { position: sticky; top: 0; z-index: calc(var(--z-sticky) - 1); background: var(--c-bg); border-bottom: var(--rule); margin-top: clamp(2.5rem, 5vw, 4rem); }
.sticky-header .pdp-nav { top: var(--header-h); }
.pdp-nav-inner { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; }
.pdp-nav-inner::-webkit-scrollbar { display: none; }
.pdp-nav a { display: inline-flex; align-items: center; gap: .4rem; min-height: 52px; padding: 0 1rem; color: var(--c-muted); font-weight: 800; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.pdp-nav a:first-child { padding-left: 0; }
.pdp-nav a:hover { color: var(--c-text); border-bottom-color: var(--c-brand); text-decoration: none; }
.pdp-nav-count { min-width: 22px; height: 22px; padding: 0 .4rem; border-radius: var(--radius-pill); background: var(--c-surface-2); color: var(--c-text); font-size: .8rem; display: inline-flex; align-items: center; justify-content: center; }
.pdp-details { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem 4rem; padding-top: 2rem; }
@media (min-width: 1100px) { .pdp-details { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } .pdp-details.no-desc { grid-template-columns: minmax(0, 880px); } }
.pdp-section { min-width: 0; scroll-margin-top: calc(var(--header-h) + 72px); }
.pdp-section > h2 { font-size: 1.5rem; margin: 0 0 1rem; }
.pdp-prose { max-width: 75ch; font-size: 1.02rem; }
.pdp-prose h2 { font-size: 1.25rem; }
.pdp-prose h3 { font-size: 1.1rem; }
.pdp-prose li::marker { color: var(--c-brand); }
.pdp-spec-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .97rem; border: var(--rule); border-radius: var(--radius); overflow: hidden; }
.pdp-spec-table th, .pdp-spec-table td { text-align: left; vertical-align: top; padding: .75rem 1rem; border-bottom: var(--rule); }
.pdp-spec-table tr:last-child th, .pdp-spec-table tr:last-child td { border-bottom: 0; }
.pdp-spec-table th { width: 45%; color: var(--c-muted); font-weight: 600; background: var(--c-surface); }
.pdp-spec-table td { font-weight: 700; overflow-wrap: anywhere; }
@media (max-width: 479px) { .pdp-spec-table th, .pdp-spec-table td { padding: .65rem .75rem; } }
.pdp-files { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.pdp-file-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.pdp-file-list a { display: flex; align-items: center; gap: .85rem; min-height: 64px; padding: .75rem 1rem; border: var(--rule); border-radius: var(--radius); color: var(--c-text); }
.pdp-file-list a:hover { border-color: var(--c-brand); text-decoration: none; }
.pdp-file-list a > .icon { color: var(--c-brand); }
.pdp-file-text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.pdp-file-text strong { overflow-wrap: anywhere; }
.pdp-file-text small { color: var(--c-muted); }
.pdp-file-icon { width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--c-danger-soft); color: var(--c-danger); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pdp-extra, .pdp-related { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: clamp(2rem, 4vw, 2.5rem); border-top: var(--rule); }
.pdp-related .section-head h2 { font-size: 1.5rem; }

/* Sticky add-to-cart bar on phones */
.pdp-sticky { display: none; }
@media (max-width: 899px) {
  .pdp.has-sticky { padding-bottom: 6rem; }
  .pdp-sticky { display: flex; align-items: center; gap: .75rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky-bar); padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom)); background: var(--c-bg); border-top: var(--rule); box-shadow: 0 -8px 24px -14px rgba(31, 35, 40, .35); }
  .pdp-sticky-info { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
  .pdp-sticky-price { font-size: 1.2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
  .pdp-sticky-name { color: var(--c-muted); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pdp-sticky .btn { flex: none; min-height: 48px; }
  .pdp-page .back-top { bottom: 92px; }
  .pdp-page .toasts { bottom: 84px; }
}
@media (max-width: 359px) { .pdp-sticky .btn { padding-inline: .9rem; font-size: .95rem; } }

/* ---------- Catalog page-builder blocks (home page and CMS pages) ---------- */
.blk > .cat-block { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.blk .blk > .cat-block, .cols .cat-block, .section-grid .cat-block { padding-inline: 0; }
.blk > .cat-block, .cols .cat-block { margin-block: 0; }
.cat-block .cat-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.cat-block .cat-block-head h2 { margin: 0; font-size: clamp(1.4rem, 1.15rem + .9vw, 1.9rem); }
.cat-block .cat-block-head .cat-link { margin-left: auto; display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; font-weight: 800; color: var(--c-link); }

/* Category tiles */
.cat-block-categories .cat-subcats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 0; }
@media (min-width: 640px) { .cat-block-categories .cat-subcats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 1024px) { .cat-block-categories .cat-subcats.cat-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cat-block-categories .cat-subcats.cat-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .cat-block-categories .cat-subcats.cat-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.cat-block-categories .cat-subcat { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; border: var(--rule); border-radius: var(--radius); background: var(--c-bg); color: var(--c-text); font-weight: 700; min-width: 0; transition: border-color .2s, box-shadow .2s var(--ease), transform .2s var(--ease); }
.cat-block-categories .cat-subcat:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: var(--c-border-strong); color: var(--c-text); text-decoration: none; }
.cat-block-categories .cat-subcat img, .cat-block-categories .cat-subcat .cat-subcat-icon { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 0; object-fit: cover; background: var(--c-surface); flex: none; }
.cat-block-categories .cat-subcat .cat-subcat-icon { display: flex; align-items: center; justify-content: center; color: var(--c-border-strong); }
.cat-block-categories .cat-subcat > span:not(.cat-subcat-icon) { padding: .8rem 1rem .1rem; font-size: .98rem; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.cat-block-categories .cat-subcat:hover > span:not(.cat-subcat-icon) { color: var(--c-brand); }
.cat-block-categories .cat-subcat small { margin: 0; padding: 0 1rem .85rem; font-size: .85rem; font-weight: 400; color: var(--c-muted); }
.cat-block-categories .cat-subcat small::after { content: " produse"; }
@media (max-width: 359px) { .cat-block-categories .cat-subcat > span:not(.cat-subcat-icon) { font-size: .9rem; padding-inline: .7rem; } .cat-block-categories .cat-subcat small { padding-inline: .7rem; } }

/* Brand logos */
.cat-block-brands .cat-logos { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .cat-block-brands .cat-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 1024px) { .cat-block-brands .cat-logos { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.cat-block-brands .cat-logo { display: flex; align-items: center; justify-content: center; min-width: 0; height: auto; min-height: 84px; padding: 1rem; border: var(--rule); border-radius: var(--radius); background: var(--c-bg); color: var(--c-text); font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; text-align: center; transition: border-color .2s, box-shadow .2s, color .2s; }
.cat-block-brands .cat-logo:hover { border-color: var(--c-brand); color: var(--c-brand); box-shadow: var(--shadow-sm); text-decoration: none; }
.cat-block-brands .cat-logo img { max-height: 44px; max-width: 100%; width: auto; object-fit: contain; }
.cat-block-brands.is-gray .cat-logo img { filter: grayscale(1); opacity: .85; }
.cat-block-brands.is-gray .cat-logo:hover img { filter: none; opacity: 1; }

/* Product grid block: theme cards in the block's column count */
.cat-block-grid .cat-grid { gap: 1rem; }
@media (min-width: 720px) { .cat-block-grid .cat-grid { gap: 1.25rem; } }
@media (min-width: 1100px) { .cat-block-grid .cat-grid { gap: 1.5rem; } }

/* Search block */
.cat-block-search h2 { margin: 0 0 .75rem; }
.cat-block-search .cat-search-form { display: flex; gap: .5rem; max-width: 760px; position: relative; margin: 0; }
.cat-block-search .cat-search-form input { flex: 1; min-width: 0; min-height: 52px !important; border: 2px solid var(--c-surface-2) !important; border-radius: var(--radius-pill) !important; background: var(--c-surface-2) !important; padding: 0 1.2rem !important; font-size: 1rem; }
.cat-block-search .cat-search-form input:focus { background: var(--c-bg) !important; border-color: var(--c-brand) !important; box-shadow: none; }
.cat-block-search .cat-search-form .cat-btn { min-height: 52px; padding: 0 1.4rem; border-radius: var(--radius-pill); border: 0; background: var(--c-brand); color: var(--c-brand-ink); font-weight: 800; font-size: 1rem; filter: none; }
.cat-block-search .cat-search-form .cat-btn:hover { background: var(--c-brand-hover); }
.cat-block-search-lg .cat-search-form input { min-height: 60px !important; font-size: 1.1rem; }