/*
 * SRK storefront / dashboard visual alignment.
 * Reference: admin-dashboard-srk's shell and adminDashboardUI hero/stat/action.
 * This optional, screen-only layer changes presentation, never application state.
 * Keep positioning, visibility, scroll ownership and transition-driven lifecycles
 * in their existing modules. Printed quotations and invoices retain their styles.
 */
@media screen {
    :root {
        --srk-ink: #12170f;
        --srk-copy: #1f271b;
        --srk-muted: #63695f;
        --srk-gold: #d4af37;
        --srk-gold-light: #e4c55c;
        --srk-gold-ink: #705714;
        --srk-wine: #420c14;
        --srk-canvas: #f6f7f4;
        --srk-surface: #ffffff;
        --srk-soft: #eef0e9;
        --srk-border: rgba(18, 23, 15, .1);
        --srk-radius-control: .625rem;
        --srk-radius-card: .875rem;
        --srk-radius-feature: 1rem;
        --srk-shadow-card: 0 8px 30px rgba(18, 23, 15, .04);
        --srk-shadow-raised: 0 14px 36px rgba(18, 23, 15, .09);
        --srk-shadow-feature: 0 22px 55px rgba(18, 23, 15, .16);
    }

    body[data-srk-page] {
        background-color: var(--srk-canvas);
        color: var(--srk-copy);
        font-family: "Manrope", sans-serif;
        -webkit-font-smoothing: antialiased;
    }

    body[data-srk-page] :is(h1, h2, h3, h4, h5, h6) {
        font-family: "Schibsted Grotesk", sans-serif;
        letter-spacing: -.025em;
    }

    body[data-srk-page] :is(button, a, input, select, textarea):focus-visible {
        outline: 2px solid var(--srk-gold-ink);
        outline-offset: 3px;
    }

    body[data-srk-page] :is(button, a).rounded-sm,
    body[data-srk-page] :is(button, a).rounded,
    body[data-srk-page] :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select),
    body[data-srk-page] .srk-select__trigger {
        border-radius: var(--srk-radius-control);
    }

    /* Surface colours are exact class tokens, not substring matches: do not
       recolour hover, disabled, validation, selection or payment status classes. */
    body[data-srk-page] :is([class~="bg-[#f8fafc]"], [class~="bg-[#f1f5f9]"]) {
        background-color: var(--srk-canvas);
    }

    body[data-srk-page] :is(a, p, span, label)[class~="text-[#d4af37]"] {
        color: var(--srk-gold-ink);
    }

    body[data-srk-page] :is(a, button)[class~="bg-[#d4af37]"],
    body[data-srk-page] [data-hero-cta] {
        border-radius: var(--srk-radius-control);
        background-color: var(--srk-gold);
        color: var(--srk-ink);
        font-weight: 700;
        box-shadow: 0 8px 22px rgba(212, 175, 55, .16);
    }

    body[data-srk-page] :is(a, button)[class~="bg-[#d4af37]"] :is(span, svg),
    body[data-srk-page] [data-hero-cta] svg {
        color: var(--srk-ink);
    }

    body[data-srk-page] a[class~="bg-[#d4af37]"]:hover,
    body[data-srk-page] button[class~="bg-[#d4af37]"]:enabled:hover,
    body[data-srk-page] [data-hero-cta]:hover {
        background-color: var(--srk-gold-light);
        color: var(--srk-ink);
    }

    body[data-srk-page] :is(a, button)[class~="bg-[#420c1f]"],
    body[data-srk-page] :is(a, button)[class~="bg-[#420c14]"] {
        background-color: var(--srk-wine);
        color: #fff;
        border-radius: var(--srk-radius-control);
    }

    body[data-srk-page] .srk-secondary-btn { border-radius: var(--srk-radius-control); }

    /* Public navigation retains its existing transparent / solid states. */
    body[data-srk-page] > header:not(.bg-transparent) {
        border-color: var(--srk-border);
        box-shadow: 0 4px 22px rgba(18, 23, 15, .035);
    }

    body[data-srk-page] > header nav a:not(.quote-nav-cta):hover {
        color: var(--srk-gold-ink);
    }

    body[data-srk-page] > header.bg-transparent nav a:hover { color: var(--srk-gold-light); }
    body[data-srk-page] > header.bg-transparent .quote-nav-cta { background-color: transparent; }

    body[data-srk-page] .srk-mobile-panel {
        background: var(--srk-surface);
        box-shadow: var(--srk-shadow-feature);
    }

    body[data-srk-page] .srk-mobile-panel a { border-radius: var(--srk-radius-control); }

    /* The store uses the same quiet canvas, white rail and active gold keyline
       as the admin console. Its mobile navigation still owns its geometry. */
    body[data-srk-page="store"] > div > header {
        box-shadow: 10px 0 32px rgba(18, 23, 15, .035);
    }

    body[data-srk-page="store"] main > section,
    body[data-srk-page="store"] #store-content {
        background: transparent;
    }

    body[data-srk-page="store"] main {
        background: radial-gradient(circle at 88% 0, rgba(212, 175, 55, .055), transparent 28%), var(--srk-canvas);
    }

    body[data-srk-page="store"] .nav-btn {
        min-height: 44px;
        border: 1px solid transparent;
        border-radius: var(--srk-radius-control);
        font-weight: 600;
    }

    body[data-srk-page="store"] .nav-btn[class~="bg-[#d4af37]/10"],
    body[data-srk-page="store"] .nav-btn[class~="bg-[#d4af37]/5"] {
        background: rgba(212, 175, 55, .1);
        color: var(--srk-gold-ink);
        border-color: rgba(212, 175, 55, .18);
        box-shadow: inset 3px 0 0 var(--srk-gold);
    }

    body[data-srk-page="store"] .nav-btn:hover {
        background-color: rgba(212, 175, 55, .06);
        color: var(--srk-gold-ink);
    }

    body[data-srk-page="store"] #store-content > div:first-child {
        background: var(--srk-surface);
        border: 1px solid var(--srk-border);
        border-radius: var(--srk-radius-card);
        padding: 14px 16px;
        margin-bottom: 24px;
        box-shadow: var(--srk-shadow-card);
    }

    body[data-srk-page] #store-search { background: var(--srk-canvas); min-height: 44px; }
    body[data-srk-page] :is(#profile-button, #cart-button, .cart-icon-btn) { border-radius: var(--srk-radius-control); }

    body[data-srk-page] #featured-hero {
        border: 1px solid rgba(212, 175, 55, .15);
        border-radius: var(--srk-radius-feature);
        box-shadow: var(--srk-shadow-feature);
        margin-bottom: 48px;
    }

    body[data-srk-page] #featured-hero [aria-roledescription="slide"] > div:first-child {
        background-image: radial-gradient(circle at 85% 10%, rgba(212, 175, 55, .16), transparent 38%);
    }

    body[data-srk-page] #featured-hero :is(img, [class~="backdrop-blur-sm"]) { border-radius: var(--srk-radius-card); }
    body[data-srk-page] #featured-hero span[class~="uppercase"] {
        border-radius: 999px;
        color: var(--srk-gold-light);
        border-color: rgba(212, 175, 55, .3);
    }
    body[data-srk-page] #featured-hero :is([data-hero-next], [data-hero-prev]) svg { color: #fff; stroke: #fff; }

    /* Existing section wrappers and cards remain exactly where the renderers
       put them; no products or controls are introduced, removed or re-ordered. */
    body[data-srk-page] #dynamic-view > div:has(> .product-container) > div:first-child {
        background: radial-gradient(circle at 90% 0, rgba(212, 175, 55, .13), transparent 40%), var(--srk-ink);
        border-radius: var(--srk-radius-feature);
        padding: 24px;
        box-shadow: var(--srk-shadow-card);
    }
    body[data-srk-page] #dynamic-view > div:has(> .product-container) > div:first-child h2 { color: #fff; }

    body[data-srk-page] article[data-product-id],
    body[data-srk-page] [data-blog-card],
    body[data-srk-page] #bundle-slider > div,
    body[data-srk-page] #about article[class~="bg-white"] {
        border-radius: var(--srk-radius-card);
        border-color: var(--srk-border);
        box-shadow: var(--srk-shadow-card);
    }

    body[data-srk-page] article[data-product-id]:hover,
    body[data-srk-page] [data-blog-card]:hover,
    body[data-srk-page] #bundle-slider > div:hover {
        border-color: rgba(212, 175, 55, .5);
        box-shadow: var(--srk-shadow-raised);
    }

    body[data-srk-page] article[data-product-id] > div:first-child {
        background-color: var(--srk-soft);
        border-bottom: 1px solid rgba(18, 23, 15, .045);
    }

    body[data-srk-page] article[data-product-id] h3 { font-size: 1.0625rem; }
    body[data-srk-page] article[data-product-id] .cart-icon-btn { background-color: var(--srk-soft); }
    body[data-srk-page] article[data-product-id] .cart-icon-btn:hover { background-color: var(--srk-ink); }
    body[data-srk-page] article[data-product-id] .cart-icon-btn svg { stroke: var(--srk-ink); }
    body[data-srk-page] article[data-product-id] .cart-icon-btn:is(:hover, :focus-visible) svg { stroke: #fff; }
    body[data-srk-page] article[data-product-id] .cart-icon-btn:focus-visible { background-color: var(--srk-ink); }

    body[data-srk-page] [data-category-card] {
        background: var(--srk-surface);
        padding: 10px 10px 18px;
        border: 1px solid var(--srk-border);
        border-radius: var(--srk-radius-card);
        box-shadow: var(--srk-shadow-card);
    }
    body[data-srk-page] [data-category-card] > div { border-radius: var(--srk-radius-control); background: var(--srk-soft); }
    body[data-srk-page] [data-category-card]:hover { border-color: rgba(212, 175, 55, .5); }
    body[data-srk-page] [data-category-card]:hover h3 { color: var(--srk-gold-ink); }

    body[data-srk-page] .srk-toolbar {
        border: 1px solid var(--srk-border);
        border-radius: var(--srk-radius-card);
        padding: 18px;
        background: var(--srk-surface);
        box-shadow: var(--srk-shadow-card);
    }
    body[data-srk-page] .srk-toolbar__label { color: var(--srk-muted); }

    /* Full-screen overlays stay full-screen; drawers stay drawers. */
    body[data-srk-page] .srk-overlay { background-color: var(--srk-canvas); }
    body[data-srk-page] .srk-overlay > header {
        background: var(--srk-surface);
        border-bottom: 1px solid var(--srk-border);
        box-shadow: 0 5px 22px rgba(18, 23, 15, .035);
    }
    body[data-srk-page] .srk-overlay > header h2 { letter-spacing: -.035em; }
    body[data-srk-page] .srk-drawer-panel { box-shadow: -18px 0 45px rgba(18, 23, 15, .14); }
    body[data-srk-page] .srk-drawer-panel > div:first-child { background: var(--srk-canvas); }
    body[data-srk-page] .srk-drawer-panel :is([class~="rounded-sm"], [class~="rounded-md"]) { border-radius: var(--srk-radius-control); }

    body[data-srk-page] .srk-field :where(input:not([readonly]):not(:disabled), textarea, .srk-select__trigger) {
        background: var(--srk-surface);
        border-color: rgba(18, 23, 15, .2);
        box-shadow: 0 2px 3px rgba(18, 23, 15, .015);
    }
    body[data-srk-page] .srk-field :is(input, textarea, .srk-select__trigger):focus-visible { border-color: var(--srk-gold-ink); }
    /* Never mask validation red with the neutral field border. */
    body[data-srk-page] .srk-field :is([aria-invalid="true"], .border-red-500) { border-color: #dc2626; }

    body[data-srk-page] #checkout-form > section,
    body[data-srk-page] #checkout-root aside > div {
        background: var(--srk-surface);
        border: 1px solid var(--srk-border);
        border-radius: var(--srk-radius-card);
        box-shadow: var(--srk-shadow-card);
    }
    body[data-srk-page] #checkout-form > section { padding: 24px; margin-bottom: 24px; }
    body[data-srk-page] #checkout-root aside > div { overflow: hidden; }
    body[data-srk-page] .payment-method-card { border-radius: var(--srk-radius-control); }

    /* Marketing pages share the dashboard's visual language without becoming
       an admin interface. All photography, copy and calls to action are kept. */
    body[data-srk-page] [data-machinery-hero] {
        background: radial-gradient(circle at 84% 22%, rgba(212, 175, 55, .12), transparent 34%), radial-gradient(circle at 4% 100%, rgba(66, 12, 20, .38), transparent 36%), var(--srk-ink);
        border-bottom: 1px solid rgba(212, 175, 55, .2);
    }
    body[data-srk-page] [data-machinery-hero-media] {
        border-radius: var(--srk-radius-feature);
        border-color: rgba(212, 175, 55, .3);
        box-shadow: 0 26px 65px rgba(0, 0, 0, .25);
    }
    body[data-srk-page] #hero-ctas a { min-height: 48px; }

    /* The three offer cards share the site's card geometry. The action strip
       is flush to the clipped outer card, not a separately rounded button. */
    body[data-srk-page="home"] .what-we-offer-content > .container-card {
        border-radius: var(--srk-radius-card);
        border-color: var(--srk-border);
        border-top-color: var(--srk-gold);
        box-shadow: var(--srk-shadow-card);
    }
    body[data-srk-page="home"] .what-we-offer-content > .container-card:hover {
        border-color: rgba(212, 175, 55, .5);
        box-shadow: var(--srk-shadow-raised);
    }
    body[data-srk-page="home"] .what-we-offer-content .container-card > a.cta {
        border-radius: 0;
        min-height: 56px;
        height: auto;
        gap: 16px;
        padding: 16px 20px;
        background-color: var(--srk-ink);
        color: var(--srk-gold-light);
        font-size: 1rem;
        line-height: 1.5;
        font-weight: 700;
        letter-spacing: .01em;
        text-transform: none;
    }
    body[data-srk-page="home"] .what-we-offer-content a.cta :is(span, svg, path) {
        color: inherit;
    }
    body[data-srk-page="home"] .what-we-offer-content a.cta svg { flex-shrink: 0; stroke: currentColor; }
    body[data-srk-page="home"] .what-we-offer-content .container-card > a.cta:is(:hover, :focus-visible) {
        background-color: var(--srk-gold-light);
        color: var(--srk-ink);
    }
    body[data-srk-page="home"] .what-we-offer-content .container-card > a.cta:focus-visible {
        outline: 2px solid var(--srk-ink);
        outline-offset: -5px;
    }
    body[data-srk-page] .why-choose-us { padding-block: 88px; }
    body[data-srk-page] .statistics-container { gap: 20px; }
    body[data-srk-page] .statistics-container .stat {
        background: var(--srk-surface);
        border: 1px solid var(--srk-border);
        border-radius: var(--srk-radius-card);
        padding: 32px 20px;
        box-shadow: var(--srk-shadow-card);
    }
    body[data-srk-page] .statistics-container .stat h3 { font-size: 2.25rem; color: var(--srk-ink); }
    body[data-srk-page] .statistics-container .stat > p:first-of-type { color: var(--srk-gold-ink); }

    body[data-srk-page] .srk-theme-hero {
        background: radial-gradient(circle at 90% 0, rgba(212, 175, 55, .16), transparent 35%), radial-gradient(circle at 0 100%, rgba(66, 12, 20, .36), transparent 38%), var(--srk-ink);
        color: #fff;
        border: 1px solid rgba(212, 175, 55, .16);
        border-radius: var(--srk-radius-feature);
        box-shadow: var(--srk-shadow-feature);
        height: auto;
        padding: 48px 32px;
    }
    body[data-srk-page] .srk-theme-hero h1 { color: #fff; }
    body[data-srk-page] .srk-theme-hero > p { color: rgba(255, 255, 255, .72); line-height: 1.7; }
    body[data-srk-page="catalogue"] .srk-theme-hero { width: calc(100% - 48px); max-width: 1232px; margin: 32px auto 0; }
    body[data-srk-page="blog"] main > section:first-child { padding: 32px 24px 40px; }
    body[data-srk-page="about"] #about { padding-top: 32px; }
    body[data-srk-page="article"] main > article > header {
        background: radial-gradient(circle at 88% 0, rgba(212, 175, 55, .07), transparent 36%), var(--srk-canvas);
    }
    body[data-srk-page="article"] .blog-prose { background: var(--srk-surface); margin-top: 40px; border-radius: var(--srk-radius-feature); box-shadow: var(--srk-shadow-card); }

    body[data-srk-page] .conversion-hub:not([class~="bg-white"]) {
        background: radial-gradient(circle at 90% 5%, rgba(212, 175, 55, .12), transparent 32%), radial-gradient(circle at 0 100%, rgba(66, 12, 20, .36), transparent 38%), var(--srk-ink);
    }
    body[data-srk-page] .conversion-hub:not([class~="bg-white"]) :is(input, textarea) {
        border-radius: var(--srk-radius-control);
        border-color: rgba(255, 255, 255, .25);
        background-color: rgba(255, 255, 255, .07);
    }
    body[data-srk-page] .conversion-hub:not([class~="bg-white"]) :is(input, textarea):focus-visible { outline-color: var(--srk-gold-light); }
    body[data-srk-page="contact"] .conversion-hub { background: transparent; padding-block: 56px; }
    body[data-srk-page="contact"] #enquiry-form {
        background: var(--srk-surface);
        border: 1px solid var(--srk-border);
        border-radius: var(--srk-radius-feature);
        padding: 32px;
        box-shadow: var(--srk-shadow-card);
    }
    body[data-srk-page="contact"] .connect-and-follow a[class~="border"] { border-radius: var(--srk-radius-control); box-shadow: var(--srk-shadow-card); }
    body[data-srk-page="contact"] #enquiry-form :is(input, textarea) { background: var(--srk-canvas); }

    body[data-srk-page="legal"] main > section:first-child { background: var(--srk-canvas); }
    body[data-srk-page="legal"] main > section:first-child > section:first-child { background: var(--srk-surface); border-right: 1px solid var(--srk-border); }
    body[data-srk-page="legal"] #policy-content { background: var(--srk-surface); }

    body[data-srk-page] > footer { background: var(--srk-surface); border-top-color: var(--srk-border); }
    body[data-srk-page] > footer a:hover { color: var(--srk-gold-ink); }

    body[data-srk-page="payment"] { font-family: "Manrope", sans-serif; }
    body[data-srk-page="payment"] #payment-main {
        background: radial-gradient(circle at 85% 10%, rgba(212, 175, 55, .14), transparent 30%), radial-gradient(circle at 0 100%, rgba(66, 12, 20, .35), transparent 35%), var(--srk-ink);
    }
    body[data-srk-page="payment"] #payment-main section { border-radius: var(--srk-radius-feature); box-shadow: var(--srk-shadow-feature); }
    body[data-srk-page="payment"] .eyebrow { color: var(--srk-gold-ink); }

    .srk-skip-link { position: fixed; top: .5rem; left: .5rem; z-index: 10000; padding: .7rem 1rem; background: #fff; color: #12170f; transform: translateY(-180%); }
    .srk-skip-link:focus { transform: translateY(0); outline: 3px solid #705714; outline-offset: 2px; }

    /* Readable secondary copy on the site's light surfaces. These exact
       utilities only paint dark text; white-on-dark hero copy is untouched. */
    body[data-srk-page] :is([class~="text-[#1f271b]/30"], [class~="text-[#1f271b]/40"], [class~="text-[#1f271b]/45"], [class~="text-[#1f271b]/50"], [class~="text-[#1f271b]/55"], [class~="text-[#1f271b]/60"], [class~="text-[#12170f]/30"], [class~="text-[#12170f]/40"], [class~="text-[#12170f]/50"]) { color: #586151; }
    body[data-srk-page] :is(.srk-overlay, .srk-drawer-panel, #checkout-root) :is(a, button, label span)[class~="text-[#d4af37]"] { color: var(--srk-gold-ink); }
    body[data-srk-page] :is(.srk-overlay, .srk-drawer-panel, #checkout-root) :is(input, textarea)::placeholder { color: #63695f; opacity: 1; }
    body[data-srk-page] .srk-enquiry-field { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
    body[data-srk-page] .srk-enquiry-label { display: block; font-size: 14px; font-weight: 600; color: inherit; }
    body[data-srk-page] .srk-enquiry-label small { color: inherit; font-size: 12px; font-weight: 500; }
    body[data-srk-page] .conversion-hub .srk-enquiry-label { color: #fff; }
    body[data-srk-page] .conversion-hub :is(input, textarea)::placeholder { color: #b9bdb5; opacity: 1; }
    body[data-srk-page="contact"] #enquiry-form .srk-enquiry-label { color: var(--srk-copy); }
    body[data-srk-page="contact"] #enquiry-form :is(input, textarea)::placeholder { color: #63695f; }
    body[data-srk-page] #machinery-hero-pause { min-width: 44px; min-height: 44px; padding: 8px 16px; border: 1px solid #e4c55c; border-radius: var(--srk-radius-control); color: #fff; background: #12170f; }
    /* Content never depends on a reveal callback to become readable. */
    body[data-srk-page] .scroll-reveal { opacity: 1 !important; transform: none !important; }
    @media (prefers-reduced-motion: reduce) {
        body[data-srk-page] *, body[data-srk-page] *::before, body[data-srk-page] *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    }

    @media (max-width: 767px) {
        body[data-srk-page="store"] #store-content > div:first-child { padding: 10px; gap: 8px; }
        body[data-srk-page] #store-search { padding-right: 12px; font-size: 16px; }
        body[data-srk-page] :is(.srk-field input, .srk-field textarea, .conversion-hub input, .conversion-hub textarea) { font-size: 16px; }
        body[data-srk-page] .srk-theme-hero { padding: 32px 22px; }
        body[data-srk-page] .srk-theme-hero h1 { font-size: clamp(1.8rem, 7vw, 2.5rem); }
        body[data-srk-page="catalogue"] .srk-theme-hero { width: calc(100% - 32px); margin-top: 20px; }
        body[data-srk-page="blog"] main > section:first-child { padding: 20px 16px 32px; }
        body[data-srk-page] #checkout-form > section { padding: 20px 16px; }
        body[data-srk-page="contact"] #enquiry-form { padding: 24px 20px; }
        body[data-srk-page] .srk-toolbar { padding: 14px; }
        body[data-srk-page] .why-choose-us { padding-block: 56px; }
    }
}

/* Read-only product pages reuse the dashboard-inspired storefront palette. */
.srk-product-page { margin: 0; background: #f5f5ef; color: #20271c; font: 16px/1.7 "Manrope", sans-serif; }
.srk-product-page * { box-sizing: border-box; }
.srk-product-page a { color: #705714; text-underline-offset: .2em; }
.srk-product-page a:focus-visible { outline: 3px solid #705714; outline-offset: 4px; }
.srk-product-header, .srk-product-footer { padding: 24px max(24px, calc((100vw - 1200px)/2)); background: #fff; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; border-block: 1px solid #dfe1d8; }
.srk-product-header > a { font-size: 22px; font-weight: 800; color: #12170f; }
.srk-product-header nav { display: flex; gap: 24px; flex-wrap: wrap; }
.srk-product-header a, .srk-product-footer a { min-height: 44px; display: inline-flex; align-items: center; }
.srk-product-main { max-width: 1248px; padding: 40px 24px 72px; margin: auto; min-height: 65vh; overflow-wrap: anywhere; }
.srk-product-main h1 { font: 700 clamp(2rem, 4vw, 3.5rem)/1.15 "Schibsted Grotesk", sans-serif; margin: 12px 0 24px; color: #12170f; }
.srk-product-main p { margin: 16px 0; }
.srk-product-eyebrow { text-transform: uppercase; letter-spacing: .12em; color: #705714; font-size: 13px; font-weight: 700; }
.srk-product-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.srk-product-photo { background: #fff; padding: 24px; border-radius: 18px; border: 1px solid #dfe1d8; }
.srk-product-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.srk-product-description { white-space: pre-line; }
.srk-product-page .srk-product-cta { display: inline-flex; padding: 12px 24px; min-height: 48px; border-radius: 8px; background: #12170f; color: #fff; font-weight: 700; text-decoration: none; margin: 16px 16px 16px 0; }
.srk-product-secondary { display: inline-flex; min-height: 48px; align-items: center; }
.srk-product-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; padding: 0; margin: 0 0 40px; font-size: 14px; }
.srk-product-breadcrumb li + li::before { content: "›"; margin-right: 12px; color: #586151; }
.srk-product-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px; margin-top: 32px; }
.srk-product-list li { background: #fff; border: 1px solid #dfe1d8; border-radius: 12px; padding: 24px; }
.srk-product-list a { display: inline-block; padding-block: 8px; font-weight: 700; font-size: 20px; }
.srk-product-skip { position: fixed; top: 8px; left: 8px; padding: 12px; background: #fff; transform: translateY(-200%); z-index: 100; }
.srk-product-skip:focus { transform: none; }
@media (max-width: 767px) { .srk-product-grid { grid-template-columns: 1fr; gap: 24px; } .srk-product-header, .srk-product-footer { padding: 16px 24px; } }