/* ==========================================================================
   PiviPets — woocommerce.css

   Loaded only on shop, product, cart, checkout and account pages
   (see pivipets_is_woocommerce_context() in inc/enqueue.php).

   WooCommerce's own woocommerce.css, woocommerce-layout.css and
   woocommerce-smallscreen.css are dequeued, so everything WooCommerce
   generates is styled here against the same design tokens as the rest of
   the site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PRODUCT PAGE
   -------------------------------------------------------------------------- */
.pdp__gallery { min-width: 0; }
.pdp__summary { min-width: 0; }

.gallery__main { margin: 0; }
.gallery__img { width: 100%; aspect-ratio: 1; object-fit: cover; }

.gallery__thumbs button:hover { border-color: var(--ink-soft); }

.buybox .price { font-size: 2rem; display: block; margin: .5rem 0; }
.buybox .price del { font-size: 1rem; opacity: .55; }
.buybox .price ins { text-decoration: none; }
.buybox > .pill { display: inline-flex; margin-bottom: 1rem; }

.woocommerce-product-details__short-description {
  font-size: 1.05rem; color: var(--ink-soft);
}
.woocommerce-product-details__short-description p:last-child { margin-bottom: 0; }

/* Add-to-cart form */
.buybox form.cart { margin: 1.5rem 0; display: grid; gap: 1rem; }
.buybox form.cart .quantity { display: flex; align-items: center; gap: .5rem; }
.buybox form.cart .quantity label { margin: 0; }
.buybox form.cart .quantity input { width: 5.5rem; text-align: center; }
.buybox form.cart .single_add_to_cart_button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1.1rem 2rem; border: 2px solid transparent; border-radius: 999px;
  background: var(--sun); color: #2A1400; font-weight: 800; font-size: 1.075rem;
  cursor: pointer; width: 100%; box-shadow: 0 4px 0 var(--btn-shadow);
  transition: transform .14s ease, box-shadow .14s ease;
}
.buybox form.cart .single_add_to_cart_button:hover {
  transform: translateY(2px); box-shadow: 0 2px 0 var(--btn-shadow);
}
.buybox form.cart .single_add_to_cart_button:disabled { opacity: .55; cursor: not-allowed; }

/* Variations table */
.variations { width: 100%; border-collapse: collapse; }
.variations th, .variations td { text-align: left; padding: .35rem 0; vertical-align: middle; }
.variations th { font-weight: 700; font-size: .92rem; width: 8rem; }
.reset_variations { font-size: .82rem; color: var(--muted); }

/* Color world chooser */
.colour-world { margin-bottom: 1.25rem; }
.colour-world .option-row { margin-bottom: 0; }

