/*
Theme Name: RFPS Store (Astra Child)
Theme URI: https://rfpsinc.com
Description: Ruffled Feathers Parrot Sanctuary child theme for Astra. Ships a custom "RFPS Store Home" page template plus its Chewy-inspired styling. All store CSS is scoped under .rfps-store so it can't affect the rest of the site. Renders identically on staging and prod.
Author: Ruffled Feathers Parrot Sanctuary
Template: astra
Version: 2.0.2
*/

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900&family=Inter:wght@400;500;600;700&display=swap');

/* ===================================================================
   Everything below is scoped under .rfps-store — it ONLY affects the
   Store Home template, never the rest of the site.
   =================================================================== */

.rfps-store{
  --green:#2e8b57; --green-dk:#14342a; --green-mid:#3fa86c;
  --cream:#fbf8f1; --sun:#ff9e3d; --sun-dk:#f3852a;
  --ink:#1c2b26; --muted:#5c6b64; --line:#e8e2d6;
  --shadow:0 6px 20px rgba(20,52,42,.08); --shadow-lg:0 14px 40px rgba(20,52,42,.14);
  --r:18px;
  font-family:'Inter',system-ui,sans-serif; color:var(--ink); background:var(--cream);
}
.rfps-store h1,.rfps-store h2,.rfps-store h3,.rfps-store strong{font-family:'Nunito',sans-serif;color:var(--green-dk)}
.rfps-wrap{max-width:1180px;margin:0 auto;padding:0 22px}

/* Astra sets `#content.site-content > .ast-container` to display:flex. This
   template emits .rfps-store as that container's only (widthless) flex child,
   so it shrink-wraps to its widest non-bleed block (~1180px) and left-aligns —
   that's the ~60% column with an empty band on the right. It also breaks the
   full-bleed math below, because left:50%/-50vw is then measured against the
   shrunk box instead of the viewport. Force the container back to a full-width
   block so .rfps-store fills the viewport and full-bleed centers correctly. */
.page-template-template-store-home #content > .ast-container{display:block;max-width:100%;width:100%;padding-left:0;padding-right:0}
.rfps-store{width:100%}

/* This template renders its own custom block header/footer (injected by
   template-store-home.php). Hide the stock Astra masthead, breadcrumb bar and
   colophon so they don't duplicate the custom chrome. get_header()/get_footer()
   still run, so wp_head()/wp_footer(), body classes and the #content wrapper
   (and thus the width fix above) all stay intact. */
.page-template-template-store-home #masthead,
.page-template-template-store-home .main-header-bar.ast-header-breadcrumb,
.page-template-template-store-home .ast-breadcrumbs-wrapper,
.page-template-template-store-home #colophon,
.page-template-template-store-home footer.site-footer{display:none}
/* Custom header/footer wrappers fill the full width of the content container. */
.page-template-template-store-home .rfps-custom-header,
.page-template-template-store-home .rfps-custom-footer{width:100%}

/* full-bleed bands break out of Astra's content container */
.rfps-store .full-bleed{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw}

