/* Commerzest storefront on Prism (prismds), commerce signature.
   Loaded after {% prism_head %}; the legacy theme (core-style.css + Bootstrap,
   style.css, responsive.css) sits in the "legacy" cascade layer (base.html),
   so every rule here and every Prism rule beats it whatever its specificity.

   What is here:
     - the shop shell around Prism's AppHeader / AppFooter (sf-header, sf-footer);
     - page layout Prism leaves to the app (sf-page, grids, two-column cart and
       checkout);
     - the markup the storefront scripts read or generate, restyled with Prism
       tokens: the gallery (ol.carousel-indicators / .carousel-inner), variant
       chips (ul.variants li), the cart rows cart.js builds into #tblCart, the
       order summary rows checkout.js writes into ul.order-details-form, and the
       .invalid-feedback messages it toggles;
     - resets for the legacy bare-element rules that still reach Prism (end).
   Every value is a Prism token: no hard-coded colours, sizes or fonts. The
   accent is the signature's, never a brand literal.
   NOTE: never write a bare "*" followed by "/" inside these comments. */

/* ---------------------------------------------------------------- shell */
body.sf-app {
    background: var(--surface-page);
    color: var(--text-primary);
    font-family: var(--body-font);
    letter-spacing: normal;          /* style.css: body{letter-spacing:-0.03em} */
}
.sf-shell { min-height: 100vh; display: flex; flex-direction: column; background: transparent; box-shadow: none; }
.sf-main { flex: 1 0 auto; min-width: 0; }

/* Header: Prism AppHeader on the page surface, content held to the page
   width on wide screens. */
.sf-header.prism-appheader {
    padding-inline: max(0px, calc((100% - var(--container-xl)) / 2));
    /* no backdrop-filter: it would make the bar the containing block of the
       fixed drawer, which then hangs off the page and scrolls it sideways */
    background: var(--surface-card);
}
.sf-header .prism-appheader-brand { gap: var(--space-3); font-size: var(--text-lg); }
.sf-header .prism-appheader-brand img.sf-brand-logo {
    --brand-mark-height: 36px;
    block-size: 36px; inline-size: 36px; object-fit: contain;
    border-radius: var(--radius-sm); background: var(--surface-card);
}
.sf-header .prism-appheader-navwrap { margin-inline-start: var(--space-4); }
.sf-header .prism-appheader-actions { align-items: center; gap: var(--space-1); padding-inline-end: var(--space-2); }
.sf-header .prism-appheader-slot { padding-inline: var(--space-1); }

/* Cart button: #header-cart-btn with the .cart_quantity count the scripts fill. */
.sf-cart-btn {
    display: inline-flex; align-items: center; gap: var(--space-2);
    min-height: var(--control-md); padding: 0 var(--space-3);
    border: var(--border-width) solid var(--border-default); border-radius: var(--radius-pill);
    color: var(--text-primary); font-family: var(--label-font); font-size: var(--text-sm); font-weight: var(--weight-semibold);
    text-decoration: none; transition: var(--transition-colors);
}
.sf-header a.sf-cart-btn { color: var(--text-primary); }
.sf-cart-btn:hover { background: var(--fill-subtle); border-color: var(--border-strong); }
.sf-cart-btn > svg { width: var(--icon-md); height: var(--icon-md); flex: none; }
.sf-cart-count {
    position: static; inset: auto;   /* the karl theme pins .cart_quantity absolutely */
    display: inline-flex; align-items: center; justify-content: center;
    min-inline-size: 20px; block-size: 20px; padding: 0 var(--space-1-5);
    border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-on);
    font-size: var(--text-xs); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; line-height: 1;
}
/* Hidden while the cart is empty. The scripts write "0" (or "") as the count's
   text; common.js mirrors it into data-qty and the link's aria-label ("Cart"),
   so this follows every update cart.js makes. */
.sf-cart-count:empty, .sf-cart-count[data-qty="0"] { display: none; }

/* Drawer (custom content: Home / Shop / Track + categories) */
.sf-header .prism-sidenav { padding: var(--space-3); gap: 0; }
.sf-drawer { display: flex; flex-direction: column; margin: 0; padding: 0; }
/* style.css paints #karl-navbar (the id the drawer keeps) black with
   !important below 992px; only the sf-override layer can undo that. */
