/* =====================================================================
 * web/css/web.css
 *
 * ONLY what the design in templete-for-website/ does not already have.
 *
 * The four vendor/design stylesheets are loaded before this one and are not
 * modified:
 *     style.css            the design system
 *     products.css         the listing screens
 *     product.css          the product detail screen
 *     responsive.css       breakpoints
 *
 * Everything here is written in the design's own tokens - var(--brand),
 * var(--ink), var(--line), var(--r-lg), var(--ease) and the rest - so the
 * additions cannot drift away from the design when a token changes. There
 * are no hard-coded colours below except inside the state pages, which are
 * deliberately a different surface and are explained where they appear.
 *
 * WHAT IS IN HERE
 *   1. The four site states: coming soon, maintenance, 404, not configured.
 *   2. The 30-day launch timeline.
 *   3. The language switcher.
 *   4. The contact form, the honeypot and the map frame.
 *   5. Small gaps the design's screens need but do not style.
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * THE LANGUAGE SWITCHER - REMOVED
 *
 * These rules styled a control that no longer exists. It was the last item
 * in the utility bar and in the footer's contact column, and it is gone with
 * the rest of the language system: the site has one language, so it offered
 * a choice between two sets of words and the second set was never complete.
 *
 * The rules are deleted rather than commented out. A stylesheet that carries
 * a selector nothing renders is a selector the next person has to work out
 * whether something is still using it - and "is the switcher coming back?"
 * is a question answered by the markup, not by a block of CSS.
 * ------------------------------------------------------------------ */

/* =====================================================================
 * THE FOUR SITE STATES
 *
 * These are not the shop. They are a different kind of page - a notice -
 * so they do not pretend to be the shop. But they are still the same brand
 * on the same tokens, and they are still useful pages rather than excuses.
 *
 * The shared shell is .wc-state; each state adds one block.
 * ===================================================================== */
.wc-state {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(1200px 480px at 50% -10%, var(--brand-soft) 0%, transparent 65%),
        var(--surface);
    color: var(--ink);
}

.wc-state__head {
    padding: 18px 0;
}
.wc-state__head .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.wc-state__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--ink);
    font-weight: 700;
}
.wc-state__brand img { max-height: 38px; width: auto; }

.wc-state__body {
    flex: 1;
    display: flex;
    align-items: center;
    padding: clamp(1rem, 4vw, 3rem) 0 clamp(2rem, 6vw, 4rem);
}
.wc-state__panel {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.wc-state__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand-darker);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.wc-state__eyebrow .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-ring);
}

.wc-state__icon {
    width: 96px; height: 96px;
    margin: 22px auto 20px;
    border-radius: 28px;
    display: grid; place-items: center;
    font-size: 38px;
    background: var(--brand-soft);
    color: var(--brand-darker);
    border: 1px solid rgba(114, 191, 68, .28);
}
/* A soft pulse, because "coming soon" should feel like something is in
   flight. Disabled for anyone who asked for less motion - and the design's
   own [data-reveal] convention says the same thing. */
@media (prefers-reduced-motion: no-preference) {
    .wc-state__icon--pulse { animation: wc-pulse 2.8s var(--ease) infinite; }
}
@keyframes wc-pulse {
    0%, 100% { transform: scale(1);     box-shadow: 0 0 0 0 rgba(114, 191, 68, .30); }
    50%      { transform: scale(1.035); box-shadow: 0 0 0 18px rgba(114, 191, 68, 0); }
}

.wc-state__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.7rem, 1.1rem + 3vw, 2.9rem);
    line-height: 1.18;
    letter-spacing: -.02em;
    margin: 0 0 14px;
}
.wc-state__title em { font-style: normal; color: var(--brand-darker); }

.wc-state__lead {
    max-width: 58ch;
    margin: 0 auto 22px;
    color: var(--ink-500);
    font-size: var(--fs-lg);
    line-height: 1.65;
}

.wc-state__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 26px;
}

