/* Coldex Kitchen - auth, account area and cart.
   Uses the tokens from site.css. */

/* ---------- shared form feedback ---------- */
.form-error,.form-ok{padding:14px 18px;border-radius:var(--radius);font-size:15px;
  margin:18px 0;border:1px solid}
.form-error{background:#FCECEA;border-color:#F0C2BC;color:#8C2B21}
.form-ok{background:#EDF7EE;border-color:#BFE0C4;color:#245C2E}
.sr{position:absolute;left:-9999px}
.btn-link{font-size:14.5px;font-weight:600;color:var(--navy);align-self:center}
.btn.is-disabled{opacity:.45;pointer-events:none}
.hp-form{display:none}

/* ---------- auth ---------- */
.auth-section{padding:64px 0 84px}
.auth-box{max-width:440px}
.auth-box-wide{max-width:660px}
.auth-box h1{font-size:clamp(26px,3vw,34px);margin-bottom:8px}
.auth-form{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;box-shadow:var(--shadow);margin-top:22px}
.auth-form label{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:18px}
.auth-form label span{color:var(--orange)}
.auth-form input{width:100%;margin-top:7px;padding:13px 14px;border:1px solid var(--line);
  border-radius:6px;font-size:15px;font-family:inherit;color:var(--ink);background:var(--white)}
.auth-form input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(32,67,125,.1)}
.auth-form input:disabled{background:var(--paper);color:var(--muted)}
.auth-form .btn{width:100%;justify-content:center}

/* ---------- account layout ---------- */
.account-layout{display:grid;grid-template-columns:236px 1fr;gap:40px;align-items:start}

/* A sticky panel taller than the space under the header loses its tail permanently: it
   does not scroll with the page, so whatever hangs below the fold is unreachable at every
   scroll position. A 1366x768 laptop at 125% is 1093x614 CSS px - still two columns, and
   short of the sidebar's natural height. Hence a cap and its own scrollbar, rather than a
   promise to keep the copy short. */
.account-side{position:sticky;top:var(--anchor-top);
  max-height:calc(100vh - var(--anchor-top) - 24px);overflow-y:auto;overscroll-behavior:contain}

/* Load bearing, and invisible until a table is inside it.
   A grid item's automatic minimum size is its content's min-content width, so the 520px
   floor on .acc-table pushed this whole column out to 520px on a phone, and the
   overflow-x:auto on .acc-table-wrap never engaged because the wrapper was never the
   thing being squeezed. */
.account-main{min-width:0}
/* The first panel in the content column sets its own top margin, which left the two
   columns starting 20px apart. They share a top edge now. */
.account-main > :first-child{margin-top:0}
/* The same guard, on the nav rather than the aside: below 1080 .account-side is
   display:contents and has no box at all, so .account-nav is the grid item in both
   layouts, and a long unbroken name in it is what pushed the page sideways. */
.account-nav{min-width:0}
.account-hi strong,.account-main h1{overflow-wrap:anywhere}

/* The nav is a card, like everything else on the page.
   It was the one element on the whole screen with no surface at all: the content column
   sits on white with a hairline and 16px corners, the help card is a solid 16px block of
   ink, and between them the navigation floated on the page background with nothing but two
   hairlines. That is what made the column read as unfinished rather than quiet. */
.account-nav{display:flex;flex-direction:column;gap:2px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:10px}

/* The identity block gets a monogram so it has a shape of its own. Initials, not a
   placeholder face - this is a trade account and the shop has no photograph to show. */
.account-hi{display:flex;align-items:center;gap:11px;font-size:12px;color:var(--body);
  line-height:1.4;margin:0 0 8px;padding:8px 8px 14px;border-bottom:1px solid var(--line)}
.account-ava{flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--tint);color:var(--navy);font-size:14px;font-weight:800;letter-spacing:.02em}
.account-who{min-width:0}
.account-hi strong{display:block;color:var(--ink);font-size:15px;font-weight:700;
  line-height:1.3;margin-top:1px}

.account-nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:8px;
  font-size:14.5px;font-weight:500;color:var(--body);position:relative}
.account-nav a i{width:16px;font-size:14px;color:var(--muted);text-align:center}
.account-nav a:hover{background:var(--tint);color:var(--navy)}
.account-nav a:hover i{color:var(--navy)}
/* The current item is marked with a tinted ground and an orange rail rather than a solid
   navy block: a filled slab in a quiet sidebar pulls the eye off the content it is there
   to navigate. */
