/* Spartan Peptides: single product page.
   Loaded by slug through sp_page_style_slugs() in inc/enqueue.php, after site.css.
   Section 1 is the product-only block from design/product.html.
   Section 2 maps those design rules onto the markup WooCommerce really prints.
   The .nf empty state lives in site.css and is not repeated here. */

/* ---------------------------------------------------------------------------
   1. Design rules (design/product.html page style block)
   ------------------------------------------------------------------------- */

.pdp .crumbs{margin-bottom:34px}
.pdp .crumbs span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.p-fam{display:inline-flex;align-items:center;gap:10px}
.p-fam a:hover{color:var(--navy)}
.pdp-info h1{overflow-wrap:anywhere}
.p-price b{font-weight:400;display:inline-block}
.p-total{display:block;margin-top:8px;font-size:13px;color:var(--muted);min-height:1.4em}
.p-total + .ruo{margin-top:12px}
.g-badges{flex-wrap:wrap;right:18px}
.g-main img{transform-origin:50% 50%}
.g-main.nozoom{cursor:default}
.g-hint{position:absolute;right:16px;bottom:16px;z-index:2;display:flex;align-items:center;gap:8px;font:500 10.5px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:opacity .4s var(--ease)}
.g-main.zoom .g-hint{opacity:0}
.g-thumbs button{cursor:default}
.buy .btn i{transition:transform .45s var(--ease)}
.pdp-links{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:18px}
.pdp-links a{display:inline-flex;align-items:center;gap:10px;font:500 12px var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--navy)}
.pdp-links a i{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:12px;transition:background .3s,color .3s,border-color .3s}
.pdp-links a:hover i{background:var(--navy);border-color:var(--navy);color:#fff}
.spec-title{margin:34px 0 12px}
.coa-card a i{transition:transform .45s var(--ease)}
.coa-card a:hover i{transform:translateX(4px)}
.ptab-panel .prose{max-width:760px}
.ptab-panel .acc-q{font-size:17px}
.xsell{padding:30px 0 100px}
.xsell + .xsell{padding-top:0}
.xsell-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:36px}
.xsell-head .display{font-size:clamp(30px,3.6vw,44px);margin-top:14px}
.xsell-head a{font:500 12px var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--navy);display:inline-flex;gap:10px;align-items:center}
.grid4>*{min-width:0}
.grid4 .card-size{flex-wrap:wrap}
.sticky-buy .btn{padding:0 22px}
body:has(.sticky-buy.show) .toast{bottom:104px}
/* the raised toast needs a longer hidden offset, otherwise it peeks above the sticky bar */
body:has(.sticky-buy.show) .toast:not(.show){transform:translate(-50%,calc(100% + 140px))}

/* ---------------------------------------------------------------------------
   2. WooCommerce markup bridge
   The design classes above assume markup the prototype wrote by hand. Woo
   prints its own, so the same look is mapped onto the real elements here.
   No new design decisions, only the same values applied to Woo's selectors.
   ------------------------------------------------------------------------- */

/* Summary column.
   Woo gives the single product summary the class .summary, which site.css already
   uses for the CART and CHECKOUT order total card (grey panel, sticky, padded).
   That card leaked onto the product page. Reset it back to a plain column here,
   without touching the cart rule. */
.pdp-grid .summary.pdp-info{position:static;top:auto;padding:0;border:0;border-radius:0;background:none}

/* Gallery tile.
   The design positions the product shot absolutely against .g-main. Woo nests the
   image two levels deeper (__wrapper > __image > a > img), and those levels are
   what scripts hang inline styles on, so each one is stretched to fill the tile.
   Without this the image's own parent is zero height and, as soon as anything sets
   overflow:hidden on it, the shot disappears while the tile still paints. */
