/**
 * Override-uri WooCommerce: grilă produse, card produs, filtre catalog,
 * PDP, cart/checkout/account, notices, empty states Woo.
 * Depinde de tokens.css + base.css. FĂRĂ @layer (Woo e unlayered).
 */

.product-brand {
    display: flex;
    gap: 0.55rem;
    align-items: baseline;
    margin: 0 0 0.65rem;
    color: var(--hts-text-muted);
    font-size: 0.84rem;
}

.product-brand span {
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.product-brand a {
    color: var(--hts-blue);
    font-weight: 800;
}

/* Savings badge (C2) — "Economisești X lei", always wc_price(), never
   hardcoded. Token: warning (spec §1). */
.product-savings-badge {
    display: inline-flex;
    width: fit-content;
    padding: 0.3rem 0.7rem;
    margin: 0.4rem 0 0;
    color: var(--hts-warning);
    background: var(--hts-warning-bg);
    border-radius: var(--hts-radius-pill);
    font-size: 0.82rem;
    font-weight: 700;
}

/* Key-specs summary next to the PDP price/CTA (C2) */
.product-key-specs {
    padding: var(--hts-space-4) 0;
    margin: var(--hts-space-4) 0;
    border-top: 1px solid var(--hts-border-fine);
    border-bottom: 1px solid var(--hts-border-fine);
}

.product-key-specs__list {
    display: grid;
    gap: 0.5rem;
    margin: 0;
}

.product-key-specs__row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--hts-border-fine);
    font-size: 0.86rem;
}

.product-key-specs__row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.product-key-specs__row dt {
    color: var(--hts-text-muted);
}

.product-key-specs__row dd {
    margin: 0;
    color: var(--hts-ink);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.product-key-specs__link {
    display: inline-block;
    margin-top: 0.7rem;
    color: var(--hts-blue);
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
}

.product-key-specs__link:hover {
    color: var(--hts-blue-bright);
    text-decoration: underline;
}

/* Flat "Descriere" section replacing the Woo tabs (C2) */
.product-description {
    clear: both;
    padding-block: 2.5rem;
    border-top: 1px solid var(--hts-border);
}

.product-description__body {
    max-width: 68ch;
    color: var(--hts-ink);
    font-size: 15px;
    line-height: 1.6;
}

.product-specifications {
    clear: both;
    padding-block: 3rem;
}

.product-specifications__table-wrap {
    overflow-x: auto;
    background: var(--hts-surface);
    border: 1px solid var(--hts-border);
    border-radius: var(--hts-radius-md);
}

.product-specifications table {
    width: 100%;
    border-collapse: collapse;
}

.product-specifications th,
.product-specifications td {
    padding: 0.85rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--hts-border-fine);
}

.product-specifications tbody:last-child tr:last-child th,
.product-specifications tbody:last-child tr:last-child td {
    border-bottom: 0;
}

.product-specifications th[scope="row"] {
    width: 42%;
    color: var(--hts-text-muted);
    font-weight: 650;
}

.product-specifications td {
    color: var(--hts-ink);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.product-specifications tbody tr:nth-child(even) th[scope="row"],
.product-specifications tbody tr:nth-child(even) td {
    background: var(--hts-specs-zebra);
}

.product-specifications__group th {
    color: var(--hts-on-dark-heading);
    background: var(--hts-dark);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.product-section .woocommerce ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none;
}

/*
 * Card produs — tasks/009-visual-spec.md §2 "Card produs".
 *
 * WooCommerce's own default stylesheet (still enqueued alongside ours) ships
 * a same-name rule targeting `ul.products[class*="columns-"] li.product`
 * (the loop wrapper always carries a native `columns-N` class), which is
 * *more specific* than the plain selector below and re-applies `float:left`
 * plus a percentage `width`/`margin` at its own 768px/600px breakpoints —
 * independent of our grid's track sizing. The grid tracks end up the right
 * width, but each card only fills Woo's leftover percentage of one (e.g.
 * ~82px of a ~390px-wide 2-column track). `!important` on exactly these
 * three box-model properties neutralises that residual float layout at
 * every width, regardless of stylesheet load order; nothing else here is
 * `!important`.
 */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    display: flex;
    flex-direction: column;
    float: none !important;
    width: auto !important;
    padding: 0;
    margin: 0 !important;
    overflow: hidden;
    background: var(--hts-surface);
    border: 1px solid var(--hts-border);
    border-radius: var(--hts-radius-md);
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.woocommerce ul.products li.product:hover,
.woocommerce ul.products li.product:focus-within {
    transform: translateY(-6px);
    box-shadow: var(--hts-shadow-card-hover);
}

.product-card__media-link {
    display: block;
}

.product-card__media {
    position: relative;
    display: block;
    /* Square, not 4:3 — real product photos run roughly 1:1 to 3:2, so a
       squarer box keeps them close to full-bleed instead of floating small
       inside extra side padding (spec: images should fill the card). */
    aspect-ratio: 1 / 1;
    background: var(--hts-surface-dim);
}

.woocommerce ul.products li.product .product-card__image {
    display: block;
    width: 100%;
    height: 100%;
    padding: 5%;
    object-fit: contain;
    background: var(--hts-surface-dim);
}

.product-card__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    height: 100%;
    color: var(--hts-text-placeholder);
}

.product-card__placeholder span:last-child {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.product-card__flag {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    padding: 0.3rem 0.6rem;
    border-radius: var(--hts-radius-pill);
    font-family: var(--hts-font-ui);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
}

.product-card__flag--promo {
    color: var(--hts-surface);
    background: var(--hts-sale);
}

.product-card__flag--stock {
    color: var(--hts-surface);
    background: var(--hts-danger);
}

.product-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 9px;
    padding: 16px 18px 18px;
}

