/* Solris — shared non-critical styles.
   Loaded async on every page. Components, footer, WooCommerce base. */

/* ---------- shared primitives ---------- */
.ratio-box{position:relative;aspect-ratio:var(--ratio,1);overflow:hidden;
  border-radius:var(--r-lg);background:var(--surface-2)}
.ratio-box>img,.ratio-box>picture,.ratio-box>picture>img{
  width:100%;height:100%;object-fit:cover;border-radius:inherit}
picture.ratio-box{display:block}

.section__head{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--sp-4);margin-block-end:var(--sp-8);flex-wrap:wrap}
.section__more{display:inline-flex;align-items:center;gap:var(--sp-2);
  font-weight:var(--fw-semibold);font-size:var(--fs-0);color:var(--ink-2);text-decoration:none}
.section__more:hover{color:var(--ink)}
.section__more svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}

/* ---------- badges & chips ---------- */
.badge{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:var(--r-sm);
  font-size:var(--fs--2);font-weight:var(--fw-semibold);text-transform:uppercase;
  letter-spacing:var(--ls-caps);white-space:nowrap}
.badge--sale{background:var(--orange-600);color:#fff}
.badge--new{background:var(--navy-800);color:#fff}
.badge--bundle{background:var(--amber-400);color:var(--navy-800)}
.badge--warn{background:var(--warning-bg);color:var(--warning)}

/* ---------- stars ---------- */
.stars{display:inline-flex;gap:1px;vertical-align:middle}
.star{flex:0 0 auto}
.star.is-full{fill:var(--star);stroke:none}
.star.is-empty{fill:var(--star-empty);stroke:none}
.star.is-half{fill:var(--star);stroke:none;clip-path:inset(0 50% 0 0)}

/* ---------- product grid ---------- */
/* Two selectors, one grid: `.product-grid` is ours (homepage, related rails)
   and `ul.products` is the list WooCommerce prints on shop and archive pages.
   Woo's markup cannot be wrapped in a grid — the wrapper would have a single
   <ul> child — so the <ul> has to BE the grid. */
.product-grid,
.woocommerce ul.products,
ul.products{display:grid;gap:var(--sp-3);grid-template-columns:repeat(2,minmax(0,1fr));
  list-style:none;margin:0;padding:0}
ul.products>li.product{margin:0;width:auto;float:none;display:flex}
ul.products>li.product>.product-card{width:100%}
@media (min-width:768px){
  .product-grid,.woocommerce ul.products,ul.products{gap:var(--sp-6);grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1024px){
  .product-grid,.woocommerce ul.products,ul.products{grid-template-columns:repeat(4,minmax(0,1fr))}
}

.product-card{display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;
  transition:box-shadow .15s ease,transform .15s ease}
@media (hover:hover){ .product-card:hover{box-shadow:var(--sh-2);transform:translateY(-2px)} }
.product-card__media{border-radius:0;position:relative}
.product-card__media .badge{position:absolute;top:var(--sp-3);left:var(--sp-3);z-index:1}
.product-card__body{display:flex;flex-direction:column;gap:var(--sp-2);
  padding:var(--sp-4);flex:1}
.product-card__title{font-size:var(--fs-0);font-weight:var(--fw-semibold);line-height:var(--lh-snug)}
.product-card__title a{text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.product-card__title a::after{content:"";position:absolute;inset:0}
.product-card{position:relative}
.product-card__rating{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs--1);color:var(--ink-3)}
.product-card__price{font-size:var(--fs-1);font-weight:var(--fw-bold);color:var(--price);
  font-variant-numeric:tabular-nums}
.product-card__price del{font-size:var(--fs--1);font-weight:var(--fw-regular);
  color:var(--ink-3);margin-inline-end:var(--sp-2)}
.product-card__price ins{text-decoration:none;color:var(--price-sale)}
.product-card__unit{font-size:var(--fs--1);color:var(--ink-2)}
.product-card .btn{margin-block-start:auto;position:relative;z-index:1}

/* ---------- category tiles ---------- */
.cat-grid{display:grid;gap:var(--sp-3);grid-template-columns:repeat(2,minmax(0,1fr));
  list-style:none;margin:0;padding:0}
@media (min-width:768px){ .cat-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)} }
@media (min-width:1024px){ .cat-grid{grid-template-columns:repeat(6,minmax(0,1fr))} }
.cat-tile a{position:relative;display:block;text-decoration:none;border-radius:var(--r-lg);overflow:hidden}
.cat-tile img{transition:transform .3s ease}
@media (hover:hover){ .cat-tile a:hover img{transform:scale(1.04)} }
.cat-tile__label{position:absolute;inset-inline:0;bottom:0;padding:var(--sp-6) var(--sp-3) var(--sp-3);
  color:#fff;font-weight:var(--fw-semibold);font-size:var(--fs-0);line-height:var(--lh-snug);
  background:linear-gradient(to top,rgb(14 35 64/.85),transparent)}

/* ---------- how it works ---------- */
/* ---------- how it works ---------- */
/* Three steps in ONE row at every width. Below the breakpoint the row turns
   into a scroll-snap rail instead of stacking: three full-width cards on a
   phone is a screen and a half of scrolling for three sentences, and it
   destroys the only thing the section has to say — that there are just three
   steps and none of them is "hire an electrician". A rail keeps the second
   card peeking at the edge, which is what tells you to swipe. */
.how{background:var(--surface-2);overflow:hidden}
.how__title{text-align:center;margin-block-end:var(--sp-2)}
.how__lede{text-align:center;color:var(--ink-2);margin:0 auto var(--sp-8);max-width:42ch}

.how__steps{display:grid;list-style:none;margin:0;padding:0;
  grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);gap:var(--sp-4);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  scrollbar-width:none;
  /* Bleed to the viewport edge so a card can sit half-off-screen and read as
     scrollable, then pad the ends back so the first and last still align to
     the container. */
  margin-inline:calc(var(--gutter,16px) * -1);
  padding-inline:var(--gutter,16px);
  /* overflow-x:auto also clips vertically, and the step number hangs above
     the card. Pad the scroller by more than the badge overhang, then pull the
     box back so the section spacing is unchanged. */
  padding-block:20px var(--sp-2);margin-block-start:-20px}
