/* =====================================================================================
   WooCommerce, restyled to the 2026 design.

   Deliberately CSS ONLY. WooCommerce and the theme's own hooks already render every section
   the approved product page has -- gallery, price, offer box, language picker, "what you
   get", the steps, the readers, the testimonials, the FAQ. Overriding the templates would
   mean re-implementing cart totals, coupons, variations and checkout, owning those bugs, and
   redoing the work on every WooCommerce update. So nothing here changes markup; it only
   dresses what is already on the page.

   Class map (theirs -> the design):
     .pn-top                  -> .pdp          the two-column head
     .woocommerce-product-gallery -> .gal      photographs
     .summary.entry-summary   -> .buy          the buy box
     .pn-offer/.pn-now/.pn-was/.pn-offer-badge -> .price/.save
     .pn-lang-field           -> .pick/.opts   language choice
     .single_add_to_cart_button -> .btn-primary
     .pn-includes             -> .gets
     .pn-how/.pn-readers/.pn-testimonials/.pn-faq -> the b-2/b-3/brk/acc bands
   ===================================================================================== */

/* ---------- the page frame ---------- */
.woocommerce .block.b-1 > .in { max-width: 1240px; padding: 0 44px; }
.woocommerce div.product { margin: 0; }
.woocommerce .woocommerce-notices-wrapper:empty { display: none; }

/* ---------- head: gallery + buy box ---------- */
.pn-top {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 52px;
  align-items: start;
  padding: 26px 0 56px;
}

/* ---------- gallery ---------- */
/* woocommerce.css sets `div.product div.images { width: 48% }` and floats it; these
   selectors have to out-rank that or the gallery collapses into a narrow column. */
.woocommerce div.product div.images,
.woocommerce div.product div.images.woocommerce-product-gallery,
.woocommerce #content div.product div.images { width: 100%; float: none; margin: 0; }
.woocommerce div.product div.summary { width: 100%; float: none; margin: 0; }
.woocommerce div.product .woocommerce-product-gallery__wrapper { border-radius: 20px; overflow: hidden; background: #DED7D1; }
.woocommerce div.product .woocommerce-product-gallery__image { aspect-ratio: 1/1; }
.woocommerce div.product .woocommerce-product-gallery__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* the zoom magnifier fights a snap gallery on touch; the photographs are already large */
.woocommerce div.product .woocommerce-product-gallery__trigger { display: none; }
.woocommerce div.product .flex-control-thumbs {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin: 12px 0 0; padding: 0; list-style: none;
}
/* flexslider ships these as 20px navigation dots (`.flex-control-nav li { width: 20px }`),
   so they have to be reset to fill the grid cell or the thumbnails stay pinhead-sized. */
.woocommerce div.product .flex-control-nav.flex-control-thumbs li,
.woocommerce div.product .flex-control-thumbs li {
  width: auto !important; height: auto; margin: 0; float: none; display: block;
}
.woocommerce div.product .flex-control-thumbs img {
  width: 100%; height: auto; display: block;
  border-radius: 12px; aspect-ratio: 1/1; object-fit: cover; opacity: .62;
  border: 2px solid transparent; transition: opacity .2s ease, border-color .2s ease;
}
.woocommerce div.product .flex-control-thumbs img.flex-active,
.woocommerce div.product .flex-control-thumbs img:hover { opacity: 1; border-color: var(--green); }

/* ---------- buy box ---------- */
.woocommerce div.product .summary.entry-summary { width: 100%; float: none; margin: 0; position: sticky; top: 88px; }
.woocommerce div.product .product_title {
  font-family: var(--disp); font-weight: 300; letter-spacing: -.02em;
  font-size: clamp(28px, 3.1cqw, 40px); line-height: 1.08; color: var(--ink); margin: 0 0 14px;
}
.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce div.product .summary > p { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); max-width: 46ch; }

/* price row: was / now / save badge */
.pn-offer { margin-top: 22px; }
.pn-offer-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0; }
.pn-now, .pn-now .woocommerce-Price-amount {
  font-family: var(--disp); font-size: 40px; font-weight: 500; letter-spacing: -.03em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.pn-was, .pn-was .woocommerce-Price-amount { font-size: 17px; color: var(--ink-3); text-decoration: line-through; font-weight: 400; }
.pn-offer-badge {
  background: var(--gold); color: #241C08; border-radius: 999px; padding: 5px 11px;
  font-size: 12px; font-weight: 700; margin: 0;
}
.pn-offer-note, .price-gst { margin-top: 6px; font-size: 12.5px; color: var(--ink-3); }

/* "what you get" */
.pn-includes { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 16px; display: grid; gap: 11px; }
.pn-includes li { display: flex; gap: 11px; align-items: flex-start; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); list-style: none; }
.pn-includes li::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%;
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* language choice */
.pn-lang-field { margin-top: 24px; }
.pn-lang-field > label {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px;
}
.pn-lang-field select {
  width: 100%; border: 1.5px solid var(--line); background: #fff; border-radius: 12px;
  padding: 12px 14px; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-2);
}
.pn-lang-field select:focus { border-color: var(--green); outline: none; }
.pn-lang-help { display: block; margin-top: 6px; font-size: 12.5px; color: var(--ink-3); }

/* the one action the page exists for */
.woocommerce div.product form.cart { margin: 24px 0 0; display: block; }
.woocommerce div.product form.cart .quantity { display: none; }   /* a reading is bought once */
.woocommerce div.product .single_add_to_cart_button.button.alt,
.woocommerce div.product .single_add_to_cart_button.button.alt:hover {
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  width: 100%; border-radius: 999px; padding: 14px 24px; border: 1px solid var(--green);
  background: var(--green); color: var(--onDark) !important; -webkit-text-fill-color: var(--onDark) !important;
  font-family: var(--body); font-size: 14.5px; font-weight: 600; text-transform: none; letter-spacing: 0;
}
.woocommerce div.product .single_add_to_cart_button.button.alt:hover { background: var(--green-d); border-color: var(--green-d); }
.pn-cta-reassure { margin-top: 12px; font-size: 12.5px; color: var(--ink-3); text-align: center; }
.pn-wa-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  margin-top: 10px; border-radius: 999px; padding: 13px 24px; border: 1px solid var(--line);
  background: transparent; color: var(--ink) !important; font-size: 14.5px; font-weight: 600;
}
.pn-wa-cta:hover { border-color: var(--ink-3); background: rgba(12, 9, 4, .03); }

.pay-marks { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 16px; }
.pay-marks span, .pay-marks li {
  border: 1px solid var(--line); border-radius: 7px; padding: 4px 9px;
  font-size: 11px; font-weight: 600; color: var(--ink-3); list-style: none;
}
.pn-trustbox, .product_meta { margin-top: 16px; font-size: 12.5px; color: var(--ink-3); }