.account-nav a.is-on{background:var(--tint);color:var(--ink);font-weight:650}
.account-nav a.is-on i{color:var(--navy)}
.account-nav a.is-on:before{content:"";position:absolute;left:-10px;top:6px;bottom:6px;
  width:3px;border-radius:0 3px 3px 0;background:var(--orange)}
/* Divides within the card, so the rule runs the full inner width rather than stopping
   at the link's own padding. */
.account-out{margin:6px -10px 0;padding:14px 22px 4px;border-top:1px solid var(--line);
  border-radius:0;color:var(--body)}
.account-out:hover{background:transparent;color:var(--navy)}

/* The dark ground is the site's own signature, and it fills a column that otherwise stood
   a third as tall as the content beside it. */
.account-help{margin-top:16px;padding:22px;border-radius:var(--radius-lg);
  background:var(--ink);color:rgba(255,255,255,.72);font-size:13.5px;line-height:1.6}
.account-help b{display:block;color:#fff;font-size:15px;font-weight:700;margin-bottom:6px}
/* Amber reads 9.72:1 on ink but only 1.11:1 against the text it sits inside, and both
   links are mid-sentence - so colour alone is not the cue. */
.account-help a{color:var(--amber);font-weight:600;text-decoration:underline;
  text-underline-offset:3px}
.account-help a:hover,.account-help a:focus-visible{color:#fff}
.account-help :focus-visible{outline:3px solid var(--amber);outline-offset:2px}

.acc-flash{margin:0 0 20px}

.acc-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:26px}
/* An <a>, so the whole tile is the target rather than a word inside it. display:flex with
   a column direction lets the go-line sit on the floor of the tallest tile, so the four
   arrows line up even when one label wraps to two lines and the others do not. */
.acc-tile{display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;font-size:13.5px;color:var(--muted);box-shadow:var(--shadow);
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease)}
.acc-tile:hover{border-color:var(--navy);box-shadow:0 12px 28px rgba(15,34,66,.10);
  transform:translateY(-2px)}
.acc-tile:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.acc-tile span{display:block;font-size:26px;font-weight:700;color:var(--navy);line-height:1.2;
  margin-bottom:4px;font-variant-numeric:tabular-nums}
/* margin-top:auto pins it to the bottom; it is the only part that reacts to the cursor,
   so the tile reads as a card with a link in it rather than a button pretending to be one. */
.acc-tile em{display:flex;align-items:center;gap:7px;margin-top:auto;padding-top:14px;
  font-style:normal;font-size:12px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--navy)}
.acc-tile em i{font-size:10px;transition:transform .18s var(--ease)}
.acc-tile:hover em i{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){
  .acc-tile,.acc-tile em i{transition:none}
  .acc-tile:hover{transform:none}
  .acc-tile:hover em i{transform:none}
}

/* ---------- cards: the storefront's grammar, verbatim ----------
   store.css reaches for --radius-lg nineteen times and this file reached for it never, so
   every account surface was 10px against the shop's 16px. And every account surface
   carried a resting shadow while every storefront card sits flat and lifts under the
   cursor. That inversion is what made this area read hazier and deader at the same time.

   Deliberately reaches outside /account: .acc-card is also used by checkout.php and
   order-complete.php, .acc-table by order-complete.php. Those panels change too, and that
   is the point - they are the same journey and should not look like two products. */
.acc-card{background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:28px;margin-top:20px;box-shadow:none}
.acc-card > .h-sm{font-size:17px;margin:0 0 18px;padding-bottom:14px;
  border-bottom:1px solid var(--line);letter-spacing:-.01em}
.enq-form-flat{background:transparent;border:0;padding:0;box-shadow:none}
/* The lift is for surfaces that are targets. Form panels do not get it: a panel that
   rises under the cursor and goes nowhere is telling a lie about itself. */
.acc-hoverable{transition:border-color .22s var(--ease),box-shadow .22s var(--ease),
  transform .22s var(--ease)}
.acc-hoverable:hover{border-color:var(--line-strong);transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(15,34,66,.08)}

.acc-table-wrap{overflow-x:auto;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:none;margin-top:20px}
/* Scrollable regions need to be reachable by keyboard, and this one is given a tabindex
   in the markup - so it needs a focus ring to say where the keyboard has landed. */
