/*
 * Dhali Foods — hand-authored component layer for the Claude Design mockup redesign.
 * Enqueued after assets/css/style.min.css (which is compiled with no source and must
 * not be hand-edited) — everything here either adds new dhali-* components consumed
 * by patterns/templates built in later phases, or overrides specific legacy rules
 * catalogued in plans/reference/style-min-css-audit.md.
 */

/* ---------------------------------------------------------------------------
   1. Foundations

   Own spacing scale, deliberately not reusing var(--wp--preset--spacing--NN):
   those numeric slugs are WP's shared default scale and pre-existing content
   (old Home/About buttons etc.) already depends on their non-literal default
   values. Redefining them to literal px inflated every legacy button on the
   site. Component spacing here stays self-contained instead.
--------------------------------------------------------------------------- */

:root {
  --dhali-space-20: 20px;
  --dhali-space-30: 30px;
  --dhali-space-40: 40px;
  --dhali-space-60: 60px;

  /*
   * Form-error red. Not a theme.json palette entry on purpose: adding a slug
   * puts the colour in the editor's picker for every block, and this is a
   * state colour, not one anybody should be painting text with. WooCommerce's
   * own is #cc1818, a cool red that sits badly against the warm palette;
   * this is the same signal warmed to match ink and brand. Checkout (5.6)
   * needs it too, which is why it is here rather than inline in §7.
   */
  --dhali-error: #b3261e;
}

/* ---------------------------------------------------------------------------
   2. Buttons
   Pill geometry, the solid brand fill and the outline / outline-light / ink
   variations all live in theme.json (styles.elements.button and
   styles.blocks.core/button.variations). Only the WooCommerce product-loop
   buttons need CSS, because they are not core/button and cannot pick up a
   core button style variation.
--------------------------------------------------------------------------- */

/* WooCommerce's product-loop "Select options" / "Add to cart" buttons ship as
   an outline pill in the mockup; is-style-outline is already applied in the
   archive-product.html template, this just fixes the treatment. */
.wc-block-components-product-button .wp-block-button__link.is-style-outline,
.wp-block-woocommerce-product-collection
  .wp-block-button__link.is-style-outline,
a.button.product_type_variable,
a.add_to_cart_button {
  background-color: transparent;
  color: var(--wp--preset--color--ink);
  border: 1.5px solid var(--wp--preset--color--ink);
  font-weight: 600;
}

.wc-block-components-product-button
  .wp-block-button__link.is-style-outline:hover,
.wp-block-woocommerce-product-collection
  .wp-block-button__link.is-style-outline:hover,
a.button.product_type_variable:hover,
a.add_to_cart_button:hover {
  background-color: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--white);
}

/* ---------------------------------------------------------------------------
   3. Cards — product / category / recipe
--------------------------------------------------------------------------- */

.dhali-card {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  background-color: var(--wp--preset--color--white);
}

.dhali-card__image {
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.dhali-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.dhali-card__body {
  padding-top: var(--dhali-space-20);
}

.dhali-card__title {
  font-size: var(--wp--preset--font-size--md);
  font-weight: 600;
  color: var(--wp--preset--color--ink);
  margin: 0 0 var(--dhali-space-20);
}

.dhali-card__meta {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--muted);
}

/*
 * Recipe cards.
 *
 * Three places draw the same card: the archive and term grids (a core Query
 * Loop of core blocks) and the two bands rendered by
 * dhali-foods/recipe-pairings (one <a> per card, because only PHP can work out
 * which recipes relate to the product or recipe being viewed). The markup
 * differs; the class names are shared so the chrome is written once.
 *
 * The track count lives here rather than in a core grid layout, for the reason
 * §6 gives for the shop grid: one owner for the columns, and one place in §13
 * to unwind them.
 *
 * ⚠️ No width and no max-width on the card, per the border-box guardrail in
 * AGENTS.md — it is a grid item, so its border and padding come out of the
 * track instead of being added outside a declared width.
 */

.dhali-recipe-grid {
  display: grid;
  grid-template-columns: repeat(var(--dhali-recipe-columns, 3), minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The pairings band is drawn tighter than the archive: 20px gutters, a
   shallower image band and a title-only body. */
.dhali-recipe-grid--compact {
  --dhali-recipe-media: 180px;

  gap: 20px;
}

/*
 * A band that found two recipes draws two tracks, not three with a hole in it.
 * The count is a class rather than an inline custom property so §13 can still
 * override it — an inline style would win against a media query.
 */
.dhali-recipe-grid--cols-1 {
  --dhali-recipe-columns: 1;
}

.dhali-recipe-grid--cols-2 {
  --dhali-recipe-columns: 2;
}

/* Three is the drawn band and the fallback; four to six exist because the
   block's sidebar allows them. */
.dhali-recipe-grid--cols-4 {
  --dhali-recipe-columns: 4;
}

.dhali-recipe-grid--cols-5 {
  --dhali-recipe-columns: 5;
}

.dhali-recipe-grid--cols-6 {
  --dhali-recipe-columns: 6;
}

/*
 * ⚠️ On the archive the grid item is not the card.
 *
 * `post-template` wraps every entry in an `<li class="wp-block-post">`, so the
 * `<li>` is what the grid stretches and the card inside it keeps its own
 * content height — which left a recipe with no excerpt sitting a head short of
 * its neighbours, with a ragged bottom edge across the row. Making the wrapper
 * a flex container passes the stretch through to the card.
 *
 * The pairings block has no wrapper: its `<a>` is the grid item directly, and
 * stretches on its own.
 */
.dhali-recipe-grid > .wp-block-post {
  display: flex;
}

.dhali-recipe-grid > .wp-block-post > .dhali-recipe-card {
  flex: 1;
  min-width: 0;
}

.dhali-recipe-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 14px;
  overflow: hidden;
  background-color: var(--wp--preset--color--white);
  text-decoration: none;
}

.dhali-recipe-card__media {
  display: block;
  height: var(--dhali-recipe-media, 180px);
  margin: 0;
  /* Cream rather than nothing while a recipe has no photo — 6.5 attaches those
     by hand, and an empty white band reads as a broken image. */
  background-color: var(--wp--preset--color--cream);
}

.dhali-recipe-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.dhali-recipe-card__body {
  display: flex;
  flex-direction: column;
  /* Takes the height the stretched card gives it, so "Read Recipe →" and its
     `margin-top: auto` land on the bottom of the card rather than on the bottom
     of the text. */
  flex: 1;
  padding: 18px;
}

/*
 * 🚨 The card with no photo, on the archive and the term pages.
 *
 * `core/post-featured-image` renders **nothing at all** when a post has no
 * thumbnail — not an empty `<figure>` — so the rule above has no element to
 * paint and the card starts at its title, a head shorter than its neighbours.
 * That is not what the rule above appeared to promise, and it shipped that way
 * in 1.8.0.
 *
 * The band is therefore drawn by the body, on the one condition in the markup
 * that means the image is missing: the body is the card's first child. Negative
 * margins take it back out to the card's edges, past the body's own padding,
 * and the card's `overflow: hidden` rounds its top corners.
 *
 * dhali-foods/recipe-pairings needs none of this — it always emits the span,
 * empty or not, which is why the two bands on the product page were right while
 * the archive was not.
 */
.dhali-recipe-card__body:first-child::before {
  content: "";
  display: block;
  /* A flex item in a column, so it would otherwise be shrinkable and the band
     would collapse under a long title. */
  flex: 0 0 auto;
  height: var(--dhali-recipe-media, 180px);
  margin: -18px -18px 18px;
  background-color: var(--wp--preset--color--cream);
}

/*
 * 16px, and no `fontSize` attribute on the block that carries this class:
 * WordPress prints preset font-size classes with `!important`, so a
 * `has-base-font-size` title could not be moved off 15px from here.
 */
.dhali-recipe-card__title {
  display: block;
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--wp--preset--color--ink);
}

.dhali-recipe-card__title a {
  color: inherit;
  text-decoration: none;
}

.dhali-recipe-card__title a:hover,
.dhali-recipe-card:hover .dhali-recipe-card__title {
  color: var(--wp--preset--color--brand);
}

.dhali-recipe-card__meta {
  display: block;
  margin: 0 0 12px;
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1.55;
  color: var(--wp--preset--color--muted);
}

.dhali-recipe-grid--compact .dhali-recipe-card__body {
  padding: 14px;
}

.dhali-recipe-grid--compact .dhali-recipe-card__title {
  margin-bottom: 0;
  font-size: var(--wp--preset--font-size--sm);
}

.dhali-recipe-grid--compact .dhali-recipe-card__meta {
  margin-bottom: 0;
}

/* "Read Recipe →" is core/read-more, which ships underlined. `margin-top:auto`
   pins it to the bottom of cards whose excerpts run to different lengths. */
.dhali-recipe-card__link {
  margin-top: auto;
  color: var(--wp--preset--color--brand);
  text-decoration: none;
}

.dhali-recipe-card__link:hover {
  text-decoration: underline;
}

/*
 * Category chips — dhali-foods/recipe-filters and dhali-foods/product-filters.
 *
 * The current chip renders as a <span> and every other one as an <a>, so the
 * brand fill is keyed to the element the block chose and cannot end up on two
 * chips at once.
 *
 * ⚠️ `.dhali-chip` is shared by the recipe archive and the shop, so it lives
 * here rather than being duplicated per section — the two blocks draw the same
 * control and are meant to stay identical. Editing it changes both screens.
 * The `.dhali-product-filters` row is deliberately *not* `.dhali-shop-filters`:
 * that name belongs to the dead sidebar below, which §13 hides under 782px.
 */

.dhali-recipe-filters,
.dhali-product-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dhali-chip {
  display: inline-block;
  padding: 7px 16px;
  border: 1px solid var(--wp--preset--color--border-strong);
  border-radius: 18px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--wp--preset--color--body-text);
  text-decoration: none;
}

a.dhali-chip:hover {
  border-color: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--ink);
}

.dhali-chip.is-current {
  border-color: var(--wp--preset--color--brand);
  background-color: var(--wp--preset--color--brand);
  color: var(--wp--preset--color--white);
}

/* Single recipe: the category / date line under the title. */

.dhali-recipe__meta {
  align-items: center;
}

/* The separator hangs off the second item, so a recipe with no category shows
   a date with no orphaned dot in front of it. */
.dhali-recipe__meta > :not(:first-child)::before {
  content: "·";
  margin-right: 10px;
  color: var(--wp--preset--color--border-strong);
}

.dhali-recipe__meta .dhali-recipe__terms a {
  color: var(--wp--preset--color--muted);
  text-decoration: none;
}

.dhali-recipe__meta .dhali-recipe__terms a:hover {
  color: var(--wp--preset--color--brand);
}

/* Real WooCommerce product-collection card markup (Home + Shop) */
.wc-block-components-product-image,
.woocommerce-shop main .wp-block-woocommerce-product-image {
  border-radius: 0;
  overflow: hidden;
}

.wc-block-components-product-image img,
.woocommerce-shop main .wp-block-woocommerce-product-image img {
  border-radius: 0;
}

.home .wc-block-components-product-image img,
.home .woocommerce-shop main .wp-block-woocommerce-product-image img {
  border-radius: 0;
}

.wp-block-woocommerce-product-price .wc-block-components-product-price ins,
.woocommerce-Price-amount.amount {
  text-decoration: none;
}

.wp-block-woocommerce-product-price .wc-block-components-product-price del,
.woocommerce ul.products li.product .price del {
  color: var(--wp--preset--color--muted);
  font-weight: 400;
}

.woocommerce ul.products li.product .price ins {
  color: var(--wp--preset--color--brand);
  font-weight: 600;
  text-decoration: none;
}

/* ---------------------------------------------------------------------------
   3b. Home page sections
   Consumed by patterns/home-*.php. The horizontal gutter comes from the
   theme.json root padding (the section wrappers are alignfull constrained
   groups, so core gives them .has-global-padding) — nothing here hardcodes it.
--------------------------------------------------------------------------- */

/* Hero. The banner comes from the Home page's Featured Image, which the cover
   reads via useFeaturedImage — the media library has no lifestyle photography
   yet, and core suppresses the cover's own media placeholder whenever the block
   already has a gradient, so there would otherwise be no way in from the UI.
   The scrim is translucent so a photo shows through; this background colour is
   what the scrim sits on while no featured image is set, and is covered by the
   photo once there is one.

   The gutter has to sit on the cover itself: core zeroes a nested
   .has-global-padding whose parent is .alignfull but not .is-layout-flow, which
   a cover's inner container always is. Reading the root padding variable keeps
   this in step with 5.11. The block sets no contentPosition, deliberately —
   that attribute pins the inner container to `margin:0;width:auto` at four
   classes of specificity, which would defeat the alignment rule below. Vertical
   centring comes from the cover's own `align-items:center` either way. */
.wp-block-cover.dhali-hero {
  background-color: var(--wp--preset--color--ink);
  padding-left: var(--wp--style--root--padding-left);
  padding-right: var(--wp--style--root--padding-right);
}

/* The background stays full bleed while the copy lines up with every other
   section on the page. Those are alignwide children of a padded alignfull
   group, so their left edge is the wide box, not the root gutter — the two only
   coincide at a 1440px viewport. Capping the inner container to wideSize inside
   the cover's gutter padding reproduces that box exactly at any width. The
   520px cap on the copy itself comes from the cover's own contentSize. */
.dhali-hero > .wp-block-cover__inner-container {
  max-width: var(--wp--style--global--wide-size);
  margin-inline: auto;
}

/* Promo trio — three split cards, text half beside image half, flush together.
   The layout properties are doubled up on .wp-block-group so they outrank the
   generated .wp-container-core-group-is-layout-* rule whichever way the two
   stylesheets happen to be ordered. */
.wp-block-group.dhali-promo-card {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  min-height: 220px;
}

.wp-block-group.dhali-promo-card > * {
  flex: 1 1 50%;
  min-width: 0;
}

.wp-block-group.dhali-promo-card__body {
  justify-content: center;
}

.dhali-promo-card__media {
  margin: 0;
  align-self: stretch;
}

.dhali-promo-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Category grid — rendered by the dhali-foods/category-grid block, so the
   markup is ours and each card is a single anchor rather than a group with a
   stretched pseudo-element. Column count comes through as a custom property so
   the breakpoints below can override it without fighting an inline value. */
.dhali-category-grid {
  display: grid;
  grid-template-columns: repeat(
    var(--dhali-category-columns, 4),
    minmax(0, 1fr)
  );
  gap: var(--dhali-space-20);
}

.dhali-cat-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 16px;
  background-color: var(--wp--preset--color--white);
  color: inherit;
  text-decoration: none;
}

.dhali-cat-card:hover {
  border-color: var(--wp--preset--color--border-strong);
}

/* height:auto is load-bearing, not tidying. wp_get_attachment_image() emits
   width/height attributes, which are presentational hints, and core's own
   height:auto rules are all scoped to markup this img does not have —
   .wp-block-image img, and :where(img[class*=wp-image-]), which never matches
   because the attachment classes are only attachment- and size- ones. With no author
   rule resetting it the hint makes height definite, and aspect-ratio is
   ignored whenever both axes are definite, so the crop silently stops
   applying and each card renders at its own intrinsic height. */
.dhali-cat-card__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.dhali-cat-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px;
}

.dhali-cat-card__title {
  font-size: var(--wp--preset--font-size--base);
  font-weight: 700;
  color: var(--wp--preset--color--ink);
}

.dhali-cat-card:hover .dhali-cat-card__title {
  color: var(--wp--preset--color--brand);
}

/* The subtitle is the term description, which is also the copy the category
   archive prints — so it is written to be a sentence or two there, while the
   card has room for a short line. Clamping here rather than trimming in
   render.php keeps the archive's full text intact and caps the card only, and
   keeps the four cards from being dragged tall by whichever description
   happens to be longest. */
.dhali-cat-card__meta {
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* Featured products. WooCommerce's own columns-5 grid handles the track sizing
   (shrinkColumns is on), so only the card treatment is set here. */
.dhali-featured-products .wc-block-product {
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 14px;
  overflow: hidden;
  padding-bottom: 14px;
  text-align: left;
}

.dhali-featured-products .wc-block-product .wp-block-woocommerce-product-image {
  border-radius: 0;
  margin-bottom: 14px;
}

.dhali-featured-products
  .wc-block-product
  .wp-block-woocommerce-product-image
  img {
  display: block;
  width: 100%;
  /* height: 170px; */
  object-fit: cover;
}

.dhali-featured-products .wc-block-product .wp-block-post-title,
.dhali-featured-products .wc-block-product .wp-block-woocommerce-product-price {
  padding-left: 14px;
  padding-right: 14px;
}

.dhali-featured-products .wc-block-product .wp-block-post-title a {
  color: var(--wp--preset--color--ink);
  text-decoration: none;
}

/* Wholesale band — copy left, dark pill right. */
.dhali-wholesale-cta__copy {
  max-width: 560px;
}

/* ---------------------------------------------------------------------------
   3c. About page
   Consumed by patterns/about.php. Everything else in that pattern — column
   split, gap, type, the outline button — is block attributes and theme.json.
--------------------------------------------------------------------------- */

/* The media half is the About page's Featured Image, the same arrangement the
   hero uses. The group behind it keeps the drawn height and the cream fill
   while no image is set, and clips the image to the rounded corner once one is
   — core exposes neither overflow nor a minimum height on the group. */
.dhali-about__media {
  min-height: 340px;
  border-radius: 16px;
  overflow: hidden;
}

/* Sizing stays here rather than on the block's own height/scale attributes:
   core prints those as an inline style on the <img>, which the responsive
   override at the bottom of this file could then only beat with !important. */
.dhali-about__media img {
  display: block;
  width: 100%;
  height: 340px;
  object-fit: cover;
}

/* The story picks out the brand name, the founder, the range and FSSAI in the
   heading colour. Inline emphasis has no block-level colour attribute. */
.dhali-about__prose strong {
  color: var(--wp--preset--color--ink);
}

/* ---------------------------------------------------------------------------
   3d. Wholesale page
   Consumed by patterns/wholesale.php. The hero and the tile grid are block
   attributes; only the two things core has no attribute for are here.
--------------------------------------------------------------------------- */

/* Core's grid layout stretches items to the row height. The tiles carry no
   background, so a stretched tile only spreads its centred text apart. */
.dhali-benefit {
  align-content: start;
}

.dhali-benefit__icon {
  /* Emoji, not iconography. Keep them off the text baseline metrics so the
	   heading below sits at the same offset in every tile. */
  line-height: 1;
}

/* ---------------------------------------------------------------------------
   3e. Forms — wholesale quote request and contact
   Consumed by gutenberg-blocks/WholesaleForm/render.php and
   gutenberg-blocks/ContactForm/render.php. Neither is block markup, so none of
   this can come from theme.json.

   The two forms share the control, label and feedback rules and diverge only
   where the mockup does: wholesale submits with a solid brand pill across the
   full width, contact with an outline pill sized to its text.

   Nothing here fights style.min.css. Every legacy contact-form rule in that
   file is scoped under `.hostinger-elementor-contact-form`, a wrapper the
   block does not emit and nothing has emitted since Phase F removed the
   Elementor integration — so those rules are dead, and the block's form was
   rendering with browser defaults until this section existed.
--------------------------------------------------------------------------- */

.dhali-wholesale-form__title {
  font-size: var(--wp--preset--font-size--lg);
  font-weight: 800;
  color: var(--wp--preset--color--ink);
  text-align: center;
  margin: 0 0 var(--dhali-space-20);
}

.dhali-wholesale-form__description {
  color: var(--wp--preset--color--muted);
  text-align: center;
  margin: 0 0 var(--dhali-space-20);
}

/* Business name / phone / first / last sit two-up; email spans the row. */
.dhali-wholesale-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.dhali-field--wide {
  grid-column: 1 / -1;
}

.dhali-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 14px 0 0;
}

.dhali-wholesale-form__grid .dhali-field {
  margin-top: 0;
}

.dhali-field > label,
.dhali-fieldset > legend,
.hts-contact-form form > label {
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 700;
  color: var(--wp--preset--color--ink);
  padding: 0;
}

.dhali-field__required {
  color: var(--wp--preset--color--brand);
}

/* box-sizing is set per control, not by a global reset: nothing in this theme
   or in style.min.css establishes border-box, so `width: 100%` with padding and
   a border overflows the column — but a blanket `*` reset here would reflow
   legacy post_content that was authored against content-box. */
.dhali-field input[type="text"],
.dhali-field input[type="tel"],
.dhali-field input[type="email"],
.dhali-field select,
.dhali-field textarea,
.hts-contact-form form > input[type="text"],
.hts-contact-form form > input[type="tel"],
.hts-contact-form form > input[type="email"],
.hts-contact-form form > textarea {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid var(--wp--preset--color--border-strong);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--body-text);
  background-color: var(--wp--preset--color--white);
}

.hts-contact-form form > input,
.hts-contact-form form > textarea {
  margin-top: 0;
}

.dhali-field textarea,
.hts-contact-form form > textarea {
  min-height: 90px;
  resize: vertical;
}

.dhali-field :is(input, select, textarea):focus-visible,
.hts-contact-form form :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--wp--preset--color--brand);
  outline-offset: 1px;
}

/* Server-side rejections come back as a field list; the message above the
   button carries the wording, so colour is not the only signal. */
.dhali-field .is-invalid {
  border-color: var(--wp--preset--color--brand);
}

.dhali-fieldset {
  border: 0;
  padding: 0;
  margin: 16px 0 0;
}

.dhali-fieldset__options {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
}

.dhali-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 400;
  color: var(--wp--preset--color--body-text);
}

.dhali-consent .dhali-checkbox {
  align-items: flex-start;
}

.dhali-consent input[type="checkbox"] {
  margin-top: 3px;
  flex: 0 0 auto;
}

.dhali-consent > label {
  font-weight: normal;
}

/* Honeypot. Hidden without display:none — some bots skip anything undisplayed,
   and a few browsers refuse to focus it, which would break the tab order fix. */
