/* ==========================================================
   PedidoPop — DESIGN SYSTEM DA LOJA PÚBLICA
   Edite este arquivo no cPanel para refinar visual da loja.
   Ele sobrescreve apenas variáveis de escala, sem !important.
   Caminho: wp-content/plugins/pedidopop-saas/store/css/design-system.css
   ========================================================== */

body.pp-store-body{
  /* =========================
     TAMANHOS PRINCIPAIS
     ========================= */
  --pp-store-max-width:760px;
  --pp-photo-size:112px;
  --pp-action-width:130px;
  --pp-action-height:50px;
  --pp-cart-height:72px;
  --pp-logo-size:78px;

  /* =========================
     TIPOGRAFIA VIP
     ========================= */
  --pp-font-store:38px;
  --pp-font-subtitle:14px;
  --pp-font-status:13px;
  --pp-font-info:12px;
  --pp-font-category:16px;
  --pp-font-section:25px;
  --pp-font-product:18px;
  --pp-font-desc:13px;
  --pp-font-old-price:12px;
  --pp-font-price:18px;
  --pp-font-saving:12px;
  --pp-font-button:15px;
  --pp-font-qty:15px;
  --pp-font-cart:22px;
  --pp-font-cart-total:22px;
  --pp-font-badge:10px;
  --pp-font-badge-icon:9px;

  /* =========================
     BORDAS VIP
     ========================= */
  --pp-radius-header:18px;
  --pp-radius-info:14px;
  --pp-radius-card:16px;
  --pp-radius-photo:14px;
  --pp-radius-button:14px;
  --pp-radius-badge:8px;
  --pp-radius-cart:16px;
  --pp-radius-modal:16px;
  --pp-radius-input:10px;

  /* =========================
     ESPAÇAMENTOS
     ========================= */
  --pp-page-pad-x:12px;
  --pp-page-pad-top:12px;
  --pp-page-pad-bottom:140px;
  --pp-header-pad-top:20px;
  --pp-header-pad-x:14px;
  --pp-header-pad-bottom:14px;
  --pp-info-height:40px;
  --pp-info-gap:8px;
  --pp-cat-gap:22px;
  --pp-card-gap:12px;
  --pp-card-pad:12px;
  --pp-card-min-height:132px;
  --pp-button-pad-x:14px;
  --pp-qty-button-width:38px;
  --pp-cart-counter-size:48px;

  /* =========================
     BADGES
     ========================= */
  --pp-badge-height:20px;
  --pp-badge-pad-x:7px;
  --pp-badge-top:6px;
  --pp-badge-left:6px;
  --pp-badge-gap:4px;
  --pp-badge-opacity:.88;
  --pp-badge-promo-max:84px;
  --pp-badge-suggestion-max:116px;

  /* =========================
     SOMBRAS SEM LED
     ========================= */
  --pp-shadow-card:0 8px 20px rgba(0,0,0,.08);
  --pp-shadow-soft:0 6px 16px rgba(0,0,0,.12);
  --pp-shadow-photo:0 4px 12px rgba(0,0,0,.10);
  --pp-shadow-header:0 8px 22px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.10);
  --pp-shadow-button:0 7px 16px var(--pp-shadow-theme);
  --pp-shadow-cart:0 10px 24px var(--pp-shadow-theme),0 4px 10px rgba(0,0,0,.14);
}

@media(max-width:700px){
  body.pp-store-body{
    --pp-page-pad-x:10px;
    --pp-page-pad-top:10px;
    --pp-page-pad-bottom:132px;
    --pp-logo-size:68px;
    --pp-photo-size:100px;
    --pp-action-width:108px;
    --pp-action-height:42px;
    --pp-card-min-height:120px;
    --pp-card-gap:9px;
    --pp-card-pad:10px;
    --pp-cart-height:66px;
    --pp-cart-counter-size:44px;
    --pp-qty-button-width:32px;
    --pp-font-store:31px;
    --pp-font-category:15px;
    --pp-font-product:17px;
    --pp-font-desc:12px;
    --pp-font-price:18px;
    --pp-font-button:13px;
    --pp-font-cart:17px;
    --pp-font-cart-total:17px;
    --pp-font-badge:9px;
    --pp-badge-height:19px;
    --pp-badge-pad-x:6px;
  }
}

@media(max-width:390px){
  body.pp-store-body{
    --pp-logo-size:64px;
    --pp-photo-size:92px;
    --pp-action-width:92px;
    --pp-action-height:38px;
    --pp-card-min-height:112px;
    --pp-card-gap:8px;
    --pp-card-pad:9px;
    --pp-qty-button-width:28px;
    --pp-font-store:27px;
    --pp-font-category:14px;
    --pp-font-product:16px;
    --pp-font-desc:10.5px;
    --pp-font-price:17px;
    --pp-font-button:11px;
    --pp-font-cart:15px;
    --pp-font-cart-total:15px;
    --pp-font-badge:8.5px;
    --pp-badge-height:18px;
    --pp-badge-pad-x:5px;
  }
}