.how__steps::-webkit-scrollbar{display:none}

.how__step{scroll-snap-align:center;position:relative;text-align:center;
  display:flex;flex-direction:column;align-items:center;
  padding:var(--sp-8) var(--sp-5) var(--sp-6);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg)}

/* The step number is the sequence cue; the icon is decoration. */
.how__num{position:absolute;inset-block-start:calc(var(--sp-4) * -1 + 4px);
  display:grid;place-items:center;width:32px;height:32px;border-radius:999px;
  background:var(--navy-800);color:#fff;font-size:var(--fs--1);
  font-weight:var(--fw-bold);font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 4px var(--surface-2)}

@media (min-width:768px){
  .how__steps{grid-auto-columns:minmax(0,1fr);gap:var(--sp-6);
    overflow:visible;scroll-snap-type:none;margin-inline:0;padding-inline:0}
}

/* The step number must clear the card edge without being clipped. */
.how__num{margin-block-start:0}

.how__icon{display:inline-grid;place-items:center;width:56px;height:56px;margin-block-end:var(--sp-4);
  border-radius:var(--r-pill);background:var(--navy-800)}
.how__icon svg{stroke:var(--amber-400);fill:none;stroke-width:1.75}
.how__steps h3{font-size:var(--fs-1);margin-block-end:var(--sp-2)}
.how__steps p{color:var(--ink-2);font-size:var(--fs--1);line-height:1.6;
  max-width:34ch;margin-inline:auto}