@layer sf-override {
    #karl-navbar.sf-drawer { background-color: transparent !important; color: inherit !important; }
}
.sf-cat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-0-5); }
.sf-cat-list li { margin: 0; padding: 0; }
.sf-cat-link.level0 { font-weight: var(--weight-semibold); }
.sf-cat-link.level1 { padding-inline-start: var(--space-8); }
.sf-cat-link.level2 { padding-inline-start: var(--space-12); font-size: var(--text-sm); }
.sf-cat-link.level3 { padding-inline-start: var(--space-16); font-size: var(--text-sm); }
.sf-header .prism-appheader-menu { width: var(--control-lg, 44px); height: var(--control-lg, 44px); border-radius: var(--radius-control); }

/* Footer: Prism AppFooter */
.sf-footer { margin-block-start: var(--space-16); }
.sf-footer .prism-footer-brand img.sf-brand-logo { block-size: 36px; inline-size: 36px; object-fit: contain; border-radius: var(--radius-sm); }
/* "Powered by Commerzest" in the footer's legal slot: symbol + inline wordmark,
   in the footer's quiet text colour (the wordmark fills with currentColor). */
.sf-footer .prism-footer-legal a { display: inline-flex; align-items: center; gap: var(--space-1-5); }
.sf-footer .prism-footer-legal a:hover { text-decoration: none; color: var(--text-secondary); }
.sf-poweredby-symbol { block-size: 18px; inline-size: 18px; }
.sf-poweredby-word { display: inline-flex; }
.sf-poweredby-word svg { block-size: 11px; inline-size: auto; }
.sf-footer .prism-footer-tagline {
    max-width: 40ch; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------------------------------------------------------------- pages */
.sf-page {
    max-width: var(--container-xl); margin-inline: auto; min-width: 0;
    padding: var(--space-6) var(--layout-gutter, var(--space-6)) 0;
    display: flex; flex-direction: column; gap: var(--space-6);
}
.sf-narrow { max-width: 760px; }
.sf-center { display: flex; justify-content: center; }
.sf-pageheader { margin: 0; }
.sf-crumbs { margin-block-end: calc(-1 * var(--space-3)); }
.sf-fineprint { margin: 0; font-size: var(--fs-small); color: var(--text-secondary); text-align: center; }
.sf-muted { color: var(--text-secondary); }
.sf-section { display: flex; flex-direction: column; gap: var(--space-5); }
.sf-section > .prism-sectionheader { margin: 0; }
.sf-subhead { margin: var(--space-2) 0 0; font-size: var(--fs-h6); font-weight: var(--weight-semibold); }

/* Home hero: Prism PageHero with the store's main image */
.sf-hero.prism-hero { margin-block-start: var(--space-2); align-items: center; }
.sf-hero .prism-hero-desc { line-height: var(--leading-relaxed); }
.sf-hero .prism-hero-title { font-size: var(--fs-h1); }
.sf-hero-bio { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.sf-hero-media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-media, var(--radius-card)); }

/* Category chips (Prism Tag links) */
.sf-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Product grid + card */
.sf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: var(--space-6) var(--space-5); }
.sf-product.prism-card { display: flex; flex-direction: column; overflow: hidden; }
.sf-product-media { aspect-ratio: 1; background: var(--surface-sunken); overflow: hidden; }
.sf-product-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); }
.sf-product:hover .sf-product-media img { transform: scale(1.03); }
.sf-product-body { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4) var(--space-4); }
.sf-product-body p { margin: 0; }
.sf-product-cat { font-size: var(--fs-caption); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-tertiary); }
.sf-product-name { font-weight: var(--weight-medium); color: var(--text-primary); line-height: var(--leading-snug); }
.sf-product-price { font-weight: var(--weight-semibold); color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------- product detail */
.sf-detail { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-10, 40px); align-items: start; }
.sf-detail > * { min-width: 0; }