.wc-state__foot {
    border-top: 1px solid var(--line-soft);
    padding: 22px 0 30px;
    background: var(--surface-mute);
}
.wc-state__foot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px 26px;
    text-align: left;
}
.wc-state__foot-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: var(--fs-sm);
    color: var(--ink-600);
}
.wc-state__foot-item i { color: var(--brand); margin-top: 3px; }
.wc-state__foot-item strong {
    display: block;
    color: var(--ink);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 2px;
}
.wc-state__foot-item a { color: var(--ink-600); text-decoration: none; }
.wc-state__foot-item a:hover { color: var(--brand-darker); }

.wc-state__legal {
    margin-top: 20px;
    font-size: var(--fs-xs);
    color: var(--ink-400);
}

/* =====================================================================
 * THE COUNTDOWN AND THE 30-DAY TIMELINE
 *
 * The user asked for a 30-day timeline. What is drawn here is:
 *
 *   - one big number: days remaining
 *   - a progress track
 *   - a strip of one marker per day
 *
 * WHY THE MARKERS ARE SERVER-RENDERED AND NOT A JAVASCRIPT COUNTDOWN
 *   A countdown that ticks only works with JavaScript, and a page that is
 *   only meaningful with JavaScript is a page that says "0 days" to a
 *   crawler and to anyone whose script is blocked. The numbers are computed
 *   in PHP from the stored launch date, so they are right on first paint.
 *   The small script below only refreshes the number once a minute for a
 *   visitor who leaves the tab open - it is an enhancement, and the page is
 *   complete without it.
 *
 * WHEN NO LAUNCH DATE IS SET
 *   The window is 30 days from today. A date an operator has to invent is
 *   either wrong or never entered, and "29 days remaining" for ever is
 *   worse than an honest progress bar.
 * ===================================================================== */
.wc-count {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    padding: 14px 26px;
    border-radius: var(--r-xl);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: 0 10px 30px -22px rgba(24, 24, 27, .35);
}
.wc-count__num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.2rem, 1.4rem + 4vw, 3.4rem);
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--brand-darker);
    font-variant-numeric: tabular-nums;
}
.wc-count__unit {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-500);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.wc-count--over { border-color: var(--brand); background: var(--brand-soft); }

.wc-track {
    position: relative;
    height: 8px;
    margin: 26px 0 10px;
    border-radius: 999px;
    background: var(--line-soft);
    overflow: hidden;
}
.wc-track__fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--pct, 0%);
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand), var(--brand-dark));
    transition: width .6s var(--ease);
}

.wc-days {
    list-style: none;
    margin: 0;
    padding: 0 2px;
    display: flex;
    justify-content: space-between;
    gap: 2px;
}
.wc-days__dot {
    flex: 1 1 0;
    min-width: 4px;
    height: 26px;
    border-radius: 4px;
    background: var(--line-soft);
    position: relative;
}
/* Days already behind us. */
.wc-days__dot.is-done { background: var(--brand-soft); }
/* Today. The only marker with a ring, so the eye finds it in one pass. */
.wc-days__dot.is-today {
    background: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-ring);
    transform: scaleY(1.35);
}
/* The day it opens. */
.wc-days__dot.is-launch {
    background: var(--ink);
    box-shadow: 0 0 0 3px rgba(24, 24, 27, .14);
    transform: scaleY(1.35);
}
@media (prefers-reduced-motion: reduce) {
    .wc-days__dot, .wc-track__fill { transition: none; animation: none; }
}

.wc-legend {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    font-size: var(--fs-xs);
    color: var(--ink-500);
}
.wc-legend span { display: inline-flex; align-items: center; gap: 7px; }
.wc-legend i {
    width: 10px; height: 10px; border-radius: 3px; background: var(--line-soft);
    display: inline-block;
}
.wc-legend i.is-today   { background: var(--brand); }
.wc-legend i.is-launch  { background: var(--ink); }
.wc-legend i.is-done    { background: var(--brand-soft); }

/* =====================================================================
 * THE 404
 *
 * A large number is the whole design of this page. It is the one screen
 * where the biggest type on the site is the right call.
 * ===================================================================== */
