/* ============================================================
   PawPal WooCommerce styling - aligned with front-page.php
   Design tokens: warm cream bg, terracotta accent, sage green,
   Fraunces display + Nunito Sans body, pill buttons, 18px radius
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Nunito+Sans:opsz,wght@6..12,400;6..12,600;6..12,700;6..12,800&display=swap');

body.woocommerce-page,
body.woocommerce-checkout {
  --bg: oklch(97.5% 0.012 85);
  --surface: oklch(95.5% 0.018 85);
  --surface-2: oklch(92.5% 0.024 85);
  --surface-3: oklch(89% 0.03 85);
  --ink: oklch(30% 0.035 55);
  --ink-soft: oklch(44% 0.03 55);
  --ink-faint: oklch(56% 0.025 55);
  --line: oklch(88% 0.02 85);
  --accent: oklch(60% 0.17 40);
  --accent-deep: oklch(48% 0.15 40);
  --accent-soft: oklch(91% 0.05 40);
  --sage: oklch(62% 0.09 150);
  --sage-deep: oklch(45% 0.08 150);
  --sage-soft: oklch(93% 0.03 150);
  --amber: oklch(78% 0.12 80);
  --amber-soft: oklch(95% 0.04 80);
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  --radius: 18px;
  --radius-sm: 10px;
  --shadow-md: 0 4px 10px -2px oklch(20% 0.02 55 / 0.08), 0 2px 4px -2px oklch(20% 0.02 55 / 0.05);

  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
}

/* ---- Typography ---- */
body.woocommerce-page h1,
body.woocommerce-page h2,
body.woocommerce-page h3,
body.woocommerce-page h4,
body.woocommerce-checkout h1,
body.woocommerce-checkout h2,
body.woocommerce-checkout h3,
body.woocommerce-checkout h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* ---- Form fields ---- */
body.woocommerce-page form .form-row input.input-text,
body.woocommerce-page form .form-row textarea,
body.woocommerce-page form .form-row select,
body.woocommerce-checkout form .form-row input.input-text,
body.woocommerce-checkout form .form-row textarea,
body.woocommerce-checkout form .form-row select,
body.woocommerce-page .select2-container .select2-selection--single {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--font-body);
  padding: 0.7rem 0.9rem;
  min-height: 46px;
  box-shadow: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
body.woocommerce-page form .form-row input.input-text:focus,
body.woocommerce-page form .form-row textarea:focus,
body.woocommerce-page form .form-row select:focus,
body.woocommerce-checkout form .form-row input.input-text:focus,
body.woocommerce-checkout form .form-row textarea:focus,
body.woocommerce-checkout form .form-row select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}
body.woocommerce-page form .form-row label,
body.woocommerce-checkout form .form-row label {
  color: var(--ink-soft);
  font-weight: 700;
  font-size: 0.9rem;
}

/* ---- Buttons ---- */
body.woocommerce-page .button,
body.woocommerce-page button.button,
body.woocommerce-checkout .button,
body.woocommerce-checkout button.button {
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 800;
  letter-spacing: 0.01em;
  min-height: 48px;
  padding: 0.85rem 1.6rem;
  transition: transform 150ms cubic-bezier(0.25,1,0.5,1), box-shadow 150ms, background 150ms;
}
body.woocommerce-page button.button.alt,
body.woocommerce-page .button.alt,
body.woocommerce-checkout button.button.alt,
body.woocommerce-checkout .button.alt,
body.woocommerce-page #place_order,
body.woocommerce-checkout #place_order {
  background: var(--accent);
  color: oklch(98% 0.01 40);
  box-shadow: 0 6px 16px -6px oklch(48% 0.15 40 / 0.5);
}
body.woocommerce-page button.button.alt:hover,
body.woocommerce-page .button.alt:hover,
body.woocommerce-checkout button.button.alt:hover,
body.woocommerce-checkout .button.alt:hover,
body.woocommerce-page #place_order:hover,
body.woocommerce-checkout #place_order:hover {
  background: var(--accent-deep);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -8px oklch(48% 0.15 40 / 0.55);
}
body.woocommerce-page button.button:not(.alt),
body.woocommerce-checkout button.button:not(.alt) {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px oklch(20% 0.02 55 / 0.06);
}
body.woocommerce-page button.button:not(.alt):hover,
body.woocommerce-checkout button.button:not(.alt):hover {
  background: var(--surface-2);
  transform: translateY(-2px);
}

