/* ==========================================================================
   WordPress + WooCommerce bridge
   ==========================================================================

   Everything above this file is the original storefront's visual system,
   shipped unmodified: style.css (design tokens), css/fonts.css, css/theme.css,
   css/revflare.css, css/revflare-cart.css, css/rev-flare-tokens.css and
   css/rev-flare-ab.css.

   This sheet exists for exactly two reasons:

     1. The original markup was authored by hand.  WordPress and WooCommerce
        generate their own class names (.woocommerce-message, .shop_table,
        .screen-reader-text, block alignment classes ...).  Those have no
        counterpart upstream and must be mapped onto the brand vocabulary.

     2. A handful of templates are still WooCommerce's own -- the cart page,
        checkout, the account dashboard, the orders table.  They are presented
        here in the same visual language as the ported pages rather than being
        restyled from scratch.

   Nothing in this file changes the appearance of a page that was ported 1:1.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Layout scaffolding
   -------------------------------------------------------------------------- */

.page-wrapper {
  --dqt-header-offset: var(--header-height, var(--dqt-header-height));
}

/*
 * The shop and product templates in this theme render their own section
 * wrappers, so WooCommerce's generic content wrapper would double the gutter.
 */
.woocommerce-page .page-wrapper > main {
  width: 100%;
}

.dqt-notices {
  margin: 0 auto;
  max-width: var(--dqt-max-width);
  padding: 16px var(--dqt-gutter);
  width: 100%;
}

/* --------------------------------------------------------------------------
   2. Accessibility primitives
   -------------------------------------------------------------------------- */

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

.screen-reader-text:focus,
.skip-to-content-link:focus {
  background: var(--background-primary);
  border-radius: var(--dqt-radius-input);
  box-shadow: var(--dqt-shadow-md);
  clip-path: none;
  color: var(--dqt-ink);
  display: block;
  font-size: 0.875rem;
  height: auto;
  left: 16px;
  padding: 12px 16px;
  top: 16px;
  width: auto;
  z-index: 1000;
}

