/* ============================================================================
   Nyraa Skin Care — Shop / product archive (reference layout, our palette)
   Tokens only. Loaded on shop + product taxonomy archives.
   ============================================================================ */

.woocommerce img,
.woocommerce-page img {
  height: 100%;
}

/* The WooCommerce "Newest Products" block (cart "New in store") is replaced with
   our own .product-card grid via render_block — see nyraa_render_new_products(). */
.nyraa-woo-grid { margin-top: var(--space-lg); }

/* ------------------------------------------------------------------
   WooCommerce Cart / Checkout blocks — brand touches
   ------------------------------------------------------------------ */

/* Empty-cart icon is a currentColor mask → recolor to the brand */
.wp-block-woocommerce-empty-cart-block .with-empty-cart-icon::before {
  background-color: var(--color-primary);
}
/* Remove the orphaned dots separator */
.wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots {
  display: none;
}
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
  font-family: var(--font-headline);
  color: var(--color-text);
}

/* Brand the block buttons (Browse store, Proceed to checkout, Place order) */
.wp-block-woocommerce-empty-cart-block .wp-element-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-cart .wc-block-components-button.contained,
.wp-block-woocommerce-checkout .wc-block-components-button.contained {
  border-radius: var(--radius-pill);
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-normal);
}
.wp-block-woocommerce-empty-cart-block .wp-element-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wp-block-woocommerce-cart .wc-block-components-button.contained:hover,
.wp-block-woocommerce-checkout .wc-block-components-button.contained:hover {
  background-color: var(--primary-600);
  color: var(--color-text-inverse);
}

/* ==================================================================
   My Account + WooCommerce classic auth forms — brand styling
   ================================================================== */

/* Field labels */
.woocommerce form .form-row label,
.woocommerce-EditAccountForm label,
.woocommerce-Address label,
.woocommerce form.login label,
.woocommerce form.register label {
  display: block;
  margin-bottom: var(--space-xs);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.woocommerce form .form-row { margin-bottom: var(--space-md); }

/* Inputs / selects / textareas */
.woocommerce .input-text,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="password"],
.woocommerce input[type="tel"],
.woocommerce select,
.woocommerce textarea {
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-text);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.woocommerce .input-text:focus,
.woocommerce select:focus,
.woocommerce textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--input-focus-ring);
}

/* Classic buttons → brand pill */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce input[type="submit"].button,
.woocommerce-Button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-height);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-family: var(--font-body);
  font-size: var(--btn-font-size);
  font-weight: var(--fw-semibold);
  line-height: 1;
  color: var(--color-text-inverse);
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: var(--transition-base);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce-Button.button:hover {
  background: var(--primary-600);
  color: var(--color-text-inverse);
}

/* WooCommerce ships its own purple for `.alt` buttons (Add to cart, Place
   order). Its hover rule outranks the block above, so the button jumped to
   #7249a4 on hover. `.woocommerce` sits on <body>, so leading with it beats
   those rules outright rather than relying on stylesheet order. */
body.woocommerce a.button.alt,
body.woocommerce button.button.alt,
body.woocommerce input.button.alt {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
body.woocommerce a.button.alt:hover,
body.woocommerce button.button.alt:hover,
body.woocommerce input.button.alt:hover,
body.woocommerce a.button.alt:focus-visible,
body.woocommerce button.button.alt:focus-visible,
body.woocommerce input.button.alt:focus-visible {
  background: var(--primary-600);
  color: var(--color-text-inverse);
}

/* Remember-me / checkbox labels — not uppercase */
.woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  text-transform: none;
  letter-spacing: normal;
  font-weight: var(--fw-regular);
  color: var(--color-text-secondary);
}
.woocommerce-form__input-checkbox { width: auto; accent-color: var(--color-primary); }
.woocommerce form.login .lost_password a,
.woocommerce-LostPassword a { color: var(--color-primary); }

