/* ==========================================================================
   PEPTISSIMA — WOOCOMMERCE PRIMITIVES
   The theme's replacement for WooCommerce's own woocommerce-general /
   woocommerce-layout / woocommerce-smallscreen stylesheets, which
   inc/woocommerce.php dequeues (their `.woocommerce form .form-row …` and
   `#payment …` selectors out-specified the brand CSS and are what pulled
   checkout out of shape).

   Only what EVERY WooCommerce screen shares lives here: notices, native
   form rows, password toggle/strength, select2, buttons, order tables,
   the loading overlay, and a container for WooCommerce screens that have
   no theme override (lost password, order-pay). Page-specific layout stays
   in cart.css / checkout.css / account.css / product.css / shop.css.

   Selectors target WooCommerce's native class names — if a WooCommerce
   update renames one, fix it here rather than adding a template override.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CONTAINER FOR UN-OVERRIDDEN SCREENS
   page.php wraps WooCommerce page content in .p-wc-page. The theme's own
   overrides (.p-cart, .p-checkout, .p-thankyou, .p-account, .p-auth) carry
   their own full-width sections; anything else WooCommerce prints at the
   top level of the shortcode wrapper gets the standard container.
   -------------------------------------------------------------------------- */

.p-wc-page {
  background: var(--surface);
}

.p-wc-page > .woocommerce > :not(.p-cart):not(.p-checkout):not(.p-thankyou):not(.p-account):not(.p-auth) {
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.p-wc-page > .woocommerce > :not(.p-cart):not(.p-checkout):not(.p-thankyou):not(.p-account):not(.p-auth):first-child {
  margin-top: 56px;
}

.p-wc-page > .woocommerce > :not(.p-cart):not(.p-checkout):not(.p-thankyou):not(.p-account):not(.p-auth):last-child {
  margin-bottom: var(--section-y);
}

.p-wc-page > .woocommerce > .woocommerce-notices-wrapper:empty {
  display: none;
}

/* Lost / reset password (myaccount/form-lost-password.php,
   form-reset-password.php) and order-pay (checkout/form-pay.php): no theme
   override, so give the bare form a card. */
.p-wc-page .woocommerce-ResetPassword,
.p-wc-page .lost_reset_password,
.p-wc-page #order_review:not(.woocommerce-checkout-review-order) {
  max-width: 560px;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 40px;
}

.p-wc-page #order_review:not(.woocommerce-checkout-review-order) {
  max-width: 760px;
}

.p-wc-page .woocommerce-ResetPassword > p:first-child {
  color: var(--text);
  opacity: 0.78;
  margin: 0 0 24px;
}

/* --------------------------------------------------------------------------
   2. NOTICES — wc_print_notices() / woocommerce_output_all_notices()
   -------------------------------------------------------------------------- */

.woocommerce-notices-wrapper:empty {
  display: none;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin: 0 0 20px;
  padding: 16px 20px 16px 48px;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: 4px;
  background: var(--surface-alt);
  color: var(--text);
  font-size: var(--text-sm);
  line-height: 1.6;
  list-style: none;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 18px;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--notice-icon) center / contain no-repeat;
  mask: var(--notice-icon) center / contain no-repeat;
}

.woocommerce-message {
  border-left-color: var(--status-green);
  --notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.2 2.6 2.6L16 9.4'/%3E%3C/svg%3E");
}

.woocommerce-message::before {
  color: var(--status-green);
}

.woocommerce-info {
  border-left-color: var(--navy);
  --notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5'/%3E%3Ccircle cx='12' cy='7.9' r='.6'/%3E%3C/svg%3E");
}

.woocommerce-error {
  flex-direction: column;
  align-items: flex-start;
  border-color: rgba(218, 27, 38, 0.25);
  border-left-color: var(--red);
  background: rgba(218, 27, 38, 0.04);
  --notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 2.6 17.2a2 2 0 0 0 1.7 3h15.4a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9.4v4.2'/%3E%3C/svg%3E");
}