.dhali-wholesale-form__hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.dhali-wholesale-form__actions {
  margin: 20px 0 0;
}

.dhali-wholesale-form__actions button {
  box-sizing: border-box;
  width: 100%;
  border: 0;
  border-radius: 24px;
  padding: 14px;
  background-color: var(--wp--preset--color--brand);
  color: var(--wp--preset--color--white);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--base);
  font-weight: 600;
  cursor: pointer;
}

.dhali-wholesale-form__actions button[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* Submit feedback, shared by both forms.
   `.validate-message` is the contact form's node — its colour used to be set
   inline by the compiled view.js, and the hand-authored replacement sets
   is-success / is-error classes instead, so the styling has to live here. */
.dhali-wholesale-form__status:empty,
.validate-message:empty {
  display: none;
}

.dhali-wholesale-form__status,
.validate-message {
  box-sizing: border-box;
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  /* style.min.css pins .validate-message to position:static; nothing here
	   depends on positioning, so it is left alone rather than fought. */
}

.dhali-wholesale-form__status.is-success,
.validate-message.is-success {
  color: var(--wp--preset--color--success);
  border-color: var(--wp--preset--color--success);
  /* Tint of the success green rather than a new palette entry — the token
	   set has no surface colours, only text and border ones. */
  background-color: rgba(51, 135, 76, 0.08);
}

.dhali-wholesale-form__status.is-error,
.validate-message.is-error {
  color: var(--wp--preset--color--brand);
  border-color: var(--wp--preset--color--brand);
  background-color: rgba(222, 110, 41, 0.08);
}

/* Contact form specifics. Its markup is a flat run of label/control siblings
   rather than the wholesale form's wrapped fields, so the column and the
   label-to-control spacing are done here instead of on a .dhali-field. */
.hts-contact-form {
  max-width: 640px !important;
  margin-inline: auto;
}

.hts-contact-form form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
}

/* Every child starts from zero. This markup is a bare run of label/input
   siblings with no wrapper to hang spacing on, so anything a browser default
   or an inherited rule contributes lands on top of the flex gap and widens it
   unpredictably. Spacing is then declared explicitly below and nowhere else. */
.hts-contact-form form > * {
  margin: 0;
}

/* 6px of flex gap plus 8px here is the 14px between one field and the next,
   matching .dhali-field's margin on the wholesale form; the gap alone is the
   label-to-control distance, matching .dhali-field's own 6px. */
.hts-contact-form form > label {
  margin-top: 8px;
}

.hts-contact-form form > label:first-of-type {
  margin-top: 0;
}

/* No font-size of its own beyond the section scale: this is an h2 sitting on a
   page whose other h2 ("Our Location") is ordinary post content, and the two
   reading at different sizes is what looked wrong. `xl` is the section-heading
   size the redesigned pages use (About, FAQ, the Home bands). */
.hts-contact-form .contact-form-title {
  font-size: var(--wp--preset--font-size--xl);
  font-weight: 800;
  color: var(--wp--preset--color--ink);
  margin: 0 0 var(--dhali-space-20);
}

.hts-contact-form .contact-form-description {
  color: var(--wp--preset--color--muted);
  margin: 0 0 var(--dhali-space-20);
}

/* The consent checkbox is a consent surface, not decoration — it keeps its
   full label rather than being shrunk to an afterthought. */
.hts-contact-form .hts-privacy-agree {
  margin-top: 8px;
}

.hts-contact-form .hts-form-control {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 400;
  color: var(--wp--preset--color--body-text);
}

.hts-contact-form .hts-form-control input[type="checkbox"] {
  margin-top: 3px;
  flex: 0 0 auto;
}

/* Matches the wholesale form's submit rather than the mockup's outline pill.
   The mockup draws contact as an outline button sized to its text, but the two
   forms sitting side by side in the same site with different submit treatments
   read as an inconsistency rather than a distinction. Deliberate, user-directed
   deviation from the mockup (2026-08-23). Reverting means restoring
   `width: fit-content`, a 1.5px ink border, transparent fill and 26px radius.
   Both selectors outrank theme.json's .wp-element-button on specificity. */
.hts-contact-form form input[type="submit"] {
  box-sizing: border-box;
  width: 100%;
  margin-top: var(--dhali-space-20);
  border: 0;
  border-radius: 24px;
  padding: 14px;
  background-color: var(--wp--preset--color--brand);
  color: var(--wp--preset--color--white);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--base);
  font-weight: 600;
  cursor: pointer;
}

.hts-contact-form form input[type="submit"][disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* view.js toggles .loading on the button while the request is in flight.
   style.min.css already defines the `spin` keyframes and a spinner for this
   class, but only under the .hostinger-elementor-contact-form wrapper, which
   nothing has emitted since Phase F — so the animation is reused here and the
   right padding makes room for it. */
/* No extra right padding now that the button is full width — the label is
   centred and there is room for the spinner beside it. The disabled state
   above already supplies the cursor and the dimming. */
.hts-contact-form form input[type="submit"].loading {
  position: relative;
}

.hts-contact-form form input[type="submit"].loading::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  /* Also declared here, not only in the keyframes, so the spinner is centred
	   on the frame before the animation takes over. The `spin` keyframes carry
	   the same translate, so the two cannot fight. */
  transform: translateY(-50%);
  animation: spin 1s linear infinite;
}

.hts-contact-form form input[type="email"].not-valid {
  border-color: var(--wp--preset--color--brand);
}

/* The submit feedback must push what follows down the page, never sit on top
   of it. Reported overlapping the "Our Location" heading on the Contact page
   (2026-08-23) — and only there; the identical node on the Wholesale page,
   which sits inside a pattern we author, behaves.

   The difference is the surrounding markup: the Contact page is frozen legacy
   post_content, and nothing in this theme's CSS takes the node out of flow, so
   the cause is above it in that content. These declarations force it back into
   normal flow whatever that markup does — an absolutely positioned or floated
   ancestor being the two ways this symptom normally arises. If the real cause
   turns out to be a fixed height on an ancestor instead, this will not be
   enough and the fix belongs in the page content at Phase 8. */
.hts-contact-form .validate-message {
  position: static !important;
  float: none;
  display: block;
  width: 100%;
  box-sizing: border-box;
  /* Last in the column regardless of where it sits in the markup. The legacy
     render.php puts this node between the textarea and the consent checkbox,
     which left the confirmation floating above the button that produced it.
     Every sibling defaults to order 0, so any positive value sends this one to
     the end without touching them — and without editing markup the frozen
     Contact page depends on. */
  order: 1;
  margin-top: var(--dhali-space-20);
  margin-bottom: 0;
}

.hts-contact-form .validate-message:empty {
  display: none;
}

/* ---------------------------------------------------------------------------
   4. Header
--------------------------------------------------------------------------- */

/*
 * Layout, spacing, colour and typography for the header and footer live on the
 * blocks themselves in parts/header.html and parts/footer.html (core group /
 * navigation / social-links supports). Only the handful of things core has no
 * block attribute for survive here.
 */

/* Active nav item — core has no attribute for current-menu-item styling. */
.dhali-header__nav .current-menu-item > a,
.dhali-header__nav
  .wp-block-navigation-item.current-menu-item
  > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--brand);
}

.dhali-header__icons svg {
  display: block;
}

/*
 * Woo prints the count badge's colours inline from the block's own attributes,
 * and uses the same value for fill and text — hence !important, not a slug.
 */
.dhali-cart-badge,
.wc-block-mini-cart__badge {
  background-color: var(--wp--preset--color--brand) !important;
  color: var(--wp--preset--color--white) !important;
  font-size: 11px;
  font-weight: 700;
}

/*
 * Mobile gutter for the header/footer bars, plus the mobile header row.
 *
 * `.site-footer` is deliberately qualified with `.wp-block-group`: most
 * templates put that same class on the <footer> template-part wrapper too
 * (`"tagName":"footer","className":"site-footer"`), so an unqualified
 * selector pads the wrapper as well and insets the whole dark bar from both
 * viewport edges. The header has no such clash — its wrapper is `site-header`.
 *
 * The row itself: the nav goes inline again at 769px (see the 768px block
 * below), so 769-782px is a narrow band where the full menu shares the row.
 * nowrap there can overflow the viewport, so the row is allowed to wrap and
 * the logo is capped.
 */
/*
 * Both bars follow the root gutter at every width rather than carrying their
 * own breakpoint values. They are constrained groups, so WordPress already
 * gives them `has-global-padding` and this repeats what that rule computes —
 * which is the point: it is idempotent when the class is present and it is
 * the safety net when it is not.
 */
.dhali-menu,
.wp-block-group.site-footer {
  padding-left: var(--wp--style--root--padding-left, var(--dhali-space-60));
  padding-right: var(--wp--style--root--padding-right, var(--dhali-space-60));
}

@media (max-width: 782px) {
  .dhali-menu .dhali-header__inner.wp-block-group {
    flex-wrap: wrap;
    gap: 16px;
  }

  .dhali-menu .wp-block-site-logo img {
    max-width: 110px;
  }
}

/*
 * Below 768px the nav collapses to a single toggle. As the middle child of a
 * space-between row that toggle floats alone in open space, so it moves to the
 * head of the row instead: toggle | logo | icons. Above 768px the nav is the
 * full inline menu, which belongs between the logo and the icons as drawn.
 *
 * 768px, not core's 600px: style.min.css forces the toggle up to 768px with
 * !important, gated on `body.hostinger-ai-woocommerce-active`, which
 * includes/Settings/Theme.php still emits. Re-check this if that class or that
 * stylesheet ever goes away — the breakpoint reverts to core's 600px.
 */
@media (max-width: 768px) {
  .dhali-menu .dhali-header__nav {
    order: -1;
  }
}

/* ---------------------------------------------------------------------------
   5. Footer
--------------------------------------------------------------------------- */

/* The root layout gives every direct child of .wp-site-blocks a 40px block gap.
   On the footer that lands as a strip of page background above a full-bleed
   dark band, which the footer's own 60px top padding already covers. Zeroed
   here rather than per template, since no template wants that strip. */
.wp-site-blocks > footer {
  margin-block-start: 0;
}

/* theme.json paints every link brand orange; the footer needs the muted tone. */
.site-footer a {
  color: var(--wp--preset--color--footer-text);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--wp--preset--color--white);
}

/*
 * core/group grid layout has a fixed columnCount and no responsive attribute,
 * so the step down is done here: 4 columns on desktop, 2 from 401-782px, 1 at
 * 400px and below. Ordered narrowest-last — these match core's own
 * `.wp-container-*` grid rule at 0,1,0, so source order is what settles it.
 */
@media (max-width: 782px) {
  .dhali-footer__columns {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .dhali-footer__columns {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------
   6. Shop — filter sidebar + product grid
--------------------------------------------------------------------------- */

/*
 * Vertical rhythm is the shop's own; the horizontal gutter is the site's, so
 * it reads the root properties and steps down with every other template
 * (plan item 5.11) instead of needing a rule per breakpoint.
 */
/*
 * Width and gutter are the template's job, not this file's.
 *
 * `templates/archive-product.html` gives `main` a constrained layout and marks
 * each child `alignwide`, so WordPress centres them in the `wideSize` column —
 * the same column the header row and footer use — and `has-global-padding`
 * supplies the side gutter from the root padding properties, which the mobile
 * step-down in §13 already moves. Vertical padding is set on the block.
 *
 * This one rule remains because `style.min.css` — legacy, minified, no source,
 * loaded before this file — declares
 *
 *   .woocommerce-shop main { padding: 2.5rem 0 }
 *
 * whose zero horizontal value outranks `.has-global-padding`. Without it the
 * shop page loses its gutter entirely, and *only* the shop page: WordPress
 * does not put that body class on product-category archives, which render
 * through the very same template.
 */
.woocommerce-shop main.dhali-shop {
  padding-left: var(--wp--style--root--padding-left, var(--dhali-space-60));
  padding-right: var(--wp--style--root--padding-right, var(--dhali-space-60));
}

.dhali-shop .wp-block-woocommerce-breadcrumbs {
  margin-bottom: 6px;
}

/*
 * ⚠️ `.dhali-shop-layout` and the `.dhali-shop-filters` rules below are
 * unused and now superseded. The mockup drew a 230px filter sidebar, the
 * client dropped it (2026-08-23) because five categories narrow nothing, and
 * the updated wireframe replaced it outright with a chip row — the
 * `dhali-foods/product-filters` block, styled as `.dhali-product-filters`
 * higher up this file. Kept only until the Phase 10 cleanup; a larger
 * catalogue would rebuild the sidebar rather than revive these rules.
 */
.dhali-shop-layout {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: var(--dhali-space-60);
  align-items: start;
}

.dhali-shop-filters {
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 14px;
  padding: var(--dhali-space-40);
}

.dhali-shop-filters__group + .dhali-shop-filters__group {
  margin-top: var(--dhali-space-40);
  padding-top: var(--dhali-space-40);
  border-top: 1px solid var(--wp--preset--color--border);
}

.dhali-shop-filters__title {
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wp--preset--color--ink);
  margin-bottom: var(--dhali-space-20);
}

/*
 * Results count and sorting, the row above the grid.
 *
 * The hairline under this row is the template's, not this file's — a border on
 * the group, the same shape `parts/header.html` uses. What has to live here is
 * the gap below it: the theme's root `blockGap` is 40px, and the grid picks
 * that up as a `margin-block-start` from the global layout rule, which then
 * collapses with anything set on this row. So the distance from the line to
 * the first card is stated on the grid itself.
 *
 * ⚠️ The global rule is `:root :where(.is-layout-flow) > *` — (0,1,0), the same
 * weight as a class — so this only wins because `dhali.css` is enqueued after
 * `global-styles`. It is not a specificity win, it is a source-order one.
 */
.dhali-shop-results__header {
  margin-bottom: 0;
  gap: var(--dhali-space-20);
}

.dhali-shop-results {
  margin-top: 40px;
}

.dhali-shop-results__header .wc-block-product-results-count,
.dhali-shop-results__header .wc-block-catalog-sorting {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--muted);
  margin: 0;
}

.dhali-shop-results__header select {
  border: 1px solid var(--wp--preset--color--border-strong);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: var(--wp--preset--font-size--sm);
  font-family: inherit;
  color: var(--wp--preset--color--body-text);
  background-color: var(--wp--preset--color--white);
}

/*
 * The collection spans the shop column, not the 820px content width.
 *
 * `woocommerce/product-collection` supports layout, so a block with no layout
 * attribute of its own inherits the theme default — constrained — and both
 * boxes its children to `contentSize` and re-applies the root padding that
 * `main` has already applied. The result is a grid noticeably narrower than
 * the breadcrumb and heading above it. The template now sets
 * `"layout":{"type":"default"}`; this is the safety net for a copy of the
 * template saved in the database before that, where the attribute is missing
 * and the wrapper still carries `is-layout-constrained`.
 *
 * Selectors are deliberately one step stronger than core's
 * `.is-layout-constrained > :where(…)`, since block-support styles and this
 * file can print in either order.
 */
/*
 * The product grid.
 *
 * ⚠️ We declare the track count rather than leaving it to WooCommerce. Its
 * own rule is
 *
 *   repeat(auto-fill, minmax(max(150px, calc(33.333% - .833em)), 1fr))
 *
 * which is arithmetic calibrated to its own `1.25em` gap: three tracks plus
 * two gaps land on almost exactly 100%. Any wider gap — 22px, as the mockup
 * draws — pushes the sum past 100%, `auto-fill` fits one fewer track, and the
 * grid silently becomes two columns of enormous cards. The em units mean our
 * 15px root shifts the same sum again.
 *
 * `minmax(0, 1fr)` rather than `1fr`, and `min-width: 0` on the card: a grid
 * item's automatic minimum is its min-content, and a product photo's
 * intrinsic width is far larger than its track, so without these the tracks
 * blow out and the page scrolls sideways.
 */
.dhali-shop-results .wc-block-product-template {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.dhali-shop-results .wc-block-product {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 14px;
  overflow: hidden;
  padding-bottom: 16px;
  background-color: var(--wp--preset--color--white);
}

/* The image sits flush in the card, so the card's own radius does the
   clipping — the 10px on product images elsewhere would show as a notch
   inside the corner. */
.dhali-shop-results .wc-block-product .wp-block-woocommerce-product-image {
  margin: 0 0 16px;
}

/*
 * The block already asks WooCommerce for a 4/3 image, which it writes as an
 * inline style. Repeated here so the card keeps its proportions even if that
 * attribute is ever dropped in the editor — an unconstrained product photo is
 * what turned this grid into two column-height images once already.
 */
.dhali-shop-results .wc-block-product .wp-block-woocommerce-product-image img {
  border-radius: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.dhali-shop-results
  .wc-block-product
  > :not(.wp-block-woocommerce-product-image) {
  padding-left: 16px;
  padding-right: 16px;
}

.dhali-shop-results .wc-block-product .wp-block-woocommerce-product-price {
  display: block;
}

/* "Select options" / "Add to cart": full-width outline pill, as drawn. */
.dhali-shop-results .wp-block-woocommerce-product-button {
  margin-top: auto;
}

.dhali-shop-results .wc-block-components-product-button .wp-block-button__link {
  display: block;
  width: 100%;
  text-align: center;
  padding: 9px 14px;
  border: 1.5px solid var(--wp--preset--color--ink);
  border-radius: 22px;
  background-color: transparent;
  color: var(--wp--preset--color--ink);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
}

.dhali-shop-results
  .wc-block-components-product-button
  .wp-block-button__link:hover,
.dhali-shop-results
  .wc-block-components-product-button
  .wp-block-button__link:focus {
  background-color: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--white);
}

.dhali-breadcrumb,
.wp-block-woocommerce-breadcrumbs {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--muted);
}

.dhali-breadcrumb a,
.wp-block-woocommerce-breadcrumbs a {
  color: var(--wp--preset--color--muted);
  text-decoration: none;
}

/* ---------------------------------------------------------------------------
   7. Cart — WooCommerce Cart block

   Every selector here is real WooCommerce 11 markup, read off `cart.css` and
   the `cart.js` / `wc-cart-checkout-base-frontend.js` render functions. The
   Cart block is React-hydrated: the template ships an empty skeleton and the
   line items, totals and coupon form are all built in the browser, so nothing
   below can be verified by reading the served HTML alone.

   The line-item table is WooCommerce's own three columns — image, product,
   total — not the mockup's five. The unit price and the quantity stepper live
   *inside* the product cell, in `.wc-block-cart-item__wrap`. Splitting them
   into their own columns would mean `display: contents` on the `<td>` and the
   wrap and then grid-placing every child by hand, including a sale badge that
   only sometimes exists. Client's call, 2026-08-28: keep WooCommerce's table
   and take the palette, the geometry and the rhythm from the mockup instead.

   ⚠️ Specificity, per the guardrail in AGENTS.md. WooCommerce writes these
   rules from `table.wc-block-cart-items` down —
   `.wc-block-cart__main .wc-block-cart-items td` is (0,2,1) and
   `table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity`
   is (0,3,1) — so the `.dhali-cart` prefix plus WooCommerce's own classes is
   what clears them. No `!important`, and no leaning on `.woocommerce`.

   ⚠️ WooCommerce's own responsive step is a **container** query on
   `.wp-block-woocommerce-cart` (`container-type: inline-size`), not a media
   query, with `.is-small` / `.is-medium` / `.is-mobile` as the fallback for
   browsers without container support. Anything that has to unwind at narrow
   widths is therefore written as `@container`, matching WooCommerce's own
   699px breakpoint, rather than in §13.
--------------------------------------------------------------------------- */

/*
 * Two columns, as drawn: 1fr and a 340px summary with 40px between them.
 *
 * WooCommerce ships 65% / 35% with percentage gutters, which on the 1200px
 * wide column gives a 420px summary card — noticeably fatter than the mockup.
 * The override is scoped to `@container (min-width: 700px)` so that below
 * WooCommerce's own breakpoint its `width: 100%` stacking rules are what
 * apply; a media query here would keep the desktop widths alive inside the
 * stacked layout.
 */
@container (min-width: 700px) {
  .dhali-cart .wc-block-components-sidebar-layout .wc-block-cart__main {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    padding-right: var(--dhali-space-40);
  }

  /*
   * `align-self`, and it is not optional. `.wc-block-components-sidebar-layout`
   * is `display: flex` with no `align-items`, so the default `stretch` made the
   * cream card run the full height of the line-item table — a column of empty
   * cream below the checkout button, growing with every product added. The
   * mockup's card hugs its contents.
   */
  /*
   * ⚠️ No `padding-left: 0` here, however tempting. WooCommerce's
   * `.wc-block-components-sidebar { padding-left: 2.2641509434% }` is the
   * gutter this override is meant to remove — but the card's own 26px inset
   * is set with the `padding` shorthand on the same element, at (0,2,0), and
   * a `padding-left: 0` at (0,3,0) here beats it. That shipped in 1.3.0 and
   * 1.3.1: every row in the cream card sat flush against its left edge. The
   * shorthand already replaces WooCommerce's percentage; nothing else needed.
   */
  .dhali-cart .wc-block-components-sidebar-layout .wc-block-cart__sidebar {
    flex: 0 0 340px;
    width: 340px;
    align-self: flex-start;
  }
}

/* ---- Line items ---------------------------------------------------------- */

/*
 * The column head. WooCommerce sets `text-transform: uppercase` and
 * `font-weight: 500` on it; the mockup's is a 12px 700 muted row with a wide
 * tracking, over a hairline.
 */
.dhali-cart
  .wc-block-cart__main
  .wc-block-cart-items
  .wc-block-cart-items__header
  th {
  padding: 0 16px 14px 0;
  border-bottom: 1px solid var(--wp--preset--color--border);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--wp--preset--color--muted);
}

.dhali-cart
  .wc-block-cart__main
  .wc-block-cart-items
  .wc-block-cart-items__header
  th:last-child {
  padding-right: 0;
}

/*
 * Row rules. WooCommerce draws them with
 * `color-mix(in srgb, currentColor 20%, transparent)`, which tints with
 * whatever text colour the row inherits; the mockup wants one flat hairline.
 */