.acc-table-wrap:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.acc-table{width:100%;border-collapse:collapse;min-width:520px;font-size:15px}
.acc-table th,.acc-table td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line)}
.acc-table thead th{font-size:11.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--body);background:var(--paper)}
.acc-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.acc-table tbody tr:last-child td{border-bottom:0}
.acc-table tfoot td{border-bottom:0;padding:8px 18px;color:var(--body);font-size:14.5px}
.acc-table tfoot .row-total td{padding-top:14px;padding-bottom:16px;border-top:1px solid var(--line);
  color:var(--ink);font-weight:800;font-size:17px}

/* The order list carries FIVE columns - order, placed, status, payment, total - and 480px
   of them will not fit 340px of phone. Dropping the floor was tried and made it worse: the
   columns simply crushed, an order number broke across five lines at 74px wide, and the
   total was still off the right edge at x=501. So the floor stays and the region scrolls.
   Turning that table into stacked cards is the real answer and it needs the markup, not
   this file. */
@media (max-width:640px){
  .acc-table th,.acc-table td{padding:12px 14px}
  /* Only where a long product name genuinely has nowhere to go. Not on the first cell of
     the list, which is an order number and must stay in one piece. */
  .acc-table td[data-wrap]{overflow-wrap:anywhere}
}
/* A scrollable region has to be reachable without a mouse and has to say it is scrollable.
   The markup gives the wrapper a tabindex; this is the fade that shows there is more to
   the right, painted only while it actually overflows. */
.acc-table-wrap{background-image:linear-gradient(to right,rgba(15,34,66,0) 88%,rgba(15,34,66,.06));
  background-repeat:no-repeat;background-size:100% 100%;background-attachment:local}

.pill{display:inline-block;padding:3px 11px;border-radius:100px;font-size:12.5px;font-weight:600;
  background:var(--tint);color:var(--navy)}
.pill-ok{background:#E4F5E8;color:#245C2E}
.pill-wait{background:#FDF0DC;color:#8A5510}
/* 7.38:1. Cancelled and refunded used to fall through to the neutral pill, which said
   nothing - the two states a customer most needs to spot without reading. */
.pill-bad{background:#FCECEA;color:#8C2B21}

/* ---------- order cards ----------
   The list was five columns of table - order, placed, status, payment, total - which never
   fitted a phone and, more to the point, never told anyone WHAT they had bought. A buyer
   recognises the machine from its photograph long before they recognise CK20260814971.
   Cards also stack on their own, so the horizontal scroll and its scroll-hint go away. */
.ord-list{display:flex;flex-direction:column;gap:16px;margin-top:20px}
.ord-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden}

/* The summary strip, on the shop's own paper tone so the card reads as header + body. */
.ord-head{display:flex;flex-wrap:wrap;gap:8px 40px;padding:14px 22px;
  background:var(--paper);border-bottom:1px solid var(--line)}
.ord-head-no{margin-left:auto;text-align:right}
.ord-label{display:block;font-size:11px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--body);margin-bottom:3px}
.ord-head strong{font-size:14.5px;color:var(--ink);font-weight:700}
.ord-total{font-variant-numeric:tabular-nums}

.ord-body{padding:18px 22px}
.ord-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}

.ord-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.ord-items li{display:flex;align-items:center;gap:14px}
/* Fixed box with contain, because the catalogue photographs are not one shape and a row of
   items that each set their own height reads as a broken list. */
.ord-thumb{flex:0 0 auto;width:62px;height:62px;border-radius:10px;background:var(--paper);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;padding:5px}
.ord-thumb img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.ord-item-txt{min-width:0}
.ord-item-txt a{color:var(--ink);font-weight:600;font-size:15px;text-decoration:none}
.ord-item-txt a:hover{color:var(--navy);text-decoration:underline}
.ord-item-txt > span{display:block;font-size:13px;color:var(--body);margin-top:3px}

.ord-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  padding:14px 22px;border-top:1px solid var(--line)}
/* Now a download link rather than a caption, so it has to look like one: navy, an icon,
   and an underline that only appears under the words. */
.ord-inv{display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums}
.ord-inv i{font-size:13px;color:var(--muted-strong)}
.ord-inv:hover{text-decoration:underline;text-underline-offset:3px}
.ord-inv:hover i{color:var(--navy)}
.ord-inv:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:4px}
/* The number above the download button on the order page. */
.ord-inv-line{margin:0 0 16px;font-size:15px;color:var(--body);font-variant-numeric:tabular-nums}
.ord-inv-line strong{color:var(--ink)}