.woocommerce-error::before {
  color: var(--red);
}

.woocommerce-error li {
  margin: 0;
}

.woocommerce-error li + li {
  margin-top: 4px;
}

.woocommerce-message a:not(.button),
.woocommerce-info a:not(.button),
.woocommerce-error a:not(.button) {
  color: var(--red);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* "View cart" / "Continue shopping" — WooCommerce puts the button first in
   the markup; push it to the end of the row. */
.woocommerce-message .button,
.woocommerce-info .button {
  order: 2;
  padding: 9px 16px;
  font-size: var(--text-xs);
}

/* --------------------------------------------------------------------------
   3. BUTTONS — WooCommerce's .button on screens the theme doesn't override
   (peptissima.css sets the colours; this adds the box model).
   -------------------------------------------------------------------------- */

.woocommerce .button,
.woocommerce button[type="submit"]:not([class*="btn-"]):not(.p-icon-btn):not(.p-qty-stepper__btn),
.woocommerce-page .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border: 1px solid var(--navy);
  border-radius: 2px;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.woocommerce .button:hover,
.woocommerce button[type="submit"]:not([class*="btn-"]):not(.p-icon-btn):not(.p-qty-stepper__btn):hover,
.woocommerce-page .button:hover {
  background: var(--navy-light);
  border-color: var(--navy-light);
  transform: translateY(-1px);
}

.woocommerce .button.alt,
.woocommerce .button.checkout-button {
  background: var(--red);
  border-color: var(--red);
}

.woocommerce .button.alt:hover,
.woocommerce .button.checkout-button:hover {
  background: var(--red-dark);
  border-color: var(--red-dark);
}

.woocommerce .button:disabled,
.woocommerce .button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* --------------------------------------------------------------------------
   4. NATIVE FORM ROWS — woocommerce_form_field() output, used by checkout,
   edit-address, edit-account, lost/reset password and order-pay.
   -------------------------------------------------------------------------- */

.woocommerce form .form-row {
  margin: 0 0 18px;
  padding: 0;
}

.woocommerce form .form-row label:not(.woocommerce-form__label-for-checkbox):not(.checkbox) {
  display: block;
  margin-bottom: 8px;
  color: var(--text);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-transform: uppercase;
}

.woocommerce form .form-row .required {
  color: var(--red);
  border: 0;
  text-decoration: none;
}

.woocommerce form .form-row .optional {
  color: var(--text);
  opacity: 0.5;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
}

.woocommerce form .form-row .woocommerce-input-wrapper {
  display: block;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea,
.woocommerce form input.input-text {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 13px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.5;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce form .form-row select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23001332' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
}

.woocommerce form .form-row textarea {
  min-height: 110px;
  resize: vertical;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form input.input-text:focus {
  border-color: var(--navy);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 19, 50, 0.1);
}

.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select,
.woocommerce form .form-row.woocommerce-invalid .select2-selection {
  border-color: var(--red);
}

.woocommerce form .form-row.woocommerce-invalid label {
  color: var(--red);
}

.woocommerce form .form-row .checkout-inline-error-message,
.woocommerce form .form-row .woocommerce-error-message {
  margin: 6px 0 0;
  color: var(--red);
  font-size: var(--text-xs);
}

.woocommerce form .form-row .description {
  margin: 6px 0 0;
  color: var(--text);
  opacity: 0.6;
  font-size: var(--text-xs);
}

/* Checkboxes/radios: WooCommerce's label wraps the input. */
.woocommerce form .woocommerce-form__label-for-checkbox,
.woocommerce form .form-row label.checkbox {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
}

.woocommerce form input[type="checkbox"],
.woocommerce form input[type="radio"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--red);
}

/* Two-up name/city rows. Grid on the field wrapper rather than WooCommerce's
   47%-width floats, so hidden rows (state, toggled by country) never leave
   a gap and nothing depends on whitespace between inline-blocks. */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-address-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
}

