/* #region Global */
  body, h1, h2, h3, h4, h5, h6,[type="color"], [type="date"], [type="datetime-local"], [type="datetime"], [type="email"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea, .button{font-family: 'Open Sans', sans-serif;}
  h1, h2, h3, h4, h5, h6{font-weight: 600;}
  a{color: #0a0a0a;}
  a:hover, a:focus{color: #000;}

  /* Chrome, Safari, Edge, Opera */
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* Firefox */
  input[type=number] {
    -moz-appearance: textfield;
  }

  .padding-top-2{padding-top: 2rem!important;}
  .padding-top-3{padding-top: 3rem!important;}
  .padding-bottom-2{padding-bottom: 2rem!important;}
  .padding-bottom-3{padding-bottom: 3rem!important;}
  .margin-top-1{margin-top: 1rem!important;}
  .margin-top-2{margin-top: 2rem!important;}
  .margin-top-3{margin-top: 3rem!important;}
  .margin-bottom-0{margin-bottom: 0!important;}
  .margin-bottom-1{margin-bottom: 1rem!important;}
  .margin-bottom-2{margin-bottom: 2rem!important;}
  .margin-bottom-3{margin-bottom: 3rem!important;}
  .mb-0{margin-bottom: 0px;}
  .mb-10{margin-bottom: 10px;}
  .mb-20{margin-bottom: 20px;}
  .ml-20{margin-left: 20px;}
  .mt-20{margin-top: 20px;}
  .margin-right-0{margin-right: 0!important;}
  .margin-right-1{margin-right: 1rem!important;}
  .margin-right-2{margin-right: 2rem!important;}
  .margin-right-3{margin-right: 3rem!important;}
  .font-weight-bold{font-weight: 700!important;}

  .table-scroll table{width: 100%;}

  .text-gray{color: #777;}
  
  .h4{font-size: 1.5rem;}
/* #endregion */

/* #region Header */
  .navbar{border-bottom:1px solid #ddd;padding:30px 1rem;}
  .navbar a{color: #0a0a0a;}
  .navbar-logo{font-size: 2rem;font-weight: 600;}
  .menu-left{margin-left: -1rem;}
  .menu-left a{padding-top:.75rem;padding-bottom: .75rem;}
  .social{margin-right: -1rem;}
  .social a{padding-top:.5rem;padding-bottom: .5rem;}
  .icon>svg{width: 1.60rem;height:1.60rem;display: block;}
  .icon-cart{position: relative;}
  .icon-cart-quantity{position: absolute;display: block;font-family: inherit;top:0px;right:.25rem;min-width: 1em;font-size: 10px;padding: .5em;text-align: right;line-height: 1em;}
  .title-bar{background: transparent;}
  
  .burger {
    position: relative;
    display: block;
    cursor: pointer;
    background-color: transparent;
    border: none;
    padding:0;
    margin-left: -.625rem;
  }
  .burger-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
  }
  .burger-inner {
    width: 100%;
    height: 100%;
  }
  .burger-inner .top-bun, .burger-inner .patty, .burger-inner .bottom-bun {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    content: '';
    width: 100%;
    height: 1px;
    transition: transform 250ms cubic-bezier(.2,.6,.3,1),width 250ms cubic-bezier(.2,.6,.3,1);
    will-change: transform,width;
    background-color: #000;
  }
  .burger-inner .top-bun {
    transform: translatey(-5.5px);
  }
  .burger-inner .patty {
    transform: scale(0);
  }
  .burger-inner .bottom-bun {
    transform: translatey(5.5px);
  }
  .menu-open .burger-inner .top-bun {
    transform: translatex(3.5px) rotate(-135deg);
    width: 28px;
  }
  .menu-open .burger-inner .bottom-bun {
    transform: translatex(3.5px) rotate(135deg);
    width: 28px;
  }

  .navbar-mobile{
    position: fixed;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    top: 109px;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    will-change: opacity,visibility;
    user-select: none;
    text-align: center;
    pointer-events: auto;
    background-color: #fff;
    transition: visibility 600ms cubic-bezier(.4,0,.2,1), opacity 400ms cubic-bezier(.4,0,.2,1);
  }
  .navbar-mobile-inner{
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    max-height: 100%;
    justify-content: flex-start;
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    flex-direction: column;
  }
  .navbar-mobile-top {
    position: relative;
    display: flex;
    width: 100%;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: center;
    flex-direction: column;
  }
  .navbar-mobile-top .menu a{font-size: 2rem;}
  .navbar-mobile-top .menu li{margin:10px 0;}
  .navbar-mobile-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 20px;
    flex-grow: 0;
    flex-shrink: 1;
    margin-bottom: 6vw;
  }
  
/* #endregion */

/* #region Footer */
  .copy{margin-top: 1rem;}
/* #endregion */

/* #region Products */
.item a{display: block;color: #0a0a0a;margin-bottom: 1.875rem;}
.item-img img{width:100%;}
.item-desc{padding-top: 16px;}
.item-desc .name{font-size: 20px;font-weight: 600;}

.item-info .name{margin-bottom: 1rem;}
.item-info .name h1{font-size: 2.5rem;}
.item-info .name span{display: block;font-size: 50%;}
.item-info .price{font-size: 1.6rem;font-weight: 600;margin-bottom: 1.5rem;}
.related-item .price{font-size:1.0rem;font-weight:normal;}
.price{margin-bottom:5px;}
.original_price{font-size: 85%;text-decoration:line-through;color:red;margin-right:10px;vertical-align:middle;}
.discount_percent{border:solid 1px gray;color:red;border-radius:3px;padding:3px;font-size:85%;vertical-align:middle;margin-left:10px;display: inline-block;}
.price .original_price, .price .discount_percent{font-size: 80%;}

.is_sale{color:green;}
.item-info .price .original_price, .item-info .price .discount_percent{font-size: 50%;}
.item-info .related-item .price .original_price, .item-info .related-item .price .discount_percent{font-size:70%;}
.item-info .description{margin-bottom: 1.5rem;}
.size_name{margin-right:20px;}
.item-info .remaining{margin-left:20px;}

.product-image{display: block;margin-bottom: 10px;}
.product-image img{width: 100%;}
.more-item-images{width: 80px;}
.more-image-item{margin-bottom: 10px;cursor: pointer;}
.lb-data .lb-close{background-size: contain!important;}

.go_back a{display: inline-block;line-height: 1.5;font-weight: 600;}
.col-item{min-width: 200px;}
.col-item .thumbnail{width: 84px;}
.col-item .thumbnail a{display: block;}
.col-item .thumbnail img{max-width: 100%;}
.col-item h5{font-weight: 600;}
.table-cart tbody tr:nth-child(2n){background-color: #fff;border-top:1px solid #f1f1f1;}

.card-section iframe{width: calc(100vw - 55px);}
/* #endregion */

h3.shipping-message{
  text-align: center;
  color: blue;
  font-size: 1.2rem;
  margin-bottom: 20px;
  padding: 8px;
}

.quantity_and_add_to_cart{
  display: flex;
  flex-direction: row;
}

.quantity-func{
  display: flex;
  flex-direction: row;
  margin-right: 20px;
}

.quantity-func input, .quantity-func button{
  height: 40px;
  margin-bottom: 0;
}

.checkout .quantity-func input, .checkout .quantity-func button{
  height: 30px;
}

.quantity-func .button.secondary{
  width: 30px;
  padding: 0;
  background-color: #EEE;
  color: black
}

.quantity-func input[type=number]{
  text-align: center;
  width: 45px;
}

.checkout .quantity-func{
  margin-right: 0;
}

.quantity_and_add_to_cart .add_to_cart{
  flex: 1;
}

.page-shop-item{
  overflow-x: hidden;
}

.line-bottom{
  border-bottom: 1px solid rgba(0,0,0,.1);
}

.line-top{
  border-top: 1px solid rgba(0,0,0,.1);
}

.page-checkout .already-have-account{align-items: center;display: flex;margin-left: 20px;}
.page-checkout .already-have-account a{margin-left: 10px;}

.mask{position:fixed;top:10px;right:10px;}
.page-checkout .already-have-account.new-line{flex: 0 0 auto;margin-left: 0;margin-top: 10px;width:100%;}
.page-checkout .already-have-account.new-line a{display:inline-block;;margin-left: 10px;}

#added_item_msg .l1{
  color: #007FFF;
  font-size: 22px;
  font-weight: 600;
}

#added_item_msg .l2{
  font-size: 20px;
  font-weight: 600;
}



.departments {
  position: relative;
  margin-bottom: 20px;
}

.departments .swiper {
  width: 100%;
  height: 200px;
}

.departments .swiper-slide {
  text-align: center;
  /*font-size: 18px;*/
  background: #f5f2ef; /* warm off-white (was cool #f3f5f6) */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 150px;
  border-radius: 3px;
  /* Positioning context for the stretched-link ::after below + smooth
     hover. */
  position: relative;
  transition: background 0.15s ease;
}

/* Subtle hover affordance — the whole chip now feels like a button. */
.departments .swiper-slide:hover { background: #ece7e1; }

/* Stretched-link pattern: the image anchor's ::after fills the entire
   slide, so a click on any of the empty padding around the image and
   text label still navigates. The text label sits above this overlay
   via z-index and remains separately clickable. */
.departments .swiper-slide a.img::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.departments .swiper-slide a.img {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.departments .swiper-slide img {
  display: block;
  width: auto;
  height: auto;
  object-fit: cover;
  margin-top: 0px;
  margin-bottom: auto;
  margin-left: auto;
  margin-right: auto;
}

.departments .swiper-slide div.text {
  margin-top: 10px;
  height: 30px;
  /* Above the stretched-link ::after so the text label stays
     independently clickable (selectable text, etc.). */
  position: relative;
  z-index: 2;
}

/* Category label: same warm near-black as --ink-anchor (product name +
   price); literal hex because that custom property is scoped to .item.
   500 weight / Title Case / 16px — calm, on-palette navigation,
   replaces the inherited harsh #0a0a0a. */
.departments .swiper-slide div.text a {
  color: #1f1c1a;
  font-weight: 500;
  font-size: 16px;
}

@media only screen and (min-width: 698px){
  .swiper-wrapper{justify-content: center;}
  .swiper-wrapper .swiper-slide{margin-right:30px;}
  .swiper-wrapper .swiper-slide:last-child{margin-right: 0 !important;}  
}
@media only screen and (max-width: 697px){
  .departments .swiper{height: 220px;}
  .departments .swiper-slide div.text{flex: 1;height: auto;}
}

@media only screen and (min-width: 1024px){
	.departments .swiper-button-prev{
		left: -40px;
	}
	.departments .swiper-button-next{
		right: -50px;
	}
}

/* #region Media Query */
@media screen and (max-width: 63.9375em) {
  .menu-open{height: 100%;overflow: hidden;}
  .menu-open .navbar-mobile {
    opacity: 1;
    visibility: visible;
  }

  .item-info .name h1{font-size: 2rem;}
  .more-item-images{display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;margin-left:-5px;margin-right: -5px;width: 100%;}
  .more-image-item{padding-left: 5px;padding-right: 5px;}
}
@media screen and (max-width: 39.9375em) {
  .navbar{padding: 1rem 1rem;border-bottom: none;}
  .navbar-logo{font-size: 1.5rem;}
  .navbar-mobile{top:126px}
  .col-item .thumbnail{width: 50px;}
  .navbar .text-gray{font-size:0.78rem;}
  .main-nav .cell.auto:first-child{position:absolute;top:20px;left:15px;}
  .main-nav .cell.auto:last-child{position:absolute;top:20px;right:15px;}
  .main-nav .cell.shrink{width:100%;}
  .page-checkout .already-have-account{align-items: center;display: inline-block;}
  .page-checkout .already-have-account a{display:block;margin-left: 0;}
}

@media screen and (min-width: 39.9376em) {
  .main-nav{margin-bottom: 30px;}
}


@media only screen and (min-width: 1024px){
	body.page-shop-item{
		display: flex;
    height: 100vh;
    flex-direction: column;
	}

  body.page-shop-item .product-image{
    margin-bottom: 0;
  }

  body.page-shop-item .desktop .col-image img{
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  body.page-shop-item main{
    flex: 1;
    height: 100vh;
  }

  body.page-shop-item .desktop{
    display: flex;
    flex-direction: row;
  }

  body.page-shop-item .desktop .col-image img{
    width: 100vh;
  }

  .col-image{
    flex: 1;
  }

  .col-content{
    flex: 1;
    padding: 0 20px;
  }

  .col-content .other_items > div{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
  }

  .col-content .other_items .item{
    margin: 10px;
    text-align: center;
  }

  .col-content .other_items img{
    width: 150px;
    height: 150px;  
  }

	body.page-shop-item .mobile{
		display: none;
	}  

  h3.shipping-message{
    height: 44px;
  }
}

@media only screen and (max-width: 1023px){
	body.page-shop-item .desktop{
		display: none;
	}
  h3.shipping-message{
    margin-top: 20px;
  }
}
@media only screen and (max-width: 450px){
	.jconfirm-box{
		width: 100% !important;
	}
}
/* #endregion */
input.error:has(+ label.error){
  margin-bottom: 3px;
}
label.error{
  color:red;
  margin-bottom: 10px;
}
.hide-error label.error{display:none !important;}
.hide-error input.error,select.error{background-color:#fff3d9;}
.accordion-item a{font-size: .875rem;}
.exceed-number-of-stock{
	color: red;
}
.mt-10{margin-top:10px;}
span.required{
  color: red;
  margin-left: 5px;
}
.banner-container {
    background-color: #f9f9f9; /* Off-white background from image */
    border: none;
    padding: 3rem 1rem;
    text-align: center;
}
.banner-text {
    color: #555555;
    margin: 0 auto;
    line-height: 1.6;
    font-size: 1.1rem;
}
/* Detail-page Add-to-Cart button success state.
   Button keeps its natural height; the confirmation overlays content below. */
.add_to_cart { position: relative; }
.add_to_cart.added {
  background-color: #f0faf0 !important;
  color: transparent !important;   /* hide the residual button text */
  cursor: default;
}
/* The button is disabled while the confirmation shows (blocks re-submit),
   but Foundation's .button fades :disabled to ~0.25 opacity, and parent
   opacity clamps the whole subtree — including the absolutely-positioned
   .atc-overlay. Force the success state fully opaque. (The homepage path
   renders into a plain <div> size-row, so it's unaffected by this.) */
.add_to_cart.added,
.add_to_cart.added:disabled,
.add_to_cart.added[disabled] {
  opacity: 1 !important;
}
.add_to_cart.added .atc-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #f0faf0;
  color: #2c3e2d;
  text-align: center;
  padding: 10px 12px;
  line-height: 1.35;
  white-space: normal;
  box-sizing: border-box;
  z-index: 5;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
  pointer-events: none;
}
.add_to_cart.added .atc-head {
  display: block;
  color: #4a9e6a;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.4px;
  text-transform: none;
}
.add_to_cart.added .atc-ship {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: #2c3e2d;
  margin-top: 3px;
  animation: atcShipIn 0.18s ease-out;
}

/* ── Homepage add-to-cart size rows (ported from DedicatedCraft) ── */
/* Clamp product names to 2 lines so size-rows align across cards */
.item .item-desc .name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
  line-height: 1.35;
}
.item .item-desc .name a { display: block; margin-bottom: 0; }

.item .size-list { margin-top: 6px; }
.item .size-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 12px; min-height: 44px; cursor: pointer;
  transition: background 0.15s ease; text-align: left;
  border-top: 1px solid #f0f0f0; position: relative;
}
.item .size-row:last-child { border-bottom: 1px solid #f0f0f0; }
.item .size-row:hover { background: #d0d0d0; border-color: #d0d0d0; }
.item .size-row:active { background: #bbb; }

.item .size-label { font-size: 14px; color: #0a0a0a; font-weight: 400; }
.item .size-price {
  font-size: 14px; color: #777;
  font-variant-numeric: tabular-nums;
  min-width: 50px; text-align: right;
  display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end;
}

/* atc-label only appears in the .added state (in-row confirmation, no toast) */
.item .size-row .atc-label { display: none; }
@media (hover: hover) {
  .item .size-row:hover .size-label { color: #0a0a0a; font-weight: 600; }
  .item .size-row:hover .size-price { color: #333; }
}

.item .size-row.added { background: #f0faf0; }
/* hide-but-keep so the row's natural height doesn't change */
.item .size-row.added .size-label,
.item .size-row.added .size-price { visibility: hidden; }
/* the confirmation overlays whatever's below the row instead of pushing it down */
.item .size-row.added .atc-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  min-height: 100%;
  z-index: 10;
  background: #f0faf0;
  text-align: center;
  padding: 8px 10px;
  color: #2c3e2d;
  line-height: 1.35;
  white-space: normal;
  box-sizing: border-box;
  /* allow natural downward growth when 2 lines */
  bottom: auto;
  /* slight shadow so it reads as floating over content below */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
  pointer-events: none;
}
.item .size-row.added .atc-label .atc-head {
  display: block;
  color: #4a9e6a;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.4px;
}
.item .size-row.added .atc-label .atc-ship {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: #2c3e2d;
  margin-top: 3px;
  animation: atcShipIn 0.18s ease-out;
}
@keyframes atcShipIn {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Sale styling inside size-row: strike-through original, green now, % chip */
.item .size-price .was {
  color: #9ca3af; text-decoration: line-through;
  font-size: 12px; font-weight: 500;
}
.item .size-row.sale .size-price .now { color: #27ae60; font-weight: 800; }
.item .size-price .chip {
  display: inline-block; background: #27ae60; color: #fff;
  font-size: 10px; font-weight: 700; padding: 2px 6px;
  border-radius: 3px; letter-spacing: 0.4px;
}
.item .size-price .save { display: none; }

/* #region Homepage category dividers */
/* Full-width row break naming the category being entered as the shopper
   scrolls the product grid. Server-rendered (no flicker / layout shift);
   the reveal is layered on by an IntersectionObserver in index.php. */
.category-divider {
  display: flex;
  align-items: center;
  gap: 18px;
  /* Generous vertical air so the section break reads as a deliberate
     pause — the whitespace does the delineating, the label just anchors
     it (kept intentionally quiet per the design brief). */
  margin: 54px 0 34px;
}

.category-divider .cd-rule {
  flex: 1;
  height: 1px;
  background: #ececec;
}
.category-divider .cd-label {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #8a8a8a;
  white-space: nowrap;
}

/* Reveal: only the JS-armed state is hidden, so without JS the dividers
   simply render visible (progressive enhancement, no FOUC). */
.category-divider.cd-armed {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.55s cubic-bezier(.2,.7,.3,1),
              transform 0.55s cubic-bezier(.2,.7,.3,1);
}
.category-divider.cd-armed.cd-in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .category-divider.cd-armed {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@media only screen and (max-width: 697px) {
  .category-divider { gap: 12px; margin: 40px 0 24px; }
  .category-divider .cd-label { font-size: 12px; letter-spacing: 1.5px; }
}
/* #endregion */

/* #region Homepage product-grid type hierarchy */
/* "Balanced peers": product name and price are co-equal anchors (same
   warm near-black, weight 700); everything else recedes so whitespace
   and those two anchors carry the structure. Tuned for a return-shopper
   "trusted private storefront" — strain name leads the re-find scan,
   price stays equally clear for purchase confidence, surface stays calm
   (no loud single element). Warm near-blacks replace the harsh
   pure-black (#0a0a0a). Scoped to .item, layered last so it overrides
   the ported size-row block without touching it — easy to tune/revert. */
/* Tokens (--ink-anchor / --ink-body / --ink-soft / --ink-faint) are now
   defined at :root — see the site-wide region near the end of the file. */

.item a { color: var(--ink-body); }

/* Name and price are true co-equal peers: same tone, same weight (650).
   650 needs the variable wght axis loaded in header.php — with static
   faces it would snap to 700. */
.item .item-desc .name { color: var(--ink-anchor); font-weight: 650; }
.item .size-price      { color: var(--ink-anchor); font-weight: 650; }

.item .size-price .arrow { color: var(--ink-faint); font-weight: 400; }
.item .size-price .was   { color: var(--ink-soft); }

/* Size label recedes hard — the quiet support tier. */
.item .size-label { color: var(--ink-soft); }

/* Sale price stays green — an established, high-clarity sale signal,
   bold (800) so a discount still reads at a glance. (Flag: switch to
   var(--ink-anchor) if you'd rather all prices be one dark tier.) */
.item .size-row.sale .size-price .now { color: #27ae60; font-weight: 800; }

/* Hover reinforces the resting hierarchy, never inverts it (the old
   ported rules lightened the price to #333 on hover). */
@media (hover: hover) {
  .item .size-row:hover .size-label { color: var(--ink-anchor); font-weight: 600; }
  .item .size-row:hover .size-price { color: var(--ink-anchor); }
}
/* #endregion */

/* #region Age gate (#confirmAge) */
/* Foundation's .reveal goes full-screen on small screens (no size class
   on the markup) and pops in abruptly. Scope all of this to #confirmAge
   so other modals are untouched. #confirmAge.reveal (1,1,0) outranks
   Foundation's .reveal (0,1,0) at every breakpoint, so no !important
   needed for the box itself. */
#confirmAge.reveal{
  width: 90%;
  max-width: 380px;
  min-height: 0;
  height: auto;
  margin: 0 auto;
  padding: 1.75rem 1.5rem;
  border: none;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
  animation: ageGateIn 0.32s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes ageGateIn{
  from{ opacity: 0; transform: translateY(14px) scale(.96); }
  to  { opacity: 1; transform: translateY(0)    scale(1);  }
}
/* Shared Foundation backdrop — soft fade-in instead of an instant cut.
   #confirmAge is the only Foundation 6 .reveal on the site; a 0.3s
   opacity fade is harmless to any future one. */
.reveal-overlay{ animation: ageGateOverlayIn 0.32s ease both; }
@keyframes ageGateOverlayIn{ from{ opacity: 0; } to{ opacity: 1; } }

#confirmAge .text-center > h4{ font-size: 1.3rem; margin: 0 0 .5rem; }
#confirmAge .text-center > p{
  font-size: .95rem;
  line-height: 1.5;
  color: #444;
  margin: 0 auto 1.5rem;
  max-width: 30rem;
}
#confirmAge #btnConfirmAge,
#confirmAge .text-center > a.button{ min-width: 110px; margin-bottom: 0; }

@media screen and (max-width: 39.9375em){
  #confirmAge.reveal{
    width: calc(100% - 2rem);
    max-width: 360px;
    padding: 1.5rem 1.25rem;
  }
  /* Stack Yes/No full-width with comfortable tap targets; override the
     .margin-right-1/.margin-left-1 !important utilities on the buttons. */
  #confirmAge #btnConfirmAge{
    display: block;
    width: 100%;
    margin: 0 0 .625rem !important;
  }
  #confirmAge .text-center > a.button{
    display: block;
    width: 100%;
    margin: 0 !important;
  }
}
/* #endregion */

/* #region Homepage card spacing */
/* Redistribute vertical air around each product card so image + name +
   prices read as one tight group, with a deliberate break between
   cards (Law of Proximity). The previous 30px image margin-bottom +
   16px .item-desc padding-top (≈46px gap between image and name)
   weakened image↔name pairing at every breakpoint; combined with
   Foundation's zero default row gap, row 2's images then butted
   directly under row 1's last price row on desktop.

   All three rules below apply universally — one rule for each gap:
     · between cards (row-to-row on desktop, stacked on mobile)
     · between image and its own name
     · the bottom of .item-desc (eliminate stray buffer)
   The fourth rule (mobile-only name min-height: 0) is the only
   genuinely breakpoint-specific behaviour, since the 2.7em buffer
   exists to align size-rows across a desktop row — irrelevant when
   stacked. */

.item               { margin-bottom: 48px; }   /* card → card, every breakpoint */
/* image → its own name: 10 px gap, but inside the <a> (padding, not
   margin) so the gap itself is part of the link's hit area. Same
   visual; clicking anywhere in the gap navigates to the PDP. */
.item .item-img > a { margin-bottom: 0; padding-bottom: 10px; }
.item .item-desc    { padding-top: 0; }

@media only screen and (max-width: 697px) {
  /* 1-line names sit flush against the first size row instead of
     leaving an empty half-line below. */
  .item .item-desc .name { min-height: 0; }

  /* Mobile gets more card-to-card breathing room than desktop
     (60 vs 48 px) — enough to nudge each stacked card into "distinct
     unit" territory without changing the desktop row gap. */
  .item { margin-bottom: 60px; }
}
/* #endregion */

/* #region Global type tokens & site-wide warm-palette rollout */
/* Single source of truth for the warm near-black palette. The homepage
   product grid was the first surface to adopt these (via .item-scoped
   custom properties); promoting them to :root makes every page
   consistent — wordmark, tagline, nav, body copy, headings, all
   anchors. The pre-rolled global rules at the top of the file
   (a{color:#0a0a0a}, .navbar a{...}, .text-gray{color:#777}) stay in
   place as fallbacks; the rules in this region override them at equal
   specificity by source order. */
:root {
  --ink-anchor: #1f1c1a; /* primary text — wordmark, links, headings */
  --ink-body:   #2a2826; /* softened body / paragraph base */
  --ink-soft:   #767069; /* secondary text (.text-gray, etc.) — AA @14px */
  --ink-faint:  #9a958f; /* decorative / strike-through context */
}

/* Site-wide base — anything that hasn't set its own color inherits. */
body { color: var(--ink-body); }

/* Headings stay a step stronger than body for natural hierarchy. */
h1, h2, h3, h4, h5, h6 { color: var(--ink-anchor); }

/* Anchors — was #0a0a0a / hover #000; both unified to the warm anchor.
   The hover-darken is dropped on purpose (it was barely perceptible
   and pulled cool against the palette). */
a                { color: var(--ink-anchor); }
a:hover, a:focus { color: var(--ink-anchor); }

/* Navbar links — wordmark "So So Smooth", Shop / How it Works / Contact
   / Login, plus the cart icon (its SVG uses currentColor). */
.navbar a { color: var(--ink-anchor); }

/* Muted utility — tagline and other ".text-gray" usage. Replaces cool
   #777 with warm #767069, staying AA at 14px. */
.text-gray { color: var(--ink-soft); }
/* #endregion */