/* Fonts: self-hosted via fs-fonts.css (loaded globally in header.twig). */



/* ===== Furniture Story — Home / strona glowna =====

   Ported 1:1 from mockup +Makieta/index.html (content sections only).

   Scoped under .fs-home so it never collides with OpenCart's Bootstrap.

   :root tokens stay global. Generated by _gen_home.php. */



:root{

            --bg: #FAF8F4;

            --bg-alt: #F2EDE5;

            --bg-warm: #E8DFD2;

            --ink: #1A1A1A;

            --ink-soft: #4A4744;

            --muted: #8B857E;

            --line: #E5DFD5;

            --accent: #5C5347;

            --sage: #8A9A7B;

            --terracotta: #B66B4A;

            --white: #FFFFFF;

            --serif: 'Cormorant Garamond', Georgia, serif;

            --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

            --radius: 4px;

            --shadow-sm: 0 2px 8px rgba(26, 26, 26, 0.04);

            --shadow-md: 0 12px 32px rgba(26, 26, 26, 0.08);

            --transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

        }

.fs-home *{ margin: 0; padding: 0; box-sizing: border-box; }

.fs-home{ scroll-behavior: smooth; }

.fs-home{

            font-family: var(--sans);

            font-size: 15px;

            line-height: 1.6;

            color: var(--ink);

            background: var(--bg);

            -webkit-font-smoothing: antialiased;

        }

.fs-home img{ max-width: 100%; display: block; }

.fs-home a{ color: inherit; text-decoration: none; transition: opacity var(--transition); }

.fs-home a:hover{ opacity: 0.7; }

.fs-home button{ font-family: inherit; cursor: pointer; border: none; background: none; }

.fs-home .container{

            max-width: 100%;

            margin: 0 auto;

            padding: 0 48px;

        }

.fs-home .announce{

            background: var(--ink);

            color: var(--bg);

            font-size: 13px;

            letter-spacing: 0.02em;

        }

.fs-home .announce-row{

            display: grid;

            grid-template-columns: 1fr auto 1fr;

            align-items: center;

            gap: 24px;

            min-height: 48px;

            padding: 6px 32px;

        }

.fs-home .announce-text{ text-align: center; }

.fs-home .announce strong{ font-weight: 600; }

.fs-home .announce-text a{ text-decoration: underline; text-underline-offset: 3px; margin-left: 8px; }

.fs-home .announce-social{

            display: flex;

            gap: 10px;

            align-items: center;

        }

.fs-home .announce-social a{

            width: 28px; height: 28px;

            display: inline-flex;

            align-items: center;

            justify-content: center;

            border-radius: 50%;

            border: 1px solid rgba(250, 248, 244, 0.25);

            color: var(--bg);

            transition: all var(--transition);

        }

.fs-home .announce-social a:hover{

            background: var(--bg);

            color: var(--ink);

            border-color: var(--bg);

            opacity: 1;

        }

.fs-home .announce-social svg{ width: 13px; height: 13px; }

.fs-home .announce-actions{ justify-self: end; display: flex; align-items: center; gap: 12px; }

.fs-home .callback-btn{

            display: inline-flex;

            align-items: center;

            gap: 8px;

            background: transparent;

            color: var(--bg);

            border: 1px solid rgba(250, 248, 244, 0.4);

            padding: 7px 16px;

            border-radius: 999px;

            font-size: 12px;

            font-weight: 500;

            letter-spacing: 0.03em;

            transition: all var(--transition);

        }

.fs-home .callback-btn:hover{

            background: var(--bg);

            color: var(--ink);

            border-color: var(--bg);

            opacity: 1;

        }

.fs-home .callback-btn svg{ width: 13px; height: 13px; }

.fs-home header{

            background: var(--bg);

            position: sticky;

            top: 0;

            z-index: 100;

            border-bottom: 1px solid var(--line);

        }

.fs-home .header-top{

            display: grid;

            grid-template-columns: 1fr 1fr 1fr;

            align-items: center;

            gap: 32px;

            padding: 20px 0;

        }

.fs-home .header-search{

            justify-self: center;

            position: relative;

            width: 100%;

            max-width: 420px;

        }

.fs-home .header-search input{

            width: 100%;

            background: transparent;

            border: none;

            border-bottom: 1px solid var(--line);

            padding: 10px 0 10px 28px;

            font-family: inherit;

            font-size: 14px;

            color: var(--ink);

            letter-spacing: 0.01em;

            transition: border-color var(--transition);

        }

.fs-home .header-search input::placeholder{

            color: var(--muted);

            font-weight: 300;

        }

.fs-home .header-search input:focus{

            outline: none;

            border-bottom-color: var(--ink);

        }

.fs-home .header-search svg{

            position: absolute;

            left: 0;

            top: 50%;

            transform: translateY(-50%);

            width: 18px;

            height: 18px;

            color: var(--muted);

            pointer-events: none;

            transition: color var(--transition);

        }

.fs-home .header-search input:focus + svg, .fs-home .header-search:focus-within svg{ color: var(--ink); }

.fs-home .logo{

            display: inline-block;

            line-height: 0;

        }

.fs-home .logo img{

            height: 76px;

            width: auto;

            display: block;

        }

.fs-home .footer-brand .logo img{

            filter: invert(1);

            height: 88px;

        }

.fs-home .header-actions{

            display: flex;

            align-items: center;

            gap: 24px;

            font-size: 14px;

            justify-self: end;

        }

.fs-home .header-actions .icon-btn{

            display: flex;

            align-items: center;

            gap: 6px;

            color: var(--ink);

        }

