/* ============ Variables ============ */
:root{
  --color-bg: #faf7f2;
  --color-bg-tint: #f2ece2;
  --color-text: #2b2723;
  --color-text-light: #6f6a63;
  --color-accent: #e0601f;
  --color-accent-dark: #b84c16;
  --color-border: #e5ddd0;
  --color-white: #ffffff;
  --color-dark: #221f1c;
  --color-heading: #182420;
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Poppins', sans-serif;
  --radius: 10px;
  --shadow: 0 10px 30px rgba(43,39,35,0.08);
  --transition: 0.25s ease;

  /* Swatch palette (used for generated wallpaper-pattern thumbnails) */
  --sw-green: #3f5138;
  --sw-sage: #7c8c6c;
  --sw-ivory: #e7ded0;
  --sw-blush: #caa093;
  --sw-ochre: #bd8a34;
  --sw-navy: #33465a;
  --sw-charcoal: #37332d;
  --sw-teal: #3f6b64;
  --sw-rose: #a15a5f;
  --sw-grey: #a49d92;
  --sw-blue: #5f8299;
  --sw-cream: #ded2ba;

  --leaf-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 110'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='10%25' y1='0%25' x2='95%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%235c7a4f'/%3E%3Cstop offset='55%25' stop-color='%233f5c37'/%3E%3Cstop offset='100%25' stop-color='%232a3f26'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M10 104 C22 88 26 72 34 58 C38 50 36 40 42 30' stroke='%233f5c37' stroke-width='2' fill='none' stroke-linecap='round' opacity='0.6'/%3E%3Cg transform='translate(26,84) rotate(-18) scale(1.15)'%3E%3Cpath d='M0 6 C-15 -3 -23 -20 -19 -38 C-16 -54 -7 -64 0 -68 C7 -64 16 -54 19 -38 C23 -20 15 -3 0 6 Z' fill='url(%23g)'/%3E%3Cpath d='M0 3 C-1 -20 1 -44 0 -66' stroke='rgba(255,255,255,0.3)' stroke-width='1.3' fill='none'/%3E%3C/g%3E%3Cg transform='translate(44,32) rotate(16) scale(0.85)'%3E%3Cpath d='M0 6 C-15 -3 -23 -20 -19 -38 C-16 -54 -7 -64 0 -68 C7 -64 16 -54 19 -38 C23 -20 15 -3 0 6 Z' fill='url(%23g)'/%3E%3Cpath d='M0 3 C-1 -20 1 -44 0 -66' stroke='rgba(255,255,255,0.3)' stroke-width='1.3' fill='none'/%3E%3C/g%3E%3C/svg%3E");
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  font-weight: 400;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family: var(--font-heading); margin:0 0 0.5em; line-height:1.2; font-weight:700; color: var(--color-heading); }
p{ margin:0 0 1em; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }

.container{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:0 24px;
}

/* ============ Buttons ============ */
.btn{
  display:inline-block;
  padding:14px 30px;
  border-radius: 50px;
  font-weight:600;
  font-size:0.95rem;
  transition: all var(--transition);
  border:2px solid transparent;
  white-space:nowrap;
}
.btn--primary{
  display:inline-flex;
  align-items:center;
  gap:14px;
  padding:6px 6px 6px 28px;
  background: var(--color-accent);
  color: var(--color-white);
}
.btn--primary:hover{
  background: var(--color-accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(193,84,28,0.3);
}
.btn__arrow{
  width:38px; height:38px;
  border-radius:50%;
  background: #fff;
  color: var(--color-accent);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition: transform var(--transition);
}
.btn__arrow svg{ width:18px; height:18px; }
.btn--primary:hover .btn__arrow{ transform: translateX(3px); }
.btn--outline-dark{
  border-color: var(--color-heading);
  color: var(--color-heading);
}
.btn--outline-dark:hover{
  background: var(--color-heading);
  color: #fff;
  transform: translateY(-2px);
}

/* ============ Swatch Patterns ============ */
/* Generated wallpaper-texture thumbnails: a color class + a pattern class, e.g. "clr-green ptn-bloom" */
.swatch{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  background-repeat:repeat;
}
.swatch::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(160deg, rgba(255,255,255,0.2), rgba(0,0,0,0.16) 100%);
  mix-blend-mode: overlay;
  pointer-events:none;
}

