/* ── Motuhake Redesign Design System ── */
:root {
  --ink: #15110E;
  --paper: #F7F3EC;
  --card: #FFFFFF;
  --accent: #CE1126;
  --tile: #F0E9DE;
  --muted: #6E665D;
  --line: rgba(21,17,14,0.13);
}

/* Body background */
body {
  background-color: var(--paper);
  color: var(--ink);
}

/* Header background */
.site-header, .site-header-wrap, .site-header-inner-wrap,
.site-header-upper-wrap, .site-header-upper-inner-wrap,
.site-top-header-wrap, .site-main-header-wrap, .site-bottom-header-wrap {
  background: rgba(247,243,236,0.92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Header border */
.site-header {
  border-bottom: 1px solid var(--line);
}

/* Top bar (free shipping) */
.site-top-header-wrap {
  background: var(--ink) !important;
  color: var(--paper);
}

.site-top-header-wrap a {
  color: var(--paper);
}

/* Logo area */
.site-branding .custom-logo {
  max-height: 50px;
}

/* Navigation */
.site-header .menu a {
  font-family: 'Hanken Grotesk, -apple-system, BlinkMacSystemFont, sans-serif';
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* Footer */
.site-footer {
  background: #100D0B;
  color: #CFC8BD;
}

.site-footer a {
  color: #9C948A;
}

.site-footer a:hover {
  color: #fff;
}

/* Product cards */
.woocommerce ul.products li.product {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
}

/* Sale badge */
.woocommerce span.onsale {
  background: var(--accent) !important;
  color: #fff !important;
  font-family: 'Hanken Grotesk, -apple-system, BlinkMacSystemFont, sans-serif';
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 12px;
}

/* Links */
a {
  color: var(--ink);
}

/* Buttons */
.woocommerce a.button, .woocommerce button.button,
.woocommerce #respond input#submit {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  font-family: 'Hanken Grotesk, -apple-system, BlinkMacSystemFont, sans-serif';
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 2px;
}

.woocommerce a.button:hover, .woocommerce button.button:hover {
  background: transparent;
  color: var(--ink);
}

/* SmartSlider backgrounds - darker overlay to match redesign hero */
.n2-ss-slider {
  background: #15110E !important;
}

/* Page content areas */
.site-container {
  background: transparent;
}

.entry-content-wrap {
  padding: 0;
}

/* ── Phase 2: MOTUHAKE Text Wordmark ── */
.site-branding.branding-layout-standard {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  line-height: 1 !important;
}

.site-branding .site-title {
  font-family: "Hanken Grotesk", -apple-system, sans-serif !important;
  font-weight: 800 !important;
  font-size: 21px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  margin: 0 !important;
}

.site-branding .site-description {
  font-family: "Hanken Grotesk", -apple-system, sans-serif !important;
  font-weight: 600 !important;
  font-size: 8px !important;
  letter-spacing: 0.34em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  margin-top: 5px !important;
}

.site-branding .custom-logo {
  display: none !important;
}

.site-top-header-wrap .header-html-inner {
  font-family: "Hanken Grotesk", -apple-system, sans-serif !important;
  font-weight: 600 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

.site-header .menu > li > a {
  padding-bottom: 3px !important;
}

.site-header .menu > li.current-menu-item > a {
  color: var(--ink) !important;
  border-bottom: 2px solid var(--accent) !important;
}

/* ── Phase 3: Footer ── */
.site-footer-wrap {
  background: #100D0B !important;
  color: #CFC8BD !important;
  padding: 60px 0 30px !important;
}

.site-footer-wrap a {
  color: #9C948A !important;
}

.site-footer-wrap a:hover {
  color: #fff !important;
}

.site-footer-wrap .widget-title {
  color: #fff !important;
  font-family: "Hanken Grotesk", sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

.site-footer-bottom-wrap {
  background: #100D0B !important;
  border-top: 1px solid rgba(255,255,255,0.1) !important;
  color: #6E665D !important;
}

/* ── Top bar text replacement ── */
.site-top-header-wrap .header-html-inner p {
  font-size: 0 !important;
}
.site-top-header-wrap .header-html-inner p::after {
  content: "Aotearoa Made  ◆  Free shipping over \$50  ◆  Ships worldwide";
  font-size: 10.5px !important;
  font-family: "Hanken Grotesk", -apple-system, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

/* ── Phase 4: Product Cards ── */
.woocommerce ul.products li.product {
  background: #fff !important;
  border: 1px solid rgba(21,17,14,0.13) !important;
  border-radius: 3px !important;
  overflow: hidden !important;
  transition: box-shadow 0.28s ease, transform 0.28s ease !important;
}

.woocommerce ul.products li.product:hover {
  box-shadow: 0 22px 44px -26px rgba(21,17,14,0.55) !important;
  transform: translateY(-3px) !important;
}

.woocommerce ul.products li.product .product-details {
  padding: 15px 15px 17px !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: "Instrument Serif", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 20px !important;
  line-height: 1.04 !important;
  color: var(--ink) !important;
  margin: 0 0 6px !important;
}

.woocommerce ul.products li.product .price {
  font-family: "Hanken Grotesk", -apple-system, sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: var(--ink) !important;
}

.woocommerce ul.products li.product .price del {
  font-weight: 500 !important;
  font-size: 13px !important;
  color: var(--muted) !important;
}

.woocommerce ul.products li.product .price ins {
  text-decoration: none !important;
  font-weight: 700 !important;
}

.woocommerce span.onsale {
  background: var(--accent) !important;
  color: #fff !important;
  font-family: "Hanken Grotesk", sans-serif !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.05em !important;
  border-radius: 999px !important;
  padding: 2px 11px !important;
  min-height: auto !important;
  min-width: auto !important;
  line-height: 1.7 !important;
  top: 12px !important;
  left: 12px !important;
}

.woocommerce ul.products li.product .product-action-box {
  margin-top: 13px !important;
}

.woocommerce ul.products li.product .button {
  font-family: "Hanken Grotesk", sans-serif !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--ink) !important;
  height: 44px !important;
  border-radius: 2px !important;
}

.woocommerce ul.products li.product .button:hover {
  background: var(--ink) !important;
  color: #fff !important;
}

/* ── Phase 5: Single Product Detail Page ── */
/* Product image area */
.woocommerce div.product div.images {
  margin-bottom: 0 !important;
}

.woocommerce div.product div.images img {
  border: 1px solid var(--line) !important;
  border-radius: 4px !important;
}

/* Product title */
.woocommerce div.product .product_title {
  font-family: "Instrument Serif", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: clamp(40px, 5.4vw, 62px) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.4px !important;
  color: var(--ink) !important;
}

/* Price */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: "Hanken Grotesk", -apple-system, sans-serif !important;
  font-weight: 700 !important;
  font-size: 24px !important;
  color: var(--ink) !important;
}

.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
  font-weight: 500 !important;
  font-size: 16px !important;
  color: var(--muted) !important;
  opacity: 1 !important;
}

.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
  text-decoration: none !important;
  font-weight: 700 !important;
}

/* Sale badge on PDP */
.woocommerce div.product .onsale {
  background: var(--accent) !important;
  color: #fff !important;
  font-family: "Hanken Grotesk", sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  border-radius: 999px !important;
  padding: 4px 12px !important;
  top: 16px !important;
  left: 16px !important;
}

/* Quantity + Add to Cart */
.woocommerce div.product form.cart .quantity {
  margin-right: 12px !important;
}

.woocommerce div.product form.cart .quantity input.qty {
  border: 1px solid var(--ink) !important;
  border-radius: 2px !important;
  height: 54px !important;
  font-family: "Hanken Grotesk", sans-serif !important;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--ink) !important;
  font-family: "Hanken Grotesk", sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  height: 54px !important;
  padding: 0 40px !important;
  border-radius: 2px !important;
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover {
  background: var(--ink) !important;
  color: var(--paper) !important;
}

/* Description / story */
.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce div.product .woocommerce-Tabs-panel {
  font-family: "Hanken Grotesk", -apple-system, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: var(--ink) !important;
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0 !important;
  border-bottom: 1px solid var(--line) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: "Hanken Grotesk", sans-serif !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  padding: 14px 0 !important;
  margin-right: 28px !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--ink) !important;
  border-bottom: 2px solid var(--accent) !important;
}

