/* WHW Hybrid A+C storefront, v1.9.13. Scoped selectors intentionally outrank
   the historical product-gallery rules in styles.css. */
:root {
  --hybrid-canvas: #0d1114;
  --hybrid-surface: #171c20;
  --hybrid-surface-raised: #20262a;
  --hybrid-border: #394248;
  --hybrid-copy: #f7f4ee;
  --hybrid-muted: #aeb7bc;
  --hybrid-accent: #d8b66b;
  --hybrid-berry: #c77b91;
  --hybrid-positive: #73c6a1;
  --whw-safe-top: max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px), var(--tg-content-safe-area-inset-top, 0px), var(--whw-tg-safe-area-inset-top, 0px), var(--whw-tg-content-safe-area-inset-top, 0px));
  --whw-safe-right: max(env(safe-area-inset-right, 0px), var(--tg-safe-area-inset-right, 0px), var(--tg-content-safe-area-inset-right, 0px), var(--whw-tg-safe-area-inset-right, 0px), var(--whw-tg-content-safe-area-inset-right, 0px));
  --whw-safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px), var(--tg-content-safe-area-inset-bottom, 0px), var(--whw-tg-safe-area-inset-bottom, 0px), var(--whw-tg-content-safe-area-inset-bottom, 0px));
  --whw-safe-left: max(env(safe-area-inset-left, 0px), var(--tg-safe-area-inset-left, 0px), var(--tg-content-safe-area-inset-left, 0px), var(--whw-tg-safe-area-inset-left, 0px), var(--whw-tg-content-safe-area-inset-left, 0px));
  --whw-stable-viewport-height: var(--tg-viewport-stable-height, var(--whw-tg-viewport-stable-height, 100dvh));
}

body {
  background: var(--hybrid-canvas);
}

.app-shell {
  width: min(860px, 100%);
  min-height: var(--whw-stable-viewport-height);
  padding-top: var(--whw-safe-top);
  padding-bottom: calc(112px + var(--whw-safe-bottom));
}

.app-header {
  grid-template-columns: 52px minmax(0, 1fr) 42px;
  top: var(--whw-safe-top);
  padding-top: 12px;
}

.customer-bottom-nav {
  padding-bottom: calc(7px + var(--whw-safe-bottom));
}

.sticky-cart {
  bottom: calc(75px + var(--whw-safe-bottom));
}

.customer-toast {
  bottom: calc(86px + var(--whw-safe-bottom));
}

.queue-overlay,
.product-image-viewer {
  padding-top: calc(20px + var(--whw-safe-top));
  padding-bottom: calc(20px + var(--whw-safe-bottom));
}

.customer-help-overlay {
  padding-bottom: calc(14px + var(--whw-safe-bottom));
}

