/*
Theme Name: Saffelia
Theme URI: https://saffelia.com
Author: Saffelia
Description: Custom lightweight theme for Saffelia, a Bangladesh-based skincare and cosmetics e-commerce brand. Built for speed, security, and an exact match to the approved Saffelia design system. Fully WooCommerce compatible.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: saffelia
*/

/* =========================================================
   1. DESIGN TOKENS (CSS custom properties)
   ========================================================= */
:root{
  --c-bg:#FFFFFF;
  --c-ink:#1C1B19;
  --c-secondary:#55514A;
  --c-muted:#8A857D;
  --c-gold:#B08D57;
  --c-gold-light:#D9C39A;
  --c-divider:#ECE7DE;
  --c-placeholder-bg:#F7F4EE;
  --c-placeholder-icon:#A6A093;
  --c-success:#3E8B5C;
  --c-error:#B23A3A;
  --c-bkash:#E2136E;
  --c-nagad:#EE3E23;
  --c-facebook:#1877F2;
  --c-whatsapp:#25D366;

  --font-heading:'Playfair Display', serif;
  --font-body:'Jost', sans-serif;

  --container-max:1200px;
  --container-narrow:640px;
  --container-pad:40px;

  --header-h-desktop:86px;
}

/* =========================================================
   2. RESET & BASE
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--c-bg);
  color:var(--c-secondary);
  font-family:var(--font-body);
  font-weight:300;
  font-size:15px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--c-gold);text-decoration:none;transition:color .2s ease}
a:hover{color:#8F7343}
button{cursor:pointer;font-family:var(--font-body)}
input,select,textarea{outline:none;font-family:var(--font-body);font-size:14px}
input:focus,select:focus,textarea:focus{border-color:var(--c-gold)}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,h4{font-family:var(--font-heading);color:var(--c-ink);margin:0;font-weight:500}
.screen-reader-text{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.container{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-pad)}
.container-narrow{max-width:var(--container-narrow);margin:0 auto;padding:0 var(--container-pad)}

/* =========================================================
   3. REUSABLE COMPONENTS
   ========================================================= */
.eyebrow-divider{width:44px;height:1.5px;background:var(--c-gold);margin:14px auto 24px}
.eyebrow-divider--left{margin:14px 0 24px}

.badge-pill{display:inline-block;font-size:10px;letter-spacing:.05em;color:var(--c-gold);border:1px solid var(--c-gold-light);padding:3px 8px;white-space:nowrap}

.placeholder-box{
  background:var(--c-placeholder-bg);
  border:1px solid var(--c-divider);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  color:var(--c-placeholder-icon);
}
.placeholder-box svg{opacity:.9}
.placeholder-box span{font-family:monospace;font-size:11px}

.card-name{font-family:var(--font-heading);font-size:18px;color:var(--c-ink)}
.price{font-family:var(--font-body);font-size:19px;font-weight:500;color:var(--c-ink)}
.price-strike{font-family:var(--font-body);font-size:14px;color:var(--c-placeholder-icon);text-decoration:line-through}