/* Related products */
.woocommerce .related.products h2 {
  font-family: "Instrument Serif", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 38px !important;
  line-height: 1 !important;
  color: var(--ink) !important;
  margin-bottom: 30px !important;
}

/* Product meta */
.woocommerce div.product .product_meta {
  font-family: "Hanken Grotesk", sans-serif !important;
  font-size: 12px !important;
  color: var(--muted) !important;
}

.woocommerce div.product .product_meta a {
  color: var(--ink) !important;
}

/* Breadcrumbs */
.woocommerce .woocommerce-breadcrumb {
  font-family: "Hanken Grotesk", sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
  color: var(--muted) !important;
}

.woocommerce .woocommerce-breadcrumb a {
  color: var(--muted) !important;
}

/* Variation selects */
.woocommerce div.product form.cart .variations select {
  border: 1px solid var(--line) !important;
  border-radius: 3px !important;
  font-family: "Hanken Grotesk", sans-serif !important;
  font-size: 13px !important;
  padding: 10px 14px !important;
  color: var(--ink) !important;
  background: #fff !important;
}

.woocommerce div.product form.cart .variations label {
  font-family: "Hanken Grotesk", sans-serif !important;
  font-weight: 600 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
}

/* ── Phase 6: SmartSlider Hero ── */
/* Slider container — full-width, no padding/gap */
#n2-ss-2 {
  margin: 0 !important;
}

