/* ==========================================================================
   Socio Care International — Products Styles
   Shared by the catalogue (products.php) and inner product pages (product.php)
   ========================================================================== */

/* ==========================================================================
   1. Breadcrumb / Hero
   ========================================================================== */

.products-hero {
  position: relative;
  overflow: hidden;
  padding: 72px 0 90px;
  background: #fff;
}
.products-hero-pattern {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(98,169,54,0.08) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 65% 65% at 85% 30%, black 15%, transparent 75%);
}
.products-hero-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.products-hero-title { font-size: 46px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 16px; color: var(--primary); }
.products-hero-desc { font-size: 17px; color: var(--text-muted); line-height: 1.75; max-width: 480px; }

.products-hero-composition { position: relative; height: 420px; }
.products-hero-photo {
  position: absolute;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 6px solid #fff;
}
.products-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.products-hero-photo-a { width: 62%; height: 78%; top: 0; left: 0; z-index: 2; }
.products-hero-photo-b { width: 52%; height: 56%; bottom: 0; right: 0; z-index: 1; }
.products-hero-dot { position: absolute; width: 120px; height: 120px; border-radius: 50%; z-index: 0; }
.products-hero-dot-a { top: -26px; right: 50px; background: var(--accent-light); }
.products-hero-dot-b { bottom: 30px; left: -24px; background: var(--tag-muted-bg); }

@media (max-width: 960px) {
  .products-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .products-hero-composition { order: -1; max-width: 440px; margin: 0 auto; height: 340px; }
}
@media (max-width: 600px) {
  .products-hero { padding: 48px 0 64px; }
  .products-hero-title { font-size: 32px; }
  .products-hero-composition { height: 260px; }
}

/* ==========================================================================
   2. Product media (shared photo / illustration wrapper)
   ========================================================================== */

.product-media { position: relative; overflow: hidden; background: var(--surface); }
.product-media-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-media-illustration { display: flex; align-items: center; justify-content: center; }
.product-media-illustration svg { width: 72%; height: 72%; }

/* ==========================================================================
   3. Featured Product Showcase (asymmetric)
   ========================================================================== */

.featured-showcase {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 28px;
  margin-bottom: 28px;
  align-items: stretch;
}
.featured-card, .secondary-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.featured-card:hover, .secondary-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }

.featured-card { display: flex; flex-direction: column; }
.featured-card .product-media { height: 340px; }
.featured-card-badge {
  position: absolute; top: 18px; left: 18px;
  background: var(--secondary); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: 0.03em;
  padding: 6px 14px; border-radius: 999px;
  z-index: 2;
}
.featured-card-body { padding: 30px 32px; }
.featured-card-body h3 { font-size: 26px; margin-bottom: 10px; }
.featured-card-body p { font-size: 15.5px; color: var(--text-muted); line-height: 1.7; margin-bottom: 20px; max-width: 520px; }

.secondary-showcase { display: flex; flex-direction: column; gap: 28px; }
.secondary-card { flex: 1; display: grid; grid-template-columns: 140px 1fr; min-height: 0; }
.secondary-card .product-media { height: 100%; min-height: 150px; }
.secondary-card-body { padding: 20px 22px; display: flex; flex-direction: column; }
.secondary-card-body h3 { font-size: 18px; margin-bottom: 6px; }
.secondary-card-body p { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; margin-bottom: 14px; flex: 1; }

@media (max-width: 960px) {
  .featured-showcase { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .secondary-card { grid-template-columns: 110px 1fr; }
  .secondary-card-body { padding: 16px 18px; }
  .featured-card .product-media { height: 220px; }
  .featured-card-body { padding: 24px 22px; }
}

/* ==========================================================================
   4. Product Card (All Products grid + Related Products)
   ========================================================================== */

.product-card { display: flex; flex-direction: column; }
.product-card-media-link { display: block; }
.product-card-media { height: 200px; }
.product-card-body { padding: 24px 22px; display: flex; flex-direction: column; flex: 1; }
.product-card-tag {
  display: inline-block; align-self: flex-start;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--secondary); background: var(--accent-light);
  padding: 4px 10px; border-radius: 999px; margin-bottom: 12px;
}
.product-card-body h3 { font-size: 19px; margin-bottom: 4px; }
.product-card-body h3 a { color: var(--primary); transition: color 0.2s ease; }
.product-card-body h3 a:hover { color: var(--secondary); }
.product-card-subtitle { display: block; font-size: 12.5px; color: var(--text-muted); font-style: italic; margin-bottom: 8px; }
.product-card-body p { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin-bottom: 18px; flex: 1; }
.product-card-cta { margin-top: auto; align-self: flex-start; }