.fs-home .header-actions svg{ width: 20px; height: 20px; stroke-width: 1.5; }

.fs-home .cart-count{

            background: var(--ink);

            color: var(--bg);

            border-radius: 50%;

            width: 18px;

            height: 18px;

            font-size: 11px;

            display: flex;

            align-items: center;

            justify-content: center;

            font-weight: 600;

        }

.fs-home nav.main-nav{

            border-top: 1px solid var(--line);

            position: relative;

        }

.fs-home nav > ul{

            list-style: none;

            display: flex;

            justify-content: center;

            gap: 40px;

            padding: 18px 0;

        }

.fs-home nav > ul > li{ position: static; }

.fs-home nav a{

            font-size: 14px;

            letter-spacing: 0.04em;

            text-transform: uppercase;

            font-weight: 500;

            position: relative;

            display: inline-flex;

            align-items: center;

            gap: 6px;

        }

.fs-home nav > ul > li > a::after{

            content: '';

            position: absolute;

            left: 0;

            bottom: -4px;

            width: 0;

            height: 1px;

            background: var(--ink);

            transition: width var(--transition);

        }

.fs-home nav > ul > li:hover > a::after, .fs-home nav > ul > li:focus-within > a::after{ width: 100%; }

.fs-home nav > ul > li > a:hover{ opacity: 1; }

.fs-home .nav-sale{ color: var(--terracotta); }

.fs-home .nav-outlet{ color: #C27676; }

.fs-home .has-mega > a .chev{

            width: 10px; height: 10px;

            transition: transform var(--transition);

        }

.fs-home .has-mega:hover > a .chev, .fs-home .has-mega:focus-within > a .chev{ transform: rotate(180deg); }

.fs-home .mega-menu{

            position: absolute;

            top: 100%;

            left: 0;

            right: 0;

            background: var(--bg);

            border-top: 1px solid var(--line);

            border-bottom: 1px solid var(--line);

            box-shadow: var(--shadow-md);

            opacity: 0;

            visibility: hidden;

            transform: translateY(-8px);

            transition: opacity var(--transition), transform var(--transition), visibility 0s linear var(--transition);

            z-index: 99;

        }

.fs-home .has-mega:hover .mega-menu, .fs-home .has-mega:focus-within .mega-menu{

            opacity: 1;

            visibility: visible;

            transform: translateY(0);

            transition: opacity var(--transition), transform var(--transition), visibility 0s;

        }

.fs-home .mega-grid{

            display: grid;

            grid-template-columns: 1.1fr 1fr 1fr 1.3fr;

            gap: 56px;

            padding: 48px 0 56px;

            align-items: start;

        }

.fs-home .mega-col h4{

            font-family: var(--sans);

            font-size: 12px;

            letter-spacing: 0.18em;

            text-transform: uppercase;

            color: var(--muted);

            font-weight: 600;

            margin-bottom: 18px;

            margin-top: 28px;

        }

.fs-home .mega-col h4:first-child{ margin-top: 0; }

.fs-home .mega-col ul{

            list-style: none;

            display: flex;

            flex-direction: column;

            gap: 10px;

        }

.fs-home .mega-col ul a{

            font-family: var(--serif);

            text-transform: none;

            letter-spacing: 0;

            font-size: 17px;

            font-weight: 500;

            color: var(--ink);

            transition: color var(--transition), padding-left var(--transition);

        }

.fs-home .mega-col ul a::after{ display: none; }

.fs-home .mega-col ul a:hover{

            color: var(--accent);

            padding-left: 6px;

            opacity: 1;

        }

.fs-home .mega-feature{

            position: relative;

            border-radius: var(--radius);

            overflow: hidden;

            aspect-ratio: 4 / 3;

            background: var(--bg-warm);

        }

.fs-home .mega-feature img{

            width: 100%;

            height: 100%;

            object-fit: cover;

            transition: transform 0.6s var(--transition);

        }

.fs-home .mega-feature:hover img{ transform: scale(1.05); }

.fs-home .mega-feature::after{

            content: '';

            position: absolute;

            inset: 0;

            background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%);

        }

.fs-home .mega-feature-overlay{

            position: absolute;

            bottom: 24px;

            left: 24px;

            right: 24px;

            color: var(--white);

            z-index: 2;

        }

.fs-home .mega-feature-overlay small{

            display: block;

            font-size: 11px;

            letter-spacing: 0.18em;

            text-transform: uppercase;

            opacity: 0.85;

            margin-bottom: 6px;

        }

.fs-home .mega-feature-overlay strong{

            display: block;

            font-family: var(--serif);

            font-size: 24px;

            font-weight: 500;

            line-height: 1.1;

            margin-bottom: 8px;

        }

.fs-home .mega-feature-overlay span{

            font-size: 12px;

            letter-spacing: 0.08em;

            text-transform: uppercase;

            display: inline-flex;

            align-items: center;

            gap: 6px;

        }

.fs-home .mega-feature-overlay span::after{

            content: '→';

            transition: transform var(--transition);

        }

.fs-home .mega-feature:hover .mega-feature-overlay span::after{ transform: translateX(4px); }

.fs-home .hero{

            position: relative;

            width: 100%;

            padding: 0;

            margin: 0;

            overflow: hidden;

            font-size: 0;

            line-height: 0;

        }

.fs-home .hero img{

            display: block;

            width: 100%;

            height: auto;

            vertical-align: bottom;

        }

.fs-home .hero::after{

            content: '';

            position: absolute;

            inset: 0;

            background: linear-gradient(90deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 60%);

        }

