/*
   OPPOSITE LOCK — CART AND CHECKOUT
   Section 23 of the design system, in its own file.

   WHY THIS IS NOT IN ol.css

   Two reasons, and the second is the binding one.

   It only applies to two pages. At roughly nine kilobytes it is not worth
   putting on the other four hundred.

   And it has to load AFTER WooCommerce's block stylesheets. ol.css sits at
   position 19 of 25 on /cart/, ahead of wc-blocks.css, packages-style.css,
   all-products.css, cart.css and checkout.css -- so every rule in it that ties
   with a WooCommerce rule loses on source order alone. Declaring wc-blocks-style
   as a dependency of ol.css would fix the order and drag a hundred kilobytes of
   block CSS onto the homepage to do it; a second sheet, enqueued only on these
   two pages and depending on the block handles there, fixes it for free. See
   inc/checkout.php, which has to name five handles and explains why three of
   them would otherwise print in the body, below this file, whatever it does.

   WHY THE SCOPE IS AN ID

   Because .ol-flow was not winning, and no amount of load order was going to
   make it. WooCommerce's cart rules are written as full descendant chains --
   `table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__wrap`
   is 0-3-1, and the remove link's is 0-4-1. A body class plus one component
   class is 0-2-0. It lost on specificity, silently, on about forty rules: the
   line item stayed a flex column, the thumbnail kept WooCommerce's width, the
   quantity pill kept its borders. Load order never entered into it.

   The alternatives were repeating the class four times to buy the weight, which
   is unreadable, or writing each rule's full WooCommerce ancestry, which pins
   this file to their DOM and breaks on their next release. An id on the region
   -- #ol-flow, put on .page-content by page-shopflow.php -- is 1-0-0 on its
   own: it clears everything WooCommerce ships today with room to spare, it is
   one token per rule, and it says what it means, which is that these rules
   apply inside the cart and checkout region and nowhere else.

   One declaration still carries !important, and only one, because WooCommerce
   used !important first: `background:none` on every cell of the cart table,
   which would otherwise erase the thumbnail tile behind the product image.
   Anything else in this file reaching for !important is a bug in this file.

   WHAT THIS FILE CAN AND CANNOT DO

   Cart and Checkout are WooCommerce BLOCKS. They render in React from the Store
   API, so there are no templates to override: cart/cart.php and
   checkout/form-checkout.php are not consulted and never will be. Markup and
   order are WooCommerce's. What is left is CSS, and the brief for this phase is
   to make the blocks wear the OL design rather than to rebuild them.

   So this is a restyle, not a reconstruction, and it is honest about the
   difference. The prototype's checkout has a fulfilment step -- courier to your
   door, or ship to a centre with the fitting booked -- and a centre picker
   beside it. Neither is here. Both need a Store API extension and a JavaScript
   build step this site has no toolchain for, and the centre picker additionally
   needs the real centre data, which is still 58 placeholder records with no
   names. Those are a phase of their own and should be quoted as one.

   Every value below is lifted from section 15 of ol.css rather than chosen
   again, so the two agree by construction. Where a number differs from the
   prototype it is because WooCommerce's structure forced it, and it says so.
   ========================================================================== */

/* ==========================================================================
   23a. THE PAGE
   ========================================================================== */

/* Three separate things were constraining the gutter and all three are unpicked
   here, because between them the checkout was 300px narrower than the catalogue
   it came from and its content started 50px in on a phone where the rest of the
   site starts at 22px:

     1. Hello Elementor's theme.css caps .site-main at 1140px above 1200px wide
        and pads it 10px below 575px;
     2. this file put the gutter on #ol-flow;
     3. and put it on the cart and checkout blocks inside #ol-flow as well.

   So .site-main is neutralised on these two pages, #ol-flow alone carries the
   measure and the gutter -- the same 1440/40, dropping to 22 under 980, that
   .ol-container uses everywhere else -- and the blocks inside carry neither. A
   checkout narrower than the shop it came from reads as a different site taking
   the payment. */
/* body.ol-flow, not .ol-flow: Hello Elementor writes this as
   `body:not([class*="elementor-page-"]) .site-main`, which is 0-2-1, and a bare
   .ol-flow .site-main at 0-2-0 loses to it. This is the one rule in the file
   that cannot reach for #ol-flow, because the region id is inside .site-main,
   not around it. It ties at 0-2-1 and wins on order, which this sheet is
   guaranteed by the dependency list in inc/checkout.php. */
body.ol-flow .site-main{max-width:none;width:100%;padding-left:0;padding-right:0}
#ol-flow{max-width:1440px;margin-left:auto;margin-right:auto;
  padding-left:40px;padding-right:40px;width:100%}
#ol-flow .wp-block-woocommerce-cart,
#ol-flow .wp-block-woocommerce-checkout,
#ol-flow .wp-block-woocommerce-cart.alignwide,
#ol-flow .wp-block-woocommerce-checkout.alignwide{max-width:none;width:100%;
  margin-left:0;margin-right:0;padding-left:0;padding-right:0}

/* ---- the two-column shell ----
   .ol-cartwrap is 1fr / 380px. WooCommerce's sidebar layout is a flex row with
   its own basis, so the same proportions are set on its own terms. */
#ol-flow .wc-block-components-sidebar-layout{display:grid;
  grid-template-columns:minmax(0,1fr) 380px;gap:30px;align-items:start;
  padding:26px 0 80px}
#ol-flow .wc-block-components-main{width:auto;padding-right:0;min-width:0}
#ol-flow .wc-block-components-sidebar{width:auto;padding-left:0}

