/* ============================================================
   SUNRISE INTERNATIONAL — WooCommerce Style Override
   ============================================================
   HOW TO USE:
   1. Go to WP Admin → Appearance → Customize → Additional CSS
      (or Appearance → Theme File Editor → your theme's style.css,
      or create a child theme and paste this into its style.css)
   2. Paste this entire file in.
   3. This does NOT touch any PHP, templates, cart logic, or
      checkout functionality — it only restyles WooCommerce's
      own default HTML output. Safe to update WooCommerce/theme
      without breaking this.
   4. If your theme already loads Google Fonts elsewhere, you can
      delete the @import line below to avoid loading fonts twice.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --si-ivory:#FBF6EE;
  --si-ivory-deep:#F3E9D8;
  --si-maroon:#7A1F1F;
  --si-maroon-deep:#561414;
  --si-navy:#16213D;
  --si-gold:#C8932E;
  --si-gold-light:#E8C77A;
  --si-ink:#3A2A20;
  --si-ink-soft:#736054;
  --si-line:rgba(122,31,31,0.14);
  --si-radius:4px;
}

/* ============================================================
   1. GLOBAL TYPOGRAPHY & BODY
   ============================================================ */

body.woocommerce, body.woocommerce-page{
  background:var(--si-ivory);
  color:var(--si-ink);
  font-family:'Inter', sans-serif;
}

.woocommerce h1, .woocommerce h2, .woocommerce h3, .woocommerce h4,
.woocommerce-page h1, .woocommerce-page h2, .woocommerce-page h3{
  font-family:'Playfair Display', serif;
  color:var(--si-maroon-deep);
  font-weight:600;
}

.woocommerce a{ color:var(--si-maroon); }
.woocommerce a:hover{ color:var(--si-gold); }

/* Page title / breadcrumb area (works with most themes' page header) */
.woocommerce-breadcrumb{
  font-size:12.5px;
  color:var(--si-ink-soft);
  letter-spacing:0.02em;
  margin-bottom:28px !important;
}
.woocommerce-breadcrumb a{ color:var(--si-maroon); }
.woocommerce-breadcrumb a:hover{ color:var(--si-gold); }

/* ============================================================
   2. SHOP / ARCHIVE PAGE — PRODUCT GRID
   ============================================================ */

.woocommerce ul.products{
  display:grid !important;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
  margin:0 0 40px 0 !important;
  list-style:none !important;
}

.woocommerce ul.products li.product{
  background:#fff;
  border:1px solid var(--si-line);
  border-radius:var(--si-radius);
  overflow:hidden;
  padding:0 !important;
  margin:0 !important;
  width:100% !important;
  float:none !important;
  text-align:left;
  transition:transform .25s, box-shadow .25s;
  position:relative;
}

.woocommerce ul.products li.product:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 36px -24px rgba(122,31,31,0.4);
}

/* Product thumbnail */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img{
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:0 !important;
  margin:0 !important;
  background:var(--si-ivory-deep);
  transition:transform .4s;
}
.woocommerce ul.products li.product:hover img{
  transform:scale(1.05);
}

/* "New" / sale flash badge */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale{
  background:var(--si-gold) !important;
  color:var(--si-maroon-deep) !important;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  border-radius:2px !important;
  top:12px !important;
  left:12px !important;
  right:auto !important;
  min-height:auto !important;
  min-width:auto !important;
  line-height:1.2 !important;
  padding:5px 10px !important;
  font-family:'Inter', sans-serif;
}

/* Product title */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3{
  font-family:'Inter', sans-serif !important;
  font-weight:600 !important;
  font-size:14.5px !important;
  color:var(--si-ink) !important;
  padding:16px 18px 0 !important;
  margin:0 0 6px 0 !important;
  line-height:1.4;
}

/* Category label above title (if theme shows it) */
.woocommerce ul.products li.product .product-category,
.woocommerce ul.products li.product mark.count{
  font-size:11px;
  color:var(--si-gold);
  font-weight:600;
  letter-spacing:0.05em;
  text-transform:uppercase;
}

