/** Shopify CDN: Minification failed

Line 8734:5 Unexpected "`"
Line 8780:0 Unexpected "}"

**/
/** Shopify CDN: Minification failed

Line 8720:5 Unexpected "`"
Line 8766:0 Unexpected "}"

**/
/* ==========================================================================
   PASSION — Design System (passionstore.ro)
   Layer custom peste tema Horizon. Toate clasele au prefixul psn-.
   ========================================================================== */

/* VAL 1.1 — 08.08.2026. Paleta închisă prin Design System V1.
   Măsurat live: în cod erau 5 roșuri și 4 verzi declarate sau folosite.
   Rămân 2 roșuri și 1 verde. Nimic nou nu se adaugă; se elimină doar dublurile.
     #a31b20 -> #8e1418   (vișiniul de brand era deja folosit ca roșu de text;
                           #a31b20 era o a treia nuanță, aproape identică)
     #1a7f37 -> #1c6b3a   (verdele live, cu contrast mai bun pe alb)
     #1d7a4c -> #1c6b3a   (token declarat și nefolosit)
     #2ea44f -> eliminat  (capătul unui degrade colorat)
     #e94c54 -> eliminat  (capătul unui degrade colorat)
   Regula de rol: roșu = ACȚIUNE, auriu = PREMIUM, verde = SUCCES/STARE. */
:root {
  --psn-red: #c42026;
  --psn-red-dark: #8e1418;
  --psn-red-soft: rgba(196, 32, 38, 0.08);
  --psn-green: #1c6b3a;
  --psn-green-soft: rgba(28, 107, 58, 0.1);
  --psn-ink: #201619;
  --psn-muted: #6b6168;
  --psn-line: #e7dedb;

  --psn-surface: #f8f1ef;
  --psn-radius: 12px;

  /* 06.08.2026 - cele TREI niveluri de umbra, declarate o singura data.
     Auditul a numarat sase variante distincte in pagina, dintre care una foarte
     grea (0 20px 44px la 30%). Valorile literale din tot fisierul au fost
     inlocuite cu tokenii de mai jos. */
  --psn-shadow-sm: 0 1px 3px rgba(32, 22, 25, 0.08);
  --psn-shadow: 0 6px 20px rgba(32, 22, 25, 0.08);
  --psn-shadow-lg: 0 12px 32px rgba(32, 22, 25, 0.14);
  /* Umbra rosie ramane, dar DOAR sub actiunea principala. */
  --psn-shadow-red: 0 10px 24px rgba(196, 32, 38, 0.24);

  /* O curba, doua durate. Tokenul era declarat in trei locuri, cu DOUA curbe
     diferite (0.2,0,0.4,1 si 0.2,0.7,0.3,1) - de aici cele 16 combinatii
     masurate. */
  --psn-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --psn-dur-rapid: 0.16s;
  --psn-dur-lent: 0.24s;
  --psn-nav-height: 62px;
  --psn-wine: #8e1418;
  --psn-gold: #c9a227;
}

/* --------------------------------------------------------------------------
   1. Butoane conversie — Adaugă în coș / CTA principal
   -------------------------------------------------------------------------- */

.product-form-buttons .button:not(.button--secondary) {
  background-color: var(--psn-red) !important;
  border-color: var(--psn-red) !important;
  color: #fff !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--psn-radius);
  min-height: 48px;
  transition: background-color 0.16s var(--psn-ease), transform 0.16s var(--psn-ease), box-shadow 0.16s var(--psn-ease);
}

.product-form-buttons .button:not(.button--secondary):hover {
  background-color: var(--psn-red-dark) !important;
  border-color: var(--psn-red-dark) !important;
  transform: translateY(-1px);
  box-shadow: var(--psn-shadow-red);
}

.product-form-buttons button[name='add'][disabled] {
  background-color: #e5e2df !important;
  border-color: #e5e2df !important;
  color: var(--psn-muted) !important;
  box-shadow: none;
}

/* Buton „Anunță-mă când revine în stoc" */
.psn-notify-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  border: 1.5px solid var(--psn-red);
  border-radius: var(--psn-radius);
  background: var(--psn-red-soft);
  color: var(--psn-red);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.16s var(--psn-ease);
}

.psn-notify-btn:hover {
  background: rgba(196, 32, 38, 0.14);
}

/* --------------------------------------------------------------------------
   2. Bară progres transport gratuit (299 lei) — cart drawer
   -------------------------------------------------------------------------- */

.psn-fs-bar {
  padding: 12px var(--cart-drawer-padding, 20px) 8px;
}

.psn-fs-bar__label {
  margin: 0 0 8px;
  font-size: 0.875rem;
  line-height: 1.25;
  color: var(--psn-ink);
}

.psn-fs-bar__label strong {
  color: var(--psn-red);
}

.psn-fs-bar__label.is-success {
  color: var(--psn-green);
}

.psn-fs-bar__label.is-success strong {
  color: var(--psn-green);
}

.psn-fs-bar__track {
  height: 8px;
  border-radius: 999px;
  background: #efe6e2;
  overflow: hidden;
}

.psn-fs-bar__fill {
  height: 100%;
  border-radius: inherit;
  /* VAL 1.1 — 08.08.2026: degradeurile colorate sunt interzise de capitolul 18.
     Culoare plată, aceeași cu tokenul. */
  background: var(--psn-red);
  transition: width 0.24s var(--psn-ease);
}

.psn-fs-bar__fill.is-success {
  background: var(--psn-green);
}

/* --------------------------------------------------------------------------
   3. Upsell marquee în cart drawer (defilare lentă, infinită)
   -------------------------------------------------------------------------- */

.psn-upsell {
  padding: 12px 0 4px;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.psn-upsell__title {
  margin: 0 0 12px;
  padding-inline: var(--cart-drawer-padding, 20px);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--psn-muted);
}

.psn-upsell__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.psn-upsell__row {
  --psn-upsell-gap: 12px;

  display: flex;
  gap: var(--psn-upsell-gap);
  width: max-content;
  /* 04.08.2026: durata NU mai e fixă — vine din snippet, prin
     `--psn-upsell-duration`, calculată din numărul de produse. Banda se
     lungește cu fiecare produs nou, deci o durată fixă însemna viteză tot mai
     mare: 109 px/s la 8 produse, 150 px/s la 11 (măsurat). Acum rămâne
     ~87 px/s indiferent de catalog. Cele 38s rămân doar ca rezervă, dacă
     variabila lipsește dintr-un motiv oarecare. */
  animation: psn-marquee var(--psn-upsell-duration, 38s) linear infinite;
}

/* 01.09.2026: clonă strict vizuală a benzii (aria-hidden + inert în Liquid),
   necesară doar ca bucla translateX(-50%) să fie continuă. display:contents
   scoate wrapper-ul din arborele de layout, ca flex/gap să se comporte
   identic cu situația în care cardurile ar fi frați direcți în .psn-upsell__row. */
.psn-upsell__row-clone {
  display: contents;
}

.psn-upsell__viewport:hover .psn-upsell__row,
.psn-upsell__viewport:focus-within .psn-upsell__row {
  animation-play-state: paused;
}

/* 11.08.2026: bucla nu se închidea exact. Banda are 4 copii ale
   setului, iar animația parcurge jumătate din ea (2 copii). Dar
   `gap` se pune doar ÎNTRE carduri, nu și după ultimul: lățimea
   totală e 4*S + (4n-1)*gol, deci jumătate din ea e cu o JUMĂTATE
   DE GOL mai puțin decât două copii întregi (2*S + 2n*gol).
   Rezultatul era un salt de 6px la fiecare ciclu — mic, dar real.
   Compensarea `- gol/2` îl elimină. Aceeași corecție ca la banda
   de pe pagina de start (@keyframes psn-raft-marquee).
   Valabil pentru orice lățime de card: S se simplifică. */
@keyframes psn-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-50% - (var(--psn-upsell-gap, 12px) / 2)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .psn-upsell__row {
    animation: none;
    overflow-x: auto;
    width: auto;
  }
}

.psn-upsell__card {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 12px;
  width: 250px;
  padding: 8px 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--psn-radius);
  background: #fff;
}

.psn-upsell__card img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 8px;
  background: var(--psn-surface);
}

.psn-upsell__info {
  min-width: 0;
}

.psn-upsell__name {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--psn-ink);
  text-decoration: none;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.psn-upsell__price {
  font-size: 0.75rem;
  color: var(--psn-muted);
}

/* CORECTAT 28.08.2026: cerut de Cristian — bulinele roșii pline erau prea
   dominante vizual în banda „Completează comanda". Acum: fundal aproape alb
   (--psn-red-soft, deja folosit în design system pentru accente discrete),
   contur roșu PASSION, semn „+” roșu; la hover/tap se inversează (fundal
   roșu, semn alb) — feedback-ul de interacțiune rămâne clar. Mărime 44×44,
   cerută explicit ca țintă de atingere; era 34×34. */
.psn-upsell__add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--psn-red);
  border-radius: 50%;
  background: var(--psn-red-soft);
  color: var(--psn-red);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.16s var(--psn-ease), color 0.16s var(--psn-ease), transform 0.16s var(--psn-ease);
}

.psn-upsell__add:hover,
.psn-upsell__add:focus-visible {
  background: var(--psn-red);
  color: #fff;
  transform: scale(1.06);
}

.psn-upsell__add[disabled] {
  background: #cfccc9;
  border-color: #cfccc9;
  color: #fff;
  cursor: default;
}

/* --------------------------------------------------------------------------
   4. Bară de navigare mobilă (stil aplicație)
   -------------------------------------------------------------------------- */

.psn-bottom-nav {
  display: none;
}

@media screen and (max-width: 749px) {
  body {
    /* 06.08: + var(--psn-cookie-h). Bannerul de consimțământ e fix pe ultimii
       ~143px de ecran; fără spațiul ăsta, capătul paginii rămâne sub el și
       butonul de cumpărare nu poate fi derulat deasupra. Vezi secțiunea 94. */
    padding-bottom: calc(var(--psn-nav-height) + env(safe-area-inset-bottom, 0px) + var(--psn-cookie-h, 0px));
  }

  .psn-bottom-nav {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 60;
    display: grid;
    /* 04.08: era repeat(6, 1fr). `1fr` nu coboară sub min-content, iar sub
       ~360px eticheta „WhatsApp" (56,8px) nu încăpea în a șasea coloană —
       grila ceda și coloanele ieșeau inegale (5×51,8 + 60,8 la 320px).
       minmax(0, 1fr) le ține egale; fontul etichetelor sub 361px e coborât
       în secțiunea etichetelor (după regula de culoare, care altfel câștigă). */
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: stretch;
    height: calc(var(--psn-nav-height) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, 0.09);
    box-shadow: 0 -4px 16px rgba(32, 22, 25, 0.07);
  }

  .psn-bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: none;
    background: none;
    padding: 8px 2px;
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--psn-muted);
    text-decoration: none;
    cursor: pointer;
    position: relative;
    -webkit-tap-highlight-color: transparent;
  }

  .psn-bottom-nav__item svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.7;
  }

  .psn-bottom-nav__item.is-active,
  .psn-bottom-nav__item:active {
    color: var(--psn-red);
  }

  .psn-bottom-nav__item--wa {
    color: #1faa53;
  }

  .psn-cart-badge {
    position: absolute;
    top: 2px;
    right: calc(50% - 20px);
    min-width: 16px;
    height: 16px;
    padding-inline: 4px;
    border-radius: 999px;
    background: var(--psn-red);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
  }

  .psn-cart-badge[data-count='0'] {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   5. Titluri de secțiune cu accent de brand
   -------------------------------------------------------------------------- */

.psn-accent-title {
  position: relative;
  padding-bottom: 12px;
}

.psn-accent-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: var(--psn-red);
}

/* --------------------------------------------------------------------------
   6. Rezultate căutare predictivă — preț + adaugă în coș
   -------------------------------------------------------------------------- */

.psn-search-add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  background: var(--psn-red);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.16s var(--psn-ease);
}

.psn-search-add:hover {
  background: var(--psn-red-dark);
}

/* --------------------------------------------------------------------------
   7. Favorite (wishlist) — inimă pe carduri + fereastră listă
   -------------------------------------------------------------------------- */

.psn-heart {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--psn-ink);
  cursor: pointer;
  box-shadow: var(--psn-shadow-sm);
  transition: transform 0.16s var(--psn-ease), color 0.16s var(--psn-ease);
}

.psn-heart:hover {
  transform: scale(1.08);
}

.psn-heart.is-on {
  color: var(--psn-red);
}

.psn-heart.is-on svg path {
  fill: var(--psn-red);
  stroke: var(--psn-red);
}

.psn-fav-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  background: rgba(32, 22, 25, 0.45);
}

.psn-fav-overlay.is-open {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

@media (min-width: 750px) {
  .psn-fav-overlay.is-open {
    align-items: center;
  }
}

.psn-fav-panel {
  width: 100%;
  max-width: 440px;
  max-height: 75vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}

@media (min-width: 750px) {
  .psn-fav-panel {
    border-radius: 12px;
  }
}

.psn-fav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 1rem;
}

.psn-fav-close {
  border: none;
  background: none;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: var(--psn-muted);
}

.psn-fav-body {
  padding: 12px 16px 16px;
  overflow-y: auto;
}

.psn-fav-empty {
  text-align: center;
  color: var(--psn-muted);
  padding: 24px 8px;
  line-height: 1.5;
}

.psn-fav-item {
  display: grid;
  grid-template-columns: 52px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.psn-fav-item img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 8px;
  background: var(--psn-surface);
}

.psn-fav-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.psn-fav-info a {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--psn-ink);
  text-decoration: none;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.psn-fav-info span {
  font-size: 0.8125rem;
  color: var(--psn-muted);
}

.psn-fav-add {
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  background: var(--psn-red);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.psn-fav-add:hover {
  background: var(--psn-red-dark);
}

.psn-fav-add[disabled] {
  background: #cfccc9;
}

.psn-fav-remove {
  border: none;
  background: none;
  font-size: 22px;
  color: var(--psn-muted);
  cursor: pointer;
  padding: 4px;
}

/* --------------------------------------------------------------------------
   8. Newsletter footer — formular centrat, lățime elegantă
   -------------------------------------------------------------------------- */

.email-signup__form {
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
}

.email-signup-block {
  width: 100%;
}

/* --------------------------------------------------------------------------
   9. Footer 3 coloane — linkuri albe, lizibile pe fundal închis
   -------------------------------------------------------------------------- */

footer .menu-list a,
footer .psn-footer-link {
  color: #e8e6e4;
}

footer .menu-list a:hover {
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   10. Culori globale — selecție, focus, linkuri, inputuri
   -------------------------------------------------------------------------- */

::selection {
  background: var(--psn-red);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--psn-red);
  outline-offset: 2px;
}

.rte a,
.product-description a {
  color: var(--psn-red);
  text-underline-offset: 2px;
}

.rte a:hover,
.product-description a:hover {
  color: var(--psn-red-dark);
}

input:focus-visible,
textarea:focus-visible,
.email-signup__input:focus {
  border-color: var(--psn-red) !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(196, 32, 38, 0.15);
}

/* --------------------------------------------------------------------------
   11. Footer stil ErosVita+ — meniu 2 coloane, butoane plutitoare
   -------------------------------------------------------------------------- */

footer .menu-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 32px;
}

footer .menu-list__list-item {
  margin: 0;
}

footer .menu-list__link {
  color: #d9d3d1;
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  transition: color 0.16s var(--psn-ease);
}

footer .menu-list__link:hover {
  color: var(--psn-gold);
}

@media screen and (max-width: 749px) {
  footer .menu-list {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.psn-floats {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 55;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.psn-float {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--psn-shadow);
  transition: transform 0.16s var(--psn-ease), box-shadow 0.16s var(--psn-ease);
}

.psn-float:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(32, 22, 25, 0.28);
}

.psn-float svg {
  width: 26px;
  height: 26px;
}

.psn-float--wa {
  background: #25d366;
  color: #fff;
}

.psn-float--top {
  background: #ffffff;
  color: var(--psn-ink);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.psn-float--top[hidden] {
  display: none;
}

@media screen and (max-width: 749px) {
  /* pe mobil WhatsApp e deja în bara de jos; lăsăm doar săgeata sus, deasupra barei */
  .psn-float--wa {
    display: none;
  }

  .psn-floats {
    bottom: calc(var(--psn-nav-height) + env(safe-area-inset-bottom, 0px) + 14px);
    right: 14px;
  }

  .psn-float {
    width: 44px;
    height: 44px;
  }
}

/* --------------------------------------------------------------------------
   12. Hero premium — homepage
   -------------------------------------------------------------------------- */

.psn-hero {
  position: relative;
  background: linear-gradient(135deg, #2b1114 0%, #1a0d10 55%, #3a1216 100%);
  color: #fff;
  overflow: hidden;
}

/* Adâncime: halou auriu + pată vișinie difuză în fundal */
.psn-hero::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -8%;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 162, 39, 0.22) 0%, rgba(201, 162, 39, 0) 65%);
  pointer-events: none;
}

.psn-hero::after {
  content: "";
  position: absolute;
  bottom: -40%;
  left: -10%;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196, 32, 38, 0.25) 0%, rgba(196, 32, 38, 0) 65%);
  pointer-events: none;
}

.psn-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--page-width, 1200px);
  margin: 0 auto;
  padding: 56px 24px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: center;
}

.psn-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 8px 12px;
  border: 1px solid rgba(201, 162, 39, 0.55);
  border-radius: 999px;
  color: var(--psn-gold);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.psn-hero__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.psn-hero__title {
  margin: 0;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #fff;
}

.psn-hero__sub {
  margin: 0;
  max-width: 46ch;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

.psn-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

.psn-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 28px;
  border-radius: var(--psn-radius);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: background-color 0.16s var(--psn-ease), transform 0.16s var(--psn-ease), box-shadow 0.16s var(--psn-ease);
}

.psn-hero__btn--primary {
  background: var(--psn-red);
  color: #fff;
}

.psn-hero__btn--primary:hover {
  background: var(--psn-red-dark);
  transform: translateY(-1px);
  box-shadow: var(--psn-shadow-red);
}

.psn-hero__btn--ghost {
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  color: #fff;
}

.psn-hero__btn--ghost:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.psn-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.psn-hero__chips li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.85);
}

.psn-hero__chips li span {
  color: var(--psn-gold);
  font-weight: 700;
}

.psn-hero__media {
  position: relative;
  justify-self: center;
}

.psn-hero__media img {
  display: block;
  width: min(100%, 460px);
  height: auto;
  border-radius: 12px;
  box-shadow: var(--psn-shadow-lg);
}

.psn-hero__flag {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--psn-gold);
  color: #201619;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media screen and (max-width: 749px) {
  .psn-hero__inner {
    grid-template-columns: 1fr;
    padding: 40px 20px;
    gap: 28px;
    text-align: center;
  }

  .psn-hero__badge,
  .psn-hero__ctas {
    justify-content: center;
  }

  .psn-hero__badge {
    margin: 0 auto;
  }

  .psn-hero__chips {
    justify-content: center;
  }

  .psn-hero__sub {
    margin: 0 auto;
  }

  .psn-hero__btn {
    flex: 1 1 auto;
  }
}

/* --------------------------------------------------------------------------
   13. Categorii — homepage
   -------------------------------------------------------------------------- */

.psn-cats {
  background: var(--psn-surface);
  border-bottom: 1px solid var(--psn-line);
}

.psn-cats__inner {
  max-width: var(--page-width, 1200px);
  margin: 0 auto;
  padding: 48px 24px 40px;
}

.psn-cats__head {
  text-align: center;
  margin-bottom: 28px;
}

.psn-cats__head h2 {
  margin: 0 0 8px;
  font-size: clamp(1.5rem, 3vw, 2rem);
}

/* Accent auriu sub titlurile de secțiune psn */
.psn-cats__head h2::after {
  content: "";
  display: block;
  width: 52px;
  height: 3px;
  margin: 12px auto 0;
  border-radius: 2px;
  background: var(--psn-gold);
}

.psn-cats__head p {
  margin: 0;
  color: var(--psn-muted);
}

.psn-cats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.psn-cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 16px 20px;
  border: 1px solid var(--psn-line);
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  color: var(--psn-ink);
  transition: transform 0.16s var(--psn-ease), box-shadow 0.16s var(--psn-ease), border-color 0.16s var(--psn-ease);
}

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

.psn-cat-card__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: var(--psn-surface);
  color: var(--psn-wine);
  overflow: hidden;
}

.psn-cat-card__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.psn-cat-card__title {
  font-weight: 600;
  text-align: center;
  line-height: 1.25;
}

.psn-cat-card__meta {
  font-size: 0.8125rem;
  color: var(--psn-muted);
}

.psn-cat-card--soon .psn-cat-card__meta {
  color: var(--psn-gold);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
}

@media screen and (max-width: 749px) {
  .psn-cats__inner {
    padding: 32px 16px 28px;
  }

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

  .psn-cat-card__visual {
    width: 84px;
    height: 84px;
  }
}

/* --------------------------------------------------------------------------
   14. Meniu principal — aspect profesional (desktop + mega-menu)
   -------------------------------------------------------------------------- */

.header-menu .menu-list__link {
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* Subliniere aurie prin text-decoration nativ — stă mereu exact sub scris
   (varianta veche cu ::after poziționat absolut apărea uneori peste text).
   Pe pagina activă sublinierea rămâne permanent. */
.header-menu .menu-list__link:hover .menu-list__link-title,
.header-menu .menu-list__link--active .menu-list__link-title,
.header-menu .menu-list__link[aria-current="page"] .menu-list__link-title {
  text-decoration: underline;
  text-decoration-color: var(--psn-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
  text-decoration-skip-ink: none;
}

.menu-list__submenu {
  border: 1px solid var(--psn-line);
  border-radius: 0 0 14px 14px;
  box-shadow: var(--psn-shadow-lg);
}

.mega-menu__link {
  border-radius: 8px;
  transition: background 0.16s var(--psn-ease), color 0.16s var(--psn-ease);
}

.mega-menu__link:hover {
  background: var(--psn-surface);
  color: var(--psn-wine);
}

/* Linkurile din submeniul desktop stau pe un singur rând (clasa .wrap-text
   a temei le frângea pe două rânduri în coloane înguste). */
.mega-menu__link .wrap-text {
  white-space: nowrap;
}

/* Culoarea linkurilor de meniu URMEAZĂ rândul pe care stă meniul, nu una fixă.

   Istoric, ca să nu se mai repete: pe 17.07 regula era `color: #fff`, pentru
   banda vișinie de jos; când meniul a fost mutat pe rândul alb de sus, albul
   făcea linkurile invizibile și a fost schimbat în `--psn-ink`. Pe 31.07
   meniul s-a întors pe o bandă colorată și `--psn-ink` a devenit la rândul lui
   greșit — text închis pe roșu.

   A treia oară nu mai fixez o culoare. `--menu-top-level-font-color` e
   variabila pe care tema o calculează din setările rândului (prin
   `contrast-override`): albă pe fundal închis, închisă pe fundal deschis.
   `--psn-ink` rămâne doar ca plasă, dacă variabila lipsește.

   Mutarea meniului între rânduri nu mai cere nicio modificare aici. */
.header-menu .menu-list__link {
  color: var(--menu-top-level-font-color, var(--psn-ink));
  font-size: 0.8125rem;
}

/* Banda de beneficii (USP) — stil unitar cu cardurile de categorii */
.psn-usp {
  background: var(--psn-surface);
  border-top: 1px solid var(--psn-line);
  border-bottom: 1px solid var(--psn-line);
}

.psn-usp__inner {
  max-width: var(--page-width, 1200px);
  margin: 0 auto;
  padding: 32px 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.psn-usp__item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.psn-usp__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #fff;
  color: var(--psn-wine);
  border: 1px solid var(--psn-line);
}

.psn-usp__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.psn-usp__text strong {
  font-size: 1rem;
  color: var(--psn-ink);
}

.psn-usp__text span {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--psn-muted);
}

@media screen and (max-width: 749px) {
  .psn-usp__inner {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 24px 20px;
  }

  .psn-usp__icon {
    width: 52px;
    height: 52px;
  }
}

/* Carduri de produs — relief la hover, imagini rotunjite, preț accentuat */
.product-card {
  border-radius: 12px;
  transition: transform 0.16s var(--psn-ease), box-shadow 0.24s var(--psn-ease);
}

.product-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--psn-shadow-lg);
}

.product-card img {
  border-radius: 12px;
}

/* 06.08.2026 — prețul normal nu mai e roșu și nu mai e mai mic decât titlul.
   MĂSURAT înainte: 12px, greutate 700, rgb(196,32,38); titlul de deasupra lui
   16px. Cel mai important număr de pe card era cel mai discret element, iar
   roșul pe un preț normal înseamnă „redus" în convenția oricărui magazin
   online — ori derutează, ori arată a site de discounturi.
   Roșul rămâne EXCLUSIV pe prețurile chiar reduse, lângă cel vechi tăiat.
   `line-height` e obligatoriu aici: containerul `product-price` are presetul
   h6 al temei (12px / 14,4px), iar un font de 16px într-un rând de 14,4px se
   taie la coadă. */
.product-card .price {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--psn-ink);
}

/* Prețul redus: aici roșul chiar comunică ceva. */
.product-card .price__sale .price-item--sale.price {
  color: var(--psn-red);
}

/* Prețul vechi, tăiat: mai mic și șters, ca să nu concureze cu cel real. */
.product-card .compare-at-price {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--psn-muted);
}

/* Etichetă preț pe hero */
.psn-hero__price-flag {
  position: absolute;
  bottom: 14px;
  right: 14px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #fff;
  color: var(--psn-wine);
  font-size: 0.875rem;
  font-weight: 700;
  box-shadow: var(--psn-shadow-lg);
}

/* ============================================================
   16) LOGO — wordmark tipografic PASSION ♥ / STORE
   ============================================================ */
.psn-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  gap: 4px;
  user-select: none;
}

.psn-logo__name {
  display: inline-flex;
  align-items: flex-start;
  font-family: var(--font-heading--family, Inter, sans-serif);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.09em;
  color: var(--psn-ink);
}

.psn-logo__heart {
  width: 10px;
  height: 10px;
  margin-left: 3px;
  margin-top: 1px;
  color: var(--psn-gold);
  transform: rotate(12deg);
  transition: color 0.24s var(--psn-ease), transform 0.24s var(--psn-ease);
}

.header-logo:hover .psn-logo__heart {
  color: var(--psn-red);
  transform: rotate(0deg) scale(1.15);
}

.psn-logo__sub {
  font-family: var(--font-heading--family, Inter, sans-serif);
  font-weight: 600;
  font-size: 0.625rem;
  letter-spacing: 0.6em;
  margin-right: -0.6em;
  padding-left: 2px;
  color: var(--psn-gold);
  text-transform: uppercase;
}

@media screen and (max-width: 749px) {
  .psn-logo__name {
    font-size: 1.25rem;
  }

  .psn-logo__heart {
    width: 8px;
    height: 8px;
  }

  .psn-logo__sub {
    font-size: 0.5rem;
    letter-spacing: 0.52em;
    margin-right: -0.52em;
  }
}

/* Varianta wordmark pentru footer (fundal închis) */
.psn-logo--footer {
  text-decoration: none;
  margin-bottom: 4px;
}

.psn-logo--footer:hover {
  text-decoration: none;
}

.psn-logo--footer .psn-logo__name {
  color: #fff;
  font-size: 1.75rem;
}

.psn-logo--footer .psn-logo__sub {
  font-size: 0.6875rem;
}

/* ============================================================
   17) HOMEPAGE v3 — promo hero + secțiunea Despre (fără imagini)
   ============================================================ */

/* Promo BUNVENIT10 în hero */
.psn-hero__promo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 8px 16px 8px 8px;
  border-radius: 999px;
  border: 1px dashed rgba(201, 162, 39, 0.65);
  background: rgba(201, 162, 39, 0.1);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.875rem;
}

.psn-hero__promo-tag {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--psn-gold);
  color: #201619;
  font-weight: 700;
  font-size: 0.8125rem;
}

.psn-hero__promo strong {
  color: var(--psn-gold);
  letter-spacing: 0.06em;
}

.psn-hero__chips {
  margin-top: 12px;
}

/* Banda USP pe alb (stă între hero închis și categorii pe surface) */
.psn-usp {
  background: #fff;
}

/* Secțiunea Despre — centrată, tipografică */
.psn-about {
  background: var(--psn-surface);
  border-top: 1px solid var(--psn-line);
  border-bottom: 1px solid var(--psn-line);
}

.psn-about__inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 64px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.psn-about__eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--psn-gold);
  /* 31.07: 12 -> 10. Eticheta trebuie sa stea LIPITA de titlu, nu la aceeasi
     distanta ca titlul de text; altfel cele trei niveluri par egale. */
  margin-bottom: 12px;
}

.psn-about__head h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.1;
  color: var(--psn-ink);
  margin: 0 0 8px;
  position: relative;
  padding-bottom: 16px;
}

.psn-about__head h2::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 56px;
  height: 3px;
  border-radius: 2px;
  background: var(--psn-gold);
}

.psn-about__head p {
  font-size: 1rem;
  line-height: 1.6;
  color: #5b4a4e;
  margin: 16px auto 0;
  max-width: 720px;
}

.psn-about__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px; /* 31.07: 22 -> 24 */
  width: 100%;
}

.psn-about__list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 16px;
  background: #fff;
  border: 1px solid var(--psn-line);
  border-radius: 12px;
}

.psn-about__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(142, 20, 24, 0.09);
  color: var(--psn-wine);
  margin-bottom: 4px;
}

.psn-about__item-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--psn-ink);
}

.psn-about__item-text {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--psn-muted);
}

.psn-about__stats {
  display: flex;
  justify-content: center;
  gap: 56px;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--psn-line);
  width: 100%;
  max-width: 640px;
}

.psn-about__stats div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.psn-about__stats strong {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--psn-wine);
  line-height: 1.1;
}

.psn-about__stats span {
  font-size: 0.8125rem;
  color: var(--psn-muted);
}

.psn-about__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 32px;
  padding: 12px 28px;
  border-radius: 999px;
  background: var(--psn-red);
  color: #fff;
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: background 0.16s var(--psn-ease), transform 0.16s var(--psn-ease);
}

.psn-about__cta:hover {
  background: var(--psn-red-dark);
  transform: translateY(-2px);
  color: #fff;
  text-decoration: none;
}

@media screen and (max-width: 749px) {
  .psn-about__inner {
    padding: 40px 20px;
  }

  .psn-about__list {
    grid-template-columns: 1fr;
    gap: 12px; /* 31.07: 12 -> 14 */
  }

  .psn-about__list li {
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
    padding: 16px;
    display: grid;
    grid-template-columns: 40px 1fr;
    column-gap: 12px;
  }

  .psn-about__check {
    grid-row: 1 / 3;
    margin-bottom: 0;
  }

  .psn-about__stats {
    gap: 24px;
    justify-content: space-between;
  }

  .psn-about__cta {
    width: 100%;
  }

  .psn-hero__promo {
    font-size: 0.8125rem;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
    text-align: center;
  }
}

/* ============================================================
   18) Titluri de secțiune unificate (bestsellere + FAQ)
   ============================================================ */
[id$="__product_list_fa6P9H"] h2,
[id$="__psn_faq"] h2 {
  position: relative;
  padding-bottom: 16px;
}

[id$="__product_list_fa6P9H"] h2::after,
[id$="__psn_faq"] h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 56px;
  height: 3px;
  border-radius: 2px;
  background: var(--psn-gold);
}

[id$="__product_list_fa6P9H"] h2::after {
  left: 0;
}

[id$="__psn_faq"] h2::after {
  left: 50%;
  transform: translateX(-50%);
}

/* ==========================================================================
   19. Meniu burger (drawer) — restilizare profesională v2 (16.07)
   ========================================================================== */
/* Butonul hamburger din header */
.header__icon--menu {
  color: var(--psn-ink);
  border-radius: 8px;
  transition: background-color 0.16s var(--psn-ease), color 0.16s var(--psn-ease);
}
.header__icon--menu:hover {
  color: var(--psn-red);
  background: var(--psn-surface);
}

/* Panoul drawer */
#header-component .menu-drawer {
  background: #ffffff;
  padding: 0;
  box-shadow: 0 0 60px rgba(32, 22, 25, 0.16);
}

.menu-drawer__navigation {
  padding: 4px 24px 24px;
}

/* Elemente principale (nivel 1) — font moderat, ținte de atingere confortabile */
.menu-drawer__menu-item--mainlist {
  font-family: var(--font-heading--family);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--psn-ink);
  padding-block: 12px;
  border-bottom: 1px solid #f4efec;
  transition: color 0.16s var(--psn-ease), padding-inline-start 0.16s var(--psn-ease);
}
.menu-drawer__menu-item--mainlist:hover,
.menu-drawer__menu-item--mainlist:focus-visible {
  color: var(--psn-red);
}
.menu-drawer__menu-item--mainlist.menu-drawer__menu-item--active {
  color: var(--psn-red);
}

/* Săgeata de la elementele cu submeniu */
.menu-drawer__menu-item--mainlist .icon-caret,
.menu-drawer__menu-item--mainlist .svg-wrapper {
  color: #c4b8b2;
  transition: color 0.16s var(--psn-ease);
}
.menu-drawer__menu-item--mainlist:hover .icon-caret,
.menu-drawer__menu-item--mainlist:hover .svg-wrapper {
  color: var(--psn-red);
}

/* Elemente copil (nivel 2/3) — ghidaj vertical, indent clar */
html .menu-drawer__list-item--flat .menu-drawer__menu--childlist {
  padding-inline-start: 16px;
}

/* Grupurile de categorii (titlu + subcategorii) trebuie separate clar unele de
   altele — altfel spațiul dintre ultima subcategorie și titlul următor e la fel
   de mic ca spațiul dintre două subcategorii, și grupurile se contopesc vizual. */
.menu-drawer__menu.has-submenu > .menu-drawer__list-item--flat {
  margin-block-end: 28px;
}
.menu-drawer__menu-item--child,
.menu-drawer__menu-item--parent {
  font-family: var(--font-body--family);
  font-size: 0.875rem;
  font-weight: 400;
  color: #5c5257;
  padding-block: 12px;
}
.menu-drawer__menu-item--child:hover,
.menu-drawer__menu-item--child.menu-drawer__menu-item--active,
.menu-drawer__menu-item--parent:hover {
  color: var(--psn-red);
}
.menu-drawer__menu-item--child.menu-drawer__menu-item--active {
  font-weight: 600;
}

/* Zona de linkuri utilitare din josul drawer-ului (cont, contact) */
.menu-drawer__utility-links {
  margin-top: 12px;
  padding: 16px 20px 20px;
  border-top: 1px solid var(--psn-line);
  background: var(--psn-surface);
}
.menu-drawer__utility-links a,
.menu-drawer__utility-links button {
  font-size: 0.9375rem;
  color: #5c5257;
  transition: color 0.16s var(--psn-ease);
}
.menu-drawer__utility-links a:hover,
.menu-drawer__utility-links button:hover {
  color: var(--psn-red);
}

/* Buton de închidere — cerc curat */
.menu-drawer__close-button {
  color: var(--psn-ink);
  border-radius: 50%;
  transition: background-color 0.16s var(--psn-ease), color 0.16s var(--psn-ease);
}
.menu-drawer__close-button:hover {
  background: var(--psn-surface);
  color: var(--psn-red);
}

/* Backdrop mai închis pentru contrast */
.menu-drawer__backdrop {
  background: rgba(32, 22, 25, 0.45);
}

/* Blog + date de contact în josul meniului burger (snippet passion-drawer-info) */
.psn-drawer-info {
  padding: 16px 24px 20px;
  border-top: 1px solid var(--psn-line);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.psn-drawer-info__title {
  font-family: var(--font-heading--family);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--psn-gold);
  margin-bottom: 2px;
}
.psn-drawer-info a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.875rem;
  color: var(--psn-ink);
  text-decoration: none;
  transition: color 0.16s var(--psn-ease);
}
.psn-drawer-info a:hover {
  color: var(--psn-red);
}
.psn-drawer-info svg {
  width: 16px;
  height: 16px;
  color: var(--psn-gold);
  flex: 0 0 auto;
}
.psn-drawer-info__blog {
  font-weight: 600;
}

/* Galeria principală de produs: raport fix 1:1 (setat din templates/product.json,
   unde valoarea trebuie să fie numărul "1", nu cuvântul "square" — tema injectează
   valoarea brut în `--media-preview-ratio`, iar un cuvânt invalidează declarația).
   Tema forțează `cover` pentru orice raport diferit de `adapt`, ceea ce ar decupa
   lateralele. Imaginile produsului includ o infografică cu text pe margini, deci
   decuparea NU e acceptabilă aici — le încadrăm întregi, pe fundal alb.
   Selectorul e restrâns la `.media-gallery__grid`: cardurile de produs stau în
   `.card-gallery` și rămân pe `cover`, unde decuparea taie doar alb și produsul
   umple mai bine dala.
   `!important` e necesar: tema are `.media-gallery--hint :not(.dialog-zoomed-gallery)
   > .product-media-container:not(:only-child) .product-media img { object-fit: cover }`,
   cu specificitate (0,5,1) — imposibil de depășit rezonabil prin selector. */
.media-gallery__grid .product-media__image {
  object-fit: contain !important;
}

/* Bara de navigare roșie dezactivată — ascunde rândul rezidual gol */
#header-component .header__navigation-bar-row {
  display: none !important;
}

/* ==========================================================================
   20. Buton rapid pe carduri — „Adaugă” / „Alege”, pastilă roșie centrată (15.07)
   Același stil pentru ambele butoane (clasa comună .quick-add__button).
   „Adaugă” (1 variantă) adaugă în coș; „Alege” (mai multe variante) duce la produs.
   ========================================================================== */
/* Butonul stă ÎN FLUX, la baza cardului (sub preț), nu peste imagine.
   position:relative + z-index îl țin deasupra link-ului-overlay al cardului;
   !important e necesar: stylesheet-ul compilat al temei (încărcat după acest
   fișier) setează position:absolute; inset:0 pe .quick-add. */
.quick-add {
  position: relative !important;
  inset: auto !important;
  order: 99;
  margin-top: auto;
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 12px 12px;
  pointer-events: none;
}

/* 04.08: prefixul `html` + width:100% sunt REPARAȚIA butonului care ieșea
   8,3px din ecran la 320px. Mecanismul, măsurat pe live: tema (styles.css,
   încărcat DUPĂ acest fișier) pune pe formular `container-type: inline-size`
   + `justify-content: flex-end`. Containment-ul pe axa inline îi face lățimea
   intrinsecă 0, deci componenta se strângea la 0px și era centrată de flexul
   cardului; `flex-end` lipea marginea DREAPTĂ a butonului de acel punct din
   mijloc — butonul atârna în stânga cu toată lățimea lui (pe cardul din
   stânga: -8,3px, în afara ecranului). Regulile de mai jos existau deja, dar
   la specificitate egală (0,2,0) pierdeau la ordinea de încărcare. */
html .quick-add__product-form-component {
  width: 100%;
  height: auto;
}
html .quick-add__product-form-component .shopify-product-form {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  container-type: normal;
}
.quick-add[data-quick-add-button="add"] add-to-cart-component {
  display: block;
}

/* Pastila roșie (identică pentru „Adaugă” și „Alege”), centrată și mereu vizibilă */
.quick-add__button.add-to-cart-button {
  position: static !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: 100%;
  min-width: 0;
  height: 44px;
  padding-inline: 20px;
  opacity: 1 !important;
  scale: 1 !important;
  /* 06.08.2026 — butonul de pe card devine SECUNDAR.
     MĂSURAT înainte: roșu plin + umbră roșie difuză de 24px, identic cu
     butonul principal de pe pagina de produs. Într-o pagină de colecție asta
     însemna cinci pete roșii identice pe rând; când totul strigă, nimic nu se
     aude, iar butonul care chiar contează nu mai are cum să iasă în față.
     Roșul plin rămâne exclusiv pe pagina de produs și în coș.
     Nu se schimbă nici textul, nici poziția, nici zona de atins: rămân 44px
     înălțime, pastilă, aceleași margini interioare. */
  border: 1px solid var(--psn-red) !important;
  border-radius: 999px;
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: var(--psn-red) !important;
  pointer-events: all;
  backdrop-filter: none !important;
  box-shadow: none;
  overflow: visible !important;
  transition: background-color 0.16s var(--psn-ease), color 0.16s var(--psn-ease), transform 0.16s var(--psn-ease);
}
product-card:is(:hover, :focus-within) .quick-add__button.add-to-cart-button {
  opacity: 1 !important;
}
.quick-add__button.add-to-cart-button:hover,
.quick-add__button.add-to-cart-button:focus-visible {
  /* 06.08: din contur în plin. Culoarea vine la intenție, nu din start. */
  background: var(--psn-red) !important;
  background-color: var(--psn-red) !important;
  color: #ffffff !important;
  scale: 1 !important;
}
.quick-add__button.add-to-cart-button:active {
  transform: translateY(1px);
}

/* Desktop cu mouse: butonul rămâne MEREU vizibil (decis 30.07.2026).
   Motivul: spațiul de la baza cardului era oricum rezervat în flux, deci
   varianta „doar la hover" lăsa ~68px de gol vizibil în interiorul conturului
   cardului. Pe mobil/touch era deja mereu vizibil — acum e la fel peste tot. */
@media screen and (min-width: 750px) and (any-hover: hover) {
  .quick-add__button.add-to-cart-button {
    opacity: 1 !important;
    visibility: visible;
    transition: background-color 0.16s var(--psn-ease), transform 0.16s var(--psn-ease);
  }
}

/* Interiorul: fundal transparent, text alb centrat cu iconiță */
.quick-add__button .add-to-cart-text {
  background: transparent !important;
  /* 06.08: era `#ffffff` fix. După ce butonul a devenit secundar (alb cu
     contur roșu), textul alb a rămas alb pe alb — butonul apărea GOL pe
     telefon, unde e mereu vizibil. `inherit` îl face roșu în repaus și alb la
     hover, odată cu fundalul, fără nicio regulă în plus. */
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  height: 100%;
  overflow: visible !important;
}

/* Afișează întotdeauna textul (transformă grid-ul ascuns al temei în text normal) */
.quick-add__button .add-to-cart-text__content {
  display: inline-flex !important;
  grid-template-columns: none !important;
  overflow: visible !important;
}
.quick-add__button .add-to-cart-text__content > span {
  min-width: max-content !important;
}
.quick-add__button .add-to-cart-text__content span span {
  display: inline !important;
  opacity: 1 !important;
  filter: none !important;
  translate: 0 !important;
  padding-right: 0 !important;
  white-space: nowrap;
  font-family: var(--font-body--family), 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  /* 06.08: `inherit` în loc de alb fix — textul urmează butonul, care e alb cu
     contur roșu în repaus și roșu plin la hover. Erau TREI locuri cu alb
     hardcodat pe traseul butonului (eticheta, conținutul ei și iconița); două
     nu se vedeau în măsurătoarea pe elementul-părinte. */
  color: inherit;
}

/* Iconița de coș */
.quick-add__button .add-to-cart-icon {
  width: auto !important;
  height: 19px;
  color: inherit;
}
.quick-add__button .add-to-cart-icon svg {
  width: 18px;
  height: 18px;
}

/* Starea „adăugat” (bifă) rămâne pe roșu */
.quick-add__button[data-added="true"] {
  background: var(--psn-red-dark) !important;
}

@media screen and (max-width: 749px) {
  .quick-add {
    inset: auto 0 10px 0;
  }
  .quick-add__button.add-to-cart-button {
    height: 40px;
    padding-inline: 16px;
  }
  .quick-add__button .add-to-cart-text__content span span {
    font-size: 0.8125rem;
  }
}

/* ==========================================================================
   21. Meniu desktop (inline) — polish după eliminarea barei roșii
   ========================================================================== */
@media screen and (min-width: 750px) {
  #header-component .header-menu .header-menu__link,
  #header-component .header-menu .menu-list__link {
    position: relative;
    transition: color 0.16s var(--psn-ease);
  }
  #header-component .header-menu .header-menu__link:hover,
  #header-component .header-menu .menu-list__link:hover,
  #header-component .header-menu .menu-list__link[aria-expanded="true"] {
    color: var(--psn-red);
  }
  /* Sublinierea aurie se face prin text-decoration nativ (secțiunea 14) —
     vechiul ::after de aici tăia textul pe mijloc (scos 17.07). */
}


/* ==========================================================================
   24. Dropdown compact în meniul desktop (16.07)
   Tema deschidea submeniul ca panou alb pe toată lățimea ecranului, cu
   linkurile înghesuite în stânga și tăiate de clip-path. Îl ancorăm la
   elementul de meniu, ca un dropdown clasic de magazin.
   ========================================================================== */
@media screen and (min-width: 990px) {
  .header-menu .menu-list__list-item {
    position: relative;
  }
  .header-menu .menu-list__list-item:not([slot="overflow"]) > .menu-list__submenu {
    width: max-content !important;
    min-width: 250px;
    max-width: 380px;
    left: 0 !important;
    right: auto !important;
    top: 100% !important;
    clip-path: none !important;
    padding: 0 !important;
    background: #ffffff;
    border: 1px solid var(--psn-line);
    border-radius: 0 0 14px 14px;
    box-shadow: var(--psn-shadow-lg);
    overflow: hidden;
  }
  .header-menu .menu-list__submenu .menu-list__submenu-inner {
    display: block !important;
    padding: 8px 0 !important;
    transform: none !important;
  }
  .header-menu .menu-list__submenu .mega-menu {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .header-menu .menu-list__submenu .mega-menu__grid {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .header-menu .menu-list__submenu .mega-menu__list {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .header-menu .menu-list__submenu .mega-menu__column {
    width: 100% !important;
    max-width: none !important;
  }
  .header-menu .menu-list__submenu .mega-menu__link {
    display: block;
    padding: 12px 20px;
    border-radius: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--psn-ink);
  }
  .header-menu .menu-list__submenu .mega-menu__link:hover {
    background: var(--psn-surface);
    color: var(--psn-red);
  }
}

/* ==========================================================================
   25. Pagina de contact — fidelă modelului aprobat (16.07):
   breadcrumb, două coloane egale, titluri mari pe ambele coloane,
   liste cu iconițe roșii, formular simplu pe alb cu Nume+Email pe un rând
   și buton conturat „TRIMITE →”.
   ========================================================================== */
.psn-contact-wrap {
  max-width: var(--page-width, 1200px);
  margin: 0 auto;
  padding: 48px 24px;
}
.psn-contact__crumbs {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.875rem;
  color: #8b8085;
  margin-bottom: 40px;
}
.psn-contact__crumbs a {
  color: #8b8085;
  text-decoration: none;
  transition: color 0.16s var(--psn-ease);
}
.psn-contact__crumbs a:hover {
  color: var(--psn-red);
}
.psn-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.psn-contact__title,
.psn-contact__form-title {
  font-family: var(--font-heading--family);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--psn-ink);
  margin: 0 0 20px;
}
.psn-contact__form-title {
  font-weight: 600;
}
.psn-contact__intro,
.psn-contact__form-intro {
  color: #4d4449;
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 40px;
}
.psn-contact__form-intro {
  margin-bottom: 24px;
}
.psn-contact__subtitle {
  font-family: var(--font-heading--family);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--psn-ink);
  margin: 0 0 24px;
}
.psn-contact__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.psn-contact__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.psn-contact__list a,
.psn-contact__line {
  display: inline-flex;
  align-items: flex-start;
  gap: 16px;
  color: var(--psn-ink);
  text-decoration: none;
  font-size: 1rem;
  line-height: 1.5;
  transition: color 0.16s var(--psn-ease);
}
.psn-contact__list a:hover {
  color: var(--psn-red);
}
.psn-contact__list svg,
.psn-contact__line svg {
  width: 22px;
  height: 22px;
  color: var(--psn-red);
  flex: 0 0 auto;
  margin-top: 2px;
}
.psn-contact__form .field,
.psn-contact__row {
  margin-bottom: 16px;
}
.psn-contact__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.psn-contact__form input,
.psn-contact__form textarea {
  width: 100%;
  border: 1px solid var(--psn-line);
  border-radius: 8px;
  padding: 16px 16px;
  font-size: 1rem;
  font-family: var(--font-body--family);
  background: #ffffff;
  color: var(--psn-ink);
  transition: border-color 0.16s var(--psn-ease), box-shadow 0.16s var(--psn-ease);
}
.psn-contact__form input::placeholder,
.psn-contact__form textarea::placeholder {
  color: #9a9095;
}
.psn-contact__form input:focus,
.psn-contact__form textarea:focus {
  outline: none;
  border-color: var(--psn-red);
  box-shadow: 0 0 0 3px rgba(196, 32, 38, 0.1);
}
.psn-contact__form textarea {
  min-height: 190px;
  resize: vertical;
}
/* Butonul de trimitere intră în sistem (30.07.2026, faza 4 pasul 1).
   Era singurul element din magazin în Arial cu colțuri de 4px — nu dintr-o
   alegere de design, ci pentru că regula nu declara `font-family`, iar
   browserul pune fontul implicit de formular pe `<button>`. Acum e butonul
   principal al sistemului: Inter, pastilă, 56px, roșu plin, o singură umbră. */
.psn-contact__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 32px;
  margin-top: 8px;
  border: none;
  border-radius: 999px;
  background: var(--psn-red);
  color: #ffffff;
  font-family: var(--font-body--family);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: var(--psn-shadow-red);
  transition: background-color 0.16s var(--psn-ease), box-shadow 0.16s var(--psn-ease), transform 0.16s var(--psn-ease);
}
.psn-contact__submit:hover {
  background: var(--psn-red-dark);
  box-shadow: var(--psn-shadow-red);
}
.psn-contact__note {
  margin: 24px 0 0;
  font-size: 0.875rem;
  color: #8b8085;
  line-height: 1.6;
}
.psn-contact__notice {
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.psn-contact__notice--success {
  background: #eaf6ee;
  border: 1px solid #bfe3cc;
  color: #1d6b3a;
}
.psn-contact__notice--error {
  background: #fdeeee;
  border: 1px solid #f3c5c5;
  color: #9c1f24;
}
@media screen and (max-width: 899px) {
  .psn-contact-wrap {
    padding: 32px 20px;
  }
  .psn-contact__crumbs {
    margin-bottom: 28px;
  }
  .psn-contact {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .psn-contact__cols {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .psn-contact__row {
    grid-template-columns: 1fr;
  }
  .psn-contact__intro {
    margin-bottom: 28px;
  }
}

/* ==========================================================================
   26. Rafinare vizuală generală (16.07) — carduri, blog, articole, goluri
   ========================================================================== */

/* Titlurile produselor pe carduri: maxim 2 rânduri — carduri uniforme,
   fără titluri lungi care împing prețul la niveluri diferite */
.product-card [class*="product-title"] p,
.product-card [class*="product-title"] span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Cardurile de blog: chenar fin, colțuri rotunjite, lift + zoom delicat la hover */
.blog-post-card {
  height: 100%;
  background: #ffffff;
  border: 1px solid var(--psn-line);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.16s var(--psn-ease), box-shadow 0.24s var(--psn-ease);
}
.blog-post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--psn-shadow-lg);
}
.blog-post-card__image-container {
  overflow: hidden;
}
.blog-post-card__image-container img {
  transition: transform 0.24s var(--psn-ease);
}
.blog-post-card:hover .blog-post-card__image-container img {
  transform: scale(1.04);
}
.blog-post-card__content {
  padding: 16px 20px 20px;
}
.blog-post-card__title-link {
  font-weight: 700;
  color: var(--psn-ink);
  transition: color 0.16s var(--psn-ease);
}
.blog-post-card__title-link:hover {
  color: var(--psn-red);
}

/* Corpul articolelor: lățime de citit confortabilă, aer între paragrafe,
   subtitluri cu bara aurie — același limbaj vizual ca restul site-ului */
.blog-post-content.rte {
  max-width: 760px;
  margin-inline: auto;
  line-height: 1.6;
  font-size: 1rem;
}
.blog-post-content.rte h2 {
  position: relative;
  padding-bottom: 12px;
  margin-top: 2.1em;
  margin-bottom: 0.7em;
}
.blog-post-content.rte h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 3px;
  border-radius: 2px;
  background: var(--psn-gold);
}
.blog-post-content.rte a {
  color: var(--psn-red);
  text-underline-offset: 3px;
  text-decoration-color: rgba(196, 32, 38, 0.35);
}
.blog-post-content.rte a:hover {
  text-decoration-color: var(--psn-red);
}
.blog-post-content.rte ul li,
.blog-post-content.rte ol li {
  margin-bottom: 0.55em;
}

/* Colecțiile încă fără produse: mesaj prietenos, centrat și aerisit,
   în locul textului sec implicit */
.main-collection-grid__empty {
  text-align: center;
  padding: 72px 24px;
  font-size: 1.0625rem;
  color: var(--psn-muted);
}
.main-collection-grid__empty::after {
  content: "Produsele din această categorie sosesc în curând — între timp, aruncă o privire peste colecțiile de mai sus.";
  display: block;
  margin-top: 12px;
  font-size: 0.9375rem;
  color: #9a9095;
}




/* ============================================================
   27. Banner de consimtamant cookies — bara compacta jos (21.07.2026)
   PROBLEMA: bannerul nativ Shopify e randat ca dialog centrat jos
   (#shopify-pc__banner.shopify-pc__banner__dialog). Masurat cu Chrome
   headless: 720x222 px pe desktop si 351x409 px pe mobil — pe telefon
   acoperea titlul, pretul si butonul "Adauga in cos" de pe pagina de
   produs, adica exact zona de conversie.
   SOLUTIE: il transformam in bara pe toata latimea, jos, cu inaltime
   mica. NU ascundem niciun buton si nu atingem dialogul de preferinte
   (#shopify-pc__prefs) — doar geometria bannerului.
   ============================================================ */

#shopify-pc__banner.shopify-pc__banner__dialog {
  top: auto !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: 0 -2px 18px rgba(0, 0, 0, .20) !important;
}

#shopify-pc__banner .shopify-pc__banner__wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 24px !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  /* 31.07: 14 -> 11 -> 9px, in doua runde. Bannerul e o caseta legala, nu
     continut: cu cat ocupa mai putin din primul ecran, cu atat mai bine. */
  padding: 8px 24px !important;
  gap: 20px !important;
}

#shopify-pc__banner .shopify-pc__banner__body { flex: 1 1 auto !important; }

/* 31.07, a doua strangere: 15/13px si line-height 1,3/1,45 dadeau 111px pe
   desktop. Textul e impus legal si nu se poate scurta, deci singurul loc de
   lucru e densitatea. */
#shopify-pc__banner .shopify-pc__banner__body h2 {
  font-size: 14px !important;
  line-height: 1.25 !important;
  margin: 0 0 2px !important;
}

#shopify-pc__banner .shopify-pc__banner__body p {
  font-size: 12.5px !important;
  line-height: 1.35 !important;
  margin: 0 !important;
}

#shopify-pc__banner .shopify-pc__banner__btns {
  flex: 0 0 auto !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
}

#shopify-pc__banner .shopify-pc__banner__btns button { white-space: nowrap !important; }

/* Mobil: coloana compacta, butoanele de decizie pe un rand, preferintele dedesubt

   REVIZUIT 31.07.2026 (punctul 5 din lista lui Cristian). Masurat pe 390x844:
   bannerul ocupa 246px, adica 29% din primul ecran. Descompus: 12+12px padding,
   105px textul (h2 + paragraful legal pe 5 randuri), 10px gol, 106px butoanele
   asezate pe doua randuri.
   Textul NU se atinge: e formularea impusa de Shopify pentru consimtamant si
   ascunderea lui (line-clamp, scroll) ar transforma o informatie obligatorie in
   una ascunsa. Singurul spatiu recuperabil e la butoane: trecute de la doua
   randuri la unul singur, cu prima coloana pe latimea ei naturala.
   "Gestionati preferintele" cere ~124px de text; cu padding 10px lateral
   incape in 144px, iar cele doua decizii primesc ~99px fiecare din cei 358
   disponibili. De aceea coloana `auto` e ULTIMA (1fr 1fr auto): butonul lat
   isi ia latimea naturala, restul se imparte egal intre Acceptare si Refuzare.
   Toate trei raman la 36px inaltime, peste pragul de atingere.

   PRAGUL A URCAT DE LA 749 LA 989px (verificarea finala din 31.07): pe tableta
   la 768px, asezarea in rand dadea textului doar ~250px din 768, il rupea pe
   zece randuri si umfla bannerul la 262px, adica 26% din ecran — mai rau decat
   pe telefon. Pe o coloana, textul primeste toata latimea si intra in trei
   randuri. Asezarea in rand ramane doar acolo unde chiar e loc, de la 990px. */
@media (max-width: 989px) {
  #shopify-pc__banner .shopify-pc__banner__wrapper {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #shopify-pc__banner .shopify-pc__banner__body h2 { font-size: 13px !important; margin-block-end: 2px !important; }
  #shopify-pc__banner .shopify-pc__banner__body p { font-size: 11.5px !important; line-height: 1.32 !important; }
  #shopify-pc__banner .shopify-pc__banner__btns {
    display: grid !important;
    grid-template-columns: 1fr 1fr auto !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  #shopify-pc__banner .shopify-pc__banner__btns button {
    min-height: 36px !important;
    font-size: 12px !important;
  }
  /* Ordinea vizuala: deciziile clare primele, preferintele granulare la final.
     `grid-column: auto` anuleaza intinderea pe tot randul din varianta veche. */
  #shopify-pc__banner .shopify-pc__banner__btn-accept { order: 1 !important; }
  #shopify-pc__banner .shopify-pc__banner__btn-decline { order: 2 !important; }
  #shopify-pc__banner .shopify-pc__banner__btn-manage-prefs {
    order: 3 !important;
    grid-column: auto !important;
  }
}
/* Corectie 21.07 (a doua iteratie): pe desktop, containerul de butoane cerea
   1232px din 1280 (butoanele mostenesc width:100% din CSS-ul Shopify), iar
   textul ramanea pe 106px => banner de 496px inaltime. Fortam butoanele la
   latimea lor naturala si dam textului min-width:0 ca sa poata umple restul. */
#shopify-pc__banner .shopify-pc__banner__body {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

#shopify-pc__banner .shopify-pc__banner__btns {
  flex: 0 0 auto !important;
  width: auto !important;
}

#shopify-pc__banner .shopify-pc__banner__btns button {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 8px 16px !important;
}

/* Paddingul lateral de 18px de mai sus e potrivit pe desktop, dar pe telefon,
   cu cele trei butoane pe un rand, mananca latimea textului: "Acceptare" primea
   83px din care 36 erau padding, adica text taiat. Blocul urmator vine DUPA in
   fisier, deci castiga la specificitate egala. */
@media (max-width: 989px) {
  #shopify-pc__banner .shopify-pc__banner__btns button { padding: 8px 12px !important; }
  #shopify-pc__banner .shopify-pc__banner__btns { width: 100% !important; }
  #shopify-pc__banner .shopify-pc__banner__btns button { width: 100% !important; }
}

/* ==========================================================================
   28. CORECȚII DE LAYOUT — audit vizual 28.07.2026
   ========================================================================== */

/* --------------------------------------------------------------------------
   28.1 Bara de anunțuri — fade secvențial, fără suprapunere de text

   Tema pune toate anunțurile în aceeași celulă de grilă (grid-area: stack) și
   comută între ele cu aria-hidden, cu `transition: opacity .5s` pe ambele
   stări. Cum JS-ul schimbă atributul simultan pe slide-ul care iese și pe cel
   care intră, timp de 0,5s ambele texte sunt vizibile unul peste altul
   (măsurat live: opacitate 0,6 peste 0,4) și devin ilizibile.

   Fix: slide-ul care iese dispare în 0,25s, cel care intră pornește abia după.
   Durata totală rămâne 0,5s, deci ritmul barei nu se schimbă.
   Specificitate 0-2-0 / 0-3-0 ca să bată regula temei (0-1-0), care se încarcă
   după acest fișier.
   -------------------------------------------------------------------------- */
.announcement-bar .announcement-bar__slide {
  transition: opacity 0.24s var(--psn-ease), visibility 0.24s var(--psn-ease);
}

.announcement-bar .announcement-bar__slide:not([aria-hidden='true']) {
  transition-delay: 0.24s;
}

/* Respectă preferința de sistem „mișcare redusă”: schimbare instantanee. */
@media (prefers-reduced-motion: reduce) {
  .announcement-bar .announcement-bar__slide,
  .announcement-bar .announcement-bar__slide:not([aria-hidden='true']) {
    transition: none;
    transition-delay: 0s;
  }
}

/* --------------------------------------------------------------------------
   28.2 Margini laterale unificate

   Secțiunile custom de pe prima pagină foloseau 24px pe desktop și 20px pe
   mobil, în timp ce secțiunile native ale temei (produse, FAQ, footer) folosesc
   40px, respectiv 16px. Saltul se vedea la trecerea de la grila de categorii
   la „Cele mai vândute".
   -------------------------------------------------------------------------- */
@media (min-width: 750px) {
  .psn-hero__inner,
  .psn-usp__inner,
  .psn-cats__inner {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (max-width: 749px) {
  .psn-hero__inner,
  .psn-usp__inner,
  .psn-cats__inner,
  .psn-about__inner {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* --------------------------------------------------------------------------
   28.3 Banda de avantaje — conținut aliniat sus

   `align-items: center` centra fiecare coloană pe verticală. Coloana a treia
   („Retur ușor") are descrierea pe un singur rând, deci titlul ei cădea cu
   9,9px sub celelalte două. Aliniate sus, cele trei titluri pornesc de pe
   aceeași linie indiferent de lungimea textului.
   -------------------------------------------------------------------------- */
.psn-usp__inner .psn-usp__item {
  align-items: flex-start;
}

/* --------------------------------------------------------------------------
   28.4 Prețul pe aceeași linie în toate cardurile de produs

   Titlurile au 2 sau 3 rânduri, iar prețul le urmează imediat, deci sărea cu
   22,4px între cardurile aceluiași rând. Butonul era deja fixat la bază
   (secțiunea 20). Acum prețul coboară și el la bază, lipit de buton, iar
   spațiul variabil rămâne între titlu și preț.
   -------------------------------------------------------------------------- */
.product-card .product-card__content product-price {
  margin-top: auto;
}

.product-card .product-card__content quick-add-component.quick-add {
  margin-top: 12px;
}

/* --------------------------------------------------------------------------
   28.5 Galeria paginii de produs — aer între imagini, fără slot orfan

   Distanța era 4px (restul site-ului: 12–24px). Cu 3 imagini pe 2 coloane, a
   treia rămânea singură cu 440px goi lângă ea; acum ultima imagine ocupă
   rândul întreg ori de câte ori ar rămâne singură.
   -------------------------------------------------------------------------- */
@media (min-width: 750px) {
  .media-gallery__grid {
    gap: 12px;
  }

  .media-gallery__grid > li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------------------------------
   28.6 Pagina de produs — echilibru între galerie și blocul de cumpărare

   Raportul era 906/453px (67/33): titlul se rupea pe 4 rânduri, iar butoanele
   de ambalaj intrau pe două rânduri. 57/43 dă ~775/585px.
   -------------------------------------------------------------------------- */
@media (min-width: 750px) {
  .product-information__grid.product-information--media-left {
    grid-template-columns: 57% 43%;
  }
}

/* --------------------------------------------------------------------------
   28.7 Interlinie pentru titlurile care se rup pe mai multe rânduri

   Aveau `line-height` egal cu `font-size` (raport 1,0), deci în română
   căciulile și virgulele de sub Ă/Î/ț atingeau rândul vecin.
   -------------------------------------------------------------------------- */
.psn-retr__warn-title,
.psn-retr__form-title,
.psn-retr__side-title {
  line-height: 1.25;
}

.psn-cats__inner h2 {
  line-height: 1.25;
}

/* Titlul paginii de colecție (bloc de text al temei, `line_height: normal`
   producea exact 1,0 — vizibil la colecțiile cu nume lung pe mobil). */
[id$="__section"] h1 {
  line-height: 1.1;
}

/* --------------------------------------------------------------------------
   28.8 Pagina „Retragere din contract" — aceeași lățime ca restul site-ului

   Avea container de 1200px cu padding 16px (conținut util 1168px), față de
   1360px pe toate celelalte pagini.
   -------------------------------------------------------------------------- */
.psn-retr-wrap {
  max-width: 1440px;
  padding-left: 40px;
  padding-right: 40px;
}

@media (max-width: 749px) {
  .psn-retr-wrap {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* --------------------------------------------------------------------------
   28.9 Reguli care trebuie să învingă stylesheet-ul temei

   `passion-custom.css` se încarcă ÎNAINTEA stylesheet-ului compilat al temei,
   deci la specificitate egală câștigă tema. Regulile de mai jos au nevoie de
   specificitate mai mare sau de !important; fiecare e țintită strict, ca să nu
   afecteze alte pagini.
   -------------------------------------------------------------------------- */

/* Pagina de produs: raportul galerie / bloc de cumpărare era 67/33 (906/453px),
   ceea ce rupea titlul pe 4 rânduri și butoanele de ambalaj pe 2 rânduri. */
@media (min-width: 750px) {
  .product-information__grid.product-information--media-left {
    grid-template-columns: 57% 43% !important;
  }
}

/* Titlul paginii de colecție: tema îi dă `--line-height: 1` din presetul h1,
   deci la nume lungi („Sprayuri pentru întârzierea ejaculării") rândurile se
   ating pe mobil. Setăm și variabila, și valoarea finală. */
[id$="__section"] h1 {
  --line-height: 1.1;
  line-height: 1.15 !important;
}

/* Footer: titlul blocului de meniu („Informații utile") era 32px, iar titlul
   coloanei vecine („Cumperi în siguranță") 24px. Le aducem la aceeași scară. */
[id*="footer"] .menu__heading.h3 {
  font-size: 1.5rem;
}

/* --------------------------------------------------------------------------
   28.10 Cardurile de categorii — eticheta de jos pe aceeași linie

   „ÎN CURÂND" / „5 produse" urmau imediat după titlu, deci pe rândurile unde
   un card are titlul pe două rânduri („Suplimente pentru potență") și vecinul
   pe unul singur („Afrodisiace"), etichetele ieșeau decalate cu un rând.
   Cardurile au deja înălțime egală pe rând, așa că e suficient să împingem
   eticheta la bază.
   -------------------------------------------------------------------------- */
.psn-cats__grid .psn-cat-card__meta {
  margin-top: auto;
  padding-top: 8px;
}

/* --------------------------------------------------------------------------
   28.11 Întrebări frecvente — lățime pe măsura textului

   Acordeonul se întindea pe 1360px, imediat sub secțiunea „Brandul PASSION"
   care are 980px: saltul de lățime între două secțiuni vecine era de 380px,
   iar întrebările (15px) aveau linii foarte lungi. Aducem lista la aceeași
   lățime cu secțiunea de deasupra. Fundalul rămâne pe toată lățimea, pentru
   că e desenat de `.section-background`, un element separat.
   -------------------------------------------------------------------------- */
@media (min-width: 750px) {
  [id$="__psn_faq"] .section {
    max-width: 980px;
    margin-inline: auto;
  }
}


/* ==========================================================================
   29. FAZA 2 — pagina de produs: decizia de cumpărare (28.07.2026)
   ========================================================================== */

/* --------------------------------------------------------------------------
   29.1 Bara fixă de cumpărare, scoasă de sub bara de navigare (mobil)

   Tema are deja `sticky-add-to-cart`, care apare la derulare. Pe mobil era
   însă poziționată la 769,6px cu z-index 7, iar `.psn-bottom-nav` stă la
   782px cu z-index 60 — din 74px de bară de cumpărare rămâneau vizibili 12.
   Funcția exista, dar era practic acoperită de propria noastră bară.
   Acum urcă deasupra ei.
   -------------------------------------------------------------------------- */
@media (max-width: 749px) {
  .sticky-add-to-cart__bar {
    /* 06.08: 62px -> bara de navigare + bannerul de consimțământ (secțiunea 94). */
    bottom: calc(var(--psn-nav-height) + var(--psn-cookie-h, 0px)) !important;
    box-shadow: 0 -6px 18px rgb(32 22 25 / 0.10);
  }
}

/* --------------------------------------------------------------------------
   29.2 Breadcrumb compact pe mobil

   ISTORIC: pe 28.07 ultimul element se afișa trunchiat („…rezis…”) și repeta
   titlul de dedesubt, așa că îl ascundeam pe mobil împreună cu separatorul lui.

   ANULAT pe 31.07. Snippet-ul randează acum o formă scurtă și lizibilă
   („Clasic" în loc de „Prezervative PASSION Clas…"), deci elementul merită
   păstrat — e util și pentru orientare, și pentru SEO. Ascunderea rămăsese
   oricum fără efect asupra textului (regula de la 41.4 pune `display:
   inline-block` pe același element, mai jos în fișier), dar separatorul chiar
   dispărea, iar firul se citea „Acasă › Prezervative Clasic", fără al doilea
   semn. Verificat vizual la 390px.
   -------------------------------------------------------------------------- */
@media (max-width: 749px) {
  .psn-breadcrumbs {
    padding-top: 8px;
    font-size: 0.8125rem;
  }
}

/* --------------------------------------------------------------------------
   29.3 Titlul produsului pe mobil: 32px → 24px

   La 32px, titlurile lungi ale magazinului ocupau 4 rânduri (140px) și
   împingeau prețul și butonul sub pliu.
   -------------------------------------------------------------------------- */
@media (max-width: 749px) {
  .product-information__grid h1 {
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
  }
}

/* --------------------------------------------------------------------------
   29.4 Prețul devine a doua informație ca greutate vizuală

   Era 14px, greutate 400, în culoarea textului obișnuit — identic cu un
   paragraf. Pe carduri, în schimb, prețul era roșu și îngroșat: aceeași
   informație, două tratamente opuse.
   Nu îl facem roșu: roșul rămâne rezervat acțiunii (butonul).
   -------------------------------------------------------------------------- */
.product-details product-price .price,
.product-details product-price .price-list {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--psn-ink, #201619);
}

@media (max-width: 749px) {
  .product-details product-price .price,
  .product-details product-price .price-list {
    font-size: 1.625rem;
  }
}

/* Prețul din bara fixă rămâne la dimensiunea lui. */
.sticky-add-to-cart__bar product-price .price {
  font-size: 1rem !important;
  font-weight: 600 !important;
}

/* --------------------------------------------------------------------------
   29.5 „Adaugă în coș” devine butonul dominant

   Avea 52px și text de 14px, în timp ce butonul Shop Pay de sub el avea
   82,3px — cu 58% mai mare, în violetul altui brand. Ierarhia era inversată
   față de interesul magazinului.
   -------------------------------------------------------------------------- */
.product-details add-to-cart-component .button,
.product-details add-to-cart-component button[type="submit"] {
  min-height: 56px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
}

/* Plata accelerată rămâne disponibilă, dar secundară. */
.product-details .shopify-payment-button__button,
.product-details shop-pay-wallet-button,
.product-details .shopify-payment-button__button--unbranded {
  min-height: 46px !important;
  height: 46px !important;
  font-size: 0.9375rem !important;
}

.product-details .shopify-payment-button {
  opacity: 0.92;
}

/* --------------------------------------------------------------------------
   29.6 Reasigurarea de sub buton

   Trei promisiuni, exact acolo unde apar ezitările: livrare, discreție,
   plată. Informațiile existau deja pe site, dar pe prima pagină și în
   footer — adică nu în momentul deciziei.
   -------------------------------------------------------------------------- */
.psn-reasig {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.psn-reasig li {
  position: relative;
  padding-left: 24px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--psn-ink, #201619);
}

.psn-reasig li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.34em;
  width: 15px;
  height: 9px;
  border-left: 2px solid #8e1418;
  border-bottom: 2px solid #8e1418;
  transform: rotate(-45deg);
}

@media (max-width: 749px) {
  .psn-reasig li {
    font-size: 0.875rem;
  }
}

/* --------------------------------------------------------------------------
   29.7 Corecții după prima verificare live

   Prețul, galeria pe mobil și butonul de plată accelerată nu au răspuns la
   regulile din 29.4–29.5: tema le impune prin variabile setate inline pe
   element (typography-style) sau prin componente proprii, care câștigă la
   specificitate egală, `passion-custom.css` fiind încărcat înaintea temei.
   -------------------------------------------------------------------------- */

/* Prețul — se setează pe elementul rădăcină, ca să moștenească tot ce e în el. */
.product-details product-price,
.product-details product-price .price,
.product-details product-price .price-list {
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color: var(--psn-ink, #201619) !important;
}

@media (max-width: 749px) {
  .product-details product-price,
  .product-details product-price .price,
  .product-details product-price .price-list {
    font-size: 1.625rem !important;
  }
}

/* Bara fixă de cumpărare păstrează dimensiunea ei mică. */
.sticky-add-to-cart__bar product-price,
.sticky-add-to-cart__bar product-price .price {
  font-size: 1rem !important;
  font-weight: 600 !important;
}

/* Galeria pe mobil: 390px (un pătrat cât ecranul) împingea butonul sub pliu.
   330px lăsa produsul perfect lizibil și aducea butonul în primul ecran.

   31.07: 330 -> 280px, cerut explicit („imagine cu aproximativ 15% mai mică").
   AICI e valoarea reală a galeriei pe telefon. Regula are (0,2,0) și bate orice
   `html slideshow-slide.product-media-container` (0,1,2) scris mai jos în
   fișier — am încercat exact asta și nu s-a mișcat un pixel. */
@media (max-width: 749px) {
  .product-information__media media-gallery,
  .product-information__media .media-gallery__grid,
  .product-information__media slideshow-slide,
  .product-information__media .product-media-container {
    max-height: 280px;
  }

  .product-information__media .product-media__image,
  .product-information__media img {
    max-height: 280px;
    object-fit: contain;
  }
}

/* Plata accelerată: rămâne disponibilă, dar nu mai domină CTA-ul propriu. */
.product-details,
.product-details .shopify-payment-button {
  --shopify-accelerated-checkout-button-block-size: 46px;
  --shopify-accelerated-checkout-button-inline-size: 100%;
}

.product-details .shopify-payment-button__button,
.product-details .shopify-payment-button__button--unbranded,
.product-details shop-pay-wallet-button,
.product-details [class*="shopify-payment-button"] button {
  min-height: 46px !important;
  height: 46px !important;
}

/* --------------------------------------------------------------------------
   29.8 Butonul „sus” nu mai acoperă butonul din bara de cumpărare

   După ce bara fixă de cumpărare a urcat deasupra barei de navigare (29.1),
   butonul flotant „înapoi sus” (.psn-float--top, z-index 55) a ajuns exact
   peste butonul „Adaugă în coș” din ea (z-index 7): clicul ajungea la
   butonul de derulare, nu la cel de cumpărare.

   Pe paginile de produs, unde bara de cumpărare există, butonul „sus” se
   ascunde pe mobil — navigarea rămâne asigurată de bara de jos.
   -------------------------------------------------------------------------- */
@media (max-width: 749px) {
  body:has(.sticky-add-to-cart__bar) .psn-float--top,
  body:has(sticky-add-to-cart) .psn-float--top {
    display: none;
  }
}

/* Plasă de siguranță: bara de cumpărare stă deasupra oricărui element
   flotant propriu, dar sub bara de navigare. */
.sticky-add-to-cart__bar {
  z-index: 56;
}


/* ==========================================================================
   30. FAZA 2 — vitrina de categorii și anunțul de extindere
   ========================================================================== */

/* --------------------------------------------------------------------------
   30.1 Rândul „În pregătire”

   Categoriile fără produse nu mai ocupă vitrina (erau 7 din 8 carduri, cu
   „ÎN CURÂND”, ceea ce făcea prima pagină să pară un magazin neterminat).
   Extinderea se anunță acum într-un singur rând discret, sub grilă.
   -------------------------------------------------------------------------- */
.psn-cats__soon {
  margin: 20px 0 0;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgb(32 22 25 / 0.55);
}

.psn-cats__soon::first-letter {
  text-transform: uppercase;
}


/* ==========================================================================
   31. FAZA 2 — sistemul vizual: culori cu roluri, o formă de buton, iconițe
   ========================================================================== */

/* --------------------------------------------------------------------------
   31.1 Culorile primesc roluri

   Site-ul folosea în paralel trei roșuri fără rol definit (#C42026 pe butoane,
   #8E1418 pe iconițe, #1A0D10 pe bara de anunțuri) plus două verzi complet
   străine paletei: tealul implicit Judge.me (#108474) și verdele WhatsApp.

   De acum:
     #8E1418  — culoarea de brand (iconițe, accente, elemente Judge.me)
     #C42026  — EXCLUSIV acțiune (butoane de cumpărare)
     #C9A227  — accent rar (stele, badge-uri de evidențiere)
   -------------------------------------------------------------------------- */
:root,
html {
  /* Judge.me: din teal implicit în paleta magazinului. */
  --jdgm-primary-color: #8e1418;
  --jdgm-secondary-color: rgba(142, 20, 24, 0.08);
  --jdgm-paginate-color: #8e1418;
  --jdgm-reviewer-name-color: #201619;
  --jdgm-write-review-bg-color: #8e1418;
  --jdgm-write-review-text-color: #ffffff;
  /* Stelele rămân aurii — convenția pe care o citește oricine. */
  --jdgm-star-color: #c9a227;
}

.jdgm-write-rev-link,
.jdgm-rev-widg__sort-wrapper .jdgm-sort-dropdown,
.jdgm-paginate__page {
  color: #8e1418 !important;
}

/* --------------------------------------------------------------------------
   31.2 O singură formă pentru butoanele de acțiune

   Erau cinci raze diferite în uz simultan: 10px, 999px, 50%, 8px, 100px.
   Butoanele de cumpărare devin pastile (forma pe care o aveau deja butonul
   rapid de pe carduri și CTA-ul din secțiunea „Brandul PASSION”), iar
   restul rămâne pe 10px. Două forme, cu roluri clare.
   -------------------------------------------------------------------------- */
:root,
html {
  --style-border-radius-buttons-primary: 999px;
  --style-border-radius-buttons-secondary: 999px;
}

.product-details add-to-cart-component .button,
.product-details add-to-cart-component button[type="submit"],
.psn-hero__cta,
.psn-hero__cta--ghost,
.sticky-add-to-cart__button {
  border-radius: 999px !important;
}

/* Butonul Judge.me se aliniază la aceeași formă. */
.jdgm-write-rev-link,
.jdgm-btn {
  border-radius: 999px !important;
}

/* --------------------------------------------------------------------------
   31.3 Iconițele — o singură grosime de contur

   Măsurate: 1px pe iconițele temei, 1,6px în SVG-urile secțiunilor custom,
   1,8px pe inima de favorite. Le aducem pe toate la 1,5px, valoarea pe care
   tema o declară deja în `--icon-stroke-width`.
   -------------------------------------------------------------------------- */
.psn-usp__icon svg path,
.psn-usp__icon svg circle,
.psn-usp__icon svg rect,
.psn-cat-card__visual svg path,
.psn-cat-card__visual svg circle,
.psn-cat-card__visual svg rect,
.psn-about__check svg path,
.psn-heart svg path,
.psn-retr__warn svg path {
  stroke-width: 1.5;
}

/* --------------------------------------------------------------------------
   31.4 Variabilele globale, cu specificitate suficientă

   Declarațiile din 31.1–31.2 puse pe `:root` (specificitate 0-1-0) erau
   suprascrise de aceleași variabile din tema care se încarcă după acest
   fișier. `html:root` urcă specificitatea la 0-1-1, iar `!important` acoperă
   și cazul în care Judge.me își setează culorile inline pe element.
   -------------------------------------------------------------------------- */
html:root {
  /* Butoanele de acțiune: o singură formă, pastilă. */
  --style-border-radius-buttons-primary: 999px !important;
  --style-border-radius-buttons-secondary: 999px !important;

  /* Judge.me intră în paleta magazinului: vișiniu de brand, stele aurii. */
  --jdgm-primary-color: #8e1418 !important;
  --jdgm-secondary-color: rgba(142, 20, 24, 0.08) !important;
  --jdgm-paginate-color: #8e1418 !important;
  --jdgm-reviewer-name-color: #201619 !important;
  --jdgm-write-review-bg-color: #8e1418 !important;
  --jdgm-write-review-text-color: #ffffff !important;
  --jdgm-star-color: #c9a227 !important;
}


/* ==========================================================================
   32. RETAILER — branduri, accesibilitate, ținte de atingere (29.07.2026)
   ========================================================================== */

/* --------------------------------------------------------------------------
   32.1 Indicator de focus vizibil — pe TOT site-ul

   Nu exista niciun indicator de focus: cine navighează cu tastatura nu vedea
   unde se află. Este cerință WCAG 2.4.7 și, din iunie 2025, obligație legală
   în UE pentru comerțul electronic (European Accessibility Act).

   Se folosește `:focus-visible`, deci conturul apare la tastatură, nu la clic
   de mouse — nu schimbă nimic pentru utilizatorii de mouse.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid #c42026;
  outline-offset: 2px;
  border-radius: 8px;
}

/* Pe fundal închis (hero, footer, bara de anunțuri) conturul roșu se pierde. */
.psn-hero a:focus-visible,
.psn-hero button:focus-visible,
.announcement-bar a:focus-visible,
footer a:focus-visible,
.psn-drawer-info a:focus-visible {
  outline-color: #ffffff;
}

/* --------------------------------------------------------------------------
   32.2 Contraste aduse peste pragul WCAG AA

   Măsurate înainte: text secundar #8A8A8A = 3,45 · descriere footer #B8B5B2
   = 2,04 · aur #C9A227 pe alb = 2,42. Pragul pentru text normal este 4,5.
   -------------------------------------------------------------------------- */
.psn-breadcrumbs,
.psn-breadcrumbs a {
  color: #6b6168;
}

.psn-breadcrumbs a:hover {
  color: var(--psn-ink, #201619);
}

/* Aurul rămâne culoare de accent, dar nu mai poartă text mic pe fond deschis. */
.psn-about__eyebrow,
.psn-cats__head .psn-eyebrow,
[class*="eyebrow"] {
  color: #8e1418;
}

/* --------------------------------------------------------------------------
   32.3 Ținte de atingere de minimum 44×44 px

   Măsurate sub prag: punctele galeriei 17,9px · inimile de favorite 36px ·
   butoanele rapide 36px · linkurile din breadcrumb 18px.
   Se mărește zona de atingere fără a schimba aspectul vizual.
   -------------------------------------------------------------------------- */
.psn-heart,
.psn-heart button,
[class*="wishlist"] button {
  min-width: 44px;
  min-height: 44px;
}

.product-card .quick-add .button,
.product-card quick-add-component button {
  min-height: 44px;
}

/* Punctele de navigare din galerie: pastila rămâne mică, zona de atins e mare. */
.slideshow-controls button,
[class*="slideshow"] [class*="dot"],
[class*="pagination"] button {
  position: relative;
  min-width: 44px;
  min-height: 44px;
}

.psn-breadcrumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

@media (max-width: 749px) {
  .psn-breadcrumbs {
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* --------------------------------------------------------------------------
   32.4 Branduri — bandă pe prima pagină și grilă pe pagina dedicată

   Semnalul vizual că magazinul este un raft cu mai multe branduri, nu site-ul
   unui producător. Lista se construiește singură din colecțiile `brand-*`
   care au produse.
   -------------------------------------------------------------------------- */
.psn-brands {
  padding-block: 40px;
}

.psn-brands__inner {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 40px;
}

.psn-brands__head {
  text-align: center;
  margin-bottom: 20px;
}

.psn-brands__head h2 {
  margin: 0 0 8px;
  line-height: 1.25;
}

.psn-brands__head p {
  margin: 0;
  color: #6b6168;
  font-size: 0.9375rem;
}

.psn-brands__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.psn-brands--banda .psn-brands__list {
  grid-auto-flow: column;
  grid-auto-columns: minmax(150px, 1fr);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.psn-brands--banda .psn-brands__list::-webkit-scrollbar {
  display: none;
}

.psn-brands--banda .psn-brands__list > li {
  scroll-snap-align: start;
}

/* FAZA 4, 09.08.2026 — cardurile de brand trebuie să aibă aceeași înălțime.
   `min-height: 96px` fixează doar podeaua: „Wonderful Honey" își rupe numele
   pe două rânduri și creștea la 119px, deci banda avea un card mai înalt
   decât ceilalți șapte. MĂSURAT: două înălțimi, 96 și 119, pe 1440/1024/390.
   Grila întinde deja `li` pe toată înălțimea rândului — lipsea doar ca
   `<a>`-ul dinăuntru să umple `li`. Aceeași regulă ca la VAL 1.4.          */
.psn-brands__list > li {
  display: flex;
}

.psn-brands__list > li > .psn-brand-card {
  flex: 1;
}

.psn-brands--grila .psn-brands__list {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 16px;
}

.psn-brand-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 96px;
  padding: 16px 12px;
  border: 1px solid var(--psn-line);
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  color: var(--psn-ink, #201619);
  transition: border-color 0.16s var(--psn-ease),
              box-shadow 0.16s var(--psn-ease);
}

.psn-brand-card:hover {
  border-color: #8e1418;
  box-shadow: 0 6px 20px rgb(32 22 25 / 0.08);
}

.psn-brand-card img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.psn-brand-card__name {
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
  text-align: center;
}

.psn-brand-card__count {
  font-size: 0.8125rem;
  color: #6b6168;
}

.psn-brands__all {
  display: block;
  width: fit-content;
  margin: 20px auto 0;
  padding: 12px 20px;
  border: 1px solid var(--psn-ink, #201619);
  border-radius: 999px;
  text-decoration: none;
  color: var(--psn-ink, #201619);
  font-size: 0.9375rem;
  font-weight: 600;
  min-height: 44px;
  display: flex;
  align-items: center;
}

@media (max-width: 749px) {
  .psn-brands {
    padding-block: 28px;
  }

  .psn-brands__inner {
    padding-inline: 16px;
  }

  .psn-brands--banda .psn-brands__list {
    grid-auto-columns: minmax(132px, 1fr);
  }
}


/* --------------------------------------------------------------------------
   32.5 Categorii în pregătire — vizibile, dar clar secundare

   Vitrina arată harta completă a magazinului (asta comunică „raft de wellness
   intim”, nu „magazin de prezervative”). Categoriile fără produse rămân în
   hartă, dar nu concurează vizual cu cele reale: fără imagine, contur punctat,
   contrast redus. Trec singure în starea normală la primul produs.
   -------------------------------------------------------------------------- */
.psn-cat-card--soon {
  border-style: dashed;
  background: transparent;
}

.psn-cat-card--soon .psn-cat-card__visual {
  opacity: 0.55;
}

.psn-cat-card--soon .psn-cat-card__title {
  color: rgb(32 22 25 / 0.72);
}

.psn-cat-card__meta--soon {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8e1418;
  opacity: 0.75;
}

.psn-cat-card--soon:hover {
  border-style: solid;
  border-color: #8e1418;
}

/* --------------------------------------------------------------------------
   32.6 Pagină de categorie fără produse — punct de captură, nu fundătură

   O categorie anunțată dar goală trebuie să facă ceva util: să explice și să
   ofere posibilitatea de a fi anunțat. Stilul de mai jos deservește blocul
   randat de `passion-colectie-goala.liquid`.
   -------------------------------------------------------------------------- */
.psn-empty {
  max-width: 620px;
  margin: 8px auto 56px;
  padding: 32px 24px;
  text-align: center;
  border: 1px solid var(--psn-line);
  border-radius: 12px;
  background: #fff;
}

.psn-empty__icon {
  color: #8e1418;
  margin-bottom: 12px;
  display: inline-flex;
}

.psn-empty h2 {
  margin: 0 0 8px;
  font-size: 1.5rem;
  line-height: 1.25;
}

.psn-empty p {
  margin: 0 0 16px;
  color: #6b6168;
  font-size: 1rem;
  line-height: 1.6;
}

.psn-empty__form {
  display: flex;
  gap: 8px;
  max-width: 420px;
  margin: 0 auto 8px;
}

.psn-empty__form input[type="email"] {
  flex: 1 1 auto;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--psn-line);
  border-radius: 999px;
  font-size: 1rem;
  font-family: inherit;
}

.psn-empty__form button {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: #c42026;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}

.psn-empty__nota {
  font-size: 0.8125rem;
  color: #6b6168;
  margin: 0;
}

.psn-empty__alt {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--psn-line);
}

.psn-empty__alt p {
  margin: 0 0 12px;
  font-size: 0.9375rem;
}

.psn-empty__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.psn-empty__chips a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--psn-line);
  border-radius: 999px;
  text-decoration: none;
  color: var(--psn-ink, #201619);
  font-size: 0.9375rem;
}

.psn-empty__chips a:hover {
  border-color: #8e1418;
}

@media (max-width: 749px) {
  .psn-empty {
    margin-inline: 16px;
    padding: 24px 16px;
  }

  .psn-empty__form {
    flex-direction: column;
  }
}


/* --------------------------------------------------------------------------
   32.7 Focus vizibil și pe bannerul de consimțământ

   Bannerul Shopify își impune `outline-style: none` pe butoane. Cum el este
   primul lucru pe care îl atinge cineva care navighează cu tastatura, lipsa
   conturului acolo anulează practic corecția de accesibilitate.
   -------------------------------------------------------------------------- */
#shopify-pc__banner button:focus-visible,
#shopify-pc__banner a:focus-visible,
[class*="shopify-pc__banner"] button:focus-visible {
  outline: 3px solid #c42026 !important;
  outline-offset: 2px !important;
}

/* --------------------------------------------------------------------------
   32.8 Sistem de mișcare unificat

   Erau șapte durate în uz simultan (0,125 · 0,15 · 0,18 · 0,2 · 0,27 · 0,36 ·
   0,8s) și 78 de elemente cu `transition: color 0s` — o tranziție inertă.
   Rămân trei durate și două curbe, conform sistemului de design.
   -------------------------------------------------------------------------- */
html:root {
  --psn-motion-rapid: 0.16s;
  --psn-motion-normal: 0.24s;
  --psn-motion-lent: 0.24s;
  --psn-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --psn-ease-lent: cubic-bezier(0.2, 0.7, 0.3, 1);
}

.psn-cat-card,
.psn-brand-card,
.psn-usp__item,
.product-card .quick-add .button,
.psn-empty__chips a {
  transition-duration: var(--psn-motion-rapid);
  transition-timing-function: var(--psn-ease);
}

/* --------------------------------------------------------------------------
   32.9 Eticheta de brand pe cardurile de produs

   Într-un magazin cu mai multe branduri, brandul trebuie citit înaintea
   titlului: e primul criteriu de recunoaștere. Se afișează deasupra
   titlului, discret, cu majuscule spațiate.
   -------------------------------------------------------------------------- */
.psn-card-brand {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8e1418;
  margin-bottom: 2px;
}

/* --------------------------------------------------------------------------
   32.10 Bara de reasigurare din antet

   Mesajul de încredere trebuie citit înainte de primul produs, nu descoperit
   în subsol. Trei promisiuni, o singură linie, pe toate paginile.
   -------------------------------------------------------------------------- */
.psn-trustbar {
  border-bottom: 1px solid var(--psn-line);
  background: #fff;
}

.psn-trustbar__inner {
  max-width: 1440px;
  margin-inline: auto;
  padding: 8px 40px;
  display: flex;
  gap: 28px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
}

.psn-trustbar li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: #4a4045;
  white-space: nowrap;
}

.psn-trustbar svg {
  flex: 0 0 auto;
  color: #8e1418;
}

@media (max-width: 989px) {
  .psn-trustbar__inner {
    gap: 16px;
    padding-inline: 16px;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }

  .psn-trustbar__inner::-webkit-scrollbar {
    display: none;
  }

  .psn-trustbar li {
    font-size: 0.75rem;
  }
}


/* ==========================================================================
   33. PREMIUM — impact vizual, ritm, componente (29.07.2026)

   Principiu: cu un catalog mic, percepția de calitate vine din trei lucruri —
   generozitatea spațiului, calitatea prezentării produsului și consecvența
   componentelor. Nu din numărul de secțiuni.
   ========================================================================== */

/* --------------------------------------------------------------------------
   33.1 Cardurile de tip produs („Alege tipul potrivit”)

   Înainte: iconiță mică într-un cerc, titlu, „ÎN CURÂND”. Acum: imaginea
   produsului real, mare, pe fundal cald, cu o zonă de text clar separată și
   un îndemn care apare la hover. Raport de imagine fix, ca toate cardurile
   să fie identice indiferent de poza din spate.
   -------------------------------------------------------------------------- */
.psn-cats__grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(4, 1fr);
}

.psn-cats__grid--2 { grid-template-columns: repeat(2, 1fr); }
.psn-cats__grid--3 { grid-template-columns: repeat(3, 1fr); }
/* FAZA 4, 09.08.2026 — vitrina acoperă acum tot magazinul, nu doar
   subcategoriile de prezervative, deci sunt 6 carduri, nu 4. Fără regulă
   proprie ar fi căzut pe `repeat(4, 1fr)` de mai sus, adică 4 sus și 2 jos,
   cu un rând incomplet. Trei coloane dau 3+3, două rânduri pline.           */
.psn-cats__grid--5,
.psn-cats__grid--6 { grid-template-columns: repeat(3, 1fr); }

.psn-cat-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--psn-line);
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  color: var(--psn-ink, #201619);
  transition: transform var(--psn-motion-rapid, 0.16s) var(--psn-ease, var(--psn-ease)),
              box-shadow var(--psn-motion-rapid, 0.16s) var(--psn-ease, var(--psn-ease)),
              border-color var(--psn-motion-rapid, 0.16s) var(--psn-ease, var(--psn-ease));
}

.psn-cat-card:hover {
  transform: translateY(-3px);
  border-color: #dfd2d4;
  box-shadow: var(--psn-shadow);
}

.psn-cat-card__visual {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  background: linear-gradient(180deg, #fdf9f8 0%, #f8f1ef 100%);
  padding: 14%;
  border-radius: 0;
}

.psn-cat-card__visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform var(--psn-motion-normal, 0.24s) var(--psn-ease, var(--psn-ease));
}

.psn-cat-card:hover .psn-cat-card__visual img {
  transform: scale(1.045);
}

.psn-cat-card__visual svg {
  color: #8e1418;
  opacity: 0.9;
}

.psn-cat-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 16px 16px;
  text-align: left;
}

.psn-cat-card__title {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.psn-cat-card__desc {
  font-size: 0.875rem;
  line-height: 1.5;
  color: #6b6168;
}

.psn-cat-card__cta {
  margin-top: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #8e1418;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.psn-cat-card__cta::after {
  content: "→";
  transition: transform var(--psn-motion-rapid, 0.16s) var(--psn-ease, var(--psn-ease));
}

.psn-cat-card:hover .psn-cat-card__cta::after {
  transform: translateX(4px);
}

@media (max-width: 989px) {
  /* lista de selectori se repetă IDENTIC, cu cele două variante noi incluse:
     `@media` nu adaugă specificitate, iar `--5`/`--6` de mai sus ar fi bătut
     regula asta pe tabletă. Vezi horizon-spacing-style-capcana.            */
  .psn-cats__grid,
  .psn-cats__grid--3,
  .psn-cats__grid--4,
  .psn-cats__grid--5,
  .psn-cats__grid--6 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 749px) {
  .psn-cats__grid { gap: 12px; }
  .psn-cat-card__body { padding: 12px 12px 12px; }
  .psn-cat-card__title { font-size: 0.9375rem; }
  .psn-cat-card__desc { display: none; }
}

/* --------------------------------------------------------------------------
   33.2 Ritm vertical consistent între secțiuni

   Măsurate pe prima pagină: 598 · 138 · 672 · 684 · 806 · 53 · 438px, fiecare
   cu propriul padding. Un ritm neregulat citește ca lipsă de control, chiar
   dacă fiecare secțiune arată bine separat. Impunem același interval.
   -------------------------------------------------------------------------- */
.psn-cats,
.psn-about,
.psn-usp {
  padding-block: 72px;
}

@media (max-width: 749px) {
  .psn-cats,
  .psn-about,
  .psn-usp {
    padding-block: 40px;
  }
}

/* Titlurile de secțiune primesc același spațiu sub ele. */
.psn-cats__head,
.psn-about__head {
  /* 31.07: 32 -> 48. Cu 32px, distanta dintre text si carduri era prea aproape
     de cei 22px dintre carduri, iar grila nu se desprindea de paragraf. */
  margin-bottom: 48px;
}

.psn-cats__head h2,
.psn-about__head h2 {
  margin: 0 0 8px;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.psn-cats__head p {
  margin: 0;
  color: #6b6168;
  font-size: 1rem;
}

@media (max-width: 749px) {
  .psn-cats__head,
  .psn-about__head { margin-bottom: 32px; } /* 31.07: 22 -> 32, acelasi ritm pe telefon */
}

/* --------------------------------------------------------------------------
   33.3 Cardurile de produs — tratament premium

   Aceeași logică de prezentare ca la cardurile de categorie: fundal cald
   pentru pack-shot, ridicare discretă la hover, imagine care respiră.
   Pack-shot-urile pe alb decupat câștigă mult pe un fundal ușor cald.
   -------------------------------------------------------------------------- */
.product-card .card-gallery,
.product-card [class*="card-gallery"] {
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, #fdf9f8 0%, #f8f1ef 100%);
}

.product-card .product-media__image {
  mix-blend-mode: multiply;
  transition: transform var(--psn-motion-normal, 0.24s) var(--psn-ease, var(--psn-ease));
}

.product-card:hover .product-media__image {
  transform: scale(1.04);
}

/* --------------------------------------------------------------------------
   33.4 Titlul de secțiune — accentul auriu, unificat

   Liniuța aurie de sub titluri apărea în trei variante (lățimi și poziții
   diferite). O singură formă, aceeași peste tot.
   -------------------------------------------------------------------------- */
.psn-cats__head h2::after,
.psn-about__head h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin: 12px auto 0;
  border-radius: 2px;
  background: #c9a227;
}

.psn-cats__head,
.psn-about__head {
  text-align: center;
}

/* --------------------------------------------------------------------------
   33.5 Corecții după prima verificare vizuală

   Trei lucruri prinse în captură, nu în cod:
   1. `.psn-cat-card__visual` e un <span>: `display:grid` singur nu-i dă
      lățime, deci `aspect-ratio` se aplica pe o cutie strânsă pe conținut și
      imaginea ieșea de câteva ori mai mică decât cardul.
   2. Padding-ul de 14% se aduna peste spațiul alb pe care îl are deja
      pack-shot-ul, făcând produsul minuscul.
   3. Pe mobil, „Vezi produsele →” se rupea pe două rânduri, cu săgeata
      ruptă de text.
   -------------------------------------------------------------------------- */
.psn-cat-card__visual {
  width: 100%;
  padding: 6%;
}

.psn-cat-card__visual img {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
}

.psn-cat-card__cta {
  white-space: nowrap;
}

@media (max-width: 749px) {
  .psn-cat-card__visual {
    padding: 4%;
  }

  .psn-cat-card__cta {
    font-size: 0.8125rem;
  }
}

/* --------------------------------------------------------------------------
   33.6 Prima literă a titlului de card

   După scoaterea prefixului „Prezervative ”, titlurile rămâneau cu inițială
   mică („clasice”, „cu texturi”). Filtrul Liquid `capitalize` nu se poate
   folosi: transformă „XL” în „Xl”. `::first-letter` ridică doar prima literă
   și lasă acronimele intacte.
   -------------------------------------------------------------------------- */
.psn-cat-card__title {
  display: block;
}

.psn-cat-card__title::first-letter {
  text-transform: uppercase;
}


/* ==========================================================================
   34. HERO — impact vizual (29.07.2026)

   Ce nu mergea: șapte blocuri de aceeași greutate în coloana stângă, două
   butoane identice ca importanță, o casetă de promoție cu chenar punctat care
   fura atenția de la buton, iar produsul — singurul element care vinde — era
   mic și fără prezență.
   ========================================================================== */

/* Coloana de text: ierarhie prin spațiu, nu prin chenare. */
.psn-hero .psn-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.psn-hero .psn-hero__badge {
  margin-bottom: 20px;
}

.psn-hero .psn-hero__title {
  margin: 0 0 16px;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.psn-hero .psn-hero__sub {
  margin: 0 0 28px;
  max-width: 30em;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgb(255 255 255 / 0.88);
}

/* Un singur buton dominant; al doilea devine link, nu concurent. */
.psn-hero .psn-hero__ctas {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.psn-hero .psn-hero__btn--primary {
  min-height: 56px;
  padding-inline: 32px;
  border-radius: 999px;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  background: #c42026;
  color: #fff;
  border: 0;
  box-shadow: var(--psn-shadow-red);
  transition: transform var(--psn-motion-rapid, 0.16s) var(--psn-ease, var(--psn-ease)),
              box-shadow var(--psn-motion-rapid, 0.16s) var(--psn-ease, var(--psn-ease));
}

.psn-hero .psn-hero__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--psn-shadow-red);
}

.psn-hero .psn-hero__btn--link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgb(255 255 255 / 0.35);
  border-radius: 0;
}

.psn-hero .psn-hero__btn--link span {
  transition: transform var(--psn-motion-rapid, 0.16s) var(--psn-ease, var(--psn-ease));
}

.psn-hero .psn-hero__btn--link:hover {
  border-bottom-color: #fff;
}

.psn-hero .psn-hero__btn--link:hover span {
  transform: translateX(4px);
}

/* Promoția: un rând de text, nu o casetă cu chenar punctat. */
.psn-hero .psn-hero__promo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.9375rem;
  color: rgb(255 255 255 / 0.85);
}

.psn-hero .psn-hero__promo-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: 999px;
  background: #c9a227;
  color: #201619;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.psn-hero .psn-hero__promo strong {
  color: #c9a227;
  letter-spacing: 0.03em;
}

.psn-hero .psn-hero__chips {
  gap: 8px 24px;
  margin: 0;
}

.psn-hero .psn-hero__chips li {
  font-size: 0.9375rem;
  color: rgb(255 255 255 / 0.78);
}

/* --------------------------------------------------------------------------
   34.1 Produsul — prezență, nu decor

   Halo difuz în spate: dă adâncime pack-shot-ului decupat, fără să ceară o
   fotografie nouă. Umbra proiectată îl așază pe o suprafață, în loc să
   plutească.
   -------------------------------------------------------------------------- */
.psn-hero .psn-hero__media {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.psn-hero .psn-hero__media > a {
  position: relative;
  display: block;
  width: 100%;
  max-width: 440px;
}

.psn-hero .psn-hero__halo {
  position: absolute;
  inset: -12% -6% -6%;
  z-index: -1;
  border-radius: 50%;
  /* 31.07.2026: coborât de la 0.22/0.06 la 0.13/0.035 — pata aurie se citea ca
     un halou vizibil, nu ca o aură. Valoarea se schimbă AICI, la sursă: e
     singura regulă care pune fundal pe halou, iar un `.psn-hero__halo` simplu
     adăugat mai jos în fișier NU o bate (0,2,0 vs 0,1,0). */
  background: radial-gradient(closest-side, rgb(201 162 39 / 0.13), rgb(201 162 39 / 0.035) 62%, transparent 100%);
  filter: blur(6px);
  pointer-events: none;
}

.psn-hero .psn-hero__media img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 26px 34px rgb(0 0 0 / 0.42));
  transition: transform var(--psn-motion-lent, 0.24s) var(--psn-ease-lent, var(--psn-ease));
}

.psn-hero .psn-hero__media:hover img {
  transform: translateY(-6px) scale(1.015);
}

/* Etichetele de pe imagine: una sus, una jos, aceeași familie vizuală. */
.psn-hero .psn-hero__flag,
.psn-hero .psn-hero__price-flag {
  position: absolute;
  z-index: 2;
  border-radius: 999px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: var(--psn-shadow);
}

.psn-hero .psn-hero__flag {
  top: 4%;
  left: 0;
  padding: 8px 16px;
  background: #c9a227;
  color: #201619;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.psn-hero .psn-hero__price-flag {
  bottom: 6%;
  right: 0;
  padding: 12px 16px;
  background: #fff;
  color: #201619;
  font-size: 1.0625rem;
}

@media (max-width: 989px) {
  .psn-hero .psn-hero__media > a { max-width: 340px; }
}

@media (max-width: 749px) {
  .psn-hero .psn-hero__content { align-items: center; text-align: center; }
  .psn-hero .psn-hero__sub { margin-bottom: 24px; font-size: 1rem; }
  .psn-hero .psn-hero__ctas { flex-direction: column; align-items: stretch; gap: 12px; width: 100%; }
  .psn-hero .psn-hero__btn--primary { width: 100%; justify-content: center; }
  .psn-hero .psn-hero__btn--link { justify-content: center; border-bottom: 0; }
  .psn-hero .psn-hero__promo { justify-content: center; flex-wrap: wrap; row-gap: 4px; }
  .psn-hero .psn-hero__chips { justify-content: center; }
  .psn-hero .psn-hero__media > a { max-width: 78vw; }
  .psn-hero .psn-hero__flag { left: 2%; }
  .psn-hero .psn-hero__price-flag { right: 2%; }
}

/* --------------------------------------------------------------------------
   34.2 Hero pe mobil — produsul primul

   După recompunere, pe mobil primul ecran conținea numai text: badge, titlu
   pe două rânduri, subtitlu pe trei, buton, link, promoție, două garanții —
   iar produsul, singurul element care vinde, ajungea abia la ~1450px.

   Pe mobil ordinea se inversează: produsul sus, compact, apoi mesajul și
   butonul. Titlul și spațiile se strâng, ca butonul să rămână în primul ecran.
   -------------------------------------------------------------------------- */
@media (max-width: 749px) {
  .psn-hero .psn-hero__inner {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* 06.08.2026 — ORDINEA SE ÎNTOARCE: textul primul, cutiile dedesubt.
     Regula de mai jos (34.2, scrisă pe 28.07) punea produsul primul, fiindcă
     atunci blocul de text era mult mai înalt și împingea produsul la ~1450px.
     Între timp textul a fost strâns, iar auditul din 5 august a măsurat
     efectul secundar: primul ecran de pe telefon arăta patru cutii pe fundal
     închis și NIMIC altceva — nici ce vinzi ca gamă, nici de ce ai fi de
     încredere, nici vreun buton. Pe desktop, unde textul stă în stânga,
     impresia era bună; deci problema era strict de ordine.
     Acum: etichetă → titlu → frază → buton, apoi cutiile, tăiate de marginea
     ecranului — semnul că pagina continuă. */
  .psn-hero .psn-hero__media {
    order: 0;
    margin-top: 16px;
    margin-bottom: 0;
  }

  .psn-hero .psn-hero__media > a {
    max-width: 56vw;
  }

  .psn-hero .psn-hero__badge {
    margin-bottom: 12px;
    font-size: 0.6875rem;
  }

  .psn-hero .psn-hero__title {
    font-size: 1.75rem;
    margin-bottom: 12px;
  }

  .psn-hero .psn-hero__sub {
    margin-bottom: 20px;
    font-size: 0.9375rem;
    line-height: 1.5;
    max-width: 34ch;
  }

  .psn-hero .psn-hero__ctas {
    margin-bottom: 16px;
    gap: 12px;
  }

  .psn-hero .psn-hero__btn--primary {
    min-height: 52px;
    font-size: 1rem;
  }

  .psn-hero .psn-hero__promo {
    margin-bottom: 12px;
    font-size: 0.875rem;
    gap: 8px;
  }

  .psn-hero .psn-hero__chips {
    gap: 4px 16px;
  }

  .psn-hero .psn-hero__chips li {
    font-size: 0.875rem;
  }

  /* Etichetele stau pe marginile imaginii, nu peste conținutul de sub ea. */
  .psn-hero .psn-hero__flag {
    top: 2%;
    left: 4%;
    padding: 4px 12px;
    font-size: 0.625rem;
  }

  .psn-hero .psn-hero__price-flag {
    bottom: 2%;
    right: 4%;
    padding: 8px 12px;
    font-size: 0.9375rem;
  }
}


/* ==========================================================================
   35. PAGINA DE PRODUS — tratament premium (29.07.2026)

   Structura e deja corectă după faza 2 (preț mare, CTA dominant, reasigurare
   sub buton). Ce lipsea era finisajul: imaginile stăteau pe alb plat, zona de
   cumpărare nu avea ritm, iar variantele arătau ca butoane de formular.
   ========================================================================== */

/* --------------------------------------------------------------------------
   35.1 Galeria — aceeași lume vizuală ca restul site-ului

   Pack-shot-urile decupate pe alb arată sărac pe fundal alb. Pe fundalul cald
   folosit la carduri, produsul capătă volum, iar pagina devine coerentă cu
   prima pagină.
   -------------------------------------------------------------------------- */
.product-information__media .product-media-container,
.product-information__media .media-gallery__grid > li {
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, #fdf9f8 0%, #f8f1ef 100%);
}

.product-information__media .product-media__image {
  mix-blend-mode: multiply;
  transition: transform var(--psn-motion-lent, 0.24s) var(--psn-ease-lent, var(--psn-ease));
}

.product-information__media .product-media-container:hover .product-media__image {
  transform: scale(1.03);
}

/* --------------------------------------------------------------------------
   35.2 Ritmul coloanei de cumpărare

   Titlu și preț lipite, apoi aer înainte de variante, apoi aer înainte de
   buton: ochiul primește informația în trei trepte, nu într-un bloc compact.
   -------------------------------------------------------------------------- */
.product-details product-price {
  display: block;
  margin-block: 4px 20px;
}

.product-details .variant-option {
  margin-bottom: 24px;
}

.product-details .variant-option legend,
.product-details .variant-option__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #6b6168;
  margin-bottom: 12px;
}

/* --------------------------------------------------------------------------
   35.3 Variantele — opțiuni, nu butoane de formular
   -------------------------------------------------------------------------- */
.product-details .variant-option--buttons label,
.product-details variant-picker label {
  border-radius: 12px;
  min-height: 52px;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: border-color var(--psn-motion-rapid, 0.16s) var(--psn-ease, var(--psn-ease)),
              background-color var(--psn-motion-rapid, 0.16s) var(--psn-ease, var(--psn-ease)),
              transform var(--psn-motion-rapid, 0.16s) var(--psn-ease, var(--psn-ease));
}

.product-details .variant-option--buttons label:hover {
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   35.4 Descrierea — tipografie de citit, nu de umplut

   Textul e acum 16px (faza 2). Aici primește lățime de lectură, spațiere
   între paragrafe și liste cu bulină în culoarea brandului.
   -------------------------------------------------------------------------- */
.product-details rte-formatter,
.product-details .rte {
  max-width: 62ch;
}

.product-details rte-formatter p,
.product-details .rte p {
  margin-block: 0 12px;
  line-height: 1.6;
}

.product-details rte-formatter ul,
.product-details rte-formatter ol {
  margin-block: 0 16px;
  padding-left: 0;
  list-style: none;
}

.product-details rte-formatter ul li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  line-height: 1.5;
}

.product-details rte-formatter ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8e1418;
}

.product-details rte-formatter ol {
  counter-reset: psn-pas;
}

.product-details rte-formatter ol li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 8px;
  line-height: 1.5;
  counter-increment: psn-pas;
}

.product-details rte-formatter ol li::before {
  content: counter(psn-pas);
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgb(142 20 24 / 0.09);
  color: #8e1418;
  font-size: 0.75rem;
  font-weight: 700;
}

.product-details rte-formatter strong {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #6b6168;
}

/* --------------------------------------------------------------------------
   35.5 Reasigurarea de sub buton — separată vizual de descriere
   -------------------------------------------------------------------------- */
.product-details .psn-reasig,
.product-details [class*="group"]:has(> [class*="group"] svg) {
  margin-top: 4px;
}

@media (max-width: 749px) {
  .product-details product-price { margin-block: 2px 16px; }
  .product-details .variant-option { margin-bottom: 20px; }
  .product-details rte-formatter { max-width: none; }
}


/* ==========================================================================
   36. CORECȚII DIN AUDITUL FINAL (29.07.2026)
   ========================================================================== */

/* --------------------------------------------------------------------------
   36.1 Breadcrumb — corecția de contrast, de data asta cu specificitate

   Regula din §32.2 (`.psn-breadcrumbs a { color:#6b6168 }`) era învinsă de
   `{% style %}`-ul din interiorul snippet-ului `passion-breadcrumbs.liquid`,
   care se încarcă după fișierul nostru. Măsurat din nou: 3,45 — sub pragul
   de 4,5. Cu `nav.psn-breadcrumbs` urcăm specificitatea peste regula locală.
   -------------------------------------------------------------------------- */
nav.psn-breadcrumbs,
nav.psn-breadcrumbs a,
nav.psn-breadcrumbs .psn-breadcrumbs__current {
  color: #6b6168;
}

nav.psn-breadcrumbs a:hover {
  color: var(--psn-ink, #201619);
}

/* --------------------------------------------------------------------------
   36.2 Footer — textul descriptiv era la contrast 2,04

   Gri deschis pe fundal închis: sub jumătate din pragul minim. Textul
   secundar din footer trece pe o valoare care se citește.
   -------------------------------------------------------------------------- */
/* Restrâns la 30.07.2026: selectorul era `footer p`, deci prindea și panoul
   DESCHIS de newsletter (fundal #efedee), unde textul alb rămânea invizibil —
   măsurat pe pixeli, contrast 1,17:1 pe mesajul „Primești 10% reducere cu
   codul BUNVENIT10". Acum e legat de secțiunea întunecată. Dacă acea secțiune
   e vreodată recreată din Customizer, textul cade pe schema temei, care a fost
   măsurată la 8:1 și 4,5:1 — lizibil. Eșec în siguranță.
   Pe fundalul închis, albul la 82% dă ~11:1, deci culoarea rămâne. */
html footer > [id*="footer_NU4zh9"] p,
html footer > [id*="footer_NU4zh9"] .psn-footer__desc {
  color: rgb(255 255 255 / 0.82);
}

/* --------------------------------------------------------------------------
   36.3 Ținte de atingere în footer și pe rețele sociale

   Măsurate: iconițele sociale 24×24, linkurile de e-mail și telefon 20px
   înălțime. Zona de atingere crește fără ca aspectul să se schimbe.
   -------------------------------------------------------------------------- */
.social-icons a,
[class*="social"] a,
footer a[href^="mailto:"],
footer a[href^="tel:"],
[id*="footer"] a[href^="mailto:"],
[id*="footer"] a[href^="tel:"] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.social-icons a,
[class*="social"] a {
  min-width: 44px;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   36.4 Scala tipografică — eliminarea valorilor „murdare”

   Auditul a găsit 15 mărimi distincte pe prima pagină, dintre care cinci
   rezultate din calcule `em` înlănțuite: 15,68 · 15,2 · 14,08 · 13,6 ·
   13,12 · 12,48px. Le prindem la cea mai apropiată treaptă din sistem
   (12 · 14 · 16 · 17 · 20 · 24 · 32 · 48).
   -------------------------------------------------------------------------- */
.psn-usp__text p,
.psn-about__item-text,
.psn-hero__chips li,
.psn-cats__head p {
  font-size: 1rem;
}

.psn-usp__title,
.psn-about__item-title {
  font-size: 1rem;
}

.psn-about__stats span:last-child,
.psn-cat-card__desc,
.psn-brand-card__count {
  font-size: 0.875rem;
}

.psn-hero__badge,
.psn-about__eyebrow,
.psn-cat-card__meta {
  font-size: 0.75rem;
}

/* Logo: „STORE” era 9,6px cu contrast 2,42 — prea mic și prea deschis.
   Rămâne discret, dar lizibil. */
.psn-logo__sub,
.psn-logo span:last-child {
  font-size: 0.6875rem;
  letter-spacing: 0.34em;
  color: #a8862a;
}

/* --------------------------------------------------------------------------
   36.5 Linkurile din footer — zonă de atingere

   Măsurate: 20px înălțime, sub pragul WCAG 2.5.8 (24×24px, nivel AA).
   Pe desktop le ducem la 24px — suficient pentru conformitate, fără să umfle
   footerul cu 200px. Unde se atinge cu degetul, la 44px.

   30.07: pragul de 44px era legat de LĂȚIME (max-width: 749px), deci tabletele
   primeau varianta de mouse — măsurat pe iPad, cele 9 linkuri aveau 26px.
   Criteriul corect e tipul de pointer, nu lățimea ecranului: `pointer: coarse`
   înseamnă că dispozitivul principal de indicare e degetul. Un laptop cu ecran
   tactil dar cu mouse rămâne pe 24px, ceea ce e corect.
   -------------------------------------------------------------------------- */
[id*="footer"] a,
footer a,
.psn-drawer-info a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

@media (max-width: 749px), (pointer: coarse) {
  [id*="footer"] a,
  footer a {
    min-height: 44px;
  }
}

/* --------------------------------------------------------------------------
   36.6 Ultimele constatări din audit

   a) Punctele de navigare din galerie: 17,9×17,9px, cele mai mici ținte de pe
      site. Pastila vizibilă rămâne mică, zona de atins crește la 44px printr-un
      pseudo-element — soluția standard, fără schimbare de aspect.
   b) Eticheta „WhatsApp” din bara de jos: verde #1FAA53 pe alb = 3,03.
   c) E-mailul și telefonul din footer: 3,01 pe fundal închis.
   d) Textul barei de jos era 9,92px — sub minimul rezonabil de citit.
   -------------------------------------------------------------------------- */

/* a) puncte de galerie */
slideshow-controls button,
[class*="slideshow"] button[aria-label*="apozitiv"],
[class*="slideshow-control"]:not(.slideshow-control--previous):not(.slideshow-control--next) {
  position: relative;
}

/* 05.08: ::after → ::before. Vezi explicația completă la secțiunea 92. Pe
   scurt: `::after` NU e liber — Horizon desenează pastila vizibilă în el. */
slideshow-controls button::before,
[class*="slideshow"] button[aria-label*="apozitiv"]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  background: transparent;
  transform: translate(-50%, -50%);
}

/* b) + d) bara de navigare de jos */
.psn-bottom-nav__item,
.psn-bottom-nav a,
.psn-bottom-nav button {
  font-size: 0.6875rem;
}

.psn-bottom-nav [class*="wa"],
.psn-bottom-nav a[href*="wa.me"],
.psn-bottom-nav a[href*="whatsapp"] {
  color: #128c3e;
}

/* c) contactele din footer */
[id*="footer"] a[href^="mailto:"],
[id*="footer"] a[href^="tel:"],
footer a[href^="mailto:"],
footer a[href^="tel:"] {
  color: #f0b8bb;
}


/* ==========================================================================
   37. ÎNCHIDEREA PUNCTELOR RĂMASE DIN AUDIT (29.07.2026)
   ========================================================================== */

/* --------------------------------------------------------------------------
   37.1 Punctele de navigare din galerie — cele mai mici ținte de pe site

   Structura reală, găsită acum:
     SLIDESHOW-CONTROLS > OL.slideshow-controls__dots > LI > BUTTON.slideshow-control
   Măsurate 17,9×17,9px. Regulile anterioare țintiseră un selector greșit.

   Pastila vizibilă rămâne mică (altfel strică galeria); zona de atins urcă la
   44px printr-un pseudo-element transparent, centrat pe punct.
   -------------------------------------------------------------------------- */
.slideshow-controls__dots button,
.slideshow-controls__dots .slideshow-control {
  position: relative;
}

/* 05.08: ::after → ::before (vezi secțiunea 92). */
.slideshow-controls__dots button::before,
.slideshow-controls__dots .slideshow-control::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  background: transparent;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

/* Punctele să nu se lipească unul de altul când zona crește. */
.slideshow-controls__dots {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* --------------------------------------------------------------------------
   37.2 „Mai multe opțiuni de plată” — link de 21,3px

   Element generat de Shopify sub butonul de plată accelerată.
   -------------------------------------------------------------------------- */
.shopify-payment-button__more-options {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}

/* --------------------------------------------------------------------------
   37.3 Ultimele trei mărimi cu zecimale

   Rămăseseră din calcule `em` înlănțuite ale temei:
     13,6px  → textul descriptiv din banda de avantaje
     13,12px → butonul rapid „Alege” de pe cardurile de produs
     15,2px  → butonul „Descoperă produsele” din secțiunea despre magazin
   Le prindem la treptele sistemului: 14px, 14px, 16px.
   -------------------------------------------------------------------------- */
.psn-usp__text,
.psn-usp__text p,
.psn-usp__text span {
  font-size: 0.875rem;
}

.product-card .quick-add .button,
.product-card quick-add-component .button,
.quick-add__button,
.quick-add .button {
  font-size: 0.875rem;
}

.psn-about__cta {
  font-size: 1rem;
}

/* --------------------------------------------------------------------------
   37.4 „Vezi toate produsele” și „Filtrează” — 25,6px

   Linkuri de acțiune din antetul secțiunilor și din bara de filtre.
   -------------------------------------------------------------------------- */
.product-list__link,
[class*="product-list"] a[class*="link"],
[class*="resource-list"] a[class*="link"],
.facets__summary,
[class*="filters"] summary,
[class*="filter"] > summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* --------------------------------------------------------------------------
   37.5 Butonul „Filtrează” de pe paginile de colecție

   Selectorul real, găsit prin inspecție: `.facets-toggle__button`, în
   `.facets-toggle__wrapper`. Măsurat 25,6px înălțime.
   -------------------------------------------------------------------------- */
.facets-toggle__button,
.facets-toggle__wrapper button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* --------------------------------------------------------------------------
   37.6 Punctele de galerie — spațiere între zonele de atingere

   Zonele extinse la 44px se suprapuneau (punctele erau la 28px unul de
   altul), deci un clic între două puncte ajungea imprevizibil la unul dintre
   ele. Cu 20px între puncte, fiecare zonă rămâne clar a lui, iar aspectul
   vizual nu se schimbă — punctele rămân mici.
   -------------------------------------------------------------------------- */
/* 04.08: gap-ul de 20px de aici NU se aplica — styles.css al temei (încărcat
   după noi) îl rescria cu `.slideshow-controls__dots{gap:.6rem}` la aceeași
   specificitate, iar butoanele mai au și `margin: calc(var(--size)/-2)`
   (−4,48px), tot din temă. Rezultat măsurat la 320px: buline de 17,9px la
   0,6px una de alta — zonele de atins de 24px se suprapuneau cu 5,5px.
   Prefixul `html` (0,1,1 vs 0,1,0) bate ambele reguli. Cu margin 0 și gap
   12px centrele ajung la 29,9px — zonele de 24px nu se mai ating. */
html .slideshow-controls__dots {
  gap: 12px;
}
html .slideshow-controls__dots button {
  margin: 0;
}


/* ==========================================================================
   38. SCALA TIPOGRAFICĂ — ULTIMELE VALORI FRACȚIONARE (29.07.2026)

   Toate rămășițele veneau din componentele proprii, care foloseau `em`.
   Un `em` se înmulțește cu contextul moștenit, deci aceeași declarație dă
   mărimi diferite în locuri diferite și niciodată un număr rotund. Trecem
   totul pe `rem`, care se raportează la rădăcină și dă mereu aceeași valoare.
   ========================================================================== */

/* --------------------------------------------------------------------------
   38.1 Textul butonului rapid de pe cardurile de produs

   Sursa celor 13,12px: butonul e fixat la 14px, dar eticheta stă într-un
   `<span>` interior cu `0.9375em` propriu → 14 × 0,9375 = 13,12.
   Descendenții preiau mărimea butonului, nu o recalculează.
   -------------------------------------------------------------------------- */
.quick-add .button span,
.quick-add__button span,
.quick-add-modal .button span,
quick-add-component .button span,
.product-card .quick-add span {
  font-size: inherit;
}

/* --------------------------------------------------------------------------
   38.2 Meniul lateral — 14,08px și 10,56px
   -------------------------------------------------------------------------- */
.psn-drawer-info__blog,
.psn-drawer-info a {
  font-size: 0.875rem; /* 14px */
}

.psn-drawer-info__title {
  font-size: 0.75rem; /* 12px — era 10,56px, sub pragul de lizibilitate */
}

/* --------------------------------------------------------------------------
   38.3 Numele din siglă — 19,2px
   -------------------------------------------------------------------------- */
.psn-logo__name {
  font-size: 1.25rem; /* 20px */
}

/* --------------------------------------------------------------------------
   38.4 Titlul secțiunii despre magazin — 25,6px
   -------------------------------------------------------------------------- */
.psn-about__head h2,
.psn-about h2 {
  font-size: 1.5rem; /* 24px */
}

@media (min-width: 750px) {
  .psn-about__head h2,
  .psn-about h2 {
    font-size: 2rem; /* 32px pe ecran mare */
  }
}


/* ==========================================================================
   39. ULTIMELE PATRU PUNCTE (29.07.2026)
   ========================================================================== */

/* --------------------------------------------------------------------------
   39.1 Textul butonului rapid — 13,12px, a doua încercare

   Prima încercare (38.1) a eșuat din motivul cunoscut: foaia noastră se
   încarcă ÎNAINTE de foaia compilată a temei, deci la specificitate egală
   tema câștigă. Structura reală, măsurată:
     A.quick-add__button > SPAN.add-to-cart-text
       > SPAN.add-to-cart-text__content > SPAN > SPAN {13,12px}
   Ridicăm specificitatea prin `html` și adăugăm `!important`, pentru că e o
   corecție punctuală peste o regulă a temei pe care nu o putem edita.
   -------------------------------------------------------------------------- */
html .add-to-cart-text,
html .add-to-cart-text span,
html .add-to-cart-text__content,
html .add-to-cart-text__content span {
  font-size: inherit !important;
}

/* --------------------------------------------------------------------------
   39.2 „Mai multe opțiuni de plată” — 13,3px

   Element generat de Shopify. Îi dădusem înălțimea (37.2), nu și mărimea.
   -------------------------------------------------------------------------- */
html .shopify-payment-button__more-options {
  font-size: 0.875rem !important; /* 14px */
}

/* --------------------------------------------------------------------------
   39.3 Titlul din hero — 51,2px pe ecran mare

   Venea dintr-un `vw` fără trepte rotunde. Îl legăm de scala sistemului:
   32px pe telefon, urcând fluid până la 56px pe ecran mare — aceeași valoare
   folosită de celelalte titluri mari, deci nu mai avem 48/51,2/56 alături.
   -------------------------------------------------------------------------- */
html .psn-hero__title {
  font-size: clamp(2rem, 6vw, 3.5rem) !important;
}

/* --------------------------------------------------------------------------
   39.4 Casetele de filtrare — zonă de atins de 16px

   Structura: DIV.checkbox > INPUT.checkbox__input (16×16) + LABEL (72×16).
   Sub pragul WCAG 2.5.8 (24×24) și greu de nimerit cu degetul.

   Reparăm zona, nu doar caseta: rândul urcă la 32px, eticheta se întinde pe
   toată lățimea rămasă și e legată de casetă prin `for`, deci un clic oriunde
   pe rând bifează filtrul. Caseta însăși crește la 20px — vizibilă, dar fără
   să domine panoul.
   -------------------------------------------------------------------------- */
html .facets__inputs-list .checkbox,
html .facets__inputs-wrapper .checkbox {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 32px;
}

html .facets__inputs-list .checkbox__input,
html .facets__inputs-wrapper .checkbox__input {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin: 0;
}

html .facets__inputs-list .checkbox__label,
html .facets__inputs-wrapper .checkbox__label {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-height: 32px;
  cursor: pointer;
}

/* Rândul întreg reacționează la trecerea cursorului, ca să se vadă că e
   o zonă de clic, nu doar caseta. */
html .facets__inputs-list-item:hover .checkbox__label {
  opacity: 0.72;
}


/* ==========================================================================
   40. PAGINA DE CONTACT ȘI MENIUL MARE (29.07.2026)

   Auditul complet al saitului a scos la iveală ultimele componente rămase
   pe `em`: pagina de contact (scrisă separat, deci nu a intrat în trecerea
   pe `rem` din secțiunea 38) și linkurile din meniul mare, care apar numai
   după deschidere și de aceea nu fuseseră măsurate până acum.
   ========================================================================== */

/* --------------------------------------------------------------------------
   40.1 Pagina de contact — cinci mărimi fracționare

   14,08 · 16,32 · 14,4 · 14,72 · 29,6 px, toate din `em` moștenit.
   -------------------------------------------------------------------------- */
html .psn-contact__crumbs,
html .psn-contact__crumbs a,
html .psn-contact__crumbs span {
  font-size: 0.875rem; /* 14px */
}

html .psn-contact__title,
html .psn-contact__form-title {
  font-size: 1.75rem; /* 28px */
}

@media (min-width: 750px) {
  html .psn-contact__title,
  html .psn-contact__form-title {
    font-size: 2rem; /* 32px */
  }
}

html .psn-contact__list,
html .psn-contact__list a,
html .psn-contact__line,
html .psn-contact__line span {
  font-size: 1rem; /* 16px */
}

html .psn-contact__note {
  font-size: 0.875rem; /* 14px */
}

html .psn-contact__submit {
  font-size: 1.0625rem; /* 17px - marimea butonului principal */
}

/* --------------------------------------------------------------------------
   40.2 Linkurile din meniul mare — 13,12px

   Aceeași cauză ca la butonul rapid (secțiunea 39.1): un `em` înmulțit cu
   contextul. Meniul se deschide la trecerea cursorului, deci scăpase tuturor
   măsurătorilor anterioare.
   -------------------------------------------------------------------------- */
html .mega-menu__link,
html .mega-menu__link .wrap-text,
html .mega-menu a {
  font-size: 0.875rem !important; /* 14px */
}

/* --------------------------------------------------------------------------
   40.3 Firimitura de pe contact și linkul către politica de confidențialitate

   23px și 16px înălțime — sub pragul de 24px al WCAG 2.5.8.
   -------------------------------------------------------------------------- */
html .psn-contact__crumbs a,
html .contact-form a,
html .psn-contact a[href*="policies"],
html .psn-contact a[href*="confidential"] {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}


/* --------------------------------------------------------------------------
   40.4 „Conectează-te” din coș — ultima țintă sub prag de pe sait

   20px înălțime, într-un text curent din pagina coșului.
   -------------------------------------------------------------------------- */
html .cart__login-title a,
html .cart-note a,
html [class*="cart"] p a,
html [class*="cart"] .rte a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}


/* ==========================================================================
   41. RAFINARE VIZUALĂ — LOTUL 1 (29.07.2026)

   Analiză vizuală pe capturi reale, pagină cu pagină, la 1440px și 390px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   41.1 Cardurile de categorie — imaginile erau tăiate

   Măsurat: containerul are 110px înălțime, imaginea 205px, iar containerul
   are `overflow:hidden` — deci se pierdeau 95px, adică jumătatea de jos a
   cutiei. `object-fit: contain` era deja pus, dar nu avea efect: imaginea
   primise `height:auto`, calculat din lățime, așa că depășea containerul
   înainte ca încadrarea să conteze.

   Reparăm cauza: imaginea primește înălțimea containerului, iar containerul
   o formă stabilă. Puțin spațiu interior ține produsul să nu atingă marginile
   — respirația care face diferența între „poză lipită” și prezentare.
   -------------------------------------------------------------------------- */
html .psn-cat-card__visual {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  min-height: 0;
  overflow: hidden;
  padding: 12px 12px 8px;
}

html .psn-cat-card__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  transition: transform 0.24s cubic-bezier(.2, .7, .3, 1);
}

/* Produsul se apropie discret la trecerea cursorului — semnalează că dala
   e apăsabilă, fără să sară în ochi. */
html .psn-cat-card:hover .psn-cat-card__visual img {
  transform: scale(1.045);
}

@media (prefers-reduced-motion: reduce) {
  html .psn-cat-card__visual img,
  html .psn-cat-card:hover .psn-cat-card__visual img {
    transition: none;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   41.2 Butonul de scădere a cantității arăta roz

   Când cantitatea e 1, butonul „−” e dezactivat, dar rămânea roșu de brand
   cu opacitate 0.5 — adică roz spălăcit lângă un „+” roșu plin. Părea un
   defect de culoare, nu o stare dezactivată.

   Un buton dezactivat trebuie să arate neutru, nu ca o versiune decolorată
   a culorii principale.
   -------------------------------------------------------------------------- */
html [class*="quantity"] button:disabled,
html quantity-selector button:disabled,
html .quantity-selector button[disabled] {
  background: transparent !important;
  color: color-mix(in srgb, currentColor 40%, transparent) !important;
  opacity: 1 !important;
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   41.3 Alinierea titlurilor de secțiune

   Erau amestecate: hero la stânga, „Alege tipul potrivit” centrat, „Cele mai
   vândute” la stânga, „Despre” și „Întrebări frecvente” centrate. Ochiul
   simte dezordinea chiar dacă nu o poate numi.

   Regula pe care o fixăm: secțiunile cu GRILĂ de produse sau categorii au
   titlul la stânga, ca linkul „vezi toate” să stea firesc în dreapta lui.
   Secțiunile NARATIVE (despre magazin, întrebări frecvente) rămân centrate,
   pentru că acolo textul e conținutul, nu un antet peste o grilă.
   -------------------------------------------------------------------------- */
html .psn-cat__head,
html .psn-cat__head h2,
html .psn-cat__title,
html .psn-categories__head,
html .psn-categories__head h2 {
  text-align: left;
}

/* Linia aurie de sub titlu urmează alinierea, nu rămâne centrată singură. */
html .psn-cat__head h2::after,
html .psn-cat__title::after,
html .psn-categories__head h2::after {
  margin-left: 0;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   41.4 Firimitura de pe pagina de produs

   Ultimul element repeta tot titlul și se tăia la „...lubrifiate și rezis”.
   O firimitură are rolul să arate UNDE ești, nu să repete titlul pe care îl
   ai deja scris mare alături. O scurtăm hotărât.
   -------------------------------------------------------------------------- */
html .psn-breadcrumbs > *:last-child,
html nav.psn-breadcrumbs span:last-child {
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: bottom;
}

@media (min-width: 990px) {
  html .psn-breadcrumbs > *:last-child,
  html nav.psn-breadcrumbs span:last-child {
    max-width: 34ch;
  }
}

/* --------------------------------------------------------------------------
   41.5 Etichetele de variantă

   „6 CUTII X 3 BUC” — majuscule dure, cu „X” în loc de semnul de înmulțire.
   Numele vin din datele produsului, deci le corectăm acolo; aici doar
   așezăm eticheta ca pe un element de interfață calm, nu ca pe un strigăt.
   -------------------------------------------------------------------------- */
html .variant-option label,
html [class*="variant-picker"] label {
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

/* Varianta aleasă câștigă contur, nu doar fundal — se distinge clar și
   pentru cine nu percepe bine diferențele de culoare. */
html .variant-option input:checked + label,
html [class*="variant-picker"] input:checked + label {
  box-shadow: 0 0 0 1px currentColor inset;
}


/* --------------------------------------------------------------------------
   41.6 Alinierea titlului de categorii — selectorul corect

   Prima încercare (41.3) a ratat: clasa reală este `psn-cats__head`, cu „s”,
   nu `psn-cat__head`. Regula se aplica pe un selector care nu există nicăieri
   în pagină, deci nu avea niciun efect — genul de greșeală care nu dă nicio
   eroare, doar lipsă de rezultat.
   -------------------------------------------------------------------------- */
html .psn-cats__head,
html .psn-cats__head h2,
html .psn-cats__head p {
  text-align: left;
}

html .psn-cats__head h2::after {
  margin-left: 0;
  margin-right: auto;
}

/* Subtitlul secțiunii nu mai stă centrat sub un titlu aliniat la stânga. */
html .psn-cats__head p {
  margin-left: 0;
  max-width: 62ch;
}


/* --------------------------------------------------------------------------
   41.7 Descrierile din carduri — aceeași înălțime la toate

   Tăierea în Liquid dădea rezultate inegale: trei carduri se opreau cu „…”
   după un număr fix de cuvinte, al patrulea încăpea întreg. Rândul de carduri
   arăta dezordonat tocmai pentru că textele erau tratate diferit.

   Mutăm tăierea în CSS: fiecare descriere ocupă exact două rânduri, iar
   browserul pune elipsa unde trebuie, la lățimea reală a cardului. Toate
   cardurile capătă aceeași înălțime, indiferent cât de lungă e descrierea
   din administrare — inclusiv pentru categoriile pe care le vei adăuga.
   -------------------------------------------------------------------------- */
html .psn-cat-card__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * 1.55em);
}

/* --------------------------------------------------------------------------
   41.8 Butoanele plutitoare acopereau conținutul

   Butonul „înapoi sus” și cel de WhatsApp stau unul lângă altul în colțul din
   dreapta jos și treceau exact peste linkul „Vezi toate produsele” din antetul
   secțiunii. Le așezăm pe verticală, unul deasupra celuilalt, și adăugăm
   distanță față de marginea ferestrei.
   -------------------------------------------------------------------------- */
html .psn-floats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

@media (min-width: 990px) {
  html .psn-floats {
    right: 24px;
    bottom: 24px;
  }
}

/* Antetul de secțiune își păstrează linkul departe de zona butoanelor. */
@media (min-width: 990px) {
  html .psn-cats__head,
  html [class*="product-list"] > [class*="header"] {
    padding-right: 96px;
  }
}

/* --------------------------------------------------------------------------
   41.9 Fundalul imaginii din card

   Zona imaginii avea un gri puțin diferit de albul cardului, deci se vedea un
   dreptunghi în interiorul dalei. Îl înlocuim cu o trecere foarte fină, care
   sugerează adâncime sub produs fără să deseneze o cutie.
   -------------------------------------------------------------------------- */
html .psn-cat-card__visual {
  background: linear-gradient(180deg,
              color-mix(in srgb, currentColor 3%, transparent) 0%,
              color-mix(in srgb, currentColor 7%, transparent) 100%);
  border-radius: 8px;
}


/* ==========================================================================
   42. COȘUL — IERARHIA BUTOANELOR DE PLATĂ (29.07.2026)
   ========================================================================== */

/* --------------------------------------------------------------------------
   42.1 Patru butoane, patru culori, nicio ierarhie

   Sub „Finalizează comanda” (roșu) stăteau Shop Pay (mov), PayPal (galben) și
   Google Pay (negru) — toate de aceeași înălțime. Rezultatul era un perete de
   culori în care butonul principal nu mai conducea nimic, iar ansamblul arăta
   ca o pagină de plată improvizată, nu ca un magazin îngrijit.

   Culorile acelor butoane aparțin furnizorilor de plată și nu pot fi
   schimbate — sunt impuse prin marcă. Ce putem controla este IERARHIA:
   butonul nostru rămâne mare și plin, restul devin secundare ca dimensiune
   și primesc o separare clară, ca alternative, nu ca egale.
   -------------------------------------------------------------------------- */
html .cart__dynamic-checkout-buttons,
html [class*="dynamic-checkout"],
html .shopify-payment-button {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

/* Eticheta care explică ce sunt butoanele de dedesubt. Fără ea, patru
   dreptunghiuri colorate par patru variante egale ale aceluiași lucru. */
html .cart__dynamic-checkout-buttons::before,
html [class*="dynamic-checkout"]::before {
  content: "sau plătește direct cu";
  display: block;
  text-align: center;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  opacity: 0.6;
  margin-bottom: 12px;
}

/* Butoanele de plată rapidă: mai joase decât cel principal, ca ochiul să
   înțeleagă imediat care e drumul obișnuit. */
html [class*="dynamic-checkout"] [role="button"],
html [class*="dynamic-checkout"] iframe,
html .shopify-cleanslate [role="button"] {
  min-height: 44px !important;
  max-height: 46px !important;
}

/* Butonul principal rămâne cel mai important element din rezumat. */
/* ATENȚIE (30.07.2026): aici exista și `html [class*="cart"] button[type="submit"]`,
   un selector care prindea ORICE buton de tip submit din panoul de coș — inclusiv
   butonul rotund „+" al benzii de recomandări (`.psn-upsell__add`, 34×34px), care
   devenea 34×54 cu `border-radius:50%`, adică o elipsă. Scos: butonul real de
   finalizare e acoperit de primele două selectoare (are și clasa
   `cart__checkout-button` și `name="checkout"`) — verificat în panou și pe /cart. */
html .cart__checkout-button,
html button[name="checkout"] {
  min-height: 54px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* --------------------------------------------------------------------------
   42.2 „Total estimat”

   Cuvântul „estimat” lângă suma pe care omul urmează să o plătească
   introduce exact îndoiala pe care nu ți-o dorești în ultimul pas. Suma
   rămâne aceeași; doar o prezentăm ca pe un total ferm, iar explicația
   despre transport stă oricum dedesubt.
   -------------------------------------------------------------------------- */
html .cart-summary__total,
html [class*="totals"] > :first-child {
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   42.3 Rândul de produs din coș

   Titlul ocupa trei rânduri și împingea totul în jos. Îl limităm la două,
   ca rândul să rămână compact și prețul să stea aliniat cu produsul.
   -------------------------------------------------------------------------- */
html .cart-item__name,
html [class*="cart-item"] a[href*="/products/"] {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ==========================================================================
   43. LOTUL 2 — COȘ ȘI PAGINA DE PRODUS (29.07.2026)
   ========================================================================== */

/* --------------------------------------------------------------------------
   43.1 Butoanele de cantitate — cauza reală

   Prima reparație (41.2) nu a avut efect, deși avea `!important`. Inspecția
   regulilor aplicate a arătat de ce, și vina e a unei reguli mai vechi de-ale
   noastre:

     .product-form-buttons .button:not(.button--secondary)
        { background-color: var(--psn-red) !important }

   Ea a fost scrisă pentru butonul „Adaugă în coș”, dar butoanele „−” și „+”
   au și ele clasa `button` și stau în același container. Specificitatea ei
   este (0,3,0), a încercării noastre era (0,2,2) — la `!important` egal,
   câștigă specificitatea, deci butoanele de cantitate rămâneau roșii.

   Nu adăugăm forță oarbă: excludem explicit butoanele de cantitate, cu un
   selector care le descrie exact și trece de (0,3,0).
   -------------------------------------------------------------------------- */
html .product-form-buttons .quantity-selector button.button,
html .product-form-buttons quantity-selector-component button.button,
html .quantity-selector button.quantity-minus,
html .quantity-selector button.quantity-plus {
  background-color: transparent !important;
  color: inherit !important;
}

/* Starea dezactivată se citește ca „momentan indisponibil”, nu ca o culoare
   decolorată a butonului principal. */
html .quantity-selector button:disabled,
html .product-form-buttons .quantity-selector button:disabled {
  opacity: 0.38 !important;
  cursor: not-allowed;
}

/* Zonă de apăsare confortabilă și reacție la trecerea cursorului. */
html .quantity-selector button.quantity-minus:not(:disabled):hover,
html .quantity-selector button.quantity-plus:not(:disabled):hover {
  background-color: color-mix(in srgb, currentColor 8%, transparent) !important;
}

/* --------------------------------------------------------------------------
   43.2 Reasigurările din coș

   În pasul de plată nu putem adăuga nimic — personalizarea aceea cere plan
   Plus. Coșul este deci ULTIMUL ecran pe care îl controlăm, și tocmai acolo
   se decide dacă omul duce comanda până la capăt. Într-un magazin de acest
   fel, întrebarea nerostită e „se vede ce am comandat?”.

   Textul e scris din CSS pentru că structura de blocuri a coșului e generată
   de temă și nu are un loc prevăzut lângă butoane. Sunt trei fapte scurte,
   nu marketing, așezate exact sub butonul care duce la plată.
   -------------------------------------------------------------------------- */
html .cart-summary::after,
html [class*="cart-summary"]::after {
  content: "Colet neutru, fără indicii pe exterior  ·  Retur în 14 zile  ·  Plată securizată";
  display: block;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  font-size: 0.8125rem;
  line-height: 1.6;
  text-align: center;
  opacity: 0.75;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   43.3 „Total estimat” devine mai calm

   Rândul de total trebuie citit dintr-o privire: e ultima cifră pe care o
   verifică omul înainte să apese.
   -------------------------------------------------------------------------- */
html .cart-summary [class*="total"] {
  font-size: 1.0625rem;
}

/* --------------------------------------------------------------------------
   43.4 Galeria de produs — imaginile respiră

   Fotografiile de produs vin pe fundal alb-crem, iar dala din spate avea
   aceeași nuanță: cutia părea lipită de margini. Un spațiu interior mic dă
   impresia de obiect așezat, nu de imagine decupată.
   -------------------------------------------------------------------------- */
@media (min-width: 750px) {
  html .product-media-container img,
  html [class*="product-media"] img {
    transition: transform 0.24s cubic-bezier(.2, .7, .3, 1);
  }

  html .product-media-container:hover img {
    transform: scale(1.03);
  }
}

@media (prefers-reduced-motion: reduce) {
  html .product-media-container img,
  html .product-media-container:hover img {
    transition: none;
    transform: none;
  }
}


/* --------------------------------------------------------------------------
   43.5 Reasigurările apăreau de două ori

   Selectorul din 43.2 folosea `[class*="cart-summary"]`, care se potrivește
   ATÂT cu panoul exterior (`.cart-summary`), CÂT ȘI cu cel interior
   (`.cart-summary__inner`). Amândouă primeau textul, deci el apărea o dată
   deasupra „Reducere” și încă o dată sub butoane.

   Îl anulăm pe cel exterior și îl păstrăm doar pe cel interior, care se
   încheie exact sub butoanele de plată — acolo unde omul se uită ultima
   dată înainte să apese.
   -------------------------------------------------------------------------- */
html .cart-summary::after {
  content: none;
}

html .cart-summary__inner::after {
  content: "Colet neutru, fără indicii pe exterior  ·  Retur în 14 zile  ·  Plată securizată";
  display: block;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  font-size: 0.8125rem;
  line-height: 1.6;
  text-align: center;
  opacity: 0.75;
  text-wrap: balance;
}


/* --------------------------------------------------------------------------
   43.6 Insigna coșului din bara de jos — 9,6px

   Ultima mărime fracționară rămasă pe sait, și cea mai greu de prins: apare
   NUMAI când ai ceva în coș, altfel elementul are dimensiune zero și scapă
   oricărei măsurători. Un număr scris la 9,6px, pe un fundal colorat, e sub
   pragul la care ochiul îl citește dintr-o privire — exact opusul a ce
   trebuie să facă o insignă.
   -------------------------------------------------------------------------- */
html .psn-cart-badge {
  font-size: 0.6875rem; /* 11px */
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1;
  min-width: 18px;
  min-height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* ==========================================================================
   44. DESIGN SYSTEM — O SINGURĂ SCARĂ PENTRU TOT SAITUL (29.07.2026)

   Măsurat pe 5 pagini, la 1440px: 12 definiții paralele pentru colțuri,
   19 tranziții distincte, două grosimi de linie la iconițe și opt dimensiuni
   de iconițe. Nimic din toate acestea nu se vede ca o eroare anume — se vede
   ca „ceva nu e în regulă”, exact senzația pe care o lasă un magazin
   improvizat.

   Corectăm la SURSĂ, în variabilele temei, nu prin reguli peste componente.
   Așa se aliniază automat și tot ce vom adăuga de acum înainte.
   ========================================================================== */

:root,
html {
  /* ---- COLȚURI: patru trepte, plus două forme speciale ----------------
     Erau 0.2rem · 0.25rem · 0.6rem · 0.8rem · 1rem · 5px · 8px · 10px ·
     14px · 32px · 40px · 999px. Valorile în `rem` dădeau și numere
     fracționare (0.6rem = 9,6px), care nu se aliniază cu nimic.        */
  /* VAL 2, 08.08.2026: de la patru trepte (6·10·12·16) la DOUĂ.
     Design system-ul din 29.07 spune 8px pentru suprafețe interioare și
     12px pentru carduri și suprafețe — atât, plus pastilele și cercurile.
     Cele patru trepte erau o etapă intermediară: nimeni nu distinge 6 de 8
     sau 10 de 12 pe ecran, dar patru tokeni întrețin patru decizii.
     Numele temei rămân neatinse, doar valorile se aliniază.               */
  --style-border-radius-xs: 8px;
  --style-border-radius-sm: 8px;
  --style-border-radius-md: 12px;
  --style-border-radius-lg: 12px;
  --style-border-radius-inputs: 8px;
  --style-border-radius-popover: 12px;
  --style-border-radius-pills: 999px;
  --border-radius-sm: 8px;
  --checkbox-border-radius: 8px;
  --variant-picker-button-radius: 8px;
  --psn-radius: 12px;
  /* butoanele rămân pastile, e o decizie de stil, nu o abatere */
  --style-border-radius-buttons-primary: 999px;
  --style-border-radius-buttons-secondary: 999px;

  /* ---- ICONIȚE: patru dimensiuni rotunde, o singură grosime ----------
     Erau 0.6rem (9,6px), 0.85rem (13,6px), 1.25rem, 1.375rem (22px),
     1.5rem. Trei dintre ele nu cădeau pe pixeli întregi, deci liniile
     ieșeau neclare.                                                     */
  --icon-size-2xs: 0.75rem;  /* 12px */
  --icon-size-xs: 1rem;      /* 16px */
  --icon-size-sm: 1.25rem;   /* 20px */
  --icon-size-md: 1.5rem;    /* 24px */
  --icon-size-lg: 2rem;      /* 32px */
  --icon-stroke-width: 1.5px;

  /* ---- MIȘCARE: două viteze, o singură curbă -------------------------
     19 combinații de durată și curbă însemnau că două elemente vecine
     reacționau diferit la aceeași acțiune. Păstrăm o curbă comună; cele
     de sistem (slideshow, spring) rămân neatinse, au rolul lor.        */
  --psn-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --psn-fast: .16s;
  --psn-base: .24s;
  --hover-transition-duration: .24s;
  --hover-transition-timing: cubic-bezier(.2, .7, .3, 1);

  /* ---- UMBRE: trei niveluri ------------------------------------------ */
  --psn-shadow-sm: 0 1px 3px rgba(32, 22, 25, .08);
  --psn-shadow: 0 4px 14px rgba(32, 22, 25, .10);
  --psn-shadow-lg: 0 12px 32px rgba(32, 22, 25, .14);
  --shadow-button: 0 1px 3px rgba(32, 22, 25, .12);
}

/* --------------------------------------------------------------------------
   44.1 Iconițele respectă efectiv grosimea din sistem

   Variabila cerea 1.5px, dar măsurătoarea a găsit și linii de 1px și de 1.8:
   unele iconițe au grosimea scrisă direct în fișierul SVG, deci ignoră
   sistemul. Le aducem pe toate la aceeași grosime.
   -------------------------------------------------------------------------- */
html svg[stroke-width],
html .icon svg,
html svg.icon,
html [class*="icon"] svg {
  stroke-width: var(--icon-stroke-width);
  vector-effect: non-scaling-stroke;
}

/* --------------------------------------------------------------------------
   44.2 Aceeași reacție la trecerea cursorului, peste tot

   Elemente vecine reacționau cu viteze diferite (0,125s lângă 0,24s), ceea ce
   face interfața să pară asamblată din bucăți.
   -------------------------------------------------------------------------- */
html a,
html button,
html .button,
html .card,
html [class*="card"] {
  transition-duration: var(--psn-base);
  transition-timing-function: var(--psn-ease);
}

@media (prefers-reduced-motion: reduce) {
  html *,
  html *::before,
  html *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   44.3 Culori care nu aparțin paletei

   Pe pagina de produs au apărut `rgb(58,58,58)` — un gri neutru într-o paletă
   caldă — și `rgb(26,13,16)`, un al doilea negru aproape identic cu cel de
   brand. Diferențele sunt prea mici ca să fie intenționate și prea mari ca să
   nu se simtă.

   Notă: cele două roșuri și cele două auriuri NU sunt o eroare. Perechea mai
   închisă (`rgb(142,20,24)`, `rgb(168,134,42)`) e folosită pentru text pe
   fundal deschis, unde varianta vie ar scădea contrastul sub pragul lizibil.
   Aceea e o pereche corectă accent/text, nu o inconsecvență.
   -------------------------------------------------------------------------- */
html [style*="rgb(58, 58, 58)"],
html [style*="#3a3a3a"] {
  color: rgb(107, 97, 104);
}


/* --------------------------------------------------------------------------
   44.4 Colțurile — de la unsprezece valori la patru

   Schimbarea variabilelor din 44 nu a fost de ajuns: multe componente au raza
   scrisă direct în regulă, deci nu se uită la sistem. Măsurate pe pagina de
   start, cu elementele care le folosesc:

     50px, 100px, 999px  → trei valori pentru ACELAȘI efect de pastilă
     8, 10, 12, 14, 16, 18px → șase valori pentru colțuri de card
     0 0 14px 14px       → submeniul, colțuri asimetrice

   Inclusiv componenta noastră de categorie era incoerentă cu ea însăși:
   cardul avea 14px, iar imaginea dinăuntru 10px.

   Sistemul final are patru valori, fiecare cu un rost clar:
     8px    — suprafețe INTERIOARE (imagine în card)
     12px   — carduri și suprafețe
     999px  — pastile (butoane, etichete)
     50%    — cercuri (insigne, halou)

   Regula pentru cele două raze de card: cea interioară e mai mică decât cea
   exterioară. Altfel colțul imaginii pare „umflat” față de al cardului, chiar
   dacă nimeni nu poate spune de ce.
   -------------------------------------------------------------------------- */

/* --- pastile: o singură valoare --- */
html .email-signup__input-group,
html .email-signup__button,
html .add-to-cart-text,
html [class*="pill"],
html .psn-hero__badge,
html .psn-hero__btn {
  border-radius: 999px;
}

/* --- carduri și suprafețe --- */
html .psn-cat-card,
html .product-card,
html .card-gallery,
html .product-media__image,
html .image-block__image,
html .psn-cats__grid > li,
html .psn-cat-card__body {
  border-radius: 12px;
}

/* --- suprafețe interioare --- */
html .psn-cat-card__visual,
html .psn-cat-card__visual img {
  border-radius: 8px;
}

/* --- submeniul: aceeași rază ca restul suprafețelor --- */
html .menu-list__submenu {
  border-radius: 0 0 12px 12px;
}

/* --------------------------------------------------------------------------
   44.5 Umbrele — trei niveluri în loc de șase

   Erau amestecate umbre cu rază 8px, 18px, 20px, 26px și 60px, cu opacități
   de la 12% la 45%. O umbră spune cât de „ridicat” e un element; când fiecare
   componentă spune altceva, ierarhia se pierde.
   -------------------------------------------------------------------------- */
html .psn-cat-card,
html .product-card {
  box-shadow: var(--psn-shadow-sm);
}

html .psn-cat-card:hover,
html .product-card:hover {
  box-shadow: var(--psn-shadow);
}

/* 04.08: selectoarele `[class*="drawer"]` și `[class*="popover"]` ELIMINATE
   definitiv. După „degradeurile din meniu" (01.08) și „cutia albă la Cont"
   (31.07), a apărut a patra victimă: `.header__drawer` — învelișul
   hamburgerului din antet — primea umbra de panou (pe pixeli: 255 → 242 la
   x=44, o cutie albă care se termină brusc lângă buton). A cincea:
   `.sticky-add-to-cart__bar`, care are clasa `color-custom-popover` de la
   schema de culori și primea o umbră ÎN JOS, inutilă pe o bară lipită de
   marginea de jos (ea are umbra ei, în sus).

   Umbra de panou se dă acum NOMINAL, panourilor reale, inventariate din DOM:
   sertarul de meniu, dialogurile de sertar (coș, chat) și panoul de sugestii
   al căutării. Un panou nou care plutește peste pagină se adaugă AICI, pe
   nume — nu se reînvie jokerul. */
html .psn-float,
html .predictive-search,
html .menu-drawer,
html .theme-drawer__dialog {
  box-shadow: var(--psn-shadow-lg);
}

/* Resetul de mai jos rămâne ca plasă de siguranță pentru interiorul
   panourilor (istoricul lui e în comentariul de mai sus). */
html [class*="drawer"] [class*="drawer"],
html [class*="popover"] [class*="popover"],
html .menu-drawer *,
html .theme-drawer__dialog * {
  box-shadow: none;
}


/* --------------------------------------------------------------------------
   44.6 Ultimele colțuri care rezistau

   Trei componente și-au păstrat raza proprie: butonul de abonare (100px),
   eticheta „adaugă în coș” (50px) și submeniul (14px). Toate trei o au scrisă
   cu prioritate în foaia temei, deci regula noastră de la specificitate egală
   pierdea. Aici `!important` e justificat: nu suprascriem o decizie de design,
   ci aducem trei excepții accidentale înapoi în sistem.
   -------------------------------------------------------------------------- */
html .email-signup__input-group,
html .email-signup__button,
html .email-signup input,
html .add-to-cart-text,
html .add-to-cart-text__content {
  border-radius: 999px !important;
}

html .menu-list__submenu,
html [class*="submenu"] {
  border-radius: 0 0 12px 12px !important;
}

/* Imaginile și elementele de listă care încă purtau 16px și 18px se aliniază
   la treapta suprafețelor. */
html .psn-cats__grid > li,
html .psn-cats__grid > li > *,
html .psn-hero__media img,
html .psn-about img {
  border-radius: 12px !important;
}


/* ==========================================================================
   45. STABILITATEA LA ÎNCĂRCARE (29.07.2026)
   ========================================================================== */

/* --------------------------------------------------------------------------
   45.1 Hero-ul sărea 175px la încărcare

   Măsurat pe 4G cu procesor de patru ori mai lent: indicele de deplasare a
   conținutului (CLS) era 0,254, din care 0,248 provenea dintr-un singur
   element — `.psn-hero__content`. Pragul peste care Google consideră o pagină
   „slabă” este 0,25.

   Urmărind înălțimea în timp:
     902ms  → hero = 530px
     2734ms → hero = 705px

   Textul rămânea constant la 432px; zona imaginii era cea care se dilata în
   momentul în care fotografia sosea. Până atunci ocupa aproape nimic, iar
   când a apărut a împins tot ce era sub ea.

   Reparația nu e să încărcăm imaginea mai repede, ci să-i PĂSTRĂM LOCUL de la
   prima randare. Imaginea are raport 1:1 (900×900), deci containerul poate
   ști cât spațiu îi trebuie înainte să vadă vreun pixel.
   -------------------------------------------------------------------------- */
html .psn-hero__media {
  aspect-ratio: 1 / 1;
  min-height: 0;
  display: grid;
  place-items: center;
  position: relative;
}

html .psn-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Pe ecran mare hero-ul stă pe două coloane, iar imaginea are mai mult loc
   pe verticală; păstrăm proporția, dar fără să forțăm un pătrat înalt. */
@media (min-width: 990px) {
  html .psn-hero__media {
    aspect-ratio: 4 / 3;
  }
}

/* Haloul decorativ nu trebuie să participe la calculul înălțimii — e doar
   o lumină în spatele produsului. */
html .psn-hero__halo {
  position: absolute;
  inset: 0;
  margin: auto;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   45.2 Restul imaginilor își păstrează locul

   Aceeași măsură, aplicată preventiv acolo unde o imagine intră într-un
   container care altfel ar avea înălțime zero până la încărcare.
   -------------------------------------------------------------------------- */
html .psn-cat-card__visual,
html .product-media-container {
  contain: layout;
}


/* --------------------------------------------------------------------------
   45.3 Corectarea reparației din 45.1

   Prima încercare a mărit saltul, de la 175px la 218px. Cauza e instructivă:
   i-am dat imaginii `height: 100%`, iar asta ANULEAZĂ exact mecanismul care
   rezolvă problema. Imaginea are în cod `width="900" height="900"`; din ele
   browserul calculează singur cât loc îi trebuie, ÎNAINTE să descarce vreun
   pixel — dar numai dacă înălțimea rămâne `auto`. Punând `height: 100%` am
   luat această informație și am lăsat containerul la zero până la sosirea
   fotografiei.

   Revenim la comportamentul corect: lățime fluidă, înălțime calculată din
   raportul propriu al imaginii. Fără valori magice și fără proporții impuse
   de noi — folosim ce știe deja fișierul.
   -------------------------------------------------------------------------- */
html .psn-hero__media {
  aspect-ratio: auto;
  display: block;
  min-height: 0;
}

html .psn-hero__media > a,
html .psn-hero__media > a > img,
html .psn-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Linkul care înconjoară fotografia trebuie să moștenească raportul ei,
   altfel el rămâne containerul gol care produce saltul. */
html .psn-hero__media > a {
  aspect-ratio: 1 / 1;
}


/* ==========================================================================
   46. ARMONIZAREA CULORILOR PE TOT MAGAZINUL (29.07.2026)

   Măsurate opt pagini (404, căutare, contact, retragere, blog, două politici,
   branduri) și comparate cu paleta de brand. Rezultatul: pe lângă cele două
   griuri ale paletei mai circulau ÎNCĂ PATRU, dintre care două complet neutre
   — un gri neutru lângă unul cald se citește ca murdărie, chiar dacă nimeni
   nu poate spune care dintre ele e „greșit”.

   Paleta rămâne aceasta, și doar aceasta:
     rgb(32,22,25)    negru de brand — text principal, suprafețe închise
     rgb(107,97,104)  gri cald       — text secundar
     rgb(122,102,106) gri discret    — text auxiliar
     rgb(196,32,38)   roșu viu       — butoane, accente
     rgb(142,20,24)   roșu de text   — linkuri pe fundal deschis
     rgb(201,162,39)  auriu          — accent, linkuri pe fundal închis
     rgb(168,134,42)  auriu de text  — accent pe fundal deschis
     rgb(248,241,239) crem           — suprafețe calde
   ========================================================================== */

/* --------------------------------------------------------------------------
   46.1 Bara de anunțuri avea propriul negru

   `rgb(26,13,16)` în loc de `rgb(32,22,25)`. Diferența e de câțiva pași pe
   fiecare canal — prea mică pentru a fi intenționată, dar suficientă cât bara
   să nu se lege cu subsolul, care folosește negrul corect.
   -------------------------------------------------------------------------- */
html .section-background[class*="color-c"],
html .announcement-bar .section-background,
html [class*="announcement"] .section-background {
  background-color: rgb(32, 22, 25);
}

/* --------------------------------------------------------------------------
   46.2 Linkurile din subsol erau roz pal

   `rgb(240,184,187)` — o versiune spălăcită a roșului de brand, apărută pe
   toate paginile. Pe fundal închis avea contrast bun, dar nu aparține
   paletei: arată ca o culoare rămasă dintr-o temă demonstrativă.

   Le trecem pe auriu, care e deja culoarea de accent a magazinului și se
   distinge clar de textul alb din jur.
   -------------------------------------------------------------------------- */
html .footer a,
html [class*="footer"] rte-formatter a,
html [class*="footer"] .rte a,
html [class*="footer"] p a {
  color: rgb(201, 162, 39);
  text-underline-offset: 3px;
}

html .footer a:hover,
html [class*="footer"] p a:hover {
  color: rgb(224, 186, 74);
}

/* --------------------------------------------------------------------------
   46.3 Cele patru griuri străine

   58,58,58 și 107,107,107 sunt neutre, deci vizibil mai reci decât paleta;
   139,128,133 și 77,68,73 sunt apropiate de griurile corecte, dar nu identice.
   Toate se aliniază la griul cald de text, care păstrează contrast peste
   pragul AA pe fundal alb (5,9:1).
   -------------------------------------------------------------------------- */
html .field__label,
html .psn-contact__note,
html .psn-retr__help,
html .psn-contact__intro,
html .psn-contact__form-intro,
html .psn-retr__intro,
html .psn-retr__form-intro {
  color: rgb(107, 97, 104);
}

/* Textul introductiv rămâne o treaptă mai puternic decât notele mărunte,
   dar din aceeași familie de culoare. */
html .psn-contact__intro,
html .psn-retr__intro {
  color: rgb(88, 78, 84);
}

/* --------------------------------------------------------------------------
   46.4 Caseta de avertisment de la retragere

   Fundalul `rgb(253,238,238)` era un roz aproape alb, cu tentă rece față de
   cremul magazinului. Îl aducem în aceeași familie caldă și îi dăm o margine
   care îl leagă de roșul de brand.
   -------------------------------------------------------------------------- */
html .psn-retr__warn {
  background-color: rgb(252, 240, 238);
  border-left: 3px solid rgb(196, 32, 38);
}


/* --------------------------------------------------------------------------
   46.5 Trei lucruri rămase după prima rundă de armonizare

   (a) Culoarea pe care am introdus-o EU. La 46.3 am scris `rgb(88,78,84)`
       pentru textul introductiv, ca să fie o treaptă mai puternic decât
       notele. Dar aceasta nu e o culoare din paletă — am rezolvat patru
       abateri adăugând a cincea. Textul introductiv se distinge oricum prin
       mărime și greutate; nu are nevoie de o culoare proprie.

   (b) Bara de anunțuri și-a păstrat negrul propriu: selectorul de la 46.1 nu
       a fost destul de puternic față de schema de culoare a temei.

   (c) Linkurile și textele auxiliare din paginile Contact și Retragere aveau
       griuri proprii, moștenite de la elementele lor părinte.
   -------------------------------------------------------------------------- */

/* (a) — revenim la griul paletei, fără treaptă inventată */
html .psn-contact__intro,
html .psn-retr__intro {
  color: rgb(107, 97, 104);
}

/* (b) — bara de anunțuri primește negrul de brand, indiferent de schema temei */
html .shopify-section [class*="announcement"] .section-background,
html [class*="announcement-bar"] .section-background,
html .announcement-bar__wrapper .section-background,
html .shopify-section-group-header-group .section-background {
  background-color: rgb(32, 22, 25) !important;
}

/* (c) — textele auxiliare din cele două pagini cu formulare */
html .psn-contact a:not(.button):not([class*="btn"]),
html .psn-contact span,
html .psn-retr a:not(.button):not([class*="btn"]),
html .psn-retr span,
html .psn-retr__legal-note,
html .psn-retr p,
html .psn-retr strong {
  color: rgb(107, 97, 104);
}

/* Textul important din aceste pagini rămâne negrul de brand — griul e doar
   pentru ce e secundar. */
html .psn-contact h1,
html .psn-contact h2,
html .psn-contact h3,
html .psn-retr h1,
html .psn-retr h2,
html .psn-retr h3,
html .psn-retr__warn,
html .psn-retr__warn strong,
html .psn-retr__warn p {
  color: rgb(32, 22, 25);
}

/* Linkurile reale din aceste pagini rămân recognoscibile ca linkuri. */
html .psn-contact a[href]:not(.button):hover,
html .psn-retr a[href]:not(.button):hover {
  color: rgb(142, 20, 24);
}


/* --------------------------------------------------------------------------
   46.6 Ultimele două pagini

   Caseta de avertisment o pusesem pe `rgb(252,240,238)` — încă o culoare
   inventată de mine, ca să rezolv una inventată de altcineva. O trecem pe
   cremul care există deja în paletă; roșul de la margine spune destul că e
   un avertisment, nu are nevoie și de un fundal propriu.

   Linkurile și textele auxiliare din Contact și Retragere își iau culoarea
   de la containerele lor de secțiune, nu de la clasele componentei — de aceea
   regulile anterioare nu le-au atins. Le prindem la nivelul secțiunii.
   -------------------------------------------------------------------------- */
html .psn-retr__warn {
  background-color: rgb(248, 241, 239);
}

html .psn-contact-wrap a:not(.button):not([class*="btn"]),
html .psn-contact-wrap span:not([class*="icon"]),
html .psn-retr-wrap a:not(.button):not([class*="btn"]),
html .psn-retr-wrap span:not([class*="icon"]),
html .psn-retr-wrap p,
html .psn-retr-wrap strong,
html section[class*="psn-retr"] p,
html section[class*="psn-retr"] strong,
html section[class*="psn-retr"] span,
html section[class*="psn-contact"] span,
html section[class*="psn-contact"] a:not(.button) {
  color: rgb(107, 97, 104);
}

/* Titlurile și textul cu greutate rămân la negrul de brand. */
html section[class*="psn-retr"] h1,
html section[class*="psn-retr"] h2,
html section[class*="psn-retr"] h3,
html section[class*="psn-contact"] h1,
html section[class*="psn-contact"] h2,
html section[class*="psn-contact"] h3,
html .psn-retr__warn strong,
html .psn-retr__warn p {
  color: rgb(32, 22, 25);
}


/* --------------------------------------------------------------------------
   46.7 Paginile principale — ultimele abateri

   Măsurate pe desktop și pe mobil, cu produs în coș:

     107,107,107  gri NEUTRU pe etichetele din bara de jos (de aceea apărea
                  de mai multe ori pe telefon decât pe ecran mare)
     91,74,78     un gri-maro izolat, pe un paragraf de pe pagina de start
     232,223,219  bej deschis pe panoul coșului, mai rece decât cremul nostru
     58,58,58     pe elemente `visually-hidden` — ascunse pentru ochi, citite
                  doar de cititoarele de ecran. Nu au efect vizual, deci nu le
                  atingem: ar fi o reparație fără obiect.

   Verdele WhatsApp rămâne neatins: e culoarea unei mărci externe, la fel ca
   PayPal sau Google Pay. Schimbată, ar pierde exact recunoașterea pentru care
   există.
   -------------------------------------------------------------------------- */
/* CORECTAT 02.08.2026, semnalat de Cristian: bulina cu numărul de produse din
   bara de jos avea scris gri pe roșu. Contrast măsurat: 1,01 — cifra era
   practic invizibilă.

   Cauza: regula de mai jos prinde ORICE `<span>` din bară, iar bulina e tot un
   span. Ea are `background: var(--psn-red)` și `color: #fff` scrise corect mai
   sus, dar `html .psn-bottom-nav span` are specificitate (0,1,2) față de
   (0,1,0) și câștiga.

   A doua oară când un selector prea larg dintr-o uniformizare de culori atinge
   un element care nu-i aparține. `:not()` e țintit strict pe bulină, ca
   etichetele să rămână cum sunt. */
html .psn-bottom-nav span:not(.psn-cart-badge),
html .psn-bottom-nav__item span:not(.psn-cart-badge),
html .psn-bottom-nav__label {
  color: rgb(107, 97, 104);
}

html .psn-bottom-nav__item[aria-current="page"] span:not(.psn-cart-badge),
html .psn-bottom-nav__item.is-active span:not(.psn-cart-badge) {
  color: rgb(32, 22, 25);
}

/* 04.08: perechea lui minmax(0,1fr) din secțiunea 4. Sub 361px coloana are
   ~53px, iar „WhatsApp" la 11px cere 56,8 — la 10px încape (51,6) dacă
   elementul renunță și la padding-ul lateral de 2px. Elipsa e doar plasă de
   siguranță; la 10px nu se atinge. Stă AICI, nu în secțiunea 4, pentru că
   regula de culoare de mai sus are (0,2,2) și ar bate un selector mai simplu
   scris mai devreme în fișier. */
@media screen and (max-width: 360px) {
  html .psn-bottom-nav__item {
    padding-inline: 0;
  }
  html .psn-bottom-nav span:not(.psn-cart-badge),
  html .psn-bottom-nav__item span:not(.psn-cart-badge) {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.625rem;
  }
}

/* Bulina, scrisă explicit, ca să nu mai depindă de ce moștenește.

   ACELEAȘI VALORI CA BULINA DIN ANTET, măsurate pe ea: cerc de 20×20px,
   fundal `rgb(32, 22, 25)` (cerneala saitului), text alb. Fundalul de sus nu e
   pe `.cart-bubble` — acela e transparent — ci pe un `<span
   class="cart-bubble__background">` dinăuntru; de acolo vine culoarea.

   Era roșie. Roșul e culoarea butoanelor de acțiune; pe o bulină de numărare,
   lângă un buton roșu de „Adaugă în coș", devine încă un accent care cere
   atenție. Cerneala o face să se citească fără să concureze.

   Rămân bold și `tabular-nums`: la 11px, cifra din bara de jos e mai mică decât
   cea din antet și are nevoie de greutate ca să se citească dintr-o privire. */
html .psn-cart-badge {
  background: var(--psn-ink, #201619);
  color: #fff;
  min-width: 20px;
  min-height: 20px;
  line-height: 20px;
}

/* Paragraful izolat de pe pagina de start */
html .psn-usp__text,
html .psn-usp p,
html .psn-about p {
  color: rgb(107, 97, 104);
}

/* Panoul coșului preia cremul paletei */
html .cart-summary .section-background,
html [class*="cart-summary"] .section-background,
html .cart-summary {
  background-color: rgb(248, 241, 239);
}


/* ==========================================================================
   47. SPAȚIERILE — O SINGURĂ SCARĂ (29.07.2026)

   Măsurate pe trei pagini: 21 de distanțe diferite pe pagina de start, 17 pe
   produs, 13 pe colecție. Cauza nu e neglijența, ci scara temei: trei din
   cele nouă trepte sunt definite în `rem` cu zecimale, deci nu cad niciodată
   pe pixeli întregi.

     --gap-2xs: 0.3rem  = 4,8px
     --gap-sm:  0.7rem  = 11,2px
     --gap-md:  0.9rem  = 14,4px

   O distanță de 11,2px lângă una de 12px arată identic la prima vedere, dar
   marginile nu se aliniază niciodată perfect între componente vecine. De aici
   senzația că „ceva e ușor strâmb”, fără să poți arăta unde.

   Trecem întreaga scară pe valori întregi, păstrând treptele existente cât
   mai aproape de ce erau — ca așezarea paginilor să nu se schimbe vizibil.
   ========================================================================== */

:root,
html {
  --gap-3xs: 0.125rem;  /* 2px  — neschimbat */
  --gap-2xs: 0.25rem;   /* 4px  — era 4,8 */
  --gap-xs: 0.5rem;     /* 8px  — neschimbat */
  --gap-sm: 0.75rem;    /* 12px — era 11,2 */
  --gap-md: 0.875rem;   /* 14px — era 14,4 */
  --gap-lg: 1rem;       /* 16px — neschimbat */
  --gap-xl: 1.25rem;    /* 20px — neschimbat */
  --gap-2xl: 2rem;      /* 32px — neschimbat */
  --gap-3xl: 3rem;      /* 48px — neschimbat */
}

/* --------------------------------------------------------------------------
   47.1 Ritmul vertical dintre secțiuni

   Pagina de start avea 72/72 la secțiunile proprii, 48/48 la cele ale temei,
   12/12 la una, și o secțiune cu 40 sus și 56 jos — asimetrică fără motiv.
   Un spațiu inegal sus și jos face secțiunea să pară că „alunecă” în pagină.
   -------------------------------------------------------------------------- */
/* ATENȚIE la specificitate (descoperit 30.07.2026): selectorul cu
   [style*="40px"] are (0,3,1), iar varianta din @media (max-width:749px)
   avea doar (0,2,1) — media query-urile NU adaugă specificitate, deci
   secțiunile cu setare de 40px rămâneau la 48px și pe telefon (pagina de
   căutare). Ambele liste de selectori trebuie ținute IDENTICE. */
html .shopify-section > .spacing-style[style*="40px"],
html .shopify-section > .spacing-style {
  padding-block-start: 48px;
  padding-block-end: 48px;
}

/* Secțiunile mari, editoriale, își păstrează respirația proprie. */
html .psn-usp,
html .psn-cats,
html .psn-about {
  padding-block-start: 72px;
  padding-block-end: 72px;
}

@media (max-width: 749px) {
  html .psn-usp,
  html .psn-cats,
  html .psn-about {
    padding-block-start: 48px;
    padding-block-end: 48px;
  }
  html .shopify-section > .spacing-style[style*="40px"],
  html .shopify-section > .spacing-style {
    padding-block-start: 32px;
    padding-block-end: 32px;
  }
}

/* --------------------------------------------------------------------------
   47.2 Spațiul de sub titluri

   Pe pagina de start un titlu avea 8px dedesubt, altul 16px, iar unul chiar
   −1px. Titlurile de același nivel trebuie să se desprindă la fel de
   conținutul lor, altfel ierarhia se citește inegal.
   -------------------------------------------------------------------------- */
html .psn-cats__head h2,
html [class*="product-list"] h2 {
  margin-block-end: 12px;
}

/* 31.07: titlul sectiunii de brand se desparte de paragraf cu 22px, nu cu 12.
   Aici traieste valoarea reala — regulile `.psn-about__head h2` de mai sus au
   (0,1,1) si pierd in fata acestui `html ...` (0,2,1). Ritmul intentionat al
   sectiunii este 10 (eticheta) / 22 (titlu) / 48 (spre carduri) / 24 (intre
   carduri): fiecare nivel de departare e vizibil mai mare decat cel dinaintea
   lui, asa incat blocul se citeste ca o singura sectiune. */
html .psn-about__head h2 {
  margin-block-end: 20px;
}

html .psn-cats__head p,
html .psn-about__head p {
  margin-block-start: 0;
  margin-block-end: 0;
}


/* --------------------------------------------------------------------------
   47.3 Bara de anunțuri nu e o secțiune de conținut

   Regula de la 47.1 a prins și bara de sus, care a trecut de la 15px la 48px
   sus și jos — adică o bandă de trei ori mai groasă decât trebuie, chiar în
   capul paginii. Bara de anunțuri e un element de interfață, nu o secțiune
   editorială: o excludem explicit și îi redăm dimensiunea proprie.
   -------------------------------------------------------------------------- */
html .shopify-section[class*="announcement"] .spacing-style,
html [class*="announcement-bar"] .spacing-style,
html [class*="announcement"] .spacing-style,
html .announcement-bar,
html .announcement-bar__wrapper {
  padding-block-start: 16px !important;
  padding-block-end: 16px !important;
}

/* 31.07 (punctul 6): pe telefon textul benzii se rupe pe două rânduri, iar cei
   15+15px de padding făceau din ea 63px — 7,5% din primul ecran, înainte de
   orice conținut. Coboară la 9px. Valoarea stă AICI, lângă regula pe care o
   corectează: selectorii de mai sus au (0,3,1) și `!important`, deci o regulă
   scrisă la coada fișierului cu `.announcement-bar` simplu nu i-ar bate. */
@media screen and (max-width: 749px) {
  html .shopify-section[class*="announcement"] .spacing-style,
  html [class*="announcement-bar"] .spacing-style,
  html [class*="announcement"] .spacing-style,
  html .announcement-bar,
  html .announcement-bar__wrapper {
    padding-block-start: 8px !important;
    padding-block-end: 8px !important;
  }
}

/* --------------------------------------------------------------------------
   47.4 Distanțele fracționare care nu foloseau variabilele

   Schimbarea scării din 47 nu a atins aceste componente: ele au valorile
   scrise direct în regulile temei, nu prin `--gap-*`. Rămâneau 4,8 · 11,2 ·
   13,2 și 14,4px — distanțe care nu se aliniază cu nimic din jur.
   -------------------------------------------------------------------------- */
html .add-to-cart-text,
html .add-to-cart__added,
html .sorting-filter__option,
html .column-options,
html .column-options__option {
  gap: 4px;
}

html .facets__inputs-list,
html .facets__inputs-wrapper,
html .column-options-wrapper,
html .variant-option,
html .product-form-buttons,
html .quantity-selector-wrapper {
  gap: 12px;
}

html .price-facet__inputs-wrapper {
  gap: 12px;
}

/* VAL 2, 08.08.2026 — câmpurile de preț din filtre: a treia înălțime de input.
   MĂSURAT: 51px, față de 40px la căutare și 60px la formularul de contact.
   Cei 51 nu erau o decizie, ci o consecință: `padding: var(--input-padding)`
   dă 12,8px (0.8rem) sus și jos — capcana zecimalelor în rem, a treia oară
   pe acest site. 12,8 + 12,8 + text + chenar = 51.
   Rămân DOUĂ înălțimi: 40px compact (căutare, filtre) și 60px pentru
   formulare, unde câmpul se completează de la tastatură și merită să fie mai
   generos. Zona de atingere nu scade sub prag: butonul de aplicare de lângă
   ele are 44px, iar câmpul de filtru se atinge rar pe telefon.             */
html .price-facet__input,
html .price-facet__inputs-wrapper .field__input {
  padding-block: 12px;
  min-height: 40px;
  height: 40px;
}

html .sticky-add-to-cart__bar {
  gap: 12px;
}

html .psn-breadcrumbs {
  gap: 8px;
}

html .psn-usp__text {
  gap: 4px;
}

html .psn-cat-card__cta,
html .psn-cat-card {
  gap: 8px;
}


/* ==========================================================================
   48. ÎNCHIDEREA PUNCTELOR RĂMASE (29.07.2026)
   ========================================================================== */

/* --------------------------------------------------------------------------
   48.1 Textele din banda de avantaje

   Cele trei `<span>` cu gri neutru de pe pagina de start s-au dovedit a fi
   chiar textele care poartă mesajele de încredere: „Ambalaj neutru, fără
   nicio indicație”, „Plătești online cu cardul sau numerar”, „În 14 zile de
   la primirea coletului”.

   Regula anterioară a colorat containerul `.psn-usp__text`, dar textul stă
   într-un `<span>` interior cu culoare proprie. Tocmai mesajele care conving
   erau scrise într-un gri din altă familie decât restul magazinului.
   -------------------------------------------------------------------------- */
html .psn-usp__text span,
html .psn-usp__item span,
html .psn-usp span {
  color: rgb(107, 97, 104);
}

html .psn-usp__title,
html .psn-usp__item strong {
  color: rgb(32, 22, 25);
}

/* --------------------------------------------------------------------------
   48.2 Panoul de sumar din coș

   Fundalul `rgb(232,223,219)` venea de pe `.section-background` din interiorul
   lui `.cart-page__summary`, nu de pe `.cart-summary` — de aceea regula
   anterioară nu l-a atins. E un bej mai rece decât cremul magazinului.
   -------------------------------------------------------------------------- */
html .cart-page__summary .section-background,
html .cart-page__summary > .section-background {
  background-color: rgb(248, 241, 239);
}

/* --------------------------------------------------------------------------
   48.3 Ultimele distanțe de 11,2px

   Trei componente au păstrat valoarea veche pentru că o au scrisă cu
   prioritate în foaia temei: filtrele de pe colecție, iconițele sociale din
   subsol și butoanele din formularul de produs.
   -------------------------------------------------------------------------- */
html .facets__inputs-list,
html .facets__inputs-wrapper,
html .social-icons__wrapper,
html .product-form-buttons {
  gap: 12px !important;
}


/* --------------------------------------------------------------------------
   48.4 Panoul de sumar din coș — a doua încercare

   Fundalul vine dintr-o schemă de culoare a temei (`color-custom-…`) aplicată
   pe `.section-background`, iar schemele sunt scrise cu prioritate mai mare
   decât o regulă obișnuită. Bejul `rgb(232,223,219)` e mai rece decât cremul
   magazinului, iar panoul e exact zona pe care o privește cineva înainte să
   apese pe plată.
   -------------------------------------------------------------------------- */
html .cart-page__summary .section-background,
html .cart-page__summary > .section-background,
html cart-summary-component .section-background {
  background-color: rgb(248, 241, 239) !important;
}

/* ==========================================================================
   49. COMPACTAREA PAGINII — SPAȚII GOALE ȘI BENZI PREA ÎNALTE (30.07.2026)

   Audit măsurat cu Chrome headless + CDP pe 1440 / 1100 / 390 px.
   Cauza principală era în 47.1: selectorul `html .shopify-section .spacing-style`
   era scris cu DESCENDENT, nu cu copil direct. În Horizon clasa `spacing-style`
   stă pe ORICE bloc (prețuri, linkul logoului, dividere, rândul antetului), deci
   regula punea 48px sus+jos pe 84 din cele 85 de blocuri ale paginii, deși îi
   erau destinate 3. Corectat acolo, la sursă, prin adăugarea lui `>`.

   Aici rămân doar cele trei consecințe care nu se rezolvă din selectorul acela.
   ========================================================================== */

/* --------------------------------------------------------------------------
   49.1 Secțiunile proprii aveau DOUĂ paddinguri suprapuse

   72px pe elementul de secțiune (din 47.1) PLUS 34...68px pe wrapperul __inner,
   adică 106-140px de gol la fiecare capăt. O singură sursă de acum înainte:
   ritmul stă pe secțiune, wrapperul se ocupă doar de lățime și de marginile
   laterale. 48px desktop / 32px mobil — scara din design system.
   -------------------------------------------------------------------------- */
html .psn-usp,
html .psn-cats,
html .psn-about {
  padding-block-start: 48px;
  padding-block-end: 48px;
}
html .psn-usp__inner,
html .psn-cats__inner,
html .psn-about__inner {
  padding-block-start: 0;
  padding-block-end: 0;
}
html .psn-hero__inner {
  padding-block-start: 48px;
  padding-block-end: 48px;
}

/* --------------------------------------------------------------------------
   49.2 Banda derulantă: 220,8px pentru un rând de text de 28,8px

   Avea 48px pe secțiune plus încă 48px pe fiecare bloc `divider` dintre
   mesaje. E o bandă de un rând, nu o secțiune de conținut — 20px sunt destui.
   Specificitatea (0,3,2) e necesară ca să bată ritmul de secțiune din 47.1.
   -------------------------------------------------------------------------- */
html .shopify-section[id*="psn_marquee"] marquee-component.section {
  padding-block-start: 20px;
  padding-block-end: 20px;
}

/* --------------------------------------------------------------------------
   49.3 Antetul: 227px pentru un logo de 35px și linkuri de 21,7px

   Două cauze suprapuse. Prima: 48+48px pe rândul logo/meniu ȘI încă 48+48px pe
   linkul logoului — rezolvată de `>` din 47.1; padding-ul cade atunci pe
   `--header-padding` al temei, care e 0.7rem = 11,2px, în afara scării. Îl duc
   pe 16px (12px pe telefon).

   A doua: `overflow-list.js` scrie INLINE `height: 131px` pe elementul cu
   part="list" din shadow DOM-ul meniului, pentru un text de 21,7px — de aici
   ~55px de gol sus și jos în bară. Se corectează din exterior cu ::part().
   Verificat: cele 8 linkuri rămân vizibile la 1440px și 6 la 1100px, iar
   „Mai multe" funcționează în continuare. NU folosi display:none pe slotul
   „more" — golește toată bara de meniu (pățit pe live la 28.07).
   -------------------------------------------------------------------------- */
html .shopify-section .header__columns.spacing-style {
  padding-block-start: 16px;
  padding-block-end: 16px;
}
html .overflow-menu::part(list) {
  height: auto !important;
}

@media (max-width: 749px) {
  html .psn-usp,
  html .psn-cats,
  html .psn-about {
    padding-block-start: 32px;
    padding-block-end: 32px;
  }
  html .psn-hero__inner {
    padding-block-start: 32px;
    padding-block-end: 32px;
  }
  html .shopify-section[id*="psn_marquee"] marquee-component.section {
    padding-block-start: 16px;
    padding-block-end: 16px;
  }
  html .shopify-section .header__columns.spacing-style {
    padding-block-start: 12px;
    padding-block-end: 12px;
  }
}

/* --------------------------------------------------------------------------
   49.4 Pagina de produs: 48px morți sub descriere (30.07.2026)

   `div.product-information.section` e o grilă cu `row-gap: 48px`. Ultimul copil
   e blocul aplicației Judge.me, care rămâne element de grilă chiar și golit —
   are înălțime 0, dar gap-ul de dinaintea lui se aplică oricum. Rezultat: 48px
   de gol între ultima linie a descrierii și marginea secțiunii.

   Cât timp nu există recenzii, Judge.me își pune SINGUR `style="display:none"`
   pe `.jdgm-widget` (setarea `empty_state: hide_widget`, aplicată pe 28.07).
   Mă leg exact de acel semnal, deci regula se stinge singură la prima recenzie:
   când widgetul devine vizibil, `:has()` nu mai potrivește și blocul reapare.
   Ambele scrieri ale stilului inline sunt acoperite; dacă vreodată niciuna nu
   mai potrivește, blocul se AFIȘEAZĂ (eșec în siguranță, nu ascunde recenzii).
   -------------------------------------------------------------------------- */
html .product-information.section > .shopify-app-block:has(> .jdgm-widget[style*="display: none"]),
html .product-information.section > .shopify-app-block:has(> .jdgm-widget[style*="display:none"]) {
  display: none;
}

/* ==========================================================================
   50. ALINIEREA ANTETULUI ȘI SUBSOLUL (30.07.2026)
   ========================================================================== */

/* --------------------------------------------------------------------------
   50.1 Linkurile de meniu erau cu 12px mai sus decât restul rândului

   Observat de Cristian, confirmat prin măsurarea liniilor de bază: mijlocul
   textului celor 8 linkuri de categorie stătea la 73px, în timp ce „Retragere
   comandă" și iconițele de căutare/cont/coș stăteau la 84–85px, adică pe
   centrul rândului. Deci NU erau decalate cele trei — erau decalate cele opt.

   Cauza: corectura din 49.3. Cu `height:auto` pe lista din shadow DOM, bara de
   meniu s-a strâns la înălțimea textului (21,7px) și s-a lipit de marginea de
   sus a rândului de 44px, în loc să se centreze în el.

   Soluția dă linkurilor o cutie de 44px centrată — aliniere corectă ȘI zonă de
   atingere conformă. ATENȚIE: nu adăuga `align-items:center` pe `.menu-list`
   peste asta; combinația decalează linkul fixat „Retragere comandă" cu 12px
   (testat). Selectorul lovește doar linkurile din `<li>`, nu pe cel fixat.
   -------------------------------------------------------------------------- */
html .menu-list__list-item > .menu-list__link {
  min-height: 44px;
  height: auto;
  display: flex;
  align-items: center;
}

/* --------------------------------------------------------------------------
   50.2 Butonul rotund din banda „Completează comanda" era o elipsă (30.07.2026)

   Semnalat de Cristian: după adăugarea unui produs în coș, banda de recomandări
   afișa un buton roșu deformat. Măsurat: 34 lățime × 54 înălțime, cu
   `border-radius: 50%` — deci o elipsă verticală, nu un cerc.

   Cauza NU era în componenta asta (CSS-ul ei cerea corect 34×34), ci în regula
   de la 42.1, care avea selectorul `html [class*="cart"] button[type="submit"]`
   pentru a înălța butonul de finalizare la 54px. Panoul de coș are „cart" în
   clasă, iar butonul „+" e de tip submit — deci îl prindea și pe el. Selectorul
   a fost scos de acolo; aici rămâne o plasă de siguranță, ca o viitoare regulă
   largă pe butoane să nu mai poată întinde acest buton.
   -------------------------------------------------------------------------- */
html .psn-upsell__add {
  width: 44px;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  flex: 0 0 auto;
  padding: 0;
  aspect-ratio: 1 / 1;
}

/* ==========================================================================
   52. SISTEMUL DE BUTOANE ȘI ȚINTELE DE ATINGERE (30.07.2026, faza 4)

   Măsurat înainte: 11 înălțimi de buton și 7 raze în magazin. Aceeași acțiune
   („cumpără acum") apărea la 52, 53,6 și 56 px, cu greutăți de font 400 și 700.

   Sistemul are de acum TREI tipuri:
     · principal  — 56 px, pastilă, roșu plin, Inter 17/700, o singură umbră
     · pe card    — 44 px, pastilă, roșu plin, Inter 15/600
     · iconiță    — 44×44 px, cerc

   IMPORTANT pentru viitor: NU folosi `.add-to-cart-button` ca selector de
   dimensiune. L-am numărat: atinge 11 elemente cu patru înălțimi diferite
   (butonul principal de pe produs, cele de pe carduri, bara fixă). Fiecare tip
   se adresează prin selectorul lui propriu. Numărul de elemente atinse de
   fiecare selector de mai jos a fost verificat pe 5 pagini.
   ========================================================================== */

/* --- principal: butonul din secțiunea de brand (1 element) --- */
html .psn-about__cta {
  min-height: 56px;
  padding-block: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  box-shadow: var(--psn-shadow-red);
}
html .psn-about__cta:hover {
  box-shadow: var(--psn-shadow-red);
}

/* --- principal: bara fixă de cumpărare de pe produs (1 element) --- */
html .sticky-add-to-cart__button {
  min-height: 56px;
  font-size: 1.0625rem;
  font-weight: 700;
}

/* --- pe card: „Adaugă" / „Alege" (9 elemente, toate deja la 44px) --- */
html .product-card .quick-add__button.add-to-cart-button,
html .quick-add .quick-add__button.add-to-cart-button {
  font-size: 0.9375rem;
  font-weight: 600;
}
html .product-card .quick-add__button .add-to-cart-text__content span span,
html .quick-add .quick-add__button .add-to-cart-text__content span span {
  font-size: 0.9375rem;
  font-weight: 600;
}

/* --- newsletter: era 42px și gri neutru (5 elemente) --- */
html .email-signup__button.button-unstyled,
html .email-signup__button {
  min-height: 44px;
  min-width: 44px;
  color: var(--psn-ink);
}

/* --------------------------------------------------------------------------
   52.1 Ținte de atingere

   Punctele de carusel au deja zonă de 44px prin `::after` (secțiunea 32) —
   cei 17,9px măsurați sunt punctul vizibil, nu zona apăsabilă. Nu le ating.
   Rămân trei cazuri reale.
   -------------------------------------------------------------------------- */

/* Butoanele de cantitate: erau 44×48 cu text gri neutru (2 elemente). */
html .product-form-buttons .quantity-selector button.quantity-minus,
html .product-form-buttons .quantity-selector button.quantity-plus,
html .quantity-selector button.quantity-minus,
html .quantity-selector button.quantity-plus {
  min-height: 44px !important;
  height: 44px !important;
  min-width: 44px;
  color: var(--psn-ink) !important;
}

/* Câmpul de cantitate: era 36×27,6 — sub prag, și e pe drumul spre cumpărare. */
html quantity-selector-component input,
html .quantity-selector input,
html input[name="quantity"] {
  min-height: 44px;
  min-width: 44px;
  text-align: center;
}

/* Iconițele sociale din subsol: erau 44×24 (15 elemente pe 5 pagini). */
html footer [class*="social"] a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

/* ==========================================================================
   53. ETAPA 2 — ICONIȚE, MIȘCARE ȘI ROLURILE CULORILOR (30.07.2026)
   ========================================================================== */

/* --------------------------------------------------------------------------
   53.1 Iconițele: aceeași grosime ÎN REALITATE, nu doar în CSS

   Toate declară `stroke-width: 1.5px` din 29.07 — dar se randau la 1,06 /
   1,13 / 1,38 / 1,63 px. Cauza: grosimea conturului se scalează odată cu
   viewBox-ul, iar SVG-urile au viewBox-uri diferite față de dimensiunea la
   care sunt afișate. Deci „1,5px" însemna altceva pentru fiecare iconiță.

   `non-scaling-stroke` scoate grosimea din scalare: 1,5px declarat devine
   1,5px randat, indiferent de viewBox. Numărat: 13 iconițe cu contur pe
   cele 3 pagini verificate (restul de 60 sunt cu umplere, nu le atinge).

   DE CE nu a funcționat regula din 44.1, care cerea deja `non-scaling-stroke`:
   o punea pe elementul `<svg>`. Proprietatea se aplică elementelor de DESEN
   dinăuntru (`path`, `line`, `circle`) și NU se moștenește — deci pe rădăcină
   nu face nimic. De aceea măsurătoarea arăta în continuare grosimi diferite,
   deși CSS-ul părea corect. Regula de mai jos țintește descendenții.
   -------------------------------------------------------------------------- */
html svg[stroke]:not([stroke="none"]) :is(path, line, circle, rect, polyline, polygon, ellipse) {
  vector-effect: non-scaling-stroke;
}

/* --------------------------------------------------------------------------
   53.2 Mișcarea: o singură curbă, două durate

   DECIZIE, cu motiv: design system-ul din 29.07 documenta
   `cubic-bezier(.2,.7,.3,1)`, dar măsurarea arată că tema folosește
   `cubic-bezier(.2,0,.4,1)` pe 1 966 de elemente, iar curba documentată
   apărea de 12 ori. Adopt curba REALĂ ca oficială — e o curbă bună și
   alinierea celor 12 la ea costă nimic, în timp ce invers ar însemna să lupt
   cu întreaga temă. Sistemul rămâne „o singură curbă", doar că e cea corectă.

   Durate: .16s pentru reacții mici (butoane, linkuri), .24s pentru suprafețe
   (carduri, panouri). Componentele proprii care foloseau .16s / .16s / .16s
   / .24s intră pe una dintre cele două.
   -------------------------------------------------------------------------- */
html:root {
  --psn-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --psn-dur-rapid: 0.16s;
  --psn-dur-lent: 0.24s;
}

html .psn-about__cta,
html .psn-contact__submit,
html .psn-hero__btn {
  transition-duration: var(--psn-dur-rapid);
  transition-timing-function: var(--psn-ease);
}
html .product-card .quick-add__button.add-to-cart-button,
html .quick-add .quick-add__button.add-to-cart-button {
  transition-duration: var(--psn-dur-rapid);
  transition-timing-function: var(--psn-ease);
}
html .psn-cat-card,
html .psn-brand-card,
html .blog-post-card {
  transition-duration: var(--psn-dur-lent);
  transition-timing-function: var(--psn-ease);
}
html .menu-list__link,
html .psn-heart,
html .psn-float {
  transition-timing-function: var(--psn-ease);
}

/* --------------------------------------------------------------------------
   53.3 Rolurile culorilor — vocabularul care lipsea

   Până acum paleta spunea CE culori sunt permise, dar nu CÂND se folosesc.
   De aici încolo fiecare culoare are un rol declarat, iar stările de sistem
   (succes / avertizare / eroare) au în sfârșit nume.

     --psn-red        acțiune: tot ce duce la cumpărare
     --psn-red-dark   text roșu pe fundal deschis, stări apăsate
     --psn-gold       accent rar: etichete, sublinieri, linkuri pe fundal închis
     --psn-ink        text principal, suprafețe închise
     --psn-muted      text secundar
     --psn-line       contururi și separatoare — un singur token
     --psn-surface    suprafețe calde (crem)
     --psn-success    confirmări: produs adăugat, formular trimis
     --psn-warning    atenționări care nu blochează: stoc redus, termen
     --psn-error      erori de validare și indisponibilitate

   Verdele și chihlimbarul sunt derivate din temperatura caldă a paletei, ca
   să nu pară importate din altă parte. Verdele WhatsApp rămâne neatins — e
   culoare de brand extern, cu recunoaștere instantanee.
   -------------------------------------------------------------------------- */
html:root {
  /* VAL 1.1 — 08.08.2026:
     --psn-success era #1d7a4c, un AL TREILEA verde, declarat și nefolosit.
     --psn-error era IDENTIC cu --psn-red, deci o eroare de validare arăta
     exact ca un buton de acțiune. Acum eroarea folosește vișiniul. */
  --psn-success: #1c6b3a;
  --psn-warning: #a8862a;
  --psn-error: #8e1418;
}

/* --------------------------------------------------------------------------
   53.4 Ultimele raze de 4px (30.07.2026)

   Numerele de paginare de pe blog raman singurele elemente la 4px dupa ce
   	emplates/blog.json a trecut imaginea cardului de la 4 la 12. Sunt
   componenta proprie, 3 elemente, verificate pe desktop si pe telefon.
   8px = treapta de sistem pentru controale mici.
   -------------------------------------------------------------------------- */
html .psn-blog-pagination__num,
html .psn-blog-pagination__link {
  border-radius: 8px;
}

/* --------------------------------------------------------------------------
   54. BANNERUL CU TOATE MODELELE (30.07.2026)

   Bannerul arăta un singur produs, cu eticheta „Cel mai vândut”. Acum arată
   toate cele patru modele PASSION, într-o grilă 2×2 în același spațiu.

   Specificitatea: regulile vechi ale bannerului sunt la (0,2,0) —
   `.psn-hero .psn-hero__media img` cu umbră proprie și `:hover img` care
   ridica imaginea. Cu o singură fotografie era corect; cu patru, hover-ul pe
   grup le-ar fi ridicat pe toate deodată. De aceea totul aici e prefixat cu
   `html`, adică (0,2,1), și hover-ul de grup e anulat explicit — ridicarea se
   mută pe celula individuală.
   -------------------------------------------------------------------------- */
html .psn-hero .psn-hero__media--multi {
  width: 100%;
  max-width: 400px;
}

html .psn-hero .psn-hero__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

html .psn-hero .psn-hero__cell {
  position: relative;
  margin: 0;
}

html .psn-hero .psn-hero__cell > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: transform var(--psn-dur-lent, 0.24s) var(--psn-ease, var(--psn-ease));
}

html .psn-hero .psn-hero__cell > a:hover {
  transform: translateY(-4px);
}

/* Golul dintre cutii nu venea din `gap`, ci din fișiere. Măsurat pe alfa,
   pe toate patru: 19–25% transparent la stânga, 19–23% la dreapta, ~7% sus,
   ~2% jos. Din celula de 177px, produsul ocupa 103px — restul era aer, deci
   distanța vizuală între două cutii ajungea la ~90px, nu la cei 18px de gap.

   Toate cele patru fotografii sunt 2000×1600 (raport 1,25), iar conținutul
   util e 1140×1440 → raport 19/24. Cu `cover` pe raportul ăsta, browserul
   taie 18,3% din fiecare margine laterală — sub marginea transparentă minimă
   măsurată (19%), deci produsul nu e atins pe niciuna dintre imagini.

   ATENȚIE la înlocuirea fotografiilor: decupajul e calculat pe fișierele
   actuale. O poză încadrată altfel poate fi tăiată. Se remăsoară cu
   `scratchpad/run-alfa.ps1` înainte de a schimba pozele. */
html .psn-hero .psn-hero__cell img {
  width: 100%;
  height: auto;
  aspect-ratio: 19 / 24;
  object-fit: cover;
  filter: drop-shadow(0 14px 22px rgb(0 0 0 / 0.4));
}

/* Hover-ul moștenit de la varianta cu o singură fotografie: anulat pe grup. */
html .psn-hero .psn-hero__media--multi:hover img {
  transform: none;
}

html .psn-hero .psn-hero__cell-nume {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
}

/* Eticheta stă acum pe prima celulă, nu pe tot blocul. */
html .psn-hero .psn-hero__media--multi .psn-hero__flag {
  top: -6px;
  left: -8px;
  z-index: 3;
}

/* Prețul stătea jos-dreapta, unde cu o singură fotografie nu deranja pe nimeni.
   Cu grila 2×2 acolo se află numele ultimului model — măsurat: acoperea complet
   „SENSATION” pe telefon și îl tăia pe desktop. Locul liber e sus-dreapta, în
   oglindă cu eticheta „Cel mai vândut”, deasupra rândului de imagini. */
html .psn-hero .psn-hero__media--multi .psn-hero__price-flag {
  top: -6px;
  right: -6px;
  bottom: auto;
}

/* Haloul aurit acoperea o singură fotografie; acum trebuie să cuprindă grila. */
html .psn-hero .psn-hero__media--multi .psn-hero__halo {
  inset: -8%;
}

@media (max-width: 989px) {
  html .psn-hero .psn-hero__media--multi {
    max-width: 330px;
  }
  html .psn-hero .psn-hero__grid {
    gap: 12px;
  }
}

@media (max-width: 749px) {
  /* 06.08: cutiile trec sub text și se așază pe UN SINGUR RÂND de patru.
     MĂSURAT înainte: grilă 2×2 de 242px lățime, 297px înălțime — cu textul
     mutat deasupra, hero-ul ajungea la 93% din ecran, adică exact ce trebuia
     evitat. Pe un rând, blocul scade la ~100px, hero-ul intră în ~72% din
     ecran, iar toate cele patru produse rămân vizibile, niciunul ascuns.
     Lățimea urcă la 92vw tocmai fiindcă acum sunt patru coloane, nu două. */
  html .psn-hero .psn-hero__media--multi {
    max-width: 92vw;
  }
  html .psn-hero .psn-hero__grid {
    grid-template-columns: repeat(4, 1fr);
  }
  html .psn-hero .psn-hero__grid {
    gap: 12px;
  }
  html .psn-hero .psn-hero__cell-nume {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
  }
  html .psn-hero .psn-hero__media--multi .psn-hero__flag {
    left: -4px;
    padding: 8px 12px;
    font-size: 0.6875rem;
  }
  html .psn-hero .psn-hero__media--multi .psn-hero__price-flag {
    right: -2px;
    padding: 8px 12px;
    font-size: 0.9375rem;
  }
}

/* ==========================================================================
   55. ANTETUL PE TREI RÂNDURI (31.07.2026)
   ==========================================================================

   Cristian a cerut structura din capturile „1.png" și „2.png" de pe Desktop
   (Farmacia Tei și SAM Distribution): bară de informații → logo + căutare
   lată + acțiuni → bandă colorată de categorii.

   ASTA ANULEAZĂ DELIBERAT decizia din 30.07 („antetul e final la 76px").
   Confirmată explicit de Cristian pe 31.07 înainte de execuție. Antetul lipit
   crește de la 76px la ~132px. Dacă cineva citește 49.3 și 50.1 și se miră de
   ce nu mai dau 76px: regulile de acolo sunt intacte, dar se aplică acum doar
   rândului de sus — vezi 55.3.

   Ce e NATIV în temă și nu are nevoie de cod (doar setări în header-group):
     · rândul de jos                  `menu_row: bottom`
     · culoarea benzii de categorii   `background_color_bottom` / `text_color_bottom`
     · banda derulantă de pe telefon  blocul `navigation_bar` din _header-menu
     · etichete text lângă iconițe    `actions_display_style: text`
   Cod nou e doar pentru bara de informații și pentru câmpul de căutare —
   Horizon nu are echivalent pentru niciunul.
   ========================================================================== */

/* --------------------------------------------------------------------------
   55.1 Bara de informații (rândul 1)

   Secțiune separată de `header`, deci NU e lipită la derulare — iese din ecran
   normal și antetul lipit rămâne cât mai scund. Contactul în stânga, linkurile
   în dreapta; pe telefon linkurile se ascund (sunt în subsol) ca bara să nu
   ocupe două rânduri.
   -------------------------------------------------------------------------- */
.psn-topbar {
  background: var(--psn-topbar-fundal, #f8f1ef);
  color: var(--psn-topbar-text, #6b6168);
  border-bottom: 1px solid var(--psn-line, #e7dedb);
}
.psn-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: var(--psn-topbar-inaltime, 40px);
  max-width: var(--page-width, 1400px);
  margin-inline: auto;
  padding-inline: var(--page-margin, 20px);
}
.psn-topbar__contact,
.psn-topbar__linkuri {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}
.psn-topbar__link,
.psn-topbar__program {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  line-height: 1.25;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.psn-topbar__link {
  transition: color var(--psn-dur-rapid, 0.16s) var(--psn-ease, var(--psn-ease));
  /* 04.08: zona de atins era exact înălțimea literelor (14,4px pe telefon,
     16px pe tabletă) — sub orice prag. 12px sus+jos duc ținta la ~38-40px
     FĂRĂ să crească bara: conținutul rămâne sub min-height-ul de 40px al
     rândului, care absoarbe padding-ul. Telefonul e link de conversie,
     „Retragere comandă" e obligație OUG 18/2026. */
  padding-block: 12px;
}
.psn-topbar__link:hover {
  color: var(--psn-wine, #8e1418);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.psn-topbar svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* Linkurile din dreapta dispar pe telefon; contactul rămâne, centrat. */
.psn-topbar--linkuri-doar-desktop .psn-topbar__nav {
  display: none;
}
/* Linkurile din dreapta apar abia de la 1000px.

   MĂSURAT pe live la 768px: contact 417px + linkuri 251px + spațiere 20px =
   688px, dar lățimea utilă e 668px (marginea de pagină e 50px pe latură la
   lățimea aceea). Se rupeau în două rânduri și bara ajungea la 72px în loc
   de 41. Pragul de 750px era greșit — el separă telefonul de restul, nu
   „încape" de „nu încape". Sub 1000px rămâne doar contactul; linkurile sunt
   oricum în subsol. */
@media (min-width: 1000px) {
  .psn-topbar--linkuri-doar-desktop .psn-topbar__nav {
    display: block;
  }
}
@media (max-width: 999px) {
  .psn-topbar__inner {
    justify-content: center;
  }

  .psn-topbar {
    display: none;
  }
  }
@media (max-width: 749px) {
  .psn-topbar__inner {
    justify-content: center;
    gap: 12px;
  }
  .psn-topbar__contact {
    gap: 12px;
    justify-content: center;
  }
  .psn-topbar__link,
  .psn-topbar__program {
    font-size: 0.75rem;
    gap: 4px;
  }
  .psn-topbar svg {
    width: 14px;
    height: 14px;
  }
  /* Emailul e cel mai lung și cel mai puțin folosit de pe telefon. */
  .psn-topbar__contact li:has(.psn-topbar__link[href^="mailto"]) span,
  .psn-topbar__program span {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   55.2 Bara de căutare extinsă (rândul 2, centru)

   Înălțime FIXĂ, nu conținut care crește — altfel apare salt de layout la
   încărcare, iar pagina de acasă are acum CLS 0,000 și trebuie să rămână așa.
   Butonul e în interiorul câmpului, ca în model.
   -------------------------------------------------------------------------- */
.psn-search {
  --psn-search-h: 48px;

  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 760px;
  height: var(--psn-search-h);
  border: 1px solid var(--psn-line, #e7dedb);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  transition: border-color var(--psn-dur-rapid, 0.16s) var(--psn-ease, var(--psn-ease));
}
.psn-search:focus-within {
  border-color: var(--psn-red, #c42026);
}
.psn-search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding-inline: 16px;
  border: 0;
  background: transparent;
  color: var(--psn-ink, #201619);
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1;
}
.psn-search__input::placeholder {
  color: var(--psn-muted, #6b6168);
  opacity: 1;
}
.psn-search__input:focus {
  outline: 0;
}
/* Chrome pune un „x" propriu peste butonul nostru. */
.psn-search__input::-webkit-search-cancel-button {
  display: none;
}
/* 06.08.2026: butonul roșu plin devine o iconiță discretă ÎN interiorul
   câmpului. Motivul e același cu cel de la butoanele de pe carduri: roșul plin
   rămâne pentru acțiunea care chiar contează, nu pentru o lupă. */
.psn-search__btn {
  flex: none;
  width: 44px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--psn-muted, #6b6168);
  cursor: pointer;
  transition: color var(--psn-dur-rapid, 0.16s) var(--psn-ease, var(--psn-ease));
}
.psn-search__btn:hover {
  background: transparent;
  color: var(--psn-red, #c42026);
}
.psn-search__btn svg {
  width: 20px;
  height: 20px;
}

/* Pe telefon și oriunde meniul e în sertar rămâne iconița temei — două
   căutări una peste alta ar fi o greșeală de accesibilitate, nu doar urât. */
@media (max-width: 749px) {
  .psn-search {
    display: none;
  }
}
#header-component[data-menu-style="drawer"] .psn-search {
  display: none;
}

/* --------------------------------------------------------------------------
   55.2b Butonul de căutare pe tabletă: rămâne iconiță (04.08)

   Tema comută la 750px pe „stil text": ascunde iconița (`.desktop:hidden`
   din base.css, cu !important) și arată cuvântul „Caută" — un buton de
   38,9×17px, fără iconiță, pe un ecran care se folosește tot cu degetul.
   Pe 750–989px (unde meniul e în sertar și bara noastră de căutare e
   ascunsă) păstrăm exact tratamentul de pe telefon: iconiță în țintă de
   44×44. `!important` DOAR pe afișarea iconiței — adversarul din base.css
   e el însuși !important; ascunderea textului n-are adversar, merge fără.
   -------------------------------------------------------------------------- */
@media screen and (min-width: 750px) and (max-width: 989px) {
  html search-button .header-actions__action > span.mobile\:hidden {
    display: none;
  }
  html search-button .header-actions__action > .svg-wrapper {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  html search-button .header-actions__action {
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   55.3 Rândul principal și banda de categorii: înălțimi separate

   49.3 punea 16px sus+jos pe TOATE `.header__columns`. Cu două rânduri, banda
   de categorii primea aceiași 16px și ieșea la 76px singură. Regula de la 49.3
   rămâne neatinsă; aici o specializez pe rânduri (specificitate mai mare prin
   `.header__row--*`, deci câștigă fără `!important`).

   Rândul de sus: 48px câmp de căutare + 16+16 = 80px.
   Rândul de jos: 44px cutia linkului (din 50.1) + 4+4 = 52px.
   -------------------------------------------------------------------------- */
html .shopify-section .header__row--top .header__columns.spacing-style {
  padding-block-start: 16px;
  padding-block-end: 16px;
}
html .shopify-section .header__row--bottom .header__columns.spacing-style {
  padding-block-start: 4px;
  padding-block-end: 4px;
}

/* Centrul trebuie să CREASCĂ, altfel `--header-center: auto` îl strânge la
   lățimea conținutului și bara de căutare devine un ciot. */
html .header__row--top .header__columns:has(.psn-search) {
  --header-left: auto;
  --header-center: minmax(0, 1fr);
  --header-right: auto;

  align-items: center;
}
html .header__column--center:has(.psn-search) {
  display: flex;
  justify-content: center;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   55.4 Banda colorată de categorii (rândul 3)

   Fundalul vine din setarea temei (`background_color_bottom`), nu de aici —
   ca să rămână editabil din Customizer. Aici doar ritmul și tipografia.
   -------------------------------------------------------------------------- */
html .header__row--bottom .menu-list__link,
html .header__row--bottom .menu-list__item {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
html .header__row--bottom .menu-list__list {
  gap: 0;
}
/* 09.08.2026 — denumirile de categorii au fost lungite (brief Cristian):
   „PREZERVATIVE & PROTECȚIE", „ÎNTÂRZIEREA EJACULĂRII" etc. Cu 12px pe latură,
   ultima categorie cădea în „Mai multe" de la 1920px în jos. Strâns la 6px —
   singura ajustare permisă de brief (spațierea dintre elementele barei).
   Măsurat: 7/7 categorii vizibile de la 1440px în sus, 6/7 la 1280–1366.
   Nu ascunde „Mai multe" ca să încapă mai multe — vezi 55.11. */
html .header__row--bottom .menu-list__list-item > .menu-list__link {
  padding-inline: 6px;
}
/* Fundalul benzii e închis: starea de hover trebuie să fie o lumină, nu o
   umbră. `color-mix` cu alb merge indiferent ce culoare alege Cristian. */
html .header__row--bottom .menu-list__list-item > .menu-list__link:hover,
html .header__row--bottom .menu-list__list-item > .menu-list__link[aria-expanded="true"] {
  background: color-mix(in srgb, currentColor 12%, transparent);
}

/* --------------------------------------------------------------------------
   55.5 Acțiunile: iconiță ȘI text, ca în model

   Tema tratează `actions_display_style: text` ca „text ÎN LOC DE iconiță": pe
   desktop pune `desktop:hidden` pe învelișul iconiței. Modelul le vrea pe
   amândouă, deci readuc iconița. Nu ating `mobile:hidden` de pe text — pe
   telefon rămâne doar iconița, corect.
   -------------------------------------------------------------------------- */
/* `!important` nu e lene aici: utilitarul temei e
   `.desktop\:hidden { display: none !important }` în base.css, deci nicio
   specificitate nu-l bate. Verificat în fișierul chiar servit de CDN. */
@media (min-width: 750px) {
  html .header-actions--text .svg-wrapper.desktop\:hidden,
  html .header-actions--text [slot="signed-out-avatar"].desktop\:hidden {
    display: inline-flex !important;
    align-items: center;
  }
  html .header-actions--text .header-actions__action,
  html .header-actions--text shopify-account {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
  }
  html .header-actions--text {
    align-items: center;
  }
  html .header-actions--text svg {
    width: 22px;
    height: 22px;
  }
}

/* --------------------------------------------------------------------------
   55.6 Finisajele cerute de Cristian după prima vedere (31.07.2026)

   Trei lucruri, toate vizibile în captura de la 1440px:
   iconițele erau DUPĂ text, „Cont" avea o cutie albă în jur, iar „Retragere
   comandă" stătea pe banda roșie de categorii.
   -------------------------------------------------------------------------- */

/* --- (a) iconița înaintea textului, ca în modele -------------------------- */
/* Ordinea în marcaj e text-apoi-iconiță, iar marcajul vine din temă. `order`
   e singurul instrument care nu cere rescrierea fragmentelor.

   La cont funcționează pentru că `<slot>` din shadow DOM-ul lui `shopify-account`
   e `display: contents` — cele două `<span>`-uri din lumina zilei devin astfel
   copii direcți ai butonului flex dinăuntru, deci `order` li se aplică. Verificat
   pe DOM-ul randat înainte de a scrie regula; dacă Shopify schimbă componenta,
   aici se vede primul. */
@media (min-width: 750px) {
  html .header-actions--text .account-button__text {
    order: 2;
  }
  html .header-actions--text [slot="signed-out-avatar"]:not(.account-button__text) {
    order: 1;
  }
  html .header-actions__cart-icon--text .svg-wrapper {
    order: 1;
  }
  html .header-actions__cart-icon--text > span:not(.svg-wrapper) {
    order: 2;
  }
  html .header-actions__cart-icon--text .cart-bubble {
    order: 3;
  }
}

/* --- (b) cutia albă din jurul lui „Cont" ---------------------------------- */
/* Nu era fundal, era UMBRĂ: `box-shadow: rgba(32,22,25,.14) 0 12px 32px` pe
   `.account-button`, moștenită de la regula de panouri prin clasa
   `color-custom-popover` pe care tema o pune pe declanșator, nu doar pe panou.
   Pe fundal alb, o umbră difuză în jurul unui element transparent se citește
   exact ca o cutie albă. Umbra rămâne pe panoul care se deschide. */
html .header-actions .account-button,
html .header__column .account-button {
  box-shadow: none;
}

/* --- (c) „Retragere comandă" în bara de sus ------------------------------- */
/* Mutat de pe banda de categorii (vezi comentariul din `_header-menu.liquid`).
   NU intră în grupul care se ascunde sub 1000px: e obligație legală, trebuie
   să fie vizibil pe orice lățime. */
.psn-topbar__dreapta {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}
.psn-topbar__link--special {
  font-weight: 600;
  color: var(--psn-wine, #8e1418);
}
.psn-topbar__link--special:hover {
  color: var(--psn-red, #c42026);
}
.psn-topbar__link--special svg {
  width: 15px;
  height: 15px;
}

@media (max-width: 999px) {
  /* Rămâne doar linkul special în dreapta, deci bara se poate întinde iar. */
  .psn-topbar__inner:has(.psn-topbar__link--special) {
    justify-content: space-between;
  }
}
@media (max-width: 749px) {
  .psn-topbar__dreapta {
    gap: 12px;
  }
  .psn-topbar__link--special {
    font-size: 0.75rem;
  }
  .psn-topbar__link--special svg {
    width: 14px;
    height: 14px;
  }
}

/* --------------------------------------------------------------------------
   55.7 Acțiuni pe două rânduri, ca la modelul SAM (31.07.2026)

   „Contul meu / Autentificare" și „Coșul meu / 0,00 lei". Marcajul e în
   `snippets/header-actions.liquid`; aici doar aspectul.

   Doar pe desktop: pe telefon rămân iconițele goale, unde spațiul e de patru ori
   mai mic și un al doilea rând de text ar strivi logo-ul.
   -------------------------------------------------------------------------- */
.psn-act__titlu,
.psn-act__sub {
  display: block;
  white-space: nowrap;
}

@media (min-width: 750px) {
  html .header-actions--text .psn-act {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1px;
    line-height: 1.1;
    text-align: left;
  }
  html .header-actions--text .psn-act__titlu {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--psn-ink, #201619);
  }
  html .header-actions--text .psn-act__sub {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--psn-muted, #6b6168);
    /* Suma se schimbă („0,00 lei" → „1.234,56 lei") și ar împinge bara de căutare
       la fiecare adăugare în coș. Lățimea minimă absoarbe mișcarea. */
    min-width: 62px;
  }

  /* Iconițele urcă la 24px ca să echilibreze blocul de două rânduri. */
  html .header-actions--text svg {
    width: 24px;
    height: 24px;
  }
  html .header-actions--text .header-actions__action,
  html .header-actions--text shopify-account {
    gap: 12px;
    align-items: center;
  }
  html .header-actions--text {
    gap: 28px;
  }

  /* Bulina stă PESTE iconiță, ca în model, nu după text în rând. Tema o scoate
     din poziționarea absolută când e stil text — o punem la loc, altfel apare
     un „0" rătăcit la capătul rândului. */
  html .header-actions__cart-icon--text {
    position: relative;
  }
  html .header-actions__cart-icon--text .cart-bubble {
    position: absolute;
    top: -4px;
    left: 12px;
    right: auto;
  }
}

/* --------------------------------------------------------------------------
   55.8 Bara de informații trebuie să se uite la CONTAINER, nu la fereastră
        (31.07.2026)

   Descoperit testând adăugarea în coș, nu din citit: când se deschide sertarul
   de coș, tema îngustează `.page-wrapper` de la 1440 la 960px — sertarul are
   480px și ÎMPINGE conținutul, nu îl acoperă. Fereastra rămâne însă 1440, deci
   `@media (min-width: 1000px)` continuă să fie adevărat, linkurile rămân
   afișate, iar bara se rupe în două rânduri: 41 → 72px. Măsurat.

   E capcana clasică „media query vs. container": regula întreabă cât e ecranul,
   când de fapt o interesează cât spațiu are elementul.

   Construcția de mai jos e progresivă, nu o rescriere:
     · `@media` rămâne și decide ca până acum;
     · `@container` vine DUPĂ și retrage linkurile când bara însăși e îngustă,
       indiferent ce spune fereastra;
     · pe un browser fără interogări de container blocul e ignorat complet și
       comportamentul e exact cel de dinainte — nimic nu se strică.
   -------------------------------------------------------------------------- */
.psn-topbar {
  container-type: inline-size;
  container-name: psn-topbar;
}

@container psn-topbar (max-width: 999px) {
  .psn-topbar--linkuri-doar-desktop .psn-topbar__nav {
    display: none;
  }
  .psn-topbar__inner {
    justify-content: space-between;
  }
}

/* Sub 760px de container nu mai încape nici emailul întreg lângă restul. */
@container psn-topbar (max-width: 759px) {
  .psn-topbar__contact li:has(.psn-topbar__link[href^="mailto"]) span,
  .psn-topbar__program span {
    display: none;
  }
}

/* Plasă de siguranță: orice s-ar întâmpla cu lățimile, bara rămâne pe UN rând.
   Fără asta, o valoare neprevăzută (un număr de telefon mai lung, o traducere
   mai lată) ar putea încă s-o rupă în două. */
.psn-topbar__inner {
  flex-wrap: nowrap;
}
.psn-topbar__contact {
  flex-wrap: nowrap;
  min-width: 0;
}
.psn-topbar__linkuri {
  flex-wrap: nowrap;
}

/* --------------------------------------------------------------------------
   55.9 Bulina cu numărul de produse ajunsese lângă text, tăiată de marginea
        ecranului (31.07.2026)

   Semnalat de Cristian: „se vede suma dar nu se vede câte produse sunt în coș
   și parcă din coș lipsește o parte".

   MĂSURAT: bulina stătea la x=1672 pe o fereastră de 1920 — în afara grupului
   iconiță+text, lipită de marginea din dreapta, iar cifra „2" ocupa 6px.

   Cauza: tema are, pentru stilul cu text, regula
     `.header-actions__cart-icon--text.header-actions__cart-icon .cart-bubble
      { position: relative; top: 0 }`
   cu specificitate (0,3,0). Regula mea de la 55.7 era (0,2,1) și pierdea, deci
   bulina rămânea în flux, ca al treilea element din rând, după text.

   Aici o egalez la (0,3,1) folosind aceleași două clase plus `html`. Nu e
   `!important` — e specificitate corectă, care se poate în continuare
   suprascrie mai departe dacă e nevoie.

   Bulina se așază PESTE colțul din dreapta-sus al iconiței, ca în model, și
   nu mai poate depăși marginea ferestrei pentru că iconița e primul element
   din grup, nu ultimul.
   -------------------------------------------------------------------------- */
@media (min-width: 750px) {
  html .header-actions__cart-icon--text.header-actions__cart-icon {
    position: relative;
  }
  html .header-actions__cart-icon--text.header-actions__cart-icon .cart-bubble {
    position: absolute;
    top: -2px;
    left: 22px;
    right: auto;
    order: 0;
  }
}

/* --------------------------------------------------------------------------
   55.10 Hover-ul pe banda colorată (31.07.2026)

   Secțiunea 21 pune `color: var(--psn-red)` la trecerea cu mouse-ul peste un
   link de meniu, cu specificitate (1,3,0) — scrisă pe vremea când meniul stătea
   pe rând alb. Pe banda roșie ar însemna roșu pe roșu: linkul dispare exact în
   momentul în care omul îl țintește.

   Pe bandă, semnalul de hover îl dau deja fundalul mai deschis (55.4) și
   sublinierea aurie (secțiunea 14). Textul rămâne alb.
   -------------------------------------------------------------------------- */
@media screen and (min-width: 750px) {
  html #header-component .header__row--bottom .header-menu .menu-list__link:hover,
  html #header-component .header__row--bottom .header-menu .menu-list__link[aria-expanded="true"] {
    color: var(--menu-top-level-font-color, #fff);
  }
}

/* --------------------------------------------------------------------------
   55.11 Banda de categorii pe laptopuri mici (31.07.2026)

   După scoaterea celor 4 categorii goale din meniu, „Mai multe" a dispărut de
   la 900px în sus. Între 750 și 899px însă „Stimulente femei" tot nu încăpea și
   butonul rămânea — din cauza spațierii de 14px pe latură pe care o pusesem în
   55.4 pentru banda largă.

   Aici string spațierea și litera doar în intervalul ăla. Nu ating alte lățimi:
   pe ecran larg banda arată mai bine aerisită.

   DE ȘTIUT: butonul „Mai multe" NU e ascuns cu CSS și nu trebuie să fie
   niciodată. Tema îl ascunde singură când totul încape — asta e starea corectă.
   Dacă îl ascunzi cu o regulă, categoriile care nu încap devin inaccesibile,
   fiindcă între 750 și 1400px nu există nici buton hamburger. S-a pățit pe
   28.07 și a costat o zi. Dacă reapare, adaugă spațiu sau scoate o categorie —
   nu ascunde butonul.
   -------------------------------------------------------------------------- */
@media screen and (min-width: 750px) and (max-width: 899px) {
  html .header__row--bottom .menu-list__list-item > .menu-list__link {
    padding-inline: 8px;
  }
  html .header__row--bottom .menu-list__link,
  html .header__row--bottom .menu-list__item {
    font-size: 0.75rem;
    letter-spacing: 0.03em;
  }
}

/* ==========================================================================
   56. FINISAJE CERUTE DE CRISTIAN DUPĂ ANALIZA PE 4 DISPOZITIVE (31.07.2026)
   ==========================================================================
   Lista celor 11 puncte, primite prin clipboard. Fiecare valoare de aici vine
   dintr-o măsurare pe pagina randată, nu din ochi — cifrele „înainte" sunt
   scrise lângă fiecare regulă ca să se poată verifica dacă s-a schimbat ceva.
   ========================================================================== */

/* --------------------------------------------------------------------------
   56.1 Bara de căutare: mai lată și mai joasă

   MĂSURAT înainte, la 1440px: logo 40..159, căutare 267..1027 (760px lățime,
   48px înălțime), acțiuni 1135..1400. Golurile erau simetrice, 108px de fiecare
   parte.

   Căutarea urcă la 880px (+120, capătul de sus al intervalului cerut), ceea ce
   face golurile 48px — exact reducerea cerută la „spațiul dintre logo și
   căutare". Înălțimea scade de la 48 la 42px (punctul 6).

   ALINIEREA VERTICALĂ NU SE ATINGE: măsurat, mijlocul logoului, al căutării,
   al contului și al coșului stau toate patru la 128px. Erau deja pe aceeași axă.
   -------------------------------------------------------------------------- */
.psn-search {
  --psn-search-h: 42px;

  /* 06.08.2026: 880px -> 460px. MĂSURAT: câmpul depășea 1100px cu tot cu
     buton și devenea elementul dominant al ecranului. O casetă de căutare
     uriașă e potrivită unui magazin cu mii de produse; aici sunt 16, tot
     catalogul intră pe două ecrane. Ea comunica involuntar „ai de căutat mult
     aici". Rămâne centrată, deci antetul respiră în jurul ei. */
  max-width: 460px;
}
.psn-search__btn {
  width: 44px;
}

/* --------------------------------------------------------------------------
   56.2 Bara de informații: contact mai strâns, ierarhie mai clară

   MĂSURAT: spațiere 20px între telefon / email / program, iar linkurile din
   dreapta aveau EXACT aceeași mărime ca „Retragere comandă" (13px) — se
   distingeau doar prin culoare și greutate, insuficient.

   Contactul se strânge la 14px. Linkurile secundare coboară la 12px, ca
   diferența față de linkul principal să fie de mărime, nu doar de nuanță.
   -------------------------------------------------------------------------- */
.psn-topbar__contact {
  gap: 12px;
}
.psn-topbar__linkuri {
  gap: 16px;
}
.psn-topbar__linkuri .psn-topbar__link {
  font-size: 0.75rem;
}
/* Linkul principal câștigă și un pic de spațiu propriu, ca să nu pară al
   cincilea element dintr-o listă de cinci. */
.psn-topbar__dreapta {
  gap: 24px;
}
.psn-topbar__link--special {
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   56.3 Bannerul cu cele 4 cutii: spre centru, cu mai mult aer

   MĂSURAT la 1440px: text 40..799, imagini 920..1320. Rămâneau 80px de gol mort
   la marginea din dreapta, ceea ce împingea grupul optic prea în lateral.

   Cele două cereri se trag una pe alta: mutarea spre centru MICȘOREAZĂ automat
   distanța față de text. Le împac mărind spațierea grilei de la 40 la 88px
   (câștig ~40px) și deplasând grupul cu 35px la stânga (pierdere ~35px). Net:
   imaginile stau mai central, iar distanța față de text rămâne cel puțin ce era.

   `margin-inline-end` pe un element cu `justify-self: center` îl deplasează cu
   jumătate din valoare — de aici 70px pentru o mutare de 35px.
   -------------------------------------------------------------------------- */
@media screen and (min-width: 990px) {
  .psn-hero__inner {
    gap: 88px;
  }
  .psn-hero__media--multi {
    margin-inline-end: 72px;
  }
}

/* Gradientul auriu: valoarea NU se schimbă aici. Regula care îl pictează este
   `.psn-hero .psn-hero__halo` din secțiunea 21 — specificitate (0,2,0), pe care
   un `.psn-hero__halo` scris mai jos în fișier (0,1,0) nu o bate, oricât de
   târziu ar apărea. Am încercat exact asta pe 31.07 și nu s-a întâmplat nimic;
   corecția s-a făcut la sursă, în secțiunea 21.

   56.4 Bannerul de consimțământ: același tipar. Tot ce ține de el trăiește în
   secțiunea 27, unde fiecare declarație are `!important` (banner-ul Shopify își
   injectează propriul CSS după al nostru). Reguli noi scrise aici, fără
   `!important`, pierd în fața regulilor noastre mai vechi — nu în fața Shopify.
   Densitatea cerută la punctul 5 e aplicată acolo, cu măsurătorile alături. */

/* ==========================================================================
   57. FINISAJE — punctele 7, 9 și 10 din lista lui Cristian (31.07.2026)

   Punctul 8 (secțiunea de brand) NU e aici: acolo existau deja reguli-sursă
   clare, iar valorile s-au schimbat la locul lor, în secțiunile 17, 33.2 și
   43. Lecția zilei, plătită de două ori: o regulă nouă scrisă la sfârșitul
   fișierului nu câștigă automat — dacă sursa are specificitate mai mare
   (`.psn-hero .psn-hero__halo`) sau `!important` (bannerul de cookie-uri),
   adăugarea la coadă nu face nimic. Se verifică ÎNTOTDEAUNA cine câștigă
   înainte de a scrie o regulă nouă.
   ========================================================================== */

/* --------------------------------------------------------------------------
   57.1 Cardurile de produs — titlul pe exact două rânduri

   MĂSURAT la 1440px: cardurile au 322×509px, imaginea 322×322, iar titlul e un
   `<p>` cu line-height 25,6px. Titlurile au între 45 și 88 de caractere, deci
   ocupă 2 sau 3 rânduri. Prețurile și butoanele erau DEJA aliniate (toate
   patru la y=2144, respectiv y=2185) pentru că tema rezervă spațiu pentru trei
   rânduri — dar cardurile arătau neuniform, cu un titlu care cobora peste
   ceilalți.

   `min-height` de două rânduri plus tăierea la două rânduri dau tuturor
   cardurilor aceeași casetă de titlu, indiferent de lungimea numelui.

   ATENȚIE, cu efect asupra conținutului: „Prezervative PASSION Clasic, din
   latex natural, lubrifiate și rezistente, diametru 52 mm" (88 de caractere)
   nu încape în două rânduri, deci în card se taie după „rezistente,". Se
   pierde diametrul — o informație de cumpărare. Soluția corectă e scurtarea
   titlului produsului în administrare, nu ascunderea lui prin CSS.
   -------------------------------------------------------------------------- */
.product-card .text-block p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * 1.6em);
}

/* --------------------------------------------------------------------------
   57.2 Linia aurie de sub titlurile de secțiune

   MĂSURAT: 56×3px sub toate cele patru titluri („Alege tipul potrivit", „Cele
   mai vândute", titlul de brand, „Întrebări frecvente"). Sub un titlu de 32px
   lățit pe 900px, linia se citea ca o scăpare, nu ca un accent.

   Urcă la 80px pentru TOATE patru, nu doar pentru FAQ: e un element de sistem,
   iar o singură linie mai lungă ar arăta ca o greșeală. Prefixul `html` e
   necesar — lățimea e scrisă în trei locuri diferite din acest fișier, cu
   specificități între (0,1,1) și (0,2,0).
   -------------------------------------------------------------------------- */
html .psn-cats__head h2::after,
html .psn-about__head h2::after,
html [id$="__product_list_fa6P9H"] h2::after,
html [id$="__psn_faq"] h2::after {
  width: 80px;
}

/* --------------------------------------------------------------------------
   57.3 „Întrebări frecvente" — aer deasupra titlului

   MĂSURAT: 48px între marginea secțiunii și titlu pe desktop, 34px pe telefon.
   Secțiunea dinaintea ei se termină exact la 0px distanță (secțiunile se
   ating), așa că cei 48px erau tot ce despărțea două zone diferite ale paginii.

   Se adaugă pe `padding`, nu pe `margin`: marginile s-ar prăbuși în containerul
   părinte și nu s-ar vedea nimic — exact capcana marginilor verticale dintre
   elemente bloc.
   -------------------------------------------------------------------------- */
[id$="__psn_faq"] h2 {
  padding-block-start: 12px;
}

@media screen and (min-width: 750px) {
  [id$="__psn_faq"] h2 {
    padding-block-start: 24px;
  }
}

/* --------------------------------------------------------------------------
   57.4 Subsolul — titluri de coloană pe aceeași linie și mai mult aer

   MĂSURAT la 1440px: cele trei coloane au 421px fiecare, cu 48px între ele —
   asta era deja corect. Ce NU era: titlul coloanei din mijloc („Informații
   utile") stătea cu 11px mai jos decât celelalte două, pentru că e un
   `<summary>` de acordeon cu `padding: 11.2px 0`, în timp ce vecinele sunt
   titluri obișnuite fără padding.

   Paddingul acela există ca să dea suprafață de atins pe telefon, unde coloana
   chiar se pliază. De aceea corecția e limitată la ≥990px, unde acordeonul e
   mereu deschis și paddingul nu mai are rol funcțional: se mută de sus în jos,
   ca distanța față de lista de linkuri să rămână aceeași.
   -------------------------------------------------------------------------- */
@media screen and (min-width: 990px) {
  .shopify-section-group-footer-group .menu__heading {
    padding-block-start: 0;
    padding-block-end: 20px;
  }

  /* Aer în jurul conținutului: 32/40px erau prea puțin pentru o bandă închisă
     la culoare, care are nevoie de mai multă respirație decât una albă. */
  .shopify-section-group-footer-group .footer-content {
    padding-block-start: 40px;
    padding-block-end: 48px;
  }
}

/* ==========================================================================
   58. PUNCTUL 6 — PRIMUL ECRAN PE TELEFON (31.07.2026)

   MĂSURAT pe 390×844 cu emulare de atingere pornită (obligatorie: fără ea
   antetul se randează la altă înălțime și toate cifrele de mai jos se schimbă):

     bara de anunțuri     0..63    63px   (text pe două rânduri + 15px sus/jos)
     bara de informații  63..104   41px
     rândul de antet    104..164   60px
     imaginile hero     196..552  356px
     eticheta           570..603
     titlul             617..688
     paragraful         698..765
     BUTONUL PRINCIPAL  789..841   ← se termină la 3px de marginea ecranului

   Butonul „Descoperă produsele" era, tehnic, vizibil — dar lipit de marginea
   de jos, adică sub bara browserului pe orice telefon real. Nu e o problemă de
   buton, ci de ce se află deasupra lui: 164px de antet și 356px de imagini
   consumau 62% din ecran înainte ca vizitatorul să vadă vreo acțiune.

   Cele trei tăieri de mai jos însumează ~71px și nu ating nici textul, nici
   numărul de elemente — doar densitatea lor.
   ========================================================================== */

@media screen and (max-width: 749px) {
  /* ------------------------------------------------------------------------
     58.1 Sigla — mai mare, în același rând de 60px

     Cererea „siglă mai mare ȘI antet mai scund" pare contradictorie, dar nu e:
     rândul are 60px, iar sigla ocupa 20px (nume) + 4px + 11px (STORE) = 35px.
     Există loc pe verticală; numele urcă la 23px fără ca rândul să crească.
     Regula trebuie să fie AICI, la coadă: secțiunea 38.3 fixează 20px fără
     media query, deci bate blocul de mobil din secțiunea 16.
     ------------------------------------------------------------------------ */
  .psn-logo__name {
    font-size: 1.4375rem; /* 23px, de la 20px */
  }

  /* ------------------------------------------------------------------------
     58.2 Bara de anunțuri: 63px pentru un rând de text

     Textul „Livrare 19 lei la domiciliu sau easybox · gratuită peste 299 lei"
     are ~64 de caractere și încape în 302px (390 minus cele două săgeți de
     44px) doar pe două rânduri. La 16px cu line-height 1, alea două rânduri
     fac 32px, plus 15+15px de padding.

     Săgețile NU se ascund — sunt singurul mod de a parcurge anunțurile pentru
     cine nu așteaptă rotirea automată. Se lucrează doar pe densitate: 13px cu
     line-height 1,15 și padding 9px. Rezultat așteptat: 63 -> 48px.
     ------------------------------------------------------------------------ */
  /* Paddingul benzii NU se atinge de aici: e scris în secțiunea 47.3 cu
     `!important` și specificitate (0,3,1). Corecția pentru telefon stă acolo,
     lângă regula originală. Aici rămâne doar tipografia. */
  .announcement-bar__slide,
  .announcement-bar__slide p,
  .announcement-bar__slide span,
  .announcement-bar__slide a {
    font-size: 0.8125rem;
    line-height: 1.15;
  }

  /* ------------------------------------------------------------------------
     58.3 Hero: mai puțin aer deasupra și imagini mai strânse

     Grila de imagini avea 289px lățime și 356px înălțime (celule de 139×173).
     Limitată la 255px, celulele devin ~122×152 și grila ~314px — cu 42px mai
     puțin, fără să schimb raportul imaginilor și fără să scot vreuna.
     Padding-ul de sus scade de la 32 la 18px.
     ------------------------------------------------------------------------ */
  /* `html` e obligatoriu: secțiunea 43 fixează 32px prin
     `html .psn-usp, html .psn-cats, html .psn-about, html .psn-hero__inner`,
     adică (0,2,0). Un `.psn-hero__inner` simplu, oricât de jos în fișier, pierde. */
  html .psn-hero__inner {
    padding-block-start: 16px;
  }
  .psn-hero__grid {
    max-width: 255px;
    margin-inline: auto;
  }
}

/* --------------------------------------------------------------------------
   58.4 Cele două iconițe orfane din bara de sus

   VĂZUT în captura de la 390px: după telefon apăreau un plic și un ceas fără
   niciun text lângă ele. Cauza e la 55.8/55.11 — sub 760px de container se
   ascunde `span`-ul din interiorul linkului de email și al programului, dar
   pictograma rămâne. O pictogramă fără etichetă nu comunică nimic: nu se
   înțelege că plicul e o adresă de email și nici ce oră arată ceasul.

   Se ascunde tot elementul, nu doar textul. Emailul și programul rămân în
   subsol și pe pagina de contact, unde au loc pentru etichetă; telefonul, care
   pe telefon e chiar apelabil, rămâne vizibil.
   -------------------------------------------------------------------------- */
@container psn-topbar (max-width: 759px) {
  .psn-topbar__contact li:has(.psn-topbar__link[href^="mailto"]),
  .psn-topbar__program {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   58.5 „Coșul meu" ieșea din ecran pe tabletă

   GĂSIT la verificarea finală, exact la 768px (iPad portret): blocul coșului
   se întindea de la 648 la 772px, adică 4px peste marginea dreaptă, iar
   eticheta se reteza. Pagina NU căpăta bară de derulare orizontală — de asta
   nu apărea la testul obișnuit de depășire — pentru că antetul își taie
   conținutul; textul era pur și simplu tăiat.

   Cauza: etichetele pe două rânduri („Contul meu / Autentificare", „Coșul meu
   / 0,00 lei") se aprind de la 750px în sus, dar antetul de birou, cel cu bara
   de căutare și banda de categorii, începe abia la 990px. Între 750 și 989px
   rula antetul compact — hamburger, siglă, iconițe — în care etichetele nu au
   loc. Sub 990px rămân doar iconițele, ca pe telefon.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 989px) {
  html .header-actions--text .psn-act {
    display: none;
  }
}

/* ==========================================================================
   59. PAGINA DE PRODUS — informația de decizie lângă preț (31.07.2026)

   Din analiza comparativă cu SAM Distribution, punctul cu cel mai mare efect
   asupra conversiei: sub preț trebuie să existe imediat starea stocului,
   termenul de livrare și felul coletului. Până acum, între preț și selectorul
   de ambalaj nu era absolut nimic.

   Blocul e `custom-liquid` în templates/product.json (`psn_info_pret`), pus
   între grupul titlu+preț și separator. Conținutul e calculat, nu scris de
   mână: starea vine din `variant.available`, iar cele două date de livrare se
   obțin numărând zile lucrătoare de la momentul vizitei (sâmbăta și duminica
   sărite; după ora 17 se pornește de a doua zi).

   MĂSURAT după prima urcare, nestilizat: 118px înălțime, cele trei informații
   una sub alta ca o listă obișnuită, iar butonul „Adaugă în coș" împins de la
   952px. Regulile de mai jos îl aduc pe un singur rând.
   ========================================================================== */

.psn-info-pret {
  margin-block-start: 12px;
}

.psn-info-pret__lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.psn-info-pret__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--psn-ink, #201619);
  white-space: nowrap;
}

/* Bifa aurie e semnul de „inclus" folosit deja în secțiunea de brand și în
   hero; o repet aici ca informațiile să se citească drept promisiuni ale
   magazinului, nu ca etichete oarecare. */
.psn-info-pret__item::before {
  content: "✓";
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  color: var(--psn-gold, #c9a227);
}

/* Starea stocului primește altă culoare și alt semn: e singura informație de
   pe rând care se poate schimba de la o zi la alta. Verde = disponibil. */
.psn-info-pret__item--stoc {
  font-weight: 600;
  color: #1c6b3a;
}
.psn-info-pret__item--stoc::before {
  content: "●";
  font-size: 0.6875rem;
  color: #1c6b3a;
}

.psn-info-pret__item--epuizat {
  font-weight: 600;
  color: var(--psn-red, #c42026);
}
.psn-info-pret__item--epuizat::before {
  content: "●";
  font-size: 0.6875rem;
  color: var(--psn-red, #c42026);
}

/* Estimarea de livrare: text secundar, cu datele scoase în evidență. E singura
   propoziție de pe pagină care răspunde la „când primesc coletul?". */
.psn-info-pret__estimare {
  margin: 8px 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--psn-muted, #6b6168);
}
.psn-info-pret__estimare strong {
  font-weight: 700;
  color: var(--psn-ink, #201619);
}

@media screen and (max-width: 749px) {
  .psn-info-pret__lista {
    gap: 8px 12px;
  }
  .psn-info-pret__item,
  .psn-info-pret__estimare {
    font-size: 0.78125rem;
  }

  /* 04.08: pe telefon `.product-information__info` nu are padding lateral —
     titlul și prețul își aduc singure 16px prin clasele spacing-style ale
     temei, dar blocul nostru e copil direct al coloanei și rămânea la x=0,
     lipit de marginea ecranului (insignele CE/ISO se citeau tăiate). Aceiași
     16px ca titlul; `.psn-incredere` e ÎN interiorul blocului, îi moștenește. */
  html .product-information__info .psn-info-pret {
    padding-inline: 16px;
  }
}

/* --------------------------------------------------------------------------
   59.2 Bannerul de consimțământ apare după două secunde

   MĂSURAT: bannerul ocupă permanent ultimii 111px din ecran pe desktop și
   192px pe telefon, indiferent unde s-a derulat. Pe pagina de produs asta
   înseamnă că acoperă zona butonului de cumpărare exact în momentul în care
   vizitatorul ajunge la ea.

   Nu pot micșora textul mai mult — e formularea legală impusă. Ce pot face e
   să nu-l arunc peste prima impresie: două secunde de întârziere, timp în care
   se vede pagina, apoi apare cu o tranziție scurtă.

   IMPORTANT, ca să fie clar dacă cineva citește asta mai târziu: întârzierea
   NU schimbă nimic din punct de vedere legal. Niciun modul cookie nefuncțional
   nu se activează înainte de consimțământ — asta e treaba API-ului Shopify de
   consimțământ, verificată separat prin `gcs` în hiturile GA4. Se amână doar
   afișarea casetei, nu momentul consimțământului.
   -------------------------------------------------------------------------- */
#shopify-pc__banner.shopify-pc__banner__dialog {
  animation: psn-cookie-intrare 320ms ease-out 2s both;
}

@keyframes psn-cookie-intrare {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Cine a cerut mai puțină mișcare vede caseta apărând simplu, tot după 2s. */
@media (prefers-reduced-motion: reduce) {
  #shopify-pc__banner.shopify-pc__banner__dialog {
    animation: psn-cookie-aparitie 1ms linear 2s both;
  }
  @keyframes psn-cookie-aparitie {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

/* ==========================================================================
   60. INSIGNE PE CARDURI + VARIANTE PE UN SINGUR RÂND (31.07.2026)
   ========================================================================== */

/* --------------------------------------------------------------------------
   60.1 Insignele de pe cardurile de produs

   Cerute în analiza comparativă: „Best seller / Nou / XL / Cu arome /
   Texturat" ajută scanarea vizuală a grilei. Textul vine din etichetele
   produsului, prin `snippets/passion-badges.liquid`.

   Stau sus-stânga, peste fotografie. Colțul din dreapta e deja ocupat de
   inimioara de favorite, iar cel de jos de butonul de adăugare rapidă.

   `position: relative` pe card e necesar ca ancoră; dacă tema îl avea deja,
   regula nu schimbă nimic.
   -------------------------------------------------------------------------- */
.product-card {
  position: relative;
}

.psn-insigne {
  position: absolute;
  /* 8px, aceleași coordonate ca bulina nativă (secțiunea 98) — de la VAL 1.5
     pe un card apare ori una, ori cealaltă, deci trebuie să cadă în același loc. */
  top: 8px;
  left: 8px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

/* Cel mult două: a treia ar începe să acopere produsul. */
.psn-insigne .psn-insigna:nth-child(n + 3) {
  display: none;
}

.psn-insigna {
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  background: #fff;
  color: var(--psn-ink, #201619);
  box-shadow: var(--psn-shadow-sm);
}

/* „Best seller" e singura insignă care spune ceva despre alegerea altora, deci
   e singura pe fond roșu. Restul sunt descriptive și rămân neutre, ca să nu
   concureze cu butonul de cumpărare. */
.psn-insigna--best {
  background: var(--psn-red, #c42026);
  color: #fff;
}

.psn-insigna--nou {
  background: var(--psn-gold, #c9a227);
  color: var(--psn-ink);
}

@media screen and (max-width: 749px) {
  .psn-insigne {
    top: 8px;
    left: 8px;
    gap: 4px;
  }
  .psn-insigna {
    padding: 3px 8px;
    font-size: 0.625rem;
  }
}

/* --------------------------------------------------------------------------
   60.2 Butoanele de ambalaj pe un singur rând

   MĂSURAT la 1440px: coloana de informații are 561px, iar grila de variante
   cere minimum 192px pe coloană — 3 × 192 + 24px de goluri = 600px, deci intră
   doar două butoane pe rând și al treilea cade dedesubt. Selectorul ocupa
   171px și împingea butonul „Adaugă în coș" sub prima pagină.

   Textul cel mai lung, „12 cutii × 3 buc", cere 111px plus 26px de padding.
   Cu minimum 168px încap toate trei (3 × 168 + 24 = 528 ≤ 561), iar pe telefon,
   unde coloana are 358px, intră două în loc de una — tot un rând câștigat.
   Ținta de atingere rămâne 52px înălțime, peste prag.
   -------------------------------------------------------------------------- */
html .variant-option--buttons {
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}

/* ==========================================================================
   61. „SE CUMPĂRĂ DES ÎMPREUNĂ" (31.07.2026)

   Secțiune proprie (`sections/passion-impreuna.liquid`), pusă pe pagina de
   produs deasupra recomandărilor generice ale Shopify. Motivul e scris pe larg
   în capul fișierului Liquid: algoritmul Shopify propune produse SIMILARE, iar
   pe un magazin cu cinci sortimente de prezervative asta înseamnă să-i arăți
   cuiva încă patru cutii de prezervative. Aici perechile sunt complementare —
   prezervativ + lubrifiant, prezervativ + potență.
   ========================================================================== */

.psn-impreuna {
  background: var(--psn-surface, #fdf6f4);
  border-block: 1px solid var(--psn-line, #e7dedb);
}

.psn-impreuna__inner {
  max-width: var(--page-width, 1200px);
  margin-inline: auto;
  padding-inline: 40px;
}

.psn-impreuna__heading {
  margin: 0;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  line-height: 1.2;
  color: var(--psn-ink, #201619);
}

.psn-impreuna__sub {
  margin: 8px 0 0;
  font-size: 0.9375rem;
  color: var(--psn-muted, #6b6168);
}

.psn-impreuna__lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

/* Cardul e orizontal, nu vertical ca în grila principală: aici produsul nu e
   subiectul paginii, ci o completare. Formatul lat îl ține vizual subordonat
   produsului principal și încape pe un rând chiar și pe telefon. */
.psn-impreuna__card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--psn-line, #e7dedb);
  border-radius: 12px;
}

.psn-impreuna__media {
  flex: 0 0 84px;
  display: block;
  width: 84px;
  height: 84px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--psn-surface, #fdf6f4);
}

.psn-impreuna__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.psn-impreuna__info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.psn-impreuna__titlu {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.875rem;
  line-height: 1.35;
  font-weight: 600;
  color: var(--psn-ink, #201619);
  text-decoration: none;
}

.psn-impreuna__titlu:hover {
  text-decoration: underline;
}

/* VAL 1.1 — 08.08.2026. Regula prețului: roșul înseamnă REDUCERE.
   Panoul de recomandări afișa toate prețurile în roșu, deși niciunul nu era
   redus — ceea ce golea semnalul de sens exact acolo unde el trebuie să
   funcționeze. Cardul de produs respecta deja regula (vezi secțiunea 24). */
.psn-impreuna__pret {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--psn-ink, #201619);
  /* 28.08.2026: pe cardurile de recomandări, mobil îngust, "149,00 lei"
     se rupea între sumă și monedă. Doar aici, nu global pe preț. */
  white-space: nowrap;
}

/* Roșul revine doar dacă produsul chiar are preț redus. */
.psn-impreuna__pret.is-redus,
.psn-impreuna__pret .price-item--sale {
  color: var(--psn-red, #c42026);
}

.psn-impreuna__form {
  margin: 0;
}

.psn-impreuna__buton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  margin-block-start: 2px;
  padding-inline: 16px;
  border: 1px solid var(--psn-red, #c42026);
  border-radius: 999px;
  background: transparent;
  color: var(--psn-red, #c42026);
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.16s var(--psn-ease), color 0.16s var(--psn-ease);
}

/* Butonul e conturat, nu plin: butonul plin roșu rămâne al produsului
   principal. Două butoane pline pe același ecran ar concura între ele. */
.psn-impreuna__buton:hover {
  background: var(--psn-red, #c42026);
  color: #fff;
}

@media screen and (max-width: 989px) {
  .psn-impreuna__inner {
    padding-inline: 24px;
  }
  .psn-impreuna__lista {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-block-start: 20px;
  }
}

@media screen and (max-width: 749px) {
  .psn-impreuna__inner {
    padding-inline: 16px;
  }
  .psn-impreuna__media {
    flex-basis: 68px;
    width: 68px;
    height: 68px;
  }
}

/* ==========================================================================
   62. MARGINILE VERTICALE PE TELEFON (31.07.2026)

   Din analiză: „pe mobil utilizatorul derulează foarte mult; aș reduce
   aproximativ 20–25% din marginile verticale".

   MĂSURAT pe 390×844 înainte: pagina are 5838px, adică 6,9 ecrane.

   Am pornit de la ipoteza că spațiul vine din padding aplicat de două ori — o
   dată pe secțiune, o dată pe containerul interior. VERIFICAT: fals. Secțiunea
   45 pune deja `html .psn-usp__inner, html .psn-cats__inner,
   html .psn-about__inner { padding-block: 0 }`, deci containerele interioare
   sunt pe zero, iar singurul strat real e cel de pe secțiune: 32px sus și jos.
   Regulile pe care le scrisesem pentru `__inner` n-ar fi făcut nimic — au
   (0,1,0) față de (0,2,0) — și le-am scos în loc să le las moarte în fișier.

   Rămâne tăierea cerută, 32 → 24px, adică exact 25% din marginea verticală.
   Între două secțiuni se ajunge de la 64 la 48px.

   REZULTAT MĂSURAT, ca să nu se aștepte nimeni la minuni: pagina scade cu
   aproximativ 100px din 5838, sub 2%. Marginile nu erau problema. Volumul stă
   în conținut: subsolul are singur 1349px pe telefon, secțiunea de brand
   1011px, iar grila de produse 840px. O scurtare reală a paginii înseamnă
   scurtarea acelor secțiuni, nu a spațiilor dintre ele.
   ========================================================================== */

@media screen and (max-width: 749px) {
  /* Regula-sursă e în secțiunea 43, tot cu prefix `html`; fără prefix aici,
     regula asta ar pierde. */
  html .psn-usp,
  html .psn-cats,
  html .psn-about {
    padding-block-start: 24px;
    padding-block-end: 24px;
  }

  html .psn-hero__inner {
    padding-block-end: 24px;
  }

  html .shopify-section > .spacing-style[style*="40px"],
  html .shopify-section > .spacing-style {
    padding-block-start: 24px;
    padding-block-end: 24px;
  }
}

/* ==========================================================================
   63. AJUSTĂRI DE NIVEL PREMIUM (31.07.2026, lista a treia)
   ========================================================================== */

/* --------------------------------------------------------------------------
   63.1 Zona de încredere de sub preț

   Cerute patru repere: colet ambalat discret, livrare rapidă, plată securizată,
   certificat CE. Le-am pus în locul vechii linii „În stoc • Livrare • Colet",
   ca să nu se repete aceleași cuvinte de două ori la 20px distanță — repetiția
   arată a neglijență, nu a grijă.

   Ce a rămas deasupra lor e singura informație care se schimbă: starea
   stocului și data estimată de livrare.

   „Certificat CE — EN ISO 4074" apare NUMAI la prezervative. EN ISO 4074 e
   standardul pentru prezervative din latex; pus pe o capsulă sau pe un
   lubrifiant ar fi o afirmație falsă. Pentru restul produselor se afișează
   „Produs original, de la producător" (vezi condiția din `psn_info_pret`).

   MĂSURAT nestilizat pe 390px: 196px, adică butonul de cumpărare împins cu
   119px mai jos. Grila de 2×2 de mai jos îl aduce la ~95px.
   -------------------------------------------------------------------------- */
.psn-info-pret__stare {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0;
}

.psn-incredere {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.psn-incredere__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.78125rem;
  line-height: 1.32;
  color: var(--psn-muted, #6b6168);
}

.psn-incredere__item::before {
  content: "✓";
  flex: 0 0 auto;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--psn-gold, #c9a227);
}

@media screen and (max-width: 749px) {
  .psn-incredere {
    gap: 8px 12px;
    margin-block-start: 12px;
  }
  .psn-incredere__item {
    font-size: 0.75rem;
  }
}

/* --------------------------------------------------------------------------
   63.2 Coloana de produs pe telefon: mai puțin drum până la buton

   MĂSURAT pe 390×844: galeria se termină la 560px, iar butonul „Adaugă în coș"
   începea la 1200px — 640px de derulare între ce vezi și ce apeși.
   Descompunere: 5 goluri de 24px între blocuri (120px), zona de încredere
   nestilizată (196px) și eticheta „AMBALAJ" cu spațiul ei.

   Golul coboară la 14px. Nu mai jos: sub ~12px titlul, prețul și selectorul
   încep să pară un singur bloc, iar asta îngreunează citirea, nu o ușurează.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 749px) {
  html .product-details .group-block-content {
    gap: 12px;
  }

  html .product-details variant-picker .variant-option legend {
    margin-block-end: 8px;
  }
}

/* --------------------------------------------------------------------------
   63.3 Breadcrumb: nume scurt pe telefon, întreg pe ecran mare

   Ultimul element se tăia la 22 de caractere cu „…” („Prezervative PASSION
   Clas…"), ceea ce nu ajută pe nimeni. Snippet-ul randează acum două forme;
   aici se alege care se vede. Forma scurtă nu are `max-width`, deci nu mai
   apare niciun „…”.

   Regula de la 41.4 (`html .psn-breadcrumbs > *:last-child`) pune ellipsis pe
   ultimul copil — de aceea ținta de aici e mai adâncă, pe spanurile dinăuntru.
   -------------------------------------------------------------------------- */
.psn-breadcrumbs__scurt {
  display: none;
}

@media screen and (max-width: 749px) {
  html .psn-breadcrumbs > *:last-child,
  html nav.psn-breadcrumbs span:last-child {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .psn-breadcrumbs__lung {
    display: none;
  }

  .psn-breadcrumbs__scurt {
    display: inline;
  }
}

/* --------------------------------------------------------------------------
   63.3-bis CORECȚIE 08.08.2026 — forma scurtă peste 750px

   PROBLEMA (măsurată pe /products/spray-dooz-14000..., la 768/900/1024px):
   selectorul de la 41.4 `html nav.psn-breadcrumbs span:last-child` e un
   selector DESCENDENT, deci nu prinde doar ultimul copil al nav-ului, ci
   ORICE span care e ultimul copil al părintelui său — inclusiv
   `.psn-breadcrumbs__scurt`, care stă înăuntrul lui `__current`.

   Specificitate: (0,2,3) pentru regula de la 41.4 contra (0,1,0) pentru
   `.psn-breadcrumbs__scurt { display:none }`. Regula largă câștigă, deci
   forma scurtă primea `display:inline-block` și era randată — invizibil,
   fiindcă părintele o taie cu ellipsis, dar randată.

   CONSECINȚA VIZIBILĂ: peste 750px se afișa forma LUNGĂ, tăiată la 34ch în
   mijlocul unui cuvânt — „Spray DOOZ 14000 Original, ajută l…”.

   DECIZIA: folosim forma scurtă pe TOATE lățimile și renunțăm la ellipsis.
   E exact intenția scrisă la 41.4 („o firimitură arată UNDE ești, nu repetă
   titlul”) și la 63.3 („forma scurtă nu are max-width, deci nu mai apare
   niciun «…»”). Măsurat la 768px: „Acasă › Sprayuri pentru întârzierea
   ejaculării › Spray DOOZ 14000 Original” ocupă ~460px din 688 disponibili.

   Specificitatea de aici e (0,3,2) — trece peste (0,2,3) fără `!important`.
   -------------------------------------------------------------------------- */

html nav.psn-breadcrumbs .psn-breadcrumbs__current .psn-breadcrumbs__lung {
  display: none;
}

html nav.psn-breadcrumbs .psn-breadcrumbs__current .psn-breadcrumbs__scurt {
  display: inline;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

/* Elementul curent nu mai are nevoie de tăiere: conținutul lui e deja scurt. */
html nav.psn-breadcrumbs .psn-breadcrumbs__current {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

/* --------------------------------------------------------------------------
   63.4 Galeria de produs: același cadru pentru toate imaginile

   MĂSURAT: cadrele au deja raport 1:1 și fundal alb, dar imaginile sursă au
   proporții diferite (390×312 și 390×390) și erau afișate cu `object-fit:
   cover`. „Cover" umple cadrul TĂIND din imagine, iar cât se taie depinde de
   proporția fiecărui fișier — de aici senzația că fotografiile sar de la una
   la alta.

   `contain` arată fiecare fotografie întreagă, în același cadru, cu același
   fundal. Poate rămâne o bandă albă sus-jos la imaginile mai late, dar e
   aceeași bandă la toate, iar produsul nu mai e ciuntit.

   CE NU SE POATE REPARA DIN CSS: a doua imagine e un banner de marketing pe
   fundal închis, complet altă compoziție decât fotografiile de produs pe alb.
   Aia e o problemă de conținut — fișierul trebuie refăcut sau scos din galerie.
   -------------------------------------------------------------------------- */
html .product-media-container .product-media__image,
html .product-media-container img {
  object-fit: contain;
  background-color: #fff;
}

/* --------------------------------------------------------------------------
   63.5 Cele două secțiuni de recomandări, ca un singur bloc

   „Se cumpără des împreună" și „S-ar putea să-ți placă" răspund la două
   întrebări diferite (ce completează produsul vs. ce seamănă cu el), dar
   vizual trebuie să curgă una în alta, nu să pară două pagini lipite.
   Se scoate marginea de jos a primeia și cea de sus a celei de-a doua.
   -------------------------------------------------------------------------- */
html .psn-impreuna {
  padding-block-end: 28px;
  border-block-end: 0;
}

html .psn-impreuna + .shopify-section .section,
html .psn-impreuna + .shopify-section > .section-background > .section {
  padding-block-start: 28px;
}

/* --------------------------------------------------------------------------
   63.6 Bannerul de consimțământ, încă o strângere

   MĂSURAT după runda anterioară: 111px pe desktop, 192px pe telefon.
   Textul e impus legal și nu se atinge; se lucrează doar pe densitate.
   Valorile stau în secțiunea 27, unde e regula-sursă cu `!important`; aici
   rămâne doar ce nu are corespondent acolo.
   -------------------------------------------------------------------------- */
#shopify-pc__banner .shopify-pc__banner__body h2 {
  letter-spacing: 0;
}

/* ==========================================================================
   64. GALERIA DE PRODUS — imaginea tăiată sus (31.07.2026)

   MĂSURAT pe 390×844, slide cu slide: cadrul are 390×330px și `overflow:
   hidden`, dar caseta imaginii începe la −30px față de marginea de sus a
   cadrului și se termină cu 30px înainte de marginea de jos. Adică: se taie
   fix 30px din partea de sus a fiecărei fotografii și rămâne o bandă goală de
   30px dedesubt. Pe imaginea a doua se vedea clar — titlul „Lubrifianți de
   Generația a 2-a" era retezat.

   De ce: cadrul are `aspect-ratio: 1 / 1`, deci la 390px lățime cere 390px
   înălțime, dar galeria e `constrain-height` și îl taie la 330. Imaginea
   rămâne centrată pe cei 390 și iese cu (390−330)/2 = 30px în sus.

   `object-fit: contain` singur nu rezolvă asta — el hotărăște cum stă poza în
   caseta ei, nu unde stă caseta. De aceea se leagă tot lanțul de înălțimi:
   `.product-media` și imaginea primesc înălțimea reală a cadrului.
   ========================================================================== */

/* Veriga ruptă e `.product-media-constraint-wrapper`. Lanțul măsurat, de jos în
   sus: cadrul `slideshow-slide` are 330px (`max-height: 330px`, `display: flex`,
   `overflow: hidden`), dar wrapperul dinăuntru cerea 390px și, fiind centrat de
   flex, ieșea cu 30px în sus și 30px în jos. Wrapperul trebuie să ia înălțimea
   cadrului, nu cadrul pe a lui. */
html slideshow-slide.product-media-container > .product-media-constraint-wrapper,
html .product-media-container .product-media-constraint-wrapper {
  width: 100%;
  height: 100%;
  max-height: 100%;
}

html .product-media-container > .product-media,
html .product-media-container .product-media {
  height: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

html .product-media-container .product-media__image {
  width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  object-fit: contain;
  object-position: center;
}

/* ==========================================================================
   65. ȚINTE DE ATINGERE — auditul final (31.07.2026)

   Găsite pe cele opt lățimi cerute (320, 375, 390, 414, 768, 1024, 1440, 1920),
   pe pagina de acasă și pe cea de produs. Restul a ieșit curat: zero depășire
   orizontală, CLS între 0 și 0,008 (pragul e 0,1), LCP 536–1544ms, nicio
   imagine fără atribut `alt`.

   Ce urmează sunt elementele pe care degetul le ratează. Pragul folosit e 44px
   — recomandarea Apple și Google. Cerința WCAG 2.2 (24×24px) era deja
   îndeplinită peste tot, deci nu era o încălcare, dar pe telefon diferența
   dintre 24 și 44 se simte la fiecare atingere.

   Metoda: NU se măresc elementele vizual. Se adaugă o suprafață transparentă
   în jurul lor cu un pseudo-element, deci desenul rămâne exact cum e.
   ========================================================================== */

@media (pointer: coarse) {
  /* ------------------------------------------------------------------------
     65.1 Punctele galeriei de produs: 18×18px

     Trei buline sub fotografie, de 18px fiecare, la 8px una de alta. Cu un
     deget de ~9mm, atingerea nimerea de multe ori între ele. Bulina rămâne
     de 18px; în jurul ei se întinde o zonă sensibilă de 44px.
     ------------------------------------------------------------------------ */
  html .slideshow-control {
    position: relative;
  }

  /* 05.08: ::after → ::before (vezi secțiunea 92). */
  html .slideshow-control::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    background: transparent;
    transform: translate(-50%, -50%);
  }

  /* ------------------------------------------------------------------------
     65.2 „Retragere comandă" din bara de sus: 134×15px

     Singurul link din bara de informații și, prin OUG 18/2026, unul pe care
     clientul trebuie să-l găsească ușor. 15px înălțime e sub orice prag.
     ------------------------------------------------------------------------ */
  html .psn-topbar__link--special {
    position: relative;
  }

  html .psn-topbar__link--special::after {
    content: "";
    position: absolute;
    inset: -15px -8px;
  }

  /* ------------------------------------------------------------------------
     65.3 Butonul „Adaugă în coș" din „Se cumpără des împreună": 38px
     ------------------------------------------------------------------------ */
  html .psn-impreuna__buton {
    min-height: 44px;
  }

  /* ------------------------------------------------------------------------
     65.4 Butonul de căutare din antet la 768px: 39×17px

     Pe tabletă antetul e cel compact, iar „Caută" e doar text lângă lupă.
     ------------------------------------------------------------------------ */
  html .header-actions button.button-unstyled {
    position: relative;
  }

  html .header-actions button.button-unstyled::after {
    content: "";
    position: absolute;
    inset: -14px -10px;
  }
}

/* ==========================================================================
   66. ȚINTE DE ATINGERE — corecția corecției (31.07.2026)

   Regulile din secțiunea 65 au prins săgețile caruselului, dar nu și cele două
   ținte care chiar aveau nevoie. Verificat cu `document.elementFromPoint`, nu
   cu `getBoundingClientRect`: pseudo-elementele nu apar în cutia elementului,
   deci singurul mod cinstit de a testa o zonă de atingere e să întrebi pagina
   „ce se află în punctul ăsta?", exact ca degetul.
   ========================================================================== */

@media (pointer: coarse) {
  /* ------------------------------------------------------------------------
     66.1 Bulinele galeriei

     Structura reală: `<li><button class="slideshow-control button
     button-unstyled">1</button></li>` — 18×18px, `overflow: hidden`,
     `font-size: 0`. Săgețile au aceleași clase, dar stau în `slideshow-arrows`
     și au deja 44px, de aceea ținta e `li > button`.

     `overflow: hidden` era exact motivul pentru care zona adăugată la 65.1 nu
     făcea nimic: tăia pseudo-elementul. Se poate trece pe `visible` fără risc,
     fiindcă cifra dinăuntru e deja ascunsă cu `font-size: 0` — rămâne citită de
     cititoarele de ecran, dar nu ocupă spațiu.
     ------------------------------------------------------------------------ */
  html li > button.slideshow-control {
    position: relative;
    overflow: visible;
  }

  /* CORECTAT 05.08.2026 — comentariul de mai jos era greșit și a costat trei
     luni de buline deformate. Ce spunea: „Horizon pune deja o zonă de atingere
     de 44×44px, prin styles.css". Ce face Horizon de fapt:

       .slideshow-controls__dots button:after {
         background-color: var(--color); width: var(--size); height: var(--size);
         border-radius: calc(var(--size) / 2);   /* = cerc de 8,96px */
       }

     `::after` NU e o zonă de atingere — e PASTILA VIZIBILĂ însăși. Scriind în
     el 24×44px, îi dădeam pastilei forma zonei de atins: o ELIPSĂ verticală
     albă de 24×44, nu un cerc de 9px. Se vedea pe fiecare pagină de produs.

     De ce nu s-a prins la măsurare: `getBoundingClientRect()` pe buton dă
     17,9×17,9 — cutia butonului, corectă. Pastila deformată e în pseudo-element,
     care nu apare în DOM. S-a văzut abia pe captura mărită.

     Reparația: zona de atins trece pe `::before`, care chiar e liber
     (`content: none` în temă), iar `::after` rămâne al temei, neatins.
     Lățimea rămâne 24px (pragul WCAG 2.2), înălțimea 44px. */
  html ol.slideshow-controls__dots li > button.slideshow-control::before,
  html [class*="slideshow-controls"] li > button.slideshow-control::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 44px;
    background: transparent;
    transform: translate(-50%, -50%);
  }

  /* ------------------------------------------------------------------------
     66.2 Butonul de căutare din antet, pe tabletă

     La 768px are 39×17px. Regula de la 65.4 îl căuta ca descendent al
     `.header-actions`, dar clasa e chiar pe buton (`header-actions__...`),
     nu pe un părinte. De aceea nu s-a aplicat nimic.
     ------------------------------------------------------------------------ */
  html button[class*="header-actions"] {
    position: relative;
    overflow: visible;
  }

  html button[class*="header-actions"]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 44px;
    min-height: 44px;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
  }
}

/* ==========================================================================
   67. ÎNAINTE DE LANSARE — lista a patra (31.07.2026)
   ========================================================================== */

/* --------------------------------------------------------------------------
   67.1 Bannerul de consimțământ, a treia strângere

   MĂSURAT acum, componentă cu componentă:
     desktop 98px = padding 9+9, titlu 18, paragraf 51 (3 rânduri de 16,9px),
                    butoane 39px, dar nealiniate: 840 vs 839, fiindcă
                    „Gestionați preferințele" are 37px și celelalte 39px.
     mobil  177px = padding 8+8, titlu 16, gol 6, paragraf 76 (5 rânduri de
                    15,2px la 11,5px), gol 6, rândul de butoane 51px pentru
                    butoane de 36px.

   CE SE POATE ȘI CE NU. Cererea e −35–40%. Din cei 177px de pe telefon, 76
   sunt paragraful legal — 43%. Textul e impus de Shopify și NU se scurtează;
   tăierea lui vizuală (line-clamp) ar ascunde și linkul către politica de
   confidențialitate, care e chiar în interiorul paragrafului. Deci reducerea
   se ia din tot restul, până la ultimul pixel disponibil.

   Titlul „Consimțământ privind modulele cookie" trece în regim ascuns-vizual:
   rămâne în DOM și rămâne numele accesibil al dialogului (`aria-labelledby`
   arată spre el), dar nu mai ocupă 22px pe un ecran de 844. Prima propoziție
   a paragrafului spune oricum despre ce e vorba.
   -------------------------------------------------------------------------- */

/* Butoanele: aceeași înălțime, aceeași linie. Diferența de 2px venea din
   faptul că butonul de preferințe are alt stil de bordură decât celelalte. */
#shopify-pc__banner .shopify-pc__banner__btns {
  align-items: center !important;
}

#shopify-pc__banner .shopify-pc__banner__btns button {
  min-height: 34px !important;
  height: 34px !important;
  padding-block: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.2 !important;
}

#shopify-pc__banner .shopify-pc__banner__wrapper {
  padding-block: 8px !important;
}

#shopify-pc__banner .shopify-pc__banner__body h2 {
  font-size: 13px !important;
  margin-block-end: 1px !important;
}

#shopify-pc__banner .shopify-pc__banner__body p {
  font-size: 12px !important;
  line-height: 1.3 !important;
}

@media (max-width: 989px) {
  #shopify-pc__banner .shopify-pc__banner__wrapper {
    gap: 4px !important;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Titlul rămâne pentru cititoarele de ecran, dar nu mai ocupă spațiu. */
  #shopify-pc__banner .shopify-pc__banner__body h2 {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }

  #shopify-pc__banner .shopify-pc__banner__body p {
    font-size: 11px !important;
    line-height: 1.28 !important;
  }

  #shopify-pc__banner .shopify-pc__banner__btns {
    gap: 8px !important;
  }

  #shopify-pc__banner .shopify-pc__banner__btns button {
    min-height: 36px !important;
    height: 36px !important;
    font-size: 11.5px !important;
  }
}

/* După Acceptare/Refuz, Shopify pune `display: none` pe banner. Regula de mai
   jos e o plasă: dacă rămâne în pagină cu `display` schimbat de altcineva, tot
   nu ocupă spațiu și nu lasă gol. */
#shopify-pc__banner[style*="display: none"],
#shopify-pc__banner[aria-hidden="true"] {
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* --------------------------------------------------------------------------
   67.2 Pagina de produs pe telefon: imaginea mai mică, titlul mai sus

   MĂSURAT pe 390×844: galeria 330px, apoi 28px de alb, apoi titlul la 588.
   Cu antetul de 150px, primul ecran se termină exact în titlu.

   Galeria coboară la 280px (−15%, exact cât s-a cerut), iar golul până la
   titlu la 12px. Împreună, titlul urcă cu 66px și intră întreg în primul
   ecran, iar prețul apare imediat sub el.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 749px) {
  html slideshow-slide.product-media-container,
  html .card-gallery slideshow-component,
  html .card-gallery slideshow-container,
  html .card-gallery slideshow-slides {
    max-height: 280px;
  }

  html .card-gallery,
  html media-gallery {
    margin-block-end: 0;
  }

  html .product-details .group-block-content {
    gap: 12px;
  }
}

/* --------------------------------------------------------------------------
   67.3 Bulinele sliderului: mai aproape de imagine și mai fluide

   MĂSURAT: bulinele stau la 522..554, adică la 6px de marginea de jos a
   cadrului, peste fotografie. Urcă cu 10px și primesc centrare explicită.

   Tranziția între imagini era 0,24s. La 0,34s mișcarea se citește ca o
   trecere, nu ca o clipire — mai ales pe telefon, unde degetul o pornește.
   -------------------------------------------------------------------------- */
/* ATENȚIE: NU se pune `display: flex` pe `ol.slideshow-controls__dots`. Am
   încercat pe 31.07 și lista s-a turtit de la 78×31 la 43×9 — bulinele își iau
   dimensiunea din așezarea proprie a temei. Centrarea era oricum deja corectă
   (`justify-content: center`, verificat). Se mută doar containerul mai sus. */
@media screen and (max-width: 749px) {
  html slideshow-controls.media-gallery__mobile-control,
  html [class*="media-gallery__mobile-control"] {
    bottom: 14px;
  }
}

/* Tranziția între imagini: 0,24s se citea ca o clipire. Selectorul include
   clasa `product-media-container`, altfel pierde în fața regulii din
   `styles.css`, care se încarcă după fișierul nostru. */
html slideshow-slide,
html slideshow-slide.product-media-container {
  transition: opacity 0.24s var(--psn-ease), visibility 0.24s var(--psn-ease);
}

/* --------------------------------------------------------------------------
   67.4 Cardurile „Se cumpără des împreună" pe telefon

   MĂSURAT: 150px înălțime pe mobil (125 pe desktop), din care 68px imaginea,
   14px padding de fiecare parte și 16px între imagine și text.

   Imaginea coboară la 56px, paddingul la 10px, golul la 12px. Butonul urcă pe
   același rând cu prețul, ca să nu mai ceară un rând propriu.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 749px) {
  .psn-impreuna__card {
    padding: 12px;
    gap: 12px;
    border-radius: 12px;
  }

  .psn-impreuna__media {
    flex-basis: 56px;
    width: 56px;
    height: 56px;
    border-radius: 8px;
  }

  .psn-impreuna__info {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2px 12px;
  }

  .psn-impreuna__titlu {
    grid-column: 1 / -1;
    font-size: 0.8125rem;
  }

  .psn-impreuna__pret {
    grid-column: 1;
    font-size: 0.875rem;
  }

  .psn-impreuna__form,
  .psn-impreuna__buton--link {
    grid-column: 2;
    grid-row: 2;
  }

  .psn-impreuna__buton {
    margin-block-start: 0;
    padding-inline: 12px;
    font-size: 0.75rem;
  }
}

/* ==========================================================================
   68. FINISAJE DUPĂ PRIMA MĂSURARE A LOTULUI 4 (31.07.2026)
   ========================================================================== */

/* --------------------------------------------------------------------------
   68.1 Rândul de butoane din bannerul de cookie-uri

   MĂSURAT: containerul are 51px pentru butoane de 36px. Cei 15px în plus vin
   din line-height-ul propriu al containerului (16px font, ~19px line-height),
   care creează un rând-fantomă în grilă. `line-height: 0` pe container îl
   elimină; butoanele își au propriul line-height, deci textul lor nu suferă.

   GREȘEALĂ DE EVITAT, făcută și corectată în aceeași zi: prima variantă punea
   pe container și `font-size: 0`. Butoanele moștenesc mărimea fontului, așa că
   textul lor a dispărut — pe desktop „Acceptare" a ajuns un dreptunghi gol de
   38px lățime. Se atinge DOAR `line-height`, pe care butoanele și-l redefinesc.
   -------------------------------------------------------------------------- */
#shopify-pc__banner .shopify-pc__banner__btns {
  line-height: 0 !important;
}

#shopify-pc__banner .shopify-pc__banner__btns button {
  line-height: 1.2 !important;
}

/* --------------------------------------------------------------------------
   68.2 Distanța dintre galerie și titlu, pe telefon — ÎNCERCARE ANULATĂ

   Am presupus că cei 28px vin din `--gap` al grilei paginii de produs. Fals:
   `gap: 14px` pe `.product-information__grid` a MĂRIT distanța la 42px și a
   îngustat titlul de la 358 la 344px, fiindcă grila aceea nu așază fotografia
   sub titlu, ci coloanele între ele.

   Cei 28px sunt marginea proprie a galeriei plus paddingul de sus al coloanei
   de informații. Nu-i ating: 28px între o fotografie și titlul ei e o distanță
   normală, iar titlul a urcat oricum cu 50px odată cu galeria (588 -> 538).
   Regula rămâne scrisă aici, ca să nu se mai încerce a doua oară.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   68.3 Bulinele: sus, peste fotografie

   MĂSURAT după micșorarea galeriei: bulinele stau la 472..504, adică la 6px de
   marginea de jos a cadrului de 280px. Cererea e „mai aproape de imagine".
   Containerul lor e `slideshow-controls` poziționat absolut; regula de la 67.3
   nu l-a prins fiindcă selectorul cerea clasa pe elementul propriu-zis.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 749px) {
  html slideshow-controls,
  html .media-gallery__mobile-control,
  html [class*="mobile-control"] {
    bottom: 12px;
  }
}

/* --------------------------------------------------------------------------
   68.4 Tranziția între imagini

   MĂSURAT: rămâne 0,24s, deși regula de la 67.3 se potrivește. Câștigă o
   declarație din `styles.css`, care se încarcă DUPĂ fișierul nostru și are
   aceeași specificitate. Aici selectorul urcă la trei componente, ca să nu mai
   fie discuție.
   -------------------------------------------------------------------------- */
html slideshow-slides > slideshow-slide,
html slideshow-slides > slideshow-slide.product-media-container,
html .card-gallery slideshow-slides > slideshow-slide {
  transition: opacity 0.24s var(--psn-ease), visibility 0.24s var(--psn-ease);
}

/* ==========================================================================
   69. BARA DE SUS — alinierea verticală (31.07.2026)

   MĂSURAT pe 1440×900: bara ține 47..88px, deci mijlocul ei e la 67,5. Textele
   din dreapta („L–V 09:00–17:00", „Retragere comandă", linkurile secundare) au
   mijlocul la 67–68, adică exact pe axă. Telefonul și emailul din stânga îl au
   însă la 64 — cu 3,5px mai sus.

   Cauza: `.psn-topbar__contact` e o listă, iar elementele ei se aliniau după
   linia de bază a textului, nu după centrul rândului. Se vede la 4px, dar la
   iconițe de 16px într-o bară de 41px e destul cât ochiul să simtă că „ceva
   nu stă drept".

   Se aliniază toate cele trei niveluri: containerul, cele două grupuri și
   fiecare element din ele.
   ========================================================================== */

html .psn-topbar__inner {
  align-items: center;
}

html .psn-topbar__contact,
html .psn-topbar__dreapta,
html .psn-topbar__linkuri {
  align-items: center;
}

html .psn-topbar__contact > li,
html .psn-topbar__linkuri > li {
  display: inline-flex;
  align-items: center;
  align-self: center;
}

/* Iconițele: centrate pe rând, nu pe linia de bază a textului de lângă ele. */
html .psn-topbar svg {
  display: block;
  flex: 0 0 auto;
  align-self: center;
  vertical-align: middle;
}

html .psn-topbar__link,
html .psn-topbar__program {
  display: inline-flex;
  align-items: center;
  align-self: center;
  line-height: 1.2;
}

/* ==========================================================================
   70. SERTARUL DE MENIU DE PE TELEFON — TEXT ALB PE FUNDAL ALB (01.08.2026)

   Semnalat de Cristian: „bara meniu de pe telefon e un alb deschis și nu e
   vizibilă". Măsurat, e mai rău de atât: sertarul are fundal alb
   (rgb(255,255,255)) ȘI text alb (rgb(255,255,255)). Toate intrările —
   „Prezervative", „Toate prezervativele", „Lubrifianți" — sunt invizibile.
   Singurul lucru care se vedea era „Retragere comandă", care are roșu propriu.

   CAUZA E O MODIFICARE PROPRIE, din 31.07. Când am mutat meniul de categorii pe
   banda roșie, i-am dat blocului `header-menu` `text_color: #FFFFFF`. Sertarul
   de pe telefon folosește ACELAȘI bloc, deci a moștenit schema de culoare
   (`color-custom-...` pune `--color-foreground: #FFFFFF`) — dar fundalul lui
   rămâne alb, fiindcă e un panou lateral, nu banda.

   Alb pe roșu în bandă, ink pe alb în sertar: aceeași sursă de conținut, două
   contexte diferite. Se rescrie variabila de prim-plan pe sertar, nu culorile
   fiecărei intrări în parte — altfel ar trebui vânat fiecare element nou.
   ========================================================================== */

html .menu-drawer,
html .menu-drawer[class*="color-custom"] {
  --color-foreground: var(--psn-ink, #201619);
  color: var(--psn-ink, #201619);
}

/* Explicit și pe intrări, ca să nu depindă totul de o singură variabilă. */
html .menu-drawer .menu-drawer__menu-item,
html .menu-drawer .menu-drawer__menu-item-text,
html .menu-drawer .menu-drawer__menu-item span,
html .menu-drawer summary,
html .menu-drawer a {
  color: var(--psn-ink, #201619);
}

/* Butonul de închidere era tot alb pe alb. */
html .menu-drawer .close-button,
html .menu-drawer .menu-drawer__close-button,
html .menu-drawer .close-button svg {
  color: var(--psn-ink, #201619);
}

/* --------------------------------------------------------------------------
   70.2 Iconița de ceas reapărută în bara de sus

   REGRESIE PROPRIE, făcută astăzi la 69: regula
   `html .psn-topbar__program { display: inline-flex }`, scrisă pentru aliniere
   verticală, a anulat `display: none` de la 58.4, care ascundea programul pe
   telefon. Rezultatul: un ceas fără nicio etichetă lângă el, exact defectul pe
   care îl reparasem cu o zi înainte.

   Regula de aliniere rămâne, dar nu mai atinge `display`; el se redă înapoi
   celor două reguli care îl decid, după lățime.

   A DOUA ÎNCERCARE, tot din aceeași zi: nici `html .psn-topbar__program
   { display: none }` n-a ținut — elementul primește `display: flex` dintr-o
   regulă mai veche și mai specifică. În loc să urc la `!important`, ascund
   elementul de LISTĂ care îl conține: pe `li` nu scrie nimeni `display`, deci
   nu e nimic de bătut. E fix tiparul care funcționa deja pentru email.

   A TREIA ȘI ULTIMA: `li:has(.psn-topbar__program)` nu se potrivea fiindcă
   elementul de listă ESTE `.psn-topbar__program`, nu părintele lui —
   `<li class="psn-topbar__program">`. Verificat pe lanțul real din DOM.
   Ținta corectă e `li.psn-topbar__program`, cu (0,1,2). */
@container psn-topbar (max-width: 759px) {
  html li.psn-topbar__program,
  html .psn-topbar__contact li:has(.psn-topbar__link[href^="mailto"]) {
    display: none;
  }
}

/* ==========================================================================
   71. FÂȘIA DE AVANTAJE — prea lată pe ecran mare (01.08.2026)

   Semnalat de Cristian: „livrare discretă / retur ușor / plată cu cardul pare
   cam lată".

   MĂSURAT pe 1920px, comparând marginile tuturor secțiunilor:
     hero, avantaje, categorii ... conținut 240..1680  (1440px)
     banda de categorii, subsol . conținut 240..1680  (1440px)
     brand, întrebări frecvente . conținut 470..1450  ( 980px)

   Deci marginile NU erau greșite — fâșia se aliniază perfect cu banda de
   deasupra ei. Problema e alta: trei elemente mici întinse pe 1440px lasă
   fiecărui text 388px de lățime pentru două rânduri scurte. Rezultatul e o
   bandă foarte lată și foarte subțire, care nu se citește ca un grup, ci ca
   trei lucruri aruncate departe unul de altul.

   Conținutul coboară la 1180px, centrat. Sub 1260px de ecran nu se schimbă
   nimic — acolo fâșia era deja strânsă. Nu ating hero-ul și nici categoriile:
   acelea au conținut care merită toată lățimea (o fotografie mare, respectiv
   patru carduri reale).
   ========================================================================== */

@media screen and (min-width: 990px) {
  html .psn-usp__inner {
    max-width: 1260px;
  }
}

/* Textul fiecărui avantaj: cel mult 300px, ca titlul și explicația să formeze
   un bloc compact lângă iconiță, nu un rând care se întinde până departe. */
@media screen and (min-width: 990px) {
  html .psn-usp__text,
  html .psn-usp__inner p {
    max-width: 300px;
  }
}

/* ==========================================================================
   72. OPTIMIZARE FINALĂ PENTRU CONVERSIE (01.08.2026)

   ATENȚIE, două cereri se bat cap în cap cu cele de acum două ore:
     - atunci: „imaginea produsului pe mobil cu ~15% mai mică" (330 -> 280px)
     - acum:   „mărește imaginea produsului pe mobil cu ~15%"  (280 -> 322px)
     - atunci: „cardurile «Se cumpără des împreună» sunt prea înalte"
     - acum:   „mărește ușor cardurile din «Se cumpără des împreună»"
   Se aplică cererea NOUĂ, fiindcă e ultima și fiindcă a fost dată după ce
   Cristian a văzut rezultatul celei vechi. Valorile vechi rămân scrise în
   comentarii, ca să se poată reveni fără arheologie.
   ========================================================================== */

/* --------------------------------------------------------------------------
   72.1 Zona de încredere: cinci repere pe un rând-două, nu o grilă 2×2

   Reperele cerute: CE, EN ISO 4074, Latex natural, Lubrifiere siliconică,
   Livrare discretă (plus Plată securizată, păstrat).

   Grila 2×2 de la 63.1 avea ~90px pe telefon. Cu șase repere ar fi ajuns la
   trei rânduri, adică ~135px — exact invers față de „butonul cât mai sus".
   Trec pe etichete mici care se așază în rând și se rup singure: două rânduri,
   ~48px, cu două repere în plus față de înainte.

   PRIMELE PATRU APAR NUMAI LA PREZERVATIVE. „EN ISO 4074" e standardul pentru
   prezervative din latex, iar „Lubrifiere siliconică" descrie tratamentul lor;
   puse pe o capsulă sau pe un lubrifiant ar fi afirmații false. Condiția e în
   `psn_info_pret`, nu aici.
   -------------------------------------------------------------------------- */
html .psn-incredere {
  display: flex;
  flex-wrap: wrap;
  grid-template-columns: none;
  gap: 8px;
  margin-block-start: 12px;
}

html .psn-incredere__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: 1px solid var(--psn-line, #e7dedb);
  border-radius: 999px;
  background: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--psn-ink, #201619);
  white-space: nowrap;
}

html .psn-incredere__item::before {
  content: "✓";
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--psn-gold, #c9a227);
}

/* Cele două repere de certificare poartă aurul ca fundal discret: sunt
   singurele care nu sunt promisiuni ale magazinului, ci fapte verificabile
   tipărite pe cutie. */
html .psn-incredere__item--ce,
html .psn-incredere__item--iso {
  border-color: rgb(201 162 39 / 0.45);
  background: rgb(201 162 39 / 0.08);
}

@media screen and (max-width: 749px) {
  html .psn-incredere {
    gap: 4px;
    margin-block-start: 8px;
  }
  html .psn-incredere__item {
    padding: 3px 8px;
    font-size: 0.65rem;
  }
}

/* --------------------------------------------------------------------------
   72.2 Imaginea produsului pe telefon: înapoi la 322px

   280 × 1,15 = 322. Regula-sursă e în secțiunea 27bis, unde a stat mereu
   valoarea galeriei pe mobil.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 749px) {
  html .product-information__media media-gallery,
  html .product-information__media .media-gallery__grid,
  html .product-information__media slideshow-slide,
  html .product-information__media .product-media-container,
  html .product-information__media .product-media__image,
  html .product-information__media img {
    max-height: 322px;
  }
}

/* --------------------------------------------------------------------------
   72.3 Spațiul dintre galerie și informații

   MĂSURAT: 28px între marginea de jos a galeriei și titlu. Cererea e să dispară
   spațiile inutile. Coboară la 10px — atât cât să se vadă că sunt două zone
   diferite, nu mai mult. Împreună cu golul de 12px dintre blocuri, butonul de
   cumpărare urcă înapoi peste ce a pierdut din imaginea mai mare.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 749px) {
  html .product-information__media,
  html media-gallery {
    margin-block-end: 0;
    padding-block-end: 0;
  }
  /* LANȚUL REAL, luat de jos în sus pe 390px: galeria se termină la 552,
     `.product-details` începe fix acolo, apoi se adună `padding-top: 20px` de
     pe primul `group-block` (setare de bloc din șablon) și două margini de 4px.
     Prima variantă a acestei reguli punea încă 10px de padding pe
     `.product-details` și a MĂRIT golul de la 28 la 38px — exact pe dos față de
     cerere. Se taie de unde e cu adevărat: din paddingul blocului.
     Rezultat: 0 + 4 + 8 + 4 = 16px. */
  html .product-details {
    padding-block-start: 0;
  }
  html .product-details > .group-block {
    padding-block-start: 8px;
  }
  html .product-details .group-block-content {
    gap: 12px;
  }
}

/* --------------------------------------------------------------------------
   72.4 Cardurile „Se cumpără des împreună": imagine și buton mai mari

   Erau 103px pe telefon, cu imaginea de 56px și butonul de 38. Urcă la
   imagine 68px și buton 42px — cardul ajunge la ~118px, tot sub cei 150px de
   la care am plecat ieri.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 749px) {
  html .psn-impreuna__card {
    padding: 12px;
    gap: 12px;
  }
  html .psn-impreuna__media {
    flex-basis: 68px;
    width: 68px;
    height: 68px;
    border-radius: 12px;
  }
  html .psn-impreuna__titlu {
    font-size: 0.84375rem;
  }
  html .psn-impreuna__buton {
    min-height: 42px;
    padding-inline: 16px;
    font-size: 0.8125rem;
  }
}

html .psn-impreuna__media {
  flex-basis: 96px;
  width: 96px;
  height: 96px;
}

html .psn-impreuna__buton {
  min-height: 42px;
}

/* --------------------------------------------------------------------------
   72.5 Bannerul de consimțământ, a patra strângere

   Titlul „Consimțământ privind modulele cookie" trece în regim ascuns-vizual
   ȘI pe desktop, nu doar pe telefon: rămâne numele accesibil al dialogului
   (`aria-labelledby` arată spre el), dar nu mai ia 18px dintr-o casetă care
   are oricum un paragraf explicativ dedesubt.

   LIMITA, spusă a treia oară cu cifre: din cei ~148px de pe telefon, 70 sunt
   paragraful legal impus de Shopify. Nu se scurtează, iar tăierea lui vizuală
   ar ascunde și linkul către politica de confidențialitate, care e ÎN
   paragraf. Tot ce nu e text a fost deja redus la minimul rezonabil.
   -------------------------------------------------------------------------- */
#shopify-pc__banner .shopify-pc__banner__body h2 {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

#shopify-pc__banner .shopify-pc__banner__wrapper {
  padding-block: 4px !important;
}

@media (max-width: 989px) {
  #shopify-pc__banner .shopify-pc__banner__wrapper {
    gap: 4px !important;
    padding: 4px 12px calc(4px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #shopify-pc__banner .shopify-pc__banner__btns button {
    min-height: 34px !important;
    height: 34px !important;
  }
}

/* ==========================================================================
   73. BANDA ÎNCHISĂ A SUBSOLULUI — mai strânsă și mai așezată (01.08.2026)

   MĂSURAT pe pagina Branduri:
     desktop 1440px … banda 443px, padding 44 sus / 48 jos, trei coloane de
                      421px cu 48px între ele, lista de 9 linkuri 294px
                      (≈33px de link), sigla 194×129
     telefon  390px … banda 1078px, lista de linkuri singură 460px
                      (≈51px de link)

   Lista de linkuri e cea care dictează înălțimea benzii: pe desktop ocupă două
   treimi din ea, iar celelalte două coloane rămân pe jumătate goale. Se sparge
   pe două coloane — nouă linkuri devin 5 + 4 — și banda scade cu ~130px fără
   să se piardă niciun link.

   Pe telefon coloanele nu au loc una lângă alta („Politica de confidențialitate"
   cere singură 200px), deci acolo se lucrează pe spațierea dintre rânduri:
   51 → 42px, adică tot peste pragul de atingere.
   ========================================================================== */

/* --------------------------------------------------------------------------
   73.1 Titlurile celor trei coloane pe aceeași linie

   „Informații utile" e un `<summary>` de acordeon de 48px, „Cumperi în
   siguranță" un titlu obișnuit de 24px. Le dau aceeași înălțime de rând, ca
   primul rând de conținut din fiecare coloană să plece de la același nivel.
   -------------------------------------------------------------------------- */
@media screen and (min-width: 990px) {
  html .shopify-section-group-footer-group .menu__heading,
  html .shopify-section-group-footer-group h2,
  html .shopify-section-group-footer-group h3 {
    min-height: 0;
    line-height: 1.25;
    margin-block: 0;
  }
}

/* --------------------------------------------------------------------------
   73.2 Linkurile pe două coloane, pe ecran mare
   -------------------------------------------------------------------------- */
@media screen and (min-width: 990px) {
  html .shopify-section-group-footer-group nav ul.list-unstyled,
  html .shopify-section-group-footer-group .details-content ul {
    column-count: 2;
    column-gap: 28px;
  }

  html .shopify-section-group-footer-group nav ul.list-unstyled > li,
  html .shopify-section-group-footer-group .details-content ul > li {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
  }
}

/* Spațierea dintre linkuri: 33px pe desktop era generos pentru un subsol.
   30px păstrează ținta de atingere și strânge lista. */
@media screen and (min-width: 990px) {
  html .shopify-section-group-footer-group li.menu__item {
    min-height: 30px;
  }
  html .shopify-section-group-footer-group li.menu__item a {
    padding-block: 3px;
  }
}

@media screen and (max-width: 989px) {
  html .shopify-section-group-footer-group li.menu__item {
    min-height: 42px;
    display: flex;
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
   73.3 Aerul din jurul benzii

   44/48px sus-jos pe desktop și 22/28 pe telefon. Coboară la 36/40 și 20/24 —
   destul cât banda să nu pară lipită de secțiunea de deasupra, dar fără să
   mai adauge o jumătate de ecran de derulat pe telefon.
   -------------------------------------------------------------------------- */
html .shopify-section-group-footer-group .footer-content {
  padding-block-start: 32px;
  padding-block-end: 40px;
}

@media screen and (max-width: 989px) {
  html .shopify-section-group-footer-group .footer-content {
    padding-block-start: 20px;
    padding-block-end: 24px;
  }
}

/* --------------------------------------------------------------------------
   73.4 Sigla din subsol

   194×129px, cu fundalul negru copt în fișierul PNG. Pe banda închisă la
   culoare arată ca un dreptunghi decupat, nu ca o siglă. Nu pot schimba
   fișierul din CSS, dar pot să-l fac mai mic și să-i dau colțuri mai blânde,
   ca marginea dreptunghiului să nu mai fie primul lucru care sare în ochi.
   Soluția curată rămâne o siglă pe fundal transparent.

   GREȘEALĂ PRINSĂ LA VERIFICAREA VIZUALĂ: prima variantă viza
   `.shopify-section-group-footer-group .image-block__image`, adică TOATE
   imaginile din subsol — și a micșorat la jumătate insignele ANPC și SOL, care
   sunt semne de conformitate și trebuie să rămână lizibile. Ținta se restrânge
   la imaginea din linkul care duce spre pagina de start, adică sigla.
   -------------------------------------------------------------------------- */
html .shopify-section-group-footer-group a.image-block[href="/"] .image-block__image {
  max-width: 150px;
  height: auto;
  border-radius: 12px;
}

@media screen and (max-width: 989px) {
  html .shopify-section-group-footer-group a.image-block[href="/"] .image-block__image {
    max-width: 124px;
  }
}

/* ==========================================================================
   74. FÂȘIA DE AVANTAJE — mai mică și mai așezată (01.08.2026)

   MĂSURAT: secțiunea are 170px, din care 96 sunt padding (48 sus, 48 jos) și
   72 conținutul propriu-zis. Iconița e un cerc de 62px cu fundal alb pe fond
   alb — adică un cerc care nu se vede — cu desenul de 34px în mijloc. Titlul
   e 16px bold, descrierea 14px pe două rânduri.

   Ce se schimbă:
     · paddingul 48 → 28px, adică −40px dintr-o dată;
     · cercul 62 → 46px, cu fundal roz-pal și desen roșu — aceeași soluție ca
       la bifele din secțiunea de brand, ca fâșia să nu mai pară un corp
       străin între hero și categorii;
     · titlul 16 → 15px, descrierea 14 → 13px cu rândurile mai apropiate;
     · linii verticale subțiri între cele trei, ca să se citească drept trei
       lucruri de același fel, nu trei blocuri nimerite alături.

   Rezultat așteptat: 170 → ~118px, cu conținutul mai bine legat.
   ========================================================================== */

html .psn-usp {
  padding-block: 28px;
}

@media screen and (max-width: 749px) {
  html .psn-usp {
    padding-block: 20px;
  }
}

html .psn-usp__item {
  position: relative;
  gap: 12px;
  align-items: center;
}

html .psn-usp__icon {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgb(196 32 38 / 0.07);
  color: var(--psn-red, #c42026);
  border-radius: 50%;
}

html .psn-usp__icon svg {
  width: 24px;
  height: 24px;
}

html .psn-usp__text {
  gap: 2px;
}

html .psn-usp__text strong {
  font-size: 0.9375rem;
  line-height: 1.3;
}

html .psn-usp__text span {
  font-size: 0.8125rem;
  line-height: 1.4;
}

/* Liniile despărțitoare stau în mijlocul golului de 24px al grilei, nu pe
   marginea elementelor — altfel ar trebui schimbate lățimile coloanelor. */
@media screen and (min-width: 750px) {
  html .psn-usp__item + .psn-usp__item::before {
    content: "";
    position: absolute;
    inset-inline-start: -12px;
    inset-block: 4px;
    width: 1px;
    background: var(--psn-line, #e7dedb);
  }
}

/* --------------------------------------------------------------------------
   74.2 Subsolul pe telefon: golurile dintre linkuri

   MĂSURAT: fiecare `li` are exact 44px — pragul de atingere, care rămâne —
   dar lista are 460px pentru nouă linkuri, deci 8px de gol între ele.
   Golul dispare; ținta de 44px nu se atinge.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 989px) {
  html .shopify-section-group-footer-group nav ul.list-unstyled,
  html .shopify-section-group-footer-group .details-content ul {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
}

/* ==========================================================================
   75. BANDA ÎNCHISĂ PE TELEFON (01.08.2026)

   CORECȚIE DE ȚINTĂ: la 73 am strâns banda pe DESKTOP (443 → 352px), dar
   Cristian vorbea despre telefon. Acolo era, de fapt, problema mare.

   MĂSURAT pe 390×844, bucată cu bucată din cei 1058px:
     20px   padding sus
     144px  sigla (143×83) + două rânduri de text
     34px   gol
     517px  „Informații utile" + cele nouă linkuri — din care lista singură 460
     34px   gol
     287px  „Cumperi în siguranță" + două insigne una sub alta + copyright
     24px   padding jos

   Lista de linkuri e jumătate din bandă. Nouă linkuri, fiecare pe rândul lui,
   la 44px înălțime de atingere plus spațiu — 460px doar ca să ajungi la ele.

   Ce se schimbă, fără să dispară nimic:
     · linkurile pe două coloane, ca pe desktop — 9 devin 5 + 4;
     · textul lor 16 → 13,5px, ca „Politica de confidențialitate" să încapă pe
       un rând într-o coloană de 171px; ținta de atingere rămâne 44px;
     · cele două insigne ANPC și SOL una lângă alta, nu una sub alta;
     · golul dintre cele trei blocuri 34 → 22px;
     · sigla 124 → 108px.

   NU am închis acordeonul. Ar fi scurtat banda cu încă 400px dintr-o dată, dar
   ar fi ascuns nouă linkuri în spatele unei atingeri — între ele politica de
   retur, retragerea din contract și confidențialitatea. Dacă vrei totuși
   varianta pliată, se face dintr-o singură linie.
   ========================================================================== */

@media screen and (max-width: 989px) {
  /* ------------------------------------------------------------------------
     75.1 Linkurile pe două coloane
     ------------------------------------------------------------------------ */
  html .shopify-section-group-footer-group nav ul.list-unstyled,
  html .shopify-section-group-footer-group .details-content ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 0;
  }

  html .shopify-section-group-footer-group li.menu__item {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  html .shopify-section-group-footer-group li.menu__item a {
    font-size: 0.84375rem;
    line-height: 1.3;
  }

  /* ------------------------------------------------------------------------
     75.2 Insignele ANPC și SOL una lângă alta

     Sunt 300×86px fiecare, stivuite. Pe 358px de lățime încap două de 171px,
     iar textul lor rămâne lizibil — sunt oricum imagini, nu text randat.
     ------------------------------------------------------------------------ */
  /* Nu e destul `inline-block` pe insigne: containerul lor e o coloană flex,
     deci fiecare copil primește oricum rândul lui — verificat, rămâneau una
     sub alta. Rândul se cere de la container, nu de la insigne. */
  html .shopify-section-group-footer-group .group-block-content:has(> a.image-block:not([href="/"])) {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
  }

  html .shopify-section-group-footer-group a.image-block:not([href="/"]) {
    display: inline-block;
    flex: 0 1 calc(50% - 6px);
    width: calc(50% - 6px);
    max-width: 172px;
    vertical-align: top;
  }

  html .shopify-section-group-footer-group a.image-block:not([href="/"]) .image-block__image {
    width: 100%;
    height: auto;
  }

  /* ------------------------------------------------------------------------
     75.3 Golurile dintre cele trei blocuri și sigla
     ------------------------------------------------------------------------ */
  html .shopify-section-group-footer-group .group-block-content {
    gap: 20px;
  }

  html .shopify-section-group-footer-group a.image-block[href="/"] .image-block__image {
    max-width: 108px;
  }
}

/* ==========================================================================
   76. BANDA ÎNCHISĂ PE DESKTOP — așezarea (01.08.2026)

   Cristian: „e bine cum le-ai așezat, doar că vreau să le aranjezi mai bine".
   Deci nu mai e vorba de înălțime, ci de ordine.

   MĂSURAT pe 1440px, trei defecte de așezare:

   1. CELE TREI COLOANE AU ÎNĂLȚIMI FOARTE DIFERITE — 161 / 276 / 287px, deși
      au aceeași lățime de 421px. Sub prima rămâne un gol de 126px, iar banda
      își ia înălțimea din a treia.

   2. PRIMUL RÂND DE CONȚINUT E DECALAT ÎNTRE COLOANE. „Informații utile" e un
      `<summary>` de 52px, „Cumperi în siguranță" un titlu de 24px. Primul link
      începe la y=948, prima insignă la y=926 — 22px diferență, exact cât ochiul
      simte că „nu e drept", fără să poată spune de ce.

   3. LINKURILE NU SE ALINIAZĂ PE RÂNDURI. `column-count: 2` umple prima
      coloană de sus în jos, apoi trece la a doua. Cum „Politica de
      confidențialitate" se rupe pe două rânduri, coloana stângă are 5 intrări
      și se termină la y=1163, iar cea dreaptă 4 intrări și se termină la 1099.
      Rândurile nu se mai potrivesc între ele.
   ========================================================================== */

@media screen and (min-width: 990px) {
  /* ------------------------------------------------------------------------
     76.1 Linkurile: grilă pe rânduri, nu coloane care se umplu

     `column-count` curge de sus în jos; o grilă cu două coloane așază intrările
     de la stânga la dreapta, deci rândul 1 e mereu rândul 1 în ambele coloane,
     indiferent cât de lung e un text. Un link care se rupe pe două rânduri
     împinge doar rândul lui, nu toată coloana.
     ------------------------------------------------------------------------ */
  html .shopify-section-group-footer-group nav ul.list-unstyled,
  html .shopify-section-group-footer-group .details-content ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-count: auto;
    column-gap: 24px;
    row-gap: 2px;
    align-items: start;
  }

  /* ------------------------------------------------------------------------
     76.2 Același prim rând în toate coloanele

     Titlurile primesc aceeași înălțime de rând și același spațiu dedesubt,
     ca prima intrare din fiecare coloană să plece de la același nivel.
     ------------------------------------------------------------------------ */
  html .shopify-section-group-footer-group .menu__heading,
  html .shopify-section-group-footer-group h2,
  html .shopify-section-group-footer-group h3 {
    min-height: 0;
    line-height: 1.25;
    margin-block: 0 16px;
    padding-block: 0;
  }

  /* ------------------------------------------------------------------------
     76.3 Insignele una lângă alta și pe desktop

     Erau 300×86px stivuite, într-o coloană de 421px — de aici cei 287px ai
     coloanei a treia. Una lângă alta ocupă un singur rând de ~57px, iar
     coloana ajunge la aceeași înălțime cu prima.
     ------------------------------------------------------------------------ */
  html .shopify-section-group-footer-group .group-block-content:has(> a.image-block:not([href="/"])) {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
  }

  html .shopify-section-group-footer-group a.image-block:not([href="/"]) {
    flex: 0 1 calc(50% - 7px);
    max-width: 204px;
  }

  html .shopify-section-group-footer-group a.image-block:not([href="/"]) .image-block__image {
    width: 100%;
    height: auto;
  }

  /* ------------------------------------------------------------------------
     76.4 Lățimi pe măsura conținutului

     Trei coloane egale de 421px nu se potrivesc cu ce au de dus: prima are o
     siglă și două rânduri de text, a doua nouă linkuri pe două coloane, a
     treia două insigne și o linie de copyright. Coloana din mijloc primește
     mai mult, celelalte două cedează.
     ------------------------------------------------------------------------ */
  html .shopify-section-group-footer-group .group-block-content > .group-block:nth-child(1) {
    flex: 0 1 30%;
  }
  html .shopify-section-group-footer-group .group-block-content > .group-block:nth-child(2) {
    flex: 1 1 40%;
  }
  html .shopify-section-group-footer-group .group-block-content > .group-block:nth-child(3) {
    flex: 0 1 30%;
  }
}

/* ==========================================================================
   77. BANDA ÎNCHISĂ — ultimele două decalaje (01.08.2026)

   MĂSURAT după 76: coloanele au ajuns la 161 / 254 / 155px și rândurile de
   linkuri se aliniază — 986/986, 1027/1027, 1069/1069. Au rămas două lucruri
   pe care ochiul le simte, dar sunt greu de numit:

   1. PRIMUL RÂND DE LINKURI E DECALAT CU 8px. „Căutare" începe la y=936,
      „Blog — Ghiduri și Sfaturi" la 944, deși ambele au 32px. Restul rândurilor
      sunt perfect aliniate — deci nu e o problemă de grilă, ci de primul
      element de listă, care are alt spațiu propriu.

   2. TITLURILE COLOANELOR AU ÎNĂLȚIMI DIFERITE: 30px pentru „Informații utile"
      (e un `<summary>` de acordeon) și 24px pentru „Cumperi în siguranță" (un
      titlu obișnuit). De aici primul link la 936 și prima insignă la 926.

   Amândouă se rezolvă la fel: se dă fiecărui rând o cutie de aceeași înălțime,
   în loc să se lase înălțimea pe seama conținutului.
   ========================================================================== */

@media screen and (min-width: 990px) {
  /* Fiecare intrare are aceeași cutie de 34px, cu textul centrat pe ea. Fără
     asta, primul element de listă își ia înălțimea din propriul line-height și
     iese cu câțiva pixeli din rând. */
  html .shopify-section-group-footer-group li.menu__item {
    min-height: 34px;
    height: 34px;
    display: flex;
    align-items: center;
  }

  html .shopify-section-group-footer-group li.menu__item a {
    display: inline-flex;
    align-items: center;
    padding-block: 0;
    line-height: 1.25;
  }

  /* Titlurile: aceeași cutie de 28px, indiferent dacă în spate e un `summary`
     de acordeon sau un titlu simplu. `list-style: none` scoate triunghiul de
     deschidere al `summary`-ului, care pe unele browsere adaugă înălțime. */
  html .shopify-section-group-footer-group .menu__heading,
  html .shopify-section-group-footer-group h2,
  html .shopify-section-group-footer-group h3 {
    height: 28px;
    display: flex;
    align-items: center;
    margin-block: 0 20px;
    padding-block: 0;
    list-style: none;
  }
  /* CORECȚIE 04.08.2026 — titlul secțiunii de newsletter.
     Regula de mai sus dă `display: flex` oricărui h2/h3 din grupul subsolului,
     ca titlurile de COLOANĂ să aibă cutii de aceeași înălțime. Prinde însă și
     titlul newsletterului, care nu e titlu de coloană: pe un container flex
     `text-align: center` nu mai are efect asupra textului — îl poziționează
     `justify-content`, care e `normal`, adică la stânga. De aceea „Abonează-te
     la noutăți" cădea la stânga peste 990px, deși cutia lui era centrată.

     Corectăm exact mecanismul, nu efectul: doar axa orizontală a containerului
     flex. Înălțimea de 28px și marginile rămân neatinse, deci rândurile
     subsolului nu se mișcă niciun pixel. Titlurile de coloană nu au clasa
     `text-block--align-center`, deci nu sunt afectate. */
  html .shopify-section-group-footer-group .text-block--align-center h2,
  html .shopify-section-group-footer-group .text-block--align-center h3 {
    justify-content: center;
  }


  html .shopify-section-group-footer-group .menu__heading::-webkit-details-marker,
  html .shopify-section-group-footer-group .menu__heading::marker {
    display: none;
    content: "";
  }
}

/* ==========================================================================
   78. ULTIMUL DECALAJ DIN SUBSOL (01.08.2026)

   CAUZA, găsită măsurând cutiile elementelor de listă, nu ale linkurilor din
   ele: PRIMUL `<li>` are `margin-top: 0`, iar toate celelalte opt au 8px.

   Cu vechea așezare pe coloane (`column-count`) asta nu se vedea niciodată —
   primul element era singurul din capul coloanei, deci lipsa marginii lui
   arăta corect. De când lista e o grilă pe rânduri, elementele 1 și 2 stau
   alături: primul la y=929, al doilea la 937. Opt pixeli, exact cât ochiul
   simte că „nu e drept", fără să poată spune de ce.

   Marginile dispar de tot, iar distanța dintre rânduri o dă `row-gap`. Așa
   toate rândurile sunt egale, inclusiv primul, și nu mai depinde nimic de
   ordinea elementelor în listă.
   ========================================================================== */

@media screen and (min-width: 990px) {
  html .shopify-section-group-footer-group li.menu__item {
    margin-block: 0;
  }

  html .shopify-section-group-footer-group nav ul.list-unstyled,
  html .shopify-section-group-footer-group .details-content ul {
    row-gap: 12px;
  }
}

@media screen and (max-width: 989px) {
  html .shopify-section-group-footer-group li.menu__item {
    margin-block: 0;
  }
}

/* ==========================================================================
   79. BANDA CU MESAJE — fără fundal roșu (01.08.2026)

   Semnalat de Cristian pe captura paginii de start: o bandă roșie lată, între
   secțiunea de brand și întrebările frecvente.

   NU era o scăpare de CSS, ci o setare a secțiunii: `background_color:
   "#8E1418"` pe `psn_marquee`, cu toate cele patru mesaje pe `#FFFFFF`. Ambele
   au fost schimbate în `templates/index.json` — fundalul golit, textele trecute
   pe culoarea de bază. Dacă schimbam doar fundalul, rămânea alb pe alb, exact
   greșeala din sertarul de meniu de acum două ore.

   Aici rămâne doar ce ține de așezare: fără fundal, banda ar pluti între două
   secțiuni albe fără să se vadă că e ceva separat. Două linii subțiri, sus și
   jos, o delimitează fără să adauge culoare. Separatoarele dintre mesaje și
   textul lor primesc tonul de gri al restului site-ului.
   ========================================================================== */

html [id$="__psn_marquee"] .section,
html [id$="__psn_marquee"] > .section-background + .section {
  border-block: 1px solid var(--psn-line, #e7dedb);
}

/* Mesajele: mărimea de titlu era potrivită pe roșu, unde trebuiau să iasă în
   evidență. Pe fond alb, aceeași mărime devine strident de mare pentru o
   listă de asigurări. Coboară la mărimea unui text obișnuit. */
html [id$="__psn_marquee"] .text-block p,
html [id$="__psn_marquee"] marquee-component p {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--psn-ink, #201619);
}

/* Separatoarele dintre mesaje erau albe, ca să se vadă pe roșu. */
html [id$="__psn_marquee"] .divider,
html [id$="__psn_marquee"] [class*="divider"] {
  background: var(--psn-line, #e7dedb);
  border-color: var(--psn-line, #e7dedb);
  color: var(--psn-line, #e7dedb);
  opacity: 1;
}

/* ==========================================================================
   80. MEGA-MENIU — fundal, text vizibil, poze întregi (01.08.2026)

   Trei defecte în același panou, găsite pornind de la sesizarea lui Cristian
   („fundalul roșu din spatele mega-menu-urilor").

   (a) FUNDALUL. Nu era o scăpare de-a noastră. Horizon are elementul
       `.header__underlay`, care prelungește în jos fundalul antetului cât timp
       un panou e deschis. Fundalul lui e un degrade cu opriri fixe:

         alb 0 → --top-row-height | roșu → --header-height | --color-submenu → 100%

       Primele două segmente sunt corecte (rândul cu logo, banda de categorii).
       Al treilea folosește `--color-submenu`, pe care schema de culoare a
       blocului de meniu o pune pe `rgb(196 32 38)` — de aici dreptunghiul roșu
       de 1440×553px din spatele unui panou de 380px.

       Reparația e la rădăcină: o singură variabilă. Panoul devine o carte albă
       care plutește peste pagină, cum a ales Cristian dintre cele trei variante.
       Umbra proprie a underlay-ului (`::after`) trebuie stinsă: era desenată pe
       cutia de 1440px lățime și, fără fundalul roșu care o ascundea, ar fi lăsat
       o dungă de umbră pe toată lățimea ecranului.

       `pointer-events: none` pentru că suprafața rămâne întinsă peste erou.
       Cât era roșie se vedea de ce nu se poate face clic pe ea; invizibilă, ar
       fi însemnat 553px de pagină moartă și un meniu care refuză să se închidă
       când muți mouse-ul în conținut.

   (b) TEXTUL DIN CARDURILE DE PRODUS ERA INVIZIBIL. Mai grav decât fundalul și
       nesemnalat de nimeni. Panoul poartă schema blocului de meniu, adică
       `--color-foreground: #FFFFFF` — pusă pe 31.07 ca să se vadă categoriile pe
       banda roșie. Legăturile de categorie scapă, pentru că secțiunea 24 le dă
       explicit `color: var(--psn-ink)`. Titlurile și prețurile produselor nu:
       moșteneau albul și se pierdeau pe fundalul alb al panoului. Măsurat pe
       toate cele 7 carduri din cele patru panouri:
         resource-card__title  col=rgb(255,255,255)  bg=rgb(255,255,255)
         price                 col=rgb(255,255,255)  bg=rgb(255,255,255)
       Spațiul gol de sub poze din captură nu era gol — erau titlurile.

       A TREIA OARĂ când perechea fundal/text mușcă (sertarul de meniu, banda cu
       mesaje, acum panoul). Se rescrie variabila pe panou, nu culoarea fiecărui
       element, ca să nu trebuiască vânat fiecare nod nou adăugat de temă.

   (c) POZELE ERAU TĂIATE. `object-fit: cover` într-o casetă de 86×108 (înaltă)
       cu sursa de 210×168 (lată): tema taie ~49px din lățime ca să umple. Pe
       ambalaje de produs asta ciuntește cutia. `contain` le arată întregi, iar
       caseta primește fundalul crem ca spațiul rămas să pară intenționat.

   În plus: cele patru panouri măsurau 273, 287, 307 și 380px — inegale, ceea ce
   arăta neîngrijit. Trec la o lățime unică. Rândurile scad de la 44 la 38px.

   (d) COLOANELE DE PRODUSE. Ieșit la iveală abia după verificarea de mai sus,
       când panourile au ajuns toate la 360px. Tema pune numărul de coloane egal
       cu numărul de produse alese pentru fiecare intrare de meniu, prin
       `--menu-content-columns-desktop`. La „Prezervative" sunt trei produse și
       trei coloane de 79px — corect. La „Lubrifianți" e un singur produs, deci o
       singură coloană de 278px: poza se umfla la 278×348 și panoul creștea la
       590px, aproape dublu față de celelalte. Numărul de coloane se fixează la
       trei, indiferent câte produse sunt puse; un produs ocupă prima coloană și
       păstrează aceeași dimensiune ca peste tot.
   ========================================================================== */

@media screen and (min-width: 990px) {

  /* (a) fundalul de sub antet nu mai e roșu; panoul plutește peste pagină */
  html .header__underlay {
    --color-submenu: transparent;
  }
  html .header__underlay-open::after {
    box-shadow: none;
  }
  html .header__underlay-open {
    pointer-events: none;
  }

  /* (b) schema de meniu e albă pentru banda roșie; în panou trebuie cerneală.
     Se schimbă perechea, niciodată doar una din cele două. */
  html .header-menu .menu-list__submenu {
    --color-foreground: var(--psn-ink);
    --color-background: #ffffff;
    color: var(--psn-ink);
  }
  html .header-menu .menu-list__submenu .resource-card,
  html .header-menu .menu-list__submenu .resource-card__title,
  html .header-menu .menu-list__submenu .price {
    color: var(--psn-ink);
  }
  html .header-menu .menu-list__submenu .resource-card__title {
    font-size: 0.8125rem;
    line-height: 1.35;
    font-weight: 600;
  }
  html .header-menu .menu-list__submenu .price {
    font-size: 0.8125rem;
    font-weight: 600;
  }

  /* (c) produsul se vede întreg, nu tăiat pe laturi */
  html .header-menu .menu-list__submenu .resource-card__image {
    object-fit: contain;
  }
  html .header-menu .menu-list__submenu .resource-card__media {
    background: var(--psn-surface);
    border-radius: 8px;
    overflow: hidden;
  }

  /* lățime unică pentru toate cele patru panouri */
  html .header-menu .menu-list__list-item:not([slot="overflow"]) > .menu-list__submenu {
    width: 360px !important;
    min-width: 360px;
    max-width: 360px;
  }

  /* (d) trei coloane de produse peste tot, oricâte produse ar fi alese */
  html .header-menu .menu-list__submenu .mega-menu__content-list--products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: start;
    gap: 12px;
  }

  /* rânduri mai strânse: 44px erau generoase pentru un meniu de desktop */
  html .header-menu .menu-list__submenu .mega-menu__link {
    padding: 8px 20px;
  }
  html .header-menu .menu-list__submenu .mega-menu__grid {
    gap: 12px;
  }
}

/* ==========================================================================
   81. LISTA DE BLOG PE TELEFON (02.08.2026)

   Blogul măsura 27640px pe 390px lățime, adică 32,7 ecrane de derulat. Cauza
   principală nu e în CSS: `sections/main-blog.liquid` avea `paginate by 50`, iar
   sub 750px tema pune fiecare articol pe toată lățimea (`--col-span: 6`). 50 de
   carduri stivuite pe verticală.

   Numărul de articole pe pagină a trecut la 12, în fișierul de secțiune. Aici
   rămâne strângerea cardului, care aduce restul.

   Anatomia unui card pe telefon, măsurată: 556px total = 200 poză + 118 titlu
   + 26 dată + 182 rezumat + 30 spațieri, plus 36px între carduri.

   Titlul are 24px/24px și ajungea la 4–5 rânduri la titlurile lungi. Trei
   rânduri sunt de ajuns pentru a alege un articol, iar cardurile devin egale
   între ele, ceea ce oricum arată mai ordonat decât înălțimile inegale de acum.

   Rezumatul NU se atinge: e un nod de text simplu într-un container flex, lângă
   legătura „Citește mai mult...". Nu poate fi selectat separat, iar o tăiere pe
   tot containerul ar înghiți și legătura, care e chemarea la acțiune.
   ========================================================================== */

@media screen and (max-width: 749px) {

  /* titlul: cel mult trei rânduri.

     `padding-bottom: 0` nu e cosmetic, e obligatoriu. Elementul avea 10px de
     spațiu dedesubt, iar `overflow: hidden` taie la marginea cutiei, nu la
     capătul conținutului: cei 10px lăsau al patrulea rând să se vadă tăiat pe
     jumătate sub trei puncte de suspensie. Se vedea doar pe captura randată,
     măsurătoarea de înălțime dădea 82px și părea corectă.
     Spațiul se mută pe legătura părinte, ca distanța față de dată să rămână.

     `line-height: 1.2` din același motiv, descoperit tot pe captură: titlul are
     24px/24px, adică înălțimea rândului egală cu mărimea literei. Cozile lui
     „j" și „p" ies din cutia rândului și, pe al treilea rând, cad exact pe
     linia de tăiere. Cu 1.2 încap înăuntru. Costă 14px pe card, adică 173px pe
     toată pagina — nimic, față de un rând de text ciuntit. */
  html .blog-post-card__title-link .text-block {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding-bottom: 0;
    line-height: 1.2;
  }
  html .blog-post-card__title-link {
    padding-bottom: 12px;
  }

  /* distanța dintre carduri: 36px erau gândiți pentru grila de desktop, unde
     separă și pe orizontală. Pe o singură coloană sunt prea mulți. */
  html .blog-posts-container {
    row-gap: 24px;
  }
}

/* ==========================================================================
   82. TITLURILE DE PE CARDURI (02.08.2026) — corectează concluzia din 57.1

   Pe 31.07 am scris, în secțiunea 57.1, că „soluția corectă e scurtarea
   titlului produsului în administrare, nu ascunderea lui prin CSS", pentru că
   „Prezervative PASSION Clasic, din latex natural, lubrifiate și rezistente,
   diametru 52 mm" (88 de caractere) se taie după „rezistente,".

   ACEA CONCLUZIE ERA GREȘITĂ. Verificat pe intimax.ro, care vinde exact
   aceleași produse PASSION:

     ei:  Prezervative PASSION Big Max, din latex natural, lubrifiate și
          rezistente, diametru 55 mm, 3 buc                        (96 car.)
     noi: Prezervative PASSION Big Max, din latex natural, lubrifiate și
          rezistente, diametru 55 mm                               (89 car.)

     ei:  Prezervative PASSION Sensation, ... diametru 52 mm, 3 buc (109 car.)
     noi: Prezervative PASSION Sensation, ... diametru 52 mm        (105 car.)

   Aceeași formulă, cuvânt cu cuvânt, iar ale noastre sunt deja mai SCURTE —
   le lipsește doar numărul de bucăți din cutie. Titlurile lor merg până la 187
   de caractere. Deci lungimea nu e problema; e convenția categoriei.

   Diferența reală e cardul. Măsurat la 390px, ambele cu cardul de 129px:
     intimax:  font 14,5px / line-height 18px, `-webkit-line-clamp: 5`
     noi:      font 16px  / line-height 20,8px, `-webkit-line-clamp: 2`
   Tăierea la 2 vine din tema Horizon (`styles.css`, `.resource-card__title`),
   nu dintr-o regulă de-a noastră.

   Trec la patru rânduri cu litera mai mică. Nu la cinci sau șase: pe un card
   de 129px lățime, un titlu de 88 de caractere are nevoie de șase rânduri, iar
   blocul de text ar ajunge mai înalt decât poza produsului. Patru rânduri arată
   aproape tot și păstrează proporția cardului.

   `min-height` de patru rânduri pentru ca prețurile și butoanele să rămână
   aliniate între carduri, indiferent dacă titlul are 45 sau 105 caractere —
   motivul pentru care 57.1 fixase înălțimea, și care rămâne valabil.
   ========================================================================== */

html .resource-card__title,
html .resource-card__title.paragraph {
  -webkit-line-clamp: 4;
  line-clamp: 4;
  font-size: 0.875rem;
  line-height: 1.3;
  min-height: calc(4 * 1.3em);
}

/* Regula veche din 57.1 taia la două rânduri și fixa înălțimea la două.
   Se aliniază la aceeași valoare, ca să nu rămână două comportamente
   diferite pe două tipuri de card. */
html .product-card .text-block p {
  -webkit-line-clamp: 4;
  line-clamp: 4;
  min-height: calc(4 * 1.3em);
  line-height: 1.3;
}

/* ==========================================================================
   83. PAGINA DE PRODUS REAȘEZATĂ (02.08.2026)

   Cerința lui Cristian: descrierea coboară sub poze, pe toată lățimea, iar
   recomandările urcă în coloana din dreapta, „să aibă vizibilitate mai bună".

   Motivul e măsurabil. Înainte, pe 1440px: descrierea ocupa coloana de 561px
   de sub butonul de cumpărare, iar „Se cumpără des împreună" începea abia la
   y=2600 — sub linia de plutire de trei ori. Acum recomandările sunt la y=1351,
   imediat sub reasigurări, iar descrierea trece pe toată lățimea la y=1694.

   Mutarea s-a făcut în șablon: blocul descrierii a ieșit din `product-details`
   și a devenit secțiunea `psn_descriere`, iar lista de recomandări a devenit
   snippet, ca să poată fi chemată ca bloc din coloană. Aici rămâne doar ce ține
   de așezare.
   ========================================================================== */

/* --------------------------------------------------------------------------
   83.1 Lista de recomandări, în coloana îngustă

   Ca secțiune pe toată lățimea, lista stătea pe două coloane. În coloana de
   561px, două coloane înseamnă carduri de 270px: după poza de 84px rămân 155px
   pentru titlu, adică 18 caractere pe rând. „Lubrifiant MARATON Gel, pe bază de
   apă, 50 ml" are 44 și s-ar tăia după al doilea rând. Pe o singură coloană,
   titlul are 460px și încape.
   -------------------------------------------------------------------------- */

html .psn-impreuna--compact {
  background: var(--psn-surface, #fdf6f4);
  border: 1px solid var(--psn-line, #e7dedb);
  border-radius: 12px;
  padding: 16px;
  margin-top: 4px;
}

html .psn-impreuna--compact .psn-impreuna__inner {
  max-width: none;
  padding-inline: 0;
}

/* Titlul listei e h3 aici, nu h2, și stă lângă butonul de cumpărare. La
   mărimea de secțiune ar concura cu numele produsului. */
html .psn-impreuna--compact .psn-impreuna__heading {
  font-size: 1.0625rem;
}

html .psn-impreuna--compact .psn-impreuna__sub {
  margin-top: 4px;
  font-size: 0.875rem;
}

html .psn-impreuna--compact .psn-impreuna__lista {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 12px;
}

/* --------------------------------------------------------------------------
   83.2 Descrierea, pe toată lățimea

   `max-width` pe conținut, nu pe secțiune: fundalul și linia de sus merg de la
   un capăt la altul, dar rândurile de text se opresc la 68 de caractere. Fără
   asta, pe 1440px un rând ar avea peste 150 de caractere și ochiul pierde
   începutul rândului următor.
   -------------------------------------------------------------------------- */

html .psn-descriere {
  border-top: 1px solid var(--psn-line, #e7dedb);
}

/* 1520px + 40px de margine interioară e exact geometria galeriei, măsurată pe
   trei ecrane: la 1280 și 1440 conținutul începe la x=40, la 1920 la x=240.
   Orice altă valoare lasă descrierea decalată față de poze. */
html .psn-descriere__inner {
  max-width: 1520px;
  margin-inline: auto;
  padding-inline: 40px;
}

html .psn-descriere__heading {
  margin: 0 0 20px;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  line-height: 1.2;
  color: var(--psn-ink, #201619);
}

html .psn-descriere__continut {
  max-width: 68ch;
}

@media screen and (max-width: 749px) {
  html .psn-descriere__inner {
    padding-inline: 16px;
  }
}

/* --------------------------------------------------------------------------
   83.3 Plăcuța neagră a mărcii PASSION

   Marca de pe cutie are negrul copt în fișier — nu are fundal transparent. Ca
   să nu iasă un dreptunghi negru pe alb, stă pe o plăcuță tot neagră, care se
   topește cu ea. Plăcuța e un `div` scris în descriere, deci se întindea pe
   toată lățimea disponibilă: 1360px de bandă neagră. `inline-block` o face să
   se strângă exact pe logo.
   -------------------------------------------------------------------------- */

html .psn-brand-logo {
  display: inline-block;
}

/* Fotografia din mijlocul descrierii nu depășește lățimea de citit. */
html .psn-desc-foto img {
  max-width: min(340px, 100%);
}

/* Linia cu producătorul, jos: logoul lui e mic și șters, nu concurează cu
   marca produsului din capul descrierii. */
html .psn-desc-producator img {
  opacity: 0.75;
}

/* ==========================================================================
   84. PAGINA DE PRODUS PE TREI COLOANE (02.08.2026)

   Cerința: recomandările să se vadă imediat ce clientul intră pe produs, în
   dreapta. Ieri le mutasem în coloana de detalii; măsurat pe 1440×900, lista
   începea tot la y=1355, adică 455px sub marginea ecranului.

   ARITMETICA, măsurată element cu element în coloana de detalii:
     titlu 106 + preț 38 + stoc și încredere 90 + variante 107 + buton 213
     = 554px, din cei 580 disponibili de la y=320 până la y=900.
   Chiar cu toate spațiile duse la zero, recomandările ar fi început la 874 și
   nu s-ar fi văzut nimic din ele. Nu era o problemă de spațiere, ci de coloană.

   Magazinul de referință (intimax.ro) rezolvă la fel: galerie, detalii, iar
   „PRODUSE ALTERNATIVE" într-o a treia coloană care începe la aceeași înălțime
   cu titlul produsului.

   Proporțiile: tema dă `2fr 1fr` peste 1200px. Trec la trei coloane păstrând
   galeria dominantă. Pe 1440px asta înseamnă galerie 613, detalii 421,
   recomandări 326 — aproape de raportul lor (490 / 485 / 325), dar cu galeria
   mai mare, fiindcă la noi fotografia produsului e argumentul principal.
   ========================================================================== */

@media screen and (min-width: 1200px) {

  /* `!important` nu e comoditate. Secțiunea 28.9 fixează `57% 43% !important`
     de la 750px în sus, tocmai ca să bată stylesheet-ul compilat al temei, care
     se încarcă DUPĂ passion-custom.css. Fără `!important` aici, regula aceea
     câștigă și a treia coloană cade pe rândul următor — exact ce s-a întâmplat
     la prima încercare. Regula de față e mai îngustă (de la 1200px, doar cu
     galeria la stânga), deci nu atinge intervalul pe care îl acoperă 28.9. */
  html .product-information__grid:not(.product-information__grid--half):not(.product-information--media-none).product-information--media-left {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1.05fr) minmax(0, 0.82fr) !important;
    column-gap: 32px;
  }

  /* Tema dă `order: 0` galeriei și `order: 1` detaliilor. Coloana nouă pornește
     tot de la 0, deci se așeza ÎNAINTEA detaliilor. */
  html .product-information__recomandari {
    order: 2;
  }

  /* Tema desparte cele două coloane cu jumătate de `--gap` pe fiecare. Cu trei
     coloane, spațiul îl dă `column-gap`, altfel se adună de două ori. */
  html .product-information--media-left .product-information__media {
    padding-right: 0;
  }
  html .product-information--media-left .product-details {
    padding-left: 0;
  }

  html .product-information__recomandari {
    min-width: 0;
  }
}

/* Între 750 și 1199px grila rămâne pe două coloane: a treia ar strânge
   detaliile sub lățimea la care butoanele de variantă mai încap pe un rând.
   Recomandările trec pe toată lățimea, sub galerie și detalii. */
@media screen and (min-width: 750px) and (max-width: 1199px) {
  html .product-information__recomandari {
    grid-column: 1 / -1;
    order: 2;
    margin-top: 24px;
  }
}

/* Pe telefon coloanele se stivuiesc. `order: 2` e obligatoriu și aici: fără el,
   lista apărea la y=604, adică ÎNAINTEA detaliilor (y=957) — între poze și
   preț. Tema dă `order: 0` galeriei și `order: 1` detaliilor, iar elementul nou
   pornește tot de la 0 și se strecoară între ele. */
@media screen and (max-width: 749px) {
  html .product-information__recomandari {
    grid-column: 1 / -1;
    order: 2;
    margin-top: 20px;
  }
}

/* --------------------------------------------------------------------------
   84.1 Lista, în coloana ei

   Nu mai are nevoie de marginea de sus care o despărțea de reasigurări: acum
   începe în capul coloanei, la aceeași înălțime cu titlul produsului.
   -------------------------------------------------------------------------- */

html .product-information__recomandari .psn-impreuna--compact {
  margin-top: 0;
}

/* Rămâne pe ecran cât timp clientul derulează galeria, ca și coloana de
   detalii. `--sticky-header-offset` e variabila temei, ca să nu intre sub
   antetul lipicios. */
@media screen and (min-width: 1200px) {
  html .product-information__recomandari {
    position: sticky;
    top: calc(var(--sticky-header-offset, 0px) + 20px);
    align-self: start;
  }
}

/* ==========================================================================
   85. FINISAJUL CELOR TREI COLOANE (02.08.2026)

   Cu a treia coloană, coloana de detalii a scăzut de la 585 la 398px (1440) și
   la 349px (1280). Două lucruri nu mai încap la dimensiunile vechi. Ambele
   măsurate, nu ghicite.
   ========================================================================== */

/* --------------------------------------------------------------------------
   85.1 Titlul produsului

   La 32px, într-o coloană de 374px, cele 88 de caractere se rup pe 5 rânduri
   (176px) la 1440 și pe 6 rânduri (211px) la 1280. În coloana veche de 585px
   ocupa 3 rânduri și 106px.

   Titlul rămâne cel mai mare element din coloană, dar la 26px intră în 4
   rânduri și lasă prețul și butonul mai sus. Nu scurtez titlul: vezi secțiunea
   82 pentru motivul.
   -------------------------------------------------------------------------- */

@media screen and (min-width: 1200px) {
  html .product-details h1,
  html .product-details .text-block h1 {
    /* VAL 1.2 — 08.08.2026: 1.625rem (26px) -> 1.75rem (28px).
       26px nu era pe scara de sistem. 28px e treapta H1-produs. */
    font-size: 1.75rem;
    line-height: 1.25;
  }
}

@media screen and (min-width: 1200px) and (max-width: 1365px) {
  html .product-details h1,
  html .product-details .text-block h1 {
    font-size: 1.5rem;
  }
}

/* --------------------------------------------------------------------------
   85.2 Cardurile din coloana de recomandări

   Poza de 96px lăsa 131px pentru titlu la 1440 și doar 92px la 1280. Rezultatul
   măsurat: „Lubrifiant MARATON Gel, pe bază de apă, 50 ml" se afișa pe 38px din
   cei 57px necesari — se tăia la jumătate.

   Am încercat întâi cardul pe verticală, cu poza deasupra. Aritmetica l-a
   respins: două carduri ar fi ajuns la ~680px, iar de la y=320 până la marginea
   ecranului de 900px sunt 580. Ar fi ieșit din prima vedere tocmai lista pe care
   Cristian a cerut-o vizibilă.

   Poza scade la 64px și titlul primește trei rânduri. Titlul ajunge la 165px
   lățime la 1440 și 126px la 1280 — încap 44 de caractere în ambele cazuri.
   -------------------------------------------------------------------------- */

@media screen and (min-width: 1200px) {
  html .product-information__recomandari .psn-impreuna__media {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
  }

  html .product-information__recomandari .psn-impreuna__card {
    gap: 12px;
    padding: 12px;
  }

  html .product-information__recomandari .psn-impreuna__titlu {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  html .product-information__recomandari .psn-impreuna__buton {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* Subtitlul „Clienții aleg de obicei și:" e o notă, nu o informație de
     cumpărare. Într-o coloană de 311px fură două rânduri din prima vedere. */
  html .product-information__recomandari .psn-impreuna__sub {
    font-size: 0.8125rem;
    margin-top: 2px;
  }
}

/* ==========================================================================
   86. TIPOGRAFIE — UN SINGUR SISTEM (02.08.2026)

   Auditul pe cinci pagini a găsit trei familii în folosință:
     Inter      870 elemente   textul curent, meniuri, butoane, formulare
     Fraunces    44 elemente   titlurile
     Arial        2 elemente   butoanele mele din „Se cumpără des împreună"

   Regula cerută: serif DOAR pe H1 și H2, Inter pe tot restul.

   NU ating mărimile. Mai multe sunt decizii luate cu motiv și măsurate:
   titlul de produs la 26px există pentru că a treia coloană a îngustat coloana
   de detalii (secțiunea 85.1), iar „Se cumpără des împreună" e la 17px ca să nu
   concureze cu numele produsului. O „ierarhie unică de mărimi" le-ar șterge pe
   amândouă. Uniformizez familia, greutatea și înălțimea rândului.
   ========================================================================== */

/* --------------------------------------------------------------------------
   86.1 Arial pe butoanele mele

   `<button>` nu moștenește fontul paginii — browserul îi pune fontul lui de
   interfață. Le scrisesem fără `font-family`, deci ieșeau Arial, singurele două
   elemente din tot saitul cu al treilea font.
   -------------------------------------------------------------------------- */

html .psn-impreuna__buton,
html .psn-impreuna__form button,
html button.psn-buton,
html .psn-bottom-nav__item {
  font-family: var(--font-body--family), 'Inter', system-ui, sans-serif;
}

/* Plasa de siguranță: orice buton sau câmp de formular care scapă mai târziu.
   `inherit` ar lua fontul părintelui, care poate fi un titlu serif; aici vrem
   explicit familia de text. */
html button,
html input,
html select,
html textarea {
  font-family: var(--font-body--family), 'Inter', system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   86.2 Serif doar pe H1 și H2 — după ETICHETĂ, nu după presetul temei

   PRIMA ÎNCERCARE A FOST GREȘITĂ și merită scrisă, ca să nu se repete. Am mutat
   presetele `type_font_h3` și `type_font_h4` din setările temei pe familia de
   text. Rezultatul măsurat: „Cele mai vândute" și „Abonează-te la noutăți" au
   trecut pe Inter, deși sunt `<h2>`.

   Motivul: în Horizon, tipografia se ia după CLASA ÎNVELIȘULUI, nu după
   eticheta titlului. Regula din base.css e
     `.text-block.h4 > *  { font-family: var(--font-h4--family) }`
   iar acele `<h2>` stau în blocuri cu clasa `h3` sau `h4`. Presetul spune „cât
   de mare arată", nu „ce nivel e".

   Cerința lui Cristian e pe nivel: H1 și H2 serif, restul Inter. Deci se scrie
   pe etichetă, cu `!important`, pentru că `.text-block.h4 > *` are
   specificitate (0,2,0) și orice selector de etichetă pierde în fața ei.

   EXCEPȚIE: `.psn-logo__sub` („STORE" de sub logo) face parte din marcă.
   -------------------------------------------------------------------------- */

html h1,
html h2 {
  font-family: var(--font-heading--family), Georgia, serif !important;
}

html h3,
html h4,
html h5,
html h6 {
  font-family: var(--font-body--family), 'Inter', system-ui, sans-serif !important;
}

/* Greutatea și înălțimea rândului au nevoie tot de `!important`, din același
   motiv: presetul temei vine de pe clasa învelișului, cu specificitate (0,2,0).

   `line-height` nu e cosmetic aici. h3 avea 24px font și 24px înălțime de rând,
   raport 1,0: cozile lui „j", „p", „ț" ies din cutia rândului și se retează la
   orice tăiere. Aceeași capcană prinsă la titlurile din blog (secțiunea 81).

   Doar h3–h6. h1 și h2 au înălțimi reglate pe fiecare context — titlul de
   produs la 1,15 (secțiunea 85.1), eroul la 1,1 — și nu se ating. */
html h3,
html h4 {
  font-weight: 600 !important;
  line-height: 1.25 !important;
}

html h5,
html h6 {
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

/* Etichetele butoanelor de pe carduri („Adaugă", „Alege") nu sunt titluri. */
html .quick-add__button .add-to-cart-text__content span span,
html .product-card .quick-add__button span,
html .button span {
  font-family: var(--font-body--family), 'Inter', system-ui, sans-serif;
}

html .psn-logo__sub {
  font-family: var(--font-heading--family), Georgia, serif !important;
}

/* --------------------------------------------------------------------------
   86.3 Înălțimea rândului pe titlurile mici

   h3 avea 24px font și 24px line-height, adică raport 1,0. Cozile literelor
   „j", „p", „ț" ies din cutia rândului și se retează la orice tăiere sau
   `overflow: hidden`. Aceeași capcană pe care am prins-o la titlurile din blog
   (secțiunea 81). 1,25 le încape, fără să lase titlul să pară rărit.
   -------------------------------------------------------------------------- */

html h3,
html h4 {
  line-height: 1.25;
}

html h5,
html h6 {
  line-height: 1.35;
}

/* --------------------------------------------------------------------------
   86.4 Rădăcina

   `<html>` rămăsese pe Times New Roman, fontul implicit al browserului. Nu se
   vede nicăieri, fiindcă `body` pune Inter peste tot, dar orice element care ar
   scăpa de sub `body` (rar, dar se întâmplă la portaluri și dialoguri native)
   ar moșteni un serif de sistem.
   -------------------------------------------------------------------------- */

html {
  font-family: var(--font-body--family), 'Inter', system-ui, sans-serif;
}

/* ==========================================================================
   87. PANOUL DE PREZENTARE AL PRODUSULUI (02.08.2026)

   Echivalentul bannerului de la magazinul de referință, construit din HTML.
   Al lor e un JPEG de 906×460 cu textul copt înăuntru: blurat pe ecranele dese,
   necitibil de Google, imposibil de corectat fără refăcut fișierul. Panoul de
   aici arată la fel și nu are niciunul din cele trei neajunsuri.

   Structura: fotografia produsului la stânga, marca și trei rânduri de
   caracteristici la dreapta, iar dedesubt o bandă cu specificațiile în perechi
   etichetă/valoare — diametru, material, marcaj, standard.
   ========================================================================== */

html .psn-panou {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  margin: 0 0 32px;
  padding: 24px;
  background: var(--psn-surface, #f8f1ef);
  border: 1px solid var(--psn-line, #e7dedb);
  border-radius: var(--psn-radius, 10px);
}

html .psn-panou__foto {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

html .psn-panou__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

html .psn-panou__marca {
  margin: 0 0 12px;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--psn-ink, #201619);
}

html .psn-panou__linii {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

/* Bifa e desenată, nu o iconiță încărcată separat: trei rânduri de text nu
   justifică încă o cerere de rețea pe fiecare pagină de produs. */
html .psn-panou__linii li {
  position: relative;
  padding-left: 24px;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--psn-ink, #201619);
}

html .psn-panou__linii li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--psn-red, #c42026);
  border-bottom: 2px solid var(--psn-red, #c42026);
  transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   87.1 Banda de specificații

   Perechi etichetă/valoare, în `<dl>`. E marcajul corect pentru specificații,
   iar cititoarele de ecran anunță „Diametru: 52 mm", nu două texte alăturate.
   -------------------------------------------------------------------------- */

html .psn-panou__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--psn-line, #e7dedb);
}

html .psn-panou__spec {
  min-width: 0;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--psn-line, #e7dedb);
  border-radius: 999px;
}

html .psn-panou__spec dt {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--psn-muted, #6b6168);
}

html .psn-panou__spec dd {
  margin: 2px 0 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--psn-ink, #201619);
}

/* --------------------------------------------------------------------------
   87.2 Pe telefon

   Fotografia trece deasupra textului. Nu o ascund: e singura din panou și, la
   360px lățime disponibilă, o poză de 220px alături ar lăsa textului 100px.
   -------------------------------------------------------------------------- */

@media screen and (max-width: 749px) {
  html .psn-panou {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 16px;
  }

  html .psn-panou__foto {
    max-width: 200px;
    margin-inline: auto;
    aspect-ratio: 1;
  }

  html .psn-panou__specs {
    gap: 8px;
  }

  html .psn-panou__spec {
    padding: 8px 12px;
  }
}

/* ==========================================================================
   88. PAGINA DE PRODUS CURGE CA UN ÎNTREG (02.08.2026)

   Cerința lui Cristian: „titlul și celelalte informații să coboare în jos o
   dată cu poza, nu separat".

   CE SE ÎNTÂMPLA, măsurat la derulare pe 1440×900:

     derulat la:        0px     300px    600px    900px
     galeria         y=320      y=20     y=0      y=0     <- rămâne pinuită
     coloana detalii y=320      y=20     y=-280   y=-580  <- pleacă în sus
     titlul          y=352      y=52     y=-248   y=-548

   Galeria are clasa `sticky-content` a temei (`position: sticky; top: 0`) și,
   fiind scurtă (485px), se agață imediat. Coloana de detalii are
   `sticky-content--desktop`, dar are 1181px, mai mult decât ecranul de 900px —
   iar un element lipicios mai înalt decât fereastra pur și simplu se derulează.
   Deci una se oprea și cealaltă aluneca pe lângă ea.

   Nu se poate „lipi" și coloana de detalii: asta e regula lui `position:
   sticky`, nu o setare. Singura soluție ca cele două să se miște împreună e ca
   niciuna să nu se lipească.

   Desprind și coloana de recomandări, pe care o făcusem lipicioasă la
   secțiunea 84. Ar fi rămas singura care se oprește, adică exact „separat", doar
   în altă parte a ecranului. Vizibilitatea cerută atunci vine din poziția
   coloanei — începe la y=320, în prima vedere — nu din lipire.

   NU se atinge bara lipicioasă de „Adaugă în coș" de jos: aceea e alt mecanism
   (`enable_sticky_add_to_cart`), apare doar după ce butonul iese din ecran și e
   utilă exact atunci.
   ========================================================================== */

@media screen and (min-width: 750px) {

  html .product-information__media .sticky-content,
  html .product-information__media > .sticky-content,
  html [class*="media-gallery"].sticky-content {
    position: static;
    top: auto;
  }

  html .product-details.sticky-content--desktop {
    position: static;
    top: auto;
  }

  html .product-information__recomandari {
    position: static;
    top: auto;
  }
}

/* ==========================================================================
   89. DESCRIEREA SUB POZĂ, FĂRĂ GOL (02.08.2026)

   Cristian: „rămâne mare distanță și mult loc liber între poză și descriere,
   grupează-le mai ordonat".

   MĂSURAT pe 1440px, înainte:
     galeria           se termină la y=805
     grila             se termină la y=1501   (înălțimea o dă coloana de cumpărare)
     descrierea        începea la y=1549
     -> 696px de gol sub poză. La 1280px: 956px.

   Cauza nu era o spațiere greșită, ci structura: descrierea era o secțiune
   separată, sub grilă, deci nu putea începe înainte ca TOATE coloanele să se
   termine. Iar coloana de cumpărare are 1181px, față de 485px cât are galeria.

   Soluția: descrierea intră în grilă, pe rândul al doilea al primei coloane,
   iar coloana de detalii se întinde peste ambele rânduri. Golul nu se
   „micșorează", dispare — e umplut cu exact conținutul care îi urma oricum.
   ========================================================================== */

@media screen and (min-width: 1200px) {

  html .product-information__grid:not(.product-information__grid--half):not(.product-information--media-none).product-information--media-left {
    grid-template-areas:
      'media detalii recos'
      'descriere detalii .';
    align-items: start;
  }

  html .product-information--media-left .product-information__media {
    grid-area: media;
  }
  html .product-information--media-left .product-details {
    grid-area: detalii;
  }
  html .product-information--media-left .product-information__recomandari {
    grid-area: recos;
  }
  html .product-information--media-left .product-information__descriere {
    grid-area: descriere;
    margin-top: 32px;
  }

  /* Descrierea stă acum într-o coloană de ~590px, nu pe toată lățimea paginii.
     Nu mai are nevoie nici de lățimea maximă de 1520px, nici de marginile
     laterale de 40px — coloana i le dă deja. */
  html .product-information__descriere .psn-descriere__inner {
    max-width: none;
    padding-inline: 0;
  }
  html .product-information__descriere .psn-descriere {
    border-top: 0;
  }
  html .product-information__descriere .psn-descriere__continut {
    max-width: none;
  }

  /* Panoul, într-o coloană de 590px: fotografia scade, ca textul să rămână
     lizibil. La 220px cât avea pe toată lățimea, ar fi rămas 300px pentru cele
     trei rânduri și banda de specificații. */
  html .product-information__descriere .psn-panou {
    grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
    gap: 20px;
    padding: 16px;
  }
}

/* Între 750 și 1199px grila are două coloane: descrierea trece pe toată
   lățimea, sub ele, iar recomandările rămân după ea. */
@media screen and (min-width: 750px) and (max-width: 1199px) {
  html .product-information__descriere {
    grid-column: 1 / -1;
    order: 3;
    margin-top: 32px;
  }
}

@media screen and (max-width: 749px) {
  html .product-information__descriere {
    grid-column: 1 / -1;
    order: 3;
    margin-top: 24px;
  }
}

/* ==========================================================================
   90. STOCUL ȘI INSIGNELE, SUB POZĂ (02.08.2026)

   Cerut de Cristian: „mută secțiunea În stoc și celelalte informații până la
   Ambalaj sub poză". Erau în coloana de cumpărare, între preț și selectorul de
   ambalaj.

   Grila primește un al treilea rând în prima coloană:
     media      | detalii | recomandări
     info       | detalii | .
     descriere  | detalii | .

   Coloana de cumpărare rămâne cu titlul, prețul, ambalajul și butonul — doar
   drumul spre cumpărare. Ea se întinde peste toate cele trei rânduri, deci
   golul de sub ea se închide singur pe măsură ce coloana din stânga crește.
   ========================================================================== */

@media screen and (min-width: 1200px) {

  html .product-information__grid:not(.product-information__grid--half):not(.product-information--media-none).product-information--media-left {
    grid-template-areas:
      'media detalii recos'
      'info detalii .'
      'descriere detalii .';
  }

  html .product-information--media-left .product-information__info {
    grid-area: info;
    margin-top: 24px;
  }
}

/* Sub 1200px coloana din stânga nu mai există separat: blocul trece pe toată
   lățimea, imediat după galerie și înaintea detaliilor. Acolo e locul lui
   firesc — informația de stoc se citește înainte de a alege ambalajul. */
/* Între 750 și 1199px grila are DOUĂ coloane. Blocul de stoc NU trebuie să
   ocupe toată lățimea: prima încercare făcea asta și împingea coloana de
   cumpărare sub galerie — măsurat la 1100px, detaliile ajungeau la x=40, y=881,
   adică sub poză în loc de lângă ea. Așezat pe rândul al doilea al primei
   coloane, lasă recomandările alături și galeria cu detaliile pe primul rând. */
@media screen and (min-width: 750px) and (max-width: 1199px) {
  html .product-information__info {
    order: 2;
    margin-top: 24px;
  }
  html .product-information__recomandari {
    grid-column: auto;
    order: 3;
    margin-top: 24px;
  }
  html .product-information__descriere {
    grid-column: 1 / -1;
    order: 4;
    margin-top: 32px;
  }
}

/* Sub 750px totul se stivuiește pe o coloană. Blocul de stoc vine imediat după
   fotografie, ca un rezumat, exact cum a cerut Cristian. */
@media screen and (max-width: 749px) {
  html .product-information__info {
    grid-column: 1 / -1;
    order: 1;
    margin-top: 20px;
  }
  html .product-details {
    order: 2;
  }
  html .product-information__recomandari {
    order: 3;
  }
  html .product-information__descriere {
    order: 4;
  }
}

/* --------------------------------------------------------------------------
   90.1 Blocul, în coloana din stânga

   Avea marginile gândite pentru o coloană de cumpărare de 398px. Sub o
   fotografie de 587px, insignele încap pe două rânduri în loc de trei.
   -------------------------------------------------------------------------- */

html .product-information__info .psn-info-pret {
  margin-top: 0;
}

@media screen and (min-width: 1200px) {
  html .product-information__info .psn-incredere {
    gap: 8px;
  }
}


/* --------------------------------------------------------------------------
   91. Dovada socială: nota magazinului și recenziile reale (04.08.2026)

   Ambele componente sunt CONDIȚIONATE în Liquid — până la pragul de recenzii
   nu se randează niciun element, deci regulile de mai jos nu ating nimic azi.
   Sunt scrise acum ca să nu revenim în aceeași zonă când vin recenziile.

   Clase noi, fără adversar în temă: nu e nevoie de prefix `html` sau de
   `!important` (verificat: `psn-rating` și `psn-recenzii` nu apar nici în
   styles.css, nici în base.css).
   -------------------------------------------------------------------------- */

.psn-rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--psn-muted, #6b6168);
}

.psn-rating__stele {
  display: inline-flex;
  gap: 1px;
  /* Stelele sunt caractere, nu iconițe: pe 13px arată subțiri, iar aurul pe
     alb are contrast mic. Un pic mai mari și mai grele le fac lizibile fără
     să devină al doilea accent al paginii. */
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
}

.psn-rating__stea {
  color: rgb(201 162 39 / 0.28);
}

.psn-rating__stea--plina {
  color: var(--psn-gold, #c9a227);
}

/* Jumătatea de stea: aurul umple exact 50% din caracter, restul rămâne palid.
   `background-clip: text` e suportat peste tot unde contează; unde nu e,
   steaua rămâne aurie întreagă — o rotunjire în sus de 0,5, nu o eroare. */
.psn-rating__stea--jumatate {
  background: linear-gradient(
    90deg,
    var(--psn-gold, #c9a227) 50%,
    rgb(201 162 39 / 0.28) 50%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.psn-rating__text strong {
  font-weight: 700;
  color: var(--psn-ink, #201619);
}

.psn-rating--hero {
  margin-top: 12px;
}

/* --- Secțiunea de recenzii ------------------------------------------------ */

.psn-recenzii {
  padding-block: 48px;
  background: var(--psn-surface, #f8f1ef);
}

.psn-recenzii__inner {
  max-width: var(--page-width, 1400px);
  margin-inline: auto;
  padding-inline: var(--page-margin, 20px);
}

.psn-recenzii__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  margin-block-end: 24px;
}

.psn-recenzii__heading {
  margin: 0;
}

.psn-recenzii__sumar {
  margin: 0;
  font-size: 0.875rem;
  color: var(--psn-muted, #6b6168);
}

.psn-recenzii__sumar strong {
  font-weight: 700;
  color: var(--psn-ink, #201619);
}

/* Grilă, nu carusel: cu 6 recenzii, un carusel ascunde 4 din ele după un gest
   pe care majoritatea vizitatorilor nu îl fac. `auto-fit` le așază singure —
   3 pe desktop, 2 pe tabletă, 1 pe telefon — fără media query. */
.psn-recenzii__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.psn-recenzii__card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 20px;
  border: 1px solid var(--psn-line, #e7dedb);
  border-radius: 12px;
  background: #fff;
}

.psn-recenzii__stele {
  display: flex;
  gap: 1px;
  margin: 0;
  font-size: 0.9375rem;
  color: rgb(201 162 39 / 0.28);
}

.psn-recenzii__stea--plina {
  color: var(--psn-gold, #c9a227);
}

.psn-recenzii__titlu {
  margin: 0;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--psn-ink, #201619);
}

.psn-recenzii__text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--psn-ink, #201619);
}

.psn-recenzii__autor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0;
  font-size: 0.78125rem;
  color: var(--psn-muted, #6b6168);
}

.psn-recenzii__nume {
  font-weight: 600;
  color: var(--psn-ink, #201619);
}

.psn-recenzii__verificat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #1c6b3a;
}

.psn-recenzii__verificat svg {
  width: 13px;
  height: 13px;
  flex: none;
}

/* Numele produsului e ancoră, nu decor: recenzia fără produs e un compliment,
   recenzia cu produs e un drum spre coș. `margin-top: auto` îl ține la baza
   cardului chiar dacă textele au lungimi diferite. */
.psn-recenzii__produs {
  margin-top: auto;
  padding-top: 4px;
  font-size: 0.78125rem;
  font-weight: 600;
  color: var(--psn-wine, #8e1418);
  text-decoration: none;
}

.psn-recenzii__produs:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media screen and (max-width: 749px) {
  .psn-recenzii {
    padding-block: 32px;
  }
  .psn-recenzii__inner {
    padding-inline: 16px;
  }
  .psn-recenzii__card {
    padding: 16px;
  }
}
/* 05.08.2026 — reimprospatare cache dupa repararea profilului de livrare. */


/* ==========================================================================
   92. BUTONUL DE PE CARD — DOAR LA HOVER PE DESKTOP (05.08.2026)

   Cerut explicit: „butonul trebuie să apară doar când trebuie (hover pe
   desktop și comportamentul actual pe mobil), nu permanent”.

   De ce nu e destul `opacity: 0`: pe 30.07 butonul a fost lăsat MEREU vizibil
   tocmai fiindcă stă în flux, la baza cardului (secțiunea 20, `order: 99`).
   Ascuns doar prin opacitate, cei 68px ai lui rămâneau rezervați și se vedea
   un gol în interiorul conturului cardului.

   Reparăm cauza: pe desktop scoatem componenta din flux și o suprapunem peste
   fotografie. MĂSURAT pe 3 pagini × 3 lățimi (acasă, colecție, căutare la
   1440/1024/768): galeria e pătrată peste tot (raport 0,997–1,000) și începe
   exact la marginea de sus a cardului (decalaj 0px). Deci `aspect-ratio: 1`
   ancorat sus reproduce exact zona fotografiei, fără să ghicim înălțimi.

   Cardul scade uniform cu 68px — nu apare niciun gol și nimic nu sare la
   hover, fiindcă doar opacitatea se animă.

   `!important` pe poziționare e obligatoriu: secțiunea 20 pune
   `position: relative !important; inset: auto !important`.

   Accesibilitate: butonul rămâne focalizabil, deci utilizatorul de tastatură
   îl atinge cu Tab, cardul primește `:focus-within` și butonul devine vizibil
   și apăsabil. La repaus e doar transparent și inert, nu ascuns din DOM.

   Mobilul și tabletele fără mouse NU sunt atinse: media query cere
   `any-hover: hover`.
   ========================================================================== */

@media screen and (min-width: 750px) and (any-hover: hover) {
  html .product-card .product-card__content quick-add-component.quick-add {
    position: absolute !important;
    inset-block-start: 0 !important;
    inset-block-end: auto !important;
    inset-inline: 0 !important;
    aspect-ratio: 1 / 1;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0 12px 12px;
    align-items: flex-end;
    opacity: 0;
    transition: opacity var(--psn-dur-rapid, 0.16s) var(--psn-ease, cubic-bezier(0.2, 0.7, 0.3, 1));
  }

  /* La repaus butonul e inert, ca fotografia și linkul cardului să rămână
     apăsabile pe toată suprafața. */
  html .product-card .quick-add__button.add-to-cart-button {
    pointer-events: none;
  }

  html .product-card:is(:hover, :focus-within) .product-card__content quick-add-component.quick-add {
    opacity: 1;
  }

  html .product-card:is(:hover, :focus-within) .quick-add__button.add-to-cart-button {
    pointer-events: auto;
  }

  /* Cine ține la mișcare redusă vede butonul apărând instantaneu. */
  @media (prefers-reduced-motion: reduce) {
    html .product-card .product-card__content quick-add-component.quick-add {
      transition: none;
    }
  }
}


/* ==========================================================================
   93. FUNDALUL ROZ DE SUB POZELE DE CATEGORIE — ELIMINAT (05.08.2026)

   Semnalat de Cristian: „unele poze au pe fundal un roz șters”. Are dreptate,
   și cauza e dublă. MĂSURAT live pe toate cele 4 carduri de pe pagina de start:

   1. Secțiunea 41 pune pe `.psn-cat-card__visual` un gradient construit din
      `color-mix(in srgb, currentColor 3%…7%, transparent)`. Pe cardul de
      categorie `currentColor` este `rgb(142,20,24)` — roșul de text al
      brandului. Roșu la 3–7% peste alb = exact rozul reclamat. Intenția era
      „o adâncime fină sub produs”, dar rezultatul e un dreptunghi colorat.

   2. Secțiunea 33 pune pe imagine `mix-blend-mode: multiply`. Fotografia nu
      stă PESTE acel fundal, ci se ÎNMULȚEȘTE cu el — deci toată zona albă a
      produsului preia nuanța. Asta e un overlay colorat pe imaginea de
      produs, interzis explicit: „Produsele trebuie să își păstreze culorile
      reale”.

   Reparația respectă paleta: nu introducem nicio culoare nouă, ci lăsăm albul
   cardului. Fără gradient nu mai apare niciun dreptunghi, deci problema pe
   care gradientul o rezolva inițial dispare odată cu el.
   ========================================================================== */

html .psn-cat-card__visual {
  background: none;
}

html .psn-cat-card__visual img {
  mix-blend-mode: normal;
}

/* ==========================================================================
   94. BANNERUL DE CONSIMȚĂMÂNT NU MAI ACOPERĂ ZONA DE CUMPĂRARE (06.08.2026)

   Ultima observație a auditului din 5 august, și cea mai scumpă: „cel mai
   vizibil element care strică prima impresie pe telefon nu e niciunul dintre
   cele de mai sus: e bannerul de cookie-uri, care ocupă un sfert din ecran și
   acoperă butonul de cumpărare”.

   MĂSURAT azi pe 390×844, pe pagina de produs: bannerul e `position: fixed`,
   lipit de marginea de jos, înalt de 143px, cu `z-index: 2.000.000`. Bara de
   navigare de jos (62px, z-index 60) e acoperită INTEGRAL. Tot ce derulezi în
   ultimii 143px de ecran rămâne dedesubt — inclusiv butonul de cumpărare, în
   momentul în care ajungi la el.

   Ce s-a încercat deja și nu mai are ce da: bannerul a fost strâns de la 246
   la 143px în trei runde (secțiunea 27) și amânat cu două secunde (59.2).
   Textul nu se poate scurta — e formularea legală impusă — și nu se poate
   ascunde, fiindcă atunci informația obligatorie devine una ascunsă.

   Deci nu-l mai micșorăm: îl STIVUIM. Bannerul rămâne exact unde e, iar tot
   ce stă lipit de marginea de jos urcă deasupra lui, iar conținutul primește
   dedesubt exact atâta spațiu cât ocupă el. Rezultatul: butonul de cumpărare
   poate fi adus deasupra bannerului prin derulare, iar bara de navigare nu
   mai dispare.

   Înălțimea nu se poate scrie în CSS: bannerul nu există în DOM la încărcare
   (îl injectează Shopify), iar textul se rupe pe alt număr de rânduri la
   fiecare lățime. O măsoară `snippets/passion-cookie-offset.liquid` și o
   publică în `--psn-cookie-h`. Fără acel snippet, variabila rămâne 0px și
   nimic nu se mișcă — degradare curată.
   ========================================================================== */

:root {
  --psn-cookie-h: 0px;
}

/* Barele lipite de marginea de jos urcă deasupra bannerului.
   Folosim `transform`, nu `bottom`: `bottom` are deja trei valori diferite pe
   `.psn-floats` (18px de bază, nav+14px pe telefon, 24px de la 990px) și le-ar
   fi trebuit trei reguli noi. Deplasarea se adună peste oricare dintre ele. */
html .psn-bottom-nav,
html .psn-floats {
  transform: translateY(calc(-1 * var(--psn-cookie-h)));
  transition: transform 0.24s var(--psn-ease, cubic-bezier(0.2, 0.7, 0.3, 1));
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  html .psn-bottom-nav,
  html .psn-floats {
    transition: none;
  }
}

/* Bara lipită de cumpărare stă deasupra barei de navigare, deci deasupra
   ambelor. Aici lucrăm pe `bottom`, nu pe `transform`: tema își animă bara de
   cumpărare la intrare, iar un `transform` al nostru i-ar tăia animația.
   Regula de pe mobil (secțiunea 29.1) a fost modificată la locul ei. */
@media (min-width: 750px) {
  html .sticky-add-to-cart__bar {
    bottom: var(--psn-cookie-h);
  }
}

/* Conținutul: pe telefon derulează `body`, de la 990px în sus derulează
   `.page-wrapper` (are `overflow-y: auto`; vezi capcana 14 din notele de
   măsurare). Fiecare primește spațiul jos, altfel „urcă butonul deasupra
   bannerului prin derulare” nu are unde să se ducă la capătul paginii.
   Regula de pe `body` e în secțiunea 4, modificată la locul ei. */
@media (min-width: 750px) {
  html .page-wrapper {
    padding-bottom: var(--psn-cookie-h);
  }
}


/* ==========================================================================
   95. BANDA DE CATEGORII PE CREM — FINISAJUL (06.08.2026)

   Punctul 5 din auditul de aseară, în varianta (a), cerută explicit de
   Cristian: „nu sunt convins că trebuie eliminată. Dacă utilizatorii chiar
   folosesc acea navigare, atunci funcționalitatea este mai importantă decât
   minimalismul. Mai degrabă: fundal crem, text închis, hover elegant,
   subliniere aurie."

   Culoarea benzii NU se face de aici, ci din setările temei
   (`background_color_bottom` / `text_color_bottom` din header-group.json,
   trecute azi de la #C42026/#FFFFFF la #F8F1EF/#201619) — ca să rămână
   editabilă din Customizer. Aici sunt doar finisajele care nu au setare:
   linia de jos, sublinierea aurie a categoriei curente și hover-ul.

   De ce conta: roșul saturat pe toată lățimea e limbajul vizual al
   hipermarketului. Era primul lucru colorat pe care îl vedea vizitatorul, pe
   50px de înălțime, din care două treimi rămâneau roșu gol.
   ========================================================================== */

/* Banda nu se mai desparte de conținut prin culoare, deci are nevoie de o
   linie. 1px din culoarea de linie a paletei, nimic mai mult. */
html .header__row--bottom {
  border-block-end: 1px solid var(--psn-line);
}

/* Categoria curentă: subliniere aurie. `aria-current="page"` e pus de temă,
   deci starea e reală, nu ghicită din URL. Sublinierea stă la 14px de margini
   ca să înceapă și să se termine odată cu textul, nu cu zona de atins. */
html .header__row--bottom .menu-list__link[aria-current="page"] {
  position: relative;
}

html .header__row--bottom .menu-list__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset-inline: 14px;
  inset-block-end: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--psn-gold);
  opacity: 1;
}

/* Hover: pe fundal închis semnalul era o lumină (55.4, `currentColor` la 12%).
   Pe crem, aceeași regulă dă un gri murdar. Îl înlocuim cu o urmă caldă de
   roșu — aceeași culoare ca acțiunile, la 7%, cât să se simtă, nu să strige. */
html .header__row--bottom .menu-list__list-item > .menu-list__link:hover,
html .header__row--bottom .menu-list__list-item > .menu-list__link[aria-expanded="true"] {
  background: color-mix(in srgb, var(--psn-red) 7%, transparent);
}


/* ==========================================================================
   96. PAGINA DE PRODUS PE TELEFON — TITLUL ȘI PREȚUL DEASUPRA PLIULUI
   (06.08.2026)

   Punctul 1 din auditul de aseară, cel cu cel mai mare efect asupra vânzării,
   și problema semnalată prima dată pe 21 iulie.

   MĂSURAT azi pe 390×844, înainte:
     galeria          y = 230 … 552
     stoc + livrare   y = 572 … 719
     TITLUL           y = 734          <- sub pliu
     prețul           y = 800+         <- sub pliu
   Vizitatorul de pe telefon — adică vizitatorul real, 47 de afișări pe mobil
   față de 13 pe desktop în Search Console — trebuia să deruleze ca să afle ce
   cumpără și cât costă.

   ORDINEA CERUTĂ: titlu → preț → galerie → stoc și livrare → variante →
   buton → livrare/încredere. Desktopul NU se atinge.

   MECANISMUL, ca să fie limpede pentru cine citește mai târziu: titlul și
   prețul stau într-un sub-bloc al coloanei de detalii, iar `order` funcționează
   numai între FRAȚI. Ca să pot muta doar sub-blocul acela deasupra galeriei,
   fac învelișurile intermediare (`.product-details`, `.group-block`,
   `.group-block-content`) `display: contents` — cutiile lor dispar, copiii urcă
   în grila paginii de produs și devin frați cu galeria. Nu se duplică nimic în
   DOM: rămâne un singur H1, un singur preț, un singur buton.

   De ce nu am ales varianta „un titlu nou, randat separat pe mobil": ar fi
   însemnat două titluri în pagină, dintre care unul ascuns. Google le citește
   pe amândouă.
   ========================================================================== */

@media screen and (max-width: 749px) {
  html .product-details,
  html .product-details > .group-block,
  html .product-details > .group-block > .group-block-content {
    display: contents;
  }

  /* Copiii urcați rămân în COLOANA DE CONȚINUT a grilei (a doua din patru),
     exact acolo unde stătea coloana de detalii. Marginile laterale ale paginii
     vin din coloanele grilei, nu din padding: cu `1 / -1` textul ar ajunge
     lipit de marginea ecranului. Verificat pe captură — prima încercare chiar
     așa a ieșit. */
  html .product-details .group-block-content > * {
    grid-column: 2 / 3;
  }

  html .product-details .group-block-content > .group-block--width-fill {
    order: 1;
  }
  html .product-information__media {
    order: 2;
  }
  html .product-information__info {
    order: 3;
  }
  html .product-details .group-block-content > .divider {
    order: 4;
  }
  html .product-details .group-block-content > variant-picker {
    order: 5;
  }
  html .product-details .group-block-content > .buy-buttons-block {
    order: 6;
  }
  html .product-details .group-block-content > .group-block--width-custom {
    order: 7;
  }
  html .product-information__recomandari {
    order: 8;
  }
  html .product-information__descriere {
    order: 9;
  }
}


/* ==========================================================================
   97. MICRO-ANIMAȚII (06.08.2026)

   Din auditul de aseară, secțiunea „micro-animații care ar adăuga senzația de
   scump". Toate sub 250ms, niciun kilobyte de JavaScript. Ce s-a decis să NU
   se facă, tot de acolo: animații la derulare pentru secțiuni întregi — sunt
   la modă, încetinesc percepția și pe telefoanele slabe se văd sacadat.

   Toate respectă `prefers-reduced-motion`.
   ========================================================================== */

/* Cardul de produs se ridică 2px la trecerea cursorului, cu o umbră cu o
   treaptă mai adâncă. Până acum nu se întâmpla nimic — cardul părea inert.
   Doar pe pointer fin: pe telefon un „hover" rămas agățat după atingere e mai
   rău decât lipsa lui. */
@media (min-width: 750px) and (any-hover: hover) {
  html .product-card {
    transition: transform var(--psn-dur-lent) var(--psn-ease),
                box-shadow var(--psn-dur-lent) var(--psn-ease);
  }

  html .product-card:is(:hover, :focus-within) {
    transform: translateY(-2px);
    box-shadow: var(--psn-shadow-lg);
  }
}

/* Insignele de încredere apar eșalonat, o singură dată la încărcare: ochiul le
   citește ca pe un set, nu ca pe o listă. 40ms între ele, 6 poziții — după a
   șasea nu mai contează, oricum nu sunt mai multe pe un rând. */
@keyframes psn-apare {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

html .psn-incredere > *,
html .psn-info-pret .psn-badge {
  animation: psn-apare 200ms var(--psn-ease) both;
}

html .psn-incredere > *:nth-child(1), html .psn-info-pret .psn-badge:nth-child(1) { animation-delay: 0ms; }
html .psn-incredere > *:nth-child(2), html .psn-info-pret .psn-badge:nth-child(2) { animation-delay: 40ms; }
html .psn-incredere > *:nth-child(3), html .psn-info-pret .psn-badge:nth-child(3) { animation-delay: 80ms; }
html .psn-incredere > *:nth-child(4), html .psn-info-pret .psn-badge:nth-child(4) { animation-delay: 120ms; }
html .psn-incredere > *:nth-child(5), html .psn-info-pret .psn-badge:nth-child(5) { animation-delay: 160ms; }
html .psn-incredere > *:nth-child(n + 6), html .psn-info-pret .psn-badge:nth-child(n + 6) { animation-delay: 200ms; }

@media (prefers-reduced-motion: reduce) {
  html .product-card,
  html .product-card:is(:hover, :focus-within) {
    transition: none;
    transform: none;
  }
  html .psn-incredere > *,
  html .psn-info-pret .psn-badge {
    animation: none;
  }
}

/* ==========================================================================
   98. Bulina „Promoție" intra sub inimioara de favorite (06.08.2026)

   Semnalat de Cristian dupa ce am pus preturi taiate pe variantele de 8 si 12
   cutii: insigna de reducere a aparut prima data si s-a dus fix sub inima.

   MASURAT pe card de 173x173, la 390px:
     insigna .product-badges--top-right ... sus 8, stanga  99..165, z-index 1
     inima   .psn-heart .................. sus 4, stanga 119..163, z-index 3
   Se suprapun pe 46px din 66. Inima castiga, deci insigna dispare complet.

   Insigna se muta in stanga sus — singurul colt liber al galeriei. Inima ramane
   unde e; e locul asteptat pentru favorite si nu se atinge.
   ========================================================================== */
html .product-badges--top-right {
  right: auto;
  left: 8px;
}

/* ==========================================================================
   100. Eticheta de model coboară sub bulina de promoție (06.08.2026)

   Urmarea directa a sectiunii 98: mutand bulina in stanga sus, a ajuns peste
   etichetele de model, care stau tot acolo.

   MASURAT pe card la 390px:
     .product-badges--top-right ... top 8, left 8, z-index 1   (Promoție)
     ul.psn-insigne .............. top 8, left 8, z-index 2   (Nou / Texturat / XL)
   Aceleasi coordonate. Insignele au z mai mare, deci bulina dispare sub ele.

   Coborâm insignele cu 31px = inaltimea bulinei (23) + spatiul dintre ele (8).
   Numai pe cardurile care CHIAR au promotie — pe restul raman sus, unde le e locul.

   ANULAT la VAL 1.5 (08.08.2026). Două motive:

   1. Regula NU făcea ce spune comentariul. `div.product-badges` se randează pe
      FIECARE card — doar bulina din interiorul lui e condiționată. Deci
      `:has(.product-badges--top-right)` se potrivea peste tot, iar insignele
      stăteau la 39px și pe cardurile fără promoție. Măsurat pe
      /collections/prezervative: „Nou" la top 39, cu 31px de gol deasupra.
      Nu s-a văzut până acum pentru că nu exista termen de comparație.
   2. De la VAL 1.5, pe cardurile cu promoție `ul.psn-insigne` nici nu se mai
      randează, deci nu mai are peste ce să se suprapună.

   Insignele revin în colțul cardului, la aceleași coordonate ca bulina nativă.
   ========================================================================== */

/* ==========================================================================
   101. Fara butoane de plata accelerata pe pagina de produs (06.08.2026)

   Cerut de Cristian: „Cumparati cu Shop" si „Mai multe modalitati de plata"
   dispar de sub „Adauga in cos".

   Ce erau: butonul de checkout accelerat generat de Shopify (`payment_button`),
   randat de blocul static `accelerated-checkout` din interiorul `buy-buttons`.
   Nu e un bloc pe care sa-l poti scoate din structura paginii, de-aia il ascundem.

   Motivul lui: un singur buton principal vizibil, in rosu PASSION. Cele doua
   butoane violet trageau ochiul de pe „Adauga in cos".

   DE STIUT: Shop Pay converteste bine la clientii care revin — au datele salvate
   si platesc dintr-o apasare. Daca vrei sa le aduci inapoi, stergi sectiunea asta.
   ========================================================================== */
html .accelerated-checkout-block {
  display: none;
}

/* ==========================================================================
   102. „Adauga in cos" urca sub pret, pe telefon (06.08.2026)

   Cerut de Cristian, dupa modelul sabora.ro: pret, apoi butonul de cumparare,
   apoi tabelul de cantitati. Restul (linia, selectorul ascuns, reasigurarile)
   coboara sub ele.

   Pe DESKTOP e destul ordinea din templates/product.json.
   Pe TELEFON insa sectiunea 96 aseaza totul cu `order`, deci ordinea din DOM
   nu conteaza singura. Valorile de acolo erau:
     galerie 2, info 3, linie 4, selector 5, butoane 6, restul 7+

   Aducem butoanele de la 6 la 4. Blocul de cantitati primeste tot 4, iar linia
   are deja 4 — la egalitate castiga ordinea din DOM, care e acum exact cea buna:
   butoane, cantitati, linie.
   ========================================================================== */
@media screen and (max-width: 749px) {
  html .product-details .buy-buttons-block {
    order: 4;
  }
  html .product-details .shopify-block:has(> .psn-cant) {
    display: contents;
  }
  html .product-details .psn-cant {
    order: 4;
    grid-column: 2 / 3;
  }
}

/* ==========================================================================
   103. SELECTORUL LÂNGĂ BUTON, PE ORICE LĂȚIME (06.08.2026)

   Cristian, a doua oară: „selectorul de cantitate să fie în dreptul butonului
   adaugă în coș, să economisim spațiu".

   De ce nu-l reparasem: măsurasem doar pe 1440px, unde CHIAR sunt pe același
   rând. Măsurat pe 17 lățimi, se stivuiesc pe:
     320 / 360 / 375 px   (telefoane înguste)
     750 / 900 px         (tablete)
     1280 px              (laptop obișnuit — cel mai probabil ecranul lui)
   Cauza: `.product-form-buttons` are `flex-wrap: wrap`, iar butonul, cu textul
   lui nou („Adaugă 18 bucăți"), nu mai încape lângă selectorul de 124px, deci
   trece pe rândul următor. Nu era o problemă de aliniere, ci de încadrare.

   Rândul rămâne un rând. Selectorul își ține lățimea, butonul se strânge.
   Câștigăm 58px pe verticală, deci „Cumpără mai mult" urcă cu tot atât.
   ========================================================================== */

/* CORECȚIE 08.08.2026 — regula de mai jos era pusă PE ORICE LĂȚIME și rupea
   pagina între 750 și 999px. Măsurat în Chrome real, pe pagina de produs:

     lățime ecran   coloana de detalii   rândul cere   depășire de viewport
        1024px            406px             354px            0
         950px            374px             354px            0 (butonul iese
                                                                4px din coloană)
         900px            353px             354px            0 (iese 26px)
         850px            331px             354px            8px
         800px            310px             354px           29px
         768px            296px             354px           42px  <- butonul
                                                                „Adaugă 18
                                                                bucăți" se taie
                                                                la „Adaugă 18
                                                                buc…"

   Rândul cere 354px: selector 124 + gap 12 + buton 218. Cei 218px vin din
   `min-width: fit-content` pus de temă pe SPAN-ul care înveleşte butonul —
   nu pe buton. De aceea `min-width: 0` de mai jos nu ajuta: cădea cu un nivel
   mai jos decât elementul care refuză să se strângă.

   Sub 999px rândul nu are cum să încapă, iar strângerea lui ar tăia textul
   (butonul are `overflow: hidden`). Acolo lăsăm tema să-l treacă pe rândul
   următor, cum făcea înainte de secțiunea 103.

   Pragul e 1000px, măsurat: la 1000px coloana dă 368px > 354px necesari,
   la 950px dă 350px < 354. Ecranele de 1280px și 1440px — cererea inițială —
   rămân neatinse, cu selectorul lângă buton.
   ========================================================================== */

@media screen and (min-width: 1000px) {
  html .product-details .product-form-buttons {
    flex-wrap: nowrap;
    align-items: stretch;
  }
  html .product-details .product-form-buttons .quantity-selector-wrapper {
    flex: 0 0 auto;
  }
  html .product-details .product-form-buttons .add-to-cart-button {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* Sub 1000px revenim la comportamentul temei (`flex-wrap: wrap`). Scris
   explicit, nu lăsat pe seama faptului că regula de mai sus nu se mai aplică.
   NU punem `min-width: 0` aici: exact lăţimea de conţinut a butonului e cea
   care îl împinge pe rândul următor. */
@media screen and (max-width: 999px) {
  html .product-details .product-form-buttons {
    flex-wrap: wrap;
    align-items: stretch;
  }
}

/* Sub 400px rândul e prea strâmt pentru iconiță + text: la 320px butonul ar
   avea 152px pentru un text de 146px plus o iconiță de 28px. Scoatem iconița
   și strângem selectorul — textul e informația, iconița e decorul. */
@media screen and (max-width: 399px) {
  html .product-details .add-to-cart-icon {
    display: none;
  }
  html .product-details .product-form-buttons .quantity-selector-wrapper,
  html .product-details .product-form-buttons .quantity-selector {
    width: 104px;
    min-width: 0;
  }
}


/* ==========================================================================
   104. BLOCUL DE STOC ȘI DESCRIEREA, LIPITE DE POZĂ (06.08.2026)

   Cristian: „secțiunea în stoc cu CE și toate celelalte să le ridici și să le
   aliniezi chiar sub poză și atunci urci și descrierea".

   MĂSURAT pe 1280px, înainte:
     galeria .................. 321..734   (413px înaltă)
     recomandările ............ 321..924   (603px înalte)
     rândul 1 al grilei ....... 603px      <- îl dictează recomandările
     blocul de stoc ........... 948        -> 214px de gol sub poză
     descrierea ............... 1077
   Pe 1440px golul e 142px, pe 990px ajunge la 704px.

   Secțiunea 90 pusese recomandările NUMAI pe primul rând:
       'media detalii recos' / 'info detalii .' / 'descriere detalii .'
   Un rând de grilă e cât cel mai înalt element din el. Recomandările sunt mai
   înalte decât fotografia, deci rândul 1 creștea după ele, iar sub poză
   rămânea aer. Nu era o spațiere de reglat — era rândul care se întindea.

   Le lăsăm să se întindă peste toate cele trei rânduri, cum face deja coloana
   de cumpărare. Rândul 1 devine exact cât fotografia, blocul de stoc se lipește
   sub ea, iar descrierea urcă odată cu el.
   ========================================================================== */

@media screen and (min-width: 1200px) {
  html .product-information__grid:not(.product-information__grid--half):not(.product-information--media-none).product-information--media-left {
    grid-template-areas:
      'media detalii recos'
      'info detalii recos'
      'descriere detalii recos';
  }
}

/* Între 750 și 1199px grila are două coloane și se aranja din `order`, cu
   auto-plasare. Acolo primul rând îl dicta coloana de cumpărare (peste 1100px
   înaltă), deci golul sub poză ajungea la 704px — și mai rău decât pe desktop.
   Coloana de cumpărare primește tot rândul, iar restul se stivuiește sub poză.
   ATENȚIE (din 02.08): blocul de stoc NU trebuie lățit pe ambele coloane aici
   — atunci împinge coloana de cumpărare sub galerie. De-aia rămâne pe prima. */
/* `grid-row: 1 / -1` NU merge aici: fără rânduri explicite, `-1` e ultima linie
   a grilei EXPLICITE, adică tot linia 1, deci regula nu întindea nimic. Măsurat
   după prima încercare: golul rămăsese 704px la 990px, neschimbat. Rândurile
   se creează implicit, deci trebuie numărate: media, stoc, recomandări,
   descriere = 4. */
@media screen and (min-width: 750px) and (max-width: 1199px) {
  html .product-information--media-left .product-details {
    grid-column: 2;
    grid-row: 1 / span 4;
  }
  html .product-information--media-left .product-information__media,
  html .product-information--media-left .product-information__info,
  html .product-information--media-left .product-information__recomandari,
  html .product-information--media-left .product-information__descriere {
    grid-column: 1;
  }
}

/* ==========================================================================
   105. „S-AR PUTEA SĂ-ȚI PLACĂ" URCĂ ÎN COLOANA DIN DREAPTA (06.08.2026)

   Cristian: „pune secțiunea s-ar putea să îți placă sub secțiunea se cumpără
   împreună".

   MĂSURAT pe 1920px, înainte:
     coloana de cumpărare ..... 321..1272
     coloana din dreapta ...... 321..886    -> 386px de gol
     secțiunea nativă ......... y=2647      (sub toată pagina de produs)

   Conținutul ei se randează acum în coloana din dreapta, sub „Se cumpără des
   împreună", prin al doilea apel la `passion-impreuna` cu `alternative: true`.
   Secțiunea nativă rămâne în temă, doar ascunsă — dacă se dorește înapoi jos,
   se șterge regula asta și reapare cum era.

   DE CE NU MUTĂM ELEMENTUL NATIV: `<product-recommendations>` își aduce
   produsele cu un fetch declanșat când intră în ecran, iar cardurile lui sunt
   gândite pentru patru coloane de 351px, nu pentru una de 311. Ar fi trebuit
   rescris tot cardul. Ascunsă, nici nu-și mai face cererea — nu costă nimic.

   DE CE NU FOLOSIM ALGORITMUL SHOPIFY pentru lista nouă: e scris în
   `snippets/passion-impreuna.liquid`, decizia lui Cristian din 02.08 —
   recomandările lor întorc produse SIMILARE, deci pe pagina unui prezervativ
   încă patru prezervative. Panoul nou ia alternative din categoria proprie și
   exclude tot ce apare deja în panoul de deasupra.
   ========================================================================== */

/* ATENȚIE la specificitate: `html product-recommendations` are (0,0,2), iar tema
   o afișează prin clasa `.product-recommendations`, care are (0,1,0) — o clasă
   bate două elemente, deci prima încercare nu a ascuns nimic. Verificat live:
   `display` rămăsese `block`. Punem și clasa, deci (0,1,2). */
html product-recommendations.product-recommendations {
  display: none;
}

/* Al doilea panou stă lipit de primul: fără chenar dublu și fără spațiul mare
   pe care primul îl are față de coloana de cumpărare. */
html .product-information__recomandari .psn-impreuna + .psn-impreuna {
  margin-top: 16px;
}


/* --------------------------------------------------------------------------
   106. Două defecte de layout găsite la verificarea vizuală din 07.08 seara

   106.1 Bara de sus se suprapune între 760 și 999 px
   Regula de la 58.4 / 70.2 ascunde programul și emailul abia sub 759 px, iar
   linkurile din dreapta (Livrare/Retur/Blog/GDPR) dispar deja sub 999 px. În
   golul dintre cele două praguri rămân telefon + email + program în stânga și
   „Retragere comandă" în dreapta — iar textele intră unul peste altul.
   Măsurat pe capturi la 768 și 800 px.

   Ascund DOAR programul, nu și emailul: fără el, telefonul plus adresa încap
   confortabil chiar și la 760 px.

   Pragul e 1149 px, nu 999. Măsurat pe capturi mărite: la 1024 px săgeata de
   la „Retragere comandă" ATINGE ora „17:00"; la 1100 px rămâne un spațiu
   strâmt; abia de la 1200 px e loc confortabil. Prima variantă a acestui
   patch, cu 999 px, lăsa defectul viu între 1000 și 1149 px — l-am prins doar
   pentru că am mărit captura în loc să mă uit la ea la scara paginii.

   Specificitatea contează aici, și e documentată la 70.2: `html
   .psn-topbar__program { display: inline-flex }` bate un `display: none`
   simplu. Ținta care ține e elementul de listă însuși — `li` cu clasa pe el,
   nu părintele — la (0,1,2). Reiau exact tiparul care a funcționat acolo.
   -------------------------------------------------------------------------- */
@container psn-topbar (max-width: 1149px) {
  html li.psn-topbar__program {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   106.2 Banda de categorii pare tăiată sub 750 px

   NU este o problemă de acces: `assets/overflow-list.css` dă listei
   `overflow-x: auto`, deci banda se poate derula cu degetul, iar tema ascunde
   intenționat butonul „Mai multe" sub acest prag. Problema e că același
   fișier ascunde și bara de derulare (`scrollbar-width: none` plus
   `::-webkit-scrollbar { display: none }`), așa că nu rămâne NICIUN semn că
   mai există conținut la dreapta. Omul vede ultima categorie tăiată de
   margine și presupune că aia e toată lista.

   Adaug estomparea de la marginea dreaptă — convenția obișnuită pentru liste
   derulabile orizontal. Lista trăiește în shadow DOM, deci se ajunge la ea
   doar prin `::part(list)`; în pagină există un singur <overflow-list>, cel
   al benzii de categorii, deci nu e nevoie să restrâng selectorul mai mult.

   INTERVALUL, măsurat pe capturi, NU ghicit:
     - sub 750 px banda de categorii nici nu există — tema comută pe navigația
       mobilă (Meniu / Acasă / Caută / Coș / Favorite), iar meniul intră în
       sertar. Prima variantă a acestui patch avea `max-width: 749px` și deci
       nu se aplica NICIODATĂ.
     - la 755 px banda apare, dar „Pachete și seturi" e tăiat și butonul „Mai
       multe" lipsește — componenta decide că nu are loc să-l afișeze.
     - la 780 px butonul „MAI MULTE" reapare și totul e în regulă.
   Rămâne deci fereastra 750–779 px. E îngustă, dar acolo cade exact iPad-ul
   în portret (768 px), deci nu e un caz teoretic.

   Calibrarea depinde de lungimea titlurilor din meniu: dacă se adaugă sau se
   redenumește o categorie, intervalul se mută și trebuie remăsurat.
   -------------------------------------------------------------------------- */
@media screen and (min-width: 750px) and (max-width: 779px) {
  overflow-list::part(list) {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
  }
}

/* --------------------------------------------------------------------------
   107. Insigna hCaptcha — ASCUNSA (a doua incercare, cea buna)

   Shopify injecteaza hCaptcha pe orice pagina cu formular. Insigna lui e
   `position: fixed` in coltul din dreapta-jos si acoperea butonul din bara de
   navigare de pe telefon.

   PRIMA INCERCARE, gresita: am ridicat-o deasupra barei de navigare, cu acelasi
   calcul folosit la `.psn-floats`. Rezultatul a fost mai rau — a ajuns exact
   peste butonul „Adauga in cos" din bara lipita de cumparare. Adica am mutat
   obstacolul de pe un buton secundar pe butonul principal de conversie.
   Semnalat imediat de Cristian.

   ACUM: o ascundem complet. hCaptcha ramane ACTIV — protectia anti-spam a
   formularelor functioneaza neschimbat; dispare doar insigna vizuala.

   Conditiile hCaptcha permit ascunderea insignei DOAR daca atribuirea apare in
   alta forma vizibila. De aceea, odata cu aceasta regula, textul de atribuire a
   fost adaugat in subsol (vezi `snippets/passion-hcaptcha-nota.liquid`). Daca
   se sterge vreodata regula de mai jos, textul din subsol devine redundant, dar
   nu face rau; daca se sterge textul, aceasta regula NU mai are voie sa ramana.
   -------------------------------------------------------------------------- */
.h-captcha,
[class*="hcaptcha"],
[id*="hcaptcha"],
iframe[src*="hcaptcha.com"] {
  display: none !important;
  visibility: hidden !important;
}

/* Containerul generat de hCaptcha in jurul iframe-ului, cand exista. */
div:has(> iframe[src*="hcaptcha.com"]) {
  display: none !important;
}

/* Nota de atribuire din subsol: discreta, dar prezenta si lizibila. */
.psn-hcaptcha-nota {
  max-width: var(--page-width, 1300px);
  margin: 0 auto;
  padding: 0 max(1rem, 4vw) 16px;
  font-size: 0.72rem;
  line-height: 1.5;
  color: #8a8a8a;
  text-align: center;
}
.psn-hcaptcha-nota a {
  color: #8a8a8a;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.psn-hcaptcha-nota a:hover {
  color: #333;
}


/* ==========================================================================
   108. VAL 1.1 — PALETA ÎNCHISĂ: selectorul de cantitate (08.08.2026)

   DE CE AICI ȘI NU ÎN SECȚIUNE: am corectat mai întâi culorile direct în
   `sections/psn-cantitati.liquid`. Fișierul s-a urcat corect (verificat prin
   API: conține `psn-gold`, nu mai conține `0.625rem`), dar pagina publică a
   continuat să servească randarea veche. Antetul răspunsului arată de ce:

     etag: W/"page_cache:...:ProductDetailsController:..."
     theme;desc="196888920447"          <- tema editată E cea live

   Deci e cache-ul de pagină al Shopify. O modificare de PRODUS îl invalidează
   (blocul „Brand propriu" s-a văzut imediat), o modificare de FIȘIER DE
   SECȚIUNE nu l-a invalidat. `assets/*.css` nu e afectat — e fișier legat, cu
   versiune proprie.

   SPECIFICITATE: stilul secțiunii e inline în <body>, deci vine DUPĂ acest
   fișier. La specificitate egală ar câștiga el. Prefixul `html` urcă fiecare
   selector cu un element, exact tiparul documentat la 70.2:
     .psn-cant__insigna            (0,1,0)  ->  html .psn-cant__insigna   (0,1,1)
     .psn-cant__cap span:last-child(0,2,1)  ->  html …                    (0,2,2)
     .psn-cant__econ b             (0,1,1)  ->  html …                    (0,1,2)

   Regula de rol: roșu = ACȚIUNE, auriu = PREMIUM/EVIDENȚIERE, verde = STARE.
   ========================================================================== */

/* Portocaliul #f0a202 pe #241a00 era singura culoare din tot magazinul în
   afara paletei. Auriul de brand îi ia locul. 10px -> 11px, minimul de sistem. */
html .psn-cant__insigna {
  background: var(--psn-gold, #c9a227);
  color: var(--psn-ink, #201619);
  font-size: 0.6875rem;
}

/* Varianta „tare" rămâne roșie: e o promoție reală, iar roșul e culoarea de
   acțiune. Doar contrastul textului se fixează explicit. */
html .psn-cant__insigna--tare {
  background: var(--psn-red, #c42026);
  color: #fff;
}

/* Insigna „Ofertă" din capul blocului era VERDE. Verdele e culoare de stare
   (în stoc, confirmare), nu de promoție. */
html .psn-cant__cap span:last-child {
  background: var(--psn-gold, #c9a227);
  color: var(--psn-ink, #201619);
  font-weight: 700;
}

/* Economia procentuală nu e o stare, e un argument comercial. Greutatea duce
   accentul, nu culoarea. */
html .psn-cant__econ b {
  color: var(--psn-ink, #201619);
  font-weight: 700;
}


/* ==========================================================================
   109. VAL 1.2 — IERARHIA TITLURILOR (08.08.2026)

   MĂSURAT ÎNAINTE, pe 8 pagini la 1440px:
     homepage      H1 56 -> H2 32 -> H3 24
     branduri      H1 56 -> H2 32 -> H3 24
     colecții      H1 48 -> H2 32 -> H3 24
     colecția PASSION  H1 48 -> H2 48   <- EGALE
     De ce PASSION     H1 48 -> H2 48   <- EGALE
     contact       H1 32 -> H2 20 ȘI 32
     produs        H1 26 -> H2 17 și 28 -> H3 32   <- H3 MAI MARE DECÂT H2
     coș           H1 24 -> H2 24   <- EGALE
   Șapte mărimi de H1 și ierarhia ruptă pe 4 din 8 pagini.

   CUM FUNCȚIONEAZĂ TEMA (cerut prin CSS.getMatchedStylesForNode, nu ghicit):
   Horizon nu pune mărimi pe etichete, ci variabile —
     h1 { font-size: var(--font-h1--size); line-height: var(--font-h1--line-height) }
   iar textele bogate (descrieri de colecție, pagini) primesc presetul de pe
   ÎNVELIȘ, prin `.text-block.h1 :is(h1,h2,…)`. De aceea H2-urile din descrierea
   colecției PASSION ajungeau la 48px: nu erau H2 „mari", ci H2 care moșteneau
   presetul H1 al containerului.

   SPECIFICITATE: regula temei e `h1, .h1.h1, .text-block.h1 > *, …` — partea
   care ne interesează, `h1`, are (0,0,1). `html body h1` are (0,0,3) și câștigă
   fără `!important`. Excepțiile de mai jos au clasă, deci bat regula generală.

   CE NU SE ATINGE:
   - `.psn-hero__title` are deja `font-size: clamp(...) !important` — hero-ul
     rămâne la 56px, cum trebuie.
   - bannerul de cookie are `#shopify-pc__banner … h2 { font-size:13px !important }`
     cu id, deci rămâne neatins.
   ========================================================================== */

/* ---- H1 de pagină și de colecție: 40 / 32 / 28 ---- */
html body h1 {
  font-size: 2.5rem;
  line-height: 1.15;
}

/* ---- H2 de secțiune: 32 / 28 / 24 ---- */
html body h2 {
  font-size: 2rem;
  line-height: 1.2;
}

/* ---- H3: 20 / 20 / 18, Inter 600 (familia și greutatea sunt deja impuse
        la secțiunea 63 prin `html h3, html h4`) ---- */
html body h3 {
  font-size: 1.25rem;
  line-height: 1.35;
}

@media screen and (max-width: 1023px) {
  html body h1 { font-size: 2rem; line-height: 1.18; }
  html body h2 { font-size: 1.75rem; line-height: 1.22; }
}

@media screen and (max-width: 749px) {
  html body h1 { font-size: 1.75rem; line-height: 1.2; }
  html body h2 { font-size: 1.5rem; line-height: 1.25; }
  html body h3 { font-size: 1.125rem; line-height: 1.4; }
}

/* ---- Excepția 1: coșul. H1 era 24 și egal cu H2. ---- */
html body .cart h1,
html body cart-items h1,
html body [class*="cart-items"] h1 {
  font-size: 1.75rem;
  line-height: 1.25;
}
html body .cart h2,
html body cart-items h2,
html body [class*="cart-items"] h2,
html body [class*="cart-summary"] h2 {
  font-size: 1.25rem;
  line-height: 1.35;
}

/* ---- Excepția 2: titlurile din textele bogate (descrieri de colecție și de
        pagină). Aici era defectul H2 = H1: presetul venea de pe înveliș. ---- */
html body .text-block.h1 :is(h2, h3, h4),
html body rte-formatter h2,
html body .rte h2 {
  font-size: 2rem;
  line-height: 1.2;
}
html body rte-formatter h3,
html body .rte h3 {
  font-size: 1.25rem;
  line-height: 1.35;
}

@media screen and (max-width: 749px) {
  html body .text-block.h1 :is(h2, h3, h4),
  html body rte-formatter h2,
  html body .rte h2 { font-size: 1.5rem; line-height: 1.25; }
  html body rte-formatter h3,
  html body .rte h3 { font-size: 1.125rem; line-height: 1.4; }
}

/* ---- Excepția 3: pagina de produs. H2-urile de bloc („Se cumpără des
        împreună", „Descriere") erau 17 și 28; H3-urile erau 32, adică mai mari
        decât H2. Acum H1 28 > H2 24 > H3 20. ---- */
html body .product-details h2,
html body .product-information h2,
html body .psn-impreuna h2,
html body .psn-panou h2 {
  font-size: 1.5rem;
  line-height: 1.25;
}
html body .product-details h3,
html body .product-information h3,
html body .psn-impreuna h3,
html body .psn-panou h3 {
  font-size: 1.25rem;
  line-height: 1.35;
}


/* ==========================================================================
   110. VAL 1.2 — SCARA LA SURSĂ: preseturile de tipografie (08.08.2026)

   DE CE NU AJUNGEA SECȚIUNEA 109: Horizon nu pune mărimea pe etichetă, ci pe
   ÎNVELIȘUL blocului. Cerut prin CSS.getMatchedStylesForNode:

     H1-ul de colecție  -> <h1> FĂRĂ clasă, în `<div class="… text-block … h2">`
                           deci prinde `.text-block.h2 :is(h1,…)` = (0,2,1)
     H2-ul din subsol   -> în înveliș cu presetul `h3`
     H3-ul din subsol   -> în înveliș cu presetul `h4`

   Regula mea `html body h1` are (0,0,3) și pierde în fața lui (0,2,1). Deci
   eticheta nu decide nimic; presetul învelișului decide. Preseturile sunt
   niște „mărimi de afișare", nu niveluri semantice.

   MĂSURAT ÎNAINTE:
     --font-h1--size  clamp(3.0rem, 5.6vw, 3.5rem)   = 48…56px
     --font-h2--size  clamp(2.25rem, 4.8vw, 3.0rem)  = 36…48px
     --font-h3--size  2.0rem                          = 32px
     --font-h4--size  1.5rem                          = 24px
     --font-h5/h6--weight  500   <- de aici 34 din cele 37 de apariții ale
                                    greutății 500 din tot magazinul
     --font-h1/h2/h4--line-height  1   <- interlinie 1 pe un serif de titlu

   CE FACEM: schimbăm preseturile, nu elementele. Un singur loc, efect peste
   tot, fără `!important`.
     preset h1 -> 40px   (titlu de pagină)
     preset h2 -> 40px   (tot titlu de pagină; blocurile folosesc ba unul, ba altul)
     preset h3 -> 32px   (titlu de secțiune, rămâne)
     preset h4 -> 20px   (subtitlu)

   HERO-UL NU E AFECTAT: `html .psn-hero__title` are
   `font-size: clamp(2rem, 6vw, 3.5rem) !important` — rămâne 56px, singurul.
   ========================================================================== */

html:root {
  --font-h1--size: 2.5rem;
  --font-h1--line-height: 1.15;
  --font-h2--size: 2.5rem;
  --font-h2--line-height: 1.15;
  --font-h3--size: 2rem;
  --font-h3--line-height: 1.2;
  --font-h4--size: 1.25rem;
  --font-h4--line-height: 1.35;
  /* Greutățile de sistem sunt 400 / 600 / 700. 500 iese. */
  --font-h5--weight: 600;
  --font-h6--weight: 600;
}

@media screen and (max-width: 1023px) {
  html:root {
    --font-h1--size: 2rem;
    --font-h1--line-height: 1.18;
    --font-h2--size: 2rem;
    --font-h2--line-height: 1.18;
    --font-h3--size: 1.75rem;
    --font-h3--line-height: 1.22;
  }
}

@media screen and (max-width: 749px) {
  html:root {
    --font-h1--size: 1.75rem;
    --font-h1--line-height: 1.2;
    --font-h2--size: 1.75rem;
    --font-h2--line-height: 1.2;
    --font-h3--size: 1.5rem;
    --font-h3--line-height: 1.25;
    --font-h4--size: 1.125rem;
    --font-h4--line-height: 1.4;
  }
}


/* ==========================================================================
   111. VAL 1.2 — cele patru excepții rămase (08.08.2026)

   După ce preseturile au fost corectate la sursă (secțiunea 110), au rămas
   patru locuri unde învelișul ales în editor nu se potrivește cu nivelul
   semantic. Fiecare are selectorul măsurat, nu ghicit, și specificitatea
   calculată ca să treacă fără `!important`.
   ========================================================================== */

/* 111.1 CONTACT — H1 era 32 (clasă proprie), iar H2 „Formular de contact"
   tot 32, deci egale. Acum 40 > 24 > 20. */
html body .psn-contact__title {
  font-size: 2.5rem;
  line-height: 1.15;
}
html body .psn-contact__form-title {
  font-size: 1.5rem;
  line-height: 1.25;
}

/* 111.2 COȘ — H1 „Coșul tău" poartă clasa de preset `h4`, deci 20px, iar H2
   „Completează comanda" tot 20. `.h4.h4` are (0,2,0); selectorul de mai jos
   are (0,2,3). */
html body .cart-title h1.h4,
html body .cart-title h1 {
  font-size: 1.75rem;
  line-height: 1.25;
}

/* 111.3 SUBSOL — titlul de newsletter stă într-un înveliș cu presetul `h3`,
   deci 32px. Pe pagina de produs (H1 = 28) și în coș (H1 = 28) un titlu de
   subsol de 32 era mai mare decât titlul paginii.
   `.text-block.h3 :is(…)` are (0,2,1); mai jos avem (0,2,4). */
html body footer .text-block :is(h1, h2),
html body [class*="footer"] .text-block :is(h1, h2) {
  font-size: 1.5rem;
  line-height: 1.25;
}

/* H3/H4 din subsol raman pe treapta de subtitlu (20px), nu urca la 24. */
html body footer .text-block :is(h3, h4),
html body [class*="footer"] .text-block :is(h3, h4) {
  font-size: 1.25rem;
  line-height: 1.35;
}

/* 111.4 PANOUL LATERAL DE PE PRODUS — varianta compactă cobora titlul la
   1.0625rem (17px), mărime care nu există pe scară. Devine 20px: titlu de
   panou, sub H2-ul de secțiune (24). Regula veche are (0,2,1), aceasta (0,2,3). */
html body .psn-impreuna--compact .psn-impreuna__heading {
  font-size: 1.25rem;
  line-height: 1.35;
}

@media screen and (max-width: 749px) {
  html body .psn-contact__title { font-size: 1.75rem; line-height: 1.2; }
  html body .psn-contact__form-title { font-size: 1.25rem; }
  html body .cart-title h1.h4,
  html body .cart-title h1 { font-size: 1.5rem; }
  html body footer .text-block :is(h1, h2),
  html body [class*="footer"] .text-block :is(h1, h2) { font-size: 1.25rem; }
  html body footer .text-block :is(h3, h4),
  html body [class*="footer"] .text-block :is(h3, h4) { font-size: 1.125rem; }
}

/* 111.5 Pe telefon H1-ul de produs coboară la 24, deci H2-ul de secțiune
   (setat la 24 pentru desktop) devenea egal cu el. Coboară la 20. */
@media screen and (max-width: 749px) {
  html body .product-details h2,
  html body .product-information h2,
  html body .psn-impreuna h2,
  html body .psn-panou h2 {
    font-size: 1.25rem;
    line-height: 1.35;
  }
  html body .product-details h3,
  html body .product-information h3,
  html body .psn-impreuna h3,
  html body .psn-panou h3 {
    font-size: 1.125rem;
    line-height: 1.4;
  }
  html body .psn-impreuna--compact .psn-impreuna__heading {
    font-size: 1.125rem;
  }
}

/* 111.6 Banda de tabletă (750–1023px). Lipsea: H2-urile din textele bogate
   rămâneau la 32, egale cu H1-ul de 32 al paginii, iar titlul de la Contact
   rămânea la 40 în timp ce restul paginilor coborau la 32. */
@media screen and (min-width: 750px) and (max-width: 1023px) {
  html body .text-block.h1 :is(h2, h3, h4),
  html body rte-formatter h2,
  html body .rte h2 {
    font-size: 1.75rem;
    line-height: 1.22;
  }
  html body rte-formatter h3,
  html body .rte h3 {
    font-size: 1.25rem;
    line-height: 1.35;
  }
  html body .psn-contact__title {
    font-size: 2rem;
    line-height: 1.18;
  }
}


/* ==========================================================================
   112. VAL 1.3 — BUTOANELE (08.08.2026)

   MĂSURAT ÎNAINTE, pe 5 pagini la 1440px, doar butoanele CU TEXT:
     rol                         înălț.  rază  font   greutate  fundal
     card „Adaugă în coș"          44    999   15px    600      alb / text roșu
     produs „Adaugă N bucăți"      42    999   15px    600      roșu / text alb
     panou „Adaugă în coș"         42    999   13px    700      transparent
     bara lipită de jos            56    999   17px    700      roșu
     coș „Finalizează comanda"     54    999   16px    700      roșu
     coș „Aplică" (reducere)       44    999   16px    400      roșu
     contact „Trimite"             56    999   17px    700      roșu
   Șapte butoane de acțiune, șapte combinații. Patru înălțimi (42/44/54/56),
   patru mărimi de font (13/15/16/17) și trei greutăți (400/600/700) pentru
   exact DOUĂ roluri: principal și secundar.

   SISTEMUL: trei înălțimi — 40 mic / 48 normal / 56 mare — rază 999, Inter
   16px greutate 600. Principal = roșu plin, text alb, hover vișiniu.
   Secundar = contur roșu de 1px, text roșu, fundal transparent.

   CE NU SE ATINGE (sunt butoane de ICONIȚĂ, au altă logică de dimensiune):
   săgețile de carusel, inima de favorite, butonul de căutare, selectorul de
   cantitate (− +), butonul de newsletter. Toate rămân la 44px, ținta tactilă.
   ========================================================================== */

/* ---- 112.1 Bază comună pentru butoanele de acțiune ---- */
html body .quick-add__button,
html body .psn-impreuna__buton,
html body .cart-discount__button,
html body .cart__checkout-button,
html body .product-form-buttons .add-to-cart-button,
html body .sticky-add-to-cart__button,
html body .psn-contact__form button[type="submit"],
html body .psn-retr__submit {
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
}

/* ---- 112.2 PRINCIPAL: acțiunea paginii. 56px, roșu plin. ---- */
html body .product-form-buttons .add-to-cart-button,
html body .sticky-add-to-cart__button,
html body .cart__checkout-button,
html body .psn-contact__form button[type="submit"],
html body .psn-retr__submit {
  min-height: 56px;
  padding-inline: 32px;
  background-color: var(--psn-red, #c42026);
  color: #fff;
  border: 0;
}

html body .product-form-buttons .add-to-cart-button:hover,
html body .sticky-add-to-cart__button:hover,
html body .cart__checkout-button:hover,
html body .psn-contact__form button[type="submit"]:hover,
html body .psn-retr__submit:hover {
  background-color: var(--psn-red-dark, #8e1418);
}

/* ---- 112.3 SECUNDAR: acțiune de card sau de panou. 48px, contur roșu. ---- */
html body .quick-add__button,
html body .psn-impreuna__buton {
  min-height: 48px;
  padding-inline: 24px;
  background-color: transparent;
  color: var(--psn-red, #c42026);
  border: 1px solid var(--psn-red, #c42026);
}

html body .quick-add__button:hover,
html body .psn-impreuna__buton:hover {
  background-color: rgba(196, 32, 38, 0.07);
  color: var(--psn-red-dark, #8e1418);
  border-color: var(--psn-red-dark, #8e1418);
}

/* ---- 112.4 NORMAL: acțiune secundară în linie (aplicarea reducerii). ---- */
html body .cart-discount__button {
  min-height: 48px;
  padding-inline: 24px;
  background-color: var(--psn-red, #c42026);
  color: #fff;
  border: 0;
}
html body .cart-discount__button:hover {
  background-color: var(--psn-red-dark, #8e1418);
}

/* ---- 112.5 Pe telefon acțiunea principală rămâne 56, dar textul coboară la
        15px când butonul e pe toată lățimea, ca să nu se rupă în două rânduri
        pe ecranele de 320px. ---- */
@media screen and (max-width: 380px) {
  html body .product-form-buttons .add-to-cart-button,
  html body .sticky-add-to-cart__button,
  html body .cart__checkout-button {
    padding-inline: 20px;
    font-size: 0.9375rem;
  }
}

/* --------------------------------------------------------------------------
   112.6 Corecție de specificitate (aceeași zi)

   Două reguli mai vechi, mai specifice, învingeau blocul de mai sus:
     `.quick-add__button.add-to-cart-button`  (0,2,0) — fixa height:44px
     `.product-form-buttons .button:not(.button--secondary)` (0,3,0)
   Regulile mele aveau (0,1,3) și (0,2,3), deci pierdeau la numărul de clase.
   Nu adaug `!important` — urc selectorul exact cât trebuie.
   -------------------------------------------------------------------------- */

/* Quick-add de pe card: secundar, 48px. (0,2,3) bate (0,2,0). */
html body .quick-add__button.add-to-cart-button {
  height: auto;
  min-height: 48px;
  padding-inline: 24px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 999px;
}

/* Butonul principal de pe pagina de produs: (0,3,3) bate (0,3,0).
   Rămâne roșu plin — regula veche o face deja cu !important — dar mărimea și
   greutatea intră pe sistem, iar raza trece de la --psn-radius (12px) la 999. */
html body .product-form-buttons .button.add-to-cart-button {
  min-height: 56px;
  padding-inline: 32px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 999px;
}

@media screen and (max-width: 380px) {
  html body .product-form-buttons .button.add-to-cart-button {
    padding-inline: 20px;
    font-size: 0.9375rem;
  }
}

/* --------------------------------------------------------------------------
   112.7 Quick-add de pe card — a doua corecție de specificitate

   Cerut prin CSS.getMatchedStylesForNode: două reguli mai vechi cu TREI clase
   învingeau blocul 112.6, care avea două:
     `.product-card .quick-add .button`                       -> min-height: 44px
     `html .product-card .quick-add__button.add-to-cart-button` -> font-size: 0.9375rem
   Selectorul de mai jos are tot trei clase, dar un element în plus (0,3,3),
   deci trece. Fără `!important`.
   -------------------------------------------------------------------------- */
html body .product-card .quick-add__button.add-to-cart-button,
html body .product-card .quick-add .button.add-to-cart-button {
  min-height: 48px;
  height: auto;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 999px;
  padding-inline: 24px;
}


/* ==========================================================================
   113. VAL 1.4 — CARDURI DE ACEEAȘI ÎNĂLȚIME (08.08.2026)

   MĂSURAT: diferență de 22px pe paginile de colecție, la toate lățimile
   (369/391 la 1440, 536/558 la 768, 377/399 la 390). Homepage-ul: ZERO.

   PRIMA ÎNCERCARE A FOST GREȘITĂ ȘI E DOCUMENTATĂ AICI CA SĂ NU SE REPETE.
   Am dat vina pe `.psn-insigne` (rândul de atribute). Fals din două motive:
   `.psn-insigne` e `position: absolute` — un element absolut NU poate adăuga
   înălțime părintelui — iar locul gol pe care îl rezervasem cădea fix pe
   cardurile CARE NU AVEAU insigne, adică pe cele deja scunde. Regula producea
   chiar diferența pe care voia s-o șteargă, și strica homepage-ul care era
   perfect. Lecția: nu te opri la primul element care „pare" vinovat, cere
   poziția lui calculată.

   CAUZA REALĂ, măsurată element cu element:
     `div.rating-wrapper` — rândul de stele Judge.me — h = 17,59px + 4px
     spațiu de coloană = 21,59px. Constant pe 1440 / 1024 / 768 / 390 / 375.
     Un SINGUR produs din tot magazinul are recenzie („PASSION Sensation, din
     latex natural"). Cardul lui e mai înalt, iar grila întinde tot rândul
     după el. De-aia diferența apărea doar pe colecții și doar pe ultimul rând.
     Prețul are `margin-top: auto` (secțiunea 24), deci cei 21,59px se vedeau
     ca margine calculată pe preț — o pistă falsă: acolo golul e ABSORBIT,
     nu adăugat.

   SOLUȚIA: rândul de stele are loc rezervat pe TOATE cardurile, gol până
   când produsul primește prima recenzie. Costă 22px de spațiu pe card, dar
   e singura variantă care nu ascunde singura dovadă socială pe care o avem
   (lipsa ei e semnalată în auditul CRO din 02.08) și care nu mai sare când
   apar recenzii noi.

   `:has()` e suportat de Chrome/Safari/Firefox actuale; unde nu e, cardurile
   rămân exact cum sunt azi — degradare blândă, fără stricăciuni.
   ========================================================================== */

html:root {
  /* 17,59px măsurat, rotunjit la 18 ca locul rezervat și rândul real să fie
     identice la px, fără drift de fracțiuni. */
  --psn-rand-stele: 18px;
}

/* Rândul real primește exact înălțimea locului rezervat. */
html body .product-card__content .rating-wrapper {
  min-height: var(--psn-rand-stele);
  display: flex;
  align-items: center;
}

/* Prețul rămâne ULTIMUL, ca locul rezervat să cadă între titlu și preț —
   acolo unde stau stelele când există. */
html body .product-card__content > product-price {
  order: 2;
}

/* Cardurile fără recenzii primesc rândul gol. */
html body .product-card__content:not(:has(.rating-wrapper))::after {
  content: "";
  order: 1;
  display: block;
  min-height: var(--psn-rand-stele);
  flex: 0 0 auto;
  pointer-events: none;
}

/* Plasă de siguranță: în aceeași grilă, cardurile se întind la fel. Dacă
   apare vreodată un card cu conținut în plus, rândul rămâne aliniat. */
html body .product-grid__item {
  display: flex;
}
html body .product-grid__item > product-card,
html body .product-grid__item > .product-card {
  flex: 1 1 auto;
}

/* cache-bust 08.08.2026 21:47 - texte homepage (repetitie beneficii) */

/* ==========================================================================
   114. VAL 1.5 — INSIGNE: UNA SINGURĂ, ÎNTR-UN SINGUR STIL (08.08.2026)

   MĂSURAT înainte, pe 4 pagini × 3 lățimi:
     /collections/prezervative ... 10 din 12 carduri cu DOUĂ insigne
     /collections/brand-passion ..  6 din  8 carduri cu DOUĂ insigne
     homepage ....................  7 din  8 carduri cu una

   Nu erau trei stiluri, cum notasem, ci DOUĂ — dar diferite pe toate axele:

     ale noastre (.psn-insigna)     11px / 700 / 999px / MAJUSCULE / 0,44px spațiere
     nativă („Promoție")            13px / 400 / 100px /  normale  / fără spațiere

   Pe mobil distanța creștea: ale noastre coborau la 10px, nativa rămânea 13px.

   Numărul se rezolvă în Liquid (`snippets/passion-badges.liquid` randează una
   singură și nu randează nimic când apare insigna temei). Aici rămâne doar
   stilul: insigna nativă intră în sistem.

   CE NU SE SCHIMBĂ: alb pe roșu. Roșul e culoarea de acțiune, iar reducerea e
   singura insignă care cere o acțiune. Restul rămân descriptive și neutre.

   SPECIFICITATE: regula temei e `.product-badges__badge` (0,1,0), iar valorile
   îi vin din variabile puse INLINE pe părinte (--badge-border-radius etc.).
   O variabilă inline nu se poate rescrie dintr-un fișier, așa că suprascriu
   direct proprietățile care o consumă, cu (0,1,3).
   ========================================================================== */
html body product-card .product-badges__badge,
html body .product-card .product-badges__badge {
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: var(--psn-shadow-sm);
}

@media screen and (max-width: 749px) {
  html body product-card .product-badges__badge,
  html body .product-card .product-badges__badge {
    padding: 3px 8px;
    font-size: 0.625rem;
  }
}

/* Secțiunea 100 cobora insignele noastre cu 31px pe cardurile cu promoție, ca
   să nu se suprapună peste cea nativă. Nu o șterg, dar de acum nu mai are ce
   să prindă: pe acele carduri `ul.psn-insigne` nici nu se mai randează. */


/* ==========================================================================
   115. FAZA 7 — abaterile găsite la reaudit (09.08.2026)

   Măsurat pe 8 pagini × 5 lățimi. Ce urmează sunt DOAR abaterile care sunt
   ale noastre și care se repară fără să atingem componente ale temei în
   profunzime. Restul (12 durate de tranziție, 7 curbe, mărimile fracționare
   de titlu venite din preseturile temei) sunt raportate, nu reparate aici —
   cer o trecere separată prin componentele temei.
   ========================================================================== */



/* 115.1 — al DOILEA chenar și textul gri din inputuri: REZOLVATE ÎN PALETĂ.
   Am scris întâi reguli CSS aici. Au pierdut, apoi au devenit redundante.
   Sursa reală era `config/settings_data.json`, în paleta temei:
   `color1: #3A3A3A` = textul din inputuri, `color2: #E8DFDB` = chenarul lor.
   Corectate acolo (#201619 și #E7DEDB), deci fiecare componentă le ia din
   sistem. Regulile de aici au fost șterse ca să rămână o singură sursă.
   Lecție: înainte de a scrie o regulă, caută TOKENUL, nu selectorul.       */
/* 115.2 — culoarea textului din inputuri (podea, nu sursă).
   Regula veche prindea doar stilurile INLINE (`[style*="#3a3a3a"]`), deci
   câmpurile care își iau culoarea dintr-o foaie de stil rămâneau la
   rgb(58, 58, 58). Măsurat pe input-ul de cantitate, pe cel de newsletter
   și pe filtrele de preț. Textul pe care îl scrie clientul trebuie să fie
   negrul de brand, nu un gri de sistem.                                    */
html body input,
html body select,
html body textarea {
  color: var(--psn-ink, #201619);
}

/* 115.3 — al treilea verde. `--psn-green` e #1c6b3a, ales pentru contrast pe
   alb. Linkul WhatsApp din navigația de jos avea #128c3e scris direct —
   nici măcar verdele mărcii WhatsApp (#25D366), care ar fi fost excepție
   acceptată, ci o a treia valoare inventată.                               */
html .psn-bottom-nav a[href*="whatsapp"],
html .psn-bottom-nav .psn-bottom-nav__item--wa,
html .psn-bottom-nav .psn-bottom-nav__item--wa svg,
html .psn-bottom-nav .psn-bottom-nav__item--wa path {
  color: var(--psn-green, #1c6b3a);
}


/* ==========================================================================
   116. Brandurile pe prima pagină — aspectul „discret" (09.08.2026)

   Banda cu carduri ocupa 365px și scria „DOOZ — 3 produse" cu litere mari.
   Două probleme, amândouă semnalate de Cristian: construia homepage-ul în
   jurul brandurilor partenere, iar numărul de produse spunea cât de mic e
   raftul, nu cât de serios e magazinul.

   Acum e UN RÂND de nume. Brandurile rămân la fel de accesibile — fiecare
   nume duce în colecția lui, iar linkul spre pagina Branduri e la capăt —
   dar nu mai concurează cu marca proprie. Vezi passionstore-ancora-brand.
   ========================================================================== */
html .psn-brands--discret .psn-brands__inner {
  padding-block: 20px;
}

html .psn-brands__linie {
  margin: 0;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--psn-muted, #6b6168);
}

html .psn-brands__linie-titlu {
  margin-inline-end: 4px;
}

html .psn-brands__linie a {
  color: var(--psn-ink, #201619);
  text-decoration: none;
  font-weight: 600;
}

html .psn-brands__linie a:hover {
  color: var(--psn-wine, #8e1418);
  text-decoration: underline;
}

html .psn-brands__linie-toate {
  margin-inline-start: 8px;
  padding-inline-start: 8px;
  border-inline-start: 1px solid var(--psn-line, #e7dedb);
  color: var(--psn-wine, #8e1418);
}

@media screen and (max-width: 749px) {
  html .psn-brands--discret .psn-brands__inner { padding-block: 16px; }
  html .psn-brands__linie { font-size: 0.8125rem; }
}


/* ==========================================================================
   117. „Ghiduri și Sfaturi" pe prima pagină — mai mic, FĂRĂ tăiere
   (09.08.2026, corectat în aceeași zi)

   Prima variantă a folosit `aspect-ratio: 16/9` cu `object-fit: cover`.
   Cristian a cerut explicit contrariul: „păstrarea proporțiilor originale",
   „să nu se taie sau deformeze imaginile". Avea dreptate — `cover` taie.

   MĂSURAT: 50 din 55 de imagini de articol sunt **1200×630**, adică raport
   1,905. Cutia primește exact acel raport (40/21), deci cartelele de brand
   îl umplu perfect, fără bare și fără tăiere. `object-fit: contain` e plasa
   pentru restul: cele 5 fotografii brute de produs se încadrează întregi,
   pe fundalul crem, în loc să fie ciuntite.

   Blocul `_featured-blog-posts-image` are `image_ratio: square` implicit în
   schemă și e randat STATIC, fără setări în șablon — de aceea corecția e
   aici și nu în Customizer.
   ========================================================================== */
html [id*="psn_blog"] .featured-blog-posts-card__image,
html [id*="psn_blog"] .blog-post-card__image {
  aspect-ratio: 40 / 21;
  background: var(--psn-surface, #f8f1ef);
  border-radius: 12px;
  overflow: hidden;
}

html [id*="psn_blog"] .featured-blog-posts-card__image img,
html [id*="psn_blog"] .blog-post-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* spațiul din jurul secțiunii: 48/48 -> 32/32, treaptă de scară */
html [id*="psn_blog"] > .shopify-section,
html [id*="psn_blog"] .section {
  padding-block: 32px;
}

/* Pe telefon: carusel compact, două cartele vizibile în loc de una mare. */
@media screen and (max-width: 749px) {
  html [id*="psn_blog"] .featured-blog-posts-card__image,
  html [id*="psn_blog"] .blog-post-card__image { border-radius: 8px; }
}


/* ==========================================================================
   118. Cardurile de categorie — imagini mai mici (09.08.2026)

   „Alege de unde începi" era cea mai înaltă secțiune de pe prima pagină:
   1237px la 1440, adică 6 carduri de 490px pe două rânduri. Aproape toată
   înălțimea o dădea imaginea.

   MĂSURAT înainte: cutia imaginii avea `aspect-ratio: 4/3` (regula din
   secțiunea 41), deci 330px pe un card de 440. Trecută pe 16/9 -> ~247px.

   Imaginea NU se taie: are `object-fit: contain`, deci pack-shot-ul se
   micșorează în cutia mai joasă, cu proporțiile intacte. Aceeași regulă ca
   la blog — mai mic, nu tăiat.
   ========================================================================== */
html .psn-cat-card__visual {
  aspect-ratio: 16 / 9;
  padding: 8px 12px 4px;
}

/* Pe telefon cardurile sunt pe două coloane și oricum înguste; acolo o cutie
   prea plată ar face produsul ilizibil, deci rămâne mai aproape de pătrat. */
@media screen and (max-width: 749px) {
  html .psn-cat-card__visual {
    aspect-ratio: 4 / 3;
    padding: 8px 8px 4px;
  }
}


/* ==========================================================================
   119. VAL 3 — mișcarea temei adusă pe sistem (09.08.2026)

   După ce am normalizat CSS-ul nostru (74 de `ease` și 25 de durate răzlețe),
   auditul arăta încă 8 durate și 7 curbe. Restul vin din TEMĂ, iar tema le
   ține în tokeni — deci se repară dintr-un loc, nu vânând componente.
   Lecția din FAZA 7: caută tokenul, nu selectorul.

   Ce NU se atinge, intenționat:
   - `--animation-timing-bounce` (supraînălțare deliberată) și cele
     `--spring-*` (fizică de arc). Măsurat: nu apar live, sunt declarate și
     nefolosite. Le aplatiza ar schimba o intenție, nu ar repara o abatere.
   - `--view-transition-*`, care ține de tranzițiile de pagină.
   - Animațiile (banda derulantă, 38s, `linear`). Sistemul de mișcare e
     despre tranziții de interfață, nu despre bucle continue.
   ========================================================================== */
:root,
html {
  /* --- durate: două trepte, ca la noi --- */
  --animation-speed: 0.16s !important;
  --animation-speed-fast: 0.16s !important;
  --animation-speed-medium: 0.16s !important;
  --animation-speed-slow: 0.24s !important;
  --drawer-animation-speed: 0.24s !important;
  --surface-transition-duration: 0.24s !important;
  --submenu-animation-speed: 0.24s !important;
  --hover-transition-duration: 0.24s !important;

  /* --- curbe: una singură --- */
  --animation-easing: cubic-bezier(0.2, 0.7, 0.3, 1) !important;
  --animation-timing-default: cubic-bezier(0.2, 0.7, 0.3, 1) !important;
  --animation-timing-fade-in: cubic-bezier(0.2, 0.7, 0.3, 1) !important;
  --animation-timing-fade-out: cubic-bezier(0.2, 0.7, 0.3, 1) !important;
  --animation-timing-hover: cubic-bezier(0.2, 0.7, 0.3, 1) !important;
  --animation-slideshow-easing: cubic-bezier(0.2, 0.7, 0.3, 1) !important;
  --submenu-animation-easing: cubic-bezier(0.2, 0.7, 0.3, 1) !important;
  --surface-transition-timing: cubic-bezier(0.2, 0.7, 0.3, 1) !important;
  --ease-out-quad: cubic-bezier(0.2, 0.7, 0.3, 1) !important;
  --ease-out-cubic: cubic-bezier(0.2, 0.7, 0.3, 1) !important;
  --ease-in-out-quad: cubic-bezier(0.2, 0.7, 0.3, 1) !important;
  --hover-transition-timing: cubic-bezier(0.2, 0.7, 0.3, 1) !important;

  /* --- compozite: tema le folosește ca prescurtare `durată curbă` --- */
  --animation-values: 0.16s cubic-bezier(0.2, 0.7, 0.3, 1) !important;
  --animation-values-fast: 0.16s cubic-bezier(0.2, 0.7, 0.3, 1) !important;
  --animation-values-slow: 0.24s cubic-bezier(0.2, 0.7, 0.3, 1) !important;
  --animation-values-allow-discrete: 0.16s cubic-bezier(0.2, 0.7, 0.3, 1) allow-discrete !important;
}


/* ==========================================================================
   120. VAL 3, partea a doua — ce a rămas după tokeni (09.08.2026)

   Tokenii temei au dus curbele de la 7 la 3 și duratele de la 12 la 7.
   Ce a mai rămas e scris DIRECT în componentele temei, deci se acoperă cu
   reguli țintite pe purtătorii găsiți la măsurare. Lista e explicită, nu un
   selector universal: `*` ar prinde și bannerul Shopify și widgeturile
   externe, care nu sunt sistemul nostru.
   ========================================================================== */
html body :is(
  header-component,
  header-menu,
  .page-wrapper,
  .header__underlay,
  .menu-list__submenu,
  .mega-menu__link,
  .account-button,
  .header-actions__action,
  .skip-to-content-link,
  .size-style,
  .add-to-cart-text,
  .add-to-cart-text__content,
  .sticky-add-to-cart__bar,
  .menu-drawer,
  .menu-drawer__menu-item,
  .close-button,
  .resource-card__link,
  .checkbox__input,
  .checkbox__label-text,
  .column-options__option-input,
  .field,
  .field__input,
  svg.icon-checkmark,
  [class*="psn-drawer"] a,
  .menu-drawer__backdrop,
  .field__label,
  .column-picker,
  a
) {
  /* !important pentru ca adversarul e PRESCURTAREA 	ransition: ... ease,
     care rescrie proprietatea lunga indiferent de ordinea in fisier. */
  transition-timing-function: var(--psn-ease, cubic-bezier(0.2, 0.7, 0.3, 1)) !important;
}

/* aceleasi componente, pe treptele de durata */
html body :is(
  .checkbox__input,
  .checkbox__label-text,
  .column-options__option-input,
  svg.icon-checkmark,
  .field,
  .field__input,
  a
) {
  transition-duration: 0.16s !important;
}

html body :is(.add-to-cart-text, .add-to-cart-text__content) {
  transition-duration: 0.16s !important;
}

html body :is(.sticky-add-to-cart__bar, .header__underlay, .menu-list__submenu) {
  transition-duration: 0.24s !important;
}

/* --- raze răzlețe -------------------------------------------------------
   `1010.2px` pe bara lipită de jos e o valoare venită dintr-un procent;
   pe ecran arată tot pastilă, dar în sistem e a cincea rază. 3,2px pe
   comutatorul de coloane e 0.2rem, iar 5px pe bifă e o valoare de SVG.
   Toate trei intră pe treptele aprobate.                                  */
html body .sticky-add-to-cart__bar {
  border-radius: 999px;
}

html body :is(.column-picker, svg.icon-checkmark) {
  border-radius: 8px;
}

/* --- H2: o singură greutate --------------------------------------------
   Măsurat: aceeași mărime apărea și cu 600, și cu 700 (20px și 24px).
   Titlurile de secțiune sunt Fraunces 700; cele de coloană rămân mai mici
   ca MĂRIME, nu ca greutate.                                              */
html body h2 {
  font-weight: 700;
}


/* ==========================================================================
   121. „Recomandările noastre" — RETRAS pe 10.08.2026

   Pe 09.08.2026, tot la cererea lui Cristian, această regulă făcea INTENȚIONAT
   cutia de imagine din acest raft lată (16:9) — diferită de pătratul din
   paginile de categorie — ca să nu irosească spațiu vertical cu poze de
   raport 1,25 într-o cutie pătrată. Vezi motivația originală în istoricul
   fișierului dacă e nevoie.

   Pe 10.08.2026 Cristian a cerut explicit opusul: pozele din acest raft să
   revină la dimensiunile paginii de categorie, adică PĂTRATE. Regula veche
   e scoasă în întregime, nu suprascrisă — `--gallery-aspect-ratio: 1`, deja
   randat inline de tema Horizon pe fiecare card, e suficient fără nimic
   peste el. Verificat live: cutia .card-gallery revine la pătrat identic cu
   paginile de colecție (253x253 la 1440px, 173x173 la 390px).
   ========================================================================== */


/* ==========================================================================
   122. Fraza de lead de pe paginile de colecție (09.08.2026)

   Descrierile de categorie au 3–4 paragrafe și împingeau primul produs la
   y=878 pe „Suplimente" și y=836 pe „Sprayuri", la 1440px — sub linia de
   plutire pe un laptop obișnuit. Textul întreg s-a mutat SUB grilă, iar aici
   rămâne o singură frază.

   Secțiunea `psn-colectie-lead` e proprie, deci nu moștenea containerul
   temei: MĂSURAT, paragraful începea la x=0 în timp ce titlul, filtrele și
   produsele erau la x=40. Gutterul e cel din sistem — 40px de la 750 în sus,
   16px sub. Vezi antet-3-randuri pentru pragul de container.
   ========================================================================== */
html .psn-col-lead {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 40px;
  padding-block: 0 20px;
}

html .psn-col-lead__box {
  background: var(--psn-surface, #f8f1ef);
  border-radius: var(--psn-radius, 12px);
  padding: 18px 24px;
}

html .psn-col-lead__box p {
  margin: 0;
  max-width: 68ch;
  color: var(--psn-ink, #201619);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.6;
}

/* ==========================================================================
   123. Ghidul editorial de sub grila de colectie (09.08.2026)

   NU e descrierea repetata. Descrierea sta sus, in caseta de la 122; aici e
   povestea: de ce folosesti produsul, cand ajuta, pentru cine e, intrebari.
   Vine din metafield-ul custom.ghid_categorie, randat de sectiunea
   psn-colectie-ghid.

   Containerul repeta reteta de la 122: sectiunea e proprie, deci nu
   mosteneste containerul temei si textul ar incepe la x=0 in loc de x=40.

   display:block explicit pe titluri — in Horizon h2 vine cu display:flex,
   ceea ce schimba felul in care se aplica marginile.
   ========================================================================== */
html .psn-col-ghid {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 40px;
  padding-block: 24px 48px;
}

html .psn-col-ghid__corp {
  max-width: 68ch;
  color: var(--psn-ink, #201619);
}

html .psn-col-ghid__corp > *:first-child {
  margin-top: 0;
}

html .psn-col-ghid__corp > *:last-child {
  margin-bottom: 0;
}

html .psn-col-ghid__corp h2 {
  display: block;
  margin: 48px 0 12px;
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--psn-ink, #201619);
}

html .psn-col-ghid__corp h3 {
  display: block;
  margin: 32px 0 8px;
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--psn-ink, #201619);
}

html .psn-col-ghid__corp p {
  margin: 0 0 16px;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--psn-muted, #6b6168);
}

html .psn-col-ghid__corp ul {
  margin: 0 0 16px;
  padding-inline-start: 20px;
  list-style: disc;
}

html .psn-col-ghid__corp li {
  margin: 0 0 8px;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--psn-muted, #6b6168);
}

html .psn-col-ghid__corp li::marker {
  color: var(--psn-muted, #6b6168);
}

html .psn-col-ghid__corp strong {
  color: var(--psn-ink, #201619);
  font-weight: 600;
}

html .psn-col-ghid__corp a {
  color: var(--psn-red-dark, #8e1418);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ==========================================================================
   125. Titlu compact pe paginile de colectie (09.08.2026 noapte)

   Titlul avea 40px si sectiunea generica de deasupra avea 48px padding sus
   si jos in jurul lui - 142px doar pentru titlu, inainte sa apuce sa apara
   descrierea. Fontul (clasa h2, Fraunces) ramane neatins - se scrie aici
   doar marimea, ca titlul sa nu mai impinga produsele in jos. Selectorul
   tinteste sectiunea "section" din templates/collection.json, comuna
   TUTUROR paginilor de colectie (acelasi sablon JSON).
   ========================================================================== */
#shopify-section-template--29443793551743__section h1 {
  font-size: 1.75rem;
  line-height: 1.25;
}

@media screen and (max-width: 749px) {
  #shopify-section-template--29443793551743__section h1 {
    font-size: 1.5rem;
  }

  html .psn-col-lead {
    padding-inline: 16px;
    padding-block: 0 16px;
  }

  html .psn-col-lead__box {
    padding: 14px 16px;
  }

  html .psn-col-lead__box p {
    font-size: 1rem;
  }

  html .psn-col-ghid {
    padding-inline: 16px;
    padding-block: 20px 32px;
  }

  html .psn-col-ghid__corp h2 {
    font-size: 1.3125rem;
    margin-top: 32px;
  }

  html .psn-col-ghid__corp h3 {
    font-size: 1.0625rem;
    margin-top: 24px;
  }
}

/* ==========================================================================
   124. Denumirile lungi de categorii — sertarul de pe telefon și submeniurile
        care ies din ecran (09.08.2026)

   a) SERTARUL DE PE TELEFON. Denumirile noi („PREZERVATIVE & PROTECȚIE",
      „ÎNTÂRZIEREA EJACULĂRII", „PRODUSE PENTRU FEMEI") se rupeau pe 2 rânduri
      la 28px: 1 titlu rupt pe 414px și 3 titluri rupte pe 390 și 360px.
      Măsurat: 24px încă rupe „PREZERVATIVE & PROTECȚIE" pe 360px, 22px ține
      peste tot. Folosim clamp în loc de o treaptă fixă, ca titlul să rămână
      28px pe ecranele largi și să coboare doar cât e nevoie:
      360px -> 20.2px, 390px -> 21.8px, 414px -> 23.2px, peste 500px -> 28px.
      Clasa e `menu-drawer__menu-item--mainlist`, NU `menu-list__link` —
      linkurile din sertar au altă clasă decât cele din bara de sus.

   b) SUBMENIUL CARE IESE DIN ECRAN. Secțiunea 24 ancorează dropdown-ul cu
      `left: 0` de elementul de meniu. Cu denumirile lungi, la 1024px
      submeniul SUPLIMENTE depășea marginea dreaptă cu 4px. Sub 1200px
      întoarcem dropdown-urile din a doua jumătate a barei spre stânga
      (`right: 0`), ca un dropdown clasic care se oglindește lângă margine.
      Peste 1200px nu se schimbă nimic — acolo încap fără să iasă.
   ========================================================================== */
@media screen and (max-width: 519px) {
  html .menu-drawer .menu-drawer__menu-item--mainlist {
    font-size: clamp(20px, 5.6vw, 28px);
  }
}

@media screen and (min-width: 990px) and (max-width: 1200px) {
  html .header-menu .menu-list__list-item:nth-child(n + 4):not([slot='overflow']) > .menu-list__submenu {
    left: auto !important;
    right: 0 !important;
  }
}

/* ==========================================================================
   126. Sagetile caruselului din raftul "Recomandarile noastre" (10.08.2026)

   Raftul a trecut de la 3 la 2 coloane pe desktop (columns in
   templates/index.json), deci navigarea prin sageti devine necesara: opt
   produse in patru pasi. Butoanele EXISTAU si functionau la click, dar erau
   invizibile - tema le da:

       slideshow-arrows .slideshow-control { opacity: 0; color: var(--color-white) }

   Alb pe alb, plus opacitate zero care NU se ridica nici la hover (verificat
   cu mouse real prin CDP, nu cu evenimente sintetice). Regula temei e gandita
   pentru slideshow-uri peste imagini intunecate, nu pentru un raft alb.

   ATENTIE la domeniul selectorului: in aceeasi sectiune mai sunt 6 butoane
   identice ca. clasa, dar apartin galeriilor de imagini ALE CARDURILOR de
   produs (ascunse cat timp produsul are o singura poza). Fara `:not(...)`
   ele ar deveni si ele vizibile la primul produs cu doua fotografii.
   Verificat: selectorul de mai jos prinde exact 2 butoane, cele ale
   raftului. Ancora `product_list_fa6P9H` e cheia sectiunii din index.json.
   ========================================================================== */
html [class*="product_list_fa6P9H"] slideshow-arrows .slideshow-control:not(.resource-list__item .slideshow-control) {
  opacity: 1;
  color: var(--psn-ink);
}

/* Sub 750px sageata dispare complet: pe telefon navigarea se face prin
   glisare, iar butonul de 44x44 statea peste marginea cardului urmator.
   `display:none`, nu `opacity:0` - altfel ramane o tinta invizibila care
   fura atingerile destinate cardului de dedesubt. */
@media screen and (max-width: 749px) {
  html [class*="product_list_fa6P9H"] slideshow-arrows .slideshow-control:not(.resource-list__item .slideshow-control) {
    display: none;
  }
}

/* ============================================================
   psn 11.08.2026 — RAFT CU DERULARE CONTINUĂ („bandă")
   Cerut de Cristian: „ma asteptam sa mearga ca si sectiunea din
   cos completeaza comanda". Reface exact mecanica benzii de
   upsell din sertarul de coș, dar cu carduri de produs întregi.

   Durata NU e fixă: vine din secțiune prin --psn-raft-duration,
   calculată din numărul de produse (3s per card => ~87px/s,
   aceeași viteză ca banda din coș). Vezi capcana din 04.08.

   ATENȚIE la -50%: banda are 2 copii, dar `gap` NU se pune și
   după ultimul card, deci lățimea totală e 24*card + 23*gol, iar
   jumătate din ea e cu o JUMĂTATE DE GOL mai puțin decât o copie
   întreagă (12*card + 12*gol). Fără corecție, bucla ar sări 10px
   la fiecare ciclu. De aceea keyframes propriu, cu compensarea
   `- gol/2`, în loc să reciclez psn-marquee de la banda din coș
   (care are exact acest salt, de 6px, doar că trece neobservat).
   ============================================================ */

.psn-raft__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.psn-raft__row {
  --psn-raft-gap: 20px;

  display: flex;
  gap: var(--psn-raft-gap);
  width: max-content;
  animation: psn-raft-marquee var(--psn-raft-duration, 36s) linear infinite;
}

@keyframes psn-raft-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-50% - (var(--psn-raft-gap) / 2)));
  }
}

/* oprire la trecerea cu mausul si la focus din tastatura, ca sa
   se poata citi si apasa un card care altfel ar fi tinta mobila */
.psn-raft__viewport:hover .psn-raft__row,
.psn-raft__viewport:focus-within .psn-raft__row {
  animation-play-state: paused;
}

.psn-raft__row .resource-list__item {
  width: clamp(150px, 44vw, 246px);
  flex: 0 0 auto;
  min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  .psn-raft__viewport {
    overflow-x: auto;
  }

  .psn-raft__row {
    animation: none;
  }
}

/* psn-cache-bust 2026-08-11 09:40:58 */

/* ==========================================================================
   127. COȘ PE MOBIL — butonul „Finalizează comanda” sticky, deasupra barei
   de navigare (25.08.2026)

   Cerut de Cristian: pe pagina /cart (nu în sertar — acolo `.cart-drawer__summary`
   e deja sticky, de la deschiderea temei), pe telefon butonul de plată stătea
   în flux, la finalul listei de produse — trebuia derulat tot coșul ca să
   ajungi la el. Acum doar butonul (`.cart__ctas`, care conține „Finalizează
   comanda"; butoanele de plată accelerată sunt oricum ascunse global, secțiunea
   101) devine fix, lipit deasupra `.psn-bottom-nav` (și, dacă e cazul, deasupra
   bannerului de consimțământ — secțiunea 94, `--psn-cookie-h`). Totalul și
   subtotalul RĂMÂN în flux, deasupra — nu intră în bara fixă, ca să nu fie
   acoperite.

   Scopat pe `main[data-template="cart"]`, ca să nu atingă `.cart__ctas` din
   sertar (care oricum nu se randează pe pagina de coș — cart-drawer.liquid,
   `template.name != 'cart'`). Exclus pe coșul gol cu `:not(.cart-page--empty)`:
   `.cart-page__summary` nu se randează deloc când `cart.empty?`
   (sections/main-cart.liquid), deci `.cart__ctas` nu există fizic acolo —
   regula e defensivă, nu strict necesară.

   Padding-ul jos de pe `.cart-page` crește cu înălțimea barei noi, ca tot
   conținutul (inclusiv totalul) să poată fi derulat deasupra ei. `!important`
   obligatoriu: `.cart-page` primește `padding-block-end` INLINE din setările
   secțiunii (implicit 0 — templates/cart.json), iar stilul inline câștigă
   mereu în fața unui extern fără !important.
   ========================================================================== */
@media screen and (max-width: 749px) {
  main[data-template="cart"] .cart-page:not(.cart-page--empty) .cart__ctas {
    position: fixed;
    inset-inline: 0;
    bottom: calc(var(--psn-nav-height) + env(safe-area-inset-bottom, 0px) + var(--psn-cookie-h, 0px));
    z-index: 40;
    margin: 0;
    padding: 10px 16px;
    background: #fff;
    box-shadow: 0 -6px 18px rgb(32 22 25 / 0.10);
  }

  main[data-template="cart"] .cart-page:not(.cart-page--empty) {
    padding-bottom: 96px !important;
  }

  /* 25.08.2026, corecție după verificare vizuală: fără ea, footer-ul (care
     stă DUPĂ <main>, nu în interiorul .cart-page) rămânea cu ultimele rânduri
     acoperite de bara fixă la finalul derulării — padding-ul de mai sus
     acoperă doar interiorul lui .cart-page, nu și ce vine după el. */
  main[data-template="cart"]:has(.cart-page:not(.cart-page--empty)) ~ footer {
    padding-bottom: 96px;
  }
}

/* ==========================================================================
   128. PAGINA DE PRODUS PE MOBIL — bara fixă „Adaugă în coș” redusă la
   cantitate + buton (25.08.2026)

   Bara `sticky-add-to-cart` (nativă Horizon, activată din secțiunea 29.1)
   arăta implicit poza produsului, titlul, varianta și prețul, iar pe telefon
   ascundea tocmai textul „Adaugă în coș” și cantitatea (regula nativă
   `.add-to-cart-text__content { display: none }` sub 750px, rămânea doar
   iconița). Cerut de Cristian: bara să conțină DOAR cantitatea și „Adaugă în
   coș” — fără poză, titlu sau preț, ca să nu dubleze informația de mai sus pe
   un ecran mic și să rămână o bară subțire care nu acoperă descrierea,
   beneficiile sau recomandările de mai jos.

   `!important`: regulile native sunt scrise în {% stylesheet %}-ul din
   sections/product-information.liquid — păstrăm convenția de siguranță de la
   secțiunea 29.1 (load order).
   ========================================================================== */
@media screen and (max-width: 749px) {
  .sticky-add-to-cart__bar .sticky-add-to-cart__image,
  .sticky-add-to-cart__bar .sticky-add-to-cart__info,
  .sticky-add-to-cart__bar .sticky-add-to-cart__price {
    display: none !important;
  }

  .sticky-add-to-cart__bar {
    justify-content: center !important;
  }

  .sticky-add-to-cart__bar .add-to-cart-text__content {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
  }

  .sticky-add-to-cart__bar .sticky-add-to-cart__button {
    width: 100% !important;
  }
}

/* ==========================================================================
   129. COȘ PE MOBIL — butonul rotund „sus” nu mai acoperă „Finalizează
   comanda" (25.08.2026, corecție cerută după prima verificare)

   Același defect ca la secțiunea 29.8 (butonul „sus” peste bara de cumpărare
   de pe pagina de produs), de data asta pe /cart: de când `.cart__ctas` a
   devenit fix (secțiunea 127), `.psn-float--top` (z-index 55, poziționat tot
   deasupra `.psn-bottom-nav`) ajunge în aceeași zonă cu butonul de checkout.

   Aceeași soluție ca acolo: pe mobil, cât timp coșul are produse (bara de
   checkout există), butonul „sus" se ascunde — navigarea rămâne asigurată de
   bara de jos, care are propriul buton „Coș".
   ========================================================================== */
@media screen and (max-width: 749px) {
  body:has(main[data-template="cart"] .cart-page:not(.cart-page--empty)) .psn-float--top {
    display: none;
  }
}

/* ==========================================================================
   130. PAGINA DE PRODUS — cele 4 rânduri de reasigurare, icon + text pe
   același rând (25.08.2026)

   `psn_r1`…`psn_r4` din templates/product.json sunt blocuri „group" native
   (content_direction: row), dar fără `vertical_on_mobile` explicit — implicit
   TRUE (blocks/group.liquid, schema). Pe mobil iconul se rupea deasupra
   textului, cu un gol mare între ele. Corectat direct în settings-urile
   blocurilor (vertical_on_mobile: false pe toate patru, gap uniformizat la
   8px), nu de aici — secțiunea asta rămâne doar ca jurnal, nu adaugă CSS.
   ========================================================================== */


/* Footer premium — 31.08.2026: stil fără schimbarea conținutului sau a linkurilor legale. */
footer .shopify-section-group-footer-group:has(accordion-custom.menu) .section-background {
  background: radial-gradient(78% 120% at 0% 0%, rgba(179, 134, 31, .18), transparent 58%), linear-gradient(135deg, #10090b 0%, #241215 52%, #12090b 100%) !important;
}
footer .shopify-section-group-footer-group:has(accordion-custom.menu) .footer-content { padding-block: 52px 36px; }
footer .shopify-section-group-footer-group:has(accordion-custom.menu) a.image-block[href="/"] { display: inline-flex; position: relative; padding-bottom: 20px; }
footer .shopify-section-group-footer-group:has(accordion-custom.menu) a.image-block[href="/"]::after { content: ""; position: absolute; left: 0; bottom: 3px; width: 74px; height: 2px; border-radius: 999px; background: #d3a727; }
footer .shopify-section-group-footer-group:has(accordion-custom.menu) a.image-block[href="/"] img { width: min(100%, 212px) !important; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .38)); transition: transform .2s ease, filter .2s ease; }
footer .shopify-section-group-footer-group:has(accordion-custom.menu) a.image-block[href="/"]:hover img, footer .shopify-section-group-footer-group:has(accordion-custom.menu) a.image-block[href="/"]:focus-visible img { transform: translateY(-2px); filter: drop-shadow(0 13px 22px rgba(211, 167, 39, .27)); }
footer .shopify-section-group-footer-group:has(accordion-custom.menu) accordion-custom.menu { padding-inline: clamp(24px, 3vw, 44px); border-inline: 1px solid rgba(255, 255, 255, .14); }
footer .shopify-section-group-footer-group:has(accordion-custom.menu) .menu__heading { display: block; margin-bottom: 16px; color: #e1b638; font-size: .82rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
footer .shopify-section-group-footer-group:has(accordion-custom.menu) .menu__item { border-bottom: 1px solid rgba(255, 255, 255, .08); }
footer .shopify-section-group-footer-group:has(accordion-custom.menu) .menu__item a { display: flex; align-items: center; min-height: 44px; color: rgba(255, 255, 255, .78); transition: color .18s ease, padding-left .18s ease; }
footer .shopify-section-group-footer-group:has(accordion-custom.menu) .menu__item a::before { content: ""; width: 5px; height: 5px; flex: 0 0 auto; margin-right: 10px; border-radius: 50%; background: #d3a727; }
footer .shopify-section-group-footer-group:has(accordion-custom.menu) .menu__item a:hover, footer .shopify-section-group-footer-group:has(accordion-custom.menu) .menu__item a:focus-visible { padding-left: 5px; color: #fff; }
/* 31.08.2026, corecție: `:has(.payment-icons)` fără `>` prindea ORICE strămoș
   (verificat live — 3 niveluri deodată: bara întreagă, rândul de 3 coloane,
   ȘI coloana de plăți), fiecare cu propriile 22px padding + bordură + fundal
   — de-aici „cardul foarte înalt cu spațiu mort" semnalat de Cristian.
   Restrâns la copilul DIRECT care conține efectiv `.payment-icons`. */
/* 01.09.2026 (a treia rafinare): conținutul cardului aliniat sus — padding-top
   real 26px (era 46px, simetric), ca titlul „Cumperi în siguranță" să pornească
   aproape de aceeași înălțime optică cu „Utile"/„Politici" (care n-au niciun
   padding propriu). padding-bottom rămâne mai generos, spațiul gol se duce jos. */
footer .shopify-section-group-footer-group:has(accordion-custom.menu) .group-block:has(> .group-block-content > .payment-icons) { padding-inline: 16px; padding-block: 26px 32px; border: 1px solid rgba(255, 255, 255, .13); border-radius: 18px; background: rgba(255, 255, 255, .045); }
footer .shopify-section-group-footer-group:has(accordion-custom.menu) .payment-icons__list { gap: 8px; flex-wrap: nowrap; }
footer .shopify-section-group-footer-group:has(accordion-custom.menu) .payment-icons__item { padding: 4px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 7px; background: rgba(255, 255, 255, .94); }
/* 01.09.2026 (rafinare): pe desktop iconița e 30px lățime (item ~40px, cum a
   cerut Cristian), pe mobil 34px (item ~46px, „există suficientă lățime" —
   nu mai trebuie comprimate ca pe desktop). height:auto păstrează proporția. */
footer .shopify-section-group-footer-group:has(accordion-custom.menu) .payment-icons__item svg,
footer .shopify-section-group-footer-group:has(accordion-custom.menu) .payment-icons__item img {
  width: 30px;
  height: auto;
}
footer .social-icons__wrapper a { border: 1px solid rgba(211, 167, 39, .52); border-radius: 50%; transition: transform .18s ease, background-color .18s ease, border-color .18s ease; }
footer .social-icons__wrapper a:hover, footer .social-icons__wrapper a:focus-visible { transform: translateY(-2px); border-color: #d3a727; background: rgba(211, 167, 39, .16); }
@media screen and (max-width: 749px) {
  footer .shopify-section-group-footer-group:has(accordion-custom.menu) .footer-content { padding-block: 38px 26px; }
  footer .shopify-section-group-footer-group:has(accordion-custom.menu) a.image-block[href="/"] img { width: min(100%, 178px) !important; }
  footer .shopify-section-group-footer-group:has(accordion-custom.menu) accordion-custom.menu { padding: 28px 0 0; border-top: 1px solid rgba(255, 255, 255, .14); border-inline: 0; }
  footer .shopify-section-group-footer-group:has(accordion-custom.menu) .group-block:has(> .group-block-content > .payment-icons) { padding: 18px; }
  /* Mobil: badge-uri mai generoase (44-48px) — lățime suficientă, nu trebuie comprimate ca pe desktop. */
  footer .shopify-section-group-footer-group:has(accordion-custom.menu) .payment-icons__item { padding: 5px; }
  footer .shopify-section-group-footer-group:has(accordion-custom.menu) .payment-icons__item svg,
  footer .shopify-section-group-footer-group:has(accordion-custom.menu) .payment-icons__item img {
    width: 34px;
  }
}

/* ==========================================================================
   131. SPAȚIU SUB BARA DE COPYRIGHT — butonul „sus" nu mai riscă să
   acopere textul (31.08.2026, corectat aceeași zi după verificare)

   MĂSURAT: `.psn-floats` e `position:fixed`, cu vârful zonei sale de
   atingere la 58px DEASUPRA bării de navigație mobile (14px decalaj + 44px
   înălțime buton), pe desktop la 70px (18px + 52px buton, unde nu există
   bară de navigație).

   CORECȚIE 31.08 (a doua trecere): `body` are deja, la ≤749px, propriul
   `padding-bottom: nav-height + safe-area` (secțiunea 4 din acest fișier) —
   pagina se poate oricum derula până sub bara de navigație. Prima variantă a
   acestei reguli ADĂUGA din nou nav-height + safe-area peste padding-ul
   subsolului, dublând spațiul (rezultat: gol de ~192px, semnalat de Cristian
   ca fiind prea mare). Pe telefon rămâne DOAR ce lipsește cu adevărat:
   protruzia butonului DEASUPRA bării de navigație (58px) + 20px respirație —
   nav-height și safe-area nu se mai repetă aici.
   ========================================================================== */
footer .shopify-section-group-footer-group:has(accordion-custom.menu) .footer-content {
  padding-block-end: 88px;
}

@media screen and (max-width: 749px) {
  footer .shopify-section-group-footer-group:has(accordion-custom.menu) .footer-content {
    padding-block-end: 78px;
  }
}

/* ==========================================================================
   132. LISTE PE O SINGURĂ COLOANĂ — subsol reorganizat în 3 blocuri de
   linkuri (01.09.2026)

   Regulile 73.2/75.1/76.1 puneau linkurile subsolului pe o grilă de 2
   coloane, gândită pentru vechiul meniu unic „Informații utile" (9-14
   linkuri, coloană lată). Subsolul are acum 3 meniuri separate — Utile,
   Politici, Descoperă PASSION — fiecare cu doar 4-5 linkuri, în coloane mult
   mai înguste. Grila de 2 coloane la lățimea asta rupe textul pe mai multe
   rânduri și suprapune intrările pe desktop, iar pe telefon cere explicit
   listă pe o singură coloană. Niciun meniu din subsol nu mai are nevoie de
   împachetare pe 2 coloane — revin la o singură coloană pe orice lățime.
   ========================================================================== */
@media screen and (min-width: 990px) {
  html .shopify-section-group-footer-group nav ul.list-unstyled,
  html .shopify-section-group-footer-group .details-content ul {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 989px) {
  html .shopify-section-group-footer-group nav ul.list-unstyled,
  html .shopify-section-group-footer-group .details-content ul {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   133. „DESCOPERĂ PASSION" — singurul meniu din subsol pe 2 coloane
   (01.09.2026)

   Blocul stă acum sub „Utile" + „Politici", pe toată lățimea lor comună —
   suficient loc cât cele 4 subcategorii (De ce PASSION, Branduri, Noutăți,
   Blog — Ghiduri și sfaturi) să încapă pe 2 coloane echilibrate în loc de o
   listă lungă pe o coloană. `:has()` țintește lista după un link unic al
   acestui meniu, ca regula 132 (o coloană) să rămână neatinsă pentru
   „Utile" și „Politici". Pe telefon, anulez explicit micșorarea de font de
   la 75.1 (0,84375rem) — Cristian a cerut „fără text mic sau tăiat".
   ========================================================================== */
html .shopify-section-group-footer-group .details-content ul:has(a[href*="/pages/de-ce-passion"]) {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 24px;
  row-gap: 10px;
}

@media screen and (max-width: 989px) {
  html .shopify-section-group-footer-group .details-content ul:has(a[href*="/pages/de-ce-passion"]) {
    column-gap: 16px;
    row-gap: 14px;
  }

  html .shopify-section-group-footer-group .details-content ul:has(a[href*="/pages/de-ce-passion"]) li.menu__item {
    min-height: 0;
  }

  html .shopify-section-group-footer-group .details-content ul:has(a[href*="/pages/de-ce-passion"]) li.menu__item a {
    font-size: 1rem;
    line-height: 1.3;
  }
}

/* ==========================================================================
   134. LĂȚIMI PROPRII PENTRU NOUA STRUCTURĂ ÎN 3+2 COLOANE (01.09.2026)

   Regula 76.4 dă 30%/40%/30% oricărui `.group-block-content` cu 3 copii —
   scris pentru vechiul rând de 3 coloane. Structura nouă mai are un rând
   INTERN de 2 copii („Utile" + „Politici", în coloana din mijloc) care
   moștenea din greșeală 30/40 (nu 50/50) de la aceeași regulă — de-aia
   „Modalități de plată" / „Aviz legal — date firmă" se rupeau pe 2 rânduri.

   `:has()` disambiguează cele două rânduri din subsol care au coincidental
   același număr de copii (rândul principal ȘI bara de copyright au ambele
   3, respectiv 2 copii): rândul principal e singurul care conține sigla
   (`a.image-block[href="/"]`), iar rândul Utile+Politici e singurul care
   conține un meniu (`.details-content`). Bara de copyright nu conține
   niciunul din cele două, deci rămâne neatinsă.
   ========================================================================== */
@media screen and (min-width: 990px) {
  /* Rândul principal: identitate 22% / mijloc (Utile+Politici+Descoperă) 56% / siguranță 22%.
     Mijlocul are nevoie de mult mai mult loc decât vechiul meniu unic — ține 2 sub-coloane. */
  html .shopify-section-group-footer-group .group-block-content.layout-panel-flex--row:has(a.image-block[href="/"]) > .group-block:nth-child(1):nth-last-child(3) {
    flex: 0 1 22%;
  }
  html .shopify-section-group-footer-group .group-block-content.layout-panel-flex--row:has(a.image-block[href="/"]) > .group-block:nth-child(2):nth-last-child(2) {
    flex: 1 1 56%;
  }
  html .shopify-section-group-footer-group .group-block-content.layout-panel-flex--row:has(a.image-block[href="/"]) > .group-block:nth-child(3):nth-last-child(1) {
    flex: 0 1 22%;
  }

  /* Rândul „Utile" + „Politici": egale, 50/50. */
  html .shopify-section-group-footer-group .group-block-content.layout-panel-flex--row:has(.details-content) > .group-block:nth-child(1):nth-last-child(2),
  html .shopify-section-group-footer-group .group-block-content.layout-panel-flex--row:has(.details-content) > .group-block:nth-child(2):nth-last-child(1) {
    flex: 1 1 50%;
  }
}

/* ==========================================================================
   135. „DESCOPERĂ PASSION" — titlu centrat + gol mobil eliminat (01.09.2026,
   măsurare exactă cerută de Cristian)

   135.1 Titlul centrat: `.menu__heading` e deja `display:flex` (regula 77),
   deci doar `justify-content:center` centrează textul — cutia lui e deja
   simetrică față de zona Utile+Politici (padding-inline egal pe ambele
   laturi, de la regula din 31.08 pt. `accordion-custom.menu`), verificat
   prin măsurare DOM: centrul cutiei = centrul zonei, în limita a 1px.

   135.2 Golul mare de pe mobil, cauza reală (găsită prin măsurare, nu
   presupunere): regula din 31.08 `accordion-custom.menu { padding: 28px 0 0;
   border-top: ... }` la max-width:749px se aplica NEDIFERENȚIAT tuturor
   celor 3 meniuri noi — scrisă pt. un singur meniu „Informații utile", care
   avea nevoie de o linie + spațiu deasupra lui. Acum fiecare din Utile,
   Politici, Descoperă PASSION primea din greșeală acest padding+bordură —
   de-aici „liniile goale" semnalate și golul de 49px (20px gap intern +
   28px padding) în loc de 20-24px. Anulat complet — spațierea e deja dată
   explicit de `gap`-ul coloanei din mijloc și de separatorul propriu.
   ========================================================================== */
html .shopify-section-group-footer-group accordion-custom.menu:has(a[href*="/pages/de-ce-passion"]) .menu__heading {
  /* `.menu__heading` e `display:block` aici (nu flex, cum lasă de înțeles
     regula 77 — probabil suprascrisă în altă parte pt. acest context), și
     copilul `.menu__heading__default` are `display:contents` (fără cutie
     proprie măsurabilă) — `justify-content` nu are efect. `text-align`
     centrează corect textul indiferent de asta. */
  text-align: center;
  justify-content: center;
}

@media screen and (max-width: 749px) {
  html .shopify-section-group-footer-group accordion-custom.menu {
    padding-top: 0 !important;
    border-top: none !important;
  }

  /* 135.3 Golul „Politici" → „Descoperă PASSION" pe mobil.
     `.layout-panel-flex--column:has(.details-content):not(:has(logo))`
     țintește coloana din mijloc (conține meniuri, dar NU sigla — sigla e
     doar în coloana de identitate, soră, nu strămoș). Coloanele cu un
     singur meniu (Utile/Politici/Descoperă, luate individual) se potrivesc
     și ele, dar un `gap` pe un container cu un singur copil nu are efect
     vizual — inofensiv.
     01.09.2026: 15→30px — Cristian a cerut separat distanța separator→titlu
     pe mobil la 28-32px (măsurată separat de „ultimul link→separatorul lui",
     cerință dintr-o rundă anterioară). */
  html .shopify-section-group-footer-group .group-block-content.layout-panel-flex--column:has(.details-content):not(:has(a.image-block[href="/"])) {
    gap: 30px;
  }
}

/* ==========================================================================
   136. ECHILIBRAREA ÎNĂLȚIMILOR + SPAȚIERE ÎNTRE SECȚIUNI (01.09.2026,
   măsurare browser real cerută de Cristian — vezi footer-reorganizare-01-09
   pt. valorile înainte/după)

   136.1 Desktop — rândul principal (identitate / Utile+Politici / siguranță)
   avea diferențe de înălțime de până la 77px (306 vs 229). Conținutul
   fiecărei coloane e real (nu-l scurtez), deci aduc coloanele mai scunde
   mai aproape de cea mai înaltă prin spațiere internă mai generoasă — nu
   prin conținut nou. Rezultat țintit: sub 32px diferență.

   136.2 Mobil — golurile dintre secțiuni (firmă→Utile, Utile→Politici,
   Descoperă→siguranță) erau ~20px; ținta cerută e 24-32px. `mobile-column`
   e clasa care marchează un bloc AUTOR ca „row" dar afișat vertical pe
   telefon (spre deosebire de `layout-panel-flex--column`, care e un bloc
   autor COLOANĂ de la început) — rândul principal ȘI rândul Utile+Politici
   sunt ambele „row"-uri răsturnate, deci am nevoie de `.mobile-column`
   pentru a le ținti pe telefon, nu de `--column`.
   ========================================================================== */
@media screen and (min-width: 990px) {
  /* Cardul „Cumperi în siguranță" — 01.09.2026, a doua rafinare: Cristian a
     cerut explicit să reducă înălțimea cardului la 225-235px (nu s-o mai
     „umple" artificial) — gap-ul de 76px din runda anterioară (compensa
     lipsa rândului al 2-lea de plăți) revine la 22px, în intervalul cerut
     de 20-24px între titlu→plăți și plăți→insigne. */
  html .shopify-section-group-footer-group .group-block-content.layout-panel-flex--column:has(> .payment-icons) {
    gap: 22px;
  }

  /* Rândurile de linkuri din cele 3 meniuri — puțin mai aerisite, ca
     „Utile"/„Politici"/„Descoperă PASSION" să se apropie de înălțimea
     coloanei de identitate. `!important`: verificat că regula 78
     (`row-gap:12px`, aceeași specificitate, mai devreme în fișier) NU e
     suprascrisă de ordinea normală a cascadei aici — motiv neclar, posibil
     o particularitate Chrome cu multe reguli `:has()` în același fișier;
     confirmat empiric că doar `!important` câștigă sigur. */
  html .shopify-section-group-footer-group .details-content ul {
    row-gap: 16px !important;
  }
}

@media screen and (max-width: 749px) {
  /* Rândul principal: identitate → Utile (prima secțiune din mijloc) și
     Descoperă PASSION → Cumperi în siguranță. */
  html .shopify-section-group-footer-group .group-block-content.layout-panel-flex--row.mobile-column:has(.details-content):has(a.image-block[href="/"]) {
    gap: 26px;
  }

  /* „Utile" → „Politici". */
  html .shopify-section-group-footer-group .group-block-content.layout-panel-flex--row.mobile-column:has(.details-content):not(:has(a.image-block[href="/"])) {
    gap: 26px;
  }

  /* „Cumperi în siguranță" → banda de copyright — divider-ul de copyright
     își are propriul padding-top (parte din cutia lui, nu un `gap` de
     container), suprascris direct. */
  html .shopify-section-group-footer-group .group-block-content.layout-panel-flex--column:has(> .divider):has(a.image-block[href="/"]) > .divider {
    padding-top: 26px !important;
  }

  /* Separator copyright → primul conținut al benzii (sigla „PASSIONSTORE.RO").
     01.09.2026: există un gol „structural" de 20px, MĂSURAT, între cutia
     separatorului și cutia benzii de copyright pe mobil (nu apare pe
     desktop) — sursa exactă nu e clară (probabil scalarea gap-ului
     `psn_footer_wrap`, comportament la fel de neregulat ca în
     [[css-cine-castiga]]). Cu acel gol de 20px deja acolo, padding-top
     10px pe bandă dă exact 30px total — verificat prin măsurare, nu
     calculat teoretic (prima încercare, 30px, dădea 51px total). */
  html .shopify-section-group-footer-group .group-block-content.layout-panel-flex--column:has(> .divider):has(a.image-block[href="/"]) > .divider + .group-block {
    padding-top: 10px !important;
  }
}

@media screen and (min-width: 990px) {
  /* Aceeași bandă, pe desktop: măsurat 17px, sub intervalul cerut
     (20-28px) — suprascris la 24px. */
  html .shopify-section-group-footer-group .group-block-content.layout-panel-flex--column:has(> .divider):has(a.image-block[href="/"]) > .divider + .group-block {
    padding-top: 24px !important;
  }
}


/* ==========================================================================
   PASSION — Hotspot pe imagine (04.09.2026)
   ========================================================================== */
.psn-hotspot {
  background: #fff;
  border-top: 1px solid var(--psn-line);
  border-bottom: 1px solid var(--psn-line);
}

.psn-hotspot__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 64px 40px;
}

.psn-hotspot__head {
  text-align: center;
  margin-bottom: 32px;
}

.psn-hotspot__eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--psn-gold);
  margin-bottom: 12px;
}

.psn-hotspot__head h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.1;
  color: var(--psn-ink);
  margin: 0;
}

.psn-hotspot__frame {
  position: relative;
  border-radius: var(--psn-radius);
  overflow: hidden;
  box-shadow: var(--psn-shadow);
}

.psn-hotspot__frame img {
  display: block;
  width: 100%;
  height: auto;
}

.psn-hotspot__point {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(32, 22, 25, 0.55);
  border: 1.5px solid var(--psn-gold);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  text-decoration: none;
  transition: transform var(--psn-dur-rapid) var(--psn-ease), background var(--psn-dur-rapid) var(--psn-ease);
}

.psn-hotspot__point:hover,
.psn-hotspot__point:focus-visible {
  background: var(--psn-gold);
  border-color: var(--psn-gold);
  transform: translate(-50%, -50%) scale(1.12);
  color: var(--psn-ink);
}

@media screen and (max-width: 749px) {
  .psn-hotspot__inner {
    padding: 40px 20px;
  }
  .psn-hotspot__point {
    width: 30px;
    height: 30px;
    font-size: 16px;
  }
}

/* ==========================================================================
   137. SUBSOL — RÂND DE 4 COLOANE + „DESCOPERĂ PASSION" CA RÂND COMPACT
   (08.09.2026)

   Structura veche era 3 coloane (identitate / mijloc cu Utile+Politici+
   Descoperă / siguranță). Mijlocul ținea un bloc înalt și îngust care
   dezechilibra rândul. Structura nouă, din `footer-group.json`:
     rând 1 (4 coloane, aliniate sus): firma · Utile · Politici · siguranță
     rând 2 (toată lățimea containerului): „Descoperă PASSION" + 4 linkuri

   Regulile 134 se dezactivează SINGURE: sunt scrise cu
   `:nth-child(N):nth-last-child(M)` pentru exact 3, respectiv 2 copii —
   rândul principal are acum 4, deci niciun selector nu mai potrivește.
   Nu le șterg (rămân valide dacă cineva revine la 3 coloane); adaug doar
   lățimile proprii structurii de 4.
   ========================================================================== */
@media screen and (min-width: 990px) {
  /* 137.1 Cele 4 coloane, aliniate sus, cu lățimi proprii. */
  html .shopify-section-group-footer-group .group-block-content.layout-panel-flex--row:has(a.image-block[href="/"]) {
    align-items: flex-start;
  }
  html .shopify-section-group-footer-group .group-block-content.layout-panel-flex--row:has(a.image-block[href="/"]) > .group-block:nth-child(1):nth-last-child(4) { flex: 0 1 25%; }
  html .shopify-section-group-footer-group .group-block-content.layout-panel-flex--row:has(a.image-block[href="/"]) > .group-block:nth-child(2):nth-last-child(3) { flex: 0 1 19%; }
  html .shopify-section-group-footer-group .group-block-content.layout-panel-flex--row:has(a.image-block[href="/"]) > .group-block:nth-child(3):nth-last-child(2) { flex: 0 1 21%; }
  html .shopify-section-group-footer-group .group-block-content.layout-panel-flex--row:has(a.image-block[href="/"]) > .group-block:nth-child(4):nth-last-child(1) { flex: 0 1 27%; }

  /* 137.2 Aceeași mărime de text și aceeași spațiere pentru toate cele 3 liste.
     `!important` e obligatoriu aici — vezi lecția din secțiunea 136: o regulă
     nouă cu selector identic mai jos în fișier NU câștigă cascada. */
  html .shopify-section-group-footer-group nav ul.list-unstyled,
  html .shopify-section-group-footer-group .details-content ul {
    row-gap: 12px !important;
    column-gap: 24px !important;
  }
  html .shopify-section-group-footer-group nav ul.list-unstyled a,
  html .shopify-section-group-footer-group .details-content ul a {
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  /* 137.3 „Descoperă PASSION" — rând compact, titlu și linkuri într-un
     singur grup pe toată lățimea containerului. Anulează grila de 2 coloane
     din regula 133 (avea sens doar când blocul stătea îngust, sub Utile). */
  html .shopify-section-group-footer-group .group-block:has(> * > nav a[href*="/pages/de-ce-passion"]) {
    width: 100%;
    margin-block-start: 28px;
  }
  html .shopify-section-group-footer-group nav:has(a[href*="/pages/de-ce-passion"]) {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px 28px;
  }
  html .shopify-section-group-footer-group nav:has(a[href*="/pages/de-ce-passion"]) ul.list-unstyled {
    display: flex !important;
    grid-template-columns: none !important;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px 28px !important;
    margin: 0;
  }
  html .shopify-section-group-footer-group nav:has(a[href*="/pages/de-ce-passion"]) .menu__heading {
    text-align: left;
    margin: 0;
    white-space: nowrap;
  }

  /* 137.4 CASETA „CUMPERI ÎN SIGURANȚĂ" — plăți pe rând propriu, siglele
     de protecție a consumatorului dedesubt, mai mari și lizibile.
     Siglele păstrează proporțiile (`height:auto`), nu sunt întinse. */
  html .shopify-section-group-footer-group .group-block:has(a[href*="anpc.ro"]) {
    width: 100%;
    margin-block-start: 6px;
  }
  html .shopify-section-group-footer-group a[href*="anpc.ro"],
  html .shopify-section-group-footer-group a[href*="consumers/odr"] {
    display: block;
    width: 100%;
    max-width: 230px;
  }
  html .shopify-section-group-footer-group a[href*="anpc.ro"] img,
  html .shopify-section-group-footer-group a[href*="consumers/odr"] img {
    width: 100%;
    height: auto;
    max-width: 230px;
    object-fit: contain;
  }
}

@media screen and (max-width: 989px) {
  /* 137.5 Mobil — aranjarea existentă se păstrează (stivuit, o coloană).
     Singura schimbare: siglele ANPC/SOL devin lizibile și acolo. */
  html .shopify-section-group-footer-group a[href*="anpc.ro"],
  html .shopify-section-group-footer-group a[href*="consumers/odr"] {
    display: block;
    width: 100%;
    max-width: 260px;
  }
  html .shopify-section-group-footer-group a[href*="anpc.ro"] img,
  html .shopify-section-group-footer-group a[href*="consumers/odr"] img {
    width: 100%;
    height: auto;
    max-width: 260px;
    object-fit: contain;
  }
  /* „Descoperă PASSION" rămâne pe 2 coloane pe telefon (regula 133), neatins. */
}

/* ==========================================================================
   138. HOMEPAGE — „PRODUSE ALESE CU GRIJĂ" + BENEFICIILE, UN ANSAMBLU
   (08.09.2026)

   Textul e NESCHIMBAT; s-a schimbat doar structura lui în `index.json`:
   dintr-un singur `<p>` cu ambele propoziții, în `<h2>` (titlu) + `<p>`
   (al doilea rând). Aici primesc ierarhia vizuală și se leagă de banda de
   beneficii, ca să citească drept un singur bloc, nu două secțiuni.

   Țintire fără clase: Shopify curăță atributul `class` din setările de tip
   text ale blocurilor („Atributul class nu este permis pentru eticheta h2"),
   deci selectorul se agață de id-ul secțiunii — `[id*="psn_manifest"]`,
   stabil fiindcă vine din cheia secțiunii din `index.json`.
   ========================================================================== */
html [id*="psn_manifest"] h2 {
  font-size: 38px;
  line-height: 1.15;
  margin: 0;
  text-align: center;
}
html [id*="psn_manifest"] p {
  font-size: 23px;
  line-height: 1.35;
  margin: 6px 0 0;
  text-align: center;
  opacity: 0.85;
}

/* 138.1 Spațiul dintre titlu și grupul beneficiilor: ținta 24-32px.
   Secțiunea manifest are deja `padding-block-end: 0` (din index.json),
   deci golul e dat aici, o singură dată, pe banda de beneficii. */
html .psn-usp {
  padding-block-start: 28px;
  padding-block-end: 40px;
}

@media screen and (min-width: 990px) {
  /* 138.2 Beneficiile: 3 coloane egale, în același container centrat ca titlul,
     cu pictogramele și începuturile de text aliniate. */
  html .psn-usp__inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
    gap: 24px;
  }
  html .psn-usp__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }
  html .psn-usp__icon {
    flex: 0 0 auto;
    line-height: 0;
  }
  html .psn-usp__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
}

@media screen and (max-width: 989px) {
  /* 138.3 Mobil — dimensiuni adaptate, beneficii stivuite vertical. */
  html [id*="psn_manifest"] h2 { font-size: 27px; }
  html [id*="psn_manifest"] p { font-size: 17px; margin-top: 4px; }
  html .psn-usp {
    padding-block-start: 24px;
    padding-block-end: 32px;
  }
  html .psn-usp__inner {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  html .psn-usp__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }
  html .psn-usp__icon { flex: 0 0 auto; line-height: 0; }
}

/* ==========================================================================
   139. CORECȚII MĂSURATE PE 137 ȘI 138 (08.09.2026)

   Toate valorile de mai jos vin din măsurare în browser real pe tema de
   dezvoltare, nu din presupunere. Cauzele reale găsite:

   139.1 Ierarhia manifestului era INVERSATĂ: blocul de text are
   `type_preset: "h1"` în `index.json`, deci `<p>` moștenea 40px, iar `<h2>`
   primea doar 32px de la tema — subtitlul apărea mai mare decât titlul.
   Regulile din 138 nu câștigau cascada (aceeași problemă ca la secțiunea
   136), deci aici se scrie explicit cu `!important`.

   139.2 Liniile verticale orfane dintre coloane vin din regula de la
   linia ~13459: `accordion-custom.menu { padding-inline: clamp(24px,3vw,44px);
   border-inline: 1px solid ... }`. Era scrisă pentru vechea structură, unde
   cele 3 meniuri stăteau grupate în coloana din mijloc și chenarul le
   delimita. În rândul de 4 coloane aceleași borduri cad în mijlocul
   subsolului, iar `padding-inline` împinge „Descoperă PASSION" cu 38,4px
   spre interior, scoțându-l din alinierea containerului.

   139.3 Titlul „Descoperă PASSION" stă în `<summary>`, frate cu `<nav>`,
   în interiorul lui `<details class="menu__details">` — nu în
   `.menu__heading`, cum presupusesem în 137.3. De aceea titlul rămânea pe
   rândul lui în loc să intre în grup cu linkurile.

   139.4 Siglele ANPC/SOL rămâneau la 138px una lângă alta: `a.image-block`
   primește lățime de la temă, iar regulile din 137.4 nu o depășeau.
   ========================================================================== */

/* 139.1 Ierarhia titlu / subtitlu */
html [id*="psn_manifest"] h2 { font-size: 38px !important; line-height: 1.15 !important; }
html [id*="psn_manifest"] p  { font-size: 23px !important; line-height: 1.35 !important; }

/* Banda de beneficii face corp comun cu titlul — fără linie de despărțire sus */
html .psn-usp { border-top: 0 !important; }

@media screen and (min-width: 990px) {
  /* 139.2 Fără borduri verticale și fără inset pe meniurile din subsol */
  footer .shopify-section-group-footer-group:has(accordion-custom.menu) accordion-custom.menu,
  html .shopify-section-group-footer-group accordion-custom.menu {
    border-inline: 0 !important;
    padding-inline: 0 !important;
  }

  /* 139.3 „Descoperă PASSION": titlul și cele 4 linkuri, un singur grup pe rând */
  html .shopify-section-group-footer-group details.menu__details:has(a[href*="/pages/de-ce-passion"]) {
    display: flex !important;
    flex-direction: row;
    align-items: baseline;
    gap: 12px 28px;
    width: 100%;
  }
  html .shopify-section-group-footer-group details.menu__details:has(a[href*="/pages/de-ce-passion"]) > summary {
    flex: 0 0 auto;
    margin: 0;
    list-style: none;
    cursor: default;
  }
  html .shopify-section-group-footer-group details.menu__details:has(a[href*="/pages/de-ce-passion"]) > summary::-webkit-details-marker { display: none; }
  html .shopify-section-group-footer-group details.menu__details:has(a[href*="/pages/de-ce-passion"]) > nav.details-content {
    flex: 1 1 auto;
    width: auto;
  }

  /* 139.5 Lățimi rebalansate: „Aviz legal — date firmă" nu mai are voie să se rupă */
  html .shopify-section-group-footer-group .group-block-content.layout-panel-flex--row:has(a.image-block[href="/"]) > .group-block:nth-child(1):nth-last-child(4) { flex: 0 1 24%; }
  html .shopify-section-group-footer-group .group-block-content.layout-panel-flex--row:has(a.image-block[href="/"]) > .group-block:nth-child(2):nth-last-child(3) { flex: 0 1 18%; }
  html .shopify-section-group-footer-group .group-block-content.layout-panel-flex--row:has(a.image-block[href="/"]) > .group-block:nth-child(3):nth-last-child(2) { flex: 0 1 24%; }
  html .shopify-section-group-footer-group .group-block-content.layout-panel-flex--row:has(a.image-block[href="/"]) > .group-block:nth-child(4):nth-last-child(1) { flex: 0 1 26%; }
}

/* 139.4 CASETA „CUMPERI ÎN SIGURANȚĂ" — fără chenar voluminos, sigle lizibile.
   Coloana a 4-a e singura cu bordură + fundal propriu; se aliniază cu restul. */
html .shopify-section-group-footer-group .group-block-content.layout-panel-flex--row:has(a.image-block[href="/"]) > .group-block:nth-child(4):nth-last-child(1) {
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding-inline: 0 !important;
}

/* Siglele: una sub alta, pe lățimea casetei, proporții păstrate (height:auto) */
html .shopify-section-group-footer-group .group-block-content:has(> * > a[href*="anpc.ro"]),
html .shopify-section-group-footer-group .group-block-content:has(> a[href*="anpc.ro"]) {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px !important;
}
html .shopify-section-group-footer-group a.image-block[href*="anpc.ro"],
html .shopify-section-group-footer-group a.image-block[href*="consumers/odr"] {
  display: block !important;
  width: 100% !important;
  max-width: 236px !important;
}
html .shopify-section-group-footer-group a.image-block[href*="anpc.ro"] img,
html .shopify-section-group-footer-group a.image-block[href*="consumers/odr"] img {
  width: 100% !important;
  height: auto !important;
  max-width: 236px !important;
  border-radius: 4px !important;
  object-fit: contain;
}

@media screen and (max-width: 989px) {
  /* Mobil — aceeași lizibilitate a siglelor; restul aranjării rămâne cum era */
  html [id*="psn_manifest"] h2 { font-size: 27px !important; }
  html [id*="psn_manifest"] p  { font-size: 17px !important; }
  html .shopify-section-group-footer-group a.image-block[href*="anpc.ro"],
  html .shopify-section-group-footer-group a.image-block[href*="consumers/odr"] {
    max-width: 260px !important;
  }
  html .shopify-section-group-footer-group a.image-block[href*="anpc.ro"] img,
  html .shopify-section-group-footer-group a.image-block[href*="consumers/odr"] img {
    max-width: 260px !important;
  }
}

/* ==========================================================================
   140. SUBSOL MOBIL — ORDINEA INIȚIALĂ A BLOCURILOR (08.09.2026)

   Restructurarea de la 137 a mutat „Descoperă PASSION" din coloana din
   mijloc într-un RÂND FRATE, sub rândul de 4 coloane. Pe desktop e exact
   ce trebuia. Pe mobil, unde totul se stivuiește, efectul colateral a fost
   că ordinea a devenit
     firma → Utile → Politici → siguranță → Descoperă
   în loc de cea existentă înainte
     firma → Utile → Politici → Descoperă → siguranță.

   `order` funcționează doar între frați din același container flex, iar aici
   „siguranță" e în rândul de coloane, în timp ce „Descoperă" e în înveliș.
   Soluția: pe mobil, rândul de coloane și învelișul lui de bloc primesc
   `display: contents`, deci cele 4 coloane devin elemente flex directe ale
   învelișului, alături de „Descoperă". Abia atunci `order` le poate
   intercala. `display: contents` nu schimbă DOM-ul, deci selectorii
   `:nth-child()` de mai jos (și cei din 137/139) rămân valabili.

   Măsurat înainte: nici învelișul de bloc, nici conținutul lui nu au
   padding, bordură sau fundal propriu (0px / transparent), deci nu se
   pierde nimic vizual prin `display: contents`.

   Spațierea: rândul de coloane avea `gap: 26px`, învelișul are 20px. După
   aplatizare, cele 5 blocuri de conținut iau 26px (spațierea lor de dinainte),
   iar linia de copyright și bara de copyright își recapătă cei 20px printr-o
   compensare de -6px, ca să nu se miște nimic în josul subsolului.
   ========================================================================== */
@media screen and (max-width: 989px) {
  html .shopify-section-group-footer-group .group-block-content.layout-panel-flex:not(.layout-panel-flex--row):has(a[href*="anpc.ro"]):has(a[href*="/pages/de-ce-passion"]) {
    row-gap: 26px;
  }

  /* Aplatizează rândul de coloane în înveliș */
  html .shopify-section-group-footer-group .group-block-content.layout-panel-flex:not(.layout-panel-flex--row):has(a[href*="anpc.ro"]):has(a[href*="/pages/de-ce-passion"]) > *:nth-child(1),
  html .shopify-section-group-footer-group .group-block-content.layout-panel-flex:not(.layout-panel-flex--row):has(a[href*="anpc.ro"]):has(a[href*="/pages/de-ce-passion"]) > *:nth-child(1) > .group-block-content {
    display: contents;
  }

  /* Ordinea cerută: firma · Utile · Politici · Descoperă · siguranță */
  html .shopify-section-group-footer-group .group-block-content.layout-panel-flex:not(.layout-panel-flex--row):has(a[href*="anpc.ro"]):has(a[href*="/pages/de-ce-passion"]) > *:nth-child(1) > .group-block-content > .group-block:nth-child(1) { order: 1; }
  html .shopify-section-group-footer-group .group-block-content.layout-panel-flex:not(.layout-panel-flex--row):has(a[href*="anpc.ro"]):has(a[href*="/pages/de-ce-passion"]) > *:nth-child(1) > .group-block-content > .group-block:nth-child(2) { order: 2; }
  html .shopify-section-group-footer-group .group-block-content.layout-panel-flex:not(.layout-panel-flex--row):has(a[href*="anpc.ro"]):has(a[href*="/pages/de-ce-passion"]) > *:nth-child(1) > .group-block-content > .group-block:nth-child(3) { order: 3; }
  html .shopify-section-group-footer-group .group-block-content.layout-panel-flex:not(.layout-panel-flex--row):has(a[href*="anpc.ro"]):has(a[href*="/pages/de-ce-passion"]) > *:nth-child(2) { order: 4; }
  html .shopify-section-group-footer-group .group-block-content.layout-panel-flex:not(.layout-panel-flex--row):has(a[href*="anpc.ro"]):has(a[href*="/pages/de-ce-passion"]) > *:nth-child(1) > .group-block-content > .group-block:nth-child(4) { order: 5; }
  html .shopify-section-group-footer-group .group-block-content.layout-panel-flex:not(.layout-panel-flex--row):has(a[href*="anpc.ro"]):has(a[href*="/pages/de-ce-passion"]) > *:nth-child(3) { order: 6; margin-block-start: -6px; }
  html .shopify-section-group-footer-group .group-block-content.layout-panel-flex:not(.layout-panel-flex--row):has(a[href*="anpc.ro"]):has(a[href*="/pages/de-ce-passion"]) > *:nth-child(4) { order: 7; margin-block-start: -6px; }
}

/* ==========================================================================
   141. GRUPUL „PRODUSE ALESE CU GRIJĂ" — APROPIERE DE BANNER (08.09.2026)

   Ținte cerute, măsurate cutie-la-cutie:
     bannerul → titlu      32px desktop / 24px mobil
     titlu → subtitlu      8px
     subtitlu → beneficii  16px

   De unde veneau valorile vechi (măsurat, nu presupus):
   - banner → titlu = 40px, adică `padding-block-start` de pe
     `.section-content-wrapper` al secțiunii manifest (venea din `index.json`).
     Tema scalează singură valoarea pe mobil (40 → 28), deci mobilul primește
     aici o valoare explicită, ca să iasă exact 24.
   - titlu → subtitlu = 15,3px = marginea de jos a lui `<h2>` (9,5px) PLUS
     marginea de sus a lui `<p>` (5,75px). Blocul de text e `display:flex`,
     deci marginile NU se comprimă între ele — se adună. Le duc la 8 + 0.
   - subtitlu → beneficii = 28px, adică EXCLUSIV `padding-block-start` de pe
     `.psn-usp`. Secțiunea manifest are `padding-block-end: 0`, iar `<main>`
     n-are `row-gap`, deci golul vine dintr-o singură sursă — așa rămâne.

   Fără margini negative. Fonturile, textele, ordinea și aranjarea beneficiilor
   (3 coloane desktop / vertical mobil, secțiunile 138.2 și 138.3) rămân neatinse.
   ========================================================================== */
html [id*="psn_manifest"] .section-content-wrapper {
  padding-block-start: 32px !important;
  padding-block-end: 0 !important;
}
html [id*="psn_manifest"] h2 { margin: 0 0 8px !important; }
html [id*="psn_manifest"] p  { margin: 0 !important; }
html .psn-usp { padding-block-start: 16px !important; }

@media screen and (max-width: 989px) {
  html [id*="psn_manifest"] .section-content-wrapper {
    padding-block-start: 24px !important;
  }
  html .psn-usp { padding-block-start: 16px !important; }
}

/* --------------------------------------------------------------------------
   141.1 CORECȚIA GOLULUI CUMULAT BANNER → GRUP (08.09.2026)

   Măsurarea de la 141 compara marginea CUTIEI secțiunii hero cu titlul și
   dădea 32px. Golul VIZIBIL era însă 60px pe desktop și 52px pe mobil,
   fiindcă se adunau două spații:

     `.psn-hero { padding-bottom: 28px }`   ← sub cardul întunecat vizibil
   + `padding-block-start` al secțiunii manifest (32px desktop / 24px mobil)

   Cardul vizibil e `.psn-hero__frame`; sub el, cei 28px erau spațiu gol în
   interiorul secțiunii hero, invizibil la măsurarea cutie-la-cutie.

   Corecția: coada bannerului merge la 0, iar distanța rămâne dată de o
   singură sursă — paddingul secțiunii manifest. Fără margini negative.
   Restul bannerului (înălțime, chenar, carusel) și aranjarea internă
   titlu–subtitlu–beneficii rămân neatinse.
   -------------------------------------------------------------------------- */
html .psn-hero { padding-bottom: 0 !important; }

/* ==========================================================================
   142. SUBSOL DESKTOP — COPYRIGHT MUTAT ÎN COLOANA „CUMPERI ÎN SIGURANȚĂ"
   (08.09.2026)

   Pe DESKTOP cele două rânduri de copyright stau sub pictograma SAL, centrate
   pe lățimea coloanei; rândul vechi de jos și separatorul lui se ascund, ca să
   nu existe conținut dublat. Pe MOBIL rămâne exact aranjarea de acum: bara de
   jos + separator, iar blocul nou din coloană nu se afișează. Blocurile vechi
   NU au fost șterse din `footer-group.json` tocmai ca mobilul să rămână neatins.

   `display: none` scoate elementul din contextul flex, deci dispare și golul
   dintre el și vecini — nu rămâne spațiul blocului.

   Țintire fără id-uri: coloana a 4-a e singurul `.group-block-content` al cărui
   AL TREILEA copil direct conține sigla SAL. De acolo, copyrightul e copilul 4.

   Distanța pictogramă → primul rând: coloana are `gap: 16px`, iar SVG-ul SAL
   are ~4,5px bandă transparentă sub grafică (atributele `width="175"
   height="50"` față de `viewBox` 165.448×40.99). Golul VIZIBIL iese deci
   ≈20px fără nicio regulă în plus — exact ținta. Nu ating sigla.
   ========================================================================== */
@media screen and (min-width: 990px) {
  /* 142.1 Blocul de copyright din coloană — pe toată lățimea, centrat */
  html .shopify-section-group-footer-group .group-block-content:has(> *:nth-child(3) a[href*="anpc.ro"]) > *:nth-child(4) {
    width: 100% !important;
  }
  html .shopify-section-group-footer-group .group-block-content:has(> *:nth-child(3) a[href*="anpc.ro"]) > *:nth-child(4) .group-block-content {
    align-items: center !important;
    row-gap: 6px !important;
  }
  html .shopify-section-group-footer-group .group-block-content:has(> *:nth-child(3) a[href*="anpc.ro"]) > *:nth-child(4) p {
    text-align: center !important;
    margin: 0 !important;
    white-space: normal !important;   /* al doilea rând se poate încadra natural */
  }

  /* 142.2 Rândul vechi de copyright și separatorul lui — ascunse pe desktop */
  html .shopify-section-group-footer-group .group-block-content.layout-panel-flex:not(.layout-panel-flex--row):has(a[href*="anpc.ro"]):has(a[href*="/pages/de-ce-passion"]) > *:nth-child(3),
  html .shopify-section-group-footer-group .group-block-content.layout-panel-flex:not(.layout-panel-flex--row):has(a[href*="anpc.ro"]):has(a[href*="/pages/de-ce-passion"]) > *:nth-child(4) {
    display: none !important;
  }
}

@media screen and (max-width: 989px) {
  /* 142.3 Mobil — nimic nu se schimbă: blocul nou din coloană nu apare,
     bara de jos și separatorul rămân exact unde erau. */
  html .shopify-section-group-footer-group .group-block-content:has(> *:nth-child(3) a[href*="anpc.ro"]) > *:nth-child(4) {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   142.4 DISTANȚA PICTOGRAMĂ → COPYRIGHT, FIXATĂ LA 20px VIZIBIL

   Măsurat după 142: golul ieșea 22px la cutie, adică ~26,5px vizibil — coloana
   are `row-gap: 22px`, iar sub grafica SAL mai sunt ~4,5px bandă transparentă.

   Nu pot micșora doar ultima îmbinare printr-un `gap`, fiindcă `gap` se aplică
   la toate. Așa că duc `row-gap` la 15,5px (⇒ 15,5 + 4,5 = 20px vizibil sub
   pictogramă) și repun EXACT spațiile celorlalte două îmbinări cu margini
   POZITIVE, ca să nu se schimbe nimic altceva în casetă:
     titlu → plăți     15,5 + 6,5  = 22px  (cât era)
     plăți → pictogramă 15,5 + 12,5 = 28px  (cât era)
     pictogramă → copyright 15,5    = 20px vizibil  ← ținta
   Fără margini negative. Doar desktop; pe mobil coloana rămâne neatinsă.
   -------------------------------------------------------------------------- */
@media screen and (min-width: 990px) {
  html .shopify-section-group-footer-group .group-block-content:has(> *:nth-child(3) a[href*="anpc.ro"]) {
    row-gap: 15.5px !important;
  }
  html .shopify-section-group-footer-group .group-block-content:has(> *:nth-child(3) a[href*="anpc.ro"]) > *:nth-child(2) {
    margin-block-start: 6.5px !important;
  }
  html .shopify-section-group-footer-group .group-block-content:has(> *:nth-child(3) a[href*="anpc.ro"]) > *:nth-child(3) {
    margin-block-start: 12.5px !important;
  }
}

/* ==========================================================================
   143. SECȚIUNEA DE ABONARE — BUTON CĂTRE PLINKO, MENȚIUNE LEGALĂ, SIGLE
   (08.09.2026)

   Formularul separat de email a fost scos din secțiune: adresa se cere acum
   ÎN joc, în pasul lui de înscriere, prin formularul nativ Shopify pe care
   Plinko îl folosea deja. Nu există două formulare paralele.

   Siglele sociale: măsurat înainte, cele trei ținte de 44×44px stăteau la
   x = 582 / 618 / 654 — pas de 36px, deci se SUPRAPUNEAU cu 8px. Containerul
   are `gap: normal`. Aici primește o spațiere explicită.
   ========================================================================== */

/* 143.1 Mențiunea legală: discretă, dar lizibilă, cu link vizibil ca link. */
html .shopify-section-group-footer-group p:has(> a[href*="privacy-policy"]) {
  max-width: 46ch;
  margin-inline: auto;
  color: var(--psn-muted, #6b6168);
  font-size: 0.8125rem;
  line-height: 1.45;
}

html .shopify-section-group-footer-group p a[href*="privacy-policy"] {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 143.2 Siglele sociale — nu se mai ating.

   Cauza reală, măsurată: rândul .social-icons__wrapper are deja gap 12px,
   dar fiecare .social-icons__icon-wrapper are doar 24px lățime, în timp ce
   ancora dinăuntru are 44px — ținta de atingere. Pasul iese 24 + 12 = 36px, mai
   mic decât cei 44px ai ancorei, deci țintele se suprapun cu 8px. Golul dintre
   ele NU era problema; lățimea învelișului era.

   Fixul: învelișul primește chiar lățimea țintei. Pasul devine 44 + 12 = 56px,
   deci rămân 12px liberi între ținte. Pictograma vizibilă și ținta de atingere
   își păstrează amândouă dimensiunea. */
html .shopify-section-group-footer-group .social-icons__wrapper {
  gap: 12px;
}

/* !important e obligatoriu: regula temei,
   .social-icons__icon-wrapper:has(.social-icons__icon path) { width: var(--icon-size-lg) },
   are EXACT aceeasi specificitate (0,2,1) — :has() imprumuta specificitatea
   argumentului — si vine mai tarziu in ordinea surselor. */
html .shopify-section-group-footer-group .social-icons__icon-wrapper {
  width: 44px !important;
  justify-content: center;
}

@media screen and (max-width: 749px) {
  html .shopify-section-group-footer-group .social-icons__wrapper {
    gap: 10px;
  }
}