/* ==========================================================================
   23b. CART LINE ITEMS
   The block renders a table and the prototype renders cards, so the table
   parts are unset and the row is rebuilt as a grid.

   WHERE THE THREE COLUMNS LIVE

   Not where this file first put them. A row is three cells --
   td.wc-block-cart-item__image, td.wc-block-cart-item__product and
   td.wc-block-cart-item__total -- and the div.wc-block-cart-item__wrap inside
   the middle cell is a STACK of four things: the name, the unit price, the
   metadata and the quantity pill. The first version of this section put the
   three-column grid on __wrap, one level too deep. The middle track collapsed
   to zero, the image cell stayed full width, and the row rendered as a 570px
   photograph with the text underneath it. The grid belongs on the row; __wrap
   stays the column it already was.
   ========================================================================== */

/* The table reset is wrapped in :where() so it carries no weight of its own.
   It is a reset, and every component rule below should beat it -- but the
   tr/td/th element selectors made the RESET the more specific of the two, and
   its width:auto beat the thumbnail's width:104px, its display:block beat the
   header's grid. :where() zeroes it and the problem goes away for good. */
#ol-flow :where(.wc-block-cart-items,
  .wc-block-cart-items thead,
  .wc-block-cart-items tbody,
  .wc-block-cart-items tr,
  .wc-block-cart-items td,
  .wc-block-cart-items th){display:block;border:0;padding:0;width:auto}

/* The header row and the item rows share one track list, so each label sits
   over the column it describes instead of near it. */
#ol-flow .wc-block-cart-items{--ol-thumb:104px;--ol-total:112px;--ol-cols-gap:20px}
#ol-flow .wc-block-cart-items__header,
#ol-flow .wc-block-cart-items__row{display:grid;
  grid-template-columns:var(--ol-thumb) minmax(0,1fr) var(--ol-total);
  gap:var(--ol-cols-gap);align-items:center}

/* The header is kept rather than hidden. It is the table's column description
   and a screen reader uses it; it just stops looking like a table header and
   becomes the mono micro-label the rest of the site uses. All three cells stay
   -- WooCommerce labels them Product, Details and Total, and hiding the first
   one both loses a label and knocks the grid a column out of line. */
#ol-flow .wc-block-cart-items__header{font-family:var(--mono);font-size:10.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--dust);
  border-bottom:1px solid var(--hair);padding:0 19px 12px;margin-bottom:16px}
#ol-flow .wc-block-cart-items__header-total{text-align:right}

/* One line item = .ol-cline. */
#ol-flow .wc-block-cart-items__row{background:#fff;border:1px solid var(--hair);
  border-radius:var(--r);padding:18px;transition:.28s var(--ease)}
#ol-flow .wc-block-cart-items__row+.wc-block-cart-items__row{margin-top:12px}
#ol-flow .wc-block-cart-items__row:hover{box-shadow:var(--e2);border-color:transparent}

/* The three cells are placed explicitly rather than left to auto-flow, because
   WooCommerce places them itself below 699px -- __product gets grid-column:2/4,
   which opens a fourth grid line and throws the total into an implicit fourth
   track. Naming the placement here means the row is laid out the same way at
   every width this file controls, and nothing between 600 and 699 is left
   following two sets of instructions at once. */
#ol-flow .wc-block-cart-item__image{grid-column:1;grid-row:1}
#ol-flow .wc-block-cart-item__product{grid-column:2;grid-row:1}
#ol-flow .wc-block-cart-item__total{grid-column:3;grid-row:1}

/* ---- column 1: the thumbnail tile ---- */
#ol-flow .wc-block-cart-item__image{width:104px;aspect-ratio:1;border-radius:var(--r2);
  background:linear-gradient(155deg,#fff,var(--bone2))!important;
  border:1px solid var(--hair2);display:grid;place-items:center;overflow:hidden;
  padding:8px}
#ol-flow .wc-block-cart-item__image a{display:block;width:100%;line-height:0}
#ol-flow .wc-block-cart-item__image img{width:100%;height:auto;aspect-ratio:1;
  object-fit:contain;display:block}

/* ---- column 2: the stack ----
   min-width:0 on the cell as well as the track, because a grid item's automatic
   minimum size is its content, and a long part number would otherwise push the
   column wider than minmax(0,1fr) asked for. */
#ol-flow .wc-block-cart-item__product{min-width:0}
#ol-flow .wc-block-cart-item__wrap{display:flex;flex-direction:column;
  align-items:flex-start;gap:5px}

#ol-flow .wc-block-components-product-name{font-family:var(--body);font-weight:700;
  font-size:14px;color:var(--navy);line-height:1.3;text-decoration:none;display:block}
#ol-flow .wc-block-components-product-name:hover{color:var(--red)}
/* Two lines. The metadata is the product's short description, which on this
   catalogue runs to a paragraph; at full length one line item is taller than
   the summary panel beside it and the cart stops reading as a list. */
#ol-flow .wc-block-components-product-metadata{font-size:13px;color:var(--granite);
  margin-top:0}
#ol-flow .wc-block-components-product-metadata__description{display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#ol-flow .wc-block-components-product-metadata__description p{margin:0}
/* The backorder badge and the lead-time row.

   WooCommerce prints its own "Available on back-order" badge, and inc/stock.php
   adds a lead-time row beside it through woocommerce_get_item_data. They are
   not redundant: the badge is the state, the row is how long it takes. Both are
   set as mono micro-labels rather than as more body copy, so a delivery fact
   does not read as another sentence of the product description. */
#ol-flow .wc-block-components-product-badge{font-family:var(--mono);font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--navy);
  background:var(--bone2);border:1px solid var(--hair);border-radius:var(--r3);
  padding:4px 10px;margin:0;display:inline-block}
#ol-flow .wc-block-components-product-details{margin:2px 0 0;padding:0;
  font-size:12.5px;color:var(--granite);list-style:none}
#ol-flow .wc-block-components-product-details__name{font-family:var(--mono);
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dust);
  font-weight:700}
#ol-flow .wc-block-components-product-details__value{font-weight:700;
  color:var(--navy)}

/* The unit price sits in the stack and the line total sits in column 3. They
   are deliberately not the same weight: one is a reference, the other is the
   number the shopper is adding up. */