.products-grid-simple { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

@media (max-width: 960px) {
  .products-grid-simple { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .products-grid-simple { grid-template-columns: 1fr; }
}

/* ==========================================================================
   5. Explore Natural Nutrition band
   ========================================================================== */

.explore-band { padding: 44px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.explore-band-row { display: flex; justify-content: center; align-items: center; gap: 56px; flex-wrap: wrap; }
.explore-pillar { display: flex; align-items: center; gap: 14px; }
.explore-pillar-icon {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  background: var(--accent-light); color: var(--secondary);
  display: flex; align-items: center; justify-content: center;
}
.explore-pillar-text strong { display: block; font-size: 14.5px; font-weight: 700; color: var(--primary); }
.explore-pillar-text span { font-size: 12.5px; color: var(--text-muted); }

@media (max-width: 700px) {
  .explore-band-row { gap: 28px 36px; }
}

/* ==========================================================================
   6. Products CTA (reused on catalogue + inner pages)
   ========================================================================== */

.products-cta { position: relative; background: linear-gradient(155deg, var(--primary) 0%, #2C0A16 100%); padding: 80px 0; overflow: hidden; }
.products-cta-overlay {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, black 10%, transparent 75%);
}
.products-cta-content { position: relative; z-index: 1; text-align: center; max-width: 640px; margin: 0 auto; }
.products-cta-title { font-size: 36px; font-weight: 700; color: #fff; margin-bottom: 14px; letter-spacing: -0.01em; }
.products-cta-desc { font-size: 16px; color: #94A3B8; line-height: 1.7; margin-bottom: 32px; }
.products-cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 500px) {
  .products-cta { padding: 56px 0; }
  .products-cta-title { font-size: 28px; }
}

/* ==========================================================================
   7. Product Hero (inner page)
   ========================================================================== */

.product-hero { padding: 56px 0 72px; }
.product-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.product-hero-media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); height: 440px; }
.product-hero-content .product-card-tag { margin-bottom: 16px; }
.product-hero-title { font-size: 38px; font-weight: 800; margin-bottom: 8px; color: var(--primary); letter-spacing: -0.01em; }
.product-hero-subtitle { font-size: 15px; font-style: italic; color: var(--text-muted); margin-bottom: 18px; }
.product-hero-intro { font-size: 16.5px; color: var(--text-muted); line-height: 1.75; margin-bottom: 26px; max-width: 480px; }
.product-hero-packs-label { display: block; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 10px; }
.product-hero-packs { display: flex; gap: 10px; margin-bottom: 28px; flex-wrap: wrap; }
.product-hero-pack-chip { font-size: 13px; font-weight: 700; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--border); color: var(--primary); }
.product-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

@media (max-width: 960px) {
  .product-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .product-hero-media { order: -1; height: 340px; }
}
@media (max-width: 500px) {
  .product-hero { padding: 40px 0 56px; }
  .product-hero-title { font-size: 28px; }
  .product-hero-media { height: 260px; }
}

/* ==========================================================================
   8. Product Overview
   ========================================================================== */

.product-overview-text { max-width: 760px; font-size: 17px; color: var(--text-muted); line-height: 1.8; }

/* ==========================================================================
   9. Pack Size Selector
   ========================================================================== */

.pack-selector { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 28px; }
.pack-tab {
  flex: 1; min-width: 150px;
  background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius-md);
  padding: 18px 20px; text-align: center; cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.pack-tab:hover { border-color: var(--secondary); }
.pack-tab.is-active { border-color: var(--secondary); background: var(--accent-light); }
.pack-tab-label { display: block; font-size: 16px; font-weight: 700; color: var(--primary); margin-bottom: 4px; }
.pack-tab-hint { font-size: 12.5px; color: var(--text-muted); }

.pack-panel {
  background: var(--surface); border-radius: var(--radius-lg);
  padding: 32px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.pack-panel-media {
  width: 110px; height: 110px; border-radius: var(--radius-md); overflow: hidden; flex-shrink: 0;
  background: #fff; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; color: var(--secondary);
}
.pack-panel-media img { width: 100%; height: 100%; object-fit: cover; }
.pack-panel-info strong { display: block; font-size: 18px; margin-bottom: 6px; color: var(--primary); }
.pack-panel-info p { font-size: 14px; color: var(--text-muted); margin-bottom: 14px; }

@media (max-width: 560px) {
  .pack-selector { gap: 10px; }
  .pack-tab { min-width: 0; padding: 14px 10px; }
  .pack-panel { padding: 24px 20px; }
}

/* ==========================================================================
   10. Ingredient / Process Flow (leaf products)
   ========================================================================== */

.process-flow { display: flex; align-items: flex-start; justify-content: center; gap: 4px; flex-wrap: wrap; }
.process-step-chip { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; width: 140px; }
.process-step-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--accent-light); color: var(--secondary);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
}
.process-step-chip span { font-size: 13.5px; font-weight: 700; color: var(--primary); line-height: 1.35; }
.process-arrow { color: var(--border); flex-shrink: 0; margin-top: 22px; }

@media (max-width: 860px) {
  .process-flow { flex-direction: column; align-items: center; gap: 18px; }
  .process-arrow { transform: rotate(90deg); margin-top: 0; }
}

/* ==========================================================================
   11. Product Gallery
   ========================================================================== */

.product-gallery { display: grid; grid-template-columns: 96px 1fr; gap: 16px; }
.gallery-thumbs { display: flex; flex-direction: column; gap: 12px; }
.gallery-thumb {
  width: 96px; height: 96px; border-radius: var(--radius-sm); overflow: hidden;
  border: 2px solid transparent; cursor: pointer; background: #fff;
  padding: 0; transition: border-color 0.2s ease;
}
.gallery-thumb.is-active { border-color: var(--secondary); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumb-doc {
  width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-size: 9.5px; font-weight: 700; color: var(--text-muted); background: var(--surface);
}
.gallery-main {
  border-radius: var(--radius-lg); overflow: hidden; height: 420px; cursor: zoom-in; position: relative;
  background: var(--surface);
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-zoom-hint {
  position: absolute; bottom: 14px; right: 14px;
  background: rgba(255,255,255,0.9); color: var(--primary);
  font-size: 12.5px; font-weight: 700; padding: 8px 14px; border-radius: 999px;
  display: flex; align-items: center; gap: 6px;
}

@media (max-width: 700px) {
  .product-gallery { grid-template-columns: 1fr; }
  .gallery-thumbs { flex-direction: row; overflow-x: auto; order: 2; padding-bottom: 4px; }
  .gallery-thumb { flex-shrink: 0; }
  .gallery-main { order: 1; height: 280px; }
}

/* ==========================================================================
   12. Lightbox
   ========================================================================== */

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(15,23,42,0.92);
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius-md); }
.lightbox-close {
  position: absolute; top: 24px; right: 24px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.15); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: none;
}
.lightbox-close:hover { background: rgba(255,255,255,0.28); }

/* ==========================================================================
   13. Related Products heading spacing
   ========================================================================== */

.related-products .section-head { margin-bottom: 40px; }

/* ==========================================================================
   14. Catalogue — two collapsible category groups, product tabs inside each
   ========================================================================== */

.catalogue { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }

.cat-group {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.cat-group.is-open { box-shadow: var(--shadow-md); border-color: var(--secondary-light); }

.cat-group-heading { margin: 0; }
.cat-group-toggle {
  width: 100%; display: flex; align-items: center; gap: 18px;
  padding: 22px 26px; background: none; border: none; cursor: pointer;
  text-align: left; font-family: var(--font);
}
.cat-group-num {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%;
  background: var(--accent-light); color: var(--secondary);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800;
}
.cat-group.is-open .cat-group-num { background: var(--secondary); color: #fff; }
.cat-group-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cat-group-title { font-size: 21px; font-weight: 800; color: var(--primary); letter-spacing: -0.01em; }
.cat-group-lead { font-size: 14px; color: var(--text-muted); line-height: 1.6; }
.cat-group-count {
  flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--secondary);
  background: var(--accent-light); border-radius: 999px; padding: 6px 14px;
}
.cat-group-chevron {
  flex-shrink: 0; color: var(--primary);
  display: flex; transition: transform 0.25s ease;
}
.cat-group.is-open .cat-group-chevron { transform: rotate(180deg); }
.cat-group-toggle:hover .cat-group-title { color: var(--secondary); }
.cat-group-toggle:focus-visible { outline: 2px solid var(--secondary); outline-offset: -3px; }

.cat-group-body { border-top: 1px solid var(--border); padding: 24px 26px 28px; }

/* ---- Product tabs ---- */
.cat-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.cat-tab {
  font-family: var(--font); font-size: 14px; font-weight: 600;
  color: var(--primary); background: var(--surface);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 10px 20px; cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.cat-tab:hover { border-color: var(--secondary); color: var(--secondary); }
.cat-tab.is-active { background: var(--secondary); border-color: var(--secondary); color: #fff; }
.cat-tab:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }

/* ---- Product panel ---- */
.cat-panel { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 32px; align-items: center; }
.cat-panel[hidden] { display: none; }

.cat-panel-media {
  aspect-ratio: 1 / 1; border-radius: var(--radius-md); overflow: hidden;
  background: var(--accent-light);
  display: flex; align-items: center; justify-content: center;
}
.cat-panel-media img { width: 100%; height: 100%; object-fit: cover; }
.cat-panel-media-holder {
  width: 100%; height: 100%; padding: 22px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  border: 2px dashed var(--secondary-light); border-radius: var(--radius-md);
}
.cat-panel-media-holder svg { width: 132px; height: 132px; }
.cat-panel-media-note {
  font-size: 11px; font-weight: 600; color: var(--secondary);
  text-align: center; line-height: 1.5;
}

.cat-panel-body { min-width: 0; }
.cat-panel-title { font-size: 26px; font-weight: 800; color: var(--primary); letter-spacing: -0.01em; margin: 12px 0 0; }
.cat-panel-subtitle { font-size: 14px; font-weight: 600; color: var(--secondary); margin: 6px 0 0; }
.cat-panel-desc { font-size: 15px; color: var(--text-muted); line-height: 1.75; margin: 12px 0 0; }

.cat-panel-packs { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.cat-panel-packs-label { font-size: 12px; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: 0.06em; }
.cat-panel-pack {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--primary);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 8px 16px; text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.cat-panel-pack span { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.cat-panel-pack:hover { border-color: var(--secondary); color: var(--secondary); }

.cat-panel-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

@media (max-width: 900px) {
  .cat-panel { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .cat-panel-media { max-width: 320px; margin: 0 auto; }
}

@media (max-width: 640px) {
  .cat-group-toggle { flex-wrap: wrap; gap: 14px; padding: 18px 18px; }
  .cat-group-lead { display: none; }
  .cat-group-count { order: 3; }
  .cat-group-chevron { order: 4; margin-left: auto; }
  .cat-group-body { padding: 20px 18px 24px; }
  .cat-group-title { font-size: 18px; }
  .cat-panel-title { font-size: 22px; }
  .cat-tab { font-size: 13px; padding: 9px 16px; }
}

/* ==========================================================================
   15. Pack-label product page — About / Daily Nutrition / Prepare & Ingredients
   ========================================================================== */

.label-media-holder {
  width: 100%; height: 100%; min-height: 180px; padding: 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  border: 2px dashed var(--secondary-light); border-radius: var(--radius-md);
  background: var(--accent-light); color: var(--secondary); text-align: center;
}
.label-media-holder span { font-size: 12.5px; font-weight: 700; }
.label-media-holder em { font-style: normal; font-size: 11px; font-weight: 500; color: var(--text-muted); }
.label-media-holder-sm { min-height: 92px; padding: 12px; gap: 4px; }
.label-media-holder-sm span { font-size: 11px; }
.label-media-holder-sm em { font-size: 10px; }

/* ---- 1. About ---- */
.label-about { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: 52px; align-items: start; }
/* Sticky so the media column tracks the taller right column instead of stranding it */
.label-media { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 16px; }

/* Each photo sits in its own filled card — cut-outs are bottom-anchored so they
   stand on the card floor rather than floating in empty space */
.label-photo {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 72% 22%, rgba(98,169,54,0.16), transparent 62%),
    linear-gradient(165deg, #FFFDF5 0%, var(--accent-light) 100%);
  display: flex; align-items: flex-end; justify-content: center;
}
.label-photo::after {
  content: ''; position: absolute; left: 50%; bottom: 7%;
  width: 66%; height: 12%; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(59,14,26,0.15), transparent 72%);
}
.label-photo img {
  position: relative; z-index: 1;
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(15,23,42,0.16));
}
.label-photo-lead { aspect-ratio: 1 / 1; padding: 26px 26px 20px; }
.label-photo-sub  { aspect-ratio: 16 / 10; padding: 22px 26px 18px; }
.label-about-body { min-width: 0; }
.label-title { font-size: 38px; font-weight: 800; color: var(--primary); letter-spacing: -0.02em; margin: 14px 0 0; }
.label-headline { font-size: 19px; font-weight: 600; color: var(--primary-light); margin: 8px 0 0; }
.label-tamil { font-size: 15px; font-weight: 600; color: var(--secondary); margin: 6px 0 0; }
.label-superfood {
  display: inline-block; margin-top: 16px; padding: 9px 22px;
  background: var(--primary); color: #fff; border-radius: 999px;
  font-size: 14px; font-weight: 700; letter-spacing: 0.02em;
}
.label-lead { font-size: 15.5px; color: var(--text-muted); line-height: 1.8; margin: 20px 0 0; }

/* Certification badges lifted straight off the pack */
.label-badges {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  list-style: none; margin: 26px 0 0; padding: 0;
}
.label-badges li { display: flex; align-items: center; }
.label-badges img {
  height: 54px; width: auto; display: block;
  transition: transform 0.25s ease;
}
.label-badges li:hover img { transform: scale(1.06); }

.label-planet { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); }
.label-planet h3 { font-size: 17px; font-weight: 800; color: var(--primary); margin: 0 0 14px; }
.label-planet ul { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.label-planet li {
  position: relative; padding: 8px 16px 8px 32px;
  font-size: 13.5px; font-weight: 600; color: var(--primary);
  background: #fff; border: 1px solid var(--border); border-radius: 999px;
}
.label-planet li::before {
  content: ''; position: absolute; left: 14px; top: 50%; width: 8px; height: 8px;
  margin-top: -4px; border-radius: 50%; background: var(--secondary);
}

/* Pack sizes live in section 3, paired with the product photo */
.label-packs-card { grid-column: span 2; display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 28px; align-items: center; }
.label-packs-copy { min-width: 0; }
.label-packs-photo {
  margin: 0; aspect-ratio: 16 / 11; overflow: hidden;
  border-radius: var(--radius-md);
  background: linear-gradient(165deg, #FFFDF5 0%, var(--accent-light) 100%);
  display: flex; align-items: center; justify-content: center;
}
.label-packs-photo img { width: 100%; height: 100%; object-fit: contain; padding: 16px; }

.label-packs ul { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; margin: 0; padding: 0; }
.label-packs li {
  flex: 1 1 170px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px 18px;
}
.label-packs li strong { font-size: 16px; font-weight: 800; color: var(--primary); }
.label-packs li > span { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.label-packs li a {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
  min-height: 32px; /* keeps it a comfortable tap target on touch */
  font-size: 12.5px; font-weight: 700; color: var(--secondary); text-decoration: none;
  transition: color 0.2s ease;
}
.label-packs li a:hover { color: var(--primary); text-decoration: underline; }

/* ---- 2. Daily nutrition ---- */
/* 7 items: flex-wrap keeps the last row centred instead of leaving a hole in a grid */
.label-benefits {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 18px; max-width: 1120px; margin: 0 auto;
}
.label-benefit {
  position: relative; flex: 0 1 250px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 30px 22px 26px; box-shadow: var(--shadow-sm); overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.label-benefit::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--secondary); transform: scaleX(0); transform-origin: center;
  transition: transform 0.25s ease;
}
.label-benefit:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--secondary-light); }
.label-benefit:hover::after { transform: scaleX(1); }

.label-benefit-num {
  position: absolute; top: 12px; right: 16px;
  font-size: 22px; font-weight: 800; line-height: 1;
  color: var(--accent-light);
}
.label-benefit-icon {
  width: 62px; height: 62px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent-light); color: var(--secondary);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.25s ease, color 0.25s ease;
}
.label-benefit:hover .label-benefit-icon { background: var(--secondary); color: #fff; }
.label-benefit-icon svg { width: 30px; height: 30px; }
.label-benefit-text { font-size: 15px; font-weight: 700; color: var(--primary); line-height: 1.55; }

/* 5 items: fit them on a single row instead of wrapping a lone card to a new line */
.label-benefits[data-count="5"] .label-benefit { flex: 0 1 190px; }

/* Tree image on the left, benefit boxes on the right */
.label-benefits-row.has-tree {
  display: flex; align-items: center; gap: 36px; max-width: 1120px; margin: 0 auto;
}
.label-benefits-tree { flex: 0 0 260px; }
.label-benefits-tree img { width: 100%; height: auto; display: block; }
.label-benefits-row.has-tree .label-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); flex: 1 1 auto; max-width: none; margin: 0; }
.label-benefits-row.has-tree .label-benefits[data-count="5"] .label-benefit { flex: none; width: 100%; }