#n2-ss-2 .n2-ss-slider-1 {
  min-height: 620px !important;
  height: 84vh !important;
  max-height: 860px !important;
}

#n2-ss-2 .n2-ss-slider-2 {
  min-height: 620px !important;
  height: 84vh !important;
  max-height: 860px !important;
}

/* Hide thumbnails */
.n2-ss-thumbnail-wrapper {
  display: none !important;
}

/* Hide built-in controls bar */
.n2-ss-control-bullet,
.n2-ss-slide-limiter,
.n2-ss-slider .n2-ss-layer[data-sstype="content"] {
  /* SmartSlider arrows — keep, but restyle */
}

/* Gradient overlay on each slide background */
#n2-ss-2 .n2-ss-slide-background {
  position: relative !important;
}

#n2-ss-2 .n2-ss-slide-background::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(96deg, rgba(10,8,7,0.82) 0%, rgba(10,8,7,0.5) 40%, rgba(10,8,7,0.05) 74%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Hero overlay text (positioned on top of slider) */
.motuhake-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 clamp(18px, 5vw, 56px);
}

.motuhake-hero-overlay > * {
  pointer-events: auto;
}

/* Tag line */
.motuhake-hero-tag {
  display: inline-block;
  font-family: "Hanken Grotesk", -apple-system, sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
  margin-bottom: 22px !important;
  width: fit-content;
}

/* Main title */
.motuhake-hero-title {
  font-family: "Instrument Serif", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: clamp(56px, 7vw, 96px) !important;
  line-height: 0.94 !important;
  letter-spacing: -0.02em !important;
  color: #F3EEE5 !important;
  max-width: 14ch;
  margin: 0 0 34px !important;
}

/* CTA button */
.motuhake-hero-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  height: 56px !important;
  padding: 0 28px !important;
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
  font-family: "Hanken Grotesk", -apple-system, sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border-radius: 2px !important;
  width: fit-content;
  transition: background 0.2s ease, gap 0.2s ease !important;
  backdrop-filter: blur(8px);
}

.motuhake-hero-cta:hover {
  background: rgba(255,255,255,0.16) !important;
  gap: 16px !important;
}

.motuhake-hero-cta svg {
  flex-shrink: 0;
}

/* Hide the entry title above the slider (WooCommerce "Shop" heading) */
.woocommerce-products-header {
  display: none !important;
}

/* Remove top padding from content area so slider is flush */
.entry-content-wrap {
  padding-top: 0 !important;
}

/* Restyle arrow navigation */
.n2-ss-slider .n2-ss-button-play,
.n2-ss-slider .nextend-arrow {
  opacity: 0.5 !important;
  transition: opacity 0.2s ease !important;
}

.n2-ss-slider .nextend-arrow:hover {
  opacity: 1 !important;
}

/* Ensure slider fills viewport on mobile too */
@media (max-width: 768px) {
  #n2-ss-2 .n2-ss-slider-1,
  #n2-ss-2 .n2-ss-slider-2 {
    min-height: 500px !important;
    height: 70vh !important;
    max-height: 700px !important;
  }
  
  .motuhake-hero-title {
    font-size: clamp(36px, 8vw, 56px) !important;
  }
  
  .motuhake-hero-overlay {
    padding: 0 18px !important;
  }
}

/* ── Phase 7: Mobile Responsive ── */

/* ═══ Mobile Header ═══ */
#mobile-header {
  background: rgba(247,243,236,0.92) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--line) !important;
}

