/* ecommerce.css
   Reconciled onto the site's design system on 2 September 2026, when 29 pages
   designed outside were merged in. Three kinds of rule were removed; the full
   list is in the commit, not here.

     1. Rules that re-styled SHARED shell components. This stylesheet loads
        AFTER palesas.css, so each one silently overrode the site-wide header,
        footer or nav ON THIS PAGE ONLY, while shell.mjs check called the page
        clean because the MARKUP was identical. A markup checker cannot see a
        stylesheet. That went for CLASS selectors and, in a second pass, for
        bare ELEMENT selectors too: one page stylesheet said nav{display:none}
        below 700px and was hiding the site's primary navigation.
     2. Rules for markup that no longer exists: the chrome this page arrived
        with, and its own hero.
     3. Document-level rules that fought palesas.css, which owns them.

   Colours are tokens now. palesas.css owns every shared component.

   Two things have already broken this banner, both worth knowing. It once
   PASTED THE REMOVED SELECTOR LIST INTO ITSELF, and that list held a star next
   to a slash, which closed the comment early and swallowed the next real rule.
   Then a sweep that counted braces without skipping comments read this prose
   as a selector and deleted words out of it. A tool that parses CSS must strip
   comments FIRST, and no generated text belongs inside one. */
.ec-main{padding:14px 0}.ec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}.ec-card{border:1px solid var(--pk-border);border-radius:var(--pk-r-xl);background:var(--pk-surface);overflow:hidden;padding:16px}.ec-card img{width:100%;height:190px;object-fit:cover;border-radius:var(--pk-r)}.ec-card h3{margin:13px 0 5px;font-size:17px}.ec-price{color:var(--pk-primary);font-weight:700}.ec-panel{max-width:1040px;margin-inline:auto;border:1px solid var(--pk-border);border-radius:var(--pk-r-xl);background:var(--pk-surface);padding:30px}.ec-panel--narrow{max-width:600px;text-align:center}.ec-table{width:100%;border-collapse:collapse}.ec-table th, .ec-table td{padding:16px;border-bottom:1px solid var(--pk-border);text-align:left}.ec-two{display:grid;grid-template-columns:1fr 1fr;gap:24px}.ec-form input, .ec-form select, .ec-form textarea{width:100%;border:1px solid var(--pk-border);border-radius:var(--pk-r);padding:12px;margin:5px 0 15px}.ec-tabs{display:flex;gap:12px;justify-content:center;margin:0 0 30px}.ec-tabs button{border:1px solid var(--pk-border);padding:10px 16px;border-radius:var(--pk-pill)}.ec-empty{padding:70px;text-align:center}.ec-empty i{font-size:52px;color:var(--pk-gold);font-style:normal}.ec-aside{display:grid;grid-template-columns:220px 1fr;gap:25px}.ec-side{border:1px solid var(--pk-border);border-radius:var(--pk-r);padding:18px}.ec-side li{padding:10px;border-bottom:1px solid var(--pk-border)}@media(max-width:800px){.ec-two, .ec-aside{grid-template-columns:1fr}}/* A grid item defaults to min-width:auto, while its
   own media query correctly said 1fr. */
.ec-aside>*, .ec-two>*, .ec-grid>*{min-width:0}/* Wide content scrolls inside its OWN box, never the page. */
.ec-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}.ec-scroll>.ec-table{min-width:520px}

/* `margin:auto` used to sit on .ec-panel. A grid item with auto side margins
   opts out of stretching and shrink-wraps to its own min-content, so six
   pages had panels floating narrow inside their column and orders.html
   scrolled sideways to 582px at a 320px viewport: the table min-width plus
   its padding, escaping the grid. Centring is now opt-in, for the two narrow
   panels that actually want it. */
.ec-panel--narrow{margin-inline:auto}

/* .ec-acct wraps the content column beside the account sidebar and had no
   definition at all. */
.ec-acct{min-width:0}

/* WooCommerce port (project #36): single-product.php's real product photo
   is a direct <img> child of .ec-two, matching product.html's markup
   exactly, but the prototype's own CSS never gave that raw <img> a size
   rule beyond .ec-two's 1fr/1fr grid - on a real (sometimes portrait,
   sometimes non-square) product photo that could run to its native size
   inside the grid cell. This rule is scoped to the one class this port
   adds to that image, so it changes nothing on any page that doesn't use
   it. */
