/* ============================================================
   WagTales — WooCommerce styling bridge
   Reuses the palette / radii / shadows / button look from
   styles.css (:root vars --amber --orange --orange-deep
   --yellow --ink --muted --line). This file styles NEW theme
   classes the static design lacks, plus all WooCommerce pages,
   to match the yellow/orange pet brand.
   ============================================================ */

/* Brand tokens local fallbacks (in case :root vars are absent) */
:root {
  --wag-orange: var(--orange, #f15a24);
  --wag-orange-hover: #d94e1a;
  --wag-amber: var(--amber, #f4a300);
  --wag-yellow: var(--yellow, #ffce2e);
  --wag-ink: var(--ink, #2b2b2b);
  --wag-muted: var(--muted, #8a8a8a);
  --wag-line: var(--line, #ececec);
  --wag-cream: #fcebb4;
  --wag-radius-pill: 999px;
  --wag-radius-card: 14px;
  --wag-radius-input: 10px;
  --wag-shadow-card: 0 8px 22px rgba(0, 0, 0, 0.07);
  --wag-shadow-btn: 0 8px 18px rgba(241, 90, 36, 0.24);
  --wag-max: 1280px;
}

/* ============================================================
   ADD-TO-CART BUTTON (.wag-atc) — pill, brand orange
   Styled like .probs__btn but full-width under cards.
   Markup: <a class="button product_type_x wag-atc ...">
   ============================================================ */
.wag-atc,
a.wag-atc,
.button.wag-atc {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  background: var(--wag-orange);
  color: #fff;
  border: none;
  border-radius: var(--wag-radius-pill);
  padding: 11px 22px;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}
.wag-atc:hover,
a.wag-atc:hover,
.button.wag-atc:hover {
  background: var(--wag-orange-hover);
  color: #fff;
  box-shadow: var(--wag-shadow-btn);
}
.wag-atc:active { transform: translateY(1px); }
.wag-atc.loading { opacity: 0.75; pointer-events: none; }
.wag-atc.added { background: var(--wag-amber); }

/* card cart wrappers — spacing under the card body */
.fcard__cart,
.pcard__cart {
  margin-top: 12px;
}

/* ============================================================
   CART COUNT BADGE (.wag-cart-count) on header cart icon
   ============================================================ */
.icon-btn--cart { position: relative; }
.wag-cart-count {
  position: absolute;
  top: -8px;
  right: -10px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--wag-yellow);
  color: #1c1c1c;
  font-family: "Inter", "Poppins", sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  display: inline-block;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.wag-cart-count.is-empty { display: none; }

/* Wishlist count badge — same look as the cart badge. */
.icon-btn--wish { position: relative; }
.wag-wish-count {
  position: absolute;
  top: -8px;
  right: -10px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: 50%;
  background: #e63946;
  color: #fff;
  font-family: "Inter", "Poppins", sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  display: inline-block;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.wag-wish-count.is-empty { display: none; }

/* ============================================================
   MOBILE NAV — hamburger toggle, nav list reset, slide-in panel
   ============================================================ */
.nav-toggle {
  display: none;              /* hidden on desktop; shown < 1024px */
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 10px;
  background: #faf4e8;
  color: var(--wag-amber);
  font-size: 18px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle:hover { background: #f6ecd6; }

/* ul reset inside .nav */
.nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 22px;
}
.nav__list li { list-style: none; }
.nav__list a {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #3a3a3a;
  white-space: nowrap;
}
.nav__list a:hover { color: var(--wag-orange); }
.nav__list .current-menu-item > a,
.nav__list .current_page_item > a { color: var(--wag-orange); }

/* submenu (dropdown) */
.nav__list .sub-menu {
  list-style: none;
  margin: 0;
  padding: 8px 0;
}

/* ============================================================
   WOOCOMMERCE — shop wrapper + hero header
   ============================================================ */
.wag-shop {
  display: block;
  background: #fff;
  padding: 8px 0 64px;
}
.wag-shop__inner {
  max-width: var(--wag-max);
  margin: 0 auto;
  padding: 0 48px;
}

.wag-shop-hero {
  margin: 8px 0 30px;
  padding: 30px 0 24px;
  border-bottom: 1px solid var(--wag-line);
}
.wag-shop-hero__title {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: 34px;
  line-height: 1.15;
  color: var(--wag-orange);
  margin: 0 0 6px;
}
.wag-shop-hero__count {
  font-family: "Inter", "Poppins", sans-serif;
  font-size: 14px;
  color: var(--wag-muted);
  margin: 0;
}

/* WooCommerce native result-count / ordering row */
.woocommerce .woocommerce-result-count {
  font-family: "Inter", "Poppins", sans-serif;
  font-size: 13px;
  color: var(--wag-muted);
  margin: 0 0 16px;
}
.woocommerce .woocommerce-ordering select,
.wag-shop .select2-container,
.woocommerce select.orderby {
  font-family: inherit;
  font-size: 14px;
  border: 1px solid #e2e2e5;
  border-radius: var(--wag-radius-input);
  padding: 9px 14px;
  background: #fff;
  color: var(--wag-ink);
  outline: none;
}

/* ============================================================
   PRODUCT GRID (ul.products) — brand cards (fcard look)
   ============================================================ */
.woocommerce ul.products,
.woocommerce-page ul.products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* mobile */
  gap: 22px;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  list-style: none;
  margin: 0;
  padding: 0;
  width: auto;
  float: none;
  position: relative;
  text-align: left;
}
.woocommerce ul.products li.product::before { content: none; }
/* WooCommerce core (woocommerce-layout.css) sets a per-column width + float on
   li.product via the `columns-N` class. Inside our CSS grid that leaves each card
   narrow and pinned to the left of its cell. Force every product to fill its grid
   cell so the row is balanced, not left-crammed. */
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
  width: auto;
  float: none;
  margin: 0;
  clear: none;
}
/* Kill WooCommerce's clearfix pseudo-elements — in a CSS grid they become
   phantom grid items that leave an empty leading cell in the first row. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after { content: none; display: none; }

/* image box like .fcard__box */
.woocommerce ul.products li.product a img {
  margin: 0 0 12px;
  border-radius: var(--wag-radius-card);
  background: #fff;
  box-shadow: var(--wag-shadow-card);
  object-fit: contain;
  aspect-ratio: 1 / 1;
  padding: 14px;
  box-sizing: border-box;
  transition: transform 0.2s ease;
}
.woocommerce ul.products li.product:hover a img { transform: translateY(-3px); }

/* The rule above is for WooCommerce's DEFAULT loop card. Our branded card already
   wraps the image in .fcard__box, so that white box + shadow + padding gets applied
   a SECOND time to the inner <img> — rendering a small boxed image inside the box
   (a box-in-a-box). Cancel it so the product photo fills the .fcard__box like the
   reference design. */
.woocommerce ul.products li.product .fcard__img img,
.woocommerce-page ul.products li.product .fcard__img img {
  margin: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Move the soft card shadow onto the box itself (it used to sit on the inner
   img we just reset) so the image panel floats like the reference card. */
.fcard-li .fcard__box { box-shadow: var(--wag-shadow-card); }

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
  font-family: "Inter", "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--wag-ink);
  padding: 0;
  margin: 0 0 6px;
  line-height: 1.3;
}
.woocommerce ul.products li.product .star-rating {
  font-size: 0.85em;
  color: var(--wag-amber);
  margin: 0 0 8px;
}
.woocommerce ul.products li.product .price {
  display: block;
  color: var(--wag-orange);
  font-weight: 800;
  font-size: 18px;
  margin: 0 0 12px;
}
.woocommerce ul.products li.product .price del {
  color: #b0b0b0;
  font-weight: 400;
  font-size: 14px;
  margin-right: 6px;
}
.woocommerce ul.products li.product .price ins {
  text-decoration: none;
  color: var(--wag-orange);
}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  margin: 0;
}
.woocommerce ul.products li.product .added_to_cart {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--wag-orange);
}

/* ============================================================
   BRAND BUTTONS — restyle all WooCommerce buttons to the pill
   ============================================================ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button,
.woocommerce button.button.alt,
.woocommerce #place_order,
.woocommerce button.single_add_to_cart_button,
.woocommerce .checkout-button,
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  display: inline-block;
  background: var(--wag-orange);
  color: #fff;
  border: none;
  border-radius: var(--wag-radius-pill);
  padding: 12px 28px;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .button:hover,
.woocommerce button.button.alt:hover,
.woocommerce #place_order:hover,
.woocommerce button.single_add_to_cart_button:hover,
.woocommerce .checkout-button:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
  background: var(--wag-orange-hover);
  color: #fff;
  box-shadow: var(--wag-shadow-btn);
}
.woocommerce .button:active,
.woocommerce button.single_add_to_cart_button:active { transform: translateY(1px); }
.woocommerce .button:disabled,
.woocommerce .button.disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }

/* secondary / ghost buttons (e.g. "Update cart", "Continue shopping") */
.woocommerce .cart .button[name="update_cart"],
.woocommerce a.button.wc-backward,
.woocommerce button.button[name="apply_coupon"] {
  background: #f4f4f4;
  color: var(--wag-ink);
}
.woocommerce .cart .button[name="update_cart"]:hover,
.woocommerce a.button.wc-backward:hover,
.woocommerce button.button[name="apply_coupon"]:hover {
  background: #ececec;
  color: var(--wag-ink);
  box-shadow: none;
}

/* onsale badge — pill */
.woocommerce span.onsale,
.wag-onsale {
  background: var(--wag-yellow);
  color: #1c1c1c;
  font-family: "Inter", "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 700;
  min-height: 0;
  min-width: 0;
  line-height: 1;
  padding: 6px 12px;
  border-radius: var(--wag-radius-pill);
  top: 12px;
  left: 12px;
  margin: 0;
}

/* ============================================================
   SINGLE PRODUCT — two-column gallery + summary
   ============================================================ */
.woocommerce div.product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: start;
}
.woocommerce div.product .woocommerce-product-gallery {
  width: 100% !important;
  margin: 0;
}
.woocommerce div.product .woocommerce-product-gallery__image img {
  border-radius: var(--wag-radius-card);
  background: #fff;
  box-shadow: var(--wag-shadow-card);
}
.woocommerce div.product .summary {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
}
.woocommerce div.product .product_title {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: 30px;
  line-height: 1.2;
  color: var(--wag-ink);
  margin: 0 0 12px;
}
.woocommerce div.product .woocommerce-product-rating {
  margin-bottom: 16px;
}
.woocommerce div.product .woocommerce-product-rating .star-rating { color: var(--wag-amber); }
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--wag-orange);
  font-weight: 800;
  font-size: 28px;
  margin: 0 0 18px;
}
.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
  color: #b0b0b0;
  font-weight: 400;
  font-size: 18px;
  margin-right: 8px;
}
.woocommerce div.product p.price ins { text-decoration: none; color: var(--wag-orange); }
.woocommerce div.product .woocommerce-product-details__short-description {
  color: #6a6a6a;
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 22px;
}

/* quantity field */
.woocommerce div.product form.cart { margin-bottom: 26px; }
.woocommerce div.product form.cart .quantity,
.woocommerce .quantity {
  display: inline-flex;
  align-items: center;
  margin-right: 12px;
}
.woocommerce .quantity input.qty {
  width: 72px;
  height: 48px;
  border: 1px solid #e2e2e5;
  border-radius: var(--wag-radius-input);
  padding: 0 10px;
  font-family: inherit;
  font-size: 15px;
  text-align: center;
  color: var(--wag-ink);
  background: #fff;
  outline: none;
}
.woocommerce .quantity input.qty:focus { border-color: var(--wag-orange); }
.woocommerce div.product form.cart button.single_add_to_cart_button {
  height: 48px;
  padding: 0 34px;
  vertical-align: top;
}

/* meta */
.woocommerce div.product .product_meta {
  font-family: "Inter", "Poppins", sans-serif;
  font-size: 13px;
  color: var(--wag-muted);
  border-top: 1px solid var(--wag-line);
  padding-top: 16px;
}
.woocommerce div.product .product_meta a { color: var(--wag-ink); }
.woocommerce div.product .product_meta a:hover { color: var(--wag-orange); }

/* variations form */
.woocommerce div.product form.variations_form table.variations td,
.woocommerce div.product form.variations_form table.variations th {
  padding: 8px 0;
  vertical-align: middle;
}
.woocommerce div.product form.variations_form select {
  border: 1px solid #e2e2e5;
  border-radius: var(--wag-radius-input);
  padding: 10px 14px;
  font-family: inherit;
  background: #fff;
}

/* tabs */
.woocommerce div.product .woocommerce-tabs {
  grid-column: 1 / -1;
  margin-top: 20px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0;
  margin: 0 0 24px;
  border-bottom: 1px solid var(--wag-line);
  display: flex;
  gap: 34px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: none;
  border: none;
  border-radius: 0;
  margin: 0;
  padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: inline-block;
  padding: 12px 0 14px;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--wag-muted);
  position: relative;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--wag-orange);
  font-weight: 700;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  background: var(--wag-orange);
  border-radius: 2px;
}
.woocommerce div.product .woocommerce-Tabs-panel h2 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--wag-ink);
  margin-bottom: 12px;
}
.woocommerce div.product .woocommerce-Tabs-panel p,
.woocommerce div.product .woocommerce-Tabs-panel li {
  color: #6a6a6a;
  font-size: 15px;
  line-height: 1.7;
}

/* related / upsells */
.woocommerce div.product .related,
.woocommerce div.product .upsells {
  grid-column: 1 / -1;
  margin-top: 20px;
}
.woocommerce .related > h2,
.woocommerce .upsells > h2,
.woocommerce .cross-sells > h2 {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: 26px;
  color: var(--wag-orange);
  margin-bottom: 22px;
}
.woocommerce .related ul.products,
.woocommerce .upsells ul.products {
  grid-template-columns: repeat(2, 1fr);
}

/* ============================================================
   CART PAGE — table + totals
   ============================================================ */
.woocommerce table.shop_table {
  border: 1px solid var(--wag-line);
  border-radius: var(--wag-radius-card);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
.woocommerce table.shop_table th {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--wag-ink);
  background: #fbf4e2;
  padding: 16px 14px;
}
.woocommerce table.shop_table td {
  padding: 16px 14px;
  border-top: 1px solid var(--wag-line);
  vertical-align: middle;
  color: var(--wag-ink);
}
.woocommerce table.cart img { width: 64px; border-radius: 10px; }
.woocommerce a.remove {
  color: var(--wag-orange) !important;
  border: 1px solid var(--wag-line);
  font-weight: 700;
}
.woocommerce a.remove:hover {
  background: var(--wag-orange) !important;
  color: #fff !important;
}
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-cart .cart-collaterals .cart_totals {
  float: none;
  width: 100%;
}
.woocommerce .cart_totals h2 {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: var(--wag-ink);
  margin-bottom: 16px;
}
.woocommerce .cart_totals table.shop_table td,
.woocommerce .cart_totals table.shop_table th { background: #fff; }
.woocommerce .cart_totals .order-total .amount { color: var(--wag-orange); font-size: 20px; }

/* coupon row */
.woocommerce .cart .actions .coupon input#coupon_code {
  height: 46px;
  border: 1px solid #e2e2e5;
  border-radius: var(--wag-radius-input);
  padding: 0 14px;
  font-family: inherit;
  outline: none;
}
.woocommerce .cart .actions .coupon input#coupon_code:focus { border-color: var(--wag-orange); }

.woocommerce .wc-proceed-to-checkout a.checkout-button {
  display: block;
  text-align: center;
  font-size: 16px;
  padding: 15px 28px;
}

/* ============================================================
   CHECKOUT — form fields, order review
   ============================================================ */
.woocommerce form.checkout,
.woocommerce-checkout #customer_details { margin-bottom: 24px; }
.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2 { float: none; width: 100%; }
.woocommerce form .form-row label,
.woocommerce-checkout h3 {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  color: var(--wag-ink);
}
.woocommerce-checkout h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 14px;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-checkout .form-row input.input-text,
.woocommerce .woocommerce-form-login input.input-text,
.woocommerce .woocommerce-form-register input.input-text,
.select2-container--default .select2-selection--single {
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  border: 1px solid #e2e2e5 !important;
  border-radius: var(--wag-radius-input) !important;
  padding: 12px 16px;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 14px;
  color: var(--wag-ink);
  background: #fff;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce-checkout .form-row input.input-text:focus {
  border-color: var(--wag-orange) !important;
  box-shadow: 0 0 0 3px rgba(241, 90, 36, 0.12);
}
.woocommerce form .form-row textarea { min-height: 96px; }
.select2-container--default .select2-selection--single {
  display: flex;
  align-items: center;
}
.woocommerce-checkout #payment {
  background: #f7f7f8;
  border-radius: var(--wag-radius-card);
  padding: 8px 4px;
}
.woocommerce-checkout #payment ul.payment_methods {
  border-bottom: 1px solid var(--wag-line);
}
.woocommerce-checkout #payment div.payment_box {
  background: #fff;
  border-radius: 10px;
}
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: #fff; }
.woocommerce #payment #place_order,
.woocommerce-checkout #place_order {
  display: block;
  width: 100%;
  font-size: 16px;
  padding: 15px 28px;
}

/* login / register forms */
.woocommerce .woocommerce-form-login,
.woocommerce .woocommerce-form-register,
.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register {
  border: 1px solid var(--wag-line);
  border-radius: var(--wag-radius-card);
  padding: 24px;
}

/* ============================================================
   MY ACCOUNT — tabs / navigation
   ============================================================ */
/* The .woocommerce wrapper also holds the notices wrapper, so DON'T grid it —
   the 2-column layout lives on .wag-account (nav + content only). */
.woocommerce-account .woocommerce { display: block; }
.wag-account {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 34px;
  align-items: start;
}
.woocommerce-account .woocommerce-MyAccount-navigation {
  float: none;
  width: 100%;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--wag-line);
  border-radius: var(--wag-radius-card);
  overflow: hidden;
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid var(--wag-line);
}
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: none; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 14px 18px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--wag-ink);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: #fbf4e2; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--wag-orange);
  color: #fff;
  font-weight: 700;
}
.woocommerce-account .woocommerce-MyAccount-content {
  float: none;
  width: 100%;
}
.woocommerce-account .woocommerce-MyAccount-content p { color: #6a6a6a; line-height: 1.7; }

/* ============================================================
   NOTICES — message / info / error in brand colours
   ============================================================ */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
  border-radius: var(--wag-radius-input);
  border-top: none;
  font-family: "Inter", "Poppins", sans-serif;
  font-size: 14px;
  padding: 14px 18px 14px 46px;
  list-style: none;
}
.woocommerce-message {
  background: #fff7ec;
  border-left: 4px solid var(--wag-amber);
  color: #6b4e12;
}
.woocommerce-message::before { color: var(--wag-amber); }
.woocommerce-info {
  background: #eaf1fb;
  border-left: 4px solid #4a86e8;
  color: #24457e;
}
.woocommerce-info::before { color: #4a86e8; }
.woocommerce-error {
  background: #fdecec;
  border-left: 4px solid #e23b3b;
  color: #8a2020;
}
.woocommerce-error::before { color: #e23b3b; }
.woocommerce-message .button,
.woocommerce-info .button {
  padding: 8px 18px;
  font-size: 13px;
}

/* store notice / demo bar */
.woocommerce-store-notice {
  background: var(--wag-orange);
  color: #fff;
}

/* pagination */
.woocommerce nav.woocommerce-pagination {
  margin-top: 38px;
  padding-top: 6px;
  clear: both;
}
.woocommerce nav.woocommerce-pagination ul {
  border: none;
  display: flex;
  gap: 8px;
  justify-content: center;
}
.woocommerce nav.woocommerce-pagination ul li {
  border: none;
  margin: 0;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  border: 1px solid var(--wag-line);
  border-radius: 8px;
  padding: 8px 14px;
  color: var(--wag-ink);
  font-weight: 600;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--wag-orange);
  border-color: var(--wag-orange);
  color: #fff;
}

/* breadcrumb */
.woocommerce .woocommerce-breadcrumb {
  font-family: "Inter", "Poppins", sans-serif;
  font-size: 13px;
  color: var(--wag-muted);
  margin-bottom: 18px;
}
.woocommerce .woocommerce-breadcrumb a { color: var(--wag-ink); }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--wag-orange); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* desktop product grid density */
@media (min-width: 768px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(3, 1fr);
  }
  .woocommerce .related ul.products,
  .woocommerce .upsells ul.products {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 1100px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* mobile nav: show hamburger, collapse .nav into slide-in panel */
@media (max-width: 1023px) {
  .nav-toggle { display: inline-flex; }

  /* Symmetric side columns so the logo sits dead-centre between the hamburger
     (left) and the search/cart icons (right); logo shrunk a little too. */
  .navbar__inner {
    grid-template-columns: 1fr auto 1fr;
  }
  .nav-toggle { justify-self: start; }
  .navbar__right { justify-self: end; }
  .logo__img,
  .logo .custom-logo,
  .logo img.custom-logo { height: 48px; max-height: 48px; }

  .nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 82%;
    max-width: 320px;
    background: #fff;
    box-shadow: 6px 0 30px rgba(0, 0, 0, 0.18);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 84px 22px 30px;
    transform: translateX(-100%);
    transition: transform 0.28s ease;
    z-index: 1000;
    overflow-y: auto;
  }
  body.nav-open .nav { transform: translateX(0); }

  .nav__home { margin-bottom: 14px; }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }
  .nav__list li { width: 100%; border-bottom: 1px solid var(--wag-line); }
  .nav__list a { padding: 14px 4px; font-size: 16px; }

  /* dim overlay behind the panel */
  body.nav-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    z-index: 999;
  }
  body.nav-open { overflow: hidden; }
}

