/* ============================================================================
   Shine Suppliers — Mobile-optimised layout.
   A purpose-built, single-column mobile front end that REPLACES the fixed 1280px
   desktop canvas on small screens. The desktop `.stage` is hidden ≤ 820px and
   this flow layout (#ss-m, built by mobile.js from the same Store/SSData data)
   is shown instead, so text is readable and everything reflows to the viewport.
   ========================================================================== */

:root{
  --ss-pink:#FAC9CD; --ss-peach:#FCCDA0; --ss-red:#F15F6C; --ss-cream:#FFF3E7;
  --ss-cyan:#D4EFF8; --ss-orange:#FFAC5E; --ss-ink:#111;
  --ss-shadow:1px 3px 0 0 #000; --ss-shadow-lg:2px 5px 0 0 #000;
}

#ss-m{display:none;}

/* Toggle: desktop canvas vs mobile layout ---------------------------------- */
@media (max-width:820px){
  html,body{overflow-x:hidden;}
  body .stage, body #stage{display:none !important;}
  /* Policy template uses a flat (non-canvas) layout with these direct body
     children — hide them so only the mobile #ss-m layout shows. */
  body > .bar, body > .hero, body > .wrap, body > .foot{display:none !important;}
  body .ss-page-loader{display:none !important;}
  #ss-m{display:block; background:var(--ss-cream); min-height:100vh; font-family:'Poppins',sans-serif; color:var(--ss-ink);}
}
@media (min-width:821px){ #ss-m{display:none !important;} }

/* ---- generic ---- */
#ss-m *{box-sizing:border-box;}
#ss-m .dela,#ss-m h1,#ss-m h2,#ss-m h3{font-family:'Dela Gothic One',sans-serif;font-weight:400;line-height:1.15;}
#ss-m img{max-width:100%;display:block;}
#ss-m a{color:inherit;text-decoration:none;}
#ss-m .ssm-wrap{padding:18px 16px;}
#ss-m .ssm-sec-title{font-family:'Dela Gothic One',sans-serif;font-size:22px;text-transform:uppercase;text-align:center;margin:6px 0 4px;}
#ss-m .ssm-sec-sub{text-align:center;font-size:13.5px;line-height:1.5;color:#4a4a4a;margin:0 auto 16px;max-width:520px;}
#ss-m .ssm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--ss-red);color:#fff;font-family:'Dela Gothic One',sans-serif;font-size:14px;
  border:2px solid #000;border-radius:14px;padding:13px 20px;cursor:pointer;box-shadow:var(--ss-shadow);width:100%;}
#ss-m .ssm-btn:active{transform:translateY(1px);box-shadow:none;}
#ss-m .ssm-btn.cyan{background:var(--ss-cyan);color:#000;}
#ss-m .ssm-btn.ghost{background:#fff;color:#000;}
#ss-m .ssm-stars{color:var(--ss-orange);letter-spacing:2px;font-size:15px;}

/* ---- announcement marquee ---- */
#ss-m .ssm-announce{background:var(--ss-red);color:#fff;overflow:hidden;white-space:nowrap;font-size:12px;font-weight:600;height:34px;display:flex;align-items:center;}
#ss-m .ssm-announce .track{display:inline-block;padding-left:100%;animation:ssm-marq 18s linear infinite;}
#ss-m .ssm-announce span{padding:0 22px;}
@keyframes ssm-marq{to{transform:translateX(-100%);}}

/* ---- header ---- */
#ss-m .ssm-header{position:sticky;top:0;z-index:40;background:#A9DFF0;
  display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:2px solid #000;}
#ss-m .ssm-iconbtn{width:38px;height:38px;flex:0 0 38px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,var(--ss-pink),var(--ss-peach));border:2px solid #000;border-radius:10px;cursor:pointer;position:relative;}
#ss-m .ssm-iconbtn:active{transform:translateY(1px);}
#ss-m .ssm-brand{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;gap:7px;margin:0;cursor:pointer;}
#ss-m .ssm-logo-mark{width:30px;height:30px;flex:0 0 30px;background:center/contain no-repeat;animation:ssm-spin 9s linear infinite;}
@keyframes ssm-spin{to{transform:rotate(360deg);}}
#ss-m .ssm-wordmark{font-family:'Dela Gothic One',sans-serif;font-size:13px;letter-spacing:0;color:#1f2d5a;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
#ss-m .ssm-badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 4px;background:var(--ss-red);color:#fff;
  border:1.5px solid #000;border-radius:9px;font-size:11px;font-weight:700;display:none;align-items:center;justify-content:center;}
#ss-m .ssm-header .grp{display:flex;gap:6px;flex:0 0 auto;}
/* Very narrow phones: shrink the wordmark a touch more so nothing clips. */
@media (max-width:360px){
  #ss-m .ssm-wordmark{font-size:12px;}
  #ss-m .ssm-iconbtn{width:36px;height:36px;flex:0 0 36px;}
  #ss-m .ssm-logo-mark{width:26px;height:26px;flex:0 0 26px;}
}

/* ---- nav drawer ---- */
#ss-m-nav{position:fixed;inset:0;z-index:60;display:none;}
#ss-m-nav.open{display:block;}
#ss-m-nav .ov{position:absolute;inset:0;background:rgba(0,0,0,.45);}
#ss-m-nav .ssm-panel{position:absolute;top:0;left:0;bottom:0;width:80%;max-width:320px;background:var(--ss-cream);
  border-right:2px solid #000;padding:20px 18px;transform:translateX(-100%);transition:transform .28s ease;overflow-y:auto;display:block;}
#ss-m-nav.open .ssm-panel{transform:none;}
#ss-m-nav a{display:block;padding:14px 12px;font-weight:600;border-bottom:1px solid #eadfce;border-radius:8px;}
#ss-m-nav a:active{background:#FCE0D2;}
#ss-m-nav .cnt{background:var(--ss-red);color:#fff;border-radius:9px;font-size:11px;padding:1px 7px;margin-left:6px;}
#ss-m-nav .close{float:right;font-size:26px;line-height:1;cursor:pointer;border:none;background:none;}

/* ---- search overlay ---- */
#ss-m-search{position:fixed;inset:0;z-index:70;display:none;background:rgba(0,0,0,.5);}
#ss-m-search.open{display:block;}
#ss-m-search .box{background:#fff;border-bottom:2px solid #000;padding:14px;}
#ss-m-search input{width:100%;border:2px solid #000;border-radius:12px;padding:12px 14px;font-size:16px;font-family:inherit;}
#ss-m-search .res{background:var(--ss-cream);max-height:60vh;overflow-y:auto;}
#ss-m-search .res a{display:flex;gap:12px;align-items:center;padding:12px 14px;border-bottom:1px solid #eadfce;}
#ss-m-search .res img{width:44px;height:44px;object-fit:contain;background:#fff;border-radius:8px;}

/* ---- hero ---- */
#ss-m .ssm-hero{background:linear-gradient(180deg,#BFE9F7 0%,#FCE0D2 100%);padding:26px 16px 22px;border-bottom:2px solid #000;}
#ss-m .ssm-hero h1{font-size:30px;text-transform:uppercase;color:#12305e;}
#ss-m .ssm-hero .lead{font-size:14px;line-height:1.55;margin:12px 0 18px;color:#26374d;}
#ss-m .ssm-hero .heroimg{margin-top:18px;border:2px solid #000;border-radius:16px;overflow:hidden;background:#fff;}
/* Cap the tall product shot to a banner height so it doesn't dominate the fold. */
#ss-m .ssm-hero .heroimg img{width:100%;height:230px;object-fit:cover;object-position:center 42%;display:block;}

/* ---- trust badges ---- */
#ss-m .ssm-trust{display:grid;grid-template-columns:1fr;gap:12px;padding:18px 16px;}
#ss-m .ssm-trust .t{display:flex;gap:14px;align-items:center;background:#fff;border:2px solid #000;border-radius:16px;padding:14px;box-shadow:var(--ss-shadow);}
#ss-m .ssm-trust .ic{width:54px;height:54px;flex:0 0 54px;display:flex;align-items:center;justify-content:center;
  background:#FFF6ED;border:2px solid #000;border-radius:14px;box-shadow:1px 3px 0 0 #000;}
#ss-m .ssm-trust .ic svg{display:block;}
#ss-m .ssm-trust .t b{display:block;font-family:'Dela Gothic One',sans-serif;font-size:13px;text-transform:uppercase;}
#ss-m .ssm-trust .t span{font-size:13px;color:#555;}

/* ---- category cards (mirrors the desktop bento: coloured card, image tile,
       outlined title, blurb, Shop All Products button) ---- */
#ss-m .ssm-cats{display:flex;flex-direction:column;gap:16px;}
#ss-m .ssm-cat{border:2px solid #000;border-radius:22px;padding:14px;box-shadow:var(--ss-shadow-lg);
  cursor:pointer;display:flex;gap:14px;align-items:center;}
