/* =========================================================
   Pets Sparkle brand colors v2: Sparkle Blue + Sparkle Yellow
   Blue  = brand, navigation, links, secondary actions
   Yellow = buy actions (add to cart, shop now, checkout, place order),
            icon tiles, arrow buttons and highlights
   Loaded last so it wins over older button rules.
   ========================================================= */
:root{
  --ps-blue:#2455E8; --ps-blue-600:#1C46C4;
  --ps-yellow:#FFD24D; --ps-yellow-600:#FFC61A; --ps-yellow-700:#F2B400;
  --ps-on-yellow:#15181C;
  --accent2:var(--ps-yellow); --accent2-ink:var(--ps-yellow-600);
}

/* ---------- 1. Buy buttons (yellow, dark text) ---------- */
html body .ps-btn.ps-btn-buy,
html body a.ps-btn.ps-btn-buy,
html body .ps-btn-primary.ps-btn-buy,
html body a.ps-btn-primary.ps-btn-buy,
html body .ps-btn-white.ps-btn-buy,
html body .atc,
html body a.atc,
html body .ps-card .atc,
html body .ps-btn-primary.add_to_cart_button,
html body a.ps-btn-primary.add_to_cart_button,
html body .ps-pdp-add,
html body .ps-btn-primary.ps-pdp-add,
html body .single_add_to_cart_button,
html body button.single_add_to_cart_button,
html body .ps-sticky-atc button,
html body.ps-home .ps-hero3-ctas a.p{
  background:var(--ps-yellow)!important;
  background-image:none!important;
  color:var(--ps-on-yellow)!important;
  border:0!important;
  font-weight:800!important;
  box-shadow:0 10px 22px -12px rgba(176,125,0,.55), inset 0 -2px 0 rgba(0,0,0,.08)!important;
  text-shadow:none!important;
}
html body .ps-btn.ps-btn-buy:hover,
html body .ps-btn-primary.ps-btn-buy:hover,
html body .ps-btn-white.ps-btn-buy:hover,
html body .atc:hover,
html body .ps-btn-primary.add_to_cart_button:hover,
html body .ps-pdp-add:hover,
html body .single_add_to_cart_button:hover,
html body .ps-sticky-atc button:hover,
html body.ps-home .ps-hero3-ctas a.p:hover{
  background:var(--ps-yellow-600)!important;
  color:var(--ps-on-yellow)!important;
  box-shadow:0 14px 28px -12px rgba(176,125,0,.6), inset 0 -2px 0 rgba(0,0,0,.08)!important;
}
html body .ps-btn-buy svg, html body .atc svg, html body .ps-pdp-add svg,
html body.ps-home .ps-hero3-ctas a.p svg{color:var(--ps-on-yellow)!important;stroke:currentColor}
html body .ps-btn-buy:focus-visible, html body .atc:focus-visible, html body .ps-pdp-add:focus-visible,
html body .ps-sticky-atc button:focus-visible, html body.ps-home .ps-hero3-ctas a.p:focus-visible{
  outline:3px solid var(--ps-blue)!important; outline-offset:3px!important;
}
/* "added" / loading states keep the yellow */
html body .atc.loading, html body .atc.added, html body .ps-pdp-add.loading, html body .ps-pdp-add.added{background:var(--ps-yellow-600)!important;color:var(--ps-on-yellow)!important}
/* the light sweep on hover reads better as white on yellow */
html body .atc::after, html body .ps-btn-buy::after, html body .ps-pdp-add::after{background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent)!important}