#mobile-header .site-branding .site-title {
  font-family: "Hanken Grotesk", -apple-system, sans-serif !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
}

#mobile-header .site-branding .site-description {
  font-family: "Hanken Grotesk", sans-serif !important;
  font-weight: 600 !important;
  font-size: 7px !important;
  letter-spacing: 0.3em !important;
}

#mobile-header .site-branding .custom-logo {
  display: none !important;
}

/* Hamburger toggle */
.menu-toggle-open {
  color: var(--ink) !important;
  background: transparent !important;
  border: none !important;
}

.menu-toggle-open:hover {
  color: var(--muted) !important;
}

/* Mobile drawer */
.popup-drawer {
  background: var(--paper) !important;
}

.popup-drawer .drawer-inner {
  padding: 0 !important;
}

.popup-drawer .drawer-header {
  padding: 20px !important;
  border-bottom: 1px solid var(--line) !important;
}

.popup-drawer .drawer-content {
  padding: 20px !important;
}

/* Mobile nav items */
.mobile-navigation ul li a {
  font-family: "Hanken Grotesk", -apple-system, sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--line) !important;
}

.mobile-navigation ul li.current-menu-item a {
  color: var(--accent) !important;
}

/* Drawer close button */
.drawer-close-button {
  color: var(--ink) !important;
}

/* Mobile cart icon */
#mobile-header .header-cart-button {
  color: var(--ink) !important;
}

/* ═══ Mobile Homepage ═══ */

/* Hero: smaller on mobile */
@media (max-width: 768px) {
  #n2-ss-2 .n2-ss-slider-1,
  #n2-ss-2 .n2-ss-slider-2 {
    min-height: 420px !important;
    height: 60vh !important;
    max-height: 600px !important;
  }
  
  .motuhake-hero-title {
    font-size: clamp(36px, 10vw, 52px) !important;
    margin-bottom: 20px !important;
  }
  
  .motuhake-hero-tag {
    font-size: 10px !important;
    margin-bottom: 16px !important;
  }
  
  .motuhake-hero-cta {
    height: 48px !important;
    padding: 0 22px !important;
    font-size: 11px !important;
  }
  
  .motuhake-hero-overlay {
    padding: 0 24px !important;
  }
}

/* ═══ Mobile Product Grid ═══ */
@media (max-width: 768px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 16px !important;
  }
  
  .woocommerce ul.products li.product .price {
    font-size: 14px !important;
  }
}

/* ═══ Mobile Product Detail Page ═══ */
@media (max-width: 768px) {
  .woocommerce div.product div.images {
    width: 100% !important;
    float: none !important;
    margin-bottom: 24px !important;
  }
  
  .woocommerce div.product div.summary {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
  }
  
  .woocommerce div.product .product_title {
    font-size: clamp(32px, 8vw, 44px) !important;
  }
  
  .woocommerce div.product form.cart {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  
  .woocommerce div.product form.cart .single_add_to_cart_button {
    flex: 1 !important;
    min-width: 200px !important;
  }
  
  .woocommerce div.product .woocommerce-tabs ul.tabs li a {
    margin-right: 16px !important;
    font-size: 10px !important;
  }
}

/* ═══ Mobile Cart & Checkout ═══ */
@media (max-width: 768px) {
  .woocommerce-cart .shop_table,
  .woocommerce-checkout .shop_table {
    font-size: 13px !important;
  }
  
  .woocommerce-checkout .col2-set .col-1,
  .woocommerce-checkout .col2-set .col-2 {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
  }
  
  .woocommerce-checkout #order_review,
  .woocommerce-checkout #order_review_heading {
    width: 100% !important;
    float: none !important;
  }
  
  /* Stack cart items vertically */
  .woocommerce-cart-form {
    width: 100% !important;
  }
  
  .cart-collaterals {
    width: 100% !important;
    float: none !important;
  }
}

/* ═══ Mobile Footer ═══ */
@media (max-width: 768px) {
  .site-footer-wrap .site-container {
    flex-direction: column !important;
    gap: 30px !important;
  }
  
  .site-footer-wrap .footer-widget-area {
    width: 100% !important;
  }
}