/* Price */
.woocommerce ul.products li.product .price,
.woocommerce .price{
  color:var(--si-maroon-deep) !important;
  font-weight:600 !important;
  font-size:14.5px !important;
  padding:0 18px !important;
  display:block;
}
.woocommerce ul.products li.product .price del{
  color:var(--si-ink-soft) !important;
  opacity:0.6;
  font-weight:400 !important;
}
.woocommerce ul.products li.product .price ins{
  color:var(--si-maroon-deep) !important;
  text-decoration:none;
}

/* Star ratings */
.woocommerce .star-rating{ color:var(--si-gold) !important; font-size:13px; padding:0 18px; }
.woocommerce .star-rating::before{ color:var(--si-line); }
.woocommerce .star-rating span::before{ color:var(--si-gold); }

/* Add to cart button on grid cards */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product a.button{
  display:block !important;
  margin:14px 18px 18px !important;
  width:calc(100% - 36px) !important;
  background:transparent !important;
  border:1px solid var(--si-maroon) !important;
  color:var(--si-maroon-deep) !important;
  font-size:12.5px !important;
  font-weight:600 !important;
  padding:10px 14px !important;
  border-radius:2px !important;
  text-align:center;
  text-transform:none;
  transition:background .2s, color .2s;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.add_to_cart_button:hover{
  background:var(--si-maroon) !important;
  color:var(--si-ivory) !important;
}
.woocommerce ul.products li.product .added_to_cart{
  display:block;
  text-align:center;
  font-size:12px;
  margin:0 18px 14px;
  color:var(--si-gold);
}

/* Result count + ordering dropdown */
.woocommerce-result-count{
  color:var(--si-ink-soft);
  font-size:13.5px;
}
.woocommerce-ordering select{
  border:1px solid var(--si-line);
  border-radius:2px;
  padding:8px 12px;
  font-size:13.5px;
  background:#fff;
  color:var(--si-ink);
}

/* Sidebar widget filters (price filter, category list, layered nav) */
.woocommerce-widget-layered-nav ul,
.widget_product_categories ul,
.widget_layered_nav_filters ul{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.woocommerce-widget-layered-nav ul li a,
.widget_product_categories ul li a{
  font-size:13.5px;
  color:var(--si-ink-soft);
  transition:color .2s;
}
.woocommerce-widget-layered-nav ul li a:hover,
.widget_product_categories ul li a:hover{
  color:var(--si-maroon);
}
.widget_price_filter .price_slider_amount .button{
  background:var(--si-maroon);
  color:var(--si-ivory);
  border-radius:2px;
  font-size:12.5px;
  padding:8px 16px;
}
.price_slider_wrapper .ui-slider .ui-slider-range{ background:var(--si-gold) !important; }
.price_slider_wrapper .ui-slider .ui-slider-handle{ background:var(--si-maroon) !important; border-color:var(--si-maroon) !important; }

/* Pagination */
.woocommerce nav.woocommerce-pagination ul{
  border:none !important;
  gap:8px;
  display:flex;
}
.woocommerce nav.woocommerce-pagination ul li{
  border:none !important;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  border:1px solid var(--si-line) !important;
  border-radius:2px !important;
  color:var(--si-ink-soft) !important;
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  font-size:13.5px;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover{
  background:var(--si-maroon) !important;
  border-color:var(--si-maroon) !important;
  color:var(--si-ivory) !important;
}

/* ============================================================
   3. SINGLE PRODUCT PAGE
   ============================================================ */

.single-product div.product .product_title{
  font-size:clamp(24px, 3vw, 32px) !important;
  margin-bottom:12px;
}

.single-product div.product p.price,
.single-product div.product .woocommerce-Price-amount{
  color:var(--si-maroon-deep) !important;
  font-size:22px !important;
  font-weight:600 !important;
}

.single-product div.product .woocommerce-product-details__short-description{
  color:var(--si-ink-soft);
  font-size:14.5px;
  margin:16px 0;
}

/* Quantity input */
.woocommerce .quantity .qty{
  border:1px solid var(--si-line) !important;
  border-radius:2px !important;
  height:46px;
  width:70px;
  text-align:center;
  font-size:14px;
}

/* Single add to cart button */
.single_add_to_cart_button,
.single-product .single_add_to_cart_button{
  background:var(--si-maroon) !important;
  color:var(--si-ivory) !important;
  border:none !important;
  border-radius:2px !important;
  font-size:14px !important;
  font-weight:600 !important;
  padding:14px 32px !important;
  letter-spacing:0.02em;
  text-transform:none !important;
  transition:background .2s, transform .2s, box-shadow .2s;
}
.single_add_to_cart_button:hover{
  background:var(--si-maroon-deep) !important;
  transform:translateY(-2px);
  box-shadow:0 8px 20px -8px rgba(122,31,31,0.5);
}

/* Product meta (SKU, categories, tags) */
.product_meta{
  font-size:12.5px;
  color:var(--si-ink-soft);
  border-top:1px solid var(--si-line);
  padding-top:16px;
  margin-top:24px;
}
.product_meta a{ color:var(--si-maroon); }

/* Tabs (description / reviews / additional info) */
.woocommerce-tabs ul.tabs{
  border-bottom:1px solid var(--si-line) !important;
  padding-left:0 !important;
  display:flex;
  gap:8px;
}
.woocommerce-tabs ul.tabs li{
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  margin:0 !important;
}
.woocommerce-tabs ul.tabs li a{
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:13.5px;
  color:var(--si-ink-soft);
  padding:12px 18px;
  display:block;
}
.woocommerce-tabs ul.tabs li.active a{
  color:var(--si-maroon-deep);
  border-bottom:2px solid var(--si-gold);
}
.woocommerce-tabs .panel{
  padding-top:24px;
  font-size:14.5px;
  color:var(--si-ink-soft);
}

/* Related products heading */
.related.products h2{
  font-size:clamp(22px,3vw,28px) !important;
  text-align:center;
  margin-bottom:32px;
}

/* ============================================================
   4. CART PAGE
   ============================================================ */

.woocommerce table.shop_table{
  border:1px solid var(--si-line) !important;
  border-radius:var(--si-radius);
  border-collapse:collapse;
  overflow:hidden;
}
.woocommerce table.shop_table th{
  background:var(--si-ivory-deep);
  color:var(--si-maroon-deep);
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:12.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  border:none !important;
  padding:14px 16px !important;
}
.woocommerce table.shop_table td{
  border-top:1px solid var(--si-line) !important;
  border-bottom:none !important;
  border-left:none !important;
  border-right:none !important;
  padding:16px !important;
  vertical-align:middle;
}
.woocommerce table.shop_table td.product-name a{
  color:var(--si-ink);
  font-weight:500;
}
.woocommerce table.shop_table td img{
  border-radius:2px;
  width:64px !important;
  height:64px !important;
  object-fit:cover;
}
.woocommerce a.remove{
  color:var(--si-maroon) !important;
  font-size:18px;
}
.woocommerce a.remove:hover{
  background:var(--si-maroon) !important;
  color:var(--si-ivory) !important;
}

/* Cart totals box */
.cart_totals{
  border:1px solid var(--si-line);
  border-radius:var(--si-radius);
  padding:28px;
  background:#fff;
}
.cart_totals h2{
  font-size:20px !important;
  margin-bottom:16px;
}
.cart_totals table.shop_table{ border:none !important; }
.cart_totals table.shop_table th, .cart_totals table.shop_table td{
  padding:12px 0 !important;
  border-top:1px solid var(--si-line) !important;
}
.cart_totals .order-total .woocommerce-Price-amount{
  color:var(--si-maroon-deep);
  font-size:18px;
  font-weight:700;
}

/* Update cart / coupon buttons */
.woocommerce-cart-form button[name="update_cart"],
.woocommerce-cart-form button[name="apply_coupon"]{
  background:transparent !important;
  border:1px solid var(--si-maroon) !important;
  color:var(--si-maroon-deep) !important;
  border-radius:2px !important;
  font-size:13px !important;
  font-weight:600 !important;
  padding:11px 22px !important;
  text-transform:none !important;
}
.woocommerce-cart-form button[name="update_cart"]:hover,
.woocommerce-cart-form button[name="apply_coupon"]:hover{
  background:var(--si-maroon) !important;
  color:var(--si-ivory) !important;
}

/* Proceed to checkout button */
.wc-proceed-to-checkout .checkout-button{
  background:var(--si-gold) !important;
  color:var(--si-maroon-deep) !important;
  border-radius:2px !important;
  font-weight:600 !important;
  font-size:14px !important;
  padding:16px !important;
  text-transform:none !important;
  transition:background .2s;
}
.wc-proceed-to-checkout .checkout-button:hover{
  background:var(--si-gold-light) !important;
}

.coupon .input-text{
  border:1px solid var(--si-line) !important;
  border-radius:2px !important;
  height:44px;
  padding:0 14px;
}

/* ============================================================
   5. CHECKOUT PAGE
   ============================================================ */

.woocommerce-checkout #customer_details,
.woocommerce-checkout .col-1, .woocommerce-checkout .col-2{
  background:transparent;
}

.woocommerce-billing-fields h3,
.woocommerce-additional-fields h3,
#order_review_heading{
  font-size:18px !important;
  border-bottom:1px solid var(--si-line);
  padding-bottom:12px;
  margin-bottom:20px !important;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-checkout select{
  border:1px solid var(--si-line) !important;
  border-radius:2px !important;
  padding:12px 14px !important;
  font-size:14px;
  background:#fff;
  color:var(--si-ink);
  transition:border-color .2s;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus{
  border-color:var(--si-gold) !important;
  outline:none;
  box-shadow:0 0 0 3px rgba(200,147,46,0.15);
}
.woocommerce form .form-row label{
  font-size:13px;
  color:var(--si-ink-soft);
  font-weight:500;
}

/* Order review table on checkout */
#order_review table.shop_table{
  border:1px solid var(--si-line) !important;
  background:#fff;
}

/* Payment methods box */
.woocommerce-checkout #payment{
  background:var(--si-ivory-deep) !important;
  border-radius:var(--si-radius);
  border:1px solid var(--si-line);
}
.woocommerce-checkout #payment ul.payment_methods{
  border-bottom:1px solid var(--si-line) !important;
}
.woocommerce-checkout #payment div.payment_box{
  background:#fff !important;
  border-radius:2px;
  font-size:13.5px;
  color:var(--si-ink-soft);
}
.woocommerce-checkout #payment div.payment_box::before{
  border-bottom-color:#fff !important;
}

