/*
Theme Name: Storefront
Theme URI: https://example.com
Author: Storefront
Description: Mobile-first commerce theme. Every visible string is vendor-editable; nothing identifies the hosting platform to a shopper.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: dlg-storefront
*/

/* Theme name and author are deliberately generic: a shopper viewing source, or
   a vendor browsing Appearance, must never see the platform's name. */

:root{
  --ink:#111; --body:#3a3a3a; --muted:#8a8a8a; --line:#e8e8e8; --bg:#fff; --soft:#f6f6f7;
  --accent:#111; --bad:#D32F2F; --ok:#00A86B;
  --sm:12.5px; --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);color:var(--ink);background:var(--bg);font-size:14px;line-height:1.5;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none}
.icn{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6}

/* announcement bars */
.dlg-wa,.dlg-promo{text-align:center;font-size:11.5px;letter-spacing:.04em;padding:7px 12px}
.dlg-wa{background:#25D366;color:#fff;font-weight:600}
.dlg-promo{background:var(--ink);color:#fff;text-transform:uppercase}

/* sticky header */
.dlg-hdr{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px}
.dlg-brand{font-weight:800;letter-spacing:.14em;font-size:16px;text-transform:uppercase;text-align:center;flex:1}
.dlg-brand img{max-height:34px;width:auto;margin:0 auto}
.dlg-bag{position:relative}
.dlg-bag .cnt{position:absolute;top:-6px;right:-8px;background:var(--accent);color:#fff;border-radius:20px;
  font-size:10px;font-weight:700;min-width:17px;height:17px;display:flex;align-items:center;justify-content:center;padding:0 4px}

/* hero */
.dlg-hero{position:relative;background:var(--soft)}
.dlg-hero img{width:100%;aspect-ratio:4/5;object-fit:cover}
@media(min-width:760px){.dlg-hero img{aspect-ratio:21/9}}
.dlg-hero .cap{position:absolute;inset:auto 0 0 0;padding:22px 16px;background:linear-gradient(transparent,rgba(0,0,0,.62));color:#fff}
.dlg-hero h1{font-size:clamp(21px,6vw,34px);font-weight:800;letter-spacing:-.01em}
.dlg-hero p{font-size:13.5px;margin-top:5px;opacity:.92}
.dlg-hero .go{display:inline-block;margin-top:13px;background:#fff;color:var(--ink);font-weight:800;
  font-size:12px;letter-spacing:.09em;padding:11px 20px}
.dlg-hero.noimg{padding:52px 16px;background:var(--soft)}
.dlg-hero.noimg .cap{position:static;background:none;color:var(--ink);padding:0}
.dlg-hero.noimg .go{background:var(--accent);color:#fff}

/* sections */
.dlg-sec{padding:24px 14px}
.dlg-sec-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:13px}
.dlg-sec-h h2{font-size:15px;font-weight:800;letter-spacing:.02em;text-transform:uppercase}
.dlg-sec-h a{font-size:12px;color:var(--muted);text-decoration:underline}

/* category circles */
.dlg-cats{display:flex;gap:16px;overflow-x:auto;padding:4px 14px 22px;scrollbar-width:none}
.dlg-cats::-webkit-scrollbar{display:none}
.dlg-cat{flex:none;width:76px;text-align:center}
.dlg-cat .ring{width:76px;height:76px;border-radius:50%;overflow:hidden;background:var(--soft);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--muted)}
.dlg-cat .ring img{width:100%;height:100%;object-fit:cover}
.dlg-cat span{display:block;font-size:11.5px;margin-top:7px;line-height:1.3}

/* product grid: 2 col mobile, 4 col desktop */
.dlg-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 11px}
@media(min-width:760px){.dlg-grid{grid-template-columns:repeat(4,1fr);gap:22px 16px}}
.dlg-card{position:relative}
.dlg-thumb{position:relative;background:var(--soft);aspect-ratio:3/4;overflow:hidden}
.dlg-thumb img{width:100%;height:100%;object-fit:cover}
.dlg-badges{position:absolute;top:8px;left:8px;display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.dlg-badge{font-size:10px;font-weight:800;letter-spacing:.05em;padding:4px 7px;text-transform:uppercase}
.dlg-badge.save{background:var(--bad);color:#fff}
.dlg-badge.rtd{background:var(--ok);color:#fff}
.dlg-card h3{font-size:12.5px;font-weight:500;color:var(--body);margin:9px 0 4px;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dlg-price{font-size:13.5px;font-weight:700}
.dlg-price del{color:var(--muted);font-weight:400;margin-left:6px;font-size:12px}

/* footer */
.dlg-ft{background:var(--soft);margin-top:34px;padding:28px 14px 18px;border-top:1px solid var(--line)}
.dlg-fcols{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(min-width:760px){.dlg-fcols{grid-template-columns:repeat(4,1fr)}}
.dlg-ft h3{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;margin-bottom:9px}
.dlg-ft p,.dlg-ft li{font-size:var(--sm);color:var(--body);margin-bottom:6px;list-style:none}
.dlg-copy{text-align:center;font-size:11.5px;color:var(--muted);margin-top:22px;padding-top:14px;border-top:1px solid var(--line)}

/* cart drawer */
.dlg-cart{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.42);opacity:0;pointer-events:none;transition:opacity .2s}
.dlg-cart.on{opacity:1;pointer-events:auto}
.dlg-cartIn{position:absolute;right:0;top:0;bottom:0;width:min(400px,89vw);background:#fff;
  transform:translateX(100%);transition:transform .24s ease;display:flex;flex-direction:column}
.dlg-cart.on .dlg-cartIn{transform:none}
.dlg-cartHd{display:flex;align-items:center;justify-content:space-between;padding:15px;border-bottom:1px solid var(--line)}
.dlg-cartHd b{font-size:14px}
.dlg-cartBody{flex:1;overflow:auto;padding:6px 15px}
.dlg-ci{display:flex;gap:11px;padding:13px 0;border-bottom:1px solid var(--line)}
.dlg-ci .im{width:62px;height:78px;background:var(--soft);flex:none;overflow:hidden}
.dlg-ci .im img{width:100%;height:100%;object-fit:cover}
.dlg-ci .info{flex:1;min-width:0}
.dlg-ci b{font-size:12.5px;font-weight:500;display:block;margin-bottom:4px}
.dlg-qty{display:inline-flex;align-items:center;border:1px solid var(--line);margin-top:6px}
/* 44px minimum touch target. At 28px these were a thumb-sized miss, and the
   plus and minus sit adjacent — so a mistap increments instead of decrementing,
   which on a COD order changes what the shopper is asked to pay at the door. */
.dlg-qty button{min-width:44px;min-height:44px;font-size:17px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center}
.dlg-qty span{min-width:26px;text-align:center;font-size:12.5px}
.dlg-rm{font-size:11.5px;color:var(--muted);text-decoration:underline;margin-top:7px;display:inline-block}
.dlg-cartFt{border-top:1px solid var(--line);padding:15px}
.dlg-row{display:flex;justify-content:space-between;font-size:13px;margin-bottom:9px}
.dlg-row.total{font-size:15px;font-weight:800}
.dlg-btn{display:block;width:100%;text-align:center;background:var(--accent);color:#fff;font-weight:800;
  font-size:13px;letter-spacing:.06em;padding:14px;text-transform:uppercase}
.dlg-btn[disabled]{opacity:.55;cursor:not-allowed}
.dlg-empty{text-align:center;color:var(--muted);padding:40px 0;font-size:13px}

/* WhatsApp float */
.dlg-wafloat{position:fixed;right:15px;bottom:18px;width:50px;height:50px;border-radius:50%;
  background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;z-index:70;
  box-shadow:0 6px 20px rgba(0,0,0,.22);font-size:23px}

/* single product */
.dlg-single{padding:0 0 26px}
.dlg-single .gal img{width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--soft)}
.dlg-single .meta{padding:18px 14px}
.dlg-single h1{font-size:19px;font-weight:700;line-height:1.3}
.dlg-single .p{font-size:19px;font-weight:800;margin:10px 0}
.dlg-single .desc{font-size:13.5px;color:var(--body);margin:14px 0}
.dlg-cod{background:var(--soft);border:1px solid var(--line);padding:11px 13px;font-size:12.5px;margin:14px 0}

/* woo overrides */
.woocommerce-message,.woocommerce-info,.woocommerce-error{font-size:13px;padding:11px 13px;border-radius:6px;margin:0 14px 14px;list-style:none}
.woocommerce-message{background:#e7f7ee;border:1px solid #b7e3ca}
.woocommerce-info{background:var(--soft);border:1px solid var(--line)}
.woocommerce-error{background:#FDECEC;border:1px solid #F3B7B7;color:#8A2020}

/* checkout: one page COD */
.dlg-co{max-width:560px;margin:0 auto;padding:18px 14px 50px}
.dlg-co h1{font-size:20px;font-weight:800;margin-bottom:4px}
.dlg-co .lede{color:var(--muted);font-size:13px;margin-bottom:18px}
.dlg-co .woocommerce-billing-fields h3,.dlg-co #order_review_heading{font-size:13px;font-weight:800;
  text-transform:uppercase;letter-spacing:.05em;margin:18px 0 10px}
.dlg-co p.form-row{margin-bottom:13px}
.dlg-co label{display:block;font-size:12.5px;font-weight:600;margin-bottom:5px}
.dlg-co input[type=text],.dlg-co input[type=tel],.dlg-co input[type=email],.dlg-co select,.dlg-co textarea{
  width:100%;font-family:inherit;font-size:16px;padding:12px;border:1px solid #d6d6d6;border-radius:5px;background:#fff}
.dlg-co input:focus,.dlg-co select:focus{outline:2px solid var(--ink);outline-offset:-2px}
.dlg-co .dlg-hidden{display:none}
.dlg-co table.shop_table{width:100%;border-collapse:collapse;font-size:13.5px;margin-bottom:14px}
.dlg-co table.shop_table th,.dlg-co table.shop_table td{padding:9px 0;border-bottom:1px solid var(--line);text-align:left}
.dlg-co table.shop_table tfoot .order-total td,.dlg-co table.shop_table tfoot .order-total th{font-weight:800;font-size:15px}
.dlg-co #payment ul{list-style:none}
.dlg-co #payment .payment_box{background:var(--soft);padding:11px 13px;font-size:12.5px;margin-top:8px}
.dlg-co #place_order{width:100%;background:var(--accent);color:#fff;font-weight:800;font-size:14px;
  letter-spacing:.05em;padding:15px;border-radius:5px;text-transform:uppercase;margin-top:14px}
.dlg-co #place_order[disabled]{opacity:.55;cursor:not-allowed}

/* cart page */
.dlg-cartpage{padding:18px 14px 40px;max-width:760px;margin:0 auto}
.dlg-cartpage table{width:100%;border-collapse:collapse;font-size:13.5px}
.dlg-cartpage th,.dlg-cartpage td{padding:10px 6px;border-bottom:1px solid var(--line);text-align:left}
.dlg-cartpage .button,.dlg-cartpage .checkout-button{display:inline-block;background:var(--accent);color:#fff;
  padding:12px 18px;font-weight:700;font-size:13px;border-radius:5px}

/* order-received panel + /track-order
   Shopper email is optional, so for many real customers these two surfaces are
   the ONLY record they have of their order number and tracking link. The order
   number is deliberately the largest thing on the panel. */
.dlg-orderbox{border:1px solid var(--line);border-radius:8px;padding:16px;margin:0 0 18px;background:var(--soft)}
.dlg-ob-num{font-size:20px;font-weight:800;letter-spacing:-.01em;margin-bottom:6px}
.dlg-ob-note{font-size:13.5px;margin:6px 0;line-height:1.55}
.dlg-ob-track{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.7}

.dlg-lookup{max-width:520px;margin:0 auto;padding-bottom:44px}
.dlg-lk-intro{font-size:13.5px;margin:0 0 14px;color:#555}
.dlg-lk-form label{display:block;font-size:12.5px;font-weight:600;margin:12px 0 5px}
/* 16px minimum: anything smaller makes iOS Safari zoom the whole page on focus,
   which on a phone reads as the form being broken. */
.dlg-lk-form input{width:100%;font-family:inherit;font-size:16px;padding:12px;
  border:1px solid #d6d6d6;border-radius:5px;background:#fff}
.dlg-lk-form input:focus{outline:2px solid var(--ink);outline-offset:-2px}
.dlg-lk-btn{width:100%;margin-top:16px;background:var(--accent);color:#fff;font-weight:800;
  font-size:14px;letter-spacing:.05em;padding:14px;border-radius:5px;text-transform:uppercase;border:0;cursor:pointer}
.dlg-lk-miss{margin-top:16px;padding:12px 14px;border:1px solid var(--line);border-radius:6px;
  background:var(--soft);font-size:13.5px}
.dlg-lk-result{margin-top:18px;border:1px solid var(--line);border-radius:8px;padding:16px;
  background:var(--soft);font-size:13.5px;line-height:1.8}
.dlg-lk-num{font-size:18px;font-weight:800;margin-bottom:4px}
.dlg-lk-status{font-size:15px;font-weight:700;margin-bottom:8px}

/* tracking presentation
   All three shipped couriers ignore a number passed in the URL and render an
   empty search form, so the NUMBER is what the shopper actually needs — they
   paste it into the courier's own page. It is therefore the most prominent
   thing here, monospaced and easy to copy. */
.dlg-track{margin-top:12px}
.dlg-track-courier{font-size:13px;color:#555;margin-bottom:6px}
.dlg-track-label{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:#777;margin-bottom:4px}
.dlg-track-row{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap}
.dlg-track-num{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:17px;font-weight:700;
  letter-spacing:.06em;background:#fff;border:1px solid var(--line);border-radius:5px;
  padding:10px 12px;user-select:all;flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.dlg-track-copy{flex:0 0 auto;background:var(--ink);color:#fff;border:0;border-radius:5px;
  padding:0 16px;font-size:13px;font-weight:700;cursor:pointer;min-height:44px}
.dlg-track-link{display:inline-block;margin-top:10px;font-size:13.5px;font-weight:600}
.dlg-track-hint{font-size:12px;color:#666;margin-top:4px;line-height:1.5}
.dlg-ob-status{font-size:15px;margin-bottom:2px}