.fs-home .hero-content{

            position: absolute;

            inset: 0;

            z-index: 2;

            max-width: 100%;

            margin: 0 auto;

            padding: 0 48px;

            display: flex;

            flex-direction: column;

            justify-content: center;

            color: var(--white);

        }

.fs-home .hero-eyebrow{

            font-size: 13px;

            letter-spacing: 0.2em;

            text-transform: uppercase;

            margin-bottom: 20px;

            opacity: 0.9;

        }

.fs-home .hero h1{

            font-family: var(--serif);

            font-size: clamp(48px, 6vw, 88px);

            font-weight: 500;

            line-height: 1.05;

            letter-spacing: -0.02em;

            max-width: 720px;

            margin-bottom: 24px;

        }

.fs-home .hero h1 em{ font-style: italic; font-weight: 400; }

.fs-home .hero p{

            font-size: 17px;

            max-width: 480px;

            margin-bottom: 36px;

            opacity: 0.95;

            line-height: 1.5;

        }

.fs-home .hero-actions{ display: flex; gap: 16px; flex-wrap: wrap; }

.fs-home .btn{

            display: inline-flex;

            align-items: center;

            gap: 10px;

            padding: 16px 32px;

            font-size: 14px;

            font-weight: 500;

            letter-spacing: 0.04em;

            text-transform: uppercase;

            transition: all var(--transition);

            border-radius: var(--radius);

            cursor: pointer;

        }

.fs-home .btn-primary{

            background: var(--ink);

            color: var(--bg);

        }

.fs-home .btn-primary:hover{

            background: var(--accent);

            opacity: 1;

            transform: translateY(-2px);

        }

.fs-home .btn-outline{

            background: transparent;

            color: var(--white);

            border: 1px solid rgba(255,255,255,0.6);

        }

.fs-home .btn-outline:hover{

            background: var(--white);

            color: var(--ink);

            opacity: 1;

        }

.fs-home .btn-light{

            background: var(--bg);

            color: var(--ink);

            border: 1px solid var(--ink);

        }

.fs-home .btn-light:hover{ background: var(--ink); color: var(--bg); opacity: 1; }

.fs-home .usp-strip{

            background: var(--white);

            border-bottom: 1px solid var(--line);

        }

.fs-home .usp-grid{

            display: grid;

            grid-template-columns: repeat(4, 1fr);

            padding: 32px 0;

            gap: 16px;

        }

.fs-home .usp-item{

            display: flex;

            align-items: center;

            gap: 14px;

            padding: 0 16px;

            border-right: 1px solid var(--line);

        }

.fs-home .usp-item:last-child{ border-right: none; }

.fs-home .usp-icon{

            flex-shrink: 0;

            width: 40px;

            height: 40px;

            color: var(--accent);

        }

.fs-home .usp-text strong{

            display: block;

            font-size: 14px;

            font-weight: 600;

            margin-bottom: 2px;

        }

.fs-home .usp-text span{

            font-size: 13px;

            color: var(--muted);

            line-height: 1.4;

        }

.fs-home section{ padding: 100px 0; }

.fs-home .section-head{

            text-align: center;

            margin-bottom: 56px;

        }

.fs-home .section-head .eyebrow{

            font-size: 12px;

            letter-spacing: 0.25em;

            text-transform: uppercase;

            color: var(--muted);

            margin-bottom: 16px;

        }

.fs-home .section-head h2{

            font-family: var(--serif);

            font-size: clamp(36px, 4vw, 56px);

            font-weight: 500;

            line-height: 1.1;

            letter-spacing: -0.01em;

            margin-bottom: 16px;

        }

.fs-home .section-head h2 em{ font-style: italic; font-weight: 400; }

.fs-home .section-head p{

            color: var(--ink-soft);

            max-width: 560px;

            margin: 0 auto;

            font-size: 16px;

        }

.fs-home .categories-section{ background: var(--bg); padding-top: 100px; }

.fs-home .categories{

            display: grid;

            grid-template-columns: repeat(4, 1fr);

            gap: 24px;

        }

.fs-home .cat-card{

            position: relative;

            overflow: hidden;

            border-radius: var(--radius);

            background: var(--bg-warm);

            cursor: pointer;

            aspect-ratio: 1 / 1;

        }

.fs-home .cat-card img{

            width: 100%;

            height: 100%;

            object-fit: cover;

            transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);

        }

.fs-home .cat-card:hover img{ transform: scale(1.05); }

.fs-home .cat-card::after{

            content: '';

            position: absolute;

            inset: 0;

            background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.6) 100%);

        }

.fs-home .cat-overlay{

            position: absolute;

            bottom: 32px;

            left: 32px;

            right: 32px;

            color: var(--white);

            z-index: 2;

        }

.fs-home .cat-overlay h3{

            font-family: var(--serif);

            font-size: 36px;

            font-weight: 500;

            line-height: 1;

            margin-bottom: 10px;

        }

.fs-home .cat-overlay span{

            font-size: 13px;

            letter-spacing: 0.08em;

            text-transform: uppercase;

            display: inline-flex;

            align-items: center;

            gap: 8px;

        }

.fs-home .cat-overlay span::after{

            content: '→';

            transition: transform var(--transition);

        }

.fs-home .cat-card:hover .cat-overlay span::after{ transform: translateX(6px); }

.fs-home .bestsellers{ background: var(--bg); }

.fs-home .product-tabs{

            display: flex;

            justify-content: center;

            gap: 32px;

            margin-bottom: 48px;

            border-bottom: 1px solid var(--line);

        }

.fs-home .tab{

            padding: 12px 0;

            font-size: 14px;

            letter-spacing: 0.06em;

            text-transform: uppercase;

            color: var(--muted);

            border-bottom: 2px solid transparent;

            margin-bottom: -1px;

            font-weight: 500;

            transition: all var(--transition);

        }