.g-main .woocommerce-product-gallery__wrapper{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.g-main .woocommerce-product-gallery__image{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;float:none;display:block}
.g-main .woocommerce-product-gallery__image > a{display:block;width:100%;height:100%}
.g-main .woocommerce-product-gallery__image--placeholder{position:absolute;inset:0}
/* flexslider only wraps the tile when a product has more than one image in the
   Woo wrapper; the viewport it inserts has to fill the tile too. */
.g-main .flex-viewport{position:absolute;inset:0}
/* Woo prints the gallery trigger (its own magnifier button) only with the lightbox
   on. The design's .g-hint already says "hover to zoom", so the two do not stack. */
.gallery .woocommerce-product-gallery__trigger{display:none}

/* Product title: Woo prints h1.product_title, the design used h1.display. */
.pdp-info .product_title{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-.035em;line-height:.92;color:var(--navy)}

/* Price: Woo prints p.price inside the summary. */
.pdp-info p.price{font:400 30px/1 var(--display);color:var(--navy);display:flex;align-items:baseline;flex-wrap:wrap;gap:12px;margin:0 0 4px}
.pdp-info p.price del{font-size:20px;color:var(--muted);opacity:1}
.pdp-info p.price ins{text-decoration:none}
.pdp-info p.price .woocommerce-price-suffix,
.pdp-info p.price > small{font-size:13px;color:var(--muted)}
.pdp-info p.price .price{font:inherit;color:inherit}

.pdp-info .woocommerce-product-details__short-description{margin-top:18px;font-size:15px;line-height:1.75}
.pdp-info .woocommerce-product-details__short-description p{margin-bottom:12px}
.pdp-info .stock{margin-top:12px;font:500 12px var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pdp-info .stock.out-of-stock{color:var(--err)}

/* Research use notice, printed by inc/woocommerce.php at priority 31. */
.research-notice{display:flex;gap:12px;align-items:flex-start;margin:24px 0;padding:14px 16px;border-radius:14px;background:#F4F5F7;font-size:13px;line-height:1.55;color:var(--text)}
.research-notice i{color:var(--navy);margin-top:3px}

/* Add to cart form: the design's .buy row, built from Woo's own form. */
.pdp-info form.cart{margin:26px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.pdp-info form.cart.variations_form,
.pdp-info form.grouped_form{display:block}
.pdp-info form.cart .quantity{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:30px;height:56px;overflow:hidden}
.pdp-info form.cart .quantity input.qty{width:56px;height:54px;border:0;background:none;text-align:center;font:500 16px var(--display);color:var(--navy);-moz-appearance:textfield;appearance:textfield}
.pdp-info form.cart .quantity input.qty::-webkit-outer-spin-button,
.pdp-info form.cart .quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pdp-info form.cart .quantity .qty-step{width:48px;height:54px;display:grid;place-items:center;font-size:12px;color:var(--navy);background:none;border:0;cursor:pointer}
.pdp-info form.cart .quantity .qty-step[disabled]{opacity:.35;cursor:default}
.pdp-info form.cart label.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.pdp-info form.cart button.single_add_to_cart_button{display:inline-flex;align-items:center;justify-content:center;gap:14px;flex:1;min-width:220px;height:56px;padding:0 24px;border:0;border-radius:50px;background:var(--blue);color:#fff;font:500 13px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;box-shadow:0 14px 30px -10px rgba(5,14,31,.45);transition:background .4s var(--ease),box-shadow .4s var(--ease),opacity .3s}
.pdp-info form.cart button.single_add_to_cart_button:hover{background:var(--blue-h);box-shadow:0 20px 40px -12px rgba(5,14,31,.55)}
.pdp-info form.cart button.single_add_to_cart_button.disabled,
.pdp-info form.cart button.single_add_to_cart_button[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}

/* Variation selectors: Woo's table, laid out as the design's option rows.
   assets/js/app.js turns each select into the site dropdown, so only spacing
   is set here. */
.pdp-info .variations{width:100%;margin:22px 0 0;border-collapse:collapse}
.pdp-info .variations tr{display:block;margin-bottom:16px}
.pdp-info .variations th,
.pdp-info .variations td{display:block;padding:0;text-align:left}
.pdp-info .variations th label{display:block;font:500 11px var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--navy);margin-bottom:12px}
.pdp-info .reset_variations{display:inline-block;margin-top:8px;font:500 11px var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pdp-info .woocommerce-variation-price{margin:18px 0 6px}
.pdp-info .woocommerce-variation-price .price{font:400 26px/1 var(--display);color:var(--navy)}
.pdp-info .woocommerce-variation-add-to-cart{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:18px}

/* Size chips: assets/js/product.js builds them from Woo's own variation select,
   which stays in the form and keeps driving everything. Once the chips are up the
   select row is hidden; without JavaScript it stays on show. */
.pdp-info form.cart.sp-chips .variations{display:none}
.pdp-info form.cart .sizes{margin:22px 0 26px}
.pdp-info form.cart .sizes .size small{display:block;font-size:12px;color:var(--muted)}
.pdp-info form.cart .sizes .size small .amount{font-size:12px;color:var(--muted)}
.pdp-info form.cart .sizes .size small del{opacity:.7;margin-right:4px}
.pdp-info form.cart .sizes .size small ins{text-decoration:none}
.pdp-info form.cart .size[disabled]{opacity:.4;cursor:not-allowed}
.pdp-info form.cart .opt-label{margin-top:22px}
/* the quantity label sits on its own line above the buy row */
.pdp-info form.cart .qty-label{flex:0 0 100%;margin:0 0 -2px}
/* the chips already carry the chosen price, so Woo's repeat of it is redundant */
.pdp-info form.cart.sp-chips .woocommerce-variation-price{display:none}

/* Sale flash: inc/woocommerce.php moves it onto the gallery tile. */
.gallery .onsale{position:absolute;top:18px;right:18px;z-index:3;background:var(--navy);color:#fff;border-radius:30px;padding:7px 14px;font:500 10.5px/1 var(--display);letter-spacing:.12em;text-transform:uppercase}

/* Thumbnails only behave as buttons when there is more than one image. */
.g-thumbs:has(button + button) button{cursor:pointer}

/* Blocks printed after the summary: tabs, up-sells, related products. */
.pdp-after{padding-bottom:100px}
.pdp-after .woocommerce-tabs{margin-top:90px}
.pdp-after .wc-tabs{position:relative;display:flex;flex-wrap:wrap;gap:30px;margin:0;padding:0;list-style:none;border-bottom:1px solid var(--line)}
.pdp-after .wc-tabs li a{display:block;padding:18px 0;font:500 13px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap;transition:color .3s}
.pdp-after .wc-tabs li.active a{color:var(--navy);box-shadow:inset 0 -2px 0 var(--navy)}
.pdp-after .woocommerce-Tabs-panel{margin:0;padding:40px 0;max-width:820px}
.pdp-after .woocommerce-Tabs-panel h2:first-child{font:400 26px/1.15 var(--display);text-transform:uppercase;color:var(--navy);margin-bottom:14px}
.pdp-after .research-data h3{font:500 18px/1.3 var(--display);color:var(--navy);margin:28px 0 10px}
.pdp-after .research-data h3:first-child{margin-top:0}
.pdp-after .spec-table,
.pdp-after .coa-table{width:100%;border-collapse:collapse;font-size:14px}
.pdp-after .spec-table th,
.pdp-after .coa-table th{text-align:left;font:500 11px/1.9 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);vertical-align:top}
.pdp-after .spec-table th,
.pdp-after .spec-table td,
.pdp-after .coa-table th,
.pdp-after .coa-table td{padding:12px 16px;border-bottom:1px solid var(--line)}
.pdp-after .spec-table td,
.pdp-after .coa-table td{color:var(--navy)}
.pdp-after .coa-pending{color:var(--muted);font-style:italic}
.pdp-after .up-sells,
.pdp-after .related{padding:70px 0 0}
.pdp-after .up-sells h2,
.pdp-after .related h2{font:400 clamp(30px,3.6vw,44px)/1 var(--display);text-transform:uppercase;letter-spacing:-.035em;color:var(--navy);margin-bottom:36px}
/* assets/js/product.js lifts the heading into the design's .xsell-head row, with
   the link to the wider family beside it. */
.pdp-after .xsell-head h2{margin:0}
.pdp-after .xsell-head a i{transition:transform .45s var(--ease)}
.pdp-after .xsell-head a:hover i{transform:translateX(4px)}

/* Product tabs: the panel repeats its own tab label as an <h2>, which the design
   does not show. The tab row is the heading. */
.pdp-after .woocommerce-Tabs-panel > h2:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:0}

/* Review form: Woo prints a star row and, for no-script, a rating select. The
   select is the one assets/js/app.js styles, so the unstyled star row (which the
   dropdown wrapper swallows) is taken out of the flow rather than left overlapping. */
.pdp-after #review_form .comment-form-rating p.stars{display:none}
.pdp-after .comment-form-rating label{display:block;font:500 11px var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--navy);margin-bottom:12px}
.pdp-after .woocommerce-Reviews .comment-reply-title{display:block;font:500 11px var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--navy);margin-bottom:12px}

/* ---------------------------------------------------------------------------
   3. Small screens (from the design's page style block)
   ------------------------------------------------------------------------- */

@media (max-width:760px){
  .xsell{padding:20px 0 70px}
  .pdp-grid{gap:30px}
  .g-badges{left:12px;top:12px;right:12px}
  .g-hint{display:none}
  .buy .qty.lg{flex:none}
  .buy .btn{min-width:0}
  .sticky-buy{gap:10px}
  .sticky-buy .btn{padding:0 18px;font-size:12px;gap:10px}
  .ptab-nav{gap:22px;scrollbar-width:none;margin-inline:-20px;padding-left:20px;scroll-padding-inline:20px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)}
  .ptab-nav.at-end{-webkit-mask-image:none;mask-image:none}
  .ptab-nav::-webkit-scrollbar{display:none}
  .ptab-nav button{flex:none}
  .ptab-nav button:last-of-type{margin-right:20px}
  .ptabs{margin-top:64px}
  .ptab-panels{padding:30px 0 10px}
  /* single product shot: a lone thumbnail adds nothing on a phone */
  .g-thumbs:has(button:only-child){display:none}
  .ruo{margin:20px 0}
  .sizes{margin-bottom:22px}
  .size{min-width:0;flex:1 1 0;max-width:140px}
  .buy .btn{padding:0 18px;gap:10px;white-space:nowrap}
  /* perks read as a compact 2 x 2 grid instead of a tall list */
  .perks{grid-template-columns:1fr 1fr;gap:12px 10px;margin:22px 0}
  .perk{font-size:13px;gap:10px;line-height:1.3}
  .perk i{width:34px;height:34px;font-size:12px}
  .spec{border-radius:18px}
  .spec-row{padding:12px 16px}
  .coa-card{gap:14px;padding:18px}
  .coa-card a{min-height:40px}
  .pdp-links{gap:4px 20px}
  .pdp-links a{min-height:44px}
  .xsell-head{margin-bottom:24px;gap:10px}
  .xsell-head a{min-height:40px}
  /* bigger hit area on the card size chips without changing how they look */
  .card-size button{position:relative}
  .card-size button::after{content:"";position:absolute;inset:-8px -3px}
  .sticky-buy{bottom:max(12px,env(safe-area-inset-bottom));padding:8px 8px 8px 10px}
  .sticky-buy img{width:42px;height:42px}
  .sticky-buy .sb-name{font-size:14px}
  .sticky-buy .sb-name small{display:block;font-size:12px}

  /* bridge: the same compaction on Woo's own add to cart row and tabs */
  .pdp-info form.cart button.single_add_to_cart_button{padding:0 18px;gap:10px;min-width:0;white-space:nowrap}
  .pdp-after .woocommerce-tabs{margin-top:64px}
  .pdp-after .wc-tabs{gap:22px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .pdp-after .wc-tabs::-webkit-scrollbar{display:none}
  .pdp-after .woocommerce-Tabs-panel{padding:30px 0 10px}
  .pdp-after .up-sells,
  .pdp-after .related{padding-top:50px}
}

@media (max-width:380px){
  .sticky-buy .btn .fa-bag-shopping{display:none}
  .sticky-buy .btn{padding:0 16px}
}

/* The product shots are transparent cut-outs, so the gallery tile must contain
   them the way the design's .cut treatment does. Woo's own img has no .cut
   class, and .g-main img defaults to object-fit:cover, which zoomed straight
   into the middle of the vial. */
.g-main .woocommerce-product-gallery__image img,
.g-main .woocommerce-product-gallery__image > a img{
  position:absolute;inset:8%;width:84%;height:84%;
  object-fit:contain;mix-blend-mode:normal;
  filter:drop-shadow(0 30px 30px rgba(10,31,68,.18));
}

/* ---------------------------------------------------------------------------
   Product page sections
   The tab strip is gone: specifications, certificates, notes and questions are
   stacked down the page, which is how every serious peptide listing reads and
   which puts all of it in front of a search engine rather than behind a click.
   ------------------------------------------------------------------------- */

.pdp-sec{padding:56px 0;border-top:1px solid var(--line)}
.pdp-sec:first-child{border-top:0}
.pdp-sec > h2{font:400 clamp(26px,3vw,38px)/1.05 var(--display);text-transform:uppercase;letter-spacing:-.02em;color:var(--navy);margin:0 0 26px}
.pdp-rich{max-width:760px;font-size:15.5px;line-height:1.75}
.pdp-rich p{margin:0 0 16px}
.pdp-rich p:last-child{margin-bottom:0}

/* Specification rows: label left, value right, one line each. */
.pdp-specs .spec{border:1px solid var(--line);border-radius:22px;overflow:hidden;max-width:820px}
.pdp-specs .spec-row{display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  padding:15px 22px;border-top:1px solid var(--line);font-size:14.5px}
.pdp-specs .spec-row:first-child{border-top:0}
.pdp-specs .spec-row:nth-child(odd){background:#FAFBFC}
.pdp-specs .spec-row > span{font:500 11px/1.6 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);flex:none}
.pdp-specs .spec-row b{font:500 14.5px var(--body);color:var(--navy);text-align:right;word-break:break-word}
.pdp-specs .spec-pending{font-style:normal;font-size:13px;color:var(--muted);text-align:right}
.pdp-specs .spec-note{max-width:820px;margin:16px 0 0;font-size:13px;line-height:1.6;color:var(--muted)}

/* The certificate table keeps its own styling, it just needs room here. */
.pdp-coa .coa-table{max-width:820px}

@media (max-width:640px){
  .pdp-sec{padding:40px 0}
  .pdp-specs .spec-row{flex-direction:column;gap:6px;padding:14px 18px}
  .pdp-specs .spec-row b,.pdp-specs .spec-pending{text-align:left}
}

.pdp-faq .acc{max-width:820px}
.pdp-faq-more{margin:22px 0 0}
.pdp-faq-more a{font:500 11px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--navy);
  border-bottom:1px solid var(--navy);padding-bottom:4px}

/* Storage and handling: the one hard value the client has entered sits above
   the prose, because "2 to 8 C" is the answer most people came for. */
.pdp-handling-lead{
  display:inline-flex;gap:14px;align-items:baseline;
  margin:0 0 22px;padding:12px 18px;border-radius:14px;background:#F4F5F7}
.pdp-handling-lead span{font:500 11px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pdp-handling-lead b{font-size:15.5px;color:var(--navy)}