#ss-m .ssm-cat:active{transform:translateY(1px);box-shadow:var(--ss-shadow);}
#ss-m .ssm-cat .cim{flex:0 0 38%;aspect-ratio:1/1;border:2px solid #000;border-radius:16px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;}
#ss-m .ssm-cat .cim .im{width:86%;height:86%;background:center/contain no-repeat;}
#ss-m .ssm-cat .cbd{flex:1;min-width:0;}
#ss-m .ssm-cat .ct{font-family:'Dela Gothic One',sans-serif;font-size:17px;line-height:1.15;text-transform:uppercase;
  color:#fff;-webkit-text-stroke:1.2px #000;paint-order:stroke fill;text-shadow:0 2px 0 #000;margin-bottom:8px;}
#ss-m .ssm-cat .cd{font-size:12.5px;line-height:1.4;color:#1a1a1a;margin-bottom:12px;}
#ss-m .ssm-catbtn{display:inline-block;font-family:'Dela Gothic One',sans-serif;font-size:12px;
  border:2px solid #000;border-radius:12px;padding:9px 16px;box-shadow:var(--ss-shadow);cursor:pointer;}

/* ---- product cards / grid ---- */
#ss-m .ssm-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
#ss-m .ssm-card{background:#fff;border:2px solid #000;border-radius:18px;padding:10px;box-shadow:var(--ss-shadow-lg);display:flex;flex-direction:column;}
/* Product/gallery SVGs already carry a baked-in border, so image containers get
   NO CSS border (avoids the double-border seen in the cards). */
