/* Add custom CSS styles below */ 
/* ======================================================
   Pinoy Hub – Theme: ملاك (Salla)
   Brand Identity CSS (Philippines colors)
   ====================================================== */

:root{
  /* Brand */
  --ph-blue:#0038A8;
  --ph-red:#CE1126;
  --ph-yellow:#FCD116;

  /* Neutrals */
  --ink:#0F172A;
  --text:#334155;
  --muted:#64748B;
  --border:#E5E7EB;
  --bg:#F6F7F9;
  --card:#FFFFFF;

  /* UI */
  --r-xl:18px;
  --r-lg:16px;
  --r-md:12px;

  --shadow: 0 14px 34px rgba(15,23,42,.10);
  --shadow-sm: 0 8px 18px rgba(15,23,42,.08);
  --ring: 0 0 0 3px rgba(0,56,168,.16);
}

/* ============ Base ============ */
body{
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Links (general) */
a{ color: var(--ph-blue); }
a:hover{ color: var(--ph-red); }

/* ============ Header / Top (best-effort) ============ */
header, .header, .site-header, .s-header{
  background: linear-gradient(90deg,
    rgba(0,56,168,.96) 0%,
    rgba(206,17,38,.92) 62%,
    rgba(252,209,22,.92) 100%);
}
header a, .header a, .site-header a, .s-header a{
  color:#fff !important;
}

/* Search field in header */
.s-search input,
input[type="search"], .search input{
  border: 1px solid rgba(255,255,255,.35) !important;
  background: rgba(255,255,255,.12) !important;
  color:#fff !important;
  border-radius: 999px !important;
}
.s-search input::placeholder,
input[type="search"]::placeholder{
  color: rgba(255,255,255,.80) !important;
}
.s-search input:focus,
input[type="search"]:focus{
  box-shadow: var(--ring) !important;
  outline: none !important;
}

/* ============ Buttons ============ */
/* Primary buttons -> Blue */
.s-button-primary,
.s-button--primary,
.btn-primary,
.button-primary,
button[type="submit"],
a.s-button-primary{
  background: var(--ph-blue) !important;
  border: 1px solid rgba(0,56,168,.22) !important;
  color:#fff !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 22px rgba(0,56,168,.18) !important;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.s-button-primary:hover,
.s-button--primary:hover,
.btn-primary:hover,
.button-primary:hover,
button[type="submit"]:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(0,56,168,.22) !important;
  opacity: .98;
}

/* Outline buttons */
.s-button-outline,
.s-button--outline,
.btn-secondary,
.button-secondary{
  background:#fff !important;
  color: var(--ph-blue) !important;
  border: 1px solid rgba(0,56,168,.26) !important;
  border-radius: 999px !important;
}
.s-button-outline:hover,
.s-button--outline:hover{
  box-shadow: var(--shadow-sm) !important;
}

/* Secondary CTA (optional): red buttons if exist */
.s-button-danger,
.btn-danger,
.button-danger{
  background: var(--ph-red) !important;
  border: 1px solid rgba(206,17,38,.22) !important;
  color:#fff !important;
  border-radius: 999px !important;
}

/* ============ Headings / section underline ============ */
h1,h2,h3,.section-title,.s-title{
  color: var(--ink);
  letter-spacing: -.2px;
}
h2,.section-title,.s-title{
  position: relative;
  padding-bottom: 10px;
}
h2::after,.section-title::after,.s-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:68px;
  height:4px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--ph-blue), var(--ph-red), var(--ph-yellow));
}

/* ============ Cards / blocks / containers ============ */
.card, .box, .panel,
.s-block, .home-section, .section,
.s-product-card, .product-card,
.s-cart, .cart,
.s-checkout, .checkout-card{
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Product cards hover */
.s-product-card:hover, .product-card:hover{
  transform: translateY(-2px);
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: var(--shadow) !important;
}

/* Images smooth corners */
img, .s-product-card img, .product-card img{
  border-radius: 14px !important;
}

/* ============ Prices ============ */
.price, .product-price, .s-product-card-price{
  color: var(--ph-red) !important;
  font-weight: 900 !important;
}
.price del, .old-price, .compare-at{
  color: var(--muted) !important;
  font-weight: 700 !important;
}

/* ============ Badges (Sale / New) ============ */
.s-badge, .badge, .product-badge{
  border-radius: 999px !important;
  padding: 6px 10px !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  letter-spacing: .2px;
}
.s-badge--sale, .badge-sale, .sale, .discount{
  background: rgba(206,17,38,.12) !important;
  color: var(--ph-red) !important;
  border: 1px solid rgba(206,17,38,.20) !important;
}
.s-badge--new, .badge-new, .new{
  background: rgba(0,56,168,.12) !important;
  color: var(--ph-blue) !important;
  border: 1px solid rgba(0,56,168,.20) !important;
}

/* ============ Tabs (Product details / reviews) ============ */
.tabs a, .tab a,
.s-tabs a, .s-tabs__item,
.product-tabs a{
  border-radius: 999px !important;
  padding: 10px 14px !important;
  border: 1px solid var(--border) !important;
  background:#fff !important;
  color: var(--text) !important;
}
.tabs a.active, .tab a.active,
.s-tabs .is-active, .s-tabs__item.is-active,
.product-tabs a.active{
  background: rgba(206,17,38,.10) !important;
  color: var(--ph-red) !important;
  border-color: rgba(206,17,38,.22) !important;
  font-weight: 900 !important;
}

/* ============ Filters / category chips ============ */
.s-filters a, .s-filter a,
.filters a, .category-list a{
  border: 1px solid var(--border) !important;
  background: #fff !important;
  color: var(--text) !important;
  border-radius: 999px !important;
  padding: 9px 12px !important;
  text-decoration: none !important;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease !important;
}
.s-filters a:hover, .s-filter a:hover,
.filters a:hover, .category-list a:hover{
  border-color: rgba(0,56,168,.24) !important;
  box-shadow: var(--shadow-sm) !important;
  transform: translateY(-1px);
}
.s-filters a.is-active, .s-filter a.is-active,
.filters a.active, .category-list a.active{
  background: rgba(0,56,168,.10) !important;
  color: var(--ph-blue) !important;
  border-color: rgba(0,56,168,.22) !important;
  font-weight: 900 !important;
}

/* ============ Inputs / forms ============ */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
select, textarea, .s-form-control{
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  padding: 12px 12px !important;
  background: #fff !important;
  color: var(--text) !important;
  outline: none !important;
  transition: box-shadow .18s ease, border-color .18s ease !important;
}
input:focus, select:focus, textarea:focus, .s-form-control:focus{
  border-color: rgba(0,56,168,.28) !important;
  box-shadow: var(--ring) !important;
}

/* ============ Cart / Checkout summary emphasis ============ */
.order-summary, .cart-summary, .summary,
.s-cart-summary, .s-cart__summary,
.s-checkout-summary, .checkout-summary{
  border: 1px solid var(--border) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow) !important;
  overflow: hidden !important;
}
.order-summary .final, .cart-summary .final,
.s-cart__summary-total, .checkout-summary .final{
  color: var(--ph-red) !important;
  font-weight: 900 !important;
}

