/* SRI default theme — bright storefront, deliberate counterpoint to the dark admin */
:root{
  --ink:#15171E; --body:#454B59; --mut:#8A91A0; --line:#ECEDF1; --soft:#F6F7F9;
  --bg:#FFFFFF; --indigo:#5B5BF0; --indigo-d:#3E3EC9; --teal:#0FB5A0; --rose:#F25C7A;
  --amber:#F0A833;
  --header-bg:rgba(255,255,255,.86); --header-text:#15171E; --header-mut:#3D4350;
  --footer-bg:transparent; --footer-text:#8A91A0;
  --font-heading:'Space Grotesk', sans-serif; --font-body:'Inter', system-ui, sans-serif;
  --radius-card:16px; --radius-btn:13px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-body);color:var(--body);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%}

/* nav / header */
.nav{position:relative;background:var(--header-bg);backdrop-filter:blur(6px);z-index:30;color:var(--header-text);padding-top:var(--status-bar-height,env(safe-area-inset-top,0px))}
.nav.sticky{position:-webkit-sticky;position:sticky;top:0}

/* (perf fix 19 Aug 2026) On mobile the header is pinned position:fixed for
   the entire scroll session (see header.php's sticky-header JS), so
   backdrop-filter here isn't a one-time cost — Chrome/Android has to
   re-blur the content scrolling underneath it on every single frame,
   which is a well-known mobile scroll-jank cause. theme_header_bg is
   validated server-side to a hex color (admin/header.php), defaulting to
   fully-opaque #FFFFFF, so in the overwhelming common case the blur was
   already invisible (nothing shows through a 100%-opaque background) —
   this just stops paying for an effect nobody can see. Desktop keeps the
   frosted-glass blur since it isn't scroll-pinned there. */
