:root{
  --ss-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ss-dur: 500ms;
  --ss-orange: #ff7a1a;
}

/* ---------------- Hero ---------------- */
.product-hero{
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  margin-top: calc(-1 * var(--header-h, 0px));
}
/* Reveals the hero photo on load via a fading dark scrim, rather than
   animating the hero's own opacity — which would also fade the logo. */
.product-hero::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #0b1210;
  animation: shadowstandHeroReveal 1100ms ease forwards;
  pointer-events: none;
}
@keyframes shadowstandHeroReveal{
  from{ opacity: 1; }
  to{ opacity: 0; }
}
/* Persistent (non-fading) dark gradient at the top of the hero, so the
   sticky header's logo/menu stay legible against whatever photo is
   underneath, regardless of how light that photo is up there. */
.product-hero::after{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 240px;
  z-index: 2;
  background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}
.product-hero__logo{
  position: absolute;
  top: 28px;
  left: 32px;
  z-index: 5;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 16px;
}
.product-hero__logo img{ max-height: 40px; }

/* ---------------- Buy box (sticky card) ---------------- */
/* .buybox-anchor sits AFTER .product-hero in normal flow, but is pulled
   up over it via a negative top margin equal to the hero's own rendered
   height (set as --hero-h by JS). Its own height also equals --hero-h,
   which means: (a) it visually overlaps the hero exactly, (b) whatever
   follows it (the comparison section) still lands exactly where it
   would have without the overlap trick, and (c) the sticky card inside
   it naturally has "room" to stay stuck for the entire hero's height —
   detaching and scrolling away right as the comparison section arrives,
   with zero extra JS math needed for *when* that happens. */
.buybox-anchor{
  position: relative;
  z-index: 5;
  margin-top: calc(-1 * var(--hero-h, 100vh));
  height: var(--hero-h, 100vh);
  pointer-events: none;
}
.buybox{
  position: sticky;
  top: 40px;
  width: 420px;
  max-width: calc(100% - 64px);
  margin-top: 80px;
  margin-left: auto;
  margin-right: 40px;
  background: #fff;
  padding: 32px;
  border-radius: 2px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(36px);
  animation: shadowstandBuyboxIn 750ms cubic-bezier(0.16, 1, 0.3, 1) 350ms forwards;
  display: flex;
  flex-direction: column;
}
/* Desktop visual order: category → title → description/sustainability/
   size-guide → variation pills + soft case/price + qty/add-to-cart.
   (Reordered via `order`, not DOM position, so the same markup can be
   reordered differently again for the mobile bottom sheet below.) */