.fs-home .tab.active, .fs-home .tab:hover{

            color: var(--ink);

            border-color: var(--ink);

        }

.fs-home .products{

            display: grid;

            grid-template-columns: repeat(4, 1fr);

            gap: 28px;

            row-gap: 56px;

        }

.fs-home .product{

            cursor: pointer;

            position: relative;

        }

.fs-home .product-img{

            position: relative;

            aspect-ratio: 4 / 3;

            background: var(--bg-warm);

            border-radius: var(--radius);

            overflow: hidden;

            margin-bottom: 18px;

            transition: box-shadow var(--transition);

        }

.fs-home .product:hover .product-img{

            box-shadow: 0 16px 40px rgba(26, 26, 26, 0.08);

        }

.fs-home .product-img img{

            width: 100%;

            height: 100%;

            object-fit: contain;

            padding: 4%;

            box-sizing: border-box;

            transition: transform 0.6s var(--transition);

        }

.fs-home .product:hover .product-img img{ transform: scale(1.03); }

.fs-home .product-tag{

            position: absolute;

            top: 14px;

            left: 14px;

            background: var(--white);

            padding: 6px 12px;

            font-size: 11px;

            letter-spacing: 0.1em;

            text-transform: uppercase;

            font-weight: 500;

            border-radius: var(--radius);

        }

.fs-home .product-tag.sale{ background: var(--terracotta); color: var(--white); }

.fs-home .product-tag.new{ background: var(--sage); color: var(--white); }

.fs-home .product-fav{

            position: absolute;

            top: 14px;

            right: 14px;

            width: 36px;

            height: 36px;

            background: var(--white);

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            opacity: 0;

            transition: opacity var(--transition);

        }

.fs-home .product:hover .product-fav{ opacity: 1; }

.fs-home .product-fav svg{ width: 16px; height: 16px; }

.fs-home .product-cat{

            font-size: 12px;

            letter-spacing: 0.08em;

            text-transform: uppercase;

            color: var(--muted);

            margin-bottom: 6px;

        }

.fs-home .product-name{

            font-family: var(--serif);

            font-size: 22px;

            font-weight: 500;

            margin-bottom: 6px;

            line-height: 1.2;

        }

.fs-home .product-swatches{

            display: flex;

            gap: 6px;

            margin-bottom: 10px;

        }

.fs-home .swatch{

            width: 14px;

            height: 14px;

            border-radius: 50%;

            border: 1px solid var(--line);

        }

.fs-home .product-csrow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;}

.fs-home .product-csrow .product-swatches{margin-bottom:0;}

.fs-home .product-size{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.02em;color:var(--muted);white-space:nowrap;}

.fs-home .product-size b{color:var(--ink-soft);font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:9.5px;}

.fs-home .product-price{

            display: flex;

            align-items: baseline;

            gap: 10px;

            font-weight: 600;

            font-size: 16px;

        }

.fs-home .price-old{

            color: var(--muted);

            text-decoration: line-through;

            font-weight: 400;

            font-size: 14px;

        }

.fs-home .price-sale{ color: var(--terracotta); }

.fs-home .section-cta{

            text-align: center;

            margin-top: 56px;

        }

.fs-home .story{

            background: var(--bg);

            padding: 120px 0;

        }

.fs-home .story-grid{

            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 80px;

            align-items: center;

        }

.fs-home .story-img{

            aspect-ratio: 4 / 5;

            border-radius: var(--radius);

            overflow: hidden;

        }

.fs-home .story-img img{ width: 100%; height: 100%; object-fit: cover; }

.fs-home .story-text .eyebrow{

            font-size: 12px;

            letter-spacing: 0.25em;

            text-transform: uppercase;

            color: var(--muted);

            margin-bottom: 16px;

        }

.fs-home .story-text h2{

            font-family: var(--serif);

            font-size: clamp(36px, 3.5vw, 52px);

            font-weight: 500;

            line-height: 1.1;

            letter-spacing: -0.01em;

            margin-bottom: 24px;

        }

.fs-home .story-text h2 em{ font-style: italic; font-weight: 400; }

.fs-home .story-text p{

            font-size: 16px;

            color: var(--ink-soft);

            margin-bottom: 20px;

            line-height: 1.7;

        }

.fs-home .story-stats{

            display: grid;

            grid-template-columns: repeat(3, 1fr);

            gap: 24px;

            margin: 32px 0;

            padding: 32px 0;

            border-top: 1px solid var(--line);

            border-bottom: 1px solid var(--line);

        }

.fs-home .stat-num{

            font-family: var(--serif);

            font-size: 40px;

            font-weight: 500;

            line-height: 1;

            margin-bottom: 6px;

        }

.fs-home .stat-label{

            font-size: 12px;

            letter-spacing: 0.08em;

            text-transform: uppercase;

            color: var(--muted);

        }

.fs-home .pillars{ background: var(--ink); color: var(--bg); padding: 100px 0; }

.fs-home .pillars .section-head h2{ color: var(--bg); }

.fs-home .pillars .section-head p{ color: rgba(250, 248, 244, 0.7); }

.fs-home .pillars .section-head .eyebrow{ color: rgba(250, 248, 244, 0.6); }

.fs-home .pillar-grid{

            display: grid;

            grid-template-columns: repeat(4, 1fr);

            gap: 48px;

        }

.fs-home .pillar{

            text-align: center;

        }

.fs-home .pillar-icon{

            width: 56px;

            height: 56px;

            margin: 0 auto 20px;

            color: var(--bg-warm);

        }