.pbt-product-image{width:100%;height:auto;border-radius:var(--pk-r-xl,14px);object-fit:cover;aspect-ratio:1/1}

/* ============================================================================
   THE STATES THAT WERE MISSING. A reviewer queried the stylesheet for state
   rules on .ec-* components and got back an empty list: no hover outside
   .pk-btn, and no disabled, busy or error state anywhere. Error is the one an
   ecommerce checkout cannot ship without, because there is otherwise no way to
   tell a customer their email is wrong.
   ========================================================================= */
@media (hover:hover) and (pointer:fine){
  .ec-side a:hover{background:var(--pk-cream);color:var(--pk-primary)}
  .ec-table tbody tr:hover{background:var(--pk-cream)}
  .ec-card:hover{border-color:var(--pk-cream-deep)}
}
/* The disabled-button rule moved to palesas.css. It is a state of .pk-btn, a
   component this file does not own, and 15 of the 32 pages never load this
   file -- including shop.html, the only page in the site with a disabled
   button on it. */
.pk-btn[aria-busy="true"]{position:relative;color:transparent}
.pk-btn[aria-busy="true"]:after{
  content:"";position:absolute;inset:0;margin:auto;width:16px;height:16px;
  border:2px solid var(--pk-primary-fg);border-right-color:transparent;border-radius:50%;
  animation:pk-spin .7s linear infinite;
}
@keyframes pk-spin{to{transform:rotate(360deg)}}

.ec-form :is(input,select,textarea)[aria-invalid="true"]{
  border-color:var(--pk-pink-ink);
  box-shadow:0 0 0 3px rgba(217,46,104,.12);
}
.ec-err{display:block;margin-top:6px;font-size:12px;color:var(--pk-pink-ink)}
.ec-err:empty{display:none}

/* A skeleton, because these pages all wait on a WooCommerce round trip and a
   spinner in the middle of content is the wrong answer. */
.ec-skeleton{
  background:linear-gradient(90deg,var(--pk-cream) 25%,var(--pk-cream-deep) 37%,var(--pk-cream) 63%);
  background-size:400% 100%;animation:pk-shimmer 1.4s ease infinite;border-radius:var(--pk-r);
  color:transparent;pointer-events:none;
}
@keyframes pk-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* A card is a column, so its action sits on the bottom edge whatever the title
   wraps to. Two cards side by side had their buttons 20px apart. */
.ec-card{display:flex;flex-direction:column}
.ec-card .pk-btn{margin-top:auto;align-self:flex-start}

/* An order status is a vocabulary, not a sentence. */
.ec-status{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--pk-pill);
  font-size:11px;font-weight:600;background:var(--pk-cream);color:var(--pk-primary)}
.ec-status--done{background:var(--pk-ok-bg);color:var(--pk-ok)}
.ec-status--wait{background:var(--pk-warn-bg);color:var(--pk-gold-ink)}
.ec-status--off{background:var(--pk-cream-deep);color:var(--pk-muted)}

/* An inline link inside a panel or a table has to look like a link. "View" in
   the orders table and "Lost your password?" rendered identically to the body
   text beside them. */
.ec-panel a:not(.pk-btn),.ec-table a:not(.pk-btn){
  color:var(--pk-primary);text-decoration:underline;text-underline-offset:3px;
}

/* The account sidebar is 308px of navigation before any content on a phone.
   Below 800 it becomes a scrolling strip, which is the pattern the rest of the
   web settled on for exactly this. */
@media (max-width:800px){
  .ec-side--tabs{display:flex;overflow-x:auto;gap:6px;padding:10px;-webkit-overflow-scrolling:touch}
  .ec-side--tabs ul{display:flex;gap:6px}
  .ec-side--tabs li{border:0;padding:0;white-space:nowrap}
  .ec-side--tabs a{padding:8px 14px;border-radius:var(--pk-pill);background:var(--pk-cream)}
  /* berry-filled only here, so this is the only place it needs the gold ring */
  .ec-side--tabs a[aria-current="page"]{background:var(--pk-primary);color:var(--pk-primary-fg)}
}

/* A form is a stack of label + control + error slot. The labels are new: every
   field on this site used to be placeholder-only, so the moment a customer
   typed one character the field became anonymous both on screen and to a
   screen reader, on the page that takes the order. */
