/*
Theme Name: Miss Rose Official Pk
Theme URI: https://missroseofficialpk.com
Author: Zohaib
Description: Custom WooCommerce theme for Miss Rose Official Pk — makeup & cosmetics store, Pakistan.
Version: 1.0.22
Text Domain: mrpk
*/

/* ===========================================================
   DESIGN TOKENS
   =========================================================== */
:root{
	--header-dark: #000000;   /* top bar + footer (same color, as requested) */
	--berry-900:   #1A1A1A;   /* hover/dark text */
	--berry-700:   #000000;   /* buttons / primary accents */
	--berry-500:   #333333;
	--blush-50:    #FFFFFF;   /* page background */
	--blush-100:   #F7F7F7;   /* subtle panel background */
	--ivory:       #FFFFFF;   /* card/surface background */
	--gold-500:    #F5B301;   /* star ratings */
	--gold-100:    #FFF6DE;
	--sale-red:    #E2231A;   /* Sale badge + old price */
	--ink-900:     #1A1A1A;   /* body text */
	--ink-600:     #6B6B6B;   /* muted text / nav links */
	--line:        #ECECEC;   /* hairline borders */

	--font-display: 'Work Sans', -apple-system, 'Segoe UI', sans-serif;   /* headings use the same clean sans as body (v1.0.9: Fraunces serif dropped — the serif/sans mix across sections looked inconsistent, and the reference store uses clean sans headings throughout) */
	--font-body:    'Work Sans', -apple-system, 'Segoe UI', sans-serif;

	--radius-s: 4px;
	--radius-m: 10px;
	--container: 1200px;
}

/* ===========================================================
   RESET / BASE
   =========================================================== */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
	margin:0;
	background:var(--blush-50);
	color:var(--ink-900);
	font-family:var(--font-body);
	font-size:16px;
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }

h1,h2,h3,h4{
	font-family:var(--font-display);
	font-weight:600;
	line-height:1.15;
	margin:0 0 .5em;
	color:var(--berry-900);
}
h1{ font-size:clamp(2rem, 4vw, 3.2rem); }
h2{ font-size:clamp(1.6rem, 3vw, 2.2rem); }
p{ margin:0 0 1em; max-width:65ch; }

