/**
 * Cheers theme styles.
 *
 * Brand colours arrive as --brand, --brand-dark, --navy, --ink and --tint from
 * the Customizer (see inc/enqueue.php). The fallbacks here only apply if a value
 * has been cleared, so the theme never renders unstyled.
 */

/* The designs are set in Segoe UI. Selawik is Microsoft's open-licence
   companion to it with the same metrics (OFL, assets/fonts/LICENSE.txt), so
   swapping it in over Segoe UI moves nothing. Where there is no Segoe UI, the
   fallback is Arial scaled to Selawik's width and line, so the swap does not
   reflow the page either. Latin only: Arabic is outside the range, never
   downloads it, and keeps the faces it always had. */
@font-face{font-family:"Selawik";src:url("../fonts/selawksl.woff2") format("woff2");font-weight:300;font-display:swap;unicode-range:U+0000-024F,U+2000-206F,U+20A0-20CF,U+2100-214F,U+2212}
@font-face{font-family:"Selawik";src:url("../fonts/selawk.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-024F,U+2000-206F,U+20A0-20CF,U+2100-214F,U+2212}
@font-face{font-family:"Selawik";src:url("../fonts/selawksb.woff2") format("woff2");font-weight:600;font-display:swap;unicode-range:U+0000-024F,U+2000-206F,U+20A0-20CF,U+2100-214F,U+2212}
@font-face{font-family:"Selawik";src:url("../fonts/selawkb.woff2") format("woff2");font-weight:700;font-display:swap;unicode-range:U+0000-024F,U+2000-206F,U+20A0-20CF,U+2100-214F,U+2212}
@font-face{font-family:"Selawik Fallback";src:local("Arial");size-adjust:104%;ascent-override:95.2%;descent-override:20.2%;line-gap-override:0%;unicode-range:U+0000-024F,U+2000-206F,U+20A0-20CF,U+2100-214F,U+2212}

:root{
  /* #E7184E measured 4.48 against white -- under the 4.5 small text needs by
     a rounding error, and the brand is a text colour on prices, headings and
     every chosen filter. One step darker clears it and is the same red. */
  --tap:36px;--tap-dense:28px;--brand:#E7184E; --brand-dark:#C2103F; --navy:#313E49; --ink:#22303C; --tint:#F4F6F8;
  --paper:#FFFFFF; --tint-2:#ECF0F4; --rule:#DDE4EA;
  /* --stone-soft was #8D97A2, which is 2.97 on white: below even the 3.0 a
     large heading needs, and it was carrying breadcrumbs, price-per-litre,
     filter counts and struck-through prices -- all small text. */
  --stone:#5F6B77; --stone-soft:#68727D;
  --ok:#1C6B45; --low:#8A5F14; --out:#9B2438;
  --maxw:1240px; --radius:6px;
  --f:"Selawik","Segoe UI","Selawik Fallback",system-ui,-apple-system,sans-serif;
  /* Her surfaces, sampled from the PNGs (preview/assets/kit.css). */
  --panel:#F0F1F2; --field:#D9DBDD; --card-line:#EEF1F4; --brand-soft:#FCE2E9;
  --ok-bg:#EEF7EF; --ok-line:#9FC2AF; --ink-2:#4B5660;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--paper)}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;color:var(--ink);text-wrap:balance}
p{margin:0 0 1em}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button,select,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.wrap--narrow{max-width:760px}
.spacer{flex:1}

.screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{position:absolute;inset-inline-start:-9999px;z-index:100}
.skip-link:focus{
  inset-inline-start:12px;top:12px;background:var(--paper);color:var(--ink);
  padding:10px 16px;border:2px solid var(--brand);border-radius:var(--radius);
}

/* Collecting from a branch. */
.cheers-collect{margin:0 0 18px;padding:14px;background:var(--tint);border:1px solid var(--rule);border-radius:var(--radius)}
.cheers-collect select{width:100%;max-width:100%;margin:6px 0}
.cheers-collect__notice{margin:6px 0 0;font-size:13px;color:var(--low);font-weight:600}

/* The out-of-stock question at checkout. */
.cheers-subs{margin:0 0 18px;padding:14px;background:var(--tint);border:1px solid var(--rule);border-radius:var(--radius)}
.cheers-subs__heading{margin:0 0 2px}
.cheers-subs__help{margin:0 0 10px;font-size:13px;color:var(--stone)}
.cheers-subs__choice{display:flex;gap:8px;align-items:flex-start;margin:0 0 6px;font-size:14px;cursor:pointer}
.cheers-subs__choice:last-child{margin-bottom:0}

/* ---------------------------------------------------------------- utility bar */
.util{background:var(--navy);color:#E6EBF0;font-size:12px}
.util .wrap{display:flex;gap:18px;align-items:center;padding-block:7px;flex-wrap:wrap}
.util b{color:#fff;font-weight:600}
.util__age{display:inline-flex;align-items:center;gap:7px}
.badge-age{
  display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;
  border:1px solid var(--brand);color:#fff;font-size:9px;font-weight:700;line-height:1;
}

/* -------------------------------------------------------------------- header */
.site-header{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--rule)}
.masthead{display:flex;align-items:center;gap:18px;padding-block:14px}
.masthead__logo img{height:56px;width:auto}
.brandmark__name{display:block;font-size:30px;font-weight:900;letter-spacing:-.025em;line-height:1;color:var(--navy)}
.brandmark__tag{display:block;font-size:8px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--stone-soft);margin-top:3px}

form.search{display:flex;align-items:center;gap:6px;flex:1;max-width:330px;
  background:var(--tint);border:1px solid var(--rule);border-radius:var(--radius);padding:0 4px 0 10px;min-height:var(--tap)}
form.search:focus-within{border-color:var(--navy);background:var(--paper)}
form.search input{flex:1;border:0;background:none;outline:none;font-size:14px;min-width:0}
/* The icon is an inline SVG on a text baseline, so it sat 1px below the top of
   the button and 6px above the bottom — high, and visibly so against a round
   field. Centred as a box instead of a letter. */
form.search button{border:0;background:none;cursor:pointer;color:var(--stone-soft);font-size:15px;
  /* 20x16 before: the only way to search on a phone, and smaller than a
     fingertip. The icon did not grow, the thing under it did. */
  min-width:var(--tap);min-height:var(--tap);
  padding:0;display:flex;align-items:center;justify-content:center;line-height:0}
/* The field itself has to be reachable too, not just the bar around it. */
form.search input{align-self:stretch}
/* Keyboard users lost the cursor here: every other control rings on focus and
   this one did not, because the input clears its own outline to sit flush in
   the bar. The ring goes back on the input and is pulled inside the bar, and it
   is :focus-visible like everything else rather than :focus-within, which would
   also ring for somebody who clicked. */
form.search input:focus-visible{outline:2px solid var(--brand);outline-offset:-3px;border-radius:var(--radius)}
form.search button:hover{color:var(--brand)}
.search--inline{max-width:420px;margin-inline:auto}

.masthead__actions{display:flex;align-items:center;gap:10px}
.hbtn{font-size:13.5px;font-weight:600;padding:8px 6px;white-space:nowrap}
.hbtn:hover{color:var(--brand)}
.hbtn--cart{background:var(--brand);color:#fff;border-radius:var(--radius);padding:9px 15px}
.hbtn--cart:hover{background:var(--brand-dark);color:#fff}
.cart-count{font-variant-numeric:tabular-nums}
.tel{font-size:18px;font-weight:700;color:var(--brand);letter-spacing:.02em;white-space:nowrap}

.mainnav__list{display:flex;gap:24px;margin:0;padding:11px 0;list-style:none;
  border-top:1px solid var(--tint-2);flex-wrap:wrap}
/* Set like the DELIVER TO label above it: uppercase and letter-spaced, a
   little larger. Note #203 asked for the menu to match that label; the label is
   11px, so matching it literally would have made the menu smaller rather than
   larger — the treatment is what carries across, not the number. */
.mainnav__list a{font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding-bottom:3px;border-bottom:2px solid transparent;display:inline-block}
.mainnav__list a:hover,.mainnav__list .current-menu-item > a{color:var(--brand);border-bottom-color:var(--brand)}
.mainnav__list .sub-menu{display:none}

/* ------------------------------------------------------------ delivery strip */
.deliver{background:var(--tint);border-bottom:1px solid var(--rule)}
.deliver .wrap{display:flex;align-items:center;gap:15px;padding-block:9px;flex-wrap:wrap;font-size:13px}
.deliver__label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}
.region-select{
  border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper);
  padding:6px 10px;font-size:13.5px;font-weight:700;cursor:pointer;
  /* The picker is a framed control; the delivery facts beside it are plain
     text. At the strip's shared 15px they read as one run of things. Twice
     that separates the control you use from the facts you read. */
  margin-inline-end:15px;
}
.deliver__fact{color:var(--stone);font-size:12.5px}
.deliver__fact b{color:var(--ink);font-weight:700}
.deliver__fees{display:inline-flex;align-items:center;gap:8px;padding-inline-start:14px;border-inline-start:1px solid var(--rule)}
.deliver__dot{color:var(--stone)}
.deliver__state{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--ok)}

/* Hold the space the location prompt will take.

   geo.js builds that prompt in the browser and posts it into this slot, and
   then rewrites its message as the geolocation call resolves — asking,
   locating, failed, outside. Each rewrite was a different height, so the strip
   grew and shrank and everything below it moved: a layout shift of 0.167 on a
   product page, three seconds in, which is exactly when somebody is reading the
   price. Reserving the height costs nothing when the prompt never appears,
   because the strip is taller than this anyway. */
.deliver__geo{display:inline-flex;align-items:center;min-height:32px}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

/* -------------------------------------------------------------------- slider */
.promo{padding-top:0}
.slider{position:relative;overflow:hidden;background:var(--tint-2)}
.slider__track{position:relative;aspect-ratio:var(--slide-ratio,1600/646)}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;pointer-events:none}
.slide.is-on{opacity:1;pointer-events:auto}
.slide img{width:100%;height:100%;object-fit:contain;background:var(--tint-2)}
.slider__nav{
  position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.9);border:0;cursor:pointer;display:grid;place-items:center;
  font-size:18px;color:var(--navy);z-index:3;
  /* The chevron is a text glyph and sits high in its own line box, so
     place-items alone left it looking off-centre in the circle. */
  line-height:1;padding:0;font-family:system-ui,sans-serif;
}
.slider__nav--prev{padding-inline-end:2px}
.slider__nav--next{padding-inline-start:2px}
.slider__nav:hover{background:#fff}
.slider__nav--prev{inset-inline-start:14px}
.slider__nav--next{inset-inline-end:14px}
.slider__dots{position:absolute;inset-inline:0;bottom:7px;display:flex;gap:0;justify-content:center;z-index:3}
.slider__dots button{
  width:8px;height:8px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.6);box-shadow:0 0 0 1px rgba(34,48,60,.22);
  /* Eight pixels of ink, and the only way back to a slide you have scrolled
     past. The dot does not grow: content-box keeps width/height describing the
     ink, the padding is what a finger actually gets, and background-clip stops
     the colour spreading into it. The row's gap comes off to match, so the dots
     sit where they always did. */
  box-sizing:content-box;
  padding:calc((var(--tap-dense) - 8px) / 2);
  background-clip:content-box;
}
.slider__dots button[aria-current="true"]{background:var(--brand);background-clip:content-box;width:22px;border-radius:99px}