/* ---------- the bands below ---------- */
.pn-below { padding: 56px 0; margin: 0 -44px; }
.pn-below > * { max-width: 1240px; margin-left: auto; margin-right: auto; padding-left: 44px; padding-right: 44px; }
.pn-how { background: #E4DCD5; }
.pn-readers { background: linear-gradient(160deg, #1A6C68 0%, #16615E 55%, #0E4A47 100%); color: var(--onDark); }
.pn-testimonials { background: #FBF9F7; }
.pn-faq { background: var(--paper); }

.pn-below .section-title {
  font-family: var(--disp); font-weight: 200; letter-spacing: -.025em;
  font-size: clamp(24px, 2.7cqw, 34px); line-height: 1.1; color: var(--ink); margin: 0 0 8px;
}
.pn-readers .section-title, .pn-readers .section-sub, .pn-readers .pn-readers-copy { color: var(--onDark); }
.pn-below .section-sub { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); max-width: 62ch; }
.pn-readers .section-sub { color: var(--onDark-2); }
.pn-below .accent { color: var(--green); }
.pn-readers .accent { color: var(--gold); }

/* steps */
.pn-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 28px; }
.pn-step { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.pn-step-n {
  display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%;
  background: var(--green); color: var(--onDark); font-family: var(--disp); font-size: 12.5px; font-weight: 600;
}
.pn-step-img { border-radius: 12px; margin-top: 12px; aspect-ratio: 4/3; object-fit: cover; width: 100%; }

/* readers band */
.pn-readers-photo { border-radius: 20px; width: 100%; aspect-ratio: 16/9; object-fit: cover; margin-top: 20px; }

/* testimonials */
.pn-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 26px; }
.pn-quote {
  margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  padding: 24px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2);
}

/* FAQ */
.pn-faq .faq-item { border-bottom: 1px solid var(--line); }
.pn-faq .faq-item:first-of-type { border-top: 1px solid var(--line); }
.pn-faq .faq-item > summary {
  list-style: none; cursor: pointer; padding: 18px 0; font-family: var(--disp);
  font-size: 17.5px; font-weight: 400; color: var(--ink);
}
.pn-faq .faq-item > summary::-webkit-details-marker { display: none; }
.pn-faq .faq-item[open] > summary { color: var(--green); }
.pn-faq .faq-item > *:not(summary) { padding: 0 30px 20px 0; font-size: 15px; line-height: 1.7; color: var(--ink-2); max-width: 68ch; }

.pn-textlink { color: var(--green); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- cart, checkout, account ---------- */
.woocommerce table.shop_table {
  border: 1px solid var(--line); border-radius: 18px; border-collapse: separate; border-spacing: 0; background: var(--card);
}
.woocommerce table.shop_table th { font-family: var(--body); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.woocommerce .button, .woocommerce input.button, .woocommerce a.button {
  border-radius: 999px; padding: 12px 22px; font-family: var(--body); font-weight: 600;
  background: var(--paper-2); color: var(--ink); border: 1px solid var(--line); text-transform: none;
}
.woocommerce .button.alt, .woocommerce input.button.alt, .woocommerce a.button.alt,
.woocommerce .checkout-button {
  background: var(--green); border-color: var(--green);
  color: var(--onDark) !important; -webkit-text-fill-color: var(--onDark) !important;
}
.woocommerce .button.alt:hover, .woocommerce a.button.alt:hover, .woocommerce .checkout-button:hover {
  background: var(--green-d); border-color: var(--green-d);
}
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce form .form-row select, .wc-block-components-text-input input {
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font: inherit; background: #fff;
}
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-top: 0; border-left: 3px solid var(--green); border-radius: 12px;
  background: var(--paper-2); color: var(--ink-2);
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--green); }
/* WooCommerce Blocks (the checkout) takes its colours from these */
.wc-block-components-button { border-radius: 999px !important; background: var(--green) !important; color: var(--onDark) !important; }
.wc-block-components-title, .wc-block-components-checkout-step__title { font-family: var(--disp) !important; font-weight: 400 !important; color: var(--ink) !important; }

/* =========================================================
   TABLET
   ========================================================= */
@media (max-width: 1000px) {
  .woocommerce .block.b-1 > .in { padding: 0 26px; }
  .pn-top { grid-template-columns: 1fr 1fr; gap: 28px; padding: 20px 0 40px; }
  .woocommerce div.product .summary.entry-summary { position: static; }
  .pn-below { margin: 0 -26px; }
  .pn-below > * { padding-left: 26px; padding-right: 26px; }
  .pn-steps { grid-template-columns: 1fr 1fr; }
  .pn-quotes { grid-template-columns: 1fr 1fr; }
  .pn-quotes .pn-quote:last-child { display: none; }
}

/* =========================================================
   PHONE — the buy box comes first and the photographs run edge to edge
   ========================================================= */
@media (max-width: 640px) {
  .woocommerce .block.b-1 > .in { padding: 0 16px; }
  .pn-top { display: block; padding: 0 0 30px; }
  .woocommerce div.product .woocommerce-product-gallery { margin: 0 -16px; }
  .woocommerce div.product .woocommerce-product-gallery__wrapper { border-radius: 0; }
  .woocommerce div.product .flex-control-thumbs { display: none; }
  .woocommerce div.product .product_title { font-size: 25px; margin-top: 18px; }
  .pn-now, .pn-now .woocommerce-Price-amount { font-size: 30px; }
  .pn-below { margin: 0 -16px; padding: 30px 0; }
  .pn-below > * { padding-left: 16px; padding-right: 16px; }
  .pn-steps { grid-template-columns: 1fr; }
  .pn-quotes { grid-template-columns: 1fr; }
  .pn-quotes .pn-quote:last-child { display: block; }
}

/* =====================================================================================
   The pieces CSS alone could not reach — paired with inc/product.php.
   ===================================================================================== */

.pn2-kicker {
  font-family: var(--body); font-size: 11px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 10px;
}
.pn2-lede { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); max-width: 46ch; margin: 14px 0 0; }

/* the save badge is a pill beside the price, not a banner across the box */
.woocommerce div.product .pn-offer-row { align-items: baseline; }
.woocommerce div.product .pn-offer-badge {
  display: inline-block; width: auto; text-align: left; white-space: nowrap;
}
/* the offer note becomes the dashed card the design uses */
.woocommerce div.product .pn-offer-note {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 18px;
  background: var(--paper-2); border: 1px dashed var(--line); border-radius: 14px;
  padding: 13px 15px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2);
}
.woocommerce div.product .pn-offer-note::before {
  content: ""; flex: none; width: 19px; height: 19px; margin-top: 1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316615E' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.6 5.5 6 .8-4.4 4.2 1.1 6-5.3-2.9-5.3 2.9 1.1-6L3.4 9.3l6-.8z'/%3E%3C/svg%3E") center/19px no-repeat;
}