.woocommerce-billing-fields__field-wrapper > .form-row,
.woocommerce-shipping-fields__field-wrapper > .form-row,
.woocommerce-address-fields__field-wrapper > .form-row {
  grid-column: 1 / -1;
}

.woocommerce-billing-fields__field-wrapper > .form-row-first,
.woocommerce-shipping-fields__field-wrapper > .form-row-first,
.woocommerce-address-fields__field-wrapper > .form-row-first {
  grid-column: 1;
}

.woocommerce-billing-fields__field-wrapper > .form-row-last,
.woocommerce-shipping-fields__field-wrapper > .form-row-last,
.woocommerce-address-fields__field-wrapper > .form-row-last {
  grid-column: 2;
}

/* Two-up rows outside a field wrapper (edit-account first/last name,
   lost-password): plain flex. */
.woocommerce-EditAccountForm .clear,
.woocommerce-ResetPassword .clear {
  display: none;
}

/* --------------------------------------------------------------------------
   5. PASSWORD — show/hide toggle and strength meter (woocommerce.js /
   password-strength-meter.js add both at runtime).
   -------------------------------------------------------------------------- */

.woocommerce .password-input {
  position: relative;
  display: block;
}

.woocommerce .password-input input.input-text {
  padding-right: 48px;
}

.woocommerce .show-password-input {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  opacity: 0.55;
  cursor: pointer;
  transform: translateY(-50%);
}