/* ---- Payment section ---- */
body.woocommerce-checkout #payment,
body.woocommerce-page #payment {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
body.woocommerce-checkout #payment ul.payment_methods,
body.woocommerce-page #payment ul.payment_methods {
  border-bottom: 1px solid var(--line);
  padding: 1.25rem;
}
body.woocommerce-checkout #payment div.payment_box,
body.woocommerce-page #payment div.payment_box {
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
}
body.woocommerce-checkout #payment div.payment_box::before,
body.woocommerce-page #payment div.payment_box::before {
  border-bottom-color: var(--surface-2);
}
body.woocommerce-checkout #payment div.form-row,
body.woocommerce-page #payment div.form-row {
  padding: 1.25rem;
}

/* ---- Order review table ---- */
body.woocommerce-checkout table.shop_table,
body.woocommerce-page table.shop_table {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
body.woocommerce-checkout table.shop_table th,
body.woocommerce-checkout table.shop_table td,
body.woocommerce-page table.shop_table th,
body.woocommerce-page table.shop_table td {
  border-color: var(--line);
  color: var(--ink);
}
body.woocommerce-checkout table.shop_table thead th,
body.woocommerce-page table.shop_table thead th {
  background: var(--surface-2);
  font-family: var(--font-display);
  font-weight: 600;
}

/* ---- Notices ---- */
body.woocommerce-page .woocommerce-message,
body.woocommerce-page .woocommerce-info,
body.woocommerce-page .woocommerce-error,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-error {
  background: var(--surface);
  border-radius: var(--radius-sm);
  border-top-color: var(--accent);
  color: var(--ink);
}
body.woocommerce-page .woocommerce-message::before,
body.woocommerce-page .woocommerce-info::before,
body.woocommerce-page .woocommerce-error::before {
  color: var(--accent);
}

/* ---- Cart page ---- */
body.woocommerce-page table.cart td.actions .coupon .input-text {
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  min-height: 46px;
}
body.woocommerce-page .cart_totals {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  padding: 1.5rem;
}

/* ---- My account ---- */
body.woocommerce-page .woocommerce-MyAccount-navigation ul li a {
  color: var(--ink-soft);
  border-radius: var(--radius-sm);
}
body.woocommerce-page .woocommerce-MyAccount-navigation ul li.is-active a {
  background: var(--accent-soft);
  color: var(--accent-deep);
}
body.woocommerce-page .woocommerce-MyAccount-content {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  padding: 1.5rem;
}

/* ---- Shop page ---- */
body.woocommerce-page ul.products li.product .button {
  background: var(--accent);
  color: oklch(98% 0.01 40);
  border-radius: 999px;
}
body.woocommerce-page ul.products li.product .button:hover {
  background: var(--accent-deep);
}
body.woocommerce-page .woocommerce-pagination .page-numbers li > .page-numbers.current {
  background: var(--accent);
  color: oklch(98% 0.01 40);
  border-radius: 999px;
}


/* ============================================================
   Product page - Add to cart region (aligned with front-page.php)
   ============================================================ */
body.woocommerce-page div.product form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  margin: 1.4rem 0 1.1rem;
}