.wc-404__num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(4.5rem, 3rem + 14vw, 11rem);
    line-height: .92;
    letter-spacing: -.05em;
    color: var(--brand-soft);
    -webkit-text-stroke: 2px var(--brand);
    margin-bottom: -6px;
    user-select: none;
}

/* =====================================================================
 * MAINTENANCE PASSWORD BOX
 * ===================================================================== */
.wc-unlock {
    max-width: 420px;
    margin: 26px auto 0;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    background: var(--surface);
    text-align: left;
}
.wc-unlock .form-label { font-weight: 600; font-size: var(--fs-sm); }
.wc-unlock__note {
    margin-top: 12px;
    font-size: var(--fs-xs);
    color: var(--ink-400);
    text-align: center;
}

/* =====================================================================
 * CONTACT FORM
 *
 * The design styles form-control and btn; what it does not have is a
 * contact screen, so the layout and the small print are added here.
 * ===================================================================== */
.wc-form__grid { row-gap: 14px; }
.wc-form .form-label { font-weight: 600; font-size: var(--fs-sm); color: var(--ink-700, var(--ink-600)); }
.wc-form .form-control,
.wc-form .form-select {
    border-radius: var(--r-md);
    border-color: var(--line);
    padding: 11px 14px;
}
.wc-form .form-control:focus,
.wc-form .form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-ring);
}
.wc-form__hint {
    display: block;
    margin-top: 5px;
    font-size: var(--fs-xs);
    color: var(--ink-400);
}
.wc-form__note {
    margin-top: 14px;
    font-size: var(--fs-xs);
    color: var(--ink-400);
}

/* THE HONEYPOT.
   Hidden three ways, because one is not enough: display:none is skipped by a
   bot that reads the CSS, position:off-screen is skipped by one that reads
   the geometry, and tabindex="-1" keeps it away from the keyboard. A person
   never fills it; a bot fills everything. */
.wc-hp {
    position: absolute !important;
    left: -9999px !important;
    top: auto;
    width: 1px; height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.wc-contact__aside {
    background: var(--surface-soft);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-xl);
    padding: 26px;
}
.wc-contact__list { list-style: none; margin: 0; padding: 0; }
.wc-contact__list li {
    display: flex;
    gap: 13px;
    padding: 13px 0;
    border-bottom: 1px solid var(--line-soft);
}
.wc-contact__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.wc-contact__list i { color: var(--brand); margin-top: 4px; flex: 0 0 auto; }
.wc-contact__list strong {
    display: block;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink-400);
    margin-bottom: 3px;
}
.wc-contact__list a { color: var(--ink); text-decoration: none; }
.wc-contact__list a:hover { color: var(--brand-darker); }
.wc-contact__list span { color: var(--ink-600); font-size: var(--fs-sm); }

/* The map. Google forbids framing in a bare iframe on some plans, so the
   frame is only offered when the operator supplied a real embed URL. */
.wc-map {
    width: 100%;
    height: 340px;
    border: 0;
    border-radius: var(--r-lg);
    margin-top: 18px;
    display: block;
}

/* =====================================================================
 * NOT CONFIGURED
 *
 * A developer-only page, but shown in the design rather than as a stack
 * trace - the person seeing it during setup is the person who has to fix
 * it, and a plain-language page with a link is faster than an error id.
 * ===================================================================== */
.wc-dev-note {
    margin-top: 22px;
    padding: 16px 18px;
    border: 1px dashed var(--line);
    border-radius: var(--r-lg);
    background: var(--surface-mute);
    text-align: left;
    font-size: var(--fs-sm);
    color: var(--ink-500);
}
.wc-dev-note code {
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 1px 6px;
    font-size: var(--fs-xs);
    color: var(--ink-800);
}