/* Login / register as cards, centered */
.woocommerce-account:not(.logged-in) .woocommerce { max-width: var(--container-md); margin-inline: auto; }
.woocommerce .u-columns { display: grid; gap: var(--space-2xl); }
@media (min-width: 768px) { .woocommerce .u-columns.col2-set { grid-template-columns: 1fr 1fr; } }
.woocommerce form.login,
.woocommerce form.register {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}

/* My Account layout: navigation + content (override WC floats/widths) */
.woocommerce-account.logged-in .woocommerce {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xl);
  align-items: flex-start;
}
@media (min-width: 992px) {
  .woocommerce-account.logged-in .woocommerce { flex-wrap: nowrap; gap: var(--space-3xl); }
}
.woocommerce-account .woocommerce-MyAccount-navigation {
  float: none;
  width: 100%;
  margin: 0;
}
@media (min-width: 992px) {
  .woocommerce-account .woocommerce-MyAccount-navigation { width: 230px; flex-shrink: 0; }
}
.woocommerce-account .woocommerce-MyAccount-content {
  float: none;
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}
.woocommerce-MyAccount-navigation ul { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.woocommerce-MyAccount-navigation ul li { border: 0; }
.woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  transition: var(--transition-color);
}
.woocommerce-MyAccount-navigation ul li a:hover { background: var(--primary-50); color: var(--color-primary); }
.woocommerce-MyAccount-navigation ul li.is-active a { background: var(--color-primary); color: var(--color-text-inverse); }
.woocommerce-MyAccount-content { min-width: 0; }
.woocommerce-MyAccount-content fieldset {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xl);
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.woocommerce-MyAccount-content fieldset legend {
  font-family: var(--font-headline);
  font-size: var(--fs-h5);
  padding-inline: var(--space-sm);
}
.woocommerce-MyAccount-content .woocommerce-Button { margin-top: var(--space-md); }

/* My Account → Addresses (override WC float/column layout) */
.woocommerce-Addresses.u-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl) var(--space-2xl);
  margin-top: var(--space-lg);
}
@media (min-width: 768px) { .woocommerce-Addresses.u-columns { grid-template-columns: 1fr 1fr; } }
.woocommerce-Addresses.u-columns::before,
.woocommerce-Addresses.u-columns::after { content: none; display: none; }
.woocommerce .woocommerce-Addresses .woocommerce-Address { float: none; width: auto; margin: 0; }
.woocommerce-Address .woocommerce-Address-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}
.woocommerce-Address .woocommerce-Address-title h2,
.woocommerce-Address .woocommerce-Address-title h3 { font-size: var(--fs-h4); margin: 0; }
.woocommerce-Address .woocommerce-Address-title .edit {
  color: var(--color-primary);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.woocommerce-Address address { font-style: normal; color: var(--color-text-secondary); line-height: var(--lh-body); }

/* Half-width name rows (edit account / addresses) */
@media (min-width: 576px) {
  .woocommerce-EditAccountForm .form-row-first,
  .woocommerce-address-fields .form-row-first { width: 48%; float: left; margin-inline-end: 4%; }
  .woocommerce-EditAccountForm .form-row-last,
  .woocommerce-address-fields .form-row-last { width: 48%; float: right; margin-inline-end: 0; }
  .woocommerce-EditAccountForm .clear,
  .woocommerce-address-fields .clear { clear: both; }
}

/* Notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-radius: var(--radius-md);
  border-top: 3px solid var(--color-primary);
}
.woocommerce-message { border-top-color: var(--color-secondary); }

/* Cart/checkout accents in the brand palette */
.wp-block-woocommerce-cart a,
.wp-block-woocommerce-checkout a,
.wc-block-components-product-price { color: var(--color-primary); }
.wc-block-cart__totals-title,
.wc-block-components-totals-item__value { color: var(--color-text); }
.wc-block-components-quantity-selector { border-radius: var(--radius-pill); }
/* No inset "box" border on the +/- stepper buttons when clicked/focused */
.wp-block-woocommerce-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:focus,
.wp-block-woocommerce-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__input:focus,
.wp-block-woocommerce-checkout .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:focus,
.wp-block-woocommerce-checkout .wc-block-components-quantity-selector .wc-block-components-quantity-selector__input:focus {
  box-shadow: none;
}
/* Keep an accessible outline for keyboard users only */
.wp-block-woocommerce-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:focus-visible,
.wp-block-woocommerce-checkout .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

/* Cart line item: put the quantity stepper + delete on the title's line */
.wp-block-woocommerce-cart .wc-block-cart-item__wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-md);
  row-gap: var(--space-xs);
}
.wp-block-woocommerce-cart .wc-block-cart-item__wrap > .wc-block-components-product-name { order: 1; margin: 0; }
.wp-block-woocommerce-cart .wc-block-cart-item__wrap > .wc-block-cart-item__quantity {
  order: 2;
  margin: 0 0 0 auto;
  width: auto;
  max-width: none;
}
.wp-block-woocommerce-cart .wc-block-cart-item__wrap > .wc-block-cart-item__prices { order: 3; flex-basis: 100%; margin: 0; }
.wp-block-woocommerce-cart .wc-block-cart-item__wrap > .wc-block-components-product-metadata { order: 4; flex-basis: 100%; margin: 0; }

