/* ============================================================
   MebKa Premium Redesign
   Style: Apple-inspired refined minimalism
   Palette: Warm Ivory & Charcoal with Warm Amber accent
   Typography: DM Serif Display (headings) + DM Sans (body)
   ============================================================ */

/* ── Google Fonts import ── */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&display=swap');

/* ────────────────────────────────────────────────────────────
   CSS CUSTOM PROPERTIES
   ──────────────────────────────────────────────────────────── */
:root {
    /* Core Palette */
    --c-ivory: #F7F5F0; /* page background */
    --c-ivory-light: #FDFCFA; /* card/surface background */
    --c-ivory-mid: #EDE9E1; /* dividers, subtle fills */
    --c-charcoal: #1C1C1E; /* primary text */
    --c-charcoal-60: #6B6B70; /* secondary text */
    --c-charcoal-30: #AEAEB2; /* muted text */
    --c-amber: #C8833A; /* primary accent (CTA) */
    --c-amber-dark: #A96B27; /* hover state */
    --c-amber-light: #F5E8D8; /* accent tint bg */
    --c-success: #2D7D46; /* success / purchase */
    --c-success-bg: #E6F4EB;
    --c-danger: #C0392B;
    --c-info: #1D6FA4;

    /* Link color */
    --custom-link-base: var(--c-amber-dark);

    /* Typography */
    --font-display: 'DM Serif Display', Georgia, serif;
    --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;

    /* Spacing scale */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2.5rem;
    --space-2xl: 4rem;

    /* Border radius */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .08), 0 2px 4px rgba(0, 0, 0, .05);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, .10), 0 4px 8px rgba(0, 0, 0, .06);
    --shadow-card-hover: 0 20px 48px rgba(0, 0, 0, .12), 0 6px 12px rgba(0, 0, 0, .07);

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 280ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 480ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Bootstrap overrides via CSS variables */
    --bs-body-bg: var(--c-ivory);
    --bs-body-color: var(--c-charcoal);
    --bs-body-font-family: var(--font-body);
    --bs-border-color: var(--c-ivory-mid);
    --bs-primary: var(--c-amber);
    --bs-primary-rgb: 200, 131, 58;
    --bs-link-color: var(--c-amber-dark);
    --bs-link-hover-color: var(--c-amber);
}

/* ────────────────────────────────────────────────────────────
   RESET & BASE
   ──────────────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    /* Fluid typography: 14px → 16px across 320px → 1280px */
    font-size: clamp(14px, 1vw + 11px, 16px);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.6;
    color: var(--c-charcoal);
    background-color: var(--c-ivory);
    /* Remove old radial gradient in favor of clean ivory */
    background-image: none;
    overflow-x: hidden;
}

/* Background pattern – extremely subtle grain for depth */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.03;
    background-image: url("../img/3c49cef857950fd9b68fcd64ba5ea455a2ed9215.svg");
    background-size: 300px 300px;
}

/* Keep main content above the grain layer */
header, main, footer, section {
    position: relative;
    z-index: 1;
}

/* ────────────────────────────────────────────────────────────
   TYPOGRAPHY
   ──────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.2;
    color: var(--c-charcoal);
}

h1 {
    font-size: clamp(1.75rem, 4vw + 0.5rem, 3rem);
}

h2 {
    font-size: clamp(1.4rem, 3vw + 0.3rem, 2.25rem);
}

h3 {
    font-size: clamp(1.15rem, 2vw + 0.3rem, 1.6rem);
}

h4, h5 {
    font-size: clamp(1rem, 1.5vw + 0.2rem, 1.25rem);
}

p {
    font-size: clamp(0.9rem, 1vw + 0.5rem, 1.05rem);
    color: var(--c-charcoal);
}

.lead {
    font-size: clamp(1rem, 1.5vw + 0.4rem, 1.2rem);
    font-weight: 300;
    color: var(--c-charcoal-60);
}

a {
    color: var(--c-amber-dark);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--c-amber);
}

/* ────────────────────────────────────────────────────────────
   HEADER / NAV
   ──────────────────────────────────────────────────────────── */