@media (min-width: 1024px) {
  .nav-toggle { display: none; }
  .nav {
    position: static;
    transform: none;
    box-shadow: none;
    padding: 0;
    background: none;
    flex-direction: row;
    width: auto;
    max-width: none;
    overflow: visible;
  }
}

/* tablet / mobile WooCommerce layout collapse */
@media (max-width: 900px) {
  .wag-shop__inner { padding: 0 22px; }
  .wag-shop-hero__title { font-size: 28px; }

  .woocommerce div.product {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .woocommerce div.product .product_title { font-size: 24px; }

  .woocommerce-account .woocommerce {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .woocommerce table.shop_table_responsive tr td,
  .woocommerce-page table.shop_table_responsive tr td {
    text-align: right;
  }
}

@media (max-width: 560px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    gap: 16px;
  }
  .woocommerce .quantity input.qty { width: 64px; }
  .woocommerce div.product form.cart button.single_add_to_cart_button {
    display: block;
    width: 100%;
    margin-top: 12px;
  }
}

/* Shop product cards on phones: the fixed 258px image box left a tall empty gap
   inside each narrow 2-column card. Make the box a square that tracks the card
   width so the product image fills it, and tidy the text / rating / button. */
@media (max-width: 600px) {
  /* Two cards per row: trim page padding + gap so each card is as big as it can
     be while still fitting two across. */
  .woocommerce .wt-wrap,
  .woocommerce-page .wt-wrap { padding-left: 14px; padding-right: 14px; }
  .woocommerce ul.products,
  .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr); gap: 12px; justify-items: stretch; }

  .fcard-li .fcard__box { height: auto; aspect-ratio: 1 / 1; margin-bottom: 10px; border-radius: 16px; }
  .fcard-li .fcard__img { padding: 2px; }        /* bigger product photo */

  /* Name: smaller type so a normal product name shows in full across two lines
     (the reference card), reserving the height so cards stay aligned. Only very
     long names still end in an ellipsis. */
  .fcard-li .fcard__name {
    font-size: 12.5px;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8em;
    line-height: 1.35;
    margin-bottom: 6px;
  }

  /* Rating badge + "(150 Review)" must stay on one line. */
  .fcard-li .fcard__rating {
    font-size: 11.5px;
    margin-bottom: 8px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .fcard-li .fcard__rating .fbadge { margin-right: 0; padding: 2px 6px; }

  /* Keep the current + old price on one line (they were wrapping on long prices). */
  .fcard-li .fcard__price { white-space: nowrap; }
  .fcard-li .fcard__now { font-size: 15px; }
  .fcard-li .fcard__was { font-size: 12px; margin-left: 5px; }

  /* Plain outline heart in the corner (no white circle button). */
  .fcard-li .fcard__fav {
    width: 26px;
    height: 26px;
    top: 10px;
    right: 10px;
    font-size: 15px;
    background: transparent;
    box-shadow: none;
    color: #2b2b2b;
  }

  /* Full-width cream "Add to cart" pill, centred on one line. The high-specificity
     selector is needed to beat WooCommerce's own `.woocommerce a.button` padding
     (12px 28px) which otherwise pushed the label outside the button. */
  .woocommerce ul.products li.product .fcard__cart .button,
  .woocommerce-page ul.products li.product .fcard__cart .button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    white-space: nowrap;
    padding: 10px 6px;
    font-size: 12px;
    border-radius: 10px;
  }
  .woocommerce ul.products li.product .fcard__cart .button::before { font-size: 12px; }
}

/* ============================================================
   DESIGN-MATCH FIXES — keep parity with the reference storefront
   ============================================================ */

/* Product cards: match the reference at rest, reveal Add-to-cart on hover
   (desktop only). Touch devices keep it visible for easy shopping. */
.fcard__cart,
.pcard__cart { margin-top: 10px; }

@media (hover: hover) and (pointer: fine) {
  .fcard__cart,
  .pcard__cart {
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.28s ease, opacity 0.2s ease, margin-top 0.28s ease;
  }
  .fcard:hover .fcard__cart,
  .pcard:hover .pcard__cart {
    max-height: 64px;
    margin-top: 10px;
    opacity: 1;
  }
}

/* Shop archive cards: the Add-to-cart button is a sibling of the card (not a
   child), so the hover-reveal above never matches it — keep it always visible
   so customers can buy straight from the grid. */
.fcard-li .fcard__cart {
  max-height: none;
  margin-top: 10px;
  opacity: 1;
  overflow: visible;
}

/* Add-to-cart pill sizing so it sits neatly under the card */
.fcard__cart .wag-atc,
.pcard__cart .wag-atc,
.fcard-li .fcard__cart .button,
.fcard-li .fcard__cart .added_to_cart {
  display: block;
  width: 100%;
  text-align: center;
  padding: 9px 14px;
  font-size: 13px;
}

/* Shop add-to-cart button — soft cream "outline" style with a cart icon,
   matching the reference storefront (.wt-add). Fills orange on hover. */
