/* ==========================================================================
   WooCommerce pages that had no Shopify theme equivalent — checkout, the
   account area, notices. Shopify hosted its own checkout, so these only
   borrow the design tokens from base.css.
   ========================================================================== */

/* base.css gives some elements an explicit display (the cart count bubble,
   .button), which beats the `hidden` attribute — so an empty cart showed a
   "0" bubble. Same bug exists in the Shopify theme. */
[hidden] { display: none !important; }

/* Sticky header. Each section is wrapped in a .shopify-section div, and a
   sticky element only sticks inside its parent, so the wrapper is what
   sticks. (Shopify's own theme did the same with its section wrapper.) */
.shopify-section--header:has(.header-wrapper--sticky) {
  position: sticky;
  top: 0;
  z-index: 50;
}

/* ...under the WordPress admin bar when logged in. */
.admin-bar .shopify-section--header:has(.header-wrapper--sticky) { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .shopify-section--header:has(.header-wrapper--sticky) { top: 46px; }
}
@media screen and (max-width: 600px) {
  .admin-bar .shopify-section--header:has(.header-wrapper--sticky) { top: 0; }
}

/* ------------------------------------------------------------- notices */

.woocommerce-notices-wrapper:not(:empty) { padding-top: 2rem; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  list-style: none;
  margin: 0 0 2rem;
  padding: 1.4rem 1.8rem;
  border-left: 0.4rem solid var(--color-accent-1);
  border-radius: var(--card-radius);
  background: var(--color-background-alt);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
}

.woocommerce-error {
  border-left-color: #d20f0f;
  display: block; /* a list of problems, one per line */
}
.woocommerce-error li { margin: 0 0 0.4rem; }
.woocommerce-error li:last-child { margin-bottom: 0; }

/* Space between the error box and the form it sits above. */
form.woocommerce-checkout > .woocommerce-NoticeGroup { margin-bottom: 2.4rem; }
.woocommerce-message .button,
.woocommerce-info .button { min-height: 4rem; padding: 0.8rem 2rem; order: 2; }
/* Notice links are coloured as links; a .button inside one must keep the
   button text colour or it turns orange-on-orange. */
.woocommerce-message a.button,
.woocommerce-info a.button,
.woocommerce-error a.button { color: var(--color-cta-text); text-decoration: none; }

/* --------------------------------------------------- classic forms/tables */

.woocommerce form .input-text,
.woocommerce form select,
.woocommerce-page form .input-text,
.woocommerce-page form select,
.woocommerce form textarea {
  width: 100%;
  min-height: 4.8rem;
  padding: 1.2rem 1.6rem;
  font-family: var(--font-body-family);
  font-size: 1.6rem;
  color: var(--color-text);
  background-color: var(--color-background);
  border: 0.1rem solid rgba(var(--color-text-rgb), 0.2);
  border-radius: 0;
}

.woocommerce form .form-row { margin: 0 0 1.6rem; }

/* Country / State dropdowns: WooCommerce swaps the <select> for a searchable
   select2 box whose default look (28px, rounded, dark border) doesn't match
   the other fields. Same height, border and padding as .input-text. */
.woocommerce .select2-container { width: 100% !important; }
.woocommerce .select2-container .select2-selection--single {
  height: 4.8rem;
  border: 0.1rem solid rgba(var(--color-text-rgb), 0.2);
  border-radius: 0;
  background: var(--color-background);
}
.woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 4.6rem;
  padding: 0 4rem 0 1.6rem;
  font-family: var(--font-body-family);
  font-size: 1.6rem;
  color: var(--color-text);
}
.woocommerce .select2-container .select2-selection--single .select2-selection__arrow {
  height: 4.6rem;
  right: 1.2rem;
}
.woocommerce .select2-container--focus .select2-selection--single,
.woocommerce .select2-container--open .select2-selection--single {
  border-color: var(--color-text);
}
/* The open list is attached to <body>, outside .woocommerce. */
.select2-dropdown {
  border: 0.1rem solid var(--color-text);
  border-radius: 0;
  font-family: var(--font-body-family);
  font-size: 1.5rem;
}
.select2-search--dropdown .select2-search__field {
  min-height: 4rem;
  padding: 0.8rem 1.2rem;
  border: 0.1rem solid rgba(var(--color-text-rgb), 0.2);
  font-family: var(--font-body-family);
  font-size: 1.5rem;
}
.select2-results__option { padding: 0.8rem 1.6rem; }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
  background: var(--color-accent-1);
  color: #fff;
}
.woocommerce form .form-row label { display: block; margin-bottom: 0.6rem; font-weight: var(--font-body-weight-bold); }
.woocommerce form .form-row .required { color: #d20f0f; text-decoration: none; }

@media screen and (min-width: 750px) {
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last { width: calc(50% - 0.8rem); display: inline-block; vertical-align: top; }
  .woocommerce form .form-row-first { margin-right: 1.6rem; }
}

.woocommerce table.shop_table,
.woocommerce-page table.shop_table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 3rem;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: 1.2rem 1rem;
  text-align: left;
  border-bottom: 0.1rem solid rgba(var(--color-text-rgb), 0.1);
}

