/*
Theme Name: Alifsay
Theme URI: https://alifsay.com
Author: Alifsay
Author URI: https://alifsay.com
Description: Premium lightweight WooCommerce theme for Alifsay, a Pakistani designer fashion e-commerce brand. Built for luxury product presentation, conversion-focused shopping, and fast performance on mobile and slow connections.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: alifsay
Tags: e-commerce, custom-colors, custom-logo, custom-menu, featured-images, full-width-template, translation-ready, woocommerce
*/

/* =========================================================
   0. DESIGN TOKENS
   ========================================================= */
:root{
	--color-maroon: #6d1b2f;
	--color-maroon-dark: #4a1220;
	--color-maroon-light: #8a2c42;
	--color-gold: #c9a15a;
	--color-gold-light: #e6cd9c;
	--color-cream: #faf6f0;
	--color-ivory: #fffdfa;
	--color-charcoal: #262020;
	--color-text: #3a2f2f;
	--color-text-muted: #7a6d6d;
	--color-border: #e7ddd0;
	--color-success: #3f7d4f;
	--color-sale: #a4243b;

	--font-display: 'Alifsay Display', Georgia, 'Times New Roman', serif;
	--font-body: 'Alifsay Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

	--container-max: 1280px;
	--radius-sm: 2px;
	--radius-md: 4px;
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 16px;
	--space-4: 24px;
	--space-5: 40px;
	--space-6: 64px;
	--space-7: 96px;
	--transition: 220ms cubic-bezier(.4,0,.2,1);
	--header-height: 84px;
}

/* =========================================================
   1. RESET
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{
	margin: 0;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-text);
	background: var(--color-ivory);
	-webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; text-decoration: none; }
ul, ol{ list-style: none; margin: 0; padding: 0; }
button, input, select, textarea{ font-family: inherit; font-size: inherit; color: inherit; }
button{ cursor: pointer; background: none; border: none; }
h1,h2,h3,h4,h5,h6{ font-family: var(--font-display); font-weight: 600; margin: 0 0 var(--space-3); color: var(--color-charcoal); letter-spacing: .01em; }
p{ margin: 0 0 var(--space-3); }
.screen-reader-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); }
.skip-link.screen-reader-text:focus{
	position: fixed; top: 8px; left: 8px; z-index: 100000; width:auto; height:auto; clip:auto;
	background: var(--color-maroon); color:#fff; padding: 12px 20px; border-radius: var(--radius-sm);
	font-size: 14px; font-weight:600; text-decoration:none;
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
	outline: 2px solid var(--color-gold); outline-offset: 2px;
}

/* =========================================================
   2. LAYOUT UTILITIES
   ========================================================= */