/* announcement */
.rfps-announce{background:var(--green-dk);color:#eafff0;text-align:center;font-weight:600;font-size:14px;padding:10px 16px}
.rfps-announce span{color:var(--green-mid)}

/* hero */
.rfps-hero{background:var(--cream);padding:48px 0 42px}
.rfps-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center}
.rfps-eyebrow{display:inline-block;background:#e7f5ec;color:var(--green);font-family:'Nunito';font-weight:800;font-size:12.5px;letter-spacing:.6px;text-transform:uppercase;padding:7px 14px;border-radius:999px;margin-bottom:16px}
.rfps-hero h1{font-size:clamp(34px,5vw,56px);font-weight:900;line-height:1.08;letter-spacing:-.5px;margin:0}
.rfps-hero p{font-size:18px;color:var(--muted);margin:16px 0 26px;max-width:30em}
.rfps-cta-row{display:flex;gap:14px;flex-wrap:wrap}
.rfps-btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;font-family:'Nunito';font-weight:800;font-size:16px;padding:15px 30px;transition:transform .12s ease,background .15s ease,box-shadow .15s ease;text-decoration:none}
.rfps-btn:hover{transform:translateY(-2px)}
.rfps-btn-primary{background:var(--sun);color:#3a2306;box-shadow:0 8px 20px rgba(255,158,61,.4)}
.rfps-btn-primary:hover{background:var(--sun-dk);color:#3a2306}
.rfps-btn-ghost{background:#fff;color:var(--green-dk);box-shadow:var(--shadow)}
.rfps-hero-art{position:relative;background:linear-gradient(155deg,#3fa86c,#2e8b57 55%,#14342a);border-radius:28px;box-shadow:var(--shadow-lg);padding:30px;min-height:320px;display:flex;align-items:flex-end;overflow:hidden}
.rfps-blob{position:absolute;border-radius:50%;filter:blur(2px)}
.rfps-blob.b1{width:180px;height:180px;background:#5fd08c;opacity:.5;top:-50px;right:-30px}
.rfps-blob.b2{width:120px;height:120px;background:#1c5a3f;opacity:.6;bottom:30px;left:-30px}
.rfps-parrot{position:absolute;right:24px;top:28px;width:148px}
.rfps-stat{position:relative;background:rgba(255,255,255,.96);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow-lg);max-width:255px}
.rfps-stat .k{font-family:'Nunito';font-weight:900;color:var(--green);font-size:30px;line-height:1}
.rfps-stat .l{color:var(--muted);font-size:13px;font-weight:600;margin-top:3px}

/* trust bar */
.rfps-trust{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rfps-trust-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:16px 22px}
.rfps-trust-item{text-align:center}
.rfps-trust-item strong{display:block;color:var(--green-dk);font-size:14px}
.rfps-trust-item small{color:var(--muted);font-size:12px}

/* section heads */
.rfps-sec{padding:34px 22px 10px}
.rfps-sec-head{margin-bottom:20px}
.rfps-sec-head h2{font-size:clamp(24px,3vw,32px);font-weight:800;margin:0}

/* category tiles */
.rfps-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rfps-cat{display:block;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;box-shadow:var(--shadow);transition:transform .15s ease,box-shadow .15s ease;text-decoration:none}
.rfps-cat:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.rfps-cat-top{display:flex;align-items:center;justify-content:center;height:140px;font-size:56px}
.rfps-cat-top.c1{background:linear-gradient(135deg,#dff3e7,#bfe7cf)}
.rfps-cat-top.c2{background:linear-gradient(135deg,#fff0db,#ffe0b8)}
.rfps-cat-top.c3{background:linear-gradient(135deg,#e9e3fb,#d9cffb)}
.rfps-cat-body{display:block;padding:18px 20px 20px}
.rfps-cat-body strong{display:block;font-size:18px}
.rfps-cat-body span{display:block;color:var(--muted);font-size:13.5px;margin-top:5px}

/* give-back strip */
.rfps-giveback{margin:14px 0 4px;background:var(--green-dk);border-radius:24px;padding:32px 36px;color:#eafff0;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;box-shadow:var(--shadow-lg)}
.rfps-giveback h2{color:#fff;font-size:26px;font-weight:900;margin:0}
.rfps-giveback p{margin:8px 0 0;color:#bfe7cf;max-width:34em}

/* =========  PRODUCT GRID (WooCommerce classic shortcode markup)  ========= */
.rfps-store .woocommerce ul.products{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:0;padding:0;list-style:none}
.rfps-store .woocommerce ul.products::before,
.rfps-store .woocommerce ul.products::after{content:none}
.rfps-store .woocommerce ul.products li.product{
  width:auto !important;margin:0 !important;float:none !important;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow);position:relative;padding:0 0 16px;
  transition:transform .15s ease,box-shadow .15s ease;
}
.rfps-store .woocommerce ul.products li.product:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.rfps-store .woocommerce ul.products li.product img{margin:0 0 14px;border-radius:0;background:#f3efe6}
.rfps-store .woocommerce ul.products li.product .woocommerce-loop-product__title{padding:0 16px;font-family:'Inter';font-size:14px;font-weight:600;color:var(--ink);line-height:1.35;min-height:38px}
.rfps-store .woocommerce ul.products li.product .price{display:block;padding:0 16px;margin-top:8px;font-family:'Nunito';font-weight:900;font-size:20px;color:var(--green-dk)}
.rfps-store .woocommerce ul.products li.product .price del{color:#a7afa9;font-weight:600;font-size:14px;opacity:1}
.rfps-store .woocommerce ul.products li.product .price ins{text-decoration:none}

/* sale badge -> orange pill (top-right) */
.rfps-store .woocommerce ul.products li.product .onsale{
  position:absolute;top:12px;right:12px;left:auto;margin:0;
  background:var(--sun);color:#3a2306;font-family:'Nunito';font-weight:800;
  border-radius:999px;padding:4px 12px;min-height:0;min-width:0;line-height:1.5;
}
/* give-back chip (top-left, no collision with SALE) */
.rfps-store .woocommerce ul.products li.product::after{
  content:"\1FAB6  Gives back";position:absolute;top:12px;left:12px;z-index:3;
  background:#e7f5ec;color:var(--green);font-family:'Nunito';font-weight:800;font-size:11px;
  padding:4px 9px;border-radius:999px;pointer-events:none;
}
/* add-to-cart -> green pill */
.rfps-store .woocommerce ul.products li.product .button,
.rfps-store .woocommerce ul.products li.product a.add_to_cart_button{
  display:block;margin:14px 16px 0;text-align:center;
  background:var(--green);color:#fff;border-radius:999px;border:0;
  font-family:'Nunito';font-weight:800;padding:11px 22px;
  transition:background .15s ease,transform .12s ease;
}
.rfps-store .woocommerce ul.products li.product .button:hover{background:var(--green-mid);transform:translateY(-2px)}

/* accessibility */
.rfps-store a:focus-visible,.rfps-store button:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){.rfps-store *{transition:none !important}}

/* responsive */
@media(max-width:980px){
  .rfps-hero-grid{grid-template-columns:1fr}
  .rfps-hero-art{order:-1;min-height:230px}
  .rfps-store .woocommerce ul.products{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .rfps-trust-row{grid-template-columns:1fr 1fr;gap:14px}
  .rfps-cats{grid-template-columns:1fr}
}
@media(max-width:520px){
  .rfps-store .woocommerce ul.products{grid-template-columns:1fr 1fr}
}