/* ---- Quantity control (ux-quantity) ---- */
body.woocommerce-page div.product form.cart .quantity,
body.woocommerce-page div.product form.cart .ux-quantity {
  display: inline-flex;
  align-items: center;
  height: 52px;
  margin: 0;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  overflow: hidden;
  box-shadow: 0 1px 2px oklch(20% 0.02 55 / 0.05);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
body.woocommerce-page div.product form.cart .ux-quantity:hover,
body.woocommerce-page div.product form.cart .quantity:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
body.woocommerce-page div.product form.cart .ux-quantity__button,
body.woocommerce-page div.product form.cart .quantity .minus,
body.woocommerce-page div.product form.cart .quantity .plus {
  width: 44px;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
body.woocommerce-page div.product form.cart .ux-quantity__button:hover,
body.woocommerce-page div.product form.cart .quantity .minus:hover,
body.woocommerce-page div.product form.cart .quantity .plus:hover {
  background: var(--accent-soft);
  color: var(--accent-deep);
}
body.woocommerce-page div.product form.cart .ux-quantity__button:active,
body.woocommerce-page div.product form.cart .quantity .minus:active,
body.woocommerce-page div.product form.cart .quantity .plus:active {
  background: var(--accent);
  color: oklch(98% 0.01 40);
}
body.woocommerce-page div.product form.cart .quantity input.qty,
body.woocommerce-page div.product form.cart .ux-quantity input.qty {
  width: 52px;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
  text-align: center;
  line-height: 1;
  box-shadow: none;
  -moz-appearance: textfield;
  appearance: textfield;
}
body.woocommerce-page div.product form.cart .quantity input.qty::-webkit-outer-spin-button,
body.woocommerce-page div.product form.cart .quantity input.qty::-webkit-inner-spin-button,
body.woocommerce-page div.product form.cart .ux-quantity input.qty::-webkit-outer-spin-button,
body.woocommerce-page div.product form.cart .ux-quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
body.woocommerce-page div.product form.cart .quantity input.qty:focus,
body.woocommerce-page div.product form.cart .ux-quantity input.qty:focus {
  outline: none;
  box-shadow: none;
}

/* ---- Add to cart button ---- */
body.woocommerce-page div.product form.cart .single_add_to_cart_button {
  height: 52px;
  min-height: 52px;
  margin: 0;
  padding: 0 2.1rem;
  border-radius: 999px;
  background: var(--accent);
  color: oklch(98% 0.01 40);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px -6px oklch(48% 0.15 40 / 0.5);
  transition: transform 150ms cubic-bezier(0.25,1,0.5,1), background 150ms ease, box-shadow 150ms ease;
}
body.woocommerce-page div.product form.cart .single_add_to_cart_button:hover {
  background: var(--accent-deep);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -8px oklch(48% 0.15 40 / 0.55);
}
body.woocommerce-page div.product form.cart .single_add_to_cart_button:active {
  transform: translateY(0);
}
body.woocommerce-page div.product form.cart .single_add_to_cart_button.loading {
  opacity: 0.85;
}

/* ---- Stock status ---- */
body.woocommerce-page div.product .stock.in-stock {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.2rem 0 1.1rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: var(--sage-soft);
  color: var(--sage-deep);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
body.woocommerce-page div.product .stock.in-stock::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sage);
  flex: 0 0 auto;
}


/* ---- Content area containers: cream background (override Flatsome white) ---- */
body.woocommerce-page #main,
body.woocommerce-page #wrapper,
body.woocommerce-page .page-wrapper,
body.woocommerce-page .cart-container,
body.woocommerce-page .shop-container,
body.woocommerce-page .category-page-row {
  background-color: var(--bg);
}


/* ============================================================
   Product category / archive pages: align with homepage cards
   ============================================================ */
/* Product card: cream background, rounded corners, soft shadow */
body.woocommerce-page.tax-product_cat .products .product-small .box,
body.woocommerce-page.tax-product_cat .products .product-small .box,
body.woocommerce-page.archive .products .product-small .box {
  background: oklch(95.5% 0.018 85);
  border-radius: 18px;
  box-shadow: 0 8px 24px -12px oklch(30% 0.035 55 / 0.18);
  padding: 0.75rem;
  transition: transform 200ms cubic-bezier(0.25,1,0.5,1), box-shadow 200ms ease;
}
body.woocommerce-page.tax-product_cat .products .product-small .box:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -14px oklch(30% 0.035 55 / 0.25);
}
body.woocommerce-page.tax-product_cat .products .product-small .box-image {
  border-radius: 14px;
  overflow: hidden;
}
/* Product title: dark brown Nunito Sans, no blue link */
body.woocommerce-page.tax-product_cat .products .product-small .product-title a {
  color: oklch(30% 0.035 55);
  font-family: "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
}
body.woocommerce-page.tax-product_cat .products .product-small .product-title a:hover {
  color: oklch(60% 0.17 40);
}
/* Price */
body.woocommerce-page.tax-product_cat .products .product-small .price {
  color: oklch(30% 0.035 55);
  font-family: "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1rem;
}
/* Category page title: Fraunces heading + cream background */
body.woocommerce-page.tax-product_cat .page-title.shop-page-title {
  background: var(--bg);
  border-bottom: 1px solid oklch(88% 0.02 85);
  padding: 2.5rem 0 1.5rem;
}
body.woocommerce-page.tax-product_cat .page-title.shop-page-title .page-title-inner h1 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: oklch(30% 0.035 55);
  margin: 0;
}
body.woocommerce-page.tax-product_cat .page-title.shop-page-title .breadcrumbs {
  font-family: "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: oklch(56% 0.025 55);
}
body.woocommerce-page.tax-product_cat .page-title.shop-page-title .breadcrumbs a {
  color: oklch(60% 0.17 40);
  text-decoration: none;
}
/* wc-backward button: accent pill */
body.woocommerce-page.tax-product_cat .wc-backward {
  border-radius: 999px;
  background: oklch(60% 0.17 40);
  color: oklch(98% 0.01 40);
  font-family: "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.7rem 1.6rem;
}
body.woocommerce-page.tax-product_cat .wc-backward:hover {
  background: oklch(52% 0.16 40);
  color: #fff;
}
/* Term description */
body.woocommerce-page.tax-product_cat .term-description {
  font-family: "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  color: oklch(44% 0.03 55);
}
/* Pagination */
body.woocommerce-page.tax-product_cat nav.woocommerce-pagination ul.page-numbers li span,
body.woocommerce-page.tax-product_cat nav.woocommerce-pagination ul.page-numbers li a {
  border-radius: 999px;
  font-family: "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  font-weight: 700;
}
body.woocommerce-page.tax-product_cat nav.woocommerce-pagination ul.page-numbers li span.current {
  background: oklch(60% 0.17 40);
  border-color: oklch(60% 0.17 40);
  color: #fff;
}
body.woocommerce-page.tax-product_cat nav.woocommerce-pagination ul.page-numbers li a:hover {
  background: oklch(92.5% 0.024 85);
}


