/* ============================================================
   teas.co.uk, WooCommerce single product page
   Layered on top of WC core CSS. Inherits design-system.css tokens.
   Cyan accent (matches homepage / shop).
   ============================================================ */

/* Layout container, the WC main area on a product page */
.woocommerce.single-product .teas-product{
  display:block;margin:0 0 36px;
}

.product-grid{
  display:grid;grid-template-columns:6fr 5fr;gap:var(--gap);
  margin-bottom:36px;
}

/* ===== GALLERY (LEFT) ===== */
.product-gallery{
  background:#fff;border-radius:var(--r-3xl);padding:24px;
  box-shadow:var(--sh-card);position:relative;overflow:hidden;
}
/* WooCommerce Flexslider: clean up default chrome and let our card hold it */
.product-gallery .woocommerce-product-gallery{margin:0 !important;width:100% !important}
.product-gallery .woocommerce-product-gallery__image.product-gallery .woocommerce-product-gallery__wrapper{
  border-radius:var(--r-2xl);overflow:hidden;
}
.product-gallery .woocommerce-product-gallery__image img{
  border-radius:var(--r-2xl);
}
.product-gallery .flex-control-thumbs{
  margin:14px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(5,1fr);gap:8px;
  list-style:none;
}
.product-gallery .flex-control-thumbs li{margin:0;width:auto !important}
.product-gallery .flex-control-thumbs img{
  border-radius:var(--r-md);cursor:pointer;
  transition:transform .14s var(--ease),box-shadow .14s var(--ease);
  opacity:.7;
}
.product-gallery .flex-control-thumbs img:hover.product-gallery .flex-control-thumbs .flex-active{
  opacity:1;transform:translateY(-2px);box-shadow:var(--sh-card);
}

.product-gallery .onsale{
  position:absolute;top:18px;left:18px;z-index:2;
  background:var(--berry);color:#fff;
  font-family:var(--fm);font-size:11px;font-weight:700;
  padding:6px 12px;border-radius:var(--r-pill);
  text-transform:uppercase;letter-spacing:.06em;
  margin:0 !important;min-height:auto !important;
}

/* ===== INFO CARD (RIGHT) ===== */
.product-info{
  background:#fff;border-radius:var(--r-3xl);padding:32px;
  box-shadow:var(--sh-card);
  display:flex;flex-direction:column;gap:18px;
  align-self:start;position:sticky;top:80px;
}

/* Brand + family badge row */
.product-tags{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-bottom:0;
}
.brand-badge{
  font-family:var(--fm);font-size:11px;font-weight:700;
  padding:5px 12px;border-radius:var(--r-pill);
  background:var(--paper-2);color:var(--ink);
  text-transform:uppercase;letter-spacing:.06em;
  transition:background .14s var(--ease),color .14s var(--ease);
}
.brand-badge:hover{background:var(--ink);color:var(--acc)}