header.sticky-top {
    z-index: 1030;
}

/* Replace grey background with a premium frosted-glass effect */
.grey-background {
    background-color: rgba(247, 245, 240, 0.88) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--c-ivory-mid);
    box-shadow: none;
}

/* Nav container: use proper padding at all sizes */
.grey-background nav.container-xxl {
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
    gap: var(--space-md);
    align-items: center;
}

/* Logo sizing */
.navbar-brand img {
    width: clamp(60px, 10vw, 100px);
    height: auto;
}

/* Breadcrumb */
.breadcrumb {
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 0;
    padding: 0;
    align-items: baseline;
}

.breadcrumb-item a {
    color: var(--c-charcoal-60);
    font-size: 0.875rem;
}

.breadcrumb-item.active {
    color: var(--c-charcoal);
    font-size: 0.875rem;
    font-weight: 500;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--c-charcoal-30);
}

/* Contact info block in header */
.header-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.header-contact .text-secondary {
    font-size: 0.8rem;
    color: var(--c-charcoal-60) !important;
    white-space: nowrap;
}

/* Mobile nav: stack gracefully */
@media (max-width: 991px) {
    .grey-background nav.container-xxl {
        flex-wrap: wrap;
        padding-top: var(--space-sm);
        padding-bottom: var(--space-sm);
        gap: 0;
    }

    .header-contact {
        align-items: center;
        flex-direction: row;
        gap: var(--space-md);
        width: 100%;
        justify-content: center;
        padding: var(--space-xs) 0;
    }

    .navbar-nav {
        flex-direction: unset;
    }
}

@media (max-width: 575px) {
    .header-contact {
        flex-direction: column;
    }
}

/* ────────────────────────────────────────────────────────────
   BACKGROUNDS (override old utility classes)
   ──────────────────────────────────────────────────────────── */
.back-gradient {
    background: var(--c-ivory);
}

/* Decorative SVG background: scale down on mobile */
.back {
    background: url("../img/467bc6af7c91d6e463f9c1fb51db8d64d6ff64ec.svg") left 2% top 50% / clamp(80px, 8vw, 140px) auto no-repeat,
    url("../img/5e3b99b510bc12aecbb59fa060385bb60683b411.svg") right 2% top 50% / clamp(80px, 8vw, 140px) auto no-repeat;
    background-attachment: fixed;
}

@media (max-width: 767px) {
    /* Hide decorative side elements on mobile to avoid overflow */
    .back {
        background: none;
    }
}

/* ────────────────────────────────────────────────────────────
   LANDING PAGE – HERO
   ──────────────────────────────────────────────────────────── */
.landing-header {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw + 0.5rem, 3.5rem);
    font-weight: 400;
    line-height: 1.1;
    color: var(--c-charcoal);
    margin-bottom: var(--space-lg);
}

/* Hero banner image */
main .container > svg.mb-3 {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    max-height: 320px;
    object-fit: cover;
}

/* 4 Steps row */
.steps-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
    margin-top: var(--space-xl);
}

@media (max-width: 767px) {
    .steps-row {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }
}

@media (max-width: 400px) {
    .steps-row {
        grid-template-columns: 1fr 1fr;
    }
}

.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
}

.step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--c-amber);
    color: white;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(200, 131, 58, 0.35);
}

.step-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--c-charcoal);
    text-align: center;
}

.step-image {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

/* ────────────────────────────────────────────────────────────
   LANDING SECTIONS
   ──────────────────────────────────────────────────────────── */
.landing-background {
    background: var(--c-ivory-light);
    border-radius: var(--radius-lg);
    border: 1px solid var(--c-ivory-mid);
}

.landing-section {
    padding: clamp(2.5rem, 6vw, 5rem) 0;
}

/* Problem cards */
.problem-card {
    background: var(--c-ivory-light);
    border: 1px solid var(--c-ivory-mid);
    border-radius: var(--radius-md);
    padding: var(--space-xl) var(--space-lg);
    height: 100%;
    transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

.problem-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.problem-card h5 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    margin-bottom: var(--space-sm);
}

/* Audience section */
.audience-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
}