/* ============ Footer (keep clean) ============ */
footer, .footer, .site-footer, .s-footer{
  background: #0B1220 !important;
  color: rgba(255,255,255,.88) !important;
}
footer a, .footer a, .s-footer a{
  color: rgba(252,209,22,.95) !important;
  text-decoration: none !important;
}
footer a:hover{ color:#fff !important; text-decoration: underline !important; }

/* ============ Soft Filipino accents ============ */
.home-section, .section, .s-block{
  background-image:
    radial-gradient(circle at 12% 18%, rgba(252,209,22,.14), transparent 45%),
    radial-gradient(circle at 88% 28%, rgba(206,17,38,.10), transparent 42%);
  background-repeat: no-repeat;
}

/* Mobile */
@media (max-width: 768px){
  h2::after,.section-title::after,.s-title::after{ width: 52px; }
  .s-product-card:hover, .product-card:hover{ transform:none; }
}
/* =================================
   Pinoy Hub – Malak Theme Fixes
   Focus: Mobile cards + Checkout CTA
   ================================= */

/* ---------- 1. Product cards (Mobile) ---------- */
@media (max-width: 768px){

  .s-product-card,
  .product-card{
    border-radius: 16px !important;
    padding: 10px !important;
    box-shadow: 0 6px 16px rgba(0,0,0,.08) !important;
  }

  /* Product image */
  .s-product-card img,
  .product-card img{
    border-radius: 14px !important;
  }

  /* Product title */
  .s-product-card-title,
  .product-card-title,
  .s-product-card h3{
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.3;
    margin-bottom: 6px;
  }

  /* Price */
  .s-product-card-price,
  .product-price{
    font-size: 14px !important;
    font-weight: 900 !important;
    color: #CE1126 !important;
    margin-bottom: 6px;
  }

  /* Add to cart button */
  .s-product-card .s-button-primary,
  .product-card .add-to-cart{
    font-size: 13px !important;
    padding: 10px 12px !important;
    border-radius: 999px !important;
  }

  /* Wishlist icon */
  .s-product-card .wishlist,
  .product-card .wishlist{
    top: 10px !important;
    right: 10px !important;
  }
}

/* ---------- 2. Checkout: Confirm Payment ---------- */
.checkout button[type="submit"],
.s-checkout button[type="submit"],
.checkout .confirm-payment,
button.confirm-payment{
  background: #0038A8 !important; /* Pinoy Blue */
  color: #fff !important;
  font-weight: 900 !important;
  font-size: 16px !important;
  padding: 14px !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 24px rgba(0,56,168,.25) !important;
  border: none !important;
}

.checkout button[type="submit"]:hover{
  opacity: .95;
}

/* ---------- 3. Coupon Apply button ---------- */
.coupon button,
.apply-coupon,
.s-coupon button{
  background: #FCD116 !important; /* Yellow */
  color: #1F2937 !important;
  font-weight: 800 !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  border: none !important;
}

/* ---------- 4. Product page buttons ---------- */
.s-product .add-to-cart,
.product .add-to-cart{
  background: #0038A8 !important;
  color: #fff !important;
  font-weight: 900 !important;
  border-radius: 999px !important;
}

.s-product .buy-now,
.product .buy-now{
  background: #fff !important;
  color: #CE1126 !important;
  border: 2px solid #CE1126 !important;
  font-weight: 800 !important;
  border-radius: 999px !important;
}

/* ---------- 5. Tabs (Details / Reviews) ---------- */
.product-tabs a,
.s-tabs__item{
  border-radius: 999px !important;
  font-weight: 700 !important;
}

.product-tabs a.active,
.s-tabs__item.is-active{
  background: rgba(0,56,168,.12) !important;
  color: #0038A8 !important;
  border-color: rgba(0,56,168,.25) !important;
}

/* ---------- 6. Back to top (mobile) ---------- */
.back-to-top{
  background: #fff !important;
  color: #0038A8 !important;
  border: 1px solid rgba(0,56,168,.25) !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.10) !important;
}