.container{ max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-4); }
.section{ padding: var(--space-7) 0; }
.section--tight{ padding: var(--space-6) 0; }
.section-header{ text-align: center; max-width: 640px; margin: 0 auto var(--space-6); }
.section-header .eyebrow{
	display: block; font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
	color: var(--color-gold); font-weight: 600; margin-bottom: var(--space-2);
}
.section-header h2{ font-size: clamp(28px, 3.2vw, 40px); margin-bottom: var(--space-2); }
.section-header p{ color: var(--color-text-muted); margin-bottom: 0; }
.grid{ display: grid; gap: var(--space-4); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
.visually-center{ display:flex; align-items:center; justify-content:center; }

/* =========================================================
   3. BUTTONS
   ========================================================= */
.btn{
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 14px 32px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
	font-weight: 600; border-radius: var(--radius-sm); transition: all var(--transition);
	border: 1px solid transparent; white-space: nowrap;
}
.btn-primary{ background: var(--color-maroon); color: #fff; }
.btn-primary:hover{ background: var(--color-maroon-dark); }
.btn-outline{ background: transparent; border-color: var(--color-charcoal); color: var(--color-charcoal); }
.btn-outline:hover{ background: var(--color-charcoal); color: #fff; }
.btn-gold{ background: var(--color-gold); color: var(--color-charcoal); }
.btn-gold:hover{ background: var(--color-gold-light); }
.btn-block{ width: 100%; }
.btn-sm{ padding: 10px 20px; font-size: 11px; }

/* =========================================================
   4. TOP UTILITY BAR
   ========================================================= */
.top-bar{ background: var(--color-charcoal); color: #d9cfc9; font-size: 12px; }
.top-bar .container{ display:flex; align-items:center; justify-content:space-between; height:36px; }
.top-bar-links{ display:flex; gap: var(--space-4); }
.top-bar-links a:hover{ color: var(--color-gold-light); }
.top-bar-message{ letter-spacing:.04em; }

/* =========================================================
   5. HEADER
   ========================================================= */
.site-header{
	position: sticky; top: 0; z-index: 500; background: var(--color-ivory);
	border-bottom: 1px solid var(--color-border); transition: box-shadow var(--transition);
}
.site-header.is-stuck{ box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.header-inner{
	display: flex; align-items: center; justify-content: space-between;
	height: var(--header-height); gap: var(--space-4);
}
.site-branding .site-logo img{ max-height: 46px; width: auto; }
.site-branding .site-logo-text{ font-family: var(--font-display); font-size: 26px; letter-spacing: .04em; color: var(--color-maroon); }

.main-navigation{ flex: 1; display:flex; justify-content:center; }
.main-navigation > ul{ display:flex; gap: var(--space-5); }
.main-navigation > ul > li{ position: relative; }
.main-navigation > ul > li > a{
	display:flex; align-items:center; height: var(--header-height);
	font-size: 13px; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
	border-bottom: 2px solid transparent; transition: border-color var(--transition), color var(--transition);
}
.main-navigation > ul > li:hover > a,
.main-navigation > ul > li.current-menu-item > a{ border-color: var(--color-gold); color: var(--color-maroon); }
.main-navigation .sub-menu{
	position:absolute; top: 100%; left: 50%; transform: translateX(-50%);
	background:#fff; min-width: 220px; padding: var(--space-3) 0; box-shadow: 0 12px 32px rgba(0,0,0,.1);
	opacity:0; visibility:hidden; transform: translateX(-50%) translateY(8px);
	transition: all var(--transition); border-top: 2px solid var(--color-gold);
}
.main-navigation li:hover > .sub-menu{ opacity:1; visibility:visible; transform: translateX(-50%) translateY(0); }
.main-navigation .sub-menu a{ display:block; padding: 10px 24px; font-size:13px; }
.main-navigation .sub-menu a:hover{ background: var(--color-cream); color: var(--color-maroon); }

.header-actions{ display:flex; align-items:center; gap: var(--space-3); }
.header-action-btn{
	position:relative; display:flex; align-items:center; justify-content:center;
	width:40px; height:40px; border-radius:50%; transition: background var(--transition);
}
.header-action-btn:hover{ background: var(--color-cream); }
.header-action-btn .count{
	position:absolute; top:-2px; right:-2px; background: var(--color-maroon); color:#fff;
	font-size:10px; line-height:1; min-width:16px; height:16px; border-radius:50%;
	display:flex; align-items:center; justify-content:center; padding: 2px;
}
.mobile-menu-toggle{ display:none; }

/* Search overlay */
.search-overlay{
	position:fixed; inset:0; background: rgba(38,32,32,.6); z-index:1000;
	opacity:0; visibility:hidden; transition: all var(--transition);
}
.search-overlay.is-active{ opacity:1; visibility:visible; }
.search-overlay-inner{ background:#fff; padding: var(--space-6) var(--space-4); }
.search-overlay form{ max-width: 720px; margin:0 auto; display:flex; gap: var(--space-2); }
.search-overlay input[type="search"]{
	flex:1; border:none; border-bottom: 2px solid var(--color-charcoal); padding: 12px 0;
	font-size: 24px; font-family: var(--font-display); background:transparent;
}
.search-overlay-close{ position:absolute; top: var(--space-4); right: var(--space-4); font-size: 28px; }

/* =========================================================
   6. MOBILE NAV DRAWER
   ========================================================= */
.mobile-drawer{
	position: fixed; top:0; right:0; height:100%; width: min(340px, 86vw);
	background:#fff; z-index: 1100; transform: translateX(100%);
	transition: transform var(--transition); overflow-y:auto; box-shadow: -10px 0 40px rgba(0,0,0,.15);
}
.mobile-drawer.is-open{ transform: translateX(0); }
.mobile-drawer-header{ display:flex; justify-content:space-between; align-items:center; padding: var(--space-4); border-bottom:1px solid var(--color-border); }
.mobile-drawer ul li a{ display:block; padding: 14px var(--space-4); border-bottom:1px solid var(--color-border); font-size:14px; text-transform:uppercase; letter-spacing:.06em; }
.mobile-drawer .sub-menu a{ padding-left: var(--space-5); font-size:13px; text-transform:none; letter-spacing:0; color: var(--color-text-muted); }
.drawer-backdrop{ position:fixed; inset:0; background: rgba(0,0,0,.4); z-index:1050; opacity:0; visibility:hidden; transition: all var(--transition); }
.drawer-backdrop.is-open{ opacity:1; visibility:visible; }

/* =========================================================
   7. HERO / BANNER
   ========================================================= */
.hero{
	position: relative; min-height: 640px; display:flex; align-items:center;
	background-size: cover; background-position: center; overflow:hidden;
}
.hero::after{ content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(38,20,26,.55) 0%, rgba(38,20,26,.15) 60%); }
.hero-content{ position:relative; z-index:2; color:#fff; max-width: 560px; padding: var(--space-4); }
.hero-content .eyebrow{ color: var(--color-gold-light); letter-spacing:.2em; text-transform:uppercase; font-size:12px; font-weight:600; display:block; margin-bottom:var(--space-3); }
.hero-content h1{ color:#fff; font-size: clamp(34px, 5vw, 58px); line-height:1.1; margin-bottom: var(--space-4); }
.hero-content p{ font-size:16px; opacity:.9; margin-bottom: var(--space-5); max-width:420px; }
.hero-cta{ display:flex; gap: var(--space-3); flex-wrap:wrap; }
.hero-dots{ position:absolute; bottom: var(--space-4); left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:2; }
.hero-dots button{ width:8px; height:8px; border-radius:50%; background: rgba(255,255,255,.5); }
.hero-dots button.is-active{ background:#fff; width:24px; border-radius:4px; }

/* =========================================================
   8. CATEGORY / COLLECTION SHOWCASE
   ========================================================= */
.category-tile{ position:relative; overflow:hidden; border-radius: var(--radius-md); aspect-ratio: 3/4; }
.category-tile img{ width:100%; height:100%; object-fit:cover; transition: transform 600ms ease; }
.category-tile:hover img{ transform: scale(1.06); }
.category-tile::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.55) 100%); }
.category-tile-label{ position:absolute; left:var(--space-3); right:var(--space-3); bottom:var(--space-3); z-index:2; color:#fff; }
.category-tile-label h3{ color:#fff; font-size:20px; margin-bottom:4px; }
.category-tile-label span{ font-size:12px; text-transform:uppercase; letter-spacing:.1em; color: var(--color-gold-light); }

/* =========================================================
   9. PRODUCT CARDS
   ========================================================= */
.product-card{ position:relative; }
.product-card-media{ position:relative; overflow:hidden; background: var(--color-cream); border-radius: var(--radius-md); aspect-ratio: 3/4; }
.product-card-media img{ width:100%; height:100%; object-fit:cover; transition: opacity 400ms ease, transform 600ms ease; }
.product-card-media img.hover-image{ position:absolute; inset:0; opacity:0; }
.product-card:hover .product-card-media img.hover-image{ opacity:1; }
.product-card:hover .product-card-media img:first-child{ transform: scale(1.03); }
.product-badges{ position:absolute; top:12px; left:12px; display:flex; flex-direction:column; gap:6px; z-index:2; }
.badge{ font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:4px 10px; border-radius: 2px; }
.badge-sale{ background: var(--color-sale); color:#fff; }
.badge-new{ background: var(--color-gold); color: var(--color-charcoal); }
.badge-bestseller{ background: var(--color-maroon); color:#fff; }
.badge-trending{ background: var(--color-charcoal); color:#fff; }
.badge-limited{ background: #b3541e; color:#fff; }
.product-card-actions{ position:absolute; right:12px; top:12px; display:flex; flex-direction:column; gap:8px; z-index:2; opacity:0; transform: translateX(6px); transition: all var(--transition); }
.product-card:hover .product-card-actions{ opacity:1; transform:translateX(0); }
.product-card-actions button{
	width:36px; height:36px; border-radius:50%; background:#fff; box-shadow: 0 4px 12px rgba(0,0,0,.12);
	display:flex; align-items:center; justify-content:center; transition: background var(--transition);
}
.product-card-actions button:hover{ background: var(--color-maroon); color:#fff; }
.product-card-quickadd{
	position:absolute; left:0; right:0; bottom:0; padding:10px; background: rgba(255,255,255,.96);
	text-align:center; font-size:12px; text-transform:uppercase; letter-spacing:.08em; font-weight:600;
	transform: translateY(100%); transition: transform var(--transition); z-index:2;
}
.product-card:hover .product-card-quickadd{ transform: translateY(0); }
.product-card-info{ padding-top: var(--space-3); text-align:left; }
.product-card-info .cat{ font-size:11px; text-transform:uppercase; letter-spacing:.1em; color: var(--color-text-muted); }
.product-card-info h3{ font-size:15px; margin: 4px 0; font-weight:500; font-family: var(--font-body); }
.product-price{ display:flex; gap:8px; align-items:baseline; font-size:14px; }
.product-price ins{ text-decoration:none; color: var(--color-maroon); font-weight:600; }
.product-price del{ color: var(--color-text-muted); font-size:13px; }
.rating-stars{ color: var(--color-gold); font-size:12px; letter-spacing:2px; margin-bottom:4px; }

/* =========================================================
   10. SHOP / ARCHIVE
   ========================================================= */
.shop-layout{ display:grid; grid-template-columns: 260px 1fr; gap: var(--space-5); align-items:flex-start; }
.shop-toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom:1px solid var(--color-border); }
.shop-toolbar select{ border:1px solid var(--color-border); padding:8px 12px; border-radius: var(--radius-sm); }
.filter-widget{ margin-bottom: var(--space-5); }
.filter-widget h4{ font-size:13px; text-transform:uppercase; letter-spacing:.08em; margin-bottom: var(--space-3); }
.filter-widget ul li{ margin-bottom:8px; font-size:14px; }
.filter-widget ul li label{ display:flex; align-items:center; gap:8px; cursor:pointer; }
.color-swatches{ display:flex; flex-wrap:wrap; gap:8px; }
.color-swatches span{ width:26px; height:26px; border-radius:50%; border:1px solid var(--color-border); cursor:pointer; display:block; }
.size-options{ display:flex; flex-wrap:wrap; gap:8px; }
.size-options span{ min-width:36px; height:36px; padding:0 8px; border:1px solid var(--color-border); border-radius: var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:12px; cursor:pointer; }
.price-range input[type="range"]{ width:100%; }
.mobile-filter-toggle{ display:none; }

/* =========================================================
   11. SINGLE PRODUCT
   ========================================================= */
.product-single{ display:grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-6); }
.product-gallery-main{ position:relative; border-radius: var(--radius-md); overflow:hidden; background: var(--color-cream); aspect-ratio: 4/5; cursor: zoom-in; }
.product-gallery-thumbs{ display:flex; gap:10px; margin-top:10px; }
.product-gallery-thumbs img{ width:76px; height:96px; object-fit:cover; border-radius: var(--radius-sm); border:2px solid transparent; cursor:pointer; }
.product-gallery-thumbs img.is-active{ border-color: var(--color-maroon); }
.product-summary .product-title{ font-size: clamp(24px,3vw,32px); margin-bottom: 8px; }
.product-summary .price{ font-size:22px; color: var(--color-maroon); margin-bottom: var(--space-3); }
.product-summary .price del{ color: var(--color-text-muted); font-size:16px; margin-right:8px; }
.variation-group{ margin-bottom: var(--space-4); }
.variation-group label.group-label{ display:block; font-size:12px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px; font-weight:600; }
.size-guide-link{ font-size:12px; text-decoration:underline; color: var(--color-text-muted); margin-left:8px; }
.qty-addcart{ display:flex; gap: var(--space-3); margin: var(--space-4) 0; }
.qty-input{ display:flex; align-items:center; border:1px solid var(--color-border); border-radius: var(--radius-sm); }
.qty-input button{ width:40px; height:48px; }
.qty-input input{ width:48px; text-align:center; border:none; height:48px; }
.trust-badges{ display:flex; gap: var(--space-4); margin-top: var(--space-4); padding-top: var(--space-4); border-top:1px solid var(--color-border); flex-wrap:wrap; }
.trust-badge{ display:flex; align-items:center; gap:8px; font-size:12px; color: var(--color-text-muted); }
.woocommerce-tabs{ margin-top: var(--space-6); border-top:1px solid var(--color-border); padding-top: var(--space-5); }
.woocommerce-tabs ul.tabs{ display:flex; gap: var(--space-5); border-bottom:1px solid var(--color-border); list-style:none; padding:0; margin:0 0 var(--space-4); flex-wrap:wrap; }
.woocommerce-tabs ul.tabs li{ padding: 0 0 var(--space-3); font-size:13px; text-transform:uppercase; letter-spacing:.08em; font-weight:600; border-bottom:2px solid transparent; color: var(--color-text-muted); cursor:pointer; }
.woocommerce-tabs ul.tabs li.active, .woocommerce-tabs ul.tabs li:hover{ color: var(--color-maroon); border-color: var(--color-gold); }
.woocommerce-tabs ul.tabs li a{ color:inherit; }
.woocommerce-tabs .panel{ padding: var(--space-2) 0 var(--space-4); font-size:15px; line-height:1.7; }

/* WooCommerce native product gallery (woocommerce_show_product_images).
   Default WC styles are disabled theme-wide for performance, so the core
   gallery markup is restyled here to match the design system. */
.woocommerce-product-gallery{ position:relative; }
.woocommerce-product-gallery__wrapper{ margin:0; padding:0; list-style:none; }
.woocommerce-product-gallery__image{ border-radius: var(--radius-md); overflow:hidden; background: var(--color-cream); aspect-ratio: 4/5; }
.woocommerce-product-gallery__image a{ display:block; width:100%; height:100%; }
.woocommerce-product-gallery__image img{ width:100%; height:100%; object-fit:cover; }
.flex-control-thumbs{ display:flex; gap:10px; margin-top:10px; list-style:none; padding:0; flex-wrap:wrap; }
.flex-control-thumbs li{ list-style:none; }
.flex-control-thumbs img{ width:76px; height:96px; object-fit:cover; border-radius: var(--radius-sm); border:2px solid transparent; cursor:pointer; opacity:.7; transition: all var(--transition); }
.flex-control-thumbs img.flex-active, .flex-control-thumbs img:hover{ border-color: var(--color-maroon); opacity:1; }
.woocommerce-product-gallery__trigger{ position:absolute; top:12px; right:12px; z-index:3; background:#fff; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(0,0,0,.12); }

/* =========================================================
   12. HOMEPAGE SECTIONS
   ========================================================= */
.brand-story{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items:center; }
.brand-story img{ border-radius: var(--radius-md); }
.brand-story .eyebrow{ color:var(--color-gold); text-transform:uppercase; letter-spacing:.18em; font-size:12px; font-weight:700; }
.testimonial-card{ background: var(--color-cream); padding: var(--space-4); border-radius: var(--radius-md); }
.testimonial-card .stars{ color: var(--color-gold); margin-bottom: var(--space-2); }
.testimonial-card .customer{ margin-top: var(--space-3); font-size:13px; font-weight:600; }
.newsletter{ background: var(--color-maroon); color:#fff; text-align:center; padding: var(--space-6) var(--space-4); border-radius: var(--radius-md); }
.newsletter h2{ color:#fff; }
.newsletter form{ display:flex; max-width:480px; margin:var(--space-4) auto 0; gap:8px; }
.newsletter input[type="email"]{ flex:1; padding:14px 16px; border-radius: var(--radius-sm); border:none; }
.instagram-grid{ display:grid; grid-template-columns: repeat(6,1fr); gap: 6px; }
.instagram-grid a{ position:relative; aspect-ratio:1; overflow:hidden; display:block; }
.instagram-grid img{ width:100%; height:100%; object-fit:cover; transition: transform 400ms ease; }
.instagram-grid a:hover img{ transform: scale(1.08); }

/* =========================================================
   13. FOOTER
   ========================================================= */
.site-footer{ background: var(--color-charcoal); color: #cabdb8; margin-top: var(--space-7); }
.footer-top{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-5); padding: var(--space-7) 0 var(--space-6); }
.footer-col h4{ color:#fff; font-size:13px; text-transform:uppercase; letter-spacing:.1em; margin-bottom: var(--space-3); }
.footer-col ul li{ margin-bottom:10px; font-size:14px; }
.footer-col ul li a:hover{ color: var(--color-gold-light); }
.footer-brand .site-logo-text{ color:#fff; font-size:24px; }
.footer-brand p{ font-size:13px; color:#a8998f; margin-top: var(--space-3); }
.footer-social{ display:flex; gap:12px; margin-top: var(--space-3); }
.footer-social a{ width:36px; height:36px; border:1px solid #4a413f; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.footer-payment{ display:flex; gap:8px; margin-top: var(--space-3); }
.footer-payment span{ background:#fff; color:#262020; font-size:10px; font-weight:700; padding:4px 8px; border-radius:2px; }
.footer-bottom{ border-top: 1px solid #3d3535; padding: var(--space-3) 0; display:flex; justify-content:space-between; font-size:12px; color:#8c7d75; }

/* Baseline form field styling. WooCommerce's own CSS is disabled theme-wide
   for performance (see woocommerce_enqueue_styles filter in functions.php),
   so checkout, my-account, and search fields need explicit styling here —
   otherwise they'd render as bare unstyled browser inputs. Payment gateway
   iframes (Stripe/PayPal/JazzCash) render in their own sandboxed context
   and are unaffected by this either way. */
input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="number"], input[type="search"], input[type="url"], select, textarea{
	width: 100%; padding: 12px 14px; border: 1px solid var(--color-border);
	border-radius: var(--radius-sm); background: #fff; transition: border-color var(--transition);
}
input:focus, select:focus, textarea:focus{ border-color: var(--color-maroon); }
.select2-container .select2-selection--single{ height:auto !important; padding:12px 14px !important; border:1px solid var(--color-border) !important; border-radius: var(--radius-sm) !important; }
form.woocommerce-checkout .form-row{ margin-bottom: var(--space-3); }
form.woocommerce-checkout label{ display:block; font-size:13px; margin-bottom:6px; font-weight:600; }
#payment .payment_methods{ list-style:none; padding:0; border:1px solid var(--color-border); border-radius: var(--radius-sm); }
#payment .payment_methods li{ padding: var(--space-3); border-bottom:1px solid var(--color-border); }
#payment .payment_methods li:last-child{ border-bottom:none; }
#payment .payment_box{ background: var(--color-cream); padding: var(--space-3); margin-top: var(--space-2); border-radius: var(--radius-sm); font-size:13px; }

/* =========================================================
   14. WOOCOMMERCE MISC
   ========================================================= */
.woocommerce-message, .woocommerce-info, .woocommerce-error{
	list-style:none; background: var(--color-cream); border-left: 3px solid var(--color-maroon);
	padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); font-size:14px;
}
.woocommerce-breadcrumb{ font-size:12px; color: var(--color-text-muted); margin-bottom: var(--space-4); }
.breadcrumb-row{ margin-bottom: var(--space-3); }
.product_meta{ margin-top: var(--space-4); padding-top: var(--space-4); border-top:1px solid var(--color-border); font-size:13px; color: var(--color-text-muted); }
.product_meta > span{ display:block; margin-bottom:6px; }
.product_meta a{ color: var(--color-maroon); }
.star-rating{ color: var(--color-gold); }
.woocommerce-pagination ul{ display:flex; gap:8px; justify-content:center; margin-top: var(--space-6); }
.woocommerce-pagination a, .woocommerce-pagination span{ width:36px; height:36px; display:flex; align-items:center; justify-content:center; border:1px solid var(--color-border); border-radius: var(--radius-sm); font-size:13px; }
.woocommerce-pagination .current{ background: var(--color-maroon); color:#fff; border-color: var(--color-maroon); }
table.shop_table{ width:100%; border-collapse:collapse; }
table.shop_table th, table.shop_table td{ padding:12px; border-bottom:1px solid var(--color-border); text-align:left; font-size:14px; }
.related.products, .upsells{ margin-top: var(--space-7); }
ul.products{ display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); list-style:none; padding:0; margin:0; }
ul.products li.product{ list-style:none; }
@media (max-width: 1024px){ ul.products{ grid-template-columns: repeat(2, 1fr); } }

/* =========================================================
   16. DELIVERY INFO, SHARE BUTTONS, STICKY CART, WHATSAPP
   ========================================================= */
.delivery-info{ margin-top: var(--space-4); padding: var(--space-4); background: var(--color-cream); border-radius: var(--radius-md); display:flex; flex-direction:column; gap: var(--space-3); }
.delivery-info-row{ display:flex; gap:12px; align-items:flex-start; }
.delivery-info-icon{ font-size:18px; line-height:1; flex-shrink:0; }
.delivery-info-row strong{ display:block; font-size:13px; margin-bottom:2px; }
.delivery-info-row p{ margin:0; font-size:13px; color: var(--color-text-muted); }

.product-share{ display:flex; align-items:center; gap:10px; margin-top: var(--space-3); font-size:13px; }
.product-share-label{ color: var(--color-text-muted); }
.product-share a, .product-share button{
	width:32px; height:32px; border-radius:50%; border:1px solid var(--color-border);
	display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;
	transition: all var(--transition);
}
.product-share a:hover, .product-share button:hover{ background: var(--color-maroon); color:#fff; border-color: var(--color-maroon); }
.product-share .js-copy-link{ width:auto; padding:0 12px; border-radius: var(--radius-sm); font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-size:10px; }

.sticky-add-to-cart{
	position: fixed; left:0; right:0; bottom:0; z-index: 400; background:#fff;
	border-top:1px solid var(--color-border); box-shadow: 0 -4px 16px rgba(0,0,0,.08);
	display:none; align-items:center; gap:12px; padding: 10px var(--space-3);
	transform: translateY(100%); transition: transform var(--transition);
}
.sticky-add-to-cart.is-visible{ display:flex; transform: translateY(0); }
.sticky-add-to-cart img{ width:44px; height:56px; object-fit:cover; border-radius: var(--radius-sm); flex-shrink:0; }
.sticky-add-to-cart-info{ flex:1; min-width:0; }
.sticky-add-to-cart-info .name{ display:block; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sticky-add-to-cart-info .product-price{ font-size:13px; }
@media (min-width: 783px){ .sticky-add-to-cart{ display:none !important; } }

.whatsapp-float{
	position: fixed; bottom: 20px; right: 20px; z-index: 900;
	width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff;
	display:flex; align-items:center; justify-content:center; box-shadow: 0 6px 20px rgba(0,0,0,.2);
	transition: transform var(--transition);
}
.whatsapp-float:hover{ transform: scale(1.08); }
@media (max-width: 782px){ .whatsapp-float{ bottom: 16px; right: 16px; width:50px; height:50px; } }
body.sticky-cart-visible .whatsapp-float{ bottom: 86px; }

/* =========================================================
   15. RESPONSIVE
   ========================================================= */
@media (max-width: 1024px){
	.grid-4{ grid-template-columns: repeat(2, 1fr); }
	.shop-layout{ grid-template-columns: 1fr; }
	.shop-sidebar{ display:none; }
	.mobile-filter-toggle{ display:flex; }
	.footer-top{ grid-template-columns: 1fr 1fr; }
	.product-single{ grid-template-columns: 1fr; gap: var(--space-4); }
	.instagram-grid{ grid-template-columns: repeat(4,1fr); }
}
@media (max-width: 782px){
	.top-bar{ display:none; }
	.main-navigation{ display:none; }
	.mobile-menu-toggle{ display:flex; }
	.hero{ min-height: 520px; text-align:left; }
	.brand-story{ grid-template-columns:1fr; }
	.grid-3, .grid-4{ grid-template-columns: repeat(2,1fr); }
	.footer-top{ grid-template-columns: 1fr; padding-top: var(--space-5); }
	.newsletter form{ flex-direction:column; }
	.instagram-grid{ grid-template-columns: repeat(3,1fr); }
}