/*
Theme Name: Peptides Secret Society
Theme URI: https://peptidesecretsociety.com
Author: Peptides Secret Society
Description: Custom WooCommerce theme matching the Peptides Secret Society brand (navy + turquoise, Inter typeface). Built to render the imported WordPress content (pages, products, bundles) with the same visual system as the original Manus site.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: pss
*/

/* ==========================================================================
   1. Design tokens (matches the Manus site exactly)
   ========================================================================== */
:root{
  --radius: .625rem;
  --navy: oklch(22% .08 250);
  --navy-dark: oklch(15% .07 250);
  --navy-light: oklch(30% .09 250);
  --turquoise: oklch(65% .14 200);
  --turquoise-light: oklch(75% .12 200);
  --turquoise-dark: oklch(55% .14 200);
  --background: oklch(98% .005 220);
  --foreground: oklch(22% .08 250);
  --card: oklch(100% 0 0);
  --muted: oklch(94% .01 220);
  --muted-foreground: oklch(50% .04 240);
  --border: oklch(88% .02 220);
  --destructive: oklch(57.7% .245 27.325);
}

/* Hex fallbacks for very old browsers that don't understand oklch() */
@supports not (color: oklch(0% 0 0)) {
  :root{
    --navy:#152238; --navy-dark:#0d1626; --navy-light:#1e3350;
    --turquoise:#3ecfcf; --turquoise-light:#7fe0e0; --turquoise-dark:#2ba8a8;
    --background:#fafbfc; --foreground:#152238; --card:#ffffff;
    --muted:#eef1f4; --muted-foreground:#6b7480; --border:#dde2e7; --destructive:#d4453a;
  }
}

/* ==========================================================================
   2. Base
   ========================================================================== */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--foreground);
  background:var(--background);
  line-height:1.6;
  margin:0;
  font-weight:400;
}
h1,h2,h3,h4,h5,h6{
  font-family:'Inter',sans-serif;
  font-weight:700;
  line-height:1.15;
  color:var(--foreground);
  margin:0 0 .6em;
}
h1{ font-size:clamp(2rem,4vw,3rem); font-weight:800; }
h2{ font-size:clamp(1.5rem,3vw,2.25rem); }
h3{ font-size:1.25rem; }
p{ margin:0 0 1.2em; }
a{ color:var(--turquoise-dark); text-decoration:none; }
a:hover{ color:var(--turquoise); }
img{ max-width:100%; height:auto; display:block; }
.screen-reader-text{ position:absolute!important; clip:rect(1px,1px,1px,1px); overflow:hidden; height:1px; width:1px; }

.pss-container{ max-width:1240px; margin:0 auto; padding:0 24px; }

/* Full-width Gutenberg blocks (site doesn't use theme.json, so define alignfull/alignwide manually) */
.alignfull{ width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
.alignwide{ max-width:1240px; margin-left:auto; margin-right:auto; }

/* ==========================================================================
   3. Buttons (Gutenberg core/buttons block, styled to match Manus CTAs)
   ========================================================================== */
.wp-block-button__link,
button.wp-block-button__link,
a.button, .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  background:var(--turquoise);
  color:#fff !important;
  font-weight:600;
  font-size:.95rem;
  padding:.85em 1.7em;
  border-radius:999px;
  border:2px solid var(--turquoise);
  cursor:pointer;
  transition:all .18s ease;
  white-space:nowrap;
}
.wp-block-button__link:hover,
a.button:hover, .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover{
  background:var(--turquoise-dark);
  border-color:var(--turquoise-dark);
  color:#fff !important;
}
/* Outline style button (used for "Shop by Sets" on dark hero) */
.wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent;
  color:#fff !important;
  border:2px solid rgba(255,255,255,.5);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover{
  background:rgba(255,255,255,.1);
  border-color:#fff;
}
.woocommerce a.added_to_cart{ margin-left:.75em; font-weight:600; }

/* WhatsApp is the store's order/CTA channel — deliberately a different
   color (WhatsApp green) from the turquoise navigation/browse buttons,
   so it always reads as "the way to buy" wherever it appears. */