.audience-item img {
    width: clamp(60px, 12vw, 90px);
    height: auto;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.08));
}

.audience-item p {
    font-size: 0.925rem;
    color: var(--c-charcoal-60);
    text-align: center;
    max-width: 200px;
    line-height: 1.5;
}

/* ────────────────────────────────────────────────────────────
   BUTTONS
   ──────────────────────────────────────────────────────────── */

/* Primary CTA button – warm amber */
.btn-primary {
    background: var(--c-amber);
    border-color: var(--c-amber);
    color: white;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: clamp(0.9rem, 1.5vw + 0.4rem, 1rem);
    padding: 0.75em 1.75em;
    border-radius: 100px;
    letter-spacing: 0.01em;
    transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    min-height: 48px; /* touch target */
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--c-amber-dark);
    border-color: var(--c-amber-dark);
    color: white;
    box-shadow: 0 8px 24px rgba(200, 131, 58, 0.35);
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Outline secondary */
.btn-outline-secondary {
    border-color: var(--c-ivory-mid);
    color: var(--c-charcoal);
    font-family: var(--font-body);
    font-weight: 500;
    padding: 0.75em 1.75em;
    border-radius: 100px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    transition: all var(--transition-fast);
}

.btn-outline-secondary:hover {
    background: var(--c-ivory-mid);
    border-color: var(--c-charcoal-30);
    color: var(--c-charcoal);
    transform: translateY(-1px);
}

/* Success button (purchase) */
.btn-outline-success {
    border-color: var(--c-success);
    color: var(--c-success);
    font-weight: 500;
    border-radius: var(--radius-md);
    min-height: 52px;
    padding: 0.75em 1.5em;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
}

.btn-outline-success:hover {
    background: var(--c-success);
    color: white;
    box-shadow: 0 6px 20px rgba(45, 125, 70, 0.3);
    transform: translateY(-1px);
}

/* General button tap target fix */
.btn {
    min-height: 44px;
    border-radius: var(--radius-sm);
}

/* ────────────────────────────────────────────────────────────
   CATALOGUE CARDS
   ──────────────────────────────────────────────────────────── */
.card {
    background: var(--c-ivory-light);
    border: 1px solid var(--c-ivory-mid);
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-normal), transform var(--transition-normal), border-color var(--transition-normal);
    overflow: hidden;
}

/* Override fixed width on cards for responsiveness */
.card[style*="width: 18rem"] {
    width: 100% !important;
    min-width: 240px;
    max-width: 300px;
}

/* standout-hover reimplemented */
.standout-hover {
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-normal), transform var(--transition-normal), border-color var(--transition-normal);
}

.standout-hover:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--c-amber-light);
}

/* Card image area */
.card-img-top {
    width: 100%;
    height: auto;
    max-width: none !important;
    max-height: 200px;
    object-fit: contain;
    background: var(--c-ivory-mid);
    padding: var(--space-md);
    aspect-ratio: 1;
}

.card-body {
    padding: var(--space-md) var(--space-lg);
}

.card-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 400;
    color: var(--c-charcoal);
    margin-bottom: var(--space-xs);
    line-height: 1.3;
}

.card-text {
    font-size: 0.85rem;
    color: var(--c-charcoal-60);
    line-height: 1.4;
}

/* Cards grid: responsive */
.row.row-cols-auto {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-lg) !important;
}

.row.row-cols-auto .col {
    padding: 0 !important;
}

.row.row-cols-auto .col .card {
    max-width: none;
    width: 100% !important;
    height: 100%;
}

/* ────────────────────────────────────────────────────────────
   PRODUCT DETAIL PAGE
   ──────────────────────────────────────────────────────────── */

