/* Self-hosted Inter font (eliminates Google Fonts round-trips) */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/inter/inter-400.woff2) format("woff2");
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/inter/inter-600.woff2) format("woff2");
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/inter/inter-700.woff2) format("woff2");
}
/* Right sidebar wider at xl to match product detail page right-rail proportions */
@media (min-width: 80rem) {
    body.page-layout-3columns {
        --page-layout: 240px minmax(0, 1fr) 300px;
    }
    /* When layered nav has nothing to render (e.g. KVC part-finder narrow filter),
       the .sidebar-main child disappears and the 3-track grid otherwise places
       .column.main in the 240px left slot. Pin each known column to its slot so
       the main content always gets the wide 1fr track regardless of siblings. */
    body.page-layout-3columns .columns > .sidebar-main { grid-column: 1; }
    body.page-layout-3columns .columns > .column.main { grid-column: 2; }
    body.page-layout-3columns .columns > .sidebar-additional { grid-column: 3; }
}

/* ── Site-wide: map Hyvä primary to Keystation brand red ─────────────────── */
:root {
    --color-primary:         #C41818;
    --color-primary-lighter: #e53535;
    --color-primary-darker:  #9b1313;
    --color-on-primary:      #ffffff;
    --form-active-color:     #C41818;
}

/* ════════════════════════════════════════════════════════════════════════
   SECONDARY TEXT — bumped up site-wide for readability
   Targets all the small captions, subtitles, body descriptions across the
   theme. Headings (h1–h4) and primary text are unchanged.
   ════════════════════════════════════════════════════════════════════════ */

/* Bump Tailwind's standard small-text classes */
.text-\[10px\]  { font-size: 11.5px !important; }
.text-\[10\.5px\] { font-size: 12px !important; }
.text-\[11px\]  { font-size: 12.5px !important; }
.text-\[11\.5px\] { font-size: 13px !important; }
.text-\[12px\]  { font-size: 13px !important; }
.text-\[12\.5px\] { font-size: 13.5px !important; }
.text-xs        { font-size: 13px !important; line-height: 1.5 !important; }   /* was 12px */
.text-sm        { font-size: 15px !important; line-height: 1.55 !important; }  /* was 14px */
.text-base      { font-size: 16.5px !important; line-height: 1.6 !important; } /* was 16px */

/* Inline secondary text (helper / meta / muted) */
.text-gray-400, .text-gray-500 {
    /* slight typography refinement only; size handled above */
    font-weight: 500;
}

/* Inline-styled small text in templates (some templates use inline font-size) */
[style*="font-size:9px"]    { font-size: 11px !important; }
[style*="font-size:9.5px"]  { font-size: 11.5px !important; }
[style*="font-size:10px"]   { font-size: 12px !important; }
[style*="font-size:10.5px"] { font-size: 12.5px !important; }
[style*="font-size:11px"]   { font-size: 12.5px !important; }
[style*="font-size:11.5px"] { font-size: 13px !important; }
[style*="font-size:12px"]   { font-size: 13.5px !important; }
[style*="font-size:12.5px"] { font-size: 14px !important; }
[style*="font-size:13px"]   { font-size: 14px !important; }
[style*="font-size:13.5px"] { font-size: 14.5px !important; }
[style*="font-size:14px"]   { font-size: 15px !important; }

/* ════════════════════════════════════════════════════════════════════════
   GLOBAL FULL-WIDTH PAGES
   Mac & wide-screen displays often have 1440-2560px viewports.
   Default 1280px max-width leaves huge empty side margins on those screens.
   This block makes every Keystation page wrapper fill 100% of available width
   while keeping comfortable side padding so content never touches the edges.
   ════════════════════════════════════════════════════════════════════════ */
.ks-home .max-w-7xl,
.ks-faq [style*="max-width:1280px"],
.ks-rewards .max-w-7xl,
.ks-cart .max-w-7xl,
.ks-track .max-w-7xl,
.ks-os .max-w-7xl,
.ks-shipping .max-w-7xl,
.ks-privacy .max-w-7xl,
.ks-terms .max-w-7xl,
.ks-b2bt .max-w-7xl,
.ks-click .max-w-7xl,
.ks-locator .max-w-screen-2xl,
.ks-story .max-w-7xl,
.ks-contact [style*="max-width:1280px"],
.ks-brands .max-w-7xl,
.ks-brand .max-w-7xl,
.ks-blog .bl-container,
.ks-post .bp-container {
    max-width: 100% !important;
    width: 100% !important;
}

