/* Pumpeye Nutrition - custom product page styling (v2) */
:root {
  --pe-black:#1f2222; --pe-panel:#282c2c; --pe-orange:#ff5900; --pe-orange-dark:#ca4700;
  --pe-border:#333737; --pe-container:1500px;
  --pe-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.55 17.6 4.4 12.45a1 1 0 0 1 1.4-1.42l3.75 3.74 8.25-8.24a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E") no-repeat center / contain;
}

#MainContent[data-template="product"] {
  /* Media panel only behind the MAIN gallery (not product cards) */
  & media-gallery .product-media-container { background:var(--pe-panel); border-radius:10px; overflow:hidden; }
  & media-gallery .product-media-container .product-media { padding:24px; box-sizing:border-box; }
  & media-gallery .slideshow-controls__thumbnail { background:var(--pe-panel); border-radius:5px; overflow:hidden; padding:6px; box-sizing:border-box; }
  & media-gallery .slideshow-controls__thumbnail[aria-selected="true"] { outline:2px solid var(--pe-orange); outline-offset:-2px; }

  /* Title */
  & .product-details h1 { font-family:var(--font-primary--family); font-weight:800; text-transform:uppercase; font-size:clamp(30px,3.2vw,50px); line-height:1.05; color:var(--color-foreground); margin:0; }

  /* Price */
  & .product-details product-price .price,
  & .product-details product-price .price-item--sale { color:var(--pe-orange); font-weight:700; font-size:24px; font-family:var(--font-body--family); }
  & .product-details product-price .compare-at-price { color:#FFF; text-decoration:line-through; font-weight:500; font-size:14px; opacity: 1; }
  & .product-details product-price .price__sale { display:flex; align-items:baseline; gap:10px; }

  /* Variant pills */
  & .variant-picker__form { display:flex; flex-direction:column; gap:24px; }
  & .variant-option--buttons { border:0; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
  & .variant-option--buttons legend { flex-basis:100%; padding:0; margin:0 0 4px; font-family:var(--font-primary--family); font-weight:700; text-transform:uppercase; font-size:14px; color:var(--color-foreground); }
  & .variant-option__button-label { position:relative; display:inline-flex; align-items:center; justify-content:center; border:2px solid var(--pe-border); border-radius:5px; padding:10px 16px; cursor:pointer; background:transparent; transition:border-color .15s ease,color .15s ease; }
  & .variant-option__button-label input { position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
  & .variant-option__button-label__pill { display:none; }
  & .variant-option__button-label__text { font-family:var(--font-body--family); font-weight:600; font-size:14px; color:var(--color-foreground); text-transform:none; }
  & .variant-option__button-label:has(input:checked) { border-color:var(--pe-orange); }
  & .variant-option__button-label:has(input:checked) .variant-option__button-label__text { color:var(--pe-orange); }

  /* USP checklist (white checkmarks) */
  & .product-details ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:15px; }
  & .product-details ul li { position:relative; padding-inline-start:28px; margin:0; text-transform:uppercase; font-weight:700; font-size:14px; letter-spacing:.02em; line-height:1.2; }
  & .product-details ul li::before { content:""; position:absolute; inset-inline-start:0; top:50%; transform:translateY(-50%); width:16px; height:16px; background-color:#fff; -webkit-mask:var(--pe-check); mask:var(--pe-check); }
}

/* Two-column: details fixed 500px right + sticky */
@media screen and (min-width:1100px){
  #MainContent[data-template="product"] .product-information--media-left { grid-template-columns:minmax(0,1fr) 525px !important; }
  #MainContent[data-template="product"] .product-details { position:sticky; top:calc(var(--header-height,0px) + 24px); align-self:start; }
}