#ol-flow .wc-block-cart-item__prices .wc-block-components-product-price__value{
  font-size:13.5px;font-weight:600;color:var(--granite);letter-spacing:0}

#ol-flow .wc-block-cart-item__quantity{display:flex;align-items:center;gap:8px;
  margin:5px 0 0}

/* The quantity pill, on .ol-qty-sm's metrics. */
#ol-flow .wc-block-components-quantity-selector{display:inline-flex;align-items:center;
  border:1.5px solid var(--hair);border-radius:var(--r3);background:#fff;
  margin:0;min-width:0;max-width:none;width:auto;flex:0 0 auto}
#ol-flow .wc-block-components-quantity-selector:before,
#ol-flow .wc-block-components-quantity-selector:after{display:none}
#ol-flow .wc-block-components-quantity-selector__input{width:38px;flex:0 0 38px;
  padding:0 4px;font-family:var(--body);font-weight:700;font-size:14px;
  color:var(--navy);border:0;background:none;text-align:center;order:2;min-width:0}
#ol-flow .wc-block-components-quantity-selector__button{padding:7px 12px;
  color:var(--dust);background:none;border:0;font-size:15px;line-height:1;
  transition:.2s var(--ease);opacity:1;flex:0 0 auto}
#ol-flow .wc-block-components-quantity-selector__button:hover{color:var(--red)}
#ol-flow .wc-block-components-quantity-selector__button--minus{order:1}
#ol-flow .wc-block-components-quantity-selector__button--plus{order:3}

/* Remove is an icon button, not a text link. WooCommerce renders a bare
   <button> holding one svg and an aria-label -- there is no text in it to set
   in the mono face the rest of the site removes things with, so the affordance
   is carried by size, hit area and colour instead. */
#ol-flow .wc-block-cart-item__remove-link{display:grid;place-items:center;
  width:30px;height:30px;padding:0;margin:0;border:0;border-radius:var(--r3);
  background:none;color:var(--dust);cursor:pointer;transition:.2s var(--ease)}
#ol-flow .wc-block-cart-item__remove-link svg{width:17px;height:17px;fill:currentColor}
#ol-flow .wc-block-cart-item__remove-link:hover{color:var(--red);background:var(--bone2)}
#ol-flow .wc-block-cart-item__remove-link:focus-visible{outline:2px solid var(--navy);
  outline-offset:2px}

/* ---- column 3: the line total ---- */
#ol-flow .wc-block-cart-item__total{text-align:right;align-self:center}
#ol-flow .wc-block-cart-item__total-price-and-sale-badge-wrapper{
  justify-content:flex-end;flex-wrap:wrap;gap:4px}
#ol-flow .wc-block-cart-item__total .wc-block-components-product-price__value{
  font-weight:800;font-size:16px;color:var(--navy);letter-spacing:-.01em}

/* ==========================================================================
   23c. THE SUMMARY PANEL
   .ol-sumbox: white, hairline, 18px, sticky, the soft e1 shadow.
   ========================================================================== */

/* The two pages name the same panel differently -- cart-order-summary-block on
   /cart/ and checkout-order-summary-block on /checkout/ -- so both are listed.
   Taken from the rendered DOM, not from WooCommerce's docs: an earlier version
   of this rule guessed at cart-totals-block and checkout-totals-block, which
   exist in the codebase but are not what wraps the panel here, so the card
   never appeared and the summary sat on the page with no background at all. */
#ol-flow .wp-block-woocommerce-cart-order-summary-block,
#ol-flow .wp-block-woocommerce-checkout-order-summary-block{
  background:#fff;border:1px solid var(--hair);border-radius:var(--r);
  padding:26px 28px;position:sticky;top:152px;box-shadow:var(--e1)}

#ol-flow .wc-block-cart__totals-title,
#ol-flow .wc-block-components-checkout-order-summary__title{font-family:var(--body);
  font-weight:800;font-size:19px;color:var(--navy);margin:0 0 20px;padding:0;
  text-transform:none;letter-spacing:0}
#ol-flow .wc-block-components-checkout-order-summary__title-text{font-size:19px;
  font-weight:800;color:var(--navy)}

/* .ol-sr */
#ol-flow .wc-block-components-totals-item{display:flex;justify-content:space-between;
  gap:14px;padding:9px 0;font-size:14px;color:var(--granite);margin:0}
#ol-flow .wc-block-components-totals-item__label{font-size:14px;color:var(--granite)}
#ol-flow .wc-block-components-totals-item__value{font-weight:700;color:var(--navy)}
#ol-flow .wc-block-components-totals-item__description{font-family:var(--mono);
  font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dust)}
#ol-flow .wc-block-components-totals-wrapper{border:0;padding:0}
#ol-flow .wc-block-components-totals-wrapper:after{display:none}

/* .ol-sr.ol-tot -- the line that carries the number somebody is deciding on. */
#ol-flow .wc-block-components-totals-footer-item{border-top:1px solid var(--hair);
  margin-top:10px;padding-top:16px;font-size:15px}
#ol-flow .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--navy)}
/* -tax-value is not a caption. WooCommerce puts that class on the money span
   INSIDE the total's value, so dressing it as the small mono "incl VAT" line
   rendered the order total itself at 10.5px in dust grey -- the one number on
   the page that has to be unmissable. It inherits from its parent instead. The
   tax caption, when the store is configured to show one, is __description on
   the line below, which is already set in mono. */
#ol-flow .wc-block-components-totals-footer-item-tax-value{font:inherit;
  color:inherit;letter-spacing:inherit;text-transform:none}

/* The coupon form, folded into a panel button. */
#ol-flow .wc-block-components-panel__button{font-family:var(--mono);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--navy);font-weight:700;
  padding:12px 32px 12px 0}
#ol-flow .wc-block-components-totals-coupon{padding:0}