@media (max-width: 860px) {
  .label-benefits-row.has-tree { flex-direction: column; }
  .label-benefits-tree { flex: 0 0 auto; max-width: 220px; }
  .label-benefits-row.has-tree .label-benefits { justify-content: center; }
}

/* ---- 3. Prepare & ingredients ---- */
.label-prep-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.label-card {
  min-width: 0;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 28px; box-shadow: var(--shadow-sm);
}
.label-card h3 { font-size: 19px; font-weight: 800; color: var(--primary); margin: 0 0 16px; }

/* Ingredients now sits at the top of the How To Prepare card */
.label-ingredients { padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--border); }
.label-ingredients ul { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; margin: 0; padding: 0; }
.label-ingredients li {
  font-size: 13.5px; font-weight: 600; color: var(--primary);
  background: var(--accent-light); border-radius: 999px; padding: 8px 16px;
}

/* How To Prepare runs full width so the 3 steps read left-to-right as a flow */
.label-prep { grid-column: span 2; }

/* English / Tamil switch — one method visible at a time keeps the card short */
.label-prep-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 18px;
}
.label-prep-head h3 { margin: 0; }
.label-lang-tabs {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
}
.label-lang-tab {
  font-family: var(--font); font-size: 13.5px; font-weight: 700;
  color: var(--text-muted); background: none; border: none; cursor: pointer;
  padding: 8px 20px; border-radius: 999px; min-height: 34px;
  transition: background 0.2s ease, color 0.2s ease;
}
.label-lang-tab:hover { color: var(--primary); }
.label-lang-tab.is-active { background: var(--secondary); color: #fff; }
.label-lang-tab:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
.label-lang-panel[hidden] { display: none; }
.label-serving { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--secondary); margin: 0; }
.label-prep-summary { font-size: 14.5px; color: var(--text-muted); line-height: 1.75; margin: 8px 0 0; max-width: 720px; }
.label-steps {
  list-style: none; margin: 24px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
}
.label-steps li {
  position: relative; min-width: 0;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 22px 18px;
}
/* connecting arrow between steps */
.label-steps li:not(:last-child)::after {
  content: ''; position: absolute; top: 50%; right: -14px;
  width: 8px; height: 8px; margin-top: -4px;
  border-top: 2px solid var(--secondary-light); border-right: 2px solid var(--secondary-light);
  transform: rotate(45deg);
}
.label-step-media {
  width: 100%; max-width: 132px;
  aspect-ratio: 1 / 1; border-radius: var(--radius-sm); overflow: hidden;
  background: linear-gradient(165deg, #FFFDF5 0%, var(--accent-light) 100%);
  display: flex; align-items: center; justify-content: center;
}
.label-step-media img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.label-step-tag {
  display: inline-block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em;
  color: #fff; background: var(--secondary); border-radius: 999px; padding: 5px 13px;
}
.label-step-body p { font-size: 13.5px; color: var(--text-muted); line-height: 1.7; margin: 10px 0 0; }

.label-tamil-prep ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.label-tamil-prep li { position: relative; padding-left: 22px; font-size: 14.5px; color: var(--primary); line-height: 1.8; }
.label-tamil-prep li::before {
  content: ''; position: absolute; left: 0; top: 11px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--secondary);
}
.label-tamil-note { font-size: 13px; color: var(--text-muted); line-height: 1.8; margin: 18px 0 0; padding-top: 16px; border-top: 1px dashed var(--border); }

