/* ==========================================================================
   DRIVE LINE SERVICE — Elementor compatibility layer
   Mode B. dlp.css is never edited. Everything Elementor's DOM breaks about it
   is repaired here, and only here.

   Measured against this install: Elementor 4.2.4, Pro 4.2.3, WooCommerce
   11.1.0, Optimized Markup ON, V4 atomic elements OFF, kit 6.

   Rules of this file:
   1. Raise only the property that needs raising, never a whole block. (Soul 7.5)
   2. Never raise grid-template-columns. dlp.css changes it inside media
      queries at 0-1-0, and a 0-2-0 rule here would defeat every breakpoint.
   3. Nothing here may exceed 0-5-0, so per-element panel values still win.
   ========================================================================== */


/* --- 1. Container defaults ------------------------------------------------
   Elementor gives every container a default inline and block padding that
   compounds through nesting. Five levels deep and the content is 40px narrower
   than the prototype, which reads as wrapped chips and a too-tall hero rather
   than as padding. (Soul 7.9)

   Zeroed as variables, not as literal padding, so a value set in the panel
   still writes at 0-3-0 and still wins.
   -------------------------------------------------------------------------- */
.e-con,
.e-con-inner {
  --container-default-padding-block-start: 0px;
  --container-default-padding-block-end: 0px;
  --container-default-padding-inline-start: 0px;
  --container-default-padding-inline-end: 0px;
  --padding-block-start: 0px;
  --padding-block-end: 0px;
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;

  /* Elementor's default container gap would stack on top of every margin
     dlp.css declares, so the prototype's vertical rhythm would come out
     roughly 20px loose at every single step. Zeroed as a variable, so a Gap
     set in the panel still writes at 0-3-0 and still wins. */
  --gap: 0px;
  --row-gap: 0px;
  --column-gap: 0px;
}

/* Boxed containers, if any survive, match the prototype's --max rather than
   Elementor's 1140 default. Layout width is normally carried by .wrap. */
.e-con {
  --content-width: 1220px;
}


/* --- 2. Literal display for prototype layout classes ---------------------
   Elementor writes `--display: flex` per container unconditionally, touched or
   not, so a variable-level override never survives. The layer must declare the
   literal property. (Soul 4, 7.8)

   Consequence to remember when building: the panel's Display control does
   nothing on a container carrying one of these classes. Neither does the panel
   Gap control, for the same reason. Put both in dlp.css.
   -------------------------------------------------------------------------- */
.e-con.grid,
.e-con.pgrid,
.e-con.ftr-grid,
.e-con.hero-stats,
.e-con.shop,
.e-con.pdp,
.e-con.cart-grid,
.e-con.citem,
.e-con.citem-right,
.e-con.totals,
.e-con.fpair,
.e-con.form,
.e-con.field,
.e-con.ticks {
  display: grid;
}

.e-con.btn-row,
.e-con.hdr-in,
.e-con.hdr-act,
.e-con.util-in,
.e-con.hero-in,
.e-con.ftr-bot,
.e-con.brands,
.e-con.rel-row,
.e-con.buy,
.e-con.search,
.e-con.shop-bar,
.e-con.pcard-foot,
.e-con.ftr-credit,
.e-con.cta-row {
  display: flex;
}

.e-con.svc {
  display: block;
}

/* Soul section 4 names two properties Elementor writes per element
   unconditionally, and flex-direction is the second one. Every class below
   relies on flex's own default of row, which means it declares no direction
   for a layer to raise, so Elementor's per-element `--flex-direction: column`
   wins by default and the row comes out stacked.

   Measured: this is what put the logo, the nav and the cart button on three
   separate lines, and what made every button full width. */
.e-con.hdr-in,
.e-con.hdr-act,
.e-con.util-in,
.e-con.btn-row,
.e-con.brands,
.e-con.rel-row,
.e-con.buy,
.e-con.search,
.e-con.shop-bar,
.e-con.pcard-foot,
.e-con.ftr-bot,
.e-con.ftr-credit,
.e-con.cta-row {
  flex-direction: row;
}

.e-con.hero-in,
.e-con.hero-copy,
.e-con.band-head {
  flex-direction: column;
}


/* --- 3. Theme Style colour on headings -----------------------------------
   The kit writes `.elementor-kit-6 h2 { color:#F2F5F8 }` at 0-1-1, which beats
   the prototype's `h2 { color: var(--zinc) }` at 0-0-1. Outside a light band
   the two values agree, so nothing shows. Inside `.band--light`, where --zinc
   is redeclared to #0e1115, the kit wins and every heading renders near-white
   on near-white paper.

   `:is()` takes the specificity of its heaviest argument, so this lands at
   0-1-2 and clears the kit by one element.
   -------------------------------------------------------------------------- */
.band--light :is(h1, h2, h3, h4, h5, h6) {
  color: var(--zinc);
}

.band--light :is(a) {
  color: inherit;
}


/* --- 4. Button widget ----------------------------------------------------
   A CSS class lands on the widget wrapper, not on the element that looks like
   a button. `.btn` on a Button widget styles a div while Elementor's own anchor
   sits inside it unstyled. (Soul 7.2)

   The wrapper is stripped back to layout only and the prototype's button
   appearance is re-declared on `.elementor-button`, which is the element the
   user actually sees and clicks. 0-3-0 clears Elementor's `.elementor-button`
   and `.elementor-size-*` defaults at 0-2-0.
   -------------------------------------------------------------------------- */
.elementor-widget-button.btn {
  display: inline-flex;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  letter-spacing: normal;
  text-transform: none;
  transition: none;
}

.elementor-widget-button.btn .elementor-button-wrapper {
  display: inline-flex;
  width: auto;
}

.elementor-widget-button.btn .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  width: auto;
  font: 700 var(--step-sm)/1 var(--body);
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: .95rem 1.5rem;
  border-radius: var(--r);
  border: 1px solid transparent;
  background: none;
  color: var(--chrome);
  text-align: center;
  transition: .16s ease;
}

.elementor-widget-button.btn--primary .elementor-button {
  background: var(--spicer);
  color: #fff;
}

.elementor-widget-button.btn--primary .elementor-button:hover {
  background: var(--spicer-hot);
  transform: translateY(-1px);
}

.elementor-widget-button.btn--ghost .elementor-button {
  background: transparent;
  color: var(--zinc);
  border-color: var(--line-strong);
}

.elementor-widget-button.btn--ghost .elementor-button:hover {
  border-color: var(--spicer);
  color: #fff;
}

.elementor-widget-button.btn--steel .elementor-button {
  background: var(--graphite-3);
  color: var(--zinc);
  border-color: var(--line-strong);
}

.elementor-widget-button.btn--steel .elementor-button:hover {
  background: var(--graphite-2);
  border-color: var(--spicer);
}

.elementor-widget-button.btn--wide,
.elementor-widget-button.btn--wide .elementor-button-wrapper,
.elementor-widget-button.btn--wide .elementor-button {
  width: 100%;
}


/* --- 5. Text widgets carrying a prototype text class --------------------
   A Text Editor widget wraps its content in <p>, which dlp.css gives a 1rem
   bottom margin. When the class on the widget also carries a margin, the two
   stack. Kill the inner one; the class keeps its own spacing.
   -------------------------------------------------------------------------- */
:is(.stamp, .lede, .figcap, .plate-label, .crumbs, .field-hint, .pcard-fits) p:last-child {
  margin-bottom: 0;
}

/* `.band-head > .stamp` and `.fgroup > .stamp` are direct-child selectors in
   dlp.css. Optimized Markup is ON so a widget is one node deep rather than two,
   but a Text Editor still nests its <p>, and a stamp reached through a nested
   container loses the match. Descendant twins. (Soul 7.13) */
.band-head .stamp,
.fgroup .stamp {
  display: block;
}


/* --- 6. The spec plate ---------------------------------------------------
   `::before` on a container belongs to Elementor. It is the Background Overlay
   control's layer, and `.plate::before` claims it for the punched mounting
   hole. That is an accepted trade: a card does not need a background overlay.
   (Soul 7.10)

   Elementor's own `::before` sets `inset: 0`, which leaves right and bottom
   pinned and fights the 7px hole. Re-declare the whole inset in one shorthand
   at 0-2-0.
   -------------------------------------------------------------------------- */
.e-con.plate::before,
li.product.plate::before {
  content: "";
  inset: 10px auto auto 10px;
  width: 7px;
  height: 7px;
  z-index: 2;
}

/* Do not let a Background Overlay be set on a plate by accident. */
.e-con.plate > .elementor-background-overlay {
  display: none;
}