.clr-green{ background-color: var(--sw-green); color:#fff; }
.clr-sage{ background-color: var(--sw-sage); color:#fff; }
.clr-ivory{ background-color: var(--sw-ivory); color:#3a352d; }
.clr-blush{ background-color: var(--sw-blush); color:#3a221b; }
.clr-ochre{ background-color: var(--sw-ochre); color:#fff; }
.clr-navy{ background-color: var(--sw-navy); color:#fff; }
.clr-charcoal{ background-color: var(--sw-charcoal); color:#fff; }
.clr-teal{ background-color: var(--sw-teal); color:#fff; }
.clr-rose{ background-color: var(--sw-rose); color:#fff; }
.clr-grey{ background-color: var(--sw-grey); color:#3a352d; }
.clr-blue{ background-color: var(--sw-blue); color:#fff; }
.clr-cream{ background-color: var(--sw-cream); color:#3a352d; }
.clr-terracotta{ background-color: var(--color-accent); color:#fff; }

.ptn-stripe{ background-image: repeating-linear-gradient(115deg, rgba(255,255,255,0.18) 0 3px, transparent 3px 26px); }
.ptn-dots{ background-image: radial-gradient(rgba(255,255,255,0.28) 2.5px, transparent 2.6px); background-size:22px 22px; }
.ptn-diamond{
  background-image:
    linear-gradient(45deg, rgba(255,255,255,0.16) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.16) 75%),
    linear-gradient(45deg, rgba(255,255,255,0.16) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.16) 75%);
  background-size:44px 44px;
  background-position:0 0, 22px 22px;
}
.ptn-wave{
  background-image:
    radial-gradient(ellipse 60px 22px at 25% 30%, rgba(255,255,255,0.2), transparent 70%),
    radial-gradient(ellipse 60px 22px at 70% 65%, rgba(255,255,255,0.14), transparent 70%);
  background-size:110px 70px;
}
.ptn-marble{
  background-image:
    linear-gradient(120deg, rgba(255,255,255,0.16) 0%, transparent 32%, rgba(255,255,255,0.1) 55%, transparent 80%),
    linear-gradient(30deg, rgba(0,0,0,0.08) 0%, transparent 40%);
}
.ptn-bloom{
  background-image:
    radial-gradient(circle at 20% 25%, rgba(255,255,255,0.22) 0 10px, transparent 11px),
    radial-gradient(circle at 55% 62%, rgba(255,255,255,0.18) 0 14px, transparent 15px),
    radial-gradient(circle at 82% 28%, rgba(255,255,255,0.16) 0 8px, transparent 9px),
    radial-gradient(circle at 35% 88%, rgba(255,255,255,0.14) 0 9px, transparent 10px),
    radial-gradient(circle at 92% 82%, rgba(255,255,255,0.12) 0 7px, transparent 8px);
  background-size:130px 130px;
}
.ptn-chevron{
  background-image:
    linear-gradient(135deg, rgba(255,255,255,0.16) 25%, transparent 25%),
    linear-gradient(225deg, rgba(255,255,255,0.16) 25%, transparent 25%);
  background-size:32px 32px;
}
.ptn-linen{
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.1) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.06) 0 1px, transparent 1px 4px);
}

/* ============ Header ============ */
.header{
  position: sticky;
  top:0;
  z-index:100;
  background: rgba(250,247,242,0.97);
  backdrop-filter: blur(6px);
  border-bottom:1px solid var(--color-border);
}
.header .container{ max-width:1360px; }
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 24px;
  gap:20px;
}
.logo{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.logo__mark{ width:32px; height:32px; flex-shrink:0; }
.logo__text{ display:flex; flex-direction:column; line-height:1.15; }
.logo__name{
  font-family: var(--font-heading);
  font-size:1.3rem;
  font-weight:700;
  color: var(--color-heading);
}
.logo__tagline{
  font-size:0.58rem;
  letter-spacing:2px;
  text-transform:uppercase;
  font-weight:600;
  color: var(--color-text-light);
}
.logo__tagline em{ font-style:normal; color: var(--color-accent); }

.nav__list{
  display:flex;
  gap:22px;
}
.nav__list > li{ position:relative; }
.nav__list > li > a{
  font-weight:500;
  font-size:0.9rem;
  padding:8px 0;
  white-space:nowrap;
  transition: color var(--transition);
}
.nav__list > li > a:hover{ color: var(--color-accent); }

.dropdown{
  position:absolute;
  top:100%;
  left:0;
  background: var(--color-white);
  min-width:220px;
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  padding:10px 0;
  opacity:0;
  visibility:hidden;
  transform: translateY(8px);
  transition: all var(--transition);
}
.has-dropdown:hover .dropdown{
  opacity:1;
  visibility:visible;
  transform: translateY(0);
}
.dropdown li a{
  display:block;
  padding:10px 20px;
  font-size:0.9rem;
  white-space:nowrap;
}
.dropdown li a:hover{
  background: var(--color-bg-tint);
  color: var(--color-accent);
}

.header__search{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1 1 240px;
  max-width:280px;
  background: var(--color-bg-tint);
  border-radius:50px;
  padding:10px 18px;
  color: var(--color-text-light);
}
.header__search svg{ width:17px; height:17px; flex-shrink:0; }
.header__search input{
  flex:1;
  min-width:0;
  border:none;
  background:none;
  font-family:inherit;
  font-size:0.85rem;
  color: var(--color-text);
}
.header__search input:focus{ outline:none; }
.icon-btn--mobile-search{ display:none; }

.header__actions{ display:flex; align-items:center; gap:4px; }
.icon-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px; height:40px;
  padding:8px;
  border-radius:50%;
  color: var(--color-text);
  transition: background var(--transition), color var(--transition);
  position:relative;
}
.icon-btn svg{ width:20px; height:20px; }
.icon-btn:hover{ background: var(--color-bg-tint); color: var(--color-accent); }
.cart-count{
  position:absolute;
  top:2px;
  right:2px;
  background: var(--color-accent);
  color:#fff;
  font-size:0.65rem;
  width:16px; height:16px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}

.hamburger{
  display:none;
  flex-direction:column;
  gap:5px;
  padding:8px;
}
.hamburger span{
  width:24px; height:2px;
  background: var(--color-text);
  transition: all var(--transition);
}

.search-bar{
  max-height:0;
  overflow:hidden;
  transition: max-height var(--transition);
  background: var(--color-bg-tint);
}
.search-bar.active{ max-height:80px; }
.search-bar .container{
  display:flex;
  gap:10px;
  padding:16px 24px;
}
.search-bar input{
  flex:1;
  padding:12px 16px;
  border-radius:50px;
  border:1px solid var(--color-border);
  font-family:inherit;
}
.search-bar button{
  padding:12px 24px;
  background: var(--color-accent);
  color:#fff;
  border-radius:50px;
  font-weight:600;
}

/* ============ Hero ============ */
.hero{
  position:relative;
  z-index:0;
  overflow:hidden;
  min-height:640px;
  display:flex;
  align-items:center;
  padding:64px 0;
}
.hero__media{
  position:absolute;
  inset:0;
  z-index:-1;
}
.hero__media img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 30%;
}
.hero__scrim{
  position:absolute; inset:0;
  background: linear-gradient(100deg, rgba(253,241,231,0.96) 0%, rgba(253,241,231,0.92) 32%, rgba(253,241,231,0.6) 55%, rgba(253,241,231,0.15) 75%);
}
.hero__overlay{ position:relative; z-index:1; }
.hero__content{ max-width:600px; }
.hero__eyebrow{
  position:relative;
  text-transform:uppercase;
  letter-spacing:3px;
  font-size:0.8rem;
  color: var(--color-accent-dark);
  font-weight:600;
  margin:0 0 18px;
  padding-left:44px;
}
.hero__eyebrow::before{
  content:"";
  position:absolute;
  left:0; top:50%;
  width:32px; height:2px;
  background: var(--color-accent);
  transform: translateY(-50%);
}
.hero h1{
  font-size:clamp(2.3rem, 3.4vw, 3.1rem);
  margin-bottom:20px;
  max-width:480px;
}
.hero h1 .accent{ color: var(--color-accent); }
.hero__text{
  font-size:1.02rem;
  color: var(--color-text-light);
  max-width:440px;
}
.hero__cta{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:10px; margin-bottom:40px; }
.btn--play{
  display:inline-flex;
  align-items:center;
  gap:14px;
  font-weight:600;
  color: var(--color-heading);
}
.btn__play{
  width:46px; height:46px;
  border-radius:50%;
  border:2px solid var(--color-heading);
  background: rgba(255,255,255,0.6);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition: all var(--transition);
}
.btn__play svg{ width:14px; height:14px; }
.btn--play:hover .btn__play{ background: var(--color-heading); color:#fff; }

.hero__features{
  display:flex;
  flex-wrap:wrap;
  gap:26px 30px;
}
.hero__feature{ display:flex; align-items:center; gap:12px; }
.hero__feature-icon{
  width:42px; height:42px;
  border-radius:50%;
  background:#fff;
  color: var(--color-accent);
  box-shadow: var(--shadow);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.hero__feature-icon svg{ width:18px; height:18px; }
.hero__feature span:last-child{
  font-size:0.8rem;
  font-weight:600;
  line-height:1.35;
  color: var(--color-heading);
}

.hero__badge{
  position:absolute;
  z-index:1;
  right:max(24px, calc((100vw - 1240px) / 2 + 24px));
  bottom:40px;
  background: #fff;
  border-radius:18px;
  padding:16px 22px;
  box-shadow: var(--shadow);
  text-align:center;
  min-width:150px;
}
.hero__badge-label{
  display:block;
  text-transform:uppercase;
  letter-spacing:1.5px;
  font-size:0.68rem;
  font-weight:600;
  color: var(--color-text-light);
}
.hero__badge strong{
  display:block;
  font-family: var(--font-heading);
  font-size:1.4rem;
  color: var(--color-accent);
  line-height:1.3;
}
.hero__badge-sub{
  display:block;
  font-size:0.72rem;
  color: var(--color-text-light);
}

/* ============ Trust Strip ============ */
.trust-strip{ padding:28px 0 8px; }
.trust-strip__grid{
  display:flex;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.trust-strip__item{
  display:flex;
  align-items:center;
  gap:12px;
  flex:1 1 200px;
}
.trust-strip__icon{
  width:44px; height:44px;
  border-radius:12px;
  background: rgba(224,96,31,0.12);
  color: var(--color-accent);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.trust-strip__icon svg{ width:20px; height:20px; }
.trust-strip__item strong{ display:block; font-size:0.9rem; color: var(--color-heading); }
.trust-strip__item small{ display:block; font-size:0.78rem; color: var(--color-text-light); }

/* ============ About ============ */
.about{
  position:relative;
  overflow:hidden;
  padding:100px 0;
  background: linear-gradient(160deg, #fdf3ea 0%, #fdf0e6 100%);
}
.about::before{
  content:"";
  position:absolute;
  top:-90px; right:-110px;
  width:340px; height:340px;
  border-radius:50%;
  background: rgba(224,96,31,0.10);
  pointer-events:none;
}
.about::after{
  content:"";
  position:absolute;
  bottom:-70px; right:140px;
  width:220px; height:220px;
  border-radius:50%;
  background: rgba(224,96,31,0.06);
  pointer-events:none;
}
.about__grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap:64px;
  align-items:center;
}
.about__visual{ position:relative; }
.about__visual::before{
  content:"";
  position:absolute;
  top:-28px; left:-28px;
  width:65%; height:55%;
  background: var(--color-accent);
  border-radius:20px;
  z-index:0;
}
.about__image{
  position:relative;
  z-index:1;
  border-radius:20px;
  box-shadow: var(--shadow);
  aspect-ratio: 7/8;
  overflow:hidden;
}
.about__image img{ width:100%; height:100%; object-fit:cover; }
.about__badge{
  position:absolute;
  z-index:2;
  left:-20px;
  bottom:-20px;
  background:#fff;
  border-radius:16px;
  padding:20px 24px;
  box-shadow: var(--shadow);
  min-width:140px;
}
.about__badge-icon{
  width:34px; height:34px;
  border-radius:10px;
  background: var(--color-accent);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:10px;
}
.about__badge-icon svg{ width:18px; height:18px; }
.about__badge strong{
  display:block;
  font-family: var(--font-heading);
  font-size:2.1rem;
  color: var(--color-accent);
  line-height:1;
  margin-bottom:6px;
}
.about__badge span{
  display:block;
  font-size:0.88rem;
  color: var(--color-heading);
  font-weight:600;
}
.about__dots{
  position:absolute;
  left:-64px; bottom:60px;
  width:90px; height:70px;
  background-image: radial-gradient(var(--color-accent) 1.6px, transparent 1.8px);
  background-size:16px 16px;
  opacity:0.3;
  pointer-events:none;
}
.eyebrow--lined-left{
  display:flex;
  align-items:center;
  gap:14px;
  justify-content:flex-start;
}
.eyebrow--lined-left::before{
  content:"";
  width:34px; height:1px;
  background: var(--color-accent);
  opacity:0.7;
}
.about__text h2{ font-size:clamp(1.9rem,3.2vw,2.6rem); }
.about__text h2 .accent{ color: var(--color-accent); }
.about__text p{ color: var(--color-text-light); }
.about__stats{
  display:flex;
  margin:28px 0 32px;
  padding:24px 0;
  border-top:1px solid var(--color-border);
  border-bottom:1px solid var(--color-border);
}
.about__stat{
  flex:1;
  display:flex;
  gap:12px;
  padding:0 20px;
}
.about__stat:first-child{ padding-left:0; }
.about__stat + .about__stat{ border-left:1px solid var(--color-border); }
.about__stat-icon{
  width:40px; height:40px;
  border-radius:50%;
  background: rgba(224,96,31,0.12);
  color: var(--color-accent);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.about__stat-icon svg{ width:18px; height:18px; }
.about__stat strong{ display:block; font-size:0.9rem; color: var(--color-heading); margin-bottom:4px; }
.about__stat small{ display:block; font-size:0.78rem; color: var(--color-text-light); line-height:1.4; }

/* ============ About Page ============ */
.about-page__intro{
  padding:78px 0 88px;
  background:linear-gradient(145deg, #fdf3ea 0%, #faf7f2 62%, #f2ece2 100%);
}
.about-page__intro-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.04fr) minmax(0, 0.96fr);
  align-items:center;
  gap:72px;
}
.about-page__copy{ max-width:640px; }
.about-page__copy .eyebrow{ color:var(--color-text-light); }
.about-page__copy h1{
  max-width:650px;
  margin-bottom:20px;
  font-size:3.8rem;
  line-height:1.1;
}
.about-page__copy h1 span{ color:var(--color-accent); }
.about-page__copy p:not(.eyebrow){ color:var(--color-text-light); }
.about-page__copy .about-page__lead{
  color:var(--color-heading);
  font-size:1.15rem;
  line-height:1.65;
}
.about-page__copy .btn{ margin-top:12px; }
.about-page__visual{
  position:relative;
  min-width:0;
  aspect-ratio:1.04;
  border:8px solid rgba(255,255,255,0.72);
  border-radius:24px;
  box-shadow:0 22px 48px rgba(64,45,27,0.14);
}
.about-page__visual img{
  width:100%;
  height:100%;
  border-radius:16px;
  object-fit:cover;
  object-position:center;
}
.about-page__image-note{
  position:absolute;
  left:-28px;
  bottom:24px;
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:16px 22px;
  border-left:3px solid var(--color-accent);
  background:#fff;
  box-shadow:var(--shadow);
}
.about-page__image-note strong{ color:var(--color-heading); font-family:var(--font-heading); font-size:1.08rem; }
.about-page__image-note span{ color:var(--color-text-light); font-size:0.8rem; }
.about-page__facts{ background:var(--color-dark); color:#fff; }
.about-page__facts-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  padding:34px 24px;
}
.about-page__facts-grid > div{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  text-align:center;
}
.about-page__facts-grid > div + div{ border-left:1px solid rgba(255,255,255,0.2); }
.about-page__facts-grid strong{ color:#f1aa66; font-family:var(--font-heading); font-size:1.9rem; line-height:1.2; }
.about-page__facts-grid span{ color:#e5ded7; font-size:0.88rem; }
.about-page__approach{ padding:88px 0 96px; background:#fffdfa; }
.about-page__section-head{ max-width:720px; margin:0 auto 48px; text-align:center; }
.about-page__section-head .eyebrow{ color:var(--color-text-light); }
.about-page__section-head h2{ font-size:2.6rem; line-height:1.18; margin-bottom:12px; }
.about-page__section-head > p:last-child{ color:var(--color-text-light); margin:0; }
.about-page__values{ display:grid; grid-template-columns:repeat(3, 1fr); gap:36px; }
.about-page__value{ padding-top:22px; border-top:1px solid var(--color-border); }
.about-page__value-icon{
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:18px;
  border-radius:50%;
  background:rgba(224,96,31,0.1);
  color:var(--color-accent);
}
.about-page__value-icon svg{ width:24px; height:24px; }
.about-page__value h3{ font-size:1.25rem; margin-bottom:10px; }
.about-page__value p{ color:var(--color-text-light); font-size:0.92rem; margin:0; }
.about-page__cta{ padding:58px 0; background:#f3e9dc; }
.about-page__cta-inner{ display:flex; align-items:center; justify-content:space-between; gap:28px; }
.about-page__cta .eyebrow{ margin-bottom:8px; }
.about-page__cta h2{ font-size:2rem; margin:0; }
@media (max-width: 900px){
  .about-page__intro-grid{ grid-template-columns:1fr; gap:44px; }
  .about-page__copy{ max-width:720px; }
  .about-page__visual{ width:min(100%, 640px); margin:0 auto; }
}
@media (max-width: 640px){
  .about-page__intro{ padding:56px 0 64px; }
  .about-page__intro-grid{ gap:34px; }
  .about-page__copy h1{ font-size:2.7rem; }
  .about-page__copy .about-page__lead{ font-size:1.03rem; }
  .about-page__visual{ aspect-ratio:0.98; border-width:6px; border-radius:19px; }
  .about-page__visual img{ border-radius:13px; }
  .about-page__image-note{ left:-10px; bottom:16px; padding:12px 16px; }
  .about-page__facts-grid{ grid-template-columns:1fr; gap:0; padding:10px 24px; }
  .about-page__facts-grid > div{ padding:18px 0; }
  .about-page__facts-grid > div + div{ border-left:0; border-top:1px solid rgba(255,255,255,0.2); }
  .about-page__approach{ padding:64px 0; }
  .about-page__section-head{ margin-bottom:34px; }
  .about-page__section-head h2{ font-size:2rem; }
  .about-page__values{ grid-template-columns:1fr; gap:28px; }
  .about-page__value{ padding-top:18px; }
  .about-page__value-icon{ margin-bottom:12px; }
  .about-page__cta{ padding:44px 0; }
  .about-page__cta-inner{ flex-direction:column; align-items:flex-start; }
  .about-page__cta h2{ font-size:1.7rem; }
}

/* ============ Categories ============ */
.categories{
  position:relative;
  overflow:hidden;
  padding:90px 0 76px;
  background: linear-gradient(160deg, #fdf1e7 0%, #fbe7d6 55%, #fdf1e7 100%);
}
.categories__leaf{
  position:absolute;
  left:0; top:0;
  width:180px; height:560px;
  opacity:0.35;
  pointer-events:none;
}
.categories__dots{
  position:absolute;
  top:36px; right:60px;
  width:130px; height:100px;
  background-image: radial-gradient(var(--color-accent) 1.6px, transparent 1.8px);
  background-size:18px 18px;
  opacity:0.3;
  pointer-events:none;
}
.categories .container{ max-width:1800px; }
.categories .section__head{ position:relative; z-index:1; max-width:640px; }
.categories h2 .accent{ color: var(--color-accent); }
.eyebrow--lined{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}
.eyebrow--lined::before, .eyebrow--lined::after{
  content:"";
  width:34px; height:1px;
  background: var(--color-accent);
  opacity:0.6;
}
.categories__grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:20px;
}
.category-card{
  position:relative;
  display:block;
  border-radius:16px;
  overflow:hidden;
  aspect-ratio: 1/1;
  box-shadow: var(--shadow);
  transition: transform var(--transition);
}
.category-card:hover{ transform: translateY(-6px); }
.category-card__img{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  transition: transform 0.4s ease;
}
.category-card:hover .category-card__img{ transform: scale(1.08); }
.category-card::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(18,15,12,0.85) 0%, rgba(18,15,12,0.38) 48%, transparent 72%);
}
.category-card__body{
  position:absolute;
  z-index:1;
  left:0; right:0; bottom:0;
  padding:22px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:8px;
}
.category-card__text h3{
  font-family: var(--font-heading);
  color:#fff;
  font-size:1.15rem;
  line-height:1.25;
  white-space:nowrap;
  margin:0 0 5px;
}
.category-card__text span{
  display:block;
  color: rgba(255,255,255,0.85);
  font-size:0.85rem;
}
.category-card__arrow{
  width:40px; height:40px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,0.8);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition: all var(--transition);
}
.category-card__arrow svg{ width:18px; height:18px; }
.category-card:hover .category-card__arrow{ background:#fff; color: var(--color-accent); border-color:#fff; }
.categories__cta{ text-align:center; margin-top:40px; position:relative; z-index:1; }

.categories__cta-top{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:28px; }
.icon-circle-btn{
  width:46px; height:46px;
  border-radius:50%;
  border:1.5px solid var(--color-border);
  display:flex; align-items:center; justify-content:center;
  color: var(--color-heading);
  flex-shrink:0;
  transition: all var(--transition);
}
.icon-circle-btn svg{ width:18px; height:18px; }
.icon-circle-btn:hover{ background: var(--color-accent); border-color: var(--color-accent); color:#fff; }

/* ============ Sections ============ */
.section{ padding:80px 0; }
.section--tinted{ background: var(--color-bg-tint); }
.section__head{
  text-align:center;
  max-width:600px;
  margin:0 auto 48px;
}
.section__head h2{ font-size:clamp(1.7rem,3vw,2.3rem); }
.section__head h2 .accent{ color: var(--color-accent); }
.section__head p{ color: var(--color-text-light); margin:0; }
.eyebrow{
  text-transform:uppercase;
  letter-spacing:3px;
  font-size:0.8rem;
  color: var(--color-accent);
  font-weight:600;
  margin-bottom:12px;
}

/* ============ Product Grid ============ */
.product-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.product-grid--5col{
  grid-template-columns:repeat(5,1fr);
}
.product-card{
  background: var(--color-white);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  transition: transform var(--transition);
}
.product-card:hover{ transform: translateY(-6px); }
.product-card__img{
  position:relative;
  aspect-ratio: 1/1;
  overflow:hidden;
}
.product-card__img .swatch, .product-card__photo{ transition: transform 0.4s ease; }
.product-card:hover .product-card__img .swatch,
.product-card:hover .product-card__photo{ transform: scale(1.06); }
.product-card__photo{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
}
.product-card__badge{
  position:absolute; top:14px; left:14px;
  z-index:1;
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#fff;
  color: var(--color-heading);
  font-size:0.72rem;
  font-weight:600;
  padding:6px 12px;
  border-radius:50px;
  box-shadow: var(--shadow);
}
.product-card__badge--dark{
  background: var(--color-dark);
  color: var(--color-accent);
}
.product-card__badge svg{ width:12px; height:12px; }
.product-card__wish{
  position:absolute; top:14px; right:14px;
  z-index:1;
  width:36px; height:36px;
  border-radius:50%;
  background: rgba(255,255,255,0.95);
  color: var(--color-heading);
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow);
  transition: all var(--transition);
}
.product-card__wish svg{ width:17px; height:17px; }
.product-card__wish:hover{ background: var(--color-accent); color:#fff; }
.product-card__wish.active{ background: var(--color-accent); color:#fff; }
.product-card__wish.active svg{ fill: currentColor; }
.product-card__body{ padding:20px 22px 24px; }
.product-card__body h3{
  font-family: var(--font-heading);
  font-size:1.2rem;
  margin-bottom:8px;
}
.product-card__rating{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:0.85rem;
}
.product-card__reviews{ color: var(--color-text-light); }
.product-card__meta{
  display:flex;
  align-items:center;
  margin-top:16px;
}
.product-card__cart{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background: var(--color-accent);
  color:#fff;
  width:100%;
  padding:10px 18px;
  border-radius:50px;
  font-size:0.85rem;
  font-weight:600;
  transition: all var(--transition);
}
.product-card__cart svg{ width:15px; height:15px; }
.product-card__cart:hover{ background: var(--color-accent-dark); transform: translateY(-2px); }
.stars{ color:#e0a640; font-size:0.85rem; letter-spacing:1px; }

/* ============ Featured Section ============ */
.featured{ position:relative; overflow:hidden; }
.featured > .container{
  max-width:none;
  padding-left:clamp(24px, 4vw, 72px);
  padding-right:clamp(24px, 4vw, 72px);
}
.featured__leaf{
  position:absolute;
  top:36px; right:64px;
  width:130px; height:100px;
  background-image: radial-gradient(var(--color-accent) 1.6px, transparent 1.8px);
  background-size:18px 18px;
  opacity:0.3;
  pointer-events:none;
}
/* ============ Decorative Floral Motif ============ */
.fs-leaf{ fill: url(#fsLeafGrad); opacity:0.6; }
.fs-vein{ stroke: #4f5c44; stroke-width:0.7; fill:none; opacity:0.4; }
.fs-stem{ stroke: var(--sw-sage); stroke-width:1.6; fill:none; stroke-linecap:round; opacity:0.55; }
.fs-petal{ fill: url(#fsPetalGrad); fill-opacity:0.62; stroke: var(--color-accent); stroke-width:0.75; stroke-opacity:0.45; }
.fs-stamens circle{ fill: var(--sw-ochre); opacity:0.75; }
.fs-center{ fill: var(--sw-ochre); opacity:0.85; }
.fs-sepal{ fill: var(--sw-sage); opacity:0.55; }

.hl-blade{ fill: url(#hlLeafGrad); }
.hl-vein{ stroke: rgba(255,255,255,0.3); stroke-width:1.4; fill:none; stroke-linecap:round; }
.hl-vein--side{ stroke-width:1; opacity:0.75; }
.hl-stem path{ stroke: #3f5c37; stroke-width:2; fill:none; stroke-linecap:round; opacity:0.55; }

.hero__leaf{
  position:absolute;
  z-index:1;
  width:132px;
  height:165px;
  pointer-events:none;
  filter: drop-shadow(0 10px 14px rgba(20,30,15,0.18));
}
.hero__leaf--top{ left:-20px; top:-14px; transform: scaleY(-1); }
.hero__leaf--bottom{ left:-26px; bottom:-10px; }

.decor-flower{
  position:absolute;
  width:180px;
  height:277px;
  pointer-events:none;
  filter: drop-shadow(0 6px 10px rgba(43,39,35,0.05));
}
.decor-flower--featured{ left:36px; bottom:-60px; }
.decor-flower--about{
  right:-10px;
  top:-40px;
  width:210px;
  height:323px;
  transform: scaleX(-1) rotate(8deg);
}
.carousel__arrow{
  width:40px; height:40px;
  border-radius:50%;
  background:#fff;
  box-shadow: var(--shadow);
  color: var(--color-heading);
  display:flex; align-items:center; justify-content:center;
  transition: all var(--transition);
}
.carousel__arrow svg{ width:18px; height:18px; }
.carousel__arrow:hover{ background: var(--color-accent); color:#fff; }

.section__cta{ text-align:center; margin-top:44px; }
.btn__arrow--dark{ background: var(--color-heading); color:#fff; }
.btn--outline-dark.btn{ display:inline-flex; align-items:center; gap:14px; padding:6px 6px 6px 28px; border-radius:50px; }
.btn--outline-dark:hover .btn__arrow--dark{ background:#fff; color: var(--color-heading); }

/* ============ Filter Bar ============ */
.filter-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  margin-bottom:36px;
}
.filter-tabs{ display:flex; flex-wrap:wrap; gap:8px; }
.filter-tab{
  padding:9px 20px;
  border-radius:50px;
  font-size:0.85rem;
  font-weight:600;
  color: var(--color-text-light);
  background: transparent;
  transition: all var(--transition);
}
.filter-tab:hover{ color: var(--color-accent); }
.filter-tab.active{ background: var(--color-accent); color:#fff; }
.filter-arrows{ display:flex; gap:10px; flex-shrink:0; }
.filter-arrows--floating{
  position:absolute;
  top:80px;
  right:24px;
}
.section{ position:relative; }

/* ============ Wallpaper Rolls ============ */
.roll-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
}
.roll-card{ display:block; }
.roll-card__img{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  aspect-ratio: 3/4;
  box-shadow: var(--shadow);
  margin-bottom:16px;
}
.roll-card__img img{
  width:100%; height:100%; object-fit:cover;
  transition: transform 0.4s ease;
}
.roll-card:hover .roll-card__img img{ transform: scale(1.06); }
.roll-card__wish{
  position:absolute; top:14px; right:14px;
  z-index:1;
  width:34px; height:34px;
  border-radius:50%;
  background: rgba(255,255,255,0.95);
  color: var(--color-heading);
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow);
  transition: all var(--transition);
}
.roll-card__wish svg{ width:16px; height:16px; }
.roll-card__wish:hover{ background: var(--color-accent); color:#fff; }
.roll-card__wish.active{ background: var(--color-accent); color:#fff; }
.roll-card__wish.active svg{ fill: currentColor; }
.roll-card h3{ font-family: var(--font-heading); font-size:1.05rem; margin-bottom:4px; }
.roll-card span{ display:block; font-size:0.85rem; color: var(--color-text-light); }

/* ============ Why WallCraft / Feature Cards ============ */
.why-craft{
  isolation:isolate;
  overflow:hidden;
  padding:76px 0 92px;
  background:radial-gradient(ellipse at 50% 48%, rgba(255,255,255,0.96) 0%, rgba(250,247,242,0.92) 64%, rgba(247,239,228,0.88) 100%);
}
.why-craft .container{ max-width:1776px; }
.why-craft .section__head{
  position:relative;
  z-index:1;
  max-width:860px;
  margin-bottom:42px;
}
.why-craft .eyebrow{ color:var(--color-text-light); }
.why-craft .eyebrow--lined::before,
.why-craft .eyebrow--lined::after{ width:70px; }
.why-craft .section__head h2{
  margin-bottom:12px;
  font-size:clamp(2.2rem, 3vw, 3.1rem);
  line-height:1.1;
}
.why-craft__accent{
  color:var(--color-accent-dark);
  background:linear-gradient(90deg, #df751e, #a83e24);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.why-craft .section__head > p:last-child{ font-size:1rem; }
.why-craft__leaf{
  position:absolute;
  z-index:-1;
  width:330px;
  height:420px;
  opacity:0.42;
  pointer-events:none;
}
.why-craft__leaf--top{
  top:-182px;
  left:-34px;
  transform:rotate(45deg);
}
.why-craft__leaf--bottom{
  right:-48px;
  bottom:-190px;
  transform:rotate(222deg);
}
.feature-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}
.feature-card{
  background: var(--color-white);
  border-radius: var(--radius);
  padding:28px 26px;
  box-shadow: var(--shadow);
}
.feature-icon{
  width:48px; height:48px;
  border-radius:12px;
  background: rgba(224,96,31,0.12);
  color: var(--color-accent);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
}
.feature-icon svg{ width:22px; height:22px; }
.feature-card h3{ font-size:1.02rem; margin-bottom:6px; }
.feature-card p{ font-size:0.88rem; color: var(--color-text-light); margin:0; }
.why-craft .feature-grid{ position:relative; z-index:1; }
.why-craft .feature-card{
  min-height:210px;
  position:relative;
  border:1px solid #f0d5bf;
  border-radius:16px;
  padding:24px 28px;
  box-shadow:0 18px 38px rgba(97,66,39,0.08);
}
.why-craft .feature-card::after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  width:45%;
  height:52px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 60'%3E%3Cpath d='M0 60 C55 28 78 30 111 45 C145 61 163 4 220 18 L220 60Z' fill='%23f7eee3' fill-opacity='.78'/%3E%3Cpath d='M0 60 C55 28 78 30 111 45 C145 61 163 4 220 18' fill='none' stroke='%23ed9a32' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right bottom/100% 100%;
  pointer-events:none;
}
.why-craft .feature-icon{ width:56px; height:56px; border-radius:16px; margin-bottom:14px; }
.why-craft .feature-icon svg{ width:26px; height:26px; }
.why-craft .feature-card h3{ font-size:1.15rem; margin-bottom:4px; }
.why-craft .feature-card p{ max-width:260px; font-size:0.88rem; line-height:1.5; }

/* ============ Room Strip ============ */
.room-strip{ padding:28px 0 56px; }
.room-strip .container{ max-width:1600px; }
.room-strip__track{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:14px;
}
.room-strip__card{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  background: var(--color-white);
  border:2px solid transparent;
  border-radius:16px;
  padding:12px;
  box-shadow: var(--shadow);
  transition: all var(--transition);
}
.room-strip__card:hover, .room-strip__card.active{
  border-color: var(--color-accent);
  transform: translateY(-3px);
}
.room-strip__thumb{ width:52px; height:52px; border-radius:10px; flex-shrink:0; background-size:cover; background-position:center; }
.room-strip__text{ display:flex; flex-direction:column; flex:1; min-width:0; }
.room-strip__text strong{ font-size:0.88rem; color: var(--color-heading); line-height:1.25; }
.room-strip__text span{
  font-size:0.74rem;
  color: var(--color-text-light);
  line-height:1.3;
}

/* ============ Testimonials ============ */
.testimonial-track{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.testimonial-card{
  background: var(--color-white);
  border-radius: var(--radius);
  padding:28px;
  box-shadow: var(--shadow);
}
.testimonial-card__stars{ color:#e0a640; margin-bottom:12px; }
.testimonial-card p{ font-style:italic; color: var(--color-text); }
.testimonial-card__author{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:16px;
}
.testimonial-card__avatar{
  width:44px; height:44px;
  border-radius:50%;
  background: var(--color-bg-tint);
  display:flex; align-items:center; justify-content:center;
  font-weight:700;
  color: var(--color-accent);
}
.testimonial-card__author strong{ display:block; font-size:0.9rem; }
.testimonial-card__author span{ font-size:0.8rem; color: var(--color-text-light); }

/* ============ Wave Dividers ============ */
.wave{
  position:absolute;
  left:0;
  width:100%;
  height:44px;
  display:block;
  pointer-events:none;
}
.wave path{ fill: var(--color-bg); }
.wave--top{ top:-1px; }
.wave--bottom{ bottom:-1px; }

/* ============ Newsletter ============ */
.newsletter{
  position:relative;
  background: var(--color-dark);
  color:#fff;
  padding:76px 0;
}
.newsletter__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
}
.newsletter h2{ color:#fff; font-size:1.8rem; margin-bottom:8px; }
.newsletter p{ color:#c9c4bc; margin:0; }
.newsletter__form{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.newsletter__form input{
  padding:14px 20px;
  border-radius:50px;
  border:none;
  min-width:280px;
  font-family:inherit;
}

/* ============ FAQ ============ */
.faq-section__grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr;
  gap:56px;
  align-items:start;
}
.faq-section__col h2{ font-size:clamp(1.7rem,3vw,2.3rem); margin-bottom:28px; }
.faq-section__visual{
  border-radius:20px;
  overflow:hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 4/5;
  position:sticky;
  top:100px;
}
.faq-section__visual img{ width:100%; height:100%; object-fit:cover; }
.faq{ max-width:none; margin:0; }
.faq__item{
  border-bottom:1px solid var(--color-border);
  isolation:isolate;
  overflow:hidden;
}
.faq__question{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 4px;
  font-size:1rem;
  font-weight:600;
  text-align:left;
}
.faq__question span{ font-size:1.4rem; color:var(--color-accent); transition:transform var(--transition); }
.faq__item.active .faq__question .faq__toggle{ transform:rotate(45deg); }
.faq__answer{ max-height:0; overflow:hidden; transition:max-height var(--transition); }
.faq__answer p{ padding:0 4px 20px; color:var(--color-text-light); }
.faq-section{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:84px 0;
  background:radial-gradient(ellipse at 50% 45%, #fffdf9 0%, #faf7f2 70%, #f4ede2 100%);
}
.faq-section .container{ max-width:1550px; }
.faq-section__grid{
  grid-template-columns:minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap:56px;
  align-items:center;
}
.faq-section__col{ min-width:0; }
.faq-section__intro{ margin-bottom:28px; }
.faq-section__intro .eyebrow{
  color:var(--color-text-light);
  margin-bottom:16px;
}
.faq-section__intro .eyebrow--lined::before,
.faq-section__intro .eyebrow--lined::after{ width:36px; }
.faq-section__col h2{
  font-size:clamp(2.25rem, 3.4vw, 3.35rem);
  line-height:1.14;
  margin:0 0 12px;
}
.faq-section__col h2 span{
  color:var(--color-accent);
  font-style:italic;
}
.faq-section__intro > p:last-child{
  max-width:650px;
  color:var(--color-text-light);
  font-size:1rem;
  margin:0;
}
.faq{ display:grid; gap:10px; }
.faq-section .faq__item{
  border:1px solid #f0e2d1;
  border-radius:16px;
  background:rgba(255,255,255,0.86);
  box-shadow:0 8px 24px rgba(77,57,37,0.06);
}
.faq-section .faq__question{
  display:grid;
  grid-template-columns:56px minmax(0, 1fr) 46px;
  gap:16px;
  min-height:90px;
  padding:14px 18px;
  color:var(--color-heading);
}
.faq__icon{
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#fff0e5;
  color:var(--color-accent);
}
.faq__icon svg{ width:27px; height:27px; }
.faq__label{
  font-family:var(--font-heading);
  font-size:1.08rem;
  font-weight:700;
  line-height:1.35;
}
.faq__toggle{
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#fff0e5;
  color:var(--color-accent);
  font-family:var(--font-body);
  font-size:1.5rem;
  font-weight:600;
  line-height:1;
  transition:transform var(--transition), background var(--transition), color var(--transition);
}
.faq-section .faq__item.active .faq__toggle{
  transform:rotate(45deg);
  background:var(--color-accent);
  color:#fff;
}
.faq-section .faq__answer p{ padding:0 28px 18px 90px; }
.faq-section__visual{
  aspect-ratio:1.04;
  border:8px solid rgba(239,222,198,0.76);
  border-radius:32px;
  box-shadow:0 20px 44px rgba(72,52,32,0.12);
  position:relative;
  top:auto;
}
.faq-section__visual img{ object-position:center; }
@media (max-width: 640px){
  .faq-section{ padding:64px 0; }
  .faq-section__grid{ gap:32px; }
  .faq-section__col h2{ font-size:2.25rem; }
  .faq-section__intro{ margin-bottom:22px; }
  .faq-section .faq__question{
    grid-template-columns:44px minmax(0, 1fr) 38px;
    gap:12px;
    min-height:74px;
    padding:12px;
  }
  .faq__icon{ width:44px; height:44px; }
  .faq__icon svg{ width:22px; height:22px; }
  .faq__label{ font-size:0.98rem; }
  .faq__toggle{ width:38px; height:38px; font-size:1.25rem; }
  .faq-section .faq__answer p{ padding:0 16px 16px 68px; font-size:0.9rem; }
  .faq-section .faq-section__visual{ aspect-ratio:1.1; border-width:6px; border-radius:24px; }
}
.newsletter{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:transparent;
  min-height:440px;
  display:flex;
  align-items:center;
  padding:68px 0;
}
.newsletter__backdrop{
  position:absolute;
  inset:0;
  z-index:-1;
  width:100%;
  height:100%;
  overflow:visible;
}
.newsletter__shape{ fill:var(--color-dark); }
.newsletter__trace{
  fill:none;
  stroke:#d99550;
  stroke-width:2;
  vector-effect:non-scaling-stroke;
}
.newsletter__trace--bottom{ stroke:#c98a51; }
.newsletter__leaf{
  position:absolute;
  z-index:0;
  width:250px;
  height:310px;
  opacity:0.84;
  pointer-events:none;
}
.newsletter__leaf--left{
  left:-92px;
  top:50%;
  transform:translateY(-50%) rotate(86deg);
}
.newsletter__leaf--right{
  right:-88px;
  top:50%;
  transform:translateY(-50%) rotate(-86deg) scaleX(-1);
}
.newsletter__inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0, 1.15fr) minmax(420px, 0.85fr);
  align-items:center;
  gap:48px;
  max-width:1580px;
}
.newsletter__copy{ max-width:820px; }
.newsletter__eyebrow{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 14px;
  color:#efd0a4;
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:3px;
  text-transform:uppercase;
}
.newsletter__eyebrow::before{
  content:"";
  width:34px;
  height:1px;
  background:#d99550;
}
.newsletter h2{
  color:#fff;
  font-size:clamp(2.5rem, 3.1vw, 3.8rem);
  line-height:1.14;
  margin-bottom:12px;
}
.newsletter h2 span{ color:#e56a2c; }
.newsletter__copy > p:not(.newsletter__eyebrow){
  color:#e4ded7;
  font-size:1.02rem;
  margin:0;
}
.newsletter__benefits{
  display:flex;
  align-items:center;
  margin-top:24px;
}
.newsletter__benefit{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:52px;
  padding:0 22px;
  color:#f0e8de;
  font-size:0.88rem;
  line-height:1.35;
}
.newsletter__benefit:first-child{ padding-left:0; }
.newsletter__benefit + .newsletter__benefit{ border-left:1px solid rgba(226,190,147,0.58); }
.newsletter__benefit-icon{
  width:52px;
  height:52px;
  flex:0 0 52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(218,165,106,0.3);
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  color:#e4ad6d;
}
.newsletter__benefit-icon svg{ width:26px; height:26px; }
.newsletter__form{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}
.newsletter__email{
  display:flex;
  align-items:center;
  gap:16px;
  height:72px;
  min-width:0;
  flex:1 1 320px;
  padding:0 24px;
  border-radius:50px;
  background:#fff;
  color:#312c27;
}
.newsletter__email svg{ width:23px; height:23px; flex:0 0 23px; }
.newsletter__email input{
  width:100%;
  min-width:0;
  padding:0;
  border:0;
  border-radius:0;
  outline:0;
  background:transparent;
  color:var(--color-text);
  font:inherit;
  font-size:0.9rem;
}
.newsletter__email input::placeholder{ color:#79736d; opacity:1; }
.newsletter__submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  min-width:200px;
  height:72px;
  padding:0 28px;
  border:1px solid #f3bb78;
  border-radius:50px;
  background:linear-gradient(110deg, #e66c22, #d85722);
  box-shadow:0 0 0 3px rgba(226,125,51,0.12), 0 8px 20px rgba(0,0,0,0.18);
  color:#fff;
  font-size:1rem;
  font-weight:600;
  transition:transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.newsletter__submit:hover{
  transform:translateY(-2px);
  box-shadow:0 0 0 4px rgba(226,125,51,0.18), 0 12px 24px rgba(0,0,0,0.22);
  background:linear-gradient(110deg, #ed792d, #df6026);
}
.newsletter__submit svg{ width:22px; height:22px; flex:0 0 22px; }

@media (max-width: 1000px){
  .newsletter{ min-height:0; padding:68px 0; }
  .newsletter__inner{ grid-template-columns:1fr; gap:28px; }
  .newsletter__copy{ max-width:760px; }
  .newsletter__form{ max-width:760px; }
}
@media (max-width: 640px){
  .newsletter{ padding:60px 0; }
  .newsletter__inner{ text-align:center; gap:28px; }
  .newsletter__eyebrow{ justify-content:center; }
  .newsletter h2{ font-size:2.35rem; }
  .newsletter__copy > p:not(.newsletter__eyebrow){ font-size:0.95rem; }
  .newsletter__benefits{ justify-content:center; margin-top:22px; }
  .newsletter__benefit{ flex-direction:column; gap:8px; padding:0 12px; font-size:0.76rem; }
  .newsletter__benefit-icon{ width:44px; height:44px; flex-basis:44px; }
  .newsletter__benefit-icon svg{ width:22px; height:22px; }
  .newsletter__form{ flex-direction:column; width:100%; }
  .newsletter__email, .newsletter__submit{ width:100%; height:60px; flex-basis:auto; }
  .newsletter__leaf{ width:170px; height:210px; opacity:0.38; }
  .newsletter__leaf--left{ left:-96px; top:26%; }
  .newsletter__leaf--right{ right:-96px; top:74%; }
}

/* ============ Footer ============ */
.footer{ position:relative; background: var(--color-dark); color:#c9c4bc; padding-top:86px; }
.footer__logo{
  display:inline-block;
  font-family: var(--font-heading);
  font-size:1.6rem;
  font-weight:700;
  color: #fff;
}
.footer__logo span{ color: var(--color-accent); }
.footer__grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap:40px;
  padding-bottom:50px;
}
.footer__col h4{ color:#fff; font-size:1rem; margin-bottom:18px; }
.footer__col ul li{ margin-bottom:10px; font-size:0.9rem; }
.footer__col ul li a:hover{ color: var(--color-accent); }
.footer__col p{ font-size:0.9rem; }
.footer__social{ display:flex; align-items:center; gap:10px; margin-top:18px; }
.footer__social a{
  width:44px;
  height:44px;
  border:1px solid rgba(255,255,255,0.2);
  border-radius:8px;
  background:rgba(255,255,255,0.04);
  color:#e5ded7;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}
.footer__social a:hover{
  background:var(--color-accent);
  border-color:var(--color-accent);
  color:#fff;
  transform:translateY(-2px);
}
.footer__social a:focus-visible{ outline:2px solid #f1aa66; outline-offset:3px; }
.footer__social a svg{ width:24px; height:24px; }
.footer__contact li{
  font-size:0.85rem;
  display:flex;
  align-items:flex-start;
  gap:8px;
}
.footer__contact li svg{ width:16px; height:16px; flex-shrink:0; margin-top:1px; color: var(--color-accent); }
.footer__bottom{ border-top:1px solid rgba(255,255,255,0.1); padding:20px 0; }
.footer__bottom-inner{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
  font-size:0.8rem;
}

/* ============ Scroll Top ============ */
.scroll-top{
  position:fixed;
  bottom:24px;
  right:24px;
  width:46px; height:46px;
  border-radius:50%;
  background: var(--color-accent);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow);
  opacity:0;
  visibility:hidden;
  transform: translateY(10px);
  transition: all var(--transition);
  z-index:99;
}
.scroll-top svg{ width:20px; height:20px; }
.scroll-top:hover{ background: var(--color-accent-dark); }
.scroll-top.visible{ opacity:1; visibility:visible; transform:translateY(0); }

/* ============ Scroll Reveal ============ */
.reveal{
  opacity:0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal--visible{
  opacity:1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ============ Card Leaf Accents ============ */
/* A single reusable leaf-sprig motif, applied via pseudo-elements so every
   card family (static and JS-rendered alike) picks it up automatically. */
.category-card__img::before,
.product-card__img::before,
.roll-card__img::before,
.feature-card::before,
.testimonial-card::before,
.room-strip__card::before{
  content:"";
  position:absolute;
  background-image: var(--leaf-accent);
  background-repeat:no-repeat;
  background-size:contain;
  pointer-events:none;
}

.category-card__img::before{
  top:12px; left:12px;
  width:52px; height:65px;
  transform: rotate(-8deg);
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.3));
  z-index:1;
}
.product-card__img::before{
  bottom:12px; left:12px;
  width:42px; height:52px;
  transform: rotate(174deg) scaleX(-1);
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.2));
  opacity:0.95;
  z-index:1;
}
.roll-card__img::before{
  top:12px; left:12px;
  width:46px; height:58px;
  transform: rotate(-6deg);
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.22));
  z-index:1;
}
.feature-card{ position:relative; overflow:hidden; }
.feature-card::before{
  top:14px; right:14px;
  width:40px; height:50px;
  transform: rotate(16deg);
  opacity:0.14;
}
.testimonial-card{ position:relative; overflow:hidden; }
.testimonial-card::before{
  top:16px; right:16px;
  width:38px; height:48px;
  transform: rotate(14deg);
  opacity:0.14;
}
.room-strip__card{ position:relative; overflow:hidden; }
.room-strip__card::before{
  top:4px; right:6px;
  width:20px; height:25px;
  transform: rotate(10deg);
  opacity:0.3;
}

/* ============ Responsive ============ */
@media (max-width: 1140px){
  .header__search{ display:none; }
  .icon-btn--mobile-search{ display:flex; }
  .nav{
    position:fixed;
    top:0; right:0;
    width:280px; height:100vh;
    background: var(--color-white);
    box-shadow: -10px 0 30px rgba(0,0,0,0.1);
    padding:80px 24px 24px;
    transform: translateX(100%);
    transition: transform var(--transition);
    overflow-y:auto;
  }
  .nav.active{ transform: translateX(0); }
  .nav__list{ flex-direction:column; gap:4px; }
  .nav__list > li > a{ display:block; padding:12px 0; }
  .dropdown{
    position:static;
    opacity:1; visibility:visible; transform:none;
    max-height:0; overflow:hidden;
    box-shadow:none;
    padding:0;
    transition: max-height var(--transition);
  }
  .has-dropdown.open .dropdown{ max-height:300px; padding:6px 0; }
  .hamburger{ display:flex; }
  .hero__content{ max-width:82%; }
  .trust-strip__grid{ justify-content:flex-start; }
  .categories__grid{ grid-template-columns:repeat(3,1fr); }
  .product-grid{ grid-template-columns:repeat(2,1fr); }
  .room-strip__track{ grid-template-columns:repeat(3,1fr); }
  .roll-grid{ grid-template-columns:repeat(2,1fr); }
  .feature-grid{ grid-template-columns:repeat(2,1fr); }
  .testimonial-track{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .about__grid{ grid-template-columns:1fr; gap:56px; }
  .about__visual{ max-width:420px; margin:0 auto; }
  .faq-section__grid{ grid-template-columns:1fr; }
  .faq-section__visual{ position:static; aspect-ratio:16/9; order:-1; }
  .filter-arrows--floating{ position:static; margin-bottom:20px; }
}

@media (max-width: 640px){
  .categories__grid{ grid-template-columns:1fr 1fr; }
  .product-grid{ grid-template-columns:1fr; }
  .carousel__arrow{ display:none; }
  .decor-flower{ display:none; }
  .hero__leaf{ display:none; }
  .room-strip__track{ grid-template-columns:1fr 1fr; }
  .roll-grid{ grid-template-columns:1fr 1fr; }
  .feature-grid{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; }
  .newsletter__inner{ flex-direction:column; text-align:center; }
  .newsletter__form{ justify-content:center; }
  .hero{ display:block; min-height:0; padding:40px 0 32px; }
  .hero__scrim{ background: linear-gradient(180deg, rgba(253,241,231,0.97) 0%, rgba(253,241,231,0.94) 45%, rgba(253,241,231,0.68) 72%, rgba(253,241,231,0.4) 100%); }
  .hero__content{ max-width:100%; }
  .hero h1{ max-width:100%; }
  .hero__badge{ position:static; display:inline-flex; flex-direction:column; margin:28px 0 0 24px; min-width:120px; padding:12px 16px; }
  .hero__features{ gap:18px 22px; }
  .hero__feature span:last-child{ font-size:0.74rem; }
  .why-craft{ padding:72px 0 88px; }
  .why-craft .section__head{ margin-bottom:32px; }
  .why-craft .section__head h2{ font-size:2.45rem; }
  .why-craft .section__head > p:last-child{ font-size:1rem; }
  .why-craft .feature-card{ min-height:0; padding:26px 28px 34px; }
  .why-craft .feature-card h3{ font-size:1.3rem; }
  .why-craft .feature-card p{ font-size:0.95rem; }
  .why-craft__leaf{ width:230px; height:300px; opacity:0.22; }
}

/* GP Wallpapers logo image */
.logo__img{ display:block; height:64px; width:auto; }
.logo--light .logo__img{ height:90px; }
@media (max-width:640px){ .logo--light .logo__img{ height:72px; } }
@media (max-width:640px){ .logo__img{ height:48px; } }