.dhali-cart .wc-block-cart__main .wc-block-cart-items {
  border-bottom: 1px solid var(--wp--preset--color--border);
}

/*
 * 🚨 Cell geometry is desktop-only, and saying so is the whole point.
 *
 * Below 700px WooCommerce stops laying the row out as a table and makes it a
 * CSS grid — `grid-template-columns: 80px 132px` with a third, implicit track
 * and 16px gaps. Table widths mean something quite different there: a `width`
 * on a cell sizes the *track*, so the desktop `width: 110px` on the total
 * turned a row into 80 + 16 + 132 + 16 + 110 = 354px against the 335px a
 * 375px phone has after the root padding, and the price column hung off the
 * right edge. The cell padding overrode Woo's `td { padding: 0 }` in the same
 * way, adding 36px to every cell of a layout that had already stopped using
 * them as cells.
 *
 * So both halves now sit inside container queries at WooCommerce's own 699px
 * breakpoint. A browser too old for `@container` drops both and falls back to
 * Woo's untouched layout, which is the right thing for it to do.
 */
@container (min-width: 700px) {
  .dhali-cart .wc-block-cart__main .wc-block-cart-items td {
    border-top: 1px solid var(--wp--preset--color--border);
    padding-top: 18px;
    padding-bottom: 18px;
    vertical-align: middle;
  }

  /* 70px thumbnail with the 10px radius products carry everywhere but the
     shop card, where the card's own radius does the clipping instead. */
  .dhali-cart
    .wc-block-cart__main
    .wc-block-cart-items
    .wc-block-cart-item__image {
    width: 80px;
    padding-right: 16px;
  }

  .dhali-cart
    .wc-block-cart__main
    .wc-block-cart-items
    .wc-block-cart-item__total {
    width: 110px;
  }
}

.dhali-cart
  .wc-block-cart__main
  .wc-block-cart-items
  .wc-block-cart-item__image
  img {
  width: 70px;
  height: 70px;
  border-radius: 10px;
  object-fit: cover;
}

.dhali-cart
  .wc-block-cart__main
  .wc-block-cart-items
  .wc-block-cart-item__wrap {
  gap: 4px;
}

/*
 * The product name leads the row, so it is sized above everything beside it
 * — WooCommerce ships it at `font-size: small` / weight 500, which in this
 * theme resolves to 12px and reads as another line of metadata.
 *
 * The mockup gives the name a column to itself, with the unit price off in
 * its own; here the price sits directly underneath it, so the name has to
 * carry more weight than the mockup's 14.5px to stay the thing you read
 * first. Woo's own rule is (0,2,1) — `table.wc-block-cart-items
 * .wc-block-cart-items__row .wc-block-components-product-name` — which the
 * three classes here clear.
 */
.dhali-cart .wc-block-cart__main .wc-block-components-product-name {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.35;
  color: var(--wp--preset--color--ink);
  text-decoration: none;
}

/* The variation line — "Garlic · 400g" in the mockup. WooCommerce renders it
   as a definition list; only the colour and size are ours. */
.dhali-cart .wc-block-cart__main .wc-block-components-product-metadata,
.dhali-cart .wc-block-cart__main .wc-block-components-product-metadata .wc-block-components-product-details,
.dhali-cart .wc-block-cart__main .wc-block-cart-item__prices {
  font-size: 13px !important;
  color: var(--wp--preset--color--muted);
}

.dhali-cart .wc-block-cart__main .wc-block-cart-item__quantity {
  margin-top: 4px; 
}

/* Treatment only — the 110px that goes with this on desktop is in the
   container query above, for the reason set out there. */
.dhali-cart
  .wc-block-cart__main
  .wc-block-cart-items
  .wc-block-cart-item__total {
  text-align: right;
  font-size: var(--wp--preset--font-size--base);
  font-weight: 700;
  color: var(--wp--preset--color--ink);
}

/*
 * The "Save ₹10.00" chip. The mockup draws no sale badge on a cart row, but
 * the products really are discounted and dropping the line would be hiding a
 * fact from the customer, so it is brought into the palette instead: brand
 * text on cream, no border, sentence case rather than WooCommerce's shouted
 * uppercase. Its own rule, `.wc-block-components-product-sale-badge`, is
 * (0,1,0) and sets a white fill with a #43454b border.
 */
.dhali-cart .wc-block-cart__main .wc-block-components-product-sale-badge {
  background-color: var(--wp--preset--color--cream);
  border: 0;
  border-radius: 12px;
  padding: 3px 10px;
  color: var(--wp--preset--color--brand);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 600;
  text-transform: none;
}

/* The struck-through pre-sale figure. WooCommerce leaves it at full contrast
   beside the price that is actually charged. */
.dhali-cart .wc-block-cart__main .wc-block-cart-item__prices del {
  opacity: 0.65;
}

/* ---- Line items, narrow ---------------------------------------------------
 *
 * 🚨 The narrow grid is declared here rather than inherited, for the same
 * reason §6 declares the shop's track count: WooCommerce's is built from
 * fixed pixels — `80px 132px` plus 16px gaps plus an implicit third track
 * sized to its contents — which comes to about 334px before anything of ours
 * is added. That is already within a few pixels of the 335px a 375px phone
 * has, and it overflows outright on a 320px one. Nothing about the layout is
 * allowed to flex, so any change in content width spills off the screen.
 *
 * `70px minmax(0, 1fr) auto` states the intent instead: a fixed thumbnail, a
 * name column that takes what is left, and a price column sized to its own
 * content. `min-width: 0` on both flexible cells matters — a grid item's
 * automatic minimum is its min-content, so without it neither can shrink and
 * the row overflows exactly as before.
 *
 * WooCommerce also spans the product cell `grid-column: 2 / 4`, over the top
 * of the total sitting in column 3. Overlapping grid items are legal and it
 * happens to read acceptably with short names, but it leaves no honest way to
 * size either one. Each cell gets its own column here.
 * ------------------------------------------------------------------------- */

@container (max-width: 699px) {
  .dhali-cart
    .wc-block-cart__main
    .wc-block-cart-items
    .wc-block-cart-items__row {
    grid-template-columns: 70px minmax(0, 1fr) auto;
    column-gap: 14px;
    padding: 16px 0;
  }

  .dhali-cart
    .wc-block-cart__main
    .wc-block-cart-items
    .wc-block-cart-items__row
    .wc-block-cart-item__image {
    grid-column: 1 / 2;
    grid-row: 1;
    width: auto;
    padding-right: 0;
  }

  .dhali-cart
    .wc-block-cart__main
    .wc-block-cart-items
    .wc-block-cart-items__row
    .wc-block-cart-item__product {
    grid-column: 2 / 3;
    grid-row: 1;
    min-width: 0;
    padding: 0;
  }

  .dhali-cart
    .wc-block-cart__main
    .wc-block-cart-items
    .wc-block-cart-items__row
    .wc-block-cart-item__total {
    grid-column: 3 / 4;
    grid-row: 1;
    min-width: 0;
    padding: 0;
  }

  /* The row rule, recoloured. Woo's is
     `.wc-block-cart table.…-items:not(.wc-block-mini-cart-items):not(:last-child) .…__row`
     at (0,5,1) — both `:not()`s count toward the class column — so the
     selector here carries the two `:not()`s as well to clear it at (0,6,0). */
  .dhali-cart
    .wc-block-cart__main
    .wc-block-cart-items:not(.wc-block-mini-cart-items):not(:last-child)
    .wc-block-cart-items__row {
    border-bottom: 1px solid var(--wp--preset--color--border);
  }

  /* The sale chip is the widest thing in the price column and the only one
     that cannot be read at a glance anyway. Allowed to wrap rather than being
     given a track of its own to defend. */
  .dhali-cart .wc-block-cart__main .wc-block-components-product-sale-badge {
    white-space: normal;
  }
}

/* ---- Quantity stepper ---------------------------------------------------- */

/*
 * The mockup's pill: a hairline capsule holding − / value / +, with the
 * "Remove item" link sitting outside it. WooCommerce's own selector for the
 * capsule is (0,2,0) and for the buttons (0,2,0) as well, so the `.dhali-cart`
 * prefix decides both rather than stylesheet order.
 */
.dhali-cart .wc-block-cart__main .wc-block-components-quantity-selector {
  border: 1px solid var(--wp--preset--color--border-strong);
  border-radius: 18px;
  overflow: hidden;
  width: auto;
  min-width: 0;
  float: none;
  margin: 0;
}

.dhali-cart .wc-block-cart__main .wc-block-components-quantity-selector__input {
  width: 34px;
  min-width: 0;
  padding: 4px 0;
  font-size: 13px;
  color: var(--wp--preset--color--ink);
}

.dhali-cart
  .wc-block-cart__main
  .wc-block-components-quantity-selector__button {
  width: 28px;
  min-width: 28px;
  padding: 0;
  color: var(--wp--preset--color--ink);
  font-weight: 600;
  opacity: 1;
}

.dhali-cart
  .wc-block-cart__main
  .wc-block-components-quantity-selector__button:hover:not(:disabled) {
  background-color: var(--wp--preset--color--cream);
}

.dhali-cart .wc-block-cart__main .wc-block-cart-item__remove-link {
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--muted);
}

/* ---- Order summary card -------------------------------------------------- */

/*
 * WooCommerce draws no card at all here; the cream panel with the 16px radius
 * is entirely the mockup's. Sizing the sidebar itself rather than the summary
 * block means the coupon panel, the checkout button and the payment-methods
 * strip all sit inside the same card, which is how the mockup reads.
 */
.dhali-cart .wc-block-cart__sidebar {
  background-color: var(--wp--preset--color--cream);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 16px;
  padding: 26px;
}

/*
 * 🚨 WooCommerce hides the summary heading on the cart page outright:
 *
 *   .wc-block-cart .wc-block-components-sidebar .wc-block-cart__totals-title
 *     { display: none }
 *
 * That is (0,3,0), which is why the rule below carries the same three classes
 * plus `.dhali-cart`. The template passes `{"content":"Order Summary"}` to
 * `cart-order-summary-heading-block`; without this the card would open with
 * the subtotal row and no title.
 */
.dhali-cart
  .wc-block-cart
  .wc-block-components-sidebar
  .wc-block-cart__totals-title {
  display: block;
  margin: 0 0 18px;
  padding: 0;
  font-size: var(--wp--preset--font-size--md);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--wp--preset--color--ink);
}

/*
 * 🚨 WooCommerce rules off every row inside the card.
 * `.wc-block-components-totals-wrapper` — (0,1,0), in `packages-style.css`,
 * not `cart.css` — carries `border-top: 1px solid …; padding: 16px 0`, and
 * the order summary wraps the heading, the coupon panel and the totals group
 * in one each. The card therefore renders as four boxed bands. The mockup
 * draws exactly one rule, above the Total, which the footer-item rule below
 * supplies; spacing here comes from the rows' own margins instead.
 */
.dhali-cart .wc-block-cart__sidebar .wc-block-components-totals-wrapper {
  border-top: 0;
  padding: 0;
}

/* The totals group carries a second, separate rule of its own —
   `.wp-block-woocommerce-cart-order-summary-totals-block` at (0,1,0) in
   `cart.css`, not the shared wrapper rule above. It is what drew the line
   still sitting above Subtotal after 1.3.1 zeroed the wrappers. */
.dhali-cart
  .wc-block-cart__sidebar
  .wp-block-woocommerce-cart-order-summary-totals-block {
  border-top: 0;
  padding-bottom: 0;
}

.dhali-cart .wc-block-cart__sidebar .wc-block-components-totals-item {
  padding: 0;
  margin-bottom: 10px;
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--body-text);
}

/*
 * The Total row: heavier, ink, over a hairline.
 *
 * ⚠️ The size has to be set on the label and the value, not on the row.
 * WooCommerce sizes them at `1.25em` of the row —
 * `.wc-block-components-totals-footer-item .wc-block-components-totals-item__label`
 * at (0,2,0) — so a font-size on the row alone comes out a quarter larger than
 * asked for. `.wc-block-cart .wc-block-components-totals-footer-item` is also
 * (0,2,0) and zeroes the margins, which is why the row rule carries three
 * classes of its own.
 */
.dhali-cart .wc-block-cart__sidebar .wc-block-components-totals-footer-item {
  margin-top: 14px;
  margin-bottom: 0;
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: 1px solid var(--wp--preset--color--border-strong);
  color: var(--wp--preset--color--ink);
}

.dhali-cart
  .wc-block-cart__sidebar
  .wc-block-components-totals-footer-item
  .wc-block-components-totals-item__label,
.dhali-cart
  .wc-block-cart__sidebar
  .wc-block-components-totals-footer-item
  .wc-block-components-totals-item__value {
  font-size: 18px;
  font-weight: 800;
}

/*
 * The coupon form is a collapsible `Panel` titled "Add coupons", not the
 * mockup's always-open input and Apply button — and it cannot be moved to sit
 * under the line items where the mockup draws it, because
 * `cart-order-summary-coupon-form-block/block.json` declares
 * `"parent": ["woocommerce/cart-order-summary-block"]`. Both are accepted
 * deviations; only the treatment is ours.
 */
.dhali-cart .wc-block-cart__sidebar .wc-block-components-totals-coupon {
  padding: 0;
  margin-top: 4px;
  margin-bottom: 18px;
}

.dhali-cart .wc-block-cart__sidebar .wc-block-components-panel__button {
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  color: var(--wp--preset--color--ink);
  padding-top: 0;
  padding-bottom: 0;
}

/*
 * 🚨 `nowrap` and `min-width: 0`, or Apply drops onto its own line.
 *
 * WooCommerce's form is `display: flex; flex-wrap: wrap` and it sizes the
 * field with `flex: 3 1 120px` — the 120px basis is doing real work, because
 * `.wc-block-components-text-input` is `width: 100%`. Overriding the field to
 * `flex: 1 1 auto` restored that 100% as its base size, so the field claimed
 * the whole line and the button wrapped beneath it, half-width and stubby.
 * A flex item's automatic minimum is its min-content, so `min-width: 0` is
 * needed as well for the field to be allowed to shrink at all.
 */
.dhali-cart .wc-block-cart__sidebar .wc-block-components-totals-coupon__form {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: stretch;
  margin-top: 12px;
}

.dhali-cart .wc-block-cart__sidebar .wc-block-components-totals-coupon__input {
  flex: 1 1 120px;
  min-width: 0;
  margin: 0;
}

/* 10px, not the button's 24px. A pill field beside a pill button read as one
   continuous capsule broken in half, and it is the only rounded-to-the-height
   input in the theme — every other control, in §3e and on the checkout, is a
   10px box. Client's call, 2026-08-29. The Apply button stays a pill. */
.dhali-cart
  .wc-block-cart__sidebar
  .wc-block-components-totals-coupon__input
  input {
  border: 1px solid var(--wp--preset--color--border-strong);
  border-radius: 10px;
  background-color: var(--wp--preset--color--white);
}

/*
 * 🚨 The horizontal inset only — the vertical padding stays WooCommerce's,
 * because it is what makes room for the floating label. Taking the whole
 * `padding` here would drop the label onto the text the customer is typing.
 *
 * Three rules have to be cleared for one value, all in `packages-style.css`:
 *
 *   .wc-block-components-text-input input[type=text]            (0,2,1)  empty
 *   .…-text-input.is-active input[type=text]                    (0,3,1)  9px
 *   .…-text-input.is-active input[type=text]:focus              (0,4,1)  8.5px
 *
 * The last one is why the `:focus` selector is spelled out rather than left
 * to the base rule: at (0,4,1) it would otherwise reset the inset the moment
 * the field took focus, which is the state the customer is actually looking
 * at. The prefix here is (0,4,1) and (0,5,1) respectively.
 */
.dhali-cart
  .wc-block-cart__sidebar
  .wc-block-components-totals-coupon
  .wc-block-components-totals-coupon__input
  input {
  padding-left: 14px;
}

.dhali-cart
  .wc-block-cart__sidebar
  .wc-block-components-totals-coupon
  .wc-block-components-totals-coupon__input
  input:focus {
  padding-left: 14px;
}

/* The floating label is absolutely positioned at `left: 10px` and keeps that
   offset when it scales up to sit over the border, so it needs moving with
   the text rather than inheriting the input's padding. */
.dhali-cart
  .wc-block-cart__sidebar
  .wc-block-components-totals-coupon
  .wc-block-components-totals-coupon__input
  label {
  left: 14px;
}

/* ---- Coupon errors ------------------------------------------------------- */

/*
 * ⚠️ The error border has to be restated, not just recoloured. WooCommerce
 * paints it with `.wc-block-components-text-input.has-error input` at (0,2,1)
 * — which the (0,3,1) pill rule above already outranks, so before this the
 * field gave no visual sign of an error at all, only the message underneath.
 */
.dhali-cart
  .wc-block-cart__sidebar
  .wc-block-components-totals-coupon
  .wc-block-components-totals-coupon__input.has-error
  input,
.dhali-cart
  .wc-block-cart__sidebar
  .wc-block-components-totals-coupon
  .wc-block-components-totals-coupon__input.has-error
  input:hover,
.dhali-cart
  .wc-block-cart__sidebar
  .wc-block-components-totals-coupon
  .wc-block-components-totals-coupon__input.has-error
  input:focus {
  border-color: var(--dhali-error);
  box-shadow: none;
}

.dhali-cart
  .wc-block-cart__sidebar
  .wc-block-components-totals-coupon
  .wc-block-components-totals-coupon__input.has-error
  label {
  color: var(--dhali-error);
}

/*
 * The message itself. WooCommerce sets `color: #cc1818` on the container and
 * lets the `<p>` inherit it — but the paragraph picks up a colour from the
 * theme's own cascade first, so it rendered near-black, reading as ordinary
 * copy rather than as a fault. Both are set here.
 */
.dhali-cart
  .wc-block-cart__sidebar
  .wc-block-components-totals-coupon
  .wc-block-components-validation-error,
.dhali-cart
  .wc-block-cart__sidebar
  .wc-block-components-totals-coupon
  .wc-block-components-validation-error
  > p {
  color: var(--dhali-error);
}

.dhali-cart
  .wc-block-cart__sidebar
  .wc-block-components-totals-coupon
  .wc-block-components-validation-error {
  padding: 10px 0 0;
  font-size: var(--wp--preset--font-size--xs);
}

/*
 * Woo's `<p>` is `align-items: center` with `line-height: 1`, and the icon is
 * `1.5em` pulled back by `margin: -.4735em 0` — arithmetic that centres a big
 * glyph on a single line of text. A coupon error is regularly two lines
 * ("Coupon "happy" cannot be applied because it does not exist"), and centred
 * against two lines the icon floats in the middle of the sentence. Aligned to
 * the first line instead, at a size that does not shout.
 */
.dhali-cart
  .wc-block-cart__sidebar
  .wc-block-components-totals-coupon
  .wc-block-components-validation-error
  > p {
  align-items: flex-start;
  gap: 6px;
  line-height: 1.45;
}

.dhali-cart
  .wc-block-cart__sidebar
  .wc-block-components-totals-coupon
  .wc-block-components-validation-error
  svg {
  flex: 0 0 auto;
  width: 1.1em;
  height: 1.1em;
  margin: 0.16em 0 0;
}

/*
 * Apply: the outline pill the mockup draws, matched in height to the field
 * beside it by the form's `align-items: stretch` rather than by a hard-coded
 * height — WooCommerce's floating label changes the field's height between
 * its empty and active states.
 */
.dhali-cart .wc-block-cart__sidebar .wc-block-components-totals-coupon__button {
  flex: 0 0 auto;
  min-height: 0;
  border: 1.5px solid var(--wp--preset--color--ink);
  border-radius: 24px;
  padding: 0 22px;
  background-color: transparent;
  color: var(--wp--preset--color--ink);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  line-height: 1.2;
}

.dhali-cart
  .wc-block-cart__sidebar
  .wc-block-components-totals-coupon__button:hover:not(:disabled) {
  background-color: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--white);
}

/* Disabled until something is typed. Kept legible rather than ghosted — it
   is a label, not a warning. */
.dhali-cart
  .wc-block-cart__sidebar
  .wc-block-components-totals-coupon__button:disabled {
  border-color: var(--wp--preset--color--border-strong);
  color: var(--wp--preset--color--muted);
  opacity: 1;
}

/*
 * Proceed to Checkout — full-width brand pill, as drawn.
 *
 * ⚠️ Three classes, not two. The button also carries `wc-block-components-button`,
 * and `.wc-block-components-button:not(.is-link)` is (0,2,0) — a tie with
 * `.dhali-cart .wc-block-cart__submit-button`, decided only by which
 * stylesheet the browser parsed last. `display` is left to WooCommerce's
 * `inline-flex`, which already centres the label at `width: 100%`.
 */
.dhali-cart .wc-block-cart__sidebar .wc-block-cart__submit {
  margin-top: 20px;
  margin-bottom: 0;
}

.dhali-cart .wc-block-cart__sidebar .wc-block-cart__submit-container {
  padding: 0;
}

.dhali-cart .wc-block-cart__sidebar .wc-block-cart__submit-container--sticky {
  padding: 10px;
}

.dhali-cart .wc-block-cart__sidebar .wc-block-cart__submit-button {
  width: 100%;
  padding: 14px 20px;
  border: 0;
  border-radius: 24px;
  background-color: var(--wp--preset--color--brand);
  color: var(--wp--preset--color--white);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
}

.dhali-cart .wc-block-cart__sidebar .wc-block-cart__submit-button:hover,
.dhali-cart .wc-block-cart__sidebar .wc-block-cart__submit-button:focus {
  background-color: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--white);
}

/* The accepted-payment-methods strip. The mockup has a "Continue Shopping"
   link in this slot; the block is kept (client's call, 2026-08-28) and simply
   quietened so it reads as a footnote to the card. */
.dhali-cart .wp-block-woocommerce-cart-accepted-payment-methods-block {
  margin-top: 14px;
}