/* --- 7. The service card's whole-surface link ----------------------------
   The prototype card is one <a class="plate svc">. In Elementor the card is a
   container and the link belongs to the heading widget inside it, so only the
   words are clickable.

   Rather than set `link` on the container, whose markup varies by version, the
   heading's own anchor is grown to cover the card. The card is already
   position:relative via `.plate`.
   -------------------------------------------------------------------------- */
.e-con.svc {
  position: relative;
}

.svc .elementor-widget-heading a {
  color: inherit;
}

.svc .elementor-widget-heading a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
}

.e-con.plate:has(.elementor-widget-heading a:hover) {
  border-color: rgba(213, 22, 28, .5);
}


/* --- 8. Sticky header ----------------------------------------------------
   A Theme Builder header cannot be sticky from the inside. It sits in
   `<header class="elementor-location-header">`, a wrapper exactly its own
   height, and a sticky box cannot travel inside a containing block its own
   size. The sticky goes on the wrapper. (Soul 7.11)

   Deviation from the prototype, stated plainly: there the utility bar scrolls
   away and only `.hdr` sticks. Here the wrapper carries both, so the utility
   bar stays visible. `.hdr` is released from sticky so there is no nested
   sticky to reason about.
   -------------------------------------------------------------------------- */
.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 60;
}

.elementor-location-header .hdr {
  position: static;
}

/* The shop sidebar's sticky offset assumed a 96px header. Let it measure. */
.filters {
  top: calc(var(--dlp-header-h, 96px) + 16px);
}


/* --- 9. Google Maps widget ----------------------------------------------
   `.map` on the widget gives the prototype's frame, but Elementor sets the
   iframe height at 0-2-0 by default. Beat it at 0-3-0 and let aspect-ratio
   drive the box.

   When building: leave the widget's Height control empty. Setting it writes
   0-5-0 and this stops applying.
   -------------------------------------------------------------------------- */
.elementor-widget-google_maps.map {
  aspect-ratio: 16 / 10;
  height: auto;
}

.elementor-widget-google_maps.map .elementor-custom-embed {
  height: 100%;
}

.elementor-widget-google_maps.map .elementor-custom-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(.35) contrast(1.05);
}


/* --- 10. WooCommerce loop as a parts tag --------------------------------
   inc/woo.php gives WooCommerce's loop the prototype's class names, so most of
   the card comes straight from dlp.css. What is left is beating WooCommerce's
   own selectors, which sit at 0-2-0 and 0-3-0. Adding `.pgrid` or `.pcard` to
   each one clears them by one class.
   -------------------------------------------------------------------------- */