.fs-home .pillar h3{

            font-family: var(--serif);

            font-size: 24px;

            font-weight: 500;

            margin-bottom: 12px;

        }

.fs-home .pillar p{

            font-size: 14px;

            color: rgba(250, 248, 244, 0.7);

            line-height: 1.6;

        }

.fs-home .fabric-banner{

            background: var(--bg-warm);

            position: relative;

            overflow: hidden;

            padding: 0;

        }

.fs-home .fabric-grid{

            display: grid;

            grid-template-columns: 1fr 1fr;

            min-height: 480px;

        }

.fs-home .fabric-img{

            background-size: cover;

            background-position: center;

        }

.fs-home .fabric-content{

            padding: 80px 64px;

            display: flex;

            flex-direction: column;

            justify-content: center;

        }

.fs-home .fabric-content .eyebrow{

            font-size: 12px;

            letter-spacing: 0.25em;

            text-transform: uppercase;

            color: var(--accent);

            margin-bottom: 16px;

        }

.fs-home .fabric-content h2{

            font-family: var(--serif);

            font-size: clamp(36px, 3.5vw, 52px);

            font-weight: 500;

            line-height: 1.1;

            margin-bottom: 20px;

        }

.fs-home .fabric-content h2 em{ font-style: italic; font-weight: 400; }

.fs-home .fabric-content p{

            font-size: 16px;

            color: var(--ink-soft);

            margin-bottom: 28px;

            max-width: 440px;

        }

.fs-home .reviews{ background: var(--bg); }

.fs-home .review-grid{

            display: grid;

            grid-template-columns: repeat(3, 1fr);

            gap: 32px;

        }

.fs-home .review{

            background: var(--white);

            padding: 36px;

            border-radius: var(--radius);

            border: 1px solid var(--line);

        }

.fs-home .stars{

            color: var(--terracotta);

            margin-bottom: 16px;

            letter-spacing: 2px;

        }

.fs-home .review p{

            font-family: var(--serif);

            font-size: 20px;

            line-height: 1.4;

            font-weight: 500;

            margin-bottom: 20px;

            color: var(--ink);

        }

.fs-home .review-author{

            font-size: 14px;

            color: var(--muted);

            display: flex;

            align-items: center;

            gap: 12px;

        }

.fs-home .review-author strong{ color: var(--ink); font-weight: 600; }

.fs-home .trustpilot-bar{

            text-align: center;

            margin-top: 48px;

            font-size: 14px;

            color: var(--muted);

        }

.fs-home .trustpilot-bar strong{ color: var(--ink); }

.fs-home .inspiration{ background: var(--bg-alt); }

.fs-home .insta-grid{

            display: grid;

            grid-template-columns: repeat(6, 1fr);

            gap: 8px;

        }

.fs-home .insta-item{

            aspect-ratio: 1;

            overflow: hidden;

            border-radius: var(--radius);

            position: relative;

            cursor: pointer;

        }

.fs-home .insta-item img{

            width: 100%;

            height: 100%;

            object-fit: cover;

            transition: transform 0.6s var(--transition);

        }

.fs-home .insta-item:hover img{ transform: scale(1.08); }

.fs-home .insta-item::after{

            content: '';

            position: absolute;

            inset: 0;

            background: rgba(0,0,0,0);

            transition: background var(--transition);

        }

.fs-home .insta-item:hover::after{ background: rgba(0,0,0,0.2); }

.fs-home .journal{

            background: var(--bg);

            padding: 100px 0;

        }

.fs-home .journal-head{

            display: flex;

            align-items: flex-end;

            justify-content: space-between;

            margin-bottom: 56px;

            flex-wrap: wrap;

            gap: 24px;

        }

.fs-home .journal-head .eyebrow{

            font-size: 12px;

            letter-spacing: 0.25em;

            text-transform: uppercase;

            color: var(--muted);

            margin-bottom: 14px;

        }

.fs-home .journal-head h2{

            font-family: var(--serif);

            font-size: clamp(32px, 3vw, 44px);

            font-weight: 500;

            line-height: 1.1;

            letter-spacing: -0.01em;

        }

.fs-home .journal-head h2 em{ font-style: italic; font-weight: 400; }

.fs-home .journal-all{

            font-size: 13px;

            letter-spacing: 0.08em;

            text-transform: uppercase;

            font-weight: 500;

            border-bottom: 1px solid var(--ink);

            padding-bottom: 4px;

            transition: padding-right var(--transition);

        }

.fs-home .journal-all:hover{ padding-right: 8px; opacity: 1; }

.fs-home .journal-grid{

            display: grid;

            grid-template-columns: repeat(3, 1fr);

            gap: 40px;

        }

.fs-home .post{

            display: flex;

            flex-direction: column;

            gap: 16px;

        }

.fs-home .post-img{

            display: block;

            aspect-ratio: 4 / 3;

            border-radius: var(--radius);

            overflow: hidden;

            background: var(--bg-warm);

        }

.fs-home .post-img img{

            width: 100%;

            height: 100%;

            object-fit: cover;

            transition: transform 0.6s var(--transition);

        }

.fs-home .post:hover .post-img img{ transform: scale(1.04); }

.fs-home .post-meta{

            display: flex;

            align-items: center;

            gap: 12px;

            font-size: 12px;

            letter-spacing: 0.08em;

            text-transform: uppercase;

            color: var(--muted);

        }

.fs-home .post-cat{ color: var(--accent); font-weight: 600; }

.fs-home .post-meta span + span::before{

            content: '·';

            margin-right: 12px;

            color: var(--line);

        }