#ss-m .ssm-card .im{aspect-ratio:1/1;background:#fff center/contain no-repeat;border-radius:12px;margin-bottom:8px;cursor:pointer;}
#ss-m .ssm-card .nm{font-family:'Dela Gothic One',sans-serif;font-size:12px;line-height:1.25;text-transform:uppercase;min-height:30px;cursor:pointer;}
#ss-m .ssm-card .pr{color:var(--ss-red);font-family:'Dela Gothic One',sans-serif;font-size:15px;margin:6px 0 8px;}
#ss-m .ssm-card .ssm-btn{padding:10px;font-size:12px;margin-top:auto;}

/* horizontal scroller for top-rated */
#ss-m .ssm-hscroll{display:flex;gap:14px;overflow-x:auto;padding:4px 16px 16px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;}
#ss-m .ssm-hscroll .ssm-card{flex:0 0 62%;max-width:230px;scroll-snap-align:start;}

/* ---- featured ---- */
/* Blue grid-pattern band behind the featured carousel — mirrors desktop. */
#ss-m .ssm-featured-sec{border-top:2px solid #000;border-bottom:2px solid #000;padding-bottom:6px;
  background:repeating-linear-gradient(0deg,rgba(0,70,120,.06) 0 1px,transparent 1px 40px),
             repeating-linear-gradient(90deg,rgba(0,70,120,.06) 0 1px,transparent 1px 40px),#A9DFF0;}
#ss-m .ssm-feat{background:#fff;border:2px solid #000;border-radius:18px;overflow:hidden;box-shadow:var(--ss-shadow-lg);}
/* Carousel prev/next arrows (blue box, red arrow) — desktop-matched. */
#ss-m .ssm-feat-nav{display:flex;gap:14px;justify-content:center;margin-top:18px;}
#ss-m .ssm-feat-arrow{width:66px;height:48px;background:#A9DFF0;border:2px solid #000;border-width:1px 3px 3px 1px;
  border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;}
#ss-m .ssm-feat-arrow:active{transform:translateY(1px);box-shadow:none;}
#ss-m .ssm-feat .im{aspect-ratio:16/11;background:#fff center/contain no-repeat;background-origin:content-box;
  padding:18px 12px;border-bottom:2px solid #000;}
#ss-m .ssm-feat .bd{padding:16px;}
#ss-m .ssm-feat h3{font-size:17px;text-transform:uppercase;line-height:1.25;margin-bottom:14px;}
#ss-m .ssm-feat ul{list-style:none;padding:0;margin:0 0 16px;}
#ss-m .ssm-feat li{position:relative;padding-left:30px;font-size:14px;line-height:1.4;margin-bottom:10px;}
/* Desktop-matched orange check badge (#F89A41 circle, white tick). */
#ss-m .ssm-feat li:before{content:"";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;
  background:#F89A41 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12l5 5L20 6'/></svg>") center/12px 12px no-repeat;}
/* Desktop-matched orange "More Details" button (was red). */
#ss-m .ssm-feat .feat-more{background:#FFAC5E;color:#000;width:auto;}