/* =====================================================================
 * SMALL GAPS THE DESIGN'S SCREENS LEAVE
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * THE LISTING PAGE'S THREE BANDS
 *
 * Nothing here. products.css already styles .page-head (a pale strip with a
 * bottom rule), .page-title-row (a white strip with its own padding and its
 * own bottom rule) and .listing (top and bottom padding), and products.html
 * stacks them on <main> with a .container inside each.
 *
 * This file used to carry `.page-head { margin-bottom: 22px; }` - a patch
 * for a structure that was wrong rather than for a gap in the design. The
 * title band was nested inside section.section-tight > .container, so the
 * white band stopped at the content edge, and the 22px was standing in for
 * the strip that should have been there. products.php and category.php now
 * print the three bands the design prints, and the declaration is gone: with
 * it still in place there would be a 22px hole of page background between
 * two strips that are meant to touch.
 * ------------------------------------------------------------------ */

/* The count badge on the mobile filter button. */
.badge {
    display: inline-grid;
    place-items: center;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

/* The results bar sits between the filter panel and the grid. */
.wc-results {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    color: var(--ink-500);
    font-size: var(--fs-sm);
}

/* The slide strip and the rails both need a little air under the heading. */
.wc-rail { padding-bottom: 6px; }

/* Bengali needs a little more line height than Inter at the same size -
   the matras sit above and below the line and the Latin default clips them
   on some screens. */
html[lang="bn"] body { line-height: 1.85; }
html[lang="bn"] .wc-state__lead,
html[lang="bn"] .wc-state__title { line-height: 1.5; }
html[lang="bn"] .btn { letter-spacing: 0; }

/* =====================================================================
 * RESPONSIVE
 *
 * Two breakpoints, matching the design's own. Written rather than added to
 * responsive.css so this file stays additive and the design's own file is
 * left exactly as it was found.
 * ===================================================================== */
@media (max-width: 991.98px) {
    .wc-state__body { padding-top: 10px; }
    .wc-days__dot { height: 20px; }
}
@media (max-width: 575.98px) {
    .wc-count { padding: 12px 18px; }
    .wc-days__dot { min-width: 3px; border-radius: 3px; }
    .wc-state__icon { width: 76px; height: 76px; font-size: 30px; border-radius: 22px; }
    .wc-state__actions .btn { width: 100%; justify-content: center; }
    .wc-unlock { padding: 18px; }
}
@media print {
    .wc-state { background: #fff; }
    .wc-count__num, .wc-404__num { color: #000; -webkit-text-stroke: 0; }
}
/* =====================================================================
 * GAPS THE DESIGN'S OWN STYLESHEETS LEAVE
 *
 * Each one below is a class this site uses that no vendor stylesheet
 * defines. They are written in the design's own tokens so they look like
 * part of it rather than something bolted on.
 *
 * Every one of these was found by listing the class names the markup uses
 * and subtracting the ones the stylesheets actually define. Inventing a name
 * that no stylesheet has is the quiet way to ship an unstyled page: nothing
 * errors, the layout is simply wrong, and it looks deliberate.
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * .btn-outline
 *
 * THE TEMPLATE USES IT AND NOBODY STYLED IT.
 *   templete-for-website/index.html has
 *       <a class="btn btn-outline" href="products.html">
 *   and .btn-outline appears in no stylesheet, so every "see everything"
 *   and "clear filters" button on the site rendered as a solid neutral .btn
 *   - a filled block where the design clearly intended an outline. The class
 *   is kept, because it is in the markup, and given the obvious outline the
 *   name asks for.
 *
 *   Built from the same tokens as .btn-outline-ink so the two do not drift.
 * ------------------------------------------------------------------ */
.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: transparent;
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .18s var(--ease), color .18s var(--ease),
                background .18s var(--ease);
}
.btn-outline:hover,
.btn-outline:focus-visible {
    border-color: var(--brand);
    color: var(--brand-darker);
    background: var(--brand-soft);
}
.btn-outline:disabled,
.btn-outline.is-disabled {
    opacity: .5;
    pointer-events: none;
}
.btn-outline.btn-sm { padding: 8px 14px; font-size: var(--fs-xs); }

/* ---------------------------------------------------------------------
 * THE HERO SCRIM
 *
 * WHY A NEW CLASS AND NOT ONE ON THE <img>
 *   The design puts its own gradient on .hero-slide__body, so a caption over
 *   a pale photograph is already readable. tbl_web_banner.wb_overlay lets an
 *   operator choose 'light', 'dark' or 'no', and the previous version of
 *   index.php emitted class="hero__img hero__img--dark" on the <img> - a
 *   class no stylesheet defines. The setting therefore did nothing at all,
 *   which is worse than not offering it: an operator picked "dark" and got
 *   the same slide as somebody who picked "no".
 *
 *   Here the modifier sits on the .hero-slide, which is already
 *   position:relative, and adds one flat layer over the whole picture. It is
 *   deliberately flat rather than a gradient: the caption already has one,
 *   and stacking two gradients is how a hero ends up black.
 *
 *   z-index matters: the caption is positioned, so without lifting it above
 *   this layer the scrim would sit on top of the text and grey it out.
 * ------------------------------------------------------------------ */
.hero-slide--dark::before,
.hero-slide--light::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.hero-slide--dark::before  { background: rgba(9, 9, 11, .48); }
.hero-slide--light::before { background: rgba(255, 255, 255, .34); }

.hero-slide--dark .hero-slide__body,
.hero-slide--light .hero-slide__body {
    z-index: 2;
}
/* A light scrim darkens the picture but the caption is white, so the light
   variant needs a stronger body gradient to keep the text readable. */
.hero-slide--light .hero-slide__body {
    background: linear-gradient(to top, rgba(9, 9, 11, .92) 8%, rgba(9, 9, 11, .72) 55%, transparent 100%);
}

/* ---------------------------------------------------------------------
 * THE LISTING COLUMN
 *
 * products.css defines .listing__grid as a two-column grid. The second
 * column has no class of its own in the design - it is just the grid's other
 * child - so this adds a name to hang the min-width:0 on. Without it a long
 * product name in the toolbar can push the grid wider than its container.
 * ------------------------------------------------------------------ */
.listing__main { min-width: 0; }

/* ---------------------------------------------------------------------
 * THE BRAND LINE ON A CARD
 *
 * The design prints a category chip and a rating. There is no rating here,
 * so the second line carries the brand instead - which is the piece of
 * information a shopper comparing two tiles actually wants.
 *
 * Hidden in the grid layout by products.css? No - it is shown in both. In
 * the grid it sits under the name; in the list it sits under the category.
 * ------------------------------------------------------------------ */
.product-card__brand {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--ink-400);
}
/* The grid card is short, so the brand is the thing that gets dropped when
   the card is in its tightest form. */
.product-card__media + .product-card__body > .product-card__brand {
    color: var(--ink-400);
}

/* ---------------------------------------------------------------------
 * .product-card-slot
 *
 * The related-products section on the product page wraps each card in one.
 * The design's markup has the wrapper and no rule for it, which means each
 * card became a grid item of .product-grid-slots directly. The wrapper is
 * what lets a card be given a slot-level treatment later - a rank badge, a
 * "because you looked at" line - without touching product_card.php, so it is
 * styled as a transparent pass-through here rather than removed.
 * ------------------------------------------------------------------ */
.product-card-slot {
    display: block;
    min-width: 0;
    height: 100%;
}
.product-card-slot > .product-card { height: 100%; }

/* ---------------------------------------------------------------------
 * A BRAND CHIP IN THE CAROUSEL
 *
 * #collections can be switched to draw brand chips instead of product cards
 * (wc_showcase_source = 'brand'). The design only ever puts .product-card
 * inside a .swiper-slide, and .product-card carries height:100%, so a chip
 * without it sits at its own min-height while its neighbours - products with
 * long names - stretch the slide, and the rail ends up with a row of chips
 * of visibly different heights.
 *
 * This is one declaration rather than a change to .brand-chip, because
 * .brand-chip is also a grid item of .brand-grid on the home page where its
 * height is already settled by the grid.
 * ------------------------------------------------------------------ */
.carousel-shell .swiper-slide > .brand-chip { height: 100%; }

/* ---------------------------------------------------------------------
 * THE NEWSLETTER REPLY
 *
 * The design prints a toast for a sign-up it never sends. Here the form
 * really posts (web/inc/notify_save.php) and the server's own sentence is
 * printed under the box, so a visitor with scripting off gets the same
 * answer as one with it. State classes match .pg__note in the coming-soon
 * page, which is the other place the same handler answers.
 * ------------------------------------------------------------------ */
.newsletter-note {
    display: none;
    margin: 10px 0 0;
    font-size: var(--fs-xs);
    font-weight: 600;
    text-align: left;
}
.newsletter-note.is-shown { display: block; }
.newsletter-note.is-ok  { color: var(--brand-darker); }
.newsletter-note.is-bad { color: #b42318; }
/* The form is deliberately NOT hidden after a success. One address per visit
   is a reasonable assumption for a launch list and a rude one for somebody
   signing up a second branch address, and the box costs nothing to leave
   there. main.js clears the field instead. */

/* ---------------------------------------------------------------------
 * THE ASK BOX
 *
 * The four facts a message needs, so the reader can see exactly what is
 * being asked about before writing. A definition list would be the semantic
   choice, but .ask-box__row is what the markup uses and the two-column grid
   is what makes it read as a table without a table.
 * ------------------------------------------------------------------ */
.ask-box {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface-mute);
    overflow: hidden;
    max-width: 640px;
}
.ask-box__row {
    display: grid;
    grid-template-columns: minmax(90px, 32%) 1fr;
    gap: 12px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--line-soft);
    font-size: var(--fs-sm);
}
.ask-box__row:last-child { border-bottom: 0; }
.ask-box__row > span {
    color: var(--ink-400);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    align-self: center;
}
.ask-box__row > strong {
    color: var(--ink);
    font-weight: 600;
    word-break: break-word;
}