.woocommerce ul.products.pgrid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(202px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

/* WooCommerce's clearfix pseudo-elements become grid items and leave a hole in
   the grid. They exist for a float layout that is no longer in use. */
.woocommerce ul.products.pgrid::before,
.woocommerce ul.products.pgrid::after {
  display: none;
}

.woocommerce ul.products li.product.pcard {
  width: auto;
  float: none;
  clear: none;
  margin: 0;
  padding: 1.1rem;
  text-align: left;
}

.woocommerce ul.products li.product.pcard .woocommerce-loop-product__link {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.woocommerce ul.products li.product.pcard .pcard-fig img {
  width: 52%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.woocommerce ul.products li.product.pcard .woocommerce-loop-product__title {
  font-family: var(--display);
  font-style: normal;
  font-size: var(--step-sm);
  font-weight: 600;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: .005em;
  color: var(--zinc);
  margin: 0 0 .45rem;
  padding: 0;
}

.woocommerce ul.products li.product.pcard {
  display: flex;
  flex-direction: column;
}

.woocommerce ul.products li.product.pcard .price {
  font: 800 italic 1.6rem/1 var(--display);
  color: var(--zinc);
  margin: 0;
  display: block;
}

/* WooCommerce wraps the amount in its own span, which must not reintroduce
   its own type. */
.woocommerce ul.products li.product.pcard .price .woocommerce-Price-amount,
.woocommerce ul.products li.product.pcard .price bdi {
  font: inherit;
  color: inherit;
}

.woocommerce ul.products li.product.pcard .price small {
  font: 500 .65rem/1 var(--mono);
  font-style: normal;
  letter-spacing: .1em;
  color: var(--chrome-mute);
  display: block;
  margin-top: .25rem;
}

.woocommerce ul.products li.product.pcard .price del {
  opacity: .5;
  font-size: .7em;
}

.woocommerce ul.products li.product.pcard .price ins {
  text-decoration: none;
}

.woocommerce ul.products li.product.pcard a.button {
  display: inline-block;
  flex: none;
  margin: 0;
  background: var(--graphite-3);
  border: 1px solid var(--line-strong);
  color: var(--zinc);
  border-radius: var(--r);
  padding: .6rem .8rem;
  font: 600 .72rem/1 var(--body);
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: .15s;
}

.woocommerce ul.products li.product.pcard a.button:hover {
  background: var(--spicer);
  border-color: var(--spicer);
  color: #fff;
}

.woocommerce ul.products li.product.pcard a.button.added {
  display: none;
}

.woocommerce ul.products li.product.pcard a.button.loading::after {
  border-color: currentColor;
}

.woocommerce ul.products li.product.pcard a.added_to_cart {
  display: block;
  margin-top: .5rem;
  font: 500 .68rem/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--signal);
}

/* Sale flash reuses the quote badge. */
.woocommerce ul.products li.product.pcard span.onsale {
  position: absolute;
  top: 8px;
  right: 8px;
  left: auto;
  margin: 0;
  min-width: 0;
  min-height: 0;
  line-height: 1;
  border-radius: 2px;
  padding: .32rem .45rem;
  font: 500 .6rem/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  background: rgba(213, 22, 28, .14);
  color: var(--spicer-hot);
  border: 1px solid rgba(213, 22, 28, .35);
}

/* The in-stock badge and the sale flash would collide. Stock badge steps down. */
.woocommerce ul.products li.product.pcard.sale .pbadge {
  top: auto;
  bottom: 8px;
  right: 8px;
}


/* --- 11. Editor safety --------------------------------------------------
   The mega panel is hidden until hover. Inside the editor a container the user
   is dragging must never be invisible, so the panel is neutralised there
   rather than left to a hover that will not happen. (Soul 7.15)
   -------------------------------------------------------------------------- */
body.elementor-editor-active .mega,
body.elementor-editor-preview .mega {
  transition: none;
}


/* ==========================================================================
   12. Build-only classes
   The prototype carried a dozen one-off spacings as inline `style` attributes
   on elements that are now Elementor widgets, where an inline style has
   nowhere to live. Each one becomes a named class here instead.

   These are the only class names in the build that are not in dlp.css. They
   exist so that no Style-tab value is ever set on a widget, which is what
   keeps a design revision to one stylesheet.
   ========================================================================== */

/* The hero photograph's host. `.hero-bg` is absolutely positioned against
   its containing block, and a widget wrapper was becoming that block, so the
   image painted into a box of zero height. display:contents takes the wrapper
   out of the box tree so .hero is the containing block again.

   Consequence in the editor: this widget has no box of its own, so select it
   from the Navigator rather than by clicking the hero. */
.hero-bg-host {
  display: contents;
}

/* Hero: prototype had style="margin-top:1.1rem" on the h1. */
.hero-copy .stamp {
  margin-bottom: 1.1rem;
}

/* Section intros: prototype had style="margin-top:1rem" on the lede. */
.band-head .lede {
  margin-top: 1rem;
}

/* Trailing button rows: style="margin-top:2rem" and 1.6rem. */
.band-cta {
  margin-top: 2rem;
}

.band-cta--sm {
  margin-top: 1.6rem;
}

/* Find-the-shop two-column row: style="gap:clamp(1.5rem,4vw,3rem)". */
.e-con.g-2--wide {
  gap: clamp(1.5rem, 4vw, 3rem);
}

/* Find-the-shop heading: style="margin-top:.9rem;font-size:var(--step-2)".
   The size has to reach the inner element, because a class on the widget
   wrapper cannot outrank `h2 { font-size }` on the heading itself. (Soul 7.2) */
.sec-h2 {
  margin-top: .9rem;
}

.sec-h2 .elementor-heading-title {
  font-size: var(--step-2);
}

/* Find-the-shop blurb: style="margin-top:1rem;color:var(--chrome-dim)". */
.copy-dim {
  margin-top: 1rem;
  color: var(--chrome-dim);
}

/* Hours table: prototype wrapped it in <div style="margin-top:1.6rem">. */
.hours-wrap {
  margin-top: 1.6rem;
}

/* Footer brand column: two inline-styled blocks under the logo. */
.ftr-blurb {
  margin-top: 1.2rem;
  max-width: 34ch;
  font-size: .875rem;
  color: var(--chrome-dim);
}

.ftr-stamp {
  margin-top: 1.2rem;
}


/* ==========================================================================
   13. Header template
   ========================================================================== */

/* Elementor gives a widget in a flex container full width, which would stack
   the logo, nav and cart vertically instead of laying them out on one row. */
.hdr-in > .elementor-element,
.hdr-act > .elementor-element,
.btn-row > .elementor-element,
.ftr-bot > .elementor-element,
.ftr-credit > .elementor-element {
  width: auto;
  max-width: 100%;
}

/* `.brand-logo` is on an <img> in the prototype. Here the class lands on the
   Image widget's wrapper, so the height has to reach the img. dlp.css drops
   the logo to 30px at 560px, which has to be repeated for the same reason. */
.elementor-widget-image.brand a,
.elementor-widget-image.brand figure {
  display: flex;
  margin: 0;
}

.elementor-widget-image.brand img {
  height: 46px;
  width: auto;
}

@media (max-width: 560px) {
  .elementor-widget-image.brand img {
    height: 30px;
  }
}


/* ==========================================================================
   14. Footer template
   ========================================================================== */

.elementor-widget-image.ftr-logo img {
  width: 100%;
  height: auto;
}

.elementor-widget-image.ftr-logo figure {
  margin: 0;
}

/* Icon List is the right widget for a heading plus a list of links, because it
   stays editable as a list. Its own markup adds a flex row and an icon slot
   per item, neither of which the prototype's `.ftr ul` expects. */
.ftr .elementor-widget-icon-list .elementor-icon-list-items {
  display: grid;
  gap: .55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ftr .elementor-widget-icon-list .elementor-icon-list-item {
  display: block;
  margin: 0;
  padding: 0;
}

.ftr .elementor-widget-icon-list .elementor-icon-list-item > a {
  display: block;
  padding: 0;
}

.ftr .elementor-widget-icon-list .elementor-icon-list-icon {
  display: none;
}

.ftr .elementor-widget-icon-list .elementor-icon-list-text {
  padding: 0;
  color: inherit;
}


/* ==========================================================================
   15. Parts counter, shop archive
   inc/shop.php emits the prototype's own class names, so most of this column
   comes straight from dlp.css. What is left is the handful of inline styles
   the prototype carried, and beating WooCommerce's archive defaults.
   ========================================================================== */

/* The parent theme constrains its content area, which would box the full-bleed
   bands. If a band still stops short of the viewport edge, the wrapper class
   on this install is not one of these two and I need its name. */
.woocommerce-shop .site-main,
.woocommerce-shop .page-content,
.tax-product_cat .site-main,
.tax-product_cat .page-content,
.single-product .site-main,
.single-product .page-content,
.woocommerce-cart .site-main,
.woocommerce-cart .page-content,
.woocommerce-checkout .site-main,
.woocommerce-checkout .page-content {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* The results column must be allowed to shrink, or a wide table inside a grid
   track blows the whole two-column layout past the viewport. */
.shop-main {
  min-width: 0;
}

/* The facet sidebar is a <form> here rather than an <aside>. */
form.filters {
  margin: 0;
}

.fgroup-note {
  font-size: var(--step-sm);
  color: var(--chrome-dim);
  margin-top: .6rem;
}

/* Prototype had the sort control as one inline-styled label. */
.shop-sort,
.shop-sort label {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
}

/* Quote plate: three inline styles in the prototype. */
.quote-plate {
  margin-top: 2.5rem;
}

.quote-grid {
  gap: 1.2rem;
}

.quote-note {
  font-size: var(--step-sm);
  color: var(--chrome-dim);
  margin-top: .4rem;
}

.quote-cta {
  margin-top: 1.4rem;
}

/* WooCommerce's notice wrapper and its own ordering form are not part of this
   layout; the toolbar above replaces them. */
.woocommerce .woocommerce-notices-wrapper:empty {
  display: none;
}

.shop-main .woocommerce-pagination ul {
  display: flex;
  gap: .4rem;
  border: 0;
  margin: 2rem 0 0;
  padding: 0;
}

.shop-main .woocommerce-pagination ul li {
  border: 0;
  margin: 0;
}

.shop-main .woocommerce-pagination ul li a,
.shop-main .woocommerce-pagination ul li span {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding: 0 .5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--graphite);
  color: var(--chrome);
  font: 500 var(--step-xs)/1 var(--mono);
  letter-spacing: .08em;
}

.shop-main .woocommerce-pagination ul li span.current {
  background: var(--spicer);
  border-color: var(--spicer);
  color: #fff;
}


/* ==========================================================================
   16. Single part
   `pdp` is added to the product's own post_class, so every .pdp rule in
   dlp.css applies to WooCommerce's markup directly.
   ========================================================================== */

/* WooCommerce declares its own layout on div.product at 0-2-1, so the grid
   needs one more class to land. */
.woocommerce div.product.pdp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.woocommerce div.product.pdp .summary,
.woocommerce div.product.pdp .entry-summary {
  margin: 0;
  float: none;
  width: auto;
}

/* The gallery becomes the spec plate figure. Products carry no photography
   yet, so what is inside is the line drawing from inc/woo.php. */
.woocommerce div.product.pdp .pdp-fig {
  float: none;
  width: auto;
  margin: 0;
}

.woocommerce div.product.pdp .pdp-fig .woocommerce-product-gallery__wrapper,
.woocommerce div.product.pdp .pdp-fig .woocommerce-product-gallery__image,
.woocommerce div.product.pdp .pdp-fig .woocommerce-product-gallery__image--placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  margin: 0;
  transform: none;
}

.woocommerce div.product.pdp .pdp-fig img {
  width: 46%;
  height: auto;
  margin: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.woocommerce div.product.pdp .pdp-fig .woocommerce-product-gallery__trigger {
  display: none;
}

.woocommerce div.product.pdp h1.product_title {
  font-size: var(--step-2);
  font-style: normal;
  margin-bottom: .8rem;
}

/* Prototype had style="font-size:1rem" on the PDP blurb. */
.pdp-lede {
  font-size: 1rem;
}

.pdp-lede p:last-child {
  margin-bottom: 0;
}

.pdp-hint {
  margin-top: 1.5rem;
}

.spec .in-stock {
  color: var(--signal);
}

.spec .out-of-stock {
  color: var(--spicer-hot);
}

/* WooCommerce's add-to-cart form becomes the prototype's .buy row. */
.woocommerce div.product.pdp form.cart {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  margin: .4rem 0 0;
}

.woocommerce div.product.pdp form.cart .quantity {
  display: inline-flex;
  float: none;
  margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  overflow: hidden;
}

.woocommerce div.product.pdp form.cart .quantity label {
  display: none;
}

.woocommerce div.product.pdp form.cart .quantity input.qty {
  width: 56px;
  height: 46px;
  background: var(--void);
  border: 0;
  color: var(--zinc);
  text-align: center;
  font: 600 var(--step-0)/1 var(--mono);
  -moz-appearance: textfield;
  appearance: textfield;
}

.woocommerce div.product.pdp form.cart .quantity input.qty::-webkit-outer-spin-button,
.woocommerce div.product.pdp form.cart .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.woocommerce div.product.pdp form.cart button.single_add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  float: none;
  margin: 0;
  padding: .95rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: var(--spicer);
  color: #fff;
  font: 700 var(--step-sm)/1 var(--body);
  text-transform: uppercase;
  letter-spacing: .1em;
  transition: .16s ease;
}

.woocommerce div.product.pdp form.cart button.single_add_to_cart_button:hover {
  background: var(--spicer-hot);
  transform: translateY(-1px);
}

/* The closing strip: three inline styles in the prototype. */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
}

.cta-h {
  font-size: var(--step-2);
}

.cta-p {
  margin-top: .7rem;
  color: var(--chrome-dim);
}


/* ==========================================================================
   17. Quantity steppers
   The prototype's .qty has a minus and a plus either side of the field.
   WooCommerce ships a bare number input, so assets/js/dlp.js injects the two
   buttons and this styles them. Shared by the PDP and the cart.
   ========================================================================== */

.qstep {
  background: var(--graphite-2);
  border: 0;
  color: var(--zinc);
  width: 42px;
  height: 46px;
  font-size: 1.1rem;
  line-height: 1;
  flex: none;
}

.qstep:hover {
  background: var(--graphite-3);
}

.woocommerce-cart .cart_item .qstep {
  width: 30px;
  height: 32px;
  font-size: .9rem;
}


/* ==========================================================================
   18. Your order, the cart
   WooCommerce's cart is a form holding a six-column table, plus a totals
   block beside it. The prototype is a two-column grid of line-item cards and
   a summary plate. No template override: the table is re-laid out as a grid,
   and each cell is placed where the prototype puts it.
   ========================================================================== */

.woocommerce-cart .woocommerce {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

.woocommerce-cart .woocommerce-cart-form {
  margin: 0;
  min-width: 0;
}

/* The table becomes a stack of cards. */
.woocommerce-cart table.cart,
.woocommerce-cart table.cart tbody {
  display: block;
  width: 100%;
  border: 0;
  margin: 0;
}

.woocommerce-cart table.cart thead {
  display: none;
}

.woocommerce-cart table.cart tr.cart_item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: .25rem 1rem;
  align-items: center;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
}

.woocommerce-cart table.cart tr.cart_item td {
  display: block;
  border: 0;
  padding: 0;
  background: none;
}

/* Cell placement, in the prototype's order rather than the table's. */
.woocommerce-cart table.cart tr.cart_item td.product-thumbnail {
  grid-column: 1;
  grid-row: 1 / span 3;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: var(--graphite);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.woocommerce-cart table.cart tr.cart_item td.product-thumbnail img {
  width: 60%;
  height: auto;
  margin: 0;
}

.woocommerce-cart table.cart tr.cart_item td.product-name {
  grid-column: 2;
  grid-row: 1;
  font-weight: 600;
  color: var(--zinc);
  font-size: var(--step-sm);
}

.woocommerce-cart table.cart tr.cart_item td.product-name a {
  color: inherit;
}

.woocommerce-cart table.cart tr.cart_item td.product-price {
  grid-column: 2;
  grid-row: 2;
  font: 500 .8rem/1.6 var(--mono);
  letter-spacing: .08em;
  color: var(--chrome-dim);
}

.woocommerce-cart table.cart tr.cart_item td.product-quantity {
  grid-column: 2;
  grid-row: 3;
  margin-top: .3rem;
}

.woocommerce-cart table.cart tr.cart_item td.product-quantity .quantity {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  overflow: hidden;
}

.woocommerce-cart table.cart tr.cart_item td.product-quantity .quantity label {
  display: none;
}

.woocommerce-cart table.cart tr.cart_item td.product-quantity input.qty {
  width: 40px;
  height: 32px;
  background: var(--void);
  border: 0;
  color: var(--zinc);
  text-align: center;
  font: 600 .85rem/1 var(--mono);
  -moz-appearance: textfield;
  appearance: textfield;
}

.woocommerce-cart table.cart tr.cart_item td.product-quantity input.qty::-webkit-outer-spin-button,
.woocommerce-cart table.cart tr.cart_item td.product-quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.woocommerce-cart table.cart tr.cart_item td.product-subtotal {
  grid-column: 3;
  grid-row: 1;
  text-align: right;
  font: 600 var(--step-0)/1 var(--mono);
  color: var(--zinc);
}

.woocommerce-cart table.cart tr.cart_item td.product-remove {
  grid-column: 3;
  grid-row: 2 / span 2;
  text-align: right;
  align-self: start;
}

.woocommerce-cart table.cart tr.cart_item td.product-remove a.remove {
  display: inline-block;
  width: auto;
  height: auto;
  font: 500 .68rem/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--chrome-mute);
  background: none;
  border-radius: 0;
}

.woocommerce-cart table.cart tr.cart_item td.product-remove a.remove::after {
  content: "Remove";
}

.woocommerce-cart table.cart tr.cart_item td.product-remove a.remove:hover {
  color: var(--spicer-hot);
  background: none;
}

/* The prototype has no × glyph; the word Remove replaces it. */
.woocommerce-cart table.cart tr.cart_item td.product-remove a.remove {
  font-size: 0;
}

.woocommerce-cart table.cart tr.cart_item td.product-remove a.remove::after {
  font-size: .68rem;
}

/* The actions row: update cart, and the coupon field if it is enabled. */
.woocommerce-cart table.cart tr:not(.cart_item) {
  display: block;
  border: 0;
}

.woocommerce-cart table.cart td.actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  justify-content: space-between;
  border: 0;
  padding: 1.4rem 0 0;
  background: none;
}