/* ==========================================================================
   23d. BUTTONS
   Matched to .ol-btn and .ol-btn-red down to the sheen, for the reason set out
   on the product page: a primary CTA that is a different height and weight from
   every other one is what makes a page read as assembled rather than built.
   ========================================================================== */

#ol-flow .wc-block-components-button:not(.is-link){text-decoration:none;display:inline-flex;
  align-items:center;justify-content:center;gap:10px;height:48px;
  padding:15px 28px;border-radius:var(--r3);border:1.5px solid transparent;
  font-family:var(--body);font-size:13.5px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;cursor:pointer;position:relative;overflow:hidden;
  transition:.28s var(--ease);background:var(--red);color:#fff;box-shadow:none}
#ol-flow .wc-block-components-button:not(.is-link):hover{background:var(--redhover);
  transform:translateY(-2px);box-shadow:0 14px 28px -12px rgba(255,31,42,.55)}
#ol-flow .wc-block-components-button:not(.is-link):after{content:"";position:absolute;
  top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);
  transform:skewX(-20deg)}
#ol-flow .wc-block-components-button:not(.is-link):hover:after{animation:sheen .8s var(--ease)}
#ol-flow .wc-block-components-button:not(.is-link):focus-visible{outline:2px solid var(--navy);
  outline-offset:3px}
#ol-flow .wc-block-components-button:not(.is-link):disabled,
#ol-flow .wc-block-components-button:not(.is-link).is-disabled{background:var(--bone3);
  color:var(--dust);border-color:var(--hair);box-shadow:none;transform:none;opacity:1}
#ol-flow .wc-block-components-button:not(.is-link):disabled:after{display:none}

#ol-flow .wc-block-cart__submit-button,
#ol-flow .wc-block-components-checkout-place-order-button{width:100%}
#ol-flow .wc-block-cart__submit-container{padding:0;margin-top:18px}
#ol-flow .wc-block-cart__submit{margin-top:0}

/* A link-styled button stays a link. */
#ol-flow .wc-block-components-button.is-link{font-family:var(--mono);font-size:11px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--red);
  text-decoration:underline;text-underline-offset:3px;background:none;height:auto;
  padding:0;border:0}

/* ==========================================================================
   23e. CHECKOUT STEPS AND FORM CONTROLS
   ========================================================================== */

/* .ol-panel */
#ol-flow .wc-block-components-checkout-step{background:#fff;border:1px solid var(--hair);
  border-radius:var(--r);padding:28px 30px;margin:0 0 16px}
#ol-flow .wc-block-components-checkout-step__heading{margin:0 0 18px;display:flex;
  align-items:center;gap:12px}
#ol-flow .wc-block-components-checkout-step__title{font-family:var(--body);
  font-weight:800;font-size:18px;color:var(--navy);text-transform:none;
  letter-spacing:0;margin:0}

/* __heading-content is NOT the step number. It is WooCommerce's slot for
   optional text beside a step title -- the "Already have an account? Log in"
   link, mainly -- and it is empty on all four steps of this checkout. An
   earlier version of this file dressed it as a 26px navy disc on the assumption
   that it carried a numeral, and drew an empty navy dot beside every heading.

   There is no step number to style. The block checkout is one page of sections,
   not a sequence, and the number of sections is not fixed: a shipping step
   appears the moment a shipping zone exists, so anything counting them here
   would start lying as soon as the store is finished. The one sequence that is
   real -- cart, then checkout -- is already named by the eyebrow above the
   heading. So this styles the slot as what it will hold when it holds
   anything. */
#ol-flow .wc-block-components-checkout-step__heading-content{font-family:var(--mono);
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dust);
  margin-left:auto}
#ol-flow .wc-block-components-checkout-step__heading-content a{color:var(--navy);
  text-decoration:none;border-bottom:1px solid var(--hair)}
#ol-flow .wc-block-components-checkout-step__heading-content a:hover{color:var(--red);
  border-color:var(--red)}

/* .ol-field */
#ol-flow .wc-block-components-text-input input[type=text],
#ol-flow .wc-block-components-text-input input[type=email],
#ol-flow .wc-block-components-text-input input[type=tel],
#ol-flow .wc-block-components-text-input input[type=number],
#ol-flow .wc-blocks-components-select__select,
#ol-flow .wc-block-components-textarea{width:100%;border:1px solid var(--hair);
  border-radius:var(--r3);padding:13px 18px;font-family:var(--body);font-size:14px;
  background-color:#fff;color:var(--graphite);outline:0;transition:.2s var(--ease);
  box-shadow:none}
#ol-flow .wc-block-components-textarea{border-radius:var(--r);min-height:82px;
  resize:vertical}
#ol-flow .wc-block-components-text-input input:focus,
#ol-flow .wc-blocks-components-select__select:focus,
#ol-flow .wc-block-components-textarea:focus{border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(0,45,82,.08)}

/* The select's chevron, in longhands only. The province select in the centre
   lookup lost its arrow to a `background` shorthand set elsewhere, and that
   took long enough to find once. */
#ol-flow .wc-blocks-components-select__select{appearance:none;-webkit-appearance:none;
  padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23002D52' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}

/* The floating label is left floating. Reworking it into the mono label above
   the field, the way .ol-field does it, means fighting an animation that is
   driven by the block's own focus and value state -- and losing that race
   leaves a label sitting on top of the text somebody is typing. It gets the
   OL typeface and colours instead. */
#ol-flow .wc-block-components-text-input label,
#ol-flow .wc-blocks-components-select__label{font-family:var(--body);
  color:var(--granite)}
#ol-flow .wc-block-components-text-input.is-active label{font-family:var(--mono);
  font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--navy);
  font-weight:700}

/* Checkboxes, on the .ol-cb treatment: red fill, white tick. */
#ol-flow .wc-block-components-checkbox__input[type=checkbox]{width:16px;height:16px;
  border:1.5px solid var(--dust);border-radius:5px;background:#fff;
  transition:.22s var(--ease);box-shadow:none}
