/*
 * BagMark Theme — Main Stylesheet
 * Version: 0.2.1 (Sprint 6.1 — style fix)
 *
 * Table of contents:
 *   1.  CSS Variables (design tokens)
 *   2.  Base reset & html/body
 *   3.  Typography
 *   4.  Links
 *   5.  Layout — .container
 *   6.  Skip link
 *   7.  Button system
 *   8.  Site Header
 *   9.  Site Footer
 *  10.  Floating CTA
 *  11.  Breadcrumbs
 *  12.  Size Card
 *  13.  CTA Section
 *  14.  FAQ Accordion
 *  15.  Gallery
 *  16.  Price Display
 *  17.  Search Box
 *  18.  Filter Panel
 *  19.  Front page placeholder
 *  20.  Utility classes
 */

/* =========================================================
   1. CSS Variables — Design Tokens
   ========================================================= */

:root {
        /* Brand colours */
        --clr-primary:        #0B7A75;
        --clr-primary-dark:   #065E59;
        --clr-primary-light:  #E8F7F6;
        --clr-primary-mid:    #0D9A93;

        /* Neutrals */
        --clr-text:           #1A1A1A;
        --clr-text-secondary: #667085;
        --clr-text-light:     #98A2B3;
        --clr-border:         #E4E7EC;
        --clr-bg:             #FFFFFF;
        --clr-bg-alt:         #F9FAFB;

        /* Semantic */
        --clr-whatsapp:       #25D366;
        --clr-whatsapp-dark:  #1BA350;
        --clr-error:          #D92D20;

        /* Footer dark background */
        --clr-footer-bg:      #0F1C1B;

        /* Spacing scale */
        --space-1:  4px;
        --space-2:  8px;
        --space-3:  12px;
        --space-4:  16px;
        --space-5:  20px;
        --space-6:  24px;
        --space-8:  32px;
        --space-10: 40px;
        --space-12: 48px;
        --space-16: 64px;
        --space-20: 80px;

        /* Typography */
        --font-primary: 'Cairo', 'Segoe UI', Arial, sans-serif;
        --font-size-xs:   12px;
        --font-size-sm:   14px;
        --font-size-base: 16px;
        --font-size-md:   18px;
        --font-size-lg:   20px;
        --font-size-xl:   24px;
        --font-size-2xl:  32px;
        --font-size-3xl:  40px;
        --font-size-4xl:  48px;

        /* Border radius */
        --radius-sm:   6px;
        --radius-md:   12px;
        --radius-lg:   16px;
        --radius-pill: 100px;

        /* Shadows */
        --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06);
        --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.08);
        --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.14);

        /* Layout */
        --container-max: 1200px;
        --container-px:  24px;

        /* Transitions */
        --transition-fast: 150ms ease;
        --transition-base: 250ms ease;

        /* Header */
        --header-h: 72px;
}

/* =========================================================
   2. Base reset & html/body
   ========================================================= */

*,
*::before,
*::after {
        box-sizing: border-box;
}

html {
        scroll-behavior: smooth;
        -webkit-text-size-adjust: 100%;
}

body {
        margin: 0;
        padding: 0;
        background-color: var(--clr-bg);
        color: var(--clr-text);
        font-family: var(--font-primary);
        font-size: var(--font-size-base);
        line-height: 1.65;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
}

img,
svg,
video {
        max-width: 100%;
        height: auto;
        display: block;
}

/* Remove default margin from block elements */
h1, h2, h3, h4, h5, h6,
p, blockquote, figure, ul, ol, dl {
        margin: 0;
        padding: 0;
}

/* Default vertical spacing restored for page content only */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
        margin-top: var(--space-8);
        margin-bottom: var(--space-4);
}

.entry-content p,
.entry-content ul,
.entry-content ol {
        margin-bottom: var(--space-5);
}

ul, ol {
        list-style: none;
}

/* =========================================================
   3. Typography
   ========================================================= */

h1, h2, h3, h4, h5, h6 {
        font-family: var(--font-primary);
        font-weight: 700;
        line-height: 1.25;
        color: var(--clr-text);
}

h1 { font-size: clamp(28px, 5vw, var(--font-size-3xl)); }
h2 { font-size: clamp(22px, 4vw, var(--font-size-2xl)); }
h3 { font-size: clamp(18px, 3vw, var(--font-size-xl)); }
h4 { font-size: var(--font-size-md); }
h5 { font-size: var(--font-size-base); }
h6 { font-size: var(--font-size-sm); }

/* =========================================================
   4. Links
   ========================================================= */

a {
        color: var(--clr-primary);
        text-decoration: none;
        transition: color var(--transition-fast);
}

a:hover {
        color: var(--clr-primary-dark);
        text-decoration: underline;
}

/* Navigation links — no underline */
nav a,
.site-header a,
.site-footer a,
.btn,
.btn:hover {
        text-decoration: none;
}

/* =========================================================
   5. Layout — .container
   ========================================================= */

.container {
        width: 100%;
        max-width: var(--container-max);
        margin-right: auto;
        margin-left: auto;
        padding-right: var(--container-px);
        padding-left: var(--container-px);
}

/* =========================================================
   6. Skip link
   ========================================================= */

.skip-link {
        position: absolute;
        top: -100px;
        left: var(--space-4);
        z-index: 9999;
        background: var(--clr-primary);
        color: #fff;
        padding: var(--space-3) var(--space-6);
        border-radius: var(--radius-sm);
        font-weight: 600;
        transition: top var(--transition-fast);
}

.skip-link:focus {
        top: var(--space-4);
        outline: 3px solid var(--clr-primary-dark);
        outline-offset: 2px;
        color: #fff;
        text-decoration: none;
}

.screen-reader-text {
        border: 0;
        clip: rect(1px, 1px, 1px, 1px);
        clip-path: inset(50%);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
        word-wrap: normal !important;
}

/* =========================================================
   7. Button system
   ========================================================= */

.btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        padding: 10px var(--space-6);
        border-radius: var(--radius-pill);
        font-family: var(--font-primary);
        font-size: var(--font-size-sm);
        font-weight: 700;
        line-height: 1.4;
        cursor: pointer;
        border: 2px solid transparent;
        text-decoration: none;
        transition:
                background-color var(--transition-fast),
                color var(--transition-fast),
                border-color var(--transition-fast),
                box-shadow var(--transition-fast),
                transform var(--transition-fast);
        white-space: nowrap;
}

.btn:hover {
        text-decoration: none;
        transform: translateY(-1px);
}

.btn:focus-visible {
        outline: 3px solid var(--clr-primary);
        outline-offset: 3px;
}

.btn:active {
        transform: translateY(0);
}

/* Primary — teal fill */
.btn--primary {
        background-color: var(--clr-primary);
        color: #fff;
        border-color: var(--clr-primary);
}
.btn--primary:hover,
.btn--primary:focus-visible {
        background-color: var(--clr-primary-dark);
        border-color: var(--clr-primary-dark);
        color: #fff;
}

/* Outline — teal border */
.btn--outline {
        background-color: transparent;
        color: var(--clr-primary);
        border-color: var(--clr-primary);
}
.btn--outline:hover,
.btn--outline:focus-visible {
        background-color: var(--clr-primary-light);
        color: var(--clr-primary-dark);
}

/* Outline white — for use on dark backgrounds */
.btn--outline-white {
        background-color: transparent;
        color: #fff;
        border-color: #fff;
}
.btn--outline-white:hover,
.btn--outline-white:focus-visible {
        background-color: rgba(255, 255, 255, 0.15);
        color: #fff;
}

/* WhatsApp green */
.btn--whatsapp {
        background-color: var(--clr-whatsapp);
        color: #fff;
        border-color: var(--clr-whatsapp);
}
.btn--whatsapp:hover,
.btn--whatsapp:focus-visible {
        background-color: var(--clr-whatsapp-dark);
        border-color: var(--clr-whatsapp-dark);
        color: #fff;
}

/* Sizes */
.btn--sm {
        font-size: var(--font-size-xs);
        padding: var(--space-2) var(--space-4);
}

.btn--full {
        width: 100%;
}

/* =========================================================
   8. Site Header
   ========================================================= */

.site-header {
        position: sticky;
        top: 0;
        z-index: 1000;
        width: 100%;
        background-color: var(--clr-bg);
        border-bottom: 1px solid var(--clr-border);
        box-shadow: var(--shadow-sm);
        height: var(--header-h);
        display: flex;
        align-items: center;
}

.site-header--scrolled {
        box-shadow: 0 2px 16px rgba(0, 0, 0, 0.10);
}

/* Inner row — logo | nav | actions */
.site-header__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-5);
        width: 100%;
}

/* ---- Logo ---- */
.site-header__logo {
        flex-shrink: 0;
}

.site-header__logo a {
        display: block;
        text-decoration: none;
}

.site-header__logo img {
        display: block;
        height: 44px;
        width: auto;
}

.site-header__logo-text {
        display: block;
        font-size: var(--font-size-lg);
        font-weight: 800;
        color: var(--clr-primary);
        text-decoration: none;
        white-space: nowrap;
        letter-spacing: -0.02em;
}

.site-header__logo-text:hover {
        color: var(--clr-primary-dark);
        text-decoration: none;
}

/* ---- Primary navigation ---- */
.site-header__nav {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-start;
}