.woocommerce-cart table.cart td.actions .coupon {
  display: flex;
  gap: .6rem;
  align-items: center;
}

.woocommerce-cart table.cart td.actions .coupon label {
  display: none;
}

.woocommerce-cart table.cart td.actions input#coupon_code {
  width: auto;
  background: var(--void);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  color: var(--zinc);
  padding: .7rem .9rem;
  font: 500 var(--step-sm)/1.2 var(--mono);
  letter-spacing: .06em;
}

.woocommerce-cart table.cart td.actions button {
  background: var(--graphite-3);
  border: 1px solid var(--line-strong);
  color: var(--zinc);
  border-radius: var(--r);
  padding: .8rem 1.2rem;
  font: 700 var(--step-xs)/1 var(--body);
  text-transform: uppercase;
  letter-spacing: .1em;
}

.woocommerce-cart table.cart td.actions button:hover:not([disabled]) {
  background: var(--graphite-2);
  border-color: var(--spicer);
}

/* Summary plate. */
.woocommerce-cart .cart-collaterals {
  width: auto;
  float: none;
  min-width: 0;
}

.woocommerce-cart .cart-collaterals .cart_totals {
  width: auto;
  float: none;
  position: relative;
  background: linear-gradient(160deg, var(--graphite-2), var(--graphite));
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.6rem 1.4rem 1.4rem;
}

.woocommerce-cart .cart-collaterals .cart_totals::before {
  content: "";
  position: absolute;
  inset: 10px auto auto 10px;
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: var(--void);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.woocommerce-cart .cart-collaterals .cart_totals > h2 {
  font: 500 var(--step-xs)/1.4 var(--mono);
  font-style: normal;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--chrome-mute);
  margin: 0 0 1rem 1.1rem;
}

.woocommerce-cart .cart_totals table,
.woocommerce-cart .cart_totals table tbody {
  display: block;
  width: 100%;
  border: 0;
  margin: 0;
}

.woocommerce-cart .cart_totals table tr {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 0 .65rem;
  border: 0;
}

.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
  display: block;
  border: 0;
  padding: 0;
  background: none;
  font-size: var(--step-sm);
  font-weight: 400;
  color: var(--chrome-dim);
  text-align: right;
}

.woocommerce-cart .cart_totals table th {
  text-align: left;
}

.woocommerce-cart .cart_totals table tr.order-total {
  border-top: 1px solid var(--line-strong);
  padding-top: .9rem;
  margin-top: .25rem;
}

.woocommerce-cart .cart_totals table tr.order-total th,
.woocommerce-cart .cart_totals table tr.order-total td {
  color: var(--zinc);
  font-size: var(--step-1);
  font-weight: 600;
}

.woocommerce-cart .cart_totals table tr.order-total td .woocommerce-Price-amount {
  font: 800 italic 1.7rem/1 var(--display);
}

.woocommerce-cart .wc-proceed-to-checkout {
  padding: 1.2rem 0 0;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: .95rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: var(--spicer);
  color: #fff;
  font: 700 var(--step-sm)/1 var(--body);
  text-transform: uppercase;
  letter-spacing: .1em;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
  background: var(--spicer-hot);
}

/* Empty cart. */
.woocommerce-cart .cart-empty {
  border: 1px dashed var(--line-strong);
  border-radius: var(--r);
  padding: 3rem 1.5rem 1rem;
  text-align: center;
  color: var(--chrome-dim);
  font-family: var(--display);
  font-size: var(--step-1);
  text-transform: uppercase;
  font-style: normal;
}

.woocommerce-cart .return-to-shop {
  text-align: center;
  padding-bottom: 3rem;
}

.woocommerce-cart .return-to-shop a.button {
  display: inline-flex;
  padding: .95rem 1.5rem;
  border-radius: var(--r);
  background: var(--spicer);
  color: #fff;
  font: 700 var(--step-sm)/1 var(--body);
  text-transform: uppercase;
  letter-spacing: .1em;
}


/* ==========================================================================
   19. Checkout
   WooCommerce's checkout is one form holding #customer_details on the left
   and #order_review on the right, with every field as a <p class="form-row">.
   The prototype is the same two-column shape with each block on a plate and
   every field as .field, so this is a mapping rather than a rebuild.
   ========================================================================== */

.woocommerce-checkout form.checkout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

.woocommerce-checkout form.checkout #customer_details {
  grid-column: 1;
  min-width: 0;
}

.woocommerce-checkout form.checkout #order_review_heading,
.woocommerce-checkout form.checkout #order_review {
  grid-column: 2;
}

.woocommerce-checkout form.checkout #customer_details .col-1,
.woocommerce-checkout form.checkout #customer_details .col-2 {
  width: auto;
  float: none;
}