.btn{display:inline-block;border:none;font-size:13px;letter-spacing:.04em;text-align:center;transition:background .2s ease,color .2s ease}
.btn-outline{width:100%;padding:11px 0;background:#FFFFFF;border:1px solid var(--c-ink);color:var(--c-ink)}
.btn-outline:hover{background:var(--c-ink);color:#FFFFFF}
.btn-solid{padding:16px 56px;background:var(--c-ink);color:#FFFFFF;font-size:14px;letter-spacing:.08em}
.btn-solid:hover{background:#332F29;color:#FFFFFF}
.btn-gold-outline{border:1px solid var(--c-gold);color:var(--c-gold);background:#fff;padding:11px 0;width:100%;font-size:13px;letter-spacing:.04em}
.btn-gold-outline:hover{background:var(--c-gold);color:#fff}

.trust-badge{border:1px solid var(--c-gold-light);padding:26px 12px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.trust-badge svg{flex-shrink:0}
.trust-badge-icon{width:44px;height:44px;border-radius:50%;background:#fff;border:1.5px solid var(--c-gold);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.trust-badge span{font-size:13px;color:var(--c-ink)}

.section-title{text-align:center;margin:0 0 40px}
.section-title h2{font-size:32px}

/* =========================================================
   4. HEADER
   ========================================================= */
.site-header{background:var(--c-bg);position:relative;z-index:100}

.header-row{
  max-width:var(--container-max);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:24px var(--container-pad);
}
.site-logo{display:inline-flex;align-items:center;flex-shrink:0}
.site-logo img{height:36px;width:auto}
.site-logo-text{font-family:var(--font-heading);font-size:26px;color:var(--c-ink)}

.primary-nav ul{display:flex;gap:44px}
.primary-nav a{
  font-family:var(--font-body);font-size:15px;color:var(--c-ink);
  padding-bottom:8px;border-bottom:1.5px solid transparent;
}
.primary-nav li.current-menu-item > a,
.primary-nav a.is-active{border-bottom-color:var(--c-gold)}

.header-icons{display:flex;align-items:center;gap:22px;flex-shrink:0}
.icon-btn{background:none;border:none;padding:0;display:inline-flex;align-items:center;position:relative;color:var(--c-ink)}
.icon-btn svg{display:block}
.cart-icon-link{position:relative}
.cart-count{
  position:absolute;top:-8px;right:-10px;background:var(--c-gold-light,#E8D9BC);color:var(--c-ink);
  font-size:11px;font-weight:600;min-width:18px;height:18px;padding:0 4px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;line-height:1;
  box-shadow:0 0 0 2px #fff;
  opacity:1;transition:opacity .2s ease,transform .25s cubic-bezier(.34,1.56,.64,1);
}
.cart-count.is-empty{display:none}
/* Hides the number until JS confirms it's the real, per-visitor count (see header.php / wp_footer script) */
.cart-count.cart-count-loading{opacity:0}

/* Logged-in indicator on the header account icon -- toggled by JS (functions.php),
   not server-rendered, so a full-page-cached copy of the page never shows the
   wrong state for a different visitor (same reasoning as the cart count above). */
.account-icon-link{transition:color .2s ease}
/* BUG FIX: on WooCommerce template pages (Shop/Cart/Checkout/My Account/product
   pages -- anywhere the <body> gets WooCommerce's own "woocommerce-page" class),
   a separately-injected critical-CSS block on this site forces header icon links
   back to black via a more specific selector (".woocommerce-page .header-icons a"),
   silently overriding the gold "logged in" color below and leaving shoppers unable
   to tell they're logged in on the very pages where it matters most. Scoping
   !important to this exact, narrow selector -- a class combination that only ever
   exists on the one account icon, only while logged in, added by the existing JS
   in functions.php -- restores the intended color there without touching any
   other icon, link, or element anywhere else on the site. */
.account-icon-link.is-logged-in{color:var(--c-gold) !important}
.account-icon-link.is-logged-in svg{filter:drop-shadow(0 0 4px rgba(176,141,87,.7))}
/* Little "pop" whenever the count actually changes (Cart page qty +/-, remove, Add to Cart, etc.) */
.cart-count.cart-count-bump{animation:saffelia-cart-count-bump .35s ease}
@keyframes saffelia-cart-count-bump{
  0%{transform:scale(1)}
  40%{transform:scale(1.3)}
  100%{transform:scale(1)}
}

.menu-toggle{display:none;flex-direction:column;gap:5px;width:22px;border:none;background:none;padding:0;cursor:pointer}
.menu-toggle span{display:block;width:100%;height:1.6px;background:var(--c-ink)}

/* Search panel */
.search-panel{border-top:1px solid var(--c-divider);background:#fff}
.search-panel .search-form{
  max-width:var(--container-max);margin:0 auto;padding:16px var(--container-pad);
  display:flex;gap:12px;
}
.search-form input[type="search"]{flex:1;border:1px solid var(--c-divider);padding:12px 14px;font-size:14px}
.search-form button{background:var(--c-ink);color:#fff;border:none;padding:0 24px;font-size:13px;letter-spacing:.06em}

/* Category strip */
.category-strip-wrap{
  border-top:1px solid var(--c-divider);border-bottom:1px solid var(--c-divider);
  position:relative;display:flex;align-items:center;
}
.category-strip{
  max-width:var(--container-max);margin:0 auto;flex:1;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
}
.category-strip::-webkit-scrollbar{display:none}
.category-strip ul{display:flex;gap:56px;justify-content:center;padding:14px var(--container-pad);width:max-content;margin:0 auto}
.category-strip a{font-size:13px;font-weight:300;letter-spacing:.07em;color:var(--c-secondary);white-space:nowrap}
.category-strip a:hover{color:var(--c-gold)}

.strip-arrow{
  background:#fff;border:1px solid var(--c-divider);color:var(--c-ink);
  width:32px;height:32px;border-radius:50%;
  align-items:center;justify-content:center;flex-shrink:0;
  display:none; /* shown on desktop only, see media query */
}
.strip-arrow-left{margin-left:12px}
.strip-arrow-right{margin-right:12px}

/* Mobile off-canvas nav (hidden on desktop) */
.mobile-nav{display:none}
.mobile-nav-close{
  position:absolute;top:20px;right:20px;font-size:28px;line-height:1;
  background:none;border:none;color:var(--c-ink);cursor:pointer;padding:4px;
}

/* =========================================================
   5. FOOTER
   ========================================================= */
.site-footer{background:var(--c-bg);border-top:1px solid var(--c-divider);padding:64px var(--container-pad) 32px}
.footer-grid{display:grid;grid-template-columns:1.3fr 0.9fr 0.9fr 0.9fr;gap:36px}
.footer-brand img{height:34px;width:auto;margin-bottom:14px}
.footer-col h4{font-size:17px;margin-bottom:10px}
.footer-col .eyebrow-divider--left{width:22px;height:1px}
.footer-col ul{display:flex;flex-direction:column;gap:11px}
.footer-col a{font-size:14px;font-weight:500;color:var(--c-ink)}
.footer-tagline{font-size:13px;font-weight:400;letter-spacing:.06em;color:var(--c-secondary)}
.footer-col a:hover{color:var(--c-gold)}

.social-row{display:flex;gap:12px}
.social-circle{
  width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--c-gold-light);background:transparent;color:var(--c-ink);
  font-size:14px;transition:background .2s ease,color .2s ease,border-color .2s ease;
}
/* BUG FIX (root cause found): this used to hover to a near-black background
   (var(--c-ink)) with the icon set to white via `color` — but on the live
   site the icon turned GOLD on hover instead, and stayed gold even after
   the first pass at this fix. Root cause: `.footer-col a:hover{color:var(
   --c-gold)}` a bit further up in this file is MORE specific than plain
   `.social-circle:hover` (it has an extra element-type selector, "a"), so
   it was always winning the cascade and overriding whatever color this
   rule set — the icons are inline SVGs using `fill/stroke="currentColor"`,
   so they simply inherited that gold. Adding `!important` here guarantees
   this rule wins instead, so the icon reliably stays the same dark color
   it always is. Background is also a light, neutral, non-gold tone now
   (not var(--c-gold-light)) so there's no warm hue left for the icon to
   visually blend into even if color inheritance were ever contested again. */
.social-circle:hover{background:var(--c-placeholder-bg,#F7F4EE);border-color:var(--c-gold);color:var(--c-ink) !important}

.footer-divider{height:1px;background:var(--c-divider);margin:48px 0 28px}
.payment-row{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:28px}
.payment-pill{border-radius:4px;padding:10px 20px;font-size:13px;font-weight:500;color:#fff;display:inline-flex;align-items:center;gap:8px}
.payment-pill.payment-logo{background:#fff;border:1px solid var(--c-divider);padding:8px 14px}
.payment-pill.payment-logo img{height:44px;width:auto;display:block}
.payment-pill.cod{border:1px solid var(--c-divider);background:none;font-size:12px;letter-spacing:.05em;color:var(--c-secondary);font-weight:400}

.footer-legal-row{text-align:center;margin-bottom:12px}
.footer-legal-row ul{display:flex;justify-content:center;gap:20px}
.footer-legal-row a{font-size:12px;color:var(--c-muted)}
.footer-legal-row a:hover{color:var(--c-gold)}
.footer-copyright{text-align:center;font-size:12px;font-weight:300;letter-spacing:.04em;color:var(--c-muted)}

/* =========================================================
   6. HOME PAGE
   ========================================================= */
.home-hero-section{padding:56px 0 0}
.hero-row{display:flex;gap:24px;margin-bottom:96px}
.hero-banner{flex:1;position:relative;aspect-ratio:68/35;overflow:hidden}
.hero-slide{position:absolute;inset:0;padding:40px;opacity:0;transition:opacity .6s ease;pointer-events:none}
.hero-slide.is-active{opacity:1;pointer-events:auto}
.hero-banner-copy{display:none}
.hero-dots{position:absolute;bottom:40px;right:40px;display:flex;gap:8px;z-index:5}
.hero-dot{width:8px;height:8px;border-radius:50%;background:#D9D3C6;border:none;padding:0;cursor:pointer;transition:background .2s ease}
.hero-dot.is-active{background:var(--c-gold)}

.hero-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.85);border:1px solid var(--c-divider);color:var(--c-ink);
  display:none;align-items:center;justify-content:center;cursor:pointer;
}
.hero-arrow-prev{left:16px}
.hero-arrow-next{right:16px}
@media (min-width:1024px){
  .hero-arrow{display:flex}
}
.trust-col{display:flex;flex-direction:column;gap:14px;width:280px;flex-shrink:0}
.trust-col .trust-badge{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}

.product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px 32px}
.product-card{display:flex;flex-direction:column;gap:12px;overflow:hidden}
.product-card .placeholder-box{aspect-ratio:1/1;width:100%}
.product-card > a:first-child{display:block;width:100%;position:relative}
.product-card > a:first-child img{
  width:100% !important;height:auto !important;aspect-ratio:1/1;object-fit:cover;
  display:block;
}
.product-card-meta{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;flex-wrap:wrap}
.product-card-meta .card-name{flex:1 1 auto;min-width:0}
.product-card-meta .badge-pill{flex-shrink:0}
.product-card-price{display:flex;align-items:baseline;gap:10px}

.more-products-row{text-align:center;margin:48px 0 0}
.more-products-row .btn{width:auto;padding:14px 40px}

.category-cards-row{display:flex;gap:24px;overflow-x:auto;padding-bottom:8px;margin:0 0 80px}
.category-card{position:relative;height:320px;width:400px;flex-shrink:0;display:block;text-decoration:none;overflow:hidden}
.category-card img{width:100%;height:100%;object-fit:cover;display:block}
.category-card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.35), transparent 50%);
  pointer-events:none;
}
.category-card.placeholder-box::after{display:none} /* No gradient needed over the plain placeholder box. */
.category-card-label{position:absolute;bottom:22px;left:22px;font-family:var(--font-heading);font-size:22px;color:var(--c-ink);z-index:1}
.category-card:not(.placeholder-box) .category-card-label{color:#fff}

.trust-strip{background:var(--c-placeholder-bg);padding:28px var(--container-pad);text-align:center}
.trust-strip span{font-size:13px;letter-spacing:.06em;color:var(--c-secondary)}

/* =========================================================
   7. ABOUT PAGE
   ========================================================= */
.about-banner{position:relative;height:420px;overflow:hidden}
.about-banner img{width:100%;height:100%;object-fit:cover}
.about-banner-overlay{position:absolute;inset:0;background:rgba(0,0,0,.22);display:flex;align-items:center;justify-content:center}
.about-banner-overlay-inner{text-align:center;padding:0 24px}
.about-banner-overlay-inner h1{font-size:44px;color:#fff}
.about-banner-overlay-inner .eyebrow-divider{background:var(--c-gold)}

.about-story{max-width:var(--container-narrow);margin:0 auto;text-align:center;padding:80px 0 64px}
.about-story h2{font-size:32px}
.about-story p{font-size:15px;font-weight:300;line-height:1.9;color:var(--c-secondary)}

.about-badges-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-bottom:72px}
.about-cta{text-align:center;padding:0 0 96px}

/* =========================================================
   8. CONTACT PAGE
   ========================================================= */
.contact-heading{text-align:center;padding:64px 0 0}
.contact-heading h1{font-size:38px}
.contact-info-row{display:flex;align-items:center;gap:16px;padding:8px 0}
.contact-info-row svg{flex-shrink:0}
.contact-form{padding:32px 0 0;display:flex;flex-direction:column;gap:20px}
.contact-form label{display:block;font-size:13px;color:var(--c-secondary);margin-bottom:6px}
.contact-form input,.contact-form textarea{width:100%;border:1px solid var(--c-divider);padding:13px 14px}
.contact-form textarea{resize:vertical;min-height:120px}
.contact-social{display:flex;justify-content:center;gap:14px;padding:32px 0 80px}
.form-notice{padding:14px 16px;margin-bottom:20px;font-size:14px}
.form-notice.success{background:#F0F6F2;color:var(--c-success);border:1px solid var(--c-success)}
.form-notice.error{background:#FBEFEF;color:var(--c-error);border:1px solid var(--c-error)}

/* =========================================================
   9. GENERIC / POLICY PAGES
   ========================================================= */
.policy-page{padding:64px 0 120px}
.policy-page h1{font-size:34px;margin-bottom:28px}
.policy-page h3{font-size:19px;margin-bottom:8px}
.policy-page section{margin-bottom:28px}
.policy-page p{font-size:15px}

/* =========================================================
   10. WOOCOMMERCE OVERRIDES
   ========================================================= */
.woocommerce, .woocommerce *{font-family:var(--font-body);color:var(--c-secondary)}
.woocommerce h1,.woocommerce h2,.woocommerce h3{font-family:var(--font-heading);color:var(--c-ink);font-weight:500}
.woocommerce a{color:var(--c-gold)}
.woocommerce a:hover{color:#8F7343}

.woocommerce ul.products li.product{border:1px solid var(--c-divider);padding:16px;transition:border-color .2s ease}
.woocommerce ul.products li.product:hover{border-color:var(--c-gold-light)}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:var(--font-heading);font-size:18px;color:var(--c-ink)}
.woocommerce ul.products li.product .price{font-family:var(--font-body);font-weight:500;color:var(--c-ink)}
.woocommerce ul.products li.product .price del{color:var(--c-placeholder-icon);font-weight:300}
.woocommerce ul.products li.product .price ins{text-decoration:none}

.woocommerce a.button,.woocommerce button.button,
.woocommerce .add_to_cart_button,.woocommerce .single_add_to_cart_button{
  background:var(--c-ink) !important;color:#fff !important;border:none;border-radius:0;
  padding:13px 32px;font-size:13px;letter-spacing:.04em;text-transform:none;transition:background .2s ease;
}
.woocommerce a.button:hover,.woocommerce button.button:hover,
.woocommerce .add_to_cart_button:hover,.woocommerce .single_add_to_cart_button:hover{background:#332F29 !important;color:#fff !important}

.woocommerce ul.products li.product .add_to_cart_button{background:#fff !important;color:var(--c-ink) !important;border:1px solid var(--c-ink) !important;width:100%}
.woocommerce ul.products li.product .add_to_cart_button:hover{background:var(--c-ink) !important;color:#fff !important}
/* Tighter padding than the generic button rule — 28px each side was too
   wide for a narrow 2-column mobile card, wrapping "Add to cart" onto
   two lines even though there was enough width with tighter padding. */
.woocommerce ul.products li.product .add_to_cart_button{
  padding:10px 8px !important;
  white-space:nowrap !important;
  margin-top:auto !important;
}

.woocommerce div.product .saffelia-product-category-eyebrow{
  font-size:12px;letter-spacing:.1em;color:var(--c-gold);text-transform:uppercase;
}
.woocommerce div.product .product_title{font-family:var(--font-heading);font-size:32px;color:var(--c-ink)}

/* Breadcrumb (Home / Shop / [Category]) */
.woocommerce-breadcrumb{font-size:13px;color:var(--c-muted);margin-bottom:32px}
.woocommerce-breadcrumb a{color:var(--c-secondary)}

/* Gallery thumbnails — active one gets a gold border, matching the design. */
.woocommerce div.product .flex-control-thumbs li img{
  border:1.5px solid var(--c-divider);transition:border-color .2s ease;
}
.woocommerce div.product .flex-control-thumbs li img.flex-active{
  border-color:var(--c-gold);
}
.woocommerce div.product p.price,.woocommerce div.product span.price{font-family:var(--font-body);font-size:22px;font-weight:500;color:var(--c-ink)}
.woocommerce div.product .single_add_to_cart_button{background:#fff !important;color:var(--c-gold) !important;border:1px solid var(--c-gold) !important}
.woocommerce div.product .single_add_to_cart_button:hover{background:var(--c-gold) !important;color:#fff !important}

.woocommerce div.product .woocommerce-product-details__short-description ul li{list-style:none;padding-left:24px;position:relative;margin-bottom:8px}
.woocommerce div.product .woocommerce-product-details__short-description ul li::before{content:"✓";position:absolute;left:0;color:var(--c-gold)}

.woocommerce div.product .woocommerce-tabs ul.tabs li a{font-family:var(--font-heading);color:var(--c-ink)}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{border-bottom:2px solid var(--c-gold)}

.woocommerce .related.products>h2{font-family:var(--font-heading);text-align:center;font-size:32px;color:var(--c-ink)}

.woocommerce-cart table.cart{border:none}
.woocommerce-cart table.cart th{font-weight:400;color:var(--c-secondary);border-bottom:1px solid var(--c-divider)}
.woocommerce-cart table.cart td{border-bottom:1px solid var(--c-divider);vertical-align:middle}
.woocommerce-cart table.cart td.product-name a{font-family:var(--font-heading);color:var(--c-ink)}
.woocommerce-cart .quantity input.qty{border:1px solid var(--c-divider);text-align:center}
.woocommerce-cart .cart-collaterals .cart_totals{border:1px solid var(--c-gold-light);padding:24px}

/* Cart/Checkout quantity stepper — WooCommerce Blocks already includes
   real, working +/− buttons natively; these are the actual, stable,
   documented public class names WooCommerce Blocks itself uses (not
   private internals), confirmed via WooCommerce's own developer docs. */
.wc-block-components-quantity-selector{
  border:1px solid var(--c-gold-light) !important;
}
.wc-block-components-quantity-selector__input{
  color:var(--c-ink) !important;font-family:var(--font-body) !important;
}
.wc-block-components-quantity-selector__button{
  color:var(--c-gold) !important;
}
.wc-block-components-quantity-selector__button:hover{
  background:var(--c-placeholder-bg) !important;
}
.woocommerce-cart .cart_totals h2{font-family:var(--font-heading);font-size:20px}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button{background:var(--c-ink) !important;color:#fff !important;width:100%;text-align:center;padding:16px 0 !important;font-size:14px;letter-spacing:.06em}

.woocommerce-checkout h3{font-family:var(--font-heading);font-size:20px;color:var(--c-ink)}
.woocommerce-checkout .form-row label{font-size:13px;color:var(--c-secondary)}
.woocommerce-checkout .form-row input.input-text,.woocommerce-checkout .form-row select,.woocommerce-checkout .form-row textarea{border:1px solid var(--c-divider);padding:13px 14px}
.woocommerce-checkout .form-row input.input-text:focus{border-color:var(--c-gold)}
.woocommerce-checkout ul.payment_methods li{border:1px solid var(--c-divider);padding:12px 16px;margin-bottom:8px}
.woocommerce-checkout ul.payment_methods li.woocommerce-payment-method--selected{border-color:var(--c-gold)}
.woocommerce-checkout #order_review{border:1px solid var(--c-gold-light);padding:24px}
.woocommerce-checkout table.shop_table{border:none}
.woocommerce-checkout table.shop_table td,.woocommerce-checkout table.shop_table th{border-bottom:1px solid var(--c-divider)}
.woocommerce-checkout #place_order{background:var(--c-ink) !important;color:#fff !important;width:100%;padding:16px 0 !important;font-size:14px;letter-spacing:.06em}
.woocommerce-checkout #place_order:hover{background:#332F29 !important}

/* Order status pills (My Account > Orders) */
.woocommerce-orders-table__cell-order-status mark.order-status,
.woocommerce ul.order_details li,
.woocommerce-order-overview__status{font-weight:500}
.status-completed,.status-delivered{color:var(--c-success)}
.status-processing{color:var(--c-gold)}

/* =========================================================
   11. RESPONSIVE — TABLET (600px–1023px)
   ========================================================= */
@media (max-width:1023px){
  .primary-nav{display:none}
  .menu-toggle{display:flex}
  .mobile-nav{
    display:block;position:fixed;inset:0 0 0 auto;width:min(320px,85vw);height:100vh;
    background:#fff;transform:translateX(100%);transition:transform .25s ease;
    padding:32px 24px;overflow-y:auto;z-index:200;
  }
  .mobile-nav.is-open{transform:translateX(0)}
  .mobile-nav ul{display:flex;flex-direction:column;gap:22px}
  .mobile-nav a{font-size:16px;color:var(--c-ink)}
  .nav-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:150}
  .nav-overlay.is-open{display:block}

  /* FIX: previously the hero banner stayed side-by-side with the
     fixed 280px trust column all the way down to 599px, squeezing
     the banner's WIDTH while its height stayed fixed at 420px —
     badly distorting the aspect-ratio on tablets and cropping most
     of the image away. Stacking here (same treatment mobile already
     gets) means the banner is always full-width, and the aspect-ratio
     rule above keeps its shape identical to desktop at every size. */
  .hero-row{flex-direction:column;gap:24px}
  .hero-banner{width:100%;flex:none}
  .trust-col{flex-direction:row;width:100%;gap:10px}

  .strip-arrow{display:none !important}
  .category-strip ul{justify-content:flex-start}

  .product-grid{grid-template-columns:repeat(2,1fr);gap:24px}
  .about-badges-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}

/* Desktop-only: show scroll arrows on category strip */
@media (min-width:1024px){
  .category-strip-wrap:hover .strip-arrow,
  .strip-arrow.is-visible{display:flex}
}

/* =========================================================
   12. RESPONSIVE — MOBILE (max 599px), matches mobile mockup
   ========================================================= */
@media (max-width:599px){
  .header-row{padding:18px 20px;gap:16px}
  .site-logo img{height:32px}
  .header-icons{gap:16px}
  .category-strip ul{gap:24px;padding:14px 20px}
  .search-panel .search-form{padding:14px 20px}

  .home-hero-section{padding:28px 20px 0}
  .hero-row{flex-direction:column;gap:24px;margin-bottom:52px}
  .hero-banner{width:100%;flex:none}
  .trust-col{flex-direction:row;width:100%;gap:10px}
  .trust-badge{flex:1;padding:14px 8px}

  .section-title{margin:0 0 28px}
  .section-title h2{font-size:26px}

  .product-grid{grid-template-columns:1fr;gap:32px}
  .category-card{width:82vw;height:260px}
  .about-badges-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:24px}
  .footer-grid .footer-brand,
  .footer-grid .footer-connect{grid-column:1 / -1}

  .about-banner-overlay-inner h1{font-size:28px}
  .contact-heading h1{font-size:28px}
  .policy-page{padding:40px 0 80px}
  .policy-page h1{font-size:26px}

  .container,.container-narrow{padding:0 20px}
}

/* =========================================================
   13. PAGE TRANSITIONS (native browser feature, zero JS/weight —
   browsers that don't yet support it just navigate normally,
   nothing breaks either way)
   ========================================================= */
@view-transition {
  navigation: auto;
}

/* =========================================================
   14. HOVER EFFECTS & MICRO-ANIMATIONS (subtle, on-brand)
   ========================================================= */
.product-card { transition: transform .2s ease; }
.product-card:hover { transform: translateY(-3px); }

.category-card, .about-banner, .hero-banner { transition: filter .25s ease; }
.category-card:hover, .about-banner:hover { filter: brightness(1.03); }

.trust-badge { transition: border-color .2s ease, transform .2s ease; }
.trust-badge:hover { border-color: var(--c-gold); transform: translateY(-2px); }

.icon-btn, .strip-arrow, .social-circle { transition: transform .18s ease, opacity .18s ease; }
.icon-btn:hover, .strip-arrow:hover { transform: scale(1.08); }
/* BUG FIX: the opacity fade below made the icon+background fade together
   on hover, which is what was reading as the icon "turning gold" (a faded
   dark icon over a warm-toned background blends towards that background's
   hue). Keeping only the lift, at full opacity, so the icon stays crisp
   and clearly its own dark color, not blended with anything behind it. */
.social-circle:hover { transform: translateY(-2px); opacity: 1; }

.woocommerce ul.products li.product { transition: border-color .2s ease, transform .2s ease; }
.woocommerce ul.products li.product:hover { transform: translateY(-3px); }

/* =========================================================
   15. LOADING SCREEN (shown briefly while the page loads,
   hidden automatically by assets/js/main.js)
   ========================================================= */
.saffelia-loading-screen{
  position:fixed;inset:0;z-index:9999;background:#FFFFFF;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  transition:opacity .35s ease;
}
.saffelia-loading-screen.is-hidden{opacity:0;pointer-events:none}
.saffelia-loading-screen img{width:48px;height:auto;opacity:.9}
.saffelia-loading-spinner{
  width:26px;height:26px;border-radius:50%;
  border:2px solid var(--c-divider);border-top-color:var(--c-gold);
  animation:saffelia-spin .8s linear infinite;
}
@keyframes saffelia-spin{ to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .saffelia-loading-spinner{ animation:none; }
  .product-card:hover, .trust-badge:hover { transform:none; }
}

/* Search results banner */
.saffelia-search-banner{
  display:flex;justify-content:space-between;align-items:center;
  border:1px solid var(--c-divider);background:var(--c-placeholder-bg);
  padding:14px 20px;margin-bottom:24px;font-size:14px;color:var(--c-ink);
}
.saffelia-search-banner__clear{color:var(--c-gold);text-decoration:underline}

/* Related products: small "+" quick-add circle instead of a full button,
   matching the design spec — this only targets the related-products
   section specifically, not the main grid/single-product buttons. */
.woocommerce .related.products ul.products li.product .add_to_cart_button{
  width:32px;height:32px;padding:0;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:0;line-height:1;position:relative;
}
.woocommerce .related.products ul.products li.product .add_to_cart_button::before{
  content:"+";font-size:18px;line-height:1;
}

/* =========================================================
   16. WOOCOMMERCE MY ACCOUNT (Login / Register / Profile / Orders)
   Baseline brand styling — colors, fonts, spacing matching the rest of
   the site. This does not attempt the exact custom avatar-circle layout
   from the design mockup (that needs deeper template work); it brings
   WooCommerce's own native account page in line with the brand instead.
   ========================================================= */
.woocommerce-account .woocommerce-MyAccount-navigation ul{
  display:flex;flex-direction:column;gap:4px;border:1px solid var(--c-divider);padding:12px;
}
.woocommerce-account .woocommerce-MyAccount-navigation a{
  display:block;padding:10px 12px;font-size:14px;color:var(--c-secondary);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
  color:var(--c-ink);border-left:2px solid var(--c-gold);background:var(--c-placeholder-bg);
}
.woocommerce-account .woocommerce-MyAccount-content{
  border:1px solid var(--c-divider);padding:32px;
}
.woocommerce-form-login, .woocommerce-form-register, .woocommerce-EditAccountForm{
  max-width:var(--container-narrow);margin:0 auto;
}
.woocommerce-form-login .form-row label,
.woocommerce-form-register .form-row label,
.woocommerce-EditAccountForm .form-row label{font-size:13px;color:var(--c-secondary)}
.woocommerce-form-login input.input-text,
.woocommerce-form-register input.input-text,
.woocommerce-EditAccountForm input.input-text{border:1px solid var(--c-divider);padding:12px 14px}
.woocommerce-form-register select.input-text{
  border:1px solid var(--c-divider);padding:12px 14px;width:100%;background:#fff;
}
.woocommerce-form-register input.input-text:disabled{background:var(--c-placeholder-bg,#F7F4EE);color:var(--c-muted)}
.woocommerce-form-login button[type="submit"], .woocommerce-form-register button[type="submit"]{
  background:var(--c-ink) !important;color:#fff !important;border:none;
  padding:14px 32px;font-size:13px;letter-spacing:.06em;
}
.woocommerce-orders-table .order-status.status-completed{color:var(--c-success);font-weight:500}
.woocommerce-orders-table .order-status.status-processing{color:var(--c-gold);font-weight:500}

/* =========================================================
   18. WOOCOMMERCE SHOP ARCHIVE — product grid
   Previously had ZERO custom CSS; WooCommerce's default markup was
   rendering with no grid, no card spacing, no image sizing — this is
   the main reason the Shop page looked broken/plain.
   ========================================================= */
.woocommerce-page #secondary{display:none} /* safety: sidebar removed in PHP, this hides it if a plugin/update ever re-adds it */

.woocommerce ul.products{
  display:grid !important;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
  list-style:none;margin:0 0 40px;padding:0;
}
/* BUG FIX: WooCommerce's own default CSS adds a clearfix ::before/::after
   (content:" "; display:table) to ul.products, meant for the old
   float-based layout. Since this element is now display:grid, those
   pseudo-elements become real phantom grid items — occupying a cell of
   their own — which is exactly why one product sat alone and the grid
   skipped a slot instead of showing 2-3 products per row. */
.woocommerce ul.products::before,
.woocommerce ul.products::after{
  content:none !important;display:none !important;
}
.woocommerce ul.products li.product{
  width:100% !important;margin:0 !important;float:none !important;
  display:flex;flex-direction:column;gap:10px;position:relative;
}
.woocommerce ul.products li.product a img{
  width:100%;aspect-ratio:1/1;object-fit:cover;
  background:var(--c-placeholder-bg);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--font-heading);font-size:16px;font-weight:500;color:var(--c-ink);margin:0;
}
.woocommerce ul.products li.product .price{
  font-family:var(--font-body);font-size:16px;color:var(--c-ink);display:block;margin:0;
}
.woocommerce ul.products li.product .price del{color:var(--c-muted);font-size:13px}
.woocommerce ul.products li.product .price ins{text-decoration:none}
.woocommerce span.onsale{
  position:absolute;top:10px;right:10px;left:auto;
  background:var(--c-gold);color:#fff;border-radius:50%;
  width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:500;letter-spacing:.02em;margin:0;z-index:2;
}
/* Homepage bestseller cards live outside any ".woocommerce"-classed
   wrapper (the front page isn't recognized by WooCommerce as a shop
   page, so that class never gets added there), so the general rule
   above never matches there. This duplicates the same visual styling,
   scoped to .product-card specifically, so the badge looks identical
   on the homepage without depending on an ancestor class that isn't
   present on that page. */
.product-card span.onsale{
  position:absolute;top:10px;right:10px;left:auto;
  background:var(--c-gold);color:#fff;border-radius:50%;
  width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:500;letter-spacing:.02em;margin:0;z-index:2;
}
/* BUG FIX (confirmed from real DOM this time): the onsale badge is a
   SIBLING of .woocommerce-product-gallery — both are direct children
   of the product wrapper div (<div id="product-XXX" class="product...">)
   — it is NOT nested inside the gallery. The previous selector
   ".woocommerce-product-gallery .onsale" is a descendant selector that
   could only ever match a badge nested inside the gallery, so it never
   matched anything here and silently did nothing. Targeting the actual
   parent (.product) instead, and using !important to beat the generic
   ".woocommerce span.onsale{right:10px}" rule that was otherwise
   winning and keeping it in the same corner as the zoom trigger. */
.single-product div.product{ position:relative; }
.single-product div.product > span.onsale{
  left:10px !important;right:auto !important;top:10px !important;z-index:3 !important;
}
.woocommerce-product-gallery{ position:relative; }
.woocommerce-product-gallery__trigger{ z-index:99; }
.woocommerce nav.woocommerce-pagination ul{display:flex;justify-content:center;gap:6px;border:none}
.woocommerce nav.woocommerce-pagination ul li{border:none}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border:1px solid var(--c-divider);color:var(--c-ink);font-size:13px;
}
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--c-ink);color:#fff;border-color:var(--c-ink)}

@media (max-width:1023px){
  .woocommerce ul.products{grid-template-columns:repeat(2,1fr);gap:24px}
}
@media (max-width:599px){
  .woocommerce ul.products{grid-template-columns:repeat(2,1fr);gap:16px}
}

/* Shop result-count / ordering row */
/* BUG FIX: WooCommerce's own CSS applies float:left to .woocommerce-result-count
   and float:right to .woocommerce-ordering, expecting the theme to clear
   those floats afterward. Nothing here did, which collapses margins and
   makes the Sort dropdown appear to float in a seemingly disconnected
   spot with large gaps — this is a well-documented, common WooCommerce
   theming issue, not something specific to this site. Removing the
   floats entirely and giving both a predictable block layout fixes it. */
.woocommerce-result-count{
  float:none !important;display:block;
  font-size:13px;color:var(--c-muted);margin:0 0 12px;
}
.woocommerce-ordering{
  float:none !important;display:block;margin:0 0 24px;
}
.woocommerce-ordering select{
  border:1px solid var(--c-divider);padding:10px 12px;font-size:13px;
  width:100%;max-width:280px;
}
/* Belt and braces: guarantee nothing above the product grid can leave a
   stray float in the flow, regardless of what order WooCommerce and our
   own filter bar happen to render in. */
/* BUG FIX: WooCommerce's own default page wrapper (#primary > #main,
   used on Shop, Single Product, Cart, Checkout, and My Account) never
   had any horizontal padding or max-width in this theme at all — it was
   rendering edge-to-edge. This was being masked by CSS from elsewhere
   (Additional CSS) that has since been removed, revealing the real gap.
   Fixing it properly here instead of relying on Additional CSS again. */
#primary.content-area{
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 var(--container-pad);
  box-sizing:border-box;
}
@media (max-width:599px){
  #primary.content-area{ padding:0 20px; }
}

.woocommerce-page .content-area::before,
.woocommerce-page .content-area::after{content:"";display:table;clear:both}

/* Shop attribute filter dropdowns */
.saffelia-shop-filters{
  display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px;
}
.saffelia-shop-filter-select{
  border:1px solid var(--c-divider);padding:10px 14px;font-size:15px;
  background:#fff;color:var(--c-secondary);min-width:140px;
}
.saffelia-shop-filters__submit{width:auto;padding:10px 24px}
.saffelia-shop-filters__reset{
  display:inline-block;font-size:14px;color:var(--c-secondary);text-decoration:underline;
  margin:-8px 0 20px;
}

/* =========================================================
   19. BUTTONS, EVERYWHERE — WooCommerce classic + Blocks
   Unifies "Add to cart", "Proceed to Checkout", "Place Order", coupon
   apply, and quantity steppers to the same brand look already used by
   .btn-solid/.btn-outline elsewhere on the site, instead of each
   plugin/browser default look.
   ========================================================= */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button{
  background:var(--c-ink) !important;
  color:#fff !important;
  border:none !important;
  border-radius:0 !important;
  font-family:var(--font-body) !important;
  font-weight:400 !important;
  font-size:13px !important;
  letter-spacing:.06em !important;
  padding:14px 28px !important;
  box-shadow:none !important;
  text-transform:none !important;
  transition:background .2s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.wc-block-components-button:hover{
  background:#332F29 !important;color:#fff !important;
}

/* Proceed to Checkout / Place Order — per request: white background,
   gold border, black text — matching the Shop page's Add to Cart
   button look exactly, instead of solid black. */
.wc-block-cart__submit-button,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button{
  background:#fff !important;
  color:var(--c-ink) !important;
  border:1px solid var(--c-gold) !important;
  border-radius:0 !important;
  font-family:var(--font-body) !important;
  font-weight:400 !important;
  font-size:13px !important;
  letter-spacing:.06em !important;
  padding:14px 28px !important;
  box-shadow:none !important;
  text-transform:none !important;
  transition:background .2s ease, color .2s ease;
}
.wc-block-cart__submit-button:hover,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:hover{
  background:var(--c-gold) !important;color:#fff !important;
}
/* Outline-style secondary buttons (e.g. "Continue shopping") */
.woocommerce a.button.wc-forward,
.wc-block-components-button.is-style-outline{
  background:#fff !important;color:var(--c-ink) !important;border:1px solid var(--c-ink) !important;
}
.woocommerce a.button.wc-forward:hover{background:var(--c-ink) !important;color:#fff !important}

/* BUG FIX: a plain black circle was appearing above/beside each product
   row in Cart and Checkout. This matches the browser's default list-item
   bullet (::marker) rendering outside the box — WooCommerce Blocks likely
   renders each cart/checkout line item as a genuine <li>, which our
   site-wide `ul{list-style:none}` reset doesn't reach because Woo Blocks'
   own <ul>/<li> markup isn't a plain <ul> our selector matches. Belt and
   braces: reset list-style and hide markers for every list anywhere
   inside the Cart/Checkout blocks, regardless of exact class names. */
.wp-block-woocommerce-cart li,
.wp-block-woocommerce-checkout li,
.wp-block-woocommerce-cart ul,
.wp-block-woocommerce-checkout ul{
  list-style:none !important;
  margin-left:0 !important;
}
.wp-block-woocommerce-cart li::marker,
.wp-block-woocommerce-checkout li::marker,
.wp-block-woocommerce-cart li::before,
.wp-block-woocommerce-checkout li::before{
  content:none !important;
}
.quantity .qty,
.wc-block-components-quantity-selector input{
  border:1px solid var(--c-divider) !important;
  padding:10px !important;font-size:14px !important;text-align:center;
  background:#fff;
}
.wc-block-components-quantity-selector{border:1px solid var(--c-divider) !important;border-radius:0 !important}
.wc-block-components-quantity-selector__button,
.wc-block-components-quantity-selector__button.wc-block-components-button{
  background:#fff !important;color:var(--c-ink) !important;border:none !important;
  box-shadow:none !important;padding:8px 12px !important;
}
.wc-block-components-quantity-selector__button:hover{background:var(--c-placeholder-bg,#F7F4EE) !important}

/* Per request: Cart and Checkout should only show image, name, and
   price for each product — no short description text. */
.wc-block-components-product-metadata,
.wc-block-components-product-metadata__description,
.wc-block-components-order-summary-item__description-text,
.wc-block-components-order-summary-item .wc-block-components-product-metadata{
  display:none !important;
}
/* BUG FIX (confirmed from real DOM): the "Save ৳X" badge lives inside
   .wc-block-cart-item__total-price-and-sale-badge-wrapper, stacked next
   to the price. Making that wrapper a column stack instead of relying on
   default WooCommerce flex behavior stops it colliding with the price. */
.wc-block-cart-item__total-price-and-sale-badge-wrapper{
  display:flex !important;flex-direction:column !important;
  align-items:flex-end !important;gap:4px !important;
}
.wc-block-components-sale-badge{
  white-space:normal !important;
}

/* BUG FIX (confirmed from real DOM + WooCommerce source): WooCommerce's
   own CSS hardcodes each cart row to a 2-column CSS grid,
   `grid-template-columns: 80px 132px` — only 212px total. It doesn't key
   this off a normal @media viewport query — it uses classes its own JS
   adds based on the CART BLOCK'S CONTAINER width specifically
   (.is-mobile / .is-small / .is-medium), which is why a plain @media
   query could apply at a slightly different point than WooCommerce's
   own rule and lose the override. Matching those exact classes removes
   any ambiguity — this can never fire at the "wrong" moment relative to
   WooCommerce's own rule, because it's targeting the identical selector. */
.is-mobile table.wc-block-cart-items .wc-block-cart-items__row,
.is-small table.wc-block-cart-items .wc-block-cart-items__row,
.is-medium table.wc-block-cart-items .wc-block-cart-items__row,
.wc-block-cart-items .wc-block-cart-items__row{
  display:grid !important;
  grid-template-columns:84px 1fr !important;
  grid-template-rows:auto auto !important;
  column-gap:14px !important;
  row-gap:8px !important;
  width:100% !important;
  align-items:start !important;
  padding:18px 0 !important;
  border-bottom:1px solid var(--c-divider) !important;
}
.wc-block-cart-item__image img{
  width:84px !important;height:84px !important;object-fit:cover !important;
}
/* Subrow 1: image + name + unit price + quantity/delete — image only
   spans this first row now (not the full card), since the price/badge
   line below is a separate full-width row of its own. */
.wc-block-cart-item__image{ grid-column:1 !important; grid-row:1 !important; }
.wc-block-cart-item__product{ grid-column:2 !important; grid-row:1 !important; min-width:0 !important; }

/* Subrow 2: "Save" badge on the left, line total on the right — spans
   both columns so it reads as its own separate row beneath the image,
   matching the sketch. */
.wc-block-cart-item__total{
  grid-column:1 / -1 !important;
  grid-row:2 !important;
  display:flex !important;
  width:100% !important;
}
.wc-block-cart-item__total-price-and-sale-badge-wrapper{
  display:flex !important;flex-direction:row-reverse !important;
  justify-content:space-between !important;width:100% !important;
  align-items:center !important;gap:10px !important;
}
/* The product-info cell itself contains name, unit price, and quantity
   stacked — keeping it a simple block so nothing inside it fights for
   width against the total-price row below (which now lives on its own
   full-width row entirely). */
.wc-block-cart-item__wrap{ min-width:0 !important; width:100% !important; }
.wc-block-components-product-name{
  display:block !important;white-space:normal !important;
  overflow-wrap:break-word !important;word-break:normal !important;
}

/* =========================================================
   22. CHECKOUT ORDER SUMMARY (confirmed real classes from live DOM)
   Same 2-column, stacked-row approach as Cart above, for the same
   reason: a 3rd column for price squeezes the text column down to
   almost nothing on a 375px screen, which is what broke "Sample
   product" into single letters.
   ========================================================= */
.wc-block-components-order-summary-item{
  display:grid !important;
  grid-template-columns:64px 1fr !important;
  grid-template-rows:auto auto !important;
  column-gap:14px !important;
  row-gap:8px !important;
  align-items:start !important;
  padding:14px 0 !important;
  border-bottom:1px solid var(--c-divider) !important;
}
.wc-block-components-order-summary-item__image{
  grid-column:1 !important;grid-row:1 !important;
  position:relative !important;
}
.wc-block-components-order-summary-item__image img{
  width:64px !important;height:64px !important;object-fit:cover !important;
}
/* The small badge showing item quantity is a real, intentional
   WooCommerce feature (confirmed via WooCommerce's own developer docs)
   — not a bug. It was just rendering with poor contrast here. Restyled
   with brand colors and a visible white number, per WooCommerce's own
   documented approach to restyling this exact element. */
.wc-block-components-order-summary-item__quantity{
  background-color:var(--c-ink) !important;
  border-color:#fff !important;
  box-shadow:0 0 0 2px var(--c-ink) !important;
  color:#fff !important;
}
/* BUG FIX: WooCommerce's own compiled CSS sets color on the INNER span
   that actually holds the number (not just the outer circle), using a
   CSS variable that's apparently resolving to black on this site. That
   inner rule is more specific than coloring the outer container alone,
   so the number stayed invisible regardless. Forcing it directly here. */
.wc-block-components-order-summary-item__quantity span{
  color:#fff !important;
}
.wc-block-components-order-summary-item__description{
  grid-column:2 !important;grid-row:1 !important;
  min-width:0 !important;
  overflow-wrap:break-word !important;word-break:normal !important;
}
/* Subrow 2: line total, full width — any "Save" badge (shares the same
   .wc-block-components-sale-badge component as Cart) sits left, the
   amount sits right, matching Cart's layout exactly. */
.wc-block-components-order-summary-item__total-price{
  grid-column:1 / -1 !important;grid-row:2 !important;
  display:flex !important;flex-direction:row-reverse !important;
  justify-content:space-between !important;width:100% !important;
  align-items:center !important;gap:10px !important;
  white-space:nowrap !important;
}

/* Hide "Use same address for billing" checkbox — billing always follows
   shipping automatically; there's nothing to toggle. */
.wc-block-checkout__use-address-for-billing{
  display:none !important;
}

/* Hide WooCommerce's own default password toggle — it depends on
   WordPress's Dashicons font, which wasn't loading correctly on this
   host and rendered as a blank box. Replaced with our own inline-SVG
   toggle (added via JS in functions.php), so this one is redundant. */
.woocommerce-account button.show-password-input,
.woocommerce-page button.show-password-input{
  display:none !important;
}

/* Coupon field on Cart & Checkout */
.wc-block-components-totals-coupon input.wc-block-components-totals-coupon__input-field,
.woocommerce form.checkout_coupon input.input-text{
  border:1px solid var(--c-divider) !important;padding:12px !important;
}
.wc-block-components-totals-coupon__button{
  background:#fff !important;
  color:var(--c-ink) !important;
  border:1px solid var(--c-gold) !important;
  border-radius:0 !important;
  font-family:var(--font-body) !important;
  font-size:13px !important;
  letter-spacing:.06em !important;
  padding:12px 24px !important;
  box-shadow:none !important;
}
.wc-block-components-totals-coupon__button:hover{
  background:var(--c-gold) !important;color:#fff !important;
}

/* =========================================================
   20. WOOCOMMERCE BLOCKS — CART & CHECKOUT LAYOUT
   Contains the block-based Cart/Checkout to the site's normal max
   width, and forces the two-column layout (items + order summary) to
   stack cleanly on mobile instead of overflowing the viewport.
   ========================================================= */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout{
  max-width:100%;margin:0 auto;padding:32px 0 80px;
}
.wc-block-cart,
.wc-block-checkout{
  max-width:100%;overflow-x:hidden;
}
.wc-block-components-panel,
.wc-block-components-order-summary,
.wc-block-cart-items__row,
.wc-block-components-totals-wrapper,
.wc-block-components-address-card{
  border-color:var(--c-divider) !important;
}
.wc-block-cart-items__header,
.wc-block-cart-items__row{
  font-size:14px;color:var(--c-secondary);
}
.wc-block-components-product-name{
  font-family:var(--font-heading) !important;color:var(--c-ink) !important;
}

@media (max-width:781px){
  .wp-block-woocommerce-cart,
  .wp-block-woocommerce-checkout{padding:24px 0 60px}

  /* WooCommerce Blocks already stacks its own grid at this width — this
     just guarantees neither column can ever exceed the viewport, which
     is the actual cause of horizontal overflow/scroll on narrow phones. */
  .wc-block-cart__main, .wc-block-checkout__main,
  .wc-block-cart__sidebar, .wc-block-checkout__sidebar,
  .wc-block-cart-items__row, .wc-block-components-panel{
    max-width:100%;box-sizing:border-box;
  }
}

/* =========================================================
   21. GLOBAL OVERFLOW SAFETY NET
   Belt-and-braces: nothing on the page should ever be able to force a
   horizontal scrollbar on mobile, regardless of what a plugin/shortcode
   injects into the page.
   ========================================================= */
html, body{max-width:100%;overflow-x:hidden}
* { min-width: 0; } /* prevents flex/grid children from refusing to shrink below their content size, a common cause of overflow */

/* =========================================================
   17. PRODUCT TABS AS ACCORDION
   Hides WooCommerce's default tab-row navigation and stacks each
   panel as a collapsible accordion row instead — real functionality
   added via assets/js/main.js, this is purely the visual layer.
   ========================================================= */
.woocommerce div.product .woocommerce-tabs ul.tabs{ display:none; }
.woocommerce div.product .woocommerce-tabs{ border-top:1px solid var(--c-divider); margin-top:8px; }
.woocommerce div.product .woocommerce-tabs .saffelia-accordion-row{
  border-bottom:1px solid var(--c-divider);
}
.woocommerce div.product .woocommerce-tabs .saffelia-accordion-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 4px;cursor:pointer;font-family:var(--font-heading);font-size:21px;font-weight:600;color:var(--c-ink);
}
.woocommerce div.product .woocommerce-tabs .saffelia-accordion-header .saffelia-accordion-icon{
  font-size:32px !important;width:32px !important;height:32px !important;color:var(--c-gold);line-height:1;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
}
.woocommerce div.product .woocommerce-tabs .panel{
  padding:0 4px 20px;font-size:15px;line-height:1.7;
}

/* =========================================================
   23. BATCH OF FIXES — footer phone wrap, product meta lines,
   view-cart spacing, WooCommerce notices, in-stock color,
   global typography, single-product quantity steppers,
   password toggle, shop dropdown scoping.
   ========================================================= */

/* Footer phone number was wrapping onto two lines on mobile. */
.site-footer a[href^="tel:"]{ white-space:nowrap; }

/* Category / Tags / Brand meta on the single product page were all
   running together on one line — each on its own line now. */
.product_meta{ margin-top:16px; }
.product_meta > span{ display:block; margin-bottom:6px; font-size:14px; color:var(--c-secondary); }
.product_meta > span a{ color:var(--c-secondary); }

/* "View cart" link sat with no breathing room next to "Add to cart". */
.woocommerce a.added_to_cart{ margin-left:14px !important; }

/* WooCommerce's default notice boxes (info/message/error) didn't match
   the site's look at all — plain default WooCommerce styling. */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-notice{
  background:#F7F4EE !important;
  border:1px solid var(--c-divider) !important;
  border-top:3px solid var(--c-gold) !important;
  border-radius:0 !important;
  color:var(--c-ink) !important;
  font-family:var(--font-body) !important;
  font-size:14px !important;
  padding:16px 20px !important;
  box-shadow:none !important;
}
.woocommerce-error{ border-top-color:#B23A3A !important; }
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before{ display:none !important; } /* Removes WooCommerce's default icon font, which isn't loaded on this theme. */
.woocommerce-message .button,
.woocommerce-info .button{
  background:var(--c-ink) !important;color:#fff !important;border:none !important;
  border-radius:0 !important;padding:10px 20px !important;font-size:12px !important;
}

/* "In stock" should read as a positive, green status. */
.stock.in-stock{ color:#2E7D32 !important; font-weight:600; }
.stock.out-of-stock{ color:#B23A3A !important; font-weight:600; }

/* Global typography: slightly larger, slightly heavier — was reading a
   little thin/small across body text, nav, and buttons. */
body{ font-size:16px; }
p{ font-size:16px; line-height:1.65; }
.primary-nav a, .mobile-nav a, .category-strip a{ font-weight:500; }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.wc-block-components-button{ font-weight:500 !important; }

/* Single product page: +/- quantity stepper (WooCommerce's default is
   a plain number input with no buttons), and clamp to a minimum of 1. */
.single-product .quantity{ position:relative;display:inline-flex;align-items:center;border:1px solid var(--c-divider); }
.single-product .quantity input.qty{ border:none !important;width:56px;text-align:center;padding:10px 0 !important; }
.single-product .quantity .saffelia-qty-btn{
  background:none;border:none;width:36px;height:100%;cursor:pointer;
  font-size:16px;color:var(--c-ink);display:flex;align-items:center;justify-content:center;
}
.single-product .quantity .saffelia-qty-btn:hover{ background:var(--c-placeholder-bg,#F7F4EE); }

/* =========================================================
   24. FIX: phone format validation message overflowing its
   container on narrow screens instead of wrapping.
   ========================================================= */
#saffelia-phone-format-notice{
  white-space:normal !important;
  word-break:break-word !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  color:#B23A3A !important; /* BUG FIX: a leftover rule (color:#000000 !important on all p/span/div) was overriding the plain inline red color, since a stylesheet !important rule always beats a non-!important inline style. This ID-scoped rule has higher specificity, so it wins regardless. */
}

/* =========================================================
   25. Batch fixes: item 1 (empty-cart/cross-sell dark buttons),
   item 2 (related-products button overflow), item 3 (pagination
   active state dark bg), item 7 (site-wide small text), item 16
   (checkout contact icons too small).
   ========================================================= */

/* Item 1 + 2: WooCommerce's cross-sell/upsell/related product blocks
   render in different markup than the main Shop grid (which is why the
   earlier white-button fix, scoped to ".woocommerce ul.products
   li.product .add_to_cart_button", never reached these) — broadened to
   cover every product-loop context site-wide, classic and Blocks alike. */
.woocommerce .products .add_to_cart_button,
.woocommerce .product_list_widget .add_to_cart_button,
.wc-block-grid__product .add_to_cart_button,
.wp-block-woocommerce-related-products .add_to_cart_button,
.wp-block-woocommerce-product-collection .add_to_cart_button,
.woocommerce ul.products li.product .add_to_cart_button{
  background:#fff !important;color:var(--c-ink) !important;border:1px solid var(--c-ink) !important;
  width:100%;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.woocommerce .products .add_to_cart_button:hover,
.woocommerce .product_list_widget .add_to_cart_button:hover,
.wc-block-grid__product .add_to_cart_button:hover,
.wp-block-woocommerce-related-products .add_to_cart_button:hover,
.wp-block-woocommerce-product-collection .add_to_cart_button:hover{
  background:var(--c-ink) !important;color:#fff !important;
}
/* Never show a quantity stepper inside any product-loop card (Shop,
   Related, Cross-sell, Upsell) — that belongs on the single product
   page only, and was the cause of the "+Add to|cart" overlap. */
.woocommerce ul.products li.product .quantity,
.woocommerce .products .quantity,
.wc-block-grid__product .quantity{
  display:none !important;
}

/* Item 3: pagination's active-page indicator used a solid black fill,
   inconsistent with the rest of the site's white/gold-border button
   language. Matched to that same design system instead. */
.woocommerce nav.woocommerce-pagination ul li span.current{
  background:#fff !important;color:var(--c-ink) !important;border:1px solid var(--c-gold) !important;font-weight:600;
}

/* Item 7: several small text spots site-wide bumped up slightly for
   readability — short descriptions, meta lines, form hints. */
.woocommerce-product-details__short-description,
.woocommerce-product-details__short-description p,
.product_meta,
.product_meta > span,
.woocommerce-form-row label,
.saffelia-delivery-estimate,
.stock{
  font-size:15px !important;
}

/* Item 16: the WhatsApp/Messenger contact icons on Checkout (and
   anywhere else this pattern is reused) were too small relative to the
   footer's social icons — matched to the same size/style. */
.saffelia-otp-widget__contact-note a,
#saffelia-payment-delivery-note a{
  width:40px;height:40px;border:1px solid var(--c-gold);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
}
.saffelia-otp-widget__contact-note a svg,
#saffelia-payment-delivery-note a svg{
  width:20px;height:20px;
}

/* =========================================================
   26. Item 11: My Account Dashboard stats layout.
   ========================================================= */
.saffelia-account-dashboard__stats{ display:flex; gap:24px; flex-wrap:wrap; margin-top:16px; }
.saffelia-account-dashboard__stat{
  border:1px solid var(--c-divider); padding:20px 28px; text-align:center; min-width:160px;
}
.saffelia-account-dashboard__stat-number{ display:block; font-family:var(--font-heading); font-size:28px; color:var(--c-ink); }
.saffelia-account-dashboard__stat-label{ display:block; font-size:13px; color:var(--c-secondary); margin-top:4px; }
.saffelia-account-dashboard__empty{ margin-bottom:16px; }

/* =========================================================
   27. Item 12: Thank You page summary alignment.
   ========================================================= */
.woocommerce-order-overview{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:16px 24px; list-style:none; padding:0; margin:0 0 24px;
}
.woocommerce-order-overview li{ margin:0; }
.woocommerce-order-overview li strong{ display:block; margin-top:2px; }

/* Item 15: order-action contact icons, sized like the footer's social
   icons — scoped ONLY to the specific icon actions we added (WooCommerce
   generates a CSS class from each action's array key), so the native
   "View" text button on every order is never affected. */
.woocommerce-orders-table__cell-order-actions a.saffelia_whatsapp,
.woocommerce-orders-table__cell-order-actions a.saffelia_messenger,
.woocommerce-orders-table__cell-order-actions a.saffelia_email{
  width:40px;height:40px;border:1px solid var(--c-gold);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;margin-right:8px;
  padding:0;font-size:0; /* hide the text label visually; screen readers still read it */
  position:relative;
}
.woocommerce-orders-table__cell-order-actions a.saffelia_whatsapp::before,
.woocommerce-orders-table__cell-order-actions a.saffelia_messenger::before,
.woocommerce-orders-table__cell-order-actions a.saffelia_email::before{
  content:"";width:20px;height:20px;display:block;
  background-repeat:no-repeat;background-position:center;background-size:contain;
}
.woocommerce-orders-table__cell-order-actions a.saffelia_whatsapp::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2325D366'%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.5 1.3 5L2 22l5.2-1.3c1.4.8 3 1.2 4.8 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2Zm5.5 14.2c-.2.6-1.3 1.2-1.8 1.2-.5.1-1 .1-1.7-.1-.4-.1-.9-.3-1.6-.6-2.7-1.2-4.5-3.9-4.6-4.1-.1-.2-1.1-1.4-1.1-2.7s.7-1.9 1-2.2c.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.5.2.5.7 1.7.8 1.9.1.2.1.3 0 .5-.5.9-1 .9-.7 1.4.9 1.7 1.7 2.4 3 3 .2.1.4.1.5-.1.2-.2.7-.8.9-1.1.2-.3.4-.2.6-.1.2.1 1.5.7 1.7.8.2.1.4.2.4.3.1.3.1.6-.1 1.2Z'/%3E%3C/svg%3E");
}
.woocommerce-orders-table__cell-order-actions a.saffelia_messenger::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230084FF'%3E%3Cpath d='M12 2C6.5 2 2 6.1 2 11.3c0 3 1.5 5.6 3.9 7.4V22l3.5-1.9c.9.3 1.9.4 2.6.4 5.5 0 10-4.1 10-9.2C22 6.1 17.5 2 12 2Zm1 12.4-2.6-2.7-5 2.7 5.5-5.8 2.6 2.7 5-2.7Z'/%3E%3C/svg%3E");
}
.woocommerce-orders-table__cell-order-actions a.saffelia_email::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1B19' stroke-width='1.7'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3.5 6.5 12 13l8.5-6.5'/%3E%3C/svg%3E");
}

/* =========================================================
   28. Final batch: general dropdown/button text bumped +1,
   with overflow guards everywhere so text can never spill
   outside its box (specifically fixes the Related Products
   Add to Cart button, where the text was barely visible).
   ========================================================= */
select,
.woocommerce select,
.saffelia-shop-filter-select{ font-size:15px !important; }

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .add_to_cart_button,
.btn, .btn-solid, .btn-outline{
  font-size:14px !important;
  white-space:normal !important; /* allow wrapping instead of clipping when text is longer than the box */
  min-height:2.6em;
  line-height:1.3;
  box-sizing:border-box;
  overflow-wrap:break-word;
}

/* Related Products / any product-loop Add to Cart button specifically —
   was rendering with barely-visible clipped text because the box was
   sized smaller than the text needed. */
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce .products .add_to_cart_button{
  min-height:2.8em;
  padding:10px 8px !important;
  display:flex;align-items:center;justify-content:center;text-align:center;
  white-space:normal !important;
}

/* =========================================================
   29. BUG FIX: the general "make button text visible / never
   clip" rule above (Item 28) targets `.woocommerce a.button`,
   which unintentionally also matches the WhatsApp/Messenger/
   Email order-action icons (Item 15), since WooCommerce's own
   template gives those links the generic "button" class in
   addition to their own saffelia_* class. Item 28's !important
   font-size/white-space/background/color was winning over the
   circular-icon rules (Item 15) despite those being written
   later, because !important beats normal specificity — turning
   the intended 40px gold-circle icons into solid dark
   rectangular buttons with the label text forced back on and
   wrapping (visible as clipped "VhatsAp"/"essenge" text in the
   Orders list on narrow screens).

   This block ONLY re-asserts the existing Item 15 circular-icon
   styling for these 3 specific action links, matching Item 28's
   own !important weight so it reliably wins. Nothing else about
   Item 28's behavior for every other button on the site is
   touched — the native "View" text button on every order is
   also untouched, since it never carries a saffelia_* class. */
.woocommerce-orders-table__cell-order-actions a.saffelia_whatsapp,
.woocommerce-orders-table__cell-order-actions a.saffelia_messenger,
.woocommerce-orders-table__cell-order-actions a.saffelia_email{
  background:transparent !important;
  color:var(--c-ink) !important;
  font-size:0 !important;
  white-space:nowrap !important;
  min-height:0 !important;
  line-height:1 !important;
  width:40px !important;height:40px !important;
  padding:0 !important;
  border:1px solid var(--c-gold) !important;border-radius:50% !important;
}

/* BUG FIX: these 3 icons never had their own :hover rule, so hovering
   them fell through to the site-wide `.woocommerce a.button:hover` rule
   (near-black background, matching !important weight). That's fine for
   ordinary text buttons, but these icons are fixed-color SVGs (green
   WhatsApp, blue Messenger, dark-stroke email) drawn as a background-image
   — not text, so they never picked up the hover rule's `color:#fff` — and
   the near-black circle made the dark-stroke email icon in particular
   disappear completely. Keeping the hover background light (instead of
   dark) guarantees all 3 fixed-color icons stay visible; the border/scale
   change still gives clear hover feedback. */
.woocommerce-orders-table__cell-order-actions a.saffelia_whatsapp:hover,
.woocommerce-orders-table__cell-order-actions a.saffelia_messenger:hover,
.woocommerce-orders-table__cell-order-actions a.saffelia_email:hover{
  background:var(--c-gold-light) !important;
  border-color:var(--c-ink) !important;
}

/* =========================================================
   30. BUG FIX (confirmed live): two things found after Item 29
   shipped.

   a) The icon inside each circle was rendering blank. Traced it
   to a separate, unrelated site-wide rule that gives every
   WooCommerce button 14px/28px of padding with !important. Item
   29 reset width/height but never reset padding, so that 56px of
   horizontal padding was quietly forcing the circle wider than
   40px and squeezing the icon (a flex child with no minimum
   size) down to 0 width — invisible, even though the circle's
   border looked fine. Confirmed by testing live: adding
   `padding:0 !important` to Item 29's rule fixes both the 40px
   circle and the icon in one change (folded into that rule
   above, not duplicated here).

   b) These 3 action icons ALSO appear a second time, on the
   Order Details / Thank You page — with different markup
   entirely (an `order-actions-button` class, in a plain table
   row, not inside `.woocommerce-orders-table__cell-order-actions`
   at all). That markup isn't part of this theme's PHP files, so
   it isn't something I can trace to a specific file here — but
   fixing its look doesn't require knowing where it comes from,
   only what classes it uses, which I confirmed directly from the
   live page. Reusing the exact same treatment for it below. */
a.saffelia_whatsapp.order-actions-button,
a.saffelia_messenger.order-actions-button,
a.saffelia_email.order-actions-button{
  background:transparent !important;
  color:var(--c-ink) !important;
  font-size:0 !important;
  white-space:nowrap !important;
  min-height:0 !important;
  line-height:1 !important;
  width:40px !important;height:40px !important;
  padding:0 !important;
  margin-right:8px !important;
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  border:1px solid var(--c-gold) !important;border-radius:50% !important;
  position:relative;
}
a.saffelia_whatsapp.order-actions-button::before,
a.saffelia_messenger.order-actions-button::before,
a.saffelia_email.order-actions-button::before{
  content:"";width:20px;height:20px;display:block;
  background-repeat:no-repeat;background-position:center;background-size:contain;
}
a.saffelia_whatsapp.order-actions-button::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2325D366'%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.5 1.3 5L2 22l5.2-1.3c1.4.8 3 1.2 4.8 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2Zm5.5 14.2c-.2.6-1.3 1.2-1.8 1.2-.5.1-1 .1-1.7-.1-.4-.1-.9-.3-1.6-.6-2.7-1.2-4.5-3.9-4.6-4.1-.1-.2-1.1-1.4-1.1-2.7s.7-1.9 1-2.2c.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.5.2.5.7 1.7.8 1.9.1.2.1.3 0 .5-.5.9-1 .9-.7 1.4.9 1.7 1.7 2.4 3 3 .2.1.4.1.5-.1.2-.2.7-.8.9-1.1.2-.3.4-.2.6-.1.2.1 1.5.7 1.7.8.2.1.4.2.4.3.1.3.1.6-.1 1.2Z'/%3E%3C/svg%3E");
}
a.saffelia_messenger.order-actions-button::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230084FF'%3E%3Cpath d='M12 2C6.5 2 2 6.1 2 11.3c0 3 1.5 5.6 3.9 7.4V22l3.5-1.9c.9.3 1.9.4 2.6.4 5.5 0 10-4.1 10-9.2C22 6.1 17.5 2 12 2Zm1 12.4-2.6-2.7-5 2.7 5.5-5.8 2.6 2.7 5-2.7Z'/%3E%3C/svg%3E");
}
a.saffelia_email.order-actions-button::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1B19' stroke-width='1.7'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3.5 6.5 12 13l8.5-6.5'/%3E%3C/svg%3E");
}

/* BUG FIX: same issue as the Orders-list version above (Item 29's hover
   fix) — this Order Details / Thank You page markup never had its own
   :hover rule either, so it also fell through to the site-wide dark
   button hover and made the fixed-color icons (especially the
   dark-stroke email one) disappear. Same light-background fix. */
a.saffelia_whatsapp.order-actions-button:hover,
a.saffelia_messenger.order-actions-button:hover,
a.saffelia_email.order-actions-button:hover{
  background:var(--c-gold-light) !important;
  border-color:var(--c-ink) !important;
}

/* =========================================================
   30. BUG FIX: the Registration form (My Account) showed no visual
   indication of WHICH field(s) were wrong after a failed submission
   — a shopper who left the District blank, or typed an invalid
   phone number, saw the exact same-looking form reload with only a
   generic notice at the top of the page, with no red outline or
   message near the actual problem field(s).

   This pairs with the new per-field checks added in
   inc/otp-verification.php (the woocommerce_register_form render
   function), which now prints a `saffelia-field-invalid` class on a
   field's wrapping `.form-row` and a `saffelia-field-error` message
   span next to it, but only when that specific field is the
   problem on a real, failed resubmission — never on a first, empty
   visit to the page.

   This is a brand-new class name used nowhere else in the theme or
   by WooCommerce core, so it cannot collide with or override any
   existing selector; and every property below is scoped to that one
   class plus a couple of native input types nested inside it, so it
   cannot affect any other field, form, or page on the site. Colors
   reuse the same red already used for the site's own error notices
   (Item 5's #B23A3A on .woocommerce-error) so this reads as the same
   "error" color language already established elsewhere, not a new
   one. */
.saffelia-field-invalid .woocommerce-Input,
.saffelia-field-invalid input,
.saffelia-field-invalid select,
.saffelia-field-invalid textarea{
  border-color:#B23A3A !important;
}
.saffelia-field-error{
  display:block;
  color:#B23A3A;
  font-size:13px;
  line-height:1.4;
  margin-top:4px;
}