[dir="rtl"] .site-header__nav {
        justify-content: flex-end;
}

/* Menu list reset */
.site-header__menu,
#primary-menu {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 2px;
        list-style: none;
        margin: 0;
        padding: 0;
}

.site-header__menu > li,
#primary-menu > li {
        position: relative;
}

.site-header__menu > li > a,
#primary-menu > li > a {
        display: block;
        padding: var(--space-2) var(--space-3);
        font-size: var(--font-size-sm);
        font-weight: 600;
        color: var(--clr-text);
        text-decoration: none;
        border-radius: var(--radius-sm);
        white-space: nowrap;
        transition:
                color var(--transition-fast),
                background-color var(--transition-fast);
}

.site-header__menu > li > a:hover,
#primary-menu > li > a:hover,
.site-header__menu > li.current-menu-item > a,
#primary-menu > li.current-menu-item > a,
.site-header__menu > li.current_page_item > a,
#primary-menu > li.current_page_item > a {
        color: var(--clr-primary);
        background-color: var(--clr-primary-light);
        text-decoration: none;
}

/* ---- Actions (CTA buttons row) ---- */
.site-header__actions {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        gap: var(--space-2);
}

.site-header__catalog-btn {
        display: none; /* visible at ≥ 1024px */
}

.site-header__lang {
        font-size: var(--font-size-xs);
        font-weight: 700;
        color: var(--clr-text-secondary);
}

.site-header__lang-placeholder {
        padding: var(--space-1) var(--space-2);
        cursor: pointer;
}

/* Polylang language switcher reset */
.site-header__lang ul.lang-list,
.site-header__lang .lang-list {
        display: flex;
        gap: var(--space-2);
        list-style: none;
        margin: 0;
        padding: 0;
}

.site-header__lang a {
        font-size: var(--font-size-xs);
        font-weight: 700;
        color: var(--clr-text-secondary);
        text-decoration: none;
        padding: var(--space-1) var(--space-2);
        border-radius: var(--radius-sm);
        transition: color var(--transition-fast);
}

.site-header__lang a:hover,
.site-header__lang .current-lang a {
        color: var(--clr-primary);
        text-decoration: none;
}

/* ---- Hamburger toggle ---- */
.site-header__menu-toggle {
        display: none;
        background: none;
        border: 1px solid var(--clr-border);
        border-radius: var(--radius-sm);
        cursor: pointer;
        padding: var(--space-2);
        color: var(--clr-text);
        line-height: 1;
}

.site-header__hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 22px;
        height: 22px;
}

.site-header__hamburger span {
        display: block;
        height: 2px;
        width: 100%;
        background-color: currentColor;
        border-radius: 2px;
        transition:
                transform var(--transition-base),
                opacity var(--transition-base);
}

.site-header__menu-toggle[aria-expanded="true"] .site-header__hamburger span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
}
.site-header__menu-toggle[aria-expanded="true"] .site-header__hamburger span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
}
.site-header__menu-toggle[aria-expanded="true"] .site-header__hamburger span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
}

/* ---- Mobile header (≤ 767px) ---- */
@media (max-width: 767px) {
        .site-header__menu-toggle {
                display: flex;
                align-items: center;
                justify-content: center;
        }

        .site-header__catalog-btn,
        .site-header__call-btn {
                display: none !important;
        }

        /* Nav drawer */
        .site-header__nav {
                position: absolute;
                top: var(--header-h);
                left: 0;
                right: 0;
                background-color: var(--clr-bg);
                border-bottom: 1px solid var(--clr-border);
                box-shadow: var(--shadow-md);
                padding: var(--space-4) 0;
                overflow: hidden;
                max-height: 0;
                transition: max-height 0.3s ease;
                z-index: 999;
        }

        .site-header__nav.is-open {
                max-height: 500px;
        }

        .site-header__menu,
        #primary-menu {
                flex-direction: column;
                align-items: stretch;
                gap: 0;
                width: 100%;
                padding: 0 var(--container-px);
        }

        .site-header__menu > li,
        #primary-menu > li {
                width: 100%;
        }

        .site-header__menu > li > a,
        #primary-menu > li > a {
                display: block;
                width: 100%;
                padding: var(--space-3) var(--space-4);
                font-size: var(--font-size-base);
                border-radius: var(--radius-sm);
        }
}

/* ---- Medium screens (768–1023px) ---- */
@media (min-width: 768px) and (max-width: 1023px) {
        .site-header__catalog-btn {
                display: none;
        }
}

/* ---- Desktop (≥ 1024px) ---- */
@media (min-width: 1024px) {
        .site-header__catalog-btn {
                display: inline-flex;
        }
}

/* =========================================================
   9. Site Footer
   ========================================================= */

.site-footer {
        background-color: var(--clr-footer-bg);
        color: #e0e0e0;
}

/* Main section — 4-column grid */
.site-footer__main {
        padding-top: var(--space-16);
        padding-bottom: var(--space-10);
}

.site-footer__grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-10);
}

@media (min-width: 640px) {
        .site-footer__grid {
                grid-template-columns: 1fr 1fr;
        }
}

@media (min-width: 1024px) {
        .site-footer__grid {
                grid-template-columns: 2fr 1fr 1fr 1.5fr;
        }
}

/* Logo */
.site-footer__logo img {
        height: 40px;
        width: auto;
        filter: brightness(0) invert(1);
}

.site-footer__logo-text {
        display: block;
        font-size: var(--font-size-lg);
        font-weight: 800;
        color: #fff;
        text-decoration: none;
}

.site-footer__logo-text:hover {
        color: var(--clr-primary-mid);
        text-decoration: none;
}

/* Tagline */
.site-footer__tagline {
        margin-top: var(--space-4);
        font-size: var(--font-size-sm);
        color: var(--clr-text-light);
        line-height: 1.7;
}

/* Social icons */
.site-footer__social {
        display: flex;
        gap: var(--space-3);
        margin-top: var(--space-6);
}

.site-footer__social-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.08);
        color: #fff;
        font-size: var(--font-size-sm);
        font-weight: 700;
        text-decoration: none;
        transition: background-color var(--transition-fast);
}

.site-footer__social-link:hover {
        background-color: var(--clr-primary);
        color: #fff;
        text-decoration: none;
}

/* Column headings */
.site-footer__heading {
        font-size: var(--font-size-xs);
        font-weight: 700;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-bottom: var(--space-5);
}

/* Footer menus */
.site-footer__menu,
#footer-menu {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        list-style: none;
        margin: 0;
        padding: 0;
}

.site-footer__menu a,
#footer-menu a {
        font-size: var(--font-size-sm);
        color: var(--clr-text-light);
        text-decoration: none;
        transition: color var(--transition-fast);
}

.site-footer__menu a:hover,
#footer-menu a:hover {
        color: var(--clr-primary-mid);
        text-decoration: none;
}

/* Contact list */
.site-footer__contact-list {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        list-style: none;
        margin: 0;
        padding: 0;
}

.site-footer__contact-link {
        font-size: var(--font-size-sm);
        color: var(--clr-text-light);
        text-decoration: none;
        transition: color var(--transition-fast);
}

.site-footer__contact-link:hover {
        color: var(--clr-primary-mid);
        text-decoration: none;
}

.site-footer__contact-link--whatsapp {
        color: var(--clr-whatsapp);
}
.site-footer__contact-link--whatsapp:hover {
        color: var(--clr-whatsapp-dark);
}

.site-footer__contact-address {
        font-size: var(--font-size-xs);
        color: var(--clr-text-light);
        line-height: 1.6;
}

/* Bottom bar */
.site-footer__bottom {
        border-top: 1px solid rgba(255, 255, 255, 0.07);
        padding-top: var(--space-5);
        padding-bottom: var(--space-5);
}

.site-footer__bottom-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: var(--space-4);
}

.site-footer__copyright {
        font-size: var(--font-size-xs);
        color: var(--clr-text-light);
        margin: 0;
}

.site-footer__policy {
        display: flex;
        gap: var(--space-5);
}

.site-footer__policy a {
        font-size: var(--font-size-xs);
        color: var(--clr-text-light);
        text-decoration: none;
        transition: color var(--transition-fast);
}

.site-footer__policy a:hover {
        color: #fff;
        text-decoration: none;
}

/* =========================================================
  10. Floating CTA
   ========================================================= */

.floating-cta {
        position: fixed;
        bottom: 24px;
        right: 24px;           /* LTR default */
        left: auto;
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        z-index: 900;
}

/* RTL: flip to left side */
[dir="rtl"] .floating-cta {
        right: auto;
        left: 24px;
}

.floating-cta__btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 54px;
        height: 54px;
        border-radius: 50%;
        box-shadow: var(--shadow-lg);
        color: #fff;
        text-decoration: none;
        transition:
                transform var(--transition-fast),
                box-shadow var(--transition-fast);
}

.floating-cta__btn:hover {
        transform: scale(1.1);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
        text-decoration: none;
        color: #fff;
}

.floating-cta__btn--whatsapp {
        background-color: var(--clr-whatsapp);
}

.floating-cta__btn--call {
        background-color: var(--clr-primary);
}

.floating-cta__icon {
        flex-shrink: 0;
}

/* =========================================================
  11. Breadcrumbs
   ========================================================= */

.breadcrumbs-wrapper {
        background-color: var(--clr-bg-alt);
        border-bottom: 1px solid var(--clr-border);
        padding-top: var(--space-3);
        padding-bottom: var(--space-3);
}