/* Each field block becomes a plate. */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields {
  position: relative;
  background: linear-gradient(160deg, var(--graphite-2), var(--graphite));
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.6rem 1.4rem 1.4rem;
  margin-bottom: 1.5rem;
}

.woocommerce-checkout .woocommerce-billing-fields::before,
.woocommerce-checkout .woocommerce-shipping-fields::before,
.woocommerce-checkout .woocommerce-additional-fields::before {
  content: "";
  position: absolute;
  inset: 10px auto auto 10px;
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: var(--void);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .woocommerce-shipping-fields > h3,
.woocommerce-checkout .woocommerce-additional-fields > h3,
.woocommerce-checkout #order_review_heading {
  font: 500 var(--step-xs)/1.4 var(--mono);
  font-style: normal;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--chrome-mute);
  margin: 0 0 1rem 1.1rem;
}

.woocommerce-checkout #order_review_heading {
  margin-left: 0;
}

/* Fields. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
  display: grid;
  gap: 1.1rem;
}

.woocommerce-checkout p.form-row {
  display: grid;
  gap: .45rem;
  margin: 0;
  padding: 0;
  width: auto;
  float: none;
}

.woocommerce-checkout p.form-row label {
  font: 500 var(--step-xs)/1.4 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--chrome);
}

.woocommerce-checkout p.form-row label .required {
  color: var(--spicer-hot);
  text-decoration: none;
  border: 0;
}

.woocommerce-checkout p.form-row input.input-text,
.woocommerce-checkout p.form-row textarea,
.woocommerce-checkout p.form-row select,
.woocommerce-checkout .select2-container .select2-selection--single {
  background: var(--void);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  color: var(--zinc);
  padding: .8rem .9rem;
  font: 400 var(--step-0)/1.5 var(--body);
  width: 100%;
  height: auto;
}

.woocommerce-checkout p.form-row input.input-text:focus,
.woocommerce-checkout p.form-row textarea:focus,
.woocommerce-checkout p.form-row select:focus {
  outline: none;
  border-color: var(--spicer);
}

.woocommerce-checkout p.form-row textarea {
  min-height: 90px;
  resize: vertical;
}

.woocommerce-checkout .select2-container .select2-selection__rendered {
  color: var(--zinc);
  padding: 0;
  line-height: 1.5;
}

.woocommerce-checkout .select2-container .select2-selection__arrow {
  height: 100%;
}

/* Two fields on one row, as the prototype's .fpair does. */
.woocommerce-checkout p.form-row-first,
.woocommerce-checkout p.form-row-last {
  width: calc(50% - .55rem);
  display: inline-grid;
  vertical-align: top;
}

.woocommerce-checkout p.form-row-first {
  margin-right: 1.1rem;
}

/* Order review becomes the summary plate. */
.woocommerce-checkout #order_review {
  position: relative;
  background: linear-gradient(160deg, var(--graphite-2), var(--graphite));
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.6rem 1.4rem 1.4rem;
}

.woocommerce-checkout #order_review table.shop_table,
.woocommerce-checkout #order_review table.shop_table thead,
.woocommerce-checkout #order_review table.shop_table tbody,
.woocommerce-checkout #order_review table.shop_table tfoot {
  display: block;
  width: 100%;
  border: 0;
  margin: 0;
  padding: 0;
}

.woocommerce-checkout #order_review table.shop_table thead {
  display: none;
}

.woocommerce-checkout #order_review table.shop_table tr {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 0 .65rem;
  border: 0;
}

.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
  display: block;
  border: 0;
  padding: 0;
  background: none;
  font-size: var(--step-sm);
  font-weight: 400;
  color: var(--chrome-dim);
  text-align: right;
}

.woocommerce-checkout #order_review table.shop_table th {
  text-align: left;
}

.woocommerce-checkout #order_review table.shop_table tr.cart_item td.product-name {
  color: var(--chrome);
  text-align: left;
}

.woocommerce-checkout #order_review table.shop_table tfoot tr.order-total {
  border-top: 1px solid var(--line-strong);
  padding-top: .9rem;
  margin-top: .25rem;
}

.woocommerce-checkout #order_review table.shop_table tfoot tr.order-total th,
.woocommerce-checkout #order_review table.shop_table tfoot tr.order-total td {
  color: var(--zinc);
  font-size: var(--step-1);
  font-weight: 600;
}

.woocommerce-checkout #order_review table.shop_table tfoot tr.order-total .woocommerce-Price-amount {
  font: 800 italic 1.7rem/1 var(--display);
}

/* Payment. */
.woocommerce-checkout #payment {
  background: none;
  border-radius: 0;
  margin-top: 1.2rem;
}

.woocommerce-checkout #payment ul.payment_methods {
  border: 0;
  padding: 0;
  margin: 0 0 1rem;
  list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
  display: grid;
  gap: .4rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--line);
}

.woocommerce-checkout #payment ul.payment_methods li label {
  font-size: var(--step-sm);
  color: var(--chrome);
}

.woocommerce-checkout #payment .payment_box {
  background: var(--void);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: .9rem 1.1rem;
  font-size: .9rem;
  color: var(--chrome-dim);
  margin: 0;
}

.woocommerce-checkout #payment .payment_box::before {
  display: none;
}

.woocommerce-checkout #payment .place-order {
  padding: 0;
}

.woocommerce-checkout #payment button#place_order {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  float: none;
  margin: 0;
  padding: .95rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: var(--spicer);
  color: #fff;
  font: 700 var(--step-sm)/1 var(--body);
  text-transform: uppercase;
  letter-spacing: .1em;
}

.woocommerce-checkout #payment button#place_order:hover {
  background: var(--spicer-hot);
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
  font-size: .875rem;
  color: var(--chrome-dim);
  margin-bottom: 1rem;
}


/* ==========================================================================
   20. Notices and the order-received page
   ========================================================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
  border-top: 0;
  border-left: 3px solid var(--spicer);
  background: rgba(213, 22, 28, .07);
  color: var(--chrome);
  border-radius: 0 var(--r) var(--r) 0;
  padding: .9rem 1.1rem;
  font-size: .9rem;
  list-style: none;
  margin: 0 0 1.5rem;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  display: none;
}

.woocommerce-message {
  border-left-color: var(--signal);
  background: rgba(79, 191, 116, .08);
}

.woocommerce-message a.button,
.woocommerce-info a.button {
  background: var(--graphite-3);
  border: 1px solid var(--line-strong);
  color: var(--zinc);
  border-radius: var(--r);
  padding: .5rem .8rem;
  font: 600 .72rem/1 var(--body);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.woocommerce-order .woocommerce-order-overview,
.woocommerce-order .woocommerce-order-details table.shop_table,
.woocommerce-order .woocommerce-customer-details address {
  border-color: var(--line);
  color: var(--chrome);
}

.woocommerce-order .woocommerce-order-overview {
  display: grid;
  gap: .35rem 1rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border: 1px solid rgba(79, 191, 116, .35);
  background: rgba(79, 191, 116, .08);
  border-radius: var(--r);
  padding: 1.3rem;
  margin: 0 0 1.5rem;
  list-style: none;
}

.woocommerce-order .woocommerce-order-overview li {
  font: 500 .74rem/1.5 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--chrome-mute);
  border: 0;
  padding: 0;
}

.woocommerce-order .woocommerce-order-overview li strong {
  display: block;
  margin-top: .25rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--chrome);
  font-size: .9rem;
}


/* ==========================================================================
   21. Commerce breakpoints
   dlp.css collapses .shop, .pdp and .cart-grid to one column at 1000px. The
   WooCommerce equivalents are different selectors, so they need the same
   treatment at the same width.
   ========================================================================== */

@media (max-width: 1000px) {
  .woocommerce div.product.pdp,
  .woocommerce-cart .woocommerce,
  .woocommerce-checkout form.checkout {
    grid-template-columns: 1fr;
  }

  .woocommerce-checkout form.checkout #customer_details,
  .woocommerce-checkout form.checkout #order_review_heading,
  .woocommerce-checkout form.checkout #order_review {
    grid-column: 1;
  }
}

@media (max-width: 560px) {
  .woocommerce-checkout p.form-row-first,
  .woocommerce-checkout p.form-row-last {
    width: 100%;
    display: grid;
  }

  .woocommerce-checkout p.form-row-first {
    margin-right: 0;
  }
}

/* The checkout banner's estimate link is red in the prototype. */
.pbanner-lede a {
  color: var(--spicer-hot);
}

.pbanner-lede p:last-child {
  margin-bottom: 0;
}


/* ==========================================================================
   22. Cart, the prototype's own copy and controls
   ========================================================================== */

.cart-lines {
  margin-bottom: 1rem;
}