/* Stock notice */
.stock.out-of-stock { color: #A03030; font-weight: 700; }
.stock.in-stock { color: var(--seal); font-weight: 700; }

/* Meta block */
.product_meta {
  margin-top: 1.5rem; padding-top: 1rem; border-top: 1px dashed var(--line);
  font-family: var(--mono); font-size: .74rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.product_meta > span { display: block; margin-bottom: .3rem; }
.product_meta a { color: var(--ink); }

/* The approval seal on the PiviPower band */
.seal-wrap { display: flex; justify-content: center; }
.seal--lg {
  width: 200px; height: 200px; font-size: .72rem;
  border-color: #FFC24A; color: #FFC24A; margin: 0;
}

/* Product tabs */
.woocommerce-tabs { margin-top: clamp(2.5rem, 5vw, 4rem); }
.woocommerce-tabs .tabs {
  list-style: none; padding: 0; margin: 0 0 1.5rem;
  display: flex; flex-wrap: wrap; gap: .5rem; border-bottom: 1px solid var(--line);
}
.woocommerce-tabs .tabs li a {
  display: inline-block; padding: .75rem 1.1rem; text-decoration: none;
  font-weight: 700; font-size: .95rem; border-radius: 999px 999px 0 0;
}
.woocommerce-tabs .tabs li.active a { background: var(--ink); color: #fff; }
.woocommerce-tabs .panel > h2:first-child { margin-top: 0; }

/* Related products and upsells */
.related, .upsells, .cross-sells { margin-top: clamp(2.5rem, 5vw, 4rem); }
.related > h2, .upsells > h2, .cross-sells > h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 1.5rem;
}

/* --------------------------------------------------------------------------
   2. SHOP ARCHIVE
   -------------------------------------------------------------------------- */
.filters .chip { text-decoration: none; }
.filters .chip[aria-current="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.filters .chip[hidden] { display: none; }

.shop-ordering { margin-left: auto; }
.shop-ordering select {
  width: auto; padding: .5rem 2rem .5rem 1rem; font-size: .88rem; font-weight: 700;
}

.woocommerce-result-count {
  font-family: var(--mono); font-size: .75rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}

.woocommerce-wrap { padding-block: 0; }

/* --------------------------------------------------------------------------
   3. CART DRAWER
   -------------------------------------------------------------------------- */
.drawer__progress { margin-bottom: 1rem; }
.drawer__subtotal { font-size: 1rem; margin: 0; }
.drawer__cart-link { text-align: center; margin: .6rem 0 0; font-size: .85rem; }
.drawer__cart-link a { color: var(--muted); }

.line-item__body { min-width: 0; }
.line-item__name { display: block; font-size: .95rem; font-weight: 700; text-decoration: none; }
.line-item__name:hover { text-decoration: underline; }
.line-item__end { text-align: right; }
.line-item__remove {
  display: block; margin-top: .2rem; font-size: .78rem;
  color: var(--muted); text-decoration: underline;
}
.line-item__remove:hover { color: #A03030; }
.line-item img { border-radius: 8px; width: 56px; height: 56px; object-fit: cover; }

.drawer.is-loading { opacity: .6; pointer-events: none; }

/* --------------------------------------------------------------------------
   4. CART, CHECKOUT AND MY ACCOUNT
   -------------------------------------------------------------------------- */
.woocommerce-cart-form { margin-bottom: 2.5rem; }

.shop_table {
  width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: .95rem;
}
.shop_table th, .shop_table td {
  text-align: left; padding: .9rem .6rem; border-bottom: 1px solid var(--line); vertical-align: middle;
}
.shop_table th {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); font-weight: 500;
}
.shop_table img { width: 64px; border-radius: var(--radius-s); }
.shop_table .product-remove a {
  display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem;
  border-radius: 50%; background: var(--surface-2); text-decoration: none; color: var(--muted);
}
.shop_table .product-remove a:hover { background: #F6DADA; color: #A03030; }
.shop_table td.actions { padding-top: 1.25rem; }

.cart-collaterals { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.cart_totals h2, .cross-sells h2 { font-size: 1.6rem; }
.cart_totals table { width: 100%; }

.coupon { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.coupon input { flex: 1 1 12rem; }

.wc-proceed-to-checkout { margin-top: 1.25rem; }
.checkout-button {
  display: flex; align-items: center; justify-content: center;
  padding: 1.1rem 2rem; border-radius: 999px; background: var(--sun); color: #2A1400;
  font-weight: 800; text-decoration: none; box-shadow: 0 4px 0 var(--btn-shadow);
}
.checkout-button:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--btn-shadow); }

/* Checkout */
.woocommerce-checkout .col2-set {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}
.woocommerce-checkout h3 { font-size: 1.4rem; margin-bottom: 1rem; }
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper { display: grid; gap: .25rem; }
.form-row { margin-bottom: 1rem; }
.form-row label { font-weight: 700; font-size: .92rem; display: block; margin-bottom: .35rem; }
.form-row .required { color: #A03030; text-decoration: none; }
.form-row-first, .form-row-last { display: inline-block; width: 48%; }
.form-row-first { margin-right: 3%; }

#order_review {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem; box-shadow: var(--shadow); margin-top: 1.5rem;
}
#payment ul.payment_methods { list-style: none; padding: 0; margin: 0 0 1.25rem; }
#payment ul.payment_methods li { padding: .75rem 0; border-bottom: 1px dashed var(--line); }
#payment .payment_box {
  background: var(--surface-2); border-radius: var(--radius-s);
  padding: .9rem 1rem; margin-top: .6rem; font-size: .9rem;
}
#place_order {
  width: 100%; padding: 1.1rem 2rem; border: 0; border-radius: 999px;
  background: var(--sun); color: #2A1400; font-weight: 800; font-size: 1.075rem;
  cursor: pointer; box-shadow: 0 4px 0 var(--btn-shadow);
}
#place_order:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--btn-shadow); }

/* My Account */
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; }
.woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--line); }
.woocommerce-MyAccount-navigation li a {
  display: block; padding: .8rem .25rem; text-decoration: none; font-weight: 700;
}
.woocommerce-MyAccount-navigation li.is-active a { color: var(--glow); }
.woocommerce-MyAccount-content { min-width: 0; }