#ol-flow .wc-block-components-checkbox__input[type=checkbox]:checked{background:var(--red);
  border-color:var(--red)}
#ol-flow .wc-block-components-checkbox__label{font-size:14px;color:var(--granite)}

/* The saved-address card. */
#ol-flow .wc-block-components-address-card{border:1px solid var(--hair);
  border-radius:var(--r2);padding:16px 18px;font-size:14px;color:var(--granite)}
#ol-flow .wc-block-components-address-card__edit{font-family:var(--mono);font-size:11px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--red);text-decoration:none;
  border-bottom:1px solid var(--red)}

/* ==========================================================================
   23f. NOTICES AND EMPTY STATES
   ========================================================================== */

/* The callout treatment: bone ground, a 4px rule down the left in the colour of
   what it is telling you. This is where the "no payment methods available"
   banner lands until a gateway is live, so it is worth it reading as a
   deliberate message rather than as browser default red. */
#ol-flow .wc-block-components-notice-banner{background:var(--bone);
  border:1px solid var(--hair);border-left:4px solid var(--navy);
  border-radius:var(--r);padding:16px 20px;color:var(--granite);font-size:14px;
  box-shadow:none;margin:0 0 18px}
#ol-flow .wc-block-components-notice-banner.is-error{border-left-color:var(--red);
  background:rgba(255,31,42,.04)}
#ol-flow .wc-block-components-notice-banner.is-success{border-left-color:var(--fit);
  background:rgba(15,123,62,.05)}
#ol-flow .wc-block-components-notice-banner.is-warning{border-left-color:#996800;
  background:rgba(153,104,0,.06)}
#ol-flow .wc-block-components-notice-banner__content{font-size:14px;line-height:1.6}

/* The empty cart.

   WHAT WAS THERE, AND WHY IT IS NOT

   WooCommerce ships this state as a grey sad-face emoji, a dotted rule, a
   "New in store" heading and a four-column wc-block-grid of recent products.
   The grid is WooCommerce's own product markup, not ol_product_card, so it
   renders underlined blue titles and small dark pills -- four tiles that belong
   to a different site, on the one page where somebody has just been told they
   have nothing. The block's contents are ordinary editable blocks, so they were
   replaced in the page itself with a heading, a line of copy and two routes
   out: the shop, and the fitment centre finder. The team can edit all of it in
   the Cart page like any other content, and the previous markup is in the post
   revisions and in a _ol_content_backup_ meta on page 14.

   A "new arrivals" rail here is worth having; it just has to be built from the
   site's own product card, which is a small piece of work rather than a
   setting, and it is not in this phase.

   The frame is the dashed .ol-empty the archive and the search results use, so
   a cart with nothing in it looks like the same site's other empty states. */
#ol-flow .wp-block-woocommerce-empty-cart-block{border:1px dashed var(--hair);
  border-radius:var(--r);padding:52px 30px;text-align:center;color:var(--granite);
  margin:26px 0 60px}
#ol-flow .wp-block-woocommerce-empty-cart-block h2{font-family:var(--body);
  font-weight:800;font-size:19px;color:var(--navy);text-transform:none;
  letter-spacing:0;margin-bottom:10px}
#ol-flow .wp-block-woocommerce-empty-cart-block p{font-size:13.5px;line-height:1.7;
  max-width:520px;margin:0 auto 18px}

/* The two routes out. WordPress's core button block ships a dark grey fill and
   picks up the theme's link underline; these put it back on .ol-btn-red and
   .ol-btn, same height and same pill as every other pair of buttons here. */
#ol-flow .wp-block-woocommerce-empty-cart-block .wp-block-buttons{
  justify-content:center;gap:12px;margin-top:26px}
#ol-flow .wp-block-button__link{display:inline-flex;align-items:center;
  justify-content:center;height:46px;padding:0 26px;border-radius:var(--r3);
  font-family:var(--body);font-weight:800;font-size:13.5px;letter-spacing:.02em;
  text-transform:uppercase;text-decoration:none;transition:.22s var(--ease)}
#ol-flow .wp-block-button:not(.is-style-outline) .wp-block-button__link{
  background:var(--red);color:#fff;border:0}
#ol-flow .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover{
  background:var(--redhover)}
#ol-flow .wp-block-button.is-style-outline .wp-block-button__link{background:none;
  color:var(--navy);border:1.5px solid var(--hair)}
#ol-flow .wp-block-button.is-style-outline .wp-block-button__link:hover{
  border-color:var(--navy);background:var(--bone)}
#ol-flow .wp-block-button__link:focus-visible{outline:2px solid var(--navy);
  outline-offset:3px}

/* ==========================================================================
   23g. RESPONSIVE
   ========================================================================== */

@media (max-width:980px){
  #ol-flow{padding-left:22px;padding-right:22px}
  #ol-flow .wc-block-components-sidebar-layout{grid-template-columns:1fr;gap:22px;
    padding-bottom:56px}
  /* Nothing to stick to below 980px -- the summary is above the form on the
     checkout and under the cart on the cart, both in normal flow. */
  #ol-flow .wp-block-woocommerce-cart-order-summary-block,
  #ol-flow .wp-block-woocommerce-checkout-order-summary-block{position:static}

  /* At this width WooCommerce moves the order summary out of the sidebar, puts
     it above the form, and collapses it behind its own title row. That row is
     the whole panel until somebody opens it, and at the 19px the sidebar
     version uses, "Order summary" wraps onto two lines beside the amount and
     shoves the chevron off the end. It comes down to 16px here. */
  #ol-flow .wc-block-components-checkout-order-summary__title{gap:8px;
    align-items:center;font-size:15px}
  #ol-flow .wc-block-components-checkout-order-summary__title-text{font-size:15px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  #ol-flow .wc-block-components-checkout-order-summary__title-price{font-size:15px;
    font-weight:800;color:var(--navy);white-space:nowrap;margin-left:auto}

  /* The same panel before React takes over is server-rendered with the form
     step's markup instead, so it gets the same trim -- otherwise the page
     flashes a two-line heading and a doubled hairline on the way in. */
  #ol-flow .wp-block-woocommerce-checkout-order-summary-block
    .wc-block-components-checkout-step__title{font-size:15px;min-width:0}
  #ol-flow .wp-block-woocommerce-checkout-order-summary-block
    .wc-block-components-checkout-step__heading{margin:0 0 6px;gap:10px}
  #ol-flow .checkout-order-summary-block-fill{border:0}
}