.woocommerce-cart .wc-proceed-to-checkout {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.cart-free-ship {
  margin: 0;
  order: -1;
}

.cart-keep {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: .95rem 1.5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: transparent;
  color: var(--zinc);
  font: 700 var(--step-sm)/1 var(--body);
  text-transform: uppercase;
  letter-spacing: .1em;
}

.cart-keep:hover {
  border-color: var(--spicer);
  color: #fff;
}

.cart-collect {
  margin: .25rem 0 0;
}

.cart-collect a {
  color: var(--zinc);
}


/* ==========================================================================
   23. Checkout layout
   #customer_details is display:contents so its two columns become direct grid
   items of the form. That lets the delivery plate, which WooCommerce can only
   print as a sibling, sit between the details plate and the notes plate
   without moving a single node.
   ========================================================================== */

.woocommerce-checkout form.checkout #customer_details {
  display: contents;
}

.woocommerce-checkout form.checkout #customer_details .col-1 {
  grid-column: 1;
  grid-row: 1;
}

.woocommerce-checkout form.checkout .dlp-delivery {
  grid-column: 1;
  grid-row: 2;
}

.woocommerce-checkout form.checkout #customer_details .col-2 {
  grid-column: 1;
  grid-row: 3;
}

.woocommerce-checkout form.checkout #order_review_heading {
  display: none;
}

.woocommerce-checkout form.checkout #order_review {
  grid-column: 2;
  grid-row: 1 / span 3;
}

/* The delivery plate. */
.dlp-delivery {
  position: relative;
  background: linear-gradient(160deg, var(--graphite-2), var(--graphite));
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.6rem 1.4rem 1.4rem;
}

.dlp-delivery::before {
  content: "";
  position: absolute;
  inset: 10px auto auto 10px;
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: var(--void);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.dlp-delivery-address {
  display: grid;
  gap: 1.1rem;
}

.dlp-delivery-methods:not(:empty) {
  margin-bottom: 1.1rem;
}

/* Shipping choices as the prototype's two radio cards. */
.dlp-delivery-methods ul {
  display: grid;
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dlp-delivery-methods ul li {
  display: block;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--void);
}

.dlp-delivery-methods ul li:has(input:checked) {
  border-color: var(--spicer);
}

.dlp-delivery-methods ul li label {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: .3rem .75rem;
  align-items: center;
  padding: .9rem 1.1rem;
  margin: 0;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  font: inherit;
}

.dlp-delivery-methods ul li input[type="radio"] {
  grid-column: 1;
  grid-row: 1;
  accent-color: var(--spicer);
  width: 16px;
  height: 16px;
  margin: 0;
}

.dlp-delivery-methods ul li .ship-name {
  grid-column: 2;
  grid-row: 1;
  font-weight: 600;
  color: var(--zinc);
  font-size: var(--step-sm);
}

.dlp-delivery-methods ul li .ship-price {
  grid-column: 3;
  grid-row: 1;
  font: 500 var(--step-xs)/1 var(--mono);
  letter-spacing: .08em;
  color: var(--chrome);
  text-align: right;
}

.dlp-delivery-methods ul li .ship-desc {
  grid-column: 2 / span 2;
  grid-row: 2;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--chrome-dim);
}

/* Fields WooCommerce needs and the prototype does not show. */
.woocommerce-checkout p.form-row.dlp-hidden-field {
  display: none;
}

.woocommerce-checkout p.form-row.dlp-field-narrow {
  max-width: 200px;
}

/* The secure-payment note. */
.co-secure {
  border: 1px dashed var(--line-strong);
  border-radius: var(--r);
  padding: .9rem 1.1rem;
  margin-bottom: 1.3rem;
}

.co-secure .stamp {
  display: block;
  margin-bottom: .5rem;
}

.co-secure p {
  font-size: .9rem;
  line-height: 1.6;
  color: var(--chrome-dim);
  margin: 0;
}

/* Summary plate: label, line items, then the totals. */
.woocommerce-checkout #order_review > .plate-label {
  display: block;
  margin: 0 0 1rem 1.1rem;
}

.woocommerce-checkout #order_review table.shop_table tbody tr.cart_item {
  border-bottom: 1px solid var(--line);
  padding-bottom: .65rem;
  margin-bottom: .65rem;
}

.woocommerce-checkout #payment .place-order {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.co-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: .95rem 1.5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: transparent;
  color: var(--zinc);
  font: 700 var(--step-sm)/1 var(--body);
  text-transform: uppercase;
  letter-spacing: .1em;
}

.co-back:hover {
  border-color: var(--spicer);
  color: #fff;
}

.co-call {
  margin: .25rem 0 0;
}

.co-call a {
  color: var(--zinc);
}


/* ==========================================================================
   24. Order received
   A real WooCommerce order, reported in the prototype's green panel.
   ========================================================================== */

.woocommerce-order .ok {
  margin-bottom: 1.5rem;
}

.woocommerce-order .ok .woocommerce-thankyou-order-received {
  display: grid;
  gap: .5rem;
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--chrome-dim);
  font-size: var(--step-sm);
}

.woocommerce-order .ok .woocommerce-thankyou-order-received::before {
  display: none;
}

.woocommerce-order .ok .ok-h {
  font-family: var(--display);
  font-size: var(--step-1);
  font-weight: 800;
  font-style: normal;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--signal);
}

.woocommerce-order .ok .ok-p a {
  color: var(--zinc);
}

.woocommerce-order .ok .woocommerce-order-overview {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .35rem 1rem;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  list-style: none;
}

.woocommerce-order .ok .woocommerce-order-overview li {
  display: contents;
  font: 500 .74rem/1.5 var(--mono);
  border: 0;
  padding: 0;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--chrome-mute);
}

.woocommerce-order .ok .woocommerce-order-overview li strong {
  display: block;
  text-transform: none;
  letter-spacing: 0;
  color: var(--chrome);
  font-size: .8rem;
  margin: 0;
}

.woocommerce-order section.woocommerce-order-details,
.woocommerce-order section.woocommerce-customer-details {
  margin-top: 2rem;
}

.woocommerce-order h2 {
  font-size: var(--step-2);
  margin-bottom: 1rem;
}

.woocommerce-order table.woocommerce-table--order-details {
  width: 100%;
  border-collapse: collapse;
}

.woocommerce-order table.woocommerce-table--order-details th,
.woocommerce-order table.woocommerce-table--order-details td {
  text-align: left;
  padding: .7rem .2rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--step-sm);
  vertical-align: top;
  color: var(--chrome);
}

.woocommerce-order table.woocommerce-table--order-details thead th,
.woocommerce-order table.woocommerce-table--order-details tfoot th {
  font: 500 var(--step-xs)/1.5 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--chrome-mute);
}

.woocommerce-order .woocommerce-customer-details address {
  font-style: normal;
  font-size: var(--step-sm);
  line-height: 1.8;
  color: var(--chrome-dim);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.1rem;
}


/* ==========================================================================
   25. Interior pages
   Services, the seven service details, about, contact and estimate. As with
   the homepage, the prototype carried these spacings as inline `style`
   attributes on elements that are now widgets, so each becomes a named class.
   ========================================================================== */

/* Two-column rows. dlp.css owns the columns; these are the gap and alignment
   variants the prototype set inline. Gap and alignment only, never
   grid-template-columns, so every breakpoint in dlp.css still lands. */
.e-con.g-2--wider {
  gap: clamp(1.5rem, 4vw, 3.5rem);
}

.e-con.g-2--top {
  align-items: start;
}

.e-con.g-2--mid {
  align-items: center;
}

/* Section heading under a stamp: margin-top:.9rem, font-size:var(--step-2).
   The size has to reach the inner element, because a class on the widget
   wrapper cannot outrank `h2 { font-size }` on the heading itself. */
.sec-h2 {
  margin-top: .9rem;
}

.sec-h2 .elementor-heading-title {
  font-size: var(--step-2);
}

/* Body prose under a section heading: margin-top:1.2rem. */
.prose-top {
  margin-top: 1.2rem;
}

.prose-top p:last-child,
.copy-dim p:last-child {
  margin-bottom: 0;
}

/* Secondary copy: margin-top:1rem, colour --chrome-dim. */
.copy-dim {
  margin-top: 1rem;
  color: var(--chrome-dim);
}

/* A second plate stacked under the first. */
.plate--stacked,
.e-con.plate--stacked {
  margin-top: 1.5rem;
}

/* A hint sitting below a list or a table. */
.hint-top {
  margin-top: 1.1rem;
}

.hint-top p:last-child {
  margin-bottom: 0;
}

/* FAQ answer under its question. */
.faq-a {
  margin-top: .6rem;
  color: var(--chrome-dim);
  font-size: var(--step-sm);
}

