/* =====================================================================
   FASHION / boutique storefront template  (body.tpl-fashion)
   ---------------------------------------------------------------------
   Editorial, image-forward apparel look inspired by a clean boutique:
   generous whitespace, a near-monochrome palette with ONE warm accent,
   large PORTRAIT imagery, refined typography, a strong dark add-to-bag.
   Every selector is scoped under body.tpl-fashion so it only affects
   this template. Restyles BOTH the product detail and the grid/cards.
   ===================================================================== */

body.tpl-fashion {
    /* near-monochrome editorial palette; --mu-gold stays the single accent */
    --fsh-ink: #14110e;
    --fsh-soft: #6b655d;
    --fsh-line: #e7e3dc;
    --fsh-paper: #faf8f5;
    --fsh-cloth: #f1ede7;
    background: #ffffff;
    color: var(--fsh-ink);
    letter-spacing: .002em;
}

/* ---- typographic tone: lighter, more editorial headings ---- */
body.tpl-fashion .mu-section-title,
body.tpl-fashion h1, body.tpl-fashion h2, body.tpl-fashion h3 {
    color: var(--fsh-ink);
    font-weight: 600;
    letter-spacing: -.01em;
}

/* =====================================================================
   DETAIL LAYOUT
   ===================================================================== */
body.tpl-fashion .fsh-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(var(--s5), 4vw, 64px);
    align-items: start;
}

/* ---- large PORTRAIT gallery (3:4) ---- */
body.tpl-fashion .fsh-gallery { position: sticky; top: 84px; }
body.tpl-fashion .fsh-gallery .pd-main-img {
    aspect-ratio: 3 / 4;
    border-radius: 2px;
    border: 1px solid var(--fsh-line);
    background: var(--fsh-cloth);
}
body.tpl-fashion .fsh-gallery .pd-main-img img { object-fit: cover; }
body.tpl-fashion .fsh-gallery .pd-thumbs { gap: var(--s2); margin-top: var(--s2); }
body.tpl-fashion .fsh-gallery .pd-thumb {
    width: 64px; height: 84px;          /* portrait thumbs */
    border-radius: 2px;
    border: 1px solid var(--fsh-line);
    background: var(--fsh-cloth);
}
body.tpl-fashion .fsh-gallery .pd-thumb.is-active { border-color: var(--fsh-ink); }

/* ---- panel ---- */
body.tpl-fashion .fsh-panel { padding-top: var(--s2); }

body.tpl-fashion .fsh-eyebrow {
    font-size: var(--fz-xs);
    text-transform: uppercase;
    letter-spacing: .22em;
    color: var(--fsh-soft);
    margin-bottom: var(--s3);
}

body.tpl-fashion .fsh-title {
    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
    font-weight: 500;
    letter-spacing: -.015em;
    line-height: 1.15;
    margin: 0 0 var(--s4);
    color: var(--fsh-ink);
}

