/* -------------------------------------------------------------------------
   Quiet Trails theme layer
   Contains only markup that has no design equivalent (WooCommerce/WordPress
   output), functional state rules and the checkout overrides. Typography,
   spacing and colour for every design element come from assets/css/app.css.
   ---------------------------------------------------------------------- */

[hidden] {
  display: none !important;
}

/* -------------------------------------------------------------------------
   Site identity
   ---------------------------------------------------------------------- */
.site-logo-img {
  display: block;
}

.site-logo-text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  display: block;
  line-height: 1.1;
}

/* Only override the logo height when an explicit value is configured, so the
   design's own width classes keep driving the rendered size. */
body.theme-has-logo-height .site-logo-img {
  height: var(--logo-height);
  width: auto;
}

/* Cart badge hides at zero, matching the design. */
.theme-cart-count:empty {
  display: none;
}

/* Assigned WordPress menus: the generated <ul> is flattened so the links sit
   directly in the source's flex row with its 2rem gap. */
.theme-nav .theme-nav-list {
  display: contents;
  margin: 0;
  padding: 0;
  list-style: none;
}

.theme-nav .menu-item a,
.theme-nav ul li a {
  font-size: 0.875rem;
  line-height: 1.5rem;
  color: inherit;
  text-decoration: none;
}

.theme-nav .menu-item a:hover,
.theme-nav ul li a:hover {
  color: hsl(var(--primary));
}

/* -------------------------------------------------------------------------
   Scroll reveal base + preview fallback
   ---------------------------------------------------------------------- */
[data-reveal] {
  will-change: opacity, transform;
}

body.is-customizer [data-reveal],
body.is-customizer [data-reveal-delay] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* -------------------------------------------------------------------------
   Page title (WordPress-generated, no design equivalent)
   ---------------------------------------------------------------------- */
.page-title {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0;
}

/* -------------------------------------------------------------------------
   Cart drawer behaviour
   ---------------------------------------------------------------------- */
#theme-cart-drawer {
  box-sizing: border-box;
  position: fixed;
  top: 0;
  right: 0;
  left: auto;
  bottom: auto;
  z-index: 60;
  width: 100%;
  max-width: 32rem;
  height: 100%;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.3s ease-out, visibility 0.3s ease-out;
}

#theme-cart-drawer > * {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

#theme-cart-drawer .theme-cart-summary,
#theme-cart-drawer .theme-cart-summary > * {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

#theme-cart-drawer .theme-cart-summary a {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

body.cart-open #theme-cart-drawer {
  transform: translateX(0);
  visibility: visible;
}

body.cart-open {
  overflow: hidden;
}

#theme-cart-overlay {
  position: fixed;
  inset: 0;
  z-index: 55;
  background-color: hsl(var(--foreground) / 0.3);
  animation: cart-drawer-fade 0.2s ease-out;
}

#theme-cart-drawer.is-updating > * {
  opacity: 0.6;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  #theme-cart-drawer {
    transition: none;
  }
  #theme-cart-overlay {
    animation: none;
  }
}

/* Add-to-cart button lock while the request is in flight */
.ajax_add_to_cart.theme-btn-loading {
  opacity: 0.6 !important;
  pointer-events: none !important;
  cursor: wait !important;
}

.ajax_add_to_cart.loading::after,
.single-product .single_add_to_cart_button.loading::after {
  display: none !important;
}

/* Hide the "View cart" link WooCommerce appends after an AJAX add */
.woocommerce-page a.added_to_cart.wc-forward,
.single-product a.added_to_cart.wc-forward,
body a.added_to_cart.wc-forward {
  display: none !important;
}

/* -------------------------------------------------------------------------
   Add-to-cart disabled state (variable products, out of stock)
   ---------------------------------------------------------------------- */
.single_add_to_cart_button.button:disabled,
.single_add_to_cart_button.button.disabled,
.add_to_cart_button.button:disabled,
.add_to_cart_button.button.disabled {
  cursor: not-allowed !important;
  opacity: 0.4 !important;
  pointer-events: none !important;
}

.single_add_to_cart_button.button:disabled:hover,
.single_add_to_cart_button.button.disabled:hover,
.add_to_cart_button.button:disabled:hover,
.add_to_cart_button.button.disabled:hover {
  opacity: 0.4 !important;
}

/* -------------------------------------------------------------------------
   Variable product attribute pills (theme markup, no design equivalent)
   ---------------------------------------------------------------------- */
.theme-attr-select-hidden {
  display: none !important;
}