/* Full width + full height on every device */
.ks-home,
.ks-faq,
.ks-rewards,
.ks-cart,
.ks-track,
.ks-os,
.ks-shipping,
.ks-privacy,
.ks-terms,
.ks-b2bt,
.ks-click,
.ks-locator,
.ks-story,
.ks-contact,
.ks-brands,
.ks-brand,
.ks-blog,
.ks-post {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh !important;
}

/* ════════════════════════════════════════════════════════
   FULL WIDTH + FULL HEIGHT — html / body / page wrapper / main
   Applies to ALL devices: Mac, desktop, laptop, tablet, mobile
   ════════════════════════════════════════════════════════ */
html {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    background:#fff;
}
body {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box;
    background:#fff;
}

/* Magento page chrome — make every wrapper layer go full width */
.page-wrapper,
.page-wrapper > *,
.page-main,
.page-main > .columns,
.page-main > .columns > .column.main,
main#maincontent,
main {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* The page-main column should NOT force min-height (was causing empty white space below short pages) */

/* ════════════════════════════════════════════════════════
   HEADER & FOOTER — TRUE 100% width on every device
   Keystation header/footer use Tailwind .max-w-screen-2xl
   (1536px) for inner content — override that to 100%.
   ════════════════════════════════════════════════════════ */

/* Outer header/footer wrappers — full width */
header, footer,
header.page-header, footer.page-footer,
.page-header, .page-footer,
.header, .footer {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* INNER container in header/footer — was capped at max-w-screen-2xl (1536px) */
header .max-w-screen-2xl,
footer .max-w-screen-2xl,
.page-header .max-w-screen-2xl,
.page-footer .max-w-screen-2xl,
/* Keystation footer/header use these wrapper classes too */
.bg-footer-bg, .bg-footer-bg .max-w-screen-2xl,
.bg-footer-dark, .bg-footer-dark .max-w-screen-2xl {
    max-width: 100% !important;
    width: 100% !important;
}

/* ── Cart page ─────────────────────────────────────────────────────────────── */
.checkout-cart-index {
    --color-primary:         #C41818;
    --color-primary-lighter: #e53535;
    --color-primary-darker:  #9b1313;
    --color-on-primary:      #ffffff;
    --form-active-color:     #C41818;
}

/* ── Hyva Checkout page ─────────────────────────────────────────────────────── */
.checkout-index-index {
    --color-primary:         #C41818;
    --color-primary-lighter: #e53535;
    --color-primary-darker:  #9b1313;
    --color-on-primary:      #ffffff;
    --form-active-color:     #C41818;
    background-color:        #F4F5F9;
}

/* Checkout page header — dark brand */
.checkout-index-index .page-header {
    background-color: #0E1025 !important;
    border-bottom: 3px solid #C41818 !important;
}

.checkout-index-index .page-header .logo span,
.checkout-index-index .page-header .logo img {
    filter: brightness(0) invert(1);
}

/* Make progress bar steps larger and branded */
.checkout-index-index .progress-bar {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #EAECF0;
    padding: 16px 24px;
    margin-bottom: 24px;
    box-shadow: 0 1px 8px rgba(0,0,0,0.05);
}

/* Section cards */
.checkout-index-index .checkout-summary,
.checkout-index-index .area-main > * {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #EAECF0;
    box-shadow: 0 1px 8px rgba(0,0,0,0.04);
    overflow: hidden;
}

/* Card headers */
.checkout-index-index [class*="step-title"],
.checkout-index-index .checkout-summary > h2,
.checkout-index-index .checkout-summary > div:first-child {
    background: #0E1025;
    color: #fff;
    font-weight: 800;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 14px 20px;
}

/* Form inputs */
.checkout-index-index input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]),
.checkout-index-index select,
.checkout-index-index textarea {
    border-color: #D1D5DB;
    border-radius: 8px;
    height: 42px;
}