body.tpl-fashion .fsh-price-row {
    display: flex; align-items: baseline; gap: var(--s4);
    margin: 0 0 var(--s4);
    padding-bottom: var(--s4);
    border-bottom: 1px solid var(--fsh-line);
}
body.tpl-fashion .fsh-price {
    font-size: 1.5rem; font-weight: 600; color: var(--fsh-ink);
    letter-spacing: -.01em;
}
body.tpl-fashion .fsh-price--sm { font-size: 1.1rem; }
body.tpl-fashion .fsh-cur {
    font-size: .7em; font-weight: 600; color: var(--fsh-soft);
    margin-right: 4px;
}
body.tpl-fashion .fsh-avail {
    font-size: var(--fz-xs); text-transform: uppercase; letter-spacing: .12em;
    color: var(--fsh-soft); display: inline-flex; align-items: center; gap: 6px;
}
body.tpl-fashion .fsh-avail::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: #2f9e5e;
}
body.tpl-fashion .fsh-avail--out { color: #b4453a; }
body.tpl-fashion .fsh-avail--out::before { background: #b4453a; }

body.tpl-fashion .fsh-colourline {
    font-size: var(--fz-sm); color: var(--fsh-soft); margin: 0 0 var(--s4);
}
body.tpl-fashion .fsh-colourline strong { color: var(--fsh-ink); font-weight: 600; }

/* ---- visual size chips (decorative chooser, no backend) ---- */
body.tpl-fashion .fsh-sizes { margin: 0 0 var(--s5); }
body.tpl-fashion .fsh-sizes__head {
    display: flex; justify-content: space-between; align-items: center;
    font-size: var(--fz-xs); text-transform: uppercase; letter-spacing: .12em;
    color: var(--fsh-soft); margin-bottom: var(--s3);
}
body.tpl-fashion .fsh-sizeguide {
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
    letter-spacing: .06em;
}
body.tpl-fashion .fsh-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
body.tpl-fashion .fsh-chip {
    min-width: 52px; height: 44px; padding: 0 14px;
    border: 1px solid var(--fsh-line);
    background: #fff; color: var(--fsh-ink);
    font-size: var(--fz-sm); font-weight: 500; letter-spacing: .04em;
    border-radius: 2px; cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
body.tpl-fashion .fsh-chip:hover { border-color: var(--fsh-soft); }
body.tpl-fashion .fsh-chip.is-active {
    border-color: var(--fsh-ink); background: var(--fsh-ink); color: #fff;
}
body.tpl-fashion .fsh-chip:focus-visible { outline: none; box-shadow: var(--sh-focus); }

/* ---- buy box ---- */
body.tpl-fashion .fsh-buybox {
    padding: 0; margin: 0 0 var(--s6);
    background: transparent; border: 0; box-shadow: none;
}
body.tpl-fashion .fsh-buyform { margin: 0; }
body.tpl-fashion .fsh-buy-actions {
    display: flex; align-items: stretch; gap: var(--s3); flex-wrap: wrap;
}

/* squared quantity stepper to match the editorial chrome */
body.tpl-fashion .fsh-qty {
    border: 1px solid var(--fsh-line); border-radius: 2px;
    flex: 0 0 auto;
}
body.tpl-fashion .fsh-qty button {
    background: #fff; color: var(--fsh-ink); border: 0; width: 44px;
}
body.tpl-fashion .fsh-qty button:hover { background: var(--fsh-cloth); }
body.tpl-fashion .fsh-qty input { border: 0; color: var(--fsh-ink); font-weight: 600; }

/* the dark Add-to-bag — the single strong action */
body.tpl-fashion .fsh-btn-bag {
    flex: 1; min-width: 200px;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    height: 46px; padding: 0 var(--s5);
    background: var(--fsh-ink); color: #fff;
    border: 1px solid var(--fsh-ink); border-radius: 2px;
    font-size: var(--fz-sm); font-weight: 600;
    text-transform: uppercase; letter-spacing: .12em;
    cursor: pointer; transition: background .18s ease, transform .05s ease;
}
body.tpl-fashion .fsh-btn-bag:hover { background: #2a241d; }
body.tpl-fashion .fsh-btn-bag:active { transform: translateY(1px); }
body.tpl-fashion .fsh-btn-bag.is-disabled,
body.tpl-fashion .fsh-btn-bag[disabled] {
    background: var(--fsh-cloth); color: var(--fsh-soft);
    border-color: var(--fsh-line); cursor: not-allowed; letter-spacing: .12em;
}
body.tpl-fashion .fsh-out-note {
    font-size: var(--fz-sm); color: var(--fsh-soft); margin: 0 0 var(--s3);
}

body.tpl-fashion .fsh-btn-ghost {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: var(--s4);
    font-size: var(--fz-sm); color: var(--fsh-soft);
    text-decoration: none; letter-spacing: .04em;
}
body.tpl-fashion .fsh-btn-ghost:hover { color: var(--fsh-ink); }

/* ---- text blocks: styling notes + material/care ---- */
body.tpl-fashion .fsh-block {
    border-top: 1px solid var(--fsh-line);
    padding: var(--s5) 0 0; margin: 0 0 var(--s5);
}
body.tpl-fashion .fsh-block__title {
    font-size: var(--fz-xs); text-transform: uppercase; letter-spacing: .18em;
    color: var(--fsh-soft); font-weight: 600; margin: 0 0 var(--s4);
}
body.tpl-fashion .fsh-desc {
    line-height: 1.75; color: #36312b; font-size: var(--fz-base);
}
body.tpl-fashion .fsh-desc p { margin: 0 0 var(--s3); }

body.tpl-fashion .fsh-care { margin: 0; }
body.tpl-fashion .fsh-care__row {
    display: grid; grid-template-columns: 130px 1fr;
    gap: var(--s4); padding: 10px 0;
    border-bottom: 1px solid var(--fsh-line);
    font-size: var(--fz-sm);
}
body.tpl-fashion .fsh-care__row:last-child { border-bottom: 0; }
body.tpl-fashion .fsh-care dt {
    color: var(--fsh-soft); text-transform: uppercase;
    letter-spacing: .08em; font-size: var(--fz-xs); margin: 2px 0 0;
}
body.tpl-fashion .fsh-care dd { margin: 0; color: var(--fsh-ink); font-weight: 500; }

/* ---- related ---- */
body.tpl-fashion .fsh-related { margin-top: var(--s6); }
body.tpl-fashion .fsh-related__title {
    font-size: 1.3rem; font-weight: 500; letter-spacing: -.01em;
    text-align: center; margin: 0 0 var(--s5);
}

/* ---- specs tabs / cards: flatten the boxed look into the editorial tone ---- */
body.tpl-fashion .pd-specstrip .cell,
body.tpl-fashion .mu-card {
    border-color: var(--fsh-line);
}

/* =====================================================================
   PRODUCT GRID + CARDS (the shop listing page)
   tall portrait images, minimal text, hover lift, ~3–4 per row
   ===================================================================== */
body.tpl-fashion .mu-grid {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: clamp(var(--s4), 2.4vw, var(--s6)) clamp(var(--s4), 2vw, var(--s5));
}

body.tpl-fashion .mu-product-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    transition: transform .22s ease;
}
body.tpl-fashion .mu-product-card:hover { transform: translateY(-6px); }

/* tall PORTRAIT image */
body.tpl-fashion .mu-product-card__media {
    aspect-ratio: 3 / 4;
    border-radius: 2px;
    background: var(--fsh-cloth);
    border: 1px solid var(--fsh-line);
    overflow: hidden;
}
body.tpl-fashion .mu-product-card__media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .6s cubic-bezier(.2,.6,.2,1);
}
body.tpl-fashion .mu-product-card:hover .mu-product-card__media img { transform: scale(1.04); }

/* minimal text body */
body.tpl-fashion .mu-product-card__body { padding: var(--s3) 2px 0; }
body.tpl-fashion .mu-product-card__code,
body.tpl-fashion .mu-product-card .mu-stars { display: none; }

body.tpl-fashion .mu-product-card__name {
    font-size: var(--fz-sm);
    font-weight: 500;
    color: var(--fsh-ink);
    letter-spacing: .01em;
    line-height: 1.35;
    margin: 0 0 6px;
}
body.tpl-fashion .mu-product-card__name:hover { color: var(--fsh-soft); }

body.tpl-fashion .mu-product-card__store {
    font-size: var(--fz-xs); color: var(--fsh-soft); margin-bottom: 4px;
}

body.tpl-fashion .mu-product-card__meta {
    display: flex; align-items: center; gap: var(--s3);
    margin: 0; padding: 0; border: 0;
}
body.tpl-fashion .mu-product-card__meta .mu-price {
    font-size: var(--fz-base); font-weight: 600; color: var(--fsh-ink);
}
body.tpl-fashion .mu-product-card__meta .mu-price__cur {
    font-size: .72em; color: var(--fsh-soft); margin-right: 3px;
}
/* keep stock status quiet — a small label, not a loud pill */
body.tpl-fashion .mu-product-card__meta .mu-pill {
    background: transparent; border: 0; padding: 0;
    font-size: var(--fz-xs); letter-spacing: .08em; text-transform: uppercase;
    color: var(--fsh-soft);
}
body.tpl-fashion .mu-product-card__meta .mu-pill--out { color: #b4453a; }

/* actions: appear on hover, dark bag button to match the detail */
body.tpl-fashion .mu-product-card__actions {
    margin-top: var(--s3);
    opacity: 0; transform: translateY(4px);
    transition: opacity .2s ease, transform .2s ease;
}
body.tpl-fashion .mu-product-card:hover .mu-product-card__actions,
body.tpl-fashion .mu-product-card:focus-within .mu-product-card__actions {
    opacity: 1; transform: none;
}
body.tpl-fashion .mu-product-card__actions form { flex: 1; }
body.tpl-fashion .mu-product-card__actions .mu-btn {
    border-radius: 2px;
    font-size: var(--fz-xs);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 600;
}
body.tpl-fashion .mu-product-card__actions .mu-btn--gold {
    background: var(--fsh-ink); color: #fff; border-color: var(--fsh-ink);
}
body.tpl-fashion .mu-product-card__actions .mu-btn--gold:hover { background: #2a241d; }
body.tpl-fashion .mu-product-card__actions .mu-btn--ghost {
    border-color: var(--fsh-line); color: var(--fsh-ink);
}
body.tpl-fashion .mu-product-card__actions .mu-btn--ghost:hover {
    background: var(--fsh-cloth); border-color: var(--fsh-soft);
}

/* on touch / no-hover devices keep actions visible (no hover to reveal) */
@media (hover: none) {
    body.tpl-fashion .mu-product-card__actions { opacity: 1; transform: none; }
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 768px) {
    body.tpl-fashion .fsh-grid { grid-template-columns: 1fr; gap: var(--s5); }
    body.tpl-fashion .fsh-gallery { position: static; }
    body.tpl-fashion .fsh-title { font-size: 1.45rem; }
    body.tpl-fashion .mu-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s4); }
    body.tpl-fashion .fsh-btn-bag { min-width: 0; }
}