/* =============================================================================
   G Service — WooCommerce Supplement Stylesheet
   ============================================================================= */

/* ─── WooCommerce Notices ─────────────────────────────────────────────────── */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice { padding: 14px 20px; border-radius: var(--gs-radius); margin-bottom: 20px; display: flex; align-items: flex-start; gap: 12px; font-size: .9rem; }
.woocommerce-message, .woocommerce-info { background: color-mix(in srgb, var(--gs-teal) 12%, white); border-left: 3px solid var(--gs-teal); color: var(--gs-text); }
.woocommerce-error { background: color-mix(in srgb, var(--gs-error) 10%, white); border-left: 3px solid var(--gs-error); color: var(--gs-text); }
.woocommerce-error a, .woocommerce-message a, .woocommerce-info a { color: var(--gs-accent); font-weight: 600; }

/* ─── Buttons ─────────────────────────────────────────────────────────────── */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce .button,
.wc-block-components-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 600; font-size: .9rem; padding: .65em 1.4em; border-radius: 99px; border: 2px solid transparent; cursor: pointer; text-decoration: none; transition: all 200ms ease; background: var(--gs-accent); color: #fff; border-color: var(--gs-accent); }
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce .button:hover { background: color-mix(in srgb, var(--gs-accent) 85%, black); color: #fff; text-decoration: none; }
.woocommerce a.button.alt, .woocommerce button.button.alt { background: var(--gs-primary); border-color: var(--gs-primary); }
.woocommerce a.button.alt:hover { background: color-mix(in srgb, var(--gs-primary) 85%, black); }
.woocommerce a.button.disabled, .woocommerce button.button:disabled { opacity: .5; cursor: not-allowed; }
.woocommerce a.button.checkout-button { font-size: 1rem; padding: .8em 2em; width: 100%; }

/* ─── Product Single ──────────────────────────────────────────────────────── */
.woocommerce div.product { display: block; }
.woocommerce div.product p.price, .woocommerce div.product span.price { font-size: 1.6rem; font-weight: 800; color: var(--gs-text); }
.woocommerce div.product p.price del, .woocommerce div.product span.price del { color: var(--gs-muted); font-size: 1rem; font-weight: 400; }
.woocommerce div.product p.price ins, .woocommerce div.product span.price ins { color: var(--gs-error); text-decoration: none; }
.woocommerce div.product .product_title { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 8px; }
.woocommerce div.product .woocommerce-product-rating { margin-bottom: 12px; }
.woocommerce div.product .single_add_to_cart_button { background: var(--gs-accent); color: #fff; border-color: var(--gs-accent); font-size: 1.05rem; padding: .85em 2em; border-radius: 99px; font-weight: 700; }
.woocommerce div.product .single_add_to_cart_button:hover { background: color-mix(in srgb, var(--gs-accent) 85%, black); }
.woocommerce div.product form.cart { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.woocommerce div.product form.cart .quantity { display: flex; align-items: center; gap: 0; border: 1.5px solid var(--gs-border); border-radius: var(--gs-radius); overflow: hidden; width: fit-content; }
.woocommerce div.product form.cart .qty { border: none; text-align: center; width: 52px; padding: 8px; font: inherit; font-size: 1rem; font-weight: 700; }

/* ─── Star Ratings ────────────────────────────────────────────────────────── */
.woocommerce .star-rating { overflow: hidden; position: relative; height: 1em; width: 5.4em; font-family: 'star'; font-size: 1em; }
.woocommerce .star-rating::before { content: "sssss"; color: var(--gs-border); float: left; top: 0; left: 0; position: absolute; }
.woocommerce .star-rating span { overflow: hidden; float: left; top: 0; left: 0; position: absolute; padding-top: 1.5em; }
.woocommerce .star-rating span::before { content: "SSSSS"; top: 0; position: absolute; left: 0; color: #F59E0B; }
.wc-block-components-review-list-item__rating__star svg { fill: #F59E0B; }

/* ─── Product Tabs ────────────────────────────────────────────────────────── */
.woocommerce div.product .woocommerce-tabs { margin-top: 48px; }
.woocommerce div.product .woocommerce-tabs ul.tabs { border-bottom: 2px solid var(--gs-border); display: flex; gap: 4px; list-style: none; padding: 0; flex-wrap: wrap; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { border: none; background: transparent; border-radius: var(--gs-radius) var(--gs-radius) 0 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: block; padding: 12px 20px; font-size: .875rem; font-weight: 600; color: var(--gs-muted); border-bottom: 2px solid transparent; margin-bottom: -2px; text-decoration: none; transition: color 150ms, border-color 150ms; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a, .woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--gs-primary); border-bottom-color: var(--gs-accent); }
.woocommerce div.product .woocommerce-tabs .panel { padding: 32px 0; }
.woocommerce div.product .woocommerce-tabs .panel h2 { font-size: 1.2rem; margin-bottom: 16px; }

/* ─── Related Products ────────────────────────────────────────────────────── */
.woocommerce .related.products, .woocommerce .upsells.products { margin-top: 48px; padding-top: 32px; border-top: 1.5px solid var(--gs-border); }
.woocommerce .related.products h2, .woocommerce .upsells.products h2 { font-size: 1.3rem; margin-bottom: 24px; }
.woocommerce ul.products { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--gs-gap); list-style: none !important; padding: 0 !important; }
.woocommerce ul.products li.product { background: var(--gs-white); border-radius: var(--gs-radius-lg); border: 1.5px solid var(--gs-border); overflow: hidden; transition: box-shadow 200ms; }
.woocommerce ul.products li.product:hover { box-shadow: var(--gs-shadow); }
.woocommerce ul.products li.product a img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; transition: transform .4s ease; }
.woocommerce ul.products li.product:hover a img { transform: scale(1.04); }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: .95rem; font-weight: 600; padding: 12px 16px 4px; margin: 0; }
.woocommerce ul.products li.product .price { padding: 0 16px 8px; font-size: .95rem; font-weight: 700; display: block; }
.woocommerce ul.products li.product .button { margin: 0 16px 16px; display: block; text-align: center; }

/* ─── Cart ────────────────────────────────────────────────────────────────── */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { display: block; text-align: center; }
.woocommerce-cart-form .coupon { display: flex; gap: 8px; align-items: center; }
.woocommerce-cart-form .coupon input { flex: 1; max-width: 240px; }
.cart_totals table.shop_table { border: 1.5px solid var(--gs-border); border-radius: var(--gs-radius-lg); overflow: hidden; width: 100%; border-collapse: collapse; }
.cart_totals table.shop_table th, .cart_totals table.shop_table td { padding: 12px 16px; border-top: 1px solid var(--gs-border); }
.cart_totals table.shop_table tr.order-total th, .cart_totals table.shop_table tr.order-total td { font-size: 1.1rem; font-weight: 800; background: var(--gs-gray-bg); }

/* ─── Checkout ────────────────────────────────────────────────────────────── */
.woocommerce-checkout { padding-block: 40px; }
.woocommerce-checkout h3 { font-size: 1.1rem; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1.5px solid var(--gs-border); }
.woocommerce-checkout .form-row { margin-bottom: 16px; }
.woocommerce-checkout label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: 6px; }
.woocommerce-checkout input.input-text, .woocommerce-checkout select, .woocommerce-checkout textarea { width: 100%; padding: 10px 14px; border: 1.5px solid var(--gs-border); border-radius: var(--gs-radius); font: inherit; font-size: .9rem; transition: border-color 150ms; }
.woocommerce-checkout input.input-text:focus, .woocommerce-checkout select:focus { outline: none; border-color: var(--gs-accent); }
.woocommerce-checkout #place_order { width: 100%; font-size: 1.1rem; padding: 1em 2em; }

/* ─── My Account ──────────────────────────────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-navigation { min-width: 200px; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; border: 1.5px solid var(--gs-border); border-radius: var(--gs-radius-lg); overflow: hidden; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li { border-bottom: 1px solid var(--gs-border); }
.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child { border-bottom: none; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li a { display: block; padding: 12px 16px; font-size: .9rem; color: var(--gs-text); text-decoration: none; transition: background 150ms, color 150ms; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a, .woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover { background: var(--gs-primary); color: #fff; }
.woocommerce-account .woocommerce-MyAccount-content { flex: 1; min-width: 0; }

/* ─── Order Tracking ──────────────────────────────────────────────────────── */
.track_order { padding: 24px; border: 1.5px solid var(--gs-border); border-radius: var(--gs-radius-lg); }

/* ─── Variation Swatches ──────────────────────────────────────────────────── */
.woocommerce div.product .variations td, .woocommerce div.product .variations th { padding: 8px 0; vertical-align: middle; }
.woocommerce div.product .variations label { font-weight: 600; font-size: .9rem; }
.woocommerce div.product .variations select { width: 100%; max-width: 280px; padding: 8px 12px; border: 1.5px solid var(--gs-border); border-radius: var(--gs-radius); font: inherit; }
.woocommerce div.product .reset_variations { font-size: .8rem; color: var(--gs-muted); margin-top: 6px; display: inline-block; }

/* ─── Sale flash (replaced by theme badge) ─────────────────────────────────── */
.woocommerce span.onsale { display: none; }
.gs-badge--sale.onsale { display: inline-block; }

/* ─── Placeholder image ───────────────────────────────────────────────────── */
.woocommerce .woocommerce-product-gallery__image--placeholder img,
.woocommerce-placeholder { background: var(--gs-gray-bg); display: flex; align-items: center; justify-content: center; color: var(--gs-border); }

/* ─── Woo gallery ─────────────────────────────────────────────────────────── */
.woocommerce div.product div.images { position: relative; }
.woocommerce div.product div.images img { border-radius: var(--gs-radius-lg); }
.woocommerce div.product div.images .flex-viewport { border-radius: var(--gs-radius-lg); overflow: hidden; }

/* ─── In stock / out of stock ─────────────────────────────────────────────── */
.woocommerce div.product .stock.in-stock { color: var(--gs-success); font-weight: 600; font-size: .875rem; }
.woocommerce div.product .stock.out-of-stock { color: var(--gs-error); font-weight: 600; font-size: .875rem; }

/* ─── Reviews ─────────────────────────────────────────────────────────────── */
#reviews { margin-top: 32px; }
#reviews h2 { font-size: 1.3rem; margin-bottom: 20px; }
.woocommerce-Reviews .comment_container { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--gs-border); }
.woocommerce-Reviews .comment_container img.avatar { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; }
.woocommerce-Reviews .woocommerce-review__author { font-weight: 700; }
.woocommerce-Reviews .woocommerce-review__dash, .woocommerce-Reviews .woocommerce-review__published-date { color: var(--gs-muted); font-size: .85rem; }
.woocommerce-Reviews #review_form_wrapper { margin-top: 32px; }