.checkout-index-index input:focus:not([type=radio]):not([type=checkbox]),
.checkout-index-index select:focus {
    border-color: #C41818;
    box-shadow: 0 0 0 3px rgba(196,24,24,0.1);
    outline: none;
}

/* Place order button */
.checkout-index-index .btn-primary,
.checkout-index-index [class*="place-order"] button,
.checkout-index-index [class*="checkout-nav-main"] button {
    background: #C41818 !important;
    border-color: #C41818 !important;
    border-radius: 10px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}

.checkout-index-index .btn-primary:hover,
.checkout-index-index [class*="place-order"] button:hover {
    background: #a01414 !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(196,24,24,0.3);
}

/* Grand total — red */
.checkout-index-index [class*="grand-total"] .price,
.checkout-index-index [class*="totals-grand"] .price {
    color: #C41818;
    font-weight: 900;
}


/* ════════════════════════════════════════════════════════
   CHECKOUT PAGE — Premium brand-colored design
   Targets Hyva_Checkout one-step layout
   ════════════════════════════════════════════════════════ */

/* Page wrapper background */
.checkout-index-index {
    background: #F7F8FB !important;
}

/* Section headings with red accent */
.checkout-index-index h2,
.checkout-index-index .text-2xl,
.checkout-index-index .text-xl {
    color: #0E1025 !important;
    font-weight: 800 !important;
    letter-spacing: -0.005em;
    position: relative;
}

/* Step number circles (1, 2, 3) */
.checkout-index-index .checkout-step-number,
.checkout-index-index [class*='step-circle'],
.checkout-index-index .rounded-full.bg-primary {
    background: #C41818 !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(196,24,24,0.25) !important;
}

/* Primary button (Place Order, Next Step, etc.) — BRAND RED */
.checkout-index-index .btn-primary,
.checkout-index-index button[type='submit'],
.checkout-index-index .btn.btn-primary,
.checkout-index-index button.bg-primary,
.checkout-index-index .action.primary {
    background: #C41818 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 22px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s !important;
    box-shadow: 0 4px 14px rgba(196,24,24,0.18) !important;
}
.checkout-index-index .btn-primary:hover,
.checkout-index-index button[type='submit']:hover,
.checkout-index-index .btn.btn-primary:hover,
.checkout-index-index button.bg-primary:hover,
.checkout-index-index .action.primary:hover {
    background: #a81414 !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(196,24,24,0.28) !important;
}

/* Secondary button — BRAND BLUE outlined */
.checkout-index-index .btn-secondary,
.checkout-index-index .btn.btn-secondary,
.checkout-index-index button.bg-secondary,
.checkout-index-index .action.secondary {
    background: #fff !important;
    color: #0535F5 !important;
    border: 2px solid #0535F5 !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    font-weight: 700 !important;
    transition: background 0.15s, color 0.15s !important;
}
.checkout-index-index .btn-secondary:hover,
.checkout-index-index .btn.btn-secondary:hover,
.checkout-index-index button.bg-secondary:hover {
    background: #0535F5 !important;
    color: #fff !important;
}

/* Input fields */
.checkout-index-index input[type='text'],
.checkout-index-index input[type='email'],
.checkout-index-index input[type='tel'],
.checkout-index-index input[type='password'],
.checkout-index-index input[type='number'],
.checkout-index-index select,
.checkout-index-index textarea,
.checkout-index-index .form-input {
    border: 1.5px solid #E5E7EB !important;
    border-radius: 8px !important;
    padding: 11px 14px !important;
    font-size: 14px !important;
    background: #fff !important;
    color: #0E1025 !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
}
.checkout-index-index input:focus,
.checkout-index-index select:focus,
.checkout-index-index textarea:focus,
.checkout-index-index .form-input:focus {
    border-color: #0535F5 !important;
    box-shadow: 0 0 0 3px rgba(5,53,245,0.10) !important;
    outline: none !important;
}