.dhali-cart .wc-block-components-payment-method-icons {
  margin: 0;
}

/* ---- Cross-sells and the empty cart -------------------------------------- */

/*
 * The cross-sell strip reuses the shop card wholesale: the template gives the
 * collection `class="dhali-shop-results"`, so §6's track count, card chrome
 * and outline button all apply unchanged. Only the top rule and the spacing
 * that separates it from the line items belong here.
 */
.dhali-cart .dhali-cart__crosssells {
  margin-top: var(--dhali-space-60);
  padding-top: var(--dhali-space-40);
  border-top: 1px solid var(--wp--preset--color--border);
}

/*
 * The empty state. `woocommerce/product-new` is the legacy grid block, not
 * `product-collection`, so §6's card rules do not reach it — it renders
 * `ul.wc-block-grid__products` with its own list markup. Kept rather than
 * swapped, because swapping it would mean hand-authoring a second collection
 * query; the card treatment is restated against its classes instead.
 */
.dhali-cart .wc-block-cart__empty-cart__title {
  margin-bottom: 0;
}

.dhali-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dhali-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product {
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0 0 16px;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 14px;
  overflow: hidden;
  background-color: var(--wp--preset--color--white);
  text-align: left;
}

.dhali-cart
  .wp-block-woocommerce-empty-cart-block
  .wc-block-grid__product-image {
  margin: 0 0 16px;
}

.dhali-cart
  .wp-block-woocommerce-empty-cart-block
  .wc-block-grid__product-image
  img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: 0;
  object-fit: cover;
}

.dhali-cart
  .wp-block-woocommerce-empty-cart-block
  .wc-block-grid__product-title,
.dhali-cart
  .wp-block-woocommerce-empty-cart-block
  .wc-block-grid__product-price,
.dhali-cart
  .wp-block-woocommerce-empty-cart-block
  .wc-block-grid__product-add-to-cart {
  padding-left: 16px;
  padding-right: 16px;
}

.dhali-cart
  .wp-block-woocommerce-empty-cart-block
  .wc-block-grid__product-title {
  font-size: var(--wp--preset--font-size--base);
  font-weight: 700;
  color: var(--wp--preset--color--ink);
}

.dhali-cart
  .wp-block-woocommerce-empty-cart-block
  .wc-block-grid__product-price {
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 700;
  color: var(--wp--preset--color--ink);
}

/* ---------------------------------------------------------------------------
   8. Checkout — WooCommerce Checkout block

   Every selector here is real WooCommerce 11 markup, read off `checkout.css`
   and `packages-style.css`. Like the Cart block, the Checkout block is
   React-hydrated: `templates/checkout.html` ships an empty skeleton and the
   fields, the payment options and the order summary are all built in the
   browser, so nothing below can be verified from the served HTML.

   ⚠️ The checkout responds to a **container** query, not a media query.
   `.wp-block-woocommerce-checkout` declares `container-type: inline-size` and
   WooCommerce unwinds the two columns at `@container (max-width: 699px)`.
   Anything of ours that has to unwind is written the same way, at the same
   699/700px boundary, rather than in §13 — the same rule §7 follows.

   🚨 WooCommerce sizes almost all of its checkout text with
   `var(--wp--preset--font-size--small, 14px)` — radio labels, checkbox
   labels, the terms line, every row of the order summary. **This theme's
   `small` slug is 12px**, a legacy value that pre-fork content depends on, so
   all of it was rendering two points under WooCommerce's intent and reading
   as fine print. Rather than restate fifteen selectors, the preset is
   redefined for the duration of the checkout block only, below. Anything
   inside it that wants a different size states one explicitly.
--------------------------------------------------------------------------- */

.dhali-checkout .wp-block-woocommerce-checkout {
  --wp--preset--font-size--small: 13.5px;
}

/* ---- Two columns --------------------------------------------------------- */

/*
 * 1fr and a 380px summary, as drawn, with 40px between them.
 *
 * WooCommerce ships 65% / 35% with percentage gutters, which on the 1200px
 * wide column gives a ~420px card. Scoped to `@container (min-width: 700px)`
 * so that below WooCommerce's own breakpoint its `width: 100%` stacking rules
 * are what apply; a media query here would keep the desktop widths alive
 * inside the stacked layout.
 *
 * ⚠️ No `padding-left: 0` on the sidebar, for the reason §7 sets out at
 * length: WooCommerce's `.wc-block-components-sidebar { padding-left:
 * 2.2641509434% }` is already replaced by the card's own `padding` shorthand
 * below, and a longhand here would outrank that shorthand and flush every row
 * in the card against its left edge.
 *
 * `align-self` is not restated either — unlike the cart's sidebar,
 * `.wc-block-checkout__sidebar` already carries `align-self: flex-start` in
 * `checkout.css`, so the card hugs its contents without help.
 */
@container (min-width: 700px) {
  .dhali-checkout .wc-block-components-sidebar-layout .wc-block-checkout__main {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    padding-right: var(--dhali-space-40);
  }

  .dhali-checkout
    .wc-block-components-sidebar-layout
    .wc-block-checkout__sidebar {
    flex: 0 0 380px;
    width: 380px;
  }
}

/* ---- Section headings ---------------------------------------------------- */

/*
 * "Contact information", "Delivery", "Shipping address", "Payment options".
 *
 * ⚠️ `.wc-block-components-title.wc-block-components-title` is (0,2,0) — the
 * class is deliberately doubled by WooCommerce so it outranks theme heading
 * styles — and it resolves to `--wp--preset--font-size--medium`, which is
 * 15px here. The step title therefore has to be beaten at (0,3,0) or better,
 * which the compound below is.
 */
.dhali-checkout
  .wc-block-components-checkout-step__title.wc-block-components-title {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--wp--preset--color--ink);
}

/* WooCommerce's own is `margin: 0 0 24px` at (0,2,0); the mockup breathes a
   little more between one step and the next. */
.dhali-checkout .wc-block-components-form .wc-block-components-checkout-step {
  margin-bottom: 28px;
}

/* ---- Fields -------------------------------------------------------------- */

/*
 * 🚨 Specificity, measured from the whole rule as the guardrail requires.
 * WooCommerce writes its input rules twice over, bare and with a
 * `.wc-block-components-form` prefix:
 *
 *   .wc-block-components-text-input input[type=text]                  (0,2,1)
 *   .wc-block-components-form .wc-block-components-text-input
 *     input[type=text]                                                (0,3,1)
 *   .wc-block-components-form .…-text-input.is-active input[type=text](0,4,1)
 *
 * An attribute selector counts as a class, which is what makes the second one
 * (0,3,1) rather than (0,2,1) — and what made the previous version of this
 * section, `.wc-block-checkout__form .wc-block-components-text-input input`
 * at (0,2,1), lose to it outright. The types are spelled out below for the
 * same arithmetic: each selector is (0,4,1), and the `.is-active` one (0,5,1).
 */
.dhali-checkout
  .wc-block-checkout__form
  .wc-block-components-text-input
  input[type="text"],
.dhali-checkout
  .wc-block-checkout__form
  .wc-block-components-text-input
  input[type="email"],
.dhali-checkout
  .wc-block-checkout__form
  .wc-block-components-text-input
  input[type="tel"],
.dhali-checkout
  .wc-block-checkout__form
  .wc-block-components-text-input
  input[type="number"] {
  border: 1px solid var(--wp--preset--color--border-strong);
  border-radius: 10px;
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--body-text);
  font-size: var(--wp--preset--font-size--sm);
  padding-left: 14px;
  padding-right: 14px;
}

/*
 * 🚨 Horizontal inset only — the vertical padding stays WooCommerce's,
 * because it is what makes room for the floating label. The same trap §7
 * documents for the coupon field: taking the whole `padding` shorthand here
 * drops the label onto the text the customer is typing. `.is-active` sets
 * `padding: 24px 9px 8px`, so its inset has to be restated separately.
 */
.dhali-checkout
  .wc-block-checkout__form
  .wc-block-components-text-input.is-active
  input[type="text"],
.dhali-checkout
  .wc-block-checkout__form
  .wc-block-components-text-input.is-active
  input[type="email"],
.dhali-checkout
  .wc-block-checkout__form
  .wc-block-components-text-input.is-active
  input[type="tel"],
.dhali-checkout
  .wc-block-checkout__form
  .wc-block-components-text-input.is-active
  input[type="number"] {
  padding-left: 14px;
  padding-right: 14px;
}

/*
 * Focus, matched to §3e rather than to WooCommerce: a 2px brand **outline**
 * one pixel off the box, with the border left alone.
 *
 * ⚠️ `border-width: 1px` is doing real work here, not tidying. WooCommerce's
 * focus rule is `border: 1.5px solid`, and half a pixel of extra border on
 * every side reflows the field's content by a fraction as the customer tabs
 * into it — a visible twitch on a form this long. Restating the width holds
 * the box still and lets the outline carry the whole focus signal.
 */
.dhali-checkout
  .wc-block-checkout__form
  .wc-block-components-text-input
  input[type="text"]:focus,
.dhali-checkout
  .wc-block-checkout__form
  .wc-block-components-text-input
  input[type="email"]:focus,
.dhali-checkout
  .wc-block-checkout__form
  .wc-block-components-text-input
  input[type="tel"]:focus,
.dhali-checkout
  .wc-block-checkout__form
  .wc-block-components-text-input
  input[type="number"]:focus {
  border-width: 1px;
  border-color: var(--wp--preset--color--border-strong);
  outline: 2px solid var(--wp--preset--color--brand);
  outline-offset: 1px;
}

/* The floating label is absolutely positioned at `left: 10px` and keeps that
   offset when it scales up over the border, so it has to move with the text
   rather than inherit the input's padding. */
.dhali-checkout .wc-block-checkout__form .wc-block-components-text-input label {
  left: 14px;
  color: var(--wp--preset--color--muted);
}

/* Country/Region and State. WooCommerce's own is (0,2,0) with
   `padding: 16px 9px 0`; the longhands below keep its vertical room for the
   label and change only the inset. */
.dhali-checkout
  .wc-blocks-components-select
  .wc-blocks-components-select__select {
  border: 1px solid var(--wp--preset--color--border-strong);
  border-radius: 10px;
  color: var(--wp--preset--color--body-text);
  font-size: var(--wp--preset--font-size--sm);
  padding-left: 14px;
  padding-right: 14px;
}

/* WooCommerce's own focus state widens the border to 1.5px *and* re-states
   the padding at 8.5px to compensate; both are undone so the select behaves
   like every other control in the theme. */
.dhali-checkout
  .wc-blocks-components-select
  .wc-blocks-components-select__select:focus {
  border-width: 1px;
  border-color: var(--wp--preset--color--border-strong);
  outline: 2px solid var(--wp--preset--color--brand);
  outline-offset: 1px;
  padding-left: 14px;
  padding-right: 14px;
}

.dhali-checkout
  .wc-blocks-components-select
  .wc-blocks-components-select__label {
  left: 14px;
  color: var(--wp--preset--color--muted);
}

/*
 * The order-note textarea. It is `.wc-block-components-textarea` — a
 * different component from `.wc-block-components-text-input`, with its own
 * rules in `packages-style.css` and none of the input work above reaching it,
 * which is why it was still rendering as WooCommerce's 4px near-black box
 * beside a column of 10px brand-focus fields.
 *
 * Unlike the inputs it has no floating label, so it can take §3e's padding
 * whole rather than the horizontal half.
 */
.dhali-checkout .wc-block-checkout__form .wc-block-components-textarea {
  border: 1px solid var(--wp--preset--color--border-strong);
  border-radius: 10px;
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--body-text);
  padding: 12px 14px;
  resize: vertical;
}

/* WooCommerce hard-codes `#2b2d2f` on a filled textarea, at (0,1,0) plus a
   pseudo-class — near-black, and not a colour in this palette. */
.dhali-checkout
  .wc-block-checkout__form
  .wc-block-components-textarea:not(:placeholder-shown) {
  color: var(--wp--preset--color--body-text);
}

/* Its placeholder inherits `currentColor`, so the hint text reads at the same
   weight as something the customer actually typed. */
.dhali-checkout
  .wc-block-checkout__form
  .wc-block-components-textarea::placeholder {
  color: var(--wp--preset--color--muted);
}

/*
 * Focus, matched to the inputs and to §3e. WooCommerce's own focus state is a
 * near-black border *plus* `box-shadow: inset 0 0 0 .5px #2b2d2f` — a
 * half-pixel fake second border that has to be cleared explicitly, or it
 * survives underneath the brand outline as a grey inner edge.
 */
.dhali-checkout .wc-block-checkout__form .wc-block-components-textarea:focus {
  border: 1px solid var(--wp--preset--color--border-strong);
  box-shadow: none;
  outline: 2px solid var(--wp--preset--color--brand);
  outline-offset: 1px;
}

/* ---- Selected states ----------------------------------------------------- */

/*
 * 🚨 Every "selected" outline on this page is drawn in `currentColor`, not in
 * a colour WooCommerce names — the checked radio card is
 * `box-shadow: inset 0 0 0 1.5px currentColor`, the Ship/Pickup toggle is
 * `border: 2px solid` with no colour at all, the radio dot is
 * `background: #000`. That is why the shipping option read brand-orange while
 * the payment option directly beneath it read near-black: the two inherit
 * their colour from different ancestors. Setting `color` on the checked
 * element would repaint its label with it, so each outline is restated.
 *
 * The group's own hairline, `.wc-block-components-radio-control--highlight-
 * checked:after` at (0,1,0), is a `color-mix` of the same currentColor; it
 * becomes the palette's border.
 */
.dhali-checkout .wc-block-components-radio-control--highlight-checked:after {
  border-color: var(--wp--preset--color--border);
  border-radius: 10px;
}

/*
 * 🚨 `z-index`, and it is the whole fix for the notch down each side of a
 * selected option.
 *
 * The group's outline is a pseudo-element *of the group*, so in tree order it
 * comes after the options themselves and — every box here being positioned
 * with `z-index: auto` — paints on top of them. The selected option's brand
 * ring is an `inset` box-shadow, which lands on the option's outermost pixel,
 * exactly where the group's 1px hairline is drawn. The hairline therefore
 * covers the ring's left and right edges.
 *
 * WooCommerce already meets this problem on the other two sides and solves it
 * by hand: `--highlight-checked--first-selected:after` drops `border-top` and
 * adds `margin-top: 2px`, and the last-selected rule does the same at the
 * bottom. It does nothing about the sides, because at its own 4px radius and
 * near-black palette the overlap is invisible — at 10px and brand it reads as
 * a rendering fault, which is how this was reported.
 *
 * Copying WooCommerce's approach sideways was rejected: zeroing the group's
 * side borders would strip the outline from the *unselected* options in a
 * multi-option group, which is most of what that outline is for. Raising the
 * selected option one layer leaves every other option untouched.
 */
.dhali-checkout
  .wc-block-components-radio-control--highlight-checked
  .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.dhali-checkout
  .wc-block-components-radio-control--highlight-checked
  label.wc-block-components-radio-control__option--checked-option-highlighted {
  box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--brand);
  border-radius: 10px;
  position: relative;
  z-index: 1;
}

.dhali-checkout
  .wc-block-components-radio-control
  .wc-block-components-radio-control__input:checked {
  border-color: var(--wp--preset--color--brand);
}

.dhali-checkout
  .wc-block-components-radio-control
  .wc-block-components-radio-control__input:checked:before {
  background: var(--wp--preset--color--brand);
}

/* The Ship / Pickup toggle. WooCommerce's selected state is `background:
   #fff; border: 2px solid` — the border colour again being whatever
   `currentColor` happens to be, which rendered near-black. The unselected
   track is a `color-mix` of the same, which reads grey against a warm page. */
.dhali-checkout
  .wc-block-checkout__shipping-method
  .wc-block-checkout__shipping-method-container {
  background-color: var(--wp--preset--color--cream);
  border-radius: 12px;
}

.dhali-checkout
  .wc-block-checkout__shipping-method-option.wc-block-checkout__shipping-method-option--selected {
  border-color: var(--wp--preset--color--brand);
  border-radius: 8px;
  color: var(--wp--preset--color--ink);
}

/* "Use same address for billing", and the terms checkbox if it is ever
   switched on. WooCommerce fills the tick `#000` and outlines the box with a
   `color-mix` of currentColor. */
.dhali-checkout
  .wc-block-components-checkbox
  .wc-block-components-checkbox__input[type="checkbox"]:checked {
  border-color: var(--wp--preset--color--brand);
}

.dhali-checkout
  .wc-block-components-checkbox
  .wc-block-components-checkbox__mark {
  fill: var(--wp--preset--color--brand);
}

/* ---- Trust row ----------------------------------------------------------- */

/*
 * `templates/checkout.html` puts this group inside
 * `woocommerce/checkout-fields-block`, after the payment step, which is where
 * the mockup draws it. ⚠️ It is a core group nested inside a React-rendered
 * WooCommerce block — see the note in plan item 5.6 — so if it ever fails to
 * appear, the fault is the renderer dropping a foreign child, not this rule.
 */
.dhali-checkout .dhali-checkout__trust {
  gap: 26px;
  margin: 26px 0;
  padding-top: 20px;
  border-top: 1px solid var(--wp--preset--color--border);
}

.dhali-checkout .dhali-checkout__trust p {
  margin: 0;
}

/* ---- Terms --------------------------------------------------------------- */

.dhali-checkout .wc-block-checkout__terms {
  color: var(--wp--preset--color--muted);
  margin-bottom: 20px;
}

.dhali-checkout .wc-block-checkout__terms a {
  color: var(--wp--preset--color--brand);
}

/* Place Order. WooCommerce gives the actions row `margin-bottom: 36px` and
   nothing above it, so the button sat hard against the terms line — on a
   phone, where the terms wrap to three lines, close enough to misread as part
   of the same paragraph. The button is the last thing on the page; it can
   afford the room. */
.dhali-checkout .wc-block-checkout__actions {
  margin-top: var(--dhali-space-30);
}

/* ---- Order summary card -------------------------------------------------- */

/*
 * WooCommerce draws no card here either; the cream panel with the 16px radius
 * is the mockup's. Sizing the sidebar rather than the order-summary block
 * means the coupon panel and the totals sit inside the one card.
 *
 * The order-summary block carries its own 5px-radius hairline box, which has
 * to go or the page shows a box inside a box.
 */
.dhali-checkout .wc-block-checkout__sidebar {
  background-color: var(--wp--preset--color--cream);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 16px;
  padding: 16px;
}

.dhali-checkout
  .wc-block-checkout__sidebar
  .wp-block-woocommerce-checkout-order-summary-block {
  border: 0;
  border-radius: 0;
  font-size: inherit;
}

/*
 * The heading. WooCommerce's own is `--wp--preset--font-size--medium` at
 * weight 500 with a 16px left margin — that margin makes room for the
 * collapse chevron, which only exists below 700px — inside a wrapper with
 * `margin-top: 16px`. Its rule is (0,3,0), so the text rule below is (0,4,0).
 *
 * ⚠️ The wording is WooCommerce's, not ours. `checkout-order-summary-block`
 * declares no content attribute, so the card reads "Order summary" rather
 * than the mockup's "Your Order"; changing it means a `gettext` filter, which
 * is not worth a PHP hook for one string.
 */
.dhali-checkout
  .wp-block-woocommerce-checkout-order-summary-block
  .wc-block-components-checkout-order-summary__title {
  margin: 0 0 18px;
  padding: 0;
}

.dhali-checkout
  .wp-block-woocommerce-checkout-order-summary-block
  .wc-block-components-checkout-order-summary__title
  .wc-block-components-checkout-order-summary__title-text {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--wp--preset--color--ink);
}

/*
 * 🚨 The same four-boxed-bands fault §7 records, and for the same reason:
 * `.wc-block-components-totals-wrapper` — (0,1,0), and in
 * `packages-style.css`, not `checkout.css` — carries `border-top` and
 * `padding: 16px 0`, and the order summary wraps the line items, the coupon
 * panel and each totals group in one apiece. The mockup draws one rule, above
 * the Total, which the footer-item rule below supplies.
 */
.dhali-checkout
  .wc-block-checkout__sidebar
  .wc-block-components-totals-wrapper {
  border-top: 0;
  padding: 0;
}

.dhali-checkout .wc-block-checkout__sidebar .wc-block-components-totals-item {
  padding: 0;
  margin-bottom: 10px;
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--body-text);
}

/* Subtotal opens the totals group, so it carries the space under the coupon
   panel's bottom hairline. Its siblings — fee, discount, shipping, taxes —
   stay flush; only the first row of the group needs the break. */
.dhali-checkout
  .wc-block-checkout__sidebar
  .wp-block-woocommerce-checkout-order-summary-subtotal-block {
  padding-top: 16px;
}

/*
 * The Total row. ⚠️ The size has to be set on the label and the value, not on
 * the row: WooCommerce sizes them at `1.25em` of the row, so a font-size on
 * the row alone comes out a quarter larger than asked for. Its own reset,
 * `.wc-block-checkout__sidebar .wc-block-components-totals-footer-item
 * { margin: 0; padding: 0 }`, is (0,2,0), which the three classes here clear.
 */
/*
 * ⚠️ `margin-top` here is added to the last totals row's own `margin-bottom`
 * — 10px from the rule above — so the gap between Flat rate and the Total's
 * hairline is the sum of the two, not this value. At 14px it came to 24px and
 * left the shipping row stranded halfway between its own group and the Total.
 */
.dhali-checkout
  .wc-block-checkout__sidebar
  .wc-block-components-totals-footer-item {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--wp--preset--color--border-strong);
  color: var(--wp--preset--color--ink);
}

.dhali-checkout
  .wc-block-checkout__sidebar
  .wc-block-components-totals-footer-item
  .wc-block-components-totals-item__label,
.dhali-checkout
  .wc-block-checkout__sidebar
  .wc-block-components-totals-footer-item
  .wc-block-components-totals-item__value {
  font-size: 18px;
  font-weight: 800;
}

/* ---- Order summary line items -------------------------------------------- */

