/**
 * WooCommerce page styles
 * @package caysanvuon
 * @version 1.0.0
 */

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

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  padding: .875rem 1.25rem;
  border-radius: var(--radius-md);
  font-size: .9rem;
  font-weight: 500;
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin: 0 0 1rem;
  position: relative;
}
.woocommerce-message { background: #d1fae5; border: 1px solid #a7f3d0; color: #065f46; }
.woocommerce-info    { background: #dbeafe; border: 1px solid #93c5fd; color: #1e40af; }
.woocommerce-error   { background: #fee2e2; border: 1px solid #fca5a5; color: #991b1b; }

.woocommerce-message a.button,
.woocommerce-info a.button  { margin-left: auto; }

/* =====================================================
 * SHOP LAYOUT
 * ===================================================== */
.shop-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-8);
  align-items: start;
}

@media (max-width: 1024px) {
  .shop-layout { grid-template-columns: 1fr; }

  .shop-sidebar {
    position: fixed;
    top: 0; left: -300px;
    width: 280px; height: 100vh;
    overflow-y: auto;
    background: #fff;
    z-index: 9999;
    padding: 1.5rem;
    box-shadow: 4px 0 24px rgba(0,0,0,.15);
    transition: left .3s ease;
  }
  .shop-sidebar.sidebar-open { left: 0; }
}

/* Toolbar */
.shop-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .875rem 1.25rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: 1.5rem;
}

.shop-result-count { font-size: .875rem; color: var(--color-text-muted); flex: 1; }

.shop-sort select {
  padding: .4rem .875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: .875rem;
  background: #fff;
  color: var(--color-text);
  cursor: pointer;
}
.shop-sort select:focus { outline: none; border-color: var(--color-primary); }

/* View toggle buttons */
.shop-view-toggle { display: flex; gap: .25rem; }
.view-btn {
  width: 32px; height: 32px;
  border: 1px solid var(--color-border);
  background: #fff;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
  transition: all .2s;
}
.view-btn.active,
.view-btn:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* Products grid */
.products-grid {
  --cols: 4;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0,1fr));
  gap: 1.25rem;
}

@media (max-width: 1200px) { .products-grid { --cols: 3; } }
@media (max-width: 768px)  { .products-grid { --cols: 2; } }
@media (max-width: 480px)  { .products-grid { --cols: 2; } }

/* Force 2-col regardless of breakpoint */
.products-grid-2 { --cols: 2 !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; }

/* 4-col and 5-col collapse to 2 on mobile */
@media (max-width: 768px) {
  .products-grid-4,
  .products-grid-5 { --cols: 2 !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

/* =====================================================
 * WIDGET STYLES
 * ===================================================== */
.shop-sidebar .widget {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

.shop-sidebar .widget-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin: 0 0 1rem;
  padding-bottom: .625rem;
  border-bottom: 2px solid var(--color-accent);
}

.shop-sidebar .widget ul {
  list-style: none; margin: 0; padding: 0;
}
.shop-sidebar .widget ul li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .375rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size: .875rem;
}
.shop-sidebar .widget ul li:last-child { border-bottom: none; }
.shop-sidebar .widget ul li a {
  color: var(--color-text);
  text-decoration: none;
  transition: color .2s;
}
.shop-sidebar .widget ul li a:hover { color: var(--color-primary); }
.shop-sidebar .widget ul li .count {
  font-size: .75rem;
  color: #fff;
  background: var(--color-accent);
  border-radius: 999px;
  padding: .1rem .5rem;
  font-weight: 600;
}

/* Price filter */
.price-filter { display: flex; flex-direction: column; gap: .125rem; }

/* WC Price Slider widget */
.woocommerce-widget-layered-nav ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-widget-layered-nav ul li { padding: .3rem 0; font-size: .875rem; }
.woocommerce-widget-layered-nav ul li a { color: var(--color-text); text-decoration: none; }
.woocommerce-widget-layered-nav ul li a:hover { color: var(--color-primary); }

/* =====================================================
 * SINGLE PRODUCT LAYOUT
 * ===================================================== */
.single-product-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: start;
  margin-top: var(--space-8);
}

@media (max-width: 768px) {
  .single-product-layout { grid-template-columns: 1fr; }
}

/* Gallery */
.product-gallery { position: sticky; top: calc(var(--header-height) + 2rem); }

.gallery-main {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: #fff;
  margin-bottom: .75rem;
}

.gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .5rem;
}

.gallery-thumb {
  aspect-ratio: 1 / 1;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .2s;
}
.gallery-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.gallery-thumb.active,
.gallery-thumb:hover { border-color: var(--color-primary); }

/* Info column */
.product-info { padding-top: .5rem; }