/* ---------- bundles band ---------- */
.bundles{background:var(--navy-800);color:#fff;padding-block:var(--sp-section)}
.bundles__head{text-align:center;margin-block-end:var(--sp-10)}
.bundles__head h2{color:#fff}
.bundles__head p{color:var(--navy-200);margin-block-start:var(--sp-2)}
.bundles__grid{display:grid;gap:var(--sp-4);list-style:none;margin:0;padding:0}
@media (min-width:768px){ .bundles__grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} }
.bundle-tile{position:relative;padding:var(--sp-6);border-radius:var(--r-lg);
  border:1.5px solid rgb(255 255 255/.18);text-align:center;display:flex;flex-direction:column;gap:var(--sp-2)}
.bundle-tile.is-popular{border-color:var(--amber-400);background:rgb(245 166 35/.10)}
.bundle-tile__ribbon{position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:var(--amber-400);color:var(--navy-800);font-size:var(--fs--2);font-weight:var(--fw-bold);
  text-transform:uppercase;letter-spacing:var(--ls-caps);padding:3px 10px;border-radius:var(--r-sm);white-space:nowrap}
.bundle-tile__name{font-weight:var(--fw-semibold);font-size:var(--fs-1)}
.bundle-tile__price{font-size:var(--fs-2);font-weight:var(--fw-bold);font-variant-numeric:tabular-nums}
.bundle-tile__price .woocommerce-Price-amount{color:#fff}
.bundle-tile__unit{font-size:var(--fs--1);color:var(--navy-200)}
.bundle-tile__save{font-size:var(--fs--1);font-weight:var(--fw-semibold);color:var(--amber-400)}
.bundle-tile .btn{margin-block-start:var(--sp-4)}

/* ---------- newsletter ---------- */
.newsletter{background:var(--amber-50);padding-block:var(--sp-section)}
:root[data-theme="dark"] .newsletter{background:var(--surface-2)}
.newsletter__inner{display:grid;gap:var(--sp-6);align-items:center}
@media (min-width:900px){ .newsletter__inner{grid-template-columns:1fr auto} }
.newsletter h2{color:var(--navy-800)}
.newsletter p{color:var(--ink-2);margin-block-start:var(--sp-2)}
.newsletter__form{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.newsletter__form input{flex:1 1 240px;min-height:48px;padding:0 var(--sp-4);
  border:1.5px solid var(--border-strong);border-radius:var(--r-md);background:var(--surface)}
.newsletter__form input:focus-visible{border-color:var(--navy-800);box-shadow:var(--sh-focus);outline:none}

/* ---------- blog cards ---------- */
.post-grid{display:grid;gap:var(--sp-6)}
@media (min-width:768px){ .post-grid{grid-template-columns:repeat(3,1fr)} }
.post-card__link{text-decoration:none;display:block}
.post-card__title{font-size:var(--fs-1);margin-block-start:var(--sp-3);line-height:var(--lh-snug)}
.post-card__meta{font-size:var(--fs--1);color:var(--ink-3);margin-block-start:var(--sp-2)}

/* ---------- breadcrumb ---------- */
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:var(--sp-2);list-style:none;margin:0;padding:0;
  font-size:var(--fs--1);color:var(--ink-2)}
.breadcrumb li+li::before{content:"›";margin-inline-end:var(--sp-2);color:var(--ink-3)}
.breadcrumb a{text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb [aria-current]{color:var(--ink);font-weight:var(--fw-medium)}

/* ---------- forms ---------- */
input[type=text],input[type=email],input[type=tel],input[type=password],
input[type=number],input[type=search],input[type=url],select,textarea{
  width:100%;min-height:48px;padding:0 14px;font-size:var(--fs-0);
  border:1.5px solid var(--border-strong);border-radius:var(--r-md);
  background:var(--surface);color:var(--ink)}
textarea{min-height:120px;padding-block:var(--sp-3);resize:vertical}
input:hover,select:hover,textarea:hover{border-color:var(--navy-500)}
input:focus-visible,select:focus-visible,textarea:focus-visible{
  border-color:var(--navy-800);box-shadow:var(--sh-focus);outline:none}
select{appearance:none;padding-inline-end:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E2340' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:18px}
label{display:block;font-size:var(--fs--1);font-weight:var(--fw-medium);
  color:var(--ink-2);margin-block-end:6px}

/* ---------- notices ---------- */
.woocommerce-message,.woocommerce-info,.woocommerce-error,.wc-block-components-notice-banner{
  display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-4);
  border-radius:var(--r-md);border:1px solid;font-size:var(--fs--1);list-style:none;
  margin-block:var(--sp-4)}
.woocommerce-message{background:var(--success-bg);border-color:var(--success);color:var(--success)}
.woocommerce-info{background:var(--surface-2);border-color:var(--border);color:var(--ink-2)}
.woocommerce-error{background:var(--danger-bg);border-color:var(--danger);color:var(--danger)}

/* ---------- trust row ---------- */
.trust-row{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3);
  list-style:none;margin:var(--sp-6) 0 0;padding:0}
.trust-row li{display:flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs--1);color:var(--ink-2)}
.trust-row svg{flex:0 0 auto;stroke:var(--accent2);fill:none;stroke-width:1.75}

/* ---------- coupon strip ---------- */
.coupon{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
  padding:var(--sp-3) var(--sp-4);border:1.5px dashed var(--amber-400);
  background:var(--amber-50);border-radius:var(--r-md);margin-block:var(--sp-4)}
.coupon svg{flex:0 0 auto;stroke:var(--accent2);fill:none;stroke-width:1.75}
.coupon__text{font-size:var(--fs--1);color:var(--navy-800);margin:0}
.coupon__code{background:var(--surface);border:1px solid var(--border-strong);
  padding:2px 8px;border-radius:var(--r-sm);font-family:inherit;
  font-weight:var(--fw-bold);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.coupon__copy{margin-inline-start:auto}
.coupon.is-applied{border-style:solid;border-color:var(--success);background:var(--success-bg)}
.coupon.is-applied svg{stroke:var(--success)}
.coupon.is-applied .coupon__text{color:var(--success)}
/* The strip is amber-on-cream in light mode; in dark mode that cream panel
   would glare, so it becomes a tinted navy panel and the ink flips with it.
   The code chip needs its own treatment or it ends up navy-on-navy. */
:root[data-theme="dark"] .coupon{background:rgb(245 166 35/.10)}
:root[data-theme="dark"] .coupon__text{color:var(--ink)}
:root[data-theme="dark"] .coupon__code{background:var(--navy-700);color:var(--amber-400);border-color:var(--navy-500)}
/* ---------- sticky add to cart ---------- */
.sticky-atc{position:fixed;inset-inline:0;bottom:0;z-index:var(--z-sticky);
  background:var(--surface);box-shadow:var(--sh-3);
  padding:var(--sp-3) var(--gutter) calc(var(--sp-3) + env(safe-area-inset-bottom))}
@media (min-width:1024px){ .sticky-atc{display:none} }
.sticky-atc__inner{display:flex;align-items:center;gap:var(--sp-3);
  max-width:var(--container);margin-inline:auto}
.sticky-atc__img{width:44px;height:44px;border-radius:var(--r-sm);object-fit:cover;flex:0 0 auto}
.sticky-atc__info{flex:1;min-width:0}
.sticky-atc__name{font-size:var(--fs--2);color:var(--ink-2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;margin:0}
.sticky-atc__price{font-size:var(--fs--1);font-weight:var(--fw-bold);margin:0;
  font-variant-numeric:tabular-nums}
.sticky-atc .btn{flex:0 0 auto}

/* ---------- footer ---------- */
.site-footer{background:var(--navy-800);color:var(--navy-100);
  padding-block:var(--sp-12) var(--sp-8);margin-block-start:var(--sp-section)}

/* Mobile: brand block, then one accordion per column.
   Desktop: brand plus the columns side by side, all open. */
.site-footer__top{display:grid;gap:var(--sp-2);padding-block-end:var(--sp-8);
  border-block-end:1px solid rgb(255 255 255/.12)}
.site-footer__brand{margin-block-end:var(--sp-6)}
@media (min-width:768px){
  .site-footer__top{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-8)}
  .site-footer__brand{grid-column:1 / -1;margin-block-end:var(--sp-2)}
}
@media (min-width:1024px){
  /* --footer-cols is set in footer.php from the real number of columns. */
  .site-footer__top{grid-template-columns:1.5fr repeat(var(--footer-cols,3),minmax(0,1fr));
    gap:var(--sp-6)}
  .site-footer__brand{grid-column:auto;margin:0}
}
@media (min-width:1280px){ .site-footer__top{gap:var(--sp-10)} }

/* Contact details, in the brand block. Compact enough to stay open on a
   phone, where "how do I reach you" is the question the footer is usually
   opened to answer. */
.site-footer__contact{margin-block-start:var(--sp-5)}
.site-footer__contact-title{font-size:var(--fs--1);font-weight:var(--fw-semibold);
  text-transform:uppercase;letter-spacing:var(--ls-caps);color:#fff;margin:0 0 var(--sp-2)}
.site-footer__contact p{color:var(--navy-200);font-size:var(--fs--1);line-height:1.6;margin:0}
.site-footer__contact .footer-contact{list-style:none;margin:var(--sp-2) 0;padding:0}
.site-footer__contact .footer-contact a{color:#fff;text-decoration:none;
  display:inline-block;padding-block:var(--sp-1);font-weight:var(--fw-semibold)}
.site-footer__contact .footer-contact a:hover{color:var(--amber-400)}
.site-footer__contact .footer-hours{color:var(--navy-300);font-size:var(--fs--2)}
.site-footer__contact .widget{margin:0}

.site-footer__logo{height:48px;width:auto}
.site-footer__tagline{color:var(--navy-200);margin-block-start:var(--sp-3);max-width:34ch}
.site-footer__place{display:flex;align-items:center;gap:var(--sp-2);
  color:var(--navy-200);font-size:var(--fs--1);margin-block-start:var(--sp-4)}
.site-footer__place svg{stroke:var(--amber-400);fill:none;stroke-width:1.75;flex:0 0 auto}

/* --- the accordion columns --- */
.footer-col{border-block-end:1px solid rgb(255 255 255/.12)}
.footer-col summary{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-3);padding:var(--sp-4) 0;min-height:52px;cursor:pointer;list-style:none;
  font-size:var(--fs-0);font-weight:var(--fw-semibold);color:#fff;
  text-transform:uppercase;letter-spacing:var(--ls-caps)}
.footer-col summary::-webkit-details-marker{display:none}
.footer-col summary::after{content:"";width:18px;height:18px;flex:0 0 auto;
  background:no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C5CFDD' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  transition:transform .2s ease}
.footer-col[open] summary::after{transform:rotate(180deg)}
.footer-col summary:focus-visible{outline:3px solid var(--amber-400);outline-offset:2px}
.footer-col__body{padding-block-end:var(--sp-4)}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col a{color:var(--navy-100);text-decoration:none;display:block;padding-block:var(--sp-2)}
.footer-col a:hover{color:var(--amber-400)}

@media (min-width:768px){
  /* Above the breakpoint the columns are always open and the summary stops
     being a control: no border, no chevron, no pointer. Same markup, two
     behaviours, no JavaScript deciding which. */
  .footer-col{border:0}
  .footer-col summary{pointer-events:none;min-height:0;padding:0 0 var(--sp-3);
    font-size:var(--fs--1);color:#fff}
  .footer-col summary::after{display:none}
  .footer-col__body{display:block;padding:0}
  /* Chrome 131+ hides a closed <details>'s contents through ::details-content
     with content-visibility, which `display` on the child cannot override —
     so a footer that looked right in older browsers showed four empty
     headings in current Chrome. Set both: the pseudo-element for browsers
     that have it, the child display for those that do not. */
  .footer-col::details-content{content-visibility:visible;block-size:auto;opacity:1}
}

.footer-widget__title{font-size:var(--fs-0);font-weight:var(--fw-semibold);
  text-transform:uppercase;letter-spacing:var(--ls-caps);color:#fff;margin-block-end:var(--sp-3)}
.footer-col__body p{color:var(--navy-200);font-size:var(--fs--1);line-height:1.6}
.footer-col__body a{display:inline}

.site-footer__bottom{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-4);flex-wrap:wrap;padding-block-start:var(--sp-6);
  font-size:var(--fs--1);color:var(--navy-200)}
.site-footer__copy{margin:0}
/* `background-color`, NOT the `background` shorthand: the shorthand resets
   background-repeat/position/size too, so the chevron set on the next line
   tiled across the whole control and printed itself over the label. */
.appearance select{min-height:40px;width:auto;background-color:transparent;color:var(--navy-100);
  border-color:rgb(255 255 255/.3);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E3E8F0' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}

/* ---------- woo scaffolding ---------- */
.woo-wrap{padding-block:var(--sp-8)}
.woocommerce-breadcrumb{font-size:var(--fs--1);color:var(--ink-2);margin-block-end:var(--sp-4)}
.woocommerce-breadcrumb a{text-decoration:none}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}
.woocommerce-pagination ul{display:flex;gap:var(--sp-2);list-style:none;
  margin:var(--sp-10) 0 0;padding:0;justify-content:center;flex-wrap:wrap}
.woocommerce-pagination a,.woocommerce-pagination span{display:grid;place-items:center;
  min-width:44px;min-height:44px;padding:0 var(--sp-3);border-radius:var(--r-md);
  border:1px solid var(--border);text-decoration:none;font-weight:var(--fw-medium)}
.woocommerce-pagination .current{background:var(--navy-800);color:#fff;border-color:var(--navy-800)}

/* ---------- cart drawer ---------- */
.drawer{border:0;padding:0;margin:0;margin-inline-start:auto;
  height:100dvh;max-height:100dvh;width:min(100vw,420px);max-width:none;
  background:var(--surface);color:var(--ink);box-shadow:var(--sh-3);overflow:hidden}
.drawer:not([open]){display:none}
.drawer[open]{display:flex;flex-direction:column}
.drawer::backdrop{background:var(--overlay)}
.drawer[open]{animation:drawerIn .24s cubic-bezier(.2,.7,.3,1)}
@keyframes drawerIn{from{transform:translateX(18px);opacity:.5}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){ .drawer[open]{animation:none} }

.drawer__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:var(--sp-4);padding-top:max(var(--sp-4),env(safe-area-inset-top));
  border-block-end:1px solid var(--border);flex:0 0 auto}
.drawer__title{font-size:var(--fs-2);display:flex;align-items:baseline;gap:var(--sp-2)}
.drawer__count{font-size:var(--fs--1);font-weight:var(--fw-medium);color:var(--ink-3)}

.drawer__ship{padding:var(--sp-3) var(--sp-4);background:var(--amber-50);
  border-block-end:1px solid var(--border);flex:0 0 auto}
.drawer__ship p{font-size:var(--fs--1);color:var(--navy-800);margin:0 0 6px}
.drawer__bar{height:6px;border-radius:var(--r-pill);background:var(--navy-100);overflow:hidden}
.drawer__bar span{display:block;height:100%;border-radius:inherit;background:var(--amber-400);
  width:0;transition:width .3s ease}

.drawer__body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:var(--sp-2) var(--sp-4)}
.drawer__items{list-style:none;margin:0;padding:0}
.drawer__item{display:grid;grid-template-columns:72px 1fr auto;gap:var(--sp-3);
  padding:var(--sp-4) 0;border-block-end:1px solid var(--border);align-items:start}
.drawer__item img{width:72px;height:72px;object-fit:cover;border-radius:var(--r-sm);
  background:var(--surface-2)}
.drawer__name{font-size:var(--fs--1);font-weight:var(--fw-semibold);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.drawer__name a{text-decoration:none}
.drawer__variant{font-size:var(--fs--2);color:var(--ink-3);margin-block-start:2px}
.drawer__unit{font-size:var(--fs--2);color:var(--ink-2);margin-block-start:2px}
.drawer__line{display:flex;align-items:center;gap:var(--sp-2);margin-block-start:var(--sp-2)}
.drawer__stepper{display:inline-flex;align-items:center;border:1px solid var(--border-strong);
  border-radius:var(--r-sm);overflow:hidden}
.drawer__stepper button{width:30px;height:30px;display:grid;place-items:center;
  color:var(--ink-2);line-height:1}
.drawer__stepper button:hover{background:var(--navy-50)}
.drawer__stepper span{min-width:28px;text-align:center;font-size:var(--fs--1);
  font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums}
.drawer__remove{font-size:var(--fs--2);color:var(--ink-3);text-decoration:underline}
.drawer__remove:hover{color:var(--danger)}
.drawer__price{font-size:var(--fs-0);font-weight:var(--fw-bold);
  font-variant-numeric:tabular-nums;text-align:end;white-space:nowrap}

.drawer__empty{display:grid;justify-items:center;gap:var(--sp-4);padding:var(--sp-16) var(--sp-4);
  text-align:center;color:var(--ink-2)}
.drawer__empty svg{stroke:var(--navy-300);fill:none;stroke-width:1.5}

.drawer__skeleton{list-style:none;margin:0;padding:var(--sp-4) 0;display:grid;gap:var(--sp-4)}
.drawer__skeleton li{height:72px;border-radius:var(--r-md);background:var(--skeleton);
  animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){ .drawer__skeleton li{animation:none} }

.drawer__foot{flex:0 0 auto;padding:var(--sp-4);
  padding-bottom:calc(var(--sp-4) + env(safe-area-inset-bottom));
  border-block-start:1px solid var(--border);display:grid;gap:var(--sp-3);
  box-shadow:0 -6px 18px rgb(var(--shadow-color)/.06)}
.drawer__subtotal{display:flex;align-items:baseline;justify-content:space-between;
  font-size:var(--fs-0);margin:0}
.drawer__subtotal strong{font-size:var(--fs-2);font-variant-numeric:tabular-nums}
.drawer__note{font-size:var(--fs--2);color:var(--ink-3);margin:0}
.drawer__viewcart{text-align:center;font-size:var(--fs--1);color:var(--ink-2)}

/* ---------- toast ---------- */
.toast{position:fixed;z-index:var(--z-toast);left:50%;transform:translateX(-50%);
  bottom:calc(var(--sp-6) + env(safe-area-inset-bottom));
  background:var(--navy-800);color:#fff;padding:var(--sp-3) var(--sp-5);
  border-radius:var(--r-pill);font-size:var(--fs--1);font-weight:var(--fw-medium);
  box-shadow:var(--sh-3);max-width:calc(100vw - var(--sp-8))}
.toast[hidden]{display:none}
@media (min-width:768px){ .toast{left:auto;right:var(--sp-6);transform:none} }

/* Buttons that are mid-request. */
.is-loading{position:relative;color:transparent!important;pointer-events:none}
.is-loading::after{content:"";position:absolute;inset:0;margin:auto;width:20px;height:20px;
  border:2px solid currentColor;border-top-color:transparent;border-radius:50%;
  color:var(--navy-800);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}


/* The Judge.me badge, once it is inside the card body. */
.product-card__rating--jdgm{min-height:18px}
.product-card__rating--jdgm .jdgm-prev-badge{display:flex!important;align-items:center;
  gap:4px;padding:0!important;margin:0!important}
.product-card__rating--jdgm .jdgm-prev-badge__stars{line-height:1}
.product-card__rating--jdgm .jdgm-star{font-size:13px!important;color:var(--star)!important;
  margin:0!important}
.product-card__rating--jdgm .jdgm-prev-badge__text{font-size:var(--fs--2);color:var(--ink-3)}
/* Nothing Judge.me prints may escape the card. */
ul.products>li.product>.jdgm-widget,
ul.products>li.product>.jdgm-preview-badge{display:none}