.fs-home .post h3{

            font-family: var(--serif);

            font-size: 24px;

            font-weight: 500;

            line-height: 1.25;

            letter-spacing: -0.005em;

        }

.fs-home .post h3 a{ color: var(--ink); transition: color var(--transition); }

.fs-home .post h3 a:hover{ color: var(--accent); opacity: 1; }

.fs-home .post p{

            color: var(--ink-soft);

            font-size: 14px;

            line-height: 1.6;

        }

.fs-home .post-link{

            font-size: 13px;

            letter-spacing: 0.08em;

            text-transform: uppercase;

            font-weight: 500;

            color: var(--ink);

            margin-top: 4px;

            display: inline-flex;

            align-items: center;

            gap: 6px;

        }

.fs-home .post-link::after{

            content: '→';

            transition: transform var(--transition);

        }

.fs-home .post-link:hover{ opacity: 1; }

.fs-home .post-link:hover::after{ transform: translateX(4px); }

.fs-home .newsletter{

            background: var(--bg-warm);

            padding: 80px 0;

            text-align: center;

        }

.fs-home .newsletter h2{

            font-family: var(--serif);

            font-size: clamp(32px, 3vw, 44px);

            font-weight: 500;

            margin-bottom: 12px;

            line-height: 1.1;

        }

.fs-home .newsletter h2 em{ font-style: italic; }

.fs-home .newsletter p{

            color: var(--ink-soft);

            margin-bottom: 32px;

            max-width: 480px;

            margin-left: auto;

            margin-right: auto;

        }

.fs-home .newsletter-form{

            display: flex;

            max-width: 480px;

            margin: 0 auto;

            gap: 8px;

        }

.fs-home .newsletter-form input{

            flex: 1;

            padding: 16px 20px;

            border: 1px solid var(--line);

            border-radius: var(--radius);

            background: var(--white);

            font-family: inherit;

            font-size: 14px;

        }

.fs-home .newsletter-form input:focus{ outline: 1px solid var(--ink); }

.fs-home .newsletter small{

            display: block;

            margin-top: 16px;

            font-size: 12px;

            color: var(--muted);

        }

.fs-home footer{

            background: var(--ink);

            color: var(--bg);

            padding: 80px 0 32px;

        }

.fs-home .footer-grid{

            display: grid;

            grid-template-columns: 2fr 1fr 1fr 1fr 1fr;

            gap: 48px;

            margin-bottom: 64px;

        }

.fs-home .footer-brand .logo{ color: var(--bg); margin-bottom: 16px; display: block; }

.fs-home .footer-brand p{

            color: rgba(250, 248, 244, 0.6);

            font-size: 14px;

            line-height: 1.7;

            margin-bottom: 24px;

            max-width: 320px;

        }

.fs-home .footer-contact div{

            font-size: 14px;

            color: rgba(250, 248, 244, 0.7);

            margin-bottom: 6px;

        }

.fs-home .footer-contact strong{ color: var(--bg); }

.fs-home .footer-col h4{

            font-size: 13px;

            letter-spacing: 0.12em;

            text-transform: uppercase;

            margin-bottom: 20px;

            font-weight: 600;

        }

.fs-home .footer-col ul{

            list-style: none;

        }

.fs-home .footer-col ul li{

            margin-bottom: 12px;

        }

.fs-home .footer-col ul a{

            color: rgba(250, 248, 244, 0.7);

            font-size: 14px;

        }

.fs-home .footer-col ul a:hover{ color: var(--bg); opacity: 1; }

.fs-home .footer-bottom{

            padding-top: 32px;

            border-top: 1px solid rgba(250, 248, 244, 0.15);

            display: flex;

            justify-content: space-between;

            align-items: center;

            flex-wrap: wrap;

            gap: 16px;

            font-size: 13px;

            color: rgba(250, 248, 244, 0.5);

        }

.fs-home .footer-social{ display: flex; gap: 16px; }

.fs-home .footer-social a{

            width: 36px;

            height: 36px;

            border: 1px solid rgba(250, 248, 244, 0.2);

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            transition: all var(--transition);

        }

.fs-home .footer-social a:hover{

            background: var(--bg);

            color: var(--ink);

            border-color: var(--bg);

            opacity: 1;

        }

.fs-home .footer-social svg{ width: 16px; height: 16px; }

.fs-home .payments{

            display: flex;

            gap: 12px;

            align-items: center;

        }

.fs-home .pay-badge{

            background: rgba(250, 248, 244, 0.1);

            color: var(--bg);

            padding: 6px 10px;

            border-radius: 4px;

            font-size: 11px;

            font-weight: 600;

            letter-spacing: 0.05em;

        }

@media (max-width: 1024px){

.fs-home .header-top{ grid-template-columns: 1fr 1fr; gap: 16px; }

.fs-home .header-search{ grid-column: 1 / -1; order: 3; max-width: 100%; justify-self: stretch; }

.fs-home .header-actions{ justify-self: end; }

.fs-home .usp-grid, .fs-home .pillar-grid{ grid-template-columns: repeat(2, 1fr); }

.fs-home .usp-item:nth-child(2){ border-right: none; }

.fs-home .products{ grid-template-columns: repeat(2, 1fr); }

.fs-home .insta-grid{ grid-template-columns: repeat(3, 1fr); }

.fs-home .footer-grid{ grid-template-columns: repeat(2, 1fr); }

.fs-home .story-grid, .fs-home .fabric-grid{ grid-template-columns: 1fr; gap: 40px; }

.fs-home .review-grid{ grid-template-columns: 1fr; }

.fs-home .journal-grid{ grid-template-columns: 1fr; gap: 48px; }

.fs-home .categories{ grid-template-columns: repeat(2, 1fr); gap: 16px; }

.fs-home .cat-overlay h3{ font-size: 28px; }

.fs-home nav > ul{ gap: 24px; flex-wrap: wrap; }

.fs-home .mega-grid{ grid-template-columns: 1fr 1fr; gap: 32px; padding: 32px 0 40px; }

.fs-home .mega-feature{ grid-column: 1 / -1; aspect-ratio: 21 / 9; }

}