/* WooCommerce insets each item's text 24px from its 48px thumbnail and pads
   12px on the right, which inside a 380px card leaves the price column too
   little room to sit on one line. */
.dhali-checkout
  .wc-block-components-order-summary
  .wc-block-components-order-summary-item__description {
  padding: 4px 0 14px 14px;
}

.dhali-checkout
  .wc-block-components-order-summary
  .wc-block-components-order-summary-item
  .wc-block-components-product-name {
  font-size: var(--wp--preset--font-size--base);
  font-weight: 700;
  line-height: 1.35;
  color: var(--wp--preset--color--ink);
}

.dhali-checkout
  .wc-block-components-order-summary
  .wc-block-components-order-summary-item
  .wc-block-components-product-metadata {
  color: var(--wp--preset--color--muted);
}

/* The row's own price, matched in size to the product name it sits opposite
   so the two read as one line rather than a label and a footnote. */
.dhali-checkout
  .wc-block-components-order-summary
  .wc-block-components-order-summary-item__total-price {
  font-size: var(--wp--preset--font-size--base);
  font-weight: 700;
  color: var(--wp--preset--color--ink);
}

/* The quantity bubble sits on the corner of the thumbnail and takes
   `background: currentColor`, which is body text. Brand, with a cream ring so
   it reads as a badge rather than a smudge on the photograph. */
.dhali-checkout
  .wc-block-components-order-summary
  .wc-block-components-order-summary-item__quantity {
  background: var(--wp--preset--color--brand);
  box-shadow: 0 0 0 2px var(--wp--preset--color--cream);
}

/*
 * ⚠️ The numeral needs an *optical* centre, not a geometric one, and this is
 * the reason a 1px padding is doing real work rather than papering over a
 * layout fault.
 *
 * WooCommerce centres the badge's contents with `align-items: center` and
 * `line-height: 1`, which centres the line box correctly — but a line box at
 * `line-height: 1` reserves room below the baseline for descenders, and a
 * digit has none. The glyph therefore sits above the middle of a box that is
 * itself perfectly centred, by roughly half the font's descent. Nudging the
 * span down by that much is the fix; changing the flex alignment is not,
 * because the alignment was never wrong.
 */
.dhali-checkout
  .wc-block-components-order-summary
  .wc-block-components-order-summary-item__quantity
  span {
  display: block;
  line-height: 1;
  padding: 1px 0.4em 0;
}

/*
 * The "Save ₹10.00" chip, brought into the palette exactly as §7 does for the
 * cart: brand text, no border, sentence case rather than WooCommerce's white
 * box with a #43454b border and shouted uppercase. White rather than the
 * cart's cream, because here the chip sits *on* the cream card.
 */
.dhali-checkout .wc-block-components-product-sale-badge {
  background-color: var(--wp--preset--color--white);
  border: 0;
  border-radius: 12px;
  padding: 3px 10px;
  color: var(--wp--preset--color--brand);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 600;
  text-transform: none;
}

/* The struck-through pre-sale figure, knocked back so the price actually
   charged reads first. */
.dhali-checkout .wc-block-components-order-summary-item__individual-prices del {
  opacity: 0.65;
}

/* ---- Coupon panel -------------------------------------------------------- */

/*
 * The same treatment §7 gives the cart's coupon field, restated rather than
 * shared: the two hang off different ancestors (`.wc-block-cart__sidebar`
 * against `.wc-block-checkout__sidebar`), and folding checkout selectors into
 * §7 would make the cart section the owner of a checkout rule. The reasoning
 * behind each value is written out once, there.
 */
/*
 * ⚠️ The coupon panel draws its own hairlines. `.wc-block-components-panel
 * .has-border` is `border-width: 1px 0` at (0,2,0) — a rule on the panel, not
 * on a `.wc-block-components-totals-wrapper`, so the wrapper reset above does
 * not reach it and the two rules above and below "Add coupons" are its.
 *
 * That makes the panel's own margins the space around those lines, which is
 * why the top one is set here and the space under the bottom one is set on
 * the subtotal block rather than as a `margin-bottom` here: each element owns
 * the gap above itself, so moving one row does not silently reflow another.
 */
.dhali-checkout .wc-block-checkout__sidebar .wc-block-components-totals-coupon {
  padding: 0;
  margin-top: 16px;
  margin-bottom: 16px;
}

.dhali-checkout .wc-block-checkout__sidebar .wc-block-components-panel__button {
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  color: var(--wp--preset--color--ink);
  padding-top: 4px;
  padding-bottom: 4px;
  margin-bottom: 0;
}

.dhali-checkout .wp-block-woocommerce-checkout-order-summary-totals-block {
  padding-bottom: 0;
}

/* `nowrap` and `min-width: 0`, or Apply drops onto its own line — WooCommerce
   sizes the field `flex: 3 1 120px` and that 120px basis is load-bearing. */
.dhali-checkout
  .wc-block-checkout__sidebar
  .wc-block-components-totals-coupon__form {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: stretch;
  margin-top: 12px;
}

.dhali-checkout
  .wc-block-checkout__sidebar
  .wc-block-components-totals-coupon__input {
  flex: 1 1 120px;
  min-width: 0;
  margin: 0;
}

.dhali-checkout
  .wc-block-checkout__sidebar
  .wc-block-components-totals-coupon__input
  input {
  border: 1px solid var(--wp--preset--color--border-strong);
  border-radius: 10px;
  background-color: var(--wp--preset--color--white);
}

/* Horizontal inset only, with `:focus` spelled out separately — at (0,4,1)
   WooCommerce's focus padding would otherwise snap the inset back the moment
   the field took focus, which is the state being looked at. */
.dhali-checkout
  .wc-block-checkout__sidebar
  .wc-block-components-totals-coupon
  .wc-block-components-totals-coupon__input
  input {
  padding-left: 14px;
}

.dhali-checkout
  .wc-block-checkout__sidebar
  .wc-block-components-totals-coupon
  .wc-block-components-totals-coupon__input
  input:focus {
  padding-left: 14px;
}

.dhali-checkout
  .wc-block-checkout__sidebar
  .wc-block-components-totals-coupon
  .wc-block-components-totals-coupon__input
  label {
  left: 14px;
}

/* ---- Errors -------------------------------------------------------------- */

/*
 * The field border has to be restated, not merely recoloured: WooCommerce
 * paints it with `.wc-block-components-text-input.has-error input` at
 * (0,2,1), which the pill rules above outrank, so without this an invalid
 * field would show a message and no outline at all. The same fault §7 fixed
 * on the cart's coupon, in the same place in the cascade.
 */
.dhali-checkout
  .wc-block-checkout__form
  .wc-block-components-text-input.has-error
  input[type="text"],
.dhali-checkout
  .wc-block-checkout__form
  .wc-block-components-text-input.has-error
  input[type="email"],
.dhali-checkout
  .wc-block-checkout__form
  .wc-block-components-text-input.has-error
  input[type="tel"],
.dhali-checkout
  .wc-block-checkout__form
  .wc-block-components-text-input.has-error
  input[type="number"] {
  border-color: var(--dhali-error);
}

.dhali-checkout .wc-block-components-validation-error,
.dhali-checkout .wc-block-components-validation-error p {
  color: var(--dhali-error);
}

/*
 * The coupon panel's own error state, replicated from §7 so a rejected code
 * looks the same in the cart and at the checkout. The reasoning is written
 * out once, there; in short:
 *
 *   - the border is restated rather than recoloured, because the 10px pill
 *     rule above already outranks WooCommerce's `.has-error input` at (0,2,1);
 *   - `:hover` and `:focus` are spelled out, or the error outline disappears
 *     the moment the customer clicks back into the field to correct it;
 *   - the message's `<p>` is coloured as well as its container, since the
 *     paragraph picks a colour out of the theme's cascade first and rendered
 *     near-black — reading as ordinary copy rather than as a fault;
 *   - the icon is aligned to the first line instead of centred, because Woo's
 *     `margin: -.4735em 0` centres a 1.5em glyph against *one* line and a
 *     coupon error is usually two.
 */
.dhali-checkout
  .wc-block-checkout__sidebar
  .wc-block-components-totals-coupon
  .wc-block-components-totals-coupon__input.has-error
  input,
.dhali-checkout
  .wc-block-checkout__sidebar
  .wc-block-components-totals-coupon
  .wc-block-components-totals-coupon__input.has-error
  input:hover,
.dhali-checkout
  .wc-block-checkout__sidebar
  .wc-block-components-totals-coupon
  .wc-block-components-totals-coupon__input.has-error
  input:focus {
  border-color: var(--dhali-error);
  outline-color: var(--dhali-error);
  box-shadow: none;
}

.dhali-checkout
  .wc-block-checkout__sidebar
  .wc-block-components-totals-coupon
  .wc-block-components-totals-coupon__input.has-error
  label {
  color: var(--dhali-error);
}

.dhali-checkout
  .wc-block-checkout__sidebar
  .wc-block-components-totals-coupon
  .wc-block-components-validation-error,
.dhali-checkout
  .wc-block-checkout__sidebar
  .wc-block-components-totals-coupon
  .wc-block-components-validation-error
  > p {
  color: var(--dhali-error);
}

.dhali-checkout
  .wc-block-checkout__sidebar
  .wc-block-components-totals-coupon
  .wc-block-components-validation-error {
  padding: 10px 0 0;
  font-size: var(--wp--preset--font-size--xs);
}

.dhali-checkout
  .wc-block-checkout__sidebar
  .wc-block-components-totals-coupon
  .wc-block-components-validation-error
  > p {
  align-items: flex-start;
  gap: 6px;
  line-height: 1.45;
}

.dhali-checkout
  .wc-block-checkout__sidebar
  .wc-block-components-totals-coupon
  .wc-block-components-validation-error
  svg {
  flex: 0 0 auto;
  width: 1.1em;
  height: 1.1em;
  margin: 0.16em 0 0;
}

/* ---- Narrow -------------------------------------------------------------- */

/*
 * Below WooCommerce's own breakpoint the two columns stack and the order
 * summary becomes a collapsible panel above the form. The card keeps its
 * cream fill but gives back some of the 26px inset, which is a lot of a 375px
 * screen. Written as a container query, at WooCommerce's boundary, for the
 * reason given at the top of this section.
 */
@container (max-width: 699px) {
  /*
   * 🚨 **There are two order summaries in the narrow layout, and only one of
   * them is the one on screen.** WooCommerce renders the order-summary block
   * twice: the full card in `.wc-block-checkout__sidebar`, and a collapsed
   * "Order summary · ₹total ⌄" panel that is the same block carrying
   * `.checkout-order-summary-block-fill-wrapper`. Their visibility is swapped
   * at 700px — the fill wrapper is `display: none` above it, the sidebar card
   * is what you see below it — so a spacing rule written against the wrong
   * one changes nothing and looks like the rule failed. Both are set here.
   *
   * The gap being closed is the one under the H1: WooCommerce adds
   * `padding-top: 24px` to the checkout block and 36px under the collapsed
   * panel, on top of the title's own bottom margin, which on a phone stacked
   * up to most of a thumb's height of empty page between "Checkout" and the
   * first thing you can act on. The checkout block's own top padding cannot
   * be removed here — a container query can style a container's descendants
   * but never the container itself — so that half is in §13.
   */
  .dhali-checkout .wc-block-checkout__sidebar {
    margin-bottom: 16px;
    padding: 16px;
  }


  /*
   * 🚨 The collapsed panel is a heading and nothing else, so the 18px this
   * section puts *under* the heading is 18px of empty cream with no content
   * to separate it from — which is what the band of dead space under
   * "Order summary · ₹total ⌄" was. The margin is not wrong, it is simply
   * premature: it belongs to the open state, and is given back there.
   *
   * Both rules are (0,3,0)/(0,4,0) against the base rule's (0,3,0) and sit
   * after it in the file, per the source-order guardrail — a container query
   * contributes no specificity of its own, exactly as a media query does not.
   */
  .dhali-checkout
    .wp-block-woocommerce-checkout-order-summary-block
    .wc-block-components-checkout-order-summary__title {
    margin-bottom: 0;
    border-top: none;
    border-bottom: none;
  }

  .dhali-checkout
    .wp-block-woocommerce-checkout-order-summary-block
    .wc-block-components-checkout-order-summary__title.is-open {
    margin-bottom: 18px;
  }

  .dhali-checkout .dhali-checkout__trust {
    gap: 8px 20px;
  }
}

/* ---------------------------------------------------------------------------
   9. Product page — gallery, variation chips, qty stepper

   Every selector here is real WooCommerce 11 markup. The block-native path is
   `woocommerce/add-to-cart-with-options`, whose variable-product template part
   renders each attribute as `woocommerce/product-filter-chips` — the mockup's
   Flavor / Pack Size pills, with no plugin and no mirror script. That is why
   plan item 7.2 (Path B pill JS) is superseded rather than pending.

   The earlier `.dhali-variation-pills` / `.dhali-qty-stepper` scaffolding that
   stood here was speculative: nothing ever emitted those class names. Removed
   rather than kept, since unlike the shop filter rules there is no decision
   being preserved — the markup simply belongs to WooCommerce.
--------------------------------------------------------------------------- */

/* Gallery. Flexslider builds `.flex-viewport` and `ol.flex-control-thumbs` at
   runtime, so the radius is declared on both the slider viewport and the raw
   wrapper — the wrapper is what shows in the moment before the script runs,
   and with it the un-clipped square corners the mockup does not have.

   No aspect-ratio is forced on the main image. The packshots are square or
   portrait (see plan 8.6) and the mockup's 3/2 frame centre-crops them badly;
   a tall photo in a tall column is the lesser fault. */
.dhali-product__media .flex-viewport,
.dhali-product__media .woocommerce-product-gallery__wrapper {
  border-radius: 16px;
  overflow: hidden;
}

/* No rule here for the main image itself. WooCommerce already normalises it —
   `.woocommerce div.product div.images img { display:block; width:100%;
   height:auto }` at (0,3,2), and both of those ancestors are present on this
   template (Woo wraps the product in `div.woocommerce.product`). A copy of it
   scoped to `.dhali-product__media` would be (0,2,3): identical values, never
   applied. Removed rather than kept as a safety net that cannot fire. */

/* WooCommerce floats the thumbnails at width:25% with no gap, then uses
   :nth-child(4n+1){clear:left} to break the rows. Grid states the 4-up rhythm
   directly and makes both the float and the clear inert on the items, so the
   mockup's 10px gutters cannot be eaten by the float arithmetic.

   🚨 The long selector prefix is not decoration, and must not be shortened.
   These rules live in `woocommerce.css`, which is minified legacy with no
   source we control, and every one of them is written from the body class
   down:

     .woocommerce div.product div.images .flex-control-thumbs      (0,3,2)
     .woocommerce div.product div.images .flex-control-thumbs li   (0,4,3)
     … .flex-control-thumbs li img                                 (0,4,4)
     … .flex-control-thumbs li img.flex-active, … li img:hover     (0,5,4)

   The first version of this section was scoped to `.dhali-product__media`
   alone — (0,2,1) for the item — and shipped broken: the grid took hold,
   because Woo declares no `display`, while `width: 25%` and `float: left`
   survived underneath it. The result was four thumbnails each a quarter of
   their own track. `margin-top` and the full-strength `opacity` were being
   dropped the same way, silently.

   Five classes and one element clears the tallest of them at (0,6,3) without
   `!important`, using only classes we own plus the gallery's own — no
   dependency on Woo's `.woocommerce` / `div.product` ancestors, which belong
   to them and can move. Any new rule for this strip needs the same prefix,
   the responsive override in §13 included: a media query adds no specificity,
   so a shorter selector there would lose to the base rule here. */
.dhali-product
  .dhali-product__media
  .woocommerce-product-gallery.images
  ol.flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  overflow: visible;
}

.dhali-product
  .dhali-product__media
  .woocommerce-product-gallery.images
  ol.flex-control-thumbs
  li {
  width: auto;
  float: none;
}

.dhali-product
  .dhali-product__media
  .woocommerce-product-gallery.images
  ol.flex-control-thumbs
  li
  img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  opacity: 1;
}

/* Woo marks the current slide by dimming every other thumbnail to .5, which
   is the rule the full-strength `opacity` above has to beat. The mockup shows
   them all at full strength, so the current one takes a brand ring instead —
   inset, so it cannot change the grid's track sizes. */
.dhali-product
  .dhali-product__media
  .woocommerce-product-gallery.images
  ol.flex-control-thumbs
  li
  img.flex-active {
  outline: 1.5px solid var(--wp--preset--color--brand);
  outline-offset: -1.5px;
}

/* Price. The range and the single price are one <span>; a sale price arrives
   as <del> + <ins>. Full sale-price presentation is 7.3 — these two rules only
   keep the on-sale case from rendering underlined at full weight. */
.dhali-product__summary .wp-block-woocommerce-product-price del {
  color: var(--wp--preset--color--muted);
  font-weight: 400;
}

.dhali-product__summary .wp-block-woocommerce-product-price ins {
  text-decoration: none;
}

/* Attribute label — "Flavor", "Pack Size". */
.dhali-product
  .wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute-name {
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 700;
  color: var(--wp--preset--color--ink);
}

/* Variation chips. WooCommerce's own rules are written at (0,1,0) through
   :where(), so scoping to .dhali-product is enough to win without !important.
   The selected state needs the attribute selector to outrank Woo's own
   [aria-checked=true] rule, which is (0,2,0). */
.dhali-product .wc-block-product-filter-chips__items {
  gap: 10px;
}

.dhali-product .wc-block-product-filter-chips__item {
  padding: 9px 20px;
  border: 1.5px solid var(--wp--preset--color--border-strong);
  border-radius: 22px;
  background: transparent;
  color: var(--wp--preset--color--ink);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
}

.dhali-product .wc-block-product-filter-chips__item[aria-checked="true"] {
  border-color: var(--wp--preset--color--ink);
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--white);
}

/* Woo's default for a combination that has no purchasable variation is to
   disable rather than hide it, and it strikes the label through. Keep both —
   a struck-out "400g" says more than a missing one. */
.dhali-product .wc-block-product-filter-chips__item:disabled {
  opacity: 0.45;
}

/* Quantity stepper. The block draws its box twice: a border on the container
   and a second one through ::after at .3 opacity. One of them has to go, or
   the 1.5px pill reads as a smudge. */
.dhali-product .wc-block-components-quantity-selector {
  width: auto;
  border: 1.5px solid var(--wp--preset--color--border-strong);
  border-radius: 24px;
}

.dhali-product .wc-block-components-quantity-selector::after {
  display: none;
}

/* Woo styles this button through `.wc-block-components-quantity-selector
   .wc-block-components-quantity-selector__button`, which is (0,2,0) — a tie
   with the obvious `.dhali-product .…__button`, leaving the outcome to
   stylesheet order. Naming the container settles it at (0,3,0). */
.dhali-product
  .wc-block-components-quantity-selector
  .wc-block-components-quantity-selector__button {
  min-width: 36px;
  opacity: 1;
  font-size: var(--wp--preset--font-size--md);
  color: var(--wp--preset--color--ink);
}

.dhali-product .wc-block-components-quantity-selector input[type="number"].qty {
  font-size: var(--wp--preset--font-size--base);
  font-weight: 600;
  color: var(--wp--preset--color--ink);
}

/* The stepper and "Add to Cart" share one flex group inside the template part.
   :has() picks out that group specifically — the attribute rows above are also
   flex groups, and they must keep their own vertical rhythm. */
.dhali-product
  .wc-block-add-to-cart-with-options
  .wp-block-group:has(> .wc-block-add-to-cart-with-options__quantity-selector) {
  gap: 16px;
  align-items: stretch;
}

.dhali-product
  .wc-block-add-to-cart-with-options
  .wp-block-woocommerce-product-button {
  flex: 1 1 auto;
}

.dhali-product .wc-block-components-product-button__button {
  width: 100%;
}

/* Stock line, and the description a variation swaps in. Neither is drawn in
   the mockup; both are kept, at the secondary weight, because losing "only 3
   left" to a drawing that never had stock is a real loss. */
.dhali-product .wp-block-woocommerce-product-stock-indicator,
.dhali-product
  .wp-block-woocommerce-add-to-cart-with-options-variation-description {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--muted);
}

/* Meta line — SKU and category, above a hairline. Both come from
   woocommerce/product-meta, which lays its children out in a flex row; the
   separator is the mockup's middot rather than a gap alone. */
.dhali-product__meta > * + *::before {
  content: "·";
  margin-right: 8px;
  color: var(--wp--preset--color--border-strong);
}

.dhali-product__meta a {
  color: var(--wp--preset--color--muted);
  text-decoration: underline;
}

/* Tabs. Kept below the fold although the mockup drew none: dropping them
   takes the full description and the reviews with them. Restyled to the
   palette so they read as part of the page rather than as WooCommerce. */
.dhali-product .wp-block-woocommerce-product-details ul.tabs.wc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dhali-space-30);
  margin: 0;
  padding: 0 0 var(--dhali-space-20);
  border-bottom: 1px solid var(--wp--preset--color--border);
  list-style: none;
}

.dhali-product .wp-block-woocommerce-product-details ul.tabs.wc-tabs li {
  margin: 0;
  padding: 0;
}

.dhali-product .wp-block-woocommerce-product-details ul.tabs.wc-tabs li a {
  display: inline-block;
  padding: 0;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  color: var(--wp--preset--color--muted);
  text-decoration: none;
}

.dhali-product
  .wp-block-woocommerce-product-details
  ul.tabs.wc-tabs
  li.active
  a {
  color: var(--wp--preset--color--ink);
}

.dhali-product .wp-block-woocommerce-product-details .woocommerce-Tabs-panel {
  padding-top: var(--dhali-space-30);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--body-text);
}

.dhali-product
  .wp-block-woocommerce-product-details
  .woocommerce-Tabs-panel
  > h2:first-child {
  display: none;
}