/* Quick View button: accent pill (category pages) */
body.woocommerce-page.tax-product_cat .product-small .quick-view,
body.woocommerce-page.tax-product_cat .box .quick-view {
  background: oklch(60% 0.17 40) !important;
  color: oklch(98% 0.01 40) !important;
  border-radius: 999px !important;
  font-family: "Nunito Sans", "Segoe UI", system-ui, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  box-shadow: 0 6px 16px -6px oklch(48% 0.15 40 / 0.5) !important;
}
body.woocommerce-page.tax-product_cat .product-small .quick-view:hover,
body.woocommerce-page.tax-product_cat .box .quick-view:hover {
  background: oklch(52% 0.16 40) !important;
  color: #fff !important;
}
/* Product title font: Fraunces (match homepage) */
body.woocommerce-page.tax-product_cat .products .product-small .product-title a {
  font-family: "Fraunces", Georgia, serif !important;
}
/* Hide Flatsome breadcrumb title area on category pages */
body.woocommerce-page.tax-product_cat .page-title.shop-page-title {
  display: none !important;
}
/* Custom category title block */
.pawpal-category-title {
  background: oklch(97.5% 0.012 85);
  padding: 3rem 0 1.75rem;
  text-align: center;
}
.pawpal-category-title h1 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: oklch(30% 0.035 55);
  margin: 0;
}


/* ============================================================
   v1.0.3 layout polish (2026-08-18)
   ============================================================ */
/* 全站横向溢出保护 */
html, body{ overflow-x:hidden; }

/* Shop 页：隐藏 Flatsome 面包屑标题区（pawpal-category-title 接管） */
body.woocommerce-page.archive .page-title.shop-page-title,
body.woocommerce-page.post-type-archive-product .page-title.shop-page-title{
  display:none !important;
}

/* RETURN TO SHOP 蓝色按钮 -> 陶土橙 */
body.woocommerce-page a.wc-backward,
body.woocommerce-cart a.wc-backward{
  background:var(--accent) !important;
  color:oklch(98% 0.01 40) !important;
  border-radius:999px;
  font-weight:800;
  box-shadow:0 6px 16px -6px oklch(48% 0.15 40 / 0.5);
}
body.woocommerce-page a.wc-backward:hover,
body.woocommerce-cart a.wc-backward:hover{
  background:var(--accent-deep) !important;
  color:#fff !important;
  transform:translateY(-2px);
}

/* My Account 登录/注册表单卡片化 */
body.woocommerce-account form.login,
body.woocommerce-account form.register{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:2rem 2.25rem 1.75rem;
  box-shadow:var(--shadow-md);
  max-width:560px;
  margin-inline:auto;
}
body.woocommerce-account .woocommerce-LostPassword{
  text-align:center;
}

/* ===== v1.0.4 hide checkout coupon toggle & form ===== */
.woocommerce-form-coupon-toggle,
.woocommerce-form-coupon{ display:none !important; }

/* ===== v1.0.5 shop sidebar categories ===== */
#shop-sidebar .widget-title,
.widget-title.shop-sidebar{
  color: #b0541f;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
}
.pawpal-sidebar-cats{ list-style:none; margin:0; }
.pawpal-sidebar-cats li{ border-bottom:1px solid #e8dfd2; }
.pawpal-sidebar-cats li:last-child{ border-bottom:none; }
.pawpal-sidebar-cats a{
  display:flex; justify-content:space-between; align-items:center;
  padding:0.75rem 0.3rem;
  color:#5a4632; font-weight:600; font-size:0.95rem;
  text-decoration:none;
  transition:color 150ms ease, padding-left 150ms ease;
}
.pawpal-sidebar-cats a:hover{ color:#b0541f; padding-left:0.6rem; }
.pawpal-sidebar-cats a::after{ content:"\2192"; color:#d8b08c; font-size:0.9rem; }