/* PET ACC DESIGN SYSTEM v2.0 - Refined Editorial x Organic Warmth */
:root{
  /* COLORS */
  --bone:#F4EFE6; --bone-2:#EBE3D5; --bone-3:#DDD2BE;
  --moss:#1A2A1B; --moss-2:#2C3E2D; --moss-3:#4A6A4B;
  --terracotta:#B5622A; --terracotta-2:#D4804A;
  --ochre:#C9A84C;
  --ink:#1A1A18; --ink-2:#3D3D35; --ink-3:#7A7A6A; --ink-4:#AFA793;
  --wa-green:#25D366;
  /* TYPOGRAPHY */
  --serif:'Fraunces',Georgia,serif;
  --sans:'Inter',system-ui,sans-serif;
  --mono:'DM Mono',monospace;
  /* SPACING */
  --container:1320px;
  --pad-x:32px;
  --section-y:120px;
  /* RADIUS */
  --r-sm:4px; --r-md:8px; --r-lg:18px; --r-pill:100px;
  /* v1.0 backward compat for existing templates */
  --ivory:var(--bone);
  --charcoal:var(--moss);
  --copper:var(--terracotta);
  --soft-peach:var(--bone-3);
  --sage:var(--bone-2);
  --warm-gray:var(--ink-3);
  --font-heading:var(--serif);
  --font-body:var(--sans);
  --font-accent:var(--serif);
  --r-base:var(--r-md);
  --r-lg:18px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 1px 2px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.08);
  --shadow-lg:0 1px 2px rgba(0,0,0,.06),0 16px 48px rgba(0,0,0,.12);
  --tr-fast:150ms cubic-bezier(.16,1,.3,1);
  --tr-base:250ms cubic-bezier(.16,1,.3,1);
  --tr-slow:400ms cubic-bezier(.16,1,.3,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --sp-xs:4px; --sp-sm:8px; --sp-md:16px; --sp-lg:24px; --sp-xl:32px;
  --sp-2xl:48px; --sp-3xl:64px; --sp-4xl:96px; --sp-5xl:128px;
}
@media(max-width:1100px){:root{--section-y:80px}}
@media(max-width:768px){:root{--pad-x:20px;--section-y:64px}}

/* a11y */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-to-main{position:absolute;left:-9999px;top:0;z-index:10000;padding:16px 24px;background:var(--moss);color:var(--bone)}
.skip-to-main:focus{left:0}