/* Smooth entrance for expandable panels (e.g. "Add coupons") */
.wp-block-woocommerce-cart .wc-block-components-panel__content,
.wp-block-woocommerce-checkout .wc-block-components-panel__content {
  animation: nyraa-panel-in var(--dur-base) var(--ease-out) both;
}
@keyframes nyraa-panel-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Smoothly rotate the panel chevron on toggle */
.wc-block-components-panel__button svg { transition: transform var(--dur-base) var(--ease-standard); }
@media (prefers-reduced-motion: reduce) {
  .wp-block-woocommerce-cart .wc-block-components-panel__content,
  .wp-block-woocommerce-checkout .wc-block-components-panel__content { animation: none; }
}

.shop { padding-block: var(--space-xl) 0; }

/* AJAX loading state (filters update without a reload) */
.shop > .container { transition: opacity var(--dur-fast) var(--ease-standard); }
.shop > .container.is-loading { opacity: 0.5; pointer-events: none; }

/* Breadcrumb */
.shop__breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}
.shop__breadcrumb a { color: var(--color-text-muted); }
.shop__breadcrumb a:hover { color: var(--color-primary); }
.shop__breadcrumb-current { color: var(--color-primary); }
.shop__breadcrumb-sep { color: var(--color-text-muted); }

/* Title + sort */
.shop__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}
.shop__title { font-family: var(--font-headline); font-size: var(--fs-h2); color: var(--color-primary); }
.shop__sort { margin: 0; }
/* Scoped above ".woocommerce select" (0,1,1) so the custom chevron + right
   padding aren't wiped by its background shorthand. */
.shop__sort .shop__sort-select {
  appearance: none;
  -webkit-appearance: none;
  width: auto;
  min-width: 180px;
  padding: 12px 44px 12px 16px;
  font-size: var(--fs-small);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  background-color: var(--color-surface-alt);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23A67C49' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.shop__sort .shop__sort-select:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Layout */
.shop__layout { display: grid; grid-template-columns: 1fr; gap: var(--space-2xl); }
@media (min-width: 992px) { .shop__layout { grid-template-columns: 260px minmax(0, 1fr); } }

/* ---------------- Filters ---------------- */
.filters { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-lg); }
.filters__title { font-family: var(--font-headline); font-size: var(--fs-h4); }
.filters__subtitle { font-size: var(--fs-small); color: var(--color-text-muted); margin-bottom: var(--space-lg); }
.filters__group { padding-block: var(--space-lg); border-top: 1px solid var(--color-border); }
.filters__group:first-of-type { border-top: none; padding-top: 0; }
.filters__label {
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-md);
}