/* Place order button */
#place_order{
  background:var(--si-maroon) !important;
  color:var(--si-ivory) !important;
  border-radius:2px !important;
  font-size:15px !important;
  font-weight:600 !important;
  padding:16px 32px !important;
  width:100%;
  text-transform:none !important;
  transition:background .2s, transform .2s;
}
#place_order:hover{
  background:var(--si-maroon-deep) !important;
  transform:translateY(-2px);
}

/* ============================================================
   6. MY ACCOUNT PAGE
   ============================================================ */

.woocommerce-MyAccount-navigation ul{
  list-style:none;
  border:1px solid var(--si-line);
  border-radius:var(--si-radius);
  overflow:hidden;
}
.woocommerce-MyAccount-navigation ul li{
  border-bottom:1px solid var(--si-line);
}
.woocommerce-MyAccount-navigation ul li:last-child{ border-bottom:none; }
.woocommerce-MyAccount-navigation ul li a{
  display:block;
  padding:14px 18px;
  font-size:13.5px;
  color:var(--si-ink-soft);
  transition:background .2s, color .2s;
}
.woocommerce-MyAccount-navigation ul li.is-active a{
  background:var(--si-maroon);
  color:var(--si-ivory) !important;
}
.woocommerce-MyAccount-navigation ul li a:hover{
  background:var(--si-ivory-deep);
  color:var(--si-maroon);
}