/* -------------------------------------------- classic checkout layout */

/* Desktop: billing on the left; order summary, payment and the PayPal
   buttons in a right column that stays in view while the form scrolls. */
@media screen and (min-width: 990px) {
  form.woocommerce-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(36rem, 46rem);
    /* Row 1 is reserved for the error box WooCommerce inserts on a failed
       submit; it collapses to nothing when there are no errors. */
    grid-template-rows: auto auto 1fr;
    column-gap: 5rem;
    align-items: start;
  }

  form.woocommerce-checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; grid-row: 1; }

  form.woocommerce-checkout #customer_details {
    grid-column: 1;
    grid-row: 2 / span 2;
  }

  /* The summary box is the only right-column element, so it can stick as
     one unit. The separate "Your order" heading is kept for screen readers
     and drawn inside the box instead; two sticky siblings slid over each
     other. */
  form.woocommerce-checkout #order_review_heading {
    position: absolute !important;
    width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); border: 0;
  }

  form.woocommerce-checkout #order_review {
    grid-column: 2;
    grid-row: 2 / span 2;
    background: var(--color-background-alt);
    padding: 2.4rem 2.8rem 2.8rem;
    border-radius: var(--card-radius);
  }

  form.woocommerce-checkout #order_review::before {
    content: "Your order";
    display: block;
    margin-bottom: 0.8rem;
    font-family: var(--font-heading-family);
    font-weight: var(--font-heading-weight);
    letter-spacing: var(--font-heading-letter-spacing);
    font-size: calc(var(--font-heading-scale) * 2.4rem);
    line-height: 1.2;
  }
}

/* Sticky only when the whole box fits on screen below the header; on short
   laptop screens it scrolls with the page so the pay buttons are never cut off. */
@media screen and (min-width: 990px) and (min-height: 960px) {
  form.woocommerce-checkout #order_review { position: sticky; top: calc(var(--tlb-header-height, 11.2rem) + 2rem); }
  .admin-bar form.woocommerce-checkout #order_review { top: calc(var(--tlb-header-height, 11.2rem) + 2rem + 32px); }
}

/* The billing/shipping halves stack inside the left column. */
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { width: 100%; float: none; }

.woocommerce-checkout #order_review table.shop_table { margin-bottom: 2rem; font-size: 1.4rem; }
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td { padding: 1rem 0.4rem; }
.woocommerce-checkout #order_review table.shop_table td:last-child,
.woocommerce-checkout #order_review table.shop_table th:last-child { text-align: right; }
.woocommerce-checkout #order_review .order-total th,
.woocommerce-checkout #order_review .order-total td { font-size: 1.7rem; border-bottom: 0; }
.woocommerce-checkout #order_review .woocommerce-privacy-policy-text { font-size: 1.2rem; opacity: 0.75; }

/* ------------------------------------------- classic checkout payment */

.woocommerce-checkout #payment ul.payment_methods {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
}

.woocommerce-checkout #payment ul.payment_methods > li {
  background: var(--color-background);
  padding: 1.6rem;
  border: 0.1rem solid rgba(var(--color-text-rgb), 0.2);
  border-radius: var(--card-radius);
  margin-bottom: 1rem;
}

.woocommerce-checkout #payment ul.payment_methods > li > label {
  font-weight: var(--font-body-weight-bold);
  cursor: pointer;
}