/* Quantity control */
.qty-control {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.qty-btn {
  width: 42px; height: 48px;
  background: var(--color-surface);
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  transition: background .15s;
}
.qty-btn:hover { background: var(--color-accent-pale); color: var(--color-primary); }
.qty-input {
  width: 56px; height: 48px;
  border: none;
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  background: #fff;
}
.qty-input:focus { outline: none; background: #f0fdf4; }

/* Buttons */
.btn-add-cart {
  padding: 0 2rem;
  height: 48px;
  font-size: 1rem;
}
.btn-full { width: 100%; justify-content: center; }

/* =====================================================
 * PRODUCT TABS
 * ===================================================== */
.product-tabs {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-8);
}

.tab-buttons {
  display: flex;
  gap: .25rem;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.tab-btn {
  padding: .75rem 1.5rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}
.tab-btn.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}
.tab-btn:hover { color: var(--color-primary); }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* =====================================================
 * CART PAGE
 * ===================================================== */
.woocommerce-cart .woocommerce {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
}

.shop_table.cart {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
  margin-bottom: 2rem;
}
.shop_table.cart thead th {
  padding: .75rem 1rem;
  background: var(--color-accent-pale);
  border-bottom: 2px solid var(--color-accent);
  font-weight: 700;
  color: var(--color-primary-dark);
  text-align: left;
}
.shop_table.cart td {
  padding: 1rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.shop_table.cart .product-thumbnail img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.shop_table.cart .product-name a {
  color: var(--color-text);
  font-weight: 600;
  text-decoration: none;
}
.shop_table.cart .product-name a:hover { color: var(--color-primary); }
.shop_table.cart .product-remove a {
  display: inline-flex;
  width: 28px; height: 28px; border-radius: 50%;
  align-items: center; justify-content: center;
  background: #fee2e2; color: var(--color-sale);
  text-decoration: none; font-size: 1rem; font-weight: 700;
  transition: background .2s;
}
.shop_table.cart .product-remove a:hover { background: var(--color-sale); color: #fff; }

.cart-collaterals { max-width: 400px; margin-left: auto; }
.cart_totals h2 {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  color: var(--color-primary-dark);
}
.cart_totals table th,
.cart_totals table td {
  padding: .625rem 1rem;
  border-bottom: 1px solid var(--color-border);
  font-size: .9rem;
}
.cart_totals table .order-total th,
.cart_totals table .order-total td {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-primary);
}

.wc-proceed-to-checkout .checkout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1rem 2rem;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-lg);
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s;
  margin-top: 1rem;
  border: none; cursor: pointer;
}
.wc-proceed-to-checkout .checkout-button:hover { background: var(--color-primary-dark); }

/* =====================================================
 * CHECKOUT PAGE
 * ===================================================== */
.woocommerce-checkout .woocommerce {
  padding: var(--space-8) var(--space-4);
}

.woocommerce-checkout-review-order-table {
  width: 100%; border-collapse: collapse; font-size: .875rem;
}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  padding: .625rem 1rem; border-bottom: 1px solid var(--color-border);
}
.woocommerce-checkout-review-order-table tfoot .order-total td {
  font-weight: 700; font-size: 1.1rem; color: var(--color-primary);
}

.woocommerce form .form-row { margin-bottom: 1rem; }
.woocommerce form .form-row label {
  display: block; font-size: .875rem; font-weight: 600; margin-bottom: .35rem;
  color: var(--color-text);
}
.woocommerce form .form-row input[type="text"],
.woocommerce form .form-row input[type="email"],
.woocommerce form .form-row input[type="tel"],
.woocommerce form .form-row input[type="password"],
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
  width: 100%;
  padding: .625rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: .9rem;
  font-family: inherit;
  color: var(--color-text);
  background: #fff;
  transition: border-color .2s;
}
.woocommerce form .form-row input:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(45,106,79,.1);
}

#place_order {
  width: 100%;
  padding: 1rem 2rem;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-lg);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s;
  font-family: inherit;
}
#place_order:hover { background: var(--color-primary-dark); }

/* =====================================================
 * MY ACCOUNT PAGE
 * ===================================================== */
.woocommerce-account .woocommerce {
  padding: var(--space-8) var(--space-4);
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-8);
  align-items: start;
}

@media (max-width:768px) {
  .woocommerce-account .woocommerce { grid-template-columns: 1fr; }
}