.woocommerce-MyAccount-content .button,
.woocommerce form.login .button,
.woocommerce form.register .button{
  background:var(--si-maroon) !important;
  color:var(--si-ivory) !important;
  border-radius:2px !important;
  font-weight:600 !important;
  padding:12px 24px !important;
  text-transform:none !important;
}
.woocommerce form.login .button:hover,
.woocommerce form.register .button:hover{
  background:var(--si-maroon-deep) !important;
}

/* Order status badges on order history */
.woocommerce-orders-table__cell-order-status mark{
  background:var(--si-gold-light);
  color:var(--si-maroon-deep);
  border-radius:2px;
  padding:2px 8px;
  font-weight:600;
  font-size:12px;
}

/* ============================================================
   7. NOTICES (success / error / info messages)
   ============================================================ */

.woocommerce-message,
.woocommerce-info{
  border-top-color:var(--si-gold) !important;
  background:var(--si-ivory-deep) !important;
  color:var(--si-ink) !important;
  border-radius:2px;
}
.woocommerce-message::before{ color:var(--si-gold) !important; }
.woocommerce-error{
  border-top-color:var(--si-maroon) !important;
  background:#FBEAEA !important;
  color:var(--si-maroon-deep) !important;
  border-radius:2px;
}
.woocommerce-error::before{ color:var(--si-maroon) !important; }