.brand-mark.whw-brand-mark,
.queue-shield.whw-queue-logo {
  display: grid;
  place-items: center;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.brand-mark.whw-brand-mark {
  width: 52px;
  height: 52px;
}

.queue-shield.whw-queue-logo {
  width: 76px;
  height: 76px;
}

.whw-brand-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hybrid-event-hero {
  position: relative;
  min-height: 260px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  margin: 0 0 12px;
  border: 1px solid var(--hybrid-border);
  border-radius: 8px;
  background: #20262a;
  isolation: isolate;
}

.hybrid-event-hero-media,
.hybrid-event-hero-overlay {
  position: absolute;
  inset: 0;
}

.hybrid-event-hero-media {
  z-index: -2;
  background-color: #20262a;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(1.002);
}

.hybrid-event-hero-overlay {
  z-index: -1;
  background: linear-gradient(180deg, rgba(8, 11, 13, .12) 8%, rgba(8, 11, 13, .9) 88%);
}

.hybrid-event-hero.no-image .hybrid-event-hero-overlay {
  background: linear-gradient(145deg, rgba(216, 182, 107, .12), rgba(199, 123, 145, .08) 48%, rgba(13, 17, 20, .96));
}

.hybrid-event-hero-content {
  width: 100%;
  padding: 24px;
}

.hybrid-event-hero-content h2 {
  max-width: 680px;
  margin: 8px 0 7px;
  font-size: clamp(1.55rem, 5vw, 2.35rem);
  line-height: 1.08;
  letter-spacing: 0;
}

.hybrid-event-hero-content > p {
  max-width: 640px;
  margin: 0;
  color: #e1e5e6;
  line-height: 1.5;
}

.hybrid-event-hero-content > p.collapsed {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.hybrid-event-kicker {
  min-height: 28px;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  color: #f3dca9;
  font-size: .69rem;
  font-weight: 800;
  text-transform: uppercase;
}

.catalog-switcher,
.hybrid-catalog .chips,
.hybrid-product-card .option-button-list {
  scrollbar-width: none;
}

.catalog-switcher::-webkit-scrollbar,
.hybrid-catalog .chips::-webkit-scrollbar,
.hybrid-product-card .option-button-list::-webkit-scrollbar {
  display: none;
}

.hybrid-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border: 1px solid rgba(115, 198, 161, .5);
  border-radius: 99px;
  background: rgba(14, 33, 27, .78);
  color: #bcebd5;
}

.hybrid-text-button {
  min-height: 36px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--hybrid-accent);
  font-weight: 800;
}

.hybrid-event-hero .hero-meta {
  color: #eef1f2;
}

.catalog-switcher {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(150px, 1fr);
  gap: 5px;
  overflow-x: auto;
  margin: 0 0 14px;
  padding: 5px;
  border: 1px solid var(--hybrid-border);
  border-radius: 8px;
  background: #111619;
}

.catalog-switcher button {
  min-height: 44px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--hybrid-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-switcher button.active {
  border-color: #5a6870;
  background: var(--hybrid-surface-raised);
  color: var(--hybrid-copy);
}

.hybrid-private-label {
  margin-right: 5px;
  color: var(--hybrid-accent);
  font-size: .58rem;
  font-weight: 900;
}

.hybrid-catalog {
  width: 100%;
}

.catalog-tools {
  position: sticky;
  top: 78px;
  z-index: 17;
  margin: 0 0 12px;
  padding: 9px 0 8px;
  background: rgba(13, 17, 20, .96);
  backdrop-filter: blur(12px);
}

.hybrid-search {
  position: relative;
}

.hybrid-search input {
  height: 46px;
  padding: 10px 44px 10px 13px;
  border-color: var(--hybrid-border);
  border-radius: 6px;
  background: #111619;
}

.hybrid-search .icon-button {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 40px;
  height: 40px;
  min-height: 40px;
  border: 0;
  border-radius: 4px;
  background: transparent;
}

.chips button {
  min-height: 38px;
  border-radius: 5px;
  background: #141a1d;
}

#products.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#products .hybrid-product-card {
  min-width: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid var(--hybrid-border);
  border-radius: 7px;
  background: var(--hybrid-surface);
}

#products .hybrid-product-card.in-cart {
  border-color: rgba(115, 198, 161, .68);
}

#products .hybrid-card-media {
  position: relative;
  width: 100%;
  height: auto !important;
  min-height: 0;
  aspect-ratio: 4 / 3 !important;
  display: block !important;
  overflow: hidden;
  padding: 0 !important;
  border: 0;
  border-bottom: 1px solid var(--hybrid-border);
  border-radius: 0;
  background: #edf0ee;
  color: #283036;
}

#products .hybrid-card-media img {
  width: 100% !important;
  height: 100% !important;
  display: block;
  margin: 0 !important;
  padding: var(--image-padding, 8px) !important;
  object-fit: var(--image-fit, contain) !important;
  object-position: var(--image-x, 50%) var(--image-y, 50%) !important;
  transform: scale(var(--image-scale, 1));
  transform-origin: var(--image-x, 50%) var(--image-y, 50%);
}

