/* ============================================================
   PetGentleman Premium Design System v2026.08.23
   Tokens -> Typography -> Layout -> Components -> WooCommerce
   Scope: whole site. Non-destructive: only styles pg-* classes
   (previously orphaned) and refines theme primitives.
   ============================================================ */

/* ---------- 1. Design tokens ---------- */
:root {
  /* palette */
  --pg-paper:#fdfbf7;      --pg-mist:#eef4f1;
  --pg-evergreen:#386058;  --pg-pine:#173b35;
  --pg-coral:#e2765b;      --pg-coral-deep:#c96047;
  --pg-ink:#243a35;        --pg-muted:#667a74;
  --pg-line:#dce7e3;       --pg-card:#ffffff;
  /* type */
  --pg-font-display:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --pg-font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  /* rhythm */
  --pg-space-xs:.5rem; --pg-space-sm:1rem; --pg-space-md:1.5rem;
  --pg-space-lg:2.5rem; --pg-space-xl:4rem; --pg-space-2xl:6rem;
  /* shape & depth */
  --pg-radius-sm:10px; --pg-radius-md:14px; --pg-radius-lg:22px;
  --pg-shadow-sm:0 2px 8px rgba(23,59,53,.06);
  --pg-shadow-md:0 6px 24px -6px rgba(23,59,53,.12);
  --pg-shadow-lg:0 16px 48px -12px rgba(23,59,53,.18);
  /* motion */
  --pg-ease:cubic-bezier(.22,.61,.36,1);
  --pg-dur-fast:180ms; --pg-dur:280ms; --pg-dur-slow:420ms;
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* ---------- 2. Base typography ---------- */
body {
  font-family:var(--pg-font-body);
  color:var(--pg-ink);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6,
.site-title,.entry-title,.product_title {
  font-family:var(--pg-font-display);
  color:var(--pg-pine);
  letter-spacing:-.015em;
  line-height:1.18;
  font-weight:700;
}
h1{font-size:clamp(2rem,4vw,3rem)}
h2{font-size:clamp(1.55rem,3vw,2.25rem)}
h3{font-size:clamp(1.25rem,2vw,1.5rem);font-weight:600}
p{margin-block:0 1.1em}
a{color:var(--pg-evergreen);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--pg-coral-deep)}

/* accessible focus everywhere */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible {
  outline:3px solid var(--pg-coral);
  outline-offset:2px;
  border-radius:4px;
}

::selection{background:rgba(56,96,88,.22)}

/* ---------- 3. Layout shells (orphaned classes restored) ---------- */
.pg-page{max-width:1180px;margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem)}
.pg-section{padding-block:var(--pg-space-xl)}
.pg-section+.pg-section{padding-top:0}
.pg-shell{width:100%}
.pg-grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--pg-space-lg);align-items:center}

.pg-kicker{
  display:inline-block;font-family:var(--pg-font-display);
  font-size:.82rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pg-evergreen);
  margin-bottom:.75rem;
}
.pg-lede{font-size:1.15rem;line-height:1.7;color:var(--pg-muted);max-width:62ch}
.pg-section-head{margin-bottom:var(--pg-space-lg)}
.pg-actions{display:flex;flex-wrap:wrap;gap:var(--pg-space-sm);align-items:center;margin-top:var(--pg-space-md)}

/* ---------- 4. Buttons ---------- */
.pg-button,
.pg-actions a,
button.single_add_to_cart_button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--pg-font-display);font-weight:600;font-size:.95rem;
  line-height:1;padding:.95em 1.7em;border-radius:999px;
  border:2px solid transparent;cursor:pointer;
  transition:transform var(--pg-dur-fast) var(--pg-ease),
             box-shadow var(--pg-dur) var(--pg-ease),
             background-color var(--pg-dur-fast) var(--pg-ease),
             color var(--pg-dur-fast) var(--pg-ease);
}
.pg-button-primary,a.pg-button-primary,
button.single_add_to_cart_button,.woocommerce a.button,.woocommerce button.button {
  background:var(--pg-evergreen);color:#fff;text-decoration:none;
  box-shadow:var(--pg-shadow-sm);
}
.pg-button-primary:hover,button.single_add_to_cart_button:hover,
.woocommerce a.button:hover,.woocommerce button.button:hover {
  background:var(--pg-pine);color:#fff;
  transform:translateY(-2px);box-shadow:var(--pg-shadow-md);
}
.pg-button-secondary,a.pg-button-secondary {
  background:transparent;color:var(--pg-evergreen);
  border-color:var(--pg-evergreen);text-decoration:none;
}
.pg-button-secondary:hover{background:var(--pg-mist);color:var(--pg-pine);transform:translateY(-2px)}
.pg-button:active,.woocommerce a.button:active{transform:translateY(0)}

