/*
Theme Name: Bella Italia Creations
Theme URI: https://bellaitaliacreations.com
Author: Bella Italia Creations
Author URI: https://bellaitaliacreations.com
Description: A lightweight theme for bellaitaliacreations.com — no page builder required. Hand-built responsive header with logo, menu, product search, account login and shopping bag, plus WooCommerce support. Original Italian-inspired artwork printed to order — inspired by Italy.
Version: 2.0.9
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bella-italia
Tags: e-commerce, portfolio, custom-menu, featured-images, threaded-comments, translation-ready, wide-blocks
*/

/* ========== Tokens ========== */
:root{
  --cream:#FAF6EC; --cream-2:#F3EBD8; --ink:#22303A; --ink-soft:#4A5A66;
  --cobalt:#1E4E9E; --cobalt-deep:#163B78; --lemon:#F2C230; --lemon-soft:#F7DC7A;
  --terracotta:#C96F4A; --line:#E4D9C2; --white:#FFFFFF;
  --green:#1E5B3A; --green-deep:#143D28;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --radius:14px; --shadow:0 10px 30px rgba(34,48,58,.10);
}

/* ========== Base ========== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--cream);line-height:1.65;font-size:17px}
img{max-width:100%;height:auto}
h1,h2,h3,h4{font-family:var(--serif);line-height:1.2;margin:0 0 .6em}
p{margin:0 0 1em}
a{color:var(--cobalt)}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Buttons */
.btn{display:inline-block;font-weight:700;letter-spacing:.02em;padding:.85em 1.9em;border-radius:999px;border:2px solid var(--green);background:var(--green);color:#fff;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{background:var(--green-deep);border-color:var(--green-deep);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-outline{background:transparent;color:var(--green)}
.btn-outline:hover{background:var(--green);color:#fff}
.btn-lemon{background:var(--lemon);border-color:var(--lemon);color:var(--ink)}
.btn-lemon:hover{background:var(--lemon-soft);border-color:var(--lemon-soft);color:var(--ink)}

/* Site header v2.0.9: desktop, one top row — logo on the left, search
   in the middle, account + bag + hamburger on the right. Mobile:
   search bar replaced by a search icon (v2.0.7's bar overlapped the
   bag on narrow phones); tapping the icon opens the search as a
   full-width row below the top row, and the actions group is pinned
   to the right edge (v2.0.8 left it in the middle). The menu sits
   in the row below on desktop and collapses behind the hamburger
   on mobile. */
.site-header{background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.header-inner{display:flex;align-items:center;gap:16px;padding:14px 0;flex-wrap:nowrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);flex:0 0 auto;order:1}
.brand-logo{width:104px;height:104px;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.15);flex:0 0 auto;background:#fff;object-fit:contain}
.brand-name{font-family:var(--serif);font-size:1.35rem;font-weight:700;line-height:1.1}
.brand-tag{display:block;font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.header-search{flex:1 1 auto;min-width:0;max-width:none;margin:0;padding-bottom:0;order:2}
.header-search .dgwt-wcas-search-form,.header-search .dgwt-wcas-search-wrapp{width:100%}
.header-search input{min-width:0}
.header-search form:not(.dgwt-wcas-search-form){display:flex;width:100%;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--white)}
.header-search form:not(.dgwt-wcas-search-form) input[type="search"]{flex:1;border:none;padding:.7em 1.2em;font-size:.95rem;background:transparent;color:var(--ink);min-width:0}
.header-search form:not(.dgwt-wcas-search-form) input[type="search"]:focus{outline:none}
.header-search form:not(.dgwt-wcas-search-form) button{background:var(--green);color:#fff;border:none;padding:0 1.3em;cursor:pointer;font-weight:700}
.header-search form:not(.dgwt-wcas-search-form) button:hover{background:var(--green-deep)}
.header-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto;order:3}
.search-toggle{display:none;align-items:center;justify-content:center;background:none;border:none;padding:8px;color:var(--ink);cursor:pointer;flex:0 0 auto}
.search-toggle svg{display:block}
.account-link{display:inline-flex;align-items:center;gap:8px;color:var(--green);padding:.45em .2em;font-weight:700;font-size:.92rem;text-decoration:none;white-space:nowrap}
.account-link:hover{color:var(--green-deep)}
.account-link svg,.bag-link svg{display:block}
.bag-link{position:relative;display:inline-flex;align-items:center;color:var(--ink);padding:8px;text-decoration:none}
.bag-link:hover{color:var(--green)}
.bag-count{position:absolute;top:0;right:0;background:var(--green);color:#fff;border-radius:50%;min-width:20px;height:20px;padding:0 4px;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700}
.header-nav-row{padding:2px 0 12px}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:26px;flex-wrap:wrap}
.main-nav > ul{justify-content:center}
.main-nav a{color:var(--ink);font-weight:600;font-size:1.08rem;text-decoration:none}
.main-nav a:hover{color:var(--cobalt)}
.nav-toggle{display:block;background:none;border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:1.1rem;cursor:pointer;color:var(--ink);flex:0 0 auto}
/* v2.0.7: on desktop the hamburger hides/shows the menu row below
   (the menu is visible by default, so the button is never dead). */
@media (min-width:901px){
  .site-header.menu-hidden .header-nav-row{display:none}
}

/* Dropdown sub-menus (v2.0.1 fix): WordPress nests submenu items as
   ul.sub-menu inside their parent li. Without these rules every submenu
   item renders out in the open and the menu looks broken. Desktop:
   hover/focus dropdowns, fly-out for deeper levels. Mobile (see the
   900px query): submenus expand in place, indented. */
.main-nav li{position:relative}
.main-nav ul ul{display:none;position:absolute;top:100%;left:0;min-width:250px;background:var(--white);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:8px 0;z-index:60;flex-direction:column;gap:0}
.main-nav li:hover > ul,.main-nav li:focus-within > ul{display:flex}
.main-nav ul ul li{border-top:none}
.main-nav ul ul a{display:block;padding:10px 18px;font-size:.95rem}
.main-nav ul ul a:hover{background:var(--cream)}
.main-nav ul ul ul{top:-9px;left:100%}
.main-nav .menu-item-has-children > a::after{content:" ▾";font-size:.75em}

/* Site footer */
.site-footer{background:#E4EADF;color:var(--ink-soft);padding:56px 0 28px;border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;margin-bottom:36px}
.site-footer h3{color:var(--green);font-size:1.05rem;margin-bottom:14px}
.site-footer a{color:var(--green)}
.site-footer a:hover{color:var(--green-deep)}
.footer-bottom{border-top:1px solid var(--line);padding-top:22px;font-size:.85rem;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.footer-menu{list-style:none;margin:0;padding:0;display:grid;gap:8px}

/* Starter homepage sections */
.hero-banner{position:relative;color:#fff;overflow:hidden;background-size:cover;background-position:center 60%;padding:clamp(90px,14vw,160px) 0}
.hero-banner::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(18,32,44,.78) 0%,rgba(18,32,44,.45) 45%,rgba(18,32,44,.12) 75%)}
.hero-banner-inner{position:relative;max-width:640px;margin-left:max(24px,calc((100% - 1140px)/2));padding:0 24px}
.hero-eyebrow{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);padding:.5em 1.2em;border-radius:999px;margin-bottom:22px}
.hero-banner h1{color:#fff;font-size:clamp(2.2rem,5vw,3.6rem)}
.hero-banner h1 em{font-style:italic;color:var(--lemon)}
.hero-banner .hero-sub{color:rgba(255,255,255,.88);max-width:640px;margin:0 auto 32px;font-size:1.12rem}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-banner .btn-outline{color:#fff;border-color:#fff}
.hero-banner .btn-outline:hover{background:#fff;color:var(--ink)}
.value-strip{background:var(--ink);color:#fff}
.value-strip .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-top:26px;padding-bottom:26px}
.value-item{display:flex;gap:14px;align-items:flex-start}
.value-item .ico{font-size:1.5rem;line-height:1}
.value-item strong{display:block;font-size:.98rem}
.value-item span{font-size:.85rem;color:rgba(255,255,255,.72)}
.coast-banner{position:relative;background-size:cover;background-position:center;padding:clamp(90px,12vw,140px) 0;color:#fff;text-align:center;overflow:hidden}
.coast-banner::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,40,60,.62),rgba(20,40,60,.38) 60%,rgba(20,40,60,.55))}
.coast-banner-inner{position:relative;max-width:760px;margin:0 auto;padding:0 24px}
.coast-banner h2{color:#fff;font-size:clamp(1.9rem,4.2vw,2.9rem)}
.coast-banner h2 em{font-style:italic;color:var(--lemon)}
.coast-banner p{color:rgba(255,255,255,.92);max-width:600px;margin:0 auto 30px;font-size:1.08rem}
.section{padding:72px 0}
.section-alt{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-head{text-align:center;max-width:680px;margin:0 auto 44px}
.section-head h2{font-size:clamp(1.6rem,3.4vw,2.4rem)}
.section-head h2::after{content:"";display:block;width:72px;height:5px;border-radius:3px;background:linear-gradient(90deg,var(--lemon),var(--terracotta));margin:18px auto 0}
.section-head p{color:var(--ink-soft)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .18s ease}
.card:hover{transform:translateY(-4px)}
.card-photo{aspect-ratio:4/3;overflow:hidden;background:var(--cream-2)}
.card-photo img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.card:hover .card-photo img{transform:scale(1.05)}
.card-body{padding:26px;display:flex;flex-direction:column;gap:10px;flex:1}
.card-body h3{font-size:1.35rem}
.card-body p{color:var(--ink-soft);font-size:.98rem;flex:1}
.card-link{font-weight:700;color:var(--cobalt);text-decoration:none}
.story{background:linear-gradient(135deg,var(--cobalt-deep),var(--cobalt) 70%);color:#fff;border-radius:calc(var(--radius) + 6px);padding:56px clamp(28px,6vw,72px);display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;box-shadow:var(--shadow)}
.story h2{color:#fff;font-size:clamp(1.6rem,3.4vw,2.4rem)}
.story p{color:rgba(255,255,255,.85)}
.story-photo{border-radius:var(--radius);overflow:hidden;box-shadow:0 14px 34px rgba(0,0,0,.25)}
.story-photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:1}
.cta-band{text-align:center;padding:80px 0}
.cta-band .lemons{font-size:2rem;letter-spacing:.4em;margin-bottom:18px}
.cta-band h2{font-size:clamp(1.6rem,3.4vw,2.4rem)}
.content-area{padding:56px 0}
.post-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:34px;margin-bottom:28px;box-shadow:var(--shadow)}
.post-meta{font-size:.85rem;color:var(--ink-soft);margin-bottom:12px}
.nav-links{display:flex;justify-content:space-between;gap:16px;margin:32px 0}
.page-title{margin-bottom:8px;font-size:clamp(1.8rem,4vw,2.6rem)}
/* Full Width template: no theme container constraints */
.content-area-flush{padding:0}
/* Shop catalog rows */
.shop-collection-photo{border-radius:var(--radius);overflow:hidden;margin-bottom:22px;box-shadow:var(--shadow)}
.shop-collection-photo img{width:100%;height:280px;object-fit:cover}
.shop-item{display:flex;gap:18px;align-items:center;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:16px 20px;margin-bottom:14px}
.shop-item .dot{flex:0 0 46px;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;color:#fff;background:var(--cobalt)}
.shop-item h3{margin:0 0 2px;font-size:1.05rem}
.shop-item p{margin:0;color:var(--ink-soft);font-size:.92rem;flex:1}
.shop-item .card-link{white-space:nowrap}

@media (max-width:900px){
  .cards{grid-template-columns:1fr;max-width:520px;margin:0 auto}
  .story{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .value-strip .wrap{grid-template-columns:1fr;gap:16px}
  .hero-banner-inner{margin-left:0}
  /* v2.0.8: mobile top row is logo + search icon + account + bag +
     hamburger only — the full search bar is hidden until the search
     icon is tapped, so nothing overlaps the bag on narrow phones.
     Logo, hamburger and icons all scale up 30% on mobile. */
  .nav-toggle{font-size:1.43rem;padding:10px 14px}
  .brand{order:1}
  .brand-logo{width:68px;height:68px}
  .header-actions{order:3;gap:8px}
  .account-link svg{width:26px;height:26px}
  .bag-link svg{width:29px;height:29px}
  .bag-count{min-width:22px;height:22px;font-size:.78rem}
  .search-toggle{display:inline-flex}
  /* v2.0.9: with the search bar hidden, the actions group needs
     margin-left:auto or it sits in the middle, right after the
     logo, instead of pinned to the right edge. */
  .header-actions{margin-left:auto}
  .header-search{display:none}
  .site-header.search-open .header-inner{flex-wrap:wrap}
  .site-header.search-open .header-search{display:block;order:4;flex:1 1 100%;max-width:none;margin:0;padding:8px 0 0}
  .header-inner{gap:12px;flex-wrap:nowrap}
  .header-nav-row{padding:0}
  .main-nav{display:none}
  .main-nav.open{display:block}
  /* v2.0.6: the header is sticky, so a tall open menu used to hang below
     the screen edge with its bottom items unreachable. Let the open menu
     scroll within the viewport instead, and unstick the header while it
     is open (browsers without :has support still get the scrolling menu). */
  .main-nav.open{max-height:calc(100vh - 170px);max-height:calc(100dvh - 170px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  .site-header:has(.main-nav.open){position:static}
  .main-nav ul{flex-direction:column;gap:0;padding:6px 0 12px}
  .main-nav li{border-top:1px solid var(--line)}
  .main-nav a{display:block;padding:12px 4px}
  .main-nav ul ul{display:block;position:static;min-width:0;border:none;box-shadow:none;padding:0 0 0 16px;background:transparent}
  .main-nav ul ul a{padding:10px 4px}
  .main-nav ul ul ul{padding-left:16px}
  .main-nav .menu-item-has-children > a::after{content:""}
}
@media (max-width:720px){
  .wrap{padding:0 16px}
  .brand-name{font-size:1.15rem}
  .brand-tag{font-size:.62rem}
  .brand-logo{width:57px;height:57px}
  .account-label{display:none}
  .account-link{padding:.45em .7em}
  /* v2.0.8: on narrow phones the top row is icons only (search
     hidden until its icon is tapped), so it always fits. */
  .header-inner{gap:8px}
  .header-actions{gap:6px}
  .nav-toggle{padding:8px 10px}
  .section{padding:52px 0}
}

/* ========== WooCommerce — modern branded styling ========== */
.woocommerce .content-area .wrap{max-width:1140px}

/* Notices */
.woocommerce-message,.woocommerce-info,.woocommerce-error{border-radius:12px;border:1px solid var(--line);background:var(--white);box-shadow:var(--shadow)}
.woocommerce-message{border-top:3px solid var(--cobalt)}
.woocommerce-info{border-top:3px solid var(--lemon)}

/* Buttons */
.woocommerce button.button,.woocommerce a.button,.woocommerce input.button,
.woocommerce #respond input#submit{
  background:var(--green);color:#fff;border:2px solid var(--green);
  border-radius:999px;padding:.85em 1.9em;font-weight:700;
  transition:transform .15s ease,box-shadow .15s ease;
}
.woocommerce button.button:hover,.woocommerce a.button:hover,.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover{
  background:var(--green-deep);border-color:var(--green-deep);color:#fff;
  transform:translateY(-2px);box-shadow:var(--shadow);
}
.woocommerce button.button.alt,.woocommerce a.button.alt{
  background:var(--lemon);border-color:var(--lemon);color:var(--ink);
}
.woocommerce button.button.alt:hover,.woocommerce a.button.alt:hover{
  background:var(--lemon-soft);border-color:var(--lemon-soft);color:var(--ink);
}
.woocommerce button.button:disabled,.woocommerce button.button:disabled:hover{opacity:.55;transform:none;box-shadow:none}

/* ---- v1.2.4: single-product Add to cart in green + larger variation select ---- */
/* v1.3.6: blue (#516697) replaced with brand green site-wide per owner request */
body.single-product.woocommerce div.product form.cart .button.single_add_to_cart_button,
body.single-product .elementor-widget-woocommerce-product-add-to-cart .elementor-button{
  background-color:var(--green) !important;
  border-color:var(--green) !important;
  color:#fff !important;
}
body.single-product.woocommerce div.product form.cart .button.single_add_to_cart_button:hover,
body.single-product .elementor-widget-woocommerce-product-add-to-cart .elementor-button:hover,
body.single-product.woocommerce div.product form.cart .button.single_add_to_cart_button:focus,
body.single-product .elementor-widget-woocommerce-product-add-to-cart .elementor-button:focus{
  background-color:var(--green-deep) !important;
  border-color:var(--green-deep) !important;
  color:#fff !important;
}
.woocommerce div.product form.cart .variations select,
.single-product .variations select{
  font-size:1.15rem !important;
  padding:.7em 2.2em .7em 1em !important;
  min-height:54px;
  min-width:min(100%,300px);
  border-radius:10px;
}
.woocommerce div.product form.cart .variations label{font-size:1.05rem;font-weight:700}

/* ---- v1.2.7: space between the main product image and the thumbnail gallery (all markup variants) ---- */
.single-product .woocommerce-product-gallery ol,
.single-product .woocommerce-product-gallery ul,
.single-product .woocommerce div.product div.images ol,
.single-product .woocommerce div.product div.images ul,
.single-product .elementor-image-gallery,
.single-product .gallery{
  margin-top:30px !important;
  padding-top:8px !important;
}
.single-product .woocommerce-product-gallery .flex-viewport{margin-bottom:24px !important;}

/* ---- v1.3.4: make sure thumbnail taps always land on the thumbnails ---- */
.single-product [class*="thumb"],
.single-product [class*="thumb"] *,
.single-product .elementor-image-gallery,
.single-product .elementor-image-gallery *,
.single-product .gallery,
.single-product .gallery *{
  pointer-events:auto !important;
}

/* ---- v1.3.3: mobile thumbnails — never clip the strip; let it wrap to rows.
   (Replaces v1.3.2's layout rules, which were too aggressive.) ---- */
@media (max-width: 767px){
  .single-product [class*="thumb"],
  .single-product .elementor-image-gallery,
  .single-product .gallery{
    flex-wrap:wrap !important;
    overflow:visible !important;
    max-height:none !important;
  }
}

/* ---- v1.3.1: gaps between each thumbnail ---- */
.single-product [class*="galler"],
.single-product [class*="thumb"]{
  gap:14px !important;
}
.single-product [class*="thumb"] > *,
.single-product .gallery-item{
  margin:7px !important;
}

/* ---- v1.3.6: bulletproof space BETWEEN thumbnails (any gallery markup) ----
 * The old v1.3.0 rule set gap without display:grid/flex, so it did nothing.
 * This forces the strip into a grid and gaps the items. */
.single-product .flex-control-thumbs,
.single-product ol.flex-control-nav.flex-control-thumbs,
.woocommerce div.product .flex-control-thumbs,
.single-product [class*="thumbnails"]{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:14px !important;
  margin:14px 0 0 !important;
  padding:0 !important;
  list-style:none !important;
}
.single-product .flex-control-thumbs li,
.woocommerce div.product .flex-control-thumbs li,
.single-product .elementor-image-gallery .gallery-item,
.single-product .gallery .gallery-item,
.single-product [class*="thumbnails"] li,
.single-product [class*="thumbnails"] > a,
.single-product [class*="thumbnails"] > div{
  margin:0 !important;
  padding:0 !important;
  float:none !important;
  width:auto !important;
}
.single-product .flex-control-thumbs li img,
.single-product [class*="thumbnails"] img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  border-radius:8px;
}

/* ---- user-supplied: pad gallery images ---- */
.woocommerce div.product div.images img {
    display: block;
    width: 100%;
    height: auto;
    box-shadow: none;
    padding-bottom: 30px;
}

/* Sale badge */
.woocommerce span.onsale{
  background:var(--terracotta);color:#fff;font-weight:700;
  min-width:3.2em;min-height:3.2em;line-height:3.2em;border-radius:50%;
  font-size:.85rem;box-shadow:0 4px 12px rgba(0,0,0,.18);
}

/* Star ratings */
.woocommerce .star-rating{color:var(--lemon)}
.woocommerce p.stars a{color:var(--lemon)}

/* ---- Product archive cards ---- */
.woocommerce ul.products{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none}
.woocommerce ul.products li.product{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);margin:0 !important;width:auto !important;
  display:flex;flex-direction:column;transition:transform .18s ease;text-align:left;
}
.woocommerce ul.products li.product:hover{transform:translateY(-4px)}
.woocommerce ul.products li.product a img{
  margin:0;border-radius:0;aspect-ratio:1;object-fit:cover;width:100%;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--serif);font-size:1.15rem;padding:18px 22px 4px;color:var(--ink);
}
.woocommerce ul.products li.product .price{
  color:var(--cobalt);font-weight:700;font-size:1.05rem;padding:0 22px;margin-bottom:6px;
}
.woocommerce ul.products li.product .price del{color:var(--ink-soft);font-weight:400;margin-right:8px}
.woocommerce ul.products li.product .price ins{text-decoration:none}
.woocommerce ul.products li.product .star-rating{margin:0 22px 8px;font-size:.85em}
.woocommerce ul.products li.product .button{margin:auto auto 22px !important;align-self:center}

/* Result count + ordering */
.woocommerce .woocommerce-result-count{color:var(--ink-soft)}
.woocommerce .woocommerce-ordering select{
  border:1px solid var(--line);border-radius:10px;padding:.6em 1em;
  background:var(--white);color:var(--ink);font-size:.95rem;
}

/* Pagination */
.woocommerce nav.woocommerce-pagination ul{border:none;display:flex;gap:8px;justify-content:center}
.woocommerce nav.woocommerce-pagination ul li{border:none}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  border:1px solid var(--line);border-radius:10px;min-width:2.6em;height:2.6em;
  line-height:2.6em;text-align:center;background:var(--white);color:var(--ink);padding:0 .8em;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover{
  background:var(--green);border-color:var(--green);color:#fff;
}

/* ---- Single product ---- */
.woocommerce div.product .product_title{font-size:clamp(1.7rem,3.5vw,2.4rem);margin-bottom:.3em}
.woocommerce div.product p.price,.woocommerce div.product span.price{
  color:var(--cobalt);font-size:1.5rem;font-weight:700;margin-bottom:1em;
}
.woocommerce div.product p.price del,.woocommerce div.product span.price del{
  color:var(--ink-soft);font-weight:400;font-size:1.1rem;margin-right:10px;
}
.woocommerce div.product p.price ins,.woocommerce div.product span.price ins{text-decoration:none}
.woocommerce div.product .woocommerce-product-rating{margin-bottom:1em}
.woocommerce-product-details__short-description{color:var(--ink-soft);margin-bottom:1.5em}
.woocommerce div.product form.cart{margin:1.5em 0;display:flex;gap:12px;flex-wrap:wrap;align-items:stretch}
.woocommerce .quantity .qty{
  border:1px solid var(--line);border-radius:999px;padding:.85em 1em;
  font-size:1rem;width:5em;text-align:center;background:var(--white);color:var(--ink);
}
.woocommerce div.product .woocommerce-tabs{margin:2.5em 0}
.woocommerce div.product .woocommerce-tabs ul.tabs{
  padding:0;display:flex;gap:6px;border:none;margin-bottom:0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  border:1px solid var(--line);border-bottom:none;border-radius:12px 12px 0 0;
  background:var(--cream-2);margin: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{color:var(--ink-soft);font-weight:600;padding:.8em 1.6em}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:var(--white)}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--cobalt)}
.woocommerce div.product .woocommerce-tabs .panel{
  border:1px solid var(--line);border-radius:0 12px 12px 12px;
  background:var(--white);padding:30px;box-shadow:var(--shadow);margin:0;
}
.woocommerce div.product .product_meta{color:var(--ink-soft);font-size:.92rem;border-top:1px solid var(--line);padding-top:1.2em;margin-top:1.5em}
.woocommerce div.product .product_meta a{color:var(--cobalt)}

/* Product gallery */
.woocommerce div.product div.images .flex-control-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:14px}
.woocommerce div.product div.images .flex-control-thumbs li{float:none;width:auto;margin:0}
.woocommerce div.product div.images img{border-radius:var(--radius)}

/* Related / upsells */
.woocommerce .related.products h2,.woocommerce .upsells.products h2{
  font-size:1.6rem;text-align:center;margin-bottom:1.2em;
}
.woocommerce .related.products h2::after,.woocommerce .upsells.products h2::after{
  content:"";display:block;width:56px;height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--lemon),var(--terracotta));margin:12px auto 0;
}