/* ---------- 2. Cart + checkout (WooCommerce blocks + classic) ---------- */
html body.woocommerce-cart.woocommerce-cart.woocommerce-cart.woocommerce-cart.woocommerce-cart .wc-block-cart__submit-button,
html body.woocommerce-checkout.woocommerce-checkout.woocommerce-checkout.woocommerce-checkout:not(.woocommerce-order-received) .wc-block-cart__submit-button,
html body.woocommerce-checkout.woocommerce-checkout.woocommerce-checkout.woocommerce-checkout:not(.woocommerce-order-received) .wc-block-components-checkout-place-order-button,
html body .wc-block-components-checkout-place-order-button,
html body .wc-block-cart__submit-button,
html body .woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
html body #place_order,
html body .wc-block-mini-cart__footer-checkout,
html body .woocommerce-mini-cart__buttons .checkout{
  background:var(--ps-yellow)!important;
  background-color:var(--ps-yellow)!important;
  background-image:none!important;
  color:var(--ps-on-yellow)!important;
  border:0!important;
  font-weight:800!important;
  box-shadow:0 12px 26px -14px rgba(176,125,0,.6), inset 0 -2px 0 rgba(0,0,0,.08)!important;
}
html body.woocommerce-cart.woocommerce-cart.woocommerce-cart.woocommerce-cart.woocommerce-cart .wc-block-cart__submit-button:hover,
html body.woocommerce-checkout.woocommerce-checkout.woocommerce-checkout.woocommerce-checkout:not(.woocommerce-order-received) .wc-block-components-checkout-place-order-button:hover,
html body .wc-block-components-checkout-place-order-button:hover,
html body .wc-block-cart__submit-button:hover,
html body #place_order:hover,
html body .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover{
  background:var(--ps-yellow-600)!important; background-color:var(--ps-yellow-600)!important; color:var(--ps-on-yellow)!important;
}
html body .wc-block-components-checkout-place-order-button *,
html body .wc-block-cart__submit-button *{color:var(--ps-on-yellow)!important}
html body .wc-block-components-checkout-place-order-button:focus-visible,
html body .wc-block-cart__submit-button:focus-visible{outline:3px solid var(--ps-blue)!important;outline-offset:3px!important}

/* ---------- 3. Icon tiles (yellow tile, white-filled icon, refined line) ---------- */
html body.ps-home .ps-bnf .ic,
html body .ps-about-card .ic{
  color:#262B35!important;
  background:linear-gradient(155deg,#FFE48A 0%,#FFD24D 48%,#FFC21A 100%)!important;
  box-shadow:0 10px 20px -10px rgba(196,140,0,.55), inset 0 1px 0 rgba(255,255,255,.65), inset 0 -2px 0 rgba(150,100,0,.14)!important;
}
html body.ps-home .ps-bnf .ic::after{background:radial-gradient(120% 70% at 30% 0%,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 60%)!important}
html body.ps-home .ps-bnf .ic svg,
html body .ps-about-card .ic svg{
  width:28px!important;height:28px!important;color:#262B35!important;
  stroke-width:1.3!important;
  filter:drop-shadow(0 1px 1.5px rgba(140,95,0,.28))!important;
}
/* the main shape of each icon is filled white; details stay as thin dark lines */
html body.ps-home .ps-bnf .ic svg .f,
html body .ps-about-card .ic svg .f{fill:#FFFFFF!important;stroke-width:1.3!important}
html body.ps-home .ps-bnf .ic svg path[vector-effect]{stroke-width:1.45!important}
@media (max-width:700px){
  html body.ps-home .ps-bnf .ic svg{width:24px!important;height:24px!important}
}

/* ---------- 4. Product page benefit icons (same system as the homepage strip) ---------- */
html body .ps-pdp-benefits .b{background:#F7F8FA;border:1px solid #EEF1F6;transition:border-color .2s,box-shadow .2s,transform .2s}
html body .ps-pdp-benefits .b:hover{border-color:#F3E2A6;box-shadow:0 18px 34px -24px rgba(150,105,0,.35);transform:translateY(-2px)}
html body .ps-pdp-benefits .ic{
  position:relative;width:64px!important;height:64px!important;border-radius:18px!important;overflow:visible!important;
  border:0!important;color:#262B35;margin-bottom:16px!important;
  background:linear-gradient(155deg,#FFE48A 0%,#FFD24D 48%,#FFC21A 100%)!important;
  box-shadow:0 12px 22px -12px rgba(196,140,0,.6), inset 0 1px 0 rgba(255,255,255,.65), inset 0 -2px 0 rgba(150,100,0,.14)!important;
}
html body .ps-pdp-benefits .ic::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(120% 70% at 30% 0%,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 60%)}
html body .ps-pdp-benefits .ic svg{position:relative;z-index:1;width:32px;height:32px;display:block;color:#262B35;filter:drop-shadow(0 1px 1.5px rgba(140,95,0,.28))}
html body .ps-pdp-benefits .ic svg .f{fill:#fff}
html body .ps-pdp-benefits .b:hover .ic{transform:translateY(-3px) rotate(-4deg);box-shadow:0 16px 26px -12px rgba(196,140,0,.65), inset 0 1px 0 rgba(255,255,255,.65), inset 0 -2px 0 rgba(150,100,0,.14)!important}
@media (max-width:640px){
  html body .ps-pdp-benefits .ic{width:52px!important;height:52px!important;border-radius:15px!important;margin-bottom:12px!important}
  html body .ps-pdp-benefits .ic svg{width:27px;height:27px}
}