/* Buy Now variant (from commerce mu-plugin) */
.pg-buy-now{background:var(--pg-coral)!important;margin-left:.6rem!important}
.pg-buy-now:hover{background:var(--pg-coral-deep)!important}

/* ---------- 5. Cards ---------- */
.pg-card,.pg-product-card,
.woocommerce ul.products li.product{
  background:var(--pg-card);border:1px solid var(--pg-line);
  border-radius:var(--pg-radius-lg);overflow:hidden;
  box-shadow:var(--pg-shadow-sm);
  transition:transform var(--pg-dur) var(--pg-ease),
             box-shadow var(--pg-dur) var(--pg-ease),
             border-color var(--pg-dur) var(--pg-ease);
}
.pg-card:hover,.pg-product-card:hover,
.woocommerce ul.products li.product:hover{
  transform:translateY(-3px);
  box-shadow:var(--pg-shadow-md);
  border-color:rgba(56,96,88,.35);
}
.pg-card-grid{display:grid;gap:var(--pg-space-lg)}
.pg-card-grid.four{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.pg-photo-card{
  position:relative;border-radius:var(--pg-radius-lg);overflow:hidden;
  background:var(--pg-card);border:1px solid var(--pg-line);box-shadow:var(--pg-shadow-md);
}
.pg-photo-card img{width:100%;height:auto;display:block;aspect-ratio:16/10;object-fit:cover}
.pg-photo-card div{padding:var(--pg-space-md) var(--pg-space-lg)}
.pg-photo-card h3{margin-bottom:.35rem}

/* ---------- 6. Shop / product page components ---------- */
.pg-shop-intro{text-align:center;max-width:720px;margin-inline:auto;padding-block:var(--pg-space-lg) var(--pg-space-md)}
.pg-shop-intro .pg-kicker{color:var(--pg-coral-deep)}
.pg-shop-filter{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;
  margin:0 auto var(--pg-space-lg);max-width:900px;
}
.pg-shop-filter a{
  font-size:.85rem;font-weight:600;padding:.5em 1.1em;border-radius:999px;
  background:var(--pg-mist);color:var(--pg-pine);text-decoration:none;
  transition:background var(--pg-dur-fast),color var(--pg-dur-fast);
}
.pg-shop-filter a:hover{background:var(--pg-evergreen);color:#fff}
.pg-loop-benefit{font-size:.9rem;color:var(--pg-muted);line-height:1.55;margin-top:.4rem}
.pg-single-trust{
  display:flex;flex-wrap:wrap;gap:.5rem;margin-top:var(--pg-space-md);
}
.pg-single-trust span{
  display:inline-flex;align-items:center;gap:.4em;
  font-size:.8rem;font-weight:600;color:var(--pg-pine);
  background:var(--pg-mist);border:1px solid var(--pg-line);
  padding:.45em .9em;border-radius:999px;
}
.pg-single-trust span::before{content:"✓";color:var(--pg-evergreen);font-weight:800}

/* ---------- 7. Forms ---------- */
input[type=text],input[type=email],input[type=search],input[type=tel],
input[type=number],input[type=password],textarea,select {
  font-family:var(--pg-font-body);font-size:1rem;color:var(--pg-ink);
  background:#fff;border:1.5px solid var(--pg-line);border-radius:var(--pg-radius-md);
  padding:.8em 1em;transition:border-color var(--pg-dur-fast),box-shadow var(--pg-dur-fast);
}
input:focus,textarea:focus,select:focus{
  border-color:var(--pg-evergreen);
  box-shadow:0 0 0 4px rgba(56,96,88,.12);
  outline:none;
}
label{font-weight:600;color:var(--pg-pine)}

/* ---------- 8. WooCommerce refinements ---------- */
.woocommerce ul.products li.product img{width:100%;height:auto;border-radius:var(--pg-radius-md) var(--pg-radius-md) 0 0}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--pg-font-display);font-weight:600;color:var(--pg-pine);
  font-size:1rem!important;padding:.2em .9em;
}
.woocommerce ul.products li.product .price{
  color:var(--pg-coral-deep)!important;font-weight:700;font-size:1.05rem!important;
  padding:0 .9em;
}
.woocommerce ul.products li.product .button,
.pg-view-details{margin:.5em .9em 1.2em!important}
span.onsale{
  background:var(--pg-coral);color:#fff;font-weight:700;letter-spacing:.04em;
  border-radius:999px;padding:.4em 1em;min-height:auto;line-height:1.4;top:1em;left:1em;
}
.woocommerce div.product p.price{color:var(--pg-coral-deep);font-size:1.5rem;font-weight:700}
.woocommerce div.product .product_title{font-size:clamp(1.6rem,3vw,2.3rem)}
.woocommerce div.product div.images img{border-radius:var(--pg-radius-lg);box-shadow:var(--pg-shadow-sm)}
.woocommerce-tabs ul.tabs li.active a{color:var(--pg-pine)}
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  border-radius:var(--pg-radius-md);border-top-color:var(--pg-evergreen);
}
/* checkout & cart */
.woocommerce-checkout #payment{
  background:var(--pg-mist);border-radius:var(--pg-radius-lg);border:none;
}
#add_payment_method table.cart td.actions .coupon .input-text,
.woocommerce-cart table.cart td.actions .coupon .input-text,
.woocommerce-checkout table.cart td.actions .coupon .input-text{
  border:1.5px solid var(--pg-line);padding:.75em 1em;width:140px!important;
}
.shop_table{border-radius:var(--pg-radius-md)}
.shop_table th{font-family:var(--pg-font-display);color:var(--pg-pine)}