/* Main product card */
.row.shadow-lg {
    background: var(--c-ivory-light) !important;
    border: 1px solid var(--c-ivory-mid);
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-md) !important;
    padding: var(--space-xl) !important;
}

/* Product image thumb */
.item-image-small {
    width: auto;
    height: auto;
    max-width: clamp(120px, 25vw, 240px);
    max-height: clamp(120px, 25vh, 280px);
    object-fit: contain;
    border-radius: var(--radius-md);
}

/* Image button */
button.btn-outline-light.standout-hover {
    border: 1px solid var(--c-ivory-mid);
    background: var(--c-ivory-mid);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    transition: all var(--transition-normal);
}

button.btn-outline-light.standout-hover:hover {
    border-color: var(--c-amber);
    box-shadow: var(--shadow-md);
}

/* Price display */
.display-3 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 400;
    color: var(--c-amber) !important;
}

.text-danger {
    color: var(--c-amber) !important; /* repurpose "danger" for project price */
}

.display-6 {
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-family: var(--font-body);
    color: var(--c-info) !important;
}

.display-6a {
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-family: var(--font-body);
}

/* Badges */
.badge.text-bg-primary {
    background-color: var(--c-amber-light) !important;
    color: var(--c-amber-dark) !important;
    font-weight: 500;
    font-size: 0.75rem;
    padding: 0.35em 0.75em;
    border-radius: 100px;
    border: 1px solid rgba(200, 131, 58, 0.25);
}

/* Table */
.table {
    border-color: var(--c-ivory-mid);
    font-size: 0.9rem;
}

.table-warning {
    --bs-table-bg: var(--c-amber-light);
    --bs-table-striped-bg: #f0e0c8;
    --bs-table-hover-bg: #e8d4b4;
    --bs-table-border-color: rgba(200, 131, 58, 0.2);
    --bs-table-color: var(--c-charcoal);
}

.table thead th {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--c-charcoal-60);
    background: var(--c-ivory-mid);
}

/* Carousel indicators (image thumbnails) */
.carousel-indicators [data-bs-target] {
    border-radius: var(--radius-sm);
    border: 2px solid var(--c-ivory-mid);
    transition: border-color var(--transition-fast);
    background: var(--c-ivory-light);
    overflow: hidden;
}

.carousel-indicators [data-bs-target].active,
.carousel-indicators [data-bs-target]:hover {
    border-color: var(--c-amber);
}

.carousel-caption {
    background: rgba(247, 245, 240, 0.9);
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-md);
    backdrop-filter: blur(8px);
}

/* ────────────────────────────────────────────────────────────
   ORDER FORM / WIZARD
   ──────────────────────────────────────────────────────────── */
.form-control, .form-select {
    border: 1px solid var(--c-ivory-mid);
    border-radius: var(--radius-sm);
    background: var(--c-ivory-light);
    color: var(--c-charcoal);
    font-family: var(--font-body);
    font-size: 0.95rem;
    padding: 0.6em 0.9em;
    min-height: 44px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus, .form-select:focus {
    outline: none;
    border-color: var(--c-amber);
    box-shadow: 0 0 0 3px rgba(200, 131, 58, 0.15);
    background: var(--c-ivory-light);
}

.form-control.is-invalid {
    border-color: var(--c-danger);
}

.input-group-text {
    background: var(--c-ivory-mid);
    border-color: var(--c-ivory-mid);
    color: var(--c-charcoal-60);
    font-size: 0.875rem;
}

.form-check-input:checked {
    background-color: var(--c-amber);
    border-color: var(--c-amber);
}

/* ────────────────────────────────────────────────────────────
   MODAL
   ──────────────────────────────────────────────────────────── */
.my-modal {
    background-color: rgba(28, 28, 30, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.my-modal-single-image-content {
    background: var(--c-ivory-light);
    border: none;
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    box-shadow: var(--shadow-lg);
    max-width: min(90vw, 800px);
}

.modal-image {
    border-radius: var(--radius-md);
}

.carousel-control-prev, .carousel-control-next {
    width: 3rem;
    height: 3rem;
    top: 50%;
    transform: translateY(-50%);
    background: var(--c-ivory-light);
    border-radius: 50%;
    border: 1px solid var(--c-ivory-mid);
    box-shadow: var(--shadow-sm);
    opacity: 1;
}


.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(1) sepia(1) saturate(2) hue-rotate(15deg);
    width: 1rem;
    height: 1rem;
}

/* ────────────────────────────────────────────────────────────
   COOKIE CONSENT OFFCANVAS
   ──────────────────────────────────────────────────────────── */
.offcanvas-bottom {
    background: var(--c-ivory-light);
    border-top: 1px solid var(--c-ivory-mid);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, .12);
}

.offcanvas-body h2 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.offcanvas-body .fs-5 {
    font-size: 0.95rem !important;
}

#configure-cookies-button {
    border-color: var(--c-charcoal-30);
    color: var(--c-charcoal);
}