.breadcrumbs {
        font-size: var(--font-size-xs);
        color: var(--clr-text-secondary);
}

.breadcrumbs__list {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--space-2);
        list-style: none;
        margin: 0;
        padding: 0;
}

.breadcrumbs__link {
        color: var(--clr-primary);
        text-decoration: none;
        transition: color var(--transition-fast);
}

.breadcrumbs__link:hover {
        color: var(--clr-primary-dark);
        text-decoration: underline;
}

.breadcrumbs__current {
        color: var(--clr-text-secondary);
}

.breadcrumb__separator {
        color: var(--clr-border);
}

/* =========================================================
  12. Size Card
   ========================================================= */

.size-card {
        background-color: var(--clr-bg);
        border: 1px solid var(--clr-border);
        border-radius: var(--radius-md);
        overflow: hidden;
        box-shadow: var(--shadow-sm);
        display: flex;
        flex-direction: column;
        transition:
                box-shadow var(--transition-base),
                transform var(--transition-base);
}

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

.size-card__image-link {
        display: block;
        text-decoration: none;
}

.size-card__image {
        position: relative;
        aspect-ratio: 4 / 3;
        overflow: hidden;
        background-color: var(--clr-primary-light);
}

.size-card__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform var(--transition-base);
}

.size-card:hover .size-card__img {
        transform: scale(1.04);
}

.size-card__img-placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--clr-primary-light);
}

.size-card__badge {
        position: absolute;
        top: var(--space-3);
        left: var(--space-3);       /* LTR */
        background-color: var(--clr-primary);
        color: #fff;
        font-size: var(--font-size-xs);
        font-weight: 700;
        padding: 3px var(--space-3);
        border-radius: var(--radius-pill);
}

[dir="rtl"] .size-card__badge {
        left: auto;
        right: var(--space-3);
}

.size-card__body {
        padding: var(--space-5);
        display: flex;
        flex-direction: column;
        flex: 1;
        gap: var(--space-3);
}

.size-card__title {
        font-size: var(--font-size-md);
        font-weight: 700;
        margin: 0;
}

.size-card__title a {
        color: var(--clr-text);
        text-decoration: none;
}

.size-card__title a:hover {
        color: var(--clr-primary);
        text-decoration: none;
}

.size-card__dimensions {
        font-size: var(--font-size-sm);
        color: var(--clr-text-secondary);
        margin: 0;
}

.size-card__uses {
        font-size: var(--font-size-xs);
        color: var(--clr-text-secondary);
        margin: 0;
        line-height: 1.6;
}

.size-card__price {
        margin-top: auto;
        padding-top: var(--space-3);
        border-top: 1px solid var(--clr-border);
        display: flex;
        flex-direction: column;
        gap: 4px;
}

.size-card__price-label {
        font-size: var(--font-size-xs);
        color: var(--clr-text-secondary);
}

.size-card__price-value {
        font-size: var(--font-size-lg);
        font-weight: 700;
        color: var(--clr-primary);
}

.size-card__price-disclaimer {
        font-size: var(--font-size-xs);
        color: var(--clr-text-light);
}

.size-card__cta {
        align-self: flex-start;
}

/* =========================================================
  13. CTA Section
   ========================================================= */

.cta-section {
        background-color: var(--clr-primary);
        color: #fff;
        padding-top: var(--space-16);
        padding-bottom: var(--space-16);
}

.cta-section__inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--space-8);
}

@media (min-width: 768px) {
        .cta-section__inner {
                flex-direction: row;
                text-align: left;
                justify-content: space-between;
        }

        [dir="rtl"] .cta-section__inner {
                text-align: right;
        }
}

.cta-section__text {
        flex: 1;
}

.cta-section__title {
        font-size: clamp(22px, 4vw, var(--font-size-2xl));
        color: #fff;
        margin-bottom: var(--space-3);
}

.cta-section__subtitle {
        font-size: var(--font-size-md);
        color: rgba(255, 255, 255, 0.85);
        margin: 0;
}

.cta-section__actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-4);
        justify-content: center;
        flex-shrink: 0;
}

@media (min-width: 768px) {
        .cta-section__actions {
                justify-content: flex-end;
        }
}

/* =========================================================
  14. FAQ Accordion
   ========================================================= */

.faq-accordion {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
}

.faq-accordion__item {
        border: 1px solid var(--clr-border);
        border-radius: var(--radius-md);
        overflow: hidden;
        background-color: var(--clr-bg);
}

.faq-accordion__heading {
        margin: 0;
}

.faq-accordion__trigger {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
        padding: var(--space-5) var(--space-6);
        background: none;
        border: none;
        cursor: pointer;
        font-family: var(--font-primary);
        font-size: var(--font-size-base);
        font-weight: 600;
        color: var(--clr-text);
        text-align: left;
        transition:
                background-color var(--transition-fast),
                color var(--transition-fast);
}

[dir="rtl"] .faq-accordion__trigger {
        text-align: right;
}

.faq-accordion__trigger:hover {
        background-color: var(--clr-bg-alt);
        color: var(--clr-primary);
}

.faq-accordion__trigger[aria-expanded="true"] {
        color: var(--clr-primary);
        background-color: var(--clr-primary-light);
}

.faq-accordion__question {
        flex: 1;
}

.faq-accordion__icon {
        flex-shrink: 0;
        color: var(--clr-text-secondary);
        transition: transform var(--transition-base);
}

.faq-accordion__trigger[aria-expanded="true"] .faq-accordion__icon {
        transform: rotate(180deg);
        color: var(--clr-primary);
}

.faq-accordion__panel {
        overflow: hidden;
}

.faq-accordion__panel:not([hidden]) {
        animation: faq-open 200ms ease;
}

@keyframes faq-open {
        from { opacity: 0; transform: translateY(-6px); }
        to   { opacity: 1; transform: translateY(0); }
}

.faq-accordion__answer {
        padding: var(--space-4) var(--space-6) var(--space-6);
        font-size: var(--font-size-base);
        color: var(--clr-text-secondary);
        line-height: 1.7;
        border-top: 1px solid var(--clr-border);
}

.faq-accordion__answer p:last-child {
        margin-bottom: 0;
}

/* =========================================================
  15. Gallery
   ========================================================= */

.gallery {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
}

.gallery--empty {
        border: 2px dashed var(--clr-border);
        border-radius: var(--radius-md);
        padding: var(--space-10);
        text-align: center;
        color: var(--clr-text-light);
}

.gallery__main {
        border-radius: var(--radius-md);
        overflow: hidden;
        aspect-ratio: 4 / 3;
        background-color: var(--clr-bg-alt);
}

.gallery__main-figure {
        margin: 0;
        width: 100%;
        height: 100%;
}

.gallery__main-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
}

.gallery__thumbs {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
        gap: var(--space-2);
}

.gallery__thumb-btn {
        display: block;
        padding: 0;
        border: 2px solid transparent;
        border-radius: var(--radius-sm);
        background: none;
        cursor: pointer;
        overflow: hidden;
        aspect-ratio: 1;
        transition: border-color var(--transition-fast);
}

.gallery__thumb-btn:hover {
        border-color: var(--clr-primary-mid);
}

.gallery__thumb-item--active .gallery__thumb-btn {
        border-color: var(--clr-primary);
}

.gallery__thumb-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
}

/* =========================================================
  16. Price Display
   ========================================================= */

.price-display {
        background-color: var(--clr-bg-alt);
        border: 1px solid var(--clr-border);
        border-radius: var(--radius-md);
        padding: var(--space-6);
}

.price-display--unavailable,
.price-display--empty {
        text-align: center;
        padding: var(--space-10);
        color: var(--clr-text-secondary);
}

.price-display__heading {
        font-size: var(--font-size-lg);
        font-weight: 700;
        margin-bottom: var(--space-5);
}

.price-display__table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
}

.price-display__table {
        width: 100%;
        border-collapse: collapse;
        font-size: var(--font-size-sm);
}

.price-display__th {
        padding: var(--space-3) var(--space-4);
        text-align: left;
        font-weight: 700;
        color: var(--clr-text-secondary);
        border-bottom: 2px solid var(--clr-border);
        white-space: nowrap;
}

[dir="rtl"] .price-display__th {
        text-align: right;
}

.price-display__td {
        padding: var(--space-4);
        border-bottom: 1px solid var(--clr-border);
}

.price-display__row:last-child .price-display__td {
        border-bottom: none;
}

.price-display__td--price {
        font-size: var(--font-size-md);
        font-weight: 700;
        color: var(--clr-primary);
}

.price-display__na {
        color: var(--clr-text-light);
        font-weight: 400;
}

.price-display__disclaimer {
        margin-top: var(--space-4);
        margin-bottom: 0;
        font-size: var(--font-size-xs);
        color: var(--clr-text-light);
}

/* =========================================================
  17. Search Box
   ========================================================= */

.search-box {
        width: 100%;
}

.search-box__form {
        display: flex;
        gap: var(--space-3);
}

.search-box__input-wrap {
        position: relative;
        flex: 1;
        display: flex;
        align-items: center;
}

.search-box__label {
        position: absolute;
        left: var(--space-4);
        color: var(--clr-text-secondary);
        pointer-events: none;
        display: flex;
        align-items: center;
}