.theme-attr-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.theme-attr-pill {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1;
  padding: 0.75rem 1rem;
  border: 1px solid hsl(var(--primary) / 0.4);
  background: transparent;
  color: hsl(var(--foreground));
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.theme-attr-pill:hover,
.theme-attr-pill.is-active {
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.single-product .variations.shop_attributes tbody,
.single-product .variations tbody tr,
.single-product .variations tbody td {
  display: block;
  width: 100%;
}

.single-product .variations tbody td.label {
  padding-bottom: 0.25rem;
}

.single-product .variations tbody td.value {
  padding-top: 0;
}

.single-product .variations td.label label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0;
  color: hsl(var(--muted-foreground));
}

/* -------------------------------------------------------------------------
   Single product responsive safety
   ---------------------------------------------------------------------- */
.single-product .theme-product-layout,
.single-product .product {
  min-width: 0;
}

.single-product .theme-product-gallery,
.single-product .theme-product-info {
  min-width: 0;
  max-width: 100%;
}

.single-product .theme-product-thumbnails {
  flex-wrap: wrap;
  max-width: 100%;
}

.single-product .theme-add-to-cart-area {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.single-product .theme-add-to-cart-area .single_add_to_cart_button {
  flex: 1 1 auto;
  min-width: 160px;
}

.single-product .woocommerce-product-details__short-description,
.single-product .woocommerce-variation-description,
.single-product .posted_in {
  overflow-wrap: break-word;
  word-break: break-word;
}

.single-product .product .woocommerce-variation-price,
.single-product .product .woocommerce-variation-availability {
  margin-top: 0.75rem;
}

.product .woocommerce-variation-add-to-cart .quantity {
  display: none;
}

/* -------------------------------------------------------------------------
   WooCommerce notices (scoped styling matching the design system)
   ---------------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.6;
  list-style: none;
  padding: 1rem 1.25rem;
  margin: 0 0 1.5rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--secondary));
  color: hsl(var(--foreground));
  border-radius: var(--radius);
}

.woocommerce-error {
  border-color: hsl(var(--destructive) / 0.5);
  background: hsl(var(--destructive) / 0.08);
}

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

.single-product .woocommerce-message,
.single-product .woocommerce-info {
  display: none;
}

#theme-cart-drawer .woocommerce-message {
  display: none;
}

/* -------------------------------------------------------------------------
   WordPress generated helpers
   ---------------------------------------------------------------------- */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.entry-content > * + * {
  margin-top: 1.25rem;
}

.entry-content h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2rem;
  line-height: 1.2;
}

.entry-content h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.2;
}

.entry-content a {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.posts-navigation,
.navigation.pagination {
  margin-top: 3rem;
  font-size: 0.875rem;
}

/* -------------------------------------------------------------------------
   Checkout: native WooCommerce Blocks
   ---------------------------------------------------------------------- */
body.woocommerce-checkout .site-main {
  padding-top: 3rem;
  padding-bottom: 4rem;
}

/* The outer block wrapper must not lay out its own grid. Only the inner
   sidebar layout (direct parent of __main and __sidebar) owns the columns. */
body.woocommerce-checkout .wc-block-checkout {
  display: block;
}

body.woocommerce-checkout .wc-block-components-sidebar-layout.wc-block-checkout {
  display: block;
}

@media (min-width: 768px) {
  body.woocommerce-checkout .wc-block-components-sidebar-layout.wc-block-checkout.is-large {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
  }
}

body.woocommerce-checkout .wc-block-checkout__main,
body.woocommerce-checkout .wc-block-checkout__sidebar {
  min-width: 0;
  width: 100%;
  max-width: none;
}

body.woocommerce-checkout .wc-block-components-text-input input,
body.woocommerce-checkout .wc-block-components-select select,
body.woocommerce-checkout .wc-blocks-components-select__select,
body.woocommerce-checkout .wc-block-components-textarea textarea,
body.woocommerce-checkout .woocommerce-checkout .form-row .input-text {
  font-family: var(--font-body);
  font-size: 1rem;
  color: hsl(var(--foreground));
  background-color: hsl(var(--background));
  border: 1px solid hsl(var(--border)) !important;
  border-radius: var(--radius) !important;
  width: 100% !important;
  max-width: none !important;
}

body.woocommerce-checkout .wc-block-components-text-input input:focus,
body.woocommerce-checkout .wc-block-components-select select:focus,
body.woocommerce-checkout .wc-blocks-components-select__select:focus,
body.woocommerce-checkout .wc-block-components-textarea textarea:focus {
  outline: none;
  border-color: hsl(var(--primary)) !important;
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.35);
}

body.woocommerce-checkout .wc-block-components-text-input label,
body.woocommerce-checkout .wc-block-components-select label,
body.woocommerce-checkout .wc-block-components-checkout-step__title,
body.woocommerce-checkout .wc-block-components-title {
  font-family: var(--font-body);
  color: hsl(var(--muted-foreground));
}

