/*
Theme Name: Petoome
Theme URI: https://petoome.com
Author: Petoome
Author URI: https://petoome.com
Description: Custom WooCommerce + Elementor-ready theme for Petoome, premium cat nutrition. Built to match the Petoome brand system (navy, cream, brass, whisker-line motif) across shop, cart, checkout, account and single product pages.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
WC requires at least: 8.0
WC tested up to: 9.0
Text Domain: petoome
*/

/* =========================================================
   0. TOKENS
   ========================================================= */
:root{
  --navy: #10273f;
  --navy-deep: #081627;
  --cream: #f6f2ea;
  --cream-dim: #efe9dd;
  --brass: #b9884f;
  --brass-soft: #d9b98c;
  --ink: #1c2430;
  --ink-soft: rgba(28,36,48,0.62);
  --white: #ffffff;
  --border: rgba(16,39,63,0.12);
  --shadow: 0 16px 36px -22px rgba(16,39,63,0.4);
  --radius: 14px;
  --radius-pill: 999px;
  --ease: cubic-bezier(.22,1,.36,1);
  --container: 1280px;
}

/* =========================================================
   1. RESET & BASE
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--cream);
  color: var(--ink);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: var(--navy); text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,h5{
  font-family:'Fraunces', serif;
  font-weight: 500;
  color: var(--navy);
  line-height: 1.1;
  margin: 0 0 0.5em;
}
p{ margin: 0 0 1em; color: var(--ink-soft); }
.petoome-container{ max-width: var(--container); margin: 0 auto; padding: 0 6vw; }

/* eyebrow badge, reused across theme */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Inter', sans-serif; font-weight:600; font-size:11px;
  letter-spacing:0.24em; text-transform:uppercase; color: var(--navy);
  padding: 8px 16px; border:1px solid var(--border); border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.55);
}
.eyebrow::before{ content:''; width:4px; height:4px; border-radius:50%; background: var(--brass); }

/* buttons everywhere: WP + WooCommerce share this look */
a.button, button.button, input[type="submit"], .wp-block-button__link,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Inter', sans-serif; font-weight:600; font-size: 13.5px;
  letter-spacing:0.02em; text-transform:none;
  background: var(--navy); color: var(--cream) !important;
  border:none; border-radius: var(--radius-pill);
  padding: 14px 26px; cursor:pointer;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}
a.button:hover, button.button:hover, input[type="submit"]:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover{
  background: var(--navy-deep); transform: translateY(-1px);
}
a.button.alt, button.button.alt, .woocommerce #respond input#submit.alt,
.woocommerce a.button.alt, .woocommerce-page a.button.alt{
  background: var(--brass);
}
a.button.alt:hover, button.button.alt:hover{ background:#a3763f; }
a.button.outline, button.button.outline{
  background: transparent; color: var(--navy) !important; border:1px solid var(--border);
}

/* form fields shared look */
input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], input[type="search"], textarea, select{
  width:100%;
  font-family:'Inter', sans-serif; font-size:14.5px; color: var(--ink);
  background: var(--white);
  border:1px solid var(--border); border-radius:10px;
  padding: 12px 14px;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
input:focus, textarea:focus, select:focus{
  outline:none; border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(185,136,79,0.18);
}
label{ font-size: 13px; font-weight:600; color: var(--navy); display:block; margin-bottom:6px; }

/* =========================================================
   2. WHISKER DIVIDER (brand signature, reused site-wide)
   ========================================================= */
.whisker-divider{ width:100%; height:28px; overflow:visible; }
.whisker-divider path{ fill:none; stroke: var(--brass-soft); stroke-width:1.6; stroke-linecap:round; }

/* =========================================================
   3. HEADER
   ========================================================= */
.site-header{
  position: sticky; top:0; z-index:100;
  background: rgba(246,242,234,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header-inner{
  max-width: var(--container); margin:0 auto; padding: 16px 6vw;
  display:flex; align-items:center; justify-content:space-between; gap: 24px;
}
.site-logo-text{
  font-family:'Fraunces', serif; font-weight:500; font-size: 26px; color: var(--navy);
}
.custom-logo-link img{ max-height:44px; width:auto; }

.primary-nav ul{ display:flex; align-items:center; gap: 32px; }
.primary-nav a{
  font-family:'Inter', sans-serif; font-weight:500; font-size: 14px; color: var(--ink);
  position:relative; padding: 4px 0;
}
.primary-nav a::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:1.5px; background: var(--brass);
  transition: width 0.3s var(--ease);
}
.primary-nav a:hover::after, .primary-nav .current-menu-item a::after{ width:100%; }

.header-actions{ display:flex; align-items:center; gap: 18px; }
.header-icon-link{ position:relative; display:inline-flex; color: var(--navy); }
.header-icon-link svg{ width:22px; height:22px; }
.cart-count{
  position:absolute; top:-8px; right:-10px;
  background: var(--brass); color:var(--white);
  font-size:10px; font-weight:700; min-width:17px; height:17px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; padding: 0 3px;
}

.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:6px; }
.nav-toggle span{ display:block; width:22px; height:2px; background: var(--navy); margin:5px 0; transition: 0.3s var(--ease); }

@media (max-width: 860px){
  .primary-nav{
    position:fixed; inset: 0 0 0 auto; width:min(320px,80vw); height:100vh;
    background: var(--cream); box-shadow: -20px 0 40px rgba(0,0,0,0.15);
    transform: translateX(100%); transition: transform 0.4s var(--ease);
    padding: 100px 32px; z-index: 99;
  }
  .primary-nav ul{ flex-direction:column; align-items:flex-start; gap:22px; }
  body.nav-open .primary-nav{ transform: translateX(0); }
  .nav-toggle{ display:block; }
}

/* =========================================================
   4. FOOTER
   ========================================================= */
.site-footer{ background: var(--navy); color: rgba(246,242,234,0.72); margin-top: 80px; }
.site-footer .whisker-divider path{ stroke: rgba(246,242,234,0.25); }
.footer-inner{
  max-width: var(--container); margin:0 auto; padding: 56px 6vw 28px;
  display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px;
}
.footer-brand .site-logo-text, .footer-brand h4{ color: var(--cream); }
.footer-brand p{ color: rgba(246,242,234,0.6); max-width: 320px; }
.footer-widget-title{ color: var(--cream); font-size:14px; letter-spacing:0.04em; text-transform:uppercase; font-family:'Inter',sans-serif; font-weight:600; }
.footer-widget ul li{ margin-bottom:10px; }
.footer-widget a{ color: rgba(246,242,234,0.65); font-size:14px; }
.footer-widget a:hover{ color: var(--brass-soft); }
.footer-bottom{
  border-top:1px solid rgba(246,242,234,0.12);
  padding: 20px 6vw; display:flex; justify-content:space-between; align-items:center;
  font-size:12.5px; color: rgba(246,242,234,0.45); max-width: var(--container); margin:0 auto;
}
@media (max-width: 720px){
  .footer-inner{ grid-template-columns: 1fr; }
  .footer-bottom{ flex-direction:column; gap:8px; text-align:center; }
}

/* =========================================================
   5. GENERIC PAGE CONTENT
   ========================================================= */
.site-main{ min-height: 40vh; padding: 60px 0; }
.page-content{ max-width: 760px; margin:0 auto; }

/* fade-up utility: visibility is controlled at runtime by main.js/GSAP
   (gsap.set hides it just before animating in) so content still shows
   normally if JavaScript is unavailable. */
.reveal{ }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}