.pss-whatsapp-order-btn,
.woocommerce ul.products li.product a.button.pss-whatsapp-order-btn,
.woocommerce div.product .pss-whatsapp-order-btn{
  background:#25D366; border-color:#25D366; color:#fff !important;
}
.pss-whatsapp-order-btn:hover,
.woocommerce ul.products li.product a.button.pss-whatsapp-order-btn:hover{
  background:#1DA851; border-color:#1DA851; color:#fff !important;
}
.pss-whatsapp-order-btn[aria-disabled="true"]{
  background:var(--muted); border-color:var(--border); color:var(--muted-foreground) !important; cursor:not-allowed;
}
.pss-view-options-btn,
.woocommerce ul.products li.product a.button.pss-view-options-btn{
  background:transparent; border-color:var(--navy); color:var(--navy) !important;
}
.pss-view-options-btn:hover{ background:var(--navy); color:#fff !important; }
.pss-whatsapp-order-wrap{ margin:1em 0; }
/* Any WhatsApp link anywhere in imported page content (About/Consultation/Home
   blocks already contain a few) automatically gets the same green treatment,
   with no need to hand-edit that content. */
.wp-block-button__link[href*="wa.me"], .wp-block-button__link[href*="api.whatsapp.com"]{
  background:#25D366 !important; border-color:#25D366 !important;
}
.wp-block-button__link[href*="wa.me"]:hover, .wp-block-button__link[href*="api.whatsapp.com"]:hover{
  background:#1DA851 !important; border-color:#1DA851 !important;
}
.pss-whatsapp-header-btn{ padding:.6em 1.4em; font-size:.85rem; }
@media (max-width:900px){ .pss-whatsapp-header-btn{ padding:.55em 1em; } }
.woocommerce span.onsale{
  background:var(--turquoise-dark); color:#fff; font-weight:700;
  border-radius:999px; min-height:auto; min-width:auto; padding:.3em .9em; line-height:1.6;
}

/* ==========================================================================
   4. Hero (core/cover block) — overrides WP's default gradient preset
   with the brand navy gradient so it matches the Manus hero exactly.
   ========================================================================== */
.wp-block-cover.has-vivid-cyan-blue-to-vivid-purple-gradient-background .wp-block-cover__background,
.wp-block-cover.has-vivid-cyan-blue-to-vivid-purple-gradient-background.has-background-dim::before{
  background:radial-gradient(ellipse at 50% 0%, var(--navy-light) 0%, var(--navy) 45%, var(--navy-dark) 100%) !important;
}
.wp-block-cover{ margin-bottom:0; }
.wp-block-cover h1{ font-size:clamp(2.25rem,5vw,3.5rem); max-width:900px; margin:0 auto .5em; }
.wp-block-cover p{ max-width:640px; margin-left:auto; margin-right:auto; font-size:1.1rem; color:#cfeeee; }
.wp-block-cover .wp-block-buttons{ margin-top:1.5em; }

/* ==========================================================================
   5. Header
   ========================================================================== */
.pss-announcement{
  background:linear-gradient(90deg,var(--navy-dark),var(--turquoise-dark));
  color:#fff;
  font-size:.8rem;
  font-weight:500;
  letter-spacing:.02em;
}
.pss-announcement .pss-container{
  display:flex; justify-content:center; gap:2.5em; flex-wrap:wrap; padding:.55em 24px;
}

.pss-header{
  background:#fff;
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:100;
}
.pss-header-inner{ display:flex; align-items:center; justify-content:space-between; gap:2em; padding:.9em 0; }
.pss-logo{ font-size:1.15rem; font-weight:800; color:var(--navy); letter-spacing:-.01em; display:flex; align-items:center; }
.pss-logo img, .pss-logo-img{ max-height:52px; width:auto; }
.pss-logo:hover{ color:var(--navy); }

.pss-nav ul{ list-style:none; display:flex; gap:2em; margin:0; padding:0; }
.pss-nav a{
  color:var(--foreground); font-weight:500; font-size:.95rem;
  padding:.5em 0; border-bottom:2px solid transparent;
}
.pss-nav a:hover, .pss-nav .current-menu-item > a{
  color:var(--turquoise-dark); border-bottom-color:var(--turquoise);
}
.pss-nav .menu-item-has-children{ position:relative; }
.pss-nav .sub-menu{
  list-style:none; margin:0; padding:.5em 0; position:absolute; top:100%; left:0;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  min-width:200px; box-shadow:0 12px 24px rgba(15,30,55,.12);
  opacity:0; visibility:hidden; transform:translateY(6px); transition:all .15s ease;
}
.pss-nav .menu-item-has-children:hover .sub-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.pss-nav .sub-menu a{ display:block; padding:.6em 1.2em; border:none; }

.pss-header-actions{ display:flex; align-items:center; gap:1.25em; }
.pss-header-actions a{ color:var(--foreground); display:flex; align-items:center; }
.pss-cart-count{
  background:var(--turquoise); color:#fff; font-size:.65rem; font-weight:700;
  border-radius:999px; width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center;
  position:relative; top:-8px; left:-6px;
}
.pss-menu-toggle{ display:none; background:none; border:none; cursor:pointer; }

@media (max-width:900px){
  .pss-nav{ display:none; }
  .pss-menu-toggle{ display:block; }
}

/* ==========================================================================
   6. Homepage content sections (columns / group blocks)
   ========================================================================== */
.pss-container .wp-block-columns{ margin:3rem auto; max-width:1240px; padding:0 24px; }
.wp-block-column h3{ color:var(--navy); }
.wp-block-column p{ color:var(--muted-foreground); }

/* ==========================================================================
   7. WooCommerce — product grids, cards, single product, cart, checkout
   ========================================================================== */
.woocommerce ul.products,
.woocommerce-page ul.products{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.75rem; list-style:none; margin:2rem 0; padding:0;
}
.woocommerce ul.products.columns-3{ grid-template-columns:repeat(3,1fr); }
.woocommerce ul.products.columns-5{ grid-template-columns:repeat(5,1fr); }
@media (max-width:900px){ .woocommerce ul.products{ grid-template-columns:repeat(2,1fr) !important; } }
@media (max-width:520px){ .woocommerce ul.products{ grid-template-columns:1fr !important; } }

.woocommerce ul.products li.product{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.25rem; text-align:center; transition:box-shadow .2s ease, transform .2s ease;
}
.woocommerce ul.products li.product:hover{ box-shadow:0 16px 32px rgba(15,30,55,.1); transform:translateY(-3px); }
.woocommerce ul.products li.product img{ border-radius:calc(var(--radius) - 4px); margin-bottom:1em; aspect-ratio:1/1; object-fit:cover; }
.woocommerce ul.products li.product .woocommerce-loop-product__title{ font-size:1rem; font-weight:600; color:var(--foreground); margin:.4em 0; }
.woocommerce ul.products li.product .price{ color:var(--turquoise-dark); font-weight:700; font-size:1.05rem; }
.woocommerce ul.products li.product .price del{ color:var(--muted-foreground); font-weight:400; opacity:.7; }
.woocommerce ul.products li.product .button{ margin-top:1em; width:100%; }

.woocommerce-product-gallery__image{ border-radius:var(--radius); overflow:hidden; }
.woocommerce div.product .product_title{ color:var(--navy); }
.woocommerce div.product p.price, .woocommerce div.product span.price{ color:var(--turquoise-dark); font-size:1.4rem; font-weight:700; }
.woocommerce div.product .woocommerce-variation-add-to-cart,
.woocommerce div.product form.cart{ display:flex; align-items:center; gap:1em; flex-wrap:wrap; }
.woocommerce div.product form.cart .quantity input{ border-radius:var(--radius); border:1px solid var(--border); padding:.6em; width:70px; }

table.variations select, .woocommerce select{
  border:1px solid var(--border); border-radius:var(--radius); padding:.6em 1em; font-family:inherit;
}

.woocommerce-product-categories, ul.product-categories{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; list-style:none; padding:0; margin:2rem 0;
}
.woocommerce ul.product-categories li a{
  display:block; background:var(--muted); border-radius:var(--radius); padding:1.5em 1em; text-align:center;
  color:var(--navy); font-weight:600;
}
.woocommerce ul.product-categories li a:hover{ background:var(--turquoise-light); color:#fff; }

table.shop_table{ border-collapse:collapse; width:100%; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
table.shop_table th{ background:var(--muted); text-align:left; padding:1em; font-weight:600; color:var(--navy); }
table.shop_table td{ padding:1em; border-top:1px solid var(--border); }
.woocommerce-checkout input[type=text], .woocommerce-checkout input[type=email], .woocommerce-checkout input[type=tel],
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea{
  border:1px solid var(--border); border-radius:var(--radius); padding:.75em; width:100%; font-family:inherit;
}
.woocommerce-checkout #payment{ background:var(--muted); border-radius:var(--radius); padding:1.5em; }
.woocommerce-message, .woocommerce-info{
  border-top-color:var(--turquoise) !important; background:var(--muted);
}
.woocommerce-message::before, .woocommerce-info::before{ color:var(--turquoise-dark) !important; }

/* Bundles & Sets comparison table (wp:table block on Shop by Sets page) */
.wp-block-table table{ width:100%; border-collapse:collapse; margin:1.5rem 0; }
.wp-block-table th, .wp-block-table td{ border:1px solid var(--border); padding:.9em 1em; text-align:left; }
.wp-block-table th{ background:var(--navy); color:#fff; }

/* ==========================================================================
   8. Footer
   ========================================================================== */
.pss-footer{ background:var(--navy-dark); color:#cfd7e2; padding:3.5rem 0 1.5rem; margin-top:4rem; }
.pss-footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2.5rem; }
.pss-footer h4{ color:#fff; font-size:1rem; margin-bottom:1em; }
.pss-footer p{ color:#a9b4c4; font-size:.9rem; }
.pss-footer ul{ list-style:none; margin:0; padding:0; }
.pss-footer ul li{ margin-bottom:.6em; }
.pss-footer a{ color:#a9b4c4; font-size:.9rem; }
.pss-footer a:hover{ color:var(--turquoise-light); }
.pss-footer-bottom{ border-top:1px solid var(--navy-light); margin-top:2.5rem; padding-top:1.5rem; text-align:center; font-size:.8rem; color:#7f8ba0; }
@media (max-width:800px){ .pss-footer-grid{ grid-template-columns:1fr 1fr; } }

/* ==========================================================================
   9. WhatsApp floating button
   ========================================================================== */
.pss-whatsapp-float{
  position:fixed; bottom:24px; right:24px; z-index:200;
  background:#25D366; color:#fff; width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:1.6rem;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}

/* Page (non front-page) title/content wrapper */
.pss-page-header{ background:var(--muted); padding:2.5rem 0; margin-bottom:0; }
.pss-page-header h1{ margin:0; }
.pss-page-content{ padding:2.5rem 0 4rem; }
.pss-page-content .pss-container > *:first-child{ margin-top:0; }