[dir="rtl"] .search-box__label {
        left: auto;
        right: var(--space-4);
}

.search-box__input {
        width: 100%;
        padding: var(--space-3) var(--space-4) var(--space-3) 44px;
        border: 1px solid var(--clr-border);
        border-radius: var(--radius-pill);
        font-family: var(--font-primary);
        font-size: var(--font-size-sm);
        color: var(--clr-text);
        background-color: var(--clr-bg);
        appearance: none;
        -webkit-appearance: none;
        transition:
                border-color var(--transition-fast),
                box-shadow var(--transition-fast);
}

[dir="rtl"] .search-box__input {
        padding-right: 44px;
        padding-left: var(--space-4);
}

.search-box__input:focus {
        outline: none;
        border-color: var(--clr-primary);
        box-shadow: 0 0 0 3px rgba(11, 122, 117, 0.12);
}

.search-box__input::placeholder {
        color: var(--clr-text-light);
}

.search-box__clear {
        position: absolute;
        right: var(--space-4);
        background: none;
        border: none;
        cursor: pointer;
        font-size: var(--font-size-lg);
        color: var(--clr-text-secondary);
        line-height: 1;
        padding: 0;
}

[dir="rtl"] .search-box__clear {
        right: auto;
        left: var(--space-4);
}

.search-box__submit {
        flex-shrink: 0;
}

/* =========================================================
  18. Filter Panel
   ========================================================= */

.filter-panel {
        background-color: var(--clr-bg);
        border: 1px solid var(--clr-border);
        border-radius: var(--radius-md);
        padding: var(--space-6);
}

.filter-panel__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: var(--space-6);
}

.filter-panel__title {
        font-size: var(--font-size-base);
        font-weight: 700;
        margin: 0;
}

.filter-panel__clear {
        font-size: var(--font-size-xs);
        color: var(--clr-primary);
        text-decoration: underline;
}

.filter-panel__group {
        border: none;
        padding: 0;
        margin: 0 0 var(--space-6);
}

.filter-panel__group-label {
        display: block;
        font-size: var(--font-size-xs);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--clr-text-secondary);
        margin-bottom: var(--space-3);
}

.filter-panel__options {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
}

.filter-panel__option {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        cursor: pointer;
        font-size: var(--font-size-sm);
        color: var(--clr-text);
}

.filter-panel__checkbox {
        width: 16px;
        height: 16px;
        accent-color: var(--clr-primary);
        flex-shrink: 0;
        cursor: pointer;
}

.filter-panel__submit {
        margin-top: var(--space-4);
}

/* =========================================================
  19. Front page placeholder
   ========================================================= */

.site-main--front .front-placeholder {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 50vh;
        text-align: center;
}

.site-main--front .front-placeholder p {
        font-size: var(--font-size-md);
        color: var(--clr-text-secondary);
        margin: 0;
}

/* Generic site main */
.site-main {
        min-height: 50vh;
}

/* =========================================================
  20. Utility classes
   ========================================================= */

.visually-hidden,
.screen-reader-text {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
}

.text-center { text-align: center; }
.text-start  { text-align: left; }

[dir="rtl"] .text-start { text-align: right; }

/* ---- LTR isolation utilities ----
   Prevent the Unicode Bidirectional Algorithm from reversing content
   that must remain left-to-right inside an Arabic (RTL) page.
   Always pair with the matching dir= attribute on the HTML element.

   .ltr-number — inline use (phone numbers inside a link or span)
   Example: <span dir="ltr" class="ltr-number">01027907413</span>

   .ltr-text — block/paragraph use (English sentences inside RTL page)
   Example: <p dir="ltr" lang="en" class="ltr-text">Custom...</p>    */
.ltr-number {
        direction: ltr;
        unicode-bidi: isolate;
        display: inline-block;
}

.ltr-text {
        direction: ltr;
        unicode-bidi: isolate;
}

/* =========================================================
   21. Section layout — shared across all home page sections
   ========================================================= */

.section {
	padding-top: var(--space-16);
	padding-bottom: var(--space-16);
}

@media (max-width: 767px) {
	.section {
		padding-top: var(--space-12);
		padding-bottom: var(--space-12);
	}
}

.section--alt {
	background-color: var(--clr-bg-alt);
}

/* Section header (centred heading block) */
.section-header {
	text-align: center;
	margin-bottom: var(--space-12);
}

.section-kicker {
	display: inline-block;
	font-size: var(--font-size-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--clr-primary);
	background-color: var(--clr-primary-light);
	padding: 4px 14px;
	border-radius: var(--radius-pill);
	margin-bottom: var(--space-4);
}

.section-title {
	font-size: clamp(22px, 4vw, var(--font-size-2xl));
	font-weight: 800;
	color: var(--clr-text);
	margin-bottom: var(--space-4);
}

.section-desc {
	font-size: var(--font-size-md);
	color: var(--clr-text-secondary);
	max-width: 560px;
	margin-right: auto;
	margin-left: auto;
	line-height: 1.7;
}

/* =========================================================
   22. Home Hero
   ========================================================= */

.home-hero {
	background-color: var(--clr-bg);
	padding-top: var(--space-16);
	padding-bottom: var(--space-16);
	border-bottom: 1px solid var(--clr-border);
}

@media (max-width: 767px) {
	.home-hero {
		padding-top: var(--space-12);
		padding-bottom: var(--space-12);
	}
}

/* Two-column layout: text left (LTR) / right (RTL), calc opposite */
.home-hero__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-10);
	align-items: start;
}

@media (min-width: 900px) {
	.home-hero__inner {
		grid-template-columns: 1fr 480px;
	}
}

/* ---- Hero text ---- */
.home-hero__title {
	font-size: clamp(26px, 5vw, 44px);
	font-weight: 800;
	line-height: 1.2;
	color: var(--clr-text);
	margin-bottom: var(--space-5);
}

.home-hero__subtitle {
	font-size: var(--font-size-md);
	color: var(--clr-text-secondary);
	line-height: 1.75;
	margin-bottom: var(--space-8);
	max-width: 480px;
}

.home-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
}

/* ---- Quick Quote Calculator card ---- */
.home-calc {
	background-color: var(--clr-bg);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-lg);
	padding: var(--space-8);
	box-shadow: var(--shadow-md);
}

.home-calc__heading {
	font-size: var(--font-size-lg);
	font-weight: 700;
	margin-bottom: var(--space-6);
	color: var(--clr-text);
}

.home-calc__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4);
}

@media (max-width: 480px) {
	.home-calc__grid {
		grid-template-columns: 1fr;
	}
}

.home-calc__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Make the size field span full width */
.home-calc__field:first-child {
	grid-column: 1 / -1;
}

.home-calc__label {
	font-size: var(--font-size-xs);
	font-weight: 700;
	color: var(--clr-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.home-calc__select {
	width: 100%;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-md);
	font-family: var(--font-primary);
	font-size: var(--font-size-sm);
	color: var(--clr-text);
	background-color: var(--clr-bg);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition: border-color var(--transition-fast);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23667085' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 12px center;
	padding-left: 32px;
}

[dir="rtl"] .home-calc__select {
	background-position: right 12px center;
	padding-left: var(--space-4);
	padding-right: 32px;
}

.home-calc__select:focus {
	outline: none;
	border-color: var(--clr-primary);
	box-shadow: 0 0 0 3px rgba(11, 122, 117, 0.12);
}

/* Result box */
.home-calc__result {
	margin-top: var(--space-6);
	padding: var(--space-5);
	background-color: var(--clr-primary-light);
	border-radius: var(--radius-md);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 4px;
}

.home-calc__result-label {
	font-size: var(--font-size-xs);
	color: var(--clr-primary);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.home-calc__price {
	font-size: var(--font-size-2xl);
	font-weight: 800;
	color: var(--clr-primary);
	line-height: 1.1;
}

.home-calc__result-note {
	font-size: var(--font-size-xs);
	color: var(--clr-text-secondary);
	line-height: 1.5;
}

.home-calc__cta {
	margin-top: var(--space-5);
	width: 100%;
}

.home-calc__disclaimer {
	margin-top: var(--space-3);
	font-size: var(--font-size-xs);
	color: var(--clr-text-light);
	text-align: center;
}

/* =========================================================
   23. Home Size Finder Wizard
   ========================================================= */

.home-finder {
}

.home-finder__widget {
	max-width: 720px;
	margin-right: auto;
	margin-left: auto;
}

/* Step progress bar */
.home-finder__steps-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	margin-bottom: var(--space-8);
}

.home-finder__step-dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: var(--clr-border);
	color: var(--clr-text-secondary);
	font-size: var(--font-size-xs);
	font-weight: 700;
	flex-shrink: 0;
	transition:
		background-color var(--transition-base),
		color var(--transition-base);
}

.home-finder__step-dot--active {
	background-color: var(--clr-primary);
	color: #fff;
}

.home-finder__step-dot--done {
	background-color: var(--clr-primary-mid);
	color: #fff;
}

.home-finder__step-line {
	flex: 1;
	max-width: 80px;
	height: 2px;
	background-color: var(--clr-border);
}

/* Step panels */
.home-finder__step-panel {
	background-color: var(--clr-bg);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-lg);
	padding: var(--space-8);
}

.home-finder__question {
	font-size: var(--font-size-lg);
	font-weight: 700;
	margin-bottom: var(--space-6);
	color: var(--clr-text);
}

