/**
 * Go Iftar — storefront.css
 * Homepage (front-page.php) + WooCommerce product-card styling, in the
 * meatonclick-style grocery layout. Uses brand tokens from style.css.
 * Enqueued after components.css.
 */

/* ── Section scaffolding ───────────────────────────────── */
.gi-sf{--gi-maxw:1240px;}
.gi-container{max-width:var(--gi-maxw);margin:0 auto;padding:0 20px;}
.gi-sec{padding:46px 0;}
.gi-sec--tight{padding-top:0;}
.gi-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap;}
.gi-sec-head h2{font-family:var(--font-display);font-size:clamp(22px,2.7vw,30px);font-weight:800;margin:0;}
.gi-sec-head p{margin:5px 0 0;color:var(--color-text-muted);font-size:14px;}
.gi-sec-head .gi-link{color:var(--gi-green-dark);font-weight:700;font-size:14px;font-family:var(--font-display);}
.gi-sec-head .gi-link:hover{color:var(--gi-orange);}

/* ── Hero ─────────────────────────────────────────────── */
.gi-hero-band{background:
   radial-gradient(90% 140% at 100% 0,rgba(249,115,22,.22),transparent 60%),
   var(--gi-dark);
   color:#fff;padding:clamp(48px,7vw,90px) 0;}
.gi-hero-band .gi-eyebrow{color:var(--gi-orange);font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;}
.gi-hero-band h1{color:#fff;font-family:var(--font-display);font-weight:900;font-size:clamp(30px,5vw,56px);line-height:1.08;max-width:16ch;margin:14px 0 0;}
.gi-hero-band h1 span{color:var(--gi-orange);}
.gi-hero-band p{color:#E7E3DA;font-size:17px;max-width:44ch;margin:16px 0 26px;}
.gi-hero-band .gi-cta{display:flex;gap:12px;flex-wrap:wrap;}
.gi-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:14px;padding:13px 24px;border-radius:var(--radius-pill);transition:.18s ease;text-decoration:none;}
.gi-btn--primary{background:var(--gi-orange);color:#fff;}
.gi-btn--primary:hover{background:var(--gi-orange-dark);color:#fff;transform:translateY(-1px);}
.gi-btn--ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.45);}
.gi-btn--ghost:hover{background:rgba(255,255,255,.1);color:#fff;}

/* ── Category tiles ([product_categories]) ────────────── */
.gi-cats ul.products{display:grid !important;grid-template-columns:repeat(5,1fr);gap:20px;margin:0 !important;padding:0 !important;list-style:none;}
.gi-cats ul.products::before,.gi-cats ul.products::after{display:none !important;}
.gi-cats li.product-category{width:auto !important;margin:0 !important;float:none !important;text-align:center;}
.gi-cats li.product-category a{text-decoration:none;}
.gi-cats li.product-category img{border-radius:var(--radius-pill);aspect-ratio:1;object-fit:cover;width:100%;box-shadow:var(--shadow-card);border:3px solid var(--gi-white);transition:.2s ease;background:var(--gi-gray-100);}
.gi-cats li.product-category:hover img{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--gi-orange);}
.gi-cats li.product-category h2,.gi-cats li.product-category .woocommerce-loop-category__title{font-family:var(--font-display) !important;font-weight:700 !important;font-size:15px !important;color:var(--gi-black) !important;margin-top:12px !important;padding:0 !important;}
.gi-cats li.product-category .count{display:block;color:var(--gi-gray-400);font-size:12px;font-weight:500;background:none;}

/* ── Product grids ([products]) + cards (content-product.php) ── */
.gi-grid ul.products{display:grid !important;grid-template-columns:repeat(5,1fr);gap:18px;margin:0 !important;padding:0 !important;list-style:none;}
.gi-grid ul.products::before,.gi-grid ul.products::after{display:none !important;}
.woocommerce ul.products li.product.gi-card,
.gi-grid ul.products li.product{width:auto !important;margin:0 !important;float:none !important;}

li.product.gi-card{position:relative;background:var(--gi-white);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;display:flex !important;flex-direction:column;transition:transform var(--transition-base),box-shadow var(--transition-base);padding:0 !important;}
li.product.gi-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:transparent;}
.gi-card__media{position:relative;aspect-ratio:1;overflow:hidden;background:var(--gi-gray-100);}
.gi-card__media img{width:100% !important;height:100% !important;object-fit:cover;margin:0 !important;transition:transform var(--transition-slow);}
li.product.gi-card:hover .gi-card__media img{transform:scale(1.05);}
.gi-card__badges{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:6px;z-index:2;}
.gi-card__badge{font-family:var(--font-display);font-weight:800;font-size:10.5px;letter-spacing:.03em;padding:4px 9px;border-radius:var(--radius-pill);color:#fff;text-transform:uppercase;}
.gi-card__badge--sale{background:var(--gi-orange);}
.gi-card__badge--save{background:var(--gi-green);}
.gi-card__feat{position:absolute;top:10px;right:10px;background:var(--gi-white);color:var(--gi-black);font-size:10.5px;font-weight:800;padding:4px 9px;border-radius:var(--radius-pill);border:1px solid var(--color-border);text-transform:uppercase;z-index:2;}
.gi-card__body{padding:14px 15px 4px;display:flex;flex-direction:column;gap:7px;flex:1;}
.gi-card__cat{font-size:11px;color:var(--gi-gray-400);font-weight:600;letter-spacing:.04em;text-transform:uppercase;}
.gi-card__title{font-family:var(--font-display) !important;font-weight:700 !important;font-size:14px !important;color:var(--gi-black) !important;line-height:1.3 !important;margin:0 !important;padding:0 !important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em;}
.gi-card__title:hover{color:var(--gi-orange) !important;}
.gi-card__price{margin-top:auto;padding:0 !important;font-family:var(--font-display);}
.gi-card__price .price{color:var(--gi-orange) !important;font-weight:800 !important;font-size:18px !important;margin:0 !important;font-family:var(--font-display) !important;}
.gi-card__price .price del{color:var(--gi-gray-400) !important;font-size:13px;font-weight:400;opacity:1;}
.gi-card__price .price ins{text-decoration:none;color:var(--gi-orange) !important;}
li.product.gi-card .button,
li.product.gi-card .added_to_cart{display:flex !important;align-items:center;justify-content:center;gap:8px;margin:12px 15px 15px !important;width:calc(100% - 30px) !important;background:var(--gi-dark) !important;color:#fff !important;border-radius:var(--radius-pill) !important;font-family:var(--font-display) !important;font-weight:700 !important;font-size:13px !important;padding:11px 14px !important;text-align:center;border:none !important;}
li.product.gi-card .button:hover,
li.product.gi-card .added_to_cart:hover{background:var(--gi-orange) !important;}
li.product.gi-card .added_to_cart{background:var(--gi-green) !important;margin-top:0 !important;}

/* ── Promo banners ─────────────────────────────────────── */
.gi-banners{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.gi-banner{position:relative;border-radius:var(--radius-lg);overflow:hidden;min-height:220px;display:flex;align-items:flex-end;padding:26px;color:#fff;background:linear-gradient(160deg,var(--gi-dark) 0%,var(--gi-dark-3) 100%);border-left:5px solid var(--gi-orange);}
.gi-banner h3{color:#fff;font-family:var(--font-display);font-size:22px;margin:0 0 12px;max-width:13ch;}
.gi-banner .gi-btn{background:var(--gi-orange);color:#fff;padding:9px 18px;font-size:13px;}

/* ── USP strip ─────────────────────────────────────────── */
.gi-usp{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.gi-usp__item{background:var(--gi-white);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:24px;text-align:center;}
.gi-usp__ic{width:52px;height:52px;margin:0 auto 14px;border-radius:var(--radius-pill);background:var(--gi-green-xlight);color:var(--gi-green-dark);display:grid;place-items:center;font-size:24px;}
.gi-usp__item h3{font-family:var(--font-display);font-size:16px;margin:0;}
.gi-usp__item p{margin:8px 0 0;color:var(--color-text-muted);font-size:13.5px;}

/* ── Newsletter ────────────────────────────────────────── */
.gi-news{background:
   radial-gradient(70% 130% at 100% 0,rgba(249,115,22,.25),transparent 60%),var(--gi-dark);
   border-radius:var(--radius-lg);padding:40px;text-align:center;color:#fff;}
.gi-news .gi-eyebrow{color:var(--gi-orange);}
.gi-news h2{color:#fff;font-family:var(--font-display);font-size:clamp(22px,3vw,30px);margin:8px 0 0;}
.gi-news h2 span{color:var(--gi-orange);}
.gi-news p{color:#C9C4BA;margin:8px 0 0;}
.gi-news form{display:flex;gap:10px;max-width:460px;margin:20px auto 0;}
.gi-news input[type="email"]{flex:1;border:none;border-radius:var(--radius-pill);padding:14px 20px;font-family:var(--font-body);font-size:14px;}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width:980px){
  .gi-cats ul.products{grid-template-columns:repeat(3,1fr);}
  .gi-grid ul.products{grid-template-columns:repeat(3,1fr);}
  .gi-banners,.gi-usp{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .gi-cats ul.products{grid-template-columns:repeat(2,1fr);}
  .gi-grid ul.products{grid-template-columns:repeat(2,1fr);}
}