.fcard-li .fcard__cart .button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #fff7ea;
  color: var(--orange);
  border: 1px solid #eadfce;
  border-radius: 8px;
  font-weight: 600;
  line-height: 1.3;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.fcard-li .fcard__cart .button::before {
  content: "\f217"; /* fa-cart-plus */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 13px;
}
.fcard-li .fcard__cart .button:hover {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}
.fcard-li .fcard__cart .added_to_cart {
  margin-top: 6px;
  color: var(--wag-orange, #f26522);
  font-weight: 700;
  text-decoration: none;
}

/* Flat primary-nav anchors (custom walker) — inherit the design's .nav__item
   look on desktop; give them tap-friendly rows inside the mobile panel. */
@media (max-width: 1023px) {
  .nav .nav__item {
    width: 100%;
    padding: 14px 4px;
    font-size: 16px;
    border-bottom: 1px solid var(--wag-line, #ececec);
  }
}

/* Hero: the slide's link wrapper must span the full-width grid like the raw
   banner image does (design puts <img> directly in the .hero grid, we wrap it
   in an <a> — without this the banner collapses to the first 1fr column/half). */
.hero > .hero__link,
.hero .slide > .hero__link,
.hero > a {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  position: relative;
  z-index: 2;
  line-height: 0;
}
.hero__link .hero__banner { width: 100%; height: auto; display: block; }

/* Hero slides: top-align within the flex track so a slide whose banner is a
   touch shorter than the tallest slide never gets centered (which would leave
   a white gap above the banner). */
.hero-slider__track { align-items: flex-start; }

/* Custom logo (Site Identity upload) — constrain to the same footprint as the
   default logo so a large uploaded image never breaks the navbar layout
   (which would push the search bar + wishlist/cart/account icons off-row). */
.logo .custom-logo-link {
  display: block;
  line-height: 0;
}
.logo .custom-logo,
.logo img.custom-logo {
  display: block;
  height: auto;
  max-height: 64px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}

/* ============================================================
   EXPLORE REELS — the player that fills the card
   Replaces the old lightbox: the reel now runs inside its own
   frame (see the "Explore reels" block in main.js), so there is
   no overlay to open and nothing to close.
   ============================================================ */
.vvideo__player {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #000;
}
/* Empty until the card scrolls into view — stay out of the way so the cover
   photo, the duration badge and the play button are what you see. */
.vvideo__player:empty { display: none; }
.vvideo__player video,
.vvideo__player iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
/* An uploaded MP4 is ours to crop, so fill the portrait card edge to edge.
   (A YouTube/Vimeo embed sizes itself inside the frame instead.) */
.vvideo__player video { object-fit: cover; }

/* Once the reel is running the cover-photo furniture would only sit on top
   of it. */
.vvideo__play,
.vvideo__time { transition: opacity .2s ease; }
.vvideo.is-playing .vvideo__play,
.vvideo.is-playing .vvideo__time { opacity: 0; pointer-events: none; }

/* The video turned out to be unplayable (owner blocked off-site playback, file
   gone…) so main.js dropped the player and the cover photo is showing. The play
   button stays — the card should look like every other one — but the duration
   goes, since there is no longer a video of that length to promise. Pressing
   play answers with the notice below instead. */
.vvideo[data-video-error] .vvideo__time { display: none; }

/* "Video not available" — an overlay inside the card, not a pop-up. */
.vvideo__msg[hidden] { display: none; }
.vvideo__msg {
  position: absolute;
  inset: 0;
  z-index: 3;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 0 24px;
  text-align: center;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
}

/* Popular Problems archive: keep a gap below the list even when the
   "Load More" button is hidden (filtered to few results), so the last row
   never touches the footer. */
.pp-wrap { padding-bottom: 60px; }

/* ============================================================
   PROBLEM DETAIL — every accordion list gets the ✓ checkmark design
   (robust: works for pd-checks, wp-block-list or a plain <ul>).
   ============================================================ */
.pd-acc__body ul {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 36px;
}
.pd-acc__body ul li {
  position: relative;
  padding-left: 26px;
  margin: 0;
  color: #444;
  font-size: 15px;
  line-height: 1.55;
}
.pd-acc__body ul li::marker { content: ""; }
.pd-acc__body ul li::before {
  content: "\f00c";                 /* fa-check */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 13px;
  color: var(--wag-orange, #f15a24);
}


/* ============================================================
   SINGLE PRODUCT (PDP) — matches reference product.html design
   ============================================================ */
.wag-shop .breadcrumb,
.pdp-main .breadcrumb { margin: 0 0 20px; font-size: 13px; color: #888; }
.wag-shop .breadcrumb a,
.pdp-main .breadcrumb a { color: #888; }
.wag-shop .breadcrumb a:hover,
.pdp-main .breadcrumb a:hover { color: var(--orange); }
.wag-shop .breadcrumb span,
.pdp-main .breadcrumb span { color: var(--ink); }
/* Single-product container: even gap left & right, comfortable top spacing. */
.pdp-main { padding-top: 22px; }
.wt-qty { display: inline-flex; align-items: center; border: 1px solid #e2e2e2; border-radius: 8px; overflow: hidden; }
.wt-qty button { width: 34px; height: 38px; border: none; background: #f6f6f6; font-size: 18px; cursor: pointer; color: #333; }
.wt-qty button:hover { background: var(--orange); color: #fff; }
.wt-qty input { width: 44px; height: 38px; border: none; text-align: center; font-size: 15px; font-weight: 600; }
/* ============================================================
   PRODUCT DETAIL PAGE  (image 3)
   ============================================================ */
.pdp.pdp2 {
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.3fr) 300px;
  gap: 34px;
  align-items: start;
}
/* gallery */
.pdp2__gallery { position: sticky; top: 20px; }
/* Gallery frames are square because every product image is already normalised
   to an 800×800 canvas (see wagtales_square_image_url) with the product filling
   92% of it. Matching the frame to the image means the photo covers the whole
   box and nothing gets cropped — the old 82%/78% caps shrank the picture a
   second time and left a wide white ring around it. */
.pdp2__main {
  border: 1px solid #eee;
  border-radius: 16px;
  aspect-ratio: 1 / 1;
  background: #fff;
  overflow: hidden;
}
.pdp2__main img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pdp2__thumbs { display: flex; gap: 12px; margin-top: 14px; }
.pdp2__thumb {
  flex: 1;
  aspect-ratio: 1 / 1;
  border: 1px solid #eee;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  transition: border-color .15s;
}
.pdp2__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pdp2__thumb.is-active { border-color: var(--orange); }
/* center info */
.pdp2__toprow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.pdp2__rating {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--orange); color: #fff;
  font-size: 13px; font-weight: 700;
  padding: 5px 12px; border-radius: 8px;
}
.pdp2__rating em { font-style: normal; font-weight: 500; color: #ffe6d9; }
.pdp2__iconacts { display: flex; gap: 10px; }
.pdp2__ia {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid #e6e6e6; background: #fff; color: #555;
  cursor: pointer; display: grid; place-items: center; transition: all .15s;
}
.pdp2__ia:hover, .pdp2__ia.is-active { border-color: var(--orange); color: var(--orange); }
.pdp2__ia.is-active i { color: var(--orange); }
.pdp2__name { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 24px; line-height: 1.3; color: var(--ink); margin: 0 0 8px; }
.pdp2__brand { display: inline-block; color: #888; font-size: 14px; margin-bottom: 16px; }
.pdp2__brand:hover { color: var(--orange); }
.pdp2__pricebar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.pdp2__save {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff2ec; color: var(--orange);
  font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 7px;
}
.pdp2__was { color: #b0b0b0; text-decoration: line-through; font-size: 16px; }
.pdp2__now { font-size: 26px; font-weight: 800; color: var(--orange); }
.pdp2__tax { font-size: 12px; color: #999; }
.pdp2__delivery { margin-bottom: 22px; }
.pdp2__delivery-title { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 12px; }
.pdp2__zip { display: flex; gap: 10px; max-width: 420px; }
.pdp2__zip input {
  flex: 1; border: 1px solid #e2e2e2; border-radius: 10px;
  padding: 13px 16px; font-family: inherit; font-size: 14px;
}
.pdp2__zip input:focus { outline: none; border-color: var(--orange); }
.pdp2__zipbtn {
  background: #1c1c1c; color: #fff; border: none; border-radius: 10px;
  padding: 0 26px; font-family: inherit; font-weight: 600; font-size: 14px; cursor: pointer;
  transition: background .15s;
}
.pdp2__zipbtn:hover { background: var(--orange); }
.pdp2__zipmsg { font-size: 13px; margin-top: 10px; display: flex; align-items: center; gap: 7px; }
.pdp2__zipmsg.is-ok { color: #1a9d3a; }
.pdp2__zipmsg.is-err { color: #c0392b; }
.pdp2__trust {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding: 20px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; margin-bottom: 6px;
}
.pdp2__trust-item { flex: 1; min-width: 130px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.pdp2__trust-item i { color: var(--orange); font-size: 22px; }
.pdp2__trust-item span { font-size: 13px; color: #555; font-weight: 500; }
/* accordions */
.pdp2__accordions { margin-top: 6px; }
.pdp2-acc { border-bottom: 1px solid #eee; }
.pdp2-acc__head {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: none; border: none; cursor: pointer;
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: 15px; color: var(--ink);
  padding: 18px 2px;
}
.pdp2-acc__head i { color: #999; font-size: 13px; transition: transform .2s; }
.pdp2-acc.is-open .pdp2-acc__head i { transform: rotate(180deg); color: var(--orange); }
.pdp2-acc__body { max-height: 0; overflow: hidden; transition: max-height .28s ease; }
.pdp2-acc.is-open .pdp2-acc__body { max-height: 600px; }
.pdp2-acc__body > * { margin-bottom: 16px; }
.pdp2-acc__body p { color: #666; font-size: 14px; line-height: 1.7; }
.pdp2-feat { padding-left: 2px; display: flex; flex-direction: column; gap: 9px; }
.pdp2-feat li { position: relative; padding-left: 24px; color: #555; font-size: 14px; }
.pdp2-feat li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--orange); position: absolute; left: 0; font-size: 12px; }
.pdp2-spec { width: 100%; border-collapse: collapse; }
.pdp2-spec th, .pdp2-spec td { text-align: left; padding: 10px 12px; font-size: 14px; border: 1px solid #eee; }
.pdp2-spec th { background: #fafafa; color: #444; font-weight: 600; width: 42%; }
.pdp2-spec td { color: #666; }
/* right buy box */
.pdp2__buy { border: 1px solid #eee; border-radius: 16px; padding: 22px; position: sticky; top: 20px; }
.pdp2__weight { font-size: 14px; color: #555; margin-bottom: 14px; }
.pdp2__weight b { color: var(--ink); }
.pdp2__variants { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 22px; }
/* Two-part weight chips (matches reference): weight header + price footer. */
.pdp2-chip {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1.5px solid transparent; border-radius: 8px; background: #fff;
  padding: 0; cursor: pointer; transition: border-color .15s ease;
}
.pdp2-chip__w {
  background: #c7bfb6; color: #3a3a3a; font-size: 13px; font-weight: 700;
  padding: 7px 4px; text-align: center; line-height: 1.2;
}
.pdp2-chip__p {
  background: #fff; color: var(--ink); font-size: 13px; font-weight: 700;
  padding: 8px 4px; text-align: center; line-height: 1.2;
  border: 1px solid #e6e6e6; border-top: none; border-radius: 0 0 8px 8px;
}
.pdp2-chip:hover { border-color: #f0b48f; }
.pdp2-chip.is-active { border-color: var(--orange); }
.pdp2-chip.is-active .pdp2-chip__w { background: var(--orange); color: #fff; }
.pdp2-chip.is-active .pdp2-chip__p { border-color: var(--orange); color: var(--orange); }
.pdp2__qtyrow { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; font-size: 14px; color: #555; }
.pdp2__add {
  display: block; width: 100%; text-align: center;
  background: var(--orange); color: #fff; border: none; border-radius: 10px;
  padding: 15px; font-family: inherit; font-weight: 700; font-size: 15px; cursor: pointer;
  transition: background .15s;
}
.pdp2__add:hover { background: #d94e1a; }
/* Same design as the Add to Cart (single_add_to_cart_button) button — pill
   shape, matching padding/font/hover — but keep the black colour. */
.pdp2__buynow {
  display: block; width: 100%; text-align: center; margin-top: 12px;
  background: #1c1c1c; color: #fff; border: none; border-radius: var(--wag-radius-pill);
  padding: 12px 28px; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 14px; line-height: 1.2;
  cursor: pointer; transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}
.pdp2__buynow:hover { background: #000; color: #fff; box-shadow: var(--wag-shadow-btn); }
.pdp2__buynow:active { transform: translateY(1px); }
/* related rail */
.pdp-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(210px, 1fr);
  gap: 22px;
  overflow-x: auto;
  padding-bottom: 10px;
  scroll-snap-type: x mandatory;
}
.pdp-rail .fcard { scroll-snap-align: start; }
.pdp-rail::-webkit-scrollbar { height: 8px; }
.pdp-rail::-webkit-scrollbar-thumb { background: #e0e0e0; border-radius: 8px; }
/* ============================================================
   CUSTOMER REVIEWS
   ============================================================ */
.reviews { background: #fafafa; border-radius: 18px; padding: 34px; margin-top: 40px; }
.reviews__title { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 22px; color: var(--ink); margin-bottom: 24px; }
.reviews__summary { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 30px; align-items: center; padding-bottom: 26px; border-bottom: 1px solid #ececec; }
/* Left-aligned so the stars, the average and the "Based on N reviews" line all
   start on the same edge as the "Customer Reviews" heading above them. */
.reviews__score { text-align: left; }
.reviews__stars { color: var(--orange); font-size: 18px; letter-spacing: 2px; margin-bottom: 8px; }
.reviews__avg { font-weight: 700; font-size: 16px; color: var(--ink); }
.reviews__based { font-size: 13px; color: #888; }
.reviews__bars { display: flex; flex-direction: column; gap: 8px; }
.rev-bar { display: flex; align-items: center; gap: 12px; }
.rev-bar__stars { color: var(--orange); font-size: 12px; letter-spacing: 1px; white-space: nowrap; }
.rev-bar__track { flex: 1; height: 8px; background: #eaeaea; border-radius: 6px; overflow: hidden; }
.rev-bar__fill { display: block; height: 100%; background: var(--orange); border-radius: 6px; }
.rev-bar__num { font-size: 13px; color: #666; width: 16px; text-align: right; }
.reviews__cta { text-align: center; }
.reviews__write {
  background: var(--orange); color: #fff; border: none; border-radius: 10px;
  padding: 13px 26px; font-family: inherit; font-weight: 600; font-size: 14px; cursor: pointer;
  transition: background .15s;
}
.reviews__write:hover { background: #d94e1a; }
.reviews__list { margin-top: 24px; display: flex; flex-direction: column; gap: 22px; }
.rev-item { border-bottom: 1px solid #ececec; padding-bottom: 22px; }
.rev-item:last-child { border-bottom: none; padding-bottom: 0; }
.rev-item__head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.rev-item__avatar { width: 40px; height: 40px; border-radius: 50%; background: #ffe0d1; color: var(--orange); display: grid; place-items: center; font-weight: 700; }
.rev-item__name { font-weight: 600; font-size: 15px; color: var(--ink); }
.rev-item__stars { color: var(--orange); font-size: 12px; letter-spacing: 1px; }
.rev-item__meta { margin-left: auto; font-size: 12px; color: #999; }
.rev-item__text { color: #555; font-size: 14px; line-height: 1.7; }
.rev-photos { display: flex; gap: 10px; margin-top: 12px; }
.rev-photo { width: 62px; height: 62px; border-radius: 10px; background: linear-gradient(135deg, #f0c9a8, #e2a679); }
.rev-photo--more { display: grid; place-items: center; background: rgba(0,0,0,0.55); color: #fff; font-weight: 600; font-size: 14px; }
@media (max-width: 1100px) {
.pdp.pdp2 { grid-template-columns: 1fr 1fr; }
.pdp2__buy { grid-column: 1 / -1; position: static; }
.pdp2__variants { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 760px) {
.pdp.pdp2 { grid-template-columns: 1fr; }
.pdp2__gallery { position: static; }
.reviews__summary { grid-template-columns: 1fr; gap: 20px; }
}
/* related rail heading + reviews extras */
.pdp-rail-title { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 22px; color: var(--ink); margin: 44px 0 20px; }
.reviews__empty { color: #777; font-size: 14px; margin-top: 20px; }
.reviews__form { margin-top: 26px; border-top: 1px solid #ececec; padding-top: 24px; }
.reviews__form .comment-reply-title { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 18px; color: var(--ink); display: block; margin-bottom: 16px; }
.reviews__form label { display: block; font-size: 13px; font-weight: 600; color: #444; margin-bottom: 6px; }
.reviews__form input[type="text"], .reviews__form input[type="email"], .reviews__form select, .reviews__form textarea { width: 100%; max-width: 460px; border: 1px solid #e2e2e2; border-radius: 10px; padding: 12px 14px; font-family: inherit; font-size: 14px; margin-bottom: 16px; }
.reviews__form input:focus, .reviews__form select:focus, .reviews__form textarea:focus { outline: none; border-color: var(--orange); }
.reviews__form .form-submit .submit, .reviews__form #submit { background: var(--orange); color: #fff; border: none; border-radius: 10px; padding: 13px 28px; font-family: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.reviews__form .form-submit .submit:hover, .reviews__form #submit:hover { background: #d94e1a; }
.pdp2__buyform .quantity { margin: 0; }

/* PDP buy-box: neutralise WooCommerce form.cart floats so the full-width
   Add-to-Cart / Buy Now buttons stack instead of floating off-screen. */
.pdp2__buyform { display: block; margin: 0; }
.pdp2__buyform::after { content: ""; display: table; clear: both; }
.pdp2__buyform .quantity, .pdp2__buyform .pdp2__qty { float: none; }
.pdp2__buyform .pdp2__add, .pdp2__buyform .pdp2__buynow, .woocommerce .pdp2__buyform .button.pdp2__add {
  float: none; width: 100%; min-width: 0; margin-left: 0; margin-right: 0; box-sizing: border-box;
}
.pdp2__buyform .pdp2__buynow { margin-top: 12px; }
/* Related rail: fixed-width cards, left-aligned (no stretch when few items) */
.pdp-rail { grid-auto-columns: minmax(200px, 232px); justify-content: start; }

/* ============================================================
   LOGIN / REGISTER POPUP MODAL
   ============================================================ */
body.auth-open { overflow: hidden; }
.auth-modal { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.auth-modal[hidden] { display: none; }
.auth-modal__overlay { position: absolute; inset: 0; background: rgba(20,20,20,0.55); backdrop-filter: blur(1px); }
.auth-modal__box {
  position: relative; z-index: 1; width: 100%; max-width: 420px;
  background: #fff; border-radius: 16px; padding: 30px 30px 26px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.28); max-height: 92vh; overflow-y: auto;
  animation: authPop 0.18s ease;
}
@keyframes authPop { from { transform: translateY(10px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }
.auth-modal__close {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid #eee; background: #fff; color: #777; font-size: 20px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; transition: all 0.15s;
}
.auth-modal__close:hover { border-color: var(--orange); color: var(--orange); }

.auth-tabs { display: flex; justify-content: center; gap: 28px; margin-bottom: 22px; }
.auth-tab {
  background: none; border: none; cursor: pointer; padding: 4px 2px 8px;
  font-family: "Poppins", sans-serif; font-weight: 700; font-size: 16px; letter-spacing: 0.5px;
  color: #bbb; position: relative;
}
.auth-tab.is-active { color: var(--ink); }
.auth-tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--orange); border-radius: 3px; }

/* Stack both panels in the same grid cell so the box is always as tall as the
   taller (login) panel — switching Login <-> Register keeps the same size and
   just cross-fades, instead of the box jumping in height. */
.auth-panels { display: grid; }
.auth-panel {
  grid-area: 1 / 1;
  display: block;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.auth-panel.is-active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.auth-label { display: block; font-size: 13px; font-weight: 600; color: #333; margin: 14px 0 7px; }
.auth-req { color: var(--orange); }
.auth-input {
  width: 100%; border: 1px solid #e2e2e2; border-radius: 999px;
  padding: 13px 18px; font-family: inherit; font-size: 14px; box-sizing: border-box;
}
.auth-input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(241,90,36,0.12); }
.auth-pass { position: relative; }
.auth-pass .auth-input { padding-right: 46px; }
.auth-pass__toggle { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 34px; height: 34px; border: none; background: none; color: #999; cursor: pointer; border-radius: 50%; }
.auth-pass__toggle:hover { color: var(--orange); }

.auth-remember { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #444; margin: 14px 0 4px; cursor: pointer; }
.auth-remember input { accent-color: var(--orange); }

.auth-submit {
  width: 100%; margin-top: 16px; background: var(--orange); color: #fff; border: none;
  border-radius: 999px; padding: 14px; font-family: inherit; font-weight: 700; font-size: 15px; cursor: pointer;
  transition: background 0.15s;
}
.auth-submit:hover { background: #d94e1a; }
.auth-submit:disabled { opacity: 0.7; cursor: default; }

.auth-lost { display: block; text-align: right; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--ink); }
.auth-lost:hover { color: var(--orange); }

.auth-or { display: flex; align-items: center; gap: 12px; margin: 20px 0 16px; color: #999; font-size: 13px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: #ececec; }

.auth-google {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #f6f6f6; border: 1px solid #ececec; border-radius: 999px; padding: 13px;
  font-family: inherit; font-weight: 600; font-size: 14px; color: #333; cursor: pointer; transition: background 0.15s;
}
.auth-google:hover { background: #efefef; }

.auth-switch { text-align: center; margin-top: 18px; font-size: 13px; color: #666; }
.auth-link { background: none; border: none; padding: 0; font: inherit; font-weight: 700; color: var(--ink); cursor: pointer; }
.auth-link:hover { color: var(--orange); }

.auth-fineprint { font-size: 12px; color: #999; margin-top: 12px; line-height: 1.5; }

.auth-msg { font-size: 13px; border-radius: 10px; line-height: 1.5; }
.auth-msg.is-visible { padding: 10px 14px; margin-bottom: 6px; }
.auth-msg.is-err { background: #fdecea; color: #c0392b; border: 1px solid #f5c6cb; }
.auth-msg.is-ok { background: #eafaf0; color: #1a9d3a; border: 1px solid #b7e4c7; }

@media (max-width: 480px) { .auth-modal__box { padding: 24px 20px; } }

/* ============================================================
   WRITE REVIEW — popup lightbox modal
   ============================================================ */
body.review-open { overflow: hidden; }
.review-modal { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.review-modal[hidden] { display: none; }
.review-modal__overlay { position: absolute; inset: 0; background: rgba(20,20,20,0.55); }
.review-modal__box {
  position: relative; z-index: 1; width: 100%; max-width: 480px;
  background: #fff; border-radius: 16px; padding: 30px 30px 26px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.28); max-height: 92vh; overflow-y: auto;
  animation: authPop 0.18s ease;
}
.review-modal__close {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid #eee; background: #fff; color: #777; font-size: 20px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; transition: all 0.15s; z-index: 2;
}
.review-modal__close:hover { border-color: var(--orange); color: var(--orange); }
/* Reset the inline-form spacing now that it lives in the modal. */
.review-modal .reviews__form { margin: 0; border: 0; padding: 0; }
.review-modal .comment-reply-title { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 20px; color: var(--ink); display: block; margin: 0 0 18px; padding-right: 30px; }
.review-modal .comment-form-rating select { border-radius: 10px; }
.review-modal .comment-form { margin: 0; }

/* ============================================================
   REVIEW PHOTOS — uploaded images + lightbox
   ============================================================ */
.rev-photos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.rev-photo {
  width: 62px; height: 62px; border-radius: 10px; cursor: pointer;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  border: 1px solid #eee; overflow: hidden; display: block;
}
.rev-photo--more { position: relative; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 14px; }
.rev-photo--more::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.rev-photo--more { text-shadow: 0 1px 2px rgba(0,0,0,0.4); }

/* File input inside the Write-Review popup */
.comment-form-photos { margin-top: 14px; }
.comment-form-photos label { display: block; font-size: 13px; font-weight: 600; color: #444; margin-bottom: 6px; }
.comment-form-photos input[type="file"] {
  width: 100%; font-size: 13px; padding: 10px; border: 1px dashed #cfcfcf; border-radius: 10px;
  background: #fafafa; cursor: pointer; box-sizing: border-box;
}
.comment-form-photos__hint { display: block; font-size: 12px; color: #999; margin-top: 6px; }

/* Lightbox */
.rev-lightbox { position: fixed; inset: 0; z-index: 5000; display: flex; align-items: center; justify-content: center; padding: 30px; }
.rev-lightbox[hidden] { display: none; }
.rev-lightbox__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.82); }
.rev-lightbox__img { position: relative; z-index: 1; max-width: 92vw; max-height: 88vh; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.rev-lightbox__close { position: absolute; top: 20px; right: 26px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255,255,255,0.15); color: #fff; font-size: 26px; cursor: pointer; }
.rev-lightbox__close:hover { background: rgba(255,255,255,0.28); }

/* ============================================================
   STATIC / WOOCOMMERCE PAGES (checkout, cart, account, content)
   Container gap + brand styling for the block cart & checkout.
   ============================================================ */
.wag-page { background: #fff; padding: 10px 0 64px; }
.wag-page__inner { max-width: 1200px; margin: 0 auto; padding: 22px 40px 0; }
.page-article__title {
  font-family: "Poppins", sans-serif; font-weight: 800; font-size: 30px;
  line-height: 1.15; color: var(--ink); margin: 6px 0 26px;
}
.page-article__thumb { margin-bottom: 24px; }
.page-article__thumb img { border-radius: 16px; }

/* Brand accent for form controls on these pages */
.wag-page input[type="radio"],
.wag-page input[type="checkbox"] { accent-color: var(--orange); }

/* --- Block Cart & Checkout: brand the primary buttons (were black) --- */
.wag-page .wc-block-components-button.contained,
.wag-page .wc-block-cart__submit-button,
.wag-page button.wc-block-components-checkout-place-order-button,
.wag-page .wp-block-woocommerce-checkout-actions-block .wc-block-components-button {
  background: var(--orange) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
.wag-page .wc-block-components-button.contained:hover,
.wag-page .wc-block-cart__submit-button:hover,
.wag-page button.wc-block-components-checkout-place-order-button:hover {
  background: #d94e1a !important;
}
/* Text/secondary block buttons keep an orange tint */
.wag-page .wc-block-components-button:not(.contained) { color: var(--orange); }

/* Input focus → brand orange (block text inputs + selects) */
.wag-page .wc-block-components-text-input input:focus,
.wag-page .wc-block-components-text-input.is-active input,
.wag-page .wc-block-components-select select:focus,
.wag-page .wc-blocks-components-select__select:focus {
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 1px var(--orange) !important;
  outline: none !important;
}
.wag-page .wc-block-components-text-input.is-active label,
.wag-page .wc-block-components-checkout-step.is-active .wc-block-components-checkout-step__title { color: var(--orange); }

/* Selected payment / shipping option → orange frame */
.wag-page .wc-block-components-radio-control__option--checked,
.wag-page .wc-block-components-radio-control-accordion-option--checked-option {
  box-shadow: inset 0 0 0 1.5px var(--orange);
  border-radius: 10px;
}
.wag-page .wc-block-components-radio-control__input:checked { accent-color: var(--orange); }

/* Order summary panel + section headings */
.wag-page .wp-block-woocommerce-checkout-order-summary-block {
  border: 1px solid #eee; border-radius: 14px; padding: 6px 20px 12px;
}
.wag-page .wc-block-components-checkout-step__title,
.wag-page .wc-block-components-title { font-family: "Poppins", sans-serif; }
.wag-page a { color: var(--orange); }
.wag-page a:hover { color: #d94e1a; }

@media (max-width: 640px) { .wag-page__inner { padding: 16px 18px 0; } }

/* ============================================================
   CHECKOUT / CART — premium polish
   ============================================================ */
.woocommerce-checkout .wag-page,
.woocommerce-cart .wag-page { background: #fbfaf8; }
.woocommerce-checkout .wag-page__inner,
.woocommerce-cart .wag-page__inner { max-width: 1240px; padding-bottom: 20px; }

/* Section titles inside the checkout */
.wag-page .wc-block-components-checkout-step__title {
  font-family: "Poppins", sans-serif; font-weight: 700; font-size: 18px; color: var(--ink);
}
.wag-page .wc-block-components-checkout-step__heading { margin-bottom: 4px; }
.wag-page .wc-block-components-checkout-step { padding-bottom: 26px; }

/* Inputs & selects — rounded, roomy, brand focus */
.wag-page .wc-block-components-text-input input,
.wag-page .wc-block-components-select select,
.wag-page .wc-blocks-components-select__select,
.wag-page .wc-block-components-textarea {
  border: 1px solid #e2e2e2 !important;
  border-radius: 12px !important;
  min-height: 54px;
  background: #fff !important;
  font-size: 14.5px;
  transition: border-color .15s, box-shadow .15s;
}
.wag-page .wc-block-components-text-input input:focus,
.wag-page .wc-block-components-select select:focus,
.wag-page .wc-blocks-components-select__select:focus,
.wag-page .wc-block-components-textarea:focus {
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 3px rgba(241,90,36,0.14) !important;
  outline: none !important;
}
.wag-page .wc-block-components-text-input.is-active label,
.wag-page .wc-block-components-text-input input:focus + label { color: var(--orange) !important; }

/* Payment & shipping option rows → soft cards with hover / selected */
.wag-page .wc-block-components-radio-control__option {
  border: 1px solid #eaeaea; border-radius: 12px; padding: 16px 16px 16px 46px; margin-bottom: 10px;
  background: #fff; transition: border-color .15s, box-shadow .15s;
}
.wag-page .wc-block-components-radio-control__option:hover { border-color: #f0b48f; }
.wag-page .wc-block-components-radio-control__option--checked {
  border-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); background: #fff7f3;
}

/* Order summary — sticky brand card */
.wag-page .wp-block-woocommerce-checkout-totals-block,
.wag-page .wp-block-woocommerce-cart-order-summary-block {
  position: sticky; top: 20px;
}
.wag-page .wp-block-woocommerce-checkout-order-summary-block {
  border: 1px solid #eee; border-radius: 16px; padding: 8px 22px 16px;
  background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,0.05);
}
.wag-page .wc-block-components-order-summary-item { padding: 14px 0; }
.wag-page .wc-block-components-totals-item { padding: 8px 0; }
.wag-page .wc-block-components-totals-footer-item { font-size: 17px; }
.wag-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { color: var(--orange); font-weight: 800; }

/* Coupon / panel toggles */
.wag-page .wc-block-components-panel__button { font-weight: 600; }

/* Place Order — big, confident, subtle lift */
.wag-page button.wc-block-components-checkout-place-order-button,
.wag-page .wc-block-cart__submit-button {
  min-height: 56px !important; font-size: 16px !important; letter-spacing: .2px;
  box-shadow: 0 10px 22px rgba(241,90,36,0.28) !important;
  transition: background .15s, transform .1s, box-shadow .15s !important;
}
.wag-page button.wc-block-components-checkout-place-order-button:hover,
.wag-page .wc-block-cart__submit-button:hover { transform: translateY(-1px); }
.wag-page button.wc-block-components-checkout-place-order-button:active { transform: translateY(0); }

/* Guest / helper notes */
.wag-page .wc-block-components-checkout-step__description,
.wag-page .wc-block-checkout__guest-checkout-notice { color: #888; font-size: 13px; }

/* Product image in the summary — tidy rounded thumb */
.wag-page .wc-block-components-order-summary-item__image img,
.wag-page .wc-block-cart-item__image img { border-radius: 10px; border: 1px solid #f0f0f0; }

/* Main product image hover-zoom (magnifier follows the cursor). */
.pdp2__main { cursor: zoom-in; }
.pdp2__main img { transition: transform 0.12s ease; will-change: transform; }

/* Reviews sort dropdown (matches reference "Most Recent" selector) */
.reviews__sort { margin: 22px 0 4px; }
.reviews__sort select {
  appearance: none; -webkit-appearance: none;
  border: 1.5px solid var(--orange); border-radius: 8px;
  background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23f15a24' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  color: var(--orange); font-family: inherit; font-size: 13px; font-weight: 600;
  padding: 9px 34px 9px 14px; cursor: pointer; min-width: 150px;
}
.reviews__sort select:focus { outline: none; box-shadow: 0 0 0 3px rgba(241,90,36,0.14); }

/* Related products — two rows of six (grid), with a centred View All button. */
.pdp-related-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 22px 20px;
}
.pdp-related-grid .fcard { min-width: 0; }
.pdp-related-more { text-align: center; margin-top: 30px; }
.pdp-related-more .wt-btn { display: inline-block; min-width: 200px; }
@media (max-width: 1200px) { .pdp-related-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px)  { .pdp-related-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .pdp-related-grid { grid-template-columns: repeat(2, 1fr); } }

/* Shop "Select all" categories row */
.shop__filter-all {
  border-bottom: 1px solid #eee; padding-bottom: 8px; margin-bottom: 6px;
}
.shop__filter-all strong { color: var(--ink); font-weight: 700; }
.shop__filter input[type="checkbox"] { accent-color: var(--orange); }

/* ============================================================
   CART (block) — reference-style layout
   ============================================================ */
.woocommerce-cart .wag-page__inner { max-width: 1240px; }

/* Product/Total header row */
.wag-page .wc-block-cart-items__header { border-bottom: 1px solid #ececec; }

/* Item image → bordered rounded box */
.wag-page td.wc-block-cart-item__image img,
.wag-page .wc-block-cart-item__image img {
  border: 1px solid #eee; border-radius: 12px; background: #fff;
  padding: 6px; box-sizing: border-box; width: 84px; height: 84px; object-fit: contain;
}

/* Item name — dark, bold (not orange) */
.wag-page .wc-block-components-product-name {
  color: var(--ink) !important; font-weight: 700; font-size: 15px; text-decoration: none;
}
.wag-page .wc-block-components-product-name:hover { color: var(--orange) !important; }
.wag-page .wc-block-cart-item__product .wc-block-components-product-metadata { color: #999; font-size: 13px; }

/* Remove link → orange with a trash icon */
.wag-page .wc-block-cart-item__remove-link {
  color: var(--orange) !important; font-weight: 600; text-decoration: none; font-size: 13px;
}
.wag-page .wc-block-cart-item__remove-link:hover { color: #d94e1a !important; }

/* Quantity selector → tidy rounded stepper */
.wag-page .wc-block-components-quantity-selector {
  border: 1px solid #e2e2e2 !important; border-radius: 8px; overflow: hidden; max-width: 120px;
}
.wag-page .wc-block-components-quantity-selector__button { color: #333; }
.wag-page .wc-block-components-quantity-selector__button:hover { color: var(--orange); }

/* Line total */
.wag-page .wc-block-cart-item__total { font-weight: 700; color: var(--ink); }

/* Order Summary sidebar → elevated card */
.wag-page .wc-block-cart__sidebar .is-large,
.wag-page .wc-block-cart__sidebar > .wc-block-components-sidebar,
.wag-page .wp-block-woocommerce-cart-order-summary-block {
  border: 1px solid #eee; border-radius: 16px; padding: 22px 22px 20px;
  background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,0.05); position: sticky; top: 20px;
}
.wag-page .wc-block-cart__totals-title,
.wag-page .wc-block-components-title {
  font-family: "Poppins", sans-serif; font-weight: 700; font-size: 18px; color: var(--ink);
  text-transform: none; letter-spacing: 0;
}
.wag-page .wc-block-components-totals-item { padding: 8px 0; font-size: 14px; }
.wag-page .wc-block-components-totals-footer-item { font-size: 18px; }
.wag-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { color: var(--orange); font-weight: 800; }

/* Proceed to Checkout — orange, roomy */
.wag-page .wc-block-cart__submit-button,
.wag-page .wc-block-cart__submit-container .wc-block-components-button {
  background: var(--orange) !important; color: #fff !important; border-radius: 999px !important;
  min-height: 54px !important; font-weight: 700 !important; font-size: 15px !important;
  box-shadow: 0 10px 22px rgba(241,90,36,0.26) !important;
}
.wag-page .wc-block-cart__submit-button:hover { background: #d94e1a !important; }

/* Continue Shopping button (added under Proceed to Checkout on the cart) */
.wag-continue-shop {
  display: block; width: 100%; text-align: center; margin-top: 12px;
  background: #fff; color: var(--ink); border: 1px solid #e0e0e0; border-radius: 999px;
  padding: 14px; font-weight: 700; font-size: 15px; text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}
.wag-continue-shop:hover { border-color: var(--orange); color: var(--orange); }

/* ============================================================
   CART — custom classic layout (reference "Your Cart")
   ============================================================ */
.wag-cart { display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: start; }
.wag-cart__items { min-width: 0; }
.wag-cart__head { display: flex; justify-content: space-between; text-transform: uppercase; font-size: 12px; letter-spacing: .5px; color: #999; padding: 4px 0 14px; border-bottom: 1px solid #ececec; }

.wag-cart__row {
  display: grid; grid-template-columns: 96px 1fr auto 90px; align-items: center; gap: 22px;
  padding: 20px 0; border-bottom: 1px solid #ececec;
}
.wag-cart__img img {
  width: 84px; height: 84px; object-fit: contain; background: #fff;
  border: 1px solid #eee; border-radius: 12px; padding: 6px; box-sizing: border-box;
}
.wag-cart__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wag-cart .wag-cart__name { font-weight: 700; font-size: 15px; color: var(--ink); text-decoration: none; }
.wag-cart .wag-cart__name:hover { color: var(--orange); }
.wag-cart__cat { font-size: 13px; color: #9a9a9a; }
.wag-cart__remove { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--orange); text-decoration: none; width: max-content; }
.wag-cart__remove:hover { color: #d94e1a; }
.wag-cart__price { font-weight: 700; font-size: 16px; color: var(--ink); text-align: right; }
.wag-cart__price del { color: #b0b0b0; font-weight: 400; font-size: 13px; }

.wag-cart__stepper { border: 1px solid #e2e2e2; border-radius: 8px; }
.wag-cart__stepper button { width: 36px; height: 40px; background: #f6f6f6; border: none; font-size: 18px; color: #333; cursor: pointer; }
.wag-cart__stepper button:hover { background: var(--orange); color: #fff; }
.wag-cart__stepper input { width: 46px; height: 40px; border: none; text-align: center; font-size: 15px; font-weight: 600; -moz-appearance: textfield; }
.wag-cart__stepper input::-webkit-outer-spin-button,
.wag-cart__stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wag-cart__update-hidden { display: none; }

/* Order Summary card */
.wag-cart__aside { position: sticky; top: 20px; }
.wag-summary { border: 1px solid #eee; border-radius: 16px; padding: 24px; background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,0.05); }
.wag-summary__title { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 19px; color: var(--ink); margin: 0 0 18px; }
.wag-summary__row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: #555; padding: 9px 0; }
.wag-summary__row--coupon span:last-child { color: #1a9d3a; }
.wag-summary__total { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; padding: 16px 0 4px; border-top: 1px solid #ececec; font-family: "Poppins", sans-serif; font-weight: 800; font-size: 20px; color: var(--ink); }
.wag-summary__total .amount { color: var(--ink); }
.wag-summary a.wag-summary__checkout {
  display: block; text-align: center; margin-top: 18px; background: var(--orange); color: #fff;
  border-radius: 10px; padding: 15px; font-weight: 700; font-size: 15px; text-decoration: none;
  box-shadow: 0 10px 22px rgba(241,90,36,0.26); transition: background .15s, transform .1s;
}
.wag-summary a.wag-summary__checkout:hover { background: #d94e1a; color: #fff; transform: translateY(-1px); }
.wag-summary a.wag-summary__continue {
  display: block; text-align: center; margin-top: 12px; background: #fff; color: var(--ink);
  border: 1px solid #e0e0e0; border-radius: 10px; padding: 13px; font-weight: 700; font-size: 15px; text-decoration: none; transition: all .15s;
}
.wag-summary a.wag-summary__continue:hover { border-color: var(--orange); color: var(--orange); }

@media (max-width: 900px) {
  .wag-cart { grid-template-columns: 1fr; }
  .wag-cart__row { grid-template-columns: 72px 1fr; grid-auto-rows: auto; row-gap: 12px; }
  .wag-cart__qty, .wag-cart__price { grid-column: 2; justify-self: start; text-align: left; }
}

/* ============================================================
   CHECKOUT — custom classic layout (reference form)
   ============================================================ */
/* Exact reference values: .co / .wt-card / .co-summary */
.wag-checkout { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: start; }
.wag-card { background: #fff; border: 1px solid #eee; border-radius: 14px; padding: 28px; box-shadow: none; }
.wag-card__title { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 18px; color: var(--ink); margin: 0 0 16px; }
.wag-checkout__aside .wag-card { padding: 24px; }
.wag-checkout__aside { position: sticky; top: 20px; }
.wag-hidden, .wag-checkout .woocommerce-account-fields, #order_review_heading,
.wag-checkout__fields #billing_country_field { display: none !important; }

/* Billing fields grid — exact reference (.wt-form gap:16, .wt-row2 gap:16) */
.wag-checkout__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wag-checkout__fields .form-row,
.wag-checkout__fields .woocommerce-input-wrapper { margin: 0 !important; padding: 0 !important; display: block; }
/* Kill WooCommerce's default .form-row-first/last width:47% + float — the grid
   handles the two columns, so every field must fill its own cell fully. */
.wag-checkout__fields .form-row,
.wag-checkout__fields .form-row-first,
.wag-checkout__fields .form-row-last,
.wag-checkout__fields .form-row-wide {
	width: 100% !important;
	float: none !important;
	overflow: visible;
}
.wag-checkout__fields .woocommerce-input-wrapper { width: 100% !important; }
.wag-checkout .wag-card input,
.wag-checkout .wag-card select,
.wag-checkout .wag-card textarea { margin: 0 !important; }
.wag-checkout__fields .form-row-wide,
.wag-checkout__fields #billing_country_field,
.wag-checkout__fields .form-row.notes { grid-column: 1 / -1; }
.wag-checkout__fields label {
  display: block; font-size: 13px; font-weight: 600; color: #444 !important; margin: 0 0 6px;
}
/* Match the reference: no required asterisks on the labels. */
.wag-checkout__fields label .required,
.wag-checkout__fields label .optional { display: none !important; }
.wag-checkout .wag-card input[type="text"],
.wag-checkout .wag-card input[type="email"],
.wag-checkout .wag-card input[type="tel"],
.wag-checkout .wag-card input[type="password"],
.wag-checkout .wag-card input[type="number"],
.wag-checkout .wag-card textarea,
.wag-checkout .wag-card select,
.wag-checkout .wag-card .select2-selection {
  width: 100%; border: 1px solid #e0e0e0; border-radius: 9px;
  padding: 15px 14px;
  font-family: inherit; font-size: 14px; color: var(--ink); box-sizing: border-box; background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.wag-checkout .wag-card textarea { line-height: 1.6; padding: 15px 14px; min-height: 80px; }
.wag-checkout .wag-card input::placeholder,
.wag-checkout .wag-card textarea::placeholder { color: #b3b3b3; }
.wag-checkout .wag-card input:hover,
.wag-checkout .wag-card textarea:hover,
.wag-checkout .wag-card select:hover { border-color: #d6d0c8; }
.wag-checkout .wag-card input:focus,
.wag-checkout .wag-card textarea:focus,
.wag-checkout .wag-card select:focus {
  outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(241,90,36,0.14);
}

/* Payment section */
.wag-checkout__payment { margin-top: 16px; }
.wag-checkout__payment-title { font-size: 13px; font-weight: 600; color: #444; margin: 0 0 6px; }
.wag-payment__select {
  width: 100%; border: 1px solid #e0e0e0 !important; border-radius: 9px !important;
  padding: 15px 14px !important; font-size: 14px; font-weight: 400; color: var(--ink); cursor: pointer;
}
.wag-payment__select:focus { outline: none; border-color: var(--orange) !important; box-shadow: 0 0 0 3px rgba(241,90,36,0.14); }
/* Reset WooCommerce's default #payment grey box */
.wag-checkout #payment.wag-payment,
.wag-checkout .wag-payment { background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; }
/* The dropdown controls selection; hide the native radios + labels but keep the
   list so the selected gateway's instruction box (e.g. UPI) can show below. */
.wag-payment__methods { display: block !important; list-style: none; margin: 10px 0 0; padding: 0; border: 0 !important; }
.wag-payment__methods > li { margin: 0; background: transparent; }
.wag-payment__methods > li > input.input-radio,
.wag-payment__methods > li > label { display: none !important; }
/* Instruction box for the chosen gateway (JS reveals the active one). */
.wag-payment__methods .payment_box {
  display: none;
  background: #faf7f2; border: 1px solid #eee; border-radius: 10px;
  padding: 12px 14px; margin-top: 10px; font-size: 13px; color: #555;
}
.wag-payment__methods .payment_box::before { display: none !important; }
.wag-payment__methods .payment_box p { margin: 0 0 6px; }
.wag-payment__methods .payment_box p:last-child { margin-bottom: 0; }
/* COD / Card / Net Banking need no box — dropdown only (only UPI shows a box). */
.wag-payment__methods .payment_method_cod .payment_box,
.wag-payment__methods .payment_method_wag_card .payment_box,
.wag-payment__methods .payment_method_wag_netbank .payment_box { display: none !important; }
/* UPI instruction box bits. */
.wag-upi__vpa { font-size: 14px; color: var(--ink); }
.wag-upi__ref label { display: block; font-size: 12px; font-weight: 600; color: #444; margin: 8px 0 4px; }
.wag-upi__ref input { width: 100%; border: 1px solid #e0e0e0; border-radius: 8px; padding: 10px 12px; font-size: 14px; box-sizing: border-box; }
.wag-payment__methods > li { border: 0 !important; background: none !important; margin: 0 !important; padding: 0 !important; }
/* Hide the checkout privacy/terms blurb for a clean form (matches reference). */
.wag-checkout .woocommerce-privacy-policy-text,
.wag-checkout .woocommerce-terms-and-conditions-wrapper { display: none !important; }

/* Place Order button (exact reference: .wt-btn + .wt-block) */
.wag-checkout #place_order, .wag-place-order {
  width: 100%; margin-top: 10px; background: var(--orange) !important; color: #fff !important;
  border: none !important; border-radius: 9px !important; padding: 13px 24px !important;
  font-family: "Poppins", sans-serif; font-weight: 600 !important; font-size: 15px !important; cursor: pointer;
  box-shadow: none !important; float: none !important;
}
.wag-checkout #place_order:hover, .wag-place-order:hover { background: #d94e1a !important; }
.wag-checkout .place-order { margin: 0; padding: 0; border: 0; }
.wag-checkout .woocommerce-terms-and-conditions-wrapper { margin-top: 14px; font-size: 12px; }

/* Order Summary (right card) */
.wag-order__items { margin-bottom: 6px; }
.wag-order__item { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f0f0f0; font-size: 14px; }
.wag-order__thumb img { width: 46px; height: 46px; object-fit: contain; border: 1px solid #eee; border-radius: 8px; background: #fff; box-sizing: border-box; }
.wag-order__name { font-size: 13.5px; color: var(--ink); font-weight: 600; line-height: 1.35; }
.wag-order__name em { color: #9a9a9a; font-style: normal; font-weight: 500; margin-left: 3px; }
/* Clean checkout: hide the "Have a coupon?" bar (matches reference) */
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout form.checkout_coupon { display: none !important; }
.wag-order__price { font-weight: 700; font-size: 14px; color: var(--ink); white-space: nowrap; }
.wag-order__totals { margin-top: 8px; }
.wag-order__row { display: flex; justify-content: space-between; font-size: 14px; color: #555; padding: 8px 0; }
.wag-order__row--coupon span:last-child { color: #1a9d3a; }
.wag-order__total { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; padding-top: 14px; border-top: 1px solid #ececec; font-family: "Poppins", sans-serif; font-weight: 800; font-size: 19px; color: var(--ink); }

@media (max-width: 900px) { .wag-checkout { grid-template-columns: 1fr; } .wag-checkout__aside { position: static; } }
@media (max-width: 560px) { .wag-checkout__fields { grid-template-columns: 1fr; } }

/* ============================================================
   MEGA MENU (primary nav) — managed via Appearance → Menus
   ============================================================ */
.navbar { position: relative; }
.nav__mega { position: static; display: inline-flex; align-items: center; }
.nav__item--mega { cursor: pointer; }

.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border-top: 2px solid var(--orange);
  box-shadow: 0 24px 40px rgba(0,0,0,0.12);
  z-index: 950; padding: 30px 0;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav__mega:hover > .mega,
.nav__mega.is-open > .mega { opacity: 1; visibility: visible; transform: none; }

.mega__inner {
  max-width: 100%; margin: 0 auto; padding: 0 48px;
  columns: 6; column-gap: 30px;
}
.mega__col { break-inside: avoid; margin-bottom: 26px; }
.mega__title, .mega__title--link {
  font-family: "Poppins", sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: .3px; text-transform: uppercase; color: var(--ink);
  margin: 0 0 14px; padding-bottom: 7px; border-bottom: 2px solid var(--orange);
  display: inline-block; text-decoration: none; line-height: 1.35;
}
.mega__title--link:hover { color: var(--orange); }
.mega__links { display: flex; flex-direction: column; gap: 10px; }
.mega__link {
  font-family: "Inter", "Poppins", sans-serif; font-size: 14px; color: #555;
  text-decoration: none; transition: color .12s ease; line-height: 1.3;
}
.mega__link:hover { color: var(--orange); padding-left: 2px; }
.mega__badge {
  display: inline-block; background: var(--orange); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  padding: 2px 7px; border-radius: 5px; margin-left: 6px; vertical-align: middle; line-height: 1.4;
}

/* Mobile: mega opens inline inside the slide-in nav panel */
@media (max-width: 1023px) {
  .nav__mega { display: block; width: 100%; }
  .mega {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border-top: 0; padding: 6px 0 12px; display: none;
  }
  .nav__mega.is-open > .mega { display: block; }
  .mega__inner { columns: 1; padding: 0 6px; max-width: none; }
  .mega__col { margin-bottom: 16px; }
}

/* ============================================================
   WISHLIST — heart toggle, page grid, empty state, toast
   ============================================================ */
/* Heart button on product cards (plain icon, filled when saved). */
.fcard__fav,
.wag-wishlist {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: none;
  box-shadow: none;
  color: #2b2b2b;
  transition: transform 0.15s ease, color 0.15s ease;
}
.fcard__fav:hover,
.wag-wishlist:hover { transform: scale(1.08); color: #1c1c1c; }
.fcard__fav.is-active,
.wag-wishlist.is-active { color: #1c1c1c; }
.fcard__fav.is-active i,
.wag-wishlist.is-active i { animation: wagHeartPop 0.28s ease; }
@keyframes wagHeartPop {
  0% { transform: scale(0.6); }
  55% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* Wishlist page grid — reuse the shop card look. */
.wag-wishlist-page { padding: 8px 0 40px; }
.wag-wishlist-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.wag-wishlist-grid .fcard-li {
  list-style: none;
  margin: 0;
  display: flex;
  flex-direction: column;
}
/* Product name links keep the ink colour (not the generic .wag-page a orange). */
.wag-page .wag-wishlist-grid .fcard__name a { color: var(--wag-ink); }
.wag-page .wag-wishlist-grid .fcard__name a:hover { color: var(--wag-orange); }
@media (min-width: 640px) {
  .wag-wishlist-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 992px) {
  .wag-wishlist-grid { grid-template-columns: repeat(4, 1fr); gap: 26px; }
}

/* Empty state. */
.wag-wishlist-empty {
  text-align: center;
  padding: 60px 20px;
  color: #6b6b6b;
}
.wag-wishlist-empty i { font-size: 46px; color: #e0c3c6; margin-bottom: 14px; display: block; }
.wag-wishlist-empty p { font-size: 17px; margin: 0 0 18px; }
/* Keep the CTA text white — beat the generic .wag-page a orange rule. */
.wag-page .wag-wishlist-empty a.wt-btn--primary { color: #fff; }
.wag-page .wag-wishlist-empty a.wt-btn--primary:hover { color: #fff; }

/* Header wishlist count badge — hide when empty. */
[data-wish-count].is-empty { display: none; }

/* Toast. */
.wag-toast {
  position: fixed;
  left: 50%;
  top: 88px;
  transform: translate(-50%, -18px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: min(92vw, 440px);
  background: #1f2430;
  color: #fff;
  padding: 13px 22px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  opacity: 0;
  pointer-events: none;
  z-index: 99999;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.wag-toast i { font-size: 17px; flex: 0 0 auto; }
.wag-toast.is-show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.wag-toast--success { background: #14894a; }
.wag-toast--success i { color: #d6ffe6; }
.wag-toast--info { background: #1f2430; }
.wag-toast--info i { color: #ffd9a8; }
.wag-toast--error { background: #d0392b; }
.wag-toast--error i { color: #ffdad4; }

/* Live-filter: dim the sidebar while the filtered page reloads. */
#wagShopForm.is-filtering { opacity: 0.55; pointer-events: none; transition: opacity 0.15s ease; }

/* ============================================================
   CHECKOUT — saved address book (multiple addresses)
   ============================================================ */
.wag-addr-book { margin: 0 0 22px; }
.wag-addr-book__title { font-size: 13px; font-weight: 600; color: #444; margin: 0 0 10px; }
.wag-addr-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wag-addr-card {
  position: relative; text-align: left; cursor: pointer;
  border: 1.5px solid #e6e6e6; border-radius: 12px; padding: 14px 16px;
  background: #fff; font: inherit; color: var(--ink);
  display: flex; flex-direction: column; gap: 3px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.wag-addr-card:hover { border-color: #f0b48c; }
.wag-addr-card.is-selected { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(241,90,36,0.12); }
.wag-addr-card__name { font-weight: 700; font-size: 14px; padding-right: 20px; }
.wag-addr-card__line { font-size: 12.5px; color: #666; line-height: 1.4; }
.wag-addr-card__phone { font-size: 12.5px; color: #888; }
.wag-addr-card__del {
  position: absolute; top: 7px; right: 9px; border: none; background: none;
  font-size: 19px; line-height: 1; color: #c2c2c2; cursor: pointer; padding: 2px 5px;
}
.wag-addr-card__del:hover { color: #e63946; }
.wag-addr-card--new {
  align-items: center; justify-content: center; flex-direction: row; gap: 6px;
  border-style: dashed; color: var(--orange); font-weight: 600; font-size: 13.5px;
}
.wag-addr-card--new:hover { border-color: var(--orange); background: #fff8f4; }
.wag-addr-card--new__plus { font-size: 18px; line-height: 1; }
@media (max-width: 560px) { .wag-addr-list { grid-template-columns: 1fr; } }

/* ============================================================
   EMPTY CART — centered state with icon
   ============================================================ */
.wag-cart-empty { max-width: 540px; margin: 30px auto 70px; text-align: center; padding: 20px; }
.wag-cart-empty__icon {
  position: relative; width: 112px; height: 112px; margin: 0 auto 26px;
  border-radius: 50%; background: #fff5ec; color: var(--orange);
  display: grid; place-items: center; font-size: 46px;
  box-shadow: 0 12px 34px rgba(241,90,36,0.14);
}
.wag-cart-empty__paw {
  position: absolute; right: -2px; bottom: 0;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--orange); color: #fff;
  display: grid; place-items: center; font-size: 17px;
  border: 3px solid #fff; box-sizing: border-box;
}
.wag-cart-empty__title { font-family: "Poppins", sans-serif; font-size: 25px; font-weight: 800; color: var(--ink); margin: 0 0 10px; }
.wag-cart-empty__text { font-size: 15px; color: #7d7d7d; line-height: 1.6; margin: 0 0 28px; }
.wag-cart-empty__btn { display: inline-flex; align-items: center; gap: 9px; min-width: 210px; }
/* Keep the CTA text white — beat the generic .wag-page a orange rule. */
.wag-page .wag-cart-empty__btn,
.wag-page .wag-cart-empty__btn:hover { color: #fff; }
/* Hide WooCommerce's default empty-cart bits if any hook prints them. */
.wag-cart-empty .return-to-shop,
.wag-cart-empty .cart-empty.woocommerce-info { display: none; }

/* ============================================================
   CHECKOUT — validation errors (hide top summary, style inline)
   ============================================================ */
/* Remove the big red summary box at the top — errors show inline per field. */
.woocommerce-checkout .woocommerce-NoticeGroup,
.woocommerce-checkout .woocommerce-error { display: none !important; }

/* Inline per-field error (WooCommerce appends .checkout-inline-error-message). */
.wag-checkout .checkout-inline-error-message {
  display: flex; align-items: flex-start; gap: 6px;
  margin: 7px 0 0; font-size: 12.5px; font-weight: 500; line-height: 1.4;
  color: #e0492f;
}
.wag-checkout .checkout-inline-error-message::before {
  content: "\f06a"; /* fa-circle-exclamation */
  font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 12px;
  line-height: 1.5; flex: 0 0 auto;
}
/* Highlight the invalid field itself. */
.wag-checkout .wag-card .woocommerce-invalid input,
.wag-checkout .wag-card .woocommerce-invalid select,
.wag-checkout .wag-card .woocommerce-invalid textarea {
  border-color: #ef9a8c !important;
  background: #fff8f7 !important;
}
.wag-checkout .wag-card .woocommerce-invalid input:focus,
.wag-checkout .wag-card .woocommerce-invalid select:focus,
.wag-checkout .wag-card .woocommerce-invalid textarea:focus {
  border-color: #e0492f !important;
  box-shadow: 0 0 0 3px rgba(224,73,47,0.12) !important;
}
/* Valid field gets a subtle green edge. */
.wag-checkout .wag-card .woocommerce-validated input,
.wag-checkout .wag-card .woocommerce-validated select { border-color: #bfe0c0 !important; }

/* ============================================================
   ORDER RECEIVED / THANK-YOU PAGE
   ============================================================ */
.wag-thankyou { max-width: 820px; margin: 0 auto; }
.wag-ty-hero { text-align: center; padding: 8px 0 26px; }
.wag-ty-hero__icon {
  width: 86px; height: 86px; margin: 0 auto 18px; border-radius: 50%;
  background: #e9f9ee; color: #22a45d; display: grid; place-items: center;
  font-size: 38px; box-shadow: 0 12px 32px rgba(34,164,93,0.16);
}
.wag-ty-hero--failed .wag-ty-hero__icon { background: #fdecea; color: #e0492f; box-shadow: 0 12px 32px rgba(224,73,47,0.16); }
.wag-ty-hero__title { font-family: "Poppins", sans-serif; font-size: 26px; font-weight: 800; color: var(--ink); margin: 0 0 10px; }
.wag-ty-hero__text { font-size: 15px; color: #7d7d7d; max-width: 540px; margin: 0 auto; line-height: 1.6; }
.wag-ty-hero__actions { margin-top: 20px; display: flex; gap: 12px; justify-content: center; }

.wag-ty-overview { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 0 0 8px; padding: 0; }
.wag-ty-overview li {
  background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 15px 16px;
  text-align: center; display: flex; flex-direction: column; gap: 5px;
}
.wag-ty-overview li span { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #9a9a9a; font-weight: 600; }
.wag-ty-overview li strong { font-size: 15px; color: var(--ink); font-weight: 700; }

.wag-thankyou h2 { font-family: "Poppins", sans-serif; font-size: 20px; font-weight: 800; color: var(--ink); margin: 30px 0 14px; }

.wag-thankyou table.order_details {
  width: 100%; border-collapse: collapse; background: #fff;
  border: 1px solid #eee; border-radius: 12px; overflow: hidden;
}
.wag-thankyou table.order_details th,
.wag-thankyou table.order_details td { padding: 14px 18px; text-align: left; border-bottom: 1px solid #f1f1f1; font-size: 14px; }
.wag-thankyou table.order_details thead th { background: #faf7f2; font-weight: 700; color: var(--ink); font-size: 13px; }
.wag-thankyou table.order_details tfoot th { font-weight: 700; color: #555; background: #fff; }
.wag-thankyou table.order_details tfoot td { font-weight: 700; color: var(--ink); background: #fff; }
.wag-thankyou table.order_details td.product-total { font-weight: 700; color: var(--ink); white-space: nowrap; }
.wag-thankyou table.order_details tfoot tr:last-child th,
.wag-thankyou table.order_details tfoot tr:last-child td { font-size: 16.5px; color: var(--ink); }
.wag-thankyou table.order_details tr:last-child td,
.wag-thankyou table.order_details tr:last-child th { border-bottom: 0; }

.wag-oitem { display: flex; align-items: center; gap: 13px; }
.wag-oitem__thumb img { width: 48px; height: 48px; object-fit: contain; border: 1px solid #eee; border-radius: 8px; background: #fff; box-sizing: border-box; display: block; }
.wag-oitem__name { font-weight: 600; color: var(--ink); }
.wag-page .wag-oitem__name a { color: var(--ink); }
.wag-page .wag-oitem__name a:hover { color: var(--orange); }
.wag-oitem__name .product-quantity { color: #9a9a9a; font-weight: 500; }

.wag-thankyou .woocommerce-customer-details address {
  border: 1px solid #eee; border-radius: 12px; padding: 18px 20px;
  font-style: normal; line-height: 1.7; color: #555; font-size: 14px; background: #fff;
}
.wag-thankyou .woocommerce-column__title { font-family: "Poppins", sans-serif; font-size: 18px; font-weight: 800; color: var(--ink); margin: 26px 0 12px; }

.wag-ty-actions { display: flex; gap: 14px; justify-content: center; margin: 36px 0 10px; flex-wrap: wrap; }
.wag-ty-actions .wt-btn { min-width: 210px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.wag-page .wag-ty-continue,
.wag-page .wag-ty-continue:hover { color: #fff; }

@media (max-width: 640px) { .wag-ty-overview { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   CHECKOUT — login required (guest checkout disabled)
   ============================================================ */
.wag-login-required { max-width: 540px; margin: 30px auto 60px; text-align: center; padding: 30px 20px; }
.wag-login-required__icon {
  width: 86px; height: 86px; margin: 0 auto 20px; border-radius: 50%;
  background: #fff5ec; color: var(--orange); display: grid; place-items: center;
  font-size: 34px; box-shadow: 0 12px 32px rgba(241,90,36,0.14);
}
.wag-login-required__title { font-family: "Poppins", sans-serif; font-size: 23px; font-weight: 800; color: var(--ink); margin: 0 0 10px; }
.wag-login-required__text { font-size: 15px; color: #7d7d7d; line-height: 1.6; margin: 0 0 26px; }
.wag-login-required__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.wag-login-required__actions .wt-btn { min-width: 150px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

/* ============================================================
   MY ACCOUNT — sidebar icons, dashboard cards, content card
   ============================================================ */
/* Sidebar nav icons. */
.woocommerce-MyAccount-navigation li a { display: flex !important; align-items: center; gap: 11px; }
.woocommerce-MyAccount-navigation li a::before {
  font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 14px;
  width: 18px; text-align: center; flex: 0 0 auto; opacity: .9;
}
.woocommerce-MyAccount-navigation-link--dashboard a::before { content: "\f625"; }
.woocommerce-MyAccount-navigation-link--orders a::before { content: "\f466"; }
.woocommerce-MyAccount-navigation-link--downloads a::before { content: "\f019"; }
.woocommerce-MyAccount-navigation-link--edit-address a::before { content: "\f3c5"; }
.woocommerce-MyAccount-navigation-link--edit-account a::before { content: "\f007"; }
.woocommerce-MyAccount-navigation-link--customer-logout a::before { content: "\f2f5"; }

/* Content card. */
.woocommerce-account .woocommerce-MyAccount-content {
  background: #fff; border: 1px solid #eee; border-radius: 14px; padding: 28px;
}

/* Dashboard greeting + quick cards. */
.wag-dash__hello { display: flex; align-items: center; gap: 16px; margin: 0 0 24px; }
.wag-dash__avatar img { width: 56px; height: 56px; border-radius: 50%; display: block; }
.wag-dash__name { font-family: "Poppins", sans-serif; font-size: 21px; font-weight: 800; color: var(--ink); margin: 0; }
.wag-dash__sub { font-size: 14px; color: #7d7d7d; margin: 3px 0 0; }
.wag-dash__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wag-dash__card {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid #eee; border-radius: 12px; padding: 16px 18px; background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.wag-dash__card:hover { border-color: #f0b48c; box-shadow: 0 10px 26px rgba(241,90,36,0.10); transform: translateY(-2px); }
.wag-dash__ic {
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: 12px;
  background: #fff5ec; color: var(--orange); display: grid; place-items: center; font-size: 18px;
}
.wag-dash__ct { display: flex; flex-direction: column; }
.wag-page .wag-dash__card strong,
.wag-dash__ct strong { color: var(--ink); font-size: 15px; font-weight: 700; }
.wag-dash__ct small { color: #8a8a8a; font-size: 12.5px; margin-top: 2px; }
.wag-page .wag-dash__card { color: inherit; }

@media (max-width: 820px) {
  .wag-account { grid-template-columns: 1fr; gap: 20px; }
  .wag-dash__cards { grid-template-columns: 1fr; }
}

/* Account details — remove the fieldset box around "Password change". */
.woocommerce-account .woocommerce-EditAccountForm fieldset,
.woocommerce-account form.edit-account fieldset {
  border: 0;
  margin: 8px 0 0;
  padding: 8px 0 0;
}
.woocommerce-account .woocommerce-EditAccountForm legend,
.woocommerce-account form.edit-account legend {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  padding: 0;
  margin: 0 0 14px;
  border: 0;
  width: auto;
}

/* ============================================================
   ORDER DELIVERY TRACKER (My Account → view order)
   ============================================================ */
.wag-track {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 6px; margin: 8px 0 28px; padding: 22px 10px 6px; position: relative;
}
.wag-track__step {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 9px;
  text-align: center; position: relative;
}
/* Connector line between dots. */
.wag-track__step::before {
  content: ""; position: absolute; top: 21px; left: -50%; width: 100%; height: 3px;
  background: #eee; z-index: 0;
}
.wag-track__step:first-child::before { display: none; }
.wag-track__dot {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: #f0f0f0; color: #b0b0b0; font-size: 17px; position: relative; z-index: 1;
  border: 3px solid #fff; box-shadow: 0 0 0 1px #eee;
}
.wag-track__label { font-size: 12.5px; font-weight: 600; color: #9a9a9a; line-height: 1.3; }
/* Done steps. */
.wag-track__step.is-done .wag-track__dot { background: #d9f2e2; color: #22a45d; box-shadow: 0 0 0 1px #b8e6cb; }
.wag-track__step.is-done::before { background: #7bd3a0; }
.wag-track__step.is-done .wag-track__label { color: #22a45d; }
/* Current step. */
.wag-track__step.is-current .wag-track__dot {
  background: var(--orange); color: #fff; box-shadow: 0 0 0 4px rgba(241,90,36,0.18);
}
.wag-track__step.is-current::before { background: #7bd3a0; }
.wag-track__step.is-current .wag-track__label { color: var(--ink); font-weight: 700; }
/* Cancelled step (where the order was stopped). */
.wag-track__step.is-cancelled .wag-track__dot {
  background: #fdecea; color: #d0392b; box-shadow: 0 0 0 4px rgba(208,57,43,0.14);
}
.wag-track__step.is-cancelled::before { background: #7bd3a0; }
.wag-track__step.is-cancelled .wag-track__label { color: #d0392b; font-weight: 700; }

/* Cancelled / returned / failed banner. */
.wag-track-banner {
  display: flex; align-items: center; gap: 10px; margin: 4px 0 24px;
  padding: 14px 18px; border-radius: 12px; font-size: 14px; font-weight: 600;
}
.wag-track-banner--cancel { background: #fdecea; color: #d0392b; border: 1px solid #f6c9c3; }
.wag-track-banner i { font-size: 17px; }

/* Orders list — product thumbnails column. */
.wag-oprod { display: flex; align-items: center; gap: 6px; }
.wag-oprod__thumb img {
  width: 40px; height: 40px; object-fit: contain; border: 1px solid #eee;
  border-radius: 8px; background: #fff; box-sizing: border-box; display: block;
}
.wag-oprod__more { font-size: 12px; font-weight: 700; color: #888; margin-left: 2px; }

@media (max-width: 600px) {
  .wag-track__label { font-size: 11px; }
  .wag-track__dot { width: 38px; height: 38px; font-size: 15px; }
  .wag-track__step::before { top: 18px; }
}

/* ============================================================
   LOST / RESET PASSWORD — centered card
   ============================================================ */
.wag-lostpw { max-width: 470px; margin: 20px auto 60px; text-align: center; padding: 20px; }
.wag-lostpw__icon {
  width: 80px; height: 80px; margin: 0 auto 18px; border-radius: 50%;
  background: #fff5ec; color: var(--orange); display: grid; place-items: center;
  font-size: 30px; box-shadow: 0 12px 30px rgba(241,90,36,0.14);
}
.wag-lostpw__title { font-family: "Poppins", sans-serif; font-size: 22px; font-weight: 800; color: var(--ink); margin: 0 0 8px; }
.wag-lostpw__text { font-size: 14.5px; color: #7d7d7d; line-height: 1.6; margin: 0 0 24px; }
.wag-lostpw__form { text-align: left; }
.wag-lostpw__form .form-row { margin: 0 0 16px; }
.wag-lostpw__form label { display: block; font-size: 13px; font-weight: 600; color: #444; margin: 0 0 6px; }
.wag-lostpw__form .input-text {
  width: 100%; border: 1px solid #e0e0e0; border-radius: 9px; padding: 14px;
  font-size: 14px; box-sizing: border-box;
}
.wag-lostpw__form .input-text:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(241,90,36,0.14); }
.wag-lostpw__btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.wag-page .wag-lostpw__btn,
.wag-page .wag-lostpw__btn:hover { color: #fff; }
.wag-lostpw__back { text-align: center; margin: 16px 0 0; font-size: 13.5px; }

/* Addresses — put the "Edit" link on the right of the title. */
.woocommerce-account .woocommerce-Address-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.woocommerce-account .woocommerce-Address-title .edit {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

/* ============================================================
   FIELD VALIDATION (names / email / phone) — all forms
   ============================================================ */
.wag-field-err {
  display: block;
  color: #e0492f;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  margin-top: 5px;
}
input.wag-invalid {
  border-color: #ef9a8c !important;
  background: #fff8f7 !important;
}
input.wag-invalid:focus {
  border-color: #e0492f !important;
  box-shadow: 0 0 0 3px rgba(224, 73, 47, 0.12) !important;
}

/* ============================================================
   MY ADDRESSES manager (account book)
   ============================================================ */
.woocommerce-MyAccount-navigation-link--my-addresses a::before { content: "\f3c5"; }

.wag-abk-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0 0 20px; flex-wrap: wrap; }
.wag-abk-intro { font-size: 14px; color: #777; margin: 0; }
.wag-abk-addbtn { display: inline-flex; align-items: center; gap: 8px; }
.wag-page .wag-abk-addbtn, .wag-page .wag-abk-addbtn:hover { color: #fff; }

.wag-abk-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wag-abk-card { border: 1px solid #eee; border-radius: 12px; padding: 16px 18px; background: #fff; }
.wag-abk-card__name { font-weight: 700; font-size: 15px; color: var(--ink); margin-bottom: 4px; }
.wag-abk-card__line { font-size: 13px; color: #666; line-height: 1.5; margin-bottom: 8px; }
.wag-abk-card__meta { font-size: 12.5px; color: #888; margin-bottom: 3px; }
.wag-abk-card__meta i { width: 14px; color: var(--orange); }
.wag-abk-card__actions { display: flex; gap: 16px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #f2f2f2; }
.wag-abk-card__actions a { font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.wag-page .wag-abk-del { color: #e0492f; }

.wag-abk-empty { text-align: center; padding: 44px 20px; color: #888; }
.wag-abk-empty i { font-size: 40px; color: #e0c3c6; margin-bottom: 12px; display: block; }

.wag-abk-title { font-family: "Poppins", sans-serif; font-size: 18px; font-weight: 800; color: var(--ink); margin: 0 0 18px; }
.wag-abk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wag-abk-wide { grid-column: 1 / -1; }
.wag-abk-frow { margin: 0; }
.wag-abk-frow label { display: block; font-size: 13px; font-weight: 600; color: #444; margin: 0 0 6px; }
.wag-abk-frow input { width: 100%; border: 1px solid #e0e0e0; border-radius: 9px; padding: 13px 14px; font-size: 14px; box-sizing: border-box; }
.wag-abk-frow input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(241,90,36,0.14); }
.wag-abk-actions { display: flex; gap: 12px; margin-top: 22px; }
.wag-page .wag-abk-actions .wt-btn--primary, .wag-page .wag-abk-actions .wt-btn--primary:hover { color: #fff; }
@media (max-width: 640px) { .wag-abk-list, .wag-abk-grid { grid-template-columns: 1fr; } }

/* UPI QR code (checkout payment box + thank-you page) */
.wag-upi-qr {
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px; margin: 4px 0 10px; background: #fff; border: 1px solid #eee; border-radius: 12px;
}
.wag-upi-qr img { width: 170px; height: 170px; object-fit: contain; display: block; }
.wag-upi-qr__cap { font-size: 12.5px; color: #666; font-weight: 600; }
.wag-upi-qr__amt { font-size: 13px; color: var(--ink); }
.wag-upi-thanks { text-align: center; margin: 6px 0 18px; }
.wag-upi-thanks .wag-upi__thanks { margin-top: 8px; color: #555; }

/* ============================================================
   UPI payment box — refined design
   ============================================================ */
.wag-upi { font-size: 14px; }
.wag-upi__intro { color: #6b6b6b; margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; }
.wag-upi__panel { display: flex; gap: 20px; align-items: stretch; flex-wrap: wrap; margin-bottom: 18px; }
.wag-upi__qrcol { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.wag-upi__qrframe { padding: 10px; background: #fff; border: 1px solid #eee; border-radius: 14px; box-shadow: 0 6px 18px rgba(0,0,0,0.07); position: relative; }
.wag-upi__qrframe::after { content: ""; position: absolute; inset: 4px; border: 2px solid rgba(241,90,36,0.18); border-radius: 11px; pointer-events: none; }
.wag-upi__qrframe img { width: 176px; height: 176px; object-fit: contain; display: block; border-radius: 6px; }
.wag-upi__scan { font-size: 12.5px; font-weight: 600; color: #666; display: inline-flex; align-items: center; gap: 6px; }
.wag-upi__scan i { color: var(--orange); }
.wag-upi__infocol { flex: 1; min-width: 190px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.wag-upi__amount { background: #fff5ec; border: 1px solid #ffe0c9; border-radius: 12px; padding: 12px 16px; }
.wag-upi__amount span { display: block; font-size: 11px; color: #b06a3a; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; margin-bottom: 2px; }
.wag-upi__amount strong { font-size: 25px; color: var(--orange); font-weight: 800; line-height: 1; }
.wag-upi__vparow { padding: 11px 16px; border: 1px dashed #e2d8cc; border-radius: 12px; }
.wag-upi__vparow span { display: block; font-size: 11px; color: #9a9a9a; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; margin-bottom: 2px; }
.wag-upi__vparow strong { font-size: 15px; color: var(--ink); word-break: break-all; }
.wag-upi__apps { font-size: 12.5px; color: #8a8a8a; }
.wag-upi__apps b { color: #555; font-weight: 700; }
.wag-upi__ref label { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.wag-upi__ref label i { color: var(--orange); }
.wag-upi__ref input { width: 100%; border: 1px solid #e0e0e0; border-radius: 9px; padding: 13px 14px; font-size: 14px; box-sizing: border-box; letter-spacing: .5px; }
.wag-upi__ref input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(241,90,36,0.14); }
.wag-upi__hint { display: block; font-size: 12px; color: #9a9a9a; margin-top: 7px; line-height: 1.5; }
@media (max-width: 480px) {
  .wag-upi__panel { flex-direction: column; align-items: center; }
  .wag-upi__infocol { width: 100%; }
}

/* UPI payment status banner (customer order view) */
.wag-upi-status { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; padding: 13px 18px; border-radius: 12px; font-size: 14px; font-weight: 600; line-height: 1.4; }
.wag-upi-status i { font-size: 17px; flex: 0 0 auto; }
.wag-upi-status--ok { background: #e9f9ee; color: #1a7d3a; border: 1px solid #b8e6cb; }
.wag-upi-status--pending { background: #fff6e6; color: #9a6400; border: 1px solid #ffe0a8; }
.wag-upi-status--pending strong { color: #7a5000; }

/* ============================================================
   MY ACCOUNT — orders table (badges + clean action buttons)
   ============================================================ */
.woocommerce-account .woocommerce-orders-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  border: 1px solid #eee; border-radius: 12px; overflow: hidden; background: #fff; margin: 0;
}
.woocommerce-account .woocommerce-orders-table__header {
  background: #faf7f2; text-align: left; padding: 14px 16px;
  font-size: 12.5px; font-weight: 700; color: var(--ink); border: 0;
}
.woocommerce-account .woocommerce-orders-table__cell {
  padding: 15px 16px; border: 0; border-top: 1px solid #f1f1f1; font-size: 14px; vertical-align: middle; color: #555;
}
.woocommerce-account .woocommerce-orders-table__row:first-child .woocommerce-orders-table__cell { border-top: 0; }
.wag-page .woocommerce-account .woocommerce-orders-table__cell-order-number a { font-weight: 700; color: var(--orange); }

/* Coloured status badge. */
.wag-ostatus {
  display: inline-block; padding: 5px 13px; border-radius: 20px;
  font-size: 12px; font-weight: 700; white-space: nowrap; background: #eee; color: #555;
}
.wag-ostatus--pending, .wag-ostatus--on-hold { background: #fff3d6; color: #9a6400; }
.wag-ostatus--processing { background: #dbeafe; color: #1e5fbf; }
.wag-ostatus--shipped, .wag-ostatus--out-for-delivery { background: #ede4ff; color: #6b3fce; }
.wag-ostatus--completed { background: #d9f2e2; color: #1a7d3a; }
.wag-ostatus--cancelled, .wag-ostatus--failed, .wag-ostatus--refunded, .wag-ostatus--returned { background: #fde2de; color: #c33322; }

/* Action buttons — clean, no overlap. */
.woocommerce-account .woocommerce-orders-table__cell-order-actions { text-align: right; white-space: nowrap; }
.wag-page .woocommerce-account .woocommerce-orders-table__cell-order-actions a.button,
.wag-page .woocommerce-account .woocommerce-orders-table__cell-order-actions a.woocommerce-button {
  display: inline-block; float: none; width: auto; margin: 3px 0 3px 8px; padding: 8px 18px;
  border-radius: 8px; font-size: 13px; font-weight: 600; line-height: 1.3;
  background: var(--orange); color: #fff; border: 1px solid var(--orange);
}
.wag-page .woocommerce-account .woocommerce-orders-table__cell-order-actions a.button:hover { background: #d94e1a; border-color: #d94e1a; color: #fff; }
/* Non-primary actions (e.g. Invoice) → outline style. */
.wag-page .woocommerce-account .woocommerce-orders-table__cell-order-actions a.button:not(.view) {
  background: #fff; color: var(--orange);
}
.wag-page .woocommerce-account .woocommerce-orders-table__cell-order-actions a.button:not(.view):hover {
  background: #fff5ec; color: var(--orange);
}

/* Products column thumbnail sizing already handled by .wag-oprod. */
@media (max-width: 640px) {
  .woocommerce-account .woocommerce-orders-table,
  .woocommerce-account .woocommerce-orders-table thead,
  .woocommerce-account .woocommerce-orders-table tbody,
  .woocommerce-account .woocommerce-orders-table tr,
  .woocommerce-account .woocommerce-orders-table td { display: block; width: 100%; }
  .woocommerce-account .woocommerce-orders-table thead { display: none; }
  .woocommerce-account .woocommerce-orders-table__cell { border: 0; border-top: 1px solid #f1f1f1; text-align: right; position: relative; padding-left: 45%; }
  .woocommerce-account .woocommerce-orders-table__cell::before { content: attr(data-title); position: absolute; left: 16px; font-weight: 700; color: var(--ink); }
  .woocommerce-account .woocommerce-orders-table__cell-order-actions { text-align: left; padding-left: 16px; }
  /* Products (thumbnails) row: the "Products" label was absolutely positioned on
     top of the images. Put it on its own line above, thumbnails left-aligned. */
  .woocommerce-account .woocommerce-orders-table__cell-order-products {
    text-align: left;
    padding-left: 16px;
  }
  .woocommerce-account .woocommerce-orders-table__cell-order-products::before {
    position: static;
    display: block;
    margin-bottom: 8px;
  }
  .woocommerce-account .woocommerce-orders-table__cell-order-products .wag-oprod { justify-content: flex-start; }
}

/* ============================================================
   OUR JOURNEY — flexible page sections (ACF)
   ============================================================ */
.wag-journey { background: #fff; }
.wjs { padding: 54px 0; }
.wjs__in { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.wjs__title { font-family: "Poppins", sans-serif; font-size: 29px; font-weight: 800; color: var(--ink); text-align: center; margin: 0 0 34px; }

/* Hero */
.wjs-hero { text-align: center; padding: 56px 0 34px; }
.wjs-hero.has-bg { padding: 92px 24px; background-size: cover; background-position: center; }
.wjs-hero__title { font-family: "Poppins", sans-serif; font-size: 38px; font-weight: 800; color: var(--ink); margin: 0 0 14px; }
.wjs-hero.has-bg .wjs-hero__title, .wjs-hero.has-bg .wjs-hero__sub { color: #fff; }
.wjs-hero__sub { font-size: 17px; color: #666; max-width: 660px; margin: 0 auto; line-height: 1.6; }

/* Text + Image */
.wjs-story__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.wjs-story--left .wjs-story__media { order: -1; }
.wjs-story__text h2 { font-family: "Poppins", sans-serif; font-size: 29px; font-weight: 800; color: var(--ink); margin: 0 0 16px; }
.wjs-story__body { color: #5f5f5f; line-height: 1.8; font-size: 15.5px; }
.wjs-story__body p { margin: 0 0 14px; }
.wjs-story__media img { width: 100%; border-radius: 18px; box-shadow: 0 20px 44px rgba(0,0,0,0.12); display: block; }
.wjs-btn { margin-top: 18px; display: inline-block; }

/* Stats */
.wjs-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; background: linear-gradient(135deg,#fff5ec,#fdece0); border-radius: 20px; padding: 34px 24px; }
.wjs-stat { text-align: center; }
.wjs-stat b { display: block; font-family: "Poppins", sans-serif; font-size: 34px; font-weight: 800; color: var(--orange); line-height: 1; }
.wjs-stat span { display: block; font-size: 14px; color: #7a6a5c; margin-top: 6px; font-weight: 600; }

/* Timeline */
/* Centered alternating timeline (left / right). */
.wjs-tl { position: relative; max-width: 920px; margin: 0 auto; }
.wjs-tl::before { content: ""; position: absolute; left: 50%; top: 6px; bottom: 6px; width: 2px; background: #f0d9c4; transform: translateX(-50%); }
.wjs-tl__item { position: relative; width: 50%; box-sizing: border-box; margin-bottom: 26px; }
.wjs-tl__item:nth-child(odd) { left: 0; padding-right: 46px; }
.wjs-tl__item:nth-child(even) { left: 50%; padding-left: 46px; }
.wjs-tl__dot { position: absolute; top: 16px; width: 16px; height: 16px; border-radius: 50%; background: var(--orange); border: 3px solid #fff; box-shadow: 0 0 0 2px #f0d9c4; z-index: 1; }
.wjs-tl__item:nth-child(odd) .wjs-tl__dot { right: -8px; }
.wjs-tl__item:nth-child(even) .wjs-tl__dot { left: -8px; }
.wjs-tl__card { background: #fff; border: 1px solid #eee; border-radius: 14px; padding: 18px 22px; box-shadow: 0 6px 18px rgba(0,0,0,0.05); text-align: left; }
/* Stack on small screens (single left-aligned rail). */
@media (max-width: 720px) {
  .wjs-tl { max-width: 560px; }
  .wjs-tl::before { left: 7px; transform: none; }
  .wjs-tl__item, .wjs-tl__item:nth-child(odd), .wjs-tl__item:nth-child(even) { width: 100%; left: 0; padding: 0 0 0 32px; }
  .wjs-tl__item:nth-child(odd) .wjs-tl__dot, .wjs-tl__item:nth-child(even) .wjs-tl__dot { left: -1px; right: auto; }
}
.wjs-tl__year { display: inline-block; font-size: 12px; font-weight: 700; color: var(--orange); background: #fff3ea; padding: 3px 12px; border-radius: 20px; margin-bottom: 8px; }
.wjs-tl__card h4 { font-size: 17px; font-weight: 700; color: var(--ink); margin: 0 0 6px; }
.wjs-tl__card p { font-size: 14px; color: #666; line-height: 1.6; margin: 0; }

/* Values */
.wjs-val__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.wjs-val { text-align: center; padding: 28px 22px; border: 1px solid #eee; border-radius: 16px; background: #fff; transition: transform .15s ease, box-shadow .15s ease; }
.wjs-val:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0,0,0,0.08); }
.wjs-val__ic { width: 60px; height: 60px; margin: 0 auto 16px; border-radius: 16px; background: #fff5ec; color: var(--orange); display: grid; place-items: center; font-size: 24px; }
.wjs-val h4 { font-size: 18px; font-weight: 700; color: var(--ink); margin: 0 0 8px; }
.wjs-val p { font-size: 14px; color: #666; line-height: 1.6; margin: 0; }

/* CTA */
.wjs-cta__box { text-align: center; background: linear-gradient(135deg,var(--orange),#ff8a4d); border-radius: 22px; padding: 48px 30px; }
.wjs-cta__box h2 { font-family: "Poppins", sans-serif; font-size: 29px; font-weight: 800; color: #fff; margin: 0 0 12px; }
.wjs-cta__box p { font-size: 16px; color: rgba(255,255,255,0.92); max-width: 560px; margin: 0 auto 24px; line-height: 1.6; }
.wjs-cta__btn { background: #fff !important; color: var(--orange) !important; border-color: #fff !important; }

@media (max-width: 860px) {
  .wjs-story__grid { grid-template-columns: 1fr; gap: 26px; }
  .wjs-story--left .wjs-story__media { order: 0; }
  .wjs-stats__grid { grid-template-columns: 1fr 1fr; }
  .wjs-val__grid { grid-template-columns: 1fr; }
  .wjs-hero__title { font-size: 30px; }
}
.wjs-story--full .wjs-story__grid { grid-template-columns: 1fr; max-width: 780px; }

/* ---- FAQ accordion ---- */
.wjs-faq__in { max-width: 800px; }
.wjs-faq__list { display: flex; flex-direction: column; gap: 12px; }
.wjs-faq__item { border: 1px solid #eee; border-radius: 12px; background: #fff; overflow: hidden; }
.wjs-faq__item summary { list-style: none; cursor: pointer; padding: 18px 22px; font-weight: 700; font-size: 15.5px; color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.wjs-faq__item summary::-webkit-details-marker { display: none; }
.wjs-faq__item summary i { color: var(--orange); transition: transform .2s ease; flex: 0 0 auto; font-size: 13px; }
.wjs-faq__item[open] summary { color: var(--orange); }
.wjs-faq__item[open] summary i { transform: rotate(180deg); }
.wjs-faq__ans { padding: 0 22px 18px; color: #666; font-size: 14.5px; line-height: 1.7; }
.wjs-faq__ans p { margin: 0 0 10px; }
.wjs-faq__ans p:last-child { margin-bottom: 0; }

/* ---- Contact cards ---- */
.wjs-con__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px; max-width: 940px; margin: 0 auto; }
.wjs-con { display: block; text-align: center; padding: 30px 22px; border: 1px solid #eee; border-radius: 16px; background: #fff; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
a.wjs-con:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0,0,0,0.08); border-color: #f0b48c; }
.wjs-con__ic { width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 50%; background: #fff5ec; color: var(--orange); display: grid; place-items: center; font-size: 22px; }
.wjs-con h4 { font-size: 16px; font-weight: 700; color: var(--ink); margin: 0 0 6px; }
.wjs-con p { font-size: 14px; color: #666; margin: 0; word-break: break-word; }
.wag-journey a.wjs-con { color: inherit; }
.wag-journey a.wjs-con p { color: var(--orange); }

/* ============================================================
   ACCOUNT — profile picture upload field
   ============================================================ */
.wag-avatar-field { margin: 0 0 22px; }
.wag-avatar-field > label { display: block; font-size: 13px; font-weight: 700; color: var(--ink); margin: 0 0 10px; }
.wag-avatar-field__row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.wag-avatar-field__pic img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.12); display: block; }
.wag-avatar-field__ctrl { display: flex; flex-direction: column; gap: 8px; }
.wag-avatar-field__btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: var(--orange); color: #fff; font-size: 13.5px; font-weight: 600;
  padding: 9px 18px; border-radius: 9px; width: max-content;
}
.wag-avatar-field__btn:hover { background: #d94e1a; }
.wag-avatar-field__btn input[type="file"] { display: none; }
.wag-avatar-field__remove { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: #666; cursor: pointer; }
.wag-avatar-field__hint { font-size: 12px; color: #9a9a9a; }

/* ============================================================
   MOBILE — filter drawer + topbar cleanup
   ============================================================ */
.shop-side-overlay, .shop-side-close { display: none; }
@media (min-width: 901px) {
  #shopFilterToggle { display: none; } /* sidebar is always visible on desktop */
}
@media (max-width: 900px) {
  .shop { display: block; }
  .shop__side {
    position: fixed; top: 0; left: 0; bottom: 0; width: 320px; max-width: 86vw;
    background: #fff; z-index: 1200; transform: translateX(-100%);
    transition: transform .28s ease; overflow-y: auto; padding: 18px; margin: 0;
    box-shadow: 0 0 40px rgba(0,0,0,.25);
  }
  .shop__side.is-open { transform: translateX(0); }
  .shop-side-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1150;
    opacity: 0; visibility: hidden; transition: opacity .28s ease;
  }
  .shop-side-overlay.is-open { display: block; opacity: 1; visibility: visible; }
  .shop-side-close {
    display: flex; align-items: center; justify-content: center;
    position: sticky; top: 0; margin: -4px -4px 10px auto;
    width: 38px; height: 38px; background: #f4f4f4; border: none; border-radius: 50%;
    font-size: 24px; line-height: 1; color: #333; cursor: pointer;
  }
  body.shop-filter-open { overflow: hidden; }
}

/* Topbar: drop the secondary links below 991px — there isn't room to keep them
   on one line with the offer, so show just the offer (centered, single line). */
@media (max-width: 990px) {
  .topbar__right { display: none !important; }
  .topbar__offer {
    justify-content: center; text-align: center; width: 100%; margin: 0 auto;
    white-space: normal; font-size: 11.5px; line-height: 1.35;
  }
}

/* Guest checkout — optional login prompt */
.wag-guest-login {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  background: #fff6e6; border: 1px solid #ffe0a8; border-radius: 12px;
  padding: 13px 18px; margin: 0 0 24px; font-size: 14px; color: #7a5000;
}
.wag-guest-login i { color: var(--orange); }
.wag-guest-login__btn { background: none; border: none; cursor: pointer; color: var(--orange); font-weight: 700; font-size: 14px; text-decoration: underline; padding: 0; }
.wag-guest-login__btn:hover { color: #d94e1a; }

/* ---- Customer cancel order ---- */
.wag-cancel-order { margin: 4px 0 24px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.wag-cancel-order__btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid #e8b3ab; color: #c33322; background: #fdf0ee;
  padding: 9px 18px; border-radius: 9px; font-size: 13.5px; font-weight: 600;
}
.wag-cancel-order__btn:hover { background: #fbe4e0; color: #a52818; }
.wag-page .wag-cancel-order__btn, .wag-page .wag-cancel-order__btn:hover { color: #c33322; }
.wag-cancel-order__note { font-size: 12.5px; color: #999; }
/* Cancel action in the orders list → red outline (not orange). */
.wag-page .woocommerce-orders-table__cell-order-actions a.button.cancel { background: #fff; color: #c33322; border-color: #e8b3ab; }
.wag-page .woocommerce-orders-table__cell-order-actions a.button.cancel:hover { background: #fdf0ee; color: #a52818; }

/* ============================================================
   ORDERS — actions (gap + cancel/refund) + reason popup
   ============================================================ */
.wag-oactions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; align-items: center; }
.wag-oactions .button {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 !important; float: none; width: auto;
  padding: 8px 18px; border-radius: 8px; font-size: 13px; font-weight: 600; line-height: 1.3;
  background: var(--orange); border: 1px solid var(--orange); cursor: pointer;
}
.wag-page .wag-oactions a.button, .wag-page .wag-oactions button.button { color: #fff; }
.wag-oactions .button:hover { background: #d94e1a; border-color: #d94e1a; color: #fff; }
/* Cancel = red outline, Refund = amber outline. */
.wag-oactions .wag-oaction--cancel { background: #fdeeeb !important; border-color: #f0c4bc !important; }
.wag-page .wag-oactions .wag-oaction--cancel,
.wag-oactions button.wag-oaction--cancel { color: #c33322 !important; }
.wag-oactions .wag-oaction--cancel:hover { background: #f9ddd7 !important; color: #a52818 !important; }
.wag-oactions .wag-oaction--refund { background: #fff6e6 !important; border-color: #ffdfa0 !important; }
.wag-page .wag-oactions .wag-oaction--refund,
.wag-oactions button.wag-oaction--refund { color: #b26a00 !important; }
.wag-oactions .wag-oaction--refund:hover { background: #ffeecb !important; color: #8a5200 !important; }
.wag-oaction-note { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #9a6400; font-weight: 600; }
.wag-oaction-note i { font-size: 12px; }

/* Reason popup (cancel / refund) */
.wag-reason[hidden] { display: none; }
.wag-reason { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; }
.wag-reason__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.wag-reason__box { position: relative; background: #fff; border-radius: 16px; padding: 26px; width: min(94vw, 440px); box-shadow: 0 24px 60px rgba(0,0,0,.3); }
.wag-reason__close { position: absolute; top: 12px; right: 15px; background: none; border: none; font-size: 26px; line-height: 1; color: #999; cursor: pointer; }
.wag-reason__title { font-family: "Poppins", sans-serif; font-size: 20px; font-weight: 800; color: var(--ink); margin: 0 0 6px; }
.wag-reason__sub { font-size: 14px; color: #777; margin: 0 0 16px; line-height: 1.5; }
.wag-reason__text { width: 100%; border: 1px solid #e0e0e0; border-radius: 10px; padding: 12px 14px; font-size: 14px; box-sizing: border-box; resize: vertical; font-family: inherit; min-height: 90px; }
.wag-reason__text:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(241,90,36,.14); }
.wag-reason__err { color: #e0492f; font-size: 13px; font-weight: 500; margin: 8px 0 0; min-height: 16px; }
.wag-reason__actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 16px; }
.wag-reason__actions .wt-btn--primary { color: #fff; }
body.wag-reason-open { overflow: hidden; }

/* Orders table fixes — remove the cream band on the Order column + compact actions */
.woocommerce-account .woocommerce-orders-table__cell-order-number,
.woocommerce-account .woocommerce-orders-table tbody th { background: #fff !important; }
.wag-account { gap: 28px; }
.wag-oactions { gap: 8px; }
.wag-oactions .button { padding: 7px 14px !important; font-size: 12.5px !important; }
@media (min-width: 1100px) { .wag-oactions { flex-wrap: nowrap; } }

/* Order view page — reason-required cancel / refund button */
.wag-vo-action { display: flex; align-items: center; gap: 14px; margin: 20px 0 4px; flex-wrap: wrap; }
.wag-vo-action .wag-oaction { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 9px; font-size: 14px; font-weight: 600; cursor: pointer; border: 1px solid; }
.wag-vo-action .wag-oaction--cancel { background: #fdeeeb; border-color: #f0c4bc; color: #c33322; }
.wag-vo-action .wag-oaction--cancel:hover { background: #f9ddd7; color: #a52818; }
.wag-vo-action .wag-oaction--refund { background: #fff6e6; border-color: #ffdfa0; color: #b26a00; }
.wag-vo-action .wag-oaction--refund:hover { background: #ffeecb; color: #8a5200; }
.wag-vo-action__note { font-size: 12.5px; color: #999; }

/* Pet Solution Finder — result summary above the shop grid. */
.wag-finder-summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 22px; padding: 12px 16px; background: #fff7f2;
  border: 1px solid #ffd9c2; border-radius: 12px; font-size: 14px;
}
.wag-finder-summary__lead { font-weight: 700; color: #d4531f; display: inline-flex; align-items: center; gap: 8px; }
.wag-finder-summary__chip {
  padding: 3px 12px; background: #fff; border: 1px solid #ffd0b6;
  border-radius: 20px; font-weight: 600; color: #7a4a33; font-size: 13px;
}
.wag-finder-summary__clear { margin-left: auto; color: #888; text-decoration: underline; font-size: 13px; }
.wag-finder-summary__clear:hover { color: #d4531f; }

/* Delivery partner banner on the customer's order page. */
.wag-dp-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px; margin: 0 0 20px; padding: 14px 18px;
  background: #eef6ff; border: 1px solid #cfe4fb; border-radius: 12px;
}
.wag-dp-banner__main { display: flex; align-items: center; gap: 14px; }
.wag-dp-banner__logo { width: 48px; height: 48px; object-fit: contain; background: #fff; border-radius: 8px; padding: 4px; box-sizing: border-box; }
.wag-dp-banner__icon { width: 46px; height: 46px; display: grid; place-items: center; background: #2d7ff0; color: #fff; border-radius: 8px; font-size: 18px; }
.wag-dp-banner__text { display: flex; flex-direction: column; gap: 2px; }
.wag-dp-banner__lead { font-size: 14px; color: #1b3a5c; }
.wag-dp-banner__id, .wag-dp-banner__phone { font-size: 13px; color: #48607a; }
.wag-dp-banner__track {
  display: inline-flex; align-items: center; gap: 8px; background: #2d7ff0; color: #fff;
  font-weight: 700; font-size: 14px; padding: 9px 16px; border-radius: 8px; text-decoration: none;
}
.wag-dp-banner__track:hover { filter: brightness(0.95); }

/* Order Summary — coupon apply field (right-side card). */
.wag-summary__coupon {
  display: flex; align-items: center; gap: 8px; margin: 14px 0 4px;
  padding: 5px 5px 5px 12px; background: #fff; border: 1px solid #e6e6e6;
  border-radius: 12px; transition: border-color 0.15s;
}
.wag-summary__coupon:focus-within { border-color: var(--orange); }
.wag-summary__coupon-ic { color: #c9a24a; font-size: 14px; flex-shrink: 0; }
.wag-summary__coupon-input {
  flex: 1; min-width: 0; border: none; background: transparent; padding: 8px 0;
  font-size: 14px; font-family: inherit; color: var(--ink);
}
.wag-summary__coupon-input:focus { outline: none; }
.wag-summary__coupon-input::placeholder { color: #a9a9a9; }
.wag-summary__coupon-btn {
  flex-shrink: 0; padding: 9px 18px; background: #2c2c2c; color: #fff; border: none;
  border-radius: 9px; font-weight: 700; font-size: 13.5px; font-family: inherit; cursor: pointer;
  transition: background 0.15s;
}
.wag-summary__coupon-btn:hover { background: var(--orange); }

/* Applied-coupon row (amount + plain remove link). */
.wag-summary__coupon-val { display: inline-flex; align-items: center; gap: 8px; }
.wag-summary__coupon-amt { color: #1a9d5a; font-weight: 600; }
.wag-summary__coupon-remove { font-size: 12px; color: #d0392b; text-decoration: none; }
.wag-summary__coupon-remove:hover { text-decoration: underline; color: #b02318; }

/* ============================================================
   UNIFIED PAGE WIDTH
   Header, every content section, and the footer share ONE
   centred max-width so they line up on the exact same left /
   right edges (equal side gaps) on every page & screen size.
   Loaded last, so it governs the width for the whole theme.
   Change the single value below to widen / narrow the site.
   ============================================================ */
.topbar__inner,
.navbar__inner,
.hero-slider,
.max__inner,
.lmax__inner,
.probs__inner,
.probs__banners,
.best__inner,
.feat__inner,
.newest__inner,
.treat__inner,
.promos__inner,
.explore__inner,
.stories__carousel,
.finder__inner,
.faq__inner,
.footer__main,
.footer__pop,
.pp-wrap,
.page-hero__inner,
.wt-wrap,
.wjs__in,
.wag-page__inner,
.footer__bar__inner {
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
}

/* ------------------------------------------------------------
   Full-bleed decorative photos (Little Max dog, Why-Choose-Us
   pet-parent photos) hug the SAME 1440 content edge as the rest
   of the site instead of the far viewport edge, so on wide
   screens they stay beside the content instead of drifting off
   to the corners. On screens <=1440 they keep their original
   edge position (the max(0px, …) clamps the offset to zero).
   ------------------------------------------------------------ */
.lmax__pup      { right: max(0px, calc((100% - 1600px) / 2)); }
.why__photo--left  { left:  max(0px, calc((100% - 1600px) / 2)); }
.why__photo--right { right: calc(44px + max(0px, calc((100% - 1600px) / 2))); }

/* Explore video reels: with a bounded width and only a handful of clips they
   would leave a gap on the right. Let them grow to fill the row (capped) while
   still scrolling when there are many. */
.vvideo { flex: 1 0 320px; max-width: 420px; }

/* ------------------------------------------------------------
   Hide the thin line at the Why-Choose-Us -> Featured-Product
   seam WITHOUT touching the wave SVG:
   1) overlap the two same-blue sections so no sub-pixel gap
      shows the page background through as a hairline;
   2) fade the solid blue base band's top edge so it no longer
      reads as a straight line where the wave doesn't cover.
   The wave graphic itself is untouched.
   ------------------------------------------------------------ */
.feat { margin-top: -2px; }
.why  { margin-bottom: -2px; }
.why::after {
  height: 110px;
  background: linear-gradient(to bottom, rgba(234, 241, 251, 0) 0%, #eaf1fb 50%);
}

/* ============================================================
   MOBILE REVIEW PASS
   The generous 48px side padding was only trimmed for a couple
   of containers on small screens, so most sections stayed
   cramped into the middle on phones. Trim every main container
   consistently. (Grids/menus already collapse via the theme's
   own breakpoints.)
   ============================================================ */
@media (max-width: 900px) {
  .topbar__inner, .navbar__inner, .max__inner, .lmax__inner, .probs__inner,
  .best__inner, .feat__inner, .newest__inner, .treat__inner, .promos__inner,
  .explore__inner, .finder__inner, .faq__inner, .footer__main, .footer__pop,
  .pp-wrap, .wjs__in, .wag-page__inner, .footer__bar__inner, .wt-wrap,
  .page-hero__inner {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (max-width: 480px) {
  .topbar__inner, .navbar__inner, .max__inner, .lmax__inner, .probs__inner,
  .best__inner, .feat__inner, .newest__inner, .treat__inner, .promos__inner,
  .explore__inner, .finder__inner, .faq__inner, .footer__main, .footer__pop,
  .pp-wrap, .wjs__in, .wag-page__inner, .footer__bar__inner, .wt-wrap,
  .page-hero__inner {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* Hero: the 450px min-height is meant for the wide desktop banner. On phones/
   tablets the banner scales down short, so that min-height left a big empty
   gap under it. Let the hero simply match the banner image height there. */
@media (max-width: 1100px) {
  .hero { min-height: 0; }
}

/* ============================================================
   MOBILE HEADER — pure-CSS search toggle
   On phones the inline search box + wishlist/cart/account icons
   don't all fit, so the box would push icons off-screen. Here the
   search collapses to a magnifier icon (next to the wishlist);
   tapping it opens the search box as a full-width dropdown under
   the navbar. A hidden checkbox drives it — no JavaScript needed.
   Desktop keeps the inline box and hides the toggle icon.
   ============================================================ */
.nav-search-toggle { display: none; cursor: pointer; }
.wag-search-cb { display: none; }

@media (max-width: 768px) {
  .nav-search-toggle { display: inline-flex; }
  .navbar__right { gap: 14px; }
  /* Search opens INLINE inside the navbar row. When open it takes over the whole
     row — the logo and the wishlist/cart/account icons hide, leaving the
     hamburger on the left and the search icon on the right (tap it to close) —
     so the box gets full width and never looks cramped. */
  .navbar__inner { position: relative; }
  .navbar__right .search {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 72px;            /* gap after the hamburger so they never overlap */
    right: 52px;           /* extend up to the search icon so they read as one bar */
    width: auto;
    max-width: none;
    flex: none;
    margin: 0;
    height: 42px;          /* exactly match the hamburger so they line up as a pair */
    padding: 0 16px;
    z-index: 60;
    /* Flush with the navbar (flat grey field, no border/shadow) so it reads as
       part of the bar rather than a card floating above it. */
    background: #f1f1f1;
    border: 0;
    box-shadow: none;
  }
  .wag-search-cb:checked ~ .search { display: flex; }

  /* Hide the rest of the row while searching. */
  .navbar__inner:has(.wag-search-cb:checked) .logo { visibility: hidden; }
  .wag-search-cb:checked ~ .icon-btn--wish,
  .wag-search-cb:checked ~ .icon-btn--cart,
  .wag-search-cb:checked ~ .icon-btn:last-child { display: none; }
  /* The search icon becomes the active/close control while open. */
  .wag-search-cb:checked ~ .nav-search-toggle { color: var(--orange); }
}

/* Popular Problems on phones: the single-column grid track kept its content's
   min-content width (the product cards), which pushed the text past the screen
   edge and cut it off. minmax(0,…) + min-width:0 let it shrink and wrap. */
@media (max-width: 860px) {
  .probs__body { grid-template-columns: minmax(0, 1fr); }
  .probs__info, .probs__cards { min-width: 0; }
  .probs__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .probs__cards { grid-template-columns: minmax(0, 1fr); }
}

/* Popular Problems on phones: smaller section title, and fit all the tabs on
   one row by shrinking the type and spreading them across the width
   (space-between) so none get cut off. */
@media (max-width: 768px) {
  .probs__eyebrow { font-size: 13px; }
  .probs__title { font-size: 22px; }
  .probs__tabs {
    flex-wrap: nowrap;
    gap: 6px;
    justify-content: space-between;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .probs__tab {
    padding: 8px 0 12px;
    font-size: 12px;
    white-space: nowrap;
    flex: 0 0 auto;      /* never squash a tab; extras stay swipeable */
    scroll-snap-align: start;
  }
}
@media (max-width: 360px) {
  .probs__tab { font-size: 11px; }
}

/* Promo banners under Popular Problems kept their 48px desktop side padding on
   phones, so they looked inset with a big gap on both sides. Match the rest of
   the section's mobile padding. */
@media (max-width: 900px) {
  .probs__banners { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 480px) {
  .probs__banners { padding-left: 14px; padding-right: 14px; }
}

/* ============================================================
   Little Max Recommendation — mobile layout
   The puppy photo is absolutely positioned (500px, right edge) and
   overlapped the products on phones. Stack the section vertically:
   title + text, then the product carousel, then the puppy centred
   underneath — nothing overlaps and every product stays visible.
   ============================================================ */
@media (max-width: 767px) {
  .lmax { padding: 38px 0 28px; overflow: hidden; background: #fff; }
  /* Cream starts behind the heading and fades down to the card as a gradient,
     then to white. */
  .lmax__inner {
    background: linear-gradient(180deg, #fcebb4 0%, #fbe8ad 16%, #ffffff 46%);
    border-radius: 20px 20px 0 0;
    padding: 22px 14px 0;
  }
  .lmax__head {
    background: transparent;
    padding: 0 6px 16px;
    margin-bottom: 0;
  }
  .lmax__title { font-size: 22px; }
  .lmax__text  { font-size: 13px; line-height: 1.55; max-width: 100%; }
  .lmax__carousel { max-width: 100%; }
  .lmax__wave--bottom { display: none; }
  .lmax__pup {
    position: relative;
    right: auto;
    bottom: auto;
    display: block;
    z-index: 2;
    /* Full-width shape panel (user-uploaded) behind the puppy; object-fit keeps
       the dog centred and undistorted. */
    width: 100%;
    height: 300px;
    max-height: none;
    object-fit: contain;
    object-position: center bottom;
    background: url("../images/lmax-pup-shape.png") center bottom / 100% 100% no-repeat;
    padding: 34px 0 12px;
    box-sizing: border-box;
    margin: 20px 0 0;
  }

  /* One product card at a time, centred + swipeable, with dot pagination and
     the puppy centred below. */
  .lmax__carousel { position: relative; }
  .reco__row.lmax__row {
    scroll-snap-type: x mandatory;
    gap: 0;
    padding: 4px 0;
  }
  /* One full card per view — the next card sits fully off-screen (no peek). */
  .lmax__row .pcard { flex: 0 0 100%; scroll-snap-align: center; padding: 0 9%; box-sizing: border-box; }
  .lmax__row .pcard__img { height: 210px; }
  .lmax__row .pcard__name,
  .lmax__row .pcard__rating,
  .lmax__row .pcard__price { text-align: center; }
  .lmax__row .pcard__rating { justify-content: center; display: flex; align-items: center; gap: 6px; }
  /* arrows centred on the card image */
  .lmax-prev, .lmax-next { top: 128px; width: 34px; height: 34px; }
  .lmax-prev { left: 4px; }
  .lmax-next { right: 4px; }
}

/* Little Max dot pagination (mobile only). */
.lmax__dots { display: none; }
@media (max-width: 767px) {
  .lmax__dots { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 16px 0 0; }
  .lmax__dot {
    width: 7px; height: 7px; padding: 0;
    border: none; border-radius: 50%;
    background: #ddc9a3; cursor: pointer;
    transition: width 0.2s ease, background 0.2s ease;
  }
  .lmax__dot.is-active { background: var(--orange); width: 20px; border-radius: 4px; }
}

/* ============================================================
   "More Than Pet Parents" (Why Choose Us) — mobile layout
   The centred grid let the 772px text block / 900px category row
   keep their desktop widths, so the whole section overflowed and
   was cut off on the right. Use a simple stacked block layout that
   fits the screen, and shrink the value cards so they fit too.
   ============================================================ */
/* Why Choose Us — mobile app layout: centred content, a family + dog photo
   group on a cream panel, then a "Shop by Category" card. */
@media (max-width: 767px) {
  .why {
    display: flex;
    flex-direction: column;
    padding: 32px 16px 34px;
    background: #fff;
    position: relative;
    overflow: hidden;
  }
  .why__wave { display: none; }

  /* 1. Content — centred, first. */
  .why__content { order: 1; max-width: 100%; margin: 0; text-align: center; z-index: 2; }
  .why__eyebrow { font-size: 15px; }
  .why__title { font-size: 23px; margin-bottom: 12px; }
  .why__text { font-size: 13px; line-height: 1.7; }
  .why__cards { gap: 12px; flex-wrap: nowrap; justify-content: center; margin-top: 16px; }
  .vcard { width: 92px; height: 86px; }

  /* 2. Photos — mobile shows ONE photo that rotates 360° (flip) to reveal the
     other, so the two portraits (each of which happens to contain a dog) never
     appear together. The original side-by-side imgs are hidden here. */
  .why__photo { display: none !important; }
  .why .why__flip {
    order: 2;
    display: block;
    width: 340px;
    max-width: 88%;
    height: 340px;
    margin: -24px auto -54px;
    position: relative;
    z-index: 2;
    overflow: hidden;   /* mask — only the current photo shows */
  }
  .why__flip-inner {
    display: flex;
    width: 300%;        /* three slides (2 photos + a duplicate of the first) */
    height: 100%;
    animation: whySlide 10.5s infinite cubic-bezier(0.16, 1, 0.3, 1);
  }
  .why__flip-face {
    flex: 0 0 33.3333%;
    width: 33.3333%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
  }
  /* organic yellow blob (theme-hosted so it survives Media Library deletion),
     with paw prints baked into the SVG so they always land on the shape. */
  .why::before {
    content: "";
    position: absolute;
    left: -20px; right: -20px;
    height: 248px;
    top: 61%;
    background: url("../images/why-photo-blob.svg") center / 100% 100% no-repeat;
    z-index: 0;
  }

  /* 3. Shop by Category — white card overlapping the bottom of the cream panel. */
  .why__cats {
    order: 3;
    max-width: 100%;
    background: #fff;
    border: 1px solid #f1ece2;
    border-radius: 20px;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.10);
    padding: 16px 8px 14px;
    margin-top: -5px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    z-index: 3;
  }
  .why__cats::before {
    content: "Shop by Category";
    order: -1;
    width: 100%;
    text-align: center;
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--ink);
    margin-bottom: 12px;
  }
  /* orange round arrows — compact so 4 tiles keep their room */
  .why__cats .whycat-prev, .why__cats .whycat-next {
    background: var(--orange);
    color: #fff;
    width: 22px; height: 22px;
    min-width: 22px;
    font-size: 11px;
    flex: 0 0 22px;
  }
  .why__cats .whycat-prev { margin-right: 1px; }
  .why__cats .whycat-next { margin-left: 1px; }
  .why__cats .whycat-prev:hover, .why__cats .whycat-next:hover { background: #d94e1a; }
  /* exactly 4 category tiles visible; the rest scroll.
     flex:1 1 0 + min-width:0 makes the list fill the space between the two
     arrows (no leftover side gaps) and still shrink so it scrolls instead of
     pushing the next arrow off-screen. */
  .why__cats { justify-content: flex-start; }
  .why__cats .why__cat-list { gap: 9px; justify-content: flex-start; scroll-snap-type: x mandatory; flex: 1 1 0; min-width: 0; }
  .why__cats .catx {
    flex: 0 0 calc((100% - 33px) / 4);
    width: auto;
    padding: 7px 5px 6px;
    gap: 6px;
    scroll-snap-align: start;
  }
  .why__cats .catx__img { height: 52px; border-radius: 9px; }
  .why__cats .catx__name { font-size: 11px; }
  /* dot pagination below the category cards */
  .why__cats .whycat__dots {
    order: 4;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
  }
  .whycat__dot {
    width: 7px; height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #e2ddd2;
    cursor: pointer;
    transition: width 0.2s, background 0.2s;
  }
  .whycat__dot.is-active {
    background: var(--orange);
    width: 20px;
    border-radius: 4px;
  }
}

/* Category dots + the rotating photo are mobile-only affordances. */
.whycat__dots { display: none; }
.why__flip { display: none; }

/* Wider phones / small tablets: the Shop-by-Category card is roomy enough to
   show 6 tiles at once (Beds…Toys) instead of 4. */
@media (min-width: 620px) and (max-width: 767px) {
  .why__cats .why__cat-list { gap: 10px; }
  .why__cats .catx { flex: 0 0 calc((100% - 50px) / 6); }
  .why__cats .catx__img { height: 58px; }
  .why__cats .catx__name { font-size: 12px; }
}

/* Horizontal auto-slide between the two "Why" portraits (mobile), in the style
   of kef.co.in's mission-carousel: each photo holds, then slides smoothly to
   the next. The track carries [A][B][A-dup]; landing on the duplicate lets the
   loop reset to the start invisibly for a seamless one-way slide. */
@keyframes whySlide {
  0%,   28%  { transform: translateX(0); }
  36%,  63%  { transform: translateX(-33.3333%); }
  71%,  97%  { transform: translateX(-66.6666%); }
  100%       { transform: translateX(-66.6666%); }
}

/* Featured Product on phones: 2 cards per row (2 × 2), shorter card box, and a
   smaller section title. */
@media (max-width: 768px) {
  .feat__eyebrow { font-size: 13px; }
  .feat__title { font-size: 22px; }
  .feat__row { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .feat__row .fcard__box { height: 172px; }
  .feat__row .fcard:nth-child(n+5) { display: none; }  /* show 4 (2×2) on phones */
}
@media (max-width: 380px) {
  .feat__row { gap: 10px; }
}

/* Newest Product: shrink the oversized section title on phones (match Featured). */
@media (max-width: 768px) {
  .newest__eyebrow { font-size: 13px; }
  .newest__title { font-size: 22px; }
}

/* Wishlist heart on phones: nudge it a bit higher and closer to the right edge. */
@media (max-width: 768px) {
  .fcard__fav { top: 6px; right: 6px; }
}

/* Testimonials (stories) on phones: the 3 fixed-width 108px photo thumbnails
   forced the review card wider than the screen, so the title/text were cut off
   on the right. Make the thumbnails flexible and tighten padding so the whole
   card fits the viewport and the text wraps. */
@media (max-width: 768px) {
  .review__body { padding: 22px 18px 20px; height: auto; }
  .review__thumbs { gap: 8px; }
  .review__thumb { flex: 1 1 0; min-width: 0; width: auto; height: 76px; }
  .review__title { font-size: 16px; }
}

/* Pet Solution Finder on phones: the 32px title was still oversized/overflowing.
   Bring it down to a comfortable mobile size. */
@media (max-width: 768px) {
  .finder__eyebrow { font-size: 13px; }
  .finder__title { font-size: 24px; margin-bottom: 14px; }
}

/* Testimonials carousel: it has a fixed 720px base width (fine on desktop), but
   the unified-width block changed its max-width from 100% to 1600px, so on
   phones it stayed 720px wide and the review card overflowed / got cut off.
   Cap it back to the viewport on small screens. */
@media (max-width: 768px) {
  .stories__carousel { width: 100%; max-width: 100%; }
}

/* Testimonials card polish on phones — closer to the desktop proportions:
   a touch more padding and slightly taller review photos. */
@media (max-width: 768px) {
  .review__body { padding: 24px 22px 22px; }
  .review__thumbs { gap: 8px; }
  .review__thumb { height: 84px; }
}

/* ============================================================
   Testimonials card — consolidated mobile fit
   The white torn-paper backdrop is inset 26px, narrower than the
   content, so text/photos/author spilled past it. Widen the paper
   (small inset), keep the content padded inside it, and make sure
   the carousel + thumbnails stay within the viewport.
   ============================================================ */
@media (max-width: 768px) {
  .stories { padding-left: 14px; padding-right: 14px; }
  .stories__carousel { width: 100%; max-width: 100%; }
  .stories__track { width: 100%; }
  .review { min-width: 0; }
  .review__paper { inset: 10px 6px 14px; }
  .review__body { padding: 22px 18px 20px; height: auto; }
  .review__thumbs { gap: 6px; }
  .review__thumb { flex: 1 1 0; min-width: 0; width: auto; height: 76px; }
}

/* Testimonials — make the section shorter on phones and stop the sideways
   scroll. The prev/next arrows sit 28px OUTSIDE the carousel, so on mobile the
   right one pushed past the screen edge (horizontal scroll). Hide them (the
   reviews swipe) and shrink the tall dog image so the section isn't so big. */
@media (max-width: 768px) {
  .stories__nav { display: none; }
  .stories__dog img { height: 210px; margin-bottom: -54px; }
  .stories { padding-top: 22px; }
  /* Raise the wavy blue panel up to the dog so the full-width blue reaches the
     dog's body — the sides beside the (centred) dog are blue, not white.
     Extra specificity so these beat the 601–992px tablet block (which also
     matches at 768px and otherwise leaves a white line between wave + panel). */
  .stories .stories__wave { top: 128px; }
  /* Panel top sits above the shortest wave bottom (the wave image gets shorter
     as the screen narrows) so the blue always overlaps the wave — no white line
     between them below ~420px. */
  .stories.stories::before { top: 144px; }
}

/* Footer on phones: brand/newsletter spans the full width, then the four link
   columns sit two-per-row — QUICK LINKS | SHOP CATEGORIES, then CUSTOMER
   SUPPORT | CONTACT US. */
@media (max-width: 600px) {
  .footer__main { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
  .footer__brand, .footer__col { min-width: 0; }
  .footer__brand { grid-column: 1 / -1; } /* full-width row above the 2x2 links */
  .footer__col { word-break: break-word; }
  .footer__news { width: 100%; max-width: 100%; }
}

/* Footer on phones: centre the logo (handles both a static <img> and a
   WordPress custom logo) plus the "Let's keep in touch" + social row. */
@media (max-width: 600px) {
  .footer__brand { text-align: center; }
  .footer__logo,
  .footer__logo .custom-logo-link { display: block; }
  .footer__logo img,
  .footer__logo .custom-logo { display: block; margin-left: auto; margin-right: auto; }
  .footer__sub { text-align: center; }
  .footer__keep { text-align: center; }
  .footer__social { justify-content: center; }
}

/* Footer bottom bar on small phones: stack + centre (no room for one line). */
@media (max-width: 880px) {
  .footer__bar__inner {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
    padding: 16px 20px;
  }
  .footer__bar-div { display: none; }
  .footer__pay { flex-wrap: wrap; justify-content: center; }
  .footer__credit { margin-left: 0; }
}
/* Tablet (~992): keep the copyright + payments (left) and credit (right) on ONE
   line by trimming padding / gaps / type so it all fits. */
@media (min-width: 881px) and (max-width: 992px) {
  .footer__bar__inner { flex-wrap: nowrap; padding: 8px 20px; gap: 14px; }
  .footer__copy { font-size: 12.5px; white-space: nowrap; }
  .footer__pay { flex-wrap: nowrap; gap: 8px; }
  .footer__credit { font-size: 12px; white-space: nowrap; }
}

/* Footer main + feature badges between mobile and desktop: the 5 columns were
   cramped (titles wrapped, Contact cut) and the 5 fixed-200px badges overflowed.
   Trim gaps / type and let both fit the width — same 5-across desktop layout. */
@media (min-width: 601px) and (max-width: 992px) {
  .footer__main { padding: 40px 22px 26px; gap: 16px; }
  .footer__title { font-size: 12.5px; white-space: nowrap; margin-bottom: 14px; }
  .footer__links a { font-size: 12.5px; }
  .footer__links li { margin-bottom: 10px; }
  .footer__contact { gap: 12px; }
  .footer__contact li { font-size: 12.5px; }
  .footer__features {
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    padding: 10px 22px 26px;
    max-width: 100%;
  }
  .ffeat { height: 58px; font-size: 11.5px; gap: 6px; padding: 0 8px; }

  /* Community Stories: the wave image is shorter at this width, leaving a white
     gap between it and the light-blue panel (which started at a fixed 290px).
     Raise the panel up under the wave so they connect — no white line. */
  .stories::before { top: 220px; }
}

/* ============================================================
   Kill stray horizontal scroll on mobile. body already has
   overflow-x:hidden, but because body is position:static it is NOT the
   containing block for absolutely-positioned descendants that have no
   positioned ancestor — so those escape body's clip and widen the page.
   Making body position:relative lets its overflow-x:hidden clip them.
   The section clips catch anything inside a positioned section too. Inner
   carousels keep their own overflow-x:auto (they're child elements).
   ============================================================ */
body { position: relative; }
/* Global: no homepage section may widen the page — kills horizontal scroll at
   EVERY width (overflow-x:clip only affects the x-axis, so vertical decorative
   bleed is untouched). */
.home,
.home > section { overflow-x: clip; }
@media (max-width: 768px) {
  html, body { overflow-x: clip; }
}

/* Little Max — apply the compact "3 cards + sized puppy" layout across the whole
   tablet/laptop gap (769–1300). Above 992 the desktop rules otherwise gave a
   500px puppy that swallowed the cards. */
@media (min-width: 768px) and (max-width: 1300px) {
  .lmax { padding: 50px 0 90px; }
  .lmax__row .pcard { flex: 0 0 146px; scroll-snap-align: start; }
  .reco__row.lmax__row { gap: 14px; scroll-snap-type: x mandatory; }
  .lmax__row .pcard__img { height: 130px; }
  .lmax__row .pcard__name { font-size: 12.5px; }
  .lmax__row .pcard__rating { font-size: 11px; }
  .lmax__row .pcard__rating .stars { font-size: 10px; padding: 1px 5px; margin-right: 5px; }
  .lmax__row .pcard__price { font-size: 11.5px; }
  .lmax__row .pcard__price .now { font-size: 15px; }
  .lmax__row .pcard__price .was { font-size: 11.5px; }
  .lmax__carousel { max-width: 466px; margin: 0; }
  .lmax-prev, .lmax-next { top: 80px; }
  .lmax__pup {
    position: absolute;
    right: 45px !important;
    bottom: 51px;
    height: 30vw;
    max-height: 420px;
    width: auto;
    z-index: 3;
    display: block;
  }
}
/* 993–1099px: the prev/next arrows sit 18px inside the carousel edges and were
   covering the 1st and 3rd cards. Widen the carousel and inset the scroll row
   so all three cards sit clear of the arrows. */
@media (min-width: 993px) and (max-width: 1099px) {
  .lmax__carousel { max-width: 538px; }
  .reco__row.lmax__row { padding: 4px 36px; }
}

/* Wider laptops: show 4 cards so the row fills the space beside the puppy
   instead of leaving a big gap. */
@media (min-width: 1100px) and (max-width: 1300px) {
  .lmax__carousel { max-width: 728px; }
}

/* Why Choose Us — narrower desktops (993–1300px). At these widths the big
   flanking photos sat ON TOP of the centred paragraph. Shrink them and drop
   them to the bottom corners so they frame the category strip below the text
   (not the paragraph), and size the strip to show exactly 6 whole tiles. */
@media (min-width: 1161px) and (max-width: 1300px) {
  .why__photo { bottom: 0; }
  .why__photo--left  { width: 240px; left: 0;  bottom: 0; }
  .why__photo--right { width: 210px; right: 0; bottom: 0; }
  .why__content { max-width: 620px; }
  .why__cats { max-width: 680px; }
  .why__cat-list { justify-content: flex-start; gap: 10px; }
  .why__cat-list .catx { flex: 0 0 calc((100% - 50px) / 6); width: auto; }
}
/* Desktop (>1300px): the base category strip left a partial 7th tile peeking
   before the next arrow. Constrain the list to exactly 6 whole tiles. */
@media (min-width: 1301px) {
  .why__cat-list { justify-content: flex-start; min-width: 0; }
  .why__cat-list .catx { flex: 0 0 calc((100% - 60px) / 6); width: auto; }
}
/* 993–1160px: the corner photos + 6-tile strip compete for the same bottom
   corners; shrink both a touch so the photos clear the strip's end cards/arrows
   (no overlap) while staying visible. */
@media (min-width: 993px) and (max-width: 1160px) {
  .why__photo { bottom: 0; }
  .why__photo--left  { width: 35vw; left: 0;  bottom: 0; }
  .why__photo--right { width: 30vw; right: 0; bottom: 0; }
  .why__content { max-width: 560px; }
  .why__cats { max-width: 600px; }
  .why__cat-list { justify-content: flex-start; gap: 8px; min-width: 0; }
  .why__cat-list .catx { flex: 0 0 calc((100% - 32px) / 5); width: auto; }
  .why__cats .catx__img { height: 56px; }
  .why__cats .catx__name { font-size: 12px; }
}

/* Footer "Contact Us" column was clipped off the right edge at 861–992px: the
   base 5-column grid stays here while `.footer__news` is pinned to 326px, so the
   tracks can't shrink and the last column overflows. Flow the footer into 3
   columns and un-pin the newsletter so everything fits. */
@media (min-width: 861px) and (max-width: 992px) {
  .footer__main { grid-template-columns: repeat(3, 1fr); }
  .footer__news { width: 100%; max-width: 100%; }
}

/* Footer feature badges: the base `repeat(5, 200px)` (=1080px) overflows and is
   clipped on both edges between 993px and ~1127px. Make the 5 columns fluid in
   that band so they fit; ≥1128px keeps the fixed-width desktop look. */
@media (min-width: 993px) and (max-width: 1127px) {
  .footer__features { grid-template-columns: repeat(5, 1fr); }
  .ffeat { font-size: 12.5px; padding: 0 8px; gap: 6px; }
}

/* Community Stories: above 992px neither the mobile nor tablet stories rule
   applies, so the light-blue panel reverts to its base top:290px — but the wavy
   wave image (top:210) is short at 993–1100px and ends ~287px, leaving a white
   line between the wave and the panel (visible e.g. on a landscape 1024 tablet).
   Raise the panel under the wave (like the tablet block) so they connect. */
@media (min-width: 993px) and (max-width: 1100px) {
  .stories::before { top: 220px; }
}

/* Explore reels: the base .vvideo is a fixed 320px, so on laptops the 3rd tile
   was cut off at the right edge. Size them fluidly to show exactly 3 whole
   videos (the arrows page through the rest). */
@media (min-width: 993px) and (max-width: 1200px) {
  .explore__row .vvideo {
    flex: 0 0 calc((100% - 40px) / 3);
    max-width: none;
    height: auto;
    aspect-ratio: 320 / 450;
  }
}

/* Why Choose Us — fix ONLY the 769–992px range (tablet ~992 width). The flanking
   pet-parent photos sat over the paragraph text here; shrink them and anchor to
   the bottom corners so they frame the lower cards / category row and leave the
   text clear. Sizes ABOVE 992 (993px and up) are deliberately untouched. */
@media (min-width: 768px) and (max-width: 992px) {
  /* Bigger flanking photos. (Un-hide them — styles.css hides .why__photo below
     860px; here we want the desktop-style side photos shown.) */
  .why__photo { display: block; bottom: 0; height: auto; }
  .why__photo--left  { width: 33.5vw; max-width: 342px; left: 0; right: auto; }
  .why__photo--right { width: 28.8vw; max-width: 324px; right: 0; left: auto; }

  /* Narrower + smaller paragraph so it reads as ~6 lines and frees room for the
     photos. */
  .why__content { max-width: 51vw; }
  .why__text { font-size: 12px; line-height: 1.7; margin-bottom: 14px; }

  /* Smaller Love / Learning / Loyalty icon cards. */
  .why__cards { gap: 10px; margin-top: 14px; }
  .vcard { width: 80px; height: 72px; gap: 5px; }
  .vcard__ic { font-size: 26px; }
  .vcard__png { width: 32px; height: 30px; }
  .vcard__label { font-size: 12px; }

  /* Category strip: exactly 6 whole tiles (Beds…Toys); the arrows page the rest. */
  .why__cats { max-width: 680px; }
  .why__cat-list { justify-content: flex-start; gap: 10px; scroll-snap-type: x mandatory; }
  .why__cat-list .catx { flex: 0 0 calc((100% - 50px) / 6); width: auto; padding: 8px 7px; scroll-snap-align: start; }
  .why__cats .catx__img { height: 60px; }
  .why__cats .catx__name { font-size: 12px; }

  /* Featured Product: show as a horizontal-scroll carousel (4 cards) just like
     the Newest Product section, instead of a cramped 5-column grid. */
  .feat__row {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    gap: 20px;
  }
  .feat__row::-webkit-scrollbar { display: none; }
  .feat__row .fcard { flex: 0 0 calc((100% - 60px) / 4); }

  /* Treats ("AM to PM") cards: smaller so ~3.5 show (like the wider view). */
  .treat__row { gap: 16px; }
  .treat__row .tcard { flex: 0 0 250px; }
  .treat__row .tcard__img { height: 186px; }
  .treat__row .tcard__name { font-size: 14px; }
  .treat__row .tcard__price { font-size: 13px; }

  /* Explore ("The World Of Wagtales") reels: show exactly 3 videos in view. */
  .explore__row .vvideo {
    flex: 0 0 calc((100% - 40px) / 3);
    max-width: none;
    height: auto;
    aspect-ratio: 320 / 450;
  }
}



/* Topbar on one line (from 861px up, where the utility links show). Force
   nowrap and trim padding / gaps / type so the offer + links (incl. the social
   icons) all sit on a single row without being cut off. */
@media (min-width: 991px) and (max-width: 1200px) {
  .topbar__inner { flex-wrap: nowrap; padding-left: 12px; padding-right: 12px; }
  .topbar__offer { white-space: nowrap; flex-shrink: 0; font-size: 11px; }
  .topbar__right { flex-wrap: nowrap; gap: 8px; font-size: 11px; }
  .topbar__right > * { white-space: nowrap; }
  .topbar__location { padding-left: 8px; padding-right: 8px; font-size: 11px; }
}
@media (min-width: 1201px) {
  .topbar__inner { flex-wrap: nowrap; }
  .topbar__offer { white-space: nowrap; flex-shrink: 0; }
  .topbar__right { flex-wrap: nowrap; }
  .topbar__right > * { white-space: nowrap; }
}

/* ============================================================
   APP-STYLE BOTTOM NAVIGATION (phones ≤767px)
   ============================================================ */
.app-bottomnav { display: none; }
@media (max-width: 767px) {
  .app-bottomnav {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1400;
    justify-content: space-around;
    align-items: stretch;
    background: #fff;
    border-top: 1px solid #f0e2cf;
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.07);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .app-bottomnav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 3px 2px;
    color: #9a9a9a;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
  }
  .app-bottomnav__item i { font-size: 19px; }
  .app-bottomnav__item.is-active { color: var(--orange); }
  .app-bottomnav__ic { position: relative; display: inline-flex; }
  .app-bottomnav__ic .wag-cart-count {
    position: absolute;
    top: -7px; right: -11px;
    min-width: 15px; height: 15px;
    padding: 0 3px;
    background: var(--orange);
    color: #fff;
    border-radius: 999px;
    font-size: 9px;
    line-height: 15px;
    text-align: center;
    font-weight: 700;
  }
  .app-bottomnav__ic .wag-cart-count.is-empty { display: none; }
  /* Keep page/footer content clear of the fixed bar. */
  body { padding-bottom: 60px; }
  /* Slide the bar away while the mega-menu or filter drawer is open. */
  body.nav-open .app-bottomnav,
  body.shop-filter-open .app-bottomnav { transform: translateY(120%); }
}

/* ============================================================
   PHONES (≤767px): trim the header icon cluster
   The app-style bottom bar already carries Wishlist, Cart and
   Account, so repeating them up in the header only crowded the
   row — and because the right column was far wider than the
   hamburger on the left, the centre grid track was pushed over
   and the logo never sat dead-centre. On phones the header keeps
   just hamburger + logo + search; the bottom bar does the rest.
   ============================================================ */
@media (max-width: 767px) {
  .navbar__right .icon-btn--wish,
  .navbar__right .icon-btn--cart,
  .navbar__right .icon-btn--account { display: none; }

  /* Now that both side tracks are narrow the logo is centred, so give it
     the full footprint it was designed for. (The 48px cap set in the
     ≤1023px block never actually applied — the base `.logo .custom-logo`
     rule further down this file overrides it at equal specificity.) */
  .logo__img,
  .logo .custom-logo,
  .logo img.custom-logo {
    height: auto;
    max-height: 64px;
    max-width: min(220px, 55vw);
  }

  /* The search overlay used to stop short of three icons; with one icon
     left it can run almost the full width of the row. */
  .navbar__right .search { right: 46px; }
}

/* The page-scroll lock that used to hold the page still behind the video
   lightbox is gone with the lightbox itself — reels now play in place, so
   there is no longer an overlay for the page to scroll behind. */