/* An empty state with a shape, rather than a sentence adrift on a white page. */
.acc-empty{margin-top:20px;padding:44px 28px;text-align:center;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius-lg)}
.acc-empty i{font-size:30px;color:var(--line-strong);display:block;margin-bottom:14px}
.acc-empty p{margin:0 0 18px;font-size:14.5px;color:var(--body);line-height:1.6}
.acc-empty strong{display:block;font-size:17px;color:var(--ink);margin-bottom:5px}

/* A section heading with its own escape hatch on the right - the overview shows five
   orders and needs to say where the rest are without a second heading. */
.acc-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-top:34px}
.acc-sec-head .h-sm{margin:0}
.acc-sec-head a{font-size:14px;font-weight:600;color:var(--navy);white-space:nowrap}
.acc-sec-head a:hover{color:var(--ink);text-decoration:underline}

/* The order detail: the same item row as the list, with the money on the right, and the
   totals as a definition list rather than a table footer. */
.ord-items-lg li{padding-bottom:16px;border-bottom:1px solid var(--line)}
.ord-items-lg li:last-child{padding-bottom:0;border-bottom:0}
.ord-items-lg .ord-item-txt{flex:1 1 auto;min-width:0}
.ord-item-amt{margin-left:auto;flex:0 0 auto;font-size:15px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}

.ord-totals{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line)}
.ord-totals div{display:flex;justify-content:space-between;gap:20px;padding:5px 0}
.ord-totals dt{color:var(--body);font-size:14.5px}
.ord-totals dd{margin:0;color:var(--ink);font-size:14.5px;font-variant-numeric:tabular-nums}
.ord-totals .is-note dt,.ord-totals .is-note dd{font-size:13.5px;color:var(--body)}
/* The figure the page exists for. */
.ord-totals .is-total{margin-top:10px;padding-top:14px;border-top:1px solid var(--line)}
.ord-totals .is-total dt{font-size:16px;font-weight:800;color:var(--ink)}
.ord-totals .is-total dd{font-size:19px;font-weight:800;color:var(--ink)}
/* Sits under the Total and qualifies it, so it has to read as part of the same block
   rather than as the next thing on the page - hence the tight top margin and no rule
   above it. --muted-strong because it is a caveat about money, not a caption. */
.ord-ship-note{margin:12px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted-strong)}

/* ---------- order list: search, filter, count ----------
   A row that wraps rather than a grid: the three controls are different widths and the
   search box is the one that should take the slack. */
.ord-filter{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:24px 0 0}
.ord-filter input[type=search],.ord-filter select{
  height:42px;padding:0 14px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--white);font:inherit;font-size:14.5px;color:var(--ink)}
.ord-filter input[type=search]{flex:1 1 200px;min-width:0}
.ord-filter select{flex:0 0 auto}
.ord-filter input[type=search]:focus,.ord-filter select:focus{
  outline:2px solid var(--navy);outline-offset:1px;border-color:var(--navy)}
/* The count sits between the controls and the cards and belongs to neither, so it takes
   its spacing from both sides rather than leaning on one. */
.ord-count{margin:20px 0 -6px;font-size:13.5px;color:var(--muted-strong);
  font-variant-numeric:tabular-nums}
@media (max-width:560px){
  /* Stacked, and each control full width - a 42px select next to a shrunken search box
     reads as broken rather than compact. */
  .ord-filter{flex-direction:column;align-items:stretch}
  /* flex-basis follows the main axis, and the main axis is now the HEIGHT. The 200px
     basis that lets the search box take the slack in a row made it a 200px tall input
     here - measured, not guessed. Back to its natural height. */
  .ord-filter input[type=search]{flex:0 0 auto}
  .ord-filter .btn{width:100%}
  .ord-filter .btn-link{align-self:flex-start}
}

/* The line the band used to carry. First thing in the content column, so the page still
   opens by saying when the order was placed and where it has got to. */
.ord-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;
  font-size:14.5px;color:var(--body)}

@media (max-width:560px){
  .ord-items-lg li{flex-wrap:wrap}
  /* The amount drops under the name rather than squeezing it to nothing. */
  /* The basis has to leave room for the indent, or 100% + 66px is what the row asks for. */
  .ord-item-amt{flex-basis:calc(100% - 66px);margin-left:66px;padding-top:2px}
}