@media (max-width:600px){
  /* Two columns, not three. WooCommerce reaches the same conclusion at its own
     699px breakpoint and it is the right one: a 72px thumbnail, a product name,
     a quantity pill and a right-aligned total do not fit across 375px without
     the name being cut to two words. The total takes its own row under the
     card, which is where a receipt would put it anyway, and the column header
     goes with it -- labels for columns this layout no longer has. */
  #ol-flow .wc-block-cart-items{--ol-thumb:72px;--ol-cols-gap:14px}
  #ol-flow .wc-block-cart-items__header{display:none}
  #ol-flow .wc-block-cart-items__row{
    grid-template-columns:var(--ol-thumb) minmax(0,1fr);row-gap:12px}
  #ol-flow .wc-block-cart-item__total{grid-column:1/-1;grid-row:2;
    border-top:1px solid var(--hair);padding-top:12px}

  /* The thumbnail sits with the top of the name rather than floating in the
     middle of a stack that is now three times its height. */
  #ol-flow .wc-block-cart-items__row{align-items:start}

  /* WooCommerce hides the summary heading below 699px. Put it back: the panel
     is no longer beside the cart on a phone, it is under it, and a card that
     opens on "Add coupons" with no heading does not say what it is totalling. */
  #ol-flow .wc-block-cart__totals-title{display:block}
  #ol-flow .wc-block-cart-item__image{width:72px}
  #ol-flow .wc-block-components-checkout-step{padding:20px 18px}
  #ol-flow .wp-block-woocommerce-cart-order-summary-block,
  #ol-flow .wp-block-woocommerce-checkout-order-summary-block{padding:20px 18px}
  #ol-flow .wc-block-cart-items__row{padding:14px}
}

/* ==========================================================================
   23h. THE PAGE HEADING
   A mono eyebrow over a section heading, which is what the prototype's cart and
   checkout carry -- not the full-bleed navy band the archives and the policy
   pages use. Deliberate: a checkout should read as a step inside something the
   shopper has already started, and a band that announces itself makes it feel
   like the beginning of a new page instead.
   ========================================================================== */
.ol-flow-head{padding:14px 0 4px}
.ol-flow-head h1{margin-top:10px}
.ol-flow .page-header{display:none}

/* ==========================================================================
   23e2. SHIPPING AND PAYMENT CHOICES

   These two sections did not exist when this file was written. With no shipping
   zone and no gateway enabled the block checkout rendered four steps and an
   error notice where the payment list belongs; adding a zone and Cash on
   delivery added two more steps and two radio lists, which arrive as
   WooCommerce ships them -- a bare list on a 4px corner with the browser's own
   blue radio.

   Each option gets the white card, hairline and corner the steps use, one step
   down in weight so a choice inside a panel does not compete with the panel it
   sits in. The selected one takes the red dot and a navy edge: red as a state
   rather than an action, which is the same thing it means in the fitment bar.
   ========================================================================== */
#ol-flow .wc-block-components-radio-control{display:grid;gap:10px;border:0}
#ol-flow .wc-block-components-radio-control__option{background:#fff;
  border:1px solid var(--hair);border-radius:var(--r2);margin:0;
  transition:.2s var(--ease)}
#ol-flow .wc-block-components-radio-control__option:hover{border-color:var(--dust)}
#ol-flow .wc-block-components-radio-control__option--checked-option-highlighted{
  border-color:var(--navy);background:var(--bone)}
#ol-flow .wc-block-components-radio-control__input{accent-color:var(--red);
  width:18px;height:18px}
#ol-flow .wc-block-components-radio-control__label{font-family:var(--body);
  font-size:14px;font-weight:700;color:var(--navy)}
#ol-flow .wc-block-components-radio-control__secondary-label{font-family:var(--body);
  font-size:14px;font-weight:800;color:var(--navy);letter-spacing:-.01em}
#ol-flow .wc-block-components-radio-control__description,
#ol-flow .wc-block-components-radio-control__secondary-description{
  font-size:12.5px;color:var(--granite);margin-top:3px;line-height:1.5}

/* The rate list carries its own separators between options; the cards make
   them a second line beside a border. */
#ol-flow .wc-block-components-shipping-rates-control__package{border:0;padding:0}
#ol-flow .wc-block-components-radio-control-accordion__option{border:0}


/* ---------------------------------------------------------------------------
   23i. THE ORDER CONFIRMATION

   The third page of the flow, and the one page in it that is NOT a block.
   The checkout page carries no order-confirmation block, so WooCommerce falls
   back to the classic templates and every selector below is a .woocommerce-*
   class rather than a .wc-block-* one. Same sheet, same #ol-flow scope, a
   different markup vocabulary -- which is why this section is at the end and
   labelled, rather than folded into 23c beside the checkout panels it looks
   like.

   The id scope still does the heavy lifting. WooCommerce writes the order
   tables as .woocommerce table.shop_table (0-2-1) and its address columns as
   .woocommerce .col2-set .col-1 (0-3-0); #ol-flow plus one class clears both
   without a single !important, same as the cart did.
   --------------------------------------------------------------------------- */

#ol-flow .ol-orx{max-width:920px}