/* Category list */
.filters__cats { display: flex; flex-direction: column; gap: 4px; }
.filters__cat {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px 12px;
  border-radius: var(--radius-md);
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
  transition: var(--transition-color);
}
.filters__cat .material-symbols-outlined { font-size: 20px; }
.filters__cat:hover { background: var(--primary-50); color: var(--color-primary); }
.filters__cat.is-active { background: var(--color-primary); color: var(--color-text-inverse); }

/* Concern chips */
.filters__chips { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.chip {
  display: inline-flex;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
  transition: var(--transition-color);
}
.chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.chip.is-active { background: var(--primary-100); border-color: var(--primary-200); color: var(--primary-700); }

/* Price slider (dual range) */
.price-filter__slider { position: relative; height: 28px; margin-bottom: var(--space-sm); }
.price-filter__slider::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 4px;
  transform: translateY(-50%);
  background: var(--color-border);
  border-radius: 2px;
}
.price-filter__range {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 28px;
  margin: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.price-filter__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 18px; height: 18px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  border: 2px solid var(--color-surface-alt);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.price-filter__range::-moz-range-thumb {
  pointer-events: auto;
  width: 18px; height: 18px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  border: 2px solid var(--color-surface-alt);
  cursor: pointer;
}
.price-filter__labels { display: flex; justify-content: space-between; font-size: var(--fs-small); color: var(--color-text-secondary); }

/* Ingredient checks */
.filters__checks { display: flex; flex-direction: column; gap: var(--space-sm); }
.check { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--fs-small); color: var(--color-text-secondary); }
.check:hover { color: var(--color-primary); }
.check__box {
  width: 18px; height: 18px;
  flex-shrink: 0;
  border-radius: var(--radius-xs);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface-alt);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-inverse);
}
.check__box .material-symbols-outlined { font-size: 14px; }
.check.is-active .check__box { background: var(--color-primary); border-color: var(--color-primary); }

/* ---------------- Product grid ---------------- */
.shop__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
@media (min-width: 576px) { .shop__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .shop__grid { grid-template-columns: repeat(3, 1fr); } }

/* Product cards reuse the homepage .product-card styles (loaded globally). */

.shop__empty { text-align: center; padding: var(--space-3xl) 0; color: var(--color-text-secondary); }
.shop__empty .btn { margin-top: var(--space-lg); }

/* Pagination — centered circular buttons */
.shop .pagination { margin-top: var(--space-2xl); }
.shop .pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}
.shop .pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  color: var(--color-text);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  transition: var(--transition-color);
}
.shop .pagination a.page-numbers:hover { border-color: var(--color-primary); color: var(--color-primary); }
.shop .pagination .page-numbers.current {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}
.shop .pagination .page-numbers.dots {
  width: auto;
  min-width: 0;
  border: none;
  background: none;
}
.shop .pagination .page-numbers .material-symbols-outlined { font-size: 20px; }

/* The newsletter section is shared with the homepage (.newsletter in homepage.css).
   Add breathing room between the product list and the newsletter band. */
.shop .newsletter { margin-top: var(--space-2xl); }
@media (min-width: 992px) { .shop .newsletter { margin-top: var(--space-3xl); } }

/* ============================================================================
   My Account — logged-out "Welcome Back" auth screen (reference layout).
   ============================================================================ */
.nyraa-auth-page { max-width: none; padding-inline: 0; }
.nyraa-auth-page .entry { max-width: none; }

.nyraa-auth {
  position: relative;
  max-width: var(--container-max, 1200px);
  margin-inline: auto;
  padding: var(--space-2xl) var(--container-pad, var(--space-lg)) var(--space-3xl);
}

/* Central panel holding the toggleable cards */
.nyraa-auth__panel { max-width: 540px; margin-inline: auto; position: relative; z-index: 2; }