.woocommerce-message .button,
.woocommerce-info .button{
  background:var(--si-maroon) !important;
  color:var(--si-ivory) !important;
  border-radius:2px !important;
}

/* ============================================================
   8. MINI CART / CART WIDGET (header cart dropdown)
   ============================================================ */

.widget_shopping_cart .total .woocommerce-Price-amount,
.widget_shopping_cart_content .total .woocommerce-Price-amount{
  color:var(--si-maroon-deep) !important;
  font-weight:600;
}
.widget_shopping_cart_content ul.cart_list li a.remove{
  color:var(--si-maroon) !important;
}
.widget_shopping_cart_content .buttons .button{
  border-radius:2px !important;
  font-size:12.5px !important;
  text-transform:none !important;
}
.widget_shopping_cart_content .buttons a.checkout{
  background:var(--si-gold) !important;
  color:var(--si-maroon-deep) !important;
}
.widget_shopping_cart_content .buttons a.wc-forward:not(.checkout){
  background:transparent !important;
  border:1px solid var(--si-maroon) !important;
  color:var(--si-maroon-deep) !important;
}

/* ============================================================
   9. RESPONSIVE — SHOP GRID
   ============================================================ */

@media (max-width: 1024px){
  .woocommerce ul.products{ grid-template-columns:repeat(2, 1fr) !important; }
}
@media (max-width: 640px){
  .woocommerce ul.products{ grid-template-columns:repeat(2, 1fr) !important; gap:14px; }
  .woocommerce ul.products li.product a img,
  .woocommerce ul.products li.product img{ height:150px; }
  .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-size:13px !important; padding:12px 12px 0 !important; }
  .woocommerce ul.products li.product .price{ padding:0 12px !important; }
  .woocommerce ul.products li.product .button{ margin:10px 12px 12px !important; width:calc(100% - 24px) !important; }
  .cart_totals{ padding:20px; }
  #place_order{ padding:14px 20px !important; }
}

/* ============================================================
   10. UTILITY — hide default theme button styling conflicts
   ============================================================ */
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button{
  box-shadow:none !important;
  text-shadow:none !important;
}



/* ==========================
   SUBCATEGORY NAVIGATION
========================== */

.subcategory-navigation{
    margin:30px 0 40px;
    padding:0;
}

.subcategory-badges{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.subcategory-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:12px 22px;
    background:#fff;
    border:1px solid #e5e5e5;
    border-radius:50px;
    color:#222;
    text-decoration:none;
    font-size:14px;
    font-weight:600;
    line-height:1;
    transition:all .3s ease;
    box-shadow:0 2px 8px rgba(0,0,0,.04);
}

.subcategory-badge:hover{
    background:#d42027;
    border-color:#d42027;
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(212,32,39,.25);
}

.subcategory-badge .count{
    font-size:12px;
    font-weight:500;
    opacity:.75;
}

.subcategory-badge:hover .count{
    opacity:1;
}

/* Active Category */
.subcategory-badge.active,
.subcategory-badge.current-cat{
    background:#d42027;
    color:#fff;
    border-color:#d42027;
}

/* ==========================
   MOBILE
========================== */

@media(max-width:768px){

    .subcategory-navigation{
        margin:20px 0 30px;
    }

    .subcategory-badges{
        gap:8px;
    }

    .subcategory-badge{
        padding:10px 16px;
        font-size:13px;
    }

    .subcategory-badge .count{
        font-size:11px;
    }
}






.subcategory-badge{
    background:#fafafa;
    border:1px solid #ddd;
    color:#333;
    font-weight:500;
}

.subcategory-badge:hover,
.subcategory-badge.active{
    background:#0b4ea2;
    border-color:#0b4ea2;
    color:#fff;
}