/* Gallery: big image + thumbnail strip (cart.js reads this markup) */
.sf-gallery { position: sticky; top: calc(var(--topbar-height) + var(--space-4)); }
.sf-gallery #product_details_slider { display: flex; flex-direction: column; gap: var(--space-3); }
.sf-gallery .carousel-inner {
    position: relative; overflow: hidden; width: 100%;
    border-radius: var(--radius-card); background: var(--surface-sunken);
    border: var(--border-width) solid var(--border-subtle);
}
.sf-gallery .carousel-inner .carousel-item { display: block; float: none; margin: 0; width: 100%; transform: none; }
.sf-gallery .carousel-inner img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: contain; max-width: 100%; }
.sf-gallery ol.carousel-indicators {
    position: static; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: var(--space-2);
    margin: 0; padding: 0; list-style: none; z-index: auto;
}
.sf-gallery ol.carousel-indicators li {
    flex: none; width: 72px; height: 72px; margin: 0; padding: 0; text-indent: 0; cursor: pointer; opacity: 1;
    border: 2px solid var(--border-subtle); border-radius: var(--radius-md);
    background-color: var(--surface-sunken); background-size: cover; background-position: center; background-clip: padding-box;
    transition: var(--transition-colors);
}
.sf-gallery ol.carousel-indicators li:hover { border-color: var(--border-strong); }
.sf-gallery ol.carousel-indicators li.active { border-color: var(--accent); }

.sf-info { display: flex; flex-direction: column; gap: var(--space-5); }
.sf-info-head { display: flex; flex-direction: column; gap: var(--space-2); }
.sf-title { margin: 0; font-size: var(--fs-h2); line-height: var(--leading-tight); }
.sf-price { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.sf-price-now { font-family: var(--display-font, var(--font-display)); font-size: var(--fs-h3); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.sf-price del { color: var(--text-tertiary); font-size: var(--fs-body); }
.sf-tax-note { margin: 0; font-size: var(--fs-small); color: var(--text-secondary); }
.sf-stock { display: flex; align-items: center; gap: var(--space-2); }
.sf-stock-note { font-size: var(--fs-small); color: var(--text-secondary); }

/* Variant pickers: ul.variants li (cart.js toggles .active) as Prism chips */
.sf-widget { display: flex; flex-direction: column; gap: var(--space-2); }
.sf-widget-title { margin: 0; font-family: var(--label-font); font-size: var(--fs-small); font-weight: var(--weight-semibold); color: var(--text-secondary); }
.sf-info ul.variants { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.sf-info ul.variants li {
    display: inline-flex; align-items: center; gap: var(--space-2);
    min-height: var(--control-md); min-width: var(--control-md); justify-content: center;
    margin: 0; padding: 0 var(--space-4);
    border: var(--border-width) solid var(--border-default); border-radius: var(--radius-control);
    background: var(--surface-card); color: var(--text-primary); cursor: pointer; user-select: none;
    font-size: var(--text-sm); transition: var(--transition-colors);
}
.sf-info ul.variants li strong { font-weight: var(--weight-medium); }
.sf-info ul.variants li:hover { border-color: var(--border-strong); background: var(--fill-subtle); }
.sf-info ul.variants li.active { border-color: var(--accent); background: var(--accent-subtle); color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent); }
.sf-swatch { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--text-primary) 20%, transparent); flex: none; }

/* Quantity + Add to cart on one row: the Prism NumberField (#addQty, - 1 +)
   keeps its label above; the button takes the rest and lines up with the field. */
.sf-buy { margin: 0; display: flex; align-items: flex-end; gap: var(--space-3); }
.sf-buy .sf-qty { flex: none; inline-size: 9rem; margin: 0; }
.sf-buy .sf-qty .prism-numberfield { block-size: var(--control-lg); }
.sf-buy .sf-qty .prism-input { block-size: auto; min-inline-size: 0; text-align: center; }
.sf-buy .btnAddToCart { flex: 1 1 auto; min-inline-size: 0; }
/* Add to cart: the label is a link that fills the button (see details.html) */
.sf-buy .btnAddToCart > a { display: flex; align-items: center; justify-content: center; align-self: stretch; flex: 1; color: inherit; text-decoration: none; font: inherit; }
.sf-buy .btnAddToCart:disabled > a { pointer-events: none; }