/* ---------------------------------------------------------------------
 * AN EMPTY TAB PANE
 *
 * Every pane is always drawn - a tab bar that changes shape from product to
 * product is a control with a different answer each time - so the panes that
 * have nothing to say say it in one line rather than being left blank.
 * ------------------------------------------------------------------ */
.tab-pane-empty {
    margin: 0;
    padding: 28px 0;
    color: var(--ink-400);
    font-size: var(--fs-sm);
    text-align: center;
}

/* ---- the closing call-to-action band (the 'form' banner type) ---- */
.form-banner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--ink);
}
.form-banner__bg {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: .32;
    z-index: -2;
}
.form-banner::after {
    /* The scrim. Without it white text on a pale photograph is unreadable,
       and the photograph is chosen by an operator who cannot see the page. */
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(120deg, rgba(24,24,27,.86), rgba(24,24,27,.62));
    z-index: -1;
}
.form-banner .container { padding-top: clamp(2.4rem, 1.6rem + 3vw, 4rem); padding-bottom: clamp(2.4rem, 1.6rem + 3vw, 4rem); }
.form-banner__inner { text-align: center; max-width: 640px; margin: 0 auto; }
.form-banner__inner h2 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-2xl);
    letter-spacing: -.02em;
    color: #fff;
    margin: 0 0 10px;
}
.form-banner__inner p { color: rgba(255,255,255,.78); margin: 0 0 20px; }