@media (max-width:560px){
  /* The order number moves under the other two rather than fighting them for the row. */
  .ord-head{gap:10px 26px;padding:14px 16px}
  .ord-head-no{margin-left:0;text-align:left;flex-basis:100%}
  .ord-body,.ord-foot{padding-left:16px;padding-right:16px}
  .ord-thumb{width:52px;height:52px}
}

.timeline{list-style:none;padding:0;margin:0}
.timeline li{padding:0 0 16px 20px;border-left:2px solid var(--line);margin-left:5px;position:relative}
.timeline li:last-child{border-left-color:transparent;padding-bottom:0}
.timeline li:before{content:"";position:absolute;left:-6px;top:5px;width:10px;height:10px;
  border-radius:50%;background:var(--orange)}
.timeline span{display:block;font-size:13.5px;color:var(--muted)}
.timeline em{display:block;font-size:14px;color:var(--body);font-style:normal;margin-top:3px}

/* ---------- addresses ---------- */
.addr-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:24px}
.addr-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow);position:relative}
/* The default carries a navy edge and a rail down its left side. Sorting it to the top is
   only half an answer - on a two-column grid the top-left card is not obviously the first
   one, so the card has to say so itself as well as sit first. */
.addr-card.is-default{border-color:var(--navy);box-shadow:0 10px 26px rgba(15,34,66,.08)}
.addr-card.is-default::before{content:"";position:absolute;left:0;top:14px;bottom:14px;
  width:3px;border-radius:0 3px 3px 0;background:var(--navy)}
/* Sits in the flag row now, so it is a chip beside the pills rather than a line above the
   name. Same height as .pill, or the row would step. */
.addr-label{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--orange)}
.addr-card strong{display:block;color:var(--ink);font-size:16px}
.addr-card p{font-size:14.5px;color:var(--body);margin:8px 0 12px;line-height:1.6}
.addr-flags{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 12px}
/* Enough air above it to read as a new group, not as a caption on the card before it. */
.addr-sec{margin:38px 0 0}
.addr-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  border-top:1px solid var(--line);padding-top:12px}
.addr-actions form{display:inline}
.addr-actions a,.addr-actions button{background:none;border:0;padding:0;cursor:pointer;
  font-size:13.5px;font-weight:600;color:var(--navy);font-family:inherit}