/* Checkbox + radio — accent color brand-blue */
.checkout-index-index input[type='checkbox'],
.checkout-index-index input[type='radio'] {
    accent-color: #0535F5 !important;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Selected radio/method card highlight */
.checkout-index-index .ring-primary,
.checkout-index-index .border-primary,
.checkout-index-index [class*='selected-method'] {
    border-color: #0535F5 !important;
    box-shadow: 0 0 0 3px rgba(5,53,245,0.10) !important;
}

/* Order summary card */
.checkout-index-index .checkout-summary,
.checkout-index-index .order-summary {
    background: #fff !important;
    border: 1px solid #EAECF0 !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 14px rgba(14,16,37,0.04) !important;
    padding: 22px 24px !important;
}

/* Summary heading */
.checkout-index-index .checkout-summary h3,
.checkout-index-index .order-summary h2,
.checkout-index-index .order-summary h3 {
    color: #0E1025 !important;
    font-weight: 800 !important;
    border-bottom: 1px solid #F3F4F6 !important;
    padding-bottom: 10px !important;
    margin-bottom: 14px !important;
}

/* Grand total — BRAND RED */
.checkout-index-index .grand-total,
.checkout-index-index .grand-total *,
.checkout-index-index [class*='grand-total'] {
    color: #C41818 !important;
    font-weight: 800 !important;
}

/* Links — brand blue */
.checkout-index-index a {
    color: #0535F5 !important;
}
.checkout-index-index a:hover {
    color: #C41818 !important;
}

/* Coupon / discount input row */
.checkout-index-index .discount-coupon {
    border: 1px dashed #E5E7EB;
    border-radius: 10px;
    padding: 14px;
    background: #FAFBFC;
}

/* Step section card spacing */
.checkout-index-index .checkout-step,
.checkout-index-index .area-main > div {
    background: #fff !important;
    border: 1px solid #EAECF0 !important;
    border-radius: 14px !important;
    margin-bottom: 14px !important;
    overflow: hidden;
}

/* Disabled buttons */
.checkout-index-index button:disabled,
.checkout-index-index .btn:disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
}

/* ════════════════════════════════════════════════════════
   Mobile: close gap between header search bar and page content
   The mobile search bar in header.phtml has pb-3 (0.75rem). We
   pull every page wrapper up to sit flush with the search bar.
   ════════════════════════════════════════════════════════ */
@media(max-width:767px){
    .ks-click,.ks-contact,.ks-cp,.ks-privacy,.ks-rewards,.ks-shipping,.ks-story,.ks-terms,.ks-track,.ks-locator,
    .ks-faq{
        margin-top:-2.5rem !important;
        padding-top:0 !important;
    }
}

/* ════════════════════════════════════════════════════════
   Unified white background across all pages (match home page).
   Targets every ks-* page wrapper. Plus blog wrapper.
   ════════════════════════════════════════════════════════ */
.ks-click,.ks-contact,.ks-cp,.ks-privacy,.ks-rewards,.ks-shipping,.ks-story,.ks-terms,.ks-track,.ks-locator,.ks-faq,
.bl-page{
    background:#ffffff !important;
}

/* ════════════════════════════════════════════════════════
   Fold / very narrow phones (≤479px) — restore small gap
   between header search bar and page hero (the -2.5rem pull
   used on 480-767px crowded out the fold cover screen).
   ════════════════════════════════════════════════════════ */
@media(max-width:479px){
    .ks-home,
    .ks-click,.ks-contact,.ks-cp,.ks-privacy,.ks-rewards,.ks-shipping,.ks-story,.ks-terms,.ks-track,.ks-locator,.ks-faq{
        margin-top:0 !important;
    }
}

/* ════════════════════════════════════════════════════════
   Product list "Add to Basket" button — consistent size across
   saleable / out-of-stock / configurable states. Smaller inner.
   ════════════════════════════════════════════════════════ */
.ks-cart-row{align-items:stretch}
.ks-cart-btn{
    font-size:10px;
    padding:.5rem .35rem;
    min-height:32px;
    line-height:1.1;
    letter-spacing:.03em;
    gap:.3rem;
}
.ks-cart-btn-icon{width:11px;height:11px;flex-shrink:0}

/* Out-of-stock state — match button height so cards stay aligned */
.ks-cart-row > .flex-1.text-gray-400{
    min-height:32px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:10px !important;
    background:#F3F4F6;
    border-radius:6px;
    padding:.4rem .35rem;
}