/* ---- the product page: three hooks the design's markup implies but does
        not style. .product-info__meta exists; the other three do not. ---- */
.product-info__brand {
    margin: 0 0 6px;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.product-info__brand a { color: var(--brand-darker); text-decoration: none; }
.product-info__brand a:hover { text-decoration: underline; }

.product-info__lead {
    color: var(--ink-500);
    font-size: var(--fs-md);
    margin: 0 0 16px;
    max-width: 56ch;
}

.product-info__actions { display: flex; gap: 8px; margin-top: 18px; }

/* ---- the filter panel's close button (small screens only) ---- */
.filter-panel__close {
    background: none;
    border: 0;
    color: var(--ink-500);
    font-size: 18px;
    line-height: 1;
    padding: 4px 6px;
    border-radius: var(--r-sm);
}
.filter-panel__close:hover { color: var(--ink); background: var(--surface-soft); }

/* ---------------------------------------------------------------------
 * THE FOOTER'S LAST ROW
 *
 * Nothing here either, and the declarations that used to be here have been
 * deleted rather than left commented out.
 *
 * style.css gives .footer-bottom a top rule, a clamped top margin, vertical
 * padding, and display:flex with align-items:center, justify-content:
 * space-between and flex-wrap - a row with the copyright on the left and the
 * payment badges on the right. responsive.css stacks it under 768px. This
 * file is loaded AFTER both, so re-declaring it here as a centred block with
 * a fixed 34px margin and 18px of padding won every time: the copyright sat
 * centred under a hard margin, the payment row could never sit beside it,
 * and responsive.css's `text-align: left` for phones was overridden by the
 * `text-align: center` below it. Four declarations, four wrong pixels.
 *
 * If .footer-bottom ever needs adjusting, adjust it in the design's file or
 * add something genuinely additive here - not a restatement of it.
 * ------------------------------------------------------------------ */

/* ---- the breadcrumb needs a little air above it on the listing screens ---- */
.breadcrumb { margin-bottom: 14px; font-size: var(--fs-xs); }
.breadcrumb a { color: var(--ink-500); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand-darker); }
.breadcrumb strong { color: var(--ink); font-weight: 600; }
.breadcrumb span { color: var(--ink-400); margin: 0 4px; }