@media(max-width:760px){
  .nav{backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* Search bar — slides down from header */
.hdr-search-bar{position:absolute;top:100%;left:0;right:0;background:var(--header-bg);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
  max-height:0;overflow:hidden;transition:max-height .25s ease,padding .25s ease;z-index:28}
.hdr-search-bar.open{max-height:76px;padding:12px 34px;overflow:visible}
.hdr-search-inner{display:flex;align-items:center;gap:10px;background:var(--soft);
  border-radius:12px;padding:11px 16px;max-width:620px;margin:0 auto;position:relative}
.hdr-search-inner input{flex:1;border:0;background:transparent;font-family:inherit;
  font-size:15px;color:var(--ink);outline:none}
.hdr-search-inner input::placeholder{color:var(--mut)}
.hdr-search-close{border:0;background:none;color:var(--mut);cursor:pointer;
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  flex-shrink:0;transition:.15s}
.hdr-search-close:hover{background:rgba(0,0,0,.08);color:var(--ink)}
/* ── Live search results dropdown ── */
.hdr-search-results{position:absolute;top:calc(100% - 4px);left:50%;transform:translateX(-50%);
  width:100%;max-width:620px;background:var(--bg,#fff);border:1px solid var(--line);
  border-radius:14px;box-shadow:0 18px 44px rgba(0,0,0,.16);overflow:hidden;
  max-height:min(64vh,520px);overflow-y:auto;z-index:40}
.hsr-loading,.hsr-empty{padding:18px 20px;font-size:13.5px;color:var(--mut);text-align:center}
.hsr-row{display:flex;align-items:center;gap:12px;padding:10px 14px;text-decoration:none;
  border-bottom:1px solid var(--line);transition:background .12s}
.hsr-row:last-of-type{border-bottom:0}
.hsr-row:hover,.hsr-row.hsr-active{background:var(--soft)}
.hsr-thumb{width:46px;height:46px;border-radius:9px;background-size:cover;background-position:center;
  background-color:var(--soft);flex-shrink:0;border:1px solid var(--line)}
.hsr-noimg{display:grid;place-items:center;font-size:20px}
.hsr-info{flex:1;min-width:0}
.hsr-name{font-size:14px;font-weight:600;color:var(--ink);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.hsr-sub{margin-top:2px}
.hsr-wt{font-size:12px;color:var(--mut)}
.hsr-priceblk{display:flex;flex-direction:column;align-items:flex-end;flex-shrink:0;line-height:1.25}
.hsr-priceblk{font-size:14px;font-weight:700;color:var(--ink)}
.hsr-mrp{font-size:11.5px;font-weight:500;color:var(--mut);text-decoration:line-through}
.hsr-add{flex-shrink:0;border:1.5px solid var(--indigo);background:var(--bg,#fff);color:var(--indigo);
  font-family:inherit;font-weight:700;font-size:12.5px;padding:7px 14px;border-radius:9px;cursor:pointer;transition:.13s}
.hsr-add:hover{background:var(--indigo);color:#fff}
.hsr-add.added{background:var(--teal,#0fb5a0);border-color:var(--teal,#0fb5a0);color:#fff}
.hsr-all{padding:12px 16px;text-align:center;font-size:13px;font-weight:600;color:var(--indigo);
  cursor:pointer;background:var(--soft);border-top:1px solid var(--line)}
.hsr-all:hover{filter:brightness(.97)}
@media(max-width:760px){.hdr-search-bar.open{padding:10px 16px}
  .hdr-search-results{max-width:100%}
  .hsr-thumb{width:42px;height:42px}}

/* ── Standalone "All Categories" dropdown button (theme-coloured) ── */
.hdr-categories{position:relative;display:inline-flex;flex-shrink:0}
.hcat-btn{display:flex;align-items:center;gap:8px;height:42px;padding:0 18px;
  background:var(--indigo);color:#fff;border:0;border-radius:999px;
  font-family:inherit;font-weight:700;font-size:13.5px;cursor:pointer;white-space:nowrap;
  text-decoration:none;transition:filter .15s}
.hcat-btn:hover{filter:brightness(1.06)}
.hcat-btn .hcat-chev{margin-left:1px;flex-shrink:0;opacity:.9}
.hcat-drop{position:absolute;top:calc(100% + 8px);left:0;min-width:230px;max-height:420px;
  overflow-y:auto;background:var(--bg,#fff);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 44px rgba(0,0,0,.16);padding:8px;z-index:45;display:flex;flex-direction:column}
.hcat-drop[hidden]{display:none}
.hcat-drop a{padding:9px 12px;border-radius:9px;font-size:14px;font-weight:500;color:var(--ink);
  text-decoration:none;transition:background .12s}
.hcat-drop a:hover{background:var(--soft);color:var(--indigo)}
.hcat-drop a.hcat-alllink{font-weight:700;border-bottom:1px solid var(--line);
  border-radius:9px 9px 0 0;margin-bottom:4px;padding-bottom:11px}
@media(max-width:560px){.hcat-btn span{display:none}.hcat-btn{padding:0 13px;height:38px}}

/* ── Standalone inline search bar (theme-coloured border) ── */
.hdr-searchbar{position:relative;display:flex;align-items:center;flex:1 1 auto;
  min-width:160px;max-width:420px;height:42px;border:1.5px solid var(--indigo);
  border-radius:999px;background:var(--bg,#fff);padding:0 6px 0 16px}
.hsb-input{flex:1;min-width:0;border:0;background:transparent;font-family:inherit;
  font-size:14.5px;color:var(--ink);outline:none}
.hsb-input::placeholder{color:var(--mut)}
.hsb-btn{flex-shrink:0;display:grid;place-items:center;width:34px;height:34px;
  border-radius:50%;border:0;background:var(--indigo);color:#fff;cursor:pointer;transition:.15s}
.hsb-btn:hover{filter:brightness(1.08)}
.hsb-results{position:absolute;top:calc(100% + 8px);left:0;right:0;
  background:var(--bg,#fff);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 44px rgba(0,0,0,.16);overflow:hidden;max-height:min(64vh,520px);
  overflow-y:auto;z-index:45}
@media(max-width:560px){.hdr-searchbar{max-width:none;height:38px}}

/* Three-zone header section layout */
.hdr-section{display:flex;align-items:center;padding:0 34px;height:var(--hdr-h,70px);color:var(--header-text)}
.hdr-left,.hdr-right{flex:1;display:flex;align-items:center;gap:10px}
.hdr-right{justify-content:flex-end}
.hdr-center{display:flex;align-items:center;gap:10px}

/* Section types */
.hdr-topbar{height:36px;background:var(--soft);border-bottom:1px solid var(--line);font-size:13px}
.hdr-main{border-bottom:1px solid var(--line)}
.hdr-bottom{height:46px;border-top:1px solid var(--line)}

/* Section visibility */
.hdr-sec-hidden{display:none!important}
@media(min-width:761px){.hdr-sec-no-desktop{display:none!important}}
@media(max-width:760px){.hdr-sec-no-mobile{display:none!important}}

/* Header elements */
.hdr-btn{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:0;
  background:transparent;color:var(--header-icon,var(--header-text));cursor:pointer;position:relative;opacity:1;transition:.15s}
.hdr-btn:hover{color:var(--indigo);background:var(--soft)}
.hdr-badge{position:absolute;top:-3px;right:-4px;background:var(--teal);color:#fff;font-size:10px;
  min-width:17px;height:17px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  padding:0 4px;font-weight:700;border:2px solid var(--bg)}
.hdr-divider{width:1px;height:22px;background:var(--line);margin:0 4px;flex-shrink:0}
.hdr-menu{display:flex;gap:26px;font-weight:500;font-size:14.5px;align-items:center}
.hdr-menu a{color:var(--header-text);opacity:.92;transition:.15s;text-decoration:none}
.hdr-menu a:hover,.hdr-menu a.active{color:var(--indigo);opacity:1}
.hdr-menu a.active{font-weight:600}

/* Keep backward-compat logo / acct-link classes */
.logo{display:flex;align-items:center;gap:12px;font-family:var(--font-heading);font-weight:700;
  font-size:24px;color:var(--header-text);letter-spacing:-.4px;text-decoration:none}
.mark{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--indigo),var(--teal));font-size:20px;box-shadow:0 5px 14px -5px var(--indigo)}
.acct-link{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  color:var(--header-icon,var(--header-text));opacity:1;text-decoration:none}
.acct-link:hover{opacity:1;color:var(--indigo)}

/* hero carousel */
.hero{position:relative;overflow:hidden;margin:0}
.carousel{display:flex;transition:transform .5s cubic-bezier(.65,.05,.36,1)}
.slide{flex:0 0 100%;height:380px;background-size:cover;background-position:center;position:relative;display:flex;align-items:flex-end}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,12,20,.72),rgba(10,12,20,.05) 65%)}
.slide-cap{position:relative;z-index:2;padding:0 0 46px 54px;max-width:560px;color:#fff}
.slide-cap h2{font-family:var(--font-heading);font-weight:700;font-size:38px;line-height:1.05;letter-spacing:-1px;text-shadow:0 2px 20px rgba(0,0,0,.3)}
.slide-cap span{display:inline-block;margin-top:16px;font-weight:600;font-size:14px;
  background:#fff;color:var(--ink);padding:10px 18px;border-radius:30px}
.dots{position:absolute;bottom:18px;left:54px;display:flex;gap:8px;z-index:3}
.dots button{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.45);cursor:pointer;transition:.2s}
.dots button.on{background:#fff;width:26px;border-radius:6px}

/* layout */
.wrap{max-width:1140px;margin:0 auto;padding:50px 28px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:28px}
.cb-block-outer .sec-head{margin-bottom:10px}
.sec-head h1{font-family:var(--font-heading);font-weight:700;font-size:27px;color:var(--ink);letter-spacing:-.6px}
.sec-head span{color:var(--mut);font-size:13.5px}

/* product grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:22px}
.card{display:block;border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;
  background:var(--card,#fff);transition:.2s;color:inherit}
.card:hover{transform:translateY(-4px);box-shadow:0 22px 40px -26px rgba(20,23,30,.4);border-color:var(--line,#e0e1e8)}
.thumb{aspect-ratio:1/1;background-size:cover;background-position:center;position:relative;background-color:var(--soft)}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.oos{position:absolute;top:12px;left:12px;background:var(--ink);color:#fff;font-size:11px;font-weight:600;padding:4px 10px;border-radius:20px}
.badge-off{position:absolute;top:10px;left:10px;background:var(--indigo);color:#fff;font-size:11px;font-weight:700;padding:3px 9px;border-radius:6px;z-index:4}
.card.out .thumb{filter:grayscale(.7);opacity:.85}
.card-b{padding:10px 11px 12px}
.card-b h3{font-family:var(--font-heading);font-weight:600;font-size:15px;color:var(--ink);margin-bottom:0;line-height:1.3}
.card-short{font-size:12.5px;color:var(--mut);line-height:1.4;margin:2px 0 6px;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.desc{font-size:13px;color:var(--mut);line-height:1.45;margin-bottom:12px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.price{font-family:var(--font-heading);font-weight:700;font-size:18px;color:var(--indigo);line-height:1.2;margin-top:0;display:flex;align-items:baseline;gap:7px}
.price .mrp{font-family:var(--font-body);font-size:13px;font-weight:500;color:var(--mut);text-decoration:line-through}
.empty{grid-column:1/-1;text-align:center;padding:60px;color:var(--mut);border:1px dashed var(--line);border-radius:16px}

/* single product */
.back{display:inline-block;margin-bottom:24px;color:var(--mut);font-weight:500;font-size:14px}
.back:hover{color:var(--indigo)}
.product{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.p-media{display:flex;flex-direction:column;gap:10px}
.p-img{aspect-ratio:1;border-radius:18px;background-size:cover;background-position:center;background-color:var(--soft);border:1px solid var(--line);cursor:zoom-in;transition:opacity .2s}
.p-thumbs{display:flex;flex-wrap:wrap;gap:8px;padding-top:2px}
.p-thumb{width:70px;height:70px;border-radius:10px;overflow:hidden;cursor:pointer;border:2px solid transparent;transition:border-color .15s;flex-shrink:0}
.p-thumb div{width:100%;height:100%;background-size:cover;background-position:center;background-color:var(--soft)}
.p-thumb.sel{border-color:var(--accent,#5B5BF0)}
.p-thumb:hover{border-color:var(--accent,#5B5BF0)}
.p-info h1{font-family:var(--font-heading);font-weight:700;font-size:24px;color:var(--ink);letter-spacing:-.5px;line-height:1.2}
.p-short{margin:10px 0 0;color:var(--muted,#667);font-size:15px;line-height:1.5}
.p-price{font-family:var(--font-heading);font-weight:700;font-size:28px;color:var(--indigo);margin:14px 0 8px}
.p-stock{font-size:13px;font-weight:600;display:block;width:fit-content;padding:4px 12px;border-radius:20px;margin-top:-16px;margin-bottom:20px}
.p-stock.in{background:rgba(15,181,160,.12);color:var(--teal)}
.p-stock.out{background:rgba(242,92,122,.12);color:var(--rose)}
.p-desc-heading{margin-bottom:8px}
.p-desc{font-size:15px;line-height:1.65;color:var(--body);margin-bottom:26px;white-space:pre-wrap}
.buy{background:var(--indigo);color:#fff;border:0;border-radius:var(--radius-btn);padding:14px 28px;
  font-weight:600;font-size:15px;cursor:pointer;transition:.16s;font-family:inherit}
.buy:hover{filter:brightness(.9)}
.buy:disabled{background:#C9CCD6;cursor:not-allowed}
.pdp-buy-row{display:flex;gap:12px;margin-bottom:26px}
.pdp-buy-row .buy{flex:1;margin-bottom:0}
.buy-now{background:#fff;color:var(--indigo);border:1.5px solid var(--indigo)}
.buy-now:hover{background:rgba(91,91,240,.06);filter:none}
/* Stepper sits in the Add-to-cart slot: same size, same line as Buy Now (mobile + desktop). */
.pdp-buy-row .pdp-stepper{flex:1;margin:0;padding:14px 20px;border-radius:var(--radius-btn);gap:18px}
.pdp-buy-row .pdp-stepper button{width:30px;height:30px}
.cart-note{font-size:12px;color:var(--mut);margin-top:12px}

/* footer */
.foot{border-top:1px solid var(--line);padding:30px 34px;text-align:center;background:var(--footer-bg);color:var(--footer-text);font-size:13px;margin-top:40px}

@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}.product{grid-template-columns:1fr;gap:24px}.slide-cap h2{font-size:28px}}
@media(max-width:560px){.grid{grid-template-columns:1fr 1fr;gap:14px}.hdr-section{padding:0 14px}.wrap{padding:34px 10px}.hdr-menu{gap:16px}}
@media(prefers-reduced-motion:reduce){.carousel{transition:none}.card:hover{transform:none}}

/* hdr-menu active state already handled above */

/* variable product selector + sale pricing */
.variations{display:flex;flex-direction:column;gap:10px;margin:18px 0}
.var-opt{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border:1.5px solid var(--line);
  border-radius:12px;background:var(--card,#fff);cursor:pointer;font-family:inherit;font-size:15px;transition:.15s;width:100%}
.var-opt:hover{border-color:var(--indigo)}
.var-opt.sel{border-color:var(--indigo);background:rgba(91,91,240,.05);box-shadow:0 0 0 3px rgba(91,91,240,.1)}
.var-opt .v-label{font-weight:600;color:var(--ink)}
.var-opt .v-price{font-weight:700;color:var(--indigo)}
.var-opt .v-price s{color:var(--mut);font-weight:400;font-size:13px;margin-left:5px}
.var-opt .vopt-swatch{width:18px;height:18px;border-radius:50%;display:inline-block;border:1px solid rgba(0,0,0,.15);flex-shrink:0;margin-right:2px}
.color-swatches{margin:16px 0}
.color-swatches .cs-title{display:block;font-size:13px;color:var(--mut);margin-bottom:8px}
.color-swatches .cs-title b{color:var(--ink)}
.color-swatches .cs-row{display:flex;flex-wrap:wrap;gap:10px}
.cs-opt{display:inline-flex;align-items:center;gap:8px;padding:8px 12px 8px 8px;border:1.5px solid var(--line);border-radius:30px;background:var(--card,#fff);cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;color:var(--ink);transition:.15s}
.cs-opt i{width:22px;height:22px;border-radius:50%;display:inline-block;border:1px solid rgba(0,0,0,.12);flex-shrink:0}
.cs-opt:hover{border-color:var(--indigo)}
.cs-opt.sel{border-color:var(--indigo);box-shadow:0 0 0 3px rgba(91,91,240,.12)}
.p-price .mrp{font-size:18px;color:var(--mut);font-weight:400;margin-left:10px}
.p-price .off{font-size:14px;color:var(--teal);font-weight:600;margin-left:8px}
.p-meta{color:var(--mut);font-size:14px;margin:8px 0}

/* ---- account link in header ---- */
.acct-link{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:var(--header-icon,var(--header-text));opacity:.9;margin-left:14px}
.acct-link:hover{opacity:1;color:var(--indigo)}

/* ---- account page ---- */
.account-page{max-width:440px;margin:40px auto}
.acct-card{background:var(--card,#fff);border:1px solid var(--line);border-radius:18px;padding:28px 26px;box-shadow:0 20px 50px -30px rgba(0,0,0,.25)}
.acct-tabs{display:flex;gap:6px;background:var(--soft);border-radius:11px;padding:5px;margin-bottom:22px}
.atab{flex:1;border:0;background:transparent;padding:10px;border-radius:8px;font-family:inherit;font-weight:600;color:var(--mut);cursor:pointer}
.atab.on{background:var(--card,#fff);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.account-page .fld{margin-bottom:14px}
.account-page label{display:block;font-size:13px;color:var(--body);font-weight:600;margin-bottom:6px}
.account-page input:not([type="radio"]):not([type="checkbox"]){width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-family:inherit;font-size:14px}
.account-page input:not([type="radio"]):not([type="checkbox"]):focus{outline:none;border-color:var(--indigo)}
.acct-submit{width:100%;background:var(--indigo);color:#fff;border:0;border-radius:10px;padding:13px;font-weight:600;font-size:15px;cursor:pointer;margin-top:6px}
.acct-submit:hover{filter:brightness(1.08)}
.g-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;border:1.5px solid var(--line);background:var(--card,#fff);border-radius:10px;padding:12px;font-family:inherit;font-weight:600;font-size:14px;cursor:pointer}
.g-btn:hover{background:var(--soft)}
.acct-or{text-align:center;position:relative;margin:18px 0;color:var(--mut);font-size:13px}
.acct-or span{background:var(--card,#fff);padding:0 12px;position:relative;z-index:1}
.acct-or:before{content:'';position:absolute;top:50%;left:0;right:0;height:1px;background:var(--line)}
.acct-msg{font-size:13px;margin-top:12px;min-height:18px}.acct-msg.err{color:var(--rose)}
.acct-head{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.acct-av{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,var(--indigo),var(--teal));color:#fff;display:grid;place-items:center;font-size:22px;font-weight:700;font-family:var(--font-heading)}
.acct-head h2{font-family:var(--font-heading);font-size:19px}.acct-head p{color:var(--mut);font-size:13px;margin-top:3px}
.acct-actions{display:flex;flex-direction:column;gap:10px}
.acct-btn{display:block;text-align:center;border:1px solid var(--line);background:var(--card,#fff);border-radius:10px;padding:11px;font-family:inherit;font-weight:600;color:var(--ink);cursor:pointer;text-decoration:none}
.acct-btn.ghost:hover{background:var(--soft)}

/* ---- managed footer ---- */
.site-foot{border-top:1px solid var(--line);background:var(--footer-bg);color:var(--footer-text);margin-top:50px;padding:42px 34px 0}
.foot-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:32px}
.foot-brand{font-family:var(--font-heading);font-weight:700;font-size:20px;color:var(--footer-text);margin-bottom:10px}
.foot-about p{font-size:13.5px;line-height:1.6;opacity:.85;max-width:300px}
.foot-social{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.foot-social a.foot-soc-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--soc,#444);color:#fff;opacity:1;transition:.15s}
.foot-social a.foot-soc-ic:hover{transform:translateY(-2px);filter:brightness(1.1);color:#fff}
.foot-social a:not(.foot-soc-ic){color:var(--footer-text);opacity:.8;font-size:13px;text-decoration:none}.foot-social a:not(.foot-soc-ic):hover{opacity:1;color:var(--indigo)}
.foot-col h4{font-size:13px;font-weight:700;margin-bottom:12px;color:var(--footer-text)}
.foot-col a{display:block;color:var(--footer-text);opacity:.8;font-size:13.5px;text-decoration:none;margin-bottom:9px}
.foot-col a:hover{opacity:1;color:var(--indigo)}
.foot-bottom{max-width:1100px;margin:32px auto 0;padding:18px 0;border-top:1px solid var(--line);text-align:center;font-size:12.5px;opacity:.8}

/* ---- chat widget ---- */
#chatFab{position:fixed;right:24px;bottom:24px;width:56px;height:56px;border-radius:50%;background:var(--indigo);color:#fff;border:0;cursor:pointer;box-shadow:0 10px 30px -8px var(--indigo);display:grid;place-items:center;z-index:60}
#chatFab:hover{filter:brightness(1.08)}
#chatPanel{position:fixed;right:24px;bottom:90px;width:340px;max-width:calc(100vw - 32px);height:440px;max-height:70vh;background:var(--card,#fff);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 60px -20px rgba(0,0,0,.4);display:none;flex-direction:column;overflow:hidden;z-index:60}
#chatPanel.show{display:flex}
.chat-head{background:var(--indigo);color:#fff;padding:15px 18px;font-weight:600;display:flex;justify-content:space-between;align-items:center}
.chat-head span{cursor:pointer;font-size:22px;line-height:1}
.chat-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px;background:var(--soft)}
.chat-empty{color:var(--mut);font-size:13px;text-align:center;margin:auto}
.cmsg{display:flex}.cmsg.customer{justify-content:flex-end}
.cmsg span{display:inline-block;padding:9px 13px;border-radius:14px;font-size:13.5px;max-width:80%;line-height:1.4}
.cmsg.customer span{background:var(--indigo);color:#fff;border-bottom-right-radius:4px}
.cmsg.admin span{background:var(--card,#fff);border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:4px}
.chat-input{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.chat-input input{flex:1;border:1px solid var(--line);border-radius:9px;padding:10px 12px;font-family:inherit;font-size:14px}
.chat-input input:focus{outline:none;border-color:var(--indigo)}
.chat-input button{background:var(--indigo);color:#fff;border:0;border-radius:9px;padding:0 16px;font-weight:600;cursor:pointer}

@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;gap:24px}}

/* ============ Phase 2: mobile-first responsive ============ */
.logo-img{height:70px;width:auto;display:block}
.logo-text{font-family:var(--font-heading);font-weight:700;font-size:24px}

/* storefront categories page */
.cats-page{padding-top:24px}
.cats-title{font-family:var(--font-heading);font-size:28px;margin-bottom:20px}
.cats-grid{display:grid;grid-template-columns:repeat(var(--cat-dcols,auto-fill),minmax(200px,1fr));gap:10px}
.cat-card{text-decoration:none;display:block;cursor:pointer;position:relative;min-width:0}
.cat-thumb{aspect-ratio:1;border-radius:var(--cat-round,8px);background:var(--soft) center/cover no-repeat;transition:.2s}
.cat-card.cat-shadow .cat-thumb{box-shadow:0 6px 20px -12px rgba(0,0,0,.3)}
.cat-card:hover .cat-thumb{transform:translateY(-3px)}
.cat-card.cat-shadow:hover .cat-thumb{box-shadow:0 12px 28px -10px rgba(0,0,0,.22)}
.cat-card:hover .cat-name{color:var(--indigo)}
.cat-name{margin-top:6px;font-weight:600;color:var(--ink);font-size:var(--cat-name-size,15px);text-align:center}
.cat-count{font-size:12px;color:var(--mut);text-align:center;margin-top:2px}

/* Overlay styles — name/count sit directly on the image, bottom or centered */
.cat-card-overlay_bottom .cat-thumb,.cat-card-overlay_center .cat-thumb{position:relative;overflow:hidden;display:flex}
.cat-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.65) 0%,rgba(0,0,0,.05) 60%);border-radius:inherit}
.cat-card-overlay_center .cat-scrim{background:rgba(0,0,0,.35)}
.cat-overlay-text{position:relative;z-index:1;padding:14px;width:100%;align-self:flex-end}
.cat-card-overlay_center .cat-overlay-text{align-self:center;text-align:center}
.cat-overlay-text .cat-name{color:#fff;margin-top:0;text-align:left;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.cat-card-overlay_center .cat-overlay-text .cat-name{text-align:center}
.cat-overlay-text .cat-count{color:rgba(255,255,255,.85);text-align:left;margin-top:2px}
.cat-card-overlay_center .cat-overlay-text .cat-count{text-align:center}

/* Badge style — small pill label pinned to a corner of the image */
.cat-card-badge .cat-thumb{position:relative;overflow:hidden}
.cat-badge{position:absolute;top:10px;left:10px;background:#fff;color:var(--ink);font-size:11.5px;font-weight:700;padding:5px 12px;border-radius:20px;box-shadow:0 2px 8px rgba(0,0,0,.15)}

/* Circle style — always fully round regardless of the Rounding setting */
.cat-card-circle .cat-thumb{border-radius:50%!important}

/* Pill label — floating rounded pill centered at the bottom edge of the image */
.cat-card-pill_bottom .cat-thumb{position:relative;overflow:visible}
.cat-pill{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);background:var(--ink);color:#fff;font-size:12.5px;font-weight:700;padding:7px 18px;border-radius:999px;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.2)}
.cats-grid-pill_bottom .cat-card{margin-bottom:14px}

/* Subcategories list — under the name, small comma-free list of children */
.cat-sublist{list-style:none;margin:6px 0 0;padding:0;text-align:center}
.cat-sublist li{font-size:12px;color:var(--mut);line-height:1.6}

/* Side-by-side — horizontal card, image left, name/count/sublist right */
.cats-grid-side{grid-template-columns:1fr!important}
.cat-card-side{display:flex;align-items:center;gap:14px;padding:10px;background:var(--card,#fff)}
.cat-card-side .cat-thumb{width:88px;height:88px;flex:none;aspect-ratio:unset}
.cat-side-body{flex:1;min-width:0}
.cat-card-side .cat-name{text-align:left;margin-top:0}
.cat-card-side .cat-count{text-align:left}
.cat-card-side .cat-sublist{text-align:left}
@media(max-width:600px){.cat-card-side .cat-thumb{width:66px;height:66px}}


@media(max-width:600px){
  .cat-overlay-text{padding:10px}
  .cat-badge{font-size:10px;padding:4px 9px;top:7px;left:7px}
}

/* bottom navigation — hidden on desktop */
.bottom-nav{display:none;position:fixed;left:0;right:0;bottom:0;height:62px;background:var(--card,#fff);border-top:1px solid var(--line);
  z-index:55;justify-content:space-around;align-items:center;padding-bottom:env(safe-area-inset-bottom,0);
  transition:transform .28s ease}
/* Auto-hide on scroll (see _footer-nav.php's inline script) — same fixed
   position throughout, just slid down out of view rather than removed. */
.bottom-nav.bn-hidden{transform:translateY(100%)}

/* ── Bottom nav style variants (Admin → Theme & Design → Bottom Nav) ── */

/* centerfab: the cart item is a raised, elevated circular button that pops
   up above the bar line — common on food-delivery apps. */
.bottom-nav.bn-style-centerfab{overflow:visible}
.bottom-nav.bn-style-centerfab .bn-item[data-type="cart"]{
  position:relative;top:-16px;background:var(--indigo);color:#fff;
  width:50px;height:50px;border-radius:50%;justify-content:center;flex:none;
  box-shadow:0 8px 20px rgba(0,0,0,.28)}
.bottom-nav.bn-style-centerfab .bn-item[data-type="cart"] span:last-child{display:none}
.bottom-nav.bn-style-centerfab .bn-item[data-type="cart"] svg{width:22px;height:22px}
.bottom-nav.bn-style-centerfab .bn-item[data-type="cart"] .bn-badge{top:-4px;right:-4px}

/* sidefab: a simplified bar with the cart pulled OUT as a separate floating
   button in the bottom-right corner, overlapping page content above the bar
   — matches Blinkit/Zepto-style layouts. */
.bottom-nav.bn-style-sidefab .bn-item[data-type="cart"]{
  position:fixed;right:16px;bottom:94px;z-index:56;
  width:56px;height:56px;border-radius:50%;background:var(--teal);color:#fff;
  justify-content:center;box-shadow:0 10px 24px rgba(0,0,0,.3)}
.bottom-nav.bn-style-sidefab .bn-item[data-type="cart"] span:last-child{display:none}
.bottom-nav.bn-style-sidefab .bn-item[data-type="cart"] svg{width:24px;height:24px}
.bottom-nav.bn-style-sidefab .bn-item[data-type="cart"] .bn-badge{top:-3px;right:-3px}

/* minimal: flat, no border/shadow, small dot indicator under the active item. */
.bottom-nav.bn-style-minimal{border-top:none;box-shadow:0 -1px 0 var(--line)}
.bottom-nav.bn-style-minimal .bn-item.on{position:relative}
.bottom-nav.bn-style-minimal .bn-item.on::after{
  content:'';position:absolute;bottom:1px;width:4px;height:4px;border-radius:50%;background:currentColor}

/* glass: frosted, semi-transparent floating bar. */
.bottom-nav.bn-style-glass{
  left:10px;right:10px;bottom:8px;border-radius:18px;border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,.18)}
html.dark .bottom-nav.bn-style-glass{background:rgba(23,26,34,.72);border-color:rgba(255,255,255,.08)}

/* capsule: a soft pill-shaped highlight behind the active icon+label. */
.bottom-nav.bn-style-capsule .bn-item{border-radius:16px;transition:background .15s}
.bottom-nav.bn-style-capsule .bn-item.on{background:rgba(91,91,240,.12)}
.bn-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--mut);text-decoration:none;font-size:11px;font-weight:500}
.bn-item svg{width:23px;height:23px}
.bn-item.on{color:var(--indigo)}
.bn-cart{position:relative;display:flex}
.bn-badge{position:absolute;top:-6px;right:-9px;background:var(--teal);color:#fff;font-size:10px;min-width:16px;height:16px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;font-weight:700}

@media (max-width: 760px){
  body{padding-bottom:62px}
  .hdr-section{padding:0 16px;height:var(--hdr-mh,60px)}
  .hdr-topbar{height:34px}
  .hdr-bottom{height:42px}
  .hdr-menu{display:none} /* navigation shown in bottom-nav on mobile */
  .bottom-nav{display:flex}
  .grid{grid-template-columns:1fr 1fr !important;gap:12px}
  .wrap{padding-left:15px;padding-right:15px}
  .sec-head h1{font-size:22px}
  .product{grid-template-columns:1fr !important;gap:18px}
  .p-img{aspect-ratio:1;min-height:0}
  .p-thumbs{gap:6px}
  .p-thumb{width:58px;height:58px}
  .product-page h1{font-size:20px}
  .cats-grid{grid-template-columns:repeat(var(--cat-mcols,2),1fr);gap:8px}
  .cat-name{font-size:var(--cat-name-size-m,var(--cat-name-size,13.5px))}
  .cats-title{font-size:24px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:22px}
  #chatFab{bottom:78px;right:16px}
  #chatPanel{bottom:144px;right:12px}
  .account-page{margin:24px auto;padding:0 8px}
}

/* ---- Phase 4: home content blocks (youtube/photo/video) ---- */
.content-zone{margin:32px auto}
.cblock{margin-bottom:28px}
.cblock-title{font-family:var(--font-heading);font-size:22px;color:var(--ink);margin-bottom:14px}
.yt-wrap{position:relative;width:100%;padding-top:56.25%;border-radius:16px;overflow:hidden;box-shadow:0 12px 36px -18px rgba(0,0,0,.4)}
.yt-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cphoto{width:100%;border-radius:16px;display:block;box-shadow:0 12px 36px -18px rgba(0,0,0,.3)}
.cvideo{width:100%;border-radius:16px;display:block;background:#000;box-shadow:0 12px 36px -18px rgba(0,0,0,.4)}
@media(max-width:760px){.content-zone{margin:22px auto}.cblock-title{font-size:19px}}

/* account: method tabs, headings, links */
.acct-h{font-family:var(--font-heading);font-size:22px;text-align:center;margin-bottom:18px;color:var(--ink)}
.meth-tabs{display:flex;gap:8px;margin-bottom:18px}
.mtab{flex:1;border:1.5px solid var(--line);background:var(--card,#fff);border-radius:10px;padding:11px 8px;font-family:inherit;font-weight:600;font-size:13.5px;color:var(--mut);cursor:pointer}
.mtab.on{border-color:var(--indigo);color:var(--indigo);background:rgba(91,91,240,.05)}
.link-sm{font-size:12.5px;color:var(--indigo);text-decoration:none;font-weight:600}
.acct-foot{text-align:center;font-size:13px;color:var(--mut);margin-top:16px}
.acct-foot a{color:var(--indigo);font-weight:600;text-decoration:none}
.acct-msg.ok{color:var(--teal)}

.acct-h{display:flex;align-items:center;justify-content:center;gap:9px}
.acct-ic{color:var(--indigo);flex-shrink:0}

/* ---- Profile page (logged-in account) ---- */
.prof-title{font-family:var(--font-heading);font-size:26px;text-align:center;margin:6px 0 22px;color:var(--ink)}
.prof-card{display:flex;align-items:center;gap:16px;background:var(--card,#fff);border:1px solid var(--line);border-radius:16px;padding:18px 20px;margin-bottom:26px}
.prof-av{width:64px;height:64px;border-radius:50%;background:var(--soft);display:grid;place-items:center;font-size:26px;font-weight:700;color:var(--mut);font-family:var(--font-heading);overflow:hidden;flex-shrink:0}
.prof-av img{width:100%;height:100%;object-fit:cover}
.prof-id h2{font-family:var(--font-heading);font-size:22px;color:var(--ink)}
.prof-id p{color:var(--mut);font-size:15px;margin-top:2px}
.prof-sec{font-size:12px;letter-spacing:.7px;text-transform:uppercase;color:var(--mut);font-weight:700;margin:0 4px 10px}
.prof-group{background:var(--card,#fff);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-bottom:26px}
.prof-row{display:flex;align-items:center;gap:14px;padding:17px 18px;text-decoration:none;color:var(--ink);font-size:16px;font-weight:500;border-bottom:1px solid var(--line)}
.prof-row:last-child{border-bottom:0}
.prof-row:hover{background:var(--soft)}
.prof-row .pr-ic{font-size:18px;width:24px;text-align:center}
.prof-row .pr-ch{margin-left:auto;color:var(--mut);font-size:20px}
.prof-row.danger{color:#E5484D}
.prof-social{display:flex;justify-content:center;gap:20px;margin-bottom:24px}
.prof-social a{color:var(--indigo);font-weight:600;font-size:14px;text-decoration:none}
.prof-signout{width:100%;background:var(--card,#fff);border:1.5px solid var(--line);color:var(--ink);border-radius:12px;padding:14px;font-family:inherit;font-weight:600;font-size:15px;cursor:pointer}
.prof-signout:hover{border-color:#E5484D;color:#E5484D}
.prof-top{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.prof-back{font-size:24px;color:var(--ink);text-decoration:none;width:40px;height:40px;display:grid;place-items:center;border-radius:10px}
.prof-back:hover{background:var(--soft)}
.prof-top h1{font-family:var(--font-heading);font-size:24px;color:var(--ink)}
.prof-empty{text-align:center;color:var(--mut);padding:40px;background:var(--card,#fff);border:1px solid var(--line);border-radius:14px}
.ord-card{background:var(--card,#fff);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:12px}
.ord-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.ord-status{font-size:12px;font-weight:700;text-transform:uppercase;padding:3px 10px;border-radius:20px;background:var(--soft);color:var(--mut)}
.ord-status.paid{background:rgba(15,181,160,.12);color:var(--teal)}
.ord-status.pending{background:rgba(240,168,51,.14);color:#B97e10}
.ord-items{font-size:14px;color:var(--body);margin-bottom:10px;line-height:1.5}
.ord-foot{display:flex;justify-content:space-between;align-items:center;font-weight:700;color:var(--ink)}
.ord-pay{font-size:11px;font-weight:700;color:var(--mut);background:var(--soft);padding:3px 8px;border-radius:6px}
.ord-status.processing{background:rgba(91,91,240,.10);color:#4a4ad6}
.ord-status.cancelled{background:rgba(242,92,122,.12);color:#d63c5e}
.ord-status.delivered,.ord-status.completed{background:rgba(15,181,160,.12);color:var(--teal)}
.ord-clickable{cursor:pointer;transition:box-shadow .15s,border-color .15s,transform .1s}
.ord-clickable:hover{border-color:var(--indigo);box-shadow:0 4px 16px rgba(0,0,0,.07)}
.ord-clickable:active{transform:scale(.995)}
.ord-view-hint{margin-top:8px;font-size:11.5px;font-weight:600;color:var(--mut);text-align:right}
/* ── Order detail modal ── */
.omd-overlay{position:fixed;inset:0;z-index:9999;background:rgba(17,20,29,.55);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:16px;animation:omdFade .18s ease}
@keyframes omdFade{from{opacity:0}to{opacity:1}}
.omd-box{position:relative;background:var(--card,#fff);border-radius:18px;width:100%;max-width:480px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(0,0,0,.28);animation:omdPop .2s cubic-bezier(.2,.8,.3,1)}
@keyframes omdPop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.omd-x{position:absolute;top:12px;right:12px;width:32px;height:32px;border:0;border-radius:50%;background:var(--soft);color:var(--mut);font-size:20px;line-height:1;cursor:pointer;z-index:2;transition:.15s}
.omd-x:hover{background:rgba(242,92,122,.12);color:var(--rose,#d63c5e)}
.omd-head{padding:22px 22px 16px;border-bottom:1.5px solid var(--line);display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.omd-num{font-size:18px;font-weight:800;color:var(--ink);letter-spacing:.3px}
.omd-date{font-size:12.5px;color:var(--mut);margin-top:3px}
.omd-body{padding:18px 22px;overflow-y:auto;flex:1}
.omd-sec-title{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--mut);margin:18px 0 10px}
.omd-body>.omd-sec-title:first-child{margin-top:0}
.omd-items{display:flex;flex-direction:column;gap:2px}
.omd-item{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line)}
.omd-item:last-child{border-bottom:0}
.omd-item-l{display:flex;flex-direction:column;gap:2px}
.omd-item-name{font-size:14px;font-weight:600;color:var(--ink);line-height:1.35}
.omd-item-meta{font-size:12px;color:var(--mut)}
.omd-item-amt{font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap}
.omd-empty{font-size:13.5px;color:var(--mut);padding:6px 0}
.omd-totals{margin-top:14px;padding-top:14px;border-top:1.5px solid var(--line);display:flex;flex-direction:column;gap:8px}
.omd-tot-row{display:flex;justify-content:space-between;align-items:center;font-size:13.5px;color:var(--body)}
.omd-tot-row.omd-disc{color:var(--teal)}
.omd-tot-row.omd-grand{font-size:17px;font-weight:800;color:var(--ink);padding-top:8px;margin-top:2px;border-top:1px solid var(--line)}
.omd-pay-row{margin-top:2px}
.omd-deliver{background:var(--soft);border-radius:12px;padding:13px 15px;display:flex;flex-direction:column;gap:5px}
.omd-tracking{background:var(--soft);border-radius:12px;padding:13px 15px;display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.omd-track-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px;background:var(--indigo,#5b5bf0);color:#fff;font-size:13px;font-weight:700;border-radius:10px;text-decoration:none;width:fit-content}
.omd-track-btn:hover{filter:brightness(1.08)}
.omd-d-name{font-size:14px;font-weight:700;color:var(--ink)}
.omd-d-line{font-size:13px;color:var(--body);line-height:1.45}
.omd-close-btn{margin:0;width:100%;padding:15px;border:0;border-top:1.5px solid var(--line);background:var(--card,#fff);color:var(--ink);font-family:inherit;font-size:14.5px;font-weight:700;cursor:pointer;transition:background .15s}
.omd-close-btn:hover{background:var(--soft)}
@media(max-width:560px){.omd-box{max-width:100%;border-radius:16px 16px 0 0;margin-top:auto;max-height:92vh}.omd-overlay{padding:0;align-items:flex-end}}
.account-page .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.account-page select{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-family:inherit;font-size:14px;background:var(--bg);color:var(--ink)}
@media(max-width:480px){.account-page .row2{grid-template-columns:1fr}}

/* complete-profile extras */
.cp-sub{font-size:13.5px;color:var(--mut);text-align:center;margin-bottom:16px}
.cp-known{background:rgba(15,181,160,.07);border:1px solid rgba(15,181,160,.2);border-radius:10px;padding:11px 13px;font-size:13.5px;color:var(--body);margin-bottom:16px;line-height:1.7}

/* ============ Built-in Cart (full-screen) ============ */
.cart-fab{position:fixed;right:24px;bottom:24px;z-index:50;width:58px;height:58px;border-radius:50%;
  background:linear-gradient(135deg,var(--indigo),var(--teal));color:#fff;border:0;cursor:pointer;
  box-shadow:0 10px 26px -8px var(--indigo);display:grid;place-items:center;transition:.2s}
.cart-fab:hover{transform:translateY(-2px)}
.cart-fab svg{width:23px;height:23px}
.cart-badge{position:absolute;top:-3px;right:-3px;background:var(--teal);color:#fff;font-size:10px;font-weight:700;
  min-width:18px;height:18px;border-radius:18px;display:grid;place-items:center;padding:0 4px;border:2px solid var(--bg)}

#cartScreen{position:fixed;inset:0;z-index:100;background:var(--bg);display:none;flex-direction:column;overflow:hidden;font-family:var(--font-body)}
#cartScreen.open{display:flex}
#cartScreen *{box-sizing:border-box}
.cs-panel{display:none;flex-direction:column;height:100%;width:100%;max-width:540px;margin:0 auto}
.cs-panel.active{display:flex}

.cs-hdr{padding:22px 20px 14px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.cs-hdr h2{font-family:var(--font-heading);font-size:21px;font-weight:700;color:var(--ink)}
.cs-hdr .cs-back{width:38px;height:38px;border-radius:50%;background:var(--soft);border:0;cursor:pointer;display:grid;place-items:center;color:var(--ink)}
.cs-hdr .cs-trash{width:38px;height:38px;border:0;background:none;cursor:pointer;color:var(--mut);display:grid;place-items:center}
.cs-hdr .cs-trash:hover{color:var(--rose)}

.cs-list{flex:1;overflow-y:auto;padding:12px 20px}
.cs-item-card{position:relative;display:flex;gap:14px;padding:14px;margin-bottom:10px;border:1px solid var(--line);border-radius:14px;background:var(--bg);box-shadow:0 1px 3px rgba(0,0,0,.05);transition:.15s;overflow:visible}
.cs-item-card:hover{background:var(--soft);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.cs-item-img{width:70px;height:70px;border-radius:10px;background:var(--soft) center/cover no-repeat;flex-shrink:0;overflow:hidden}
.cs-item-img img{width:100%;height:100%;object-fit:cover;display:block}
.cs-item-content{display:flex;flex-direction:column;flex:1;min-width:0;justify-content:space-between}
.cs-item-top{display:flex;flex-direction:column; padding-right:20px; gap:4px}
.cs-item-info{flex:1;min-width:0}
.cs-item-info h4{font-size:14px;font-weight:600;color:var(--ink);margin:0;line-height:1.3;word-break:break-word}
.cs-item-info .cs-variant{font-size:11px;color:var(--mut);margin:2px 0}
.cs-item-info .cs-price{font-size:14px;font-weight:700;color:var(--teal);margin-top:2px}
.cs-item-bottom{display:flex;justify-content:flex-end}
.cs-qty{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:8px;overflow:hidden;flex-shrink:0}
.cs-qty button{width:30px;height:30px;border:0;background:var(--bg);cursor:pointer;font-size:16px;color:var(--ink);display:grid;place-items:center;transition:.15s}
.cs-qty button:hover{background:var(--soft)}
.cs-qty span{width:28px;text-align:center;font-size:13px;font-weight:600;color:var(--ink)}
.cs-item-delete{position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:50%;border:0;background:var(--soft,#f0f0f0);color:var(--mut,#666);cursor:pointer;display:grid;place-items:center;transition:.2s;font-size:15px;font-weight:600;padding:0;box-shadow:0 1px 3px rgba(0,0,0,0.1)}
.cs-item-delete:hover{background:#ff6b7a;color:#fff;box-shadow:0 2px 6px rgba(255,107,122,0.3)}

/* ── Out-of-Stock cart item styles ─────────────────────────────────── */
/* OOS card: red-tinted border, light pink wash */
.cs-item-oos{border-color:#fecaca!important;background:#fff8f8!important}
.cs-item-oos:hover{background:#fff0f0!important}

/* OOS image badge — bottom stripe across the thumbnail */
.cs-item-oos .cs-item-img{position:relative;overflow:hidden}
.cs-oos-tag{position:absolute;bottom:0;left:0;right:0;background:rgba(220,38,38,.88);color:#fff;font-size:8px;font-weight:800;letter-spacing:.5px;text-align:center;padding:2px 0 3px;line-height:1.2;text-transform:uppercase}

/* Warning line — compact, inline */
.cs-oos-msg{font-size:11.5px;color:#b91c1c;margin-top:4px;line-height:1.4;display:flex;align-items:center;flex-wrap:wrap;gap:0}

/* Inline "Remove" link — looks like a text button, no background */
.cs-oos-rm-link{background:none;border:none;padding:0;margin:0;font-size:11.5px;font-weight:700;color:#dc2626;cursor:pointer;font-family:inherit;text-decoration:underline;line-height:inherit;display:inline}
.cs-oos-rm-link:hover{color:#991b1b}

/* OOS alert banner above checkout button */
.cs-oos-banner{display:flex;align-items:flex-start;gap:7px;background:#fef2f2;border:1.5px solid #fecaca;border-radius:10px;padding:9px 12px;margin-bottom:10px;font-size:12.5px;color:#991b1b;line-height:1.4}
.cs-oos-banner-icon{font-size:14px;flex-shrink:0;margin-top:1px}
.cs-oos-banner strong{font-weight:700;color:#dc2626}

/* Disabled checkout button — grey, clearly un-clickable */
.cs-btn-primary:disabled{background:linear-gradient(135deg,#d1d5db,#9ca3af)!important;color:#fff!important;opacity:1!important;box-shadow:none!important;cursor:not-allowed!important;transform:none!important;font-size:13.5px!important}

/* ── Mobile OOS overrides (≤480 px) ────────────────────────────────── */
@media(max-width:480px){
  .cs-oos-tag{font-size:7px}
  .cs-oos-msg{font-size:11px}
  .cs-oos-rm-link{font-size:11px}
  .cs-oos-banner{font-size:12px;padding:8px 10px}
  .cs-btn-primary:disabled{font-size:13px!important}
}
/* ── End OOS styles ──────────────────────────────────────────────── */

.cs-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--mut);gap:14px;font-size:15px}
.cs-empty svg{width:60px;height:60px;opacity:.4}

.cs-foot{flex-shrink:0;background:var(--bg);border-top:1px solid var(--line);border-radius:20px 20px 0 0;box-shadow:0 -4px 24px rgba(0,0,0,.06);padding:18px 20px 26px}
.cs-total-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.cs-total-row span:first-child{font-size:13px;color:var(--mut)}
.cs-total-row span:last-child{font-size:15px;font-weight:700;color:var(--teal);font-family:var(--font-heading)}

.cs-grand-total span:first-child{font-size:18px!important;font-weight:700;color:var(--ink)}
.cs-grand-total span:last-child{font-size:18px!important;font-weight:800;color:var(--teal);font-family:var(--font-heading)}

.cs-btn{width:100%;padding:15px;border:0;border-radius:var(--radius-btn);font-size:15px;font-weight:700;letter-spacing:.4px;cursor:pointer;transition:.2s;font-family:inherit}
.cs-btn-primary{background:linear-gradient(135deg,var(--indigo),var(--teal));color:#fff;box-shadow:0 8px 20px -8px var(--indigo)}
.cs-btn-primary:hover{filter:brightness(1.05);transform:translateY(-1px)}
.cs-btn-primary:disabled{opacity:.55;box-shadow:none;cursor:not-allowed;transform:none}

/* Saved-address toggle ("+ Add new address" / "✕ Use a saved address")
   — compact pill, right-aligned, pulled up so it sits at the card's bottom-right (space saving). */
.cs-addr-toggle-wrap{display:flex;justify-content:flex-end;margin:-22px 6px 12px 0;position:relative;z-index:2}
.cs-addr-toggle{background:var(--bg);color:var(--indigo);border:1.5px solid var(--indigo);
  padding:5px 12px;font-size:12px;font-weight:700;border-radius:9px;cursor:pointer;
  font-family:inherit;line-height:1.2;white-space:nowrap;transition:.15s;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.cs-addr-toggle:hover{background:var(--indigo);color:#fff}

.cs-login-body{flex:1;padding:26px 24px 20px;display:flex;flex-direction:column}
.cs-login-sub{font-size:14px;color:var(--mut);margin-bottom:24px}
.cs-field-label{font-size:12px;font-weight:600;color:var(--body);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.cs-input{width:100%;border:1.5px solid var(--line);border-radius:11px;padding:9px 14px;font-size:14.5px;font-family:inherit;color:var(--ink);background:var(--soft);transition:.2s;margin-bottom:9px}
.cs-input:focus{outline:none;border-color:var(--indigo);background:var(--bg);box-shadow:0 0 0 3px rgba(91,91,240,.12)}
.cs-input::placeholder{color:var(--mut)}
.cs-or{text-align:center;color:var(--mut);font-size:13px;margin:6px 0 16px;position:relative}
.cs-or::before,.cs-or::after{content:'';position:absolute;top:50%;width:42%;height:1px;background:var(--line)}
.cs-or::before{left:0}.cs-or::after{right:0}
.cs-login-note{text-align:center;font-size:12px;color:var(--mut);margin-top:12px}
.cs-login-note a{color:var(--indigo);text-decoration:none;font-weight:600}

.cs-addr-body{flex:1;overflow-y:auto;padding:14px 24px 20px}
.cs-row2{display:flex;gap:12px}
.cs-row2 .cs-input{flex:1}
.cs-section-label{font-size:20px;font-weight:700;text-align:center;color:var(--ink);margin:18px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.cs-section-label:first-child{margin-top:6px}

.cs-done-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 30px;text-align:center}
.cs-done-icon{width:76px;height:76px;border-radius:50%;background:var(--soft);color:var(--teal);display:grid;place-items:center;margin:0 auto 20px;font-size:34px}
.cs-done-body h3{font-family:var(--font-heading);font-size:21px;color:var(--ink);margin-bottom:8px}
.cs-done-body p{font-size:14px;color:var(--mut);line-height:1.6;margin-bottom:26px}
.cs-order-card{background:var(--soft);border:1.5px solid var(--line);border-radius:14px;padding:14px 18px;width:100%;text-align:left;margin-bottom:24px}
.cs-order-card .oc-row{display:flex;justify-content:space-between;font-size:13px;padding:4px 0}
.cs-order-card .oc-row span:first-child{color:var(--mut)}
.cs-order-card .oc-row span:last-child{font-weight:600;color:var(--ink)}

@media(max-width:760px){
  .cart-fab{display:none} /* bottom-nav Cart tab opens the cart on phones */
}

/* ---- Toast ---- */
.cart-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;
  padding:11px 22px;border-radius:30px;font-size:13.5px;font-weight:600;z-index:200;opacity:0;pointer-events:none;transition:.25s;
  box-shadow:0 10px 30px rgba(0,0,0,.18);white-space:nowrap}
.cart-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:760px){.cart-toast{bottom:74px}}

/* ---- Address form: landmark/state responsive 2-col / stacked mobile ---- */
.cs-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cs-row2 .cs-input{width:100%}
@media(max-width:480px){.cs-row2{grid-template-columns:1fr}}
.cs-check{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--body);margin:10px 0;cursor:pointer}
.cs-check input{width:17px;height:17px;accent-color:var(--indigo)}

/* ---- Saved address cards ---- */
.addr-card{display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--line);border-radius:11px;padding:9px 12px;margin-bottom:8px;cursor:pointer;transition:.15s}
.addr-card.sel{border-color:var(--indigo);background:rgba(91,91,240,.05)}
.addr-card input[type="radio"]{width:18px;height:18px;flex:none;margin-top:3px;accent-color:var(--indigo);cursor:pointer;border:none;padding:0;border-radius:50%}
.addr-card-b{flex:1;min-width:0}
.addr-name{font-weight:700;font-size:14px;color:var(--ink);display:flex;align-items:center;gap:8px}
.addr-def{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--teal);background:rgba(15,181,160,.12);padding:2px 8px;border-radius:20px}
.addr-line{font-size:12.5px;color:var(--mut);margin-top:3px;line-height:1.5}

/* ---- Quick-add ADD button / qty stepper on product cards ---- */
.qa{position:relative;-webkit-tap-highlight-color:transparent;outline:none}
.qa-slot{position:absolute;right:8px;bottom:8px;z-index:6;display:flex;justify-content:flex-end;align-items:center;-webkit-tap-highlight-color:transparent}

/* ── Wishlist heart button ── */
.wl-heart{position:absolute;top:10px;right:10px;z-index:6;width:32px;height:32px;border-radius:50%;
  border:0;background:rgba(255,255,255,.92);color:var(--mut);display:grid;place-items:center;
  cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.12);transition:.15s;-webkit-tap-highlight-color:transparent}
.wl-heart:hover{color:var(--rose,#F25C7A);transform:scale(1.06)}
.wl-heart.active{color:var(--rose,#F25C7A)}
.wl-heart.active svg{fill:currentColor}
.wl-heart-lg{top:14px;right:14px;width:42px;height:42px}
.p-img{position:relative}
.qa-add{border:1.5px solid var(--indigo);border-radius:var(--radius-btn);background:var(--card,#fff);color:var(--indigo);font-weight:800;
  font-size:13px;letter-spacing:.4px;height:34px;padding:0 22px;cursor:pointer;box-shadow:0 4px 12px -4px rgba(20,23,30,.35);
  -webkit-tap-highlight-color:transparent;outline:none;touch-action:manipulation}
.qa-add:hover{background:var(--indigo);color:#fff}
.qa-add:focus,.qa-add:active{outline:none}
.qa-stepper{display:inline-flex;align-items:center;justify-content:space-between;
  width:auto;max-width:max-content;flex:0 0 auto;height:34px;
  border:1.5px solid var(--indigo);border-radius:9px;background:var(--card,#fff);overflow:hidden;box-shadow:0 4px 12px -4px rgba(20,23,30,.35);
  user-select:none;-webkit-user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.qa-stepper button{flex:0 0 32px;width:32px;height:100%;border:0;background:var(--card,#fff);color:var(--indigo);font-size:18px;font-weight:700;cursor:pointer;transition:background .12s;
  -webkit-tap-highlight-color:transparent;outline:none;touch-action:manipulation}
.qa-stepper button:hover{background:var(--soft)}
.qa-stepper button:focus,.qa-stepper button:active{outline:none;background:var(--soft)}
.qa-stepper span{flex:0 0 auto;min-width:26px;text-align:center;font-weight:800;font-size:14px;color:var(--indigo);user-select:none}

/* ---- Variation picker sheet ---- */
.var-sheet{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:150;display:none;align-items:flex-end;justify-content:center}
.var-sheet.open{display:flex}
.var-card{background:var(--bg);width:100%;max-width:460px;border-radius:18px 18px 0 0;padding:18px 20px 26px;max-height:70vh;overflow-y:auto}
@media(min-width:761px){.var-card{border-radius:18px;margin-bottom:10vh}}
.var-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.var-hdr h3{font-family:var(--font-heading);font-size:18px;color:var(--ink)}
.var-hdr button{border:0;background:var(--soft);color:var(--mut);width:32px;height:32px;border-radius:50%;cursor:pointer;display:grid;place-items:center}
.var-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.var-row:last-child{border-bottom:0}
.var-row-main{display:flex;align-items:center;gap:12px;min-width:0}
.var-thumb{width:44px;height:44px;border-radius:9px;background-size:cover;background-position:center;
  background-color:var(--soft);border:1px solid var(--line);flex-shrink:0;overflow:hidden}
.var-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.var-label{font-weight:600;color:var(--ink);font-size:14px}
.var-price{font-size:13px;color:var(--teal);font-weight:700;margin-top:2px}

/* ---- Product specs (SKU, dimensions, colour, expiry) ---- */
.p-specs{border:1px solid var(--line);border-radius:12px;padding:4px 16px;margin:14px 0}
.spec-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.spec-row:last-child{border-bottom:0}
.spec-row span:first-child{color:var(--mut)}
.spec-row span:last-child{color:var(--ink);font-weight:600}
.spec-color{display:flex;align-items:center;gap:8px}
.spec-color i{width:16px;height:16px;border-radius:50%;display:inline-block;border:1px solid var(--line)}

/* ---- Payment method options ---- */
/* payment options — side-by-side cards */
.pay-opts-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.pay-opt{position:relative;border:1.5px solid var(--line);border-radius:14px;padding:12px 12px 10px;cursor:pointer;transition:.15s;background:var(--bg);display:flex;flex-direction:column;gap:8px}
.pay-opt:hover{border-color:var(--accent,#e07030)}
.pay-opt.sel{border-color:var(--accent,#e07030);background:rgba(224,112,48,.04)}
.pay-radio{position:absolute;top:10px;right:10px;width:16px;height:16px;accent-color:var(--accent,#e07030);margin:0;cursor:pointer}
.pay-opt-row1{padding-right:24px;margin-bottom:6px}
.pay-opt-row2{display:flex;align-items:center;gap:8px}
.pay-opt-ico{width:32px;height:32px;border-radius:8px;background:var(--soft);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.pay-opt.sel .pay-opt-ico{background:rgba(224,112,48,.08);border-color:rgba(224,112,48,.3)}
.pay-opt-t{font-weight:700;font-size:13px;color:var(--ink);line-height:1.3;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pay-opt-s{font-size:11px;color:var(--mut);line-height:1.4}
.pay-opt.sel .pay-opt-t{color:var(--accent,#e07030)}
/* pay-opts-row stays 2-col on all screen sizes */

/* ---- Sub-category chips on the categories grid ---- */
.cat-subs{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;padding:0 12px 12px}
.cat-sub-chip{font-size:11.5px;font-weight:600;color:var(--body);background:var(--soft);border:1px solid var(--line);
  border-radius:20px;padding:4px 11px;cursor:pointer;transition:.15s}
.cat-sub-chip:hover{border-color:var(--indigo);color:var(--indigo)}

/* ---- Product page qty stepper (same size/shape as the Add to Cart button) ---- */
.pdp-stepper{display:inline-flex;align-items:center;justify-content:center;gap:14px;
  background:var(--indigo);color:#fff;border:0;border-radius:11px;padding:10px 28px;
  font-weight:600;font-size:15px;font-family:inherit;margin-bottom:26px}
.pdp-stepper button{width:26px;height:26px;border:0;background:transparent;border-radius:7px;
  color:#fff;font-size:18px;font-weight:700;line-height:1;cursor:pointer;transition:.15s;display:grid;place-items:center}
.pdp-stepper button:hover{background:rgba(255,255,255,.22)}
.pdp-stepper span{font-size:16px;font-weight:700;color:#fff;min-width:24px;text-align:center}

/* ═══════════════════════════════
   CONTENT BLOCKS — all types
   ═══════════════════════════════ */

/* Section headings */
.cb-section-h{font-family:var(--font-heading);font-weight:700;font-size:24px;color:var(--ink);letter-spacing:-.4px;margin:0 0 6px}
.cb-section-sub{font-size:15px;color:var(--mut);margin:0 0 18px}

/* ── Scrolling text bar ── */
.cb-scroll{width:100%;overflow:hidden;font-size:13.5px;font-weight:600;letter-spacing:.2px}
/* width:max-content is what makes the marquee work. Without it this is a
   block-level flex box, so its width is the SCREEN width and the children
   merely overflow - which meant translateX(-25%) shifted the strip by a
   quarter of the screen instead of by one copy of the message, so only a
   sliver of the text ever moved before it snapped back. Sized to its
   content, -25% is exactly one of the four copies: the whole message
   scrolls past and the restart is invisible. */
.cb-scroll-inner{display:flex;width:max-content;white-space:nowrap;animation:cbscroll 28s linear infinite;padding:11px 0}
.cb-scroll-inner:hover{animation-play-state:paused}
.cb-scroll-inner span{padding:0 12px}
.cb-scroll-sep{opacity:.5}
/* The strip renders the message FOUR times (content-blocks.php), so one loop
   travels exactly one quarter of it - copy 2 lands where copy 1 started, so
   the restart is invisible. (Was -33.333%, the figure for three copies.) */
@keyframes cbscroll{0%{transform:translateX(0)}100%{transform:translateX(-25%)}}

/* ── Image / Photo ── */
.cb-photo-wrap{padding:24px 0}
.cb-img-link{display:block}
.cb-img{width:100%;border-radius:16px;display:block;object-fit:cover;max-height:480px}

/* ── Video (YouTube + file) ── */
.cb-video-wrap{padding:10px 0}
.yt-wrap{position:relative;padding-bottom:56.25%;border-radius:16px;overflow:hidden;background:#000}
.yt-wrap iframe{position:absolute;inset:0;width:100%;height:100%}
.cb-vid-file{width:100%;border-radius:16px;max-height:480px;background:#000;display:block}

/* ── Trust badges ── */
.cb-badges{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cb-badges-inner{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:center;align-items:center;padding:18px 0}
.cb-badge{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600}
.cb-badge-ico{font-size:20px}

/* ── Custom HTML block ── */
.cb-custom{padding:20px 0}

/* Mobile adjustments */
@media(max-width:600px){
  .cb-section-h{font-size:20px}
  .cb-img{max-height:220px;border-radius:12px}
  .cb-badges-inner{gap:10px 16px}
  .cb-badge{font-size:12px}
  .cb-badge-ico{font-size:17px}
  .yt-wrap{border-radius:10px}
}

/* ═══ NEW CONTENT BLOCKS ══════════════════════════════════════════════ */
.cb-block{padding:0}
.cb-h{font-family:var(--font-heading);font-weight:700;font-size:24px;color:var(--ink);letter-spacing:-.4px;margin:0 0 10px}
.cb-block-outer:first-child .cb-block:first-child .cb-h{margin-top:0}
.cb-sub{font-size:15px;color:var(--mut);margin:0 0 18px}
.cb-img{width:100%;border-radius:14px;display:block;object-fit:cover;max-height:500px}
.cb-vid-file{width:100%;border-radius:14px;max-height:480px;background:#000;display:block}

/* Textbox */
.cb-textbox{width:100%}

/* Map */
.cb-map{border-radius:14px;overflow:hidden}
.cb-map-placeholder{background:var(--soft);border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--mut);font-size:14px}

/* ─── Slideshow ─── */
/* Per-block spacing — set via CSS custom properties in content-blocks.php's
   $padVars (from the Add/Edit content block form's Spacing section). The
   pixel values here are just the fallback for blocks with no value saved.
   Uses PADDING (not margin) so a block's own background/gradient colour
   fills its spacing area instead of leaving a transparent gap next to it —
   colour is consistent top and bottom, the same way, for every block. */
.cb-block-outer,.cb-scroll,.cb-badges,.cb-textbox,.cb-stats,.cb-countdown,.cb-newsletter,.cb-whatsapp{
  width:100%;box-sizing:border-box;
  padding-top:var(--pad-top-m,0px);
  padding-bottom:var(--pad-bottom-m,12px);
}
/* Content blocks sit on the page surface (white in the default theme) unless a
   colour is chosen in Content -> block -> Background. That setting is written as
   an inline style, and inline always beats a stylesheet rule, so blocks that
   have been given a colour are untouched - only ones left blank become plain.
   Uses --bg rather than a literal #fff so dark mode and custom skins still
   control the surface. .cb-scroll and .cb-whatsapp are excluded: they render
   their own inline defaults (marquee / WhatsApp green). */
.cb-block-outer,.cb-badges,.cb-textbox,.cb-stats,.cb-countdown,.cb-newsletter{
  background:var(--bg,#fff);
}
.cb-block-outer .wrap{padding-top:0;padding-bottom:0}
@media(min-width:761px){
  .cb-block-outer,.cb-scroll,.cb-badges,.cb-textbox,.cb-stats,.cb-countdown,.cb-newsletter,.cb-whatsapp{
    padding-top:var(--pad-top-d,0px);
    padding-bottom:var(--pad-bottom-d,15px);
  }
}
.cb-slideshow{position:relative;overflow:hidden;background:var(--soft);width:100%;max-width:var(--slide-wd,100%);margin:0 auto;height:var(--slide-hd,400px);min-height:180px;border-radius:18px}
@media(max-width:760px){.cb-slideshow{max-width:var(--slide-wm,100%);height:var(--slide-hm,300px)}}
@media(min-width:761px){
  .cb-slideshow{border-radius:0}
}
.cb-slide{position:absolute;inset:0;width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat;opacity:0;transition:opacity .6s ease;display:flex;align-items:flex-end;z-index:0}
@media(max-width:760px){.cb-slide{background-size:contain;background-color:var(--soft)}}
.cb-slide.active{opacity:1;z-index:2}
.cb-slide-cap{padding:28px 32px;background:linear-gradient(to top,rgba(0,0,0,.75) 0%,rgba(0,0,0,.1) 55%,transparent);width:100%}
.cb-slide-cap h2{color:#fff;font-family:var(--font-heading);font-size:32px;font-weight:800;margin:0 0 8px;text-shadow:0 2px 8px rgba(0,0,0,.3)}
.cb-slide-cap p{color:rgba(255,255,255,.85);font-size:16px;margin:0 0 14px}
.cb-slide-btn{display:inline-block;background:var(--card,#fff);color:var(--ink,#111);font-weight:700;padding:10px 24px;border-radius:8px;text-decoration:none;font-size:14px;transition:.15s}
.cb-slide-btn:hover{background:var(--indigo);color:#fff}
.cb-slide-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:10}
.cb-slide-dots button{width:8px;height:8px;border-radius:50%;border:0;background:rgba(255,255,255,.5);cursor:pointer;transition:.2s;padding:0}
.cb-slide-dots button.on{background:var(--card,#fff);width:22px;border-radius:4px}
.cb-slide-prev,.cb-slide-next{position:absolute;top:50%;transform:translateY(-50%);z-index:10;background:rgba(255,255,255,.22);border:none;color:#fff;font-size:26px;width:44px;height:44px;border-radius:50%;cursor:pointer;backdrop-filter:blur(4px);transition:.2s;line-height:1;display:flex;align-items:center;justify-content:center}
.cb-slide-prev{left:14px}.cb-slide-next{right:14px}
.cb-slide-prev:hover,.cb-slide-next:hover{background:rgba(255,255,255,.4)}

/* ─── Gallery ─── */
.cb-gallery{display:grid;grid-template-columns:repeat(var(--gcols,3),1fr);gap:var(--ggap,8px)}
.cb-gal-item{aspect-ratio:1;overflow:hidden;border-radius:10px;cursor:zoom-in;background:var(--soft)}
.cb-gal-item img{width:100%;height:100%;object-fit:cover;display:block;transition:.2s}
.cb-gal-item:hover img{transform:scale(1.05)}

/* ── Reels / Video Carousel ── */
.cb-reels-head{text-align:center;margin-bottom:16px}
.cb-reels-eyebrow{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--mut);margin-bottom:4px}
.cb-reels-handle{display:inline-block;margin-top:4px;font-weight:600;color:var(--indigo);text-decoration:none}
.cb-reels-handle:hover{text-decoration:underline}
.cb-reels-wrap{position:relative}
.cb-reels-scroll{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;padding:4px 2px 10px;flex:1;-webkit-overflow-scrolling:touch}
.cb-reels-scroll::-webkit-scrollbar{height:0}
.cb-reels-slide{flex:0 0 auto;width:62%;max-width:220px;scroll-snap-align:start}
@media(min-width:761px){.cb-reels-slide{width:220px}}
.cb-reel-thumb{position:relative;width:100%;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,var(--soft),var(--line));background-size:cover;background-position:center;cursor:pointer;display:flex;align-items:flex-end;box-shadow:0 4px 14px rgba(0,0,0,.12)}
.cb-reel-thumb.cb-reel-playing{cursor:default;background:#000}
.cb-reel-thumb.cb-reel-playing iframe,.cb-reel-thumb.cb-reel-playing blockquote{width:100%;height:100%}
.cb-reel-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.92);color:#e0531f;display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 3px 10px rgba(0,0,0,.25)}
/* Minimal custom play/pause toggle shown once a YouTube slide is playing -
   replaces YouTube's native control bar (controls:0 hides mute/CC/settings/
   seek), so this is the ONLY control the visitor sees. */
.cb-reel-toggle{position:absolute;bottom:10px;right:10px;z-index:2;width:34px;height:34px;
  border:0;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:12px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;line-height:1}
.cb-reel-toggle:hover{background:rgba(0,0,0,.72)}
.cb-reel-thumb.cb-reel-ig::before{content:'📸';position:absolute;top:50%;left:50%;transform:translate(-50%,-140%);font-size:34px;opacity:.55}
.cb-reel-badge{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.55);color:#fff;font-size:11px;font-weight:600;padding:3px 8px;border-radius:999px}
.cb-reel-cap{position:relative;z-index:1;width:100%;padding:10px 10px 12px;background:linear-gradient(to top,rgba(0,0,0,.65),transparent);color:#fff;font-size:12.5px;font-weight:600;line-height:1.3}
.cb-lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:9999;align-items:center;justify-content:center;cursor:zoom-out}
.cb-lightbox img{max-width:92vw;max-height:92vh;border-radius:8px;object-fit:contain}

/* ── Image + Text banner ── */
.cb-imgtext{display:flex;gap:36px;align-items:center}
.cb-imgtext-right{flex-direction:row-reverse}
.cb-imgtext-img{flex:1 1 0;min-width:0}
.cb-imgtext-img img{width:100%;border-radius:16px;display:block;object-fit:cover;max-height:420px}
.cb-imgtext-img video{width:100%;border-radius:16px;display:block;max-height:420px;background:#000}
.cb-imgtext-img .yt-wrap{border-radius:16px}
.cb-imgtext-body{flex:1 1 0;min-width:0}
.cb-imgtext-content{font-size:15px;line-height:1.75;color:var(--body)}
@media(max-width:760px){.cb-imgtext{flex-direction:column;gap:18px}.cb-imgtext-right{flex-direction:column}}

/* ── Pincode delivery checker ── */
.cb-pincode-row{display:flex;gap:10px;max-width:420px}
.cb-pincode-input{flex:1;padding:12px 14px;border:1.5px solid var(--line);border-radius:11px;font-size:15px;font-family:inherit;background:var(--bg);color:var(--ink)}
.cb-pincode-input:focus{outline:none;border-color:var(--indigo)}
.cb-pincode-btn{padding:12px 22px;white-space:nowrap}
.cb-pincode-result{margin-top:12px;padding:11px 16px;border-radius:10px;font-size:13.5px;font-weight:600;max-width:420px}
.cb-pc-ok{background:rgba(15,181,160,.12);color:var(--teal)}
.cb-pc-no{background:rgba(242,92,122,.12);color:var(--rose)}
.cb-pc-warn{background:rgba(240,168,51,.12);color:var(--amber)}

/* ── Reviews / Testimonials ── */
.cb-reviews{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:6px;scrollbar-width:thin}
.cb-reviews::-webkit-scrollbar{height:6px}
.cb-reviews::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}
.cb-review-card{border:1px solid var(--line);border-radius:16px;padding:22px;flex:0 0 calc((100% - (var(--rvcols,3) - 1) * 18px) / var(--rvcols,3));scroll-snap-align:start;min-width:220px}
.cb-review-stars{color:#F0A833;font-size:15px;letter-spacing:2px;margin-bottom:10px}
.cb-review-text{font-size:14.5px;line-height:1.7;color:var(--body);margin-bottom:16px}
.cb-review-who{display:flex;align-items:center;gap:11px}
.cb-review-av{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0}
.cb-review-av-fallback{width:40px;height:40px;border-radius:50%;background:var(--indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex-shrink:0;font-family:var(--font-heading)}
.cb-review-name{font-weight:600;font-size:13.5px;color:var(--ink)}
.cb-review-role{font-size:12px;color:var(--mut)}
@media(max-width:900px){.cb-review-card{flex-basis:calc((100% - 18px) / 2)}}
@media(max-width:600px){.cb-review-card{flex-basis:85%}}

/* ── FAQ accordion ── */
.cb-faq{max-width:760px}
.cb-faq-item{border-bottom:1px solid var(--line);padding:4px 0}
.cb-faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 4px;font-weight:600;font-size:14.5px;color:var(--ink);cursor:pointer;list-style:none}
.cb-faq-item summary::-webkit-details-marker{display:none}
.cb-faq-chev{color:var(--mut);transition:.2s;flex-shrink:0}
.cb-faq-item[open] .cb-faq-chev{transform:rotate(180deg)}
.cb-faq-a{padding:0 4px 16px;font-size:13.5px;line-height:1.7;color:var(--body)}

/* ── Stats strip ── */
.cb-stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cb-stats-inner{display:flex;flex-direction:column;align-items:center;padding:32px 0}
.cb-stats-h{text-align:center;margin-bottom:18px!important}
.cb-stats-row{display:flex;flex-wrap:wrap;justify-content:center;gap:36px 56px}
.cb-stat-item{text-align:center}
.cb-stat-num{font-family:var(--font-heading);font-weight:800;font-size:32px;color:var(--indigo);line-height:1}
.cb-stat-lbl{font-size:12.5px;color:var(--mut);margin-top:6px;font-weight:600}

/* ── Countdown timer ── */
.cb-countdown-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:24px;text-align:center}
.cb-countdown-title{font-family:var(--font-heading);font-weight:700;font-size:19px}
.cb-countdown-sub{font-size:13.5px;opacity:.85;margin-top:3px}
.cb-countdown-timer{display:flex;gap:10px}
.cb-cd-unit{display:flex;flex-direction:column;align-items:center;background:rgba(255,255,255,.16);border-radius:10px;padding:8px 12px;min-width:52px}
.cb-cd-n{font-family:var(--font-heading);font-weight:800;font-size:22px;line-height:1}
.cb-cd-l{font-size:10px;text-transform:uppercase;letter-spacing:.5px;opacity:.8;margin-top:2px}
.cb-countdown-expired{font-weight:700;font-size:15px}
.cb-countdown-btn{display:inline-block;background:var(--card,#fff);color:var(--ink,#111);font-weight:700;padding:11px 24px;border-radius:9px;text-decoration:none;font-size:13.5px;white-space:nowrap}

/* ── Newsletter signup ── */
.cb-newsletter-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:22px;padding:30px 0;text-align:center}
.cb-newsletter-title{font-family:var(--font-heading);font-weight:700;font-size:19px}
.cb-newsletter-sub{font-size:13.5px;opacity:.85;margin-top:3px}
.cb-newsletter-form{display:flex;gap:8px}
.cb-newsletter-input{padding:12px 14px;border:1.5px solid rgba(255,255,255,.3);border-radius:10px 0 0 10px;font-size:14px;font-family:inherit;background:rgba(255,255,255,.95);color:#111;width:240px;max-width:60vw}
.cb-newsletter-input:focus{outline:none}
.cb-newsletter-btn{padding:12px 22px;border:0;border-radius:0 10px 10px 0;background:var(--ink);color:#fff;font-weight:700;font-size:13.5px;cursor:pointer;white-space:nowrap}
.cb-newsletter-result{padding:0 0 18px;font-size:13px;font-weight:600;text-align:center}
.cb-nl-ok{color:var(--teal)}
.cb-nl-err{color:var(--rose)}

/* ── WhatsApp order CTA ── */
.cb-whatsapp-inner{display:flex;align-items:center;gap:18px;padding:22px 28px;flex-wrap:wrap}
.cb-whatsapp-ico{flex-shrink:0}
.cb-whatsapp-body{flex:1;min-width:160px}
.cb-whatsapp-title{font-family:var(--font-heading);font-weight:700;font-size:17px}
.cb-whatsapp-sub{font-size:13px;opacity:.9;margin-top:2px}
.cb-whatsapp-btn{display:inline-block;background:var(--card,#fff);color:#1FAD55;font-weight:700;padding:11px 22px;border-radius:9px;text-decoration:none;font-size:13.5px;white-space:nowrap}

/* ── Showcase Carousel (image OR video slides, separate desktop/mobile height) ── */
.cb-showcase{position:relative;overflow:hidden;background:var(--soft);width:100%;height:var(--show-hd,460px);min-height:180px;border-radius:18px}
.cb-show-slide{position:absolute;inset:0;width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat;opacity:0;transition:opacity .6s ease;display:flex;align-items:flex-end;z-index:0}
.cb-show-slide.active{opacity:1;z-index:2}
.cb-show-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;background:#000}
.cb-show-slide .cb-slide-cap{position:relative;z-index:1}
@media(max-width:760px){.cb-showcase{height:var(--show-hm,260px);border-radius:14px}}
/* Desktop: square corners on the showcase/hero carousel (mobile keeps its
   own 14px rounding above, untouched). */
@media(min-width:761px){.cb-showcase{border-radius:0}}

/* Defensive clamp: on some products the info column (.p-info) - variants,
   buy buttons, description - was rendering taller than its own visible
   content, leaving blank space between the product block and whatever
   comes after it (related products / reviews). No single CSS rule was
   found causing it (checked the grid, the fashion skin, the page wrapper,
   the hidden video box) - this forces the product block and its trailing
   children to never carry extra bottom space, regardless of the exact
   cause, without changing any visible content. */
.product{margin-bottom:0 !important}
.p-info{margin-bottom:0}
.p-info>*:last-child,.p-desc-section:last-child,.p-desc:last-child{margin-bottom:0 !important}

/* ── Video Banner (full-width video, text overlay at any of 9 positions) ── */
.cb-video-banner{position:relative;overflow:hidden;width:100%;height:var(--vb-hd,480px);border-radius:18px;background:#000}
.cb-vb-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.cb-vb-yt{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;z-index:0}
/* A YouTube iframe can't object-fit:cover itself, so it's oversized and
   centered — the classic "fill the frame, crop the letterboxing" trick. */
.cb-vb-yt iframe{position:absolute;top:50%;left:50%;width:100%;height:100%;min-width:177.77vh;min-height:56.25vw;transform:translate(-50%,-50%);border:0}
.cb-vb-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(0,0,0,.65) 0%,rgba(0,0,0,.15) 45%,rgba(0,0,0,.35) 100%)}
.cb-vb-overlay{position:absolute;inset:0;z-index:2;display:flex;padding:32px;pointer-events:none}
.cb-vb-text{pointer-events:auto;max-width:560px}
.cb-vb-text h2{color:#fff;font-family:var(--font-heading);font-weight:800;line-height:1.15;margin:0 0 10px;text-shadow:0 2px 10px rgba(0,0,0,.4)}
.cb-vb-text p{color:rgba(255,255,255,.9);line-height:1.5;margin:0 0 16px;text-shadow:0 1px 6px rgba(0,0,0,.35)}
.cb-vb-btn{display:inline-block;padding:12px 26px;border-radius:30px;background:#fff;color:#15171e;font-weight:700;font-size:14.5px;text-decoration:none;transition:transform .15s ease}
.cb-vb-btn:hover{transform:translateY(-2px)}
.cb-vb-mute-btn{position:absolute;top:16px;right:16px;z-index:3;width:40px;height:40px;border-radius:50%;border:none;background:rgba(0,0,0,.45);color:#fff;font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);transition:background .15s ease}
.cb-vb-mute-btn:hover{background:rgba(0,0,0,.65)}
@media(max-width:760px){
  .cb-video-banner{height:var(--vb-hm,320px);border-radius:14px}
  .cb-vb-mute-btn{width:34px;height:34px;font-size:14px;top:10px;right:10px}
  .cb-vb-overlay{padding:18px}
  .cb-vb-text{max-width:100%}
  .cb-vb-text h2{font-size:clamp(20px,6vw,28px)!important}
  .cb-vb-text p{font-size:clamp(13px,3.6vw,15px)!important}
}

/* ── Subscription Plans ── */
.cb-sub-grid{display:grid;grid-template-columns:repeat(var(--sp-cd,3),1fr);gap:22px;align-items:stretch}
.cb-sub-card{position:relative;border-radius:18px;padding:26px 24px;display:flex;flex-direction:column}
.cb-sub-card.hl{box-shadow:0 18px 40px -18px rgba(0,0,0,.4);transform:translateY(-6px)}
.cb-sub-ribbon{position:absolute;top:16px;right:16px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;padding:4px 11px;border-radius:20px;color:#111}
.cb-sub-name{font-family:var(--font-heading);font-weight:800;font-size:19px;letter-spacing:.2px}
.cb-sub-tagline{font-size:12.5px;opacity:.8;margin:2px 0 18px}
.cb-sub-items{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.cb-sub-item-div{height:1px;opacity:.18;margin:2px 0}
.cb-sub-item-label{font-size:13px;opacity:.85}
.cb-sub-item-price{font-family:var(--font-heading);font-weight:800;font-size:23px;margin-top:2px;line-height:1.2}
.cb-sub-item-mrp{font-size:14px;font-weight:500;opacity:.55;margin-right:8px;text-decoration:line-through}
.cb-sub-savings{display:inline-flex;align-self:flex-start;border:1.5px solid;border-radius:30px;padding:6px 14px;font-size:12px;font-weight:700;margin-bottom:16px}
.cb-sub-features{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-direction:column;gap:9px}
.cb-sub-features li{display:flex;align-items:center;gap:9px;font-size:13.5px;opacity:.95}
.cb-sub-feat-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.cb-sub-btn{margin-top:auto;display:block;text-align:center;background:var(--card,#fff);color:var(--ink,#111);font-weight:700;padding:12px 20px;border-radius:10px;text-decoration:none;font-size:13.5px}
@media(max-width:900px){.cb-sub-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.cb-sub-grid{grid-template-columns:repeat(var(--sp-cm,1),1fr)}.cb-sub-card.hl{transform:none}}

/* ─── Mobile ─── */
@media(max-width:760px){
  .cb-block-outer{padding-left:12px;padding-right:12px}
  .cb-block-outer .wrap{padding-left:8px;padding-right:8px}
  .cb-block-outer .wrap.cb-vid-outer{padding-left:0;padding-right:0}
  .cb-slideshow{height:min(var(--slide-h,400px),55vw);min-height:160px;border-radius:14px}
}
@media(max-width:600px){
  .cb-h{font-size:20px}
  .cb-img{max-height:240px;border-radius:10px}
  .cb-slide-cap{padding:20px 16px}
  .cb-slide-cap h2{font-size:20px}
  .cb-slide-cap p{font-size:13px;margin:0 0 10px}
  .cb-gallery{grid-template-columns:repeat(var(--gmcols,2),1fr)}
  .cb-slide-prev,.cb-slide-next{width:34px;height:34px;font-size:16px}
  .cb-sub-card{padding:22px 18px}
  .cb-sub-name{font-size:17px}
  .cb-sub-item-price{font-size:20px}
  .cb-sub-ribbon{font-size:9.5px;padding:3px 9px}
}
/* ===== Checkout pages (?checkout / ?placeorder) — desktop = single page, mobile = separate pages ===== */
.co-page{max-width:1200px;margin:0 auto;padding:22px 16px 56px;font-family:var(--font-body)}
.co-page *{box-sizing:border-box}
.co-h{font-size:19px;font-weight:700;color:var(--ink);margin:0 0 14px}
.co-desktop-only{display:none}
.co-mobile-only{display:block}
.co-items{margin-bottom:6px}
.co-single{max-width:560px}
/* mobile sticky action bar (CHECKOUT / Place Order) */
.co-sticky-foot{position:sticky;bottom:0;background:var(--bg);padding:14px 0 16px;margin-top:8px;box-shadow:0 -8px 20px -12px rgba(0,0,0,.18)}
.co-sticky-foot .cs-btn{width:100%}
/* "Add new address" button + new-address bottom sheet */
.cs-addr-add-btn{display:block;width:fit-content;margin:12px 0 4px auto;border:1.5px solid var(--indigo);background:var(--bg);color:var(--indigo);border-radius:9px;padding:6px 14px;font-weight:700;font-size:12.5px;line-height:1.2;white-space:nowrap;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.06);transition:.15s}
.cs-addr-add-btn:hover{background:var(--indigo);color:#fff}
/* Delivery heading + "Add new address" share one row (button pinned to the right) */
.co-deliver-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.co-deliver-head .co-h{margin:0}
.co-deliver-head .cs-addr-add-btn{margin:0;flex-shrink:0}
.addr-empty{color:var(--mut);font-size:13.5px;padding:8px 2px}
.addr-modal{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.45);display:none;align-items:flex-end;justify-content:center}
.addr-modal.open{display:flex}
.addr-modal-card{background:var(--bg);width:100%;max-width:520px;max-height:90vh;overflow-y:auto;border-radius:18px 18px 0 0;padding:18px 18px calc(20px + env(safe-area-inset-bottom,0px))}
.addr-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.addr-modal-head span{font-size:17px;font-weight:700;color:var(--ink)}
.addr-modal-head button{border:0;background:var(--soft);width:30px;height:30px;border-radius:50%;font-size:15px;cursor:pointer;color:var(--ink)}
.addr-modal-card .cs-btn{width:100%;margin-top:8px}
/* mobile: CHECKOUT / Place Order pinned to the bottom of the screen */
@media(max-width:899px){
  .co-sticky-foot{position:fixed;left:0;right:0;bottom:0;margin:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));z-index:50;box-shadow:0 -6px 20px -8px rgba(0,0,0,.18)}
  .co-page{padding-bottom:96px}
  /* address list spans full content width (same as the Schedule box) — drop the side inset */
  .cs-addr-body{padding-left:0;padding-right:0}
}
@media(min-width:900px){ .addr-modal{align-items:center} .addr-modal-card{border-radius:18px} }
.co-po-foot{margin-top:18px}
/* order summary (coupon + fees + Grand Total) now scrolls above the sticky Place Order button */
.co-po-summary{margin-top:16px}
/* success */
.co-done{max-width:520px;margin:0 auto}
/* DESKTOP >=900px: single page, 2 columns */
@media(min-width:900px){
  .co-desktop-only{display:block}
  .co-mobile-only{display:none}
  /* Outer grid: plain — no background, no border, no wrapper box */
  #coCheckout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
  /* Each column: white background (light, matching mobile content area) */
  #coCheckout .co-col{min-width:0;background:var(--bg);border:1.5px solid var(--line);
              border-radius:16px;padding:24px;box-shadow:0 2px 16px rgba(0,0,0,.05)}
  /* Column heading: underline separator */
  #coCheckout .co-h{font-size:18px;padding-bottom:14px;margin-bottom:12px;
              border-bottom:1.5px solid var(--line)}
  /* In the delivery column the underline belongs to the whole header row (heading +
     right-aligned button), not the h2 alone, so they sit above one shared rule. */
  #coCheckout .co-deliver-head{padding-bottom:14px;margin-bottom:12px;border-bottom:1.5px solid var(--line)}
  #coCheckout .co-deliver-head .co-h{padding-bottom:0;margin-bottom:0;border-bottom:0}
  #coCheckout .co-deliver-head .cs-addr-add-btn{margin:0}
  /* Section labels inside right column: smaller, left-aligned */
  #coCheckout .cs-section-label{font-size:12px;font-weight:700;text-transform:uppercase;
              letter-spacing:.6px;color:var(--mut);text-align:left;
              margin:18px 0 10px;padding-bottom:0;border-bottom:none}
  #coCheckout .cs-section-label:first-child{margin-top:4px}
  /* Summary tail (left column: coupon + fees + grand total) */
  #coCheckout .co-summary-tail{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
  /* Buttons */
  #coCheckout .cs-btn{width:100%;margin-top:16px}
  /* Address add button: full width inside right column */
  #coCheckout .cs-addr-add-btn{margin-top:12px}
  /* Success spans full width */
  #coCheckout .co-done{grid-column:1/-1}
}
/* ── Category tile hardening: equal square boxes on every device ─────────────
   1) Older Android WebViews (common in packaged store apps) don't support
      aspect-ratio, so image tiles collapsed to uneven heights on mobile.
      Fall back to the padding-top square trick there.
   2) Keep the category name on a single line (ellipsis when long) so wrapped
      names never change card height — name and item-count sit tight under
      every tile at the same position. */
.cat-thumb{width:100%;overflow:hidden;position:relative;background-size:115%!important;background-position:center;background-repeat:no-repeat}
.cat-thumb>div{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background-size:cover;background-position:center;background-repeat:no-repeat}
.cat-thumb img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;max-width:none}
/* .cat-thumb-img-wrap: replaces the old inline background-image (which was
   always shown at background-size:115% for a slight zoom/crop) with a real
   <img> for native lazy-loading. The wrapper clips the 115%-oversized <img>
   itself so nothing spills out — including for cat-card-pill_bottom, where
   .cat-thumb has overflow:visible (so the floating pill can hang below the
   edge) but the image must still stay clipped. */
.cat-thumb-img-wrap{overflow:hidden;border-radius:inherit}
.cat-thumb-img-wrap img{position:absolute;top:-7.5%;left:-7.5%;width:115%;height:115%;object-fit:cover;object-position:center;display:block;max-width:none}
@supports not (aspect-ratio:1){
  .cat-thumb,.thumb,.cb-gal-item,.p-img{height:0;padding-top:100%}
}
.cats-grid{align-items:start}
.cat-name{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;line-height:1.35;min-height:0;max-width:100%;padding:0 2px}
.share-btn{position:absolute;top:10px;right:50px;z-index:6;width:32px;height:32px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--mut);display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.12);transition:.15s;-webkit-tap-highlight-color:transparent}
.share-btn:hover{color:var(--indigo,#5B5BF0);transform:scale(1.06)}
.share-btn-lg{top:14px;right:66px;width:42px;height:42px}

.p-video-box{aspect-ratio:1;border-radius:18px;overflow:hidden;background:#000}
.p-thumb-video{position:relative}
.p-thumb-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6));pointer-events:none}
/* ── Header / Footer on/off, desktop vs mobile independently (audit 1
   August 2026) — 760px matches this theme's existing mobile breakpoint
   (see .wrap's own @media(max-width:560px) etc. above; 761px is the same
   "desktop and up" cutoff header.php's own sticky/scroll logic already uses). */
@media(min-width:761px){
  .hdr-hide-desktop{display:none!important}
  .ftr-hide-desktop{display:none!important}
}
@media(max-width:760px){
  .hdr-hide-mobile{display:none!important}
  .ftr-hide-mobile{display:none!important}
}

/* ── Courier Tracking (redesigned 13 Aug 2026 — same HTML structure/IDs
   and JS logic above are untouched; this is a visual restyle only, to
   match the "Package Tracking" hero look — deep navy/blue gradient,
   cyan glow, glass-morphism search card. The hero-with-uploaded-image
   mode (.cb-ct-hero, when an admin sets a background photo) still layers
   its own image behind everything exactly as before. ── */
.cb-ct-wrap *{box-sizing:border-box}
.cb-ct-wrap{
  max-width:none;margin:0 auto;padding:56px 24px;font-family:inherit;
  position:relative;overflow:hidden;border-radius:0;
  background:
    radial-gradient(circle at 78% 45%, rgba(0,174,255,.22), transparent 28%),
    radial-gradient(circle at 20% 20%, rgba(25,90,255,.20), transparent 32%),
    linear-gradient(135deg, #031331 0%, #06245d 45%, #041a43 100%);
}
.cb-ct-wrap::before{
  content:'';position:absolute;width:500px;height:500px;right:-160px;top:-140px;
  border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle, rgba(0,185,255,.18) 0%, rgba(0,125,255,.08) 35%, transparent 70%);
  filter:blur(10px);
}
.cb-ct-wrap.cb-ct-hero{background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center}
.cb-ct-wrap.cb-ct-hero::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,19,49,.55),rgba(3,19,49,.82));z-index:0;filter:none;width:auto;height:auto;right:auto;top:auto;border-radius:0}
.cb-ct-inner{position:relative;z-index:1;width:100%;max-width:460px;margin:0 auto}
.cb-ct-h{text-align:center;margin-bottom:22px;position:relative;z-index:1}
.cb-ct-h p:first-child{
  display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;
  letter-spacing:1.2px;text-transform:uppercase;color:#54cfff;
  padding:6px 14px;margin:0 0 14px;border:1px solid rgba(0,190,255,.35);
  border-radius:50px;background:rgba(0,160,255,.08);
}
.cb-ct-h p:first-child::before{content:'';width:7px;height:7px;border-radius:50%;background:#19c8ff;box-shadow:0 0 10px #19c8ff;flex-shrink:0}
.cb-ct-h p:last-child{font-size:14.5px;color:#c8d8ed;margin:0}
.cb-ct-hero .cb-ct-h p:first-child{color:#54cfff}
.cb-ct-hero .cb-ct-h p:last-child{color:rgba(255,255,255,.85)}
.cb-ct-search{
  display:flex;gap:8px;margin-bottom:14px;position:relative;z-index:1;
  padding:7px;border-radius:16px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(12px);
  box-shadow:0 20px 50px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08);
}
.cb-ct-search input{flex:1;height:56px;padding:0 18px;border-radius:11px;border:none;background:#fff;color:#17243b;font-size:15px;font-family:inherit}
.cb-ct-search input:focus{outline:2px solid #08b9ff;outline-offset:-2px}
.cb-ct-search button{
  height:56px;padding:0 26px;border-radius:11px;border:none;font-family:inherit;
  background:linear-gradient(135deg,#08b9ff,#087fe8);color:#fff;font-weight:700;font-size:15px;
  cursor:pointer;box-shadow:0 8px 22px rgba(0,145,235,.35);transition:.2s ease;
}
.cb-ct-search button:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,170,255,.45)}
.cb-ct-search button:disabled{opacity:.6;transform:none}
.cb-ct-msg{text-align:center;font-size:13px;color:#c8d8ed;min-height:18px;margin-bottom:10px;position:relative;z-index:1}
.cb-ct-hero .cb-ct-msg{color:rgba(255,255,255,.85)}
.cb-ct-err{display:none;background:rgba(220,38,38,.12);border:1px solid rgba(248,113,113,.4);color:#fca5a5;border-radius:12px;padding:12px 15px;font-size:13.5px;text-align:center;margin-bottom:10px;position:relative;z-index:1}
.cb-ct-err.show{display:block}
.cb-ct-card{display:none;background:rgba(255,255,255,.06);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.15);color:#fff;border-radius:18px;padding:22px;position:relative;z-index:1}
.cb-ct-card.show{display:block}
.cb-ct-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}
.cb-ct-lbl{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#7c8da5;margin-bottom:3px}
.cb-ct-num{font-size:17px;font-weight:700;font-family:monospace;color:#fff}
.cb-ct-pill{padding:5px 12px;border-radius:20px;font-size:11px;font-weight:700;background:rgba(8,185,255,.18);color:#28c5ff;white-space:nowrap;border:1px solid rgba(0,190,255,.3)}
.cb-ct-prog{display:flex;align-items:center;margin:18px 0 14px}
.cb-ct-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.15);flex-shrink:0}
.cb-ct-dot.done{background:#08b9ff;box-shadow:0 0 8px rgba(8,185,255,.7)}
.cb-ct-bar{flex:1;height:2px;background:rgba(255,255,255,.15)}
.cb-ct-bar.done{background:#08b9ff}
.cb-ct-steps{display:flex;justify-content:space-between;font-size:8.5px;color:#7c8da5;margin-bottom:16px;text-transform:uppercase}
.cb-ct-info{background:rgba(255,255,255,.05);border-radius:10px;padding:10px 13px;margin-bottom:14px;font-size:13px}
.cb-ct-info div{display:flex;justify-content:space-between;padding:3px 0}
.cb-ct-info span:first-child{color:#7c8da5}
.cb-ct-btn2{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:13px;background:linear-gradient(135deg,#08b9ff,#087fe8);color:#fff;font-weight:800;font-size:14px;border-radius:10px;text-decoration:none;box-shadow:0 8px 22px rgba(0,145,235,.3)}
.cb-ct-note{font-size:12.5px;color:#94a3b8;text-align:center;margin:0}
.cb-ct-hist{display:none;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1);position:relative;z-index:1;margin-top:14px}
.cb-ct-hist.show{display:block}
.cb-ct-hist-title{background:linear-gradient(135deg,#08b9ff,#087fe8);color:#fff;text-align:center;font-weight:800;font-size:14px;letter-spacing:.5px;padding:12px}
.cb-ct-hist-meta{display:flex;flex-wrap:wrap;gap:4px 18px;padding:12px 16px;border-bottom:2px solid #e2e8f0;font-size:12px}
.cb-ct-hist-meta b{color:#0f172a}
.cb-ct-hist-meta span{color:#64748b}
.cb-ct-hist-date{background:#06245d;color:#fff;font-weight:700;font-size:12px;padding:8px 16px}
.cb-ct-hist-table{width:100%;border-collapse:collapse;font-size:12.5px;table-layout:fixed}
.cb-ct-hist-table th:nth-child(1),.cb-ct-hist-table td:nth-child(1){width:45%}
.cb-ct-hist-table th:nth-child(2),.cb-ct-hist-table td:nth-child(2){width:30%}
.cb-ct-hist-table th:nth-child(3),.cb-ct-hist-table td:nth-child(3){width:25%}
.cb-ct-hist-table td{word-break:break-word}
.cb-ct-hist-table th{text-align:left;font-size:10px;text-transform:uppercase;color:#64748b;padding:7px 16px;border-bottom:1px solid #e2e8f0}
.cb-ct-hist-table td{padding:8px 16px;border-bottom:1px solid #e2e8f0;color:#0f172a}
.cb-ct-hist-table tr:last-child td{border-bottom:none}

/* ── Trash to Cash Booking block (same hero/plain-card pattern as Courier Tracking) ── */
.cb-ttc-wrap *{box-sizing:border-box}
.cb-ttc-wrap{max-width:520px;margin:0 auto;padding:28px 20px;font-family:inherit;background:#fff;border-radius:0;border:1px solid var(--line,#eef2ee)}
.cb-ttc-wrap.cb-ttc-hero{max-width:none;background-size:cover;background-position:center;overflow:hidden;position:relative;padding:48px 24px;border-radius:0;border:none}
.cb-ttc-wrap.cb-ttc-hero::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,23,42,.5),rgba(15,23,42,.75));z-index:0}
.cb-ttc-inner{position:relative;z-index:1;max-width:480px;margin:0 auto}
.cb-ttc-h{text-align:center;margin-bottom:16px}
.cb-ttc-h p:first-child{font-size:19px;font-weight:800;margin:0 0 6px;color:#1a2e1a}
.cb-ttc-h p:last-child{font-size:13px;color:#5a7a5a;margin:0}
.cb-ttc-hero .cb-ttc-h p:first-child{color:#fff}
.cb-ttc-hero .cb-ttc-h p:last-child{color:rgba(255,255,255,.85)}
.cb-ttc-items{max-height:280px;overflow-y:auto;background:rgba(0,0,0,.015);border-radius:0;padding:4px 12px}
.cb-ttc-hero .cb-ttc-items{background:rgba(255,255,255,.92)}
@media(min-width:601px){
  .cb-ttc-items{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;max-height:none}
  .cb-ttc-row{grid-column:span 1}
}
.cb-ttc-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid #eef2ee}
.cb-ttc-row:last-child{border-bottom:none}
.cb-ttc-name{font-size:13.5px;font-weight:700;color:#1a2e1a}
.cb-ttc-rate{font-size:11.5px;color:#5a7a5a}
.cb-ttc-qty{display:flex;align-items:center;gap:6px}
.cb-ttc-qty button{width:26px;height:26px;border-radius:7px;border:1px solid #ddd;background:#fff;font-size:14px;cursor:pointer;line-height:1}
.cb-ttc-qty input{width:46px;text-align:center;padding:5px 3px;border-radius:7px;border:1px solid #ddd;font-size:13px}
.cb-ttc-total{display:flex;justify-content:space-between;align-items:center;padding:14px 4px;font-size:16px;font-weight:800;color:#1a2e1a;border-top:2px dashed #ddd;margin-top:4px}
.cb-ttc-hero .cb-ttc-total{color:#fff;border-top-color:rgba(255,255,255,.35)}
/* Promo-card category tiles (audit 16 Aug 2026 — UI) — same static-tile
   pattern as .cb-pd-type/.cb-rd-type just below; the block itself no longer
   has a live quantity picker, only a plain CTA into sell-scrap.php, which
   has the full form. */
.cb-ttc-types{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.cb-ttc-type{display:flex;flex-direction:column;align-items:center;gap:4px;background:rgba(46,125,50,.08);border-radius:0;padding:10px 14px;min-width:64px}
.cb-ttc-hero .cb-ttc-type{background:rgba(255,255,255,.14)}
.cb-ttc-type span{font-size:20px}
.cb-ttc-type b{font-size:10.5px;font-weight:700;color:#2e7d32}
.cb-ttc-hero .cb-ttc-type b{color:#fff}
.cb-ttc-btn{display:block;width:100%;padding:14px;border:none;border-radius:0;background:#2e7d32;color:#fff;font-size:15px;font-weight:800;cursor:pointer;text-align:center;text-decoration:none}
@media(min-width:601px){
  .cb-ttc-wrap{max-width:680px}
  .cb-ttc-btn{max-width:320px;margin:0 auto;display:block}
}
@media(max-width:600px){
  .cb-ttc-wrap{padding:20px 16px;border-radius:16px}
  .cb-ttc-wrap.cb-ttc-hero{padding:32px 18px;border-radius:16px}
  .cb-ttc-items{max-height:240px;border-radius:10px}
  .cb-ttc-type{padding:8px 10px;min-width:56px;border-radius:10px}
  .cb-ttc-btn{border-radius:10px}
}
@media(max-width:600px){
  .cb-ct-wrap{padding:40px 18px}
  .cb-ct-wrap.cb-ct-hero{padding:40px 18px;border-radius:14px}
  .cb-ct-h p:last-child{font-size:13px}
  .cb-ct-search{flex-direction:column}
  .cb-ct-search button{width:100%}
}

/* ── Service tile pairing: lets two adjacent promo blocks (Parcel Delivery,
   and the companion Ride Booking block) sit side-by-side instead of full
   width stacked, matching the reference "Pickup & Delivery" home-section
   layout. Only pairs up when there's actually a matching sibling right
   next to it — a lone Parcel Delivery (or Ride Booking) block with
   nothing to pair with now runs full width instead of sitting at half
   width with an empty gap next to it, which is what happens if only one
   of the two is placed on a page. The pairing rule only exists above the
   640px breakpoint — nesting it inside its own min-width query (rather
   than relying on the max-width query below to override it) means it
   structurally cannot win on mobile regardless of selector specificity,
   which a flat (non-nested) version of this rule previously got wrong:
   the paired-width selectors below were more specific than the mobile
   override, so they won even inside the max-width:640px block and broke
   full-width stacking on phones. ── */
.cb-block-outer.cb-svc-tile{display:inline-block;vertical-align:top;width:100%}
@media(min-width:641px){
  .cb-block-outer.cb-svc-tile:has(+ .cb-block-outer.cb-svc-tile),
  .cb-block-outer.cb-svc-tile + .cb-block-outer.cb-svc-tile{
    width:calc(50% - 8px);
  }
}
@media(max-width:640px){
  .cb-block-outer.cb-svc-tile{display:block;width:100%}
}

/* ── Parcel Delivery block (same hero/plain-card pattern as Courier Tracking / Trash to Cash) ── */
.cb-pd-wrap *{box-sizing:border-box}
.cb-pd-wrap{max-width:520px;margin:0 auto;padding:28px 20px;font-family:inherit;background:#fff;border-radius:0;border:1px solid var(--line,#eef2ee);text-align:center}
.cb-pd-wrap.cb-pd-hero{max-width:none;background-size:cover;background-position:center;overflow:hidden;position:relative;padding:44px 22px;border-radius:0;border:none}
.cb-pd-wrap.cb-pd-hero::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,20,70,.45),rgba(30,20,70,.78));z-index:0}
.cb-pd-inner{position:relative;z-index:1}
.cb-pd-h{margin-bottom:16px}
.cb-pd-h p:first-child{font-size:19px;font-weight:800;margin:0 0 6px;color:#1e1046}
.cb-pd-h p:last-child{font-size:13px;color:#6b6390;margin:0}
.cb-pd-hero .cb-pd-h p:first-child{color:#fff}
.cb-pd-hero .cb-pd-h p:last-child{color:rgba(255,255,255,.85)}
.cb-pd-types{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.cb-pd-type{display:flex;flex-direction:column;align-items:center;gap:4px;background:rgba(79,70,229,.08);border-radius:0;padding:10px 14px;min-width:64px}
.cb-pd-hero .cb-pd-type{background:rgba(255,255,255,.14)}
.cb-pd-type span{font-size:20px}
.cb-pd-type b{font-size:10.5px;font-weight:700;color:#4f46e5}
.cb-pd-hero .cb-pd-type b{color:#fff}
.cb-pd-btn{display:inline-block;padding:13px 28px;border:none;border-radius:0;background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;font-size:14.5px;font-weight:800;cursor:pointer;text-decoration:none}
@media(max-width:600px){
  .cb-pd-wrap{padding:22px 16px;border-radius:16px}
  .cb-pd-wrap.cb-pd-hero{padding:32px 18px;border-radius:16px}
  .cb-pd-type{padding:8px 10px;min-width:56px;border-radius:10px}
  .cb-pd-btn{border-radius:10px}
}

/* ── Ride Booking block (companion to Parcel Delivery, same hero/plain-card pattern) ── */
.cb-rd-wrap *{box-sizing:border-box}
.cb-rd-wrap{max-width:520px;margin:0 auto;padding:28px 20px;font-family:inherit;background:#fff;border-radius:0;border:1px solid var(--line,#eef2ee);text-align:center}
.cb-rd-wrap.cb-rd-hero{max-width:none;background-size:cover;background-position:center;overflow:hidden;position:relative;padding:44px 22px;border-radius:0;border:none}
.cb-rd-wrap.cb-rd-hero::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(60,30,0,.45),rgba(60,30,0,.78));z-index:0}
.cb-rd-inner{position:relative;z-index:1}
.cb-rd-h{margin-bottom:16px}
.cb-rd-h p:first-child{font-size:19px;font-weight:800;margin:0 0 6px;color:#3c1e00}
.cb-rd-h p:last-child{font-size:13px;color:#8a6d4a;margin:0}
.cb-rd-hero .cb-rd-h p:first-child{color:#fff}
.cb-rd-hero .cb-rd-h p:last-child{color:rgba(255,255,255,.85)}
.cb-rd-types{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.cb-rd-type{display:flex;flex-direction:column;align-items:center;gap:4px;background:rgba(249,115,22,.08);border-radius:0;padding:10px 14px;min-width:64px}
.cb-rd-hero .cb-rd-type{background:rgba(255,255,255,.14)}
.cb-rd-type span{font-size:20px}
.cb-rd-type b{font-size:10.5px;font-weight:700;color:#f97316}
.cb-rd-hero .cb-rd-type b{color:#fff}
.cb-rd-btn{display:inline-block;padding:13px 28px;border:none;border-radius:0;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;font-size:14.5px;font-weight:800;cursor:pointer;text-decoration:none}
@media(max-width:600px){
  .cb-rd-wrap{padding:22px 16px;border-radius:16px}
  .cb-rd-wrap.cb-rd-hero{padding:32px 18px;border-radius:16px}
  .cb-rd-type{padding:8px 10px;min-width:56px;border-radius:10px}
  .cb-rd-btn{border-radius:10px}
}

/* ─── Documents & Agreements block (doc-agreements plugin) ───
   Same structure as Trash to Cash / Parcel Delivery / Ride Booking just
   above — one heading pair, a tile row, one CTA — so it sits at the same
   size and wraps at the same points as they do; only the accent colour
   (navy/brass) is its own, the same way ttc=green, pd=purple, rd=orange
   are each their own colour on an otherwise identical layout. */
.cb-da-wrap *{box-sizing:border-box}
.cb-da-wrap{max-width:520px;margin:0 auto;padding:28px 20px;font-family:inherit;background:#fff;border-radius:0;border:1px solid var(--line,#eef2ee);text-align:center}
.cb-da-wrap.cb-da-hero{max-width:none;background-size:cover;background-position:center;overflow:hidden;position:relative;padding:44px 22px;border-radius:0;border:none}
.cb-da-wrap.cb-da-hero::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,35,64,.5),rgba(28,35,64,.78));z-index:0}
.cb-da-inner{position:relative;z-index:1}
.cb-da-h{margin-bottom:16px}
.cb-da-h p:first-child{font-size:19px;font-weight:800;margin:0 0 6px;color:#1c2340}
.cb-da-h p:last-child{font-size:13px;color:#6b7280;margin:0}
.cb-da-hero .cb-da-h p:first-child{color:#fff}
.cb-da-hero .cb-da-h p:last-child{color:rgba(255,255,255,.85)}
.cb-da-types{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.cb-da-type{display:flex;flex-direction:column;align-items:center;gap:4px;background:rgba(168,121,31,.08);border-radius:0;padding:10px 14px;min-width:64px}
.cb-da-hero .cb-da-type{background:rgba(255,255,255,.14)}
.cb-da-type span{font-size:20px}
.cb-da-type b{font-size:10.5px;font-weight:700;color:#a8791f}
.cb-da-hero .cb-da-type b{color:#fff}
.cb-da-btn{display:inline-block;padding:13px 28px;border:none;border-radius:0;background:linear-gradient(135deg,#c99a3c,#7c5a16);color:#fff;font-size:14.5px;font-weight:800;cursor:pointer;text-decoration:none}
@media(max-width:600px){
  .cb-da-wrap{padding:22px 16px;border-radius:16px}
  .cb-da-wrap.cb-da-hero{padding:32px 18px;border-radius:16px}
  .cb-da-type{padding:8px 10px;min-width:56px;border-radius:10px}
  .cb-da-btn{border-radius:10px}
}

.cb-cf-wrap *{box-sizing:border-box}
.cb-cf-wrap{max-width:460px;margin:0 auto;padding:32px 20px;font-family:inherit}
.cb-cf-wrap.cb-cf-hero{max-width:none;background-size:cover;background-position:center;overflow:hidden;position:relative;padding:56px 24px;display:flex;align-items:center;justify-content:center}
.cb-cf-wrap.cb-cf-hero::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,23,42,.45),rgba(15,23,42,.72));z-index:0}
.cb-cf-inner{position:relative;z-index:1;width:100%;max-width:460px}
.cb-cf-h{text-align:center;margin-bottom:22px}
.cb-cf-h p:first-child{font-size:20px;font-weight:700;margin:0 0 6px;color:var(--ink,#0f172a)}
.cb-cf-h p:last-child{font-size:13.5px;color:var(--mut,#64748b);margin:0}
.cb-cf-hero .cb-cf-h p:first-child{color:#fff}
.cb-cf-hero .cb-cf-h p:last-child{color:rgba(255,255,255,.85)}
.cb-cf-form{background:var(--card,#fff);border-radius:18px;padding:22px;box-shadow:0 12px 40px rgba(15,23,42,.08)}
.cb-cf-hero .cb-cf-form{box-shadow:0 20px 60px rgba(0,0,0,.25)}
.cb-cf-fld{margin-bottom:14px}
.cb-cf-fld label{display:block;font-size:11.5px;font-weight:700;color:var(--mut,#64748b);text-transform:uppercase;letter-spacing:.4px;margin-bottom:5px}
.cb-cf-fld input,.cb-cf-fld textarea{width:100%;padding:12px 14px;border-radius:10px;border:1.5px solid var(--line,#e2e8f0);font-size:14px;font-family:inherit;color:var(--ink,#0f172a);background:var(--card,#fff)}
.cb-cf-fld input:focus,.cb-cf-fld textarea:focus{outline:none;border-color:var(--indigo,#5b5bf0)}
.cb-cf-fld textarea{resize:vertical;min-height:90px}
.cb-cf-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cb-cf-btn{width:100%;padding:14px;border-radius:10px;border:none;background:var(--indigo,#f97316);color:#fff;font-weight:700;font-size:14.5px;cursor:pointer;margin-top:4px}
.cb-cf-btn:disabled{opacity:.6;cursor:default}
.cb-cf-status{text-align:center;font-size:13px;margin-top:12px;min-height:18px}
.cb-cf-status.ok{color:#16a34a;font-weight:600}
.cb-cf-status.err{color:#dc2626}
@media(max-width:480px){.cb-cf-row2{grid-template-columns:1fr}}
@media(max-width:600px){.cb-cf-wrap.cb-cf-hero{padding:40px 18px;border-radius:14px}}

.hdr-link{display:inline-flex;align-items:center;padding:8px 12px;font-size:14px;font-weight:600;color:inherit;text-decoration:none;white-space:nowrap;border-radius:8px}
.hdr-link:hover{opacity:.75}

.cb-cc-card{max-width:480px;margin:0 auto;background:var(--card,#fff);border:1px solid var(--line,#e2e8f0);border-radius:18px;padding:26px;box-shadow:0 12px 40px rgba(15,23,42,.06)}
.cb-cc-fld{margin-bottom:16px}
.cb-cc-fld label{display:block;font-size:11.5px;font-weight:700;color:var(--mut,#64748b);text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px}
.cb-cc-tiers{display:flex;gap:8px;flex-wrap:wrap}
.cb-cc-tier{flex:1 1 auto;min-width:110px;padding:10px 14px;border-radius:10px;border:1.5px solid var(--line,#e2e8f0);cursor:pointer;text-align:center;font-size:13px}
.cb-cc-tier.on{border-color:var(--indigo,#5b5bf0);background:rgba(91,91,240,.08);font-weight:700}
.cb-cc-fld input[type=number],.cb-cc-fld input[type=range]{width:100%}
.cb-cc-fld input[type=number]{padding:12px 14px;border-radius:10px;border:1.5px solid var(--line,#e2e8f0);font-size:15px;font-family:inherit}
.cb-cc-result{background:var(--soft,#f8f9fc);border-radius:14px;padding:18px;text-align:center;margin:16px 0}
.cb-cc-result .amt{font-size:26px;font-weight:800;color:var(--ink,#0f172a)}
.cb-cc-result .note{font-size:12px;color:var(--mut,#64748b);margin-top:4px}
.cb-cc-btn{display:block;width:100%;text-align:center;padding:13px;border-radius:10px;background:var(--indigo,#f97316);color:#fff;font-weight:700;text-decoration:none;font-size:14.5px}

.cb-gb-cell{border-radius:12px;overflow:hidden;min-width:0}
.cb-gb-cell img,.cb-gb-cell video{width:100%;display:block;object-fit:cover;border-radius:12px}
.cb-gb-cell-card img{height:auto;aspect-ratio:4/3;border-radius:12px 12px 0 0}
.cb-gb-cell .yt-wrap{border-radius:12px}
.cb-gb-cell-card{background:var(--card,#fff);border:1px solid var(--line,#e2e8f0);border-radius:12px;box-shadow:0 2px 10px rgba(15,23,42,.05)}

.cb-gal-item{position:relative;cursor:pointer}
.cb-gal-cap{position:absolute;inset:auto 0 0 0;padding:8px 10px;background:linear-gradient(0deg,rgba(0,0,0,.72),transparent);color:#fff;font-size:12.5px;font-weight:600;pointer-events:none}
.cb-gal-modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:100020;align-items:center;justify-content:center;padding:20px}
.cb-gal-modal-overlay.show{display:flex}
.cb-gal-modal{background:var(--card,#fff);border-radius:16px;max-width:1120px;width:100%;max-height:88vh;overflow-y:auto;position:relative;display:flex}
.cb-gal-modal img{width:50%;flex-shrink:0;display:block;border-radius:16px 0 0 16px;max-height:88vh;object-fit:cover}
.cb-gal-modal-close{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;border:none;background:rgba(0,0,0,.55);color:#fff;font-size:16px;cursor:pointer;z-index:1}
.cb-gal-modal-body{padding:24px;flex:1;min-width:0}
.cb-gal-modal-body h3{margin:0 0 10px;font-size:19px;color:var(--ink,#0f172a)}
.cb-gal-modal-short{font-size:15px;font-weight:600;color:var(--ink,#0f172a);margin:0 0 12px;line-height:1.5}
.cb-gal-modal-full{font-size:13.5px;color:var(--mut,#64748b);margin:0;line-height:1.7;white-space:pre-wrap}
@media(max-width:680px){
  .cb-gal-modal{flex-direction:column;max-height:92vh}
  .cb-gal-modal img{width:100%;border-radius:16px 16px 0 0;max-height:40vh}
}