/* High-Converting Product Page Styles */
:root{
  --brand-50:#eef6ff; --brand-100:#dbeafe; --brand-200:#bfdbfe; --brand-300:#93c5fd; --brand-400:#60a5fa; --brand-500:#3b82f6; --brand-600:#2563eb; --brand-700:#1d4ed8; --brand-800:#1e40af; --brand-900:#1e3a8a;
  --accent:#10b981; --danger:#ef4444; --text:#0f172a; --muted:#475569; --line:#e2e8f0; --bg:#ffffff; --bg-muted:#f8fafc;
  --radius:16px; --shadow:0 10px 25px rgba(2,6,23,.08), 0 2px 8px rgba(2,6,23,.06); --container:1200px;
}

/* Map to store theme when inside store layout */
body.store-body {
  --brand-500: var(--store-primary, #0052CC);
  --brand-600: var(--store-primary, #0052CC);
  --accent: var(--store-accent-1, #FDBA21);
  --danger: var(--store-accent-2, #D7263D);
  --text: var(--store-text-primary, #1A1D25);
  --muted: var(--store-text-secondary, #55606A);
  --line: #E6E9EE;
  --bg: var(--store-bg, #F2F4F7);
  --bg-muted: #F7F8FA;
  --shadow: 0 8px 20px rgba(0,82,204,0.06), 0 2px 8px rgba(0,82,204,0.04);
  /* Additional mapping for call-to-action */
  --cta-color: var(--store-accent-1, #FDBA21);
  --primary: var(--store-primary, #0052CC);
}

*, *::before, *::after{ box-sizing:border-box; }
html, body{ xheight:100%; }
body{ margin:0; font:16px/1.5 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; color:var(--text); background:var(--bg); }
img{ max-width:100%; display:block; }
a{ color:var(--brand-700); text-decoration:none; }
a:hover{ text-decoration:underline; }
.container{ max-width:var(--container); margin-inline:auto; padding:24px; }

/* Header / Breadcrumb */
.breadcrumb{ font-size:.875rem; color:var(--muted); display:flex; gap:8px; flex-wrap:wrap; align-items:center; width:100%; }
.breadcrumb a{ color:inherit; }
.cart-link{ margin-left: auto; }

/* Product grid */
.product{ display:grid; grid-template-columns: 1.1fr .9fr; gap:32px; align-items:start; }
@media (max-width: 980px){ .product{ grid-template-columns:1fr; } }

/* Gallery */
.gallery{ position:relative; }
.main-image{ width:100%; aspect-ratio: 1 / 1; border-radius:var(--radius); background:var(--store-surface, #FFFFFF) center/cover no-repeat; box-shadow:var(--shadow); }
.thumbs{ margin-top:12px; display:grid; grid-template-columns: repeat(6, 1fr); gap:10px; }
.thumb{ border:1px solid var(--line); background:#fff center/cover no-repeat; aspect-ratio:1; border-radius:12px; cursor:pointer; position:relative; }
.thumb[aria-selected="true"]{ outline:2px solid var(--brand-600); outline-offset:2px; }

/* Summary */
.summary h1{ font-size: clamp(1.35rem, 3.2vw, 2.25rem); line-height:1.2; margin:0 0 6px; color:var(--text); }
.subhead{ color:var(--muted); font-size:.95rem; margin-bottom:10px; }

.rating{ display:flex; align-items:center; gap:8px; margin:8px 0 14px; }
.stars{ --w:110px; width:var(--w); height:20px; background:linear-gradient(90deg, var(--accent) var(--fill,98%), #e5e7eb var(--fill,98%)); -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110 20"><g fill="%23000"><polygon points="10,1 12.9,7 20,7.6 14.8,11.9 16.3,19 10,15.4 3.7,19 5.2,11.9 0,7.6 7.1,7"/><use href="#s" x="22"/><use href="#s" x="44"/><use href="#s" x="66"/><use href="#s" x="88"/></g><defs><polygon id="s" points="10,1 12.9,7 20,7.6 14.8,11.9 16.3,19 10,15.4 3.7,19 5.2,11.9 0,7.6 7.1,7"/></defs></svg>') center/contain repeat-x; mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110 20"><g fill="%23000"><polygon points="10,1 12.9,7 20,7.6 14.8,11.9 16.3,19 10,15.4 3.7,19 5.2,11.9 0,7.6 7.1,7"/><use href="#s" x="22"/><use href="#s" x="44"/><use href="#s" x="66"/><use href="#s" x="88"/></g><defs><polygon id="s" points="10,1 12.9,7 20,7.6 14.8,11.9 16.3,19 10,15.4 3.7,19 5.2,11.9 0,7.6 7.1,7"/></defs></svg>') center/contain repeat-x; border-radius:4px; }
.rating small{ color:var(--muted); }

.price-row{ display:flex; align-items:center; gap:12px; margin:4px 0 10px; }
.price{ font-weight:700; font-size:1.6rem; color:var(--text); }
.compare{ color:var(--muted); text-decoration:line-through; }
.save{ color:#0a7; font-weight:600; font-size:.95rem; background: #ecfeff; border:1px solid #a7f3d0; padding:2px 8px; border-radius:999px; }

.urgency{ background:var(--bg-muted); border:1px solid var(--line); padding:10px 12px; border-radius:12px; display:grid; gap:8px; }
.countdown{ font-weight:600; }
.stock{ }
.bar{ background:var(--store-surface, #FFFFFF); height:8px; border-radius:999px; overflow:hidden; }
.bar > span{ display:block; height:100%; background:linear-gradient(90deg, var(--brand-500), var(--brand-700)); width:40%; }
.stock small{ color:var(--muted); }

.opts{ margin:16px 0; display:grid; gap:14px; }
.labelrow{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.labelrow .help{ font-size:.9rem; color:var(--brand-700); cursor:pointer; }

.swatches{ display:flex; gap:10px; flex-wrap:wrap; }
.swatch{ width:34px; height:34px; border-radius:999px; border:2px solid #fff; box-shadow:0 0 0 1px var(--line); cursor:pointer; position:relative; }
.swatch[aria-pressed="true"]{ box-shadow:0 0 0 2px var(--brand-600), 0 0 0 1px #fff inset; }
.swatch[title]{ outline:0; }

.chip{ padding:10px 14px; min-width:42px; text-align:center; border:1px solid var(--line); border-radius:12px; background:#fff; cursor:pointer; font-weight:600; }
.chip[disabled]{ opacity:.4; cursor:not-allowed; }
.chip[aria-pressed="true"]{ outline:2px solid var(--brand-600); outline-offset:2px; }

.qtyrow{ display:flex; gap:12px; align-items:center; }
.qty{ display:inline-flex; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.qty button{ width:40px; height:40px; border:0; background:#fff; cursor:pointer; font-size:18px; }
.qty input{ width:56px; height:40px; border:0; text-align:center; font-size:15px; }

.cta{ display:grid; grid-template-columns: 1fr; gap:10px; margin:6px 0 2px; }
.btn{ appearance:none; border:0; cursor:pointer; border-radius:12px; font-weight:700; padding:14px 16px; }
.btn.primary{ background:linear-gradient(180deg, var(--brand-500), var(--brand-600)); color:#fff; box-shadow:var(--shadow); }
.btn.primary:disabled{ opacity:.6; cursor:not-allowed; }
.btn.buy{ background:var(--primary); color:#fff; }

.trust{ display:flex; gap:12px; flex-wrap:wrap; margin-top:6px; color:#0f5132; background:#ecfdf5; border:1px solid #bbf7d0; padding:10px 12px; border-radius:12px; align-items:center; }
.trust svg{ width:18px; height:18px; }

.payments{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; color:var(--muted); font-size:.9rem; }
.payicon{ padding:6px 10px; border:1px solid var(--line); border-radius:8px; background:#fff; }

.bullets{ margin:18px 0; display:grid; gap:8px; }
.bullets li{ list-style:none; padding-left:28px; position:relative; }
.bullets li:before{ content:"✓"; position:absolute; left:0; top:0; color:var(--accent); font-weight:900; }

/* Sections */
.section{ margin-top:40px; }
.section h2{ font-size: clamp(1.1rem, 2.5vw, 1.5rem); margin:0 0 10px; }
.ugc{ display:flex; gap:12px; overflow:auto; padding-bottom:4px; }
.ugc .card{ min-width:220px; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; box-shadow:0 2px 12px rgba(2,6,23,.04); }
.ugc .ph{ aspect-ratio: 3 / 4; background:var(--store-surface, #E8ECEF) center/cover; }
.ugc .cap{ padding:8px 10px; font-size:.9rem; color:var(--muted); }

details{ border:1px solid var(--line); border-radius:12px; background:#fff; }
details + details{ margin-top:10px; }
summary{ list-style:none; padding:14px 16px; cursor:pointer; font-weight:700; }
summary::-webkit-details-marker{ display:none; }
details .content{ padding:0 16px 14px; color:var(--store-text-primary); }

/* Cross-sell */
.grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; }
@media (max-width: 980px){ .grid{ grid-template-columns: repeat(2, 1fr); } }
.tile{ border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; }
.tile .ph{ aspect-ratio: 1; background:var(--store-surface, #E8ECEF) center/cover; }
.tile .info{ padding:10px 12px; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.tile .info span{ font-weight:600; }

/* Reviews */
.reviews{ display:grid; gap:12px; }
.review{ border:1px solid var(--line); border-radius:14px; padding:12px; background:#fff; }
.review .meta{ display:flex; justify-content:space-between; align-items:center; gap:10px; color:var(--muted); font-size:.9rem; }

/* Sticky mobile bar */
.stickybar{ position:fixed; left:0; right:0; bottom:0; background:rgba(255,255,255,.96); backdrop-filter:saturate(1.2) blur(6px); border-top:1px solid var(--line); padding:10px 12px; display:none; gap:10px; align-items:center; z-index:50; }
@media (max-width: 980px){ .stickybar{ display:flex; } }
.stickybar .title{ font-weight:700; }
.stickybar .price{ margin-left:auto; font-weight:700; }
.stickybar .btn{ padding:10px 14px; }

/* Size Guide Modal */
.modal{ position:fixed; inset:0; background:rgba(15,23,42,.5); display:none; align-items:center; justify-content:center; z-index:60; }
.modal[open]{ display:flex; }
.dialog{ background:#fff; width:min(640px, 92vw); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); }
.dialog header{ padding:12px 16px; font-weight:800; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }
.dialog .body{ padding:14px 16px; }
.dialog table{ width:100%; border-collapse:collapse; font-size:.95rem; }
.dialog th, .dialog td{ border-bottom:1px solid var(--line); padding:8px 6px; text-align:center; }

/* Toast */
.toast{ position:fixed; left:50%; transform:translateX(-50%); bottom:90px; background:#111827; color:#fff; padding:12px 16px; border-radius:12px; box-shadow:var(--shadow); display:none; z-index:70; }

/* Embedded Checkout Styles */
.summary-item {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: var(--sl-spacing-large);
    padding: var(--sl-spacing-large);
    border-bottom: 1px solid var(--sl-color-neutral-200);
    align-items: center;
    background: var(--sl-color-neutral-50);
    border-radius: var(--sl-border-radius-medium);
    margin-bottom: var(--sl-spacing-medium);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.summary-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.summary-item-image {
    width: 80px;
    height: 80px;
    background: var(--sl-color-neutral-200);
    border-radius: var(--sl-border-radius-medium);
    background-size: cover;
    background-position: center;
    border: 2px solid var(--sl-color-neutral-300);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.summary-item-details h4 {
    font-size: var(--sl-font-size-large);
    font-weight: var(--sl-font-weight-bold);
    color: var(--sl-color-neutral-900);
    margin: 0 0 var(--sl-spacing-small) 0;
    line-height: 1.3;
}

.summary-item-details p {
    font-size: var(--sl-font-size-medium);
    color: var(--sl-color-neutral-700);
    margin: var(--sl-spacing-x-small) 0;
    line-height: 1.5;
}

.summary-item-details .item-quantity {
    font-weight: var(--sl-font-weight-semibold);
    color: var(--sl-color-primary-600);
}

.summary-item-price {
    font-size: var(--sl-font-size-large);
    font-weight: var(--sl-font-weight-bold);
    color: var(--sl-color-primary-600);
    text-align: right;
    background: var(--sl-color-primary-50);
    padding: var(--sl-spacing-small) var(--sl-spacing-medium);
    border-radius: var(--sl-border-radius-medium);
    border: 1px solid var(--sl-color-primary-200);
}

.summary-totals {
    margin-top: var(--sl-spacing-large);
    padding: var(--sl-spacing-large);
    border-top: 2px solid var(--sl-color-neutral-300);
    background: var(--sl-color-neutral-25);
    border-radius: var(--sl-border-radius-medium);
}

.total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0px;
    font-size: var(--sl-font-size-large);
    font-weight: var(--sl-font-weight-medium);
    padding: 2px 0;
}

.total-row:last-child {
    margin-bottom: 0;
}

.total-row.order-total span {
    font-weight: bold;
}

.total-final {
    padding: var(--sl-spacing-medium);
    margin-top: var(--sl-spacing-medium);
    border-top: 2px solid var(--sl-color-primary-300);
    font-size: var(--sl-font-size-x-large);
    background: var(--sl-color-primary-50);
    border-radius: var(--sl-border-radius-medium);
    color: var(--sl-color-primary-700);
}

.free-shipping {
    color: var(--sl-color-success-600);
    font-weight: var(--sl-font-weight-medium);
}

/* Helpers */
.muted{ color:var(--muted); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
/* Qty + CTA inline layout */
.qty-cta {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
}

.qty-cta .cta {
  margin: 0;
  display: inline-block;
}

/* Ensure add button doesn't become too wide next to qty input */
.qty-cta .btn {
  white-space: nowrap;
}

/* Responsive behaviour: stack on small screens */
@media (max-width: 520px) {
  .qty-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .qty-cta .cta {
    width: 100%;
  }
}