.woocommerce-MyAccount-navigation ul {
  list-style: none; margin: 0; padding: 0;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.woocommerce-MyAccount-navigation ul li { border-bottom: 1px solid var(--color-border); }
.woocommerce-MyAccount-navigation ul li:last-child { border-bottom: none; }
.woocommerce-MyAccount-navigation ul li a {
  display: block; padding: .75rem 1.25rem;
  color: var(--color-text);
  text-decoration: none; font-size: .9rem;
  transition: all .2s;
}
.woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-MyAccount-navigation ul li.is-active a {
  background: var(--color-accent-pale);
  color: var(--color-primary);
  font-weight: 600;
}

/* Orders table */
.woocommerce-orders-table {
  width: 100%; border-collapse: collapse; font-size: .875rem;
}
.woocommerce-orders-table th {
  padding: .625rem 1rem;
  background: var(--color-accent-pale);
  border-bottom: 2px solid var(--color-accent);
  font-weight: 700;
  text-align: left;
  color: var(--color-primary-dark);
}
.woocommerce-orders-table td {
  padding: .625rem 1rem; border-bottom: 1px solid var(--color-border);
}
.woocommerce-orders-table__cell-order-actions a {
  padding: .35rem .8rem;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: .8rem;
  text-decoration: none;
}

/* =====================================================
 * ORDER STATUS LABELS
 * ===================================================== */
.woocommerce-order-status {
  display: inline-block;
  padding: .2rem .75rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
}
.woocommerce-order-status.status-pending    { background:#fef9c3; color:#854d0e; }
.woocommerce-order-status.status-processing { background:#dbeafe; color:#1e40af; }
.woocommerce-order-status.status-on-hold    { background:#fee2e2; color:#991b1b; }
.woocommerce-order-status.status-completed  { background:#d1fae5; color:#065f46; }
.woocommerce-order-status.status-cancelled  { background:#f3f4f6; color:#6b7280; }
.woocommerce-order-status.status-refunded   { background:#ede9fe; color:#5b21b6; }

/* =====================================================
 * PRODUCT REVIEWS (WC)
 * ===================================================== */
#reviews .commentlist {
  list-style: none; margin: 0; padding: 0;
}
#reviews .comment_container {
  display: flex; gap: 1rem; padding: 1.25rem 0;
  border-bottom: 1px solid var(--color-border);
}
#reviews .comment_container:last-child { border-bottom: none; }
#reviews .comment_container img.avatar {
  width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
#reviews .comment-text { flex: 1; }
#reviews .comment-text p.meta {
  font-size: .8rem; color: var(--color-text-muted); margin: 0 0 .4rem;
}
#reviews .comment-text .star-rating {
  float: none; display: inline-flex; margin-bottom: .4rem;
}
#reviews .description { font-size: .9rem; line-height: 1.7; color: var(--color-text); }

/* Review form */
#review_form_wrapper { margin-top: 2rem; }
#review_form_wrapper h3 { font-size: 1.1rem; margin-bottom: 1rem; color: var(--color-primary-dark); }
#review_form .form-submit input[type="submit"] {
  padding: .75rem 2rem;
  background: var(--color-primary); color: #fff;
  border: none; border-radius: var(--radius-md);
  font-size: .9rem; font-weight: 700; cursor: pointer;
  font-family: inherit;
  transition: background .2s;
}
#review_form .form-submit input[type="submit"]:hover { background: var(--color-primary-dark); }

/* Star rating widget */
.wc-star-rating {
  display: inline-flex; gap: .1rem; color: var(--color-star); font-size: 1rem;
}
.wc-star-rating .empty { color: var(--color-border); }

/* =====================================================
 * REVEAL ANIMATION (intersection observer)
 * ===================================================== */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s ease, transform .5s ease;
}
.reveal.revealed {
  opacity: 1;
  transform: none;
}

/* =====================================================
 * BREADCRUMBS
 * ===================================================== */
.woocommerce-breadcrumb {
  font-size: .8rem;
  color: var(--color-text-muted);
  margin-bottom: 1.5rem;
}
.woocommerce-breadcrumb a {
  color: rgba(255,255,255,.8);
  text-decoration: none;
}
.woocommerce-breadcrumb a:hover { color: #fff; }

/* =====================================================
 * PAYMENT ICONS ON CHECKOUT
 * ===================================================== */
#payment .payment_methods {
  list-style: none; margin: 0; padding: 0;
}
#payment .payment_methods li {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: .75rem;
  overflow: hidden;
}
#payment .payment_methods li label {
  display: flex; align-items: center; gap: .75rem;
  padding: .875rem 1.25rem; cursor: pointer;
  font-weight: 600;
}
#payment .payment_methods li input[type="radio"] { flex-shrink: 0; accent-color: var(--color-primary); }
#payment .payment_methods li .payment_box {
  padding: 1rem 1.25rem;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  font-size: .875rem;
  color: var(--color-text-muted);
}