/* Option buttons grid */
.home-finder__options {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4);
	margin-bottom: var(--space-6);
}

.home-finder__option {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-3);
	padding: var(--space-5);
	border: 2px solid var(--clr-border);
	border-radius: var(--radius-md);
	background-color: var(--clr-bg);
	cursor: pointer;
	font-family: var(--font-primary);
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--clr-text);
	transition:
		border-color var(--transition-fast),
		background-color var(--transition-fast),
		color var(--transition-fast);
}

.home-finder__option:hover {
	border-color: var(--clr-primary-mid);
	background-color: var(--clr-primary-light);
	color: var(--clr-primary);
}

.home-finder__option--active {
	border-color: var(--clr-primary);
	background-color: var(--clr-primary-light);
	color: var(--clr-primary);
}

.home-finder__option-icon {
	font-size: 28px;
	line-height: 1;
}

@media (max-width: 480px) {
	.home-finder__options {
		grid-template-columns: 1fr;
	}
}

.home-finder__back {
	align-self: flex-start;
}

/* Result panel */
.home-finder__result {
	background-color: var(--clr-bg);
	border: 1px solid var(--clr-primary-mid);
	border-radius: var(--radius-lg);
	padding: var(--space-10);
	text-align: center;
}

.home-finder__result-icon {
	font-size: 48px;
	margin-bottom: var(--space-4);
}

.home-finder__result-title {
	font-size: var(--font-size-xl);
	font-weight: 700;
	color: var(--clr-primary);
	margin-bottom: var(--space-3);
}

.home-finder__result-desc {
	font-size: var(--font-size-base);
	color: var(--clr-text-secondary);
	margin-bottom: var(--space-6);
}

.home-finder__result-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	justify-content: center;
}

/* =========================================================
   24. Home Popular Sizes
   ========================================================= */

.home-sizes__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-6);
}

@media (max-width: 600px) {
	.home-sizes__grid {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 1024px) {
	.home-sizes__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.home-sizes__footer {
	margin-top: var(--space-10);
	text-align: center;
}

/* =========================================================
   25. Home Why BagMark
   ========================================================= */

.home-why__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-5);
}

@media (min-width: 768px) {
	.home-why__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 480px) {
	.home-why__grid {
		grid-template-columns: 1fr;
	}
}

.home-why__card {
	background-color: var(--clr-bg);
	border-radius: var(--radius-md);
	padding: var(--space-6);
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--transition-base), transform var(--transition-base);
}

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

.home-why__icon {
	width: 48px;
	height: 48px;
	border-radius: var(--radius-sm);
	background-color: var(--clr-primary-light);
	color: var(--clr-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--space-5);
}

.home-why__title {
	font-size: var(--font-size-base);
	font-weight: 700;
	color: var(--clr-text);
	margin-bottom: var(--space-3);
}

.home-why__desc {
	font-size: var(--font-size-sm);
	color: var(--clr-text-secondary);
	line-height: 1.7;
	margin: 0;
}

/* =========================================================
   26. Home Previous Work Preview
   ========================================================= */

.home-work__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}

@media (min-width: 640px) {
	.home-work__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.home-work__item {
	border-radius: var(--radius-md);
	overflow: hidden;
	background-color: var(--clr-bg);
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.home-work__item:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-3px);
}

.home-work__img-wrap {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background-color: var(--clr-primary-light);
}

.home-work__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--transition-base);
}

.home-work__item:hover .home-work__img {
	transform: scale(1.04);
}

.home-work__img-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--clr-primary-light);
}

.home-work__img-placeholder svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.home-work__caption {
	padding: var(--space-4);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
}

.home-work__client {
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--clr-text);
}

.home-work__client--placeholder {
	color: var(--clr-text-secondary);
}

.home-work__meta {
	font-size: var(--font-size-xs);
	color: var(--clr-primary);
	background-color: var(--clr-primary-light);
	padding: 3px 10px;
	border-radius: var(--radius-pill);
	font-weight: 700;
}

.home-work__footer {
	margin-top: var(--space-10);
	text-align: center;
}

/* =========================================================
   27. Home Final CTA — extends .cta-section
   ========================================================= */

.home-final-cta.cta-section {
	/* inherits all .cta-section styles — no overrides needed */
}

/* =========================================================
   28. Sprint 7.1 — Polish overrides
       These selectively override Sprint 7 defaults.
       Ordered to match the sections above.
   ========================================================= */

/* ---- Header tightening ---- */
.site-header__actions {
	gap: var(--space-2);
}

/* Min touch target on header buttons */
.site-header__actions .btn--sm {
	min-height: 36px;
}

/* ---- Hero — tighter vertical rhythm ---- */
.home-hero {
	padding-top: 48px;
	padding-bottom: 48px;
}

@media (max-width: 767px) {
	.home-hero {
		padding-top: var(--space-10);
		padding-bottom: var(--space-10);
	}

	/* Mobile: text column always above calculator */
	.home-hero__text  { order: -1; }
	.home-hero__calc  { order: 0;  }
}

.home-hero__inner {
	gap: var(--space-8);
}

/* ---- Calculator — polish ---- */
.home-calc__heading {
	font-size: var(--font-size-md);
	margin-bottom: var(--space-5);
}

/* Full-width size field */
.home-calc__field--full {
	grid-column: 1 / -1;
}

/* Min touch target on selects */
.home-calc__select {
	min-height: 44px;
}

/* Result: label + price on one row, note below */
.home-calc__result {
	flex-direction: column;
	gap: var(--space-2);
}

.home-calc__result-top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	width: 100%;
	gap: var(--space-3);
}

.home-calc__price {
	font-size: 36px;
	font-weight: 800;
}

.home-calc__result-note {
	font-size: var(--font-size-xs);
	color: var(--clr-primary-dark);
	font-weight: 600;
	margin: 0;
	text-align: center;
}

.home-calc__cta {
	margin-top: var(--space-4);
}

/* ---- Size Finder — stronger active state ---- */
.home-finder__option--active {
	border-color: var(--clr-primary);
	border-width: 3px;
	background-color: var(--clr-primary-light);
	color: var(--clr-primary);
	position: relative;
}

.home-finder__option--active::after {
	content: '✓';
	position: absolute;
	top: 6px;
	left: 8px;
	font-size: 10px;
	font-weight: 700;
	color: var(--clr-primary);
	line-height: 1;
}

[dir="rtl"] .home-finder__option--active::after {
	left: auto;
	right: 8px;
}

/* Step dot — pending state uses border only */
.home-finder__step-dot {
	border: 2px solid var(--clr-border);
	background-color: var(--clr-bg);
}

.home-finder__step-dot--active {
	border-color: var(--clr-primary);
	background-color: var(--clr-primary);
	color: #fff;
}

.home-finder__step-dot--done {
	border-color: var(--clr-primary-mid);
	background-color: var(--clr-primary-mid);
	color: #fff;
}

/* ---- Why BagMark — equal height cards ---- */
.home-why__grid {
	align-items: stretch;
}

.home-why__card {
	display: flex;
	flex-direction: column;
}

/* ---- Previous Work — placeholder inner layout ---- */
.home-work__img-wrap {
	position: relative;
}

.home-work__img-wrap--placeholder {
	background-color: var(--clr-primary-light);
}

.home-work__placeholder-inner {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	padding-bottom: var(--space-4);
}

.home-work__placeholder-msg {
	font-size: var(--font-size-xs);
	font-weight: 600;
	color: var(--clr-primary);
	text-align: center;
	margin: var(--space-2) var(--space-3) 0;
	line-height: 1.5;
}

.home-work__soon-badge {
	font-size: var(--font-size-xs);
	font-weight: 700;
	color: var(--clr-text-secondary);
	background-color: var(--clr-bg-alt);
	border: 1px solid var(--clr-border);
	padding: 2px 10px;
	border-radius: var(--radius-pill);
}

/* ---- Size card — coming-soon variant ---- */
.size-card--soon {
	opacity: 0.85;
}

.size-card__badge--soon {
	background-color: var(--clr-text-secondary);
}

.size-card__img-placeholder--soon {
	background-color: var(--clr-bg-alt);
}

/* =========================================================
   29. Sprint 7.2 — Text readability + minor polish
       Small targeted overrides. No new layout rules.
   ========================================================= */

/* ---- Size card — readable body text ---- */
.size-card__uses {
	font-size: 13px;
	line-height: 1.65;
}

/* Static coming-soon note on placeholder cards */
.size-card__soon-note {
	display: block;
	font-size: 11px;
	font-weight: 600;
	color: var(--clr-text-light);
	letter-spacing: 0.03em;
	margin-top: var(--space-3);
	text-align: center;
}

/* Badge for real cards vs coming-soon */
.size-card__badge--soon {
	background-color: var(--clr-text-secondary);
}

/* ---- Why BagMark — better line-height ---- */
.home-why__desc {
	line-height: 1.75;
}

/* ---- Footer minor polish ---- */
.site-footer__tagline {
	line-height: 1.7;
}

/* Tighten bottom bar just a touch */
.site-footer__bottom {
	padding-top: 12px;
	padding-bottom: 12px;
}

/* Ensure footer menu links are readable */
.site-footer__menu a {
	font-size: var(--font-size-sm);
	line-height: 1.8;
}

