/*
Theme Name: JIF Pizza
Theme URI: https://jifpizza.com
Description: Tema JIF Pizza — storefront gaya aplikasi pesan makanan (ojol style). Child of Storefront.
Author: JIF Pizza
Template: storefront
Version: 1.0.0
Text Domain: jif-pizza
*/

:root{
  --jif-red:#E1251B;
  --jif-red-dark:#B71C15;
  --jif-green:#1FA24A;
  --jif-green-dark:#178C40;
  --jif-ink:#1A1A1A;
  --jif-muted:#6b6b6b;
  --jif-bg:#f5f5f5;
  --jif-card:#ffffff;
  --jif-radius:14px;
}

body{ background:var(--jif-bg); color:var(--jif-ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
a{ color:var(--jif-red); }
.col-full{ max-width:1120px; }

/* =========================================================
   HEADER CUSTOM — satu baris: logo | Beranda Keranjang | keranjang
   ========================================================= */
header.site-header, header.site-header#masthead{
  background:#E1251B !important;
  background-color:#E1251B !important;
  position:sticky; top:0; z-index:999;
  border-bottom:3px solid #1FA24A !important;
  box-shadow:0 2px 12px rgba(0,0,0,.14);
  padding:4px 0 !important;
}
.site-header .col-full{ display:block !important; }
.jif-header-inner{
  display:flex; align-items:center; gap:16px; width:100%;
}
.jif-logo{ line-height:0; flex:0 0 auto; }
.jif-logo a, .jif-logo img{ display:block; }
.jif-logo img.custom-logo{
  height:88px !important; width:88px !important; max-height:88px !important; object-fit:contain;
}
.jif-nav{ display:flex; align-items:center; gap:6px; flex:1 1 auto; }
.jif-nav a{
  color:#fff !important; font-weight:700; text-decoration:none;
  padding:.55em 1.2em; border-radius:999px; transition:background .15s;
}
.jif-nav a:hover, .jif-nav a.active{ background:var(--jif-green) !important; color:#fff !important; }
.jif-cart{
  flex:0 0 auto; margin-left:auto; display:flex; align-items:center; gap:7px;
  color:#fff !important; text-decoration:none; font-weight:700;
}
.jif-cart svg{ width:26px; height:26px; }
.jif-cart-count{
  background:var(--jif-green); color:#fff; border-radius:999px;
  min-width:22px; height:22px; padding:0 6px; font-size:.82rem; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; line-height:1;
}
button.menu-toggle{ display:none !important; }

@media (max-width:767px){
  .jif-header-inner{ gap:10px; }
  .jif-logo img.custom-logo{ height:76px !important; width:76px !important; max-height:76px !important; }
  .jif-nav a{ padding:.45em .7em; font-size:.9rem; }
  .jif-nav{ gap:4px; flex:1 1 auto; }
  .jif-nav a{ padding:.5em .85em; font-size:.92rem; }
  .jif-cart svg{ width:24px; height:24px; }
}

/* =========================================================
   LAYOUT — full width tanpa sidebar
   ========================================================= */
#primary.content-area{ width:100% !important; float:none !important; }
#secondary{ display:none !important; }

/* =========================================================
   SECTION TITLE per ukuran
   ========================================================= */
.jif-section-title{
  font-size:1.32rem; font-weight:800; margin:1.5em 0 .6em; color:var(--jif-ink);
  display:flex; align-items:center; gap:10px;
}
.jif-section-title::before{
  content:""; width:6px; height:1.15em; background:var(--jif-red); border-radius:4px; display:inline-block;
}
.home .entry-title{ display:none; }

/* =========================================================
   PRODUCT GRID — kartu ala app, rapat & rapi
   ========================================================= */
.woocommerce ul.products::before, .woocommerce ul.products::after,
.woocommerce-page ul.products::before, .woocommerce-page ul.products::after{
  content:none !important; display:none !important;
}
.woocommerce ul.products, .woocommerce-page ul.products{
  display:grid !important; grid-template-columns:repeat(2,1fr); gap:14px; margin:10px 0 8px !important; padding:0 !important;
}
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product{
  width:auto !important; margin:0 !important; padding:0 0 14px !important; float:none !important; clear:none !important;
  background:var(--jif-card); border-radius:var(--jif-radius);
  box-shadow:0 1px 8px rgba(0,0,0,.07); overflow:hidden;
  display:flex; flex-direction:column;
}
.woocommerce ul.products li.product a img{
  margin:0 0 10px !important; border-radius:0; width:100%; aspect-ratio:1/1; object-fit:cover;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:.98rem !important; font-weight:700 !important; padding:0 12px !important;
  line-height:1.25; margin:0 0 4px !important; color:var(--jif-ink);
}
.woocommerce ul.products li.product .woocommerce-product-details__short-description,
.woocommerce ul.products li.product .woocommerce-product-details__short-description p{
  font-size:.8rem; color:var(--jif-muted); padding:0 12px; margin:0 0 8px; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.woocommerce ul.products li.product .price{
  color:var(--jif-red) !important; font-weight:800 !important; font-size:1.05rem;
  padding:0 12px; margin:0 0 10px; display:block;
}
.woocommerce ul.products li.product .price del{ color:var(--jif-muted); font-weight:400; }
.woocommerce ul.products li.product .button{
  margin:auto 12px 0 !important; background:var(--jif-green) !important; color:#fff !important;
  border-radius:999px !important; font-weight:700 !important; text-align:center;
  padding:.62em 1em !important; box-shadow:none !important; border:0 !important;
}
.woocommerce ul.products li.product .button:hover{ background:var(--jif-green-dark) !important; }
.woocommerce ul.products li.product .added_to_cart{
  display:block; text-align:center; margin:6px 12px 0; color:var(--jif-green-dark); font-weight:600;
}
.woocommerce ul.products li.product .star-rating,
.woocommerce ul.products li.product .posted_in{ display:none; }

/* =========================================================
   BUTTONS global
   ========================================================= */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce a.button.alt, .woocommerce button.button.alt{
  background:var(--jif-red); color:#fff; border-radius:999px; font-weight:700; border:0;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce button.button.alt:hover{
  background:var(--jif-red-dark);
}
.single-product div.product .price{ color:var(--jif-red); font-weight:800; }
.single-product div.product .single_add_to_cart_button{ background:var(--jif-green); }
.single-product div.product .single_add_to_cart_button:hover{ background:var(--jif-green-dark); }

/* =========================================================
   DESKTOP
   ========================================================= */
@media (min-width:768px){
  .woocommerce ul.products, .woocommerce-page ul.products{ grid-template-columns:repeat(4,1fr); gap:18px; }
  .jif-nav{ justify-content:flex-start; margin-left:6px; }
}

/* =========================================================
   OUTLET BAR (di header) + PICKER (halaman pilih outlet)
   ========================================================= */
.jif-outlet-bar{
  display:flex; align-items:center; gap:8px; width:100%;
  background:#fff; color:var(--jif-ink); text-decoration:none;
  border-radius:12px; padding:8px 12px; margin:7px 0 0; font-size:.92rem;
  box-shadow:0 1px 5px rgba(0,0,0,.15);
}
.jif-outlet-bar svg{ width:18px; height:18px; color:var(--jif-red); flex:0 0 auto; }
.jif-ob-text{ flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jif-ob-text b{ color:var(--jif-red); }
.jif-ob-empty{ background:#FFF4D6; }
.jif-ob-empty .jif-ob-text{ color:#8a6d00; font-weight:600; white-space:normal; }
.jif-ob-empty svg{ color:#B7791F; }
.jif-ob-action{ display:flex; align-items:center; gap:2px; color:var(--jif-red); font-weight:700; flex:0 0 auto; }
.jif-ob-chev{ width:16px !important; height:16px !important; }

.jif-outlet-picker{ margin:14px 0; }
.jif-outlet-search{
  width:100%; padding:12px 14px; border:1px solid #ddd; border-radius:12px;
  font-size:1rem; margin-bottom:14px; box-sizing:border-box;
}
.jif-outlet-search:focus{ outline:none; border-color:var(--jif-red); }
.jif-outlet-list{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:768px){ .jif-outlet-list{ grid-template-columns:repeat(2,1fr); } }
.jif-outlet-card{
  display:block; background:#fff; border:2px solid #eee; border-radius:14px;
  padding:14px 16px; text-decoration:none !important; color:var(--jif-ink);
  box-shadow:0 1px 6px rgba(0,0,0,.05); transition:border-color .15s, box-shadow .15s;
}
.jif-outlet-card, .jif-outlet-card *{ text-decoration:none !important; }
.woocommerce ul.products li.product a{ text-decoration:none !important; }
.jif-outlet-card:hover{ border-color:var(--jif-green); box-shadow:0 2px 10px rgba(0,0,0,.08); }
.jif-outlet-active{ border-color:var(--jif-green); background:#F2FBF5; }
.jif-outlet-name{ font-weight:800; font-size:1.05rem; margin-bottom:4px; color:var(--jif-ink); }
.jif-outlet-badge{ background:var(--jif-green); color:#fff; font-size:.72rem; padding:2px 8px; border-radius:999px; font-weight:700; vertical-align:middle; }
.jif-outlet-addr{ color:var(--jif-muted); font-size:.86rem; line-height:1.45; margin-bottom:10px; }
.jif-outlet-pick{
  display:inline-block; background:var(--jif-red); color:#fff; font-weight:700;
  padding:.5em 1.1em; border-radius:999px; font-size:.9rem;
}
.jif-outlet-active .jif-outlet-pick{ background:var(--jif-green); }

/* =========================================================
   PETA CHECKOUT
   ========================================================= */
#jif-map-block{
  background:#fff; padding:16px; border-radius:14px; margin:0 0 20px;
  box-shadow:0 1px 6px rgba(0,0,0,.07);
}
#jif-map-block h3{ margin:0 0 6px; font-size:1.1rem; font-weight:800; }
.jif-map-hint{ margin:0 0 10px; color:var(--jif-muted); font-size:.88rem; line-height:1.4; }
#jif-addr-search{
  width:100%; padding:11px 13px; border:1px solid #ddd; border-radius:10px;
  font-size:1rem; box-sizing:border-box;
}
#jif-addr-search:focus{ outline:none; border-color:var(--jif-red); }
#jif-geoloc{
  margin:10px 0; background:var(--jif-green); color:#fff; border:0;
  padding:9px 16px; border-radius:999px; cursor:pointer; font-weight:700; font-size:.9rem;
}
#jif-geoloc:hover{ background:var(--jif-green-dark); }
#jif-map{ height:280px; border-radius:12px; margin:6px 0 10px; z-index:0; }
#jif-addr-picked{ font-size:.86rem; color:var(--jif-ink); line-height:1.4; min-height:1.2em; }