.label-nutrition { grid-column: span 2; }
.label-table-scroll { overflow-x: auto; }
.label-table { width: 100%; border-collapse: collapse; min-width: 520px; }
.label-table th, .label-table td { padding: 12px 16px; border: 1px solid var(--border); text-align: left; font-size: 14px; }
.label-table thead th { background: var(--primary); color: #fff; font-weight: 700; font-size: 13px; }
.label-table thead th span { display: block; font-size: 10.5px; font-weight: 500; opacity: 0.75; margin-top: 2px; }
.label-table tbody th { font-weight: 700; color: var(--primary); background: var(--surface); }
.label-table tbody td { color: var(--text-muted); }
.label-nutrition-note { font-size: 12.5px; color: var(--text-muted); margin: 14px 0 0; }

@media (max-width: 1100px) {
  .label-benefit { flex: 0 1 220px; }
}
@media (max-width: 900px) {
  /* minmax(0,1fr) not 1fr — a bare 1fr track has an `auto` minimum, so a wide
     child (the pack-size list) refuses to shrink and pushes the page sideways */
  .label-about { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .label-media { width: 100%; max-width: 420px; justify-self: center; position: static; }
  .label-title { font-size: 30px; }
  .label-prep-grid { grid-template-columns: minmax(0, 1fr); }
  .label-nutrition { grid-column: span 1; }
  .label-prep { grid-column: span 1; }
  .label-packs-card { grid-column: span 1; grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .label-packs-photo { max-width: 320px; width: 100%; justify-self: center; }
}
@media (max-width: 640px) {
  .label-benefits { gap: 12px; }
  .label-benefit { flex: 1 1 calc(50% - 6px); padding: 24px 14px 20px; gap: 12px; }
  .label-benefit-icon { width: 52px; height: 52px; }
  .label-benefit-icon svg { width: 25px; height: 25px; }
  .label-benefit-text { font-size: 13.5px; }
  .label-benefit-num { font-size: 18px; top: 9px; right: 11px; }
  .label-card { padding: 22px 18px; }
  /* steps stack back to image-left rows — 3 across is unreadable on a phone */
  .label-steps { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .label-steps li {
    flex-direction: row; align-items: center; text-align: left;
    gap: 14px; padding: 14px;
  }
  .label-steps li:not(:last-child)::after { display: none; }
  .label-step-media { max-width: 76px; flex-shrink: 0; }
  .label-step-body p { margin-top: 6px; }
}

.label-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }


@media (max-width: 640px) {
  .label-badges { gap: 10px; }
  .label-badges img { height: 44px; }
}

/* ==========================================================================
   17. Dehydrated Products landing — 4-up leaf grid
   ========================================================================== */

.leaf-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.leaf-card {
  min-width: 0; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.leaf-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--secondary-light); }

.leaf-card-media {
  aspect-ratio: 1 / 1; overflow: hidden;
  background: linear-gradient(165deg, #FFFDF5 0%, var(--accent-light) 100%);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.leaf-card-media svg { width: 78%; height: 78%; }
/* Every photo crops to the same square and carries its own rounded corners,
   so mismatched source ratios (2000x1485, 500x500, 1200x676…) all render identically */
.leaf-card-media.has-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  border-radius: var(--radius-md);
  transition: transform 0.4s ease;
}
.leaf-card:hover .leaf-card-media.has-photo img { transform: scale(1.04); }

.leaf-card-body { display: flex; flex-direction: column; flex: 1; padding: 24px 22px 26px; }
.leaf-card-title { font-size: 19px; font-weight: 800; color: var(--primary); margin: 0; letter-spacing: -0.01em; }
.leaf-card-subtitle { font-size: 12.5px; font-weight: 600; color: var(--secondary); margin: 5px 0 0; }
.leaf-card-desc { font-size: 14px; color: var(--text-muted); line-height: 1.7; margin: 12px 0 0; flex: 1; }
.leaf-card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.leaf-card-actions .btn { flex: 1 1 auto; justify-content: center; text-align: center; }

/* Flat nav group (has its own landing page, so no expandable sub-menu) */
.navbar-links .nav-menu-group-flat > a.nav-menu-group-trigger {
  display: flex; align-items: center; text-decoration: none;
  font-size: 14px; font-weight: 700; color: var(--primary);
  padding: 11px 14px; border-radius: var(--radius-sm);
}
.navbar-links .nav-menu-group-flat > a.nav-menu-group-trigger:hover { background: var(--accent-light); color: var(--secondary); }

@media (max-width: 1100px) {
  .leaf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .leaf-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .leaf-card-actions .btn { flex: 1 1 100%; }
}

.label-highlight { display: inline-block; margin: 14px 0 0; padding: 7px 16px; background: #C62828; color: #fff; border-radius: var(--radius-sm); font-size: 12.5px; font-weight: 700; line-height: 1.5; }

/* ==========================================================================
   18. "Made For Every Age" band
   ========================================================================== */

.age-band {
  position: relative; overflow: hidden; padding: 72px 0;
  background:
    radial-gradient(circle at 12% 20%, rgba(98,169,54,0.10), transparent 48%),
    radial-gradient(circle at 88% 80%, rgba(98,169,54,0.08), transparent 48%),
    var(--surface);
}
.age-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px; max-width: 1000px; margin: 0 auto;
}
.age-card {
  min-width: 0; text-align: center;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 34px 26px 30px; box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.age-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--secondary-light); }
.age-card-icon {
  width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%;
  background: var(--accent-light); color: var(--secondary);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.25s ease, color 0.25s ease;
}
.age-card:hover .age-card-icon { background: var(--secondary); color: #fff; }
.age-card-icon svg { width: 32px; height: 32px; }
.age-card h3 { font-size: 19px; font-weight: 800; color: var(--primary); margin: 0; letter-spacing: -0.01em; }
.age-card p { font-size: 14.5px; color: var(--text-muted); line-height: 1.7; margin: 10px 0 0; }

@media (max-width: 820px) {
  .age-band { padding: 56px 0; }
  .age-grid { grid-template-columns: minmax(0, 1fr); max-width: 420px; gap: 16px; }
  .age-card { padding: 26px 22px 24px; }
}

/* ==========================================================================
   19. 3D pack viewer — CSS-3D stand-up pouch on the product About section
   ========================================================================== */

.pack3d {
  --pack-w: 300px;              /* front panel width at scale 1 */
  --pack-h: 400px;              /* front panel height at scale 1 */
  --pack-d: 96px;               /* gusset depth (pouch thickness) */
  --pack-scale: 1;
  --pack-ry: -22deg;            /* rotation, driven by JS */
  --pack-rx: 6deg;

  display: flex; flex-direction: column; align-items: center; gap: 20px;
  padding: 34px 24px 26px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 74% 18%, rgba(98, 169, 54, 0.16), transparent 60%),
    linear-gradient(165deg, #FFFDF5 0%, var(--accent-light) 100%);
}

.pack3d-stage {
  position: relative;
  width: 100%;
  /* Tracks --pack-scale so a smaller pack does not leave a hole under the pouch.
     Bottom-aligned: the headroom belongs above, where the modelled top seal sits. */
  height: calc(var(--pack-h) * var(--pack-scale) + 78px);
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 26px;
  perspective: 1400px;
  perspective-origin: 50% 42%;
  touch-action: pan-y;         /* vertical page scroll still works over the pack */
  cursor: grab;
}
.pack3d-stage.is-grabbing { cursor: grabbing; }

.pack3d-glow {
  position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%);
  width: 74%; aspect-ratio: 1 / 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(98, 169, 54, 0.20), transparent 66%);
  filter: blur(6px);
}

.pack3d-pouch {
  position: relative;
  width: calc(var(--pack-w) * var(--pack-scale));
  height: calc(var(--pack-h) * var(--pack-scale));
  transform-style: preserve-3d;
  transform: rotateX(var(--pack-rx)) rotateY(var(--pack-ry));
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              width 0.45s ease, height 0.45s ease;
}
/* Edge-on mid-flip there is no panel left to see, only the reconstructed side; hiding
   it turns the flip into a clean front-to-back turn instead of a row of slivers. */
.pack3d-pouch.is-flipping .pack3d-edge { opacity: 0; }
.pack3d-edge { transition: opacity 0.16s ease; }
/* Drag and inertia set the angle frame by frame, so the transform must not be eased */
.pack3d-pouch.is-free { transition: width 0.45s ease, height 0.45s ease; }
/* One slow turn the first time the pack scrolls into view */
.pack3d-pouch.is-intro {
  transition: transform 2.6s cubic-bezier(0.34, 0.03, 0.15, 1),
              width 0.45s ease, height 0.45s ease;
}

.pack3d-face {
  position: absolute; inset: 0;
  overflow: hidden;
  border-radius: 16px 16px 10px 10px;
  backface-visibility: hidden;
}

/* ---- Front / back panels ---- */
.pack3d-front, .pack3d-back {
  background:
    linear-gradient(100deg, rgba(0, 0, 0, 0.10) 0%, rgba(255, 255, 255, 0) 22%),
    linear-gradient(178deg, #FFFDF5 0%, #FFF6E4 58%, #F6E8CE 100%);
  box-shadow: inset 0 0 0 1px rgba(59, 14, 26, 0.10);
}
.pack3d-front { transform: translateZ(calc(var(--pack-d) / 2)); }
.pack3d-back  { transform: rotateY(180deg) translateZ(calc(var(--pack-d) / 2)); }

/* Foil sheen that reads as a curved plastic surface */
.pack3d-gloss {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(95deg,
      rgba(255, 255, 255, 0.00) 0%,
      rgba(255, 255, 255, 0.55) 14%,
      rgba(255, 255, 255, 0.00) 30%,
      rgba(0, 0, 0, 0.05) 78%,
      rgba(0, 0, 0, 0.14) 100%);
  mix-blend-mode: soft-light;
}

/* Crimped top seal strip */
.pack3d-seal {
  position: absolute; top: 0; left: 0; right: 0; height: 8%;
  background: repeating-linear-gradient(90deg, var(--primary) 0 3px, var(--primary-light) 3px 6px);
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 10%;
}
.pack3d-seal span {
  width: 14px; height: 5px; border-radius: 3px;
  background: rgba(255, 255, 255, 0.55);
}

.pack3d-front-inner {
  position: absolute; inset: 8% 9% 6%;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding-top: 6%;
}
.pack3d-brand { width: 62%; height: auto; opacity: 0.95; }
.pack3d-headline {
  margin: 6% 0 0; font-size: calc(9px * var(--pack-scale) + 2px);
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--secondary);
}
.pack3d-name {
  margin: 3% 0 0; font-size: calc(15px * var(--pack-scale) + 3px);
  font-weight: 800; line-height: 1.15; color: var(--primary); letter-spacing: -0.01em;
}
.pack3d-tamil {
  margin: 2% 0 0; font-size: calc(9px * var(--pack-scale) + 2px);
  font-weight: 600; color: var(--primary-light);
}
.pack3d-pill {
  margin-top: 5%; padding: 4px 14px;
  background: var(--primary); color: #fff; border-radius: 999px;
  font-size: calc(7px * var(--pack-scale) + 2px); font-weight: 700; letter-spacing: 0.03em;
}
.pack3d-shot {
  flex: 1; width: 100%; min-height: 0; margin-top: 4%;
  display: flex; align-items: center; justify-content: center;
}
.pack3d-shot img {
  max-width: 96%; max-height: 100%; width: auto; height: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(59, 14, 26, 0.22));
}
.pack3d-foot {
  width: 100%; margin-top: 3%;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: calc(6px * var(--pack-scale) + 2px); font-weight: 700;
}
.pack3d-chip {
  padding: 3px 9px; border-radius: 999px;
  background: var(--accent-light); color: var(--secondary);
  border: 1px solid rgba(98, 169, 54, 0.35);
}
.pack3d-net { color: var(--primary); letter-spacing: 0.02em; }