[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   3. WordPress block output
   -------------------------------------------------------------------------- */

.entry-content > * {
  margin-block: 0 var(--spacing-6, 1.5rem);
}

.entry-content > *:last-child {
  margin-block-end: 0;
}

.alignleft {
  float: left;
  margin: 0 1.5rem 1rem 0;
}

.alignright {
  float: right;
  margin: 0 0 1rem 1.5rem;
}

.aligncenter {
  display: block;
  margin-inline: auto;
}

.alignwide {
  margin-inline: calc(var(--dqt-gutter) * -1);
  max-width: 1100px;
}

.alignfull {
  margin-inline: calc(50% - 50vw);
  max-width: 100vw;
  width: 100vw;
}

.wp-caption,
.wp-caption-text,
figcaption {
  color: var(--dqt-ink);
  font-size: 0.8125rem;
  opacity: 0.65;
  text-align: center;
}

.wp-block-quote,
blockquote.wp-block-quote {
  border-inline-start: 2px solid var(--dqt-line);
  padding-inline-start: 1.5rem;
}

.wp-block-table table,
.wp-block-table th,
.wp-block-table td {
  border-color: var(--border-color);
}

.wp-block-button__link {
  align-items: center;
  background: var(--button-primary-background, var(--accent));
  border-radius: var(--dqt-radius-button);
  color: var(--button-primary-text, #fff);
  display: inline-flex;
  font-size: 0.875rem;
  justify-content: center;
  min-height: 46px;
  padding: 12px 24px;
  text-decoration: none;
}

.wp-block-image img {
  height: auto;
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   4. WooCommerce notices
   -------------------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
  background: var(--product-card-background, #f7f7f7);
  border: 0;
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--dqt-radius-input);
  color: var(--dqt-ink);
  font-size: 0.875rem;
  line-height: 1.5;
  list-style: none;
  margin: 0 auto 1rem;
  max-width: var(--dqt-max-width);
  padding: 14px 18px;
}

.woocommerce-error {
  border-inline-start-color: var(--error-text, #b3261e);
}

.woocommerce-error li + li {
  margin-block-start: 6px;
}

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

.woocommerce-message a,
.woocommerce-info a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* --------------------------------------------------------------------------
   5. Buttons -- WooCommerce's own, mapped onto the brand button
   -------------------------------------------------------------------------- */

.button,
button.button,
input[type="submit"],
.woocommerce-Button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wc-block-components-button,
.woocommerce-form-login__submit,
.woocommerce-ResetPassword .button {
  background: var(--button-primary-background, var(--accent));
  border: 0;
  border-radius: var(--dqt-radius-button);
  color: var(--button-primary-text, #fff);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--dqt-font-body);
  font-size: 0.875rem;
  font-weight: 600;
  justify-content: center;
  letter-spacing: 0;
  line-height: 1;
  min-height: 46px;
  padding: 14px 26px;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  opacity: 0.85;
}

.button.alt,
.woocommerce a.button.alt {
  background: var(--button-secondary-background, var(--accent));
  color: var(--button-secondary-text, #fff);
}

.button:disabled,
.button[disabled] {
  cursor: not-allowed;
  opacity: 0.45;
}

.button.wc-backward {
  margin-block-start: 1rem;
}

/* --------------------------------------------------------------------------
   6. Forms -- WooCommerce's markup, presented with floating labels
   -------------------------------------------------------------------------- */

/*
 * WooCommerce emits label-above-input.  The ported pages use the brand's
 * floating-label field, so a generic WooCommerce field is re-expressed in the
 * same material without changing the underlying DOM.
 */
.woocommerce form .form-row,
.woocommerce-page form .form-row,
.woocommerce-EditAccountForm p,
.lost_reset_password p {
  display: block;
  margin: 0 0 14px;
  padding: 0;
}

.woocommerce form .form-row label,
.woocommerce-page form .form-row label {
  color: var(--dqt-ink);
  display: block;
  font-size: 0.8125rem;
  margin-block-end: 6px;
  opacity: 0.7;
}

.woocommerce form .form-row .required {
  color: var(--error-text, #b3261e);
  opacity: 1;
  text-decoration: none;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-Input,
.woocommerce-Input--text,
.woocommerce-Input--email,
.woocommerce-Input--password,
.lost_reset_password input[type="text"],
.lost_reset_password input[type="password"] {
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--dqt-radius-input);
  box-sizing: border-box;
  color: var(--dqt-ink);
  font-family: inherit;
  font-size: 1rem;
  min-height: 52px;
  padding: 14px 16px;
  width: 100%;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce-Input:focus,
.lost_reset_password input:focus {
  border-color: var(--accent);
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.woocommerce form .form-row-first,
.woocommerce form .form-row-last {
  display: inline-block;
  width: calc(50% - 7px);
}

.woocommerce form .form-row-last {
  float: right;
}

.woocommerce-form__label-for-checkbox {
  align-items: center;
  display: inline-flex;
  font-size: 0.8125rem;
  gap: 8px;
  margin-block: 4px 12px;
}

/* --------------------------------------------------------------------------
   7. Account pages
   -------------------------------------------------------------------------- */

.woocommerce-account .page-wrapper > main {
  padding-block: var(--section-outer-spacing-block, 48px);
}

.woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
}

.woocommerce-MyAccount-navigation a {
  color: inherit;
  font-size: 0.875rem;
  opacity: 0.7;
  text-decoration: none;
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation a:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.woocommerce-Addresses {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.woocommerce-Address-title {
  align-items: baseline;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

/* --------------------------------------------------------------------------
   8. Tables -- cart, orders, order details
   -------------------------------------------------------------------------- */

.shop_table {
  border-collapse: collapse;
  margin-block-end: 24px;
  width: 100%;
}

.shop_table th,
.shop_table td {
  border-block-end: 1px solid var(--border-color);
  padding: 14px 10px;
  text-align: start;
  vertical-align: middle;
}

.shop_table thead th {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  opacity: 0.6;
  text-transform: uppercase;
}

.shop_table .product-thumbnail img {
  border-radius: var(--dqt-radius-input);
  height: auto;
  max-width: 72px;
}

.shop_table .product-remove a {
  color: var(--dqt-ink);
  opacity: 0.5;
  text-decoration: none;
}

.shop_table .product-remove a:hover {
  opacity: 1;
}

.quantity input.qty {
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--dqt-radius-input);
  color: var(--dqt-ink);
  min-height: 44px;
  padding: 8px;
  text-align: center;
  width: 68px;
}

.cart_totals,
.woocommerce-checkout-review-order {
  border: 1px solid var(--border-color);
  border-radius: var(--dqt-radius-input);
  padding: 20px 22px;
}

.cart_totals h2,
.woocommerce-checkout-review-order h2 {
  font-size: 1rem;
  margin-block: 0 12px;
}

/* --------------------------------------------------------------------------
   9. Catalogue bits WooCommerce still owns
   -------------------------------------------------------------------------- */

.woocommerce-ordering select,
.woocommerce-result-count,
.woocommerce-breadcrumb {
  color: var(--dqt-ink);
  font-size: 0.8125rem;
}

.woocommerce-ordering select {
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--dqt-radius-input);
  min-height: 44px;
  padding: 8px 32px 8px 12px;
}

.woocommerce-pagination {
  margin-block-start: 40px;
  text-align: center;
}

.woocommerce-pagination ul.page-numbers {
  display: inline-flex;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.woocommerce-pagination .page-numbers a,
.woocommerce-pagination .page-numbers span {
  align-items: center;
  border: 1px solid var(--border-color);
  border-radius: var(--dqt-radius-input);
  color: var(--dqt-ink);
  display: inline-flex;
  font-size: 0.8125rem;
  justify-content: center;
  min-height: 40px;
  min-width: 40px;
  padding: 0 10px;
  text-decoration: none;
}

.woocommerce-pagination .page-numbers .current {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--button-primary-text, #fff);
}

.woocommerce .star-rating span::before,
.woocommerce-page .star-rating span::before {
  color: var(--review-star-color, var(--dqt-accent));
}

.product_meta {
  color: var(--dqt-ink);
  font-size: 0.8125rem;
  opacity: 0.65;
}

.product_meta > span {
  display: block;
  margin-block-end: 2px;
}

/* --------------------------------------------------------------------------
   10. Password-recovery email step
   --------------------------------------------------------------------------

   WooCommerce renders this step inline rather than through a template, so it
   cannot be re-marked-up.  Its `lost_reset_password` class is the only handle
   we get, and it is enough to make the step look like the rest of the flow.
   -------------------------------------------------------------------------- */

.woocommerce-lost-password .lost_reset_password {
  background: var(--product-card-background, #f7f7f7);
  border-radius: var(--dqt-radius-lg);
  margin-inline: auto;
  max-width: 480px;
  padding: 40px 32px;
  text-align: center;
}

.woocommerce-lost-password .lost_reset_password p {
  font-size: 0.875rem;
  text-align: start;
}

.woocommerce-lost-password .lost_reset_password .button {
  width: 100%;
}

/* --------------------------------------------------------------------------
   11. WP admin bar offset
   -------------------------------------------------------------------------- */

body.admin-bar .shopify-section--header,
body.admin-bar .header-wrapper {
  top: var(--wp-admin--admin-bar--height, 32px);
}

/* --------------------------------------------------------------------------
   12. Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .button,
  .woocommerce a.button {
    transition: none;
  }
}