.woocommerce .show-password-input::before {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  margin: auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.8 12 5.8 21.5 12 21.5 12 18 18.2 12 18.2 2.5 12 2.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.8 12 5.8 21.5 12 21.5 12 18 18.2 12 18.2 2.5 12 2.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.woocommerce .show-password-input.display-password {
  opacity: 1;
}

.woocommerce .show-password-input:hover {
  opacity: 0.9;
  transform: translateY(-50%);
}

.woocommerce-password-strength {
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 2px;
  font-size: var(--text-xs);
  font-weight: 600;
  text-align: center;
}

.woocommerce-password-strength.short,
.woocommerce-password-strength.bad {
  background: rgba(218, 27, 38, 0.1);
  color: var(--red);
}

.woocommerce-password-strength.good {
  background: rgba(196, 115, 24, 0.12);
  color: var(--status-orange);
}

.woocommerce-password-strength.strong {
  background: rgba(47, 143, 91, 0.12);
  color: var(--status-green);
}

.woocommerce-password-hint {
  display: block;
  margin-top: 6px;
  color: var(--text);
  opacity: 0.6;
  font-size: var(--text-xs);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   6. SELECT2 — country/state pickers (select2.css itself still loads; this
   aligns it to the theme's inputs).
   -------------------------------------------------------------------------- */

.woocommerce .select2-container {
  width: 100% !important;
}

.woocommerce .select2-container--default .select2-selection--single {
  height: auto;
  min-height: 48px;
  padding: 11px 40px 11px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--surface);
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  color: var(--text);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 50%;
  right: 12px;
  height: 20px;
  transform: translateY(-50%);
}

.woocommerce .select2-container--focus .select2-selection--single,
.woocommerce .select2-container--open .select2-selection--single {
  border-color: var(--navy);
}

.select2-dropdown {
  border-color: var(--line-strong);
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
  background: var(--navy);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  padding: 8px 10px;
  border-color: var(--line-strong);
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   7. TABLES — order details (thank you, view order, order-pay)
   -------------------------------------------------------------------------- */

.woocommerce table.shop_table {
  width: 100%;
  margin: 0 0 24px;
  border-collapse: collapse;
  font-size: var(--text-sm);
  color: var(--text);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.woocommerce table.shop_table th + th,
.woocommerce table.shop_table td + td,
.woocommerce table.shop_table tfoot td {
  padding-left: 16px;
  text-align: right;
}

.woocommerce table.shop_table thead th {
  padding-top: 0;
  color: var(--text);
  opacity: 0.55;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.woocommerce table.shop_table tfoot tr:last-child th,
.woocommerce table.shop_table tfoot tr:last-child td {
  border-bottom: 0;
  color: var(--navy);
  font-size: var(--text-md);
  font-weight: 700;
}

.woocommerce table.shop_table .product-quantity {
  opacity: 0.6;
  font-weight: 400;
}

.woocommerce table.shop_table .wc-item-meta {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-xs);
  opacity: 0.7;
}

.woocommerce table.shop_table .wc-item-meta p {
  display: inline;
  margin: 0;
}

.woocommerce-order-details,
.woocommerce-customer-details {
  margin-top: 40px;
  text-align: left;
}

.woocommerce-order-details__title,
.woocommerce-column__title,
.woocommerce-customer-details h2 {
  margin: 0 0 16px;
  color: var(--text);
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 700;
}

.woocommerce-customer-details .woocommerce-columns--addresses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.woocommerce-customer-details address {
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-raised);
  color: var(--text);
  font-size: var(--text-sm);
  font-style: normal;
  line-height: 1.8;
}

.woocommerce-customer-details address p {
  margin: 8px 0 0;
}

.woocommerce-order-details .order-again {
  margin: 0;
}

mark.order-number,
mark.order-date,
mark.order-status {
  background: transparent;
  color: var(--navy);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   8. LOADING OVERLAY — jQuery blockUI during checkout/cart AJAX
   -------------------------------------------------------------------------- */

.blockUI.blockOverlay::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border: 2px solid var(--line-strong);
  border-top-color: var(--red);
  border-radius: 50%;
  animation: p-wc-spin 0.8s linear infinite;
}

@keyframes p-wc-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .blockUI.blockOverlay::before {
    animation-duration: 2.4s;
  }
}

/* --------------------------------------------------------------------------
   9. MISC
   -------------------------------------------------------------------------- */

/* Quantity input on WooCommerce's fallback add-to-cart (variable/grouped
   products — see CLAUDE.md "Known placeholders"). */
.woocommerce .quantity .qty {
  width: 80px;
  padding: 12px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}

.woocommerce .woocommerce-privacy-policy-text p {
  margin: 0 0 12px;
  color: var(--text);
  opacity: 0.65;
  font-size: var(--text-xs);
  line-height: 1.6;
}

.woocommerce .woocommerce-privacy-policy-text a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media screen and (max-width: 749px) {
  .p-wc-page > .woocommerce > :not(.p-cart):not(.p-checkout):not(.p-thankyou):not(.p-account):not(.p-auth):first-child {
    margin-top: 32px;
  }

  .p-wc-page > .woocommerce > :not(.p-cart):not(.p-checkout):not(.p-thankyou):not(.p-account):not(.p-auth):last-child {
    margin-bottom: 56px;
  }

  .p-wc-page .woocommerce-ResetPassword,
  .p-wc-page .lost_reset_password,
  .p-wc-page #order_review:not(.woocommerce-checkout-review-order) {
    padding: 24px;
  }

  .woocommerce-billing-fields__field-wrapper > .form-row-first,
  .woocommerce-shipping-fields__field-wrapper > .form-row-first,
  .woocommerce-address-fields__field-wrapper > .form-row-first,
  .woocommerce-billing-fields__field-wrapper > .form-row-last,
  .woocommerce-shipping-fields__field-wrapper > .form-row-last,
  .woocommerce-address-fields__field-wrapper > .form-row-last {
    grid-column: 1 / -1;
  }

  .woocommerce-customer-details .woocommerce-columns--addresses {
    grid-template-columns: 1fr;
  }

  .woocommerce-message,
  .woocommerce-info,
  .woocommerce-error {
    padding-right: 16px;
  }
}