/* Wishlist wrapper — keep heart icon aligned with button */
.ks-cart-wish{display:inline-flex;align-items:stretch}
.ks-cart-wish > *{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:32px;
    min-height:32px;
}

@media(max-width:639px){
    .ks-cart-row{gap:.3rem !important}
    .ks-cart-btn{
        font-size:10.5px !important;
        padding:.5rem .3rem !important;
        min-height:34px !important;
        gap:.25rem !important;
        letter-spacing:.02em !important;
    }
    .ks-cart-btn-icon{width:12px !important;height:12px !important}
    .ks-cart-row > .flex-1.text-gray-400{
        min-height:34px !important;
        font-size:10.5px !important;
    }
    .ks-cart-wish > *{min-width:34px !important;min-height:34px !important}
}
@media(max-width:374px){
    .ks-cart-btn{
        font-size:9.5px !important;
        letter-spacing:0 !important;
    }
    .ks-cart-btn-icon{width:11px !important;height:11px !important}
}

/* ═══════════════════════════════════════════════════════════════════
   TOAST MESSAGES — turn Hyvä's #messages block into a floating toast.
   Pure CSS override, no template/module changes needed.
   - Slides in from top-right
   - Success/error/warning/notice color-coded
   - Close (X) button always visible
   - Success auto-dismisses (timer set in admin: Stores → Config → Hyvä → Theme Settings → Messages)
   - Errors stay until user clicks X (intentional — forces acknowledgment)
   ═══════════════════════════════════════════════════════════════════ */
#messages {
    position: fixed !important;
    /* Push BELOW the fixed header. Header height varies by viewport — clamp
       picks a value that always clears the header. */
    top: clamp(4.5rem, 13vh, 9.5rem);
    right: 1rem;
    left: auto;
    z-index: 2147483647 !important;
    pointer-events: none;       /* parent doesn't catch clicks; children do */
    max-width: 380px;
    width: calc(100vw - 2rem);
}
@media(max-width: 640px) {
    #messages {
        top: 4.5rem;
        right: 0.5rem;
        left: 0.5rem;
        max-width: none;
        width: auto;
    }
}
#messages > .w-full,
#messages .messages {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}
#messages .message {
    position: relative;
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .75rem 1rem;
    margin-bottom: .5rem;
    border-radius: .5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .15), 0 2px 6px rgba(0, 0, 0, .08);
    font-size: .875rem;
    line-height: 1.4;
    color: #fff;
    background: #0E1025;
    border-left: 4px solid #0E1025;
    animation: ks-toast-in .25s cubic-bezier(.16,1,.3,1);
}
#messages .message.success {
    background: #ECFDF5;
    color: #065F46;
    border-left-color: #059669;
}
#messages .message.error {
    background: #FEF2F2;
    color: #991B1B;
    border-left-color: #C41818;
}
#messages .message.warning {
    background: #FFFBEB;
    color: #92400E;
    border-left-color: #F59E0B;
}
#messages .message.notice {
    background: #EFF6FF;
    color: #1E40AF;
    border-left-color: #0535F5;
}
#messages .message > span {
    flex: 1;
    min-width: 0;
    word-wrap: break-word;
}
#messages .message > button {
    flex-shrink: 0;
    padding: 2px;
    margin-left: .5rem;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: currentColor;
    opacity: .6;
    line-height: 0;
    transition: opacity .15s;
}
#messages .message > button:hover {
    opacity: 1;
}
@keyframes ks-toast-in {
    from { transform: translateX(20px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
@media (max-width: 480px) {
    #messages {
        top: 4rem;
        right: .5rem;
        left: .5rem;
        max-width: none;
        width: auto;
    }
}


/* ===== PERF: content-visibility for below-fold sections =====
   Tells the browser to skip layout/paint work for off-screen sections
   until the user scrolls them near the viewport. The contain-intrinsic-size
   reserves layout space so CLS stays 0.
   Refs: https://web.dev/articles/content-visibility */
.pop-wrap,
.svc-row,
.tst-row {
    content-visibility: auto;
    contain-intrinsic-size: 1px 500px;
}
.blog-grid {
    content-visibility: auto;
    contain-intrinsic-size: 1px 400px;
}