/* Trust signals strip, IMPROVEMENTS.md tier 2.4 above-the-fold conversion fix */
.trust-signals{
  display:flex;flex-wrap:wrap;gap:8px;
  padding:14px;background:var(--paper-2);border-radius:var(--r-md);
}
.trust-signals .ts{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--fm);font-size:11.5px;font-weight:600;
  color:var(--ink);letter-spacing:-.005em;
  padding:4px 8px;
}
.trust-signals .ts svg{width:14px;height:14px;color:var(--slate);flex-shrink:0}
.trust-signals .ts-link{
  border-radius:var(--r-pill);transition:background .14s var(--ease);
}
.trust-signals .ts-link:hover{background:rgba(14,15,18,.06)}
.trust-signals .ts-link svg{color:#00B67A}

/* Summary block, wraps WC default content (title, price, excerpt, add-to-cart, meta) */
.product-info .summary{
  display:flex;flex-direction:column;gap:14px;
  margin:0 !important;width:100% !important;float:none !important;
}

/* Title */
.product-info .summary .product_title.product-info .summary h1.entry-title{
  font-family:var(--fb);font-size:32px;font-weight:800;letter-spacing:-.020em;
  line-height:1.1;margin:0;text-wrap:balance;color:var(--ink);
}

/* Star rating (if any) */
.product-info .summary .woocommerce-product-rating{
  display:flex;align-items:center;gap:10px;margin:0;
  font-size:13px;color:var(--slate);
}
.product-info .summary .star-rating{
  font-size:14px;color:var(--amber);
}

/* Price */
.product-info .summary .price{
  font-family:var(--fb);font-weight:800;font-size:30px;letter-spacing:-.022em;
  color:var(--ink);margin:0;line-height:1;
}
.product-info .summary .price del{
  font-weight:500;font-size:18px;color:var(--mist);margin-right:8px;
}
.product-info .summary .price ins{
  background:transparent;text-decoration:none;color:var(--berry);
}
.product-info .summary .price .woocommerce-Price-currencySymbol{font-weight:700}

/* Short description (excerpt) */
.product-info .summary .woocommerce-product-details__short-description{
  font-size:14.5px;line-height:1.6;color:var(--slate);margin:0;
}
.product-info .summary .woocommerce-product-details__short-description p:last-child{margin-bottom:0}

/* Add to cart form */
.product-info .summary form.cart{
  display:flex;align-items:stretch;gap:8px;margin:0;
  padding:14px;background:var(--paper-2);border-radius:var(--r-md);
}
.product-info .summary form.cart .quantity{
  display:flex;align-items:center;background:#fff;border-radius:var(--r-md);
  border:1.5px solid var(--hair);overflow:hidden;
}
.product-info .summary form.cart input.qty{
  border:none;width:60px;height:50px;text-align:center;
  font-family:var(--fb);font-weight:700;font-size:15px;background:transparent;
  outline:none;
}
.product-info .summary form.cart .single_add_to_cart_button{
  flex:1;
  background:var(--ink);color:var(--acc);border-radius:var(--r-md);
  height:50px;padding:0 22px;
  font-family:inherit;font-weight:700;font-size:15px;letter-spacing:-.005em;
  border:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .14s var(--ease),background .14s var(--ease);
  text-transform:none;
}
.product-info .summary form.cart .single_add_to_cart_button:hover{
  transform:translateY(-1px);background:var(--acc);color:var(--ink);
}

/* Meta (SKU, categories, tags) */
.product-info .summary .product_meta{
  font-family:var(--fm);font-size:11px;color:var(--slate);font-weight:500;
  border-top:1px solid var(--hair);padding-top:14px;margin:0;
  display:flex;flex-direction:column;gap:4px;
}
.product-info .summary .product_meta > span{display:block}
.product-info .summary .product_meta a{
  color:var(--ink);font-weight:600;text-decoration:none;
  border-bottom:1px solid var(--hair);
  transition:border-color .14s var(--ease);
}
.product-info .summary .product_meta a:hover{border-bottom-color:var(--ink)}

/* Stock notice */
.product-info .summary .stock{
  font-family:var(--fm);font-size:11.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;
  padding:6px 12px;border-radius:var(--r-pill);align-self:flex-start;margin:0;
}
.product-info .summary .stock.in-stock{background:#E6F7EC;color:#1F8847}
.product-info .summary .stock.out-of-stock{background:#FCE6EC;color:#B22072}
.product-info .summary .stock.available-on-backorder{background:#FFF3E0;color:#9A6618}

/* Quick facts grid */
.quick-facts{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  padding:14px 0 0;border-top:1px solid var(--hair);
}
.quick-facts .fact{
  display:flex;flex-direction:column;gap:4px;
}
.quick-facts .fact .lbl{
  font-family:var(--fm);font-size:10px;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;color:var(--slate);
}
.quick-facts .fact .val{
  font-family:var(--fb);font-size:14px;font-weight:700;color:var(--ink);
  letter-spacing:-.005em;line-height:1.3;
}

/* ===== ACCORDION (replaces tabs) ===== */
.product-accordion{
  background:#fff;border-radius:var(--r-3xl);padding:32px;
  box-shadow:var(--sh-card);margin-bottom:36px;
}
.product-accordion-head{
  font-family:var(--fb);font-size:24px;font-weight:800;letter-spacing:-.018em;
  margin:0 0 18px;color:var(--ink);
}
details.pa-item{
  border-bottom:1px solid var(--hair);padding:0;
}
details.pa-item:first-of-type{border-top:1px solid var(--hair)}
details.pa-item summary{
  list-style:none;cursor:pointer;outline:none;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:18px 0;
  font-family:var(--fb);font-size:15.5px;font-weight:700;letter-spacing:-.005em;
  color:var(--ink);transition:color .14s var(--ease);
}
details.pa-item summary::-webkit-details-marker{display:none}
details.pa-item summary::marker{display:none}
details.pa-item summary:hover{color:var(--ink)}
details.pa-item .pa-tag{flex:1}
details.pa-item .pa-plus{
  width:32px;height:32px;border-radius:50%;background:var(--paper-2);
  display:inline-flex;align-items:center;justify-content:center;color:var(--ink);
  transition:transform .18s var(--ease),background .14s var(--ease);flex-shrink:0;
}
details.pa-item .pa-plus svg{width:12px;height:12px}
details.pa-item[open] .pa-plus{transform:rotate(45deg);background:var(--ink);color:var(--acc)}

details.pa-item .pa-body{
  padding:0 0 24px;font-size:14.5px;line-height:1.7;color:var(--ink);
}
details.pa-item .pa-body > *:first-child{margin-top:0}
details.pa-item .pa-body > *:last-child{margin-bottom:0}
details.pa-item .pa-body p{margin:0 0 1em;line-height:1.7}
details.pa-item .pa-body h3,
details.pa-item .pa-body h4{
  font-family:var(--fb);font-weight:700;letter-spacing:-.008em;
  margin:1.4em 0 .4em;line-height:1.3;
}
details.pa-item .pa-body h3{font-size:18px}
details.pa-item .pa-body h4{font-size:15px}
details.pa-item .pa-body ul,
details.pa-item .pa-body ol{margin:0 0 1em 1.5em}
details.pa-item .pa-body li{margin-bottom:.4em}
details.pa-item .pa-body a{
  color:var(--ink);font-weight:600;text-decoration:underline;
  text-decoration-color:var(--acc);text-underline-offset:3px;text-decoration-thickness:2px;
}
details.pa-item .pa-body strong{font-weight:700}

/* =====================================================================
   PRODUCT PAGE LAYOUT FIX, 2026-05-10
   Lee feedback chain:
   - Empty left column when gallery image is short: fixed via
     `align-self: start` on .product-gallery.
   - Buy + subscribe block must NOT live inside the right-column info card.
     It now lives in its own .teas-buy-box section below the product-grid,
     rendered by mu-plugins/teas-product-page-layout.php (the cart form is
     detached from `woocommerce_single_product_summary` and re-attached to
     `teas_claus_buy_box`). CSS for that section is below.
   ===================================================================== */

/* Blocksy renders `woocommerce_template_single_add_to_cart()` DIRECTLY (not
   via the woocommerce_single_product_summary hook) inside its
   `.ct-product-add-to-cart` wrapper, so `remove_action` cannot detach it.
   Hide the duplicate form.cart in the right-column info card here. The
   "In stock" status above the form stays visible. */
html body.single-product .product-info .ct-product-add-to-cart > form.cart {
  display: none !important;
}

/* =================== STANDALONE BUY BOX (Lee's "central 2-pillar box") =================== */
html body.single-product .teas-buy-box {
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 1px 0 rgba(14,15,18,.04), 0 8px 24px rgba(14,15,18,.05);
  padding: 32px;
  margin: 28px 0;
}

/* Inside the buy box: subscribe-choice 2-col, then a cart-actions row.
   The form.cart loses all its dressing, the box itself is the visual frame. */
html body.single-product .teas-buy-box form.cart {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

/* (a) Two pillars: Buy once | Subscribe and save */
html body.single-product .teas-buy-box .subscribe-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  border: 0;
  padding: 0;
  margin: 0;
}
html body.single-product .teas-buy-box .subscribe-choice-card {
  position: relative;
  display: block;
  padding: 22px 22px 20px;
  border: 2px solid var(--hair);
  border-radius: 18px;
  background: #fff;
  cursor: pointer;
  transition: border-color .14s var(--ease), box-shadow .14s var(--ease), transform .14s var(--ease);
}
html body.single-product .teas-buy-box .subscribe-choice-card:hover {
  border-color: var(--ink);
  transform: translateY(-1px);
  box-shadow: var(--sh-card);
}
html body.single-product .teas-buy-box .subscribe-choice-card input[type="radio"] {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--ink);
}
html body.single-product .teas-buy-box .subscribe-choice-card:has(input[type="radio"]:checked) {
  border-color: var(--ink);
  background: #F7F8FA;
  box-shadow: 0 0 0 1px var(--ink);
}
html body.single-product .teas-buy-box .subscribe-choice-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 30px;
}
html body.single-product .teas-buy-box .subscribe-choice-title {
  font-family: var(--fb);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--ink);
}
html body.single-product .teas-buy-box .subscribe-choice-price {
  font-family: var(--fb);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.022em;
  color: var(--ink);
  line-height: 1;
}
html body.single-product .teas-buy-box .subscribe-choice-price s {
  font-size: 16px;
  font-weight: 500;
  color: var(--mist);
  margin-left: 8px;
}
html body.single-product .teas-buy-box .subscribe-choice-sub {
  font-size: 13px;
  line-height: 1.5;
  color: var(--slate);
}
html body.single-product .teas-buy-box .subscribe-choice-save {
  border-color: #2BB673;
  background: linear-gradient(180deg, #F4FBF7 0%, #FFFFFF 60%);
}
html body.single-product .teas-buy-box .subscribe-choice-save:has(input[type="radio"]:checked) {
  border-color: #2BB673;
  box-shadow: 0 0 0 1px #2BB673;
}
html body.single-product .teas-buy-box .subscribe-choice-flag {
  position: absolute;
  top: -12px;
  right: 18px;
  background: #2BB673;
  color: #fff;
  font-family: var(--fm);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 5px 12px;
  border-radius: 999px;
  text-transform: uppercase;
}

/* (b) Cart actions row: qty stepper + Add-to-basket + Quick Buy */
html body.single-product .teas-buy-box .ct-cart-actions {
  display: grid !important;
  grid-template-columns: 130px 1fr 1fr;
  gap: 14px;
  align-items: stretch;
}

/* Quantity stepper (Blocksy +/- with absolutely-positioned spans). Parent
   needs explicit width so the absolute +/- don't eat the "1" in the middle. */
html body.single-product .teas-buy-box .ct-cart-actions .quantity {
  position: relative !important;
  display: inline-block !important;
  width: 130px !important;
  height: 60px !important;
  background: #fff !important;
  border: 1.5px solid var(--hair) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}
html body.single-product .teas-buy-box .ct-cart-actions .quantity input.qty {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 32px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  text-align: center !important;
  font-family: var(--fb) !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  color: var(--ink) !important;
  -moz-appearance: textfield !important;
}
html body.single-product .teas-buy-box .ct-cart-actions .quantity .ct-decrease,
html body.single-product .teas-buy-box .ct-cart-actions .quantity .ct-increase {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 32px !important;
  max-width: 32px !important;
  background: transparent !important;
  color: var(--ink) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}
html body.single-product .teas-buy-box .ct-cart-actions .quantity .ct-decrease {
  left: 0 !important;
  inset-inline-start: 0 !important;
  inset-inline-end: auto !important;
}
html body.single-product .teas-buy-box .ct-cart-actions .quantity .ct-increase {
  right: 0 !important;
  inset-inline-start: auto !important;
  inset-inline-end: 0 !important;
}

/* Add-to-basket: prominent black pill */
html body.single-product .teas-buy-box .single_add_to_cart_button {
  background: var(--ink) !important;
  color: var(--acc, #30d8c8) !important;
  border-radius: 16px !important;
  height: 60px !important;
  font-family: var(--fb) !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  letter-spacing: -.005em !important;
  padding: 0 24px !important;
  border: 0 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  text-transform: none !important;
  transition: transform .14s var(--ease), background .14s var(--ease), color .14s var(--ease) !important;
}
html body.single-product .teas-buy-box .single_add_to_cart_button:hover {
  transform: translateY(-1px) !important;
  background: #FFB347 !important;
  color: var(--ink) !important;
}

/* Quick Buy: cyan gradient with proper label layout */
html body.single-product .teas-buy-box .quick-buy-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  height: 60px !important;
  padding: 0 18px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #30d8c8 0%, #00B7D6 100%) !important;
  color: var(--ink) !important;
  font-family: var(--fb) !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  border: 0 !important;
  box-shadow: 0 4px 14px rgba(0, 224, 255.35) !important;
  transition: transform .14s var(--ease), box-shadow .14s var(--ease) !important;
  margin: 0 !important;
  width: 100% !important;
}
html body.single-product .teas-buy-box .quick-buy-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 22px rgba(0, 224, 255.45) !important;
}
html body.single-product .teas-buy-box .quick-buy-btn .qb-icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ink);
}
html body.single-product .teas-buy-box .quick-buy-btn .qb-icon svg {
  width: 20px;
  height: 20px;
}
html body.single-product .teas-buy-box .quick-buy-btn .qb-label {
  display: flex !important;
  flex-direction: column !important;
  flex: 1;
  text-align: left;
  line-height: 1.1;
}
html body.single-product .teas-buy-box .quick-buy-btn .qb-main {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
}
html body.single-product .teas-buy-box .quick-buy-btn .qb-sub {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  opacity: .75;
  margin-top: 2px;
}
html body.single-product .teas-buy-box .quick-buy-btn .qb-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--ink);
}