/* ---- Back panel copy ---- */
.pack3d-back-inner {
  position: absolute; inset: 9% 10% 7%;
  display: flex; flex-direction: column; gap: 5%;
  text-align: left; color: var(--primary);
}
.pack3d-back-inner h4 {
  margin: 0 0 2%; font-size: calc(7px * var(--pack-scale) + 3px);
  font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--secondary);
}
.pack3d-ing {
  margin: 0; font-size: calc(6px * var(--pack-scale) + 2px); line-height: 1.5;
  color: var(--primary-light);
}
.pack3d-steps {
  margin: 0; padding-left: 1.1em;
  font-size: calc(6px * var(--pack-scale) + 2px); line-height: 1.7; color: var(--primary-light);
}
.pack3d-back-foot {
  margin-top: auto; display: flex; align-items: center; gap: 8px;
  font-size: calc(5px * var(--pack-scale) + 2px); font-weight: 600; color: var(--text-muted);
}
.pack3d-back-foot img { width: 46px; height: auto; }

/* ---- Side gussets ---- */
.pack3d-side {
  width: var(--pack-d); left: 50%; margin-left: calc(var(--pack-d) / -2);
  border-radius: 10px 10px 6px 6px;
  background: linear-gradient(90deg, #C9B48F 0%, #F3E6CC 34%, #E4D2B0 62%, #B79E77 100%);
  box-shadow: inset 0 0 0 1px rgba(59, 14, 26, 0.12);
  display: flex; align-items: center; justify-content: center;
}
.pack3d-side-left  { transform: rotateY(-90deg) translateZ(calc(var(--pack-w) * var(--pack-scale) / 2)); }
.pack3d-side-right { transform: rotateY( 90deg) translateZ(calc(var(--pack-w) * var(--pack-scale) / 2)); }
.pack3d-side-text {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(59, 14, 26, 0.55); white-space: nowrap;
}

/* ---- Top seal cap ---- */
.pack3d-top {
  height: var(--pack-d); bottom: auto;
  top: calc(var(--pack-d) / -2);
  border-radius: 6px;
  background: linear-gradient(180deg, #6B2233 0%, var(--primary) 100%);
  transform: rotateX(90deg) translateZ(calc(var(--pack-d) / 2));
}

/* ---- Ground shadow ---- */
.pack3d-shadow {
  position: absolute; left: 50%; bottom: 8%;
  width: calc(var(--pack-w) * var(--pack-scale) * 0.9);
  height: 26px; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(59, 14, 26, 0.30), transparent 70%);
  filter: blur(3px);
  transition: width 0.45s ease;
}

/* ---- Controls ---- */
.pack3d-controls { display: flex; align-items: center; gap: 10px; }
.pack3d-spin, .pack3d-flip {
  font-family: inherit; cursor: pointer;
  border: 1.5px solid rgba(59, 14, 26, 0.16);
  background: #fff; color: var(--primary);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.pack3d-spin {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.pack3d-flip {
  padding: 10px 22px; border-radius: 999px;
  font-size: 13.5px; font-weight: 700; letter-spacing: 0.01em;
}
.pack3d-spin:hover, .pack3d-flip:hover {
  background: var(--primary); color: #fff; border-color: var(--primary); transform: translateY(-1px);
}
.pack3d-flip[aria-pressed="true"] { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ---- Pack-size switcher ---- */
.pack3d-sizes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pack3d-size {
  font-family: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 84px; padding: 8px 14px; border-radius: var(--radius-sm);
  border: 1.5px solid rgba(59, 14, 26, 0.14);
  background: rgba(255, 255, 255, 0.7); color: var(--primary);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.pack3d-size strong { font-size: 13px; font-weight: 700; }
.pack3d-size span { font-size: 11px; color: var(--text-muted); }
.pack3d-size:hover { border-color: var(--secondary); }
.pack3d-size.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.pack3d-size.is-active span { color: rgba(255, 255, 255, 0.75); }

.pack3d-hint { margin: 0; font-size: 12px; color: var(--text-muted); text-align: center; }

.pack3d-spin:focus-visible, .pack3d-flip:focus-visible, .pack3d-size:focus-visible {
  outline: 2px solid var(--secondary); outline-offset: 2px;
}

@media (max-width: 900px) {
  .pack3d { --pack-w: 270px; --pack-h: 360px; --pack-d: 84px; }
}
@media (max-width: 480px) {
  .pack3d { --pack-w: 216px; --pack-h: 292px; --pack-d: 68px; padding: 26px 16px 22px; }
  .pack3d-size { min-width: 72px; padding: 7px 11px; }
}

/* Auto-spin is decorative — drag, buttons and size switching still work */
@media (prefers-reduced-motion: reduce) {
  .pack3d-pouch { transition: none; }
}


/* ---- Photo mode: real pack shots as the two panels ---------------------- */

.pack3d.is-photo {
  --pack-w: 340px;
  --pack-ratio: 0.6706;                          /* 629 / 938, the pack shot aspect */
  --pack-h: calc(var(--pack-w) / var(--pack-ratio));
  /* A reconstructed side can only ever be believable as a thin edge. At a quarter of
     the pack width it read as a second panel stuck to the pouch. */
  --pack-d: 44px;
  --pack-rx: 0deg;                               /* flat turntable — the pouch has no modelled top */
  padding: 24px 20px 22px;
  gap: 16px;
}
/* The stage hugs the pouch — just enough room under it for the cast shadow */
.pack3d.is-photo .pack3d-stage {
  height: calc(var(--pack-h) * var(--pack-scale) + 40px);
  align-items: center;
  perspective: 1700px; perspective-origin: 50% 50%;
}

.pack3d-photo {
  margin: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
.pack3d-photo img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 16px 26px rgba(59, 14, 26, 0.26));
}
.pack3d-photo-front { transform: translateZ(calc(var(--pack-d) / 2)); }
.pack3d-photo-back  { transform: rotateY(180deg) translateZ(calc(var(--pack-d) / 2)); }

/* The sheen has to sit on the artwork, not on a card behind it. --pack-sheen tracks
   the rotation, so the highlight sweeps across the pouch as it turns. */
.pack3d-photo .pack3d-gloss {
  border-radius: 14px;
  opacity: 0.55;
  mix-blend-mode: overlay;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) calc(var(--pack-sheen, 40%) - 30%),
    rgba(255, 255, 255, 0.75) var(--pack-sheen, 40%),
    rgba(255, 255, 255, 0) calc(var(--pack-sheen, 40%) + 26%),
    rgba(0, 0, 0, 0.16) 100%);
}