/* ---------------------------------------------------------------------
 * THE CATEGORY CHIP ROW, FOR A LIST THAT CAN BE HUNDREDS LONG
 *
 * The design's .cat-chips wraps - fine for ten categories, a wall of pills
 * for four hundred. The shared partial (web/inc/cat_chips.php) splits the
 * row into the "All" chip, a horizontal scroll strip, and - for a long
 * list - a filter box and a "show all" button. These rules only decorate
 * that structure; the pill shape itself is still products.css.
 *
 * The scroll strip hides its scrollbar because a visible one under a one
 * line-high row reads as an error, and arrow keys plus the filter box are
 * the ways in.
 * ------------------------------------------------------------------ */
.cat-chips--fit {
  flex-wrap: wrap;
  align-items: center;
}
.cat-chips__scroll {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}
.cat-chips__scroll::-webkit-scrollbar { display: none; }
.cat-chip .cat-chip__count {
  font-size: 0.78em;
  font-weight: 700;
  opacity: 0.72;
  margin-left: 0.3rem;
}
.cat-chip.is-active .cat-chip__count { color: var(--on-brand); opacity: 1; }

/* The filter box sits on its own line under the row. It is a real input
   with a label; hiding it when scripting is off is done with the hidden
   attribute, and the JS removes that. */
.cat-chips__filter { width: 100%; margin-top: 0.55rem; position: relative; max-width: 320px; }
.cat-chips__filter input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-pill, 999px);
  padding: 0.4rem 0.85rem 0.4rem 2.05rem;
  font-size: var(--fs-sm);
  background: var(--surface);
}
.cat-chips__filter input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.cat-chips__filter-ico { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--ink-400); font-size: 0.82rem; }

.cat-chips__more {
  align-self: center;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-600);
  border-radius: var(--r-pill, 999px);
  padding: 0.35rem 0.85rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s var(--ease, ease);
}
.cat-chips__more:hover { border-color: var(--brand); color: var(--brand-darker); }

/* Expanded: the strip breaks out of its single line into the wrapping grid
   the design always meant it to be, and the filter box stays. */
.cat-chips--fit.is-expanded .cat-chips__scroll {
  flex-wrap: wrap;
  overflow: visible;
  max-height: none;
}

/* A "no matches" note the script paints on the strip; the words come from
   the page as a data attribute so they pass through the language layer. */
.cat-chips__scroll[data-cat-shown="0"]::after {
  content: attr(data-cat-empty);
  display: inline-flex;
  align-items: center;
  margin-left: 0.2rem;
  padding: 0.35rem 0.6rem;
  border: 1px dashed var(--line);
  border-radius: var(--r-pill, 999px);
  color: var(--ink-400);
  font-size: var(--fs-sm);
}

/* ---------------------------------------------------------------------
 * ABOUT + CONTACT, THE TWO PRIVATE PAGES
 *
 * These decorate the page structure the two files print - the story layout,
 * the facts row, the contact cards strip, the form head - and add nothing
 * the files do not already use. Everything is token-coloured so the theme
 * follows the operator's brand like the rest of the shop.
 * ------------------------------------------------------------------ */