@media (min-width: 48rem) {
  .woocommerce-account .woocommerce {
    display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: 15rem 1fr;
    align-items: start;
  }
}

.woocommerce-form-login, .woocommerce-form-register {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem; box-shadow: var(--shadow); max-width: 30rem;
}

/* --------------------------------------------------------------------------
   5. NOTICES
   -------------------------------------------------------------------------- */
.woocommerce-notices-wrapper { margin-bottom: 1.5rem; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  list-style: none; margin: 0 0 1rem; padding: 1rem 1.25rem;
  border-radius: var(--radius-s); border-left: 4px solid; font-size: .95rem;
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
}
.woocommerce-message { background: rgba(20,128,106,.10); border-color: var(--seal); color: #0B6853; }
.woocommerce-info { background: var(--surface-2); border-color: var(--glow); color: var(--ink-soft); }
.woocommerce-error { background: #FBEAEA; border-color: #C0392B; color: #8E2A20; }
.woocommerce-error li { margin: 0; }

.woocommerce-message .button,
.woocommerce-info .button {
  margin-left: auto; padding: .5rem 1rem; border-radius: 999px;
  background: var(--ink); color: #fff; text-decoration: none; font-size: .85rem; font-weight: 700;
}

/* BlockUI overlay used during AJAX */
.blockUI.blockOverlay { background: var(--surface) !important; opacity: .6 !important; }

/* Loading state on AJAX add-to-cart buttons */
.add_to_cart_button.loading { opacity: .6; pointer-events: none; }
.added_to_cart { display: none; }

/* --------------------------------------------------------------------------
   6. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 48rem) {
  .form-row-first, .form-row-last { width: 100%; margin-right: 0; }

  .shop_table thead { display: none; }
  .shop_table tr { display: block; border-bottom: 1px solid var(--line); padding: .75rem 0; }
  .shop_table td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .3rem 0; }
  .shop_table td::before { content: attr(data-title); font-weight: 700; }
  .shop_table td.product-remove::before,
  .shop_table td.product-thumbnail::before { content: ""; }
  .shop_table td.actions { display: block; }

  .trustbar--pdp { grid-template-columns: 1fr; }
  .seal--lg { width: 150px; height: 150px; font-size: .62rem; }
}

@media (max-width: 30rem) {
  .woocommerce-tabs .tabs { flex-direction: column; }
  .woocommerce-tabs .tabs li a { border-radius: var(--radius-s); }
}

/* ---------------------------------------------------------------------------
   1.3.34 — Checkout form pass.

   The root cause of the broken-looking checkout was the prose width cap in
   site.css, now fixed. These rules clean up what was left underneath: inputs
   that had borders styled but no width, a notes box at browser default size,
   payment radios detached from their labels, and card icons stacking in a
   column. Nothing here changes the checkout's structure — it is all sizing
   and alignment that was never written because the form was never seen at
   full width.
   ------------------------------------------------------------------------ */

/* Every field the same width as its row. This is the single biggest fix:
   without it the browser sizes each input to its own default, which is why
   the country select, the ZIP box and the email field were all different
   widths and labels appeared to sit beside their fields. */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-container {
  width: 100% !important;
  box-sizing: border-box;
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select {
  padding: .7rem .9rem;
  font-size: 1rem;
  line-height: 1.4;
}

/* The order-notes box was rendering a few characters wide with its own
   scrollbars. */
.woocommerce-checkout #order_comments {
  min-height: 6rem;
  resize: vertical;
}

/* Checkboxes sat detached from their labels — the newsletter opt-in and
   "Ship to a different address?" both floated away from the text. */
.woocommerce-checkout .form-row.woocommerce-validated label.checkbox,
.woocommerce-checkout label.checkbox,
.woocommerce-checkout #ship-to-different-address label {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-weight: 700;
  margin: 0;
}

.woocommerce-checkout label.checkbox input[type="checkbox"],
.woocommerce-checkout #ship-to-different-address input[type="checkbox"] {
  width: auto;
  margin: 0;
  flex: 0 0 auto;
}

.woocommerce-checkout #ship-to-different-address {
  margin: 1.25rem 0 .5rem;
  font-size: 1rem;
}

/* Payment methods: radio beside its label, not floating above it. */
#payment ul.payment_methods li > label {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-weight: 700;
  margin: 0;
}

#payment ul.payment_methods li input[type="radio"] {
  width: auto;
  margin: 0;
  flex: 0 0 auto;
}