/* language: three pills */
.pn2-pick { margin-top: 24px; }
.pn2-pick-label {
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 10px;
}
.pn2-opts { display: flex; gap: 8px; flex-wrap: wrap; }
.pn2-opt { position: relative; }
.pn2-opt input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.pn2-opt span {
  display: block; border: 1.5px solid var(--line); background: #fff; border-radius: 12px;
  padding: 11px 18px; font-size: 14px; font-weight: 600; color: var(--ink-2);
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.pn2-opt input:hover + span { border-color: var(--ink-3); }
.pn2-opt input:checked + span { border-color: var(--green); background: var(--green); color: var(--onDark); }
.pn2-opt input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Order and pairing.
   Every block in the buy box arrives from a different hook, in WooCommerce's priority order,
   which is not the order the design reads in. Rather than move the hooks about — and risk the
   add-to-cart form ending up somewhere it should not — the summary becomes a flex column and
   each block is given an explicit `order`. That also lets the two buttons sit side by side
   without wrapping them in anything. */
/* align-items:flex-start matters: with the default `stretch`, the WhatsApp button
   grew to match the height of the cart form beside it and rendered as a 206px circle. */
.woocommerce div.product .summary.entry-summary { display: flex; flex-wrap: wrap;
  align-content: flex-start; align-items: flex-start; }
.woocommerce div.product .summary.entry-summary > * { width: 100%; order: 15; }
/* order 15 is the default for anything not listed below. Without it, a block that predates
   this file (the "what happens after you book" panel, for one) inherits order 0 and jumps
   above the title. */
.woocommerce div.product .summary .pn2-kicker   { order: 1; }
.woocommerce div.product .summary .product_title{ order: 2; }
.woocommerce div.product .summary .pn2-lede     { order: 3; }
.woocommerce div.product .summary .pn-offer     { order: 4; }
.woocommerce div.product .summary .price-gst    { order: 5; }
.woocommerce div.product .summary form.cart     { order: 6; }
.woocommerce div.product .summary .pn-wa-cta    { order: 7; }
.woocommerce div.product .summary .pn-cta-reassure { order: 8; }
.woocommerce div.product .summary .pn2-assure   { order: 9; }
.woocommerce div.product .summary .pay-marks    { order: 10; }
/* the includes list is a section in its own right in the design, not part of the buy box */
.woocommerce div.product .summary .pn-includes  { order: 20; }
.woocommerce div.product .summary .pn-trustbox,
.woocommerce div.product .summary .product_meta { order: 21; }

/* The design pairs a short "Ask first" beside the buy button. This label is
   "Questions? WhatsApp us", which wraps to two lines in half a column and turns the pill into
   an oval — so the two stay stacked and full width until there is room for one line. */
@media (min-width: 1100px) {
  .woocommerce div.product .summary form.cart  { width: calc(56% - 5px); margin-right: 10px; }
  .woocommerce div.product .summary .pn-wa-cta { width: calc(44% - 5px); height: auto;
    margin-top: 24px; white-space: nowrap; font-size: 13.5px; padding-left: 14px; padding-right: 14px; }
}

/* the assurances */
.pn2-assure { margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: grid; gap: 11px; list-style: none; }
.pn2-assure li { display: flex; gap: 11px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.pn2-assure svg { width: 18px; height: 18px; flex: none; margin-top: 2px; fill: none; stroke: var(--green); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pn2-assure b { color: var(--ink); font-weight: 600; }

/* the includes list belongs below the fold, not wedged into the buy box */
.woocommerce div.product .pn-includes { margin-top: 24px; }

/* duration tiles for the variable product */
.pick-days { margin-top: 24px; }
.days { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
/* The tile is the <label> itself: one <b> for the duration, one <span> for the price.
   These rules used to dress the inner <span> as the tile, from an older markup where a
   span wrapped both -- which drew a second bordered box around the price inside the
   first. The label carries the tile; the span is just a line of text. */
.day { position: relative; cursor: pointer; }
.day input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.day b { display: block; font-family: var(--disp); font-size: 17px; font-weight: 600;
  letter-spacing: -.01em; color: var(--ink); }
.day span { display: block; border: 0; padding: 0; background: none; border-radius: 0;
  font-size: 13px; font-weight: 600; color: var(--ink-3); margin-top: 3px;
  font-variant-numeric: tabular-nums; }
.day:hover { border-color: var(--ink-3); }
.day:has(input:checked) { border-color: var(--green); background: var(--green); }
.day:has(input:checked) b, .day:has(input:checked) span { color: var(--onDark); }
.day:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 640px) { .days { grid-template-columns: repeat(2, 1fr); } }


/* =========================================================
   CART AND CHECKOUT  ·  WooCommerce Blocks
   =========================================================
   These two pages are WooCommerce Blocks: React renders them in the browser from the
   plugin's own components, so a theme template override does not apply to them the way it
   does to the product page. Shaping them is therefore CSS only, mapping the approved
   design's classes onto the ones Blocks actually emits:

     .flow   -> .wc-block-components-sidebar-layout
     .pane   -> .wc-block-cart__main / .wc-block-cart__sidebar
     .li     -> .wc-block-cart-items__row
     .tot    -> .wc-block-components-totals-item
     .grand  -> .wc-block-components-totals-footer-item
     .coupon -> .wc-block-components-totals-coupon
     .chip-on-> .wc-block-components-chip

   The plugin's own class names are its API for exactly this, but they are the plugin's to
   change: if a WooCommerce update moves them, these rules stop applying and the pages fall
   back to Blocks' default styling. They keep working -- they stop looking like the design. */

/* --- layout: form left, summary right, as .flow --- */
.wp-block-woocommerce-cart .wc-block-components-sidebar-layout {
  display: grid; grid-template-columns: 1.25fr .75fr; gap: 44px;
  align-items: start; margin-top: 28px;
}
/* Padding is left to the pane rules below -- these classes sit on the same elements. */
.wp-block-woocommerce-cart .wc-block-components-main,
.wp-block-woocommerce-cart .wc-block-components-sidebar { width: auto; float: none; }

/* --- the two panes --- */
.wc-block-components-sidebar-layout .wc-block-cart__main,
.wc-block-components-sidebar-layout .wc-block-cart__sidebar {
  background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 26px;
}
.wc-block-components-sidebar-layout .wc-block-cart__sidebar { position: sticky; top: calc(var(--chrome, 0px) + 86px); }

/* Blocks prints "PRODUCT / TOTAL" and "CART TOTALS" in caps. The design has neither: the
   line items and the money read as themselves. */
table.wc-block-cart-items .wc-block-cart-items__header { display: none; }
.wc-block-cart .wc-block-cart__totals-title {
  font-family: var(--disp); font-size: 19px; font-weight: 500; letter-spacing: -.015em;
  text-transform: none; color: var(--ink); padding: 0 0 4px;
}

/* --- line items, as .li --- */
table.wc-block-cart-items, table.wc-block-cart-items tbody,
table.wc-block-cart-items .wc-block-cart-items__row { display: block; width: 100%; }
table.wc-block-cart-items .wc-block-cart-items__row {
  display: grid; grid-template-columns: 86px 1fr auto; gap: 16px;
  align-items: start; padding: 18px 0; border: 0;
}
table.wc-block-cart-items .wc-block-cart-items__row + .wc-block-cart-items__row { border-top: 1px solid var(--line); }
table.wc-block-cart-items .wc-block-cart-items__row:first-child { padding-top: 4px; }
table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image,
table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product,
table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
  display: block; padding: 0; border: 0; width: auto;
}
table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image { border-radius: 12px; overflow: hidden; background: #DED7D1; }
table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image img { width: 86px; height: 86px; object-fit: cover; }
.wc-block-components-product-name {
  font-family: var(--disp); font-size: 16px; font-weight: 500;
  letter-spacing: -.01em; color: var(--ink); text-decoration: none;
}
.wc-block-components-product-metadata { margin-top: 5px; font-size: 12.5px; color: var(--ink-3); }
.wc-block-components-product-metadata__description { margin-top: 7px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total { text-align: right; }
.wc-block-cart-item__total .wc-block-components-product-price__value,
.wc-block-cart-item__prices .wc-block-components-product-price__value {
  font-family: var(--disp); font-size: 18px; font-weight: 600; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink);
}
table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices { display: none; }   /* the row total already says it */
.wc-block-cart-item__remove-link {
  margin-top: 9px; font-size: 12.5px; color: var(--ink-3);
  text-decoration: underline; text-underline-offset: 2px; display: block; text-align: right;
}
.wc-block-cart-item__remove-link:hover { color: var(--ink); }
/* The cart shows a real quantity stepper.
   It was hidden on the argument that a reading is bought once -- but the add-ons are not:
   someone can want two extra chapters, or a puja for two people. WooCommerce already caps
   the two products that ARE sold individually (the Online Nadi Reading and the Yantra Puja)
   at one, and Blocks prints their stepper locked, so nothing can be over-ordered. */
table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-quantity-selector{
  margin-top:10px; max-width:118px;
}

/* --- totals, as .tot --- */
.wc-block-components-totals-wrapper { border: 0; padding: 11px 0 0; }
.wc-block-components-totals-wrapper::after { display: none; }
.wc-block-components-totals-item {
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 14.5px; color: var(--ink-2); padding: 0;
}
.wc-block-components-totals-item__value {
  font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums;
}
.wc-block-components-totals-discount .wc-block-components-totals-item__value { color: var(--green); }
.wc-block-components-totals-footer-item {
  border-top: 1px solid var(--line); padding-top: 14px; margin-top: 3px; align-items: baseline;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-size: 15px; color: var(--ink); font-weight: 600;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--disp); font-size: 26px; font-weight: 600; letter-spacing: -.02em;
}
/* Only the "includes tax" note is small. `-tax-value` is NOT that note: it is the grand
   total amount itself, nested inside __value, so it inherits the 26px figure above. */
.wc-block-components-totals-item__description { font-size: 12px; color: var(--ink-3); }
.wc-block-components-totals-footer-item .wc-block-components-totals-footer-item-tax-value {
  font-size: inherit; font-weight: inherit; color: inherit;
}

/* --- coupon, as .coupon and .chip-on --- */
.wc-block-components-totals-coupon .wc-block-components-panel__button {
  font-size: 13.5px; font-weight: 600; color: var(--green); padding: 0;
}
.wc-block-components-totals-coupon__form { display: flex; gap: 8px; margin-top: 16px; }
.wc-block-components-totals-coupon input[type="text"] {
  flex: 1; font: inherit; font-size: 14.5px; background: #fff;
  border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 14px;
}
.wc-block-components-totals-coupon input[type="text"]:focus { outline: none; border-color: var(--green); }
.wc-block-components-chip.wc-block-components-chip {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  background: #E7F0EE; border: 1px solid #BFD8D5; border-radius: 999px;
  padding: 6px 12px; font-size: 12.5px; font-weight: 600; color: var(--green);
}
.wc-block-components-chip__remove { color: var(--ink-3); }

/* --- the button, as .btn-primary --- */
.wc-block-cart__submit-container { padding: 18px 0 0; }
.wc-block-cart__submit-button, .wc-block-components-button {
  border-radius: 999px !important; background: var(--green) !important;
  border: 1px solid var(--green) !important; width: 100%;
  font-family: var(--body); font-size: 14.5px; font-weight: 600; padding: 13px 24px;
  color: var(--onDark) !important; -webkit-text-fill-color: var(--onDark) !important;
}
.wc-block-cart__submit-button:hover, .wc-block-components-button:hover {
  background: var(--green-d) !important; border-color: var(--green-d) !important;
}

/* --- tablet and phone --- */
@media (max-width: 1000px) {
  .wp-block-woocommerce-cart .wc-block-components-sidebar-layout {
    grid-template-columns: 1.15fr .85fr; gap: 26px;
  }
  .wc-block-components-sidebar-layout .wc-block-cart__main,
  .wc-block-components-sidebar-layout .wc-block-cart__sidebar { padding: 22px; }
}
@media (max-width: 640px) {
  .wp-block-woocommerce-cart .wc-block-components-sidebar-layout {
    grid-template-columns: none; gap: 14px; margin-top: 20px;
  }
  .wc-block-cart__sidebar { position: static; }
  .wc-block-components-sidebar-layout .wc-block-cart__main,
  .wc-block-components-sidebar-layout .wc-block-cart__sidebar { padding: 18px; border-radius: 16px; }
  /* Blocks styles these rows twice over: once under its own `(max-width: 699px)` query as
     `.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row`, and again with no
     query at all via the `.is-mobile` / `.is-small` container classes it puts on the wrapper.
     Both outrank a bare `table.wc-block-cart-items ...`, which is why the price kept printing
     on top of the description. Repeating the cart class wins on specificity against both. */
  /* Two columns on a phone, and the money goes on its own row UNDER the description.
     Placing only the total explicitly was not enough: the product cell auto-placed into
     row 1 column 2 as well, and the price printed on top of the description. Every cell is
     therefore given both its row and its column. */
  .wc-block-cart.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row { grid-template-columns: 64px 1fr; gap: 6px 12px; }
  .wc-block-cart.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image { grid-column: 1; grid-row: 1 / span 2; }
  .wc-block-cart.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image img { width: 64px; height: 64px; }
  .wc-block-cart.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product { grid-column: 2; grid-row: 1; }
  .wc-block-cart.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total { grid-column: 2; grid-row: 2; text-align: left; }
  .wc-block-cart-item__remove-link { text-align: left; }
}

/* The button rule above is deliberately broad, because Blocks uses the same component for
   "Proceed to Checkout" and "Place order". The coupon's Apply button is the same component
   at a different size, so it takes its own width and padding back. */
.wc-block-components-totals-coupon__form .wc-block-components-button {
  width: auto; flex: none; padding: 11px 18px; font-size: 13.5px;
}
.wc-block-components-chip__remove { background: none !important; border: 0 !important; padding: 0; width: auto; }


/* ---------- checkout ----------
   Blocks renders checkout with its own class set, distinct from the cart's: each section is
   a .wc-block-components-checkout-step, which is exactly the design's .pane, and the order
   summary is .wc-block-components-order-summary rather than the cart table. */

.wp-block-woocommerce-checkout .wc-block-components-sidebar-layout {
  display: grid; grid-template-columns: 1.25fr .75fr; gap: 44px;
  align-items: start; margin-top: 28px;
}
.wp-block-woocommerce-checkout .wc-block-components-main,
.wp-block-woocommerce-checkout .wc-block-components-sidebar { width: auto; float: none; }

/* each step is a pane */
.wc-block-checkout .wc-block-components-checkout-step {
  background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  padding: 26px; margin: 0 0 18px;
}
.wc-block-checkout .wc-block-components-checkout-step__heading { margin: 0 0 4px; }
.wc-block-checkout .wc-block-components-checkout-step__title {
  font-family: var(--disp); font-size: 19px; font-weight: 500;
  letter-spacing: -.015em; text-transform: none; color: var(--ink);
}
.wc-block-checkout .wc-block-components-checkout-step__description {
  font-size: 13px; line-height: 1.55; color: var(--ink-3); margin-top: 7px;
}
.wc-block-checkout .wc-block-components-checkout-step__container::after { display: none; }
.wc-block-checkout .wc-block-components-checkout-step__content { padding: 0; margin-top: 6px; }

/* the sidebar is one pane */
.wc-block-components-sidebar-layout .wc-block-checkout__sidebar {
  background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  padding: 26px; position: sticky; top: calc(var(--chrome, 0px) + 86px);
}
.wc-block-components-checkout-order-summary__title { padding: 0 0 4px; }
.wc-block-components-checkout-order-summary__title-text {
  font-family: var(--disp); font-size: 19px; font-weight: 500;
  letter-spacing: -.015em; text-transform: none; color: var(--ink);
}

/* Form fields, as .fld -- but only the BOX is ours.
   Blocks floats each label inside its control, positioned absolutely against a fixed 50px
   height and a large top padding. Setting our own padding/height collapsed the select to
   27px and the label then sat on top of "India", hiding the chosen country. So these rules
   restyle border, radius, background and colour, and leave every metric to Blocks. */
/* Blocks writes these as `.wc-block-components-text-input input[type="email"]` and friends,
   which TIES this rule on specificity -- and its checkout stylesheet is enqueued after the
   theme's, so on a tie it wins and the inputs kept a 4px radius. Matching `input[type]` adds
   the attribute and breaks the tie without reaching for !important. */
.wc-block-checkout .wc-block-components-text-input input[type],
.wc-block-checkout .wc-blocks-components-select__select,
.wc-block-checkout .wc-block-components-textarea {
  font-family: var(--body); color: var(--ink);
  background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
  transition: border-color .2s ease;
}
.wc-block-checkout .wc-block-components-text-input input[type]:focus,
.wc-block-checkout .wc-blocks-components-select__select:focus,
.wc-block-checkout .wc-block-components-textarea:focus { outline: none; border-color: var(--green); }
.wc-block-checkout .wc-block-components-text-input label,
.wc-block-checkout .wc-blocks-components-select__label { color: var(--ink-3); }

/* payment options and the terms line */
.wc-block-checkout .wc-block-components-radio-control__option { padding: 12px 14px 12px 42px; }
.wc-block-checkout .wc-block-components-radio-control__option-checked { border-color: var(--green); }
.wc-block-checkout .wc-block-checkout__terms { font-size: 12.5px; color: var(--ink-3); }

/* Order summary rows, as the cart's .li at sidebar scale.
   Blocks lays this row out with `.wc-block-components-order-summary .wc-block-components-
   order-summary-item{display:flex}`, so the ancestor has to be named here too -- without it
   the row stayed flex and every grid placement below was inert. */
.wc-block-components-order-summary .wc-block-components-order-summary-item {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 12px;
  align-items: start; padding: 16px 0; border: 0;
}
.wc-block-components-order-summary .wc-block-components-order-summary-item + .wc-block-components-order-summary-item {
  border-top: 1px solid var(--line);
}
.wc-block-components-order-summary .wc-block-components-order-summary-item__image { width: 56px; padding: 0; }
.wc-block-components-order-summary-item__image img {
  width: 56px; height: 56px; object-fit: cover; border-radius: 10px; background: #DED7D1;
}
/* The checkout summary shows the count again: now that the cart has a stepper, an order
   can genuinely hold two of an add-on, and hiding the badge would under-state the total. */
.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity { display: flex; }
.wc-block-components-order-summary-item__description .wc-block-components-product-name {
  font-family: var(--disp); font-size: 15px; font-weight: 500; color: var(--ink);
}
.wc-block-components-order-summary .wc-block-components-order-summary-item__individual-prices { display: none; }
.wc-block-components-order-summary-item__total-price {
  font-family: var(--disp); font-size: 16px; font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink);
}

/* place order button */
.wc-block-components-checkout-place-order-button {
  border-radius: 999px !important; background: var(--green) !important;
  border: 1px solid var(--green) !important; width: 100%;
  font-family: var(--body); font-size: 14.5px; font-weight: 600; padding: 14px 24px;
  color: var(--onDark) !important; -webkit-text-fill-color: var(--onDark) !important;
}
.wc-block-components-checkout-place-order-button:hover {
  background: var(--green-d) !important; border-color: var(--green-d) !important;
}

@media (max-width: 1000px) {
  .wp-block-woocommerce-checkout .wc-block-components-sidebar-layout {
    grid-template-columns: 1.15fr .85fr; gap: 26px;
  }
  /* On a tablet the sidebar is only ~295px wide, and once the 56px thumbnail and the price
     column have taken their share the product name was left with 83px -- "Home Puja (Fire
     Ceremony)" wrapped to roughly one character per line. Below this width the price moves
     to its own row under the name, and every cell is placed explicitly so nothing
     auto-places back on top of anything else. */
  .wp-block-woocommerce-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item {
    grid-template-columns: 56px 1fr; gap: 4px 12px;
  }
  .wp-block-woocommerce-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__image {
    grid-column: 1; grid-row: 1 / span 2;
  }
  .wp-block-woocommerce-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__description {
    grid-column: 2; grid-row: 1;
  }
  .wp-block-woocommerce-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__total-price {
    grid-column: 2; grid-row: 2; text-align: left;
  }
  .wc-block-checkout .wc-block-components-checkout-step,
  .wc-block-components-sidebar-layout .wc-block-checkout__sidebar { padding: 22px; }
}
@media (max-width: 640px) {
  .wp-block-woocommerce-checkout .wc-block-components-sidebar-layout {
    grid-template-columns: none; gap: 14px; margin-top: 20px;
  }
  .wc-block-components-sidebar-layout .wc-block-checkout__sidebar { position: static; }
  .wc-block-checkout .wc-block-components-checkout-step,
  .wc-block-components-sidebar-layout .wc-block-checkout__sidebar {
    padding: 18px; border-radius: 16px; margin-bottom: 14px;
  }
}


/* =========================================================
   THE BUYING FLOW, IN THE DESIGN'S OWN CLASSES
   =========================================================
   The order-received, order-pay and account pages are CLASSIC WooCommerce templates, not
   Blocks -- so unlike cart and checkout they can be overridden outright, and the overrides
   below use the approved design's own class names (.flow, .pane, .li, .tot, .steps, .done,
   .ord) rather than mapping onto WooCommerce's. This block is that design's stylesheet,
   lifted unchanged from the approved page, so those templates need no translation layer. */
/* ---------- cart · checkout · account · order received ----------
   One stylesheet for the whole buying flow. Desktop and tablet put the form on the left and a
   sticky summary on the right. The phone gets what a shopping app gets: a summary it can
   collapse, and the money and the button pinned to the bottom of the screen. */
.flow{display:grid;grid-template-columns:1.25fr .75fr;gap:44px;align-items:start;margin-top:28px}
.pane{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px}
.pane + .pane{margin-top:18px}
.pane h2{font-size:19px;font-weight:500;letter-spacing:-.015em}
.pane .hint{margin-top:7px;font-size:13px;line-height:1.55;color:var(--ink-3)}

/* line items */
.li{display:grid;grid-template-columns:86px 1fr auto;gap:16px;align-items:start;padding:18px 0}
.li + .li{border-top:1px solid var(--line)}
.li:first-of-type{padding-top:4px}
.li .th{border-radius:12px;overflow:hidden;background:#DED7D1}
.li .th img{width:86px;height:86px;object-fit:cover}
.li h3{font-size:16px;font-weight:500;letter-spacing:-.01em}
.li .meta{margin-top:5px;font-size:12.5px;color:var(--ink-3)}
.li .desc{margin-top:7px;font-size:13px;line-height:1.5;color:var(--ink-2)}
.li .amt{font-family:var(--disp);font-size:18px;font-weight:600;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.li .rm{margin-top:9px;font-size:12.5px;color:var(--ink-3);text-decoration:underline;
  text-underline-offset:2px;display:block;text-align:right}
.li .rm:hover{color:var(--ink)}
.qty{display:inline-flex;align-items:center;gap:0;border:1.5px solid var(--line);border-radius:999px;
  margin-top:10px;overflow:hidden;background:#fff}
.qty button{width:32px;height:30px;display:grid;place-items:center;color:var(--ink-2)}
.qty button:hover{background:rgba(12,9,4,.05);color:var(--ink)}
.qty span{min-width:26px;text-align:center;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}

/* totals */
.tot{display:grid;gap:11px}
.tot div{display:flex;justify-content:space-between;gap:16px;font-size:14.5px;color:var(--ink-2)}
.tot div b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.tot .disc b{color:var(--green)}
.tot .grand{border-top:1px solid var(--line);padding-top:14px;margin-top:3px;align-items:baseline}
.tot .grand span{font-size:15px;color:var(--ink);font-weight:600}
.tot .grand b{font-family:var(--disp);font-size:26px;font-weight:600;letter-spacing:-.02em}
.sum{position:sticky;top:calc(var(--chrome,0px) + 86px)}
.coupon{display:flex;gap:8px;margin-top:16px}
.coupon input{flex:1;font:inherit;font-size:14.5px;background:#fff;border:1.5px solid var(--line);
  border-radius:12px;padding:11px 14px}
.coupon input:focus{outline:none;border-color:var(--green)}
.coupon .btn{padding:11px 18px;font-size:13.5px}
.chip-on{display:inline-flex;align-items:center;gap:8px;margin-top:12px;background:#E7F0EE;
  border:1px solid #BFD8D5;border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:600;color:var(--green)}
.chip-on a{color:var(--ink-3);text-decoration:underline;text-underline-offset:2px}
.trust{margin-top:18px;display:grid;gap:10px}
.trust li{display:flex;gap:11px;align-items:flex-start;font-size:13px;line-height:1.5;color:var(--ink-2)}
.trust svg{width:17px;height:17px;flex:none;margin-top:1px;fill:none;stroke:var(--green);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* forms */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fld{margin-top:15px}
.fld label{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:7px}
.fld input,.fld select,.fld textarea{width:100%;font:inherit;font-size:15px;color:var(--ink);
  background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;
  transition:border-color .2s ease}
.fld textarea{min-height:88px;resize:vertical}
.fld select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6.5L8 10.5l4-4' fill='none' stroke='%238E8880' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:16px;padding-right:38px}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--green)}
.check{display:flex;gap:11px;align-items:flex-start;margin-top:14px;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.check input{margin-top:2px;width:17px;height:17px;accent-color:var(--green);flex:none}
.pay{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.pay span{border:1px solid var(--line);border-radius:7px;padding:5px 10px;font-size:11.5px;font-weight:600;color:var(--ink-3)}
.legalnote{margin-top:16px;font-size:12.5px;line-height:1.55;color:var(--ink-3)}
.legalnote a{color:var(--green);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* order received */
.done{text-align:center;max-width:56ch;margin:0 auto}
.done .tick{width:62px;height:62px;border-radius:50%;background:var(--green);margin:0 auto;
  display:grid;place-items:center}
.done .tick svg{width:28px;height:28px;fill:none;stroke:var(--onDark);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.done h1{margin-top:20px;font-size:clamp(26px,3cqw,38px);font-weight:300;letter-spacing:-.025em;line-height:1.14}
.done p{margin-top:14px;font-size:16px;line-height:1.7;color:var(--ink-2)}
.ord{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:28px}
.ord div{background:var(--card);padding:16px 18px}
.ord b{display:block;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.ord span{display:block;margin-top:6px;font-family:var(--disp);font-size:16px;font-weight:500;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums}

/* the phone gets a pinned money bar, like every shopping app */
.paybar,.mini{display:none}

.steps{display:grid;gap:0}
.steps li{position:relative;padding:0 0 24px 52px}
.steps li::before{content:"";position:absolute;left:15px;top:32px;bottom:-4px;width:1px;
  background:repeating-linear-gradient(180deg,var(--line) 0 5px,transparent 5px 10px)}
.steps li:last-child{padding-bottom:0}
.steps li:last-child::before{display:none}
.steps .n{position:absolute;left:0;top:0;width:31px;height:31px;border-radius:50%;display:grid;
  place-items:center;background:var(--green);color:var(--onDark);font-family:var(--disp);
  font-size:12.5px;font-weight:600}
.steps h3{font-size:16.5px;font-weight:500;letter-spacing:-.01em}
.steps p{margin-top:5px;font-size:14px;line-height:1.6;color:var(--ink-2)}

@container (min-width:641px) and (max-width:1000px){
  .flow{grid-template-columns:1.15fr .85fr;gap:26px}
  .pane{padding:22px}
  .ord{grid-template-columns:1fr 1fr}
}

@container (max-width:640px){
  .flow{grid-template-columns:none;gap:0;margin-top:20px}
  .sum{position:static}
  .pane{padding:18px;border-radius:16px}
  .pane + .pane{margin-top:14px}
  .flow > div + div{margin-top:14px}
  .grid2{grid-template-columns:1fr;gap:0}
  .li{grid-template-columns:70px 1fr;gap:13px}
  .li .th img{width:70px;height:70px}
  .li .amt{grid-column:2;font-size:17px}
  .li .rm{text-align:left;margin-top:7px}
  .ord{grid-template-columns:1fr 1fr}
  .done .tick{width:54px;height:54px}
  .done h1{font-size:25px}
  .done p{font-size:15px}
  .mini{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;
    padding:0 16px;margin-bottom:14px}
  .mini summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:14px 0}
  .mini summary::-webkit-details-marker{display:none}
  .mini summary .lab{flex:1;font-size:14px;font-weight:600}
  .mini summary .amt{font-family:var(--disp);font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
  .mini summary .sign{position:relative;width:14px;height:14px;flex:none}
  .mini summary .sign::before,.mini summary .sign::after{content:"";position:absolute;background:var(--green);border-radius:2px}
  .mini summary .sign::before{left:0;right:0;top:6px;height:1.7px}
  .mini summary .sign::after{top:0;bottom:0;left:6px;width:1.7px;transition:transform .2s ease}
  .mini[open] summary .sign::after{transform:scaleY(0)}
  .mini .body{padding:2px 0 16px;border-top:1px solid var(--line)}
  .paybar{display:block;position:sticky;bottom:64px;height:0;z-index:30}
  .paybar .in2{position:absolute;left:10px;right:10px;bottom:0;display:flex;align-items:center;gap:12px;
    background:var(--card);border:1px solid var(--line);border-radius:18px;padding:9px 9px 9px 16px;
    box-shadow:0 14px 34px rgba(12,9,4,.22)}
  .paybar .pz{flex:1;min-width:0;line-height:1.15}
  .paybar .pz b{display:block;font-family:var(--disp);font-size:19px;font-weight:600;letter-spacing:-.02em}
  .paybar .pz span{display:block;font-size:10.5px;color:var(--ink-3);font-weight:600;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .paybar .btn{padding:12px 20px;font-size:14px}
}

@container (max-width:640px){
  .steps li{padding:0 0 20px 46px}
  .steps li::before{left:14px;top:30px}
  .steps .n{width:29px;height:29px;font-size:12px}
  .steps h3{font-size:15.5px}
  .steps p{font-size:13.5px}
}

@container (max-width:640px){
  .links404{gap:10px 18px;margin-top:22px}
  .orow{grid-template-columns:1fr auto;gap:8px 12px;padding:14px 0}
  .orow .m2{grid-column:1/-1}
  .orow .amt{grid-column:1}
  .orow .btn{grid-column:2;grid-row:3}
}

/* WooCommerce prints a price as `<span class="…currencySymbol">₹</span>12,500`, which the
   narrow meta-strip column was free to break between -- the total read "₹" on one line and
   "12,500" on the next. Only the money is held together; the payment method beside it is
   long ("UPI, Cards, NetBanking") and must still be allowed to wrap. */
.ord .woocommerce-Price-amount { white-space: nowrap; }
/* The design's own `.ord span{display:block}` stacks the value under its label -- but it
   also caught WooCommerce's NESTED price spans, so the ₹ became a block of its own and the
   total read "₹" above "12,500". Only the outer span is the design's; the price markup
   inside it goes back to inline. */
.ord .woocommerce-Price-amount,
.ord .woocommerce-Price-currencySymbol { display: inline; }


/* ---------- empty cart ----------
   Blocks again, so CSS only. The copy and the three hand-picked products are already set in
   the block itself; this gives them the design's centred pane and its product tiles. */

.wp-block-woocommerce-empty-cart-block {
  background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  padding: 44px 26px; margin-top: 26px; text-align: center;
}
.wc-block-cart__empty-cart__title {
  font-family: var(--disp); font-size: 22px; font-weight: 400;
  letter-spacing: -.015em; color: var(--ink); margin: 0;
}
/* Blocks ships a large bag emoji/illustration above the title via ::before. The design has a
   drawn bag in a circle instead, so the shipped one is replaced rather than hidden. */
.wc-block-cart__empty-cart__title::before {
  content: ""; display: block; width: 58px; height: 58px; margin: 0 auto 18px;
  border-radius: 50%; background: var(--paper-2) center/25px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E8880' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12H6z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E");
  border: 1px solid var(--line);
}
.wp-block-woocommerce-empty-cart-block > p {
  max-width: 44ch; margin: 10px auto 0; font-size: 14.5px;
  line-height: 1.55; color: var(--ink-3);
}
.wp-block-woocommerce-empty-cart-block > h3 {
  font-family: var(--disp); font-size: 19px; font-weight: 400;
  letter-spacing: -.015em; color: var(--ink); margin: 34px 0 0;
}

/* the three suggestions, as the shop tiles */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin: 20px 0 0; padding: 0; list-style: none;
}
/* Blocks lays the grid out with flex and caps each item at `max-width: 33.3333%`. Once the
   list is a real CSS grid that percentage resolves against the TRACK, not the row, so each
   tile shrank to a third of its own column -- 132px inside a 396px track. The flex sizing
   has to be cleared, not just overridden. */
.wp-block-woocommerce-empty-cart-block .wc-block-grid.has-3-columns .wc-block-grid__product {
  max-width: none; width: auto; flex: initial;
  margin: 0; padding: 0; text-align: left;
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--paper-2);
  /* The reading carries a sale line the pujas do not, so its button sat lower than the
     other two. Each tile is a column and the button is pushed to its foot, which lines
     all three up whatever sits above them. */
  display: flex; flex-direction: column;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image { margin: 0; }
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title {
  font-family: var(--disp); font-size: 15.5px; font-weight: 500;
  color: var(--ink); padding: 14px 16px 0;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price {
  font-family: var(--disp); font-size: 15px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--ink-2); padding: 6px 16px 0;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart { padding: 14px 16px 16px; margin: auto 0 0; }
.wp-block-woocommerce-empty-cart-block .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--green); border: 1px solid var(--green);
  font-family: var(--body); font-size: 13.5px; font-weight: 600; padding: 10px 18px;
  color: var(--onDark) !important; -webkit-text-fill-color: var(--onDark) !important;
}
.wp-block-woocommerce-empty-cart-block .wp-block-button__link:hover {
  background: var(--green-d); border-color: var(--green-d);
}

@container (min-width:641px) and (max-width:1000px){
  .wp-block-woocommerce-empty-cart-block { padding: 34px 22px; }
  .wp-block-woocommerce-empty-cart-block .wc-block-grid__products { gap: 14px; }
}
@container (max-width:640px){
  .wp-block-woocommerce-empty-cart-block { padding: 30px 18px; border-radius: 16px; }
  .wp-block-woocommerce-empty-cart-block .wc-block-grid__products { grid-template-columns: 1fr; gap: 12px; }
}


/* =========================================================
   THE SHOP ARCHIVE, IN THE DESIGN'S OWN CLASSES
   =========================================================
   /shop/ is a WooCommerce ARCHIVE, so parts/shop.php -- which carries the approved markup and
   this CSS -- never rendered for it: page.php only runs for real pages. The archive showed
   WooCommerce's default product grid instead, which is what "this is not what I designed"
   was looking at. woocommerce/archive-product.php now draws the approved page from real
   products, and these are that page's own rules, lifted unchanged. */
.block{padding:56px 0}
.block .in{max-width:1240px;margin:0 auto;padding:0 44px}
.block .kicker{margin-bottom:12px}
.b-1{background:var(--paper)}
.b-2{background:#FBF9F7}
.b-3{background:#E4DCD5}
.b-green{background:linear-gradient(180deg,#1A6C68 0%,#16615E 55%,#0E4A47 100%);color:var(--onDark)}
.b-green .kicker{color:var(--onDark-3)}
.b-green .sechead{color:var(--onDark)}
.brk{display:block;height:360px;overflow:hidden;background:var(--green-d)}
.brk figure{margin:0;height:100%}
.brk img{width:100%;height:100%;object-fit:cover}
.brk .tall{display:none}
.chips{display:flex;gap:8px;margin-top:22px;flex-wrap:wrap}
.chip{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:9px 18px;
  font-size:13.5px;font-weight:600;color:var(--ink-2);transition:border-color .2s ease,background .2s ease,color .2s ease}
.chip:hover{border-color:var(--ink-3)}
.chip[aria-pressed="true"]{border-color:var(--green);background:var(--green);color:var(--onDark)}
.railwrap{position:relative;margin-top:26px}
.cards{display:grid;grid-auto-flow:column;grid-auto-columns:296px;gap:18px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;
  margin:0 -44px;padding:4px 44px 6px}
.cards::-webkit-scrollbar{display:none}
.card{scroll-snap-align:start;display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--line);border-radius:18px;overflow:hidden;
  transition:border-color .2s ease,box-shadow .2s ease}
.card:hover{border-color:var(--ink-3);box-shadow:0 12px 28px rgba(12,9,4,.09)}
.card[hidden]{display:none}
.card .ph{position:relative;background:#DED7D1}
.card .ph img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.arrows{display:flex;gap:8px;margin-top:14px}
.arrow{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line);background:#fff;
  display:grid;place-items:center;transition:border-color .2s ease,background .2s ease,opacity .2s ease}
.arrow:hover{border-color:var(--ink-3);background:rgba(12,9,4,.03)}
.arrow svg{width:16px;height:16px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.arrow[disabled]{opacity:.3;pointer-events:none}
.card .tag{position:absolute;left:12px;top:12px;background:var(--gold);color:#241C08;
  border-radius:999px;padding:5px 11px;font-size:11.5px;font-weight:700}
.card .bd{padding:17px 18px 18px;display:flex;flex-direction:column;flex:1}
.card .cat{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.card h3{margin-top:7px;font-size:18px;font-weight:500;letter-spacing:-.015em;text-wrap:pretty}
.card p{margin-top:7px;font-size:13.5px;line-height:1.5;color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .pz{margin-top:auto;padding-top:14px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.card .pz b{font-family:var(--disp);font-size:23px;font-weight:600;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.card .pz s{font-size:15px;color:var(--ink-3)}
.card .note{margin-top:4px;font-size:12px;color:var(--ink-3)}
.card .btn{margin-top:14px;width:100%;padding:11px 18px;font-size:13.5px}
.card .gst{display:none}
.acc details{border-bottom:1px solid var(--line)}
.acc details:first-of-type{border-top:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:16px;padding:18px 0}
.acc summary::-webkit-details-marker{display:none}
.acc h3{flex:1;font-size:17.5px;font-weight:400}
.acc .sign{position:relative;width:17px;height:17px;flex:none;margin-top:4px}
.acc .sign::before,.acc .sign::after{content:"";position:absolute;background:var(--green);border-radius:2px}
.acc .sign::before{left:0;right:0;top:8px;height:1.8px}
.acc .sign::after{top:0;bottom:0;left:8px;width:1.8px;transition:transform .2s ease}
.acc details[open] .sign::after{transform:scaleY(0)}
.acc details[open] h3{color:var(--green)}
.acc .body{padding:0 30px 20px 0;font-size:15px;line-height:1.7;color:var(--ink-2);max-width:68ch}
.acc .body p + p{margin-top:12px}
.acc .body li{position:relative;padding-left:18px;margin-top:7px}
.acc .body li::before{content:"";position:absolute;left:2px;top:9px;width:5px;height:5px;border-radius:50%;background:var(--green)}
.b-green .quote{border-color:transparent}

@container (min-width:641px) and (max-width:1000px){
  .block{padding:40px 0}
  .block .in{padding:0 26px}
  .brk{height:300px}
  .cards{grid-auto-columns:268px;gap:16px;margin:0 -26px;padding:4px 26px 6px}
}

@container (max-width:640px){
  .buy .kicker{font-size:10.5px}
  .buy .lede{font-size:14px;margin-top:10px;max-width:none}
  .block{padding:30px 0}
  .block .in{padding:0 16px}
  .brk{height:250px}
  .brk .wide{display:none}
  .brk .tall{display:block}
  .sechead{font-size:21px}
  .railwrap{margin-top:20px}
  .cards{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:1fr;gap:12px;
    overflow:visible;margin:0;padding:0}
  .arrows{display:none}
  .card{display:grid;grid-template-columns:104px 1fr;align-items:start;gap:0}
  .card .ph{margin:12px 0 12px 12px;border-radius:12px;overflow:hidden}
  .card .ph img{width:104px;height:104px;aspect-ratio:1/1;object-fit:cover}
  .card .tag{left:6px;top:6px;padding:3px 7px;font-size:9.5px}
  .card .bd{padding:13px 14px 14px}
  .card h3{font-size:16px;margin-top:6px;letter-spacing:-.02em;text-wrap:pretty}
  .card p{font-size:12.5px;margin-top:5px;-webkit-line-clamp:2}
  .card .pz{margin-top:auto;padding-top:11px}
  .card .pz b{font-size:22px}
  .card .btn{margin-top:13px;padding:11px 16px;font-size:13.5px}
  .card .gst{display:none}
  .chips{gap:7px;margin-top:18px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin-right:-16px;padding-right:16px}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none;padding:8px 15px;font-size:13px}
  .acc summary{padding:15px 0;gap:13px}
  .acc h3{font-size:16px}
  .acc .body{font-size:14px;padding:0 20px 16px 0}
}

/* WordPress's standard screen-reader utility, which this theme never carried.
   WooCommerce puts the spoken form of a variable product's price range in one of these
   ("Price range: ₹9,600 through ₹48,000"), so on the shop card it printed straight after the
   visible price. It is clipped rather than hidden: `display:none` would take it away from
   screen readers too, which is the opposite of the point. */
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
  position: static !important; width: auto; height: auto; margin: 0;
  overflow: visible; clip: auto; clip-path: none; white-space: normal;
}

/* The phone buy bar's price.
   `.buybar .pz b` is a block in the approved CSS, and WooCommerce nests the currency symbol
   in its own span, so the bar read "₹" above "12,500". Same fix as the confirmation page:
   the price markup inside goes back to inline, and the amount is held on one line. */
.buybar .pz b .woocommerce-Price-amount,
.buybar .pz b .woocommerce-Price-currencySymbol { display: inline; }
.buybar .pz b .woocommerce-Price-amount { white-space: nowrap; }
.buybar .pz b { white-space: nowrap; }

/* ==========================================================
   THE PHONE MUST ALWAYS HAVE A REAL BUY BUTTON
   ==========================================================
   The approved product page hides .acts below 640px and relies entirely on the floating
   .buybar. That makes the ONLY way to buy on a phone depend on `position:sticky` working
   inside a `container-type:inline-size` ancestor -- and when it did not, the page had no buy
   button at all. It has already failed twice that way.

   So the inline buttons come back on the phone. The floating bar stays: it is the design, and
   it is genuinely useful once the buy box has scrolled away. The button in the page is the
   guarantee underneath it.

   Specificity has to beat the part's own `@container (max-width:640px){.acts{display:none}}`,
   which is printed inline in the body and therefore later in the cascade than this file. */
@media (max-width: 640px) {
  .pdp .buy form.cart .acts { display: flex; }
}
@container (max-width: 640px) {
  .pdp .buy form.cart .acts { display: flex; }
}

/* ---------- empty-cart tiles: image fill and price layout ----------
   Two things the shipped markup brings with it:
   1. the thumbnail carries its own width attribute (300px) inside a wider tile, so it sat
      short of the edge with a blank strip beside it. Blocks' own rule is
      `.wc-block-grid__product-image img`, so this one names the block as well to win;
   2. functions.php prints the loop price as .pn-loop-was / .pn-loop-now plus a trailing
      <small>. The old theme styled those; this one never did, so the was-price, the price
      and "first reading, with code BLESSING" ran together as one grey string. */
/* The image was already width:100% -- it was its CONTAINER that stopped at 300px inside a
   354px tile, which is what left the blank strip beside every thumbnail. */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-link,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image a {
  display: block; width: 100%; max-width: none;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image a img {
  width: 100%; max-width: none; height: auto; aspect-ratio: 4/3; object-fit: cover; display: block;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price { line-height: 1.5; }
.wp-block-woocommerce-empty-cart-block .pn-loop-was {
  text-decoration: line-through; color: var(--ink-3); font-weight: 400; margin-right: 6px;
}
.wp-block-woocommerce-empty-cart-block .pn-loop-now { color: var(--ink); font-weight: 600; }
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price small,
.wp-block-woocommerce-empty-cart-block .pn-loop-price small {
  display: block; margin-top: 4px; font-size: 12px; font-weight: 400; color: var(--ink-3);
}

/* The payment marks line ("UPI · GPay · Cards — secured by Razorpay").
   functions.php prints it straight after the payment step with no spacing of its own, so it
   collided with the next pane and read as though it belonged to it. It is a caption for the
   payment step, and now sits like one. */
.pn-paymarks-block {
  margin: -6px 0 20px; padding: 0 26px; font-size: 12.5px; line-height: 1.6; color: var(--ink-3);
}
@media (max-width: 640px) { .pn-paymarks-block { padding: 0 18px; margin-bottom: 16px; } }

/* The first-reading discount is applied automatically for every cart that holds the reading,
   so the chip does not offer a way to take it off. It used to: pressing it fought the
   theme's auto-apply, which put the discount straight back and printed a "coupon removed"
   message that was not true. A control that cannot do what it says is worse than no control.
   Coupons the customer typed in themselves keep their remove button. */
.wc-block-components-chip__text[aria-label*="blessing" i] + .wc-block-components-chip__remove,
.wc-block-components-chip:has(.wc-block-components-chip__text:not([hidden])) .wc-block-components-chip__remove[aria-label*="blessing" i] {
  display: none;
}

/* ==========================================================
   THE SERVICES PAGE IS A LIST, NOT A CAROUSEL
   ==========================================================
   The approved shop page scrolls its cards sideways behind prev/next arrows. On a page whose
   whole job is to show everything we offer, that hides half of it behind a control people
   have to find. Five services fit on one screen, so they are laid out and left visible. The
   arrows are gone from the markup; these rules undo the rail itself. */
.woocommerce .cards,
.detail .cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;
  grid-auto-flow:row;grid-auto-columns:auto;
  margin:28px 0 0;padding:0;overflow:visible;scroll-snap-type:none;
}
.detail .cards .card{
  display:flex;flex-direction:column;height:100%;scroll-snap-align:none;
  background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  transition:box-shadow .2s ease,border-color .2s ease;
}
.detail .cards .card:hover{border-color:var(--ink-3);box-shadow:0 10px 30px rgba(12,9,4,.10)}
.detail .cards .card .ph{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;background:#DED7D1}
.detail .cards .card .ph img{width:100%;height:100%;object-fit:cover;display:block}
.detail .cards .card .bd{display:flex;flex-direction:column;flex:1;padding:14px 16px 16px;gap:6px}
.detail .cards .card h3 a{color:var(--ink)}
/* price sits at the foot of the text so every card's buttons line up */
.detail .cards .card .pz{margin-top:auto;padding-top:10px}
.detail .cards .card .note{font-size:12px;color:var(--ink-3)}
.detail .cards .card .gst{display:none}          /* the page already says prices include GST */
.detail .cards .card .pacts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.detail .cards .card .pacts .btn{width:100%;justify-content:center;padding:10px 6px;font-size:13px}
.detail .cards .card .pcart{margin:0}
.detail .cards .card .pcart .btn{width:100%}

@media (max-width: 640px){
  .detail .cards{grid-template-columns:1fr 1fr;gap:12px}
  .detail .cards .card .pacts{grid-template-columns:1fr;gap:6px}
  /* The approved phone card is a 104px thumbnail beside the text, so its photo carries
     `margin:12px 0 12px 12px` -- no right margin, because there is nothing on its right.
     This page stacks the photo above the text instead, which left the picture pushed 12px
     off-centre and touching the card's right edge. It gets the same gutter on both sides. */
  .detail .cards .card .ph{margin:12px;border-radius:12px;overflow:hidden}
}
@container (max-width: 640px){
  .detail .cards .card .ph{margin:12px;border-radius:12px;overflow:hidden}
}

/* ---------------------------------------------------------------------------
   Sections below the buy box get their vertical rhythm back.

   The approved product page is a flat run of <section class="block">; the theme
   nests that run inside the buy box's own `section.block.b-1 > div.in`. The
   reveal script marks a revealed section with `.in`, so every section below the
   buy box suddenly matched `.block .in{padding:0 44px}` -- an inner-wrapper rule
   that outranks `.block{padding:56px 0}` and flattened all of them to zero. The
   sections then butted straight against each other, headings landing a few
   pixels under the previous block's last line.

   A section that IS a block takes the block's padding, whatever else it is
   marked with. Same three steps as the approved design.
   --------------------------------------------------------------------------- */
section.block.in{padding:56px 0}
@container (min-width:641px) and (max-width:1000px){ section.block.in{padding:40px 0} }
@container (max-width:640px){ section.block.in{padding:30px 0} }

/* ---------------------------------------------------------------------------
   The coupon row: room underneath, and an Apply button that says what it is.

   Blocks prints the coupon form with no bottom padding, so the field and the
   Apply button sat directly on the rule above "Subtotal" -- they looked like
   part of that line. And Apply is `disabled` with `pointer-events:none` until a
   code is typed, while still painted in full teal: it read as a live button
   that would not respond to a click. It now dims and shows a not-allowed
   cursor while it is waiting for a code, and comes back to full strength the
   moment there is something to apply.
   --------------------------------------------------------------------------- */
.wc-block-components-totals-coupon .wc-block-components-panel__content{ padding-bottom:20px }
.wc-block-components-totals-coupon__form{ margin-bottom:0 }
.wc-block-components-totals-coupon__button.wc-block-components-button[disabled],
.wc-block-components-totals-coupon__button.wc-block-components-button:disabled{
  opacity:.45; cursor:not-allowed;
}

/* ---------------------------------------------------------------------------
   PhotoSwipe's root element takes no space until a photograph is opened.

   WooCommerce prints the lightbox markup at the end of every product page. It is
   meant to be out of flow until it opens; here it was rendering 47px tall, which
   added 47px of empty scroll under the phone tab bar -- the page scrolled past
   its own end into bare background.
   --------------------------------------------------------------------------- */
.pswp:not(.pswp--open){ display: none !important; }