#deny-all-cookies-button {
    border-color: var(--c-charcoal-30);
    color: var(--c-charcoal-60);
}

#accept-all-cookies-button {
    background: var(--c-success);
    border-color: var(--c-success);
    color: white;
}

#configure-cookies-button:hover {
    background: var(--c-ivory-mid);
}

#deny-all-cookies-button:hover {
    background: var(--c-ivory-mid);
}

#accept-all-cookies-button:hover {
    background: var(--c-success);
    opacity: 0.9;
    box-shadow: 0 4px 12px rgba(45, 125, 70, .35);
}

@media (max-width: 575px) {
    .offcanvas-body .row .col {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 0.5rem;
    }
}

/* ────────────────────────────────────────────────────────────
   FOOTER
   ──────────────────────────────────────────────────────────── */
footer {
    margin-top: var(--space-2xl);
}

footer .border-top {
    border-color: var(--c-ivory-mid) !important;
}

footer .text-secondary {
    color: var(--c-charcoal-60) !important;
    font-size: 0.85rem;
}

/* Footer nav links */
footer .grey-background .row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-lg);
    padding: var(--space-md) 0 !important;
}

footer .grey-background .col.col-auto a,
footer .grey-background .col.col-auto [role="button"] {
    font-size: 0.825rem;
    color: var(--c-charcoal-60);
    white-space: nowrap;
    transition: color var(--transition-fast);
}

footer .grey-background .col.col-auto a:hover,
footer .grey-background .col.col-auto [role="button"]:hover {
    color: var(--c-amber-dark);
}

/* Remove spacer cols that cause layout issues on mobile */
footer .grey-background .col:not(.col-auto) {
    display: none;
}

/* ────────────────────────────────────────────────────────────
   UTILITY / LEGACY OVERRIDES
   ──────────────────────────────────────────────────────────── */

/* Keep existing utility classes working */
.a-hoverable {
    color: var(--c-charcoal-60);
    text-decoration: none;
    transition: color var(--transition-normal);
}

.a-hoverable:hover {
    color: var(--c-amber);
}

.undecorated {
    text-decoration: none;
}

/* Overlay badge for products (e.g. "new" icon) */
.overlay {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    z-index: 2;
}

/* External link icon */
.external-link {
    background-image: url("../img/6c640a4b294955675f35cfd26b65351371d9e984.svg");
    background-position: center right;
    background-repeat: no-repeat;
    background-size: 0.857em;
    padding-right: 1em;
}

/* Mw overrides */
.mw-40 {
    max-width: 40vw;
}

.w-40 {
    width: 40% !important;
}

.w-80 {
    width: 80% !important;
}

/* Tool complexity images */
.tool-complexity-img {
    height: clamp(3.5rem, 7vw, 7em);
}

/* Address dropdown */
#address-dropdown {
    margin-left: 5rem !important;
    display: none;
}

#address-dropdown-loading-indicator {
    display: none;
}

#address-dropdown-options-list {
    max-height: 10rem;
    overflow-y: auto;
}