body.woocommerce-checkout .wc-block-checkout__sidebar {
  background-color: hsl(var(--secondary));
  border-radius: var(--radius);
  padding: 2rem;
}

body.woocommerce-checkout .wc-block-components-checkout-place-order-button {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  background-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  border: 1px solid hsl(var(--primary)) !important;
  border-radius: var(--radius) !important;
  padding: 0.9rem 1.5rem !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

body.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover {
  background-color: hsl(var(--background)) !important;
  color: hsl(var(--primary)) !important;
}

body.woocommerce-checkout .wc-block-components-notice-banner {
  font-family: var(--font-body);
  font-size: 0.875rem;
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--secondary));
  color: hsl(var(--foreground));
  grid-column: 1 / -1;
}

body.woocommerce-checkout .wc-block-cart-items,
body.woocommerce-checkout .wc-block-components-order-summary {
  font-family: var(--font-body);
  color: hsl(var(--foreground));
}

body.woocommerce-checkout .wc-block-components-order-summary-item__description,
body.woocommerce-checkout .wc-block-components-product-name {
  font-family: var(--font-body);
  color: hsl(var(--foreground));
}

/* -------------------------------------------------------------------------
   Thank you page
   ---------------------------------------------------------------------- */
body.theme-thankyou-page {
  overflow-x: hidden;
}

body.theme-thankyou-page .woocommerce-order {
  max-width: 100%;
}

body.theme-thankyou-page .woocommerce-order h2,
body.theme-thankyou-page .woocommerce-order-details__title,
body.theme-thankyou-page .woocommerce-column__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2rem;
  line-height: 1.2;
  padding: 0 0 1rem 0;
  color: hsl(var(--foreground));
  display: block;
}

body.theme-thankyou-page .woocommerce-order-overview {
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
  display: grid;
  gap: 1rem;
}

body.theme-thankyou-page .woocommerce-order-overview li {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  border-bottom: 1px solid hsl(var(--border));
  padding-bottom: 0.75rem;
}

body.theme-thankyou-page .woocommerce-order-overview li strong {
  display: block;
  color: hsl(var(--foreground));
  font-weight: 500;
  margin-top: 0.25rem;
}

body.theme-thankyou-page .woocommerce-order-details table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 0.875rem;
}

body.theme-thankyou-page .woocommerce-order-details table th,
body.theme-thankyou-page .woocommerce-order-details table td {
  padding: 0.75rem 0;
  border-bottom: 1px solid hsl(var(--border));
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;
}

body.theme-thankyou-page .woocommerce-order-details tfoot th {
  text-align: left;
}

body.theme-thankyou-page .woocommerce-order-details tfoot td {
  text-align: right;
}

body.theme-thankyou-page .woocommerce-customer-details {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 2rem;
}

body.theme-thankyou-page .woocommerce-customer-details address {
  max-width: 480px;
  overflow-wrap: break-word;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.875rem;
  line-height: 1.7;
  color: hsl(var(--muted-foreground));
  border: 1px solid hsl(var(--border));
  padding: 1.25rem;
}

/* -------------------------------------------------------------------------
   Cart, account, checkout and shop pages: match theme container-wide margins
   (max-w-7xl + px-6 / lg:px-10 from .container-wide)
   ---------------------------------------------------------------------- */
body.woocommerce-cart .site-main,
body.woocommerce-account .site-main,
body.woocommerce-checkout .site-main,
body.woocommerce-page .site-main,
.woocommerce-page main.container-wide,
.woocommerce main.container-wide {
  width: 100%;
  max-width: 80rem; /* max-w-7xl */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem; /* px-6 */
  padding-right: 1.5rem;
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  body.woocommerce-cart .site-main,
  body.woocommerce-account .site-main,
  body.woocommerce-checkout .site-main,
  body.woocommerce-page .site-main,
  .woocommerce-page main.container-wide,
  .woocommerce main.container-wide {
    padding-left: 2.5rem; /* lg:px-10 */
    padding-right: 2.5rem;
  }
}

/* WooCommerce Blocks / shortcode wrappers that ignore page padding */
body.woocommerce-cart .wp-block-woocommerce-cart,
body.woocommerce-checkout .wp-block-woocommerce-checkout,
body.woocommerce-account .woocommerce,
body.woocommerce-cart .woocommerce,
body.woocommerce-checkout .woocommerce {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}

body.woocommerce-cart .wp-block-woocommerce-cart,
body.woocommerce-account .woocommerce {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: hsl(var(--foreground));
}

/* -------------------------------------------------------------------------
   Admin bar offset for the sticky header
   ---------------------------------------------------------------------- */
body.admin-bar header.sticky {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar header.sticky {
    top: 46px;
  }
}