.faq-a p:last-child {
  margin-bottom: 0;
}

/* Links the prototype coloured inline. Named rather than inlined so a colour
   change stays in this file. */
.link-hot {
  color: var(--spicer-hot);
}

.link-zinc {
  color: var(--zinc);
}

/* About: the mark is centred and capped at 400px in the prototype. */
.about-mark img {
  max-width: 400px;
  height: auto;
  margin-inline: auto;
}

/* About: the booth photo carries .legacy from dlp.css, which needs to reach
   the img rather than the Image widget's wrapper. */
.elementor-widget-image.legacy img {
  width: 100%;
  height: auto;
  border-radius: var(--r);
}

.elementor-widget-image.legacy figure,
.about-mark figure {
  margin: 0;
}

/* The closing strip, shared by services, about and all seven details. */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
}

.cta-h .elementor-heading-title {
  font-size: var(--step-2);
}

.cta-p {
  margin-top: .7rem;
  color: var(--chrome-dim);
}

.cta-p p:last-child {
  margin-bottom: 0;
}


/* ==========================================================================
   26. Elementor Pro forms
   The contact and estimate forms are Form widgets, not markup, so they stay
   editable and their submissions land in Elementor's own Submissions table.

   Field pairing is keyed on `elementor-field-group-{custom_id}`, which
   Elementor generates from the field's ID. That is the only field key the
   live export proved, so no per-field width or class control is assumed.
   ========================================================================== */

.plate .elementor-form .elementor-form-fields-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
  margin: 0;
}

.plate .elementor-form .elementor-field-group {
  display: grid;
  gap: .45rem;
  grid-column: span 2;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  align-content: start;
}

/* The two-up pairs the prototype has: name beside phone on both forms, and
   length beside series on the estimate. */
.plate .elementor-form .elementor-field-group-name,
.plate .elementor-form .elementor-field-group-phone,
.plate .elementor-form .elementor-field-group-length,
.plate .elementor-form .elementor-field-group-series {
  grid-column: span 1;
}

.plate .elementor-form .elementor-field-label {
  font: 500 var(--step-xs)/1.4 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--chrome);
  padding: 0;
}

/* The prototype marks required fields with a red asterisk. Keyed on the
   control actually being required rather than on an Elementor class, so it
   holds whether or not the form's own "mark required" setting is on. */
.plate .elementor-form .elementor-field-group:has([required]) > .elementor-field-label::after {
  content: " *";
  color: var(--spicer-hot);
}

.plate .elementor-form .elementor-field-textual,
.plate .elementor-form select.elementor-field,
.plate .elementor-form textarea.elementor-field {
  background: var(--void);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  color: var(--zinc);
  padding: .8rem .9rem;
  font: 400 var(--step-0)/1.5 var(--body);
  width: 100%;
  height: auto;
  box-shadow: none;
}

.plate .elementor-form .elementor-field-textual:focus,
.plate .elementor-form select.elementor-field:focus,
.plate .elementor-form textarea.elementor-field:focus {
  outline: none;
  border-color: var(--spicer);
  box-shadow: none;
}

.plate .elementor-form .elementor-field-textual::placeholder,
.plate .elementor-form textarea.elementor-field::placeholder {
  color: var(--chrome-mute);
}

.plate .elementor-form textarea.elementor-field {
  min-height: 130px;
  resize: vertical;
}

/* Submit is the prototype's full-width primary button. */
.plate .elementor-form .e-form__buttons {
  grid-column: span 2;
}

.plate .elementor-form .e-form__buttons button.elementor-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: .95rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: var(--spicer);
  color: #fff;
  font: 700 var(--step-sm)/1 var(--body);
  text-transform: uppercase;
  letter-spacing: .1em;
  transition: .16s ease;
}

.plate .elementor-form .e-form__buttons button.elementor-button:hover {
  background: var(--spicer-hot);
}

/* Messages, in the prototype's own panel language. */
.plate .elementor-message {
  border-left: 3px solid var(--signal);
  background: rgba(79, 191, 116, .08);
  border-radius: 0 var(--r) var(--r) 0;
  padding: .9rem 1.1rem;
  font-size: .9rem;
  color: var(--chrome);
  margin-top: 1rem;
}

.plate .elementor-message.elementor-message-danger {
  border-left-color: var(--spicer);
  background: rgba(213, 22, 28, .07);
}

.plate .elementor-form .elementor-field-group.elementor-error .elementor-field {
  border-color: var(--spicer);
}

.plate .elementor-form .elementor-field-group .elementor-message {
  margin-top: .25rem;
}

@media (max-width: 560px) {
  .plate .elementor-form .elementor-form-fields-wrapper {
    grid-template-columns: 1fr;
  }

  .plate .elementor-form .elementor-field-group,
  .plate .elementor-form .elementor-field-group-name,
  .plate .elementor-form .elementor-field-group-phone,
  .plate .elementor-form .elementor-field-group-length,
  .plate .elementor-form .elementor-field-group-series,
  .plate .elementor-form .e-form__buttons {
    grid-column: span 1;
  }
}


/* ==========================================================================
   27. Articles
   The prototype has no blog, so nothing in this section is derived from it.
   Everything reuses the prototype's existing devices: the page banner, the
   spec plate, the stamped mono caption, the service card. No new visual idea,
   which is what keeps the site looking like one site.
   ========================================================================== */

/* Article body wants a measure, not the full 1220. */
.wrap--narrow {
  max-width: 760px;
}

.post-meta {
  display: block;
  margin-bottom: .9rem;
}

/* Featured image as a spec plate figure. */
.elementor-widget-image.post-hero,
.post-hero {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.post-hero img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--r);
  display: block;
}

.post-hero figure {
  margin: 0;
}

/* Post content. WordPress and the block editor emit a wide spread of tags, so
   this is a prose reset in the prototype's type scale rather than a set of
   one-off rules. */
.post-content p {
  margin: 0 0 1.2rem;
}

.post-content > :last-child {
  margin-bottom: 0;
}

.post-content h2 {
  font-size: var(--step-2);
  margin: 2.2rem 0 .9rem;
}

.post-content h3 {
  font-size: var(--step-1);
  margin: 1.8rem 0 .7rem;
}

.post-content h4 {
  margin: 1.6rem 0 .6rem;
}

.post-content a {
  color: var(--spicer-hot);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.post-content ul,
.post-content ol {
  margin: 0 0 1.2rem;
  padding-left: 1.3rem;
  display: grid;
  gap: .5rem;
}

.post-content li {
  color: var(--chrome-dim);
}

.post-content li::marker {
  color: var(--spicer);
}

.post-content blockquote {
  margin: 1.6rem 0;
  padding: 1.1rem 1.3rem;
  border-left: 3px solid var(--spicer);
  background: rgba(213, 22, 28, .07);
  border-radius: 0 var(--r) var(--r) 0;
  color: var(--chrome);
  font-size: var(--step-1);
}

.post-content blockquote p:last-child {
  margin-bottom: 0;
}

.post-content img,
.post-content figure img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.post-content figure {
  margin: 1.6rem 0;
}

.post-content figcaption {
  font: 500 var(--step-xs)/1.6 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--chrome-dim);
  margin-top: .7rem;
}

.post-content hr {
  height: 1px;
  border: 0;
  background: var(--line);
  margin: 2.2rem 0;
}

.post-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6rem 0;
}

.post-content th,
.post-content td {
  text-align: left;
  padding: .7rem .2rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--step-sm);
}

.post-content th {
  font: 500 var(--step-xs)/1.5 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--chrome-mute);
}

.post-content code,
.post-content pre {
  font-family: var(--mono);
  font-size: .9rem;
}

.post-content pre {
  background: var(--void);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.1rem;
  overflow-x: auto;
  margin: 0 0 1.2rem;
}


/* ==========================================================================
   28. Article archive
   The card is the prototype's service card with a figure added, so the plate,
   the punched hole, the hover and the meta row all come from dlp.css.
   ========================================================================== */

.art-fig {
  aspect-ratio: 16 / 10;
  margin-bottom: 1rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--void);
}

.art-fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.art-card:hover .art-fig img {
  opacity: .88;
}

/* Pagination, matching the shop archive's. */
.art-pagination {
  margin-top: 2.5rem;
}

.art-pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.art-pagination a,
.art-pagination span {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding: 0 .6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--graphite);
  color: var(--chrome);
  font: 500 var(--step-xs)/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.art-pagination span.current {
  background: var(--spicer);
  border-color: var(--spicer);
  color: #fff;
}

.art-pagination a:hover {
  border-color: var(--spicer);
  color: var(--zinc);
}