.woocommerce-checkout #payment .payment_box { margin-top: 0.8rem; font-size: 1.4rem; opacity: 0.85; }
.woocommerce-checkout #payment .payment_box p { margin: 0; }
.woocommerce-checkout #payment .place-order { padding: 0; }
.woocommerce-checkout #place_order { width: 100%; }

/* ------------------------------------------------------------- account */

.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-ResetPassword { max-width: 52rem; }

/* Login and Register side by side (registration on in WooCommerce settings). */
#customer_login { display: grid; gap: 4rem; }
@media screen and (min-width: 750px) {
  #customer_login { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 6rem; }
}
#customer_login .woocommerce-form-login,
#customer_login .woocommerce-form-register { max-width: none; }
#customer_login h2 { font-size: calc(var(--font-heading-scale) * 2.2rem); margin-bottom: 2rem; }

/* Login form: "Remember me" and "Lost your password?" share a row, the
   button goes full width underneath — without overriding Woo's template. */
.woocommerce-form-login {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 2rem;
}
.woocommerce-form-login > * { grid-column: 1 / -1; }
.woocommerce-form-login > p.form-row:not(.woocommerce-form-row) { display: contents; }
.woocommerce-form-login .woocommerce-form-login__rememberme { grid-column: 1; margin: 0 0 2rem; }
.woocommerce-form-login .lost_password { grid-column: 2; margin: 0 0 2rem; text-align: right; }
.woocommerce-form-login .lost_password a { font-weight: var(--font-body-weight-bold); color: var(--color-text); text-decoration: none; }
.woocommerce-form-login .lost_password a:hover { color: var(--color-accent-1); }
.woocommerce-form-login .woocommerce-form-login__submit { order: 1; grid-column: 1 / -1; }

.woocommerce-form-login__submit,
.woocommerce-form-register__submit { width: 100%; }

.woocommerce-form-register .woocommerce-privacy-policy-text { font-size: 1.3rem; opacity: 0.75; margin-bottom: 2rem; }

/* WooCommerce's show/hide password button, drawn as an eye inside the field. */
.woocommerce .password-input { position: relative; display: block; }
.woocommerce .password-input .input-text { padding-right: 5rem; }
.woocommerce .show-password-input {
  position: absolute;
  top: 50%;
  right: 1.2rem;
  width: 3rem;
  height: 3rem;
  min-width: 0;
  min-height: 0;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  background: transparent no-repeat center / 2rem 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23040C15' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  opacity: 0.6;
  cursor: pointer;
}
.woocommerce .show-password-input:hover { opacity: 1; }
.woocommerce .show-password-input.display-password {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23040C15' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cline x1='3' y1='3' x2='21' y2='21'/%3E%3C/svg%3E");
}

.woocommerce-form-login__rememberme { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.6rem; }

.woocommerce-account .woocommerce {
  display: grid;
  gap: 3rem;
}

@media screen and (min-width: 990px) {
  .woocommerce-account.logged-in .woocommerce { grid-template-columns: 24rem minmax(0, 1fr); }
}

.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; }
.woocommerce-MyAccount-navigation a {
  display: block;
  padding: 1.2rem 1.6rem;
  text-decoration: none;
  border-bottom: 0.1rem solid rgba(var(--color-text-rgb), 0.1);
}
.woocommerce-MyAccount-navigation .is-active a {
  color: var(--color-accent-1);
  font-weight: var(--font-body-weight-bold);
}

/* ------------------------------------------- block cart & checkout */

.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  background-color: var(--color-cta) !important;
  color: var(--color-cta-text) !important;
  border-radius: var(--buttons-radius) !important;
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  letter-spacing: 0.08rem;
  text-transform: uppercase;
  min-height: 4.8rem;
}

.wc-block-components-text-input input,
.wc-block-components-combobox .wc-block-components-combobox-control input,
.wc-block-components-form .wc-block-components-text-input input {
  font-family: var(--font-body-family);
}

.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart { font-size: 1.5rem; }

.wc-block-components-title.wc-block-components-title {
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  letter-spacing: var(--font-heading-letter-spacing);
}

/* Product page notices sit above the product grid. */
.template-product .woocommerce-notices-wrapper { margin-top: 2rem; }

/* Star ratings inside WooCommerce emails/widgets use the accent colour. */
.star-rating span::before { color: var(--color-accent-1); }