.ec-form label{display:block;margin:14px 0 6px;font-size:12px;font-weight:600;color:var(--pk-fg)}
.ec-form label:first-of-type{margin-top:0}
.ec-form h2+label{margin-top:16px}
.ec-form :is(input,select,textarea){font:inherit;font-size:15px}
.ec-form button{margin-top:20px}

/* The search row is a row. The input was width:100% with the button dropped
   onto its own line 60px below at far left. */
.ec-search{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* ============================================================================
   WooCommerce's OWN generated markup on the single product page (the
   variation "Size" <select>, the Add to basket button, the quantity box,
   the variation price/description that appears once a size is chosen) had
   no theme styling at all, so it rendered in WooCommerce core's bare
   defaults: a pale default-purple button and a raw unstyled native size
   dropdown sitting inside an otherwise fully custom-designed page. Found
   live, 3 Sep 2026.

   This is CSS only - none of WooCommerce's own variation-switching JS or
   markup is touched, which is the exact risk single-product.php's own
   docblock warned against when it chose not to hand-roll a pill-tab
   replacement for the dropdown. Same visual recipe as .pk-btn and the
   .pk-cfield select already used elsewhere on this site, just pointed at
   WooCommerce's real class names instead of ours.
   ========================================================================= */
.woocommerce div.product form.cart{margin-top:22px}
.woocommerce div.product form.cart .variations{width:100%;border-collapse:collapse}
.woocommerce div.product form.cart .variations tr{display:block;margin-bottom:14px}
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th{display:block;padding:0;border:0;text-align:left}
.woocommerce div.product form.cart .variations label{
  display:block;margin-bottom:6px;font-size:12px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--pk-fg);
}
.woocommerce div.product form.cart .variations select{
  width:100%;max-width:320px;height:44px;appearance:none;
  border:1px solid var(--pk-border);border-radius:var(--pk-r,8px);
  background-color:var(--pk-surface);color:var(--pk-fg);
  padding:0 34px 0 14px;font:inherit;font-size:14px;outline:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6" fill="none" stroke="%236a6a6a" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;
  transition:border-color .25s var(--pk-ease),box-shadow .25s var(--pk-ease);
}
.woocommerce div.product form.cart .variations select:focus{
  border-color:var(--pk-primary);box-shadow:0 0 0 3px rgba(110,25,55,.08);
}
.woocommerce div.product form.cart .reset_variations{
  display:inline-block;margin-top:8px;font-size:12px;color:var(--pk-primary);
  text-decoration:underline;text-underline-offset:3px;
}
.woocommerce div.product form.cart .woocommerce-variation-price{margin:14px 0;font-size:15px}
.woocommerce div.product form.cart .woocommerce-variation-price .price{color:var(--pk-primary);font-weight:700}
.woocommerce div.product form.cart .woocommerce-variation-description p{margin:0;color:var(--pk-fg)}
.woocommerce div.product form.cart .woocommerce-variation-availability{margin-top:6px;font-size:12px}
.woocommerce div.product form.cart .quantity{display:inline-block;margin-right:10px;vertical-align:middle}
.woocommerce div.product form.cart .quantity .qty{
  width:64px;height:44px;border:1px solid var(--pk-border);border-radius:var(--pk-r,8px);
  background:var(--pk-surface);color:var(--pk-fg);text-align:center;font:inherit;font-size:14px;
}
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce div.product form.cart button.button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:12px 24px;border:0;border-radius:var(--pk-pill);
  font-size:13px;font-weight:500;line-height:1;vertical-align:middle;
  background:var(--pk-primary);color:var(--pk-primary-fg);
  transition:transform .3s var(--pk-ease),opacity .3s var(--pk-ease),box-shadow .3s var(--pk-ease);
}
.woocommerce div.product form.cart .single_add_to_cart_button.disabled{
  opacity:.5;pointer-events:none;
}
@media (hover:hover) and (pointer:fine){
  .woocommerce div.product form.cart .single_add_to_cart_button:hover,
  .woocommerce div.product form.cart button.button:hover{
    transform:translateY(-2px);opacity:.92;box-shadow:0 14px 30px -12px rgba(0,0,0,.5);
  }
}

/* Breadcrumbs (single product) and related products, both added 3 Sep 2026 -
   real gaps found live, not in the original 32-page prototype set. */