.buybox__expand-toggle{ order: 0; }
.buybox__category{ order: 1; }
.buybox__title{ order: 2; }
.buybox__expandable{ order: 3; }
.buybox__cart-form{ order: 4; }
@keyframes shadowstandBuyboxIn{
  from{ opacity: 0; transform: translateY(36px); }
  to{ opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .product-hero::before{ animation: none; opacity: 0; }
  .buybox{ animation: none; opacity: 1; transform: none; transition: none; }
}
/* WooCommerce auto-populates this div with its own plain price/availability
   markup whenever a variation is selected (wc-add-to-cart-variation.js).
   We display price ourselves via .shadowstand-price, so suppress Woo's
   version to avoid a duplicate price on the page. Woo's JS sets an inline
   display:block style on this element, hence !important. */
.woocommerce-variation.single_variation{
  display: none !important;
}
.buybox__category{
  display: inline-block;
  align-self: flex-start;
  background: var(--ss-orange);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 6px 12px;
  border-radius: 2px;
  margin-bottom: 14px;
}
.buybox__title{
  font-size: 26px;
  font-weight: 800;
  margin: 0 0 8px;
}
.buybox__price{
  color: var(--ss-orange);
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 14px;
}
.buybox__desc{
  font-size: 14px;
  line-height: 1.6;
  color: #444;
  margin-bottom: 18px;
}
.buybox__meta{
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 13px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}
.buybox__sustainability{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: help;
}
.buybox__info-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1px solid var(--ss-orange);
  color: var(--ss-orange);
  font-size: 11px;
  font-style: italic;
}
.buybox__tooltip{
  position: absolute;
  bottom: 130%;
  left: 0;
  width: 220px;
  background: #111;
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  padding: 10px 12px;
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 200ms ease, transform 200ms ease;
  z-index: 10;
}
.buybox__sustainability:hover .buybox__tooltip,
.buybox__sustainability:focus .buybox__tooltip{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.buybox__size-guide{
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 13px;
  color: #111;
  text-decoration: underline;
  font-weight: 600;
  cursor: pointer;
}

/* ---------------- Variation pills ---------------- */
.shadowstand-hidden-select{
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}
.shadowstand-variation-group{ margin-bottom: 16px; }
.shadowstand-pills{
  display: flex;
  border: 1px solid #ddd;
  border-radius: 2px;
  overflow: hidden;
}
.shadowstand-pill{
  flex: 1;
  border: none;
  background: #f4f4f4;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--ss-dur) var(--ss-ease), color var(--ss-dur) var(--ss-ease);
}
.shadowstand-pill + .shadowstand-pill{ border-left: 1px solid #ddd; }
.shadowstand-pill.is-active{
  background: #111;
  color: #fff;
}

/* ---------------- Price + soft case (same row) ---------------- */
.shadowstand-price-row{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 18px;
}
.shadowstand-price{
  font-weight: 800;
  color: var(--ss-orange);
  font-size: 18px;
  line-height: 1;
}
.shadowstand-price .woocommerce-Price-amount,
.shadowstand-price .amount{
  font-weight: 800;
  color: var(--ss-orange);
}

/* ---------------- Soft case toggle ---------------- */
.shadowstand-soft-case{
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
.shadowstand-toggle{ position: relative; display: inline-block; }
.shadowstand-toggle input{ position: absolute; opacity: 0; width: 1px; height: 1px; }
.shadowstand-toggle__track{
  display: block;
  width: 40px; height: 22px;
  background: #ddd;
  border-radius: 999px;
  transition: background var(--ss-dur) var(--ss-ease);
  position: relative;
}
.shadowstand-toggle__thumb{
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--ss-dur) var(--ss-ease);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.shadowstand-toggle input:checked + .shadowstand-toggle__track{ background: var(--ss-orange); }
.shadowstand-toggle input:checked + .shadowstand-toggle__track .shadowstand-toggle__thumb{
  transform: translateX(18px);
}

/* ---------------- Quantity stepper ---------------- */
.shadowstand-qty{
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 2px;
  overflow: hidden;
}
.shadowstand-qty__btn{
  background: #f4f4f4;
  border: none;
  width: 36px; height: 44px;
  font-size: 16px;
  cursor: pointer;
}
.shadowstand-qty .qty,
.shadowstand-qty input.qty{
  width: 44px;
  height: 44px;
  border: none;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  text-align: center;
  font-size: 14px;
  -moz-appearance: textfield;
}
.shadowstand-qty input.qty::-webkit-outer-spin-button,
.shadowstand-qty input.qty::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

/* ---------------- Buy row / submit button ---------------- */
.shadowstand-buy-row{
  display: flex;
  align-items: center;
  gap: 12px;
}
/* !important here is intentional: WooCommerce adds a `wp-element-button`
   class to this button so it inherits the site's global block styles
   (rounded corners, theme accent color) — we want our own look to win
   regardless of what those global styles set. */
button.shadowstand-add-to-cart,
a.shadowstand-add-to-cart,
.shadowstand-add-to-cart{
  flex: 1;
  background: #111 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 20px;
  height: 44px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none !important;
  transition: background var(--ss-dur) var(--ss-ease);
}
.shadowstand-add-to-cart:hover,
.shadowstand-add-to-cart:focus{ background: var(--ss-orange) !important; color: #fff !important; }
.shadowstand-add-to-cart.loading{ opacity: 0.6; pointer-events: none; }

/* ---------------- Sticky bottom bar ---------------- */
.buybox-fixed-shell{
  position: fixed;
  left: 0; right: 0;
  bottom: 32px; /* floats above the edge rather than sitting flush against it */
  z-index: 200;
  display: flex;
  justify-content: center; /* centers the (content-width) bar horizontally */
  padding: 0 20px; /* keeps a safe gap from the viewport edges on narrower desktop widths */
  transform: translateY(calc(100% + 64px)); /* clears its own height + the bottom margin when hidden */
  opacity: 0;
  transition: transform var(--ss-dur) var(--ss-ease), opacity var(--ss-dur) var(--ss-ease);
  pointer-events: none;
}
.buybox-fixed-shell.is-visible{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.buybox-fixed-shell .buybox{
  position: static;
  width: auto; /* wraps its content instead of stretching edge-to-edge */
  max-width: none;
  margin: 0;
  border-radius: 0;
  box-shadow: 0 16px 44px rgba(0,0,0,0.4);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.buybox-fixed-shell .buybox__category,
.buybox-fixed-shell .buybox__desc,
.buybox-fixed-shell .buybox__meta{
  display: none;
}
.buybox-fixed-shell .buybox__title{
  display: none;
}
.buybox-fixed-shell .buybox__price{
  font-size: 14px;
  margin: 0;
  white-space: nowrap;
}
.buybox-fixed-shell .buybox__cart-form{ flex: 1; min-width: 0; }
.buybox-fixed-shell .shadowstand-variations{
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
}
.buybox-fixed-shell .shadowstand-variation-group{ margin: 0; }
.buybox-fixed-shell .shadowstand-pills{ min-width: 220px; }
.buybox-fixed-shell .shadowstand-soft-case{ margin: 0; }
.buybox-fixed-shell .shadowstand-price-row{ margin: 0; }
.buybox-fixed-shell .shadowstand-buy-row{ margin-left: auto; }
.buybox-fixed-shell form.cart{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
}

@media (max-width: 860px){
  .product-hero{ min-height: 60vh; }

  /* The anchor no longer needs to hold/position anything on mobile —
     the buybox is permanently fixed to the bottom of the viewport
     instead of living in the scroll flow or the desktop sticky system. */
  .buybox-anchor{
    position: static;
    height: auto;
    margin-top: 0;
    pointer-events: auto;
  }
  .buybox-fixed-shell{ display: none; } /* desktop-only sticky-bar mechanism */

  /* Only in the collapsed bottom sheet — the ShadowStand/Photographer
     pills already convey the product type, so the title is redundant
     there. Still shows once the sheet is expanded (.is-expanded). */
  .buybox:not(.is-expanded) .buybox__title{
    display: none;
  }

  .buybox{
    position: fixed;
    top: auto;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    z-index: 150;
    border-radius: 16px 16px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    max-height: 78vh;
    box-shadow: 0 -10px 34px rgba(0,0,0,0.22);
  }

  /* Tap target that reveals the expandable section below */
  .buybox__expand-toggle{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 10px 0 4px;
    cursor: pointer;
  }
  .buybox__expand-handle{
    width: 36px; height: 4px;
    border-radius: 999px;
    background: #ddd;
  }
  .buybox__expand-label{
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.6px;
  }
  .buybox__expand-label svg{
    width: 14px; height: 14px;
    transition: transform 280ms ease;
  }
  .buybox.is-expanded .buybox__expand-label svg{
    transform: rotate(180deg);
  }

  /* Mobile visual order: handle → title → cart-form (essentials) →
     expandable (collapsed, revealed on tap). Category tag is hidden
     to keep the always-visible bar lean. */
  .buybox__expand-toggle{ order: 0; }
  .buybox__category{ display: none; }
  .buybox__title{
    order: 1;
    padding: 0 20px;
    margin: 0 0 8px;
  }
  .buybox__cart-form{
    order: 2;
    padding: 0 20px 18px;
  }
  .buybox__expandable{ order: 3; }

  /* Hidden by default; expands to reveal sustainability, size guide,
     short + full description. */
  .buybox__expandable{
    max-height: 0;
    overflow: hidden;
    padding: 0 20px;
    transition: max-height 380ms ease;
  }
  .buybox.is-expanded .buybox__expandable{
    max-height: 55vh;
    overflow-y: auto;
    padding: 0 20px 28px;
  }
  .buybox__full-description .product-description{
    max-width: none;
    margin: 0;
    padding: 0;
  }
}

@media (min-width: 861px){
  /* These only exist as mobile UI — never show them on desktop. */
  .buybox__expand-toggle{ display: none; }
  .buybox__expandable{ max-height: none !important; overflow: visible !important; }
}

/* ---------------- Comparison section ---------------- */
.comparison-section{
  display: flex;
  width: 100%;
  position: relative;
}

/* ---------------- Falling-logo physics toy ---------------- */
.logo-physics{
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none; /* re-enabled per-logo below, keeps the rest of the section click-through */
}
.logo-physics__item{
  position: absolute;
  top: 0;
  left: 0;
  width: 72px;
  height: 72px;
  will-change: transform;
  cursor: grab;
  pointer-events: auto;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.35));
}
.logo-physics__item:active{
  cursor: grabbing;
}
.logo-physics__item img{
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none; /* let the wrapper div own all pointer/drag handling */
}
@media (prefers-reduced-motion: reduce){
  .logo-physics{ display: none; }
}
.comparison-panel{
  flex: 1;
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 40px;
}
.comparison-panel h2{
  display: inline-block;
  background: #000;
  color: #fff;
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px 17px;
  border-radius: 4px;
  margin: 0;
}
@media (max-width: 860px){
  .comparison-section{ flex-direction: column; }
  .comparison-panel{ min-height: 50vh; }
}

/* ---------------- Full-width feature picture sections ---------------- */
/* Same visual language as .comparison-panel (cover image, centered heading
   near the top, text-shadow) but each spans the full page width on its
   own, rather than sitting side-by-side with a second panel. */
.feature-panel-full{
  width: 100%;
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 40px;
}
.feature-panel-full h2{
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
  margin: 0;
}
@media (max-width: 860px){
  .feature-panel-full{ min-height: 55vh; }
}

/* ---------------- Product description ---------------- */
.product-description{
  max-width: 800px;
  margin: 0 auto;
  padding: 64px 32px;
  font-size: 15px;
  line-height: 1.7;
  color: #333;
}

/* ---------------- Size Guide modal ---------------- */
.shadowstand-modal{
  position: fixed;
  inset: 0;
  z-index: 500;
  visibility: hidden;
  opacity: 0;
  transition: opacity 260ms ease, visibility 0s linear 260ms;
  pointer-events: none;
}
.shadowstand-modal.is-open{
  visibility: visible;
  opacity: 1;
  transition: opacity 260ms ease, visibility 0s linear 0s;
  pointer-events: auto;
}
.shadowstand-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 15, 0.55);
}
.shadowstand-modal__card{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  width: 100%;
  max-width: 645px;
  max-height: 86vh;
  overflow-y: auto;
  background: #efeee8;
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
  opacity: 0;
  transition: opacity 260ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
.shadowstand-modal.is-open .shadowstand-modal__card{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.shadowstand-modal__close{
  position: sticky;
  float: right;
  top: 20px;
  right: 20px;
  margin: 20px 20px 0 0;
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: #111;
  cursor: pointer;
  z-index: 2;
}
.shadowstand-modal__content{
  padding: 44px 48px 56px;
  clear: both;
}
.shadowstand-modal__title{
  font-size: 32px;
  font-weight: 800;
  margin: 0 0 20px;
  color: #111;
}
.shadowstand-modal__text{
  font-size: 15px;
  line-height: 1.7;
  color: #111;
}
.shadowstand-modal__text p{ margin: 0 0 16px; }
.shadowstand-modal__text p:last-child{ margin-bottom: 0; }
.shadowstand-modal__text strong{ display: block; }
.shadowstand-modal__diagrams{
  display: flex;
  gap: 32px;
  align-items: flex-end;
  justify-content: center;
  padding: 24px 0;
}
.shadowstand-modal__diagrams img{
  max-width: 46%;
  height: auto;
}

@media (max-width: 860px){
  .shadowstand-modal__card{
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    border-radius: 0;
  }
  .shadowstand-modal.is-open .shadowstand-modal__card{
    transform: none;
  }
  .shadowstand-modal__content{
    padding: 32px 24px 48px;
  }
  .shadowstand-modal__title{
    font-size: 26px;
  }
  .shadowstand-modal__diagrams{
    flex-wrap: wrap;
  }
  .shadowstand-modal__diagrams img{
    max-width: 45%;
  }
}

@media (prefers-reduced-motion: reduce){
  .shadowstand-modal__backdrop,
  .shadowstand-modal__card{
    transition: none;
  }
}