/* =============================================================================
   WOOCOMMERCE RESPONSIVE — Mobile-First
   ============================================================================= */

/* ─── 1024px ──────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Product tabs: smaller padding */
  .woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: 10px 14px; font-size: .825rem; }
  .woocommerce div.product .woocommerce-tabs .panel { padding: 24px 0; }

  /* Related / upsells: 2-col grid */
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ─── 768px ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── Product single: bigger ATC button, full-width ── */
  .woocommerce div.product .single_add_to_cart_button { width: 100%; font-size: 1rem; padding: 1em 1.5em; }
  .woocommerce div.product form.cart { gap: 16px; }

  /* ── Quantity: larger touch target ── */
  .woocommerce div.product form.cart .quantity { border-radius: var(--gs-radius); }
  .woocommerce div.product form.cart .qty { width: 60px; padding: 12px 8px; font-size: 1.1rem; }

  /* ── Product price: slightly smaller ── */
  .woocommerce div.product p.price, .woocommerce div.product span.price { font-size: 1.3rem; }

  /* ── Product tabs: horizontal scroll on mobile ── */
  .woocommerce div.product .woocommerce-tabs ul.tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .woocommerce div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none; }
  .woocommerce div.product .woocommerce-tabs ul.tabs li { flex-shrink: 0; }

  /* ── Related / upsells: tighten ── */
  .woocommerce .related.products, .woocommerce .upsells.products { margin-top: 32px; padding-top: 24px; }
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
  .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: .875rem; padding: 8px 12px 4px; }

  /* ── Cart table: responsive stacking ── */
  .gs-cart-table { border: none; }
  .gs-cart-table thead { display: none; }  /* hide column headers */
  .gs-cart-table tbody, .gs-cart-table tr, .gs-cart-table td { display: block; width: 100%; }
  .gs-cart-table tr { border: 1.5px solid var(--gs-border); border-radius: var(--gs-radius-lg); margin-bottom: 12px; padding: 16px; position: relative; }
  .gs-cart-table td { padding: 4px 0; border: none; }
  .gs-cart-table td::before {
    content: attr(data-title) ": ";
    font-weight: 700;
    font-size: .78rem;
    color: var(--gs-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-right: 4px;
  }
  .gs-cart-table td.product-thumbnail { display: flex; justify-content: center; margin-bottom: 8px; }
  .gs-cart-table td.product-thumbnail::before { display: none; }
  .gs-cart-table td.product-remove { position: absolute; top: 12px; right: 12px; padding: 0; }
  .gs-cart-table td.product-remove::before { display: none; }
  .gs-cart-table td.actions { padding-top: 12px; border-top: 1px solid var(--gs-border); margin-top: 8px; }
  .gs-cart-table td.actions::before { display: none; }

  /* ── WooCommerce cart coupon ── */
  .woocommerce-cart-form .coupon { flex-wrap: wrap; }
  .woocommerce-cart-form .coupon input { width: 100%; max-width: 100%; }

  /* ── Cart totals ── */
  .gs-cart-collaterals { justify-content: stretch; }
  .cart_totals { width: 100%; }
  .cart_totals table.shop_table { width: 100%; }

  /* ── Checkout: single-column forms ── */
  .woocommerce-checkout .col2-set { display: flex; flex-direction: column; gap: 0; }
  .woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { width: 100%; float: none; }
  .woocommerce-checkout .form-row-first, .woocommerce-checkout .form-row-last { float: none; width: 100%; }

  /* ── My Account ── */
  .woocommerce-account .woocommerce { display: flex; flex-direction: column; gap: 24px; }
  .woocommerce-account .woocommerce-MyAccount-navigation { min-width: 0; width: 100%; }
  .woocommerce-account .woocommerce-MyAccount-navigation ul { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--gs-radius); }
  .woocommerce-account .woocommerce-MyAccount-navigation ul li { border-bottom: none; border-right: 1px solid var(--gs-border); flex-shrink: 0; }
  .woocommerce-account .woocommerce-MyAccount-navigation ul li a { padding: 10px 16px; white-space: nowrap; font-size: .82rem; }

  /* ── WooCommerce notices: block stacking ── */
  .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice { flex-direction: column; gap: 8px; }

  /* ── Woo buttons: wider ── */
  .woocommerce a.button, .woocommerce button.button, .woocommerce input.button { font-size: .875rem; }
}