.pk-breadcrumb{
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px;
  margin-bottom:10px;font-size:12px;color:var(--pk-muted);
}
.pk-breadcrumb a{color:var(--pk-muted);text-decoration:underline;text-underline-offset:2px}
.pk-breadcrumb a:hover{color:var(--pk-primary)}
.pk-breadcrumb [aria-current="page"]{color:var(--pk-fg);font-weight:500}

/* .pk-related's own rules (padding, heading) now live in product.css's
   "6. RELATED PRODUCTS" section, which is the current, complete version
   (it also handles the .shop-products grid at every breakpoint). This file's
   copy was the original 3 Sep draft, left behind after that rewrite. It set
   padding-left/right:0 via the `padding` shorthand, and because product.css
   deliberately sets only padding-block (to leave .pk-wrap's side gutter
   alone), this rule's zero was the one still winning the cascade for
   padding-left/right - the exact "no gutter on phone" bug this note fixes. */
.ec-search input{flex:1 1 240px;width:auto}
.ec-search button{margin-top:0}
.ec-count{margin:16px 0 0;font-size:13px;color:var(--pk-muted)}
.ec-count b{color:var(--pk-fg)}

/* The empty-state icon was a raw 52px text glyph, and on the empty cart it was
   U+2667, a playing-card club suit, on a bakery. It comes out of the sprite
   the header and footer already use. */
.ec-empty i{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 14px;
  border-radius:50%;background:var(--pk-cream);color:var(--pk-gold)}
.ec-empty i svg{width:26px;height:26px}

/* The cart's quantity cell used to be the literal text "- 1 +". */
.ec-qty{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--pk-border);
  border-radius:var(--pk-pill);padding:2px}
.ec-qty .pk-icon{width:32px;height:32px;font-size:16px;line-height:1}
.ec-qty output{min-width:28px;text-align:center;font-variant-numeric:tabular-nums}
.ec-remove{border:0;background:none;color:var(--pk-muted);width:32px;height:32px;
  display:grid;place-items:center;border-radius:50%;cursor:pointer}
.ec-remove svg{width:16px;height:16px}
@media (hover:hover) and (pointer:fine){ .ec-remove:hover{background:var(--pk-cream);color:var(--pk-pink-ink)} }

.ec-summary{margin-top:24px;margin-inline-start:auto;max-width:360px;padding:24px;
  border:1px solid var(--pk-border);border-radius:var(--pk-r-xl);background:var(--pk-surface)}
.ec-summary h2{margin:0 0 12px}
.ec-summary p{display:flex;justify-content:space-between;gap:16px;margin:8px 0;font-size:14px}
.ec-summary__total{padding-top:12px;border-top:1px solid var(--pk-border);font-size:16px}
.ec-summary .pk-btn{width:100%;margin-top:16px;justify-content:center}

/* Below 700px a data table stops being a table. Each row becomes a card and
   each cell carries its own label, so the quantity and the line total are not
   hidden behind a horizontal scroll with no affordance. */
/* OPT-IN, not global. See the note above .ec-panel: this is the second time a
   global rule on a shared class broke a page that merely used the class. */
@media (max-width:700px){
  .ec-scroll{overflow:visible}
  .ec-scroll>.ec-table{min-width:0}
  .ec-table--cards thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .ec-table--cards tbody tr{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;
    padding:14px 0;border-bottom:1px solid var(--pk-border)}
  .ec-table--cards td{border:0;padding:2px 0;display:contents}
  .ec-table--cards td[data-th]:before{content:attr(data-th);color:var(--pk-muted);font-size:12px}
  .ec-summary{max-width:none;margin-inline-start:0}
}

/* R3: the recovery links on a dead-end page were 17px tall. */
.ec-count a{display:inline-block;padding:6px 10px;margin:2px 0;min-height:24px}

/* R6: the summary was pinned right inside a 1040px panel, leaving a 619px void
   beside it, and checkout's order summary was 544px of empty white because
   removing margin:auto exposed that it had nothing in it. */
.ec-summary{margin-inline-start:0}
/* --pk-headerrow, NOT --pk-chrome. What a sticky element has to clear is the
   header once it is stuck, which is the row alone (64px). --pk-chrome is
   topbar + row + marquee (~160px) and parked this panel ~96px too low. It was
   also the third, unnoticed victim of [[l-245]]: while the mobile drawer was
   poisoning --pk-chrome to 833px, this panel's offset became 853px and it
   stopped sticking anywhere useful on Sign in, Addresses, Account details,
   View order and Contact. Nobody reported it because nobody was looking. */