/* ---------- about: the story ---------- */
.about-story { padding-block: clamp(1.5rem, 3vw, 2.75rem); }
.about-story__head { max-width: 720px; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.about-story__head h1 {
  font-size: var(--fs-2xl);
  margin: 0 0 6px;
}
.about-story__lede {
  color: var(--ink-500);
  font-size: var(--fs-md);
  margin: 0;
}
.about-story__grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
}
@media (min-width: 992px) {
  .about-story__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}
.about-story__media,
.about-story__media-empty {
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--surface-soft);
  border: 1px solid var(--line-soft);
}
.about-story__media img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 9 / 7; }
.about-story__media-empty {
  aspect-ratio: 9 / 7;
  display: grid;
  place-items: center;
  color: var(--ink-400);
  gap: 10px;
  text-align: center;
  padding: 1.5rem;
}
.about-story__media-empty i { font-size: 2rem; color: var(--brand); }
.about-story__media-empty span { font-weight: 600; }
.about-story__copy p { margin: 0 0 1rem; color: var(--ink-600); line-height: 1.75; }
.about-story__copy h2 { font-size: var(--fs-lg); margin: 1.5rem 0 0.4rem; }
.about-story__none { color: var(--ink-500); }

/* The checked numbers under the story. Two borders instead of a box border
   so the row reads as "three facts", not "a card with a form below it". */
.about-facts {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
@media (min-width: 560px) { .about-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.about-facts li {
  padding: 0.8rem 0.2rem;
}
@media (min-width: 560px) {
  .about-facts li + li { border-left: 1px solid var(--line-soft); padding-left: 1rem; }
}
.about-facts b { display: block; font-size: var(--fs-lg); color: var(--brand-darker); }
.about-facts span { font-size: var(--fs-sm); color: var(--ink-500); }
.about-story__cta { margin-top: 1.5rem; }

/* The closing appeal when there is no form banner to end the page with. */
.about-cta { padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.about-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  background: var(--surface-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.about-cta__inner h2 { font-size: var(--fs-xl); margin: 0 0 4px; }
.about-cta__inner p { color: var(--ink-500); margin: 0; }

/* ---------- contact: the way-in cards ---------- */
.contact-cards {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  margin: 0.4rem 0 1.75rem;
}
.contact-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 0.95rem 1rem;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.contact-card:hover {
  border-color: var(--brand);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.06);
}
.contact-card__ico {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: var(--r-md);
  background: var(--brand-soft);
  color: var(--brand-darker);
  display: grid;
  place-items: center;
  font-size: 1rem;
}
.contact-card__body { display: flex; flex-direction: column; min-width: 0; }
.contact-card__body strong { font-size: var(--fs-sm); }
.contact-card__body span {
  font-size: var(--fs-sm);
  color: var(--ink-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contact-card--go { background: var(--brand-soft); border-color: var(--brand-line); }
.contact-card--go .contact-card__ico { background: var(--brand); color: var(--on-brand); }

.wc-form__head { margin-bottom: 1.1rem; }
.wc-form__head h2 { font-size: var(--fs-lg); margin: 0 0 4px; }
.wc-form__head p { margin: 0; font-size: var(--fs-sm); color: var(--ink-500); }

/* The contact "the rest of the ways" card inside the aside. */
.wc-contact__card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 1.15rem 1.25rem;
  margin-bottom: 1rem;
}
.wc-contact__card > h2 { font-size: var(--fs-md); margin: 0 0 4px; }
.wc-contact__social {
  list-style: none;
  display: flex;
  gap: 0.6rem;
  margin: 0.9rem 0 0;
  padding: 0.9rem 0 0;
  border-top: 1px solid var(--line-soft);
}
.wc-contact__social a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--surface-soft);
  color: var(--ink-600);
  text-decoration: none;
  transition: all 0.18s var(--ease);
}
.wc-contact__social a:hover { background: var(--brand); color: var(--on-brand); }