/* ------------------------------------------------------------------ sections */
.section{padding-block:38px}
.section--tight{padding-block:26px}
.section__head{display:flex;align-items:baseline;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.section__head h1,.section__head h2{font-size:26px;font-weight:700;color:var(--brand);letter-spacing:-.01em}
.viewall{margin-inline-start:auto;font-size:14.5px;font-weight:700;color:var(--navy);
  border-bottom:2px solid var(--brand);padding-bottom:2px}

.placeholder{
  border:1px dashed var(--rule);background:var(--tint);border-radius:var(--radius);
  padding:18px 20px;font-size:13.5px;color:var(--stone);
}
.placeholder b{color:var(--ink)}

/* ------------------------------------------------------------ category tiles */
/* Her tiles: the category photograph over a white label, in a hairline frame. */
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.tile{border:1px solid var(--rule);border-radius:4px;overflow:hidden;background:var(--paper)}
.tile__img{display:block;aspect-ratio:183/156;background:var(--tint-2);overflow:hidden}
.tile__img img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.tile__img--product{background:var(--paper)}
.tile__img--product img{object-fit:contain;padding:10px}
.tile:hover .tile__img img{transform:scale(1.06)}
.tile__mono{display:grid;place-items:center;height:100%;font-size:56px;font-weight:900;color:var(--brand);opacity:.28;letter-spacing:-.04em}
.tile__label{display:block;padding:18px 8px 19px;text-align:center}
.tile__name{display:block;font-size:16px;font-weight:700;line-height:1.3;color:var(--brand)}
.tile__count{display:block;font-size:12px;color:var(--stone-soft);margin-top:2px}

/* -------------------------------------------------------------- feature duo */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.duo__tile{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:24/9;background:var(--tint-2)}
.duo__tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.duo__tile:hover img{transform:scale(1.05)}
.duo__ov{
  position:absolute;inset:0;display:flex;align-items:center;padding-inline-start:32px;
  background:linear-gradient(90deg,rgba(34,48,60,.58),rgba(34,48,60,.10));
}
.duo__title{font-size:30px;font-weight:700;color:#fff;letter-spacing:-.01em;text-align:center}

/* ------------------------------------------------------------------ rewards */
.rewards{background:var(--tint);border-block:1px solid var(--rule)}
.rewards .wrap{padding-block:40px;text-align:center}
.rewards h2{font-size:28px;font-weight:700;color:var(--brand)}
.rewards__sub{font-size:14px;color:var(--stone);margin:8px auto 0;max-width:56ch}
.rewards__steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:28px}
.rewards__num{
  display:grid;place-items:center;width:40px;height:40px;margin:0 auto 12px;border-radius:50%;
  background:var(--paper);border:1px solid var(--rule);color:var(--brand);font-weight:700;
}
.rewards__step h3{font-size:15.5px;font-weight:700;margin-bottom:3px}
.rewards__step p{margin:0;font-size:13px;color:var(--stone)}

/* -------------------------------------------------------------------- posts */
.postlist{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.postcard h3{font-size:17px;font-weight:700;margin:10px 0 4px}
.postcard p{font-size:13.5px;color:var(--stone);margin:0}
.postcard__img img{border-radius:var(--radius)}
.entry{font-size:16px;line-height:1.7}
.entry__hero img{border-radius:var(--radius);margin-bottom:20px}

.btn{
  display:inline-block;background:var(--brand);color:#fff;border:0;border-radius:var(--radius);
  padding:11px 22px;font-size:14px;font-weight:700;cursor:pointer;
}
.btn:hover{background:var(--brand-dark);color:#fff}

/* ------------------------------------------------------------------- footer */
.site-footer{background:var(--brand);color:#fff;padding-block:38px 28px;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:26px}
/* The supplied logo is a 300px PNG with 16px of transparent margin down each
   side, so although the image box is flush with the text beneath it, the
   visible mark started about 10px to the right of it. Pulled back by that
   amount. A trimmed asset would make this line unnecessary. */
.footer-logo{max-width:190px;height:auto;margin-inline-start:calc(190px * -16 / 300)}
.footer-logo--text{font-size:30px;font-weight:900;letter-spacing:-.025em}
.footer-blurb,.footer-tel{font-size:13.5px;margin:12px 0 0}
/* Was 11px at .85 opacity, which against the red read as a dimmer grey than
   the links beneath it — the heading looked less important than its own list.
   Same white as the body text, and heavier. */
.footer-col h2{font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  /* h1..h4 are --ink site-wide, which on the red footer rendered these as a
     dark smudge that read as less important than the white links beneath them.
     Opacity alone could not fix that: the colour itself was wrong. */
  color:#fff;margin-bottom:10px}
.footer-list{list-style:none;margin:0;padding:0}
.footer-list a{display:flex;align-items:center;min-height:var(--tap-dense);font-size:13.5px;line-height:1.3}
.footer-list a:hover{text-decoration:underline}
.footer-social{display:flex;gap:8px;list-style:none;margin:16px 0 0;padding:0}
.footer-social a{
  display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  border:1px solid rgba(255,255,255,.5);font-size:11px;font-weight:700;
}
.footer-social a:hover{background:#fff;color:var(--brand)}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.24);margin-top:28px;padding-top:16px;
  display:flex;gap:18px;justify-content:space-between;flex-wrap:wrap;font-size:12px;
}

/* ------------------------------------------------------------- WooCommerce */
/* Four, not six. The rail takes 262px of the 1196px container, so six cards are
   144px wide with 116px of that readable — about 17 characters a line, and a
   name like "Chateau Byblos White Wine 750ml Discovery Vineyards Range" then
   runs to three lines and breaks the two-line reserve below. Measured against
   the wine category: at six columns 9 of 24 names wrap to three lines, at five
   still 7, at four only one.

   There is deliberately no override at the 1100px breakpoint: the rail
   collapses there, so the grid gets the whole width back and four cards become
   roomier rather than tighter. */
.woocommerce ul.products{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0;padding:0;list-style:none}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none}
/* The card, as she draws it (web home and category PNGs): a hairline frame,
   the bottle standing on the floor of a tall picture box, the name in two
   lines of regular weight, size on the left and pack on the right, stock and
   price per litre in green, then the price and a round + at the foot. */
.woocommerce ul.products li.product{
  width:auto!important;margin:0!important;float:none!important;
  border:1px solid var(--rule);border-radius:4px;background:var(--paper);
  padding:18px 18px 15px;display:flex;flex-direction:column;gap:0;
}
.woocommerce ul.products li.product:hover{border-color:var(--field)}
/* One box of a fixed height per bottle, with the bottle standing on its floor.
   It was max-height with an automatic width, so every card sized its picture to
   its own bottle and a row of them stepped up and down. */
.woocommerce ul.products li.product a img{
  /* The thumbnails carry their own white margin, so the box is taller than
     the bottle she draws (about 200px) to show it at her size. */
  margin:0 auto 25px;height:223px;width:100%;object-fit:contain;object-position:bottom;
}
/* The client's v2 card: names darker and bolder, room for two lines. */
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:15.5px!important;font-weight:700;color:var(--ink);padding:0!important;margin:0!important;
  line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.woocommerce ul.products li.product .price,
.card-foot .price{color:var(--brand);font-size:18px;font-weight:700;line-height:1.2;margin:0!important}
.woocommerce ul.products li.product .price del{color:var(--stone-soft);font-size:13px;font-weight:600;margin-inline-end:6px}
.woocommerce ul.products li.product .price ins{text-decoration:none}

/* Price, View cart, then the + or the stepper, on one line. */
.card-foot{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin-top:auto;padding-top:9px}
.woocommerce ul.products li.product .card-foot .price,.card-foot .price{margin-inline-end:auto!important}
/* Shown only while the card holds its stepper; WooCommerce's own link after an
   ajax add would be a second one. */
.card-foot__cart{display:none;font-size:13px;color:var(--brand);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
:is(.card-foot,.collection__buy):has(> div.qty:not([hidden])) .card-foot__cart{display:inline}
:is(.card-foot,.collection__buy) .added_to_cart{display:none!important}
/* basket.js hides the + with [hidden]; WooCommerce's .button display would
   otherwise keep it on screen beside the stepper. */
:is(.card-foot,.collection__buy) [hidden]{display:none!important}
/* A card narrower than hers (four across beside the rail) has no room for the
   link as well as the price and the stepper; the header's basket is the way
   there instead, and the row stays one line. */
.woocommerce ul.products li.product,.collection__item{container-type:inline-size}
@container (max-width:230px){.card-foot__cart{display:none!important}}

/* The round + (card-add, and the collection rows' own). 30px drawn, as in the
   PNGs; the hit area is 44px, so a thumb finds it without the circle growing. */
.woocommerce ul.products li.product a.button.card-add,
a.button.card-add,
.collection__add{
  position:relative;flex:none;width:30px;height:30px;min-height:0;margin:0;padding:0;border-radius:50%;
  background-color:var(--brand);color:transparent;font-size:0;
  background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);
  background-size:10px 2px,2px 10px;background-position:center;background-repeat:no-repeat;
}
.woocommerce ul.products li.product a.button.card-add:hover,a.button.card-add:hover,.collection__add:hover{background-color:var(--brand-dark)}
a.button.card-add::after,.collection__add::after{content:"";position:absolute;inset:-7px;border-radius:50%}
a.button.card-add.loading{opacity:.6}
a.button.card-add.loading::after{display:none}

/* A bottle that cannot be bought here keeps its worded button, as her red pill. */
.woocommerce ul.products li.product .button:not(.card-add){
  margin:0;margin-inline-start:auto;background:var(--brand);color:#fff;border-radius:99px;
  font-size:12.5px;font-weight:700;line-height:1;padding:0 20px;min-height:24px;
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
}
.woocommerce ul.products li.product .button:not(.card-add):hover{background:var(--brand-dark)}
.woocommerce span.onsale{background:var(--navy);border-radius:3px;min-height:0;min-width:0;padding:3px 8px;font-size:10.5px;line-height:1.4}

/* ------------------------------------------- quantity control on a card */
/* Her pill: red ends, the count on white between them, 30px tall. Drawn by
   assets/js/basket.js where the + was, so the card does not change shape when
   a bottle goes into the basket. div.qty, because WooCommerce's number inputs
   are .qty too. */
div.qty{
  display:inline-flex;align-items:stretch;flex:none;height:30px;
  border:1px solid var(--brand);border-radius:99px;overflow:hidden;background:#fff;
}
.qty__btn{
  position:relative;flex:0 0 26px;border:0;padding:0;background:var(--brand);color:#fff;
  font-size:15px;font-weight:700;line-height:1;cursor:pointer;
}
.qty__btn:hover{background:var(--brand-dark)}
.qty__btn:focus-visible{outline:2px solid var(--navy);outline-offset:-3px}
.qty__n{
  flex:0 0 31px;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:400;color:var(--navy);
  font-variant-numeric:tabular-nums;padding:0 2px;
}
.single-product .qty{max-width:150px}

/* -------------------------------------------------------------- responsive */
@media (max-width:1100px){
  .tiles{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .postlist{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .site-header{position:static}
  .masthead{flex-wrap:wrap}
  form.search{order:9;flex-basis:100%;max-width:none}
  .woocommerce ul.products{grid-template-columns:repeat(2,1fr)}
  .duo,.rewards__steps,.postlist{grid-template-columns:1fr}
  .mainnav__list{flex-wrap:nowrap;overflow-x:auto;gap:16px;-webkit-overflow-scrolling:touch}
  .mainnav__list a{white-space:nowrap}
}
@media (max-width:480px){
  .wrap{padding:0 14px}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .duo__title{font-size:22px}
  .masthead{gap:12px}
  .masthead__logo img{height:40px}
  .tel{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ------------------------------------------------ location prompt & coverage */
.deliver .cheers-geo{background:none;color:inherit;padding:0;gap:10px;font-size:12.5px;flex-wrap:nowrap}
.deliver .cheers-geo__msg{min-width:0;color:var(--stone)}
.deliver .cheers-geo__btn{padding:6px 12px;font-size:12.5px;min-height:var(--tap)}
.deliver .cheers-geo__link{color:var(--ink);padding:6px 2px;min-height:var(--tap)}
.deliver .cheers-geo.is-outside{background:none;color:var(--out)}
@media (max-width:760px){.deliver .cheers-geo__msg{display:none}}
.cheers-geo{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--navy);color:#EAEFF4;padding:11px 22px;font-size:13.5px;
}
.cheers-geo__msg{flex:1;min-width:200px}
.cheers-geo__btn{
  border:0;border-radius:var(--radius);background:var(--brand);color:#fff;
  padding:8px 16px;font-size:13px;font-weight:700;cursor:pointer;
}
.cheers-geo__btn:hover:not(:disabled){background:var(--brand-dark)}
.cheers-geo__btn:disabled{opacity:.6;cursor:default}
.cheers-geo__link{
  border:0;background:none;color:#EAEFF4;font-size:13px;font-weight:600;
  cursor:pointer;text-decoration:underline;padding:8px 2px;
}
.cheers-geo.is-outside{background:var(--out)}

.deliver--outside{background:#FCEEF0;border-bottom-color:#F0CBD1}
.deliver__state--out{color:var(--out)}

/* ---------------------------------------------------------- shop with filters */
.shop-layout{padding-block:26px}
.shop-layout--rail{display:grid;grid-template-columns:230px 1fr;gap:32px;align-items:start}
.shop-main{min-width:0}

.filter-toggle{
  display:none;border:1px solid var(--rule);background:var(--paper);border-radius:var(--radius);
  padding:9px 16px;font-size:13px;font-weight:700;cursor:pointer;margin-bottom:14px;
}
.filter-toggle[aria-expanded="true"]{border-color:var(--ink)}

.shop-filters{position:sticky;top:120px}
.shop-filters .widget{border-bottom:1px solid var(--tint-2);padding-bottom:16px;margin-bottom:16px}
.shop-filters .widget:last-child{border-bottom:0}
/* BRAND, SUPPLIER, PRICE and the rest were 10.5px in grey — quieter than the
   options listed beneath them, so the column read as one long list rather than
   several. The shop's red, larger and heavier, gives each group a head. */
.shop-filters .widget-title,.shop-filters h4,.shop-filters h2{
  font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand);margin:0 0 10px;
}
.shop-filters ul{list-style:none;margin:0;padding:0}
.shop-filters li{padding-block:3px;font-size:13.5px;color:var(--stone)}
.shop-filters li a{color:var(--stone)}
.shop-filters li a:hover{color:var(--brand)}
.shop-filters li.chosen > a,.shop-filters li.current-cat > a{color:var(--brand);font-weight:700}
.shop-filters .count{color:var(--stone-soft);font-size:12px}
.shop-filters .children{padding-inline-start:12px;border-inline-start:1px solid var(--tint-2);margin-top:3px}
.widget_price_filter .price_slider_wrapper{padding-top:4px}
.woocommerce .widget_price_filter .ui-slider{background:var(--tint-2);height:4px;border-radius:2px;position:relative}
.woocommerce .widget_price_filter .ui-slider .ui-slider-range{background:var(--brand);height:4px;border-radius:2px}
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle{
  background:var(--paper);border:2px solid var(--brand);width:14px;height:14px;border-radius:50%;top:-5px;
}
.widget_price_filter .price_label{font-size:12.5px;color:var(--stone)}
.woocommerce .widget_price_filter .price_slider_amount .button{
  background:var(--ink);color:#fff;border:0;border-radius:var(--radius);
  padding:7px 14px;font-size:12px;font-weight:700;cursor:pointer;
}
.woocommerce .widget_price_filter .price_slider_amount .button:hover{background:var(--brand)}

/* product card specification line */
/* Size on the left; strength, case and pack pushed right, as she sets them. */
.woocommerce ul.products li.product .spec{display:flex;flex-wrap:wrap;gap:2px 8px;font-size:12.5px;line-height:1.35;color:var(--ink-2);margin:8px 0 0}
.woocommerce ul.products li.product .spec > :first-child{margin-inline-end:auto}
.woocommerce ul.products li.product .spec__abv{color:var(--brand);font-weight:400}
.woocommerce ul.products li.product .spec__pack{color:var(--ink-2);font-weight:400}
.woocommerce ul.products li.product .cardmeta{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:5px 0 0;
}
.woocommerce ul.products li.product .cardmeta .perl{color:var(--ok);font-size:12.5px}
.stk{white-space:nowrap;font-size:12.5px;font-weight:700}
.stk--in{color:var(--ok)}
.stk--low{color:var(--low)}
/* The shop has one red. "Out of stock" had a second, close enough to look
   like a mistake and far enough to notice. */
.stk--out{color:var(--brand)}
.perl{font-size:10.5px;color:var(--stone-soft);white-space:nowrap}
.perl--single{margin-top:-6px;font-size:12.5px}

/* The card on a phone.

   Two cards fit across 390px, so each is about 160px wide and everything in it
   is being read at arm's length on a bus. 11px and 10.5px are print sizes, not
   phone sizes: the units line under the name — 750 ml, the strength, the pack —
   is the line people actually shop by, and it was the smallest thing on the
   card. It goes up, and the row that had "In stock" and the price per litre
   competing for one 160px line is allowed to become two. */
@media (max-width:760px){
  .woocommerce ul.products li.product .spec{
    font-size:12.5px;gap:4px 10px;margin:3px 0 1px;
  }

  .woocommerce ul.products li.product .cardmeta{
    flex-direction:column;align-items:flex-start;gap:1px;
  }

  /* Her frame, tightened for a 160px card. */
  .woocommerce ul.products li.product{padding:18px 12px 12px}
  .woocommerce ul.products li.product a img{height:150px;margin-bottom:16px}
  .woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:14px!important}
}

@media (max-width:1100px){
  .shop-layout--rail{grid-template-columns:1fr;gap:0}
  .filter-toggle{display:inline-block}
  .shop-filters{display:none;position:static;margin-bottom:20px;
    border:1px solid var(--rule);border-radius:var(--radius);padding:16px}
  .shop-filters.is-open{display:block}
}

/* ------------------------------------------ WooCommerce defaults, on-brand */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit,
.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,
.woocommerce .checkout-button,.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{
  background:var(--brand);color:#fff;border-radius:var(--radius);font-weight:700;
}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,.woocommerce input.button.alt:hover{
  background:var(--brand-dark);color:#fff;
}
.woocommerce a.button.disabled,.woocommerce button.button.disabled,.woocommerce button.button:disabled{background:var(--stone-soft);color:#fff}
.woocommerce div.product p.price,.woocommerce div.product span.price{color:var(--brand);font-size:28px;font-weight:700;line-height:1.15}
.woocommerce div.product p.price ins{font-size:28px;font-weight:700;text-decoration:none}
.woocommerce div.product p.price del{color:var(--stone-soft);font-size:15px;font-weight:600;opacity:1;margin-inline-end:8px;vertical-align:middle}
.woocommerce div.product p.price del .amount{font-size:15px}
@media (max-width:480px){.woocommerce div.product p.price del{display:block;margin:0 0 2px}}
.woocommerce div.product .product_title{font-size:30px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.woocommerce div.product .product_meta{font-size:12.5px;color:var(--stone);border-top:1px solid var(--tint-2);padding-top:12px}
.woocommerce div.product .woocommerce-product-details__short-description{color:var(--stone)}
.woocommerce div.product form.cart .quantity .qty{border:1px solid var(--rule);border-radius:var(--radius);height:var(--tap);width:70px}
.woocommerce div.product form.cart .button{padding:12px 24px;height:var(--tap)}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{border-color:var(--rule)}
.woocommerce div.product .woocommerce-tabs ul.tabs li{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius) var(--radius) 0 0;margin:0 4px 0 0}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{color:var(--stone);font-weight:600;padding:.6em 1.2em}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{border-bottom-color:var(--paper)}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--brand)}
.woocommerce div.product .woocommerce-tabs .panel h2{font-size:20px;margin-bottom:10px}
.woocommerce .related > h2,.woocommerce .upsells > h2{font-size:24px;font-weight:700;color:var(--brand);margin:36px 0 18px}
.woocommerce .related ul.products,.woocommerce .upsells ul.products{grid-template-columns:repeat(4,1fr)}
.woocommerce .woocommerce-breadcrumb{font-size:12.5px;color:var(--stone-soft);margin-bottom:14px}
.woocommerce .woocommerce-breadcrumb a{color:var(--stone)}
/* These carry the things a customer most needs to notice — which area's prices
   they are seeing, that a coupon box exists — and they were grey text on a grey
   panel under a navy rule, which is the palette of something being dismissed.
   The shop's own red, kept light enough to inform rather than alarm. */
.woocommerce-info,.woocommerce-message{
  border-top-color:var(--brand);
  background:color-mix(in srgb, var(--brand) 7%, var(--paper));
  border-radius:var(--radius);color:var(--ink);
}
.woocommerce-info::before,.woocommerce-message::before{color:var(--brand)}
.woocommerce-info a,.woocommerce-message a{color:var(--brand);font-weight:700}
.woocommerce-error{border-top-color:var(--brand);background:var(--tint);border-radius:var(--radius)}
.woocommerce-error{border-top-color:var(--out)}
.woocommerce-error::before{color:var(--out)}
/* The pagination sat straight under the last row of cards with nothing between
   them, so it read as part of the grid rather than as what follows it. */
.woocommerce nav.woocommerce-pagination{margin-top:34px}
.woocommerce nav.woocommerce-pagination ul{border:0}
.woocommerce nav.woocommerce-pagination ul li{border:0;margin:0 2px}
.woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{border:1px solid var(--rule);border-radius:var(--radius);min-width:36px;padding:8px 10px;text-align:center}
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--brand);border-color:var(--brand);color:#fff}
.woocommerce nav.woocommerce-pagination ul li a:hover{background:var(--tint);color:var(--brand-dark)}
/* The native arrow sat hard against the right edge of the control. Padding on
   that side moves the whole thing in and gives it room to breathe. */
.woocommerce .woocommerce-ordering select{
  border:1px solid var(--rule);border-radius:var(--radius);padding:7px 10px;background:var(--paper);
  padding-inline-end:30px;
}
.woocommerce .woocommerce-result-count{color:var(--stone);font-size:13.5px}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select{
  border:1px solid var(--rule);border-radius:var(--radius);padding:10px 12px;
}
.woocommerce table.shop_table{border:1px solid var(--rule);border-radius:var(--radius)}
.woocommerce table.shop_table th{color:var(--stone);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
@media (max-width:760px){
  .woocommerce .related ul.products,.woocommerce .upsells ul.products{grid-template-columns:repeat(2,1fr)}
}

/* Food-pairing filter. */

.cheers-dish-filter ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cheers-dish-filter li a {
	display: flex;
	justify-content: space-between;
	gap: .5rem;
	padding: .3rem 0;
	text-decoration: none;
	color: inherit;
}

.cheers-dish-filter li a.is-chosen {
	font-weight: 700;
	color: var(--brand, #E7184E);
}

.cheers-dish-filter .count {
	color: #6b7178;
	font-size: .85rem;
}

/* The fold. <details> rather than a script: it opens without JavaScript, the
   keyboard reaches it for free, and a browser that finds text inside a closed
   one opens it on its own. */

.cheers-dish-filter .cheers-more > summary {
	cursor: pointer;
	list-style: none;
	padding: .45rem 0 .1rem;
	font-size: .85rem;
	font-weight: 700;
	color: var(--brand, #E7184E);
}

.cheers-dish-filter .cheers-more > summary::-webkit-details-marker { display: none }

.cheers-dish-filter .cheers-more > summary::after {
	content: " ↓";
}

.cheers-dish-filter .cheers-more[open] > summary::after {
	content: " ↑";
}

.cheers-dish-filter .cheers-more > summary:hover,
.cheers-dish-filter .cheers-more > summary:focus-visible {
	text-decoration: underline;
}

/* A long dish name is a sentence, and one of these genuinely is. Let it wrap
   rather than push the rail wider, and keep the count beside it. */
.cheers-dish-filter li a {
	align-items: baseline;
}

.cheers-dish-filter li a .count {
	flex: 0 0 auto;
}

/* ---------------------------------------------------------------- Archives.
   Cocktails and Events rendered as a bare "Archives:" list because only
   index.php existed. archive.php gives them a banner, an intro and this grid. */
.archive-hero{position:relative;background:var(--tint,#F4F6F8);padding:42px 0 36px;margin-bottom:8px;overflow:hidden}
.archive-hero--image{padding:72px 0 60px}
.archive-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.archive-hero--image::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(34,48,60,.35),rgba(34,48,60,.72))}
.archive-hero__text{position:relative;z-index:2;max-width:64ch}
.archive-hero__title{margin:0;font-size:34px;line-height:1.15;font-weight:700}
.archive-hero__intro{margin:10px 0 0;font-size:15px;line-height:1.6;color:var(--stone)}
.archive-hero--image .archive-hero__title,.archive-hero--image .archive-hero__intro{color:#fff}
.postlist--grid .postcard__img{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius)}
.postlist--grid .postcard__img img{width:100%;height:100%;object-fit:cover}
.postcard__img--none{display:block;width:100%;height:100%;background:var(--tint,#F4F6F8)}
.postcard__title{font-size:17px;font-weight:700;margin:10px 0 4px}
.postcard__excerpt{font-size:13.5px;color:var(--stone);margin:0}

@media (max-width:600px){
  .archive-hero__title{font-size:25px}
  .archive-hero--image{padding:52px 0 44px}
}

/* ------------------------------------------------------------ Tap targets.
   44px is the smallest thing a thumb hits reliably, and the category nav, the
   grid add-to-cart, the cart remove and quantity controls, place order and the
   carousel dots were all under it at 390px. Height is forced rather than
   nudged, so a longer label cannot quietly shrink one again. */
@media (max-width:782px),(pointer:coarse){
  /* A finger, not a mouse pointer. 44 is the figure the apps hold their
     controls to and the kinder of the two platform minimums; the root values
     above are for a fine pointer on a wide screen, and clear WCAG 2.5.8 AA's
     24px comfortably. This is the line the theme already drew for .hbtn. */
  :root{--tap:44px;--tap-dense:34px}

  .mainnav__list a,
  .cheers-dish-filter a{min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:center;padding-inline:10px}
  .hbtn{min-height:44px;display:flex;align-items:center}

  /* The tap target is right; a row was not. These two are a name above a count,
     and flex-direction:row put them side by side and hard left -- "Wine47
     products" on one line. Column keeps the 44px and the stacking both. */
  .tiles .tile__label{
    min-height:44px;display:flex;flex-direction:column;
    justify-content:center;align-items:center;text-align:center;
  }

  .woocommerce ul.products li.product .button,
  .woocommerce ul.products li.product a.add_to_cart_button,
  .cheers-mixers__add,
  .woocommerce #respond input#submit,
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  .woocommerce #place_order,
  .woocommerce button#place_order{min-height:44px;padding-top:.7em;padding-bottom:.7em}

  /* The card's + keeps its drawn 30px and reaches 44 through its ::after hit
     area; the pill and the stepper grow to a thumb's size. */
  .woocommerce ul.products li.product .button:not(.card-add){min-height:44px}
  div.qty{height:44px;border-radius:22px}
  .qty__btn{flex-basis:40px}

  .woocommerce a.remove,
  .woocommerce table.cart a.remove{width:44px;height:44px;line-height:44px;font-size:20px}

  .woocommerce .quantity .qty,
  .woocommerce div.product form.cart .quantity .qty,
  .woocommerce table.cart .quantity .qty{min-height:44px;height:44px}

  .woocommerce .quantity button,
  .woocommerce .quantity input[type="button"]{min-width:44px;min-height:44px}

  /* The dot itself stays small; the hit area around it does not. */
  .slider__dots{gap:0}
  .slider__dots button{
    width:44px;height:44px;background:none;border:0;padding:0;box-shadow:none;
    display:grid;place-items:center;border-radius:0;
  }
  .slider__dots button::before{
    content:"";width:8px;height:8px;border-radius:50%;
    background:rgba(255,255,255,.6);box-shadow:0 0 0 1px rgba(34,48,60,.22);
    transition:background .15s,width .15s;
  }
  .slider__dots button[aria-current="true"]{width:44px;border-radius:0;background:none;box-shadow:none}
  .slider__nav{min-width:44px;min-height:44px}
  .slider__dots button[aria-current="true"]::before{background:var(--brand);width:22px;border-radius:99px}
}

/* ------------------------------------------------- basket and checkout, two columns */
.entry--commerce{font-size:15px;line-height:1.55}
.woocommerce-cart .entry--commerce .woocommerce{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:32px;align-items:start}
.woocommerce-cart .entry--commerce .woocommerce > .woocommerce-notices-wrapper,
.woocommerce-cart .entry--commerce .woocommerce > .woocommerce-message,
.woocommerce-cart .entry--commerce .woocommerce > .woocommerce-info,
.woocommerce-cart .entry--commerce .woocommerce > .woocommerce-error,
.woocommerce-cart .entry--commerce .woocommerce > .cheers-notice,
.woocommerce-cart .entry--commerce .woocommerce > .cart-empty,
.woocommerce-cart .entry--commerce .woocommerce > .return-to-shop,
.woocommerce-cart .entry--commerce .woocommerce > .cheers-mixers{grid-column:1 / -1}
.woocommerce-cart .entry--commerce .woocommerce-cart-form{grid-column:1;min-width:0}
.woocommerce-cart .entry--commerce .cart-collaterals{grid-column:2;position:sticky;top:20px;display:flex;flex-direction:column;gap:20px}
.woocommerce-cart .entry--commerce .cart-collaterals .cart_totals{order:-1}
.woocommerce-cart .entry--commerce .cart-collaterals .cheers-mixers{margin:0}
.woocommerce-cart .entry--commerce .cart-collaterals .cart_totals{float:none;width:auto;background:var(--tint);border:1px solid var(--rule);border-radius:var(--radius);padding:18px 20px}
.woocommerce-cart .entry--commerce .cart_totals h2{font-size:18px;margin:0 0 10px}
.woocommerce-cart .entry--commerce .cart_totals table{margin:0}
.woocommerce-cart .entry--commerce .cart_totals .order-total .amount{font-size:20px;color:var(--brand)}
.woocommerce-cart .entry--commerce .wc-proceed-to-checkout{padding:14px 0 0}
.woocommerce-cart .entry--commerce .wc-proceed-to-checkout a.checkout-button{display:block;text-align:center;margin:0;font-size:15px;padding:13px 18px}
.woocommerce-cart .entry--commerce table.shop_table{border:0}
.woocommerce-cart .entry--commerce table.shop_table td.product-thumbnail img{width:64px;height:64px;object-fit:contain;background:var(--tint);border-radius:var(--radius)}
.woocommerce-cart .entry--commerce table.shop_table td.actions{padding-inline:0}

/* ------------------------------------------------------------- the basket */
/* The coupon row is not inside a .form-row, so it never picked up the field
   styling every other input on the site has: no border radius, no shared
   padding, and a field and a button of unrelated widths sitting together. */
.woocommerce-cart .entry--commerce td.actions .coupon{
  /* nowrap, and a width of its own: WooCommerce floats this block and leaves it
     full width, which pushed "Apply coupon" onto a line of its own under the
     field it belongs to. */
  display:flex;flex-wrap:nowrap;align-items:center;gap:10px;
  float:none;width:auto;max-width:520px;
}
.woocommerce-cart .entry--commerce td.actions .coupon label{
  font-size:13px;font-weight:700;color:var(--stone);
}
.woocommerce-cart .entry--commerce td.actions #coupon_code{
  /* A floor it cannot shrink past: as a plain flex item the button squeezed it
     down to about eighty pixels, which fits "Coupon c". */
  flex:1 1 260px;min-width:200px;max-width:280px;min-height:var(--tap);
  border:1px solid var(--rule);border-radius:var(--radius);padding:10px 12px;
  font-size:14px;background:var(--paper);
}
.woocommerce-cart .entry--commerce td.actions .coupon .button,
.woocommerce-cart .entry--commerce td.actions button[name="update_cart"]{
  /* Sized to its words rather than stretched or squeezed, and the same height
     as the field beside it so the pair reads as one control. */
  min-height:var(--tap);padding:0 20px;white-space:nowrap;
}

/* A long name broke wherever it ran out of room, leaving one word alone on the
   second line. Balanced wrapping splits it evenly instead. */
.woocommerce-cart .entry--commerce td.product-name{
  text-wrap:balance;line-height:1.35;
}

/* "Change address" was a plain grey link tucked against the line above it, and
   nobody read it as something to press. */
.woocommerce-cart .entry--commerce .shipping .woocommerce-shipping-destination{
  margin-bottom:8px;
}
.woocommerce-cart .entry--commerce a.shipping-calculator-button{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:4px;padding:7px 12px;border-radius:var(--radius);
  background:color-mix(in srgb, var(--brand) 10%, transparent);
  color:var(--brand);font-weight:700;font-size:13.5px;text-decoration:underline;
}
.woocommerce-cart .entry--commerce a.shipping-calculator-button:hover{
  background:color-mix(in srgb, var(--brand) 16%, transparent);
}
/* The icon on the leading side, where a label's icon belongs. */
.woocommerce-cart .entry--commerce a.shipping-calculator-button::before{
  content:"\270E";font-size:15px;line-height:1;
}
.woocommerce-cart .entry--commerce a.shipping-calculator-button::after{content:none}

/* TOTAL is a small uppercase label beside a 20px figure; centred in the row it
   floated above the amount's baseline. */
.woocommerce-cart .entry--commerce .cart_totals .order-total th,
.woocommerce-cart .entry--commerce .cart_totals .order-total td{
  vertical-align:bottom;
}

/* The governorate picker is a select2 widget, which sizes itself and came out
   far narrower than the fields above it. */
.woocommerce-cart .entry--commerce .shipping-calculator-form .select2-container,
.woocommerce-cart .entry--commerce .shipping-calculator-form .select2-container .select2-selection{
  width:100%!important;
}
.woocommerce-cart .entry--commerce .shipping-calculator-form .select2-container .select2-selection{
  min-height:42px;border:1px solid var(--rule);border-radius:var(--radius);
  display:flex;align-items:center;padding:0 10px;
}
.woocommerce-cart .entry--commerce .shipping-calculator-form .select2-selection__arrow{
  height:100%;inset-inline-end:8px;
}

.woocommerce-checkout .entry--commerce form.checkout{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:32px;align-items:start}
.woocommerce-checkout .entry--commerce form.checkout > *{grid-column:1;min-width:0}
.woocommerce-checkout .entry--commerce form.checkout #customer_details{grid-row:1 / span 3}
.woocommerce-checkout .entry--commerce form.checkout #order_review_heading{grid-column:2;grid-row:1}
.woocommerce-checkout .entry--commerce form.checkout #order_review{grid-column:2;grid-row:2}
.woocommerce-checkout .entry--commerce form.checkout #order_review_heading{margin:0;font-size:18px;padding:0 0 10px}
.woocommerce-checkout .entry--commerce form.checkout #order_review{position:sticky;top:20px;background:var(--tint);border:1px solid var(--rule);border-radius:var(--radius);padding:18px 20px}
.woocommerce-checkout .entry--commerce form.checkout #order_review table.shop_table{border:0;margin:0 0 14px;background:none}
.woocommerce-checkout .entry--commerce form.checkout #order_review .order-total .amount{font-size:20px;color:var(--brand)}

/* ----------------------------------------------------------- the checkout */
/* 400px of order summary was not enough for "Collect from a branch" to stay on
   one line, while the billing column had room to spare. */
.woocommerce-checkout .entry--commerce form.checkout{grid-template-columns:minmax(0,1fr) 440px}

/* The two columns started at different heights: the billing panel began at the
   top of the grid while "Your order" sat on its own line above its box, so
   neither the headings nor the frames lined up. */
.woocommerce-checkout .entry--commerce form.checkout #customer_details > div{margin-top:0}
.woocommerce-checkout .entry--commerce form.checkout #customer_details h3:first-child{
  margin:0 0 10px;font-size:18px;line-height:1.3;padding:0;
}
/* "Billing details" sits inside its panel, 19px below the panel's own top edge;
   "Your order" sits outside its panel. Left alone the two headings start at
   different heights and the panels below them do too. Measured rather than
   guessed: 19px brings the headings level, and 16px below leaves the order
   panel starting level with the first name field. */
.woocommerce-checkout .entry--commerce form.checkout #order_review_heading{
  margin:19px 0 16px;font-size:18px;line-height:1.3;padding:0;
}

/* Field labels were the same weight as the values beneath them, so a column of
   fields read as one undifferentiated run. */
.woocommerce-checkout .entry--commerce form.checkout .form-row label{
  font-weight:700;color:var(--ink);margin-bottom:5px;display:block;
}
.woocommerce-checkout .entry--commerce form.checkout .form-row{margin-bottom:18px}

/* Every field outlined the same. The governorate is a select2 widget that
   brings its own thinner border, which is why that one looked different. */
.woocommerce-checkout .entry--commerce form.checkout .select2-container .select2-selection{
  min-height:44px;border:1px solid var(--rule);border-radius:var(--radius);
  display:flex;align-items:center;padding:0 10px;
}
.woocommerce-checkout .entry--commerce form.checkout .select2-selection__arrow{height:100%;inset-inline-end:8px}

/* A row label beside a block of text was centred against the whole block, so
   it drifted down the taller rows. */
.woocommerce-checkout .entry--commerce form.checkout #order_review table.shop_table th,
.woocommerce-checkout .entry--commerce form.checkout #order_review table.shop_table td{
  vertical-align:top;
}
.woocommerce-checkout .entry--commerce form.checkout #order_review .order-total th,
.woocommerce-checkout .entry--commerce form.checkout #order_review .order-total td{
  vertical-align:bottom;
}

/* The radio sat on the first line of a method that ran to two, so a one-line
   method looked centred and a two-line one looked wrong. Both sit on the
   label's own line now, whatever follows it. */
.woocommerce-checkout .entry--commerce form.checkout .wc_payment_method > label{
  display:flex;align-items:center;gap:9px;margin:0;font-weight:700;
}
.woocommerce-checkout .entry--commerce form.checkout .wc_payment_method > input[type="radio"]{
  margin:0;flex:0 0 auto;
}
.woocommerce-checkout .entry--commerce form.checkout .wc_payment_method{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-block:6px;
}
.woocommerce-checkout .entry--commerce form.checkout .wc_payment_method .payment_box{
  flex-basis:100%;margin-top:4px;
}
.woocommerce-checkout .entry--commerce form.checkout #place_order{width:100%;padding:14px 18px;font-size:15px}
.woocommerce-checkout .entry--commerce .col2-set .col-1,.woocommerce-checkout .entry--commerce .col2-set .col-2{float:none;width:100%}
.woocommerce-checkout .entry--commerce .col2-set::after{display:none}
.woocommerce-checkout .entry--commerce #customer_details h3,.woocommerce-checkout .entry--commerce .woocommerce-additional-fields h3{font-size:18px;margin:0 0 10px}
.woocommerce-checkout .entry--commerce .woocommerce-billing-fields,.woocommerce-checkout .entry--commerce .woocommerce-shipping-fields,.woocommerce-checkout .entry--commerce .woocommerce-additional-fields{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);padding:18px 20px;margin-bottom:20px}
.woocommerce-checkout .entry--commerce form.checkout > .woocommerce-NoticeGroup,
.woocommerce-checkout .entry--commerce form.checkout > .woocommerce-notices-wrapper{grid-column:1 / -1}
@media (max-width:900px){
  .woocommerce-cart .entry--commerce .woocommerce,.woocommerce-checkout .entry--commerce form.checkout{grid-template-columns:1fr;gap:20px}
  .woocommerce-cart .entry--commerce .cart-collaterals,.woocommerce-checkout .entry--commerce form.checkout #order_review{grid-column:1;position:static}
  .woocommerce-checkout .entry--commerce form.checkout #order_review_heading{grid-column:1;grid-row:auto}
  .woocommerce-checkout .entry--commerce form.checkout #customer_details,.woocommerce-checkout .entry--commerce form.checkout #order_review{grid-row:auto}
}

/* ------------------------------------------------------------------ recipe */
.recipe__hero{background:var(--tint);border-bottom:1px solid var(--rule)}
.recipe__hero-in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;align-items:center;padding-block:36px}
.recipe__back{font-size:12.5px;font-weight:700;color:var(--stone);letter-spacing:.04em;text-transform:uppercase}
.recipe__lead h1{font-size:44px;font-weight:700;color:var(--brand);letter-spacing:-.02em;line-height:1.05;margin:10px 0 12px}
.recipe__intro{font-size:17px;color:var(--stone);max-width:52ch}
.recipe__facts{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;margin:0 0 20px;padding:0;font-size:13.5px;font-weight:600;color:var(--navy)}
.recipe__facts li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--brand);margin-inline-end:8px;vertical-align:middle}
.recipe__buy{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.btn--lg{padding:14px 26px;font-size:15px}
.recipe__pantry{font-size:13px;color:var(--stone)}
.recipe__figure{margin:0;aspect-ratio:4/3;background:var(--paper);border-radius:var(--radius);overflow:hidden;display:grid;place-items:center}
.recipe__figure img{width:100%;height:100%;object-fit:contain;padding:24px}
.recipe__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;padding-block:32px}
.recipe__card{border:1px solid var(--rule);border-radius:var(--radius);padding:22px 24px;background:var(--paper)}
.recipe__card h2{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--stone);margin:0 0 14px}
.recipe__list{list-style:none;margin:0;padding:0}
.recipe__row{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:center;padding:10px 0;border-top:1px solid var(--tint-2)}
.recipe__row:first-child{border-top:0}
.recipe__qty{font-variant-numeric:tabular-nums;font-weight:700;color:var(--navy);font-size:14px}
.recipe__name{font-size:15px}
.recipe__bottle{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;font-size:15px;font-weight:600;color:var(--ink)}
.recipe__bottle img{width:44px;height:44px;object-fit:contain;background:var(--tint);border-radius:4px}
.recipe__bottle:hover .recipe__bottle-name{color:var(--brand)}
.recipe__bottle-price{color:var(--brand);font-weight:700;white-space:nowrap}
.recipe__bottle-price del{color:var(--stone-soft);font-weight:400;font-size:.85em;margin-inline-end:4px}
.recipe__steps{margin:0;padding:0;list-style:none;counter-reset:step}
.recipe__steps li{position:relative;padding-block:8px;padding-inline:44px 0;font-size:16px;line-height:1.55;counter-increment:step}
.recipe__steps li::before{content:counter(step);position:absolute;inset-inline-start:0;top:6px;width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;font-weight:700;font-size:13px;display:grid;place-items:center}
.recipe__more{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.recipe__more-card{display:block;border:1px solid var(--rule);border-radius:var(--radius);padding:18px 20px}
.recipe__more-card:hover{border-color:var(--brand)}
.recipe__more-name{display:block;font-size:17px;font-weight:700;color:var(--brand)}
.recipe__more-meta{display:block;font-size:12.5px;color:var(--stone-soft);margin-top:2px}
@media (max-width:860px){
  .recipe__hero-in{grid-template-columns:1fr;gap:20px}
  .recipe__figure{order:-1;aspect-ratio:16/9}
  .recipe__lead h1{font-size:32px}
  .recipe__body{grid-template-columns:1fr}
  .recipe__more{grid-template-columns:1fr}
}

/* ------------------------------------------------------------------ dishes */
.cheers-dishes{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0 8px}
.cheers-dish{display:block;border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;background:var(--paper);text-align:center}
.cheers-dish:hover{border-color:var(--brand)}
.cheers-dish__img{display:grid;place-items:center;aspect-ratio:5/4;background:var(--tint)}
.cheers-dish__img img{width:100%;height:100%;object-fit:cover}
.cheers-dish__img img.is-bottle{object-fit:contain;padding:14px}
.cheers-dish__mono{font-size:48px;font-weight:900;color:var(--brand);opacity:.3}
.cheers-dish__name{display:block;font-weight:700;color:var(--brand);padding:10px 8px 0}
.cheers-dish__count{display:block;font-size:12px;color:var(--stone-soft);padding:0 8px 10px}
@media (max-width:760px){.cheers-dishes{grid-template-columns:repeat(2,1fr)}}

.postcard__img--bottle{object-fit:contain;padding:18px;background:var(--tint)}
.archive-grid .postcard__img img.postcard__img--bottle,.postcard__img .postcard__img--bottle{width:100%;height:100%}

/* --------------------------------------------------------------- pagination */
.navigation.pagination{margin:32px 0 8px}
.navigation.pagination .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.navigation.pagination .nav-links{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.navigation.pagination .page-numbers{display:grid;place-items:center;min-width:40px;height:40px;padding:0 12px;border:1px solid var(--rule);border-radius:var(--radius);font-size:14px;font-weight:600;color:var(--ink);background:var(--paper)}
.navigation.pagination a.page-numbers:hover{border-color:var(--brand);color:var(--brand)}
.navigation.pagination .page-numbers.current{background:var(--brand);border-color:var(--brand);color:#fff}
.navigation.pagination .page-numbers.dots{border-color:transparent;background:none}

/* ------------------------------------------- drawn stand-ins for pantry items */
.recipe__pantry-line{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:center}
.recipe__icon{width:44px;height:44px;border-radius:6px;background:var(--tint);display:grid;place-items:center;flex:none}
.recipe__icon svg{width:30px;height:30px;display:block}
.recipe__icon .i-fill{fill:currentColor}
.recipe__icon .i-leaf{fill:currentColor;opacity:.55}
.recipe__icon .i-line{fill:none;stroke:var(--paper);stroke-width:1.6;stroke-linecap:round;opacity:.85}
.recipe__icon .i-stem{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.recipe__icon .i-bubble{fill:var(--paper);opacity:.8}
.recipe__icon .i-dots{fill:none;stroke:var(--paper);stroke-width:2.4;stroke-linecap:round;opacity:.9}
.recipe__icon--lime{color:#6FA83C}
.recipe__icon--lemon{color:#D9A521}
.recipe__icon--orange{color:#E2861F}
.recipe__icon--grapefruit{color:#E0685F}
.recipe__icon--herb{color:#4E9A57}
.recipe__icon--berry{color:#C62A55}
.recipe__icon--tomato{color:#CC3B2A}
.recipe__icon--peach{color:#E8926B}
.recipe__icon--pineapple{color:#D8A83A}
.recipe__icon--apple{color:#7FAE4A}
.recipe__icon--cream{color:#C9B79B}
.recipe__icon--coffee{color:#6B4A34}
.recipe__icon--sugar{color:#B9A48C}
.recipe__icon--soda{color:#7FA9C4}
.recipe__icon--cola{color:#7A4B2C}
.recipe__icon--ginger{color:#C8853C}
.recipe__icon--spice{color:#9A8577}
.recipe__icon--sauce{color:#B5392C}
.recipe__icon--bitters{color:#A0402F}
.recipe__icon--bottle{color:var(--navy)}

/* ------------------------------------------- single product: one reading column */
/* The gallery, the buy panel and the tabs share a block of their own, so the
   sticky picture holds while the description scrolls and releases where it
   ends, instead of travelling the whole product and crossing the rails below.
   #content is in the selectors because WooCommerce's own float rules carry it. */
@media (min-width:901px){
  body.single-product #content div.product .product-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px;align-items:start}
  body.single-product #content div.product .product-top .woocommerce-product-gallery{grid-column:1;grid-row:1 / span 2;width:100%;float:none;margin:0;position:sticky;top:20px}
  body.single-product #content div.product .product-top .summary.entry-summary{grid-column:2;grid-row:1;width:100%;float:none;margin:0}
  body.single-product #content div.product .product-top .woocommerce-tabs{grid-column:2;grid-row:2;width:100%;margin:28px 0 0;padding:0}
  body.single-product #content div.product .product-top .woocommerce-tabs .panel{margin-bottom:0}
  body.single-product #content div.product .cheers-mixers,
  body.single-product #content div.product .related,
  body.single-product #content div.product .upsells{clear:both;width:100%;float:none}
}

/* Seasonal and occasion collections on the front page. */

.collection__body {
	display: grid;
	gap: 1.5rem;
}

@media (min-width: 900px) {
	.collection__body--shot {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		align-items: start;
	}
}

.collection__shot img {
	width: 100%;
	height: 100%;
	max-height: 320px;
	object-fit: cover;
	border-radius: 10px;
	display: block;
}

.collection__copy {
	margin: 0 0 1rem;
	font-size: 1.02rem;
	line-height: 1.6;
	max-width: 62ch;
}

.collection__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
	/* Four to a row, filling the width, rather than as many 140px columns as
	   happen to fit — which left the row stopping short of the right margin. */
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Her card frame, the same as the product grid's (see li.product above). */
.collection__item {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--rule);
	border-radius: 4px;
	background: var(--paper);
	padding: 8px 18px 14px;
}

.collection__link {
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-decoration: none;
	color: inherit;
	/* So every card is the same height and the prices can share a baseline. */
	flex: 1 1 auto;
}

/* One box of a fixed height per bottle, with the bottle standing on its floor.
   Without it a tall wine and a short tonic float at different heights and the
   row reads as a mistake. */
.collection__shotbox {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	/* Taller than the bottle she draws: the thumbnails carry their own margin. */
	height: 211px;
	background: var(--paper, #fff);
	overflow: hidden;
}

.collection__shotbox img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: bottom;
}

.collection__name {
	font-size: 15px;
	font-weight: 400;
	color: var(--navy);
	line-height: 1.3;
	min-height: 2.6em;
	/* Two lines, so the prices below them line up across the row. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* The link grows to fill the card, so this row sits at the foot of every card
   whatever the name above it did, which puts all four prices on one baseline.
   The price left and the + right, as drawn: the frame now says which card a
   button belongs to. */
.collection__buy {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 10px;
	margin-top: 14px;
}

.collection__price {
	color: var(--brand, #E7184E);
	font-weight: 700;
	font-size: 18px;
	margin-inline-end: auto;
}

.collection__price del { opacity: .55; font-weight: 600; margin-inline-end: .35rem }
.collection__price ins { text-decoration: none }

/* .collection__add is drawn with the card's round + (product card section). */
.collection__add.loading { opacity: .6 }
.collection__add.added { display: none }

@media (max-width: 900px) {
	.collection__items { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

/* The checkout button while the basket is short of the area minimum. Plainly
   unavailable rather than merely dimmed, with the reason under it, because the
   bottles that would close the gap are on the same screen. */
.cheers-checkout-blocked{margin:0}
.cheers-checkout-blocked .is-blocked{display:block;text-align:center;background:var(--stone-soft);color:var(--paper);cursor:not-allowed;font-size:15px;padding:13px 18px;border-radius:var(--radius)}
.cheers-checkout-blocked__why{display:block;margin-block-start:8px;font-size:13px;line-height:1.45;color:var(--stone)}
.cheers-checkout-why{margin-block-start:10px;font-size:15px;line-height:1.5;color:var(--ink)}

/* Tap targets, the rest of them.
   -------------------------------------------------------------------------
   The apps were measured in September and their Add control went from 27dp to
   44. The website was never given the same pass, so the standard existed here
   and was applied in one place: the shop grid's Add to cart is 144x44 and
   everything else was between 20 and 36.

   44 is the kinder of the two platform figures (iOS asks 44, Android 48) and
   is the number the apps already use, so it is the number here. Where a
   control is small because it should look small -- a text link in a band, the
   language switcher -- the hit area grows and the type does not. */

/* "See the whole collection" and "View all": 26px tall text links that sit
   beside a heading and are the way into a whole band. */
.viewall{display:inline-flex;align-items:center;min-height:var(--tap)}

/* The language switcher was 30x20, which on a phone is a coin toss between two
   languages. */
.deliver__lang a,.deliver__lang b{display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--tap);min-width:var(--tap);padding-inline:6px}

/* The hotline in the header and the footer: a phone number is the one control
   a customer uses when everything else has failed them. */
.footer-tel a,.hbtn--tel,a[href^="tel:"]{display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--tap);min-width:var(--tap)}

/* The area select in the delivery strip. */
.region-select{min-height:var(--tap)}

/* The logo is a link home, and on a phone it is the one people reach for when
   they want to start again. */
.custom-logo-link{display:inline-flex;align-items:center;min-height:var(--tap)}

/* Loose ends from the October UI study.
   ------------------------------------------------------------------------- */

/* The cart button read "Cart0". At this width .hbtn becomes a flex container,
   and a flex container drops the whitespace-only text node between the word and
   the count -- so the two ran together on a phone and were fine on a desktop,
   where the same element is a block. A gap says what the markup meant. */
.hbtn--cart{gap:6px}

/* The category bar scrolls and said nothing about it: 610px of links in a
   362px strip, the last one cut mid-word, no scrollbar worth seeing on a
   touch device. The trailing edge fades now, so the cut reads as "there is
   more" rather than as a clipping bug. */
.mainnav{position:relative}
.mainnav::after{content:"";position:absolute;inset-block:0;inset-inline-end:0;width:36px;pointer-events:none;
  background:linear-gradient(to left,var(--paper),transparent)}
[dir="rtl"] .mainnav::after{background:linear-gradient(to right,var(--paper),transparent)}
@media (min-width:900px){.mainnav::after{display:none}}

/* "Sign in to save this for later" is a link. It was ink-coloured with no
   underline, which is a link that looks exactly like the sentence above it. */
.cheers-wishlist-note a{color:var(--brand-dark);text-decoration:underline;text-underline-offset:2px}

/* The sidebar filter button was the only dark-navy button on a site whose
   buttons are brand red. */
.woocommerce .widget_price_filter .price_slider_amount .button{background:var(--brand);color:#fff}
.woocommerce .widget_price_filter .price_slider_amount .button:hover{background:var(--brand-dark)}

/* Being short of the area minimum is not an error. It is an ordinary state with
   a clear way out, and the three bottles that would close it are on the same
   screen. It keeps the attention of a notice without the alarm of a refusal. */
.woocommerce-cart .woocommerce-error:has(.cheers-min-note),
.woocommerce-cart .woocommerce-error.is-shortfall{background:var(--tint);border-color:var(--low);color:var(--ink)}
.woocommerce-cart .woocommerce-error:has(.cheers-min-note)::before{color:var(--low)}

/* Controls the first sweep missed, because it was run on the homepage and
   these live on the shop, the archives and the account. */

/* Pagination: 36x33, and it is how anybody reaches page two of a hundred
   and sixty-nine products. */
/* WooCommerce styles these through `.woocommerce nav.woocommerce-pagination ul
   li a`, which outranks anything shorter, so this matches its shape rather than
   piling !important on top. It is how anybody reaches page two of a hundred and
   sixty-nine products. */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
.navigation.pagination .page-numbers{
  min-width:var(--tap);min-height:var(--tap);padding-inline:6px;box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center}

/* The filter drawer toggle and the sort select, which sit either side of the
   shelf and were 40 and 41. */
.filter-toggle{min-height:var(--tap)}
.woocommerce-ordering select,select.orderby{min-height:var(--tap)}

/* Breadcrumbs are a dense row of text links, so they take the smaller figure
   for the same reason the footer does. */
.woocommerce-breadcrumb a,.breadcrumb a{display:inline-flex;align-items:center;min-height:var(--tap-dense)}

/* The long tail, found by sweeping every template rather than the homepage.
   -------------------------------------------------------------------------
   Native checkboxes and radios are left alone: their label is the target, and
   growing the box itself moves the tick away from the words. The map's own
   zoom controls are Leaflet's and are left to it. */

/* Order tracking: the field and its button were 33 tall, on the page somebody
   reaches when they are already worried about an order. */
.cheers-tracking__field input,.cheers-tracking__field .button{min-height:var(--tap)}

/* The cart: the coupon button, the shipping calculator toggle, and the product
   name, which is the way back to the thing you are about to buy. */
.coupon .button,.shipping-calculator-button{min-height:var(--tap);display:inline-flex;align-items:center;justify-content:center}
.product-name a{display:inline-flex;align-items:center;min-height:var(--tap-dense)}

/* Product page: the saved-for-later link, the category links under it, and the
   description tab. */
.cheers-wishlist-note a,.posted_in a,.tagged_as a{display:inline-flex;align-items:center;min-height:var(--tap-dense)}
.woocommerce-tabs .tabs li a{min-height:var(--tap);display:flex;align-items:center}

/* Account: WooCommerce's own password reveal, and the two links under the form. */
.woocommerce .show-password-input{min-width:var(--tap);min-height:var(--tap);
  display:flex;align-items:center;justify-content:center;background-position:center}
.woocommerce-LostPassword a,.woocommerce-privacy-policy-link{display:inline-flex;align-items:center;min-height:var(--tap-dense)}

/* Editorial cards: the title is the link into the recipe. */
.postcard__title a{display:inline-flex;align-items:center;min-height:var(--tap-dense)}
.cheers-locator__link{display:inline-flex;align-items:center;min-height:var(--tap-dense)}

/* The shop sidebar's filter links.
   -------------------------------------------------------------------------
   Twenty pixels tall, which is under WCAG 2.5.8 AA's 24 even for a mouse. The
   mobile sweep could not see them: at 390 they are inside the filter drawer and
   measure zero until it opens. They are how anybody narrows a hundred and
   sixty-nine products, so they take the dense figure -- 28 on a fine pointer,
   34 on a finger -- rather than the full 44, because they are a spaced list of
   text links like the footer. */
/* The whole row, not the word. A two-character label like "x1" is twenty-one
   pixels of text, and nobody aims at the text -- they aim at the line. This is
   also what a filter list is expected to do when you click beside the label. */
.shop-filters li > a,
.shop-sidebar li > a,
.product-categories li > a{
  display:flex;align-items:center;min-height:var(--tap-dense)}

/* WooCommerce's layered nav keeps the count in a sibling span outside the
   link, so a full-width link would push the count onto its own line. Left
   inline; a short label in a vertical list has clear space on every side,
   which is the spacing exception WCAG 2.5.8 allows. */
.woocommerce-widget-layered-nav-list__item > a{
  display:inline-flex;align-items:center;min-height:var(--tap-dense)}

/* The cart's remove cross, one pixel under the bar it has to clear. */
.woocommerce a.remove{min-width:var(--tap-dense);min-height:var(--tap-dense);
  display:inline-flex;align-items:center;justify-content:center}

/* ==== Her Product page (preview/screens/web/product.png, product-2.png) ====
   Name; In stock and the price per litre on one line; the price and the round
   + on the next (View Cart and the stepper once it is in the basket); the
   delivery-today notice; Sign in to save; SKU and categories under a rule;
   GOES WITH; HOW TO SERVE IT; the tabs; then the Mixers and Ice band and
   Related Products. The summary is a wrapping flex row so the price and the
   form, which WooCommerce prints apart, can share a line; everything not
   placed explicitly keeps its own line, in the order the hooks print it. */
.single-product .woocommerce-breadcrumb{font-size:13px;color:var(--navy);margin:0 0 42px}
.single-product .woocommerce-breadcrumb a{color:var(--navy)}
.single-product #content div.product .summary.entry-summary{display:flex;flex-wrap:wrap;align-items:center;column-gap:16px;padding-top:4px}
.single-product #content div.product .summary.entry-summary > *{flex:1 1 100%;order:3;min-width:0}
.single-product #content div.product .summary > .product_title{order:0;font-size:32px;line-height:1.19;color:var(--navy);margin:0 0 10px;letter-spacing:0}
.single-product #content div.product .summary > .cardmeta--single{order:1;display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 15px}
.single-product .cardmeta--single .stk{font-size:15px;font-weight:700}
.single-product .cardmeta--single .perl{font-size:15px;color:var(--ok);white-space:nowrap}
.single-product #content div.product .summary > p.price{order:2;flex:1 1 auto;margin:0;font-size:28px;line-height:42px}
.single-product #content div.product .summary > p.stock{display:none}
.single-product #content div.product .summary > form.cart:not(.variations_form){order:2;flex:0 0 auto;margin:0;display:flex;align-items:center;gap:8px}
.single-product #content div.product form.cart:has(.card-add) .quantity{display:none}
.single-product #content div.product form.cart button.card-add{
  position:relative;width:42px;height:42px;min-height:0;padding:0;margin:0;border:0;border-radius:50%;
  background-color:var(--brand);color:transparent;font-size:0;cursor:pointer;
  background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);
  background-size:12px 2px,2px 12px;background-position:center;background-repeat:no-repeat;
}
.single-product #content div.product form.cart button.card-add:hover{background-color:var(--brand-dark)}
.single-product #content div.product form.cart button.card-add.loading{opacity:.6}
.single-product #content div.product form.cart button.card-add.loading::after{display:none}
.single-product form.cart [hidden]{display:none!important}
.single-product form.cart .added_to_cart{display:none!important}
/* Her product-2.png: "View Cart", then the stepper, 42px tall. */
.single-product form.cart .card-foot__cart{display:none;font-size:15px;color:var(--brand);text-transform:capitalize;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;margin-inline-end:2px}
.single-product form.cart:has(> div.qty:not([hidden])) .card-foot__cart{display:inline}
.single-product form.cart div.qty{height:42px;max-width:none;border-radius:21px}
.single-product form.cart .qty__btn{flex-basis:37px;font-size:19px}
.single-product form.cart .qty__n{flex-basis:40px;font-size:16px}
.single-product #content div.product .summary > .cheers-today{
  margin:12px 0 0;padding:11px 15px;border:1px solid var(--ok);border-radius:4px;
  background:var(--ok-bg);color:var(--ok);font-size:16px;font-weight:400;line-height:1.3;
}
.single-product #content div.product .summary > .cheers-wishlist-note{margin:24px 0 0}
.single-product .summary .cheers-wishlist-note a{color:var(--brand);font-size:16px;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.single-product #content div.product .summary > .product_meta{margin:12px 0 0;padding-top:12px;border-top:1px solid #E7ECF0;font-size:12.5px;color:var(--navy)}
.single-product .summary .product_meta a{color:var(--navy)}
/* GOES WITH: the label on the left, the dishes wrapping beside it. */
.single-product #content div.product .summary > .cheers-pairing{
  position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:10px 9px;
  margin:28px 0 0;padding-inline-start:102px;
}
.single-product .summary .cheers-pairing__label{
  position:absolute;inset-inline-start:0;top:4px;
  font-size:15px;font-weight:700;letter-spacing:0;color:var(--navy);
}
.single-product .summary .cheers-pairing__dish{
  padding:4px 10px;border:1px solid var(--card-line);border-radius:99px;
  box-shadow:0 1px 2px rgba(49,62,73,.08);font-size:12.5px;line-height:18px;color:var(--navy);background:#fff;
}
.single-product .summary .cheers-pairing__dish:hover{border-color:var(--brand)}
.single-product .summary .cheers-pairing__more{font-size:12.5px;color:var(--navy);padding-inline-start:2px}
/* HOW TO SERVE IT: her panel, framed all round rather than ruled on one side. */
.single-product #content div.product .summary > .cheers-serve{
  margin:24px 0 0;padding:20px 20px 18px;border:2px solid #E7EAEC;border-radius:4px;
  background:var(--tint);box-shadow:0 1px 3px rgba(49,62,73,.06);
}
.single-product .summary .cheers-serve__title{margin:0 0 12px;font-size:15px;font-weight:700;letter-spacing:0;color:var(--navy)}
.single-product .summary .cheers-serve__list{gap:9px 18px}
.single-product .summary .cheers-serve__list dt{color:var(--navy);font-size:15px;font-weight:700}
.single-product .summary .cheers-serve__list dd{color:var(--navy);font-size:14px}
/* The tabs: hers are three boxes, the open one filled red. */
.single-product.woocommerce div.product .woocommerce-tabs ul.tabs{display:flex;gap:9px;margin:0 0 30px;padding:0;overflow:visible}
.single-product.woocommerce div.product .woocommerce-tabs ul.tabs::before{display:none}
.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li{
  flex:1 1 auto;margin:0;padding:0;border:1px solid var(--card-line);border-radius:4px;background:#fff;
  box-shadow:0 1px 2px rgba(49,62,73,.06);text-align:center;
}
.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  justify-content:center;min-height:42px;padding:0 18px;
  font-size:15px;font-weight:400;text-transform:uppercase;color:var(--ink-2);
}
.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:var(--brand);border-color:var(--brand)}
.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:#fff;font-weight:700}
/* The panel's own heading repeats the tab's word, which she leaves out. */
.single-product.woocommerce div.product .woocommerce-tabs .panel > h2:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.single-product.woocommerce div.product .woocommerce-tabs .panel{font-size:14px;line-height:2.2;color:var(--navy)}
/* Mixers and Ice: a full-width band of her cards, at her card width. */
.single-product #content div.product .cheers-mixers{margin:70px 0 0;padding:28px 32px 34px;border-radius:6px;background:var(--tint)}
.single-product .cheers-mixers__heading{margin:0 0 16px;font-size:26px;font-weight:700;color:var(--navy)}
.single-product .cheers-mixers__list{grid-template-columns:repeat(auto-fill,268px);gap:19px}
.cheers-mixers .cheers-mixers__item{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 10px;
  padding:16px 18px 18px;border-radius:4px;background:#fff;text-align:start;
}
.cheers-mixers .cheers-mixers__link{display:contents}
.cheers-mixers .cheers-mixers__link img{grid-column:1 / -1;width:100%;height:200px;object-fit:contain;margin:0 0 30px}
.cheers-mixers .cheers-mixers__name{grid-column:1 / -1;font-size:15px;line-height:1.3;color:var(--navy);margin:0 0 20px}
.cheers-mixers .cheers-mixers__price{grid-column:1;font-size:17px;font-weight:700;color:var(--brand)}
.woocommerce .cheers-mixers .cheers-mixers__item a.button.card-add{
  grid-column:2;width:30px;height:30px;min-height:0;padding:0;border-radius:50%;
  background-color:var(--brand);background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);
  background-size:10px 2px,2px 10px;background-position:center;background-repeat:no-repeat;
}
.woocommerce .cheers-mixers .cheers-mixers__item a.button.card-add:hover{background-color:var(--brand-dark)}
.woocommerce .cheers-mixers .cheers-mixers__item .added_to_cart{grid-column:1 / -1;font-size:13px}
.single-product.woocommerce .related > h2{margin:70px 0 24px;font-size:26px;text-transform:capitalize}
@media (max-width:900px){
  .single-product .woocommerce-breadcrumb{margin-bottom:18px}
  .single-product #content div.product .summary > .product_title{font-size:26px}
  .single-product #content div.product .cheers-mixers{margin-top:40px;padding:20px 16px}
  .single-product .cheers-mixers__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .cheers-mixers .cheers-mixers__link img{height:140px;margin-bottom:16px}
  .single-product.woocommerce div.product .woocommerce-tabs ul.tabs li a{padding:0 8px;font-size:13px}
}
@media (max-width:480px){
  .single-product #content div.product .summary > .cheers-pairing{padding-inline-start:0}
  .single-product .summary .cheers-pairing__label{position:static;flex-basis:100%}
  .single-product.woocommerce div.product .woocommerce-tabs ul.tabs{flex-wrap:wrap}
}
/* ==== end Product page ==== */

/* ==== Homepage and shelf (web-pages-1) ====================================
   Her home.png and category.png at 1440, measured region by region. Only the
   look moves here; what each band shows and when is still the Customizer's,
   the collections' and the widgets' own. */

/* Homepage rhythm: 76px from the slider to the tiles, ~130px from one band's
   prices to the next band's heading, 76px either side of the duo. */
.home .section--tight{padding-block:38px}
.home .promo + .section--tight{padding-top:76px}
.home .section__head{margin-bottom:14px}
.home .collection .section__head{margin-bottom:4px}
.slider__nav--prev{inset-inline-start:21px}
.slider__nav--next{inset-inline-end:21px}
/* Two lines at her measure, in her ink, rather than three narrow ones. */
.home .collection__copy{max-width:910px;color:var(--navy);margin:0 0 18px}
.home .woocommerce ul.products,.home .collection__items{gap:18px}
.home .rewards{border:0;margin-top:38px}
.home .rewards .wrap{padding-block:30px 30px}
.home .rewards__sub{max-width:none;color:var(--navy)}
.home .rewards__steps{margin-top:24px}
.home .rewards__num{border-color:#E8EDF1}
.home .rewards__step h3{color:var(--navy)}
.home .rewards__step p{color:var(--navy)}
.home .site-footer{margin-top:28px}

/* The shelf: a framed rail of 286px, then the title row with the sort beside
   it, the count under the title, and three cards across. */
.shop-layout--rail{padding-top:38px}
.woocommerce .woocommerce-breadcrumb{font-size:13px;color:var(--navy);margin-bottom:24px}
.shop-main{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;align-content:start}
.shop-main > *{grid-column:1 / -1}
.shop-main > .woocommerce-breadcrumb{grid-row:1}
.shop-main > .woocommerce-products-header{grid-column:1;grid-row:2;align-self:center}
.shop-main > .woocommerce-ordering{grid-column:2;grid-row:2;align-self:center;margin:0}
.shop-main > .woocommerce-result-count{grid-column:1;grid-row:3;margin:4px 0 28px;float:none;font-size:15px;color:var(--navy)}
.woocommerce-products-header__title.page-title{font-size:26px;font-weight:700;line-height:1.3;color:var(--brand);margin:0}
.woocommerce .shop-main .woocommerce-ordering select{
  appearance:none;-webkit-appearance:none;width:286px;max-width:100%;height:42px;
  border:1px solid var(--rule);border-radius:4px;background-color:var(--paper);
  padding:0 40px 0 17px;font-size:15px;color:var(--navy);cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23313E49' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 18px center;
}
[dir="rtl"] .woocommerce .shop-main .woocommerce-ordering select{padding:0 17px 0 40px;background-position:left 18px center}

@media (min-width:1101px){
  .shop-layout--rail{grid-template-columns:286px minmax(0,1fr);gap:19px}
  .shop-layout--rail .woocommerce ul.products,
  .woocommerce .shop-layout--rail ul.products{grid-template-columns:repeat(3,1fr);gap:18px}
  .shop-layout--rail .shop-filters{border:1px solid var(--field);border-radius:4px;padding:18px 17px 6px;position:static}
}

/* The rail's groups: her red heads at 17px, ink options, a rule between. */
.shop-filters .widget{border-bottom:1px solid var(--field);padding-bottom:14px;margin-bottom:18px}
.shop-filters .widget:last-child{border-bottom:0;margin-bottom:0}
.shop-filters .widget-title,.shop-filters h2{font-size:17px;font-weight:700;letter-spacing:.01em;margin:0 0 6px}
.shop-filters li{padding-block:0;font-size:13.5px;color:var(--navy)}
.shop-filters li a{color:var(--navy)}
.shop-filters .count{color:var(--navy);font-size:12px;margin-inline-start:6px}
.shop-filters .cheers-term-filter li a .count{margin-inline-start:8px}
.shop-filters li > .count{margin-inline-start:2px}
/* The category tree: top level in 600, each level ruled down its leading
   side, the shelf you are on in red. The count is a sibling of the link here,
   so the link stays inline beside it rather than pushing it down a line. */
.shop-filters .product-categories li > a,
.shop-filters .woocommerce-widget-layered-nav-list__item > a{display:inline-flex}
.shop-filters .product-categories > li > a{font-weight:600}
.shop-filters .product-categories .children{border-inline-start:1px solid var(--field);padding-inline-start:12px;margin:0 0 2px}
.shop-filters .product-categories .children a,.shop-filters .product-categories .children .count{color:var(--stone)}
.shop-filters .product-categories li.current-cat > a,
.shop-filters .product-categories li.current-cat > .count{color:var(--brand);font-weight:700}
/* PRICE: a hairline red track, hollow handles, and her dark Filter pill. */
.woocommerce .shop-filters .widget_price_filter .ui-slider{height:2px;background:var(--field);margin:2px 5px 0}
.woocommerce .shop-filters .widget_price_filter .ui-slider .ui-slider-range{height:2px;background:var(--brand)}
.woocommerce .shop-filters .widget_price_filter .ui-slider .ui-slider-handle{width:11px;height:11px;top:-4.5px;border-width:1.5px;margin-inline-start:-5px}
.woocommerce .shop-filters .widget_price_filter .price_slider_amount{margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.shop-filters .widget_price_filter .price_slider_amount .button{background:var(--navy);color:#fff;border-radius:4px;padding:0 14px;min-height:25px;font-size:12px;font-weight:700;float:none}
.woocommerce .shop-filters .widget_price_filter .price_slider_amount .button:hover{background:var(--ink)}
.shop-filters .widget_price_filter .price_label{font-size:12px;color:var(--navy);margin-inline-start:auto}

@media (max-width:760px){
  .shop-main{display:block}
  .woocommerce .shop-main .woocommerce-ordering{float:none;margin:0 0 18px}
  .woocommerce .shop-main .woocommerce-ordering select{width:100%}
}
/* ==== end Homepage and shelf ==== */

/* ==== Her Basket (preview/screens/web/cart.png, cart-2.png) ====
   Notices and the table in the left column; CART TOTAL beside them as a grey
   panel that starts level with the first notice. Figures in red, labels in
   uppercase ink, rules between the totals rows. The minimum-order note, the
   area notice and the "added" messages all keep their wording; they are drawn
   as her grey notice box. */
.woocommerce-cart .entry--commerce .woocommerce{grid-template-columns:minmax(0,1fr) 403px;column-gap:18px;row-gap:0}
.woocommerce-cart .entry--commerce .woocommerce > .woocommerce-notices-wrapper{grid-column:1;margin-bottom:12px}
.woocommerce-cart .entry--commerce .woocommerce > .woocommerce-notices-wrapper:not(:has(*)){display:none}
.woocommerce-cart .entry--commerce .woocommerce-cart-form{grid-column:1;grid-row:2}
.woocommerce-cart .entry--commerce .cart-collaterals{grid-column:2;grid-row:1 / span 3}
:is(.woocommerce-cart,.woocommerce-checkout) .entry--commerce :is(.woocommerce-info,.woocommerce-message,.woocommerce-error){
  margin:0 0 12px;padding:11px 15px;border:1px solid #C6CACD;border-radius:2px;
  background:var(--panel);color:var(--navy);font-size:15px;line-height:1.5;list-style:none;
}
:is(.woocommerce-cart,.woocommerce-checkout) .entry--commerce :is(.woocommerce-info,.woocommerce-message,.woocommerce-error)::before{display:none}
:is(.woocommerce-cart,.woocommerce-checkout) .entry--commerce :is(.woocommerce-info,.woocommerce-message,.woocommerce-error) li{margin:0;padding:0}
:is(.woocommerce-cart,.woocommerce-checkout) .entry--commerce :is(.woocommerce-info,.woocommerce-message) a:not(.button){color:var(--brand);font-weight:700}
:is(.woocommerce-cart,.woocommerce-checkout) .entry--commerce :is(.woocommerce-info,.woocommerce-message) a.button{float:right;margin:-4px 0 -4px 12px;min-height:30px;padding:5px 14px;border-radius:4px;font-size:14px}
:is(.woocommerce-cart,.woocommerce-checkout) .entry--commerce .cheers-today{
  margin:0 0 12px;padding:11px 15px;border:1px solid var(--ok);border-radius:2px;
  background:var(--ok-bg);color:var(--ok);font-size:15px;font-weight:400;
}
.woocommerce-cart .entry--commerce .woocommerce-cart-form .cheers-today{margin-bottom:44px}
/* The table. */
.woocommerce-cart .entry--commerce table.shop_table{border-collapse:collapse;border-radius:0}
.woocommerce-cart .entry--commerce table.shop_table thead th{
  padding:0 8px 14px;border-bottom:1px solid #A5ABAF;
  font-size:15px;font-weight:700;letter-spacing:0;text-transform:uppercase;color:var(--navy);
}
.woocommerce-cart .entry--commerce table.shop_table td{padding:16px 8px;border-top:0;border-bottom:1px solid #DBDDDF;font-size:15px;color:var(--navy)}
.woocommerce-cart .entry--commerce table.shop_table td.product-remove{width:48px;text-align:center}
.woocommerce-cart .entry--commerce table.shop_table td.product-remove a.remove{color:var(--brand)!important;font-size:24px;font-weight:400}
.woocommerce-cart .entry--commerce table.shop_table td.product-remove a.remove:hover{background:none;color:var(--brand-dark)!important}
.woocommerce-cart .entry--commerce table.shop_table td.product-thumbnail{width:120px;text-align:center}
.woocommerce-cart .entry--commerce table.shop_table td.product-thumbnail img{width:62px;height:62px;background:none}
.woocommerce-cart .entry--commerce table.shop_table td.product-name a{color:var(--navy)}
.woocommerce-cart .entry--commerce table.shop_table :is(td.product-price,td.product-subtotal){color:var(--brand)}
.woocommerce-cart .entry--commerce table.shop_table .quantity .qty{
  width:60px;height:34px;padding:0 6px 0 16px;border:1px solid var(--brand);border-radius:6px;
  font-size:15px;color:var(--navy);text-align:start;background:#fff;
}
.woocommerce-cart .entry--commerce table.shop_table td.actions{padding:40px 0 0;border-bottom:0}
.woocommerce-cart .entry--commerce td.actions #coupon_code{flex:0 0 200px;min-width:0;height:44px;border:1px solid #C6CACD;border-radius:4px;font-size:14px;color:var(--navy)}
.woocommerce-cart .entry--commerce td.actions .button{min-height:42px;padding:0 20px;border-radius:4px;font-size:16px}
.woocommerce-cart .entry--commerce td.actions button[name="update_cart"]:disabled{background:var(--brand-soft);color:#fff;opacity:1;padding:0 32px}
/* CART TOTAL. */
.woocommerce-cart .entry--commerce .cart-collaterals .cart_totals{padding:18px 17px;border:0;border-radius:4px;background:var(--panel)}
.woocommerce-cart .entry--commerce .cart_totals h2{margin:0 0 42px;font-size:18px;text-transform:uppercase;color:var(--navy)}
.woocommerce-cart .entry--commerce .cart_totals table.shop_table{border:0;border-collapse:collapse}
.woocommerce-cart .entry--commerce .cart_totals table.shop_table :is(th,td){padding:18px 0;border:0;border-bottom:1px solid #90989D;background:none;font-size:15px;color:var(--navy);vertical-align:top}
.woocommerce-cart .entry--commerce .cart_totals table.shop_table tr:first-child :is(th,td){padding-top:0}
.woocommerce-cart .entry--commerce .cart_totals table.shop_table th{width:110px;font-weight:700;text-transform:uppercase;letter-spacing:0}
.woocommerce-cart .entry--commerce .cart_totals :is(.cart-subtotal,.order-total) td,
.woocommerce-cart .entry--commerce .cart_totals .order-total .amount{color:var(--brand);font-size:15px;font-weight:600}
.woocommerce-cart .entry--commerce .cart_totals .order-total :is(th,td){padding-top:26px;padding-bottom:22px}
/* Delivery or collection, as her red radios. */
:is(.woocommerce-cart,.woocommerce-checkout) .woocommerce-shipping-methods{margin:0;padding:0;list-style:none}
:is(.woocommerce-cart,.woocommerce-checkout) .woocommerce-shipping-methods li{display:flex;align-items:center;gap:8px;margin:0 0 9px;text-indent:0}
:is(.woocommerce-cart,.woocommerce-checkout) .woocommerce-shipping-methods li:last-child{margin-bottom:0}
:is(.woocommerce-cart,.woocommerce-checkout) .woocommerce-shipping-methods li input{margin:0;accent-color:var(--brand);width:14px;height:14px}
:is(.woocommerce-cart,.woocommerce-checkout) .woocommerce-shipping-methods li label{margin:0;font-weight:400;color:var(--navy)}
:is(.woocommerce-cart,.woocommerce-checkout) .woocommerce-shipping-methods li input:checked + label,
:is(.woocommerce-cart,.woocommerce-checkout) .woocommerce-shipping-methods li input:checked + label .amount{color:var(--brand);font-weight:700}
/* Where it goes: the address, and her pink square pencil to change it. The
   words stay inside the link for a screen reader. */
/* Her SHIPPING TO row: the sentence under its own rule, across the panel,
   with the pencil at the end of the line. */
.woocommerce-cart .entry--commerce .shipping .woocommerce-shipping-destination{
  margin:18px 0 0;margin-inline-start:-110px;padding:18px 0 0;padding-inline-end:56px;
  border-top:1px solid #90989D;color:var(--navy);min-height:60px;
}
.woocommerce-cart .entry--commerce .shipping .woocommerce-shipping-destination strong{font-weight:400}
.woocommerce-cart .entry--commerce .woocommerce-shipping-calculator{position:relative}
.woocommerce-cart .entry--commerce .woocommerce-shipping-destination + .woocommerce-shipping-calculator a.shipping-calculator-button{position:absolute;inset-inline-end:0;top:-54px;margin:0}
.woocommerce-cart .entry--commerce a.shipping-calculator-button{
  width:42px;height:42px;min-height:0;padding:0;margin:8px 0 0;justify-content:center;
  border-radius:6px;background:#EFDBE2;font-size:0;color:var(--brand);text-decoration:none;
}
.woocommerce-cart .entry--commerce a.shipping-calculator-button::before{
  content:"";width:22px;height:22px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.1 2.1 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.1 2.1 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.woocommerce-cart .entry--commerce a.shipping-calculator-button:hover{background:var(--brand-soft)}
/* The address form, when it is open: her labelled fields. */
.woocommerce-cart .entry--commerce .shipping-calculator-form{padding-top:14px}
.woocommerce-cart .entry--commerce .shipping-calculator-form .form-row{margin:0 0 12px;padding:0}
.woocommerce-cart .entry--commerce .shipping-calculator-form label{display:block;margin:0 0 6px;font-size:15px;color:var(--navy)}
.woocommerce-cart .entry--commerce .shipping-calculator-form label .required{color:var(--brand)}
.woocommerce-cart .entry--commerce .shipping-calculator-form :is(input.input-text,select),
.woocommerce-cart .entry--commerce .shipping-calculator-form .select2-container .select2-selection{
  width:100%;min-height:44px;padding:0 18px;border:1px solid var(--field);border-radius:4px;background:#fff;font-size:15px;color:var(--navy)
}
.woocommerce-cart .entry--commerce .shipping-calculator-form button[name="calc_shipping"]{min-height:42px;padding:0 22px;border-radius:4px;font-size:16px}
/* PROCEED TO CHECKOUT, and the same button while the basket is short. */
.woocommerce-cart .entry--commerce .wc-proceed-to-checkout{padding:34px 0 0}
.woocommerce-cart .entry--commerce .wc-proceed-to-checkout :is(a.checkout-button,.checkout-button){
  display:flex;align-items:center;justify-content:center;min-height:50px;margin:0;padding:0 18px;
  border-radius:4px;font-size:15px;font-weight:700;text-transform:uppercase;
}
.woocommerce-cart .entry--commerce .wc-proceed-to-checkout .checkout-button.is-blocked{background:#EFDCE2;color:#fff;opacity:1}
@media (max-width:900px){
  .woocommerce-cart .entry--commerce .woocommerce{grid-template-columns:1fr;row-gap:20px}
  .woocommerce-cart .entry--commerce .woocommerce-cart-form,.woocommerce-cart .entry--commerce .cart-collaterals{grid-column:1;grid-row:auto}
  .woocommerce-cart .entry--commerce table.shop_table td.product-thumbnail{width:auto}
  .woocommerce-cart .entry--commerce .shipping .woocommerce-shipping-destination{margin-inline-start:0}
  .woocommerce-cart .entry--commerce td.actions #coupon_code{flex:1 1 auto;min-width:0}
}
/* ==== end Basket ==== */

/* ==== Her Checkout (preview/screens/web/checkout.png, checkout-2.png, checkout-3.png) ====
   Left: the coupon bar, BILLING DETAILS in a framed panel with the fields two
   to a row, Create an account, then a panel each for Ship to a different
   address, the gift, the order notes and DELIVERY TIME. Right: one grey panel
   holding YOUR ORDER, the payment methods on a darker band under a red rule,
   the terms, the ID notice, and the out-of-stock choice on her green band
   with the button. Every field, rule and choice is the system's own; only the
   arrangement and the drawing are hers. */
.woocommerce-checkout .entry--commerce form.checkout{grid-template-columns:minmax(0,1fr) 403px;column-gap:18px;row-gap:0}
.woocommerce-checkout .entry--commerce :is(.woocommerce-form-coupon-toggle,form.checkout_coupon,form.woocommerce-form-login){max-width:calc(100% - 421px)}
.woocommerce-checkout .entry--commerce form.checkout_coupon{margin:0 0 12px;padding:15px;border:1px solid #C6CACD;border-radius:2px}
.woocommerce-checkout .entry--commerce form.checkout_coupon .input-text{height:44px;border:1px solid var(--field);border-radius:4px;padding:0 14px}
.woocommerce-checkout .entry--commerce form.checkout_coupon .button{min-height:44px;border-radius:4px}
/* Panels. */
.woocommerce-checkout .entry--commerce :is(.woocommerce-billing-fields,.woocommerce-shipping-fields){
  margin:18px 0 0;padding:20px 17px 20px;border:1px solid #C2C6C9;border-radius:8px;background:#fff;
}
.woocommerce-checkout .entry--commerce #customer_details .woocommerce-billing-fields > h3{margin:0 0 22px;font-size:15px;font-weight:700;text-transform:uppercase;color:var(--brand)}
/* The fields, two to a row as she sets them: names, town and governorate,
   postcode and nationality, phone and email; then the pin across. */
.woocommerce-checkout .entry--commerce .woocommerce-billing-fields{display:grid;grid-template-columns:1fr 1fr;column-gap:18px}
.woocommerce-checkout .entry--commerce .woocommerce-billing-fields > *{grid-column:1 / -1;order:20;min-width:0}
.woocommerce-checkout .entry--commerce .woocommerce-billing-fields > h3{order:0}
.woocommerce-checkout .entry--commerce :is(.woocommerce-billing-fields__field-wrapper,.cheers-nationality){display:contents}
.woocommerce-checkout .entry--commerce .woocommerce-billing-fields__field-wrapper > *{grid-column:1 / -1;order:19}
.woocommerce-checkout .entry--commerce #billing_first_name_field{order:1;grid-column:1}
.woocommerce-checkout .entry--commerce #billing_last_name_field{order:2;grid-column:2}
.woocommerce-checkout .entry--commerce #billing_country_field{order:3}
.woocommerce-checkout .entry--commerce #billing_address_1_field{order:4}
.woocommerce-checkout .entry--commerce #billing_address_2_field{order:5}
.woocommerce-checkout .entry--commerce #billing_city_field{order:6;grid-column:1}
.woocommerce-checkout .entry--commerce #billing_state_field{order:7;grid-column:2}
.woocommerce-checkout .entry--commerce #billing_postcode_field{order:8;grid-column:1}
.woocommerce-checkout .entry--commerce #cheers_nationality_field{order:9;grid-column:2}
.woocommerce-checkout .entry--commerce #billing_phone_field{order:10;grid-column:1}
.woocommerce-checkout .entry--commerce #billing_email_field{order:11;grid-column:2}
.woocommerce-checkout .entry--commerce .cheers-checkout-pin{order:12}
.woocommerce-checkout .entry--commerce form.checkout .form-row{float:none;width:auto;margin:0 0 26px;padding:0}
.woocommerce-checkout .entry--commerce .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .entry--commerce .cheers-gift:has(#cheers_gift:checked) .cheers-gift__fields{display:grid;grid-template-columns:1fr 1fr;column-gap:18px}
.woocommerce-checkout .entry--commerce :is(.woocommerce-shipping-fields__field-wrapper,.cheers-gift__fields) > *{grid-column:1 / -1}
.woocommerce-checkout .entry--commerce :is(.woocommerce-shipping-fields__field-wrapper,.cheers-gift__fields) > .form-row-first{grid-column:1}
.woocommerce-checkout .entry--commerce :is(.woocommerce-shipping-fields__field-wrapper,.cheers-gift__fields) > .form-row-last{grid-column:2}
.woocommerce-checkout .entry--commerce :is(#shipping_city_field,#shipping_postcode_field){grid-column:1}
.woocommerce-checkout .entry--commerce :is(#shipping_state_field,#shipping_phone_field){grid-column:2}
.woocommerce-checkout .entry--commerce form.checkout .form-row label{margin:0 0 10px;font-size:15px;font-weight:700;color:var(--navy);line-height:1.3}
.woocommerce-checkout .entry--commerce form.checkout .form-row label .required{color:var(--brand)}
.woocommerce-checkout .entry--commerce form.checkout .form-row label .optional{font-weight:700}
.woocommerce-checkout .entry--commerce form.checkout .form-row :is(input.input-text,select,textarea),
.woocommerce-checkout .entry--commerce form.checkout .select2-container .select2-selection{
  width:100%;min-height:46px;padding:0 18px;border:1px solid var(--field);border-radius:4px;
  background-color:#fff;font-size:15px;color:var(--navy);
}
.woocommerce-checkout .entry--commerce form.checkout .form-row textarea{min-height:46px;padding:11px 18px;line-height:1.5}
.woocommerce-checkout .entry--commerce form.checkout .form-row :is(input.input-text,select,textarea):focus{border-color:var(--navy);outline:2px solid color-mix(in srgb,var(--navy) 25%,transparent);outline-offset:0}
.woocommerce-checkout .entry--commerce form.checkout .select2-container .select2-selection{padding:0 8px}
.woocommerce-checkout .entry--commerce form.checkout .form-row .description{font-size:12.5px;color:var(--ink-2)}
.woocommerce-checkout .entry--commerce form.checkout .form-row select.country_to_state--single{appearance:none;-webkit-appearance:none;min-height:0;padding:0;border:0;background:none;font-weight:400;pointer-events:none}
.woocommerce-checkout .entry--commerce form.checkout .form-row#billing_address_2_field{margin-top:-8px}
/* Drop a pin. */
.woocommerce-checkout .entry--commerce .cheers-pin > label{margin-bottom:8px}
.woocommerce-checkout .entry--commerce .cheers-pin__help{margin:0 0 8px;font-size:15px;color:var(--navy)}
.woocommerce-checkout .entry--commerce .cheers-pin__map{border-radius:4px}
.woocommerce-checkout .entry--commerce .cheers-pin .button{min-height:42px;padding:0 32px;border-radius:4px;font-size:16px;margin-inline-end:12px}
.woocommerce-checkout .entry--commerce .cheers-checkout-pin .form-row{margin-bottom:0}
/* Create an account, and her round toggles for the two optional panels. */
.woocommerce-checkout .entry--commerce .woocommerce-account-fields{margin:22px 0 0}
.woocommerce-checkout .entry--commerce .woocommerce-account-fields .form-row{margin:0}
.woocommerce-checkout .entry--commerce form.checkout :is(.woocommerce-account-fields,#ship-to-different-address,.cheers-gift > .form-row) label{
  display:flex;align-items:center;gap:14px;margin:0;font-size:15px;font-weight:700;color:var(--navy);cursor:pointer;
}
.woocommerce-checkout .entry--commerce form.checkout :is(#ship-to-different-address,.cheers-gift > .form-row) label{text-transform:uppercase}
.woocommerce-checkout .entry--commerce form.checkout :is(#createaccount,#ship-to-different-address-checkbox,#cheers_gift){
  appearance:none;-webkit-appearance:none;flex:none;width:24px;height:24px;margin:0;border:2px solid var(--navy);border-radius:4px;background:#fff;cursor:pointer;
}
.woocommerce-checkout .entry--commerce form.checkout :is(#ship-to-different-address-checkbox,#cheers_gift){border-radius:50%;width:22px;height:22px}
.woocommerce-checkout .entry--commerce form.checkout :is(#ship-to-different-address-checkbox,#cheers_gift):checked{border-color:var(--brand);background:radial-gradient(circle,var(--brand) 0 6px,#fff 6.5px)}
.woocommerce-checkout .entry--commerce form.checkout #createaccount:checked{border-color:var(--brand);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E7184E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/16px no-repeat}
.woocommerce-checkout .entry--commerce form.checkout :is(#createaccount,#ship-to-different-address-checkbox,#cheers_gift):focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.woocommerce-checkout .entry--commerce form.checkout :is(#ship-to-different-address,.cheers-gift > .form-row):has(input:checked) label{color:var(--brand)}
.woocommerce-checkout .entry--commerce .woocommerce-shipping-fields{padding:20px 17px}
.woocommerce-checkout .entry--commerce .woocommerce-shipping-fields #ship-to-different-address{margin:0;font-size:15px}
.woocommerce-checkout .entry--commerce .woocommerce-shipping-fields .shipping_address{padding-top:24px}
/* Notes, delivery time and the gift: a panel each, the gift first, as drawn. */
.woocommerce-checkout .entry--commerce .woocommerce-additional-fields{display:flex;flex-direction:column;gap:28px;margin:28px 0 0;padding:0;border:0;background:none}
.woocommerce-checkout .entry--commerce .woocommerce-additional-fields > *{margin:0;padding:20px 17px 0;border:1px solid #C2C6C9;border-radius:8px;background:#fff}
.woocommerce-checkout .entry--commerce .woocommerce-additional-fields > .cheers-gift{order:-1;padding-bottom:20px}
.woocommerce-checkout .entry--commerce .woocommerce-additional-fields > .cheers-gift > .form-row{margin:0}
.woocommerce-checkout .entry--commerce .woocommerce-additional-fields > h3{display:none}
.woocommerce-checkout .entry--commerce .woocommerce-additional-fields__field-wrapper .form-row{margin-bottom:20px}
.woocommerce-checkout .entry--commerce .cheers-slots{display:grid;grid-template-columns:1fr 1fr;column-gap:18px}
.woocommerce-checkout .entry--commerce .cheers-slots > *{grid-column:1 / -1}
.woocommerce-checkout .entry--commerce .cheers-slots > #cheers_delivery_date_field{grid-column:1}
.woocommerce-checkout .entry--commerce .cheers-slots > #cheers_slot_field{grid-column:2}
.woocommerce-checkout .entry--commerce #customer_details .cheers-slots > h3{margin:0 0 32px;font-size:15px;font-weight:700;text-transform:uppercase;color:var(--brand)}
.woocommerce-checkout .entry--commerce .cheers-gift .cheers-gift__fields{padding-top:14px}
.woocommerce-checkout .entry--commerce .cheers-gift__note{grid-column:1 / -1;margin:0 0 20px;font-size:15px;color:var(--navy)}
.woocommerce-checkout .entry--commerce .cheers-gift__fields .form-row:last-child{margin-bottom:0}
/* YOUR ORDER: the heading inside the grey panel. */
.woocommerce-checkout .entry--commerce form.checkout #order_review_heading{
  margin:0;padding:20px 18px 46px;border-radius:4px 4px 0 0;background:var(--panel);
  font-size:18px;font-weight:700;text-transform:uppercase;color:var(--navy);
}
.woocommerce-checkout .entry--commerce form.checkout #order_review{top:auto;position:static;margin:0;padding:0 18px;border:0;border-radius:0 0 4px 4px;background:var(--panel);overflow:hidden}
.woocommerce-checkout .entry--commerce #order_review table.shop_table,
.woocommerce-checkout .entry--commerce #order_review table.shop_table :is(thead,tbody,tfoot){display:block;margin:0;border:0}
.woocommerce-checkout .entry--commerce #order_review table.shop_table tr{display:flex;align-items:baseline;gap:10px}
.woocommerce-checkout .entry--commerce #order_review table.shop_table :is(th,td){padding:0;border:0;background:none;font-size:15px;color:var(--navy)}
.woocommerce-checkout .entry--commerce #order_review thead th{font-weight:700;text-transform:uppercase;padding-bottom:16px}
.woocommerce-checkout .entry--commerce #order_review thead th.product-total{display:none}
.woocommerce-checkout .entry--commerce #order_review tbody tr{padding:0 0 14px}
.woocommerce-checkout .entry--commerce #order_review tbody tr:last-child{padding-bottom:12px;border-bottom:1px solid #90989D}
.woocommerce-checkout .entry--commerce #order_review tbody td.product-name{flex:1}
.woocommerce-checkout .entry--commerce #order_review tbody td.product-name .product-quantity{font-weight:400;margin-inline-start:4px}
.woocommerce-checkout .entry--commerce #order_review tbody td.product-total{font-weight:700;text-align:end;white-space:nowrap}
.woocommerce-checkout .entry--commerce #order_review tfoot tr{padding:30px 0 20px;border-bottom:1px solid #90989D}
.woocommerce-checkout .entry--commerce #order_review tfoot th{flex:0 0 110px;font-weight:700;text-transform:uppercase}
.woocommerce-checkout .entry--commerce #order_review tfoot td{flex:1;font-weight:400}
.woocommerce-checkout .entry--commerce #order_review tfoot .cart-subtotal td,
.woocommerce-checkout .entry--commerce #order_review tfoot .cart-subtotal .amount{color:var(--brand);font-weight:600}
.woocommerce-checkout .entry--commerce #order_review tfoot tr.order-total{padding:34px 0 30px;border-bottom:0}
.woocommerce-checkout .entry--commerce #order_review tfoot .order-total :is(th,td,.amount){color:var(--brand);font-size:18px;font-weight:700}
/* Payment, on its darker band under a red rule. */
.woocommerce-checkout .entry--commerce #payment{margin:0 -18px;padding:0;border-top:1px solid var(--brand);border-radius:0;background:#E6E7E9}
.woocommerce-checkout .entry--commerce #payment ul.payment_methods{margin:0 18px;padding:24px 0 20px;border:0;border-bottom:1px solid #90989D}
.woocommerce-checkout .entry--commerce form.checkout #payment .wc_payment_method{padding:0 0 10px;gap:8px;line-height:1.35}
.woocommerce-checkout .entry--commerce form.checkout #payment .wc_payment_method > input[type="radio"]{accent-color:var(--brand);width:14px;height:14px}
.woocommerce-checkout .entry--commerce form.checkout #payment .wc_payment_method > label{font-size:15px;font-weight:400;color:var(--navy)}
.woocommerce-checkout .entry--commerce form.checkout #payment .wc_payment_method > input:checked + label{color:var(--brand);font-weight:700}
.woocommerce-checkout .entry--commerce #payment .payment_box{margin:2px 0 4px;padding:0 0 0 22px;background:none;font-size:13px;color:var(--ink-2)}
.woocommerce-checkout .entry--commerce #payment .payment_box::before{display:none}
.woocommerce-checkout .entry--commerce #payment .place-order{margin:0;padding:30px 18px 0}
.woocommerce-checkout .entry--commerce #payment .woocommerce-privacy-policy-text{font-size:15px;line-height:1.6;color:var(--navy)}
.woocommerce-checkout .entry--commerce #payment .woocommerce-privacy-policy-text a{color:var(--navy);text-decoration:underline}
.woocommerce-checkout .entry--commerce #payment .woocommerce-terms-and-conditions-wrapper .form-row{margin:26px 0 0}
.woocommerce-checkout .entry--commerce #payment .woocommerce-form__label-for-checkbox{display:block;position:relative;padding-inline-start:37px;font-size:15px;font-weight:700;color:var(--navy);line-height:1.6}
.woocommerce-checkout .entry--commerce #payment .woocommerce-form__label-for-checkbox input{
  position:absolute;inset-inline-start:0;top:2px;appearance:none;-webkit-appearance:none;flex:none;width:24px;height:24px;margin:0;border:2px solid var(--navy);border-radius:4px;background:#fff;cursor:pointer;
}
.woocommerce-checkout .entry--commerce #payment .woocommerce-form__label-for-checkbox input:checked{border-color:var(--brand);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E7184E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/16px no-repeat}
.woocommerce-checkout .entry--commerce #payment .woocommerce-form__label-for-checkbox input:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.woocommerce-checkout .entry--commerce #payment .woocommerce-terms-and-conditions-link{color:var(--brand)}
.woocommerce-checkout .entry--commerce #payment .cheers-id-notice{margin:34px 0 28px;font-size:15px;line-height:1.6;color:var(--navy)}
.woocommerce-checkout .entry--commerce #payment .cheers-id-notice strong{display:block}
/* If something is out of stock: her green band, which the button sits on. */
.woocommerce-checkout .entry--commerce #payment .cheers-subs{
  margin:0 -18px;padding:30px 18px 20px;border:0;border-top:1px solid var(--brand);border-radius:0;background:#D2E1DA;
}
.woocommerce-checkout .entry--commerce #payment .place-order:has(.cheers-subs) .cheers-subs{padding-bottom:112px}
.woocommerce-checkout .entry--commerce #payment .place-order:has(.cheers-subs) #place_order{position:relative;margin-top:-92px;margin-bottom:22px}
.woocommerce-checkout .entry--commerce #payment .cheers-subs__heading{margin:0 0 16px;font-size:15px;color:var(--navy)}
.woocommerce-checkout .entry--commerce #payment .cheers-subs__help{margin:0 0 36px;font-size:15px;line-height:1.6;color:var(--navy)}
.woocommerce-checkout .entry--commerce #payment .cheers-subs__choice{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:15px;font-weight:400;color:var(--navy)}
.woocommerce-checkout .entry--commerce #payment .cheers-subs__choice:last-of-type{margin:0;padding-bottom:22px;border-bottom:1px solid #90989D}
.woocommerce-checkout .entry--commerce #payment .cheers-subs__choice input{margin:0;accent-color:var(--brand);width:14px;height:14px}
.woocommerce-checkout .entry--commerce #payment .cheers-subs__choice:has(input:checked){color:var(--brand);font-weight:700}
.woocommerce-checkout .entry--commerce form.checkout #place_order{min-height:50px;border-radius:4px;font-size:15px;font-weight:700;text-transform:uppercase}
@media (max-width:900px){
  .woocommerce-checkout .entry--commerce :is(.woocommerce-form-coupon-toggle,form.checkout_coupon,form.woocommerce-form-login){max-width:none}
  .woocommerce-checkout .entry--commerce form.checkout{row-gap:0}
  .woocommerce-checkout .entry--commerce form.checkout #order_review_heading{margin-top:28px}
}
@media (max-width:600px){
  .woocommerce-checkout .entry--commerce :is(.woocommerce-billing-fields,.woocommerce-shipping-fields__field-wrapper,.cheers-gift .cheers-gift__fields,.cheers-slots){grid-template-columns:1fr!important}
  .woocommerce-checkout .entry--commerce :is(.woocommerce-billing-fields,.woocommerce-shipping-fields__field-wrapper,.cheers-gift__fields,.cheers-slots) .form-row{grid-column:1 / -1!important}
}
/* ==== end Checkout ==== */

/* ==== Her Order received (preview/screens/web/order-confirmation.png) ====
   One 792px column: the thank-you line; the order facts in a row with
   upright rules between them; how to pay and WHEN WE ARRIVE; ORDER DETAILS as
   ruled rows with the figures on the right; then billing and shipping side
   by side in framed boxes. Every row the system prints (payment method,
   delivery slot, Order again) stays. */
.woocommerce-order-received .entry--commerce .woocommerce-order{max-width:792px;font-size:15px;color:var(--navy)}
.woocommerce-order-received .entry--commerce .woocommerce-thankyou-order-received{margin:0 0 50px;padding:0;border:0;background:none;font-size:15px;color:var(--navy)}
.woocommerce-order-received .entry--commerce .woocommerce-thankyou-order-received::before{display:none}
.woocommerce-order-received .entry--commerce ul.woocommerce-order-overview{display:flex;flex-wrap:wrap;gap:16px 0;margin:0 0 50px;padding:0}
.woocommerce-order-received .entry--commerce ul.woocommerce-order-overview li{
  margin:0;padding:0 33px;border:0;border-inline-end:1px solid #C2C6C9;
  font-size:15px;font-weight:700;text-transform:uppercase;color:var(--navy);line-height:1.4;
}
.woocommerce-order-received .entry--commerce ul.woocommerce-order-overview li:first-child{padding-inline-start:0}
.woocommerce-order-received .entry--commerce ul.woocommerce-order-overview li:last-child{border-inline-end:0;padding-inline-end:0}
.woocommerce-order-received .entry--commerce ul.woocommerce-order-overview li strong{display:block;margin-top:16px;font-size:15px;font-weight:400;text-transform:none}
.woocommerce-order-received .entry--commerce .woocommerce-order > p{margin:0 0 30px}
.woocommerce-order-received .entry--commerce .woocommerce-order > p.cheers-id-notice{margin:0 0 70px}
.woocommerce-order-received .entry--commerce .woocommerce-order > p.cheers-id-notice strong{display:block;margin:0 0 14px;text-transform:uppercase}
.woocommerce-order-received .entry--commerce .woocommerce-order-details__title{margin:0 0 34px;font-size:18px;font-weight:700;text-transform:uppercase;color:var(--brand)}
.woocommerce-order-received .entry--commerce table.order_details{border:0;border-collapse:collapse;border-radius:0;margin:0 0 42px}
.woocommerce-order-received .entry--commerce table.order_details :is(th,td){padding:0 0 18px;border:0;background:none;font-size:15px;color:var(--navy);letter-spacing:0}
.woocommerce-order-received .entry--commerce table.order_details thead th{font-weight:700;text-transform:uppercase;padding-bottom:20px}
.woocommerce-order-received .entry--commerce table.order_details thead th.product-total{visibility:hidden}
.woocommerce-order-received .entry--commerce table.order_details tbody td.product-name strong{font-weight:400;margin-inline-start:4px}
.woocommerce-order-received .entry--commerce table.order_details :is(td.product-total,tfoot td){text-align:end;font-weight:700}
.woocommerce-order-received .entry--commerce table.order_details tbody tr:last-child td{padding-bottom:20px;border-bottom:1px solid #90989D}
.woocommerce-order-received .entry--commerce table.order_details tfoot :is(th,td){padding:22px 0 20px;border-bottom:1px solid #90989D;font-weight:700;text-transform:uppercase}
.woocommerce-order-received .entry--commerce table.order_details tfoot td small{font-size:inherit;font-weight:700}
.woocommerce-order-received .entry--commerce table.order_details tfoot tr:last-child :is(th,td){border-bottom:0;padding-top:40px}
.woocommerce-order-received .entry--commerce table.order_details tfoot tr:last-child th{display:none}
.woocommerce-order-received .entry--commerce table.order_details tfoot tr:last-child td{text-align:start}
.woocommerce-order-received .entry--commerce table.order_details .order-actions-button{display:inline-flex;align-items:center;min-height:42px;padding:0 30px;border-radius:4px;font-size:16px;text-transform:none}
.woocommerce-order-received .entry--commerce .woocommerce-customer-details .addresses{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.woocommerce-order-received .entry--commerce .woocommerce-customer-details .addresses::before,
.woocommerce-order-received .entry--commerce .woocommerce-customer-details .addresses::after{display:none}
.woocommerce-order-received .entry--commerce .woocommerce-customer-details .woocommerce-column{float:none;width:auto;padding:24px 18px 14px;border:1px solid #90989D;border-radius:4px}
.woocommerce-order-received .entry--commerce .woocommerce-customer-details .woocommerce-column__title{margin:0 0 30px;font-size:18px;font-weight:700;text-transform:uppercase;color:var(--brand)}
.woocommerce-order-received .entry--commerce .woocommerce-customer-details address{padding:0;border:0;font-style:normal;font-size:15px;line-height:1.9;color:var(--navy)}
.woocommerce-order-received .entry--commerce .woocommerce-customer-details address p{margin:0;padding:0}
.woocommerce-order-received .entry--commerce .woocommerce-customer-details address p::before{display:none}
@media (max-width:700px){
  .woocommerce-order-received .entry--commerce ul.woocommerce-order-overview li{padding:0 16px}
  .woocommerce-order-received .entry--commerce .woocommerce-customer-details .addresses{grid-template-columns:1fr}
}
/* ==== end Order received ==== */

/* ==== Verification fixes (web-verify) ====================================== */
/* #customer_details (and the basket's .cart-collaterals) spans the grid's three rows. With all three "auto" Chrome
   shared its height across them and the empty third row grew to ~850px, a
   blank band between the form and the footer. 1fr there takes only what is
   left over. Phones stack the form in one column and need no explicit rows. */
.woocommerce-checkout .entry--commerce form.checkout,
.woocommerce-cart .entry--commerce .woocommerce{grid-template-rows:auto auto 1fr}
@media (max-width:900px){
  /* Her two-column rule above comes after the old phone rule and squeezed the
     form into a 0px column beside the 403px summary. */
  .woocommerce-checkout .entry--commerce form.checkout{grid-template-columns:1fr;grid-template-rows:none}
  .woocommerce-cart .entry--commerce .woocommerce{grid-template-rows:none}
}
/* Her footer (bottom of every web PNG): a 170px mark (190px image, its 16/300
   transparent margins included), the brand block set in from the rule and the
   three menus at her x positions; headings without tracking, 14px links. */
.footer-grid{grid-template-columns:519fr 217fr 226fr 234fr;gap:0}
.footer-brand{padding-inline-start:113px}
.site-footer .footer-logo{width:190px;max-width:100%;margin-inline-start:calc(190px * -16 / 300)}
.footer-blurb{font-size:15px;margin-top:22px}
.footer-tel{font-size:15px;margin-top:0}
.footer-col h2{letter-spacing:0;font-size:13px}
.footer-list a{font-size:14px}
@media (max-width:1100px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:26px}
  .footer-brand{padding-inline-start:0}
}
/* ==== end Verification fixes ==== */

/* ==== Delivery area pages (/delivery/, /delivery/<area>/) ====
   In the design's language: red title, the grey panel her cart totals use for
   facts, bordered cards, pill links. */
.footer-areas a{color:inherit;text-decoration:none}
.footer-areas a:hover,.footer-areas a:focus-visible{text-decoration:underline}
.area-page{padding-block:24px 56px}
.area-page__crumbs{font-size:13px;color:var(--stone);margin-bottom:14px}
.area-page__crumbs a{color:inherit}
.area-page__title{font-size:28px;font-weight:700;color:var(--brand);margin:0 0 10px;text-wrap:balance}
.area-page__lede{max-width:70ch;color:var(--ink);font-size:16px;line-height:1.6;margin:0 0 20px}
.area-page__facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0 0 28px;background:var(--tint,#F0F1F2);border-radius:6px;overflow:hidden}
.area-page__facts>div{padding:16px 18px;border-inline-end:1px solid var(--rule,#DDE4EA)}
.area-page__facts>div:last-child{border-inline-end:0}
.area-page__facts dt{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--stone)}
.area-page__facts dd{margin:4px 0 0;font-size:18px;font-weight:700;color:var(--ink)}
.area-page__h2{font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--ink);margin:28px 0 12px}
.area-page__branches{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.area-page__branch{display:grid;gap:4px;padding:16px 18px;border:1px solid var(--rule,#E5E7E8);border-radius:6px;font-size:14px;color:var(--stone)}
.area-page__branch strong{color:var(--ink);font-size:15px}
.area-page__shelves{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.area-page__shelves a{display:inline-flex;gap:6px;align-items:baseline;padding:8px 14px;border:1px solid var(--rule,#E5E7E8);border-radius:999px;color:var(--ink);text-decoration:none;font-weight:600}
.area-page__shelves a:hover,.area-page__shelves a:focus-visible{border-color:var(--brand);color:var(--brand)}
.area-page__shelves small{font-weight:400;color:var(--stone)}
.area-page__faq h3{font-size:15px;font-weight:700;margin:18px 0 4px;color:var(--ink)}
.area-page__faq p{margin:0;max-width:70ch;color:var(--ink);line-height:1.6}
.area-page__others a{color:var(--brand);font-weight:600}
.area-page__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.area-page__card{display:grid;gap:12px;padding:18px;border:1px solid var(--rule,#E5E7E8);border-radius:8px;text-decoration:none;color:var(--ink)}
.area-page__card:hover,.area-page__card:focus-visible{border-color:var(--brand)}
.area-page__card strong{font-size:18px;color:var(--brand)}
.area-page__card .area-page__facts{margin:0;grid-template-columns:repeat(3,minmax(0,1fr))}
.area-page__card .area-page__facts>div{padding:10px 12px}
.area-page__card .area-page__facts dd{font-size:14px}
@media (max-width:600px){
  .area-page__facts{grid-template-columns:1fr}
  .area-page__facts>div{border-inline-end:0;border-bottom:1px solid var(--rule,#DDE4EA)}
  .area-page__facts>div:last-child{border-bottom:0}
  .area-page__title{font-size:24px}
}

/* Shelf introduction and the brand line on a product (search engine text that
   is also useful to read). */
.shelf-intro{max-width:72ch;margin:-4px 0 14px;color:var(--stone);font-size:14px;line-height:1.55}
.product-brand{display:block;margin-top:4px}
.product-brand a{color:var(--brand);font-weight:600}

/* The client's v2 filter rail (Cheers.pdf page 2): chips for the category and
   for every short list, what is chosen at the top with one Clear all. */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;min-height:34px;padding:0 15px;border:1px solid var(--field);border-radius:17px;background:var(--paper);color:var(--ink);font-size:13px;text-decoration:none}
.chip:hover{border-color:var(--brand);color:var(--brand)}
.chip.is-chosen{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700}
.chips__in{margin:14px 0 8px;font-size:12px;font-weight:600;color:var(--ink-2)}
.shop-filters .widget_layered_nav ul,.shop-filters .cheers-term-filter ul{display:flex;flex-wrap:wrap;gap:8px}
.shop-filters .widget_layered_nav li a,.shop-filters .cheers-term-filter li a{display:inline-flex;align-items:center;gap:5px;min-height:34px;padding:0 14px;border:1px solid var(--field);border-radius:17px;font-size:13px;color:var(--ink);text-decoration:none}
.shop-filters .widget_layered_nav li.chosen a,.shop-filters .cheers-term-filter li a.is-chosen{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700}
.shop-filters .widget_layered_nav li .count{display:none}
.cheers-chosen{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px;padding:10px 12px;border-radius:7px;background:var(--chosen,#FCEAEE);font-size:12.5px;font-weight:600;color:var(--ink)}
.cheers-chosen p{margin:0}
.cheers-clear{flex:none;color:var(--brand);font-weight:700;text-decoration:none}

/* The client's v2 buying (Cheers.pdf pages 3 and 7): a stepper beside a
   labelled Add to basket that carries the price; sizes and cases as cards. */
.single-product #content div.product .summary > form.cart:not(.variations_form){flex:1 1 100%;order:4;display:flex;align-items:center;gap:12px;margin:16px 0 0}
.cheers-qty{display:inline-flex;align-items:center;height:52px;border:1px solid var(--field);border-radius:26px;padding:0 6px;flex:none}
.cheers-qty__btn{width:40px;height:44px;border:0;background:none;font-size:20px;color:var(--ink);cursor:pointer}
.single-product #content div.product form.cart .cheers-qty .quantity{margin:0}
.single-product #content div.product form.cart .cheers-qty .qty{width:42px;height:44px;border:0;text-align:center;font-size:17px;font-weight:700;-moz-appearance:textfield}
.cheers-qty .qty::-webkit-inner-spin-button,.cheers-qty .qty::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.single-product #content div.product form.cart button.cheers-add{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:12px;height:52px;padding:0 20px;border:0;border-radius:26px;background:var(--brand);color:#fff;font-size:16px;font-weight:700}
.single-product #content div.product form.cart button.cheers-add:hover{background:var(--brand-dark)}
.cheers-add__price{padding-inline-start:12px;border-inline-start:1px solid rgba(255,255,255,.55)}
.single-product #content div.product .summary > .product_title{font-size:30px;font-weight:700;color:var(--ink)}
.cheers-sizes__list{display:grid!important;grid-template-columns:1fr 1fr;gap:12px}
.cheers-sizes__option{display:flex!important;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 14px!important;border:1px solid var(--field)!important;border-radius:9px!important}
.cheers-sizes__option.is-current{border:1.5px solid var(--brand)!important;background:var(--chosen,#FCEAEE)}
.cheers-sizes__kind{font-size:14px;font-weight:700;color:var(--ink)}
.cheers-sizes__size{font-size:13px;color:var(--ink-2)}
@media (max-width:760px){
  .single-product #content div.product .summary > .product_title{font-size:22px}
  .single-product #content div.product form.cart button.cheers-add{font-size:14.5px;padding:0 14px}
}

/* The client's v2 basket: what one costs under the name, the address row in
   place of WooCommerce's "Shipping to Cairo." line. */
.cheers-each{display:block;margin-top:3px;font-size:12.5px;font-weight:400;color:var(--ink-2)}
.woocommerce-cart .woocommerce-shipping-destination,.woocommerce-cart .shipping-calculator-button{display:none}
.cheers-delivery-fee td{color:var(--brand);font-weight:700}
.cheers-delivery-address td{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;color:var(--ink-2)}
.cheers-edit{flex:none;width:36px;height:36px;border-radius:6px;background:var(--chosen,#FCEAEE) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8194F' stroke-width='1.8'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3C/svg%3E") center/18px no-repeat}
@media (max-width:760px){
  /* A line per card on a phone, as the app draws it. */
  .woocommerce-cart table.cart tr.cart_item{display:grid;grid-template-columns:28px 52px 1fr auto;align-items:center;gap:4px 10px;border:1px solid var(--rule);border-radius:9px;padding:10px 12px;margin-bottom:10px}
  .woocommerce-cart table.cart tr.cart_item td{border:0!important;padding:0!important;background:none!important}
  .woocommerce-cart table.cart tr.cart_item td::before{display:none!important}
  .woocommerce-cart table.cart tr.cart_item td.product-remove{grid-row:1/3}
  .woocommerce-cart table.cart tr.cart_item td.product-thumbnail{display:block!important;grid-row:1/3}
  .woocommerce-cart table.cart tr.cart_item td.product-name{grid-column:3;text-align:start!important;font-weight:700}
  .woocommerce-cart table.cart tr.cart_item td.product-price{display:none!important}
  .woocommerce-cart table.cart tr.cart_item td.product-quantity{grid-column:3;text-align:start!important}
  .woocommerce-cart table.cart tr.cart_item td.product-subtotal{grid-column:4;grid-row:1/3;color:var(--brand);font-weight:700;font-size:16px}
}

/* The client's v2 checkout steps (assets/js/checkout-steps.js). */
.cheers-step-off{display:none!important}
.cheers-steps{margin:0 0 20px}
.cheers-steps__who{display:flex;justify-content:flex-end;gap:10px;font-size:13px;color:var(--ink-2);margin:0 0 12px}
.cheers-steps__who a{color:var(--brand);font-weight:700;padding-inline-start:10px;border-inline-start:1px solid var(--field)}
.cheers-steps__list{display:flex;align-items:center;gap:8px;list-style:none;margin:0 0 18px;padding:0;font-size:13px;color:var(--stone)}
.cheers-steps__list li{display:flex;align-items:center;gap:6px;white-space:nowrap}
.cheers-steps__list li + li::before{content:"";width:28px;height:1px;background:var(--field);margin-inline-end:4px}
.cheers-steps__list i{width:24px;height:24px;border-radius:50%;background:var(--panel,#F0F1F2);display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:700;color:var(--ink-2)}
.cheers-steps__list .is-on{color:var(--ink);font-weight:700}
.cheers-steps__list .is-on i{background:var(--brand);color:#fff}
.cheers-steps__list .is-done i{background:var(--ok);color:#fff}
.cheers-ways{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:620px}
.cheers-way{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 14px;border:1px solid var(--field);border-radius:9px;background:var(--paper);font:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;text-align:start}
.cheers-way i{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--stone-soft);flex:none}
.cheers-way.is-on{border:1.5px solid var(--brand);background:var(--chosen,#FCEAEE)}
.cheers-way.is-on i{border:5px solid var(--brand)}
.cheers-steps__bar{margin:22px 0 0;padding:16px 0 0;border-top:1px solid var(--rule)}
.cheers-steps__sum{margin:0 0 10px;font-size:13.5px;color:var(--ink-2)}
.cheers-steps__sum b{color:var(--ink)}
.cheers-steps__next{width:100%;max-width:420px;min-height:48px;border-radius:8px!important;background:var(--brand)!important;color:#fff!important;font-weight:700}
.cheers-steps__next:disabled{opacity:.4;cursor:not-allowed}
.cheers-steps__need{margin:8px 0 0;font-size:13px;color:var(--ink)}
.cheers-steps__back{display:block;margin:12px 0 0;border:0;background:none;color:var(--brand);font:inherit;font-weight:700;cursor:pointer;padding:6px 0}
/* One column while stepping: each step is a single short form. */
.cheers-has-steps form.checkout #customer_details{display:block}
.cheers-has-steps form.checkout #customer_details .col-1,.cheers-has-steps form.checkout #customer_details .col-2{width:100%;float:none;max-width:620px}

/* The client's v2 strip (Cheers.pdf page 1), as the app draws it: one
   rounded card holding a pin, "Deliver to" over the area, then the fee and
   the minimum. The location tools and the language sit beside it, or under
   it on a phone. */
.deliver{background:var(--paper)}
.deliver__card{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 10px;border-radius:8px;background:var(--tint)}
.deliver__pin{width:20px;height:20px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23313E49' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-5.6-6.5-11a6.5 6.5 0 0 1 13 0c0 5.4-6.5 11-6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.3'/%3E%3C/svg%3E") center/contain no-repeat}
.deliver__where{display:flex;flex-direction:column;line-height:1.15}
.deliver .deliver__label{font-size:10.5px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--stone)}
.deliver__card .region-select{border:0;background-color:transparent;padding:0 18px 0 0;margin:0;font-size:15px;font-weight:700;color:var(--ink);min-height:0;height:auto}
.deliver__card .deliver__fees{padding-inline-start:12px;border-inline-start:1px solid var(--rule)}
@media (max-width:760px){
  .deliver .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px 16px 10px}
  .deliver__card{display:flex;width:100%}
  .deliver__card{min-width:0}
  .deliver__where{min-width:0;flex:1 1 auto}
  .deliver__card .region-select{max-width:100%;width:100%;text-overflow:ellipsis}
  .deliver__card .deliver__fees{margin-inline-start:auto;flex:none;flex-direction:column;align-items:flex-end;gap:1px;font-size:12px}
  .deliver__card .deliver__dot{display:none}
  .deliver__card .deliver__fees .deliver__fact{font-size:12px;white-space:nowrap}
  .deliver .spacer{display:none}
  .deliver__geo{order:2;min-height:28px}
  .deliver__lang{order:3;margin-inline-start:auto}
  .deliver__geo .cheers-geo__msg{display:none}
  .deliver__geo .cheers-geo__btn{padding:4px 10px;font-size:12px;min-height:28px;border-radius:14px}
  .deliver__geo .cheers-geo__link{font-size:12px}
  .deliver__state{display:none}
  .deliver__state--out{display:inline-flex;order:4;width:100%}
}


/* Governorate and postcode are answered by the delivery area (cheers-core
   Cheers_Cart::area_answers). WooCommerce's address script turns the hidden
   governorate back into a dropdown for Egypt, so its row is kept out of sight;
   the value still posts, and the server sets it from the area. */
.woocommerce-checkout #billing_state_field,.woocommerce-checkout #shipping_state_field,
.woocommerce-checkout #billing_postcode_field,.woocommerce-checkout #shipping_postcode_field{display:none!important}

/* Buy as (Peter Malak, 8 November): a single bottle or a case, each with its
   price, on its own line above the quantity. A case sets the quantity. */
.single-product #content div.product .summary > form.cart:has(.cheers-buy-as){flex-wrap:wrap}
.cheers-buy-as{flex:0 0 100%;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px;padding:0;border:0;min-width:0}
.cheers-buy-as__label{width:100%;margin:0 0 2px;padding:0;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.cheers-buy-as__option{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 15px;border:1px solid var(--field);border-radius:20px;background:var(--paper);color:var(--ink);font-size:13.5px;cursor:pointer}
.cheers-buy-as__option input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.cheers-buy-as__price{color:var(--ink-2,#555);font-size:12.5px}
.cheers-buy-as__option:has(input:checked){background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700}
.cheers-buy-as__option:has(input:checked) .cheers-buy-as__price{color:#fff}
.cheers-buy-as__option:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:2px}

/* Product page: buying first (Peter Malak, 8 November). Name, size, price,
   Buy as, quantity and Add to basket open the page; the reassurance sits under
   the button; serving notes, pairing, meta and the short description follow.
   The bottle is shown smaller so it fits beside them; the file is untouched. */
.single-product #content div.product .summary > .cheers-reassure{order:5}
.single-product #content div.product .summary > .cheers-wishlist-note{order:6}
.single-product #content div.product .summary > .cheers-pairing{order:7}
.single-product #content div.product .summary > .cheers-serve{order:8}
.single-product #content div.product .summary > .product_meta{order:9}
.single-product #content div.product .summary > .woocommerce-product-details__short-description{order:10}
.single-product #content div.product .woocommerce-product-gallery img{max-height:420px;width:auto;max-width:100%;margin-inline:auto;object-fit:contain}
@media (max-width: 760px){
  .single-product #content div.product .woocommerce-product-gallery img{max-height:300px}
}

/* Under Add to basket: how to pay, the delivery, the licence. */
.cheers-reassure{margin:14px 0 0;padding:12px 14px;border:1px solid var(--field);border-radius:10px;background:var(--paper);font-size:13px;color:var(--ink)}
.cheers-reassure__pay{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0}
.cheers-reassure__label{font-weight:700;margin-inline-end:2px}
.cheers-reassure__way{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--field);border-radius:14px;white-space:nowrap}
.cheers-reassure__way svg{width:16px;height:16px;flex:none}
.cheers-reassure__line{margin:8px 0 0;line-height:1.5}
.cheers-reassure__licence{margin:8px 0 0;font-size:12px;color:var(--ink-2,#555)}

/* Bottle size and Alcohol % padded like every other filter (Peter Malak,
   8 November). WooCommerce's own rule (.woocommerce .woocommerce-widget-
   layered-nav-list .woocommerce-widget-layered-nav-list__item a, padding 1px 0)
   outranked ours, which left the labels against the button's edge. */
.shop-filters .widget_layered_nav .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item a{padding:0 14px}

/* What is chosen, above the results, each chip taking itself off. Only where
   the filter panel folds away; beside the rail it says the same thing twice. */
.cheers-active{display:none}
@media (max-width:1100px){
  .cheers-active{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px}
  .cheers-active__chip{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px 0 14px;border-radius:17px;background:var(--brand);color:#fff;font-size:13px;font-weight:700;text-decoration:none}
  .cheers-active__chip span{font-size:16px;line-height:1}
  .cheers-active__clear{font-size:13px;font-weight:700;color:var(--brand);text-decoration:underline;padding:6px 4px}
}

/* Compact phone header (Peter Malak, 8 November): the logo and Account,
   Cart and the hotline share one row, the search the next. It was a row each. */
@media (max-width:760px){
  .masthead{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"logo actions" "search search";align-items:center;column-gap:10px;row-gap:8px;padding-block:8px}
  .masthead > .spacer{display:none}
  .masthead__logo{grid-area:logo}
  .masthead__logo img{height:34px}
  .masthead__actions{grid-area:actions;justify-self:end;gap:6px}
  .masthead__actions .hbtn{padding:6px 10px;font-size:13px;min-height:36px}
  .masthead__actions .tel{display:inline-flex;font-size:14px}
  .masthead form.search{grid-area:search;order:0}
  .masthead form.search input{height:40px}
}

/* Search, easy to find (Peter Malak, 8 November): on a desktop it takes the
   room between the logo and the account buttons, with a firmer edge and a
   larger box; on a phone it already has a row of its own. */
@media (min-width:761px){
  .masthead > .spacer{flex:0 0 12px}
  form.search{flex:1 1 auto;max-width:620px;min-height:46px;border:1.5px solid var(--navy);background:var(--paper)}
  form.search input{font-size:15px}
  form.search button{color:var(--navy)}
  .masthead__actions{margin-inline-start:auto}
}

/* WhatsApp chat button (Peter Malak, 8 November): bottom corner, clear of the
   phone's home bar; on the start side in Arabic. */
.cheers-whatsapp{position:fixed;inset-inline-end:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:60;display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;background:#25D366;color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.cheers-whatsapp:hover{background:#1EBE5A;color:#fff}
.cheers-whatsapp:focus-visible{outline:3px solid var(--navy);outline-offset:3px}