/* Cart + checkout */
.woocommerce table.shop_table{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--white)}
.woocommerce table.shop_table th{background:var(--cream-2);color:var(--ink)}
.woocommerce .cart_totals h2,.woocommerce .woocommerce-checkout h3{font-size:1.4rem}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,
.woocommerce form .form-row select{
  border:1px solid var(--line);border-radius:10px;padding:.75em 1em;background:var(--white);color:var(--ink);
}
.woocommerce form .form-row input.input-text:focus,.woocommerce form .form-row textarea:focus{
  border-color:var(--cobalt);outline:none;box-shadow:0 0 0 3px rgba(30,78,158,.12);
}
#add_payment_method #payment,.woocommerce-cart #payment,.woocommerce-checkout #payment{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
}

/* Widgets */
.woocommerce .widget_price_filter .ui-slider .ui-slider-range{background:var(--cobalt)}
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle{background:var(--lemon);border:2px solid var(--white);box-shadow:0 2px 6px rgba(0,0,0,.2)}
.woocommerce .widget_layered_nav ul li a,.woocommerce .widget_product_categories ul li a{color:var(--ink)}
.woocommerce .widget_layered_nav ul li a:hover,.woocommerce .widget_product_categories ul li a:hover{color:var(--cobalt)}

@media (max-width:900px){
  .woocommerce ul.products{grid-template-columns:repeat(2,1fr);gap:18px}
}
@media (max-width:560px){
  .woocommerce ul.products{grid-template-columns:1fr;max-width:420px;margin:0 auto}
  .woocommerce div.product .woocommerce-tabs ul.tabs{flex-wrap:wrap}
}