/* ---- testimonials ---- */
#ss-m .ssm-quotes{display:flex;gap:14px;overflow-x:auto;padding:4px 16px 16px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;}
#ss-m .ssm-quote{flex:0 0 82%;max-width:340px;scroll-snap-align:start;background:#fff;border:2px solid #000;border-radius:18px;padding:18px;box-shadow:var(--ss-shadow-lg);position:relative;}
#ss-m .ssm-quote .mk{position:absolute;top:8px;right:16px;font-family:'Dela Gothic One',sans-serif;font-size:44px;color:var(--ss-red);line-height:1;}
#ss-m .ssm-quote p{font-size:14px;line-height:1.55;margin:10px 0 14px;}
#ss-m .ssm-quote .who{font-family:'Dela Gothic One',sans-serif;font-size:13px;text-transform:uppercase;}
#ss-m .ssm-quote .role{font-size:12px;color:#777;}

/* ---- cleaning tips / blog ---- */
#ss-m .ssm-blogs{display:flex;flex-direction:column;gap:16px;}
#ss-m .ssm-blog{background:#fff;border:2px solid #000;border-radius:18px;overflow:hidden;box-shadow:var(--ss-shadow-lg);}
#ss-m .ssm-blog .im{aspect-ratio:16/9;background:#fff center/cover no-repeat;border-bottom:2px solid #000;}
#ss-m .ssm-blog .bd{padding:16px;}
#ss-m .ssm-blog h3{font-size:15px;text-transform:uppercase;line-height:1.3;margin:0 0 12px;}
#ss-m .ssm-blog .ssm-btn{background:var(--ss-orange);color:#000;width:auto;padding:10px 20px;}

/* ---- single product ---- */
#ss-m .ssm-pdp .main{aspect-ratio:1/1;background:#fff center/contain no-repeat;border-radius:18px;}
#ss-m .ssm-pdp .thumbs{display:flex;gap:10px;margin-top:12px;}
#ss-m .ssm-pdp .thumbs .t{width:64px;height:64px;background:#fff center/contain no-repeat;border-radius:10px;cursor:pointer;opacity:.7;}
#ss-m .ssm-pdp .thumbs .t.sel{opacity:1;box-shadow:var(--ss-shadow);}
#ss-m .ssm-pdp h1{font-size:24px;text-transform:uppercase;margin:16px 0 8px;}
#ss-m .ssm-pdp .price{color:var(--ss-red);font-family:'Dela Gothic One',sans-serif;font-size:24px;margin:10px 0;}
#ss-m .ssm-lbl{font-family:'Dela Gothic One',sans-serif;font-size:13px;text-transform:uppercase;margin:14px 0 8px;}
#ss-m .ssm-sizes{display:flex;gap:8px;flex-wrap:wrap;}
#ss-m .ssm-size{border:2px solid #000;border-radius:10px;padding:8px 14px;font-size:13px;cursor:pointer;background:#fff;}
#ss-m .ssm-size.sel{background:var(--ss-cyan);}
#ss-m .ssm-qty{display:inline-flex;align-items:center;border:2px solid #000;border-radius:10px;overflow:hidden;}
#ss-m .ssm-qty button{width:44px;height:44px;font-size:20px;background:var(--ss-cyan);border:none;cursor:pointer;}
#ss-m .ssm-qty input{width:52px;height:44px;text-align:center;border:none;border-left:2px solid #000;border-right:2px solid #000;font-size:16px;font-family:inherit;}
#ss-m .ssm-tabbtns{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0 12px;}
#ss-m .ssm-tabbtn{border:2px solid #000;border-radius:12px;background:#fff;padding:9px 14px;font-family:'Dela Gothic One',sans-serif;font-size:11px;text-transform:uppercase;cursor:pointer;}
#ss-m .ssm-tabbtn.sel{background:var(--ss-cyan);}
#ss-m .ssm-tabbody{font-size:14px;line-height:1.6;}
#ss-m .ssm-tabbody p{margin:0 0 10px;}

/* ---- reviews ---- */
#ss-m .ssm-review{background:#fff;border:2px solid #000;border-radius:14px;padding:14px;margin-bottom:12px;box-shadow:var(--ss-shadow);}
#ss-m .ssm-review b{font-size:14px;}
#ss-m .ssm-review p{font-size:13.5px;line-height:1.5;margin:6px 0 0;color:#444;}