/* ---- Calculator result note — ensure Latin price ---- */
/* Price is forced to ltr context so "EGP 3,250" stays left-to-right */
.home-calc__price {
	direction: ltr;
	unicode-bidi: embed;
}

/* =========================================================
   30. Sprint 7.3 — Reference rebuild
       Matches the approved visual reference image.
       All rules are scoped or override earlier sections.
   ========================================================= */

/* --- New design tokens for Sprint 7.3 --- */
:root {
	--clr-hero-bg:        #F8FAF9;
	--clr-strip-bg:       #F4F6F8;
	--clr-card-bg:        #FFFFFF;
	--radius-xl:          20px;
	--radius-2xl:         28px;
	--shadow-xl:          0 16px 48px rgba(0,0,0,0.12);
}

/* =========================================================
   30A. Header — Sprint 7.3
   ========================================================= */

.site-header {
	box-shadow: none;
	border-bottom: 1px solid var(--clr-border);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	height: var(--header-h);
}

/* Logo */
.site-header__logo-text {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	text-decoration: none;
	color: var(--clr-text);
}

.site-header__logo-wordmark {
	font-size: 22px;
	font-weight: 800;
	line-height: 1;
}

.site-header__logo-bag  { color: var(--clr-primary); }
.site-header__logo-mark { color: var(--clr-text); }

/* Nav */
.site-header__nav {
	flex: 1;
}

.site-header__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
}

.site-header__menu li { margin: 0; }

.site-header__menu a {
	display: block;
	padding: var(--space-2) var(--space-3);
	font-size: 13px;
	font-weight: 600;
	color: var(--clr-text);
	text-decoration: none;
	border-radius: var(--radius-sm);
	transition: background-color var(--transition-fast), color var(--transition-fast);
	white-space: nowrap;
}

.site-header__menu a:hover,
.site-header__menu .current-menu-item > a {
	background-color: var(--clr-primary-light);
	color: var(--clr-primary);
}

/* Catalog link */
.site-header__catalog-link {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 700;
	color: var(--clr-primary);
	text-decoration: none;
	background-color: var(--clr-primary-light);
	padding: 6px var(--space-3);
	border-radius: var(--radius-pill);
	white-space: nowrap;
	transition: background-color var(--transition-fast);
}

.site-header__catalog-link:hover {
	background-color: #d3eeec;
}

/* Language switcher */
.site-header__lang {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	font-weight: 700;
	color: var(--clr-text-secondary);
	white-space: nowrap;
}

.site-header__lang a,
.site-header__lang-en {
	color: var(--clr-text-secondary);
	text-decoration: none;
}

.site-header__lang a:hover { color: var(--clr-primary); }

.site-header__lang-active { color: var(--clr-text); }
.site-header__lang-sep    { opacity: 0.4; }

/* Phone button */
.site-header__phone-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--clr-text);
	text-decoration: none;
	border: 1.5px solid var(--clr-border);
	padding: 6px 14px;
	border-radius: var(--radius-pill);
	white-space: nowrap;
	transition: border-color var(--transition-fast), color var(--transition-fast);
}

.site-header__phone-btn:hover {
	border-color: var(--clr-primary);
	color: var(--clr-primary);
}

/* Hamburger */
.site-header__menu-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: var(--space-2);
}

.site-header__hamburger {
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: 22px;
}

.site-header__hamburger span {
	display: block;
	height: 2px;
	background-color: var(--clr-text);
	border-radius: 2px;
	transition: transform var(--transition-base), opacity var(--transition-base);
}

@media (max-width: 900px) {
	.site-header__menu-toggle { display: flex; }
	.site-header__catalog-link,
	.site-header__lang { display: none; }

	.site-header__nav {
		display: none;
		position: absolute;
		top: var(--header-h);
		right: 0;
		left: 0;
		background: var(--clr-bg);
		border-bottom: 1px solid var(--clr-border);
		padding: var(--space-4) var(--container-px);
		box-shadow: var(--shadow-md);
		z-index: 100;
	}

	.site-header__nav.is-open {
		display: block;
	}

	.site-header__menu {
		flex-direction: column;
		gap: var(--space-1);
	}

	.site-header__menu a {
		padding: var(--space-3) var(--space-4);
		font-size: var(--font-size-base);
	}
}

/* =========================================================
   30B. Hero Section — Sprint 7.3
   ========================================================= */

.home-hero {
	background-color: var(--clr-bg);
	padding-top: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid var(--clr-border);
	overflow: hidden;
}

@media (max-width: 767px) {
	.home-hero {
		padding-top: var(--space-10);
		padding-bottom: var(--space-8);
	}
}

.home-hero__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
	align-items: center;
}

@media (min-width: 900px) {
	.home-hero__inner {
		grid-template-columns: 1fr 500px;
		min-height: calc(100vh - var(--header-h) - 80px);
		max-height: 680px;
	}
}

/* CSS order: text is HTML-first (accessible reading order).
   In RTL grid: order:2 = visual LEFT, order:1 = visual RIGHT */
.home-hero__text    { order: 2; }
.home-hero__product { order: 1; }

@media (max-width: 899px) {
	.home-hero__text    { order: -1; } /* text first on mobile */
	.home-hero__product { order: 0;  }
}

/* ---- Hero text ---- */
.home-hero__title {
	font-size: clamp(32px, 6vw, 52px);
	font-weight: 900;
	line-height: 1.15;
	color: var(--clr-text);
	margin-bottom: var(--space-6);
}

/* Trust bullet list */
.hero-trust-list {
	list-style: none;
	margin: 0 0 var(--space-8) 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.hero-trust-list__item {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-size: var(--font-size-base);
	font-weight: 600;
	color: var(--clr-text);
}

.hero-trust-list__icon {
	color: var(--clr-primary);
	flex-shrink: 0;
}

/* Hero action buttons */
.home-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
}

