/* Product page — FULL CSS
   - Sticky promo timer sits under navbar, respects left sidebar, collapses on end
   - Larger product title & subtitle
   - Thumbnails 10% smaller (stay aligned with main image)
   - Ubuntu Score card (accent #d77c41)
   - Guarantee hero (mobile-safe)
   - Sticky buy bar (button on left on desktop)
   - Checkout nudge modal + toast
*/

:root{
  --brand:#0c3f4c;           /* page primary */
  --accent:#ff8a00;
  --ink:#1a202c;
  --muted:#6b7280;

  --surface:#fff;
  --bg:#f7f8f9;
  --shadow:0 2px 10px rgba(0,0,0,.06);

  --nav-h:56px;              /* computed in JS */
  --sidebar-w:0px;           /* computed in JS */

  --us-accent:#d77c41;       /* Ubuntu Score accent */

  --gDark1:#0b3c45;          /* Guarantee gradient */
  --gDark2:#0e5b67;
}

html,body{height:100%}
body{background:var(--bg);color:var(--ink);margin:0}

/* Content starts below fixed/sticky navbar if present */
.page-wrap{ padding-top:0 }
body.has-fixed-nav .page-wrap{ padding-top:var(--nav-h) }
@media (min-width:1024px){
  .page-wrap{ padding-left:var(--sidebar-w) }
}

/* If your theme’s navbar isn’t sticky on mobile, fail-safe it */
@media (max-width:1023px){
  nav.navbar, .navbar, header.site-header, #navbar, .top-nav, header.header{
    position:sticky; top:0; z-index:10000;
  }
}

/* ===================== TIMER ===================== */
/* Sits directly under navbar, never overlaps it or the left sidebar */
.promo-timer{
  position:sticky;
  top:0; /* default when navbar isn't fixed */
  z-index:9998;
  background:var(--brand);
  color:#fff;
  text-align:center;
  padding:.55rem .9rem;
  font-weight:800;
  display:flex; gap:.5rem; align-items:center; justify-content:center;
  min-height:36px;

  /* keep it out of the sidebar column on desktop */
  margin-left: var(--sidebar-w);
  width: calc(100% - var(--sidebar-w));
}
/* When navbar is fixed/sticky, offset timer below it */
body.has-fixed-nav .promo-timer{ top:var(--nav-h) }

/* We keep the spacer at zero height for compatibility */
.timer-spacer{ height:0 }

