/* ==========================================================================
   LIVSDO — WordPress compatibility

   The seven stylesheets loaded before this one are the approved design and are
   carried across from the HTML project unchanged. This file exists so they can
   stay that way.

   WordPress, WooCommerce and Elementor emit markup the prototype never had —
   alignment classes, caption figures, comment lists, admin-bar offsets, Woo
   notices — and that markup needs to wear the design. Everything below either
   maps a WordPress class onto a design primitive that already exists, or
   dresses something the prototype had no equivalent for.

   NOTHING here may restyle an approved component. If a rule below starts
   competing with components.css, the rule is wrong.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Accessibility classes

   WordPress core, WooCommerce and most plugins hide text with
   .screen-reader-text. The design's own equivalent is .visually-hidden. Rather
   than teach every plugin a new class name, the two are made synonyms.
   -------------------------------------------------------------------------- */

.screen-reader-text,
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* A skip link that is only visible on focus still has to be reachable. */
.screen-reader-text:focus,
.sr-only:focus {
  position: absolute !important;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  z-index: calc(var(--z-toast) + 1);
  background: var(--c-navy);
  color: var(--c-white);
  padding: var(--s-3) var(--s-5);
  font-size: var(--fs-sm);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Editor alignment classes

   Any content written in the block or classic editor can carry these. The
   prototype had no editor, so it has no rules for them.
   -------------------------------------------------------------------------- */

.alignleft {
  float: left;
  margin: 0 var(--s-5) var(--s-4) 0;
}

.alignright {
  float: right;
  margin: 0 0 var(--s-4) var(--s-5);
}

.aligncenter {
  display: block;
  margin-inline: auto;
  margin-bottom: var(--s-4);
}

.alignwide,
.alignfull {
  max-width: none;
}

/*
   Below the design's phone breakpoint a float stops being an alignment and
   becomes a squeeze. Measured: at a 360px viewport a 220px figure leaves 93px
   for the paragraph beside it — about ten characters a line. The editor's
   alignment is honoured where there is room for it and dropped where there is
   not, which is what every editor alignment implementation has to do.
   -------------------------------------------------------------------------- */

@media (max-width: 575.98px) {
  .alignleft,
  .alignright {
    float: none;
    display: block;
    margin-inline: auto;
    margin-bottom: var(--s-5);
  }
}

/* A float inside a prose column must not escape it. */
.entry-content::after {
  content: "";
  display: table;
  clear: both;
}

/* --------------------------------------------------------------------------
   Captions and embeds
   -------------------------------------------------------------------------- */

.wp-caption {
  max-width: 100%;
  margin-bottom: var(--s-5);
}

.wp-caption img {
  display: block;
  width: 100%;
  height: auto;
}

.wp-caption-text,
.wp-element-caption,
figcaption {
  margin-top: var(--s-2);
  font-size: var(--fs-sm);
  color: var(--c-muted);
}

/* Keep an oEmbed inside its column rather than letting it set the page width. */
.wp-block-embed iframe,
.entry-content iframe,
.entry-content video {
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   Sticky admin bar

   The header is position: sticky at top: 0. With the admin bar present it
   would sit underneath it. setup.php prints the offset inline for logged-in
   requests only — this is the print-and-small-screen half of that.
   -------------------------------------------------------------------------- */

@media print {
  .site-header { position: static; }
  .announce,
  .drawer,
  .overlay,
  .wa-fab,
  .skip-link,
  .toast-stack { display: none !important; }
}

/* --------------------------------------------------------------------------
   Elementor

   A page built in Elementor supplies its own section spacing. The theme's
   default page padding would add to it, so it comes off — the body class is
   set in setup.php and only for documents actually built with Elementor.
   -------------------------------------------------------------------------- */

.lvs-elementor #main > .container-ls:first-child {
  padding-block-start: 0;
}

/*
 * Elementor's editor wraps every widget in a div. Where a design component
 * expects to be a direct child of a grid — the category rows, the USP grid —
 * that wrapper breaks the grid. display: contents takes it out of the box tree
 * without removing it from the document, which is the only way to keep both
 * Elementor's editing handles and the design's layout.
 */
.lvs-elementor .elementor-widget-container > .lvs-passthrough {
  display: contents;
}

/* --------------------------------------------------------------------------
   Pagination

   WooCommerce and WordPress both emit .page-numbers. The prototype's
   collection page had its own pager markup; these rules give the WordPress one
   the same treatment.
   -------------------------------------------------------------------------- */

.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding-inline: var(--s-2);
  border: 1px solid var(--c-hairline);
  color: var(--c-ink);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.page-numbers:hover {
  border-color: var(--c-blue);
  color: var(--c-blue);
}

.page-numbers.current {
  background: var(--c-navy);
  border-color: var(--c-navy);
  color: var(--c-white);
}

.page-numbers.dots {
  border-color: transparent;
  color: var(--c-muted);
}

ul.page-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  list-style: none;
  margin: var(--s-7) 0 0;
  padding: 0;
  justify-content: center;
}

ul.page-numbers li { display: flex; }