/* Two inherited rules from Hello Elementor reach in here and neither comes
   from WooCommerce, which is worth naming because the instinct on this page
   is to blame the plugin:

   theme.css has `.page-content a{text-decoration:underline}` and #ol-flow IS
   .page-content, so every link in the flow was underlined -- including the
   three pill buttons under the confirmation. ol.css sets `a{text-decoration:
   none}` at 0-0-1 and loses to 0-1-1 every time.

   reset.css zebra-stripes every table on the site with
   `table tbody > tr:nth-child(2n+1) > td`, which tinted the first line item
   of the order and made it look selected. */
#ol-flow .ol-btn{text-decoration:none}
#ol-flow .woocommerce-table--order-details tbody td,
#ol-flow .woocommerce-table--order-details tbody th{background:#fff}
#ol-flow .woocommerce-table--order-details td.product-name a{text-decoration:none}
#ol-flow .woocommerce-table--order-details td.product-name a:hover{text-decoration:underline}

/* The confirmation itself. Bone and a hairline rather than a green success
   bar -- the page heading already says the order is in, so this block is here
   to be read, not to shout. */
#ol-flow .ol-orx-panel{display:flex;gap:16px;align-items:flex-start;
  background:var(--bone);border:1px solid var(--hair);border-radius:var(--r2);
  padding:20px 22px;margin:0 0 22px}
#ol-flow .ol-orx-ico{flex:0 0 auto;width:38px;height:38px;padding:9px;
  border-radius:999px;background:var(--navy);color:#fff;box-sizing:border-box}
#ol-flow .ol-orx-panel-bad .ol-orx-ico{background:var(--red)}
#ol-flow .ol-orx-panel-b{min-width:0;flex:1 1 auto}
#ol-flow .ol-orx-panel p{margin:0;font-family:var(--body);font-size:15px;
  line-height:1.55;color:var(--navy)}
#ol-flow .ol-orx-panel .woocommerce-notice{background:none;border:0;padding:0;
  font-weight:800;letter-spacing:-.01em}
#ol-flow .ol-orx-panel .woocommerce-notice::before{content:none}
#ol-flow .ol-orx-panel .ol-orx-mail{margin-top:6px;font-size:13.5px;
  color:var(--granite);font-weight:400}
#ol-flow .ol-orx-panel-bad .ol-orx-act{margin-top:14px}

/* The four facts. A grid rather than the inline list WooCommerce ships, so
   the order number is findable at a glance on a page people come back to. */
/* WooCommerce clearfixes ul.order_details with ::before and ::after carrying
   content:" ". On a float layout those are invisible; in a grid container they
   are two more grid ITEMS, so the four facts rendered as an empty first cell,
   three tiles, then the fourth wrapped onto its own row. Killing the content is
   what removes them from the box tree -- display:none on a pseudo-element with
   content set would have done it too, but content:none is the honest one. */
#ol-flow .ol-orx-facts::before,
#ol-flow .ol-orx-facts::after{content:none}
#ol-flow .ol-orx-facts{display:grid;gap:10px;list-style:none;margin:0 0 22px;
  padding:0;border:0;grid-template-columns:repeat(4,minmax(0,1fr))}
#ol-flow .ol-orx-facts li{margin:0;padding:14px 16px;border:1px solid var(--hair);
  border-radius:var(--r2);background:#fff;list-style:none;width:auto;float:none;
  min-width:0}
#ol-flow .ol-orx-facts li strong{display:block;margin-top:5px;font-family:var(--body);
  font-size:15px;font-weight:800;color:var(--navy);letter-spacing:-.01em;
  overflow-wrap:anywhere}
#ol-flow .ol-orx-facts .woocommerce-Price-amount{font:inherit;color:inherit}

/* The gateway box and the back-order box share a shape and differ only in the
   edge that carries them: navy for information, red for a wait. */
#ol-flow .ol-orx-pay,
#ol-flow .ol-orx-back{border:1px solid var(--hair);border-left:3px solid var(--navy);
  border-radius:var(--r2);padding:15px 18px;margin:0 0 22px;background:#fff}
#ol-flow .ol-orx-back{border-left-color:var(--red)}
#ol-flow .ol-orx-pay p,
#ol-flow .ol-orx-back p{margin:7px 0 0;font-family:var(--body);font-size:14px;
  line-height:1.6;color:var(--granite)}
#ol-flow .ol-orx-pay p:last-child,
#ol-flow .ol-orx-back p:last-child{margin-bottom:0}
#ol-flow .ol-orx-back strong{color:var(--navy)}

/* Three steps, numbered in the mono face so the numerals read as a spec and
   not as a heading. */
#ol-flow .ol-orx-next{margin:0 0 26px}
#ol-flow .ol-orx-next ol{counter-reset:ol-orx;list-style:none;margin:12px 0 0;padding:0;
  display:grid;gap:10px}
#ol-flow .ol-orx-next li{counter-increment:ol-orx;position:relative;margin:0;
  padding:0 0 0 38px;font-family:var(--body);font-size:14px;line-height:1.6;
  color:var(--granite)}
#ol-flow .ol-orx-next li::before{content:counter(ol-orx);position:absolute;left:0;top:1px;
  width:24px;height:24px;border-radius:999px;background:var(--navy);color:#fff;
  font-family:var(--mono);font-size:11px;display:flex;align-items:center;
  justify-content:center}
#ol-flow .ol-orx-next li strong{color:var(--navy);font-weight:800}

#ol-flow .ol-orx-act{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
#ol-flow .ol-orx-act-end{margin-top:30px;padding-top:26px;border-top:1px solid var(--hair)}

/* --- what woocommerce_thankyou draws: the items table and the addresses --- */

#ol-flow .woocommerce-order-details,
#ol-flow .woocommerce-customer-details{margin:30px 0 0}
#ol-flow .woocommerce-order-details__title,
#ol-flow .woocommerce-column__title{font-family:var(--body);font-size:12px;
  font-weight:800;font-style:normal;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dust);margin:0 0 12px}

#ol-flow .woocommerce-table--order-details{width:100%;border-collapse:collapse;
  border:1px solid var(--hair);border-radius:var(--r2);overflow:hidden;
  background:#fff;font-family:var(--body)}