/* ---------------------------------------------------------------------------
   10. FAQ — core/details accordion

   The row box (border, 12px radius, 18/20 padding) is declared once in
   theme.json under styles.blocks.core/details, and the gap between rows is the
   wrapper's blockGap. Only the marker and the summary layout are left here —
   core has no block attribute for either.
--------------------------------------------------------------------------- */

/* Core hands <details> a flow layout at render time, so its children fall under
   the root block gap and the answer sits 40px below the question instead of the
   mockup's 18px. Element + class (0,1,1) so this outranks the generated
   `:root :where(.is-layout-flow) > *` rule (0,1,0) on specificity rather than on
   stylesheet order. Only non-first children are targeted, leaving core's own
   `> :first-child { margin-block-start: 0 }` on the summary alone. */
details.wp-block-details > * + * {
  margin-block-start: 18px;
}

.dhali-faq summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--wp--preset--color--ink);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dhali-faq summary::-webkit-details-marker {
  display: none;
}

.dhali-faq summary::after {
  content: "+";
  font-size: var(--wp--preset--font-size--lg);
  color: var(--wp--preset--color--brand);
  transition: transform 0.2s ease;
}

.dhali-faq details[open] summary::after {
  transform: rotate(45deg);
}

/* ---------------------------------------------------------------------------
   11. Account dashboard

   My Account is the one shop screen WooCommerce 11 does not ship as a block
   template: BlockTemplatesRegistry registers Catalog, Cart, Checkout, Order
   Confirmation and the product templates, and nothing for the account. The
   page still runs the [woocommerce_my_account] shortcode, which prints
   `<div class="woocommerce">` wrapping `nav.woocommerce-MyAccount-navigation`
   and `div.woocommerce-MyAccount-content` from the classic PHP templates.

   That does NOT make it a place for template overrides — the theme ships none,
   and 5.7 in the plan records the round trip that established why. Almost every
   selector below is therefore WooCommerce's own, unmodified. The only markup
   this theme authors on these screens is the Recent Orders table, added through
   the `woocommerce_account_dashboard` action by
   includes/WooCommerce/AccountDashboard.php — and even that borrows Woo's class
   names on purpose, so the Orders endpoint, which renders the untouched
   upstream orders.php, is styled by these same rules and the two screens cannot
   drift apart.

   ⚠️ Woo's legacy stylesheets are still enqueued (nothing filters
   `woocommerce_enqueue_styles`), so these rules are written to outrank them
   rather than to sit beside them:
     · woocommerce-layout.css floats the two columns —
       `.woocommerce-account .woocommerce-MyAccount-navigation` at (0,2,0),
       width 30% / 68%. Float is inert on a grid item but the widths are not,
       so both need resetting from a selector that wins. `.dhali-account` plus
       the wrapper plus the component is (0,3,0) and does.
     · woocommerce.css draws the table at `.woocommerce table.shop_table`
       (0,2,1) and its cells at (0,2,2). Ours carry the same shape at (0,3,2).
   Per the guardrail in AGENTS.md the prefix is measured from the whole vendor
   rule, not from the fragment a grep prints.
--------------------------------------------------------------------------- */

/*
 * The two-column split. `:has()` gates it on the navigation actually being
 * present: logged out, the same `.woocommerce` wrapper holds nothing but the
 * login form, and a 220px first track would strand it in a quarter of the page.
 */
.dhali-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);

  /*
   * Column gap only. The row gap has to stay 0 because of the explicit row
   * placement below: the panels sit in row 2, and row 1 — empty whenever there
   * is nothing to put in it — must cost nothing.
   */
  column-gap: var(--dhali-space-40);
  row-gap: 0;
  align-items: start;
  max-width: 100%;
}

/*
 * 🚨 Both panels are placed explicitly. Auto-placement is not safe here,
 * because `.woocommerce` does NOT reliably hold exactly two children.
 *
 * This shipped broken once (2026-08-30): invisible children ahead of the
 * navigation took row 1 / column 1, which pushed the nav to row 1 / column 2
 * and the content down to row 2 / column 1. On screen that read as the menu
 * floating in the middle of the page with the orders table stranded underneath
 * it in a 220px column — it looks like the grid failed rather than like it
 * placed four items instead of two.
 *
 * ✅ The culprit is named below and killed at source: WooCommerce clearfixes
 * `.woocommerce` itself on the account page, and **generated content becomes a
 * grid item**. `::before` took row 1 / column 1 and `::after` took row 2 /
 * column 2, which is exactly the two-cell offset that was observed.
 *
 * The explicit placement is kept as well, because the clearfix is not the only
 * way a stray child can appear here — `woocommerce_before_account_navigation`
 * and the notices wrapper are both open to plugins. Anything that is neither
 * panel spans the full width in its own row, and the two panels are pinned to
 * row 2 whatever precedes them.
 */

/*
 * `.woocommerce-account .woocommerce::before/::after` — (0,2,0), a clearfix for
 * the float layout this grid replaces. Beaten at (0,3,0) by reusing the same
 * `:has()` the grid is gated on: `:has()` contributes the specificity of its
 * most specific argument, so the compound is our class plus the component's own
 * two, with none of the vendor's ancestors borrowed.
 */
.dhali-account .woocommerce:has(> .woocommerce-MyAccount-navigation)::before,
.dhali-account .woocommerce:has(> .woocommerce-MyAccount-navigation)::after {
  display: none;
}
.dhali-account .woocommerce > * {
  grid-column: 1 / -1;
}

.dhali-account .woocommerce > .woocommerce-MyAccount-navigation {
  grid-column: 1;
  grid-row: 2;
  width: auto;
  float: none;
}

/*
 * `min-width: 0` matters as much as the column does. A grid item's automatic
 * minimum size is its min-content width, and the orders table's min-content is
 * far wider than the track — without this the table widens its own column and
 * squeezes the navigation. Paired with `minmax(0, 1fr)` above, which is the
 * same guard on the track itself.
 */
.dhali-account .woocommerce > .woocommerce-MyAccount-content {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  width: auto;
  float: none;
}

/* ---- Sidebar ------------------------------------------------------------- */

/*
 * ⚠️ These carry `.woocommerce` in the prefix purely for specificity — (0,3,x)
 * rather than (0,2,x). The list rules at the shorter prefix reached the page
 * (the current item's cream pill is drawn by them) but the `li` margin reset
 * did not hold, and the menu rendered with ~34px of dead space between items
 * against the 2px gap set here.
 *
 * Whatever wins that cascade is NOT in `style.min.css`, WooCommerce's three
 * stylesheets, or elsewhere in this file — all four were searched. It is most
 * likely a WordPress global-styles or block-library list rule, which cannot be
 * read from this checkout because core is not vendored here. If the spacing
 * ever returns, read the computed style off the live `<li>` and name the rule
 * in this comment rather than raising the prefix again on spec.
 */
.dhali-account .woocommerce .woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dhali-account .woocommerce .woocommerce-MyAccount-navigation li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * `line-height` is stated rather than inherited: the link's height is padding
 * plus one line box, so leaving the line box to the body's ratio makes the
 * pill's height drift with a typography change somewhere else entirely.
 */
.dhali-account .woocommerce .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 12px 16px;
  border-radius: 10px;
  color: var(--wp--preset--color--body-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
}

.dhali-account .woocommerce .woocommerce-MyAccount-navigation li a:hover,
.dhali-account .woocommerce .woocommerce-MyAccount-navigation li a:focus-visible {
  background-color: var(--wp--preset--color--cool);
  color: var(--wp--preset--color--ink);
  text-decoration: none;
}

/*
 * The current endpoint. Woo puts `is-active` on the <li>, not the <a>, and adds
 * `woocommerce-MyAccount-navigation-link--{endpoint}` beside it; only the state
 * class is selected on, so renaming an endpoint in Woo's settings — which is
 * how Downloads and Payment methods were removed from this menu — cannot break
 * the highlight.
 *
 * `text-decoration` is restated on every state above and here because the theme
 * underlines links by default and the current item rendered underlined inside
 * its own pill.
 */
.dhali-account .woocommerce .woocommerce-MyAccount-navigation li.is-active a,
.dhali-account .woocommerce .woocommerce-MyAccount-navigation li.is-active a:hover {
  background-color: var(--wp--preset--color--cream);
  color: var(--wp--preset--color--brand);
  font-weight: 700;
  text-decoration: none;
}

/* ---- Dashboard copy ------------------------------------------------------ */

.dhali-account .woocommerce-MyAccount-content > :first-child {
  margin-top: 0;
}

/*
 * The welcome copy is WooCommerce's, unmodified — two paragraphs, the customer
 * name in a <strong>. Styling it rather than replacing it is the whole reason
 * this theme ships no `woocommerce/myaccount/` override: the only thing an
 * override bought was rewording these two paragraphs into the mockup's one
 * line, and that is not worth a private copy of a vendor template to re-diff on
 * every WooCommerce release. See includes/WooCommerce/AccountDashboard.php.
 *
 * Every <p> directly inside the content column, not just the dashboard's: the
 * Addresses and Account details endpoints open with one too, and they should
 * read the same.
 */
.dhali-account .woocommerce-MyAccount-content > p {
  margin: 0 0 16px;
  font-size: 15px;
  color: var(--wp--preset--color--muted);
}

.dhali-account .woocommerce-MyAccount-content > p strong {
  color: var(--wp--preset--color--ink);
  font-weight: 700;
}

/*
 * "Recent Orders". The gap above it is the heading's own margin-top rather than
 * a bottom margin on the paragraph before it — the paragraph is WooCommerce's
 * and also ends the Addresses and Account details screens, where no heading
 * follows and the wider gap would just be trailing space.
 */
.dhali-account .dhali-account__subheading {
  margin: 26px 0 14px;
  font-size: 16px;
  font-weight: 800;
  color: var(--wp--preset--color--ink);
}

.dhali-account .dhali-account__all-orders,
.dhali-account .dhali-account__no-orders {
  margin: 16px 0 0;
  font-size: 13.5px;
}

/* ---- Orders table -------------------------------------------------------- */

/*
 * Woo already sets `border-collapse: separate; border-spacing: 0` here, which
 * is the only reason a table can carry a radius at all — under `collapse` the
 * corner is drawn and then squared off again by the cell backgrounds. So only
 * the radius, the border colour and Woo's `margin: 0 -1px 24px 0` need
 * replacing.
 */
.dhali-account .woocommerce table.woocommerce-orders-table {
  /* Woo sets `width: 100%` on `.shop_table`, and this theme has no global
     border-box reset — so without this the 1px border is added outside the
     100% and the table bleeds 2px past its column. See §11b for the same trap
     at a much more visible scale. */
  box-sizing: border-box;
  margin: 0;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px;
}

/*
 * A table clips nothing — `overflow: hidden` does not apply to one — so the
 * cream header fill and the last row have to be mitred cell by cell or they
 * square off the corners the border just rounded. 11px, not 12: the inner edge
 * of a 1px border traces a radius one pixel smaller than the outer edge.
 */
.dhali-account .woocommerce table.woocommerce-orders-table thead th:first-child {
  border-top-left-radius: 11px;
}

.dhali-account .woocommerce table.woocommerce-orders-table thead th:last-child {
  border-top-right-radius: 11px;
}

.dhali-account
  .woocommerce
  table.woocommerce-orders-table
  tbody
  tr:last-child
  > :first-child {
  border-bottom-left-radius: 11px;
}

.dhali-account
  .woocommerce
  table.woocommerce-orders-table
  tbody
  tr:last-child
  > :last-child {
  border-bottom-right-radius: 11px;
}

.dhali-account .woocommerce table.woocommerce-orders-table thead th {
  padding: 12px 18px;
  border: 0;
  background-color: var(--wp--preset--color--cream);
  font-size: 12px;
  font-weight: 700;
  color: var(--wp--preset--color--muted);
  text-align: left;
}

/*
 * The body cells. Woo's own rule puts the divider on `td` alone — but the order
 * number is a `<th scope="row">`, so it would be the one cell in each row with
 * no rule above it. Restated for both.
 */
.dhali-account .woocommerce table.woocommerce-orders-table tbody th,
.dhali-account .woocommerce table.woocommerce-orders-table tbody td {
  padding: 14px 18px;
  border-top: 1px solid var(--wp--preset--color--border);
  font-size: 13.5px;
  font-weight: 400;
  color: var(--wp--preset--color--body-text);
  vertical-align: middle;
  text-align: left;
}

.dhali-account
  .woocommerce
  table.woocommerce-orders-table
  .woocommerce-orders-table__cell-order-number
  a {
  color: var(--wp--preset--color--ink);
  font-weight: 500;
  text-decoration: none;
}

.dhali-account
  .woocommerce
  table.woocommerce-orders-table
  .woocommerce-orders-table__cell-order-number
  a:hover {
  color: var(--wp--preset--color--brand);
}

.dhali-account
  .woocommerce
  table.woocommerce-orders-table
  .woocommerce-orders-table__cell-order-actions {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

/*
 * "View" is a plain link in the design, but Woo's orders.php hard-codes
 * `class="woocommerce-button button view"` on it and theme.json paints every
 * `.button` as a filled brand pill. Three pills stacked down a summary table
 * become the loudest thing on the screen. The button styling is unwound here
 * rather than the class being stripped: orders.php is otherwise untouched, and
 * overriding a whole upstream template to change one attribute would be a
 * standing maintenance cost for a cosmetic fix.
 */
.dhali-account
  .woocommerce
  table.woocommerce-orders-table
  .woocommerce-orders-table__cell-order-actions
  .button {
  display: inline;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--wp--preset--color--brand);
  font-size: 12.5px;
  font-weight: 500;
  line-height: inherit;
}

.dhali-account
  .woocommerce
  table.woocommerce-orders-table
  .woocommerce-orders-table__cell-order-actions
  .button:hover {
  background: none;
  color: var(--wp--preset--color--ink);
  text-decoration: underline;
}

/* ---- Order status -------------------------------------------------------- */

/*
 * Coloured off the row class Woo stamps from the order status
 * (`woocommerce-orders-table__row--status-{status}`), which is why this reaches
 * the Orders endpoint's untouched upstream table as well as the dashboard's.
 *
 * The design draws two states — green "Delivered" and amber "Shipped". Mapped
 * onto real WooCommerce statuses: completed takes the green, the in-flight
 * three take amber, and the three ways an order ends without being fulfilled
 * take the form-error red rather than staying at body text, where a cancelled
 * order would read as an ordinary one.
 */
.dhali-account .woocommerce-orders-table__cell-order-status {
  font-weight: 600;
}

.dhali-account
  .woocommerce-orders-table__row--status-completed
  .woocommerce-orders-table__cell-order-status {
  color: var(--wp--preset--color--success);
}

.dhali-account
  .woocommerce-orders-table__row--status-processing
  .woocommerce-orders-table__cell-order-status,
.dhali-account
  .woocommerce-orders-table__row--status-on-hold
  .woocommerce-orders-table__cell-order-status,
.dhali-account
  .woocommerce-orders-table__row--status-pending
  .woocommerce-orders-table__cell-order-status {
  color: var(--wp--preset--color--warning);
}

.dhali-account
  .woocommerce-orders-table__row--status-cancelled
  .woocommerce-orders-table__cell-order-status,
.dhali-account
  .woocommerce-orders-table__row--status-failed
  .woocommerce-orders-table__cell-order-status,
.dhali-account
  .woocommerce-orders-table__row--status-refunded
  .woocommerce-orders-table__cell-order-status {
  color: var(--dhali-error);
}

/* ---- Account forms ------------------------------------------------------- */

/*
 * Account details and Addresses, styled to §3e — the same border, radius,
 * padding, text size and brand focus ring the contact, wholesale and checkout
 * forms use. Four forms on the site, one look.
 *
 * One block covers both screens because both are the same primitives:
 * `form-edit-account.php` writes its rows by hand and `form-edit-address.php`
 * goes through `woocommerce_form_field()`, but each row comes out as
 * `<p class="form-row …">` wrapping a `<label>` and an `.input-text`. The only
 * structural difference is that the address fields sit inside a
 * `.woocommerce-address-fields__field-wrapper` rather than directly in the
 * <form>, which is why the grid below names both containers.
 *
 * 🚨 Specificity, measured from the whole vendor rule as the guardrail
 * requires. WooCommerce writes these from the body class down:
 *
 *   .woocommerce form .form-row                                     (0,2,1)
 *   .woocommerce form .form-row label                               (0,2,2)
 *   .woocommerce form .form-row .input-text                         (0,3,1)
 *   .woocommerce form .form-row .input-text:focus                   (0,4,1)
 *   .woocommerce form .form-row-first  (+ .woocommerce-page variant)(0,2,1)
 *
 * Prefixing with `.dhali-account .woocommerce` lifts ours one class above each.
 */

/*
 * First name / Last name go two-up, everything else spans. Woo does this with
 * `float: left/right; width: 47%` in woocommerce-layout.css plus a
 * `<div class="clear">` after the pair — a float pair cannot share a baseline
 * with a grid, so the floats are dropped rather than adjusted.
 *
 * ⚠️ Placed explicitly, for the reason the two-column page grid above documents
 * at length: `woocommerce_edit_account_form_fields` and
 * `woocommerce_edit_account_form` both let a plugin inject rows into this form,
 * so the child list is not ours to predict. Anything unrecognised spans the
 * full width and only the known pair is pinned.
 */
.dhali-account .woocommerce form.edit-account,
.dhali-account .woocommerce .woocommerce-address-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--dhali-space-30);
}

.dhali-account .woocommerce form.edit-account > *,
.dhali-account .woocommerce .woocommerce-address-fields__field-wrapper > * {
  grid-column: 1 / -1;
  min-width: 0;
}

.dhali-account .woocommerce form .form-row-first {
  grid-column: 1;
  float: none;
  width: auto;
}

.dhali-account .woocommerce form .form-row-last {
  grid-column: 2;
  float: none;
  width: auto;
}

/* The float clearer has no job once the floats are gone, and as a grid item it
   would occupy a row of its own. */
.dhali-account .woocommerce form .clear {
  display: none;
}

/* ---- Rows, labels, hints ------------------------------------------------- */

/*
 * Woo's own is `padding: 3px; margin: 0 0 6px`, with the label and control as
 * ordinary inline flow. The 6px column gap and the 14px between one row and the
 * next are §3e's, so the account form breathes like the wholesale form.
 */
.dhali-account .woocommerce form .form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 14px 0 0;
  padding: 0;
}

/*
 * 🚨 Same trap, third container: `.woocommerce form .form-row::after/::before`
 * (0,2,1) in woocommerce-layout.css is another clearfix, and this row is now a
 * flex column — so the two empty boxes become flex items above the label and
 * below the control, each collecting the 6px gap. Twelve stray pixels in every
 * field, on both account forms. Beaten at (0,3,1).
 */
.dhali-account .woocommerce form .form-row::before,
.dhali-account .woocommerce form .form-row::after {
  display: none;
}

/*
 * `line-height` is restated because Woo sets `line-height: 2` on this label —
 * a 28px line box around a 14px label, which is where most of the vertical
 * slack in the unstyled form came from.
 */
.dhali-account .woocommerce form .form-row label {
  padding: 0;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 700;
  line-height: 1.4;
  color: var(--wp--preset--color--ink);
}

/*
 * The required marker, brand rather than Woo's `--wc-red`, matching
 * `.dhali-field__required` on the other two forms. `visibility` is restated
 * because Woo's own rule hides it and relies on a later rule to bring it back.
 */
.dhali-account .woocommerce form .form-row .required {
  color: var(--wp--preset--color--brand);
  visibility: visible;
}

/*
 * "This will be how your name will be displayed…". Woo marks it up as an <em>,
 * so it arrives italic at body size; it is a hint, and reads as one at the
 * small size in the muted tone.
 */
.dhali-account .woocommerce form .form-row em {
  font-size: var(--wp--preset--font-size--xs);
  font-style: normal;
  color: var(--wp--preset--color--muted);
}

/* ---- Controls ------------------------------------------------------------ */

/*
 * `box-sizing` is set per control rather than by a global reset, for the reason
 * §4b gives: nothing in this theme or in style.min.css establishes border-box,
 * and a blanket `*` reset would reflow legacy post_content authored against
 * content-box.
 */
.dhali-account .woocommerce form .form-row .input-text,
.dhali-account .woocommerce form .form-row select,
.dhali-account .woocommerce form .form-row textarea {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  border: 1px solid var(--wp--preset--color--border-strong);
  border-radius: 10px;
  padding: 12px 14px;
  background-color: var(--wp--preset--color--white);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1.4;
  color: var(--wp--preset--color--body-text);
}

/*
 * Focus, matched to §3e: a 2px brand outline one pixel off the box, border left
 * alone. Woo's own focus rule is `border-color: currentColor`, which paints the
 * ring in whatever the field happens to inherit — the same class of bug §8
 * documents for the checkout's selected states.
 */
.dhali-account .woocommerce form .form-row .input-text:focus,
.dhali-account .woocommerce form .form-row select:focus,
.dhali-account .woocommerce form .form-row textarea:focus {
  border-color: var(--wp--preset--color--border-strong);
  outline: 2px solid var(--wp--preset--color--brand);
  outline-offset: 1px;
}

/* Woo's invalid/valid states repaint the border in `--wc-red` / `--wc-green`,
   two cool tones on a warm palette. Rewarmed to the same pair §4b uses. */
.dhali-account .woocommerce form .form-row.woocommerce-invalid input.input-text,
.dhali-account .woocommerce form .form-row.woocommerce-invalid select {
  border-color: var(--dhali-error);
}

.dhali-account
  .woocommerce
  form
  .form-row.woocommerce-validated
  input.input-text,
.dhali-account .woocommerce form .form-row.woocommerce-validated select {
  border-color: var(--wp--preset--color--success);
}

/* ---- Password change fieldset -------------------------------------------- */

/*
 * WooCommerce styles no fieldset at all, so this arrives as the browser's
 * default: a 2px inset ridge with the legend notched into it. Redrawn as the
 * same hairline card the order summary and the orders table use.
 *
 * `min-width: 0` because a fieldset's default `min-inline-size: min-content`
 * ignores the grid track it sits in and can widen the whole form.
 */