@media (max-width: 640px){

.fs-home .mega-menu{ display: none; }

.fs-home .announce-row{ grid-template-columns: 1fr auto; padding: 8px 16px; gap: 12px; }

.fs-home .announce-social{ display: none; }

.fs-home .announce-text{ text-align: left; font-size: 12px; }

.fs-home .announce-text a{ display: none; }

.fs-home .callback-btn{ padding: 6px 14px; font-size: 11px; }

.fs-home .container{ padding: 0 20px; }

.fs-home section{ padding: 64px 0; }

.fs-home .usp-grid, .fs-home .products, .fs-home .pillar-grid, .fs-home .footer-grid, .fs-home .categories{ grid-template-columns: 1fr; }

.fs-home .usp-item{ border-right: none; border-bottom: 1px solid var(--line); padding: 16px 0; }

.fs-home .usp-item:last-child{ border-bottom: none; }

.fs-home .insta-grid{ grid-template-columns: repeat(2, 1fr); }

.fs-home .header-actions .icon-btn span{ display: none; }

.fs-home nav ul{ gap: 16px; font-size: 12px; }

.fs-home .fabric-content{ padding: 48px 24px; }

}



/* --- neutralize OpenCart base element styles leaking into scoped content --- */

.fs-home { color: var(--ink); }

.fs-home h1,.fs-home h2,.fs-home h3,.fs-home h4,.fs-home h5,.fs-home h6,.fs-home p,.fs-home a,.fs-home span,.fs-home li,.fs-home ul,.fs-home strong,.fs-home em,.fs-home small,.fs-home button,.fs-home input,.fs-home label { color: inherit; }

.fs-home .container { width: auto; }

.fs-home a:focus:not(:focus-visible), .fs-home button:focus:not(:focus-visible) { outline: none; }



/* --- home: we show only the two real products; center them so the

   4-column mockup grid does not leave half the row empty --- */

.fs-home .products { display: flex; flex-wrap: wrap; justify-content: center; gap: 56px 28px; }

.fs-home .products .product { width: calc((100% - 84px) / 4); min-width: 300px; }

@media (max-width: 1024px) { .fs-home .products .product { width: calc((100% - 28px) / 2); } }

@media (max-width: 640px) { .fs-home .products .product { width: 100%; } }



/* --- home: tighten the very generous inter-section spacing (mockup uses 100px) --- */

.fs-home section { padding: 70px 0; }

.fs-home .categories-section { padding-top: 70px; }



/* ============================================================

   MOBILE (≤767) — pixel-perfect port of +Makieta/index-mobile.html.

   Overrides the generic stacking above to match the mobile makieta.

   ============================================================ */