/* Outline dark button variant */
.btn--outline-dark {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 12px 24px;
	border: 1.5px solid var(--clr-text);
	border-radius: var(--radius-pill);
	color: var(--clr-text);
	background: transparent;
	font-family: var(--font-primary);
	font-size: var(--font-size-sm);
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.btn--outline-dark:hover {
	background-color: var(--clr-text);
	color: #fff;
}

/* ---- Product area (bags + floating calc) ---- */
.home-hero__product {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

@media (min-width: 900px) {
	.home-hero__product {
		height: 100%;
		min-height: 520px;
	}
}

/* Bags illustration */
.home-hero__bags {
	position: absolute;
	top: 0;
	right: 0;
	width: 280px;
	height: 380px;
	pointer-events: none;
	user-select: none;
}

.home-hero__bags svg {
	width: 100%;
	height: 100%;
}

@media (max-width: 899px) {
	.home-hero__bags {
		position: static;
		width: 100%;
		max-width: 300px;
		height: 220px;
		margin: 0 auto;
		display: block;
	}
}

/* Floating calculator card */
.home-hero__calc-float {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 300px;
	background: var(--clr-bg);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	box-shadow: var(--shadow-xl);
	z-index: 10;
}

@media (max-width: 899px) {
	.home-hero__calc-float {
		position: static;
		width: 100%;
		box-shadow: var(--shadow-md);
	}
}

/* Calculator internals */
.home-calc__heading {
	font-size: var(--font-size-base);
	font-weight: 800;
	color: var(--clr-text);
	margin-bottom: var(--space-5);
}

.home-calc__field {
	margin-bottom: var(--space-4);
}

.home-calc__label {
	display: block;
	font-size: var(--font-size-xs);
	font-weight: 700;
	color: var(--clr-text-secondary);
	margin-bottom: 6px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.home-calc__select {
	width: 100%;
	padding: 10px 36px 10px var(--space-4);
	border: 1.5px solid var(--clr-border);
	border-radius: var(--radius-md);
	font-family: var(--font-primary);
	font-size: var(--font-size-sm);
	color: var(--clr-text);
	background: var(--clr-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23667085' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	min-height: 44px;
	transition: border-color var(--transition-fast);
}

[dir="rtl"] .home-calc__select {
	background-position: left 12px center;
	padding-left: 36px;
	padding-right: var(--space-4);
}

.home-calc__select:focus {
	outline: none;
	border-color: var(--clr-primary);
	box-shadow: 0 0 0 3px rgba(11,122,117,0.12);
}

/* Quantity stepper */
.home-calc__stepper {
	display: flex;
	align-items: center;
	border: 1.5px solid var(--clr-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	min-height: 44px;
}

.home-calc__stepper-btn {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	background: var(--clr-bg-alt);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--clr-text);
	transition: background-color var(--transition-fast);
}

.home-calc__stepper-btn:hover {
	background-color: var(--clr-primary-light);
	color: var(--clr-primary);
}

.home-calc__stepper-btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.home-calc__stepper-val {
	flex: 1;
	text-align: center;
	font-size: var(--font-size-base);
	font-weight: 700;
	color: var(--clr-text);
	user-select: none;
	direction: ltr;
}

/* Result */
.home-calc__result {
	background-color: var(--clr-primary-light);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	margin-bottom: var(--space-4);
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.home-calc__result-label {
	font-size: var(--font-size-xs);
	font-weight: 700;
	color: var(--clr-primary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.home-calc__price {
	font-size: 28px;
	font-weight: 900;
	color: var(--clr-primary);
	direction: ltr;
	line-height: 1.1;
}

.home-calc__result-note {
	font-size: 11px;
	color: var(--clr-text-secondary);
	line-height: 1.5;
}

.home-calc__cta {
	width: 100%;
	margin-bottom: var(--space-3);
}

/* btn--full for 100% width */
.btn--full { width: 100%; justify-content: center; }

.home-calc__all-sizes {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--clr-primary);
	text-decoration: none;
	padding: var(--space-2) 0;
}

.home-calc__all-sizes:hover { text-decoration: underline; }

/* =========================================================
   30C. Size Finder Strip — Sprint 7.3
   ========================================================= */

.home-finder--strip {
	padding-top: var(--space-8);
	padding-bottom: var(--space-8);
	background-color: var(--clr-bg);
}

.home-finder__strip-inner {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	background-color: var(--clr-strip-bg);
	border-radius: var(--radius-xl);
	padding: var(--space-6) var(--space-8);
}

@media (max-width: 767px) {
	.home-finder__strip-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-6);
		border-radius: var(--radius-lg);
		padding: var(--space-6);
	}
}

/* Text (right side in RTL) */
.home-finder__strip-text {
	flex-shrink: 0;
	max-width: 240px;
}

@media (max-width: 767px) {
	.home-finder__strip-text { max-width: none; }
}

.home-finder__strip-title {
	font-size: var(--font-size-md);
	font-weight: 800;
	color: var(--clr-text);
	margin-bottom: var(--space-2);
	line-height: 1.35;
}

.home-finder__strip-sub {
	font-size: var(--font-size-sm);
	color: var(--clr-text-secondary);
	line-height: 1.6;
	margin: 0;
}

/* Category icons (middle) */
.home-finder__cats {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	flex-wrap: wrap;
}

.home-finder__cat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	text-decoration: none;
	color: var(--clr-text-secondary);
	transition: color var(--transition-fast), transform var(--transition-fast);
	min-width: 60px;
}

.home-finder__cat:hover {
	color: var(--clr-primary);
	transform: translateY(-3px);
}

.home-finder__cat-icon {
	width: 52px;
	height: 52px;
	border-radius: var(--radius-md);
	background-color: var(--clr-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-sm);
	color: var(--clr-text-secondary);
	transition: background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.home-finder__cat:hover .home-finder__cat-icon {
	background-color: var(--clr-primary-light);
	color: var(--clr-primary);
	box-shadow: var(--shadow-md);
}

.home-finder__cat-label {
	font-size: 11px;
	font-weight: 600;
	text-align: center;
	white-space: nowrap;
}

/* CTA button (left in RTL) */
.home-finder__strip-action {
	flex-shrink: 0;
}

/* =========================================================
   30D. Popular Sizes — Horizontal Scroll
   ========================================================= */

/* Override earlier grid layout */
.home-sizes { padding-bottom: 0; }

.home-sizes__heading-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: var(--space-6);
}

.home-sizes__title {
	font-size: clamp(20px, 3vw, 28px);
	font-weight: 800;
	color: var(--clr-text);
	margin: 0;
}

.home-sizes__see-all {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--clr-primary);
	text-decoration: none;
	white-space: nowrap;
}

.home-sizes__see-all:hover { text-decoration: underline; }

.home-sizes__scroll-wrap {
	padding-bottom: var(--space-10);
}

.home-sizes__scroll-container {
	overflow: visible;
}

.home-sizes__scroll {
	display: flex;
	gap: var(--space-5);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: var(--space-4);
	/* Hide scrollbar visually */
	scrollbar-width: none;
}
.home-sizes__scroll::-webkit-scrollbar { display: none; }

/* Horizontal Size Card */
.size-card-h {
	flex-shrink: 0;
	width: 160px;
	background: var(--clr-bg);
	border: 1.5px solid var(--clr-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	scroll-snap-align: start;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
	position: relative;
}

.size-card-h:hover {
	border-color: var(--clr-primary-mid);
	box-shadow: var(--shadow-md);
	transform: translateY(-3px);
}

/* Popular card highlight */
.size-card-h--popular {
	border-color: var(--clr-primary);
	border-width: 2px;
}

.size-card-h__badge {
	position: absolute;
	top: var(--space-2);
	right: var(--space-2);
	background-color: var(--clr-primary);
	color: white;
	font-size: 10px;
	font-weight: 800;
	padding: 3px 8px;
	border-radius: var(--radius-pill);
	z-index: 2;
	line-height: 1.5;
	white-space: nowrap;
}

[dir="rtl"] .size-card-h__badge {
	right: auto;
	left: var(--space-2);
}

.size-card-h__img {
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background-color: var(--clr-bg-alt);
}

.size-card-h__img svg,
.size-card-h__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.size-card-h__body {
	padding: var(--space-4) var(--space-3);
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.size-card-h__code {
	font-size: var(--font-size-sm);
	font-weight: 800;
	color: var(--clr-text);
}

.size-card-h__dims {
	font-size: 11px;
	color: var(--clr-text-secondary);
	direction: ltr;
	text-align: right;
	display: block;
}

[dir="rtl"] .size-card-h__dims { text-align: left; }

.size-card-h__price {
	font-size: 11px;
	color: var(--clr-text-secondary);
	display: block;
}

.size-card-h__price strong {
	font-size: var(--font-size-sm);
	font-weight: 800;
	color: var(--clr-primary);
	direction: ltr;
	display: inline;
}

.size-card-h__cta {
	margin-top: var(--space-2);
	width: 100%;
	justify-content: center;
	font-size: 12px;
	padding: 8px var(--space-3);
}

/* =========================================================
   30E. Why BagMark — 6-column horizontal
   ========================================================= */

/* Override Sprint 7 3-col grid */
.home-why { background-color: var(--clr-bg-alt); }

.home-why__grid {
	grid-template-columns: repeat(6, 1fr);
	gap: var(--space-4);
}

@media (max-width: 1024px) {
	.home-why__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-5);
	}
}

@media (max-width: 600px) {
	.home-why__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.home-why__card {
	background: var(--clr-bg);
	border-radius: var(--radius-md);
	padding: var(--space-5);
	box-shadow: var(--shadow-sm);
	text-align: center;
	align-items: center;
}

.home-why__icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: var(--clr-primary-light);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto var(--space-4);
}

.home-why__title {
	font-size: var(--font-size-sm);
	font-weight: 800;
	color: var(--clr-text);
	margin-bottom: var(--space-2);
}

.home-why__desc {
	font-size: 12px;
	color: var(--clr-text-secondary);
	line-height: 1.6;
	margin: 0;
}

/* =========================================================
   30F. Previous Work — 6-column grid
   ========================================================= */

.home-work__heading-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: var(--space-8);
}

.home-work__title {
	font-size: clamp(20px, 3vw, 28px);
	font-weight: 800;
	color: var(--clr-text);
	margin: 0;
}

.home-work__see-all {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--clr-primary);
	text-decoration: none;
	white-space: nowrap;
}

.home-work__see-all:hover { text-decoration: underline; }

.home-work__grid6 {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--space-4);
}

@media (max-width: 1024px) {
	.home-work__grid6 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
	.home-work__grid6 { grid-template-columns: repeat(2, 1fr); }
}

.home-work__card {
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.home-work__card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-3px);
}

.home-work__card-img {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	position: relative;
}

.home-work__mock-img,
.home-work__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.home-work__mock-img { position: static; width: 100%; height: 100%; }

/* =========================================================
   30G. Final CTA — 2-column off-white card
   ========================================================= */

.home-final-cta {
	padding-top: var(--space-16);
	padding-bottom: var(--space-16);
	background-color: var(--clr-bg-alt);
}

@media (max-width: 767px) {
	.home-final-cta {
		padding-top: var(--space-12);
		padding-bottom: var(--space-12);
	}
}

.home-final-cta__card {
	background-color: var(--clr-bg);
	border-radius: var(--radius-2xl);
	border: 1px solid var(--clr-border);
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 320px;
}

@media (max-width: 767px) {
	.home-final-cta__card {
		grid-template-columns: 1fr;
		border-radius: var(--radius-lg);
	}
}

/* Bags column (visual left in RTL = HTML second = order:2) */
.home-final-cta__bags {
	background-color: var(--clr-primary-light);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: var(--space-6);
	order: 2;
}

/* Text column (visual right in RTL = HTML first = order:1) */
.home-final-cta__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--space-10) var(--space-8);
	order: 1;
}

@media (max-width: 767px) {
	.home-final-cta__text  { order: -1; padding: var(--space-8) var(--space-6); }
	.home-final-cta__bags  { order: 0;  padding: var(--space-6); }
}

.home-final-cta__bags svg {
	width: 100%;
	max-width: 280px;
	height: auto;
}

.home-final-cta__title {
	font-size: clamp(24px, 4vw, 36px);
	font-weight: 900;
	color: var(--clr-text);
	margin-bottom: var(--space-4);
	line-height: 1.2;
}

.home-final-cta__subtitle {
	font-size: var(--font-size-base);
	color: var(--clr-text-secondary);
	margin-bottom: var(--space-8);
	line-height: 1.7;
}

.home-final-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
}

/* =========================================================
   30H. Footer — dark teal, 5-column
   ========================================================= */

.site-footer {
	background-color: var(--clr-footer-bg);
	color: rgba(255, 255, 255, 0.75);
}