/* ==========================================================================
   29. 404
   Entirely built from devices that already exist. The only addition is the
   Icon List inside a plate, which needs the same treatment the footer lists
   needed: Elementor's own flex row and icon slot taken back out.
   ========================================================================== */

.nf-links .elementor-icon-list-items {
  display: grid;
  gap: .55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nf-links .elementor-icon-list-item {
  display: block;
  margin: 0;
  padding: 0;
}

.nf-links .elementor-icon-list-item > a {
  display: block;
  padding: 0;
  font-size: var(--step-sm);
  color: var(--chrome-dim);
}

.nf-links .elementor-icon-list-item > a:hover {
  color: var(--spicer-hot);
}

.nf-links .elementor-icon-list-icon {
  display: none;
}

.nf-links .elementor-icon-list-text {
  padding: 0;
  color: inherit;
}


/* ==========================================================================
   30. Service page devices
   The client's content revision gave each service page a different shape, so
   each page gets a different middle band. Every device it uses already exists
   in dlp.css: the work-order steps, the hero gauge, the hot plate, the tick
   list, the spec table, the brand chip row. The only genuinely new thing is
   the component card below, and it is built from the plate.
   ========================================================================== */

/* Axle assembly component cards. Small, numbered, mono, so eleven of them read
   as an inventory rather than as eleven headings. */
.e-con.comp-grid {
  gap: .7rem;
}

.comp {
  position: relative;
  padding: .95rem 1rem;
  background: linear-gradient(160deg, var(--graphite-2), var(--graphite));
  border: 1px solid var(--line);
  border-radius: var(--r);
  height: 100%;
}

.comp span {
  display: block;
  font: 500 .68rem/1 var(--mono);
  letter-spacing: .14em;
  color: var(--chrome-mute);
  margin-bottom: .45rem;
}

.comp b {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .01em;
  font-size: var(--step-sm);
  line-height: 1.2;
  color: var(--zinc);
}

/* In a light band the component card follows the flipped tokens, which .plate
   does automatically and this has to be told, since it is not a .plate. */
.band--light .comp {
  background: linear-gradient(160deg, #fff, #f6f8fa);
}

/* The balancing page reuses the hero gauge. Its margin was tuned for the hero,
   where it follows an h1. */
.readout-copy .readout {
  margin-top: 1.4rem;
}

/* The hero stats block carries a hero-sized top margin and rule. Reused on the
   balancing page, where it follows the gauge rather than a button row. */
.readout-copy .hero-stats {
  margin-top: 1.8rem;
}

/* The break-in and lift callouts are a plate holding a heading, so the heading
   helper's own top margin is not wanted directly under the plate label. */
.plate--hot > .sec-h2 {
  margin-top: 0;
}

/* Chip row under a section heading, on the fabrication page. */
.brands li {
  white-space: nowrap;
}

/* Six service cards read better three across than four plus two. auto-fit
   keeps every breakpoint working with no media query, and dlp.css has no media
   override for .g-3, so rule 2 of this layer still holds. */
.e-con.g-trio {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}


/* ==========================================================================
   31. Page banner photograph
   The photograph and its scrim are the container's own Background and
   Background Overlay controls, set in the panel. Nothing here supplies either:
   this section only keeps the copy above the overlay, which Elementor paints
   over the background and under the content.

   All twelve control keys are verified on this install from the live export.
   ========================================================================== */

.e-con.pbanner {
  position: relative;
  overflow: hidden;
}

.e-con.pbanner > * {
  position: relative;
  z-index: 1;
}


/* ==========================================================================
   32. Body photograph on a service page
   An Image widget, so it is swappable in the panel like the banner. The
   caption is a separate Text Editor carrying .figcap, which dlp.css already
   styles, rather than the widget's own caption control.
   ========================================================================== */

.elementor-widget-image.shot {
  margin-top: 1.6rem;
}

.elementor-widget-image.shot figure {
  margin: 0;
}

.elementor-widget-image.shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 14 / 9;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--void);
}


/* ==========================================================================
   33. The team
   Each card is a spec plate and a button, so it is keyboard reachable and
   announces itself. The photographs are cropped to one composition, face at
   38% from the top, so five pictures shot at different distances read as a set.
   ========================================================================== */

.e-con.team-grid {
  gap: clamp(1rem, 2vw, 1.5rem);
}

button.plate.person {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: 1.1rem;
  appearance: none;
}

button.plate.person:hover,
button.plate.person:focus-visible {
  border-color: rgba(213, 22, 28, .5);
}

button.plate.person:focus-visible {
  outline: 2px solid var(--spicer);
  outline-offset: 2px;
}

.person-fig {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--void);
  margin-bottom: 1rem;
  position: relative;
}

.person-fig img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}

button.plate.person:hover .person-fig img {
  transform: scale(1.03);
}

/* The affordance: a stamped corner that says the photograph opens. */
.person-fig::after {
  content: "View";
  position: absolute;
  right: 8px;
  bottom: 8px;
  font: 500 .6rem/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--chrome);
  background: rgba(10, 10, 11, .72);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: .34rem .46rem;
  opacity: 0;
  transition: opacity .18s ease;
}

button.plate.person:hover .person-fig::after,
button.plate.person:focus-visible .person-fig::after {
  opacity: 1;
}

.person-name {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .01em;
  font-size: var(--step-1);
  line-height: 1.1;
  color: var(--zinc);
}

.person-role {
  display: block;
  margin-top: .35rem;
  font: 500 var(--step-xs)/1.4 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--spicer-hot);
}

.person-bio {
  display: block;
  margin-top: .8rem;
  padding-top: .8rem;
  border-top: 1px solid var(--line);
  font-size: var(--step-sm);
  line-height: 1.6;
  color: var(--chrome-dim);
}


/* ==========================================================================
   34. Lightbox
   Built here rather than using Elementor's, for two reasons: Elementor's is
   generic where this site is not, and the image widget's lightbox control keys
   have not been seen on this install.

   Hidden with the `hidden` attribute and `display:none`, which is inert markup
   rather than something a script has to reveal, so gotcha 7.15 does not apply
   and nothing sits invisible in the editor.
   ========================================================================== */

.dlp-lightbox[hidden] {
  display: none;
}

.dlp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(6, 6, 7, .88);
  backdrop-filter: blur(3px);
}

.dlp-lightbox-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 360px);
  gap: 0;
  max-width: min(820px, 100%);
  max-height: 100%;
  background: linear-gradient(160deg, var(--graphite-2), var(--graphite));
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  overflow: hidden;
}

.dlp-lightbox-panel::before {
  content: "";
  position: absolute;
  inset: 10px auto auto 10px;
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: var(--void);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  z-index: 2;
}

.dlp-lightbox img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 78vh;
  object-fit: cover;
  background: var(--void);
}

.dlp-lightbox-meta {
  padding: 1.6rem 1.4rem;
  align-self: center;
  overflow-y: auto;
}

.dlp-lightbox-name {
  font-family: var(--display);
  font-weight: 800;
  font-style: normal;
  text-transform: uppercase;
  font-size: var(--step-2);
  line-height: 1.05;
  color: var(--zinc);
  margin: 0;
}

.dlp-lightbox-role {
  display: block;
  margin-top: .45rem;
  font: 500 var(--step-xs)/1.4 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--spicer-hot);
}

.dlp-lightbox-bio {
  margin: 1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: var(--step-sm);
  line-height: 1.7;
  color: var(--chrome-dim);
}

.dlp-lightbox-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: rgba(10, 10, 11, .7);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  color: var(--chrome);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.dlp-lightbox-close:hover {
  border-color: var(--spicer);
  color: #fff;
}

@media (max-width: 720px) {
  .dlp-lightbox-panel {
    grid-template-columns: 1fr;
    max-height: 92vh;
    overflow-y: auto;
  }

  .dlp-lightbox img {
    max-height: 46vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  button.plate.person:hover .person-fig img {
    transform: none;
  }
}


/* ==========================================================================
   35. Catalogue archive banner
   The shop and the product category archives are PHP, not Elementor
   documents, so they have no container whose Background control could carry a
   photograph. inc/shop.php resolves one from the Shop page's Featured Image
   and hands it over on --pbanner-img.

   Scoped to .pbanner--photo, which is only added when a photograph was
   actually found. A banner without one keeps exactly the appearance it has
   today, and this can never collide with the Elementor container mechanism,
   which uses a different class and a different pseudo-element.
   ========================================================================== */

.pbanner--photo {
  position: relative;
  overflow: hidden;
}

.pbanner--photo > * {
  position: relative;
  z-index: 1;
}

.pbanner--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg,
      rgba(10, 10, 11, .96) 22%,
      rgba(10, 10, 11, .34) 86%),
    var(--pbanner-img) center / cover no-repeat;
}