/* ---- cart / checkout rows ---- */
#ss-m .ssm-line{display:flex;gap:12px;background:#fff;border:2px solid #000;border-radius:14px;padding:12px;margin-bottom:12px;box-shadow:var(--ss-shadow);}
#ss-m .ssm-line .im{width:74px;height:74px;flex:0 0 74px;background:#fff center/contain no-repeat;border-radius:10px;}
#ss-m .ssm-line .nm{font-family:'Dela Gothic One',sans-serif;font-size:12.5px;text-transform:uppercase;line-height:1.25;}
#ss-m .ssm-line .sz{font-size:12px;color:#777;margin-top:2px;}
#ss-m .ssm-line .pr{color:var(--ss-red);font-weight:700;margin-top:4px;}
#ss-m .ssm-line .rm{border:none;background:none;color:#b32d2e;font-size:12px;text-decoration:underline;cursor:pointer;padding:0;margin-top:6px;}
#ss-m .ssm-summary{background:#fff;border:2px solid #000;border-radius:16px;padding:16px;box-shadow:var(--ss-shadow-lg);}
#ss-m .ssm-summary .r{display:flex;justify-content:space-between;font-size:14px;margin-bottom:10px;}
#ss-m .ssm-summary .r.tot{font-family:'Dela Gothic One',sans-serif;font-size:17px;border-top:2px dashed #000;padding-top:12px;margin-top:4px;}
#ss-m .ssm-field{margin-bottom:14px;}
#ss-m .ssm-field label{display:block;font-weight:600;font-size:13px;margin-bottom:6px;}
#ss-m .ssm-field input,#ss-m .ssm-field select,#ss-m .ssm-field textarea{width:100%;border:2px solid #000;border-radius:10px;padding:12px;font-size:16px;font-family:inherit;background:#fff;}
#ss-m .ssm-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
#ss-m .ssm-promo{display:flex;gap:8px;}
#ss-m .ssm-promo input{flex:1;}
#ss-m .ssm-promo .ssm-btn{width:auto;padding:12px 16px;}
#ss-m .ssm-radio{display:flex;gap:10px;align-items:flex-start;border:2px solid #000;border-radius:12px;padding:12px;margin-bottom:10px;background:#fff;cursor:pointer;}
#ss-m .ssm-radio.sel{background:var(--ss-cyan);}
#ss-m .ssm-empty{text-align:center;padding:40px 16px;font-size:15px;}

/* ---- account / auth ---- */
#ss-m .ssm-authtabs{display:flex;border:2px solid #000;border-radius:12px;overflow:hidden;margin-bottom:18px;}
#ss-m .ssm-authtabs button{flex:1;padding:12px;background:#fff;border:none;font-family:'Dela Gothic One',sans-serif;font-size:13px;cursor:pointer;}
#ss-m .ssm-authtabs button.sel{background:var(--ss-red);color:#fff;}
#ss-m .ssm-order{background:#fff;border:2px solid #000;border-radius:14px;padding:14px;margin-bottom:12px;box-shadow:var(--ss-shadow);}
#ss-m .ssm-order .top{display:flex;justify-content:space-between;font-family:'Dela Gothic One',sans-serif;font-size:13px;}
#ss-m .ssm-chip{display:inline-block;background:var(--ss-cyan);border:1.5px solid #000;border-radius:20px;font-size:11px;padding:2px 10px;}

/* ---- footer ---- */
#ss-m .ssm-footer{background:linear-gradient(180deg,var(--ss-pink),var(--ss-peach));border-top:2px solid #000;padding:26px 18px;margin-top:20px;}
#ss-m .ssm-footer h4{font-family:'Dela Gothic One',sans-serif;font-size:13px;text-transform:uppercase;margin:0 0 10px;}
#ss-m .ssm-footcol{margin-bottom:20px;}
#ss-m .ssm-footcol a{display:block;font-size:13.5px;padding:5px 0;}
/* Social icons — cream tiles with black offset border, matching desktop. */
#ss-m .ssm-social{display:flex;gap:12px;}
#ss-m .ssm-soc{width:44px;height:44px;padding:0;display:flex;align-items:center;justify-content:center;
  background:#FEEBD9;border:2px solid #000;border-width:1px 4px 4px 1px;border-radius:12px;}
#ss-m .ssm-soc:active{transform:translateY(1px);}
#ss-m .ssm-footer .cr{text-align:center;font-size:12px;border-top:1px solid rgba(0,0,0,.2);padding-top:14px;margin-top:6px;}

/* ---- toast ---- */
#ss-m-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);z-index:90;background:#111;color:#fff;
  padding:12px 20px;border-radius:12px;font-size:14px;opacity:0;transition:.25s;pointer-events:none;}
#ss-m-toast.show{opacity:1;transform:translate(-50%,0);}