/* --------------------------------------------------------------------------
   Comments

   Off by default on products, but a blog post or a page can have them and they
   must not render unstyled.
   -------------------------------------------------------------------------- */

.comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.comment-list li {
  padding-block: var(--s-5);
  border-top: 1px solid var(--c-hairline);
}

.comment-list .children {
  list-style: none;
  margin: 0;
  padding-left: var(--s-6);
}

.comment-meta {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  margin-bottom: var(--s-2);
}

.comment-respond {
  margin-top: var(--s-7);
}

/* --------------------------------------------------------------------------
   Commerce pages

   Six classes the approved design has no rules for, because the prototype
   rendered these screens differently: it had separate login.html and
   register.html pages, and its checkout summary listed no line items.

   Everything else on the cart, checkout and account screens uses the design's
   own classes unchanged — .shop-layout, .summary-panel, .checkout-step,
   .option-card, .account-layout, .account-nav, .order-card, .detail-card.
   -------------------------------------------------------------------------- */

/* --- Order status: one added tone ---------------------------------------
   The design ships .status--progress and .status--done. WooCommerce also has
   endings that are neither — cancelled, refunded, failed — and showing those
   in the same green as a delivered order is a genuine misreading.
   ------------------------------------------------------------------------ */

.status--ended { color: var(--c-muted); }

/* --- Sign in and register ------------------------------------------------
   The prototype had two pages; WooCommerce puts both forms on one screen and
   fighting its routing to split them would gain nothing. Two cards, side by
   side above 48rem.
   ------------------------------------------------------------------------ */

.auth-layout {
  display: grid;
  gap: var(--s-6);
  align-items: start;
}

/*
   768px, in pixels, because every breakpoint in the approved design is a pixel
   breakpoint on the 576/768/992/1200 scale. 48rem is 768px only while the root
   font size is 16px — a visitor who has raised their browser's default would
   get this layout switching at a different width from every other one on the
   site.

   768 rather than the 992 that .shop-layout uses: two short forms sit happily
   at 368px each, where a cart line and an order summary do not. */
@media (min-width: 768px) {
  .auth-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* A store with registration switched off shows one card, which should not
   then stretch to the full page width. */
.auth-layout > :only-child {
  max-width: 28rem;
  margin-inline: auto;
}

.auth-card {
  padding: var(--s-6);
  border: var(--border);
  /* Square, like every other card in this design — see .btn-ls and the
     product card, which both use --radius-0. */
  border-radius: var(--radius-0);
  background: var(--c-white);
}

.auth-card__title {
  margin: 0 0 var(--s-5);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
}

.auth-card__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}

/* --- Checkout summary lines ---------------------------------------------
   The prototype's checkout summary showed totals only. WooCommerce's review
   lists what is being bought, which is the more useful thing to confirm at the
   moment of paying — so the lines are drawn in the design's language.
   ------------------------------------------------------------------------ */

.summary-lines {
  display: grid;
  gap: var(--s-4);
  padding-bottom: var(--s-5);
  margin-bottom: var(--s-5);
  border-bottom: var(--border);
}

.summary-line {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: var(--s-3);
  align-items: start;
}

.summary-line__media {
  position: relative;
  width: 48px;
  border-radius: var(--radius-0);
  overflow: hidden;
}

.summary-line__media img { width: 100%; height: 100%; object-fit: cover; }

/* The quantity badge. Decorative — the figure is repeated as text in the
   line's name for anything that is not looking at it. */
.summary-line__qty {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--c-navy);
  color: var(--c-white);
  font-size: 11px;
  font-weight: 600;
}

.summary-line__text { min-width: 0; }

.summary-line__name {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-ink);
}

.summary-line__variant {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

.summary-line__price {
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
}

/* --- Order history pager ------------------------------------------------- */

.account-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  margin-top: var(--s-6);
}

/* --- A quantity that cannot be changed ------------------------------------
   A product sold individually gets a figure rather than a stepper that
   refuses to move.
   ------------------------------------------------------------------------ */

.cart-row__qty,
.cart-line__qty {
  font-size: var(--fs-sm);
  color: var(--c-muted);
}

/* --- WooCommerce notices -------------------------------------------------
   Coupon applied, item removed, a validation error at checkout. The prototype
   had toasts and no notices; these are dressed to match the design's alert
   language rather than left as WooCommerce's default blue bar.
   ------------------------------------------------------------------------ */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  list-style: none;
  margin: 0 0 var(--s-5);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--radius-0);
  border: var(--border);
  font-size: var(--fs-sm);
}

.woocommerce-message { border-color: var(--c-success); color: var(--c-success); }
.woocommerce-info    { border-color: var(--c-blue); color: var(--c-blue); }
.woocommerce-error   { border-color: var(--c-danger); color: var(--c-danger); }

.woocommerce-error li { margin: 0; }