/* ===================== HERO (bigger, readable) ===================== */
.hero{
  background:linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(12,63,76,0.08) 100%);
  padding:32px 16px 12px
}
.hero__inner{ max-width:1100px; margin:0 auto; text-align:center }
.hero__title{
  font-size:clamp(28px, 4.2vw, 46px);
  line-height:1.12;
  margin:0 0 10px;
  font-weight:900;
}
.hero__tagline{
  color:#0f2730;
  font-size:clamp(16px, 2.2vw, 20px);
  line-height:1.55;
  font-weight:700;
  margin:0 0 18px;
}
.hero-bullets{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin:0 0 16px }
.hb__item{ background:#eef7f5; color:#0f4a43; padding:6px 10px; border-radius:999px; font-weight:600; font-size:14px }
.hero__cta{ display:inline-block; background:var(--brand); color:#fff; padding:12px 20px; border-radius:10px; text-decoration:none; font-weight:700 }
.hero__cta:hover{ filter:brightness(1.08) }

/* ===================== GRID ===================== */
.product-detail{
  max-width:1100px; margin:20px auto; display:grid; gap:20px;
  grid-template-columns:1fr; grid-auto-rows:min-content;
}
@media (min-width:1024px){
  .product-detail{ grid-template-columns:1fr 1fr; }
  .guarantee-wide{ grid-column:1 / -1 }
  .us-wide{ grid-column:1 / -1 }
}

/* ===================== MEDIA + GALLERY ===================== */
.product-image{ background:var(--surface); border-radius:14px; box-shadow:var(--shadow); padding:16px }
.product-media{ border-radius:12px; overflow:hidden }
.media-frame{ position:relative; background:#f2f4f6 }
.ar-3x2{ aspect-ratio:3/2 }
#main-photo{ width:100%; height:100%; object-fit:cover; display:block }

.gallery-static{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:10px 0 0 }
@media (max-width:480px){ .gallery-static{ grid-template-columns:repeat(3,1fr) } }
.thumb-frame{ border:0; padding:0; background:transparent; cursor:pointer }
.thumb-frame img{
  width:100%; height:100%; object-fit:cover; border-radius:8px; box-shadow:none;
  transform: scale(0.9);                /* 10% smaller */
  transition: transform .15s ease;
}
.thumb-frame:hover img{ transform: scale(0.94) }
.thumb-frame:focus{ outline:2px solid var(--brand); outline-offset:2px }

/* ===================== INFO CARD ===================== */
.product-info{ background:var(--surface); border-radius:14px; box-shadow:var(--shadow); padding:16px }
.price-line{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px }
.price{ font-size:clamp(22px,3vw,28px); font-weight:900; letter-spacing:.2px }
.badges{ display:flex; gap:8px; flex-wrap:wrap }
.badge{ background:#eef7f5; color:#0f4a43; padding:6px 10px; border-radius:999px; font-weight:700; font-size:12px }
.badge--green{ background:#e9f9ef; color:#0a6c3a }

/* ===================== FREE SHIPPING ===================== */
.freeship{ background:#f6faf9; border:1px solid #e3f0ed; border-radius:10px; padding:10px; margin:10px 0 }
.fs-text{ font-weight:700; margin-bottom:8px }
.fs-bar{ background:#eaf4f2; border-radius:999px; height:8px; overflow:hidden }
.fs-bar__fill{ background:var(--brand); height:100%; width:0%; transition:width .25s ease }

/* ===================== DESCRIPTION ===================== */
.description{ color:#374151; line-height:1.55; white-space:pre-line }

/* ===================== BUY FORM ===================== */
.product-form{ display:flex; align-items:center; gap:12px; margin:14px 0 8px }
.product-form label{ display:flex; align-items:center; gap:6px; font-weight:700 }
.product-form input[type="number"]{ width:70px; padding:8px 10px; border:1px solid #d1d5db; border-radius:8px; font-weight:700 }
.btn-buy{ background:var(--brand); color:#fff; border:0; padding:12px 16px; border-radius:10px; font-weight:800; cursor:pointer }
.btn-buy:hover{ filter:brightness(1.08) }

/* ===================== BUNDLE ===================== */
.bundle{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  border:1px dashed #b8d6d1; background:#f8fdfa; padding:12px 14px; border-radius:12px; margin:8px 0 2px
}
.bundle__title{ font-weight:900 }
.bundle__note{ color:#0a4e46 }
.bundle__btn{ background:var(--brand); color:#fff; border:0; padding:10px 14px; border-radius:10px; font-weight:800; cursor:pointer }
.bundle__btn:hover{ filter:brightness(1.08) }

/* ===================== TRUST ROW ===================== */
.trust-row{ display:grid; gap:8px; grid-template-columns:repeat(3,1fr); background:#fff; border-radius:12px; padding:12px; box-shadow:var(--shadow); margin-top:8px }
.trust-row > div{ text-align:center; font-weight:700 }

/* ===================== UBUNTU SCORE (accent #d77c41) ===================== */
.us-card{ background:#fff; border:1px solid #efe7e2; border-radius:14px; box-shadow:var(--shadow); padding:16px }
.us-hd{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:10px }
.us-hd-left{ display:flex; align-items:center; gap:12px }
.us-logo{ height:28px; width:auto; display:block }
.us-logo-fallback{ background:var(--us-accent); color:#fff; font-weight:900; border-radius:999px; padding:6px 10px; display:inline-block }
.us-hd-texts{ display:flex; flex-direction:column; gap:2px }
.us-h1{ font-weight:900; font-size:12px; letter-spacing:.25px; text-transform:uppercase; color:var(--us-accent) }
.us-h2{ font-weight:900; color:#1f2937 }
.us-hd-right{ display:flex; align-items:center; gap:8px }
.us-rating-pill{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background:#fdeee5; color:#7b3f1e; font-weight:800; font-size:13px; border:1px solid #f6d2bf
}
.us-revcount{ color:#6b7280; font-weight:700 }
.us-na{ color:#9aa6af; font-weight:800 }
.us-comments{ list-style:none; padding:0; margin:0; display:grid; gap:12px }
.us-cmt{
  display:grid; grid-template-columns:auto 1fr; gap:12px;
  border:1px solid #f5e6dd; background:#fff; border-radius:12px; padding:12px 14px
}
.us-cmt-avatar{
  width:36px; height:36px; border-radius:999px; display:grid; place-items:center; font-weight:900;
  background:#fde7da; color:#7b3f1e; border:1px solid #f6d2bf;
}
.us-cmt-body{ display:grid; gap:6px }
.us-cmt-top{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-weight:700; color:#1f2937 }
.us-cmt-dot{ opacity:.4 }
.us-cmt-verified{ background:#e9f9ef; color:#0a6c3a; border-radius:999px; padding:2px 8px; font-weight:800; font-size:12px }
.us-cmt-rating{ background:#fdeee5; color:#7b3f1e; border-radius:999px; padding:2px 8px; font-weight:800; font-size:12px; border:1px solid #f6d2bf }
.us-cmt-title{ font-weight:800 }
.us-cmt-text{ color:#374151; line-height:1.55 }
.us-empty{ color:#6b7280; font-weight:700; padding:6px 0 }
.us-footer{ margin-top:10px }
.us-link{ color:var(--us-accent); font-weight:800; text-decoration:none }
.us-link:hover{ text-decoration:underline }

/* ===================== GUARANTEE ===================== */
@media (max-width:767px){ .guarantee-wide{ padding-left:12px; padding-right:12px } }
.guarantee-wide .g-card{
  position:relative; border-radius:22px; padding:30px 22px; text-align:center;
  color:#fff;
  background: radial-gradient(110% 140% at 10% 0%, var(--gDark2), var(--gDark1) 60%);
  box-shadow: 0 18px 50px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.06);
}
@media (max-width:480px){ .guarantee-wide .g-card{ padding:22px 16px; border-radius:18px } }
.g-hero .g-icon{ margin:0 auto 8px; filter: drop-shadow(0 6px 18px rgba(0,0,0,.25)); width:54px }
.g-title{
  margin:6px 0 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(22px, 4.2vw, 40px);
  line-height:1.15; font-weight:800; letter-spacing:.3px;
  text-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.g-copy{
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(14px, 2vw, 18px);
  line-height:1.6; margin:0 auto; max-width:900px;
  text-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.g-foot{ display:block; opacity:.9; margin-top:6px }
.g-link{ color:#fff; text-underline-offset:3px }

/* ===================== RELATED READS / FAQ ===================== */
.related-reads{ background:#fff; border-radius:14px; box-shadow:var(--shadow); padding:16px }
.reads{ list-style:none; padding:0; margin:0; display:grid; gap:10px }
.reads a{ color:var(--brand); text-decoration:none; font-weight:800 }
.read-date{ color:#6b7280; font-size:12px }

.more-info{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:1024px){ .more-info{ grid-template-columns:1fr 1fr } }
.more-info .info, .more-info .faq{ background:#fff; border-radius:14px; box-shadow:var(--shadow); padding:16px }
.more-info h3{ margin:0 0 8px }
.faq details{ background:#f7faf9; border:1px solid #e6f0ed; border-radius:10px; padding:10px 12px; margin-bottom:8px }
.faq summary{ cursor:pointer; font-weight:800 }

/* ===================== STICKY BUY BAR ===================== */
.sticky-buy{
  position:fixed; left:0; right:0; bottom:-200px; opacity:0; transform:translateY(0);
  transition:all .25s ease; z-index:9997; background:var(--brand); color:#fff;
  padding:10px 12px; display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center
}
.sticky-buy.show{ bottom:0; opacity:1 }
.sb-title{ font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.sb-price{ font-weight:900 }
.sb-form{ display:flex; align-items:center; gap:8px }
.sb-qty{ width:64px; padding:8px 10px; border-radius:8px; border:0 }
.sb-btn{ background:#fff; color:var(--brand); border:0; padding:10px 14px; border-radius:10px; font-weight:900; cursor:pointer }
.sb-btn:hover{ filter:brightness(0.95) }
.sb-freeship{ grid-column:1 / -1; font-weight:700 }

/* Reorder on >=768px so form (button) is on the left */
@media (min-width:768px){
  .sticky-buy{
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "form title price" "fs fs fs";
  }
  .sb-form{ grid-area: form; justify-self:start }
  .sb-title{ grid-area: title }
  .sb-price{ grid-area: price; justify-self:end }
  .sb-freeship{ grid-area: fs }
}

/* ===================== CHECKOUT NUDGE MODAL ===================== */
.nudge[hidden]{ display:none !important }
.nudge{ position:fixed; inset:0; z-index:10000; display:grid; place-items:center; }
.nudge__overlay{ position:absolute; inset:0; background:rgba(0,0,0,.45); opacity:0; transition:opacity .2s ease }
.nudge__card{
  position:relative;
  max-width:520px; width:92%;
  background:#fff; border-radius:16px; box-shadow:0 30px 70px rgba(0,0,0,.25);
  padding:20px 18px;
  transform:translateY(12px) scale(.98); opacity:0; transition:transform .2s ease, opacity .2s ease;
}
.nudge__icon{ font-size:32px; margin-bottom:8px }
.nudge__close{ position:absolute; right:10px; top:8px; border:0; background:transparent; font-size:22px; cursor:pointer }
.nudge__actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px }
.nudge__cta{
  background:var(--brand); color:#fff; text-decoration:none; padding:10px 14px; border-radius:10px; font-weight:900; display:inline-block
}
.nudge__secondary{ background:#eef2f3; border:0; padding:10px 14px; border-radius:10px; font-weight:800; cursor:pointer }
@media (max-width:480px){
  .nudge__card{ width:94%; padding:18px 16px }
}
.nudge[data-open] .nudge__overlay{ opacity:1 }
.nudge[data-open] .nudge__card{ transform:translateY(0) scale(1); opacity:1 }

/* ===================== TOAST ===================== */
.toast[hidden]{ display:none !important }
.toast{
  position:fixed; left:50%; transform:translateX(-50%) translateY(6px);
  bottom:24px; z-index:10001; background:var(--brand); color:#fff;
  padding:10px 14px; border-radius:10px; font-weight:800; opacity:0; transition:opacity .2s ease, transform .2s ease;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0) }

/* ===================== UTIL ===================== */
.muted{ color:#6b7280 }
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}