.product-card__brand {
    display: block;
    color: var(--hts-blue);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title.product-card__title {
    min-height: calc(15px * 1.45 * 3);
    margin: 0;
    color: var(--hts-ink);
    font-family: var(--hts-font-ui);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
}

.product-card__title a {
    color: inherit;
    text-decoration: none;
}

.product-card__title a:hover {
    text-decoration: underline;
}

.product-card__stock {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 0.4rem;
    color: var(--hts-success);
    font-size: 0.78rem;
    font-weight: 700;
}

.product-card__stock-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentcolor;
}

.product-card__stock--no {
    color: var(--hts-danger);
}

.woocommerce ul.products li.product .price.product-card__price {
    margin-top: auto;
    padding-top: 3px;
    color: var(--hts-ink);
    font-family: var(--hts-font-ui);
    font-size: 1.15rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.product-card__cta {
    margin-top: 4px;
}

.woocommerce ul.products li.product .button {
    width: 100%;
    margin-top: 0;
    color: var(--hts-surface);
    background: var(--hts-blue);
    border-color: var(--hts-blue);
    text-align: center;
}

.woocommerce ul.products li.product .button:hover {
    background: var(--hts-blue-dark);
    border-color: var(--hts-blue-dark);
}

/* Out-of-stock: Woo renders the native "Read more" link (no add_to_cart_button
   class) instead of the AJAX add-to-cart button — style it as a ghost link. */
.woocommerce ul.products li.product .button:not(.add_to_cart_button) {
    color: var(--hts-blue);
    background: transparent;
    border-color: var(--hts-border-control);
}

.woocommerce ul.products li.product .button:not(.add_to_cart_button):hover {
    color: var(--hts-blue-bright);
    background: var(--hts-surface-dim);
    border-color: var(--hts-border-control);
}

.woocommerce ul.products li.product .button.loading {
    position: relative;
    color: transparent;
}

.woocommerce ul.products li.product .button.loading::after {
    content: "Se adaugă…";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hts-surface);
}

.woocommerce ul.products li.product .button.loading::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 22%;
    width: 13px;
    height: 13px;
    margin-top: -7px;
    border: 2px solid rgb(255 255 255 / 35%);
    border-top-color: var(--hts-surface);
    border-radius: 50%;
    animation: hts-spin 0.6s linear infinite;
}

.woocommerce ul.products li.product .button.added {
    position: relative;
    /* Same trick as .loading above: hide the original label so it
       doesn't show through/overlap the "Adăugat ✓" overlay below. */
    color: transparent;
    animation: hts-added-restore 0s 2.2s forwards;
}

.woocommerce ul.products li.product .button.added::after {
    content: "Adăugat ✓";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hts-surface);
    /* A guaranteed-to-render fallback for the ✓ glyph — our webfonts
       (Archivo/Saira) aren't verified to carry U+2713. */
    font-family: Arial, "Segoe UI Symbol", sans-serif;
    animation: hts-added-fade 2.2s ease forwards;
}

/*
 * WooCommerce's own `.added_to_cart.wc-forward` ("Vezi coșul") link that
 * it inserts right after the loop button on a successful ajax add —
 * unstyled by default (bare underlined text). Present it as a small
 * ghost link under the card so it reads as part of the design system,
 * not a stray raw anchor.
 */
.woocommerce ul.products li.product a.added_to_cart.wc-forward {
    display: block;
    margin-top: 0.5rem;
    color: var(--hts-blue);
    text-align: center;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 700;
}

.woocommerce ul.products li.product a.added_to_cart.wc-forward:hover {
    color: var(--hts-blue-bright);
    text-decoration: underline;
}

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

