/* ==========================================================================
   Skin Space — single product page
   Companion to skin-space-shop.css (shared buttons, eyebrows, cards and CTA
   live there). Rules adapted from the product page design supplied
   2026-11-05, mapped onto WooCommerce's real gallery/summary markup.
   ========================================================================== */

.ss-product-page .ss-reg{font-size:.5em;vertical-align:.9em;margin-left:.04em;letter-spacing:0}

/* ---------- breadcrumb ---------- */
.ss-product-page .woocommerce-breadcrumb{font-size:13px;color:var(--faint);margin:0 0 6px}
.ss-product-page .woocommerce-breadcrumb a{color:var(--muted);text-decoration:none;font-weight:600}
.ss-product-page .woocommerce-breadcrumb a:hover{color:var(--forest);text-decoration:underline}

/* ---------- product hero ---------- */
.ss-product{padding:26px 0 80px}
.ss-product__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:start}

/* Gallery: WooCommerce markup (.woocommerce-product-gallery, flexslider
   thumbs) restyled to the design's stage + thumbnail row. */
.ss-product-page .woocommerce-product-gallery{position:sticky;top:116px;float:none;width:auto}
.ss-product-page .woocommerce-product-gallery__wrapper,
.ss-product-page .woocommerce-product-gallery .flex-viewport{border-radius:20px;overflow:hidden;background:#fff;border:1px solid var(--line)}
.ss-product-page .woocommerce-product-gallery__image img,
.ss-product-page .woocommerce-product-gallery .wp-post-image{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:#fff}
.ss-product-page .woocommerce-product-gallery .flex-control-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0 0;padding:0;list-style:none}
.ss-product-page .woocommerce-product-gallery .flex-control-thumbs li{width:auto;float:none;clear:none;margin:0}
.ss-product-page .woocommerce-product-gallery .flex-control-thumbs img{width:100%;aspect-ratio:1/1;object-fit:cover;border:1.5px solid var(--line);border-radius:12px;opacity:1;cursor:pointer;transition:border-color .2s}
.ss-product-page .woocommerce-product-gallery .flex-control-thumbs img:hover{border-color:var(--mint-border)}
.ss-product-page .woocommerce-product-gallery .flex-control-thumbs img.flex-active{border-color:var(--forest);box-shadow:0 0 0 1px var(--forest)}
.ss-product-page .woocommerce-product-gallery .onsale{position:absolute;top:16px;left:16px;z-index:3;min-height:0;min-width:0;padding:7px 14px;border-radius:999px;background:var(--forest);color:#fff;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;line-height:1.4}
.ss-product-page .woocommerce-product-gallery__trigger{display:none}

/* Summary */
.ss-summary{display:flex;flex-direction:column;align-items:flex-start}
.ss-summary > *{max-width:100%}
.ss-brand-pill{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;background:var(--mint);border:1px solid var(--mint-line);border-radius:999px;margin-bottom:22px;text-decoration:none;transition:background .2s}
.ss-brand-pill:hover{background:#E0EBE3}
.ss-brand-pill i{width:6px;height:6px;border-radius:50%;background:var(--sage)}
.ss-brand-pill span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--sage-ink)}
.ss-summary .product_title{font-family:var(--serif);font-size:54px;line-height:1.02;font-weight:600;color:var(--ink);margin:0}
.ss-price-row{display:flex;align-items:baseline;gap:12px;margin:22px 0 20px}
.ss-summary .price{font-family:var(--serif);font-size:36px;font-weight:600;color:var(--forest);line-height:1;margin:0}
.ss-summary .price .price{font-size:inherit;margin:0;display:inline}
.ss-summary .price del{opacity:.45;font-size:.72em;margin-right:10px}
.ss-summary .price ins{background:none;text-decoration:none}
.ss-price__note{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--faint)}
.ss-summary .woocommerce-product-details__short-description p{font-size:17px;line-height:1.65;color:var(--body);max-width:520px;margin:0}

/* Variations + swatches (skin-space-product.js builds the swatches from
   WooCommerce's own <select>, which stays in the DOM for the variation
   script but is visually hidden once .ss-sw-on is set). */
