/*
Theme Name: SilverNosePin Final
Theme URI: https://silvernosepin.com
Description: Final consolidated child theme for SilverNosePin.com — nose-pin-only silver jewellery store. Child of GeneratePress. Neutral/monochrome premium look, mobile-first, Core-Web-Vitals optimised. Bakes in Home hero, category grid, shop/product grid, single-product tabs+FAQ+trust badges, size-guide/guide pages, and menu dropdown styling from all build tasks.
Author: SilverNosePin
Template: generatepress
Version: 2.0
Text Domain: silvernosepin
*/

/* =========================================================
   0. BRAND TOKENS — neutral / premium palette
   Change ONLY these variables to re-theme the whole site.
   ========================================================= */
:root{
  --sn-bg:#ffffff;
  --sn-ink:#111111;
  --sn-muted:#555555;
  --sn-line:#e6e6e6;
  --sn-panel:#f7f7f7;
  --sn-accent:#111111;      /* buttons / links on hover use this */
  --sn-radius:6px;
  --sn-font-head: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sn-font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Performance note: only ONE font family (Poppins) is loaded, 3 weights only —
   fewer font requests = faster LCP. No serif font loaded, keeps payload small. */

*{ box-sizing:border-box; }

body{
  background:var(--sn-bg);
  color:var(--sn-ink);
  font-family:var(--sn-font-body);
  font-size:16px;
  line-height:1.7;
}

h1,h2,h3,h4,.site-title,.entry-title{
  font-family:var(--sn-font-head);
  color:var(--sn-ink);
  font-weight:600;
  letter-spacing:.2px;
}

a{ color:var(--sn-ink); }
a:hover{ color:var(--sn-muted); }

img{ max-width:100%; height:auto; display:block; }

/* =========================================================
   1. HEADER / STICKY NAV + DROPDOWN (Task 7)
   ========================================================= */
.site-header{
  background:var(--sn-bg);
  border-bottom:1px solid var(--sn-line);
  position:sticky;
  top:0;
  z-index:999;
}
.sn-announcement-bar{
  background:var(--sn-ink);
  color:#fff;
  text-align:center;
  font-size:12.5px;
  padding:8px 12px;
  letter-spacing:.5px;
}
.site-title a{
  font-family:var(--sn-font-head);
  font-size:24px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
}
.main-navigation ul li a{
  font-weight:500;
  text-transform:uppercase;
  font-size:12.5px;
  letter-spacing:1px;
  color:var(--sn-ink);
  padding:10px 14px;
}
.main-navigation ul li a:hover{ color:var(--sn-muted); }

/* Dropdown submenu (e.g. category items nested under "Shop All") */
.main-navigation ul ul{
  background:#fff;
  border:1px solid var(--sn-line);
  border-radius:var(--sn-radius);
  box-shadow:0 8px 20px rgba(0,0,0,.06);
  min-width:200px;
  padding:6px 0;
}
.main-navigation ul ul li a{
  text-transform:none;
  letter-spacing:0;
  font-size:14px;
  padding:8px 16px;
  display:block;
}

/* Mobile hamburger — GeneratePress handles the toggle logic, this just
   makes sure the open menu looks consistent with the rest of the theme. */
@media (max-width:768px){
  .main-navigation ul li a{ font-size:14px; padding:12px 16px; }
}

/* =========================================================
   2. HOMEPAGE HERO (Task 1)
   ========================================================= */
.sn-hero{
  display:flex;
  align-items:center;
  gap:40px;
  padding:60px 5%;
  flex-wrap:wrap;
}
.sn-hero-text{ flex:1; min-width:280px; }
.sn-hero-text h1{ font-size:2.4rem; line-height:1.2; margin-bottom:16px; }
.sn-hero-text p{ font-size:1.05rem; color:var(--sn-muted); margin-bottom:24px; max-width:480px; }
.sn-hero-img{ flex:1; min-width:280px; aspect-ratio:4/3; overflow:hidden; border-radius:var(--sn-radius); }
.sn-hero-img img{ width:100%; height:100%; object-fit:cover; }

.sn-btn{
  display:inline-block;
  background:var(--sn-accent);
  color:#fff;
  padding:14px 32px;
  text-decoration:none;
  border-radius:var(--sn-radius);
  font-weight:600;
  font-size:13px;
  letter-spacing:.5px;
  text-transform:uppercase;
  transition:opacity .2s ease;
}
.sn-btn:hover{ opacity:.8; color:#fff; }

.sn-btn-outline{
  border:1px solid var(--sn-ink);
  color:var(--sn-ink);
  padding:10px 20px;
  border-radius:var(--sn-radius);
  text-decoration:none;
  font-size:.9rem;
  font-weight:500;
  transition:all .2s ease;
}
.sn-btn-outline:hover{ background:var(--sn-ink); color:#fff; }

/* Category circles (Task 1) */
.sn-cat-grid{
  display:flex;
  justify-content:center;
  gap:32px;
  flex-wrap:wrap;
  padding:40px 5% 60px;
}
.sn-cat-tile{ text-align:center; text-decoration:none; color:var(--sn-ink); width:130px; }
.sn-cat-tile img{
  width:130px; height:130px;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:50%;
  border:1px solid var(--sn-line);
  margin-bottom:10px;
  transition:transform .2s ease;
}
.sn-cat-tile:hover img{ transform:scale(1.05); }
.sn-cat-tile span{ display:block; font-size:.95rem; font-weight:500; }

/* Trust badge bar (site-wide, below hero or in footer) */
.sn-trust-bar{
  display:flex; flex-wrap:wrap; justify-content:center; gap:30px;
  background:var(--sn-panel);
  border-top:1px solid var(--sn-line);
  border-bottom:1px solid var(--sn-line);
  padding:24px 12px; margin:40px 0; text-align:center;
}
.sn-trust-bar div{ max-width:160px; font-size:13px; }
.sn-trust-bar strong{ display:block; font-size:14px; margin-bottom:4px; }

/* =========================================================
   3. SHOP / CATEGORY ARCHIVE — WooCommerce product grid
   ========================================================= */
.woocommerce ul.products{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:24px;
  margin:0 !important;
}
.woocommerce ul.products li.product{
  width:100% !important;
  margin:0 !important;
  background:#fff;
  border:1px solid var(--sn-line);
  border-radius:var(--sn-radius);
  padding:14px;
  transition:box-shadow .2s ease, transform .2s ease;
}
.woocommerce ul.products li.product:hover{
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transform:translateY(-2px);
}
.woocommerce ul.products li.product img{
  border-radius:4px;
  aspect-ratio:1/1;
  object-fit:cover;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:14.5px; margin-top:10px; font-weight:500;
}
.woocommerce ul.products li.product .price{ color:var(--sn-ink); font-size:15px; font-weight:600; }
.woocommerce ul.products li.product .button{
  background:var(--sn-ink); border-radius:var(--sn-radius); color:#fff;
  font-size:11.5px; text-transform:uppercase; letter-spacing:.5px;
}
.woocommerce ul.products li.product .button:hover{ opacity:.85; }
.woocommerce span.onsale{
  background:var(--sn-ink) !important; border-radius:20px; font-size:11px;
}

/* =========================================================
   4. SINGLE PRODUCT PAGE (tabs, FAQ, trust row)
   ========================================================= */
.single-product .summary h1.product_title{ font-size:28px; margin-bottom:8px; }
.single-product .price{ font-size:22px; color:var(--sn-ink); }
.single-product .woocommerce-product-details__short-description{ font-size:15px; color:var(--sn-muted); }
.single-product form.cart .button{
  background:var(--sn-ink); color:#fff; padding:14px 36px;
  border-radius:var(--sn-radius); text-transform:uppercase; letter-spacing:1px; font-size:13px;
}
.single-product form.cart .button:hover{ opacity:.85; }

.woocommerce-tabs ul.tabs li{ border:none; background:transparent; }
.woocommerce-tabs ul.tabs li.active a{ color:var(--sn-ink); text-decoration:underline; }

.sn-product-trust{ display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; font-size:12px; }
.sn-product-trust span{
  border:1px solid var(--sn-line); border-radius:20px; padding:6px 14px; background:var(--sn-panel);
}

/* FAQ accordion — [sn_faq] shortcode output (Task 6) */
.sn-faq-item{ border-bottom:1px solid var(--sn-line); padding:14px 0; }
.sn-faq-q{ font-weight:600; cursor:pointer; }
.sn-faq-a{ display:none; margin-top:8px; font-size:14px; color:var(--sn-muted); }
.sn-faq-item.open .sn-faq-a{ display:block; }
/* Native <details>/<summary> FAQ style (used on Size Guide / blog pages, Task 3) */
.sn-faq details{ border-bottom:1px solid var(--sn-line); padding:14px 0; }
.sn-faq summary{ cursor:pointer; font-weight:600; font-size:1rem; }
.sn-faq p{ margin-top:10px; color:var(--sn-muted); font-size:.92rem; line-height:1.6; }

/* =========================================================
   5. GUIDE / BLOG PAGES (Size Guide, Piercing Care — Task 3 & 4)
   ========================================================= */
.sn-guide-hero{ text-align:center; padding:50px 5% 30px; }
.sn-guide-hero h1{ font-size:2.2rem; margin-bottom:10px; }
.sn-guide-hero p{ color:var(--sn-muted); font-size:1.05rem; }

.sn-guide-table{ width:90%; max-width:700px; margin:20px auto; border-collapse:collapse; font-size:.95rem; }
.sn-guide-table th,.sn-guide-table td{ border:1px solid var(--sn-line); padding:12px 16px; text-align:left; }
.sn-guide-table th{ background:var(--sn-panel); font-weight:600; }

.sn-guide-section{ max-width:800px; margin:40px auto; padding:0 5%; }
.sn-guide-section h2{ font-size:1.5rem; margin-bottom:16px; }
.sn-guide-section ol{ padding-left:20px; line-height:1.8; }

.sn-fit-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.sn-fit-card{ background:var(--sn-panel); border:1px solid var(--sn-line); border-radius:var(--sn-radius); padding:18px; }
.sn-fit-card h3{ margin-bottom:8px; font-size:1.1rem; }
.sn-fit-card p{ color:var(--sn-muted); font-size:.92rem; line-height:1.5; }

.sn-gauge-links{ display:flex; gap:14px; flex-wrap:wrap; }

/* =========================================================
   6. FOOTER
   ========================================================= */
.site-footer{ background:var(--sn-ink); color:#eee; padding:50px 20px 20px; }
.site-footer a{ color:#eee; }
.site-footer a:hover{ color:#bbb; }
.sn-footer-payments img{ height:20px; margin-right:8px; filter:grayscale(1) brightness(2); }
.sn-footer-bottom{
  border-top:1px solid #333; margin-top:30px; padding-top:16px;
  font-size:12px; text-align:center; color:#999;
}

/* =========================================================
   7. LAYOUT-SHIFT (CLS) SAFETY
   Always add explicit width/height (or aspect-ratio, already set above)
   on every <img> you paste into Custom HTML blocks — this alone prevents
   most Core Web Vitals CLS penalties on the hero/category images.
   ========================================================= */
.sn-hero-img img,.sn-cat-tile img,.woocommerce ul.products li.product img{
  aspect-ratio:inherit;
}

/* =========================================================
   8. RESPONSIVE
   ========================================================= */
@media (max-width:768px){
  .woocommerce ul.products{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .single-product .summary h1.product_title{ font-size:22px; }
}
@media (max-width:600px){
  .sn-hero{ text-align:center; padding:40px 5%; }
  .sn-hero-text p{ margin-left:auto; margin-right:auto; }
  .sn-hero-text h1{ font-size:1.9rem; }
  .sn-cat-tile{ width:100px; }
  .sn-cat-tile img{ width:100px; height:100px; }
  .sn-fit-grid{ grid-template-columns:1fr; }
}