/* Card brand icons were stacking one per line. */
#payment ul.payment_methods li img {
  display: inline-block;
  max-height: 1.6rem;
  width: auto;
  margin: 0 .2rem;
  vertical-align: middle;
}

#payment ul.payment_methods li label img + img { margin-left: .1rem; }

/* Coupon prompt at the top of the page. */
.woocommerce-checkout .woocommerce-form-coupon-toggle { margin-bottom: 1.25rem; }

.woocommerce-checkout .checkout_coupon .form-row {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.woocommerce-checkout .checkout_coupon .form-row input.input-text {
  flex: 1 1 12rem;
  width: auto !important;
}

/* Gift card field, same treatment as the coupon row. */
.woocommerce-checkout .wc-square-gift-card-actions,
.woocommerce-checkout .sv-wc-payment-gateway-gift-card-form {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
  margin: 1rem 0;
}

/* Desktop: billing on the left, order review on the right, rather than the
   review sitting a full screen below the form. */
@media (min-width: 62rem) {
  .woocommerce-checkout form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 3rem;
    align-items: start;
  }

  .woocommerce-checkout form.checkout > .col2-set,
  .woocommerce-checkout form.checkout > .woocommerce-additional-fields {
    grid-column: 1;
  }

  .woocommerce-checkout form.checkout > h3#order_review_heading,
  .woocommerce-checkout form.checkout > #order_review {
    grid-column: 2;
  }

  .woocommerce-checkout form.checkout > #order_review { margin-top: 0; }

  /* Inside the left column the billing fields are already one per row, so
     the two-up grid from .col2-set is not wanted here. */
  .woocommerce-checkout .col2-set { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   1.3.35 — checkout follow-up.

   1.3.34 fixed the container but the fields themselves stayed narrow and
   ragged. The width rules were scoped to input.input-text, which does not
   catch every field WooCommerce and its gateways render, and the rows
   themselves were shrink-to-fit so a full-width input had nothing to fill.
   These rules force the row to full width first, then the field inside it.
   ------------------------------------------------------------------------ */

/* The row must be full width before anything inside it can be. */
.woocommerce-checkout .form-row,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper,
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

/* Then every field fills it. Broader than the 1.3.34 selector: any text-like
   input, not only those carrying .input-text. */
.woocommerce-checkout .form-row input[type="text"],
.woocommerce-checkout .form-row input[type="email"],
.woocommerce-checkout .form-row input[type="tel"],
.woocommerce-checkout .form-row input[type="password"],
.woocommerce-checkout .form-row input[type="number"],
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row .select2-container,
.woocommerce-checkout .form-row .selection,
.woocommerce-checkout .form-row .select2-selection {
  display: block;
  width: 100% !important;
  max-width: none;
  box-sizing: border-box;
}

/* Checkboxes and radios must not be caught by the rule above. */
.woocommerce-checkout .form-row input[type="checkbox"],
.woocommerce-checkout .form-row input[type="radio"] {
  display: inline-block;
  width: auto !important;
}

/* The notes box was still a few characters wide with its own scrollbars. */
.woocommerce-checkout #order_comments,
.woocommerce-checkout .woocommerce-additional-fields textarea {
  display: block;
  width: 100% !important;
  min-height: 6.5rem;
  resize: vertical;
  overflow: auto;
}

/* "Ship to a different address?" was sitting inline beside the notes label. */
.woocommerce-checkout #ship-to-different-address {
  display: block;
  width: 100%;
  clear: both;
}

@media (min-width: 62rem) {
  /* Explicit rows. Without them the order review was placed in the next free
     row of column two, which was as tall as the whole billing form — leaving
     a screen of empty space between "Your order" and the summary itself. */
  /* 1.3.36 — the billing block spans the first two rows rather than filling
     row 1 by itself. Previously row 1 was as tall as the entire billing form,
     so the order summary in row 2 began level with the bottom of it, leaving
     a screen of white space under the "Your order" heading. With the span,
     row 1 is only as tall as the heading and the summary follows directly
     beneath it. */
  .woocommerce-checkout form.checkout > .col2-set {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .woocommerce-checkout form.checkout > .woocommerce-additional-fields {
    grid-column: 1;
    grid-row: 3;
  }

  .woocommerce-checkout form.checkout > h3#order_review_heading {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
    align-self: start;
  }

  .woocommerce-checkout form.checkout > #order_review {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
    align-self: start;
  }
}