/* Responsive collapse */
@media (max-width: 900px) {
  html body.single-product .teas-buy-box {
    padding: 22px;
    margin: 20px 0;
  }
  html body.single-product .teas-buy-box .subscribe-choice {
    grid-template-columns: 1fr;
  }
  html body.single-product .teas-buy-box .ct-cart-actions {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* Gallery + info layout. The grid was 6fr 5fr (gallery left, info right),
   but the gallery card stretched to match the taller info column, leaving
   a huge empty cream rectangle below the small product image. Fix:
     - Gallery card sits at its natural height (align-self: start)
     - Gallery column gets a narrower share so the info card breathes wider
     - Info card holds its own sticky position
   Result: no dead space below the image, info card has more horizontal room. */
html body.single-product .product-grid {
  grid-template-columns: minmax(0, 480px) minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 28px !important;
}
html body.single-product .product-gallery {
  display: block !important;
  align-self: start !important;
  position: sticky !important;
  top: 80px !important;
  max-height: calc(100vh - 100px) !important;
}
html body.single-product .product-info {
  align-self: start !important;
  position: static !important;   /* was sticky, let it flow with the grid */
  width: 100% !important;
}
@media (max-width: 900px) {
  html body.single-product .product-grid {
    grid-template-columns: 1fr !important;
  }
  html body.single-product .product-gallery {
    position: static !important;
    max-height: none !important;
  }
}

/* (Obsolete in-summary buy rules removed 2026-05-10. The whole form.cart
   moved out of .product-info into the standalone .teas-buy-box section
   above, see top of this layout block.) */

/* ===== UPSELLS / RELATED ===== */
.upsells.products.related.products{
  margin-top:36px;padding:32px;
  background:var(--paper-2);border-radius:var(--r-3xl);
}
.upsells.products > h2.related.products > h2{
  font-family:var(--fb);font-size:24px;font-weight:800;letter-spacing:-.018em;
  margin:0 0 18px;color:var(--ink);
}
.upsells.products > h2 em.related.products > h2 em{font-family:var(--fd);font-style:italic;font-weight:400}
/* WC's default product loop on a single page, let it use our archive card style */
.upsells.products ul.products.related.products ul.products{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);
  list-style:none;margin:0;padding:0;
}
.upsells.products ul.products li.product.related.products ul.products li.product{
  background:#fff;border-radius:var(--r-2xl);padding:14px;margin:0 !important;
  box-shadow:var(--sh-card);transition:transform .18s var(--ease);
  width:100% !important;
}
.upsells.products ul.products li.product:hover.related.products ul.products li.product:hover{transform:translateY(-3px)}
.upsells.products ul.products li.product img.related.products ul.products li.product img{
  border-radius:var(--r-lg);margin:0 0 10px;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
}
.upsells.products ul.products li.product .woocommerce-loop-product__title.related.products ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--fb);font-size:13.5px;font-weight:600;letter-spacing:-.005em;
  line-height:1.3;margin:0;padding:0;color:var(--ink);
}
.upsells.products ul.products li.product .price.related.products ul.products li.product .price{
  font-family:var(--fb);font-size:15px;font-weight:700;color:var(--ink);
  margin:6px 0 0;
}
.upsells.products ul.products li.product .button.related.products ul.products li.product .button{
  margin-top:10px;background:var(--ink);color:var(--acc);border-radius:var(--r-pill);
  padding:8px 16px;font-weight:700;font-size:12px;
  display:inline-flex;align-items:center;
}