/* Gussets: the pack shot supplies only the alpha mask, so the side keeps the real pouch
   silhouette (rounded seal, tapered base) while being filled with plain silver foil.
   Painting the squashed front artwork here instead read as a smeared label.
   --pack-edge-l / -r are driven by the rotation so the lit side changes as it turns.

   The pouch only fills 94.28% of the shot's width (measured from the PNG's alpha:
   3.97% clear on the left, 1.75% on the right). Placing the gussets at the box edge
   left a visible slot between them and the panels, so both the depth they span and
   the distance they sit out are scaled to the pouch's real edges instead. */
.pack3d-edge {
  position: absolute;
  /* Measured off the PNG's alpha. The pouch tapers: half-width is 0.467 at the top
     seal, 0.413 down the body, 0.396 at the base. Sitting the gusset at the widest
     point left it hanging outside the body, so it sits at the body line (0.405) and
     runs only as far down as the pouch is still that wide — top 2.3%, bottom 92.5%. */
  /* One slice of the tapered side; --gt/--gh/--gz/--gd come from $gussetBands in
     pack-3d.php, where they are interpolated along the pouch's measured profile */
  top: var(--gt); height: var(--gh);
  width: calc(var(--pack-d) * var(--gd, 1));
  left: 50%; margin-left: calc(var(--pack-d) * var(--gd, 1) / -2);
  backface-visibility: hidden;
  /* Sampled off the pack's own edge band in both shots (RGB 189-230, a light neutral
     silver). Anything darker read as a separate object instead of merging with the
     pouch when the side comes into view. */
  background: linear-gradient(90deg,
    #BDBDC1 0%, #CFCFD3 14%, #E2E2E4 34%, #EDEDEF 50%,
    #DEDEE1 66%, #C6C6CA 86%, #B9B9BD 100%);
}
.pack3d-edge-left {
  transform: rotateY(-90deg) translateZ(calc(var(--pack-w) * var(--pack-scale) * var(--gz)));
  filter: brightness(var(--pack-edge-l, 0.96));
}
.pack3d-edge-right {
  transform: rotateY( 90deg) translateZ(calc(var(--pack-w) * var(--pack-scale) * var(--gz)));
  filter: brightness(var(--pack-edge-r, 0.96));
}

/* The cast shadow tightens as the pouch turns edge-on — --pack-face is |cos(ry)| */
.pack3d.is-photo .pack3d-shadow {
  bottom: 8px;
  height: 18px;
  width: calc(var(--pack-w) * var(--pack-scale) * (0.34 + 0.56 * var(--pack-face, 1)));
  opacity: calc(0.55 + 0.45 * var(--pack-face, 1));
  transition: none;
}

/* Corner marker that the pack is interactive */
.pack3d-badge {
  position: absolute; top: 4px; right: 6px;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(59, 14, 26, 0.08); color: var(--primary);
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
  pointer-events: none;
}

/* Corner marker that the pack is interactive */
/* Label PDF for the selected size */
.pack3d-pdf {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 34px; padding: 6px 14px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 700; color: var(--secondary);
  border: 1.5px dashed rgba(98, 169, 54, 0.45);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.pack3d-pdf:hover { background: var(--accent-light); color: var(--primary); border-color: var(--secondary); }
.pack3d-pdf:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }

.pack3d-stage:focus-visible { outline: 2px solid var(--secondary); outline-offset: 4px; border-radius: var(--radius-md); }

.pack3d-note { display: block; margin-top: 4px; }

/* `.pack3d.is-photo` outranks the plain `.pack3d` breakpoints above, so the photo
   pouch needs its own steps — height stays derived from --pack-w */
@media (max-width: 900px) {
  .pack3d.is-photo { --pack-w: 290px; --pack-d: 38px; }
}
@media (max-width: 480px) {
  .pack3d.is-photo { --pack-w: 228px; --pack-d: 30px; padding: 18px 14px 18px; }
}