/* Multilevel numbering (legal pages) */
ol.multilevel-numbering {
    counter-reset: section;
    list-style-type: none;
    padding-left: var(--space-lg);
}

li.multilevel-numbering::before {
    counter-increment: section;
    content: counters(section, ".") ". ";
    font-weight: 500;
    color: var(--c-charcoal-60);
    margin-right: var(--space-xs);
}

li.multilevel-numbering {
    margin-bottom: var(--space-sm);
    line-height: 1.6;
}

/* Font scale helper */
.font-085 {
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.855em;
}

/* Icon link hover */
.my-icon-link-hover > .bi {
    transition: transform var(--transition-normal);
}

.my-icon-link-hover:hover > .bi,
.my-icon-link-hover:focus-visible > .bi {
    transform: translate(0, -0.25em);
}

/* ────────────────────────────────────────────────────────────
   CONTENT PAGES (About, FAQ, Policy, etc.)
   ──────────────────────────────────────────────────────────── */
main .container > h1:first-child {
    border-bottom: 1px solid var(--c-ivory-mid) !important;
    padding-bottom: var(--space-lg) !important;
}

/* ────────────────────────────────────────────────────────────
   RESPONSIVE MOBILE – PRODUCT DETAIL LAYOUT
   ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    /* Stack the product header row on mobile */
    .row.shadow-lg.p-3 {
        flex-direction: column !important;
    }

    .row.shadow-lg.p-3 .col-auto,
    .row.shadow-lg.p-3 .col {
        max-width: 100% !important;
        flex: none !important;
    }

    /* Product image: center and full width */
    .item-image-small {
        max-width: 100%;
        max-height: 240px;
        display: block;
        margin: 0 auto var(--space-md);
    }

    /* Price list: horizontal layout */
    ul.list-group {
        height: auto !important;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-md);
        text-align: center;
        align-items: flex-start;
        padding-left: 0;
    }

    ul.list-group li {
        flex: 1;
        min-width: 140px;
    }

    ul.list-group li[style*="margin-top: auto"] {
        margin-top: 0 !important;
        flex: 0 0 100%;
    }

    ul.list-group .d-grid {
        flex: 0 0 100%;
    }

    /* Display price smaller on mobile */
    .display-3 {
        font-size: 2rem;
    }

    .fs-4 {
        font-size: 1rem !important;
    }
}

/* ────────────────────────────────────────────────────────────
   PRINT
   ──────────────────────────────────────────────────────────── */
@media print {
    .sticky-top, footer, #gtag-cookies-consent-section {
        display: none !important;
    }

    body {
        background: white;
    }

    .card, .row.shadow-lg {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
}

.carousel-item img {
    object-fit: cover;
}

.row.carousel-indicators-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-lg) !important;
}

@media (max-width: 768px) {
    .row.carousel-indicators-grid {
        display: none !important;
        gap: var(--space-lg) !important;
    }

    .carousel-item img {
        height: 300px;
    }

    .carousel-control-prev,
    .carousel-control-next {
        width: 15%;
    }

    .carousel-control-prev {
        left: -1.5rem;
    }

    .carousel-control-next {
        right: -1.5rem;
    }

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 3rem;
        height: 3rem;
    }
}

.promo-icon {
    display: inline-block;
}

.promo-icon svg {
    display: block;
    transition:
            transform var(--transition-fast),
            filter var(--transition-fast);
}

.promo-icon:hover svg,
.promo-icon:focus svg {
    transform: translateY(-1px);
    filter: drop-shadow(0 8px 24px rgba(200, 131, 58, 0.35));
}

.promo-icon:active svg {
    transform: translateY(0);
    filter: none;
}

.promo-icon svg {
    display: block;
}

.breadcrumbs-mobile {
    width: 100%;
    white-space: nowrap;
}

/* Desktop */
@media (min-width: 992px) {
    .breadcrumbs-mobile {
        width: auto;
        margin-top: 0 !important;
    }
}

.order-dimensions-img {
    max-width: 100%;
}

#gtag-cookies-consent-section {
    position: unset;
}