.addr-actions button:hover{color:var(--orange)}
.addr-actions .danger{color:#B03A30}

/* ---------- cart ---------- */
.cart-layout{display:grid;grid-template-columns:1fr 340px;gap:40px;align-items:start}
.cline{display:grid;grid-template-columns:96px 1fr 96px 110px 32px;gap:18px;align-items:center;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;margin-bottom:14px;box-shadow:var(--shadow)}
.cline-warn{border-color:#F0C2BC;background:#FEF8F7}
.cline-img{display:block;height:80px;background:var(--paper);border-radius:6px;padding:8px}
/* multiply drops the white studio background out of supplier photos so they sit
   on the tinted well instead of showing as a white box inside it. */
.cline-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.cline-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.cline-name{font-size:16px;font-weight:650;color:var(--ink)}
.cline-model{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--orange)}
.cline-unit{font-size:13.5px;color:var(--muted)}
.cline-issue{font-size:13.5px;color:#B03A30;font-weight:600}
.cline-qty input{width:100%;padding:10px;border:1px solid var(--line);border-radius:6px;
  font-size:15px;text-align:center}
.cline-total{text-align:right;font-size:16.5px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums}
.cline-x{background:none;border:0;font-size:24px;line-height:1;color:var(--muted);cursor:pointer;padding:4px}
.cline-x:hover{color:#B03A30}
.cart-actions{display:flex;gap:18px;align-items:center;margin-top:20px;flex-wrap:wrap}

.cart-summary{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow);position:sticky;top:var(--anchor-top)}
.cart-summary dl{display:grid;grid-template-columns:1fr auto;gap:10px 16px;margin:0 0 18px;font-size:15px}
.cart-summary dt{color:var(--muted)}
.cart-summary dd{margin:0;text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
/* gap, and wrap. space-between alone leaves nothing between the two once they fill the
   row, and on a 320px phone "Total payable" ended up touching the 24px total beside it -
   the two read as one string. The gap guarantees the separation; flex-wrap drops the
   amount to its own line rather than letting them collide if the figure ever gets longer
   than this one. */
.cart-total{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;
  gap:4px 14px;border-top:1px solid var(--line);padding-top:16px;margin-bottom:20px}
.cart-total span{font-size:15px;color:var(--muted);min-width:0}
/* margin-left:auto so the figure hugs the right edge whether it shares the line with its
   label or has wrapped below it. space-between only right-aligns it while both are on the
   same line; alone on a wrapped line it would sit at the left, under the label, which
   reads as a stray number rather than a total. */
.cart-total strong{font-size:24px;color:var(--ink);font-variant-numeric:tabular-nums;
  margin-left:auto}
.btn-block{width:100%;justify-content:center}

/* The header cart badge used to be styled here, from when it sat inline beside
   a "Cart" label. It now lives on the icon disc and is owned by site.css - this
   file loads after site.css, so leaving a copy here silently overrode it. */

@media (max-width:1080px){
  .account-layout{grid-template-columns:1fr;gap:24px}
  /* The sidebar's children become grid items in their own right, so the help card
     follows the page content instead of pushing it a screen down. The sticky cap goes
     with the box that no longer exists. */
  .account-side{display:contents}
  /* Was a wrapping row of chips: five labels totalling 597px against 340px of space,
     breaking into three ragged rows with "Sign out" alone on the last, still carrying
     the desktop divider as a hairline hanging in mid air. */
  .account-nav{order:1;display:grid;grid-template-columns:repeat(2,1fr);gap:6px;padding:10px}
  .account-main{order:2}
  .account-help{order:3;margin-top:0}
  .account-hi{grid-column:1/-1;margin:-10px -10px 4px;padding:14px 16px}
  .account-nav a.is-on:before{display:none}
  .account-out{grid-column:1/-1;margin-top:2px;padding-top:12px;border-radius:8px}
  .cart-layout{grid-template-columns:1fr}
  .cart-summary{position:static}
  .acc-tiles{grid-template-columns:repeat(2,1fr)}
  .addr-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .cline{grid-template-columns:72px 1fr 30px;gap:12px}
  .cline-qty{grid-column:2}
  .cline-qty input{max-width:96px}
  .cline-total{grid-column:2;text-align:left}
  .acc-tiles{grid-template-columns:1fr}
}

/* ---------- checkout ---------- */
.checkout-layout{display:grid;grid-template-columns:1fr 360px;gap:40px;align-items:start}
.checkout-form .acc-card{margin-top:0;margin-bottom:20px}
.checkout-form label{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:16px}
.checkout-form label span{color:var(--orange)}
/* select is listed with the inputs, and this is the SECOND time that has been missed - the
   contact form hit it first and its own comment in store.css says so. A <select> that matches
   none of these rules keeps the operating system's look: half the height of the field beside
   it, its own font, and none of the padding. The state and city dropdowns landed here and did
   exactly that.
   line-height is explicit because a select computes a shorter line box than a text input when
   left to `normal`, and comes out a few pixels short of its neighbour. */
.checkout-form input,.checkout-form textarea,.checkout-form select{width:100%;margin-top:7px;
  padding:13px 14px;border:1px solid var(--line);border-radius:6px;font-size:15px;
  font-family:inherit;line-height:1.5;color:var(--ink);background:var(--white)}
.checkout-form input:focus,.checkout-form textarea:focus,.checkout-form select:focus{outline:none;
  border-color:var(--navy);box-shadow:0 0 0 3px rgba(32,67,125,.1)}
/* Native arrow off, ours on. Without appearance:none the control keeps the OS chrome on
   Windows and the padding above does nothing. Inline SVG, so no icon font and no request. */
.checkout-form select{
  appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%237185A0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
/* The "Other - type it" box sits under its select inside the SAME label, so it needs the gap
   the label itself would have given it. Without this the two controls touch. */
.checkout-form select + input[type=text],
.enq-form select + input[type=text]{margin-top:10px}
.checkout-signin{margin-bottom:16px}
/* The box itself is a 13px native control. The label is the real target, so it carries
   the height: 8px of padding takes the row from 23px to 39px, which a thumb can hit on the
   one screen where a mis-tap sends the order to the wrong address. Negative margin so the
   card's own spacing is unchanged - the tap area grows, the layout does not move. */
.check-inline{display:flex;align-items:center;gap:10px;margin-bottom:0 !important;cursor:pointer;
  padding:8px 0;margin-top:-8px}
.check-inline input{width:auto;margin:0;flex:none}

.addr-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.addr-pick-btn{text-align:left;background:var(--white);border:1px solid var(--line);border-radius:8px;
  padding:14px;cursor:pointer;font-family:inherit;transition:border-color .15s ease}
.addr-pick-btn:hover{border-color:var(--navy)}
.addr-pick-btn.is-on{border-color:var(--navy);box-shadow:0 0 0 2px rgba(32,67,125,.14)}
.addr-pick-btn strong{display:block;color:var(--ink);font-size:14.5px;margin-bottom:3px}
.addr-pick-btn span{font-size:13px;color:var(--muted)}

.checkout-summary{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow);position:sticky;top:var(--anchor-top)}
.co-items{list-style:none;padding:0;margin:0 0 18px;border-bottom:1px solid var(--line)}
.co-items li{display:flex;justify-content:space-between;gap:14px;padding:9px 0;font-size:14.5px}
.co-name{color:var(--ink)}
.co-name em{font-style:normal;color:var(--muted)}
.co-amt{color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.co-coupon{display:flex;gap:8px;margin-bottom:18px}
.co-coupon input{flex:1;min-width:0;padding:11px 12px;border:1px solid var(--line);border-radius:6px;
  font-size:14px;font-family:inherit;text-transform:uppercase}
.co-coupon .btn{padding:11px 18px;font-size:12.5px}
.co-totals{display:grid;grid-template-columns:1fr auto;gap:9px 16px;margin:0 0 16px;font-size:15px}
.co-totals dt{color:var(--muted)}
.co-totals dd{margin:0;text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.co-minus{color:#2F7A3E}

/* ---------- order complete ---------- */
.oc-wrap{max-width:840px}
.oc-head{text-align:center;margin-bottom:34px}
.oc-tick{display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px;
  border-radius:50%;background:#E4F5E8;color:#2F7A3E;font-size:30px;margin-bottom:18px}
.oc-head .lede{margin:0 auto}
.oc-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.oc-steps{margin:0;padding-left:20px;color:var(--body)}
.oc-steps li{margin-bottom:8px;font-size:15px}

@media (max-width:1080px){
  /* minmax(0,1fr), not 1fr. `1fr` is shorthand for `minmax(auto,1fr)`, and that auto
     minimum is the track's min-content width - which a grid track will not go below,
     whatever the viewport is doing. An <input> carries an intrinsic min-content of its
     default size attribute, about 232px here, and with the card padding around it the
     checkout column refused to shrink under 374px. On a 320px phone the whole page
     scrolled 74px sideways; at 360 it was 34px, at 390 still 4px, which is why it only
     looked "nearly right" rather than obviously broken.
     minmax(0,...) lets the track shrink; min-width:0 on the two children lets them follow
     it down, and the inputs already carry width:100% so they size to whatever is left. */
  .checkout-layout{grid-template-columns:minmax(0,1fr)}
  .checkout-layout > *{min-width:0}
  .checkout-summary{position:static}
  .oc-grid{grid-template-columns:minmax(0,1fr)}
}

/* The order summary on a narrow phone.
   26px of card padding either side plus a 16px gap left about 112px for the label beside
   a ten-character rupee amount, so "Subtotal (incl. GST)" broke over three lines and split
   "(incl. GST)" down the middle. Trimming the padding and the gap gives the label enough
   room to break at a sensible point instead. The amounts keep their own column and stay on
   one line - a wrapped price is worse than a wrapped label. */
@media (max-width:430px){
  .checkout-summary{padding:18px}
  .co-totals{gap:8px 10px;font-size:14.5px}
  .co-items li{gap:10px}
}

/* ---------- payment ---------- */
.pay-wrap{max-width:520px;margin:0 auto;text-align:center}
.pay-wrap h1{font-size:clamp(24px,3vw,32px)}
.pay-wrap .lede{margin:0 auto 22px}
.pay-testbar{background:#FDF0DC;border:1px solid #F0D9AE;color:#8A5510;border-radius:var(--radius);
  padding:13px 18px;font-size:13.5px;margin-bottom:22px;text-align:left}
.pay-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;box-shadow:var(--shadow);text-align:left}
.pay-amount{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.pay-amount span{font-size:14.5px;color:var(--muted)}
.pay-amount strong{font-size:30px;color:var(--ink);font-variant-numeric:tabular-nums}
.pay-card .btn{margin-top:8px}