.hybrid-image-empty {
  width: 100%;
  height: 100%;
  min-height: 100px;
  display: grid;
  place-items: center;
  padding: 12px;
  color: #4e5b61;
  font-size: .72rem;
  font-weight: 750;
}

.hybrid-gallery-count {
  position: absolute;
  right: 7px;
  bottom: 7px;
  min-width: 26px;
  padding: 4px 7px;
  border-radius: 99px;
  background: rgba(13, 17, 20, .82);
  color: #fff;
  font-size: .62rem;
  font-weight: 850;
}

#products .hybrid-product-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px;
}

.hybrid-product-heading {
  width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--hybrid-copy);
  text-align: left;
}

.hybrid-product-heading h3 {
  margin: 2px 0 0;
  font-size: .96rem;
  line-height: 1.3;
  letter-spacing: 0;
}

.hybrid-product-description {
  min-height: 2.8em;
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--hybrid-muted);
  font-size: .73rem;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.hybrid-product-card .product-options {
  padding: 8px;
  border-radius: 5px;
  background: #12171a;
}

.hybrid-product-card .product-meta {
  margin-top: auto;
}

.hybrid-product-card .price {
  color: #f2d89e;
}

.hybrid-add-button {
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: 5px;
  background: #e7c77f;
  color: #171b1d;
  font-weight: 900;
}

.hybrid-product-card .quantity-control {
  grid-template-columns: 40px minmax(48px, 1fr) 40px;
}

.hybrid-product-card .quantity-control button,
.hybrid-product-card .quantity-control input {
  border-radius: 5px;
}

.hybrid-stage-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 12px;
}

html[data-customer-view="shop"] .checkout-stepper,
html[data-customer-view="shop"] #shipping-panel,
html[data-customer-view="shop"] #checkout-review-step {
  display: none !important;
}

html[data-customer-view="cart"] #vip-redeem-card,
html[data-customer-view="cart"] #event-hero,
html[data-customer-view="cart"] #catalog-switcher,
html[data-customer-view="cart"] #checkout-items-step,
html[data-customer-view="cart"] #sticky-cart {
  display: none !important;
}

html[data-customer-view="cart"] .checkout-stepper {
  display: grid;
}

html[data-customer-view="cart"][data-checkout-stage="review"] #shipping-panel,
html[data-customer-view="cart"][data-checkout-stage="delivery"] #checkout-review-step,
html[data-customer-view="cart"][data-checkout-stage="payment"] #shipping-panel {
  display: none !important;
}

html[data-checkout-stage="review"] #checkout-review-step #reserve-button,
html[data-checkout-stage="review"] #checkout-review-step #reserve-venmo-button,
html[data-checkout-stage="review"] #checkout-review-step #reserve-crypto-button,
html[data-checkout-stage="review"] #checkout-review-step .checkout-payment-choice-header,
html[data-checkout-stage="review"] #checkout-review-step #manual-payment-cart-availability,
html[data-checkout-stage="review"] #checkout-review-step #checkout-crypto-divider,
html[data-checkout-stage="review"] #checkout-review-step #checkout-crypto-payment-label,
html[data-checkout-stage="delivery"] #checkout-review-step #reserve-button,
html[data-checkout-stage="delivery"] #checkout-review-step #reserve-venmo-button,
html[data-checkout-stage="delivery"] #checkout-review-step #reserve-crypto-button,
html[data-checkout-stage="delivery"] #checkout-review-step .checkout-payment-choice-header,
html[data-checkout-stage="delivery"] #checkout-review-step #manual-payment-cart-availability,
html[data-checkout-stage="delivery"] #checkout-review-step #checkout-crypto-divider,
html[data-checkout-stage="delivery"] #checkout-review-step #checkout-crypto-payment-label,
html[data-checkout-stage="payment"] #continue-to-delivery,
html[data-checkout-stage="review"] #back-to-cart-review,
html[data-checkout-stage="review"] #continue-to-payment {
  display: none !important;
}