/* ─── 480px ──────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* ── Product single ── */
  .woocommerce div.product .product_title { font-size: 1.3rem; }
  .woocommerce div.product p.price, .woocommerce div.product span.price { font-size: 1.15rem; }

  /* ── Cart table: tighter ── */
  .gs-cart-table tr { padding: 12px; }
  .gs-cart-table td.product-thumbnail img { max-width: 80px; }

  /* ── Related products: tighter ── */
  .woocommerce ul.products { gap: 10px !important; }
  .woocommerce ul.products li.product .button { margin: 0 10px 12px; }

  /* ── Review form ── */
  .woocommerce-Reviews .comment_container { flex-direction: column; }
  .woocommerce-Reviews .comment_container img.avatar { width: 40px; height: 40px; }

  /* ── Order table on order received / my account ── */
  .woocommerce-order-details .woocommerce-table,
  .woocommerce table.shop_table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ── Checkout place order button ── */
  .woocommerce-checkout #place_order { font-size: .95rem; padding: .9em 1.5em; }

  /* ── Variation selects ── */
  .woocommerce div.product .variations select { max-width: 100%; }
  .woocommerce div.product .variations td, .woocommerce div.product .variations th { display: block; width: 100%; padding: 6px 0; }
}

/* ─── 375px ──────────────────────────────────────────────────────────────── */
@media (max-width: 375px) {
  /* ── Product grid: single column ── */
  .woocommerce ul.products { grid-template-columns: 1fr !important; }

  /* ── Tiny price font ── */
  .woocommerce div.product p.price, .woocommerce div.product span.price { font-size: 1.05rem; }

  /* ── Tabs: smaller text ── */
  .woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: 8px 12px; font-size: .78rem; }
}