.sf-assure { list-style: none; margin: 0; padding: var(--space-4) 0 0; display: grid; gap: var(--space-2); border-top: var(--border-width) solid var(--border-subtle); }
.sf-assure li { position: relative; padding-inline-start: var(--space-6); font-size: var(--fs-small); color: var(--text-secondary); }
.sf-assure li::before {
    content: ""; position: absolute; inset-inline-start: 0; top: 0.2em; width: 16px; height: 16px; background: var(--positive);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Description: a Prism Accordion (prism.js opens and closes it) */
.sf-desc .prism-accordion-heading { font-size: var(--fs-body); font-weight: var(--weight-semibold); }
.sf-desc-body { color: var(--text-secondary); font-size: var(--fs-body); line-height: var(--leading-relaxed); }

/* ---------------------------------------------------------------- cart */
.sf-cart-layout, .sf-checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: var(--space-6); align-items: start; }
.sf-cart-layout > *, .sf-checkout-layout > * { min-width: 0; }
.sf-cart-lines { display: flex; flex-direction: column; gap: var(--space-3); }
.sf-cart-aside, .sf-checkout-aside { display: flex; flex-direction: column; gap: var(--space-4); position: sticky; top: calc(var(--topbar-height) + var(--space-4)); }
.sf-cart-aside > .prism-card, .sf-checkout-aside { display: flex; flex-direction: column; gap: var(--space-4); }
.sf-cart-aside .prism-sectionheader, .sf-checkout-aside .prism-sectionheader, .sf-checkout .prism-sectionheader { margin: 0; }
.sf-card-flush { overflow: hidden; }
.sf-cart-footer { display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }

/* The empty state shows only while #tblCart has no rows (server render, an
   empty cart, or after "Clear cart"); the table and summary hide then. */
.sf-cart-empty { display: none; }
.sf-cart:has(#tblCart tbody:not(:has(tr))) .sf-cart-empty { display: block; }
.sf-cart:has(#tblCart tbody:not(:has(tr))) .sf-cart-layout { display: none; }

/* #tblCart, rows built by cart.js:
   tr#tr_<id>[data-id][data-index] > td.cart_product_img (a>img, h6) | td.price |
   td.qty > .quantity (.remove-item, .qty-minus, input.qty-text, .qty-plus) | td.total_price */
.sf-cart-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); margin: 0; }
.sf-cart-table thead th {
    padding: var(--space-3) var(--space-4); text-align: start; white-space: nowrap;
    font-family: var(--label-font); font-size: var(--fs-small); font-weight: var(--weight-semibold); color: var(--text-secondary);
    background: var(--surface-sunken); border-bottom: var(--border-width) solid var(--border-subtle);
}
.sf-cart-table thead th:nth-child(n+2) { text-align: end; }
.sf-cart-table thead th:nth-child(3) { text-align: center; }
/* cart.js gives the product cell Bootstrap's d-flex (display:flex !important),
   so it is not a table cell: rows carry the dividers instead of cells. */
