:root{
  --bg: #F5F0E6;
  --card: #FFFFFF;
  --ink: #2E281F;
  --ink-soft: rgba(46,40,31,0.66);
  --line: rgba(46,40,31,0.14);
  --terracotta: #B0603A;
  --terracotta-dark: #7A4128;
  --sage: #7C8763;
  --navy: #2C3446;
  --font-head: 'Fraunces', serif;
  --font-body: 'Karla', sans-serif;
}
*{ box-sizing: border-box; margin:0; padding:0; }
html, body{ max-width: 100%; overflow-x: hidden; }
body{
  background: var(--bg); color: var(--ink); font-family: var(--font-body);
  line-height: 1.6;
}
h1,h2,h3{ font-family: var(--font-head); font-weight: 600; }
.icon{ width:20px; height:20px; display:inline-block; flex-shrink:0; }
.icon-sm{ width:16px; height:16px; }
.icon-lg{ width:24px; height:24px; }
a{ color: inherit; }
img{ max-width: 100%; display: block; }
.wrap{ max-width: 1080px; margin: 0 auto; padding: 0 48px; }

/* nav */
.site-nav{
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 48px; max-width: 1080px; margin: 0 auto; gap: 20px;
}
.site-logo{ display: flex; align-items: center; gap: 8px; min-width: 0; flex-shrink: 0; }
.site-logo-mark{ font-family: var(--font-head); font-size: 24px; font-weight: 600; color: var(--terracotta-dark); }
.nav-links{ display: flex; align-items: center; gap: 32px; list-style: none; font-weight: 500; font-size: 16px; }
.nav-links a{ text-decoration: none; }
.nav-cta{
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 999px;
  background: var(--terracotta); color: #FFFFFF; text-decoration: none; font-weight: 600; font-size: 16px;
  min-width: 0; flex-shrink: 1; position: relative;
}
.cart-count{
  position: absolute; top: -8px; right: -8px; background: var(--navy); color: #FFFFFF;
  font-size: 12px; font-weight: 700; min-width: 20px; height: 20px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px; line-height: 1;
}

.btn{
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 999px;
  background: var(--terracotta); color: #FFFFFF; text-decoration: none; font-weight: 600; font-size: 16px;
  border: none; cursor: pointer; font-family: var(--font-body); line-height: 1;
}
.btn-outline{ background: transparent; color: var(--ink); border: none; box-shadow: inset 0 0 0 1px var(--line); }

/* hero full-bleed */
.eyebrow{
  display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--terracotta-dark); margin-bottom: 16px;
}
.hero-fullbleed{
  position: relative; width: 100%; min-height: 560px; display: flex; align-items: flex-end; overflow: hidden;
  padding: 0; margin: 0; max-width: none;
}
.hero-fullbleed-img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-fullbleed-scrim{
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(46,40,31,0.88) 0%, rgba(46,40,31,0.58) 46%, rgba(46,40,31,0.10) 100%);
}
.hero-fullbleed-content{
  position: relative; z-index: 1; max-width: 1080px; width: 100%; margin: 0 auto;
  padding: 64px 48px; box-sizing: border-box;
}
.hero-fullbleed .eyebrow{ color: rgba(255,255,255,0.92); }
.hero-fullbleed h1{ font-size: 44px; line-height: 1.16; margin-bottom: 20px; color: #FFFFFF; max-width: 640px; }
.hero-fullbleed .lede{ font-size: 16px; color: rgba(255,255,255,0.86); max-width: 560px; margin-bottom: 28px; }
.hero-ctas{ display: flex; gap: 12px; flex-wrap: wrap; }
.hero-fullbleed .btn-outline{ color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6); }

/* small page header (shop + product pages) */
.page-header{ padding: 48px 48px 0; max-width: 1080px; margin: 0 auto; }
.page-header .eyebrow{ color: var(--terracotta-dark); }
.page-header h1{ font-size: 36px; margin-bottom: 12px; }
.page-header p{ font-size: 16px; color: var(--ink-soft); max-width: 640px; }