/* ===== RESPONSIVE ===== */
@media (max-width:1180px){
  .product-grid{grid-template-columns:1fr;gap:24px}
  .product-info{position:static}
  .quick-facts{grid-template-columns:repeat(2,1fr)}
  .upsells.products ul.products.related.products ul.products{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .product-info .summary .product_title.product-info .summary h1.entry-title{font-size:26px}
  .product-info .summary .price{font-size:24px}
  .product-info .summary form.cart{flex-direction:column;gap:8px}
  .product-info .summary form.cart .quantity{align-self:stretch}
  .product-info .summary form.cart input.qty{width:100%}
  .quick-facts{grid-template-columns:1fr 1fr}
  .upsells.products ul.products.related.products ul.products{grid-template-columns:1fr 1fr}
}

/* ============================================================
   PRODUCT PAGE UI ENHANCEMENTS (added 2026-05-08)
   ============================================================ */

/* Attribute strip below title */
.product-attr-strip{
  display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 18px;
}
.pa-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:999px;
  background:rgba(14,15,18,.05);border:1px solid rgba(14,15,18,.08);
  text-decoration:none;color:var(--ink,#0A0B0F);
  font-size:12px;line-height:1.2;
  transition:all .15s ease;
}
.pa-chip:hover{background:var(--ink,#0A0B0F);color:#eff7f6;border-color:var(--ink)}
.pa-lbl{font-family:var(--mono,monospace);font-size:10px;letter-spacing:.04em;opacity:.65;text-transform:uppercase}
.pa-val{font-weight:600}
.pa-meter{display:inline-flex;gap:2px;margin-left:4px}
.pa-meter .dot{width:6px;height:6px;border-radius:50%;background:rgba(14,15,18,.15)}
.pa-tier-free   .pa-meter .dot.d1{background:#0f766e}
.pa-tier-low    .pa-meter .dot.d1,.pa-tier-low    .pa-meter .dot.d2{background:#22c55e}
.pa-tier-lowmed .pa-meter .dot.d1,.pa-tier-lowmed .pa-meter .dot.d2,.pa-tier-lowmed .pa-meter .dot.d3{background:#84cc16}
.pa-tier-medium .pa-meter .dot.d1,.pa-tier-medium .pa-meter .dot.d2,.pa-tier-medium .pa-meter .dot.d3,.pa-tier-medium .pa-meter .dot.d4{background:#d97706}
.pa-tier-high   .pa-meter .dot{background:#dc2626}
.pa-chip:hover .pa-meter .dot{background:rgba(255,255,255,.5)}
.pa-organic{background:#dcfce7;border-color:#86efac;color:#065f46}
.pa-organic:hover{background:#15803d;color:#fff}

/* Per-cup price hero */
.product-percup-hero{
  display:flex;align-items:baseline;gap:14px;
  padding:18px 22px;
  background:linear-gradient(135deg,#fff7ed 0%,#fef3c7 100%);
  border:1px solid #fde68a;
  border-radius:14px;
  margin:18px 0;
}
.ppc-amount{
  font-family:var(--serif,'Instrument Serif',serif);
  font-size:48px;line-height:.95;font-weight:600;color:#92400e;
}
.ppc-meta{display:flex;flex-direction:column;gap:2px}
.ppc-label{font-size:14px;font-weight:600;color:#92400e;text-transform:uppercase;letter-spacing:.04em}
.ppc-sub{font-size:12px;color:#78350f;opacity:.85}

/* Brand link above add-to-cart */
.product-brand-link{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  padding:14px 16px;
  background:var(--surface,#eff7f6);
  border:1px solid rgba(14,15,18,.08);
  border-radius:10px;
  text-decoration:none;color:var(--ink,#0A0B0F);
  margin:12px 0 16px;
  transition:all .15s ease;
}
.product-brand-link:hover{border-color:var(--ink,#0A0B0F);transform:translateY(-1px)}
.brand-link-pre{font-size:12px;color:var(--ink-soft,#5a5a5a);text-transform:uppercase;letter-spacing:.04em}
.brand-link-name{font-family:var(--serif,serif);font-size:20px;font-weight:600}
.brand-link-tagline{font-size:12px;color:var(--ink-soft);flex:1 1 100%;margin-top:2px}
.brand-link-arrow{margin-left:auto;font-size:14px;font-weight:600}

/* Trust badges row */
.product-trust-row{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;
  margin:16px 0 20px;
}
.trust-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  background:rgba(14,15,18,.03);
  border:1px solid rgba(14,15,18,.05);
  border-radius:8px;
}
.trust-icon{font-size:22px;flex-shrink:0}
.trust-text{display:flex;flex-direction:column;line-height:1.25}
.trust-text strong{font-size:13px;color:var(--ink,#0A0B0F)}
.trust-text span{font-size:11px;color:var(--ink-soft,#5a5a5a)}

/* "At a glance" why-this-tea card */
.product-why-card{
  background:var(--ink,#0A0B0F);color:#eff7f6;
  padding:24px 28px;border-radius:14px;
  margin:32px 0;
  max-width:420px;
}
.pwc-eyebrow{
  display:block;font-family:var(--mono,monospace);
  font-size:11px;letter-spacing:.08em;
  margin-bottom:14px;opacity:.7;
}
.pwc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pwc-list li{display:flex;align-items:center;gap:10px;font-size:14px}
.pwc-tick{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;
  background:#22c55e;color:#0A0B0F;font-weight:700;font-size:12px;
  flex-shrink:0;
}

/* Cross-sells "similar teas from other brands" section */
.cross-sells-similar{
  margin:48px 0 32px;
  padding:32px 0 0;
  border-top:1px solid rgba(14,15,18,.08);
}
.cross-sells-similar h2{
  font-family:var(--serif,serif);
  font-size:32px;margin:0 0 6px;
}
.cross-sells-lede{
  font-size:14px;color:var(--ink-soft);margin:0 0 24px;
}

/* Sticky mobile add-to-cart bar */
.sticky-cart{
  position:fixed;bottom:0;left:0;right:0;z-index:9999;
  background:var(--ink,#0A0B0F);color:#eff7f6;
  padding:10px 14px;
  box-shadow:0 -4px 16px rgba(0,0,0,.16);
}
.sticky-cart-inner{
  display:flex;align-items:center;gap:12px;justify-content:space-between;
  max-width:600px;margin:0 auto;
}
.sc-info{display:flex;flex-direction:column;line-height:1.2;flex:1;min-width:0}
.sc-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-price{font-size:14px;color:#fde68a}
.sc-btn{
  background:#fff;color:#0A0B0F;border:none;
  padding:12px 22px;border-radius:999px;
  font-weight:700;font-size:14px;cursor:pointer;
  white-space:nowrap;
}
.sc-btn:hover{background:#fde68a}

/* Quick Buy icon next to add-to-cart in mobile sticky bar */
.sc-quick-buy{
  width:44px;height:44px;border-radius:50%;
  background:var(--acc,#30d8c8);color:#0A0B0F;
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;flex-shrink:0;
  box-shadow:0 0 0 2px rgba(0,224,255,.18);
  transition:transform .14s ease;
}
.sc-quick-buy:hover{transform:translateY(-1px)}
.sc-quick-buy svg{width:18px;height:18px}

/* Hide the "address line 2" field by default, toggled via "Add another line" */
.collapsed-field{display:none}

@media (max-width:760px){
  .product-trust-row{grid-template-columns:1fr 1fr}
  .ppc-amount{font-size:36px}
  .pa-chip{font-size:11px}
}