.ec-two > aside.ec-panel{align-self:start;position:sticky;top:calc(var(--pk-headerrow) + 20px)}
@media (min-width:1024px){ .ec-summary{margin-inline-start:auto} }

/* The current-page marker was berry text on a 1.09:1 cream pill: the mobile
   strip signalled it well and the desktop sidebar barely at all. */
/* The marker is an inset bar on the DESKTOP sidebar, where the list is
   vertical. On the mobile pill strip the same shadow renders as a curved arc
   around the pill, because the pill is fully rounded, so the strip uses a
   berry fill instead. */
@media (min-width:801px){
  .ec-side a[aria-current="page"]{
    background:var(--pk-cream);box-shadow:inset 3px 0 0 0 var(--pk-primary);
  }
}

/* The strip hides 266px of 654px at 390 with nothing to say so. A fade on the
   right edge is the affordance, and it goes when you reach the end. */
@media (max-width:800px){
  .ec-side--tabs{
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
  }
  .ec-side--tabs[data-end]{-webkit-mask-image:none;mask-image:none}
}
@media (hover:hover) and (pointer:fine){ .ec-table a:hover{color:var(--pk-pink-ink)} }

/* Above 800 the sidebar is vertical and its current item is CREAM, not berry,
   so a gold ring on it measures 2.05. The berry fill, and therefore the gold
   ring, only exist on the mobile pill strip. */
/* No element-level ring override here either: outline-offset paints on the
   PARENT, so the sidebar link's own pill colour is not what the ring sits on.
   See the note in palesas.css. */

/* margin-inline:auto on .ec-panel, added 4 September 2026.
   It had max-width:1040px and no margin, so inside the 1200px .pk-wrap the
   card sat hard against the LEFT edge with 160px of dead space down the
   right. Tony reported it as "skewed to the left rather than centred" on
   Basket, Checkout and My orders at once. Only .ec-panel--narrow had ever
   been given margin-inline:auto, which is why the narrow empty-states looked
   right and every full-width panel did not.
   .ec-panel is used by 21 templates, so this one declaration also
   straightens Contact, Legal, 404, Search, Wishlist and the category
   archive. Each was re-checked rather than assumed. */

/* ---------------------------------------------------------------------------
   THE ORDERS TABLE STOPPED FITTING ITS OWN COLUMN. 4 September 2026.
   ---------------------------------------------------------------------------
   Tony's screenshot of My account > Orders shows a horizontal scrollbar under
   a five-column table, on a 1440px desktop, which is the width a data table
   should never need one at.

   The arithmetic: .ec-aside puts the account content in a `220px 1fr` grid
   inside a 1040px card, so the table gets roughly 570px. The table asks for
   more than that, because `.ec-table th,td{padding:16px}` spends 160px of the
   width on padding alone across five columns, and "September 4, 2026" holds
   the Date column open on top of it. `.ec-scroll>.ec-table{min-width:520px}`
   then guarantees it can never shrink to fit.

   Fixed by giving the table back the space rather than by removing the
   scroll: the scroll is the correct fallback and stays for genuinely narrow
   containers. Scoped to a table inside the account layout so the wider
   tables elsewhere (cart, order details) keep their roomier padding.
   ------------------------------------------------------------------------ */
@media (min-width:701px){
  .ec-aside .ec-scroll > .ec-table{min-width:0}
  .ec-aside .ec-table th,
  .ec-aside .ec-table td{padding:13px 12px}
  .ec-aside .ec-table th:first-child,
  .ec-aside .ec-table td:first-child{padding-left:16px}
  .ec-aside .ec-table th:last-child,
  .ec-aside .ec-table td:last-child{padding-right:16px;text-align:right}
  /* The date is the only cell long enough to hold the table open. Let it wrap
     onto two lines rather than force every other column narrower. */
  .ec-aside .ec-table td[data-th="Date"]{min-width:9ch}
  .ec-aside .ec-table td[data-th="Order"]{white-space:nowrap}
  .ec-aside .ec-table td[data-th="Total"]{white-space:nowrap;font-weight:600}
}