/* facts strip */
.facts-band{ background: var(--navy); border-bottom: 1px solid var(--line); }
.facts-inner{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-top: 32px; padding-bottom: 32px;
}
.fact-item{ display: flex; align-items: center; gap: 12px; }
.fact-item .icon{ color: var(--terracotta); }
.fact-item strong{ display: block; font-size: 16px; color: #FFFFFF; }
.fact-item span.detail{ display: block; font-size: 14px; color: rgba(255,255,255,0.7); }

section{ padding: 64px 48px; max-width: 1080px; margin: 0 auto; }

/* story sections */
.story{
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
  padding: 0;
}
.process-band{ background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.process-band .story{ padding: 64px 48px; }
.story-media img{ width: 468px; height: 600px; max-width: 100%; object-fit: cover; border-radius: 8px; }
.story-copy .eyebrow{ color: var(--terracotta-dark); }
.story-copy h2{ font-size: 32px; margin-bottom: 12px; }
.story-copy p{ font-size: 16px; color: var(--ink-soft); margin-bottom: 20px; }
.story-list{ list-style: none; display: flex; flex-direction: column; gap: 8px; }
.story-list li{ display: flex; align-items: center; gap: 8px; font-size: 16px; }
.story-list .icon{ color: var(--terracotta); }

/* collection grid */
.section-head{ margin-bottom: 32px; max-width: 640px; }
.section-head h2{ font-size: 32px; margin-bottom: 12px; }
.section-head p{ color: var(--ink-soft); font-size: 16px; }

.collection-grid{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.product-card{
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  display: flex; flex-direction: column;
}
.product-card img{ width: 100%; height: 280px; object-fit: cover; }
.product-card-link{ text-decoration: none; display: flex; flex-direction: column; height: 100%; }
.product-body{ padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.product-name{ font-family: var(--font-head); font-size: 20px; font-weight: 600; }
.product-lead{ font-size: 14px; color: var(--ink-soft); }
.product-footer{ display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 12px; }
.product-price{ font-size: 16px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.product-price .icon{ color: var(--terracotta-dark); }
.product-enquire{
  font-size: 14px; font-weight: 600; color: var(--terracotta-dark); text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px;
}
.collection-note{ font-size: 14px; color: var(--ink-soft); margin-top: 24px; }

/* homepage collection carousel */
.carousel-row{ display: flex; align-items: center; gap: 32px; }
.carousel-cta{ flex: 0 0 auto; margin-top: 24px; }
.carousel-wrap{ position: relative; }
.carousel-track{
  display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-width: 0;
  scrollbar-width: none; -ms-overflow-style: none;
}
.carousel-track::-webkit-scrollbar{ display: none; height: 0; }
.carousel-item{
  flex: 0 0 260px; scroll-snap-align: start; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--line); background: var(--card); text-decoration: none;
}
.carousel-item img{ width: 100%; height: 260px; object-fit: cover; display: block; }
.carousel-item span{
  display: block; padding: 12px 16px; font-size: 14px; font-weight: 600; color: var(--ink);
}
.carousel-nav{
  position: absolute; top: 130px; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line); background: #FFFFFF;
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
  color: var(--ink); box-shadow: 0 2px 8px rgba(46,40,31,0.15);
}
.carousel-nav:hover{ background: var(--bg); }
.carousel-nav-prev{ left: 8px; }
.carousel-nav-next{ right: 8px; }

/* signature band */
.signature-band{ background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.signature-band .story{ padding: 64px 48px; }
.signature-media{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.signature-media img{ width: 100%; height: 280px; object-fit: cover; border-radius: 8px; }
.signature-copy .eyebrow{ color: var(--terracotta-dark); }
.signature-copy h2{ font-size: 32px; margin-bottom: 12px; }
.signature-copy p{ font-size: 16px; color: var(--ink-soft); }

/* maker quote */
.quote-band{ background: var(--navy); color: #FFFFFF; }
.quote-inner{ padding: 64px 48px; max-width: 720px; margin: 0 auto; text-align: center; }
.quote-inner p{ font-family: var(--font-head); font-size: 24px; line-height: 1.5; margin-bottom: 16px; }
.quote-inner span{ font-size: 14px; color: rgba(255,255,255,0.7); font-weight: 600; }

/* contact */
.contact-band{ background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.contact-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.contact-copy h2{ font-size: 32px; margin-bottom: 12px; }
.contact-copy p{ font-size: 16px; color: var(--ink-soft); margin-bottom: 20px; }
.contact-form{ display: flex; flex-direction: column; gap: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 32px; }
.form-field{ display: flex; flex-direction: column; gap: 4px; }
.form-field label{ font-size: 14px; font-weight: 600; }
.form-field input, .form-field textarea, .form-field select{
  font-family: var(--font-body); font-size: 16px; padding: 12px 16px; border: 1px solid var(--line);
  border-radius: 6px; background: #FAF7F1; color: var(--ink);
}
.form-field textarea{ resize: vertical; min-height: 96px; }
.select-wrap{ position: relative; }
.select-wrap select{
  width: 100%; padding-right: 44px; appearance: none; -webkit-appearance: none; -moz-appearance: none;
}
.select-wrap .select-chevron{
  position: absolute; top: 50%; right: 16px; transform: translateY(-50%);
  color: var(--ink-soft); pointer-events: none;
}
.contact-form .btn{ align-self: flex-start; }

footer{
  padding: 32px 48px; display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; max-width: 1080px; margin: 0 auto; font-size: 14px; color: var(--ink-soft);
}
footer .footer-name{ font-family: var(--font-head); font-size: 16px; color: var(--terracotta-dark); }

.footer-white{ background: #FFFFFF; border-top: 1px solid var(--line); padding: 0; max-width: none; margin: 0; }
.footer-white .footer-inner{
  padding: 32px 48px; display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; max-width: 1080px; margin: 0 auto; font-size: 14px; color: var(--ink-soft);
}

/* cart page */
.cart-empty{ text-align: center; padding: 64px 24px; }
.cart-empty p{ color: var(--ink-soft); margin-bottom: 20px; font-size: 16px; }
.cart-items{ display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; }
.cart-item{
  display: flex; align-items: center; gap: 16px; background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; padding: 16px;
}
.cart-item img{ width: 80px; height: 80px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.cart-item-info{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cart-item-name{ font-family: var(--font-head); font-size: 18px; font-weight: 600; }
.cart-item-price{ font-size: 14px; color: var(--ink-soft); }
.cart-item-qty{ flex-shrink: 0; }
.cart-item-qty .qty-btn{ width: 36px; height: 36px; }
.cart-item-qty .qty-value{ width: 36px; }
.cart-item-line-total{ font-weight: 700; min-width: 64px; text-align: right; flex-shrink: 0; }
.cart-item-remove{
  background: none; border: none; cursor: pointer; color: var(--ink-soft); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; padding: 8px;
}
.cart-item-remove:hover{ color: var(--terracotta-dark); }
.cart-summary{ background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 24px; max-width: 400px; margin-left: auto; }
.cart-subtotal-row{ display: flex; justify-content: space-between; font-size: 18px; font-weight: 700; margin-bottom: 16px; }
.cart-note{ font-size: 14px; color: var(--ink-soft); margin-top: 16px; }

/* product detail page */
.breadcrumb{
  font-size: 14px; color: var(--ink-soft); margin-bottom: 24px; display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.breadcrumb a{ color: var(--terracotta-dark); text-decoration: none; font-weight: 600; }
.product-page{
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start;
}
.product-gallery img{ width: 100%; height: 560px; object-fit: cover; border-radius: 8px; }
.product-info .eyebrow{ color: var(--terracotta-dark); }
.product-info h1{ font-size: 36px; margin-bottom: 12px; line-height: 1.2; }
.product-price-row{ font-size: 20px; font-weight: 700; margin-bottom: 16px; }
.product-desc{ font-size: 16px; color: var(--ink-soft); margin-bottom: 20px; }
.product-stock{
  display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600;
  color: var(--terracotta-dark); background: rgba(176,96,58,0.1); padding: 8px 16px; border-radius: 999px;
  margin-bottom: 24px; width: fit-content;
}
.product-facts{ list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; }
.product-facts li{ display: flex; align-items: center; gap: 8px; font-size: 16px; }
.product-facts .icon{ color: var(--terracotta); }
.qty-row{ display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.qty-stepper{
  display: flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden;
}
.qty-btn{
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--bg);
  border: none; cursor: pointer; font-size: 18px; color: var(--ink); font-family: var(--font-body);
}
.qty-value{ width: 44px; text-align: center; font-size: 16px; font-weight: 600; }
.product-actions{ display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.product-actions .btn{ flex: 1 1 auto; justify-content: center; white-space: nowrap; }

@media (max-width: 860px){
  .wrap, section, .site-nav, footer, .page-header{ padding-left: 24px; padding-right: 24px; }
  .footer-white .footer-inner{ padding-left: 24px; padding-right: 24px; }
  section{ padding-top: 40px; padding-bottom: 40px; }
  .page-header{ padding-top: 32px; }
  .hero-fullbleed{ min-height: 420px; padding: 0; }
  .hero-fullbleed-content{ padding: 32px 24px 40px; }
  .hero-fullbleed h1{ font-size: 32px; }
  .facts-inner{ grid-template-columns: 1fr; gap: 16px; padding: 24px; }
  .story{ grid-template-columns: 1fr; gap: 24px; }
  .story-media img{ width: 100%; height: 400px; }
  .collection-grid{ grid-template-columns: repeat(2, 1fr); }
  .signature-band .story{ grid-template-columns: 1fr; padding: 40px 24px; }
  .process-band .story{ padding: 40px 24px; }
  .signature-media{ grid-template-columns: 1fr 1fr; }
  .quote-inner{ padding: 40px 24px; }
  .quote-inner p{ font-size: 20px; }
  .contact-grid{ grid-template-columns: 1fr; gap: 24px; }
  .nav-links{ display: none; }
  .product-page{ grid-template-columns: 1fr; gap: 24px; }
  .product-actions{ flex-direction: column; align-items: stretch; }
  .product-actions .btn{ width: 100%; }
  .product-gallery img{ height: 360px; }
  .carousel-item{ flex-basis: 200px; }
  .carousel-item img{ height: 200px; }
  .carousel-row{ flex-direction: column; align-items: stretch; gap: 20px; }
  .carousel-cta .btn{ width: 100%; justify-content: center; }
  .cart-item{ flex-wrap: wrap; }
  .cart-item-info{ flex-basis: 100%; order: -1; }
  .cart-summary{ max-width: none; }
}

@media (max-width: 560px){
  .collection-grid{ grid-template-columns: 1fr; }
}