@keyframes hts-added-fade {
    0%,
    78% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes hts-added-restore {
    to {
        color: var(--hts-surface);
    }
}

.woocommerce ul.products li.product .price {
    color: var(--hts-ink);
    font-weight: 800;
}

.woocommerce .price del {
    color: var(--hts-text-placeholder);
    font-size: 0.82em;
    font-weight: 500;
}

.woocommerce .price ins {
    color: var(--hts-sale);
    text-decoration: none;
}

.woocommerce span.onsale {
    min-width: auto;
    min-height: auto;
    padding: 0.35rem 0.55rem;
    color: var(--hts-surface);
    background: var(--hts-sale);
    border-radius: var(--hts-radius-pill);
    line-height: 1;
}

.catalog-layout {
    position: relative;
    display: grid;
    grid-template-columns: minmax(14rem, 16.5rem) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}

.catalog-layout__filters {
    position: sticky;
    top: 1rem;
}

/* ---------------------------------------------------------------------- */
/* Filtre catalog — tasks/009-visual-spec.md §2 "Listare + filtre desktop" */
/* ---------------------------------------------------------------------- */

.catalog-filters {
    display: grid;
    gap: var(--hts-space-5);
    padding: var(--hts-space-5);
    background: var(--hts-surface);
    border: 1px solid var(--hts-border);
    border-radius: var(--hts-radius-md);
}

.catalog-filters__heading {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    align-items: center;
    padding-bottom: var(--hts-space-4);
    border-bottom: 1px solid var(--hts-border);
}

.catalog-filters__heading div {
    display: grid;
    gap: 0.3rem;
}

.catalog-filters__eyebrow {
    color: var(--hts-text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.catalog-filters__heading strong {
    color: var(--hts-ink);
    font-family: var(--hts-font-display);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.catalog-filters__reset {
    display: inline-flex;
    align-items: center;
    min-height: 2.2rem;
    padding: 0.35rem 0.8rem;
    color: var(--hts-blue);
    text-decoration: none;
    background: transparent;
    border: 1px solid var(--hts-border-control);
    border-radius: var(--hts-radius-sm);
    font-size: 0.78rem;
    font-weight: 700;
}

.catalog-filters__reset:hover {
    color: var(--hts-blue-bright);
    background: var(--hts-surface-dim);
}

.catalog-filters__group {
    display: grid;
    gap: 0.4rem;
}

.catalog-filters__label {
    color: var(--hts-text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.catalog-filters select,
.catalog-filters input[type="number"] {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.55rem 0.65rem;
    color: var(--hts-ink);
    background: var(--hts-surface);
    border: 1px solid var(--hts-border-control);
    border-radius: var(--hts-radius-sm);
    font: inherit;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.catalog-filters select:hover,
.catalog-filters input[type="number"]:hover {
    border-color: var(--hts-text-muted);
}

.catalog-filters select:focus-visible,
.catalog-filters input[type="number"]:focus-visible {
    outline: none;
    border-color: var(--hts-blue);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hts-blue) 18%, transparent);
}

.catalog-filters__prices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.catalog-filters__prices > div {
    display: grid;
    gap: 0.4rem;
}

.catalog-filters__toggles {
    gap: 0.6rem;
}

.catalog-filters__check {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    font-size: 0.88rem;
    font-weight: 500;
}

.catalog-filters__check input {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--hts-blue);
}

.catalog-filters__fieldset {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
}

.catalog-filters__fieldset legend {
    padding: 0;
    margin-bottom: 0.4rem;
}

.catalog-filters__options {
    display: grid;
    gap: 0.45rem;
    max-height: 12.5rem;
    overflow-y: auto;
}

.catalog-filters__submit {
    width: 100%;
}

/*
 * Desktop with JS: changing a filter navigates immediately (navigation.js),
 * so the button is hidden. Without JS it is the only way to submit; in the
 * mobile drawer it comes back as "Arată N produse" (see the 768px block).
 */
body.has-js .catalog-filters__submit {
    display: none;
}

.catalog-filters__submit.is-counting {
    opacity: 0.7;
}

.catalog-layout__results.is-loading {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 150ms ease;
}

/* Chips filtre active — deasupra grilei, "×" scoate parametrul din URL (GET) */
.catalog-filters-active {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0;
    margin: 0 0 var(--hts-space-4);
    list-style: none;
}

.catalog-filters-active__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.4rem 0.35rem 0.85rem;
    color: var(--hts-surface);
    background: var(--hts-blue);
    border-radius: var(--hts-radius-pill);
    font-size: 0.82rem;
    font-weight: 600;
}

.catalog-filters-active__chip a {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    color: var(--hts-surface);
    text-decoration: none;
    border-radius: 50%;
    font-size: 1rem;
    line-height: 1;
}

.catalog-filters-active__chip a:hover {
    background: rgb(255 255 255 / 18%);
}

.catalog-filters-active__clear {
    display: inline-flex;
    align-items: center;
    padding-left: 0.35rem;
}

.catalog-filters-active__clear a {
    color: var(--hts-text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.catalog-filters-active__clear a:hover {
    color: var(--hts-blue-bright);
}

/* Toggle mobil "Filtre (n)" + overlay + close (C3 — hidden fără JS) */
.catalog-filters-toggle,
.catalog-filters-overlay,
.catalog-filters__close {
    display: none;
}

/* ---------------------------------------------------------------------- */
/* Header listare + sortare + paginare                                     */
/* ---------------------------------------------------------------------- */

.woocommerce .woocommerce-products-header,
.page-heading {
    margin-bottom: 2rem;
}

.woocommerce .woocommerce-products-header__title,
.woocommerce h1.page-title,
.page-heading h1,
.woocommerce div.product .product_title,
.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-account .entry-title,
.woocommerce-cart h1.page-title,
.woocommerce-checkout h1.page-title,
.woocommerce-account h1.page-title,
.woocommerce-cart .content-entry > h1,
.woocommerce-checkout .content-entry > h1,
.woocommerce-account .content-entry > h1 {
    margin: 0;
    color: var(--hts-ink);
    font-family: var(--hts-font-display);
    font-size: clamp(2.1rem, 4vw, 52px);
    /* Ca la hero: sub 1.12 virgula de sub ș/ț ajunge lipită de rândul următor. */
    line-height: 1.12;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

/*
 * Cart/Checkout Blocks need the approved wide commerce shell. The generic
 * page article is intentionally capped at 48rem for readable editorial
 * pages, but that cap leaves the two-column checkout only 768px wide on a
 * 1280px viewport and crushes the order-summary description. The page-type
 * scope preserves the editorial measure everywhere else and does not alter
 * the Woo Blocks flow or column proportions.
 */
body.woocommerce-cart .content-entry,
body.woocommerce-checkout .content-entry {
    width: 100%;
    max-width: none;
}

.woocommerce .woocommerce-result-count {
    color: var(--hts-text-muted);
    font-size: 0.85rem;
}

.woocommerce .woocommerce-ordering select {
    max-width: 18rem;
    min-height: 2.75rem;
    padding-inline: 0.75rem;
    color: var(--hts-ink);
    background: var(--hts-surface);
    border: 1px solid var(--hts-border-control);
    border-radius: var(--hts-radius-sm);
    font: inherit;
    font-weight: 600;
}

.woocommerce .woocommerce-ordering select:focus-visible {
    outline: none;
    border-color: var(--hts-blue);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hts-blue) 18%, transparent);
}

.woocommerce nav.woocommerce-pagination {
    margin-top: var(--hts-space-6);
}

.woocommerce nav.woocommerce-pagination ul {
    display: flex;
    gap: 0.4rem;
    border: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
    margin: 0;
    border: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    display: grid;
    place-items: center;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    color: var(--hts-ink);
    background: var(--hts-surface);
    border: 1px solid var(--hts-border-control);
    border-radius: var(--hts-radius-sm);
    font-weight: 700;
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
    border-color: var(--hts-blue);
    color: var(--hts-blue);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
    color: var(--hts-surface);
    background: var(--hts-dark);
    border-color: var(--hts-dark);
}

/* ---------------------------------------------------------------------- */
/* PDP — tasks/009-visual-spec.md §2 "PDP desktop"                         */
/* ---------------------------------------------------------------------- */

.woocommerce div.product {
    padding: clamp(1rem, 3vw, 2rem);
    background: var(--hts-surface);
    border: 1px solid var(--hts-border);
    border-radius: var(--hts-radius-lg);
}

.woocommerce div.product div.images img {
    background: var(--hts-surface-dim);
    border-radius: var(--hts-radius-md);
}

.woocommerce div.product .flex-control-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0;
    margin: 0.75rem 0 0;
    list-style: none;
}

.woocommerce div.product .flex-control-thumbs li {
    width: 92px;
}

.woocommerce div.product .flex-control-thumbs img {
    width: 92px;
    height: 92px;
    object-fit: contain;
    background: var(--hts-surface-dim);
    border: 2px solid transparent;
    border-radius: var(--hts-radius-sm);
    cursor: pointer;
    opacity: 1;
}

.woocommerce div.product .flex-control-thumbs img.flex-active {
    border-color: var(--hts-dark);
}

.woocommerce div.product p.price {
    color: var(--hts-ink);
    font-family: var(--hts-font-ui);
    font-size: clamp(1.6rem, 3vw, 40px);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.woocommerce div.product p.price ins {
    color: var(--hts-sale);
    text-decoration: none;
}

.woocommerce div.product p.price del {
    color: var(--hts-text-placeholder);
    font-size: 0.6em;
    font-weight: 500;
}

.woocommerce div.product .stock {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0.6rem 0 0;
    color: var(--hts-success);
    font-size: 0.9rem;
    font-weight: 700;
}

.woocommerce div.product .stock::before {
    width: 8px;
    height: 8px;
    background: currentcolor;
    border-radius: 50%;
    content: "";
}

.product-availability-contact {
    max-width: 40ch;
    margin: 0.25rem 0 1rem;
    color: var(--hts-text-muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

.product-availability-contact a {
    color: var(--hts-blue);
    font-weight: 600;
}

.woocommerce div.product .stock.out-of-stock {
    color: var(--hts-danger);
}

.woocommerce div.product form.cart {
    display: flex;
    gap: 0.6rem;
    align-items: stretch;
    margin-top: var(--hts-space-4);
}

.woocommerce .quantity .qty {
    min-height: 3.2rem;
    padding: 0 0.75rem;
    background: var(--hts-surface);
    border: 1px solid var(--hts-border-control);
    border-radius: var(--hts-radius-md);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.woocommerce div.product .single_add_to_cart_button {
    flex: 1 1 auto;
    min-height: 3.2rem;
    color: var(--hts-surface);
    background: var(--hts-blue);
    border-color: var(--hts-blue);
    font-size: 1rem;
    font-weight: 800;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
}

.woocommerce div.product .single_add_to_cart_button:hover {
    background: var(--hts-blue-dark);
    border-color: var(--hts-blue-dark);
}

/*
 * PDP add-to-cart feedback (assets/js/add-to-cart.js drives the classes).
 * Two states on top of the default button: `.is-adding` (brief, disabled)
 * and `.is-added` (a checkmark draws in, background flips to the success
 * token). No page reload, no washed-out Woo-core `.loading` opacity — the
 * JS never adds that class. Without JS the button is untouched and the
 * form submits natively (progressive enhancement, same pattern as C3).
 */
.single_add_to_cart_button .cta-icon {
    display: inline-flex;
    width: 0;
    overflow: hidden;
    transition: width 0.25s ease;
    vertical-align: -3px;
}

.single_add_to_cart_button.is-added .cta-icon {
    width: 1.15rem;
    margin-right: 0.4rem;
}

.single_add_to_cart_button .cta-icon path {
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    transition: stroke-dashoffset 0.4s ease 0.1s;
}

.single_add_to_cart_button.is-added .cta-icon path {
    stroke-dashoffset: 0;
}

.woocommerce div.product .single_add_to_cart_button.is-adding {
    color: var(--hts-surface) !important;
    background-color: var(--hts-blue) !important;
    border-color: var(--hts-blue) !important;
    opacity: 0.85;
    cursor: progress;
}

.woocommerce div.product .single_add_to_cart_button.is-added {
    color: var(--hts-surface) !important;
    background-color: var(--hts-blue) !important;
    border-color: var(--hts-blue) !important;
    transform: scale(1.015);
}

@media (max-width: 480px) {
    .woocommerce div.product .single_add_to_cart_button.is-added {
        transform: none;
    }
}

.purchase-assurance {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.6rem;
    padding: var(--hts-space-4) 0 0;
    margin: var(--hts-space-5) 0 0;
    color: var(--hts-text-muted);
    border-top: 1px solid var(--hts-border-fine);
    list-style: none;
    font-size: 0.84rem;
}

.purchase-assurance li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--hts-surface-dim);
    border-radius: var(--hts-radius-sm);
}

.purchase-assurance li::before {
    color: var(--hts-blue);
    content: "✓";
    font-weight: 900;
}

/* ---------------------------------------------------------------------- */
/* Notices — tasks/009-visual-spec.md §2 "Notices Woo"                     */
/* ---------------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 1.2rem;
    color: var(--hts-ink);
    background: var(--hts-success-bg);
    border: 0;
    border-left: 4px solid var(--hts-blue);
    border-radius: var(--hts-radius-sm);
}

.woocommerce-message::before,
.woocommerce-info::before {
    /* WC core positions its own icon glyph with `position: absolute; top:
       1em; left: 1.5em` (its own icon font, WooCommerce.woff). We swap the
       glyph via `content` but never touched `position` — so that absolute
       offset survived and sat the checkmark right on top of the message
       text instead of flowing as the first flex item. */
    position: static;
    color: var(--hts-blue);
    font-weight: 900;
    content: "✓";
}

/* .woocommerce-error is a single <ul> that can wrap several <li> messages —
   the flex/icon treatment applies per item, not to the shared wrapper. */
.woocommerce-error {
    display: grid;
    gap: 0.4rem;
    padding: 1rem 1.2rem;
    margin: 0 0 2rem;
    color: var(--hts-ink);
    background: var(--hts-danger-bg);
    border: 0;
    border-left: 4px solid var(--hts-danger);
    border-radius: var(--hts-radius-sm);
    list-style: none;
}

.woocommerce-error li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.woocommerce-error li::before {
    color: var(--hts-danger);
    font-weight: 900;
    content: "!";
}

.woocommerce table.shop_table,
.woocommerce form.checkout,
.woocommerce form.login,
.woocommerce form.register,
.woocommerce-MyAccount-content {
    background: var(--hts-surface);
    border-color: var(--hts-line);
    border-radius: 0;
}

.woocommerce table.shop_table,
.woocommerce form.login,
.woocommerce form.register,
.woocommerce-MyAccount-content {
    padding: 1rem;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    min-height: 3rem;
    padding: 0.7rem;
    background: var(--hts-surface);
    border: 1px solid var(--hts-input-border);
    border-radius: 0;
    font: inherit;
}

.woocommerce-checkout #payment,
.woocommerce .cart-collaterals .cart_totals {
    padding: 1rem;
    background: var(--hts-specs-group-bg);
    border-radius: 0;
}

.woocommerce-MyAccount-navigation ul {
    display: grid;
    gap: 0.25rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.woocommerce-MyAccount-navigation a {
    display: block;
    padding: 0.65rem 0.8rem;
    background: var(--hts-surface);
    border-left: 0.2rem solid var(--hts-line);
    text-decoration: none;
}

.woocommerce-MyAccount-navigation .is-active a {
    border-left-color: var(--hts-blue);
    font-weight: 800;
}

/* ---------------------------------------------------------------------- */
/* Responsive — tasks/009-visual-spec.md §2 "Tabletă 768" / "Mobil 390"    */
/* Breakpoints: desktop > 768px · tablet ≤768px · mobil ≤480px (390 e      */
/* lățimea de referință a artboard-ului, nu o valoare exactă de breakpoint;*/
/* 480px acoperă și telefoanele puțin mai late fără a schimba layout-ul). */
/* ---------------------------------------------------------------------- */

@media (max-width: 768px) {
    .catalog-layout {
        grid-template-columns: 1fr;
    }

    .catalog-layout__filters {
        position: static;
    }

    .woocommerce ul.products,
    .product-section .woocommerce ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .woocommerce table.shop_table_responsive tr,
    .woocommerce-page table.shop_table_responsive tr {
        margin-bottom: 1rem;
        border-bottom: 1px solid var(--hts-border);
    }

    /*
     * Drawer filtre mobil (C3): fără JS, `.catalog-layout__filters` rămâne
     * `position: static` (regula de mai sus) — formularul GET existent e
     * mereu vizibil, deci utilizabil fără JavaScript. Doar cu `body.has-js`
     * devine bottom-sheet ascuns, deschis prin butonul „Filtre (n)”.
     */
    body.has-js .catalog-filters-toggle {
        display: inline-flex;
        justify-self: start;
        align-items: center;
        gap: 0.5rem;
        min-height: 44px;
        padding: 0.5rem 1.1rem;
        margin-bottom: var(--hts-space-4);
        color: var(--hts-surface);
        background: var(--hts-dark);
        border: 0;
        border-radius: var(--hts-radius-sm);
        font-family: var(--hts-font-ui);
        font-size: 0.9rem;
        font-weight: 700;
    }

    body.has-js .catalog-filters-toggle:hover {
        background: var(--hts-blue-dark);
    }

    body.has-js .catalog-layout__filters {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 80;
        max-height: 85vh;
        padding-top: var(--hts-space-6);
        overflow-y: auto;
        background: var(--hts-surface);
        border-radius: var(--hts-radius-lg) var(--hts-radius-lg) 0 0;
        box-shadow: var(--hts-shadow-drawer);
        transform: translateY(100%);
    }

    body.has-js.hts-panels-animated .catalog-layout__filters {
        transition: transform 220ms ease;
    }

    body.has-js.filters-open .catalog-layout__filters {
        transform: translateY(0);
    }

    body.has-js .catalog-filters {
        border: 0;
        border-radius: 0;
    }

    body.has-js .catalog-filters__submit {
        display: block;
        position: sticky;
        bottom: 0;
        min-height: 48px;
        margin-top: var(--hts-space-3);
        box-shadow: 0 -12px 16px -12px color-mix(in srgb, var(--hts-dark-deep) 35%, transparent);
    }

    body.has-js .catalog-filters__close {
        display: grid;
        position: absolute;
        top: var(--hts-space-3);
        right: var(--hts-space-3);
        z-index: 1;
        width: 44px;
        height: 44px;
        color: var(--hts-ink);
        background: var(--hts-surface-dim);
        border: 0;
        border-radius: 50%;
        place-items: center;
    }

    body.has-js .catalog-filters-overlay {
        position: fixed;
        inset: 0;
        z-index: 75;
        display: none;
        background: color-mix(in srgb, var(--hts-dark-deep) 55%, transparent);
    }

    body.has-js.filters-open .catalog-filters-overlay {
        display: block;
    }
}

body.hts-scroll-lock {
    overflow: hidden;
}

@media (max-width: 480px) {
    .woocommerce ul.products,
    .product-section .woocommerce ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .woocommerce ul.products li.product .product-card__image {
        padding: 5%;
    }

    .woocommerce ul.products li.product .woocommerce-loop-product__title.product-card__title {
        min-height: calc(13px * 1.4 * 2);
        font-size: 13px;
        line-height: 1.4;
    }

    .product-card__body {
        gap: 6px;
        padding: 12px 14px 14px;
    }

    .woocommerce ul.products li.product .price.product-card__price {
        font-size: 1rem;
    }

    .catalog-filters__prices {
        grid-template-columns: 1fr;
    }

    /*
     * Bară fixă jos „Filtre (n) / Sortare” (spec §2 "Mobil 390"): backdrop
     * pur CSS pe body — funcțională și fără JS pentru sortare (select
     * nativ, poziționat fix prin CSS, fără a-l muta în DOM). Doar butonul
     * „Filtre” e ascuns fără JS (fallback: filtrele rămân vizibile inline,
     * mai sus, prin regula "position: static" din breakpoint-ul 768px).
     */
    body.woocommerce-shop::after,
    body.tax-product_cat::after,
    body.tax-product_tag::after,
    body.tax-product_brand::after {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 30;
        height: calc(64px + env(safe-area-inset-bottom));
        background: var(--hts-surface);
        border-top: 1px solid var(--hts-border);
        content: "";
    }

    body.woocommerce-shop,
    body.tax-product_cat,
    body.tax-product_tag,
    body.tax-product_brand {
        padding-bottom: calc(76px + env(safe-area-inset-bottom));
    }

    /*
     * The sort <select> has no intrinsic width limit — its native box sizes
     * to the widest option text, wide enough at 390px to overlap the fixed
     * "Filtre" button on the left (same z-index, later in DOM order, so it
     * silently ate the button's clicks). Both controls now get an explicit,
     * non-overlapping half-width zone instead of relying on z-index to
     * resolve an overlap that touch/click can't: 16px outer margin either
     * side, 8px gap between them.
     */
    body.woocommerce-shop .woocommerce-ordering,
    body.tax-product_cat .woocommerce-ordering,
    body.tax-product_tag .woocommerce-ordering,
    body.tax-product_brand .woocommerce-ordering {
        position: fixed;
        left: auto;
        right: var(--hts-space-4);
        bottom: calc(env(safe-area-inset-bottom) + 12px);
        z-index: 31;
        width: calc(50% - 20px);
        margin: 0;
    }

    body.woocommerce-shop .woocommerce-ordering select,
    body.tax-product_cat .woocommerce-ordering select,
    body.tax-product_tag .woocommerce-ordering select,
    body.tax-product_brand .woocommerce-ordering select {
        width: 100%;
    }

    body.has-js.woocommerce-shop .catalog-filters-toggle,
    body.has-js.tax-product_cat .catalog-filters-toggle,
    body.has-js.tax-product_tag .catalog-filters-toggle,
    body.has-js.tax-product_brand .catalog-filters-toggle {
        position: fixed;
        left: var(--hts-space-4);
        right: auto;
        bottom: calc(env(safe-area-inset-bottom) + 12px);
        z-index: 32;
        width: calc(50% - 20px);
        margin-bottom: 0;
    }

    /* PDP: bară fixă jos cu qty + CTA (spec §2 "Mobil 390"), pur CSS. */
    body.single-product {
        padding-bottom: calc(88px + env(safe-area-inset-bottom));
    }

    /*
     * `single-product` and `woocommerce` are both classes on the *same*
     * <body> element (WooCommerce's own body_class() output) — never
     * nested. The previous selector's `.woocommerce` segment demanded a
     * *separate* descendant carrying that class, which the single-product
     * template never renders (only body has it), so this rule silently
     * never matched and the sticky CTA never applied. `body.single-product`
     * alone already scopes correctly to this page type.
     */
    body.single-product div.product form.cart {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 40;
        padding: 12px var(--hts-space-4) calc(12px + env(safe-area-inset-bottom));
        margin: 0;
        background: var(--hts-surface);
        border-top: 1px solid var(--hts-border);
    }

    .woocommerce div.product form.cart .quantity {
        flex: 0 0 auto;
    }

    .woocommerce div.product .single_add_to_cart_button {
        flex: 1 1 auto;
    }
}

/* ---------------------------------------------------------------------- */
/* My Account                                                              */
/* ---------------------------------------------------------------------- */

/*
 * Notice action buttons (e.g. the "Confirmă adresa de email" / "Răsfoiește
 * produsele" links WooCommerce appends to the empty-orders notices) used to
 * squeeze their label onto 2-3 lines: the notice is a flex row and, with no
 * flex-shrink/white-space rule of its own, the button shrank below its
 * content's width right along with the message text. `flex-wrap` gives the
 * row somewhere to go instead of compressing; the button itself never
 * shrinks or wraps its own label.
 */
.woocommerce-message,
.woocommerce-info {
    flex-wrap: wrap;
}

.woocommerce-message a.button,
.woocommerce-info a.button {
    flex-shrink: 0;
    margin-left: auto;
    white-space: nowrap;
}

/*
 * Login / Register — two cards instead of two bare, unbordered columns.
 *
 * WooCommerce reuses the exact same `.u-columns.col2-set` /
 * `.u-column1.col-1` / `.u-column2.col-2` classes for the Addresses page
 * (billing/shipping side by side) — they're WC's generic "2-column layout"
 * helper, not something specific to login/register. Without the
 * `:not(.woocommerce-Addresses / .woocommerce-Address)` guards below, this
 * rule block — higher specificity than the dedicated `.woocommerce-Address`
 * rules further down — silently won on the address boxes too, painting
 * them with the login card's white/large-radius look instead of their own
 * grey/compact one and killing their side-by-side grid in the process.
 */
.woocommerce-account .u-columns.col2-set:not(.woocommerce-Addresses) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--hts-space-6);
    margin: 0 0 var(--hts-space-7);
}

/*
 * WC's legacy float-column system clears itself with a `::before`/`::after`
 * clearfix (content:" "; display:table). A grid container doesn't float
 * and needs no clearfix — worse, those pseudo-elements still generate real
 * boxes that occupy grid cells, which scattered the two real cards into a
 * 2×2 diagonal instead of a clean row. A grid has nothing to clear — true
 * for the Addresses grid below too, so this one stays unscoped.
 */
.woocommerce-account .u-columns.col2-set::before,
.woocommerce-account .u-columns.col2-set::after {
    content: none;
    display: none;
}

.woocommerce-account .u-column1.col-1:not(.woocommerce-Address),
.woocommerce-account .u-column2.col-2:not(.woocommerce-Address) {
    /* WooCommerce's own legacy float-column CSS (woocommerce-layout.css)
       sets float:left/right + width:48% on these same two classes, tied in
       specificity with this rule — !important is the only reliable way to
       win that fight (see the single_add_to_cart_button saga in Grup D). */
    float: none !important;
    width: auto !important;
    padding: var(--hts-space-6);
    background: var(--hts-surface);
    border: 1px solid var(--hts-border);
    border-radius: var(--hts-radius-lg);
}

.woocommerce-account .u-column1.col-1:not(.woocommerce-Address) h2,
.woocommerce-account .u-column2.col-2:not(.woocommerce-Address) h2 {
    margin: 0 0 var(--hts-space-5);
    font-family: var(--hts-font-display);
    font-size: 1.3rem;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.woocommerce-account .u-column2.col-2:not(.woocommerce-Address) p {
    color: var(--hts-text-muted);
    font-size: 0.86rem;
    line-height: 1.6;
}

.woocommerce-account .woocommerce-form-register .button {
    background: var(--hts-blue);
    color: var(--hts-surface);
    border-color: var(--hts-blue);
}

.woocommerce-account .woocommerce-form-register .button:hover {
    background: var(--hts-blue-dark);
    border-color: var(--hts-blue-dark);
}

/*
 * Password visibility toggle: WooCommerce's own core CSS ships no styling
 * for it at all — it renders as a bare 22×22 native <button> with no icon,
 * which is what looked like a stray artifact sitting inside the field. Give
 * it a proper eye glyph (open / struck-through, swapped by the toggle's own
 * `display:none` class-toggle) and clean button-reset positioning.
 */
.password-input {
    position: relative;
    display: block;
}

.password-input input.input-text {
    padding-right: 2.6rem;
}

.show-password-input {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    background: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
    border: 0;
    cursor: pointer;
    appearance: none;
}

.show-password-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2359635c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

.show-password-input.display-password {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2359635c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M4 4l16 16'/%3E%3C/svg%3E");
}

/* Dashboard: nav sidebar + content pane as matching cards. */
.woocommerce-account .woocommerce-MyAccount-navigation {
    padding: var(--hts-space-4);
    background: var(--hts-surface);
    border: 1px solid var(--hts-border);
    border-radius: var(--hts-radius-lg);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link a {
    display: block;
    padding: 0.7rem 0.9rem;
    color: var(--hts-text-muted);
    text-decoration: none;
    border-radius: var(--hts-radius-sm);
    font-weight: 600;
    font-size: 0.92rem;
    transition: background-color 140ms ease, color 140ms ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link a:hover {
    color: var(--hts-ink);
    background: var(--hts-surface-dim);
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a {
    color: var(--hts-danger);
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a:hover {
    color: var(--hts-danger);
    background: var(--hts-danger-bg);
}

.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a {
    color: var(--hts-surface);
    background: var(--hts-blue);
}

.woocommerce-account .woocommerce-MyAccount-content {
    padding: var(--hts-space-6);
    background: var(--hts-surface);
    border: 1px solid var(--hts-border);
    border-radius: var(--hts-radius-lg);
}

.woocommerce-account .woocommerce-MyAccount-content > p:first-child {
    margin-top: 0;
}

.woocommerce-account .woocommerce-MyAccount-content mark {
    padding: 0.05em 0.3em;
    background: var(--hts-surface-dim);
    color: var(--hts-ink);
    border-radius: 3px;
}

/* Orders table */
.woocommerce-account table.woocommerce-orders-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.woocommerce-account table.woocommerce-orders-table th {
    padding: 0.7rem 0.6rem;
    color: var(--hts-text-muted);
    text-align: left;
    border-bottom: 2px solid var(--hts-border);
    font-size: 0.76rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.woocommerce-account table.woocommerce-orders-table td {
    padding: 0.8rem 0.6rem;
    border-bottom: 1px solid var(--hts-border-fine);
}

.woocommerce-account table.woocommerce-orders-table .woocommerce-orders-table__cell-order-status mark {
    padding: 0.25em 0.6em;
    background: var(--hts-surface-dim);
    border-radius: var(--hts-radius-pill);
    font-weight: 700;
    font-size: 0.78rem;
}

.woocommerce-account table.woocommerce-orders-table .order-status.status-completed {
    color: var(--hts-success);
    background: var(--hts-success-bg);
}

.woocommerce-account table.woocommerce-orders-table .order-status.status-processing,
.woocommerce-account table.woocommerce-orders-table .order-status.status-on-hold {
    color: var(--hts-warning);
    background: var(--hts-warning-bg);
}

.woocommerce-account table.woocommerce-orders-table .order-status.status-cancelled,
.woocommerce-account table.woocommerce-orders-table .order-status.status-failed {
    color: var(--hts-danger);
    background: var(--hts-danger-bg);
}

.woocommerce-account table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions a.button {
    min-height: auto;
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
}

/* Addresses */
.woocommerce-account .woocommerce-Addresses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--hts-space-5);
}

/*
 * The markup order is label → action-link → message
 * (`<header><h2>Titlu</h2><a class="edit">Adaugă/Editează</a></header>
 * <address>mesaj</address>`) — read top to bottom that puts the action
 * BEFORE the explanation of why you'd want to take it, and the "Adaugă…"
 * link sits inline with the heading at the same small size, so it never
 * reads as a clickable action at all. `display: contents` on the header
 * dissolves it as a box (its own children become direct flex items of the
 * card below) so all three pieces can be reordered into a clear pattern:
 * small label → the actual message (the main thing to read) → a real
 * button at the end, matching this site's own hero card ("OFERTA
 * SĂPTĂMÂNII" small eyebrow → content → CTA button).
 */
.woocommerce-account .woocommerce-Address {
    /* Same WC core float/width-48% override as the login/register cards
       above — these boxes carry the same legacy .u-column1/.u-column2
       classes, so they need the same !important escape. */
    float: none !important;
    width: auto !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--hts-space-3);
    padding: var(--hts-space-5);
    background: var(--hts-surface-dim);
    border: 1px solid var(--hts-border);
    border-radius: var(--hts-radius-md);
}

.woocommerce-account .woocommerce-Address-title {
    display: contents;
}

.woocommerce-account .woocommerce-Address-title h2 {
    order: 1;
    margin: 0;
    color: var(--hts-text-muted);
    font-family: var(--hts-font-ui);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.woocommerce-account .woocommerce-Address address {
    order: 2;
    color: var(--hts-ink);
    font-style: normal;
    font-size: 0.94rem;
    line-height: 1.6;
}

.woocommerce-account .woocommerce-Address .edit,
.woocommerce-account .woocommerce-Address-title a {
    order: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: var(--hts-space-2);
    padding: 0.55rem 1rem;
    color: var(--hts-blue);
    background: var(--hts-surface);
    border: 1px solid var(--hts-border-control);
    border-radius: var(--hts-radius-sm);
    font-weight: 700;
    font-size: 0.84rem;
    text-decoration: none;
}

.woocommerce-account .woocommerce-Address .edit:hover,
.woocommerce-account .woocommerce-Address-title a:hover {
    color: var(--hts-surface);
    background: var(--hts-blue);
    border-color: var(--hts-blue);
}

/* Edit account — "Schimbare parolă" fieldset as a card, not the browser default. */
.woocommerce-account fieldset {
    padding: var(--hts-space-5);
    margin: var(--hts-space-5) 0;
    background: var(--hts-surface-dim);
    border: 1px solid var(--hts-border);
    border-radius: var(--hts-radius-md);
}

.woocommerce-account fieldset legend {
    padding: 0 0.4rem;
    color: var(--hts-ink);
    font-weight: 700;
    font-size: 0.9rem;
}

/* ---------------------------------------------------------------------- */
/* Task 016 — zone de atingere și lizibilitate pe ecrane mici              */
/* ---------------------------------------------------------------------- */

/*
 * Ținta minimă de atingere este 44px. Controalele de mai jos veneau sub ea:
 * rândurile de filtre (24px), stepperul de cantitate din coș (26px), lupa
 * galeriei (36px) și linkul de editare a adresei din checkout (18px).
 */
.catalog-filters__check,
.catalog-filters__option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
}

.catalog-filters__check input[type="checkbox"],
.catalog-filters__option input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

/* Specificitatea urmează regula WooCommerce core, altfel rămâne la 36px. */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
}

.catalog-filters__reset {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* Casetele de bifare din checkout-ul Woo Blocks au doar 20px. */
.wc-block-components-checkbox label,
.wc-block-components-checkbox__label {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.hightech-breadcrumb a {
    display: inline-block;
    padding-block: 0.8rem;
}

/* Titlul cardului e ținta principală din listare, nu doar imaginea. */
.product-card__title a,
.woocommerce ul.products li.product .woocommerce-loop-product__title a {
    display: inline-block;
    padding-block: 0.4rem;
}

/* Linkurile scurte din fișa de produs: brand, categorie, specificații. */
.product-key-specs__link,
.woocommerce div.product .product_meta a,
.woocommerce div.product .product-brand a,
.woocommerce div.product .posted_in a {
    display: inline-block;
    padding-block: 0.7rem;
}

/* Specificitatea urmează Woo Blocks, altfel butoanele rămân la 30px lățime. */
.wc-block-components-quantity-selector button.wc-block-components-quantity-selector__button,
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
    min-width: 44px;
    min-height: 44px;
}

.wc-block-components-product-name {
    display: inline-block;
    padding-block: 0.3rem;
}

.wc-block-components-address-card__edit {
    display: inline-block;
    padding-block: 0.5rem;
}

/* Ștergerea unui produs e un buton de 24px în Woo Blocks. */
.wc-block-cart-item__remove-link,
button.wc-block-cart-item__remove-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

/* Sub 12px eticheta de reducere din coș devine greu de citit pe mobil. */
.wc-block-components-sale-badge {
    font-size: 12px;
}

/* ---------------------------------------------------------------------- */
/* Task 016 — breadcrumb pe fișa de produs (spec 009 §2 „PDP desktop")     */
/* ---------------------------------------------------------------------- */

.hightech-breadcrumb {
    margin-bottom: var(--hts-space-5);
    color: var(--hts-muted);
    font-family: var(--hts-font-ui);
    font-size: 13px;
}

.hightech-breadcrumb a {
    color: var(--hts-muted);
    text-decoration: none;
}

.hightech-breadcrumb a:hover,
.hightech-breadcrumb a:focus-visible {
    color: var(--hts-blue);
    text-decoration: underline;
}

.hightech-breadcrumb .hightech-breadcrumb__sep {
    margin-inline: 0.45rem;
    color: var(--hts-border);
}