/* reveal */
.reveal,.fade-in{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.reveal.in,.fade-in.visible{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.reveal,.fade-in{opacity:1;transform:none}}

/* ANNOUNCEMENT bar */
.anno{background:var(--moss);color:var(--bone);padding:9px 0;overflow:hidden;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.anno-track{display:flex;animation:scroll-anno 32s linear infinite;white-space:nowrap}
.anno-item{padding:0 28px;display:inline-flex;align-items:center;gap:6px}
.anno-sep{opacity:.3}
@keyframes scroll-anno{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* BUTTONS (v2.0 - for Phase 2 templates) */
.btn-primary{display:inline-flex;align-items:center;gap:10px;background:var(--moss);color:var(--bone);padding:16px 32px;border-radius:var(--r-pill);font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;transition:all .3s;cursor:pointer;border:none;text-decoration:none}
.btn-primary:hover{background:var(--terracotta);transform:translateY(-1px);box-shadow:0 8px 24px rgba(181,98,42,.25);color:var(--bone)}
.btn-outline{display:inline-flex;align-items:center;gap:10px;background:transparent;color:var(--moss);padding:16px 32px;border-radius:var(--r-pill);font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;border:0.5px solid rgba(26,42,27,.3);transition:all .3s;cursor:pointer;text-decoration:none}
.btn-outline:hover{background:var(--moss);color:var(--bone);border-color:var(--moss)}
.btn-cta{display:inline-flex;align-items:center;gap:10px;background:var(--terracotta);color:var(--bone);padding:18px 36px;border-radius:var(--r-pill);font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;transition:all .3s;border:none;cursor:pointer;text-decoration:none}
.btn-cta:hover{background:var(--terracotta-2);transform:translateY(-2px);box-shadow:0 12px 32px rgba(181,98,42,.3);color:var(--bone)}
.btn-wa{display:inline-flex;align-items:center;gap:10px;background:var(--wa-green);color:var(--bone);padding:14px 24px;border-radius:var(--r-pill);font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.04em;transition:all .3s;border:none;cursor:pointer;text-decoration:none}
.btn-wa:hover{filter:brightness(1.1);transform:translateY(-1px);color:var(--bone)}
.btn-text{display:inline-flex;align-items:center;gap:8px;color:var(--moss);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:8px 0;text-decoration:none;border-bottom:0.5px solid var(--moss)}

/* PRODUCT CARD (v2.0) */
.product-card{position:relative;cursor:pointer;transition:transform .4s var(--ease-out)}
.product-card:hover{transform:translateY(-6px)}
.pc-img-wrap{aspect-ratio:1;background:var(--bone);border-radius:var(--r-sm);overflow:hidden;position:relative;margin-bottom:18px}
.pc-img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.product-card:hover .pc-img{transform:scale(1.04)}
.pc-badge{position:absolute;top:14px;left:14px;background:var(--terracotta);color:var(--bone);padding:4px 10px;border-radius:var(--r-pill);font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;z-index:2}
.pc-info{padding:0 4px}
.pc-cat{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.pc-name{font-family:var(--serif);font-size:18px;font-weight:400;letter-spacing:-0.01em;color:var(--moss);line-height:1.25;margin-bottom:8px}
.pc-cur{font-family:var(--serif);font-size:18px;font-weight:500;color:var(--terracotta)}
.pc-old{font-family:var(--sans);font-size:12px;color:var(--ink-3);text-decoration:line-through}

/* Floating WA button (v2.0) */
.wa-float{position:fixed;bottom:32px;right:32px;width:60px;height:60px;border-radius:50%;background:var(--wa-green);color:white;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 32px rgba(37,211,102,.4);z-index:99;transition:all .3s;text-decoration:none}
.wa-float:hover{transform:scale(1.1);color:white}
.wa-pulse{position:absolute;inset:-4px;border-radius:50%;background:var(--wa-green);opacity:.3;animation:wa-pulse 2s infinite}
@keyframes wa-pulse{0%{transform:scale(1);opacity:.4}100%{transform:scale(1.6);opacity:0}}


/* === MOBILE FIXES PET-ACC.COM (2026-04-30) === */

/* 1. Hide injected duplicate navbar */
/* moved to scoped block below */

/* 2. Mobile: tombol "tambah ke keranjang" (.prod-add) visible & rapi */
@media (max-width: 768px) {
  .prod-pr-row {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: nowrap;
  }
  .prod-price { flex: 1 1 auto; min-width: 0; }
  .prod-add {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* 3. Mobile: card "Mengapa Memilih" (.val-card) full width single column */
@media (max-width: 768px) {
  .vals-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  .val-card {
    width: 100%;
    box-sizing: border-box;
  }
}

/* 4. Mobile: kategori hewan (.hewan-card) proporsional 2 kolom */
@media (max-width: 768px) {
  .hewan-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
  }
  .hewan-card {
    width: 100% !important;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }
  .hewan-card h3,
  .hewan-card .label,
  .hewan-card .title {
    font-size: 0.95rem;
    line-height: 1.25;
    word-break: break-word;
  }
}


/* === REVISI 2026-04-30: footer dobel + restore shop-hero === */




/* === REVISI 2026-04-30 v2: scoped only to custom templates === */
body.page-template-page-petacc-shop .petacc-nav.pa-injected-nav,
body.page-template-page-petacc-about .petacc-nav.pa-injected-nav { display: none !important; }
body.page-template-page-petacc-shop .petacc-footer.pa-injected-footer,
body.page-template-page-petacc-about .petacc-footer.pa-injected-footer { display: none !important; }
body.page-template-page-petacc-shop .shop-hero { display: block !important; }


/* === REVISI v3 override Customizer broad hide rule === */
body:not(.page-template-page-petacc-shop):not(.page-template-page-petacc-about) nav.petacc-nav.pa-injected-nav { display: block !important; }
body:not(.page-template-page-petacc-shop):not(.page-template-page-petacc-about) footer.petacc-footer.pa-injected-footer { display: block !important; }


/* === REVISI v4 mobile sizing refinement === */
@media (max-width: 768px) {
  /* Tombol cart "+" lebih kompak */
  .prod-add {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    padding: 0 !important;
  }
  /* Foto hero kategori — proporsional 4:5 */
  .pa-cat-img-wrap {
    max-height: 380px;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    width: 100%;
  }
  .pa-cat-img-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
  }
  /* Foto card hewan (.hewan-img) preserve portrait 4:5 */
  .hewan-img {
    aspect-ratio: 4 / 5 !important;
    height: auto !important;
    width: 100% !important;
    overflow: hidden;
  }
  .hewan-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
  }
}