/* Shared storefront presentation. Business rules remain in Django views. */
.irenfix-storefront {
    --ux-ink: #252b32;
    --ux-muted: #626a73;
    --ux-line: #e4e5e7;
    --ux-accent: #865900;
    --ux-surface: #fff;
    --ux-radius: 1.25rem;
    background: #f7f8fa;
    color: var(--ux-ink);
    line-height: 1.85;
}

.irenfix-storefront :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid #865900;
    outline-offset: 4px;
    scroll-margin-block: calc(var(--irenfix-header-height) + 1rem) 6rem;
}

.irenfix-skip-link {
    position: fixed;
    inset-block-start: .75rem;
    inset-inline-start: 1rem;
    z-index: 1100;
    padding: .75rem 1.25rem;
    border-radius: .75rem;
    color: #fff;
    background: #252b32;
    transform: translateY(-200%);
}

.irenfix-skip-link:focus { transform: translateY(0); color: #fff; }
.irenfix-storefront #content:focus { outline: none; }
.irenfix-storefront .text-muted { color: var(--ux-muted) !important; }
.irenfix-storefront :where(.btn, .form-control, .form-select) { border-radius: .75rem; }
.irenfix-storefront :where(.btn:not(.btn-icon), .form-control, .form-select) { min-height: 44px; }
.irenfix-storefront .btn-primary {
    color: #fff;
    background: var(--ux-accent);
    border-color: var(--ux-accent);
}
.irenfix-storefront .btn-primary:is(:hover, :focus-visible, :active) {
    color: #fff;
    background: #684500;
    border-color: #684500;
}
.irenfix-storefront .btn-outline-primary { color: var(--ux-accent); border-color: var(--ux-accent); }
.irenfix-storefront .btn-outline-primary:is(:hover, :active) { color: #fff; background: var(--ux-accent); }
.irenfix-storefront .card { border-color: var(--ux-line); box-shadow: 0 3px 14px #252b3206; }

/* A compact, consistent frame leaves more room for the products. */
.irenfix-storefront :is(.irenfix-header-container, .irenfix-footer-inner, .irenfix-home-wide) {
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 3vw, 2.5rem);
}
.irenfix-storefront .irenfix-header-top { padding-block: .85rem; }
.irenfix-storefront .irenfix-fixed-header { z-index: 1040; }
.irenfix-storefront .irenfix-header-top-inner { gap: 2rem; }
.irenfix-storefront .irenfix-header-search { margin-inline-end: auto; }
.irenfix-storefront .irenfix-search-form {
    max-width: 760px;
    background: #f4f5f6;
    border: 1px solid var(--ux-line);
    border-radius: .9rem;
}
.irenfix-storefront .irenfix-search-input::placeholder { color: #626a73; }
.irenfix-storefront .irenfix-header-action-button { border-color: var(--ux-line); border-radius: .8rem; }
.irenfix-storefront .irenfix-cart-count { background: var(--ux-accent); }
.irenfix-storefront .irenfix-main-navigation .nav-link { font-weight: 600; }
.irenfix-mobile-nav { display: none; }

/* Calm, manually controlled hero and immediately available shopping paths. */
.irenfix-storefront .irenfix-home { background: #f7f8fa; padding-top: 1.5rem; }
.irenfix-storefront .irenfix-home-hero {
    width: calc(100% - 2 * clamp(1rem, 3vw, 2.5rem));
    max-width: 1360px;
    margin: 0 auto 1rem;
    border-radius: 1.5rem;
    overflow: hidden;
}
.irenfix-storefront .irenfix-home-banner-slider {
    height: clamp(21rem, 30vw, 27rem);
    border-radius: 1.5rem;
    box-shadow: none;
}
.irenfix-storefront .irenfix-home-banner-copy {
    width: 62%;
    padding: clamp(2rem, 4vw, 4rem);
}
.irenfix-storefront .irenfix-home-banner-copy :is(h1, .h1) {
    max-width: 18ch;
    font-size: clamp(1.75rem, 3vw, 2.8rem);
    line-height: 1.55;
}
.irenfix-storefront .irenfix-home-banner-copy p { font-size: 1rem; }
.irenfix-storefront .irenfix-home-banner { height: 100%; }
.irenfix-storefront .irenfix-home-banner-copy .btn-primary {
    color: #252b32;
    background: #f2c66a;
    border-color: #f2c66a;
    padding-inline: 1.5rem;
}
.irenfix-storefront .irenfix-home-banner-prev,
.irenfix-storefront .irenfix-home-banner-next { width: 44px; height: 44px; }
.irenfix-storefront .irenfix-home-banner-pagination .swiper-pagination-bullet {
    width: 26px;
    height: 26px;
    border: 9px solid transparent;
    background-clip: content-box;
}
.irenfix-storefront .irenfix-home-banner-pagination .swiper-pagination-bullet-active { width: 42px; }
.irenfix-shopping-paths {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 2.5rem;
}
.irenfix-shopping-paths a {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--ux-line);
    border-radius: 1rem;
    color: var(--ux-ink);
    background: #fff;
}
.irenfix-shopping-paths a:hover { border-color: #b38e46; }
.irenfix-shopping-paths i { color: var(--ux-accent); font-size: 1.5rem; }
.irenfix-shopping-paths strong { display: block; font-size: .95rem; }
.irenfix-shopping-paths small { display: block; color: var(--ux-muted); }
.irenfix-storefront .irenfix-home-section { margin-bottom: 3rem; }
.irenfix-storefront .irenfix-section-heading h2 { font-size: clamp(1.2rem, 2vw, 1.65rem); }
.irenfix-storefront .irenfix-home-category-card { border: 1px solid var(--ux-line); box-shadow: none; background: #fff; }
.irenfix-storefront .irenfix-home-category-media { box-shadow: none; }
.irenfix-storefront .irenfix-amazing-shell { border-radius: var(--ux-radius); box-shadow: none; }
.irenfix-storefront .irenfix-home-benefits { margin-block: 1rem 3rem; padding-block: 2.5rem; background: #252b32; }
.irenfix-storefront .irenfix-benefit-card { box-shadow: none; }
.irenfix-storefront .irenfix-newsletter-card { background: #fff; border-color: var(--ux-line); box-shadow: none; }

/* The same readable card follows a product across all storefront lists. */
.irenfix-storefront .product-card-grid:not(.irenfix-amazing-product-grid) {
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 1rem;
}
.irenfix-storefront .product-card-grid .product-grid-card { width: 100%; }
.irenfix-storefront .product-grid-card { border: 1px solid var(--ux-line); box-shadow: none; border-radius: 1rem; }
.irenfix-storefront .product-grid-card:hover { border-color: #c4b189; box-shadow: 0 6px 20px #252b320a; transform: none; }
.irenfix-storefront .product-grid-card .card-img-top { padding: .65rem; background: #fff; }
.irenfix-storefront .product-grid-card .card-body { padding: 1rem; }
.irenfix-storefront .product-grid-card .card-title { font-size: 1rem; }
.irenfix-storefront .product-grid-card-categories { font-size: .78rem; }
.irenfix-storefront .product-grid-card-price .card-text { font-size: 1.08rem; gap: .2rem; }
.irenfix-storefront .product-grid-card-old-price { color: var(--ux-muted); font-size: .8rem; }
.irenfix-storefront .product-grid-card .product-grid-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .65rem 1rem 1rem;
}
.irenfix-product-stock { color: #216345; font-size: .75rem; font-weight: 600; }
.irenfix-product-stock.is-unavailable { color: #9c3434; }
.irenfix-storefront .product-grid-card [data-product-rating] { color: var(--ux-muted); font-size: .75rem; }
.irenfix-storefront .product-grid-card .btn-icon { min-width: 44px; min-height: 44px; }

/* Catalog, product details and account forms share the same rhythm. */
.irenfix-catalog { padding-block: 2rem 3rem; }
.irenfix-catalog-heading { margin-bottom: 1.5rem; }
.irenfix-catalog-heading h1 { margin: 0 0 .35rem; font-size: clamp(1.4rem, 2.5vw, 2rem); }
.irenfix-catalog-heading p { margin: 0; color: var(--ux-muted); }
.irenfix-catalog-toolbar { margin-bottom: 1.25rem !important; }
.irenfix-catalog .product-card-grid { margin-bottom: 2rem !important; }
.irenfix-active-search { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.irenfix-active-search span { border: 1px solid #e3d1a8; background: #fff7e6; padding: .4rem .8rem; border-radius: .65rem; }
.irenfix-storefront :is(.product-main-panel, .product-content-section, .product-purchase-card) {
    border: 1px solid var(--ux-line);
    border-radius: var(--ux-radius);
    box-shadow: none;
}
.irenfix-storefront .product-gallery-stage { background: #f8f9fa; border-radius: 1rem; }
.irenfix-storefront .product-summary-card { background: #f8f9fa; }
.irenfix-storefront .product-title { line-height: 1.6; }
.irenfix-auth-page { max-width: 34rem; margin-inline: auto; padding: 2.5rem 1rem; }
.irenfix-auth-icon { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin: 0 auto 1.25rem; border-radius: 1rem; background: #fff3d9; color: var(--ux-accent); font-size: 1.65rem; }
.irenfix-auth-page .card { border-radius: var(--ux-radius); }

/* Progress is descriptive: it never bypasses checkout session validation. */
.irenfix-checkout-progress { margin-bottom: 1.75rem; }
.irenfix-checkout-progress ol {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.irenfix-checkout-progress li {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .85rem 1rem;
    border-bottom: 2px solid #d8dce1;
    color: var(--ux-muted);
    font-size: .85rem;
}
.irenfix-checkout-progress li > span {
    display: grid;
    place-items: center;
    flex: 0 0 1.8rem;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: #e9ecf0;
}
.irenfix-checkout-progress li[aria-current="step"] { border-color: var(--ux-accent); color: #674400; font-weight: 700; }
.irenfix-checkout-progress li[aria-current="step"] > span { color: #fff; background: var(--ux-accent); }
.irenfix-storefront :is(.irenfix-checkout-section-card, .irenfix-checkout-address-card) { box-shadow: none; border-color: var(--ux-line); }
.irenfix-empty-cart { padding: 2.5rem 1rem; border: 1px dashed #ced3d9; border-radius: var(--ux-radius); background: #fff; }
.irenfix-empty-cart > i { display: block; margin-bottom: .75rem; font-size: 2.5rem; color: var(--ux-accent); }
.irenfix-storefront .irenfix-site-footer { color: var(--ux-ink); background: #fff; }
/* Override the legacy dark-footer palette, including its important utilities. */
.irenfix-storefront .irenfix-site-footer :is(h5, .h5) { color: var(--ux-ink); }
.irenfix-storefront .irenfix-site-footer :is(a, .text-muted, .text-secondary, .link-sm) {
    color: #48515c !important;
}
.irenfix-storefront .irenfix-site-footer a:is(:hover, :focus-visible) {
    color: #674400 !important;
    text-decoration: underline;
    text-underline-offset: .25em;
}
.irenfix-storefront .irenfix-footer-main { padding-block: 2.5rem 1.5rem; }
.irenfix-storefront .irenfix-footer-bottom { padding-block: 1.25rem; color: var(--ux-muted); }
.irenfix-storefront .irenfix-footer-nav-column a { display: inline-flex; align-items: center; min-height: 36px; }

@media (min-width: 992px) {
    .irenfix-storefront :is(.irenfix-checkout-totals-card, .irenfix-direct-transfer-summary) {
        top: calc(var(--irenfix-header-height) + 1rem);
    }
}

@media (max-width: 991.98px) {
    .irenfix-storefront .irenfix-header-top-inner { gap: .75rem; }
    .irenfix-storefront .irenfix-home-banner-copy { width: 75%; }
    .irenfix-storefront .irenfix-home-banner-slider { height: 23rem; }
    .irenfix-storefront .irenfix-home-category-grid { gap: .75rem; }
}

@media (max-width: 767.98px) {
    .irenfix-storefront { padding-bottom: calc(4.75rem + env(safe-area-inset-bottom)); }
    .irenfix-storefront .irenfix-header-logo img { max-width: 115px; height: 38px; }
    .irenfix-storefront .irenfix-home { padding-top: 1rem; }
    .irenfix-storefront .irenfix-home-hero { border-radius: 1rem; }
    .irenfix-storefront .irenfix-home-banner-slider { height: 25rem; border-radius: 1rem; }
    .irenfix-storefront .irenfix-home-banner-copy { width: 100%; padding: 2rem 2.6rem; justify-content: center; }
    .irenfix-storefront .irenfix-home-banner-copy :is(h1, .h1) { font-size: 1.7rem; max-width: 20ch; }
    .irenfix-storefront .irenfix-home-banner-copy p { font-size: .9rem; }
    .irenfix-storefront .irenfix-header-action-button,
    .irenfix-storefront .irenfix-mobile-menu-button { min-width: 44px; min-height: 44px; }
    .irenfix-storefront .irenfix-home-banner-shade { background: linear-gradient(90deg, #16171ac2, #16171af2); }
    .irenfix-shopping-paths { gap: .5rem; margin-bottom: 2rem; }
    .irenfix-shopping-paths a { flex-direction: column; gap: .3rem; padding: .85rem .25rem; text-align: center; }
    .irenfix-shopping-paths strong { font-size: .78rem; }
    .irenfix-shopping-paths small { display: none; }
    .irenfix-storefront .irenfix-home-section { margin-bottom: 2rem; }
    .irenfix-storefront .product-card-grid:not(.irenfix-amazing-product-grid) { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
    .irenfix-storefront .product-card-grid:not(.irenfix-amazing-product-grid) .product-grid-card { grid-template-columns: 7.5rem minmax(0, 1fr); }
    .irenfix-storefront .product-card-grid:not(.irenfix-amazing-product-grid) .product-grid-card .card-body { padding: .8rem .8rem .25rem; }
    .irenfix-storefront .product-card-grid:not(.irenfix-amazing-product-grid) .product-grid-card .product-grid-card-footer { padding: .5rem .8rem .8rem; }
    .irenfix-storefront .product-card-grid:not(.irenfix-amazing-product-grid) .product-grid-card .card-title { font-size: .92rem; }
    .irenfix-mobile-nav {
        position: fixed;
        inset-inline: 0;
        inset-block-end: 0;
        z-index: 1030;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        padding: .4rem .5rem calc(.4rem + env(safe-area-inset-bottom));
        border-top: 1px solid var(--ux-line);
        background: #fff;
        box-shadow: 0 -4px 20px #252b3208;
    }
    .irenfix-mobile-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; min-height: 52px; border-radius: .7rem; color: #626a73; font-size: .72rem; }
    .irenfix-mobile-nav i { font-size: 1.3rem; line-height: 1.3; }
    .irenfix-mobile-nav a[aria-current="page"] { background: #fff4dc; color: #775000; font-weight: 700; }
    .irenfix-checkout-progress li { flex-direction: column; gap: .35rem; padding: .6rem .15rem; text-align: center; font-size: .73rem; }
    .irenfix-catalog { padding-top: 1.25rem; }
    .irenfix-auth-page { padding-block: 1.5rem; }
    .irenfix-storefront .irenfix-newsletter-card form { min-width: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .irenfix-storefront *, .irenfix-storefront *::before, .irenfix-storefront *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}