/* ═══ Mobile Text/Content Clamping ═══ */
@media (max-width: 768px) {
  body {
    font-size: 15px !important;
  }
  
  h1, h2, h3 {
    word-break: break-word !important;
  }
  
  /* Clamp all content padding */
  .site-container,
  .entry-content-wrap {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  
  /* Fix hero overlay for mobile centering */
  .motuhake-hero-overlay {
    text-align: left !important;
    justify-content: flex-end !important;
    padding-bottom: 60px !important;
  }
}

/* ═══ Extra Small Screens ═══ */
@media (max-width: 480px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  
  .woocommerce ul.products li.product .product-details {
    padding: 10px !important;
  }
  
  .woocommerce ul.products li.product .button {
    height: 38px !important;
    font-size: 10px !important;
  }
}

/* ── Phase 8: Hero without SmartSlider ── */
/* Dark background fills the hero area */
.woocommerce-shop .content-area,
.home .content-area {
  background: #15110E !important;
}

/* Hero overlay gets full height even without slider */
.motuhake-hero-overlay {
  position: relative !important;
  min-height: 620px !important;
  height: 84vh !important;
  max-height: 860px !important;
}

/* Add a subtle radial glow behind the text */
.motuhake-hero-overlay::before {
  content: "" !important;
  position: absolute !important;
  top: 20% !important;
  left: 5% !important;
  width: 60% !important;
  height: 60% !important;
  background: radial-gradient(ellipse at center, rgba(206,17,38,0.08) 0%, transparent 70%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.motuhake-hero-overlay > * {
  position: relative !important;
  z-index: 1 !important;
}

@media (max-width: 768px) {
  .motuhake-hero-overlay {
    min-height: 420px !important;
    height: 60vh !important;
    max-height: 600px !important;
  }
}

/* ── Phase 8b: Deeper hero background ── */
/* Multi-stop gradient to give depth without images */
.woocommerce-shop .content-area,
.home .content-area {
  background: linear-gradient(
    180deg,
    #0A0807 0%,
    #15110E 40%,
    #1C1815 70%,
    #F7F3EC 100%
  ) !important;
}

/* Make the inner-wrap transparent so gradient shows through */
.woocommerce-shop #inner-wrap,
.home #inner-wrap {
  background: transparent !important;
}

/* ── Phase 8c: Hero — EXACT redesign match ── */
.motuhake-hero-overlay {
  position: relative !important;
  min-height: 620px !important;
  height: 84vh !important;
  max-height: 860px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  max-width: 1340px !important;
  margin: 0 auto !important;
  padding: 0 clamp(18px, 5vw, 56px) !important;
  background: transparent !important;
}

/* Tagline */
.motuhake-hero-tag {
  display: inline-block !important;
  font-family: "Hanken Grotesk", -apple-system, sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
  margin-bottom: 22px !important;
  width: fit-content !important;
}

/* H1 — exact match to redesign: clamp(56px,10vw,132px), lh 0.9, -1px tracking, white, 13ch max */
.motuhake-hero-title {
  font-family: "Instrument Serif", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: clamp(56px, 10vw, 132px) !important;
  line-height: 0.9 !important;
  letter-spacing: -1px !important;
  color: #fff !important;
  margin: 0 0 24px !important;
  max-width: 13ch !important;
}

/* Italic "story." */
.motuhake-hero-title em {
  font-style: italic !important;
  font-weight: 400 !important;
}

/* CTA button */
.motuhake-hero-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  height: 56px !important;
  padding: 0 28px !important;
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
  font-family: "Hanken Grotesk", -apple-system, sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border-radius: 2px !important;
  width: fit-content !important;
  transition: background 0.2s ease, gap 0.2s ease !important;
  backdrop-filter: blur(8px) !important;
}

.motuhake-hero-cta:hover {
  background: rgba(255,255,255,0.16) !important;
  gap: 16px !important;
}

.motuhake-hero-cta svg {
  flex-shrink: 0 !important;
}

/* Remove the glow pseudo-element — no longer needed */
.motuhake-hero-overlay::before {
  display: none !important;
}

/* Mobile */
@media (max-width: 768px) {
  .motuhake-hero-overlay {
    min-height: 420px !important;
    height: 60vh !important;
    max-height: 600px !important;
    padding: 0 24px !important;
  }
  .motuhake-hero-title {
    font-size: clamp(40px, 12vw, 64px) !important;
    margin-bottom: 18px !important;
  }
  .motuhake-hero-tag {
    font-size: 10px !important;
    margin-bottom: 16px !important;
  }
  .motuhake-hero-cta {
    height: 48px !important;
    padding: 0 22px !important;
    font-size: 11px !important;
  }
}