#ol-flow .woocommerce-table--order-details th,
#ol-flow .woocommerce-table--order-details td{padding:13px 18px;text-align:left;
  border:0;border-bottom:1px solid var(--hair);font-size:14px;vertical-align:top}
#ol-flow .woocommerce-table--order-details thead th{font-family:var(--mono);
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dust);
  background:var(--bone);font-weight:400}
#ol-flow .woocommerce-table--order-details td.product-total,
#ol-flow .woocommerce-table--order-details th.product-total,
#ol-flow .woocommerce-table--order-details tfoot td{text-align:right;
  white-space:nowrap}
#ol-flow .woocommerce-table--order-details td.product-name a{color:var(--navy);
  font-weight:700;text-decoration:none}
#ol-flow .woocommerce-table--order-details td.product-name a:hover{color:var(--red)}
#ol-flow .woocommerce-table--order-details .product-quantity{color:var(--granite);
  font-weight:400}
#ol-flow .woocommerce-table--order-details tfoot th{font-weight:700;color:var(--granite);
  background:none}
#ol-flow .woocommerce-table--order-details tfoot tr:last-child th,
#ol-flow .woocommerce-table--order-details tfoot tr:last-child td{border-bottom:0}

/* The totals block is separated by a tint rather than by picking the total
   row out, because WooCommerce gives these rows no classes whatsoever --
   get_order_item_totals() returns keyed data and order-details.php throws the
   keys away when it prints <tr>. Singling out the total would have meant
   overriding that template for one attribute, or counting rows, and the rows
   below it (payment method, customer note, account actions) are all optional
   so any count is wrong on some orders. The headline total is already stated
   in the facts grid at the top of the page, which is where anyone returning
   to this page looks first. */
#ol-flow .woocommerce-table--order-details tfoot{background:var(--bone)}
#ol-flow .woocommerce-table--order-details tfoot td{color:var(--navy);font-weight:700}
#ol-flow .woocommerce-table--order-details small.includes_tax,
#ol-flow .woocommerce-table--order-details small.shipped_via{display:block;
  font-family:var(--body);font-size:12px;font-weight:400;color:var(--granite);
  margin-top:3px}

/* .col2-set is clearfixed by WooCommerce exactly as ul.order_details is, so
   the two address cards landed in columns 2 and 1 of consecutive rows. Same
   cause, same fix -- see the note on .ol-orx-facts above. */
#ol-flow .woocommerce-columns--addresses::before,
#ol-flow .woocommerce-columns--addresses::after{content:none}
#ol-flow .woocommerce-columns--addresses{display:grid;gap:10px;
  grid-template-columns:repeat(2,minmax(0,1fr));margin:0}
#ol-flow .woocommerce-columns--addresses .woocommerce-column{width:auto;float:none;
  margin:0;padding:18px 20px;border:1px solid var(--hair);border-radius:var(--r2);
  background:#fff}
#ol-flow .woocommerce-customer-details address{font-family:var(--body);font-size:14px;
  line-height:1.65;color:var(--navy);font-style:normal;border:0;padding:0;margin:0}
#ol-flow .woocommerce-customer-details--phone,
#ol-flow .woocommerce-customer-details--email{margin:8px 0 0;padding:0;font-size:13.5px;
  color:var(--granite)}
#ol-flow .woocommerce-customer-details--phone::before,
#ol-flow .woocommerce-customer-details--email::before{content:none}

@media (max-width:900px){
  #ol-flow .ol-orx-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  #ol-flow .ol-orx-facts{grid-template-columns:1fr}
  #ol-flow .ol-orx-panel{padding:16px 16px;gap:13px}
  #ol-flow .woocommerce-columns--addresses{grid-template-columns:1fr}
  #ol-flow .ol-orx-act .ol-btn{width:100%;text-align:center}
  #ol-flow .woocommerce-table--order-details th,
  #ol-flow .woocommerce-table--order-details td{padding:11px 13px;font-size:13.5px}
}

/* --- the email check that guards this page when the link is reopened --- */

/* WooCommerce shows this instead of the confirmation when a guest order can
   not be matched to the visitor -- typically the customer coming back to the
   link the next day. It is a plain form with no OL classes on it, so it is
   styled by WooCommerce's own class names rather than rebuilt: the markup is
   four elements and a nonce, and a template override would be four elements of
   maintenance for no change in what the page says. */
#ol-flow .woocommerce-verify-email{max-width:520px;margin:0;background:var(--bone);
  border:1px solid var(--hair);border-radius:var(--r2);padding:22px 24px}
#ol-flow .woocommerce-verify-email p{margin:0 0 14px;font-family:var(--body);
  font-size:14.5px;line-height:1.6;color:var(--granite)}
#ol-flow .woocommerce-verify-email p:last-child{margin-bottom:0}
#ol-flow .woocommerce-verify-email a{color:var(--navy);font-weight:700}
#ol-flow .woocommerce-verify-email label{display:block;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dust);
  margin-bottom:6px}
#ol-flow .woocommerce-verify-email label .required{color:var(--red);border:0;
  text-decoration:none}
#ol-flow .woocommerce-verify-email .input-text{width:100%;box-sizing:border-box;
  font-family:var(--body);font-size:15px;color:var(--navy);background:#fff;
  border:1px solid var(--hair);border-radius:var(--r);padding:12px 15px;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
#ol-flow .woocommerce-verify-email .input-text:focus{border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(0,45,82,.08);outline:0}
#ol-flow .woocommerce-verify-email button[type=submit]{background:var(--red);
  color:#fff;border:0;border-radius:var(--r3);font-family:var(--body);
  font-weight:800;font-size:13px;letter-spacing:.02em;text-transform:uppercase;
  padding:13px 26px;cursor:pointer;transition:background .2s var(--ease)}
#ol-flow .woocommerce-verify-email button[type=submit]:hover{background:var(--redhover)}