/* Basic styles extracted from the top of the original file and a small reset */
:root{
  box-sizing: border-box;
  /* design baseline used throughout the stylesheet */
  --design-w: 1920px;

  /* Mobile baseline used for exact interpolation at 767px */
  --mobile-baseline-w: 767px;

  /* Helper: full scale range (1920 - 767) used in interpolation calcs */
  --scale-range: calc(1920px - var(--mobile-baseline-w));

  /* Header / Footer responsive typography tokens
     - Values here represent the font-size at 1920px (the 'max' value)
     - They scale down proportionally for narrower viewports using the --design-w baseline
  */
  --header-logo-font-max: 20px; /* was 1.25rem (≈20px) */
  --header-logo-font-min: 16px;
  --header-link-font-max: 16px; /* default nav links at 1920px */
  --header-link-font-min: 13px;
  --footer-font-max: 14px; /* footer text at 1920px */
  --footer-font-min: 12px;
}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial}
/* Default site text color to match product / caption tones */
body{ color: #595757; }

/* Reset figure defaults and ensure images don't cause overflow */
figure{ margin:0; padding:0; box-sizing:border-box; }
figure img, .lineup-item img, .product-item img{ display:block; max-width:100%; height:auto; }

/* Image intrinsic size helper that was inline in original */
img:is([sizes="auto" i],[sizes^="auto,"]){
  contain-intrinsic-size:3000px 1500px;
}

/* Product page specific: ensure .product-more inside .block-lineup has no gap
   and is positioned to the 4th column; this rule is scoped to .page-product so
   index.html (and other pages) keep their original behavior. */
.page-product .block-lineup .product-more{
  grid-column: 4;
  grid-row: -1;
  width: var(--lineup-item-width);
  justify-self: auto !important;
  align-self: auto !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
  justify-self: auto !important;
  align-self: auto !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  display: inline !important;
  box-sizing: border-box !important;
  color: #595757;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: clamp(var(--font-size-min), calc((18px * 100vw) / var(--design-w)), 18px);
  letter-spacing: clamp(0.2px, calc((0.9px * 100vw) / var(--design-w)), 0.9px);
  text-transform: uppercase;
  line-height: clamp(24px, calc((40px * 100vw) / var(--design-w)), 40px);
  text-decoration: none !important;
}

/* keep arrow/line pseudo-element */
.page-product .block-lineup .product-more::after,
.block-lineup .product-more::after{
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: clamp(64px, calc((104px * 100vw) / var(--design-w)), 104px);
  height: clamp(8px, calc((13px * 100vw) / var(--design-w)), 13px);
  margin-left: clamp(6px, calc((13px * 100vw) / var(--design-w)), 13px);
  border-bottom: solid 1px currentColor;
  border-right: solid 1px currentColor;
  transform: skew(45deg);
}


@media (min-width:1920px){
  .page-product .block-lineup .product-more{
    font-size:18px;
    line-height:40px;
    letter-spacing:0.9px;
  }
}

.site-header{padding:1rem;background:#111;color:#fff}
.site-header h1{margin:0; font-size: clamp(var(--header-logo-font-min), calc((var(--header-logo-font-max) * 100vw) / var(--design-w)), var(--header-logo-font-max)); }
.site-nav a{color:#fff;text-decoration:none;margin-left:1rem}

/* Responsive header/footer typography using the 1920px design baseline */
/* Navigation links (desktop 1920px = var(--header-link-font-max)) */
.gnav a,
.site-nav a,
.center-menu h1 a,
.mobile-menu a{
  font-size: clamp(var(--header-link-font-min), calc((var(--header-link-font-max) * 100vw) / var(--design-w)), var(--header-link-font-max));
  line-height: 1.2;
}

/* Footer text and footer nav links */
footer,
footer > p,
.footer-nav a{
  font-size: clamp(var(--footer-font-min), calc((var(--footer-font-max) * 100vw) / var(--design-w)), var(--footer-font-max));
  line-height: 1.3;
}
.hero{padding:3rem 1rem;background:#f5f5f5}
.content{padding:2rem 1rem}
footer{padding:1rem;text-align:center;color:#666}

/* Add more rules here when extracting the rest of the inline styles */

/* Header / navigation styles copied from original structure */
.gnav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1rem;background:transparent}
.gnav .left-menu,.gnav .right-menu{display:flex;align-items:center}
.gnav .left-menu ul,.gnav .right-menu ul,.mobile-menu ul{list-style:none;margin:0;padding:0;display:flex;align-items:center}
.gnav a{color:inherit;text-decoration:none}
.center-menu h1{margin:0}

/* Hamburger */
.humberger-lines{display:none;cursor:pointer}
.humberger-lines-container{width:28px;height:20px;display:flex;flex-direction:column;justify-content:space-between}
.humberger-lines .line{display:block;height:3px;background:#000;border-radius:2px;transition:transform .25s ease,opacity .25s ease}
.humberger-lines.open .line:nth-child(1){transform:translateY(9px) rotate(45deg)}
.humberger-lines.open .line:nth-child(2){opacity:0}
.humberger-lines.open .line:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* Mobile menu (hidden by default, shown when .gnav--open added) */
.mobile-menu{display:none;background:#fff;padding:1rem;position:absolute;top:100%;left:0;right:0;z-index:50;border-top:1px solid #eee}
.mobile-menu ul{flex-direction:column}
.mobile-menu a{display:block;padding:.5rem 0}
.gnav--open .mobile-menu{display:block}

/* Responsive adjustments */
@media (max-width:767px){
  .gnav .left-menu,.gnav .right-menu{display:none}
  .center-menu{display:block;text-align:center;width:100%}
  .humberger-lines{display:block}
  .gnav{position:relative}

  /* Ensure product-row stacks and items center on small screens */
  .product-row{ flex-direction:column; align-items:center; }
  .product-item{ width:100%; box-sizing:border-box; padding:0 1rem; }
  .product-item img{ display:block; margin:0 auto; max-width:320px; width:100%; height:auto; }
  .product-caption{ text-align:center; }
}

/* Mobile-specific scaling and layout tweaks for <=767px
   - center-menu image: 245px at 767px, scales down proportionally
   - footer-logo image: 490px at 767px, scales down proportionally
   - footer-nav: list items stacked vertically and centered
*/
@media (max-width:767px){
  :root{
    --center-menu-mobile-max:245px; /* width at 767px */
    --center-menu-mobile-min:120px;
    --footer-logo-mobile-max:490px; /* width at 767px */
    --footer-logo-mobile-min:160px;
  }

  /* center-menu logo (scales with viewport, 245px at 767px) */
  .center-menu img{
    width: clamp(var(--center-menu-mobile-min), calc((var(--center-menu-mobile-max) * 100vw) / 767px), var(--center-menu-mobile-max));
    height: auto !important;
    display:block;
    margin:0 auto;
  }

  /* footer logo wide at 767px but scales down on narrower screens */
  .footer-logo img{
    width: clamp(var(--footer-logo-mobile-min), calc((var(--footer-logo-mobile-max) * 100vw) / 767px), var(--footer-logo-mobile-max));
    max-width:100%;
    height:auto;
    display:block;
    margin:0 auto;
  }

  /* Stack footer nav items vertically and center them */
  .footer-nav ul{
    flex-direction:column !important;
    gap:12px;
    align-items:center;
    padding:0;
  }
  .footer-nav li{ width:100%; text-align:center; }
  .footer-nav a{ display:block; }

  /* product-more (VIEW MORE) — mobile: keep desktop font and pseudo-element sizes */
  a.product-more,
  .product-more{
    display:block; /* keep block for predictable layout */
    width:auto;
    max-width:none; /* スマホでは max-width 制約を解除 */
    margin-top: clamp(12px, calc((24px * 100vw) / var(--design-w)), 24px);
    margin-left: auto; /* ブロックを右寄せするため左マージン自動 */
    margin-right: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight:300;
    font-size: clamp(14px, calc((18px * 100vw) / var(--design-w)), 18px);
    letter-spacing: clamp(0.2px, calc((0.9px * 100vw) / var(--design-w)), 0.9px);
    line-height: clamp(20px, calc((40px * 100vw) / var(--design-w)), 40px);
    color: #595757; /* match desktop product-more color */
    text-transform:uppercase;
    text-align:right; /* スマホではテキスト右寄せ */
    padding: clamp(6px, calc((8px * 100vw) / var(--design-w)), 8px) clamp(8px, calc((12px * 100vw) / var(--design-w)), 12px);
  }

  /* Ensure product-caption uses same typographic tokens on mobile */
  .product-caption{
    color: #595757;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight:300;
    font-size: clamp(16px, calc((30px * 100vw) / var(--design-w)), 30px);
    letter-spacing: clamp(0.2px, calc((0.9px * 100vw) / var(--design-w)), 0.9px);
    line-height: clamp(20px, calc((36px * 100vw) / var(--design-w)), 36px);
  }

  /* Force-remove underline on the anchor in case of conflicting rules */
  a.product-more, a.product-more:link, a.product-more:visited, a.product-more:hover, a.product-more:active, a.product-more:focus{
    text-decoration: none !important;
    color: #595757 !important;
  }

  /* apply desktop-like arrow sizes on mobile (responsive via same clamps) */
  a.product-more::after,
  .product-more::after{
    content: '';
    display:inline-block;
    vertical-align:middle;
    width: clamp(64px, calc((104px * 100vw) / var(--design-w)), 104px);
    height: clamp(8px, calc((13px * 100vw) / var(--design-w)), 13px);
    left: clamp(6px, calc((13px * 100vw) / var(--design-w)), 13px);
    border-bottom: solid 1px currentColor;
    border-right: solid 1px currentColor;
    transform: skew(45deg);
  }
}

/* Further refine footer layout: stack the three footer-nav columns vertically and center them */
@media (max-width:767px){
  .footer-nav{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
    width:100%;
    box-sizing:border-box;
    padding:0 1rem;
  }

  .footer-nav > div{
    width:100%;
    display:flex;
    justify-content:center; /* center contents horizontally */
  }

  /* Ensure left/right lists are vertical and centered */
  .footer-nav-left ul,
  .footer-nav-right ul{
    display:flex !important;
    flex-direction:column !important;
    gap:8px;
    align-items:center;
    padding:0;
    margin:0;
  }

  .footer-nav-left ul li,
  .footer-nav-right ul li{
    width:auto;
    text-align:center;
    display:block;
    margin:0;
  }

  /* Center the single anchor in the center column */
  .footer-nav-center{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
  }
  .footer-nav-center a{ display:inline-block; }
}

/* Hero / main visual rules
   - Up to 1920px: image stretches to viewport width
   - Above 1920px: image width is capped at 1920px and centered
   - Image keeps aspect ratio (height auto) */
/* Hero visual: full-bleed immediately below header, capped at 1920px and centered above that */
.hero{margin:0;padding:0}
.et-l.et-l--header{margin-bottom:0}

.hero-visual{
  position:relative;
  width:100vw; /* span full viewport */
  left:50%;
  right:50%;
  margin-left:-50vw; /* pull out of centered container to become full-bleed */
  margin-right:-50vw;
  overflow:hidden;
}
.hero-visual img{
  display:block;
  width:100%; /* fills the full-bleed container */
  max-width:1920px; /* cap at 1920px */
  max-width:100vw;
  margin:0 auto; /* center when viewport wider than image max */
  height:auto; /* preserve aspect ratio */
  object-fit:cover;
}

/* Prevent horizontal overflow on narrow viewports: keep content within viewport */
html,body{
  max-width:100%;
  overflow-x:hidden;
}

main{ /* more targeted: hide any accidental overflow inside main */
  overflow-x:hidden;
}

/* Hero text layout */
.hero h2{
  padding:0;
  max-width:1200px;
  margin:0 auto;
}

/* Hero typography and spacing (scales down below 1920px) */
:root{
  --hero-h2-size-max:40px;
  --hero-h2-size-min:20px;
  --hero-h2-line-max:48px;
  --hero-h2-line-min:28px;
  --hero-h2-letter-max:1.2px;
  --hero-h2-letter-min:0.2px;
  --hero-h2-offset-max:250px; /* distance from hero-visual to h2 at 1920px */
  --hero-h2-offset-min:40px;
}

.hero{background:#fff}
.hero h2{
  color:#595757;
  text-align:center;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight:400;
  font-size: clamp(var(--hero-h2-size-min), calc((var(--hero-h2-size-max) * 100vw) / var(--design-w)), var(--hero-h2-size-max));
  line-height: clamp(var(--hero-h2-line-min), calc((var(--hero-h2-line-max) * 100vw) / var(--design-w)), var(--hero-h2-line-max));
  letter-spacing: clamp(var(--hero-h2-letter-min), calc((var(--hero-h2-letter-max) * 100vw) / var(--design-w)), var(--hero-h2-letter-max));
  margin-top: clamp(var(--hero-h2-offset-min), calc((var(--hero-h2-offset-max) * 100vw) / var(--design-w)), var(--hero-h2-offset-max));
}

/* Ensure exact values at >=1920px */
@media (min-width:1920px){
  .hero h2{
    font-size:var(--hero-h2-size-max);
    line-height:var(--hero-h2-line-max);
    letter-spacing:var(--hero-h2-letter-max);
    margin-top:var(--hero-h2-offset-max);
  }
}

/* Design tokens and scaling for desktop up to 1920px */
:root{
  --design-w:1920px; /* base design width (px) */
  --header-h:245px; /* header height at 1920px */
  --header-min-h:120px; /* minimum header height when very narrow */
  --font-size-max:18px; /* font-size at 1920px (reduced) */
  --font-size-min:12px; /* minimum font-size reduced to allow header/footer below 14px */
  --line-height-max:24px; /* line-height at 1920px */
  --line-height-min:18px; /* minimum line-height */
  --letter-spacing-max:1px; /* letter-spacing at 1920px */
  --letter-spacing-min:0.5px; /* minimum letter-spacing */
  --gap-center-max:80px;
  --gap-center-min:40px;
  --li-gap-max:40px;
  --li-gap-min:12px;
  --logo-h-max:90px;
  --logo-h-min:48px;
  --logo-w-max:400px;
  --logo-w-min:120px;
  --hamburger-w-max:24px;
  --hamburger-h-max:16px;
  --hamburger-w-min:20px;
  --hamburger-h-min:14px;
}

@media (min-width:768px){
  /* Header container styles scaled proportionally up to 1920px */
  .et-l.et-l--header{
    background-color:#FFFFFF;
    height: clamp(var(--header-min-h), calc((var(--header-h) * 100vw) / var(--design-w)), var(--header-h));
    display:block;
  }

  /* Ensure inner builder stretches to header height */
  .et-l.et-l--header .et_builder_inner_content{
    height:100%;
    display:flex;
    align-items:center;
  }

  .gnav{
    align-items:center;
    gap:1rem;
  }

  /* New: use grid for left / center / right alignment with fixed gaps */
  .gnav{
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    column-gap: clamp(var(--gap-center-min), calc((var(--gap-center-max) * 100vw) / var(--design-w)), var(--gap-center-max)); /* scalable gap */
    align-items: end; /* left and right bottom-aligned by default */
    height: auto; /* allow gnav to size itself */
    justify-items: stretch;
  }

  /* Ensure gnav is vertically centered within the header (supports simplified markup) */
  .et-l.et-l--header,
  .et-l.et-l--header .et_builder_inner_content {
    display:flex;
    align-items:center; /* vertical centering */
  }

  .gnav{ margin: 0 auto; width:100%; max-width:var(--design-w); }

  /* center-menu should be centered horizontally and vertically within the header */
  /* At 1920px and above, ensure header equals design height and gnav stays auto-height and vertically centered */
  @media (min-width:1920px){
    .et-l.et-l--header{
      height: var(--header-h); /* 245px */
    }

    .gnav{
      height: auto; /* do not fix gnav height */
      align-self: center; /* vertically center inside flex header */
    }
  }
  .center-menu{
    justify-self: center;
    align-self: center; /* vertically centered */
    display:flex;
    align-items:center;
  }

  /* left / right menus positioning */
  .left-menu{ justify-self: end; align-self: end; }
  .right-menu{ justify-self: start; align-self: end; }

  /* spacing between list items (use gap for clarity) */
  .left-menu ul,
  .right-menu ul{
    gap: clamp(var(--li-gap-min), calc((var(--li-gap-max) * 100vw) / var(--design-w)), var(--li-gap-max));
    display:flex;align-items:center;
  }

  /* Ensure left-menu and right-menu are visually aligned inside their grid columns */
  .left-menu ul{ justify-content:flex-end; }
  .right-menu ul{ justify-content:flex-start; }

  /* Logo scaling */
  .center-menu img{
    /* Width-based scaling: at 1920px width => ~var(--logo-w-max) (400px)
       height auto to preserve aspect ratio */
    width: clamp(var(--logo-w-min), calc((var(--logo-w-max) * 100vw) / var(--design-w)), var(--logo-w-max));
    max-width: 100%;
    height: auto !important;
    display:block;
  }

  /* Hamburger scaling */
  .humberger-lines-container{
    width: clamp(var(--hamburger-w-min), calc((var(--hamburger-w-max) * 100vw) / var(--design-w)), var(--hamburger-w-max));
    height: clamp(var(--hamburger-h-min), calc((var(--hamburger-h-max) * 100vw) / var(--design-w)), var(--hamburger-h-max));
    display:flex;flex-direction:column;justify-content:space-between
  }
  .humberger-lines .line{ height: calc(clamp(var(--hamburger-h-min), calc((var(--hamburger-h-max) * 100vw) / var(--design-w)), var(--hamburger-h-max)) / 6); }


  /* Link typography scaling (left-aligned as requested) */
  .gnav a{
    color:#595757;
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight:400;
    font-size: clamp(var(--font-size-min), calc((var(--font-size-max) * 100vw) / var(--design-w)), var(--font-size-max));
    line-height: clamp(var(--line-height-min), calc((var(--line-height-max) * 100vw) / var(--design-w)), var(--line-height-max));
    letter-spacing: clamp(var(--letter-spacing-min), calc((var(--letter-spacing-max) * 100vw) / var(--design-w)), var(--letter-spacing-max));
    text-align:left;
    display:inline-block;
  }

/* Product row variables and layout
   - At 1920px: product image width = 400px, gap = 50px, offset below H2 = 100px
   - Values scale down proportionally below 1920px using the existing --design-w token */
:root{
  --prod-img-w-max:400px;
  --prod-img-w-min:120px;
  --prod-gap-max:50px;
  /* mobile-specific value for prod gap at 767px */
  --prod-gap-mobile:20px;
  --prod-gap-min:12px;
  /* computed gap used by product-row so we can calculate item widths precisely */
  /* responsive prod gap: exactly --prod-gap-mobile at 767px, --prod-gap-max at 1920px, interpolated between */
  --prod-gap: clamp(var(--prod-gap-mobile), calc(( (var(--prod-gap-max) - var(--prod-gap-mobile)) * ((100vw - var(--mobile-baseline-w)) / var(--scale-range)) + var(--prod-gap-mobile) )), var(--prod-gap-max));
  --prod-offset-max:100px; /* distance from H2 to product row at 1920px */
  --prod-offset-min:24px;
}

.product-row{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap: var(--prod-gap);
  margin-top: clamp(var(--prod-offset-min), calc((var(--prod-offset-max) * 100vw) / var(--design-w)), var(--prod-offset-max));
  padding: 0 1rem; /* small side padding on narrow viewports */
  box-sizing:border-box;
  /* At 1920px viewport width the row is 1300px wide and centered.
     It scales down fluidly using the --design-w baseline. Minimum width
     chosen to keep items usable on very narrow screens. */
  width: clamp(320px, calc((1300px * 100vw) / var(--design-w)), 1300px);
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
}

/* Use CSS Grid on tablet/desktop so three columns fill precisely and
   avoid flexbox rounding creating a visible empty column. Mobile keeps
   the stacked flex behavior defined in the max-width:767px rules. */
@media (min-width:768px){
  .product-row{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--prod-gap);
    align-items: start;
    justify-items: center; /* center each figure within its column */
  }

  /* grid children should size to the image width on large viewports */
  .product-item{
    flex: none; /* cancel any flex settings */
    width: 100%;
    box-sizing: border-box;
    max-width: none;
  }

  /* ensure images respect their container and the exact 400px target at 1920px */
  @media (min-width:1920px){
    .product-item img{ width: var(--prod-img-w-max); }
  }
}

.product-item{ display:block; max-width:var(--prod-img-w-max); }
.product-item img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}

/* Force three equal columns inside the product-row by calculating
   each item's basis from the row width and the gap. This prevents
   an apparent empty fourth column when the container width and
   item widths/gaps don't line up due to rounding. */
.product-item{
  flex: 0 0 calc((100% - (2 * var(--prod-gap))) / 3);
  max-width: none; /* allow flex-basis to control the item width */
}

/* Reset default figure margin and ensure product-figure has no extra margin */
figure, .product-item{ margin:0; text-align:center; }

/* Ensure exact pixel values at >=1920px */
@media (min-width:1920px){
  .product-row{ gap:var(--prod-gap-max); margin-top:var(--prod-offset-max); }
  .product-item img{ width:var(--prod-img-w-max); }
}

/* On narrow viewports (<=767px) stack products vertically for readability */
@media (max-width:767px){
  .product-row{ flex-direction:column; align-items:center; }
  /* Ensure product items and their content size and center correctly on mobile */
  .product-item{
    max-width: none; /* allow full-width stacking */
    width: 100%;
    box-sizing: border-box;
    padding: 0 1rem; /* small side padding for breathing room */
  }
  .product-item img{
    width: clamp(var(--prod-img-w-min), calc((var(--prod-img-w-max) * 100vw) / var(--design-w)), var(--prod-img-w-max));
    max-width: 320px; /* keep images reasonably sized on narrow screens */
    margin: 0 auto;
    display:block;
    height:auto;
    object-fit:contain;
  }
  .product-more{
    text-align:right;
    margin-left:auto;
    margin-right:0;
  }
}

/* Product caption styles (centered under each image)
   - At 1920px: font-size 30px, letter-spacing 0.9px, line-height 36px
   - Position: 50px below the image at 1920px, scales down proportionally */
.product-caption{
  text-align:center;
  /* caption gap: 50px at 1920px, 20px at 767px, interpolates between */
  --caption-gap-max:50px;
  --caption-gap-mobile:20px;
  margin-top: clamp(var(--caption-gap-mobile), calc(( (var(--caption-gap-max) - var(--caption-gap-mobile)) * ((100vw - var(--mobile-baseline-w)) / var(--scale-range)) + var(--caption-gap-mobile) )), var(--caption-gap-max));
  color:#595757;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight:300; /* Light */
  font-size: clamp(16px, calc((30px * 100vw) / var(--design-w)), 30px);
  letter-spacing: clamp(0.2px, calc((0.9px * 100vw) / var(--design-w)), 0.9px);
  line-height: clamp(20px, calc((36px * 100vw) / var(--design-w)), 36px);
}

@media (min-width:1920px){
  .product-caption{
    margin-top:50px;
    font-size:30px;
    letter-spacing:0.9px;
    line-height:36px;
  }
}

/* Ensure lineup figcaptions are left-aligned too (applies on product pages and index) */
.lineup-item figcaption,
figcaption{ text-align: left; }

/* VIEW MORE ボタン（商品名の下 50px、中央寄せ）
   - 疑似要素で矢印を作成（index.html と同様の雰囲気） */
.product-more{
  display:inline-block;
  text-decoration: none;
  /* exactly 50px below caption at 1920px, scales down proportionally */
  margin-top: clamp(24px, calc((50px * 100vw) / var(--design-w)), 50px);
  color:#595757;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight:300; /* Light */
  font-size: clamp(14px, calc((18px * 100vw) / var(--design-w)), 18px);
  letter-spacing: clamp(0.2px, calc((0.9px * 100vw) / var(--design-w)), 0.9px);
  line-height: clamp(20px, calc((40px * 100vw) / var(--design-w)), 40px);
  text-transform:uppercase;
  text-align:center;
  cursor:pointer;
  margin-left:auto;
  margin-right:auto;
}

/* Ensure anchor variants of .product-more never show an underline */
a.product-more,
a.product-more:link,
a.product-more:visited,
a.product-more:hover,
a.product-more:active,
a.product-more:focus{
  text-decoration:none;
  color:inherit;
}

.product-more::after{
  content: '';
  position: relative;
  margin-top: 0;
  /* Responsive sizing based on 1920px design width */
  width: clamp(64px, calc((104px * 100vw) / var(--design-w)), 104px);
  height: clamp(8px, calc((13px * 100vw) / var(--design-w)), 13px);
  top: 0;
  left: clamp(6px, calc((13px * 100vw) / var(--design-w)), 13px);
  border-bottom: solid 1px currentColor;
  border-right: solid 1px currentColor;
  transform: skew(45deg);
  display:inline-block;
  vertical-align:middle;
}

@media (min-width:1920px){
  .product-more{
    margin-top:50px;
    font-size:16px;
    letter-spacing:1px;
  }
}

/* On product pages, align the "ONLINE SHOP" .product-more to the right
   inside each product-block for desktop/tablet viewports. Mobile keeps
   the centered behavior defined in the mobile rules. */
@media (min-width:768px){
  .page-product .product-block .product-more{
    display: block;
    width: 100%;
    text-align: right;
    margin-left: 0;
    margin-right: 0;
  }
}

  /* Left/right justification handled above (keep consistent) */
}

/* Scent section spacing — placed after the product row
   - At 1920px: offset = 250px below the product-row, scales down proportionally */
:root{
  --scent-offset-max:250px;
  --scent-offset-min:40px;
}

.scent-title{
  text-align:center;
  color:#595757;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight:400;
  margin:0 auto;
  margin-top: clamp(var(--scent-offset-min), calc((var(--scent-offset-max) * 100vw) / var(--design-w)), var(--scent-offset-max));
  /* Basic responsive sizing for the heading (adjust if you prefer different scale) */
  font-size: clamp(20px, calc((28px * 100vw) / var(--design-w)), 28px);
  line-height: clamp(28px, calc((36px * 100vw) / var(--design-w)), 36px);
}

@media (min-width:1920px){
  .scent-title{
    margin-top: var(--scent-offset-max);
    font-size:28px;
    line-height:36px;
  }
}

/* Mobile: center lineup items for readability (<=767px) */
@media (max-width:767px){
  .block-lineup{
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* モバイルでは1列にして中央揃え */
    gap: clamp(var(--lineup-gap-min), calc((var(--lineup-gap-max) * 100vw) / var(--design-w)), var(--lineup-gap-max));
    justify-items: center; /* 各アイテムを中央に配置 */
    align-items: start;
    box-sizing: border-box;
    width: 100%;
    padding: 0 1rem;
  }

  .block-lineup .lineup-item{
    justify-self: center;
    width: 100%;
    max-width: 420px; /* フル幅ではなく適度な最大幅で中央揃え */
    box-sizing: border-box;
    padding: 8px 0;
  }

  /* If a lineup has an odd number of items, ensure the last item centers */
  .block-lineup .lineup-item:last-child{ justify-self: center; }
}

/* Ensure lineup images and captions are centered at all sizes */
.block-lineup .lineup-item img,
.block-lineup .lineup-item figure img{
  display:block;
  margin:0 auto;
  max-width:100%;
  height:auto;
}
.block-lineup .lineup-item figcaption,
.block-lineup .lineup-item{
  /* Removed centering: captions/items should follow explicit rules elsewhere */
  text-align: left;
}

/* For product-block top area: on narrow screens stack and center text */
@media (max-width:767px){
  .product-block .block-top{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:12px;
  }
  .product-block .block-image img{ display:block; margin:0 auto; max-width:100%; height:auto; }
  .product-block .block-desc h3,
  .product-block .block-desc p{ text-align:center; margin:0; }
  /* スマホで要素が詰まらないように、PC（1920px）基準の余白を比例して付与します */
  .product-block .block-image img{
    /* PCでの image/desc gap = 100px を基準にスケール */
    margin-bottom: clamp(24px, calc((100px * 100vw) / var(--design-w)), 100px);
  }
  .product-block .block-desc h3{
    /* 見出し下の余白：PC 基準 40px をスケール */
    margin: 0 0 clamp(18px, calc((40px * 100vw) / var(--design-w)), 40px);
  }
  .product-block .block-desc p{
    /* 段落間の余白：PC 基準 24px をスケール */
    margin: 0 0 clamp(12px, calc((24px * 100vw) / var(--design-w)), 24px);
  }
}

/* Scent description block (centered under the H2)
   - At 1920px: font-size 18px, letter-spacing 0.9px, line-height 40px
   - Positioned 50px below the H2 at 1920px, scales with viewport width using --design-w */
.scent-text{
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
  margin-top: clamp(24px, calc((50px * 100vw) / var(--design-w)), 50px);
  color:#595757;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight:400; /* Regular */
  font-size: clamp(14px, calc((18px * 100vw) / var(--design-w)), 18px);
  letter-spacing: clamp(0.2px, calc((0.9px * 100vw) / var(--design-w)), 0.9px);
  line-height: clamp(24px, calc((40px * 100vw) / var(--design-w)), 40px);
  text-align:center;
}


/* Product category blocks: exact 1920px targets with fluid scaling
   - product-block width: 1198px at 1920px, centered
   - block-image width: 500px at 1920px
   - image/desc gap: 100px at 1920px
   - block-top -> block-lineup gap: 100px at 1920px
   - lineup-item width: 250px at 1920px
   - lineup-item horizontal gap: 66px at 1920px
*/
:root{
  --product-block-w-max:1198px;
  --product-block-w-min:320px;
  --block-h2-offset-max:100px;
  --block-h2-offset-min:24px;
  --block-gap-max:250px;
  --block-gap-min:40px;
  --block-main-img-max:500px;
  --block-main-img-min:160px;
  --block-image-desc-gap-max:100px;
  --block-image-desc-gap-min:16px;
  --block-top-lineup-gap-max:100px;
  --block-top-lineup-gap-min:24px;
  --lineup-item-max:250px;
  --lineup-item-min:120px;
  --lineup-gap-max:66px;
  --lineup-gap-min:12px;
}

/* Ensure lineup blocks with the modifier .lineup-4 keep four columns
   down to 768px. Below 768px mobile rules may switch to fewer columns. */
@media (min-width:768px){
  .block-lineup.lineup-4{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(var(--lineup-gap-min), calc((var(--lineup-gap-max) * 100vw) / var(--design-w)), var(--lineup-gap-max));
    align-items:start;
    box-sizing: border-box;
    width: 100%;
  }

  .block-lineup.lineup-4 .lineup-item{
    justify-self: center;
    width: 100%;
    box-sizing: border-box;
  }

  @media (min-width:1920px){
    .block-lineup.lineup-4{ grid-column-gap: var(--lineup-gap-max); }
    .block-lineup.lineup-4 .lineup-item{ max-width: var(--lineup-item-max); }
  }
}

/* lineup-specific tokens (ensure defined so clamp() works) */
:root{
  --lineup-img-border-width-max:0.5px;
  --lineup-img-border-color:#595757;
  --lineup-img-caption-gap-max:25px;
  --lineup-img-caption-gap-min:8px;
  --lineup-caption-size-max:18px;
  --lineup-caption-size-min:12px;
  --lineup-caption-letter-max:0.54px;
  --lineup-caption-line-max:40px;
}

/* block-desc typography tokens (1920px exact values) */
:root{
  --block-h3-size-max:40px;
  --block-h3-size-min:20px;
  --block-h3-letter-max:1.2px;
  --block-h3-line-max:49px;

  --block-p1-size-max:18px;
  --block-p1-size-min:14px;
  --block-p1-letter-max:0.9px;
  --block-p1-line-max:40px;

  --block-p2-size-max:15px;
  --block-p2-size-min:12px;
  --block-p2-letter-max:0.75px;
  --block-p2-line-max:40px;

  --block-p-gap-max:100px; /* gap between p elements at 1920px */
  --block-p-gap-min:12px;
}

.product-block{
  width: clamp(var(--product-block-w-min), calc((var(--product-block-w-max) * 100vw) / var(--design-w)), var(--product-block-w-max));
  margin-left:auto;
  margin-right:auto;
  padding: 0;
  box-sizing:border-box;
  margin-top: clamp(var(--block-h2-offset-min), calc((var(--block-h2-offset-max) * 100vw) / var(--design-w)), var(--block-h2-offset-max));
}

.product-block + .product-block{
  margin-top: clamp(var(--block-gap-min), calc((var(--block-gap-max) * 100vw) / var(--design-w)), var(--block-gap-max));
}

.product-block:last-of-type{
  margin-bottom: clamp(var(--block-gap-min), calc((var(--block-gap-max) * 100vw) / var(--design-w)), var(--block-gap-max));
}

.product-block h2{
  margin:0 0 clamp(24px, calc((40px * 100vw)/var(--design-w)),40px) 0;
  text-align:left;
  color:#595757;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight:400;
  font-size: clamp(20px, calc((28px * 100vw)/var(--design-w)), 28px);
  line-height: clamp(28px, calc((36px * 100vw)/var(--design-w)), 36px);
}

.block-top{
  display:flex;
  gap: clamp(var(--block-image-desc-gap-min), calc((var(--block-image-desc-gap-max) * 100vw) / var(--design-w)), var(--block-image-desc-gap-max));
  align-items:center; /* block-desc を画像に対して上下中央にする */
}

.block-image img{ display:block; width: clamp(var(--block-main-img-min), calc((var(--block-main-img-max) * 100vw) / var(--design-w)), var(--block-main-img-max)); height:auto; }

.block-desc{ flex:1; }
.block-desc h3{
  margin:0 0 12px 0;
  color:#595757;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight:300; /* Light */
  font-size: clamp(var(--block-h3-size-min), calc((var(--block-h3-size-max) * 100vw) / var(--design-w)), var(--block-h3-size-max));
  letter-spacing: clamp(0.2px, calc((var(--block-h3-letter-max) * 100vw) / var(--design-w)), var(--block-h3-letter-max));
  line-height: clamp(20px, calc((var(--block-h3-line-max) * 100vw) / var(--design-w)), var(--block-h3-line-max));
}

.block-desc p{
  margin:0;
  color:#595757;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight:400; /* Regular default for p */
}

/* first paragraph styling */
.block-desc p:first-of-type{
  font-size: clamp(var(--block-p1-size-min), calc((var(--block-p1-size-max) * 100vw) / var(--design-w)), var(--block-p1-size-max));
  letter-spacing: clamp(0.1px, calc((var(--block-p1-letter-max) * 100vw) / var(--design-w)), var(--block-p1-letter-max));
  line-height: clamp(20px, calc((var(--block-p1-line-max) * 100vw) / var(--design-w)), var(--block-p1-line-max));
}

/* gap between consecutive paragraphs */
.block-desc p + p{ 
  margin-top: clamp(var(--block-p-gap-min), calc((var(--block-p-gap-max) * 100vw) / var(--design-w)), var(--block-p-gap-max));
}

/* second paragraph styling (centered) */
.block-desc p:nth-of-type(2){
  text-align:center;
  font-size: clamp(var(--block-p2-size-min), calc((var(--block-p2-size-max) * 100vw) / var(--design-w)), var(--block-p2-size-max));
  letter-spacing: clamp(0.1px, calc((var(--block-p2-letter-max) * 100vw) / var(--design-w)), var(--block-p2-letter-max));
  line-height: clamp(20px, calc((var(--block-p2-line-max) * 100vw) / var(--design-w)), var(--block-p2-line-max));
}

.block-lineup{
  margin-top: clamp(var(--block-top-lineup-gap-min), calc((var(--block-top-lineup-gap-max) * 100vw) / var(--design-w)), var(--block-top-lineup-gap-max));
  /* Use grid to allow placing .product-more in the 4th column of the last row */
  --lineup-item-width: clamp(var(--lineup-item-min), calc((var(--lineup-item-max) * 100vw) / var(--design-w)), var(--lineup-item-max));
  display:grid;
  /* Fluid columns: create as many columns as fit where each column is at least
     --lineup-item-min and at most the responsive --lineup-item-width. This allows
     the grid to naturally become 4/3/2/1 columns depending on viewport width. */
  grid-template-columns: repeat(auto-fit, minmax(var(--lineup-item-min), var(--lineup-item-width)));
  grid-auto-rows: auto;
  gap: clamp(var(--lineup-gap-min), calc((var(--lineup-gap-max) * 100vw) / var(--design-w)), var(--lineup-gap-max));
  justify-content:center; /* center the grid so smaller column counts look balanced */
  position:relative;
}
.lineup-item{
  text-align:left;
  width:100%; /* let the grid cell control width */
  justify-self:stretch;
  box-sizing:border-box;
}

/* Removed forced column-count media overrides so .block-lineup can use
   the fluid `repeat(auto-fit, minmax(...))` definition above. This
   avoids conflicting fixed breakpoints and lets the grid adapt naturally. */

/* lineup image border and caption styles */
.lineup-item img{
  display:block;
  width:100%;
  height:auto;
  box-sizing:border-box;
  border: clamp(1px, calc((var(--lineup-img-border-width-max) * 100vw) / var(--design-w)), var(--lineup-img-border-width-max)) solid var(--lineup-img-border-color);
}
.lineup-item figcaption{
  margin-top: clamp(var(--lineup-img-caption-gap-min), calc((var(--lineup-img-caption-gap-max) * 100vw) / var(--design-w)), var(--lineup-img-caption-gap-max));
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight:400;
  font-size: clamp(var(--lineup-caption-size-min), calc((var(--lineup-caption-size-max) * 100vw) / var(--design-w)), var(--lineup-caption-size-max));
  letter-spacing: clamp(0.1px, calc((var(--lineup-caption-letter-max) * 100vw) / var(--design-w)), var(--lineup-caption-letter-max));
  line-height: clamp(20px, calc((var(--lineup-caption-line-max) * 100vw) / var(--design-w)), var(--lineup-caption-line-max));
  text-align:left;
  color:#595757;
}

/* Product page: style figcaption first line (before <br>) as Light, second line as Regular
   - 1920px baseline: font-size 18px, letter-spacing 0.54px, line-height 40px
   - Values scale down using --design-w via clamp() */
.page-product .lineup-item figcaption{
  /* second line default (Regular) */
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400; /* Regular */
  font-size: clamp(14px, calc((18px * 100vw) / var(--design-w)), 18px);
  letter-spacing: clamp(0.2px, calc((0.54px * 100vw) / var(--design-w)), 0.54px);
  line-height: clamp(24px, calc((40px * 100vw) / var(--design-w)), 40px);
}

.page-product .lineup-item figcaption::first-line{
  /* first line (before the <br>) should be Light */
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300; /* Light */
  font-size: clamp(14px, calc((18px * 100vw) / var(--design-w)), 18px);
  letter-spacing: clamp(0.2px, calc((0.54px * 100vw) / var(--design-w)), 0.54px);
  line-height: inherit;
}

@media (min-width:1920px){
  .page-product .lineup-item figcaption{
    font-size:18px;
    letter-spacing:0.54px;
    line-height:40px;
    font-weight:400;
  }
  .page-product .lineup-item figcaption::first-line{
    font-size:18px;
    letter-spacing:0.54px;
    line-height:40px;
    font-weight:300;
  }
}

@media (min-width:1920px){
  .product-block{ width: var(--product-block-w-max); margin-top: var(--block-h2-offset-max); }
  .product-block + .product-block{ margin-top: var(--block-gap-max); }
  .product-block:last-of-type{ margin-bottom: var(--block-gap-max); }
  .block-image img{ width: var(--block-main-img-max); }
  .block-top{ gap: var(--block-image-desc-gap-max); }
  .block-lineup{ gap: var(--lineup-gap-max); margin-top: var(--block-top-lineup-gap-max); }
  .lineup-item{ width: var(--lineup-item-max); }
  /* enforce exact typography at >=1920px */
  .block-desc h3{ font-size: var(--block-h3-size-max); letter-spacing: var(--block-h3-letter-max); line-height: var(--block-h3-line-max); }
  .block-desc p:first-of-type{ font-size: var(--block-p1-size-max); letter-spacing: var(--block-p1-letter-max); line-height: var(--block-p1-line-max); }
  .block-desc p + p{ margin-top: var(--block-p-gap-max); }
  .block-desc p:nth-of-type(2){ text-align:center; font-size: var(--block-p2-size-max); letter-spacing: var(--block-p2-letter-max); line-height: var(--block-p2-line-max); }
}

@media (max-width:767px){
  .block-top{ flex-direction:column; align-items:flex-start; }
  .block-lineup{ grid-template-columns: repeat(2, 1fr); }
  .lineup-item{ width:100%; }
}

@media (max-width:480px){
  /* keep at least 2 columns on very narrow screens */
  .block-lineup{ grid-template-columns: repeat(2, 1fr); }
  .lineup-item{ width:100%; }
}

/* Product-more inside block-lineup: position bottom-right with conditional offset
   - If the last row is full (total items % 4 == 0), move the button down by 67px (scaled)
   - If the last row is incomplete (1-3 items), keep it aligned to the bottom of the last row
   Uses :has() to detect whether the last child is the 4th in its row (modern browsers only).
*/
:root{
  --product-more-offset-max:67px; /* offset at 1920px when last row full */
  --product-more-offset-min:20px; /* min offset at small viewports */
  --product-more-offset: clamp(var(--product-more-offset-min), calc((var(--product-more-offset-max) * 100vw) / var(--design-w)), var(--product-more-offset-max));

  /* product-more arrow dimensions (max are for 1920px) */
  --product-more-arrow-w-max:98px;
  --product-more-arrow-w-min:24px;
  --product-more-arrow-h-max:15px;
  --product-more-arrow-h-min:6px;
}

.block-lineup{ padding-bottom: clamp(16px, calc((32px * 100vw) / var(--design-w)), 32px); }

/* Place the product-more as a grid item anchored to the 4th column on wide screens,
   but allow it to flow into its own row when needed (avoids manual top offsets).
   Using grid-row:auto makes the button occupy the next available cell (and thus
   fall to a new row when the previous row is full). */
.block-lineup .product-more{
  grid-column:4;
  grid-row: auto; /* let grid place it in the next available row if necessary */
  width: auto; /* use intrinsic width for button */
  justify-self:end;
  align-self:start; /* place at the start of its grid row to avoid overlap */
  display:inline-flex;
  align-items:center;
  gap: clamp(6px, calc((8px * 100vw) / var(--design-w)), 8px);
  color:#595757;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight:300;
  font-size: clamp(14px, calc((16px * 100vw) / var(--design-w)), 16px);
  letter-spacing: clamp(0.2px, calc((0.9px * 100vw) / var(--design-w)), 0.9px);
  text-transform:uppercase;
  cursor:pointer;
  padding: clamp(6px, calc((8px * 100vw) / var(--design-w)), 8px) clamp(8px, calc((12px * 100vw) / var(--design-w)), 12px);
  background:transparent;
  box-sizing:border-box;
}

.block-lineup .product-more::after{
  content:'';
  display:inline-block;
  width: clamp(var(--product-more-arrow-w-min), calc((var(--product-more-arrow-w-max) * 100vw) / var(--design-w)), var(--product-more-arrow-w-max));
  height: clamp(var(--product-more-arrow-h-min), calc((var(--product-more-arrow-h-max) * 100vw) / var(--design-w)), var(--product-more-arrow-h-max));
  border-bottom: solid 1px currentColor;
  border-right: solid 1px currentColor;
  transform: skew(45deg);
}

/* product-more placement helpers
   - Default: overlay the 4th column's figcaption when the last row is incomplete
   - If the previous sibling is the 4th item in a full row (nth-child(4n) + .product-more)
     place the button below the grid with a vertical offset (--product-more-offset)
   Values scale with --design-w so 67px at 1920px becomes responsive. */
:root{
  --product-more-overlay-max:40px; /* how far the button overlaps upward at 1920px */
  --product-more-overlay-min:12px;
  --product-more-overlay: clamp(var(--product-more-overlay-min), calc((var(--product-more-overlay-max) * 100vw) / var(--design-w)), var(--product-more-overlay-max));
}

.block-lineup{ position: relative; }

/* Default: remove .product-more from the grid flow so it doesn't affect wrapping.
   Position it absolutely and pull it upward to overlay the (empty) 4th slot's figcaption. */
.block-lineup .product-more{
  position: absolute !important;
  right: clamp(12px, calc((24px * 100vw) / var(--design-w)), 24px); /* small right offset, responsive */
  top: auto;
  bottom: auto;
  transform: translateY(calc(-1 * var(--product-more-overlay)));
  display: inline-flex !important;
  align-items: center;
  gap: clamp(6px, calc((8px * 100vw) / var(--design-w)), 8px);
  padding: clamp(6px, calc((8px * 100vw) / var(--design-w)), 8px) clamp(8px, calc((12px * 100vw) / var(--design-w)), 12px);
}

/* ===== Adjacent-sibling product-more handling (markup: .block-lineup + .product-more) =====
   Some templates place the `a.product-more` as a sibling following `.block-lineup` rather
   than as a child. Provide equivalent rules for that structure and allow JS to toggle
   `.has-incomplete-row` on the `.block-lineup` to control overlay behavior. */

/* Default: keep the sibling product-more in-flow (below the grid) so it behaves like
   the existing static placement when rows are complete. This applies on desktop sizes
   and will be overridden when the block has .has-incomplete-row. */
/* Sibling product-more default rules removed per request; behavior is controlled
   via the child-selector rules and .has-incomplete-row overlay behavior. */

/* When JS has flagged the block as having an incomplete last row, overlay the
   adjacent product-more in the block's bottom-right corner (desktop only). */
@media (min-width:768px){
  .block-lineup.has-incomplete-row{ position: relative; }
  .block-lineup.has-incomplete-row + .product-more{
    position: absolute !important;
    right: clamp(12px, calc((24px * 100vw) / var(--design-w)), 24px) !important;
    bottom: auto !important;
    transform: translateY(calc(-1 * var(--product-more-overlay))) !important;
    display: inline-flex !important;
    align-items: center;
    gap: clamp(6px, calc((8px * 100vw) / var(--design-w)), 8px) !important;
    padding: clamp(6px, calc((8px * 100vw) / var(--design-w)), 8px) clamp(8px, calc((12px * 100vw) / var(--design-w)), 12px) !important;
  }
}

/* When the viewport is narrow (<=1199px) enforce the sibling product-more to span
   a full row below the grid to avoid overlapping images. This mirrors the child
   selector behavior defined earlier. */
@media (max-width:1199px){
  /* The sibling-based fallback for narrow viewports has been removed. */
}

/* If the previous sibling is the 4th item (full row), put the button back into flow
   so it occupies its own row below the grid (and therefore doesn't overlap). */
.block-lineup .lineup-item:nth-child(4n) + .product-more{
  position: static !important; /* back into flow */
  display: inline-flex !important;
  grid-column: 1 / -1;
  justify-self: center;
  align-self: start;
  transform: none;
  margin-top: var(--product-more-offset);
}




@media (min-width:1920px){
  .scent-text{
    margin-top:50px;
    font-size:18px;
    letter-spacing:0.9px;
    line-height:40px;
  }
  /* Ensure arrow exact sizes at >=1920px */
  .block-lineup .product-more::after{
    width: var(--product-more-arrow-w-max);
    height: var(--product-more-arrow-h-max);
  }
}

/* product.html only: make the product-more arrow 79px at 1920px and responsive */
.page-product .block-lineup .product-more::after{
  content: '';
  display: inline-block;
  width: clamp(var(--product-more-arrow-w-min), calc((79px * 100vw) / var(--design-w)), 79px);
  height: clamp(var(--product-more-arrow-h-min), calc((var(--product-more-arrow-h-max) * 100vw) / var(--design-w)), var(--product-more-arrow-h-max));
  border-bottom: solid 1px currentColor;
  border-right: solid 1px currentColor;
  transform: skew(45deg);
}

/* When there are fewer than 4 columns (narrower viewports), place the product-more
   on its own row below the grid to avoid overlapping images. This applies for
   all viewports <=1199px where grid switches to 3/2/1 columns. */
@media (max-width:1199px){
  .block-lineup .product-more{
    grid-column: 1 / -1; /* span full row */
    grid-row: auto;      /* ensure it's placed after items */
    width: auto;         /* allow intrinsic width */
    justify-self: center;
    align-self: center;
    transform: translateY(0);
    margin-top: 8px;
  }
}

/* Product grid: 2 rows x 6 columns (12 items)
   - Positioned 100px below the scent-text at 1920px, scales with viewport width
   - On smaller viewports the number of columns reduces for readability */
:root{
  --grid-offset-max:100px;
  --grid-offset-min:32px;
  --grid-gap-max:100px; /* changed: 100px at 1920px */
  --grid-gap-min:12px;
  --grid-width-max:1100px; /* product-grid width at 1920px */
  --grid-width-min:320px;
  --grid-item-img-w-max:500px; /* image width at 1920px */
  --grid-item-img-w-min:120px;
  --grid-caption-gap-max:50px; /* gap between image and caption at 1920px */
  --grid-caption-gap-min:8px;
  --grid-desc-gap-max:50px; /* gap between figcaption and first p at 1920px */
  --grid-desc-gap-min:8px;
  --grid-meta-gap-max:49px; /* gap between first p and second p at 1920px */
  --grid-meta-gap-min:8px;
  --grid-cta-offset-max:250px; /* h2 offset below product-grid at 1920px */
  --grid-cta-offset-min:40px;
}

.product-grid{
  display:grid;
  /* 2 columns x 6 rows layout by default */
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(var(--grid-gap-min), calc((var(--grid-gap-max) * 100vw) / var(--design-w)), var(--grid-gap-max));
  /* width capped at 1100px at 1920px, scales down */
  width: clamp(var(--grid-width-min), calc((var(--grid-width-max) * 100vw) / var(--design-w)), var(--grid-width-max));
  margin-left: auto;
  margin-right: auto;
  margin-top: clamp(var(--grid-offset-min), calc((var(--grid-offset-max) * 100vw) / var(--design-w)), var(--grid-offset-max));
  padding: 0; /* remove extra side padding as requested */
  box-sizing: border-box;
}

.product-grid .grid-item{
  list-style:none;
  margin:0;
  text-align:center;
}
.product-grid .grid-item img{
  display:block;
  width: clamp(var(--grid-item-img-w-min), calc((var(--grid-item-img-w-max) * 100vw) / var(--design-w)), var(--grid-item-img-w-max));
  max-width:100%;
  height:auto;
  object-fit:cover;
  margin-left:auto;
  margin-right:auto;
}
.product-grid .grid-item figcaption{
  margin-top: clamp(var(--grid-caption-gap-min), calc((var(--grid-caption-gap-max) * 100vw) / var(--design-w)), var(--grid-caption-gap-max));
  text-align: center;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight:300; /* Light */
  font-size: clamp(16px, calc((30px * 100vw) / var(--design-w)), 30px);
  letter-spacing: clamp(0.2px, calc((0.9px * 100vw) / var(--design-w)), 0.9px);
  line-height: clamp(20px, calc((36px * 100vw) / var(--design-w)), 36px);
  color:#595757;
}

/* Description paragraph directly below figcaption */
.product-grid .grid-item-desc{
  margin:0 auto;
  margin-top: clamp(var(--grid-desc-gap-min), calc((var(--grid-desc-gap-max) * 100vw) / var(--design-w)), var(--grid-desc-gap-max));
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight:400; /* Regular */
  font-size: clamp(12px, calc((15px * 100vw) / var(--design-w)), 15px);
  letter-spacing: clamp(0.2px, calc((0.75px * 100vw) / var(--design-w)), 0.75px);
  line-height: clamp(20px, calc((40px * 100vw) / var(--design-w)), 40px);
  text-align:center;
  color:#595757;
}

/* Secondary meta paragraph below the first paragraph */
.product-grid .grid-item-meta{
  /* Center the element horizontally within .grid-item while keeping
     the text inside left-aligned. Allow the element to size to its
     content but cap to the grid item image width for safety. */
  display:inline-block;
  margin:0 auto;
  margin-top: clamp(var(--grid-meta-gap-min), calc((var(--grid-meta-gap-max) * 100vw) / var(--design-w)), var(--grid-meta-gap-max));
  padding:0; /* ensure no extra padding affects width */
  text-align:left; /* keep text left-aligned inside the centered box */
  color:#595757;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight:400; /* Regular */
  font-size: clamp(10px, calc((12px * 100vw) / var(--design-w)), 12px);
  letter-spacing: clamp(0.1px, calc((0.6px * 100vw) / var(--design-w)), 0.6px);
  line-height: clamp(20px, calc((40px * 100vw) / var(--design-w)), 40px);
  /* Limit the width so the meta text doesn't exceed the image width at wide screens */
  max-width: clamp(var(--grid-item-img-w-min), calc((var(--grid-item-img-w-max) * 100vw) / var(--design-w)), var(--grid-item-img-w-max));
}

/* CTA H2 directly below the product grid
   - At 1920px the top margin should be 250px (controlled by --grid-cta-offset-max)
   - Scales down proportionally using the --design-w baseline */
.grid-cta{
  text-align:center;
  color:#595757;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight:400;
  margin:0 auto;
  margin-top: clamp(var(--grid-cta-offset-min), calc((var(--grid-cta-offset-max) * 100vw) / var(--design-w)), var(--grid-cta-offset-max));
  font-size: clamp(18px, calc((22px * 100vw) / var(--design-w)), 22px);
  line-height: clamp(24px, calc((32px * 100vw) / var(--design-w)), 32px);
}

@media (min-width:1920px){
  .grid-cta{ margin-top:var(--grid-cta-offset-max); font-size:22px; line-height:32px; }
}

/* Two-column text area below the grid CTA
   - At 1920px: width = 1200px, two columns 600px each, margin-top = 100px
   - Scales down proportionally using the --design-w baseline */
:root{
  --grid-text-offset-max:100px; /* distance from CTA to text area at 1920px */
  --grid-text-offset-min:24px;
  /* Increase container width to allow two 600px columns + 100px gap = 1300px at 1920px */
  --grid-text-width-max:1300px;
  --grid-text-width-min:280px;
  --grid-text-col-max:600px;
  --grid-text-col-min:260px;
  --grid-text-col-gap-max:100px; /* gap between the two columns at 1920px */
  --grid-text-col-gap-min:12px;
  --grid-text-font-size-max:18px;
  --grid-text-font-size-min:14px;
  --grid-text-letter-max:0.9px;
  --grid-text-letter-min:0.2px;
  --grid-text-line-max:40px;
  --grid-text-line-min:20px;
}

.grid-text-wrap{ text-align:center; }
.grid-text{
  width: clamp(var(--grid-text-width-min), calc((var(--grid-text-width-max) * 100vw) / var(--design-w)), var(--grid-text-width-max));
  margin: clamp(var(--grid-text-offset-min), calc((var(--grid-text-offset-max) * 100vw) / var(--design-w)), var(--grid-text-offset-max)) auto 0;
  box-sizing:border-box;
  display:flex;
  justify-content:center;
  gap: clamp(var(--grid-text-col-gap-min), calc((var(--grid-text-col-gap-max) * 100vw) / var(--design-w)), var(--grid-text-col-gap-max));
  flex-wrap:wrap; /* allow stacking on narrow viewports */
}
.grid-text .grid-text-col{
  /* Use flex-basis to fix each column width precisely and avoid inline-block whitespace issues */
  flex: 0 0 clamp(var(--grid-text-col-min), calc((var(--grid-text-col-max) * 100vw) / var(--design-w)), var(--grid-text-col-max));
  box-sizing:border-box;
}
.grid-text .grid-text-col p{
  margin:0;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight:400;
  font-size: clamp(var(--grid-text-font-size-min), calc((var(--grid-text-font-size-max) * 100vw) / var(--design-w)), var(--grid-text-font-size-max));
  letter-spacing: clamp(var(--grid-text-letter-min), calc((var(--grid-text-letter-max) * 100vw) / var(--design-w)), var(--grid-text-letter-max));
  line-height: clamp(var(--grid-text-line-min), calc((var(--grid-text-line-max) * 100vw) / var(--design-w)), var(--grid-text-line-max));
  text-align:center; /* center text inside each column as requested */
  color:#595757;
}

@media (min-width:1920px){
  .grid-text{ width: var(--grid-text-width-max); margin-top:var(--grid-text-offset-max); }
  .grid-text .grid-text-col{ width: var(--grid-text-col-max); }
  .grid-text .grid-text-col p{ font-size: var(--grid-text-font-size-max); letter-spacing: var(--grid-text-letter-max); line-height: var(--grid-text-line-max); }
}

/* Responsive stack on narrow viewports */
@media (max-width:767px){
  .grid-text{ width: calc(100% - 2rem); }
  .grid-text .grid-text-col{ display:block; width:100%; margin-bottom:1rem; }
}

/* Mobile: make .scent-text use the same centered container width as .product-grid
   so its left/right outer gutters match the grid on narrow viewports. */
@media (max-width:767px){
  .scent-text{
    width: clamp(var(--grid-width-min), calc((var(--grid-width-max) * 100vw) / var(--design-w)), var(--grid-width-max));
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding-left: 0.5rem; /* small breathing room on very narrow screens */
    padding-right: 0.5rem;
  }
}

/* Exact spacing at wide screens */
@media (min-width:1920px){
  .product-grid{ grid-template-columns: repeat(2, 1fr); margin-top: var(--grid-offset-max); gap: var(--grid-gap-max); width: var(--grid-width-max); }
  .product-grid .grid-item figcaption{ font-size:30px; letter-spacing:0.9px; line-height:36px; }
  .product-grid .grid-item img{ width: var(--grid-item-img-w-max); }
}

/* About page specific hero override
   - At design width 1920px the about hero image should be 1300px wide and centered
   - Scales proportionally below 1920px using the existing --design-w token */
.page-about .hero-visual img{
  display:block;
  margin:0 auto;
  height:auto;
  width: clamp(320px, calc((1300px * 100vw) / var(--design-w)), 1300px);
  max-width:100%;
  object-fit:cover;
}

/* Hero overlay centered text (about page) */
:root{
  --about-hero-overlay-font-max:48px;
  --about-hero-overlay-font-min:20px;
  --about-hero-overlay-letter-max:1px;
  --about-hero-overlay-letter-min:0.2px;
}

.page-about .hero-visual{ position:relative; }
.page-about .hero-visual .hero-overlay{
  position:absolute;
  inset:0; /* top:0; right:0; bottom:0; left:0; */
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  pointer-events:none; /* allow clicks through unless inner elements need interaction */
}
.page-about .hero-visual .hero-overlay-inner{
  max-width:90%;
  box-sizing:border-box;
}
.page-about .hero-overlay-title{
  margin:0;
  color:#FFFFFF;
  text-shadow:0 6px 18px rgba(0,0,0,0.6);
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight:300; /* Light */
  display:flex;
  align-items:baseline; /* align text baselines so bottoms match */
  justify-content:center;
  gap: clamp(8px, calc((18px * 100vw) / var(--design-w)), 18px);
  line-height: clamp(28px, calc((60px * 100vw) / var(--design-w)), 60px);
}

/* Overlay word sizes and letter-spacing (scale with viewport, exact at 1920px)
   - Major words ("Scent", "Earth"): 50px / 1.5px at 1920px
   - Connector (" from the "): 30px / 0.9px at 1920px */
:root{
  --overlay-major-size-max:50px;
  --overlay-major-size-min:20px;
  --overlay-major-letter-max:1.5px;
  --overlay-major-letter-min:0.2px;
  --overlay-connector-size-max:30px;
  --overlay-connector-size-min:14px;
  --overlay-connector-letter-max:0.9px;
  --overlay-connector-letter-min:0.2px;
  --overlay-line-max:60px;
  --overlay-line-min:28px;
}

.page-about .overlay-word.overlay-major{
  display:inline-block;
  font-size: clamp(var(--overlay-major-size-min), calc((var(--overlay-major-size-max) * 100vw) / var(--design-w)), var(--overlay-major-size-max));
  letter-spacing: clamp(var(--overlay-major-letter-min), calc((var(--overlay-major-letter-max) * 100vw) / var(--design-w)), var(--overlay-major-letter-max));
  line-height: clamp(var(--overlay-line-min), calc((var(--overlay-line-max) * 100vw) / var(--design-w)), var(--overlay-line-max));
  color:#FFFFFF;
  font-weight:300;
}

.page-about .overlay-connector{
  display:inline-block;
  font-size: clamp(var(--overlay-connector-size-min), calc((var(--overlay-connector-size-max) * 100vw) / var(--design-w)), var(--overlay-connector-size-max));
  letter-spacing: clamp(var(--overlay-connector-letter-min), calc((var(--overlay-connector-letter-max) * 100vw) / var(--design-w)), var(--overlay-connector-letter-max));
  line-height: clamp(var(--overlay-line-min), calc((var(--overlay-line-max) * 100vw) / var(--design-w)), var(--overlay-line-max));
  color:#FFFFFF;
  font-weight:300;
}

/* Ensure each span aligns to the same baseline inside the flex container */
.page-about .overlay-word.overlay-major,
.page-about .overlay-connector{
  align-self:baseline;
  vertical-align:baseline;
}

@media (min-width:1920px){
  .page-about .overlay-word.overlay-major{ font-size: var(--overlay-major-size-max); letter-spacing: var(--overlay-major-letter-max); }
  .page-about .overlay-connector{ font-size: var(--overlay-connector-size-max); letter-spacing: var(--overlay-connector-letter-max); }
  .page-about .hero-overlay-title{ line-height: var(--overlay-line-max); }
}

/* About page spacing: header -> h2 and h2 -> hero-visual
   - At 1920px: header to h2 = 250px, h2 to hero-visual = 100px
   - Scales proportionally below 1920px using the --design-w baseline */
.page-about .hero h2{
  margin-top: clamp(40px, calc((250px * 100vw) / var(--design-w)), 250px);
}

.page-about .hero-visual{
  /* space between the H2 and the hero visual */
  margin-top: clamp(16px, calc((100px * 100vw) / var(--design-w)), 100px);
}

@media (min-width:1920px){
  .page-about .hero h2{ margin-top: 250px; }
  .page-about .hero-visual{ margin-top: 100px; }
  .page-about .hero-visual img{ width: 1300px; }
}

/* Product page: header -> h2 spacing (250px at 1920px, scales down) */
.page-product .hero h2{
  margin-top: clamp(40px, calc((250px * 100vw) / var(--design-w)), 250px);
}

@media (min-width:1920px){
  .page-product .hero h2{ margin-top: 250px; }
}

/* Feature areas: three stacked blocks after .grid-text-wrap
   - At 1920px: top offset to first h2 = 250px; between h2->h3, h3->p, p->images = 50px
   - Each area has 250px vertical gap (margin-bottom) at 1920px
   - Typography scales with --design-w baseline using clamp()/calc() */
:root{
  --feature-area-offset-max:250px;
  --feature-area-offset-min:24px;
  --feature-sub-offset-max:50px;
  --feature-sub-offset-min:12px;

  --feature-h2-size-max:40px;
  --feature-h2-size-min:20px;
  --feature-h2-letter-max:1.2px;
  --feature-h2-letter-min:0.2px;
  --feature-h2-line-max:49px;
  --feature-h2-line-min:28px;

  --feature-h3-size-max:30px;
  --feature-h3-size-min:16px;
  --feature-h3-letter-max:0.9px;
  --feature-h3-letter-min:0.2px;
  --feature-h3-line-max:36px;
  --feature-h3-line-min:20px;

  --feature-p-size-max:18px;
  --feature-p-size-min:14px;
  --feature-p-letter-max:0.9px;
  --feature-p-letter-min:0.2px;
  --feature-p-line-max:40px;
  --feature-p-line-min:20px;

  /* image widths for 3 / 4 items per row at 1920px */
  --feature-img-4-max:300px; /* at 1920px, one image width for 4-up */
  --feature-img-3-max:400px; /* at 1920px, one image width for 3-up */
  --feature-img-min:120px;
  --feature-img-gap-4-max:30px; /* gap for 4-up at 1920px */
  --feature-img-gap-3-max:50px; /* gap for 3-up at 1920px */
  --feature-img-gap-min:12px;
}

.feature-areas{ width:100%; display:block; }
.feature-area{ box-sizing:border-box; width: clamp(320px, calc((var(--grid-text-width-max) * 100vw) / var(--design-w)), var(--grid-text-width-max)); margin:0 auto; padding:0; }

/* first h2: offset relative to the previous .grid-text-wrap (use margin-top on the first feature-area child) */
.feature-area:first-child{ margin-top: clamp(var(--feature-area-offset-min), calc((var(--feature-area-offset-max) * 100vw) / var(--design-w)), var(--feature-area-offset-max)); }

.feature-area h2{ margin:0 auto; text-align:center; font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; font-weight:300; color:#595757;
  font-size: clamp(var(--feature-h2-size-min), calc((var(--feature-h2-size-max) * 100vw) / var(--design-w)), var(--feature-h2-size-max));
  letter-spacing: clamp(var(--feature-h2-letter-min), calc((var(--feature-h2-letter-max) * 100vw) / var(--design-w)), var(--feature-h2-letter-max));
  line-height: clamp(var(--feature-h2-line-min), calc((var(--feature-h2-line-max) * 100vw) / var(--design-w)), var(--feature-h2-line-max));
}

.feature-area h3{ margin:0 auto; text-align:center; font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; font-weight:300; color:#595757;
  margin-top: clamp(var(--feature-sub-offset-min), calc((var(--feature-sub-offset-max) * 100vw) / var(--design-w)), var(--feature-sub-offset-max));
  font-size: clamp(var(--feature-h3-size-min), calc((var(--feature-h3-size-max) * 100vw) / var(--design-w)), var(--feature-h3-size-max));
  letter-spacing: clamp(var(--feature-h3-letter-min), calc((var(--feature-h3-letter-max) * 100vw) / var(--design-w)), var(--feature-h3-letter-max));
  line-height: clamp(var(--feature-h3-line-min), calc((var(--feature-h3-line-max) * 100vw) / var(--design-w)), var(--feature-h3-line-max));
}

.feature-area p{ margin:0 auto; text-align:center; font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; font-weight:400; color:#595757;
  margin-top: clamp(var(--feature-sub-offset-min), calc((var(--feature-sub-offset-max) * 100vw) / var(--design-w)), var(--feature-sub-offset-max));
  font-size: clamp(var(--feature-p-size-min), calc((var(--feature-p-size-max) * 100vw) / var(--design-w)), var(--feature-p-size-max));
  letter-spacing: clamp(var(--feature-p-letter-min), calc((var(--feature-p-letter-max) * 100vw) / var(--design-w)), var(--feature-p-letter-max));
  line-height: clamp(var(--feature-p-line-min), calc((var(--feature-p-line-max) * 100vw) / var(--design-w)), var(--feature-p-line-max));
  max-width:100%;
}

/* images area: gap and layout */
.area-images{ display:flex; justify-content:center; align-items:center; margin-top: clamp(var(--feature-sub-offset-min), calc((var(--feature-sub-offset-max) * 100vw) / var(--design-w)), var(--feature-sub-offset-max)); flex-wrap:wrap; }
.area-images .img-item{ display:block; margin:0; }

/* images-4: 4 items across — image width 300px, gap 30px at 1920px */
.area-images.images-4{ gap: clamp(var(--feature-img-gap-min), calc((var(--feature-img-gap-4-max) * 100vw) / var(--design-w)), var(--feature-img-gap-4-max)); }
.area-images.images-4 .img-item img{ display:block; width: clamp(var(--feature-img-min), calc((var(--feature-img-4-max) * 100vw) / var(--design-w)), var(--feature-img-4-max)); height:auto; object-fit:cover; }

/* images-3: 3 items across — image width 400px, gap 50px at 1920px */
.area-images.images-3{ gap: clamp(var(--feature-img-gap-min), calc((var(--feature-img-gap-3-max) * 100vw) / var(--design-w)), var(--feature-img-gap-3-max)); }
.area-images.images-3 .img-item img{ display:block; width: clamp(var(--feature-img-min), calc((var(--feature-img-3-max) * 100vw) / var(--design-w)), var(--feature-img-3-max)); height:auto; object-fit:cover; }

/* area spacing between blocks */
.feature-area{ margin-bottom: clamp(var(--feature-area-offset-min), calc((var(--feature-area-offset-max) * 100vw) / var(--design-w)), var(--feature-area-offset-max)); }

@media (min-width:1920px){
  .feature-area:first-child{ margin-top: var(--feature-area-offset-max); }
  .feature-area{ margin-bottom: var(--feature-area-offset-max); }
  .feature-area h2{ font-size: var(--feature-h2-size-max); letter-spacing: var(--feature-h2-letter-max); line-height: var(--feature-h2-line-max); }
  .feature-area h3{ margin-top: var(--feature-sub-offset-max); font-size: var(--feature-h3-size-max); letter-spacing: var(--feature-h3-letter-max); line-height: var(--feature-h3-line-max); }
  .feature-area p{ margin-top: var(--feature-sub-offset-max); font-size: var(--feature-p-size-max); letter-spacing: var(--feature-p-letter-max); line-height: var(--feature-p-line-max); }
  .area-images{ margin-top: var(--feature-sub-offset-max); }
  .area-images .img-item img{ height:auto; }
}

/* ensure last area also leaves 250px before footer (footer already has its own margin, but enforce here too) */
.feature-area:last-child{ margin-bottom: clamp(var(--feature-area-offset-min), calc((var(--feature-area-offset-max) * 100vw) / var(--design-w)), var(--feature-area-offset-max)); }

/* Footer layout and spacing tokens
   - Space between .grid-text-wrap and footer: 250px at 1920px
   - Footer padding-top: 100px at 1920px (logo area)
   - Footer background color: #F8F8F8
   - Footer logo uses same scaling as .center-menu img */
:root{
  --footer-gap-max:250px;
  --footer-gap-min:40px;
  --footer-pt-max:100px;
  --footer-pt-min:40px;
  /* Footer nav positioning and gap (nav placed below footer logo) */
  --footer-nav-offset-max:70px; /* distance from logo bottom to nav at 1920px */
  --footer-nav-offset-min:12px;
  --footer-nav-li-gap-max:80px; /* li gap at 1920px */
  --footer-nav-li-gap-min:12px;
  --footer-nav-col-gap-max:80px; /* gap between left/center and center/right at 1920px */
  --footer-nav-col-gap-min:12px;
  /* gap between nav and p (copyright) */
  --footer-nav-p-gap-max:70px;
  --footer-nav-p-gap-min:12px;
  /* gap from p to bottom of viewport */
  --footer-btm-gap-max:99px;
  --footer-btm-gap-min:24px;
  /* footer copyright p top margin (nav -> p gap override) */
  --footer-p-top-max:70px;
  --footer-p-top-min:12px;
}

footer{
  background:#F8F8F8;
  margin-top: clamp(var(--footer-gap-min), calc((var(--footer-gap-max) * 100vw) / var(--design-w)), var(--footer-gap-max));
  padding-top: clamp(var(--footer-pt-min), calc((var(--footer-pt-max) * 100vw) / var(--design-w)), var(--footer-pt-max));
  padding-bottom: clamp(var(--footer-btm-gap-min), calc((var(--footer-btm-gap-max) * 100vw) / var(--design-w)), var(--footer-btm-gap-max));
  text-align:center;
  color:#666;
}

/* Footer copyright paragraph: remove default margins and set responsive top gap */
footer > p{
  margin:0; /* remove default paragraph margins as requested */
  margin-top: clamp(var(--footer-p-top-min), calc((var(--footer-p-top-max) * 100vw) / var(--design-w)), var(--footer-p-top-max));
  color:#666;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight:400;
}

.footer-logo{ width:100%; text-align:center; }
.footer-logo img{
  display:block;
  margin:0 auto;
  width: clamp(var(--logo-w-min), calc((var(--logo-w-max) * 100vw) / var(--design-w)), var(--logo-w-max));
  max-width:100%;
  height:auto;
}

/* Footer navigation (combined left/right menus) */
.footer-nav{
  margin-top: clamp(var(--footer-nav-offset-min), calc((var(--footer-nav-offset-max) * 100vw) / var(--design-w)), var(--footer-nav-offset-max));
}
.footer-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  justify-content:flex-start;
  gap: clamp(var(--footer-nav-li-gap-min), calc((var(--footer-nav-li-gap-max) * 100vw) / var(--design-w)), var(--footer-nav-li-gap-max));
}
.footer-nav li{ margin:0; }
.footer-nav a{
  color:#595757;
  text-decoration:none;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight:400;
  font-size: clamp(var(--font-size-min), calc((var(--font-size-max) * 100vw) / var(--design-w)), var(--font-size-max));
  line-height: clamp(var(--line-height-min), calc((var(--line-height-max) * 100vw) / var(--design-w)), var(--line-height-max));
  letter-spacing: clamp(var(--letter-spacing-min), calc((var(--letter-spacing-max) * 100vw) / var(--design-w)), var(--letter-spacing-max));
  display:inline-block;
}

@media (min-width:1920px){
  .footer-nav ul{ gap: var(--footer-nav-li-gap-max); }
  .footer-nav{ margin-top: var(--footer-nav-offset-max); }
}

/* Layout for split footer nav so the 3rd item sits centered */
.footer-nav{
  display:grid;
  grid-template-columns: 1fr auto 1fr; /* left group / center item / right group */
  align-items:center;
  justify-items:center;
  column-gap: clamp(var(--footer-nav-col-gap-min), calc((var(--footer-nav-col-gap-max) * 100vw) / var(--design-w)), var(--footer-nav-col-gap-max));
  margin-bottom: clamp(var(--footer-nav-p-gap-min), calc((var(--footer-nav-p-gap-max) * 100vw) / var(--design-w)), var(--footer-nav-p-gap-max));
}
.footer-nav-left ul,
.footer-nav-right ul{
  display:flex;
  gap: clamp(var(--footer-nav-li-gap-min), calc((var(--footer-nav-li-gap-max) * 100vw) / var(--design-w)), var(--footer-nav-li-gap-max));
}
.footer-nav-left{ justify-self:end; }
.footer-nav-left ul{ justify-content:flex-end; }
.footer-nav-right{ justify-self:start; }
.footer-nav-right ul{ justify-content:flex-start; }
.footer-nav-center{
  justify-self:center;
}

@media (max-width:767px){
  /* Stack the three footer columns vertically in a predictable order
     and ensure each column centers its content on narrow viewports. */
  .footer-nav{
    display:flex; /* switch to flex for predictable ordering */
    flex-direction:column;
    align-items:center;
    gap:12px;
    grid-template-columns: none; /* clear any grid template set earlier */
  }

  /* Explicit ordering to guarantee left -> center -> right vertical flow */
  .footer-nav-left{ order: 1; width:100%; display:flex; justify-content:center; }
  .footer-nav-center{ order: 2; width:100%; display:flex; justify-content:center; }
  .footer-nav-right{ order: 3; width:100%; display:flex; justify-content:center; }

  /* Ensure inner lists are stacked vertically and centered */
  .footer-nav-left ul,
  .footer-nav-right ul{
    display:flex !important;
    flex-direction:column !important;
    gap:8px;
    align-items:center;
    padding:0;
    margin:0;
  }
}

/* Responsive column counts: keep 2 columns by default, collapse to 1 on very small screens */
@media (max-width:480px){ .product-grid{ grid-template-columns: 1fr; } }


/* Removed: earlier override that forced lineup-4 to 3 columns between 769–1199px.
   lineup-4 will now keep 4 columns for all sizes >=768px and only change
   when mobile rules (<=767px) apply. */

/* Product-more placement rules
   - Default: product-more remains in-flow and centered (fallback)
   - When JS detects an incomplete last row, it adds `.has-incomplete-row` and
     moves the .product-more element into the `.block-lineup`. For desktop
     viewports we absolutely position the button in the block's bottom-right
     so it visually overlays the bottom-right figcaption area from above. */
.block-lineup{ position: relative; }

.block-lineup .product-more,
.page-product .block-lineup .product-more{ 
  position: static; /* default: in-flow */
  display: inline-block;
  margin-top: clamp(16px, calc((24px * 100vw) / var(--design-w)), 24px);
}

@media (min-width:768px){
  .block-lineup.has-incomplete-row{ padding-bottom: clamp(32px, calc((48px * 100vw) / var(--design-w)), 48px); }

  .block-lineup.has-incomplete-row .product-more{
    position: absolute !important;
    right: clamp(12px, calc((40px * 100vw) / var(--design-w)), 40px);
    bottom: clamp(6px, calc((24px * 100vw) / var(--design-w)), 24px) !important;
    transform: none !important;
    z-index: 30 !important;
    /* keep background but remove visual chrome unless specified */
    background: transparent !important;
    padding: clamp(6px, calc((8px * 100vw) / var(--design-w)), 8px) clamp(8px, calc((12px * 100vw) / var(--design-w)), 12px) !important;
    box-shadow: none !important;
    text-align: right !important;
    white-space: nowrap !important;
    border-radius: 0 !important;
  }

  .block-lineup .product-more.moved-into-block{ display:inline-block; }
}

/* Stronger override to beat the earlier .page-product .block-lineup .product-more rule
   when the block is flagged as having an incomplete row. This selector includes
   the .page-product context and the .has-incomplete-row modifier and uses
   !important so it overrides static positioning enforced elsewhere. */
@media (min-width:768px){
  .page-product .block-lineup.has-incomplete-row .product-more{
    position: absolute !important;
    right: clamp(12px, calc((40px * 100vw) / var(--design-w)), 40px) !important;
    bottom: clamp(6px, calc((24px * 100vw) / var(--design-w)), 24px) !important;
    display: inline-block !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    z-index: 30 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0.5rem 0.75rem !important;
    margin: 0 !important;
  }
}

/* At design width 1920px place the overlay 50px above the bottom of the block */
@media (min-width:1920px){
  .page-product .block-lineup.has-incomplete-row .product-more{
    bottom: 50px !important;
  }
}