.site-footer__main {
	padding-top: var(--space-16);
	padding-bottom: var(--space-12);
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr repeat(4, 1fr);
	gap: var(--space-8);
	align-items: start;
}

@media (max-width: 900px) {
	.site-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-8) var(--space-6);
	}

	.site-footer__col--brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 480px) {
	.site-footer__grid { grid-template-columns: 1fr; }
}

/* Brand column */
.site-footer__logo-text {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	text-decoration: none;
	margin-bottom: var(--space-5);
}

.site-footer__logo-word {
	font-size: 20px;
	font-weight: 800;
	line-height: 1;
}

.site-footer__logo-bag  { color: #4ECDC4; }
.site-footer__logo-mark { color: white; }

.site-footer__tagline {
	font-size: var(--font-size-sm);
	line-height: 1.75;
	color: rgba(255,255,255,0.65);
	margin-bottom: var(--space-6);
	max-width: 260px;
}

/* Social icons */
.site-footer__social {
	display: flex;
	gap: var(--space-3);
	margin-bottom: 0;
}

.site-footer__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	background-color: rgba(255,255,255,0.1);
	border-radius: 50%;
	color: rgba(255,255,255,0.7);
	text-decoration: none;
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.site-footer__social-link:hover {
	background-color: var(--clr-primary);
	color: white;
}

/* Link columns */
.site-footer__heading {
	font-size: var(--font-size-sm);
	font-weight: 800;
	color: white;
	margin-bottom: var(--space-5);
	text-transform: none;
}

.site-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer__menu li { margin-bottom: var(--space-3); }

.site-footer__menu a,
.site-footer__note {
	font-size: var(--font-size-sm);
	color: rgba(255,255,255,0.6);
	text-decoration: none;
	line-height: 1.5;
	transition: color var(--transition-fast);
}

.site-footer__menu a:hover { color: white; }

/* Contact list */
.site-footer__contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer__contact-list li { margin-bottom: var(--space-4); }

.site-footer__contact-link {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-size: var(--font-size-sm);
	color: rgba(255,255,255,0.65);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.site-footer__contact-link:hover { color: white; }

.site-footer__contact-link svg { flex-shrink: 0; opacity: 0.7; }

.site-footer__address { cursor: default; }

/* Bottom bar */
.site-footer__bottom {
	background-color: rgba(0,0,0,0.2);
	padding: var(--space-4) 0;
}

.site-footer__bottom-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-4);
}

.site-footer__copyright {
	font-size: var(--font-size-xs);
	color: rgba(255,255,255,0.45);
	margin: 0;
}

.site-footer__policy {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
}

.site-footer__policy a {
	font-size: var(--font-size-xs);
	color: rgba(255,255,255,0.45);
	text-decoration: none;
	white-space: nowrap;
}

.site-footer__policy a:hover { color: rgba(255,255,255,0.8); }

/* =========================================================
   31. Sprint 7.4 — Reference match refinements
       Tighter hero stage + calc overlay, 6-up popular sizes,
       why-strip with separators, spacing polish.
       Overrides section 30 where needed.
   ========================================================= */

:root {
	--clr-stage-bg: #F3EFE9;
}

/* ---------- 31A. Hero ---------- */

.home-hero {
	padding-top: var(--space-8);
	padding-bottom: var(--space-8);
}

@media (min-width: 1000px) {
	.home-hero__inner {
		grid-template-columns: 0.85fr 1.15fr;
		gap: var(--space-10);
		align-items: center;
		min-height: 0;
		max-height: none;
	}
}

.home-hero__title {
	font-size: clamp(30px, 4.4vw, 50px);
	line-height: 1.18;
	margin-bottom: var(--space-5);
}

.home-hero__title-accent { color: var(--clr-text); }

/* Product column becomes a positioning context for the overlay */
.home-hero__product {
	position: relative;
	display: block;
	min-height: 0;
}

/* Cream stage panel */
.home-hero__stage {
	position: relative;
	background: var(--clr-stage-bg);
	border-radius: var(--radius-2xl);
	min-height: 420px;
	overflow: hidden;
	/* leave room on the physical right so the calc card can overlap/extend */
	margin-right: 96px;
}

/* Bags fill the stage, biased toward the visual left so the calc (right) shows them */
.home-hero__bags {
	position: absolute;
	inset: 0;
	right: auto;
	width: auto;
	height: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: var(--space-5) var(--space-4) 0;
}

.home-hero__bags svg {
	width: 100%;
	height: 100%;
	max-height: 400px;
}

/* Floating calculator overlapping the stage's right edge */
.home-hero__calc-float {
	position: absolute;
	top: 50%;
	right: 0;
	left: auto;
	bottom: auto;
	transform: translateY(-50%);
	width: 312px;
	background: var(--clr-bg);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-xl);
	padding: var(--space-5);
	box-shadow: var(--shadow-xl);
	z-index: 10;
}

/* Stacked layout on tablet / mobile */
@media (max-width: 999px) {
	.home-hero__inner { grid-template-columns: 1fr; }
	.home-hero__text    { order: -1; }
	.home-hero__product { order: 0; }

	.home-hero__stage {
		margin-right: 0;
		min-height: 300px;
	}

	.home-hero__bags {
		position: relative;
		height: 300px;
	}

	.home-hero__calc-float {
		position: static;
		transform: none;
		width: 100%;
		margin-top: calc(-1 * var(--space-10));
		box-shadow: var(--shadow-lg);
	}
}

@media (max-width: 520px) {
	.home-hero__calc-float { margin-top: var(--space-5); }
}

/* Calc internals — slightly tighter for the overlay */
.home-calc__heading { margin-bottom: var(--space-4); font-size: var(--font-size-md); }
.home-calc__field   { margin-bottom: var(--space-3); }
.home-calc__result  { margin-bottom: var(--space-3); padding: var(--space-3) var(--space-4); }
.home-calc__price   { font-size: 26px; }

/* ---------- 31B. Size Finder strip — tighter ---------- */

.home-finder--strip {
	padding-top: var(--space-6);
	padding-bottom: var(--space-6);
}

.home-finder__strip-inner {
	padding: var(--space-5) var(--space-8);
}

/* ---------- 31C. Popular Sizes — 6 in one row ---------- */

.home-sizes {
	padding-top: var(--space-10);
	padding-bottom: var(--space-12);
}

.home-sizes__heading-row { margin-bottom: var(--space-5); }

/* Desktop: 6 equal columns, no scroll */
.home-sizes__scroll {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--space-4);
	overflow: visible;
	padding-bottom: 0;
}

.size-card-h {
	width: auto;
	flex-shrink: 1;
}

.size-card-h__img { aspect-ratio: 1 / 1.05; }
.size-card-h__body { padding: var(--space-3); gap: 4px; }
.size-card-h__code { font-size: var(--font-size-base); }

/* Tablet: horizontal scroll fallback */
@media (max-width: 1024px) {
	.home-sizes__scroll {
		display: flex;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: var(--space-4);
		padding-bottom: var(--space-4);
		scrollbar-width: none;
	}
	.home-sizes__scroll::-webkit-scrollbar { display: none; }
	.size-card-h {
		width: 168px;
		flex-shrink: 0;
		scroll-snap-align: start;
	}
}

/* ---------- 31D. Why BagMark — single strip with separators ---------- */

.home-why { background-color: var(--clr-bg); }

.home-why__strip {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	background: var(--clr-bg-alt);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-xl);
	overflow: hidden;
}

.home-why__item {
	padding: var(--space-6) var(--space-3);
	text-align: center;
	border-inline-end: 1px solid var(--clr-border);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.home-why__item:last-child { border-inline-end: none; }

.home-why__icon {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background-color: var(--clr-primary-light);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--space-3);
}

.home-why__title {
	font-size: var(--font-size-sm);
	font-weight: 800;
	color: var(--clr-text);
	margin-bottom: 4px;
	line-height: 1.35;
}

.home-why__desc {
	font-size: 12px;
	color: var(--clr-text-secondary);
	line-height: 1.5;
	margin: 0;
}

@media (max-width: 1024px) {
	.home-why__strip { grid-template-columns: repeat(3, 1fr); }
	.home-why__item:nth-child(3) { border-inline-end: none; }
	.home-why__item:nth-child(1),
	.home-why__item:nth-child(2),
	.home-why__item:nth-child(3) { border-bottom: 1px solid var(--clr-border); }
}

@media (max-width: 600px) {
	.home-why__strip { grid-template-columns: repeat(2, 1fr); }
	.home-why__item { border-inline-end: 1px solid var(--clr-border); border-bottom: 1px solid var(--clr-border); }
	.home-why__item:nth-child(2n) { border-inline-end: none; }
	.home-why__item:nth-last-child(-n+1):nth-child(odd) { border-bottom: none; }
}

/* ---------- 31E. Previous Work — tighter ---------- */

.home-work { padding-top: var(--space-10); padding-bottom: var(--space-12); }
.home-work__heading-row { margin-bottom: var(--space-6); }
.home-work__grid6 { gap: var(--space-3); }

/* ---------- 31F. Final CTA — proportions ---------- */

.home-final-cta { padding-top: var(--space-12); padding-bottom: var(--space-12); }

.home-final-cta__card { min-height: 300px; }

@media (min-width: 768px) {
	.home-final-cta__card { grid-template-columns: 1.1fr 0.9fr; }
}