@media (max-width: 767px) {

  /* ---- Hero ---- */

  .fs-home .hero { position: relative; height: 72vh; min-height: 480px; max-height: 660px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; color: #fff; padding: 0; margin: 0; }

  .fs-home .hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 88%; }

  .fs-home .hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,16,12,.78) 0%, rgba(20,16,12,.22) 42%, rgba(20,16,12,.04) 70%); }

  .fs-home .hero-content { position: relative; z-index: 2; max-width: 100%; margin: 0; padding: 0 24px 44px; display: block; }

  .fs-home .hero-eyebrow { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; margin-bottom: 16px; opacity: .92; }

  .fs-home .hero h1 { font-size: 46px; line-height: 1.03; letter-spacing: -.015em; margin-bottom: 16px; max-width: none; text-shadow: 0 2px 30px rgba(0,0,0,.25); }

  .fs-home .hero p { font-size: 15px; line-height: 1.55; opacity: .94; font-weight: 300; margin-bottom: 26px; max-width: 330px; }

  .fs-home .hero-actions { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }

  .fs-home .hero .btn { display: flex; width: 100%; justify-content: center; }

  .fs-home .hero .btn-primary { background: #fff; color: var(--ink); }

  .fs-home .hero .btn-outline { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.6); }



  /* ---- Section heads ---- */

  .fs-home section { padding: 0; }

  .fs-home .categories-section, .fs-home .bestsellers, .fs-home .pillars, .fs-home .reviews, .fs-home .inspiration { padding: 54px 0; }

  .fs-home .section-head { text-align: center; margin-bottom: 22px; padding: 0 20px; }

  .fs-home .section-head .eyebrow { font-size: 11px; letter-spacing: .28em; margin-bottom: 12px; }

  .fs-home .section-head h2 { font-size: 34px; line-height: 1.06; margin-bottom: 12px; }

  .fs-home .section-head p { font-size: 14.5px; line-height: 1.6; max-width: 340px; margin: 0 auto; }

  .fs-home .container { padding: 0 20px; }



  /* ---- USP strip → horizontal scroll chips ---- */

  .fs-home .usp-strip { background: var(--white); border-bottom: 1px solid var(--line); }

  .fs-home .usp-strip .container { padding: 0; }

  .fs-home .usp-grid { display: flex; gap: 10px; overflow-x: auto; padding: 16px 20px; grid-template-columns: none; }

  .fs-home .usp-grid::-webkit-scrollbar { display: none; }

  .fs-home .usp-item { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }

  .fs-home .usp-icon { width: 22px; height: 22px; flex-shrink: 0; }

  .fs-home .usp-text strong { font-size: 12.5px; white-space: nowrap; margin-bottom: 0; }

  .fs-home .usp-text span { font-size: 11px; white-space: nowrap; }



  /* ---- Categories → 2-col, first full-width ---- */

  .fs-home .categories { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

  .fs-home .cat-card { aspect-ratio: 3 / 4; border-radius: 6px; }

  .fs-home .cat-card:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }

  .fs-home .cat-overlay h3 { font-size: 23px; }

  .fs-home .cat-overlay span { font-size: 11px; letter-spacing: .1em; }



  /* ---- Bestsellers → filter chips + product carousel ---- */

  .fs-home .bestsellers .container { padding: 0; }

  .fs-home .bestsellers .section-head { padding: 0 20px; }

  .fs-home .product-tabs { display: flex; gap: 9px; overflow-x: auto; padding: 4px 20px 20px; justify-content: flex-start; }

  .fs-home .product-tabs::-webkit-scrollbar { display: none; }

  .fs-home .product-tabs .tab { flex: 0 0 auto; padding: 9px 18px; border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; background: var(--bg); }

  .fs-home .product-tabs .tab.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

  .fs-home .products { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 20px 6px; }

  .fs-home .products::-webkit-scrollbar { display: none; }

  .fs-home .products .product { flex: 0 0 76%; width: auto; min-width: 0; scroll-snap-align: start; }

  .fs-home .product-img { aspect-ratio: 1 / 1; overflow: hidden; }

  .fs-home .product-img img { width: 100%; height: 100%; object-fit: cover; }

  .fs-home .product-name { font-size: 21px; }

  .fs-home .section-cta { padding: 28px 20px 0; }

  .fs-home .section-cta .btn { display: flex; width: 100%; justify-content: center; }



  /* ---- Story ---- */

  .fs-home .story .container { padding: 0; }

  .fs-home .story-grid { display: block; gap: 0; }

  .fs-home .story-img { aspect-ratio: 4 / 3; overflow: hidden; }

  .fs-home .story-img img { width: 100%; height: 100%; object-fit: cover; }

  .fs-home .story-text { background: var(--bg-warm); padding: 40px 24px 44px; }

  .fs-home .story-text h2 { font-size: 33px; }

  .fs-home .story-stats { display: flex; gap: 10px; margin: 26px 0 28px; }

  .fs-home .story-stats > div { flex: 1; text-align: center; padding: 16px 6px; background: rgba(255,255,255,.55); border-radius: 6px; }

  .fs-home .stat-num { font-size: 30px; }

  .fs-home .story-text .btn { display: flex; width: 100%; justify-content: center; }



  /* ---- Pillars → 2x2 ---- */

  .fs-home .pillar-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

  .fs-home .pillar { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 22px 16px; }

  .fs-home .pillar-icon { width: 30px; height: 30px; margin-bottom: 14px; }

  .fs-home .pillar h3 { font-size: 15px; }

  .fs-home .pillar p { font-size: 12.5px; }



  /* ---- Fabric banner → dark overlapping card ---- */

  .fs-home .fabric-grid { display: block; gap: 0; }

  .fs-home .fabric-img { height: 340px; background-size: cover; background-position: center; }

  .fs-home .fabric-content { margin: -56px 20px 0; position: relative; z-index: 2; background: var(--ink); color: var(--bg); border-radius: 10px; padding: 34px 26px 32px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.5); }

  .fs-home .fabric-content .eyebrow { color: var(--sage); }

  .fs-home .fabric-content h2 { font-size: 30px; }

  .fs-home .fabric-content .btn-primary { background: var(--bg); color: var(--ink); }



  /* ---- Reviews → carousel ---- */

  .fs-home .reviews { background: var(--bg-alt); }

  .fs-home .review-grid { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; padding: 0 20px 6px; grid-template-columns: none; }

  .fs-home .review-grid::-webkit-scrollbar { display: none; }

  .fs-home .review { flex: 0 0 82%; scroll-snap-align: center; background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 26px 24px; }

  .fs-home .review p { font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.45; }

  .fs-home .trustpilot-bar { text-align: center; margin: 26px 20px 0; font-size: 13px; }



  /* ---- Inspiration → 3-col insta ---- */

  .fs-home .insta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }

  .fs-home .insta-item { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 3px; }

  .fs-home .insta-item img { width: 100%; height: 100%; object-fit: cover; }



  /* ---- Newsletter ---- */

  .fs-home .newsletter { background: var(--bg-warm); text-align: center; padding: 54px 26px; }

  .fs-home .newsletter h2 { font-size: 31px; }

  .fs-home .newsletter p { font-size: 14px; }

  .fs-home .newsletter-form { display: flex; flex-direction: column; gap: 11px; }

  .fs-home .newsletter-form input { width: 100%; padding: 15px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }

  .fs-home .newsletter-form .btn { display: flex; width: 100%; justify-content: center; }



  /* ---- Journal → carousel ---- */

  .fs-home .journal { padding: 54px 0; }

  .fs-home .journal .container { padding: 0; }

  .fs-home .journal-head { padding: 0 20px; margin-bottom: 22px; }

  .fs-home .journal-grid { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 20px 6px; grid-template-columns: none; }

  .fs-home .journal-grid::-webkit-scrollbar { display: none; }

  .fs-home .post { flex: 0 0 80%; scroll-snap-align: start; }

  .fs-home .post-img { aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; display: block; }

  .fs-home .post-img img { width: 100%; height: 100%; object-fit: cover; }

  .fs-home .post h3 { font-size: 21px; }

}