.sf-cart-table tbody td { padding: var(--space-4); vertical-align: middle; }
.sf-cart-table tbody tr + tr { border-top: var(--border-width) solid var(--border-subtle); }
.sf-cart-table td.cart_product_img { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.sf-cart-table td.cart_product_img > a { flex: none; display: block; width: auto; margin: 0; }
.sf-cart-table td.cart_product_img img {
    display: block; width: 64px; height: 64px; object-fit: cover; max-width: none;
    border-radius: var(--radius-md); background: var(--surface-sunken); border: var(--border-width) solid var(--border-subtle);
}
.sf-cart-table td.cart_product_img h6 { margin: 0; font-family: var(--body-font); font-size: var(--fs-body); font-weight: var(--weight-medium); line-height: var(--leading-snug); color: var(--text-primary); }
.sf-cart-table td.price, .sf-cart-table td.total_price { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sf-cart-table td.total_price { font-weight: var(--weight-semibold); }
.sf-cart-table td.qty { text-align: center; }
.sf-cart-table .quantity { display: inline-flex; align-items: center; gap: var(--space-1); }
.sf-cart-table .quantity :is(.qty-minus, .qty-plus, .remove-item) {
    display: inline-flex; align-items: center; justify-content: center; width: var(--control-sm); height: var(--control-sm);
    border-radius: var(--radius-control); cursor: pointer; color: var(--text-secondary); transition: var(--transition-colors);
}
.sf-cart-table .quantity :is(.qty-minus, .qty-plus) { border: var(--border-width) solid var(--border-default); background: var(--surface-card); }
.sf-cart-table .quantity :is(.qty-minus, .qty-plus, .remove-item):hover { background: var(--fill-subtle); color: var(--text-primary); }
.sf-cart-table .quantity .remove-item { order: 9; margin-inline-start: var(--space-1); }
.sf-cart-table .quantity .remove-item:hover { color: var(--negative-text); }
.sf-cart-table .quantity .fa { font-size: 11px; }
.sf-cart-table .quantity .qty-text {
    width: 40px; height: var(--control-sm); padding: 0; text-align: center; border: 0; background: transparent;
    font: inherit; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; color: var(--text-primary);
}

/* Delivery radios + the postal-code box cart.js reveals */
.sf-radios { gap: var(--space-4); }
.sf-radio-row { display: flex; flex-direction: column; gap: var(--space-2); }
.sf-zip-input { margin-inline-start: calc(20px + var(--space-3)); width: calc(100% - 20px - var(--space-3)); max-width: 220px; }
.sf-zip-fee:not(:empty) { font-weight: var(--weight-semibold); color: var(--text-primary); }

/* Summary rows (cart totals; checkout's ul.order-details-form; order lines) */
.sf-summary { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sf-summary > li {
    display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4);
    padding: var(--space-2) 0; margin: 0; font-size: var(--fs-body);
}
.sf-summary > li > span:last-child { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sf-summary > li > span:first-child { min-width: 0; color: var(--text-secondary); }
.sf-summary-total, .sf-order-lines > li:last-child {
    margin-top: var(--space-2); padding-top: var(--space-3); border-top: var(--border-width) solid var(--border-subtle);
    font-size: var(--fs-body-lg); font-weight: var(--weight-semibold);
}
.sf-summary-total > span:first-child, .sf-order-lines > li:last-child > span:first-child { color: var(--text-primary); }
/* Order lines: first row is the "Product / Total" heading, items read as primary */
.sf-order-lines > li:first-child {
    font-family: var(--label-font); font-size: var(--fs-small); font-weight: var(--weight-semibold); color: var(--text-secondary);
    border-bottom: var(--border-width) solid var(--border-subtle); padding-top: 0;
}
.sf-order-lines > li:first-child > span { color: var(--text-secondary); }
.sf-items > li > span:first-child { color: var(--text-primary); }
.sf-items > li + li { border-top: var(--border-width) solid var(--border-subtle); }

/* style.css styles .redirect-checkout with !important (uppercase, 18px, its own
   blue, margin-top); the sf-override layer (declared before "legacy" in
   base.html) is the only place an !important can outrank it. */
.sf-cart .redirect-checkout { text-transform: none; letter-spacing: normal; padding: 0 var(--space-5); }
@layer sf-override {
    .sf-cart .redirect-checkout, .sf-cart .redirect-checkout:hover {
        display: inline-flex !important; margin-top: 0 !important;
        font-size: var(--text-base) !important; color: var(--accent-on) !important; background-color: var(--accent) !important;
    }
    .sf-cart .redirect-checkout:hover { background-color: var(--accent-hover) !important; }
}

/* ------------------------------------------------------------- checkout */
.sf-form { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; }
.sf-field-short { max-width: var(--field-width-sm, 240px); }
.sf-form-actions { display: flex; justify-content: flex-end; }
/* checkout.js shows/hides these with jQuery .show()/.hide() (an inline
   display style), which also marks the field's input as invalid here. */
.sf-checkout .invalid-feedback { display: none; }
.sf-checkout .prism-field:has(> .invalid-feedback[style*="block"]) > .prism-input { border-color: var(--negative); }
.sf-checkout section.prism-card, .sf-track-form { display: flex; flex-direction: column; gap: var(--space-5); }

/* ------------------------------------------------------- order + track */
.sf-state { margin-inline: auto; }
.sf-state-notes { display: flex; flex-direction: column; gap: var(--space-3); }
.sf-order-ref { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding-bottom: var(--space-3); }
.sf-order-ref-label { font-family: var(--label-font); font-size: var(--fs-caption); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-tertiary); }
.sf-order-ref-value { font-family: var(--code-font); font-size: var(--fs-h3); font-weight: var(--weight-semibold); }
.sf-order-ref-note { margin-bottom: var(--space-4); }
.sf-track-error { margin: 0; }
.sf-track-result { display: flex; flex-direction: column; gap: var(--space-4); }
.sf-track-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.sf-track-number { margin: 0; font-family: var(--code-font); font-size: var(--fs-h4); }
.sf-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-4); margin: 0; padding: var(--space-4); background: var(--surface-sunken); border-radius: var(--radius-md); }
.sf-facts dt { font-size: var(--fs-small); color: var(--text-secondary); margin: 0; }
.sf-facts dd { margin: var(--space-1) 0 0; font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }

/* ----------------------------------------------- Razorpay hand-off page */
.sf-handoff-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.sf-handoff { width: 100%; max-width: 440px; }
.sf-handoff-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; }
.sf-handoff-title { margin: var(--space-2) 0 0; font-size: var(--fs-h4); }
.sf-handoff-text { margin: 0 0 var(--space-2); color: var(--text-secondary); }
.sf-handoff-back { margin-top: var(--space-1); }

/* ------------------------------------------------------------ responsive */
@media (max-width: 960px) {
    .sf-detail { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
    .sf-gallery { position: static; }
    .sf-cart-layout, .sf-checkout-layout { grid-template-columns: minmax(0, 1fr); }
    .sf-cart-aside, .sf-checkout-aside { position: static; }
}
@media (max-width: 760px) {
    .sf-page { padding: var(--space-4) var(--space-4) 0; gap: var(--space-5); }
    .sf-hero.prism-hero { flex-direction: column; align-items: stretch; }
    .sf-hero .prism-hero-media { order: -1; }
    .sf-hero .prism-hero-title { font-size: var(--fs-h2); }
    .sf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); }
    .sf-product-body { padding: var(--space-2) var(--space-3) var(--space-3); }
    .sf-gallery .carousel-inner img { aspect-ratio: 1; }
    .sf-gallery ol.carousel-indicators li { width: 56px; height: 56px; }
    .sf-title { font-size: var(--fs-h3); }
    .sf-header .sf-cart-label { display: none; }
    .sf-header .prism-appheader-brand { padding-inline: var(--space-3) var(--space-2); font-size: var(--text-base); }
    .sf-header .prism-appheader-brand img.sf-brand-logo { block-size: 32px; inline-size: 32px; }
    .sf-footer { margin-block-start: var(--space-12); }

    /* Cart rows as stacked cards: product on top, then price, quantity, total */
    .sf-cart-table thead { display: none; }
    .sf-cart-table, .sf-cart-table tbody { display: block; }
    .sf-cart-table tbody tr {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "prod prod" "qty total";
        gap: var(--space-3); padding: var(--space-4);
    }
    .sf-cart-table tbody td { padding: 0; border: 0; }
    .sf-cart-table td.cart_product_img { grid-area: prod; }
    .sf-cart-table td.price { display: none; }
    .sf-cart-table td.qty { grid-area: qty; text-align: start; }
    .sf-cart-table td.total_price { grid-area: total; align-self: center; }
    .sf-field-short { max-width: none; }
}

/* ---------------------------------------------------------------- resets
   The legacy layer's bare-element rules that still reach Prism because Prism
   relies on the browser default there. Each reset is wrapped in :where() so
   it has zero specificity: every Prism class rule still wins.
     core-style.css: p { font-family:'Work Sans'; color:#3a3a3a; font-size:1em;
       line-height:1.5 }, a { font-family:'Work Sans'; color:#000;
       transition:all 500ms }, a:focus { outline:none }, * { margin:0; padding:0 };
     Bootstrap reboot: p { margin-bottom:1rem }, label { display:inline-block;
       margin-bottom:.5rem }, button { border-radius:0 },
       input/button/select { line-height:inherit }. */
:where(.sf-app) :where(p, li, dd, dt, td, th, label, span, strong, del, small) { font-family: inherit; }
:where(.sf-app) :where(p) { color: inherit; font-size: inherit; line-height: inherit; margin: 0; }
:where(.sf-app) :where(a) { font-family: inherit; transition: var(--transition-colors); }
:where(.sf-app) :where(label):where([class^="prism-"], [class*=" prism-"]) { margin-bottom: 0; }
:where(.sf-app) :where(input, select, textarea):where([class^="prism-"], [class*=" prism-"]) { line-height: normal; }
:where(.sf-app) :where(.prism-hero-desc, .prism-empty-text, .prism-sectionheader-description, .prism-pageheader-subtitle) { color: var(--text-secondary); }
:where(.sf-app) :where(.prism-footer, .prism-appheader) a { font-family: inherit; }