:focus-visible{ outline:2px solid var(--gold-500); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
	*{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}

/* ===========================================================
   BUTTONS
   =========================================================== */
.btn{
	display:inline-flex;
	align-items:center;
	gap:.5em;
	padding:.85em 1.8em;
	border-radius:999px;
	font-weight:600;
	font-size:.95rem;
	border:1.5px solid transparent;
	transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.btn--primary{ background:var(--berry-700); color:var(--ivory); }
.btn--primary:hover{ background:var(--berry-900); }
.btn--outline{ border-color:var(--berry-700); color:var(--berry-700); background:transparent; }
.btn--outline:hover{ background:var(--berry-700); color:var(--ivory); }

/* ===========================================================
   TOP ANNOUNCEMENT BAR
   =========================================================== */
.announce-bar{
	background:var(--header-dark);
	color:var(--ivory);
	font-size:.85rem;
	text-align:center;
	padding:.55em 1em;
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
}
.trust-bar{
	background:var(--ivory);
	color:var(--ink-900);
	font-size:.85rem;
	text-align:center;
	padding:.6em 1em;
	border-bottom:1px solid var(--line);
	letter-spacing:.01em;
}

/* ===========================================================
   SITE HEADER
   =========================================================== */
.site-header{
	background:var(--ivory);
	border-bottom:1px solid var(--line);
	position:sticky;
	top:0;
	z-index:100;
}
.site-header__inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:2rem;
	padding:1rem 24px;
	max-width:var(--container);
	margin:0 auto;
}
.site-logo{
	display:flex;
	flex-direction:column;
	align-items:center;
	line-height:1.1;
	white-space:nowrap;
}
.site-logo__main{
	font-family:var(--font-display);
	font-size:1.9rem;
	font-weight:600;
	letter-spacing:.04em;
	color:var(--ink-900);
}
.site-logo__sub{
	font-size:.6rem;
	letter-spacing:.18em;
	color:var(--ink-600);
	text-transform:uppercase;
	margin-top:.15em;
}
.announce-nav{
	background:none; border:0; color:#fff; font-size:.8rem;
	position:absolute; top:50%; transform:translateY(-50%);
}
.announce-nav--prev{ left:1.25rem; }
.announce-nav--next{ right:1.25rem; }
.primary-nav ul{ display:flex; gap:1.75rem; }
.primary-nav a{
	font-weight:600;
	font-size:.82rem;
	letter-spacing:.03em;
	text-transform:uppercase;
	color:var(--ink-600);
	position:relative;
	padding:.25em 0;
}
.primary-nav a:hover{ color:var(--berry-700); }
.primary-nav .menu-item-has-children > a::after{
	content:'';
	display:inline-block;
	width:6px; height:6px;
	border-right:1.5px solid currentColor;
	border-bottom:1.5px solid currentColor;
	transform:rotate(45deg);
	margin-left:.4em;
}
.header-icons{ display:flex; align-items:center; gap:1.4rem; }
.header-icons a{ position:relative; display:flex; color:var(--ink-900); }
.header-icons svg{ width:21px; height:21px; }
.cart-count{
	position:absolute;
	top:-8px; right:-10px;
	background:var(--berry-900);
	color:#fff;
	font-size:.65rem;
	font-weight:700;
	width:18px; height:18px;
	border-radius:50%;
	display:flex; align-items:center; justify-content:center;
}
.nav-toggle{ display:none; background:none; border:0; font-size:1.4rem; color:var(--berry-900); }

/* Image site logo (Customizer > Site Identity > Logo) */
.site-logo--image{ display:flex; align-items:center; }
.site-logo--image .custom-logo{ max-height:56px; width:auto; }
/* Footer logo: black logo on black footer needs a white badge behind it */
.footer-logo{
	background:#fff;
	display:inline-block;
	padding:.5rem .9rem;
	border-radius:6px;
	margin-bottom:1rem;
	line-height:0;
}
.footer-logo img{ max-height:44px; width:auto; }

@media (max-width: 880px){
	.primary-nav{ display:none; }
	.nav-toggle{ display:block; }
	/* Mobile dropdown menu: stack links vertically (the list itself is
	   a flex row by default, which squeezed the links side by side). */
	.primary-nav ul{ flex-direction:column; gap:.75rem; }
	.primary-nav a{ font-size:.9rem; }
	.hero-slider{ height:min(46vh, 380px); }
}

/* ===========================================================
   FOOTER
   =========================================================== */
.site-footer{
	background:var(--header-dark);
	color:#D9D9D9;
	margin-top:4rem;
	position:relative;
}
.footer-grid{
	max-width:var(--container);
	margin:0 auto;
	padding:3.5rem 24px 2rem;
	display:grid;
	grid-template-columns:1.3fr 1fr 1fr 1fr;
	gap:2.5rem;
}
.footer-col__title{
	font-family:var(--font-body);
	font-size:.95rem;
	font-weight:600;
	color:var(--ivory);
	margin-bottom:1em;
}
.footer-col a{ display:block; color:var(--blush-100); opacity:.85; font-size:.9rem; margin-bottom:.6em; }
.footer-col a:hover{ opacity:1; color:var(--gold-500); }
/* FOOTER SOCIAL ICONS (v1.0.21 — rebuilt from scratch: old rules
   removed entirely; icon + circle sized and centered explicitly) */
.footer-social{
	display:flex;
	align-items:center;
	gap:.75rem;
	margin-top:1rem;
}
.social-icon{
	box-sizing:border-box;
	width:48px;
	height:48px;
	flex:0 0 auto;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:0;
	margin:0;
	border:1px solid rgba(255,255,255,.35);
	border-radius:50%;
	background:transparent;
	color:#fff;
	line-height:0;
	text-decoration:none;
}
.social-icon svg{
	width:22px;
	height:22px;
	display:block;
	flex:0 0 auto;
	margin:auto;
}
.social-icon:hover{
	border-color:var(--gold-500);
	opacity:1;
}
.footer-bottom{
	border-top:1px solid rgba(255,255,255,.15);
	text-align:center;
	font-size:.8rem;
	padding:1.25rem;
	opacity:.75;
}

@media (max-width: 880px){
	.footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 520px){
	.footer-grid{ grid-template-columns:1fr; }
}

/* ===========================================================
   HOMEPAGE: HERO SLIDER
   =========================================================== */
.hero-slider{
	position:relative;
	height:min(70vh, 560px);
	overflow:hidden;
	background:var(--blush-100);
}
.hero-slide{
	position:absolute; inset:0;
	background-size:cover;
	background-position:center;
	opacity:0;
	transition:opacity .6s ease;
}
.hero-slide.is-active{ opacity:1; }
.hero-nav{
	position:absolute; top:50%; transform:translateY(-50%);
	background:rgba(255,255,255,.85);
	border:0; width:42px; height:42px; border-radius:50%;
	font-size:1rem; color:var(--ink-900);
	z-index:5;
}
.hero-nav--prev{ left:16px; }
.hero-nav--next{ right:16px; }
.hero-dots{
	position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
	display:flex; gap:8px; z-index:5;
}
.hero-dots span{
	width:8px; height:8px; border-radius:50%;
	background:rgba(255,255,255,.6);
	display:block;
}
.hero-dots span.is-active{ background:#fff; }

/* TAGLINE */
.tagline-strip{
	text-align:center;
	padding:2.5rem 24px 1.5rem;
	max-width:720px;
	margin:0 auto;
}
.tagline-sub{ color:var(--ink-600); font-size:.95rem; max-width:none; }

/* SECTION TITLES */
.section-title{ text-align:center; margin-bottom:1.5rem; }
.shop-section, .reviews-section, .why-us{ padding:3rem 24px; }
.section-cta{ text-align:center; margin-top:1.5rem; }

/* Best Sellers product grid — custom loop cards (competitor style):
   white card, light-grey border, square corners, image flush to edges,
   red Sale pill bottom-left OF THE IMAGE (inside its own image wrapper,
   so it can never touch the price), left-aligned name,
   red struck-through old price + black sale price. */
.mrpk-products{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:1.5rem;
	list-style:none;
	padding:0;
	margin:0;
}
.mrpk-product{
	background:var(--ivory);
	border:1px solid var(--line);
	border-radius:0;
	padding:0;
	text-align:left;
}
.mrpk-product__image{ position:relative; }
.mrpk-product__image a{ display:block; }
.mrpk-product__image img{
	width:100%;
	height:auto;
	display:block;
}
.mrpk-sale{
	position:absolute;
	bottom:.75rem;
	left:.75rem;
	background:var(--sale-red);
	color:#fff;
	border-radius:999px;
	padding:.35em .8em;
	font-size:.8rem;
	font-weight:600;
	line-height:1.4;
}
.mrpk-product__name{
	font-family:var(--font-body);
	font-size:1rem;
	font-weight:600;
	color:var(--ink-900);
	text-align:left;
	padding:0 1rem;
	margin:.75rem 0 .25rem;
}
.mrpk-product__name a:hover{ text-decoration:underline; }
.mrpk-product__price{
	border-top:1px solid var(--line);
	margin:.6rem 1rem 0;
	padding:.6rem 0 1rem;
	color:var(--ink-900);
	font-weight:700;
	text-align:left;
}
.mrpk-product__price del{
	color:var(--sale-red);
	font-size:.9em;
	font-weight:400;
	margin-right:.5em;
}
.mrpk-product__price ins{
	color:var(--ink-900);
	font-weight:700;
	font-size:1.1em;
	text-decoration:none;
}
/* Best Sellers heading left-aligned, like the reference store */
.shop-section .section-title{
	text-align:left;
	font-family:var(--font-body);
	font-weight:700;
}
/* View All: solid black rectangular button, centered */
.section-cta .btn{
	border-radius:2px;
	padding:.9em 2.8em;
}
@media (max-width: 880px){
	.mrpk-products{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 520px){
	/* Two product cards per row on phones (was a single giant column). */
	.mrpk-products{ grid-template-columns:repeat(2, 1fr); gap:.75rem; }
	.mrpk-product__name{ font-size:.9rem; padding:0 .75rem; }
	.mrpk-product__price{ margin:.6rem .75rem 0; padding:.6rem 0 .75rem; font-size:.9rem; }
}

.placeholder-note{
	text-align:center;
	color:var(--ink-600);
	font-style:italic;
	background:var(--blush-100);
	border-radius:var(--radius-m);
	padding:1.5rem;
}

/* UGC STRIP */
.ugc-strip{ background:var(--blush-100); padding:3rem 24px; text-align:center; }

/* WHY US */
.why-block{
	display:grid;
	grid-template-columns:1fr 1fr;
	align-items:center;
	gap:2.5rem;
	margin-bottom:2.5rem;
}
.why-block--reverse{ direction:rtl; }
.why-block--reverse .why-text{ direction:ltr; }
.why-block img{ border-radius:var(--radius-m); }
@media (max-width: 760px){
	.why-block, .why-block--reverse{ grid-template-columns:1fr; direction:ltr; }
}

/* BANNER CTA */
.banner-cta{
	background-size:cover;
	background-position:center;
	padding:5rem 24px;
	text-align:center;
	color:#fff;
	position:relative;
}
.banner-cta::before{
	content:'';
	position:absolute; inset:0;
	background:rgba(26,26,26,.45);
}
.banner-cta__inner{ position:relative; z-index:1; max-width:560px; margin:0 auto; }
.banner-cta h2{ color:#fff; }

/* NEWSLETTER */
.newsletter{
	text-align:center;
	padding:3.5rem 24px;
	background:var(--berry-700);
	color:#fff;
}
.newsletter h2{ color:#fff; }
.newsletter p{ color:rgba(255,255,255,.85); margin:0 auto 1.5rem; }
.newsletter-form{
	display:flex;
	justify-content:center;
	gap:.75rem;
	max-width:420px;
	margin:0 auto;
	flex-wrap:wrap;
}
.newsletter-form input{
	flex:1;
	min-width:200px;
	padding:.85em 1.2em;
	border-radius:999px;
	border:0;
}

/* FLOATING WHATSAPP BUTTON (v1.0.17 — user correction: ZORVA OUTSIDE
   the button, button stays ROUND; stronger effect than v1.0.16's
   single soft pulse — double ripple rings + gentle float + glow) */
.floating-whatsapp{
	position:fixed;
	left:22px; bottom:22px;
	display:flex; align-items:center; gap:10px;
	z-index:200;
	text-decoration:none;
	animation:wa-float 3s ease-in-out infinite;
}
.floating-whatsapp__label{
	background:#fff;
	color:#111;
	font-weight:700;
	font-size:.9rem;
	letter-spacing:.02em;
	line-height:1;
	white-space:nowrap;
	padding:.5rem .8rem;
	border-radius:999px;
	box-shadow:0 4px 14px rgba(0,0,0,.2);
}
.floating-whatsapp__icon{
	position:relative;
	width:52px; height:52px;
	border-radius:50%;
	background:#25D366;
	color:#fff;
	display:flex; align-items:center; justify-content:center;
	box-shadow:0 6px 18px rgba(0,0,0,.25), 0 0 24px rgba(37,211,102,.45);
	transition:transform .2s ease;
}
.floating-whatsapp:hover .floating-whatsapp__icon{
	transform:scale(1.08);
}
.floating-whatsapp__icon::before,
.floating-whatsapp__icon::after{
	content:"";
	position:absolute;
	inset:0;
	border-radius:50%;
	animation:wa-pulse 2.4s infinite;
	pointer-events:none;
}
.floating-whatsapp__icon::after{
	animation-delay:1.2s;
}
@keyframes wa-pulse{
	0%{ box-shadow:0 0 0 0 rgba(37,211,102,.5); }
	70%{ box-shadow:0 0 0 16px rgba(37,211,102,0); }
	100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); }
}
@keyframes wa-float{
	0%,100%{ transform:translateY(0); }
	50%{ transform:translateY(-5px); }
}

/* BACK TO TOP BUTTON (v1.0.17): bottom-right corner, same size
   (52px) and same bottom offset as the WhatsApp button, with the
   same float animation so both buttons stay level — never one
   above the other. */
.back-to-top{
	position:fixed;
	right:22px; bottom:22px;
	width:52px; height:52px;
	border:1px solid rgba(255,255,255,.35);
	border-radius:50%;
	background:var(--header-dark);
	color:#fff;
	display:flex; align-items:center; justify-content:center;
	box-shadow:0 6px 18px rgba(0,0,0,.25);
	z-index:200;
	cursor:pointer;
	transition:transform .2s ease;
	animation:wa-float 3s ease-in-out infinite;
}
.back-to-top:hover{
	transform:scale(1.08);
}

/* HEADER SEARCH BAR (v1.0.18 — fixes the dead header search icon:
   it only added "#" before; now it toggles a real search bar) */
.header-icons button{
	background:none;
	border:0;
	padding:0;
	cursor:pointer;
	color:var(--ink-900);
	display:flex;
}
.header-search{
	display:none;
	padding:.75rem 24px 1rem;
	border-top:1px solid #ECECEC;
	background:#FFFDFB;
}
.header-search.is-open{
	display:block;
}
.header-search form{
	display:flex;
	gap:.5rem;
	max-width:720px;
	margin:0 auto;
}
.header-search input[type="search"]{
	flex:1;
	padding:.6rem .9rem;
	border:1px solid #DDD;
	border-radius:6px;
	font-size:.95rem;
}
.header-search button[type="submit"]{
	padding:.6rem 1.2rem;
	border:0;
	border-radius:6px;
	background:var(--header-dark);
	color:#fff;
	font-weight:600;
	cursor:pointer;
}

/* CATEGORY GRID (Face / Eyes / Lip Makeup / Brushes) */
.category-grid{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:1.5rem;
	padding:2.5rem 24px;
	max-width:var(--container);
	margin:0 auto;
}
.category-card{ display:block; }
.category-card img{
	border-radius:var(--radius-m);
	aspect-ratio:3/4;
	object-fit:cover;
	margin-bottom:.75rem;
}
.category-card__label{
	font-weight:700;
	font-size:1rem;
	color:var(--ink-900);
}
.category-card__label::after{ content:' \2192'; }
@media (max-width: 880px){
	.category-grid{ grid-template-columns:repeat(2, 1fr); }
}

/* Force WooCommerce's auto-generated button colors to our black & white scheme */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .add_to_cart_button,
.woocommerce .single_add_to_cart_button,
.woocommerce a.added_to_cart,
.woocommerce .checkout-button,
.woocommerce #place_order {
	background-color:var(--header-dark) !important;
	border-color:var(--header-dark) !important;
	color:#fff !important;
	border-radius:999px !important;
	box-shadow:none !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .add_to_cart_button:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce #place_order:hover {
	background-color:#333333 !important;
	border-color:#333333 !important;
	color:#fff !important;
}
.woocommerce .price ins{ color:var(--ink-900); text-decoration:none; }
.woocommerce .price del{ color:var(--sale-red); }
.woocommerce span.onsale{
	background:var(--sale-red) !important;
	color:#fff !important;
}

/* ===========================================================
   SINGLE PRODUCT PAGE (v1.0.11)
   Competitor-style structure, original code: centered container
   (was missing entirely — content sat flush to the viewport edge),
   60/40 image/details grid, prominent price, usable cart row,
   tidy meta chips, styled tabs, homepage-style related cards.
   =========================================================== */
.shop-container{
	max-width:var(--container);
	margin:0 auto;
	padding:2rem 24px;
}
/* Hide breadcrumbs on single products (competitor shows none;
   ours were also unstable — Home / varying-category / product). */
.single-product .woocommerce-breadcrumb{ display:none; }
.single-product div.product{
	display:grid;
	grid-template-columns:3fr 2fr;
	gap:3rem;
	align-items:start;
}
.single-product div.product div.images,
.single-product div.product div.summary{
	float:none !important;
	width:auto !important;
	margin:0;
}
.single-product .woocommerce-product-gallery__image img{
	width:100%;
	height:auto;
	display:block;
}
.single-product .flex-control-thumbs{
	display:flex;
	gap:.5rem;
	margin-top:.75rem;
}
.single-product .flex-control-thumbs li{
	width:72px;
	float:none;
	margin:0;
}
.single-product .flex-control-thumbs li img{
	border:2px solid transparent;
	cursor:pointer;
}
.single-product .flex-control-thumbs li img.flex-active{
	border-color:var(--ink-900);
}
.single-product .summary .product_title{
	font-size:clamp(1.5rem, 2.5vw, 2rem);
	margin-bottom:.5rem;
}
.single-product .summary .price{
	font-size:1.6rem;
	margin:1rem 0;
}
.single-product .summary .woocommerce-product-details__short-description{
	color:var(--ink-600);
}
.single-product form.cart{
	display:flex;
	gap:.75rem;
	align-items:stretch;
	flex-wrap:wrap;
	margin:1.25rem 0;
}
.single-product form.cart .quantity input.qty{
	width:64px;
	text-align:center;
	padding:.8em .5em;
	border:1px solid var(--line);
	border-radius:999px;
}
.single-product form.cart .quantity{
	flex:1 1 100%;
}
.single-product .single_add_to_cart_button{
	flex:1 1 0;
	padding:.95em 1.5em !important;
	font-size:1rem !important;
}
/* BUY NOW (v1.0.22): beside Add to Cart, same size — half row each.
   Straight to checkout via the redirect in functions.php. */
.single-product .mrpk-buy-now{
	flex:1 1 0;
	padding:.95em 1.5em !important;
	font-size:1rem !important;
}
/* PRODUCT TAGS (v1.0.22 — user: tags must not show in ANY view) */
.tagged_as{
	display:none !important;
}
.single-product .product_meta{
	border-top:1px solid var(--line);
	margin-top:1.5rem;
	padding-top:1rem;
	font-size:.9rem;
	color:var(--ink-600);
}
.single-product .product_meta > span{
	display:block;
	margin-bottom:.4em;
}
.single-product .product_meta .tagged_as a{
	display:inline-block;
	border:1px solid var(--line);
	border-radius:999px;
	padding:.15em .6em;
	margin:.15em .25em .15em 0;
	font-size:.8rem;
	color:var(--ink-900);
}
.woocommerce-tabs{ margin-top:3rem; }
.woocommerce-tabs ul.tabs{
	display:flex;
	gap:2rem;
	border-bottom:1px solid var(--line);
	padding:0;
	margin:0 0 1.5rem;
}
.woocommerce-tabs ul.tabs li{
	border:0;
	background:none;
	padding:0 0 .75rem;
	margin:0;
}
.woocommerce-tabs ul.tabs li a{
	color:var(--ink-600);
	font-weight:600;
}
.woocommerce-tabs ul.tabs li.active a{
	color:var(--ink-900);
	border-bottom:2px solid var(--ink-900);
	padding-bottom:.75rem;
}
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after{
	display:none;
}
.single-product .related.products{ margin-top:3rem; }
.single-product .related ul.products{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:1.5rem;
}
.single-product .related ul.products li.product{
	float:none;
	width:auto;
	margin:0;
	position:relative;
	background:var(--ivory);
	border:1px solid var(--line);
	text-align:left;
}
.single-product .related .woocommerce-loop-product__title{
	font-size:1rem;
	padding:0 1rem;
}
.single-product .related .price{
	font-size:.95rem;
	padding:0 1rem 1rem;
}
.single-product .related span.onsale{
	top:auto;
	bottom:.75rem;
	left:.75rem;
	right:auto;
	min-height:0;
	min-width:0;
	border-radius:999px;
	padding:.35em .8em;
	font-size:.8rem;
	line-height:1.4;
}
@media (max-width: 880px){
	.single-product div.product{
		grid-template-columns:1fr;
		gap:2rem;
	}
	.single-product .related ul.products{
		grid-template-columns:repeat(2, 1fr);
	}
}
@media (max-width: 520px){
	.shop-container{ padding:1.5rem 16px; }
}
   The header row (hamburger + long logo + 3 icons) overflowed a
   375px screen, and the 70vh hero zoomed the wide banners hard
   on phones. These rules shrink the header to fit and calm the hero.
   =========================================================== */
@media (max-width: 520px){
	.container{ padding:0 16px; }
	.site-header__inner{ padding:.75rem 16px; gap:.75rem; }
	.site-logo__main{ font-size:1.25rem; }
	.site-logo__sub{ font-size:.55rem; }
	.site-logo--image .custom-logo{ max-height:40px; }
	.header-icons{ gap:.9rem; }
	.header-icons svg{ width:19px; height:19px; }
	.announce-bar{ font-size:.75rem; padding:.55em 2.5em; }
	.announce-nav--prev{ left:.5rem; }
	.announce-nav--next{ right:.5rem; }
	.trust-bar{ font-size:.75rem; }
	.hero-slider{ height:300px; }
	.shop-section, .why-us{ padding:2rem 16px; }
	.banner-cta{ padding:3rem 16px; }
	.newsletter-form input{ flex:1 1 100%; }
	.category-grid{ gap:1rem; padding:2rem 16px; }
}

/* ===========================================================
   SHOP ARCHIVE + RELATED GRID MOBILE FIT (v1.0.12)
   Problem (user phone screenshots): on mobile the Shop archive
   grid bled to the screen edges — prices flush at the left edge,
   Sale badges clipped at the right edge — and the Related grid
   on product pages stayed squeezed with big overlapping badges.
   Cause: the theme never overrode WooCommerce's archive grid,
   so core widths/margins and the big circle Sale badge applied.
   Fix: explicit grids that always fit INSIDE the padded
   .shop-container, small pill badges pinned inside each card,
   wrapping titles, and a stacking ordering row on phones.
   =========================================================== */
.woocommerce ul.products{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:1.5rem;
	margin:0;
	padding:0;
}
.woocommerce ul.products li.product{
	float:none !important;
	width:auto !important;
	margin:0 !important;
	min-width:0;
	position:relative;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
	white-space:normal;
	overflow:visible;
	text-overflow:clip;
	overflow-wrap:break-word;
}
.woocommerce ul.products li.product span.onsale{
	top:.5rem;
	right:.5rem;
	left:auto;
	bottom:auto;
	min-height:0;
	min-width:0;
	border-radius:999px;
	padding:.3em .7em;
	font-size:.75rem;
	line-height:1.4;
}
@media (max-width: 880px){
	.woocommerce ul.products{
		grid-template-columns:repeat(2, 1fr);
		gap:1rem;
	}
	.woocommerce .woocommerce-result-count,
	.woocommerce .woocommerce-ordering{
		float:none;
	}
	.woocommerce .woocommerce-ordering select{
		max-width:100%;
	}
}
@media (max-width: 520px){
	.woocommerce ul.products{
		gap:.75rem;
	}
	.woocommerce ul.products li.product .woocommerce-loop-product__title{
		font-size:.85rem;
	}
	.woocommerce ul.products li.product .price{
		font-size:.85rem;
	}
	.woocommerce ul.products li.product span.onsale{
		font-size:.7rem;
		padding:.25em .6em;
	}
	.woocommerce .woocommerce-result-count,
	.woocommerce .woocommerce-ordering{
		width:100%;
	}
	.single-product .related ul.products{
		gap:.75rem;
	}
	.single-product .related .woocommerce-loop-product__title{
		font-size:.85rem;
	}
	.single-product .related .price{
		font-size:.85rem;
	}
	.single-product .related span.onsale{
		top:.5rem;
		right:.5rem;
		left:auto;
		bottom:auto;
		font-size:.7rem;
		padding:.25em .6em;
	}
}

/* ===========================================================
   HEADER MOBILE (v1.0.14 — CORRECTION)
   User correction 2026-10-27: "close" meant the 3 header icons
   should sit CLOSER together (nazdeeq), NOT be removed.
   v1.0.13 wrongly hid them; v1.0.14 brings them back: on narrow
   screens the logo is truly centered (in flow, centered), the
   hamburger sits at the left, and the 3 icons (search / account
   / cart) sit at the right with a tighter gap between them.
   Footer white logo (v1.0.13) unchanged.
   =========================================================== */
.footer-logo{
	background:none;
	padding:0;
	border-radius:0;
}
@media (max-width: 880px){
	.site-header__inner{
		position:relative;
		justify-content:center;
	}
	.nav-toggle{
		position:absolute;
		left:16px;
		top:50%;
		transform:translateY(-50%);
	}
	.header-icons{
		position:absolute;
		right:16px;
		top:50%;
		transform:translateY(-50%);
		gap:.5rem;
	}
}