.dhali-account .woocommerce form fieldset {
  min-width: 0;
  margin: 24px 0 0;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px;
  padding: 4px 20px 20px;
}

.dhali-account .woocommerce form fieldset legend {
  padding: 0 8px;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 800;
  color: var(--wp--preset--color--ink);
}

/*
 * The strength meter appears the moment a new password is typed. Woo centres it
 * and sizes it at `1em`; left-aligned at the hint size sits it under the field
 * it describes. Its four state colours are left alone — they are semantic, and
 * the palette has no green/amber/red trio that reads as a strength scale.
 */
.dhali-account .woocommerce form .woocommerce-password-strength {
  margin-top: 8px;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: var(--wp--preset--font-size--xs);
  text-align: left;
}

/* ---- Submit -------------------------------------------------------------- */

/*
 * The heading the Edit Billing / Edit Shipping form opens with. Sized to the
 * dashboard's "Recent Orders" subheading rather than left at the theme's <h2>,
 * which is a page-level size and dwarfed the form under it.
 */
.dhali-account .woocommerce form > h2 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--wp--preset--color--ink);
}

/*
 * The button itself is already the brand pill — it carries `.button`, which
 * theme.json paints. Only the row it sits in needs separating from the field
 * above it. `:not(.form-row)` excludes the fields, which are <p> too.
 *
 * ⚠️ Descendant, not child. Account details puts the submit at `form > p`, but
 * the address form nests it one level further, inside
 * `.woocommerce-address-fields` — a child combinator styles one form and
 * silently misses the other.
 */
.dhali-account .woocommerce form p:not(.form-row) {
  margin: 24px 0 0;
}

/* ---- Addresses ----------------------------------------------------------- */

/*
 * The Addresses landing screen — `my-address.php`, the one that lists Billing
 * and Shipping side by side. WooCommerce ships **no** styling for it beyond a
 * float pair: no rule anywhere for `.woocommerce-Address`,
 * `.woocommerce-Address-title` or the `.edit` link. What renders is therefore
 * the browser's defaults — an <h2> at whatever the theme sizes headings, an
 * <address> in italic, and a bare link — which is why it reads as unfinished
 * next to every other account screen.
 *
 * Each address becomes the same hairline card the orders table and the cart's
 * order summary use, so the three account screens share one shape.
 */

/*
 * 🚨 **This screen carries two separate WooCommerce clearfixes, and both turn
 * into layout items the moment their container stops being a block.** Generated
 * content becomes a grid item and a flex item like any other child; neither is
 * visible in the markup you are reading, which is what makes them expensive to
 * find.
 *
 *   1. `.woocommerce .col2-set::before/::after`                      (0,2,0)
 *      on the `.woocommerce-Addresses` wrapper, which also carries
 *      `col2-set`. As grid items the two empty boxes take both cells of row 1
 *      and push Billing and Shipping into rows 2 and 3.
 *
 *   2. `.woocommerce-account .addresses .title::before/::after`      (0,3,0)
 *      on the `header.woocommerce-Address-title.title`. As **flex** items in a
 *      `space-between` row they park at each end and squeeze the heading and
 *      the Edit link inward — a phantom inset down both sides of every card,
 *      with nothing in the DOM to explain it.
 *
 * Both are killed rather than placed, and killing them costs nothing. A
 * clearfix contains floats; the only floats here are Woo's own
 * `.title h3 { float: left }` and `.title .edit { float: right }`, and **float
 * is ignored on a flex item**, so the moment `.title` became a flex row there
 * was nothing left to clear. (The `h3` rule does not even match — the template
 * emits an `<h2>`.) Nothing outside this screen is touched: Woo's own selectors
 * are scoped to the account addresses list, and ours are scoped tighter still,
 * to `.dhali-account`.
 *
 * The second selector is written to (0,4,0) by pairing the component class with
 * `.title`, so it wins on specificity rather than on stylesheet order — Woo's
 * sheets and `dhali.css` are enqueued independently and nothing pins the order.
 */
/*
 * ⚠️ Keyed on `.woocommerce-Addresses`, not on the `col2-set` the clearfix is
 * actually written against. `col2-set` is shared markup — `form-login.php` uses
 * it too, for the Login / Register pair, and there the floats are still doing
 * their job and the clearfix still has to contain them. Matching the vendor
 * selector as written would kill a live clearfix on a screen this section never
 * touches, the moment `woocommerce_enable_myaccount_registration` is turned on.
 */
.dhali-account .woocommerce .woocommerce-Addresses::before,
.dhali-account .woocommerce .woocommerce-Addresses::after,
.dhali-account .woocommerce .woocommerce-Address-title.title::before,
.dhali-account .woocommerce .woocommerce-Address-title.title::after {
  display: none;
}

.dhali-account .woocommerce .woocommerce-Addresses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--dhali-space-30);
  margin-top: var(--dhali-space-20);
}

/*
 * woocommerce-layout.css floats the columns at `width: 48%`, which leaves a 4%
 * gutter that shifts with the viewport. Dropped for the grid's fixed gap.
 * Woo's is `.woocommerce .col2-set .col-1` (0,3,0); this is (0,4,0).
 */
.dhali-account .woocommerce .woocommerce-Addresses .col-1,
.dhali-account .woocommerce .woocommerce-Addresses .col-2 {
  float: none;
  width: auto;
}

.dhali-account .woocommerce .woocommerce-Address {
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 16px;
  padding: 22px 24px 24px;
  background-color: var(--wp--preset--color--white);
}

/*
 * Title row: heading left, Edit right. Flex rather than the float the link
 * arrives with — `float` is ignored on a flex item, so this replaces the
 * behaviour instead of fighting it, and it puts the two on one baseline rather
 * than leaving the link stranded on its own line as it was.
 */
.dhali-account .woocommerce .woocommerce-Address-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
}

.dhali-account .woocommerce .woocommerce-Address-title h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--wp--preset--color--ink);
}

/*
 * `flex-shrink: 0` because the label is a whole phrase — "Edit Shipping
 * address" — and shrinking it wraps the link under itself inside the row.
 */
.dhali-account .woocommerce .woocommerce-Address-title .edit {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--wp--preset--color--brand);
  text-decoration: none;
}

.dhali-account .woocommerce .woocommerce-Address-title .edit:hover,
.dhali-account .woocommerce .woocommerce-Address-title .edit:focus-visible {
  color: var(--wp--preset--color--ink);
  text-decoration: underline;
}

/* <address> is italic by browser default, which is where the slanted address
   block came from — nothing was setting it. */
.dhali-account .woocommerce .woocommerce-Address address {
  margin: 0;
  font-size: 14px;
  font-style: normal;
  line-height: 1.7;
  color: var(--wp--preset--color--body-text);
}

/* ---- Logged out: login, lost password, reset password -------------------- */

/*
 * 🚨 **Width is set here, and that is an exception to the rule in AGENTS.md
 * that width belongs to the template.** The exception is load-bearing, so do
 * not "fix" it by moving a wideSize onto the template:
 *
 *   · `<main>` cannot tell these screens apart from the logged-in ones. The
 *     account grid and the login form arrive through the same
 *     `wp:post-content`, and the only thing that distinguishes them is what
 *     the shortcode decided to render at request time.
 *   · WordPress's layout system does not reach inside shortcode output at all,
 *     so there is no `has-global-padding` / alignment machinery here to
 *     disagree with — which is the specific failure the rule exists to prevent.
 *
 * `:has()` does the distinguishing instead, so the cap cannot leak onto a
 * logged-in screen.
 *
 * ⚠️ It also cannot leak onto the Login / Register pair: with
 * `woocommerce_enable_myaccount_registration` on, form-login.php wraps both
 * forms in `#customer_login.col2-set` and the login form stops being a child of
 * `.woocommerce`, so `:has(>` … `)` stops matching and the screen falls back to
 * WooCommerce's two floated columns at full width — which is what two columns
 * want. Registration is off on this store today.
 */
.dhali-account .woocommerce:has(> form.login),
.dhali-account .woocommerce:has(> form.lost_reset_password) {
  max-width: 460px;
  margin-inline: auto;
}

/*
 * The card. WooCommerce's own is
 * `.woocommerce form.login, form.register, form.checkout_coupon` (0,2,1) —
 * a #cfc8d8 hairline at 5px radius, a cool grey that belongs to no palette on
 * this site. Redrawn as the same card the address panels and the orders table
 * use. `margin: 2em 0` goes with it; the heading above supplies the spacing.
 */
.dhali-account .woocommerce form.login,
.dhali-account .woocommerce form.register,
.dhali-account .woocommerce form.lost_reset_password {
  margin: 0;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 16px;
  padding: 24px;
}

/*
 * "Login" / "Register" / the lost-password heading. Left at the theme's <h2>
 * these are a page-level size sitting directly under the "My Account" <h1>,
 * which read as two competing titles; at the subheading size they read as a
 * label on the card, matching "Recent Orders" and the address panels.
 */
.dhali-account .woocommerce:has(> form.login) > h2,
.dhali-account .woocommerce:has(> form.lost_reset_password) > h2,
.dhali-account .woocommerce #customer_login h2 {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--wp--preset--color--ink);
}

/*
 * The lost-password form opens with a bare instruction <p> inside the card. The
 * "Dashboard copy" rule above only reaches direct children of the content
 * column, so it never sees this one — and the submit-row rule does, which would
 * otherwise push it down by 24px. (0,4,2) against that rule's (0,3,2).
 */
.dhali-account .woocommerce form.lost_reset_password > p:first-child {
  margin: 0 0 4px;
  font-size: 15px;
  color: var(--wp--preset--color--muted);
}

/*
 * "Remember me" and "Lost your password?". Woo floats the remember-me label and
 * leaves the lost-password link inline at body size; both read better as a
 * quiet row under the button.
 */
.dhali-account .woocommerce form.login .woocommerce-form-login__rememberme {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--wp--preset--color--body-text);
}

.dhali-account .woocommerce form.login .woocommerce-LostPassword {
  margin: 14px 0 0;
  font-size: 13.5px;
}

.dhali-account .woocommerce form.login .woocommerce-LostPassword a {
  color: var(--wp--preset--color--brand);
  text-decoration: none;
}

.dhali-account .woocommerce form.login .woocommerce-LostPassword a:hover,
.dhali-account
  .woocommerce
  form.login
  .woocommerce-LostPassword
  a:focus-visible {
  color: var(--wp--preset--color--ink);
  text-decoration: underline;
}


/* ---- View order ----------------------------------------------------------
   The single-order screen behind "View" in the orders table — `view-order.php`
   plus `order/order-details.php` and `order/order-details-customer.php`.

   ⚠️ None of the orders-table rules above reach it. That table is
   `.woocommerce-orders-table`; this one is `.woocommerce-table--order-details`,
   a different template with a different class, and the two only look alike
   because both inherit `.shop_table`. Changing one does not change the other.

   The intro line ("Order #268 was placed on… and is currently…") needs nothing
   here: it is a bare `<p>` directly inside `.woocommerce-MyAccount-content`, so
   the Dashboard copy rule already covers it, and WooCommerce neutralises the
   `<mark>` highlight around the number, date and status itself. */

/* "Order details", "Billing address", "Shipping address". */
.dhali-account .woocommerce .woocommerce-order-details__title,
.dhali-account .woocommerce .woocommerce-column__title {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--wp--preset--color--ink);
}

/* ---- Order items table --------------------------------------------------- */

/*
 * The same card as the orders table and the confirmation screen, so all three
 * places a customer can read an order look like one component. `box-sizing`
 * for the reason §11b sets out at length — `.shop_table` carries `width: 100%`
 * and this theme has no global border-box reset.
 */
.dhali-account .woocommerce table.woocommerce-table--order-details {
  box-sizing: border-box;
  margin: 0;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px;
}

.dhali-account
  .woocommerce
  table.woocommerce-table--order-details
  thead
  th:first-child {
  border-top-left-radius: 11px;
}

.dhali-account
  .woocommerce
  table.woocommerce-table--order-details
  thead
  th:last-child {
  border-top-right-radius: 11px;
}

.dhali-account
  .woocommerce
  table.woocommerce-table--order-details
  tfoot
  tr:last-child
  > :first-child {
  border-bottom-left-radius: 11px;
}

.dhali-account
  .woocommerce
  table.woocommerce-table--order-details
  tfoot
  tr:last-child
  > :last-child {
  border-bottom-right-radius: 11px;
}

.dhali-account .woocommerce table.woocommerce-table--order-details thead th {
  padding: 12px 18px;
  border: 0;
  background-color: var(--wp--preset--color--cream);
  font-size: 12px;
  font-weight: 700;
  color: var(--wp--preset--color--muted);
  text-align: left;
}

.dhali-account .woocommerce table.woocommerce-table--order-details tbody th,
.dhali-account .woocommerce table.woocommerce-table--order-details tbody td,
.dhali-account .woocommerce table.woocommerce-table--order-details tfoot th,
.dhali-account .woocommerce table.woocommerce-table--order-details tfoot td {
  padding: 14px 18px;
  border-top: 1px solid var(--wp--preset--color--border);
  font-size: 14px;
  line-height: 1.5;
  color: var(--wp--preset--color--body-text);
  vertical-align: top;
  text-align: left;
}

/* Money right-aligns, in both the item rows and the totals. Tabular figures so
   the column of amounts lines up on the decimal rather than drifting. */
.dhali-account
  .woocommerce
  table.woocommerce-table--order-details
  .product-total,
.dhali-account .woocommerce table.woocommerce-table--order-details tfoot td {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.dhali-account
  .woocommerce
  table.woocommerce-table--order-details
  td.product-name
  > a {
  font-weight: 600;
  color: var(--wp--preset--color--ink);
  text-decoration: none;
}

.dhali-account
  .woocommerce
  table.woocommerce-table--order-details
  td.product-name
  > a:hover {
  color: var(--wp--preset--color--brand);
}

/* Subtotal / Shipping / Total / Payment method / Note. */
.dhali-account .woocommerce table.woocommerce-table--order-details tfoot th {
  font-weight: 700;
  color: var(--wp--preset--color--ink);
}

/* ---- Item meta ------------------------------------------------------------
   "Pack Size: 100g", "Flavor: Plain".

   🚨 This is the ugliest thing on the screen and none of it is accidental.
   WooCommerce builds the meta as `<ul class="wc-item-meta"><li><strong
   class="wc-item-meta-label">Key:</strong> <p>value</p></li></ul>` — a
   paragraph inside a list item — and then **floats the label**:
   `.woocommerce td.product-name .wc-item-meta .wc-item-meta-label { float:
   left; clear: both }` at (0,3,2). The float plus the block `<p>` is what puts
   each pair on its own tall line, and the deep indent is simply the `<ul>`'s
   default 40px `padding-inline-start`, which no vendor rule resets.

   Unwound rather than nudged: the label stops floating, the `<p>` goes inline,
   and the list loses its padding — so the meta reads as two quiet lines under
   the product name, matching the same information in the cart and on the
   confirmation screen. (0,4,2) against WooCommerce's (0,3,2). */

.dhali-account .woocommerce td.product-name .wc-item-meta {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  line-height: 1.6;
  color: var(--wp--preset--color--muted);
}

.dhali-account .woocommerce td.product-name .wc-item-meta li {
  margin: 0;
}

.dhali-account .woocommerce td.product-name .wc-item-meta .wc-item-meta-label {
  float: none;
  margin-right: 4px;
  font-weight: 600;
  color: var(--wp--preset--color--body-text);
}

.dhali-account .woocommerce td.product-name .wc-item-meta p {
  display: inline;
  margin: 0;
}

/* The "× 2" beside the product name. */
.dhali-account .woocommerce table.woocommerce-table--order-details .product-quantity {
  font-weight: 700;
  color: var(--wp--preset--color--ink);
}

/* ---- Customer details ---------------------------------------------------- */

.dhali-account .woocommerce .woocommerce-customer-details {
  margin-top: var(--dhali-space-40);
}

/*
 * Billing and Shipping side by side. WooCommerce floats them at `width: 48%`
 * through `col2-set`, the same markup the Addresses screen uses — and the same
 * clearfix rides along, so it has to be neutralised here too or its two
 * pseudo-elements become grid items and take the first row.
 *
 * ⚠️ Keyed on `.woocommerce-columns--addresses`, not on the `col2-set` the
 * vendor rules are written against, for the reason the Addresses section gives:
 * `col2-set` is shared markup and the login screen still needs its floats.
 */
.dhali-account .woocommerce .woocommerce-columns--addresses::before,
.dhali-account .woocommerce .woocommerce-columns--addresses::after {
  display: none;
}

.dhali-account .woocommerce .woocommerce-columns--addresses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--dhali-space-30);
}

.dhali-account .woocommerce .woocommerce-columns--addresses .col-1,
.dhali-account .woocommerce .woocommerce-columns--addresses .col-2 {
  float: none;
  width: auto;
}

/*
 * The address card. WooCommerce's own is a `rgba(0, 0, 0, .1)` hairline with
 * `border-bottom-width: 2px` and `border-right-width: 2px` — a faux drop
 * shadow drawn in border, which is where the lopsided box came from. The
 * `border` shorthand resets all four sides, so it does not need unpicking
 * edge by edge.
 */
.dhali-account .woocommerce .woocommerce-customer-details address {
  box-sizing: border-box;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 16px;
  padding: 20px 24px;
  font-size: 14px;
  font-style: normal;
  line-height: 1.7;
  color: var(--wp--preset--color--body-text);
}

/*
 * Email and phone. Their icons are WooCommerce's own icon font on a `::before`
 * pulled into a 1.5em indent — left alone, because replacing them means
 * shipping an icon of our own for no gain.
 */
.dhali-account .woocommerce .woocommerce-customer-details--email,
.dhali-account .woocommerce .woocommerce-customer-details--phone {
  margin: 14px 0 0;
  font-size: 13.5px;
  color: var(--wp--preset--color--muted);
}
/* ---------------------------------------------------------------------------
   11b. Order confirmation — the order-received screen

   Numbered 11b rather than taking 12, because §12 and §13 are cross-referenced
   by name from comments throughout this file and from `AGENTS.md`; renumbering
   them to slot this in would silently invalidate every one of those pointers.

   `templates/order-confirmation.html` drives it, and two faults there were
   fixed alongside this styling rather than papered over in CSS:

     · **The template printed its own `<h1>Order status</h1>`, and the status
       block renders an `<h1>` of its own** ("Order received") — every branch of
       `OrderConfirmation/Status.php` emits one. Two `<h1>`s on one page, and
       visually two stacked titles. Ours is gone; the block's is the page title.
     · **The page rendered at two different column widths at once.** The status
       and summary ran to the 1320px wide column while the heading, table, note
       and addresses sat at the 820px content width — a visible split down the
       middle of the screen.

   🚨 **The cause is a block.json default, not a template attribute, which is
   why nothing in the template appeared to be setting it.** Nine of the
   order-confirmation blocks declare `"align": {"default": "wide"}`, so they go
   wide with no attribute written anywhere. Only the ones that are *direct
   children of the constrained `<main>`* actually take the width — three of
   them: status, summary and additional-information. The rest sit inside
   wrappers or columns, where `.alignwide` is inert because the parent is not a
   layout container.

   ⚠️ The fix is `{"align":""}` on those three, which reads like a no-op and is
   not: `StyleAttributesUtils::get_align_class_and_style()` emits a class only
   for an exact match on `wide` / `full` / `left` / `right` / `center`, so an
   empty string falls through every branch and no class is written at all.
   Do not "tidy" the empty attribute away — removing it restores the default.

   This settles the whole page at the 820px content width, which is the
   deliberate call for this screen: a receipt is a document, and a two-column
   Product / Total table stretched to 1320px is mostly gutter. It is the one
   template that does not run to `wideSize`. ⚠️ There is no width set in this
   section — the column belongs to the template, per `AGENTS.md`; everything
   below is paint.
--------------------------------------------------------------------------- */

/* ---- Status ---------------------------------------------------------------
   The block's own <h1> plus its "Thank you…" line. */

.dhali-order-confirmation .wc-block-order-confirmation-status h1 {
  margin: 0 0 12px;
  font-size: var(--wp--preset--font-size--xl);
  font-weight: 800;
  line-height: 1.2;
  color: var(--wp--preset--color--ink);
}

.dhali-order-confirmation .wc-block-order-confirmation-status p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--wp--preset--color--muted);
}

/* ---- Summary strip --------------------------------------------------------
   Order # / Date / Total / Email / Payment. WooCommerce lays these out as a
   `space-between` flex row with nothing around them, so on a wide column they
   drift apart into five stranded labels — which is how they read in the
   unstyled screen. Gathered into the cream card the cart's order summary uses,
   on an even auto-fit grid so the columns line up instead of spreading. */

/*
 * 🚨 `box-sizing` is not optional here, and its absence is invisible until the
 * card is padded. **This theme establishes no global border-box reset** — §4b
 * explains why not, and sets it per control instead — so everything defaults to
 * `content-box`. WordPress's constrained layout caps every direct child of
 * `<main>` with `max-width: var(--wp--style--global--content-size)`, and under
 * `content-box` that caps the *content* box: the 24px of horizontal padding and
 * the 1px border are then added **outside** the 820px, and the card renders
 * 870px wide inside an 820px column.
 *
 * The signature is worth remembering, because it does not look like a width
 * bug: the text inside the card still lines up perfectly with the column, and
 * only the card's own edges hang out past everything above and below it.
 *
 * Every padded box in this section carries it, not just the one that was
 * reported — the others escape today only because their width is `auto`, which
 * is luck rather than design.
 */
.dhali-order-confirmation .wc-block-order-confirmation-summary {
  box-sizing: border-box;
  margin: 26px 0 0;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 16px;
  padding: 20px 24px;
  background-color: var(--wp--preset--color--cream);
}

.dhali-order-confirmation .wc-block-order-confirmation-summary ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px 24px;
}

.dhali-order-confirmation
  .wc-block-order-confirmation-summary
  ul
  li
  > .wc-block-order-confirmation-summary-list-item__key {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--wp--preset--color--muted);
}