/* WooCommerce puts an action in some notices — "View bag" after adding to the
   cart, "Undo?" after removing. Nothing in the approved design styles .button,
   so before these rules it rendered as bare inline text that happened to be
   floated: positioned like a button, looking like nothing. These give it the
   design's small ghost button, mirroring .btn-ls--ghost and .btn-ls--sm rather
   than inventing a look. */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
  float: right;
  margin-left: var(--s-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.15rem;
  border: 1px solid currentColor;
  border-radius: var(--radius-0);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.woocommerce-error .button:hover {
  background: currentColor;
}

/* The hover fill needs the label to invert, and `background: currentColor`
   leaves it the same colour as the fill. A span is not guaranteed, so the
   inversion is done with a filter-free second declaration on the element. */
.woocommerce-message .button:hover { color: var(--c-white); background: var(--c-success); }
.woocommerce-info .button:hover    { color: var(--c-white); background: var(--c-blue); }
.woocommerce-error .button:hover   { color: var(--c-white); background: var(--c-danger); }

/* On a phone the notice is barely wider than the sentence in it; a floated
   button there leaves a one-word column beside it. */
@media (max-width: 575.98px) {
  .woocommerce-message .button,
  .woocommerce-info .button,
  .woocommerce-error .button {
    float: none;
    display: flex;
    margin: var(--s-3) 0 0;
  }
}

/* A field WooCommerce has marked invalid. */
.woocommerce-invalid .field__input,
.woocommerce-invalid input.input-text,
.woocommerce-invalid select {
  border-color: var(--c-danger);
}

.woocommerce-invalid .field__label { color: var(--c-danger); }

/* --------------------------------------------------------------------------
   WooCommerce surfaces the approved design does not cover

   The theme dequeues WooCommerce's three core stylesheets, because they load
   only on WooCommerce pages and override the design there — which is why the
   homepage looked right and the collection, product and cart pages did not.

   That leaves the surfaces the design never specified with no styling at all:
   the default product tabs, the review form, the shop ordering select. They
   are dressed here in the design's own tokens rather than left bare.
   -------------------------------------------------------------------------- */

/* --- Product tabs ---------------------------------------------------------
   The approved product page has no tabs — it has story, specification and FAQ
   bands. Until those are built, WooCommerce's tabs carry the description and
   the reviews, so they need to not look like an unstyled document.
   ------------------------------------------------------------------------ */

.woocommerce-tabs {
  max-width: var(--container, 1400px);
  margin-inline: auto;
  padding: var(--s-8) var(--gutter, 24px);
  border-top: var(--border);
}

.woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6);
  list-style: none;
  margin: 0 0 var(--s-6);
  padding: 0;
  border-bottom: 1px solid var(--c-hairline);
}

.woocommerce-tabs ul.tabs li { margin: 0; }

.woocommerce-tabs ul.tabs li a {
  display: inline-block;
  padding: 0 0 var(--s-3);
  border-bottom: 2px solid transparent;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-muted);
  text-decoration: none;
}

.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover {
  color: var(--c-ink);
  border-bottom-color: var(--c-navy);
}

.woocommerce-tabs .panel > h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  margin: 0 0 var(--s-4);
}

.woocommerce-tabs .panel p { max-width: 68ch; }

/* --- Reviews ------------------------------------------------------------ */

.woocommerce-Reviews .comment-reply-title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  margin-bottom: var(--s-4);
}

.woocommerce-Reviews .comment-form label,
.woocommerce-Reviews .comment-form-rating label {
  display: block;
  margin-bottom: var(--s-2);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-muted);
}

.woocommerce-Reviews .comment-form textarea,
.woocommerce-Reviews .comment-form input[type="text"],
.woocommerce-Reviews .comment-form input[type="email"],
.woocommerce-Reviews .comment-form select {
  width: 100%;
  padding: var(--s-3) var(--s-4);
  border: var(--border);
  border-radius: var(--radius-0);
  background: var(--c-white);
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--c-ink);
}

.woocommerce-Reviews .comment-form p { margin-bottom: var(--s-4); }

/* The submit button, matching .btn-ls--primary without claiming the class. */
.woocommerce-Reviews .comment-form input[type="submit"],
.woocommerce-tabs .panel input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.95rem 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--radius-0);
  background: var(--c-navy);
  color: var(--c-white);
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  cursor: pointer;
}

.woocommerce-Reviews .comment-form input[type="submit"]:hover {
  background: var(--c-navy-deep);
}

.woocommerce-Reviews .commentlist {
  list-style: none;
  margin: 0 0 var(--s-7);
  padding: 0;
}

.woocommerce-Reviews .commentlist li {
  padding-block: var(--s-5);
  border-top: 1px solid var(--c-hairline);
}

/* --- Upsells and related, when WooCommerce renders them itself ----------- */

.upsells > h2,
.related > h2,
.cross-sells > h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  margin: 0 0 var(--s-5);
}

.upsells,
.related,
.cross-sells {
  max-width: var(--container, 1400px);
  margin-inline: auto;
  padding: var(--s-8) var(--gutter, 24px) 0;
}

/* --- Catalog ordering ---------------------------------------------------- */

.woocommerce-ordering select,
.woocommerce-result-count {
  font-size: var(--fs-sm);
  color: var(--c-muted);
}