.nyraa-auth__card {
  background: var(--color-surface-alt);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2xl);
}
@media (min-width: 576px) { .nyraa-auth__card { padding: var(--space-3xl) var(--space-2xl); } }

.nyraa-auth__head { text-align: center; margin-bottom: var(--space-xl); }
.nyraa-auth__title {
  font-family: var(--font-headline);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: var(--lh-tight);
  color: var(--color-text);
}
.nyraa-auth__subtitle { margin-top: var(--space-xs); color: var(--color-text-secondary); }

/* Fields */
.nyraa-form { display: flex; flex-direction: column; gap: var(--space-md); }
.nyraa-field { position: relative; margin: 0; }
.nyraa-input {
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  transition: border-color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard),
              background-color var(--dur-base) var(--ease-standard);
}
.nyraa-input::placeholder { color: var(--color-text-secondary); }
.nyraa-input:focus {
  outline: none;
  background: var(--color-surface-alt);
  border-color: var(--color-primary);
  box-shadow: var(--input-focus-ring, 0 0 0 3px rgba(166, 124, 73, 0.15));
}
.nyraa-field--password .nyraa-input { padding-inline-end: calc(var(--space-lg) + 28px); }
.nyraa-field__toggle {
  position: absolute;
  top: 50%;
  right: var(--space-md);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: color var(--dur-base) var(--ease-standard);
}
.nyraa-field__toggle:hover { color: var(--color-primary); }
.nyraa-field__toggle .material-symbols-outlined { font-size: 20px; }

/* Remember me + forgot */
.nyraa-auth__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: var(--space-xs);
}
.nyraa-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
  cursor: pointer;
}
.nyraa-check__input { position: absolute; opacity: 0; width: 0; height: 0; }
.nyraa-check__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  transition: background-color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.nyraa-check__box::after {
  content: "";
  width: 5px;
  height: 9px;
  margin-top: -2px;
  border: solid var(--color-text-inverse);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform var(--dur-fast, 150ms) var(--ease-standard);
}
.nyraa-check__input:checked + .nyraa-check__box { background: var(--color-primary); border-color: var(--color-primary); }
.nyraa-check__input:checked + .nyraa-check__box::after { transform: rotate(45deg) scale(1); }
.nyraa-check__input:focus-visible + .nyraa-check__box { box-shadow: 0 0 0 3px rgba(166, 124, 73, 0.2); }
.nyraa-auth__link { font-size: var(--fs-small); color: var(--color-primary); font-weight: var(--fw-medium); }
.nyraa-auth__link:hover { text-decoration: underline; }

/* Submit */
.nyraa-auth__submit {
  margin-top: var(--space-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  font-weight: var(--fw-semibold);
}

/* Divider + social */
.nyraa-auth__divider {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-lg) 0;
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.nyraa-auth__divider::before,
.nyraa-auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }
.nyraa-auth__socials { display: flex; justify-content: center; gap: var(--space-md); }
.nyraa-auth__social {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  transition: border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
}
.nyraa-auth__social:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* Switch login <-> register */
.nyraa-auth__switch {
  margin-top: var(--space-xl);
  text-align: center;
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
}
.nyraa-auth__switch-btn {
  background: none;
  border: none;
  padding: 0;
  margin-inline-start: var(--space-xs);
  font: inherit;
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  cursor: pointer;
}
.nyraa-auth__switch-btn:hover { text-decoration: underline; }
.nyraa-auth__note { font-size: var(--fs-small); color: var(--color-text-secondary); text-align: center; margin: 0; }