.dhali-order-confirmation
  .wc-block-order-confirmation-summary
  ul
  li
  > .wc-block-order-confirmation-summary-list-item__value {
  font-size: 14px;
  font-weight: 500;
  color: var(--wp--preset--color--ink);
}

/* ---- Order details table --------------------------------------------------
   The same card as the account orders table: hairline, 12px radius, cream
   header. WooCommerce's own is a `color-mix(in srgb, currentColor 20%,
   transparent)` hairline at 4px radius — a border that inherits whatever text
   colour it lands on rather than naming one. */

/*
 * `box-sizing` for the same reason as the summary card above: WooCommerce sets
 * `width: 100%` on this table, and under the theme's default `content-box` the
 * 1px border is added outside that — a 2px bleed past the column. Small enough
 * to pass review and still wrong.
 */
.dhali-order-confirmation .wc-block-order-confirmation-totals table {
  box-sizing: border-box;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px;
}

/*
 * A table clips nothing, so the corners are mitred cell by cell — the same
 * treatment, and the same 11px-inside-a-1px-border arithmetic, as the orders
 * table in §11.
 */
.dhali-order-confirmation
  .wc-block-order-confirmation-totals
  table
  thead
  th:first-child {
  border-top-left-radius: 11px;
}

.dhali-order-confirmation
  .wc-block-order-confirmation-totals
  table
  thead
  th:last-child {
  border-top-right-radius: 11px;
}

.dhali-order-confirmation
  .wc-block-order-confirmation-totals
  table
  tfoot
  tr:last-child
  > :first-child {
  border-bottom-left-radius: 11px;
}

.dhali-order-confirmation
  .wc-block-order-confirmation-totals
  table
  tfoot
  tr:last-child
  > :last-child {
  border-bottom-right-radius: 11px;
}

.dhali-order-confirmation .wc-block-order-confirmation-totals table thead th {
  padding: 12px 18px;
  border: 0;
  background-color: var(--wp--preset--color--cream);
  font-size: 12px;
  font-weight: 700;
  color: var(--wp--preset--color--muted);
}

.dhali-order-confirmation .wc-block-order-confirmation-totals table td,
.dhali-order-confirmation .wc-block-order-confirmation-totals table th {
  padding: 14px 18px;
  border-top: 1px solid var(--wp--preset--color--border);
  font-size: 14px;
  color: var(--wp--preset--color--body-text);
  vertical-align: top;
}

/* The product name. A link, and Woo leaves it at the theme's underlined brand
   default in the middle of a receipt. */
.dhali-order-confirmation .wc-block-order-confirmation-totals table td a {
  font-weight: 600;
  color: var(--wp--preset--color--ink);
  text-decoration: none;
}

.dhali-order-confirmation .wc-block-order-confirmation-totals table td a:hover {
  color: var(--wp--preset--color--brand);
}

.dhali-order-confirmation
  .wc-block-order-confirmation-totals
  table
  .product-quantity {
  font-weight: 700;
  color: var(--wp--preset--color--ink);
}

/* Pack Size / Flavor / Variant. Woo sizes these at `.75em` of an inherited
   size; named here so the line does not drift with the cell. */
.dhali-order-confirmation
  .wc-block-order-confirmation-totals
  table
  .wc-item-meta {
  font-size: 12px;
  line-height: 1.6;
  color: var(--wp--preset--color--muted);
}

.dhali-order-confirmation
  .wc-block-order-confirmation-totals
  table
  .wc-item-meta
  strong {
  font-weight: 600;
  color: var(--wp--preset--color--body-text);
}

/* Shipping and Total. */
.dhali-order-confirmation .wc-block-order-confirmation-totals table tfoot th,
.dhali-order-confirmation .wc-block-order-confirmation-totals table tfoot td {
  font-weight: 700;
  color: var(--wp--preset--color--ink);
}

.dhali-order-confirmation
  .wc-block-order-confirmation-totals
  table
  tfoot
  tr:last-child
  th,
.dhali-order-confirmation
  .wc-block-order-confirmation-totals
  table
  tfoot
  tr:last-child
  td {
  font-size: 15px;
}

/* ---- Note and addresses ---------------------------------------------------
   Woo gives all three the same `currentColor`-derived hairline at 4px radius as
   the table. Redrawn as the 16px card the account address panels use, so a
   customer who has just ordered and a customer reviewing their account see the
   same component. */

.dhali-order-confirmation .wc-block-order-confirmation-order-note,
.dhali-order-confirmation .wc-block-order-confirmation-shipping-address,
.dhali-order-confirmation .wc-block-order-confirmation-billing-address {
  box-sizing: border-box;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 16px;
  padding: 20px 24px;
  font-size: 14px;
  font-style: normal;
  line-height: 1.7;
  color: var(--wp--preset--color--body-text);
}

/* "Note:" is a <strong> ahead of the customer's message. */
.dhali-order-confirmation .wc-block-order-confirmation-order-note strong {
  display: block;
  margin-bottom: 4px;
  font-weight: 700;
  color: var(--wp--preset--color--ink);
}

/* ---------------------------------------------------------------------------
   12. Legacy style.min.css conflicts neutralised here (markup-agnostic ones —
   header/menu-grid and contact-form conflicts are handled in Phase 3 / 4b,
   see plans/reference/style-min-css-audit.md)
--------------------------------------------------------------------------- */

.wp-block-button__link,
body .wp-element-button {
  font-weight: 600;
}

/* style.min.css hangs a block-gap worth of bottom margin on the last child of
   the post content, which lands as a strip of page background between the last
   section and the dark footer. The footer supplies its own 60px of top padding,
   so the strip is unwanted on every template. The selector is copied verbatim,
   :not() chain included, so the specificity matches and dhali.css — enqueued
   after style.min.css — simply wins on order. */
body:not(.elementor-page)
  .wp-block-post-content
  > :last-child:not(.hostinger-ai-solid-block):not(
    .has-color-1-background-color
  ):not(.has-color-2-background-color):not(.hostinger-ai-background-image) {
  margin-block-end: 0;
}

/* ---------------------------------------------------------------------------
   13. Responsive
   Desktop-as-drawn ≥1200px is the default above. The mockup itself is
   desktop-only, so these breakpoints are our own explicit design call.
--------------------------------------------------------------------------- */

/*
 * Mobile content gutter, set once for every template (plan item 5.11).
 *
 * theme.json declares a flat 60px left/right root padding. With
 * `useRootPaddingAwareAlignments` on, WordPress does not write that padding
 * onto each container: it publishes two custom properties on <body> and every
 * root-level constrained group (`.has-global-padding`) and full-width child
 * reads them. Overriding the two properties therefore moves the gutter on the
 * header, the footer, page, post, index, 404 and every pattern at once —
 * which is the point. The previous version listed three selectors by hand and
 * left every other template on 60px on a phone.
 *
 * `html body` rather than `body`: WordPress prints its own `body { --wp--… }`
 * rule in the global-styles inline stylesheet, and nothing guarantees that
 * dhali.css is parsed after it. One extra element in the selector settles the
 * cascade regardless of order. A media query adds no specificity of its own.
 */
@media (max-width: 1199px) {
  html body {
    --wp--style--root--padding-left: var(--dhali-space-40);
    --wp--style--root--padding-right: var(--dhali-space-40);
  }

  .dhali-shop-layout {
    grid-template-columns: 200px 1fr;
  }

  /*
   * The account grid narrows with it. This named `.dhali-account` until
   * 2026-08-30 — left over from the Phase-2 scaffolding — but `.dhali-account`
   * is the <main> wrapper and is a constrained group, not a grid, so the rule
   * was inert and the menu column stayed at 220px all the way down to the 782px
   * step. The grid lives one level in, on the shortcode's own wrapper.
   */
  .dhali-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
    grid-template-columns: 200px minmax(0, 1fr);
  }

  /* Home sections. The promo trio is a core grid group, so its track count is
	   re-declared on .wp-block-group to outrank the generated per-container
	   layout rule; the category grid is our own block and takes a property. */
  .dhali-category-grid {
    --dhali-category-columns: 2;
  }

  .dhali-featured-products .wc-block-product-template__responsive.columns-5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dhali-shop-results .wc-block-product-template {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* The empty cart's "New in store" strip is `woocommerce/product-new`, the
     legacy grid block, so it does not pick up the step above — see §7. */
  .dhali-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .wp-block-group.dhali-benefit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* The product page's 56px column gutter is drawn for a 1320px column. Below
	   that it is simply lost width. Written with the block class as well, so it
	   outranks the per-container layout rule core generates for the blockGap —
	   both are single-class selectors, and their order is not guaranteed. */
  .wp-block-columns.dhali-product__main {
    column-gap: var(--dhali-space-30);
  }
}

@media (max-width: 782px) {
  /* Second step of the same gutter — see the note at 1199px above. */
  html body {
    --wp--style--root--padding-left: var(--dhali-space-20);
    --wp--style--root--padding-right: var(--dhali-space-20);
  }

  .dhali-shop-layout {
    grid-template-columns: 1fr;
  }

  .dhali-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /*
   * Backstop for the cart row's fixed cell widths.
   *
   * §7 puts these inside `@container (min-width: 700px)`, which is the
   * correct place for them and handles the normal case. This repeats the
   * neutralisation against the viewport, because a container query only
   * fires if the browser both supports `@container` and agrees about which
   * ancestor the container is — and a fixed 110px price column is the
   * difference between a row that fits a phone and one that hangs off the
   * side of it. Cheap insurance against a failure whose symptom is content
   * physically off-screen.
   */
  .dhali-cart .wc-block-cart__main .wc-block-cart-items .wc-block-cart-item__total {
    width: auto;
    min-width: 0;
  }

  .dhali-cart .wc-block-cart__main .wc-block-cart-items .wc-block-cart-item__image {
    width: 70px;
    padding-right: 0;
  }

  .dhali-cart .wc-block-cart__main .wc-block-cart-items .wc-block-cart-item__product {
    min-width: 0;
  }

  /* WooCommerce stacks the cart's two columns off a container query at 699px,
     which lands close to here. The card keeps its chrome but loses the inset
     that only made sense beside a line-item table. */
  .dhali-cart .wc-block-cart__sidebar {
    padding: 20px;
  }

  /*
   * The other half of §8's narrow block. `.wp-block-woocommerce-checkout`
   * carries `padding-top: 24px`, and it is the container the checkout's own
   * `@container` rules resolve against — a container query can style that
   * element's descendants but never the element itself — so removing it has
   * to happen against the viewport, here.
   */
  .dhali-checkout .wp-block-woocommerce-checkout {
    padding-top: 0;
  }

  /*
   * 🚨 Fields go back to 16px on a phone, and this is a functional rule, not
   * a stylistic one. §8 sizes them to `sm` (13.5px) to match the contact and
   * wholesale forms — but **iOS Safari zooms the viewport on any input under
   * 16px when it takes focus**, and it does not zoom back out. On a form this
   * long that means the customer is dragging a magnified page sideways from
   * the second field onwards.
   *
   * The uniformity that was asked for is a desktop judgement, where the three
   * forms sit side by side in review; nobody compares a phone checkout with
   * the wholesale form. ⚠️ §3e's own controls have the same fault and are
   * *not* fixed here — that is a separate pass over the contact and wholesale
   * forms, not something to smuggle into a checkout rule.
   */
  .dhali-checkout
    .wc-block-checkout__form
    .wc-block-components-text-input
    input[type="text"],
  .dhali-checkout
    .wc-block-checkout__form
    .wc-block-components-text-input
    input[type="email"],
  .dhali-checkout
    .wc-block-checkout__form
    .wc-block-components-text-input
    input[type="tel"],
  .dhali-checkout
    .wc-block-checkout__form
    .wc-block-components-text-input
    input[type="number"],
  .dhali-checkout
    .wc-blocks-components-select
    .wc-blocks-components-select__select,
  .dhali-checkout .wc-block-checkout__form .wc-block-components-textarea {
    font-size: 16px;
  }

  /*
   * The account forms take the same 16px for the same functional reason — the
   * Account details screen has three password fields in a row, which is the
   * worst case for a viewport that zooms in on focus and never zooms back.
   *
   * This is not the deferred §3e pass creeping in: it is new markup, and there
   * is no case for shipping a fourth form with a fault the third one already
   * documents. ⚠️ The contact and wholesale forms are still unfixed.
   */
  .dhali-account .woocommerce form .form-row .input-text,
  .dhali-account .woocommerce form .form-row select,
  .dhali-account .woocommerce form .form-row textarea {
    font-size: 16px;
  }

  .dhali-shop-filters {
    display: none;
  }

  .dhali-shop-filters.is-open {
    display: block;
  }

  /*
   * The account sidebar stops being a sidebar. It becomes a scrolling strip of
   * pills above the content rather than a stacked block list: five full-width
   * bars would push the dashboard itself off the first screen, and the strip
   * keeps the current endpoint visible while it scrolls.
   *
   * `flex-shrink: 0` on the item, not `white-space: nowrap` on the link — the
   * link is a block, so nowrap alone would let flex squeeze the boxes and clip
   * the labels instead of letting the row overflow and scroll.
   */
  .dhali-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--dhali-space-30);
  }

  /*
   * ⚠️ The explicit placement in §11 has to be released here, not just the
   * track list. `grid-column: 2` against a one-column grid does not clamp — it
   * conjures an implicit second column and puts the content back beside the
   * menu at half the width. Both panels go back to auto flow, which follows
   * source order: menu, then content.
   */
  .dhali-account .woocommerce > .woocommerce-MyAccount-navigation,
  .dhali-account .woocommerce > .woocommerce-MyAccount-content {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  /*
   * The `.woocommerce` in these two prefixes is not decoration — it matches the
   * (0,3,x) the base rules were raised to in §11. Left at the shorter prefix
   * they lose to their own base rules and the menu stays a stacked column on a
   * phone, which a media query cannot fix because it adds no specificity.
   */
  .dhali-account .woocommerce .woocommerce-MyAccount-navigation ul {
    flex-direction: row;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .dhali-account .woocommerce .woocommerce-MyAccount-navigation li {
    flex-shrink: 0;
  }

  /*
   * First name / Last name stop sharing a row, at the same width the wholesale
   * form's two-up grid collapses.
   *
   * ⚠️ Releasing `grid-column` matters as much as the track list, for the
   * reason the page grid above documents: `grid-column: 2` against a
   * one-column grid conjures an implicit second column rather than clamping,
   * so Last name would stay beside First name at half the width.
   */
  .dhali-account .woocommerce form.edit-account,
  .dhali-account .woocommerce .woocommerce-address-fields__field-wrapper {
    grid-template-columns: minmax(0, 1fr);
  }

  .dhali-account .woocommerce form .form-row-first,
  .dhali-account .woocommerce form .form-row-last {
    grid-column: 1 / -1;
  }

  /*
   * Billing and Shipping stack. No `grid-column` to release here — the two
   * address cards are auto-placed, not pinned, because `my-address.php` builds
   * them from a filtered list (`woocommerce_my_account_get_addresses`) and
   * already drops to a single card when the store ships to the billing address
   * only. Pinning columns would fight that; a one-column track list is enough.
   */
  .dhali-account .woocommerce .woocommerce-Addresses,
  .dhali-account .woocommerce .woocommerce-columns--addresses {
    grid-template-columns: minmax(0, 1fr);
  }

  .dhali-category-grid {
    --dhali-category-columns: 1;
  }

  .wp-block-group.dhali-promo-trio {
    grid-template-columns: minmax(0, 1fr);
  }

  .dhali-featured-products .wc-block-product-template__responsive.columns-5 {
    grid-template-columns: minmax(0, 1fr);
  }

  .wp-block-group.dhali-promo-card {
    min-height: 0;
  }

  .dhali-promo-card__media img {
    height: 180px;
  }

  /* Core stacks the About columns here. A 340px band of cream above the copy
	   is too much once it is no longer sitting beside it. */
  .dhali-about__media {
    min-height: 220px;
  }

  .dhali-about__media img {
    height: 220px;
  }

  /* The paired fields stop pairing usefully at phone width. */
  .dhali-wholesale-form__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .wp-block-group.dhali-benefit-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Core stacks the product columns at 781px on its own. What it cannot know
	   is that four thumbnails across a phone are ~70px each — small enough that
	   the strip stops being a way to pick an image. Three reads as a control.

	   Full prefix, for the reason set out in §9: a media query contributes no
	   specificity, so a shorter selector here would simply lose to the base. */
  .dhali-product
    .dhali-product__media
    .woocommerce-product-gallery.images
    ol.flex-control-thumbs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  /*
   * 🚨 This block is at the end of §13 on purpose, and the shop rule was moved
   * here from the 480px block in §5 (2026-08-28).
   *
   * `.dhali-shop-results .wc-block-product-template` is (0,2,0) in both
   * places, and a media query contributes no specificity of its own — so the
   * one-column override, sitting ~130 lines *above* §6's three-column base
   * rule, lost on source order and the shop stayed two-up on a phone. Every
   * responsive override has to come after the base rule it is unwinding.
   */
  .dhali-shop-results .wc-block-product-template {
    grid-template-columns: 1fr;
  }

  .dhali-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
    grid-template-columns: 1fr;
  }
}

/*
 * Recipes, at the shop grid's own breakpoints. Three cards fit the 1320px
 * column and nothing much narrower, so the archive drops to two at 1199px and
 * to one at 480px; the pairings band follows it both times.
 *
 * Placed here, after §3's base rules and after the column-count classes the
 * pairings block emits — a media query contributes no specificity, so an
 * equal-weight override sitting earlier in the file would silently lose on
 * source order. That has shipped once already; see the 480px block above.
 */
@media (max-width: 1199px) {
  /* `:not()` takes the specificity of its argument, so this is (0,2,0) and
     beats every cols-N class above — except the one it names, because a band
     that found a single recipe should stay one card wide, not grow a hole. */
  .dhali-recipe-grid:not(.dhali-recipe-grid--cols-1) {
    --dhali-recipe-columns: 2;
  }
}

@media (max-width: 480px) {
  /* The class is repeated to reach (0,2,0), which is what it takes to beat the
     cols-N classes the pairings block writes. Same reasoning as the `:not()`
     above, without an exception to carve out — at this width everything is one
     card wide. */
  .dhali-recipe-grid.dhali-recipe-grid {
    --dhali-recipe-columns: 1;
  }

  /* A single-column card is the full width of the column, so the pairings
     band's shallow image would stretch into a letterbox strip. */
  .dhali-recipe-grid--compact {
    --dhali-recipe-media: 180px;
  }
}

/*
 * 768px, and last in the file on purpose.
 *
 * This is not a breakpoint of ours: it is the media attribute WooCommerce
 * enqueues `woocommerce-smallscreen.css` with. Below it Woo restacks every
 * `shop_table_responsive` into a block list — thead hidden, each cell its own
 * row, the column name injected from `data-title` as a floated ::before. That
 * is a reasonable phone layout and it is kept; what follows only repairs and
 * repaints it, so it has to sit after §11's base rules and after the 782px
 * block, both of which it partly unwinds.
 */
@media (max-width: 768px) {
  /*
   * 🚨 Woo's stacked mode hides `tbody th` outright, and the order number is a
   * `<th scope="row">` — so the upstream Orders table loses the one column that
   * identifies the row. Restored as a block cell like the rest. Woo's rule is
   * `.woocommerce table.shop_table_responsive tbody th` at (0,2,2); this is
   * (0,3,2) and takes it.
   */
  .dhali-account .woocommerce table.woocommerce-orders-table tbody th {
    display: block;
    text-align: right;
  }

  .dhali-account .woocommerce table.woocommerce-orders-table tbody th::before {
    content: attr(data-title) ": ";
    float: left;
    font-weight: 700;
  }

  /*
   * With thead gone the top corners belong to the first row's first cell, and
   * the bottom pair to the last row's last cell — the four-cell mitre in §11
   * assumes a table laid out in columns and does nothing useful here.
   */
  .dhali-account
    .woocommerce
    table.woocommerce-orders-table
    tbody
    tr:first-child
    > :first-child {
    border-top: 0;
    border-top-left-radius: 11px;
    border-top-right-radius: 11px;
  }

  .dhali-account
    .woocommerce
    table.woocommerce-orders-table
    tbody
    tr:last-child
    > :last-child {
    border-bottom-left-radius: 11px;
    border-bottom-right-radius: 11px;
  }

  /*
   * Each order becomes a card, so the divider moves from every cell to the gap
   * between orders. Woo's zebra is a flat `rgba(0, 0, 0, .025)`, a grey wash on
   * a warm palette; cream is the same idea in the theme's own colour.
   */
  .dhali-account .woocommerce table.woocommerce-orders-table tbody th,
  .dhali-account .woocommerce table.woocommerce-orders-table tbody td {
    padding: 6px 18px;
    border-top: 0;
  }

  .dhali-account
    .woocommerce
    table.woocommerce-orders-table
    tbody
    tr
    > :first-child {
    padding-top: 14px;
    border-top: 1px solid var(--wp--preset--color--border);
  }

  .dhali-account
    .woocommerce
    table.woocommerce-orders-table
    tbody
    tr
    > :last-child {
    padding-bottom: 14px;
  }

  .dhali-account
    .woocommerce
    table.woocommerce-orders-table
    tbody
    tr:nth-child(2n)
    td,
  .dhali-account
    .woocommerce
    table.woocommerce-orders-table
    tbody
    tr:nth-child(2n)
    th {
    background-color: var(--wp--preset--color--cream);
  }

  /*
   * The actions cell keeps Woo's left alignment (its own rule, with the label
   * suppressed) but not its button margins — "View" is a link here, not the
   * pill those margins were spacing.
   */
  .dhali-account
    .woocommerce
    table.woocommerce-orders-table
    .woocommerce-orders-table__cell-order-actions {
    width: auto;
  }

  .dhali-account
    .woocommerce
    table.woocommerce-orders-table
    .woocommerce-orders-table__cell-order-actions
    .button {
    margin: 0;
  }
}