.ss-summary form.cart{width:100%}
.ss-summary .variations_form{margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
.ss-summary table.variations{border:0;margin:0 0 24px;width:100%}
.ss-summary table.variations td,.ss-summary table.variations th{border:0;padding:0;text-align:left;vertical-align:top;background:none}
.ss-summary table.variations .label{padding-bottom:12px}
.ss-summary table.variations .label label{font-size:13px;font-weight:700;color:var(--forest);letter-spacing:.02em}
.ss-summary .variations_form.ss-sw-on table.variations select{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.ss-summary .reset_variations{font-size:12px;color:var(--muted);font-weight:600}
.ss-swatches{display:flex;flex-wrap:wrap;gap:10px}
.ss-swatch{position:relative}
.ss-swatch input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.ss-swatch label{display:block;min-width:148px;padding:15px 22px 14px;border-radius:13px;background:#fff;border:1px solid var(--line);color:var(--forest);cursor:pointer;user-select:none;transition:background .2s,border-color .2s,color .2s,box-shadow .2s}
.ss-swatch label:hover{background:#F1F5F2}
.ss-swatch__size{display:block;font-family:var(--serif);font-size:22px;font-weight:600;line-height:1.1;margin-bottom:3px}
.ss-swatch__price{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--faint)}
.ss-swatch input:checked + label{background:var(--forest);border-color:var(--forest);color:#fff;box-shadow:0 14px 30px -20px rgba(47,75,62,.6)}
.ss-swatch input:checked + label .ss-swatch__price{color:var(--mint-soft)}
.ss-swatch input:disabled + label{opacity:.45;cursor:not-allowed}
.ss-swatch input:focus-visible + label{outline:2px solid var(--sage);outline-offset:3px}
.ss-summary .woocommerce-variation-description p{font-size:14px;color:var(--muted);margin:0 0 12px}
.ss-summary .woocommerce-variation-price{display:none}
.ss-summary .stock{font-size:14px;font-weight:600;margin:0 0 14px}
.ss-summary .stock.in-stock{color:var(--sage-ink)}
.ss-summary .stock.out-of-stock{color:#B3261E}

/* Quantity + add to cart row */
.ss-summary .woocommerce-variation-add-to-cart,
.ss-summary form.cart:not(.variations_form){display:flex;flex-wrap:wrap;gap:12px;width:100%}
.ss-summary .quantity{display:flex;align-items:center;background:#fff;border:1.5px solid var(--mint-border);border-radius:999px;padding:4px;float:none;margin:0}
.ss-summary .quantity button.ss-qty-btn{width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:var(--forest);font-size:20px;line-height:1;cursor:pointer;transition:background .2s;padding:0}
.ss-summary .quantity button.ss-qty-btn:hover{background:var(--mint)}
.ss-summary .quantity .qty{width:38px;border:0;background:transparent;text-align:center;font-family:var(--sans);font-size:15px;font-weight:700;color:var(--forest);-moz-appearance:textfield;appearance:textfield;padding:0}
.ss-summary .quantity .qty::-webkit-outer-spin-button,.ss-summary .quantity .qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ss-summary .single_add_to_cart_button{flex:1;background:var(--forest);color:#fff;border:0;border-radius:999px;padding:16px 30px;font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .2s;line-height:1.2}
.ss-summary .single_add_to_cart_button:hover{background:var(--forest-hover)}
.ss-summary .single_add_to_cart_button.disabled,.ss-summary .single_add_to_cart_button:disabled{opacity:.5;cursor:not-allowed}

.ss-help{margin-top:18px;font-size:14px;color:var(--muted)}
.ss-help a{color:var(--forest);font-weight:700;text-decoration:none}
.ss-help a:hover{text-decoration:underline}

.ss-instore{display:flex;gap:16px;align-items:flex-start;width:100%;margin-top:28px;padding:20px 22px;background:#fff;border:1px solid var(--line);border-radius:16px;box-sizing:border-box}
.ss-instore__icon{flex:none;width:40px;height:40px;border-radius:50%;background:var(--mint);display:flex;align-items:center;justify-content:center;color:var(--sage)}
.ss-instore__icon svg{width:18px;height:18px}
.ss-instore h2{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--ink);margin:0 0 4px}
.ss-instore p{font-size:14px;line-height:1.6;color:var(--muted);margin:0}

.ss-summary .product_meta{margin-top:22px;font-size:13px;color:var(--quiet)}
.ss-summary .product_meta > span{display:block;margin-top:4px}
.ss-summary .product_meta a{color:var(--forest);font-weight:600;text-decoration:none}
.ss-summary .product_meta a:hover{text-decoration:underline}
/* The catalogue carries no SKUs (see the shop directive); WooCommerce would
   print "SKU: N/A" for variable products, so the row is hidden. */
.ss-summary .product_meta .sku_wrapper{display:none}

/* ---------- about the formula (long description) ---------- */
.ss-about{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ss-about__inner{max-width:1100px;margin:0 auto;padding:76px 28px}
.ss-about__inner.has-video{display:grid;grid-template-columns:362px 1fr;gap:56px;align-items:center}
.ss-about h2{font-family:var(--serif);font-size:38px;line-height:1.14;font-weight:600;color:var(--ink);margin:16px 0 20px}
.ss-about__text{max-width:760px}
.ss-about__inner.has-video .ss-about__text{max-width:none}
.ss-about__text p{font-size:17px;line-height:1.7;color:var(--body);margin:0}
.ss-about__text p + p{margin-top:16px}
.ss-about__text ul{font-size:16px;line-height:1.65;color:var(--body);margin:16px 0 0;padding-left:22px}
.ss-about__text li + li{margin-top:6px}
.ss-about__text strong{color:var(--ink)}

/* vertical social video, 9:16 (renders only when a product has a video URL) */
.ss-video{position:relative;aspect-ratio:9/16;border-radius:22px;overflow:hidden;background:var(--forest);box-shadow:0 26px 60px -34px rgba(47,75,62,.75)}
.ss-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.ss-video__play{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:14px;padding:26px;border:0;background:linear-gradient(to top,rgba(31,48,39,.72) 0%,rgba(31,48,39,0) 55%);color:#fff;cursor:pointer;font-family:var(--sans);transition:opacity .25s;width:100%}
.ss-video__play i{width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.94);color:var(--forest);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px -12px rgba(0,0,0,.6)}
.ss-video__play i svg{width:22px;height:22px;margin-left:3px}
.ss-video__play span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.ss-video.is-playing .ss-video__play{opacity:0;pointer-events:none}
.ss-video__sound{position:absolute;z-index:3;top:16px;right:16px;width:42px;height:42px;border-radius:50%;border:0;background:rgba(31,48,39,.55);color:#fff;display:none;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(4px)}
.ss-video__sound svg{width:18px;height:18px}
.ss-video.is-playing .ss-video__sound{display:flex}
.ss-video__tag{position:absolute;z-index:3;top:16px;left:16px;display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;background:rgba(31,48,39,.55);color:#fff;font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;backdrop-filter:blur(4px)}
.ss-video__tag i{width:5px;height:5px;border-radius:50%;background:var(--mint-soft)}
.ss-video__caption{margin-top:14px;font-size:13px;line-height:1.5;color:var(--quiet);text-align:center}

/* ---------- good to know (FAQ + attributes) ---------- */
.ss-faq{background:#fff;border-bottom:1px solid var(--line)}
.ss-faq__inner{max-width:1100px;margin:0 auto;padding:92px 28px;display:grid;grid-template-columns:.8fr 1.2fr;gap:52px;align-items:start}
.ss-faq__intro{position:sticky;top:116px}
.ss-faq h2{font-family:var(--serif);font-size:42px;line-height:1.08;font-weight:600;color:var(--ink);margin-top:14px}
.ss-faq__intro p{font-size:16px;line-height:1.65;color:var(--muted);margin-top:16px}
.ss-faq__intro a{color:var(--forest);font-weight:700;text-decoration:none}
.ss-faq__intro a:hover{text-decoration:underline}
.ss-faq details{border-bottom:1px solid var(--line)}
.ss-faq__list > details:first-child{border-top:1px solid var(--line)}
.ss-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0;font-family:var(--serif);font-size:21px;font-weight:600;color:var(--ink)}
.ss-faq summary::-webkit-details-marker{display:none}
.ss-faq summary .plus{flex:none;font-family:var(--sans);font-size:24px;color:var(--sage);transition:transform .25s}
.ss-faq details[open ] .plus{transform:rotate(45deg)}
.ss-faq details > div{padding:0 0 24px;max-width:580px}
.ss-faq details p{font-size:15px;line-height:1.7;color:var(--muted);margin:0}
.ss-faq details p + p{margin-top:12px}
.ss-faq .shop_attributes{width:100%;border-collapse:collapse;margin-top:26px;font-size:14px}
.ss-faq .shop_attributes th,.ss-faq .shop_attributes td{text-align:left;padding:12px 0;border-top:1px solid var(--line-soft);vertical-align:top}
.ss-faq .shop_attributes th{width:38%;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:700}
.ss-faq .shop_attributes td{color:var(--forest);font-weight:600}

/* ---------- related products ---------- */
.ss-related{padding:92px 0}
.ss-related__head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px;margin-bottom:44px}
.ss-related__head h2{font-family:var(--serif);font-size:44px;line-height:1.08;font-weight:600;color:var(--ink);margin-top:14px}
.ss-textlink{text-decoration:none;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--forest);border-bottom:1.5px solid var(--mint-border);padding-bottom:3px}
.ss-textlink:hover{border-bottom-color:var(--forest)}
.ss-related__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .ss-product__grid,.ss-faq__inner{grid-template-columns:1fr;gap:44px}
  .ss-about__inner.has-video{grid-template-columns:1fr;gap:38px;max-width:620px}
  .ss-video{max-width:360px;margin:0 auto}
  .ss-product-page .woocommerce-product-gallery,.ss-faq__intro{position:static}
  .ss-related__grid{grid-template-columns:1fr 1fr}
  .ss-summary .product_title{font-size:46px}
}
@media (max-width:640px){
  .ss-product{padding-top:16px}
  .ss-summary .product_title{font-size:40px}
  .ss-product-page .woocommerce-product-gallery .flex-control-thumbs{gap:8px}
  .ss-swatch{flex:1}
  .ss-swatch label{min-width:0}
  .ss-related__grid{gap:12px}
  .ss-about h2{font-size:30px}
  .ss-about__inner{padding:56px 20px}
  .ss-faq__inner{padding:56px 20px}
  .ss-faq h2,.ss-related__head h2{font-size:36px}
  .ss-related{padding:56px 0}
}

/* ---------- WooCommerce core overrides (v1.1.1) ----------
   WooCommerce's own stylesheet sets .woocommerce div.product div.images
   and div.summary to width:48% floated, and its price/button colors beat
   the design rules above on specificity. On the grid layout that
   compressed both hero columns to roughly half their cells (tiny image,
   over-wrapped title, purple Add to cart, olive price). These selectors
   are deliberately heavier and load later. */
.ss-product-page div.product div.images.woocommerce-product-gallery{width:auto;float:none;margin-bottom:0}
.ss-product-page div.product div.summary.entry-summary{width:auto;float:none;margin-bottom:0}
.ss-product-page div.product div.summary .price{font-family:var(--serif);font-size:36px;font-weight:600;color:var(--forest);line-height:1;margin:0}
.ss-product-page div.product div.summary form.cart{margin:0}
.ss-product-page div.product div.summary form.cart .quantity{float:none;margin:0}
.ss-product-page div.product div.summary form.cart .single_add_to_cart_button{float:none;background:var(--forest);color:#fff;border-radius:999px}
.ss-product-page div.product div.summary form.cart .single_add_to_cart_button:hover{background:var(--forest-hover)}
.ss-product-page .ss-faq table.shop_attributes td{font-style:normal;text-align:left}
.ss-product-page .ss-faq table.shop_attributes th{text-align:left}
/* Tightened from the design's 80px: with the columns at full width the
   hero is taller, and the extra band read as dead space. */
.ss-product{padding-bottom:52px}

/* In-store box heading link (v1.1.3 — "Skin Space in Massapequa" links to the homepage). */
.ss-instore h2 a{color:var(--forest);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.ss-instore h2 a:hover{color:var(--sage-ink)}