/* ---------- 9. Imagery ---------- */
img{max-width:100%;height:auto}
.entry-content img,.wp-block-image img,.pg-photo-card img{border-radius:var(--pg-radius-md)}
.wp-block-image figcaption{font-size:.85rem;color:var(--pg-muted);text-align:center}

/* ---------- 10. Motion (restrained, premium) ---------- */
@keyframes pgFadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: no-preference){
  .entry-content>*{animation:pgFadeUp var(--pg-dur-slow) var(--pg-ease) both}
}

/* ---------- 11. Header/footer polish ---------- */
.site-header,[data-row*=top],[data-row*=middle]{transition:background var(--pg-dur)}
.site-branding .site-title{font-weight:800;letter-spacing:-.02em;color:var(--pg-pine)}
footer.site-footer,[data-column-set] footer{background:var(--pg-pine);color:#e8f0ec}
footer a{color:#cfe0d8}
footer a:hover{color:#fff}

/* ---------- 12. Responsive ---------- */
@media (max-width:1024px){
  .pg-section{padding-block:var(--pg-space-lg)}
}
@media (max-width:767px){
  :root{--pg-space-xl:3rem;--pg-space-2xl:4rem}
  body{font-size:.975rem}
  .pg-grid-2{gap:var(--pg-space-md)}
  .pg-card-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--pg-space-sm)}
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product{width:48%!important;float:left!important;margin:0 2% 1.6em 0!important}
  .woocommerce ul.products li.product:nth-child(2n){margin-right:0!important}
  .pg-actions a,.woocommerce a.button,.woocommerce button.button{width:100%;justify-content:center}
  .pg-single-trust span{font-size:.72rem;padding:.4em .7em}
  .pg-shop-filter{overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start;-webkit-overflow-scrolling:touch;padding-bottom:.5rem}
  table.shop_table_responsive tr td{text-align:right!important}
}
@media (max-width:400px){
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product{width:100%!important;margin-right:0!important}
}

/* ---------- 13. Print (order pages) ---------- */
@media print{
  header.site-header,footer.site-footer,.pg-actions,.pg-single-trust{display:none!important}
  body{color:#000;background:#fff}
}

/* ============ end of design system ============ */