.checkout-stepper button.active {
  color: var(--hybrid-copy);
}

.checkout-stepper {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.current-sale-card.current-sale-card-primary {
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  padding: 0;
  border-radius: 8px;
  background: var(--hybrid-surface);
}

.current-sale-media {
  width: 100%;
  min-height: 130px;
  overflow: hidden;
  background: #edf0ee;
}

.current-sale-media img {
  width: 100%;
  height: 100%;
  min-height: 130px;
  max-height: 220px;
  display: block;
  object-fit: cover;
  object-position: var(--hero-x, 50%) var(--hero-y, 50%);
}

.current-sale-primary-copy,
.current-sale-card-primary .current-sale-primary-action {
  margin: 0 15px 15px;
}

.current-sale-primary-copy {
  margin-top: 15px;
}

.checkout-stepper button.active span {
  border-color: var(--hybrid-positive);
  background: rgba(115, 198, 161, .12);
  color: #bcebd5;
}

.hybrid-product-detail {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  align-items: end;
  padding-top: var(--whw-safe-top);
  padding-bottom: var(--whw-safe-bottom);
}

.hybrid-product-detail-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(4, 7, 9, .78);
  backdrop-filter: blur(8px);
}

.hybrid-product-detail-panel {
  position: relative;
  z-index: 1;
  width: min(760px, 100%);
  max-height: calc(var(--whw-stable-viewport-height) - var(--whw-safe-top) - var(--whw-safe-bottom));
  margin: 0 auto;
  overflow: auto;
  border: 1px solid var(--hybrid-border);
  border-radius: 8px 8px 0 0;
  background: #111619;
  box-shadow: 0 -22px 70px rgba(0, 0, 0, .5);
}

.hybrid-product-detail-panel > header {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--hybrid-border);
  background: rgba(17, 22, 25, .96);
  backdrop-filter: blur(10px);
}

.hybrid-product-detail-panel > header h2 {
  margin: 0;
}

.hybrid-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(250px, .9fr);
}

.hybrid-detail-gallery {
  min-width: 0;
  padding: 14px;
  background: #e9edeb;
}

.hybrid-detail-gallery-main {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 0;
  border-radius: 5px;
  background: #fff;
}

.hybrid-detail-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: var(--image-x, 50%) var(--image-y, 50%);
}

.hybrid-detail-thumbs {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  margin-top: 9px;
}

.hybrid-detail-thumb {
  width: 62px;
  height: 52px;
  min-height: 52px;
  flex: 0 0 62px;
  overflow: hidden;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 4px;
  background: #fff;
}

.hybrid-detail-thumb.active {
  border-color: #8c672f;
}

.hybrid-detail-thumb img {
  width: 100%;
  height: 100%;
  padding: var(--image-padding, 8px);
  object-fit: var(--image-fit, contain);
  object-position: var(--image-x, 50%) var(--image-y, 50%);
  transform: scale(var(--image-scale, 1));
  transform-origin: var(--image-x, 50%) var(--image-y, 50%);
}

.hybrid-detail-copy {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 18px;
}

.hybrid-detail-copy p {
  margin: 0;
  color: var(--hybrid-muted);
  line-height: 1.55;
}

.hybrid-detail-caption {
  min-height: 1.3em;
  margin: 7px 2px 0;
  color: #465158;
  font-size: .69rem;
  line-height: 1.3;
}

.hybrid-rfu {
  padding-top: 10px;
  border-top: 1px solid var(--hybrid-border);
  color: #d5bd88 !important;
  font-size: .65rem;
  font-weight: 900;
}

.hybrid-detail-copy .product-resources {
  display: grid;
  gap: 8px;
}