/* Decorative floating art */
.nyraa-auth__float { position: absolute; margin: 0; z-index: 1; display: none; }
.nyraa-auth__float img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nyraa-auth__float--accent {
  top: var(--space-2xl);
  right: 0;
  width: 190px;
  height: 190px;
}
.nyraa-auth__float--accent img {
  border-radius: 32px;
  box-shadow: var(--shadow-lg);
  border: 6px solid var(--color-surface-alt);
}
.nyraa-auth__float--main {
  bottom: var(--space-2xl);
  left: 0;
  width: 260px;
}
.nyraa-auth__float--main img {
  aspect-ratio: 4 / 5;
  border-radius: 52% 48% 47% 53% / 55% 52% 48% 45%;
  box-shadow: var(--shadow-lg);
  border: 8px solid var(--color-surface-alt);
}
.nyraa-auth__quote {
  margin-top: var(--space-md);
  padding-inline: var(--space-md);
  text-align: center;
  font-family: var(--font-headline);
  font-style: italic;
  color: var(--color-primary);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-snug);
}
@media (min-width: 1100px) { .nyraa-auth__float { display: block; } }

/* Auth screen: neutralise the generic .woocommerce form/input styling so the
   bespoke .nyraa-auth design wins (WC uses element+attribute selectors). */
.woocommerce-account .nyraa-auth-page .woocommerce { max-width: none; margin: 0; }
.nyraa-auth form.login,
.nyraa-auth form.register { background: none; border: 0; border-radius: 0; padding: 0; }
.nyraa-auth input.nyraa-input {
  background: var(--color-surface);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
}
.nyraa-auth input.nyraa-input:focus { background: var(--color-surface-alt); border-color: var(--color-primary); }
.nyraa-auth .nyraa-field { margin-bottom: 0; }

/* The generic WC ".woocommerce form.login label" (uppercase, spaced, block) must
   not touch the custom auth labels — real labels here are screen-reader-only. */
.nyraa-auth form.login label,
.nyraa-auth form.register label {
  text-transform: none;
  letter-spacing: normal;
  margin-bottom: 0;
  font-weight: var(--fw-regular);
}
.nyraa-auth form.login label.nyraa-check,
.nyraa-auth form.register label.nyraa-check {
  display: inline-flex;
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
}

/* ============================================================================
   Order invoice — brand header + "Print / Save as PDF", and a print stylesheet
   that strips site chrome to produce a clean printable / PDF bill.
   ============================================================================ */
.woo-invoice-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}
.woo-invoice-logo__img { max-height: 56px; width: auto; display: block; }
.woo-invoice-logo__text { font-family: var(--font-headline); font-size: var(--fs-h5); color: var(--color-primary); }
.woo-print-btn { display: inline-flex; align-items: center; gap: var(--space-xs); }
.woo-print-btn .material-symbols-outlined { font-size: 18px; }

@media print {
  .site-header,
  .site-footer,
  .cookie-consent,
  .mobile-nav,
  .skip-link,
  .site-search,
  .woocommerce-breadcrumb,
  .breadcrumb,
  .header-actions,
  .nav-toggle,
  .woo-print-btn,
  .woocommerce-MyAccount-navigation,
  #wpadminbar { display: none !important; }

  html, body { background: #fff !important; color: #000 !important; }
  .site-main { padding-top: 0 !important; }
  .container,
  .container--narrow,
  .entry,
  .woocommerce-account.logged-in .woocommerce { max-width: 100% !important; width: 100% !important; margin: 0 !important; }

  .woo-invoice-bar { border-bottom: 2px solid #333; margin-bottom: 20px; }
  .woo-invoice-logo__img { max-height: 64px; }

  .woocommerce table.shop_table,
  .woocommerce-order table {
    border: 1px solid #999 !important;
    border-collapse: collapse !important;
    width: 100% !important;
  }
  .woocommerce table.shop_table th,
  .woocommerce table.shop_table td {
    border: 1px solid #ccc !important;
    padding: 8px 10px !important;
    color: #000 !important;
  }
  .woocommerce-customer-details address {
    border: 1px solid #ccc !important;
    color: #000 !important;
    padding: 10px !important;
  }
  a { color: #000 !important; text-decoration: none !important; }
  a[href]:after { content: "" !important; }

  @page { margin: 1.4cm; }
}