.hybrid-detail-copy .product-resource-link,
.hybrid-detail-copy .product-qr-toggle {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hybrid-border);
  border-radius: 5px;
  background: var(--hybrid-surface-raised);
  color: var(--hybrid-copy);
  font-weight: 800;
  text-decoration: none;
}

.hybrid-detail-copy .product-qr-panel img {
  width: min(210px, 100%);
  background: white;
}

body.hybrid-detail-open {
  overflow: hidden;
}

@media (max-width: 599px) {
  .hybrid-event-hero {
    min-height: 245px;
  }

  .hybrid-event-hero-content {
    padding: 17px;
  }

  #products.product-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  #products .hybrid-product-card {
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-rows: 1fr;
  }

  #products .hybrid-card-media {
    width: 112px;
    height: auto !important;
    min-height: 70px;
    align-self: start;
    aspect-ratio: 16 / 10 !important;
    border-right: 1px solid var(--hybrid-border);
    border-bottom: 0;
  }

  #products .hybrid-product-body {
    gap: 7px;
    padding: 10px;
  }

  .hybrid-product-heading h3 {
    font-size: .9rem;
  }

  .hybrid-product-description {
    min-height: 0;
    -webkit-line-clamp: 1;
  }

  .hybrid-product-card .product-options {
    padding: 6px;
  }

  .hybrid-product-card .product-option {
    min-width: 0;
    padding: 0;
    border: 0;
  }

  .hybrid-product-card .option-button-list {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .hybrid-product-card .option-choice {
    min-height: 36px;
    flex: 0 0 auto;
    padding: 6px 8px;
    white-space: nowrap;
  }

  .hybrid-product-card .option-choice small:last-child {
    display: none;
  }

  .hybrid-stage-actions,
  .hybrid-detail-layout {
    grid-template-columns: 1fr;
  }

  .hybrid-product-detail-panel {
    max-height: 96vh;
  }

  .hybrid-detail-gallery {
    padding: 10px;
  }

  .hybrid-detail-copy {
    padding: 14px;
  }
}

@media (max-width: 380px) {
  .app-header {
    grid-template-columns: 46px minmax(0, 1fr) 42px;
    gap: 9px;
  }

  .brand-mark.whw-brand-mark {
    width: 46px;
    height: 46px;
  }

  #products .hybrid-product-card {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  #products .hybrid-card-media {
    width: 92px;
    min-height: 0;
  }

  .hybrid-product-card .option-button-list {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .hybrid-product-card .option-choice {
    white-space: nowrap;
  }

  .hybrid-event-hero-content h2 {
    font-size: 1.48rem;
  }
}

@media (min-width: 820px) {
  .hybrid-product-detail {
    align-items: center;
    padding: 18px;
  }

  .hybrid-product-detail-panel {
    border-radius: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hybrid-event-hero-media {
    transform: none;
  }
}

.shipping-combined-summary {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--hybrid-border);
}

.shipping-combined-summary .summary-line {
  align-items: flex-start;
  gap: 12px;
}

.shipping-combined-summary .summary-line > :last-child {
  max-width: 62%;
  overflow-wrap: anywhere;
  text-align: right;
}

@media (max-width: 430px) {
  .shipping-combined-summary .summary-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .shipping-combined-summary .summary-line > :last-child {
    max-width: 100%;
    text-align: left;
  }
}

.customer-order-overlay {
  overflow-x: hidden;
}

.customer-order-sheet {
  box-sizing: border-box;
  max-width: 100%;
  overflow-x: hidden;
  padding-top: calc(10px + var(--whw-safe-top));
  padding-bottom: calc(100px + var(--whw-safe-bottom));
}

.customer-order-sheet > header {
  top: var(--whw-safe-top);
  padding-top: 10px;
}

@media (max-width: 600px) {
  .customer-order-sheet > header {
    margin-left: -10px;
    margin-right: -10px;
    padding-left: 10px;
    padding-right: 10px;
  }
}