/* =========================================================================
   N. AHMED THEME — MAIN STYLESHEET
   Mobile-first. Colors come from CSS custom properties (see inc/customizer.php
   for the :root block printed in <head> — editable from Appearance → Customize
   without touching this file).
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. RESET / BASE
   ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: var(--color-text);
	background: var(--color-background);
}
/* Everything except the sticky header lives inside this wrapper (opened in
   header.php, closed in footer.php). overflow-x:hidden used to sit on
   html/body directly, but any ancestor of a `position: sticky` element
   with overflow other than visible breaks the stickiness in most browsers
   — that's what was making the header/menu scroll away instead of
   staying put. Keeping the clipping here, below the header, gets the
   same "nothing can push the page sideways" protection back without
   breaking the sticky header. */
.site-content-clip { overflow-x: hidden; max-width: 100%; }
/* Defensive: flex/grid children can force their container wider than the
   viewport if their content (a long unbroken product title/SKU, an image)
   doesn't wrap — this is what caused product cards to overflow and get
   squashed on mobile/tablet. min-width:0 lets grid/flex items shrink to
   fit instead of expanding past their track. */
.container, .shop-layout, .shop-content, .products-grid, ul.products,
li.products-grid__item, .product-card, .product-card__body, .hscroll__track { min-width: 0; }
h1, h2, h3, h4, h5, h6 {
	font-family: 'Poppins', 'Inter', sans-serif;
	color: var(--color-primary);
	line-height: 1.25;
	margin: 0 0 .5em;
	font-weight: 600;
}
p { margin: 0 0 1em; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-secondary); text-decoration: none; }
a:hover { color: var(--color-button-hover); }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: 1rem; }
table { border-collapse: collapse; width: 100%; }
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px,1px,1px,1px); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.skip-link { top: -100px; left: 0; position: absolute; z-index: 10000; background: var(--color-primary); color: #fff; padding: 10px 16px; }
.skip-link:focus { top: 0; }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 16px; }
.container--narrow { max-width: 960px; }
.content-narrow { max-width: 860px; padding-top: 32px; padding-bottom: 48px; }

/* -------------------------------------------------------------------------
   2. BUTTONS
   ---------------------------------------------------------------------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 13px 26px; border-radius: 999px; font-weight: 600; font-size: .95rem;
	border: 2px solid transparent; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease;
	line-height: 1.2;
}
.btn--primary, button.button, input[type="submit"], .woocommerce #respond input#submit,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
a.add_to_cart_button, a.ajax_add_to_cart_button {
	background: var(--color-button); color: #fff !important; border-color: var(--color-button);
}
.btn--primary:hover, button.button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover,
a.add_to_cart_button:hover {
	background: var(--color-button-hover); border-color: var(--color-button-hover); color: #fff !important;
}
.btn--outline { background: transparent; color: var(--color-primary); border-color: var(--color-border); }
.btn--outline:hover { border-color: var(--color-secondary); color: var(--color-secondary); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--color-muted); }
.btn--large { padding: 16px 34px; font-size: 1.05rem; }
.btn--small { padding: 8px 16px; font-size: .82rem; }
.btn--full { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* -------------------------------------------------------------------------
   3. ANNOUNCEMENT BAR
   ---------------------------------------------------------------------- */
.announcement-bar { background: var(--color-primary); color: #fff; overflow: hidden; padding: 8px 0; font-size: .78rem; }
.announcement-bar__track { display: inline-flex; white-space: nowrap; animation: nahmed-marquee 28s linear infinite; transform: translateZ(0); backface-visibility: hidden; }
.announcement-bar__item { padding: 0 28px; letter-spacing: .02em; flex-shrink: 0; }
@keyframes nahmed-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .announcement-bar__track { animation: none; overflow-x: auto; } }

/* -------------------------------------------------------------------------
   4. HEADER
   ---------------------------------------------------------------------- */
.site-header { background: #fff; border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 500; }
/* Keeps the header properly stuck under the WP admin toolbar (instead of
   the two fighting for the same top:0 and appearing to jump on scroll)
   when you're browsing the site while logged in to wp-admin. */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .site-header { top: 46px; }
}
.site-header__row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; }
.site-header__logo { flex: 1; min-width: 0; }
.site-header__logo img { height: 40px; width: auto; }
.site-header__logo a { display: inline-block; }
.custom-logo { height: 40px; width: auto; }

.hamburger { background: none; border: 0; width: 34px; height: 34px; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 0; }
.hamburger span { display: block; height: 2px; background: var(--color-primary); border-radius: 2px; }

.site-header__nav { display: none; }
.primary-menu { display: flex; gap: 4px; }
.primary-menu > li > a {
	display: block; padding: 10px 16px; border-radius: 999px; color: var(--color-primary); font-weight: 500; font-size: .92rem;
}
.primary-menu > li > a:hover, .primary-menu > li.current-menu-item > a, .primary-menu > li.current_page_item > a {
	background: var(--color-secondary); color: #fff;
}
.primary-menu li { position: relative; }
.primary-menu ul.sub-menu {
	display: none; position: absolute; top: 100%; left: 0; background: #fff; border: 1px solid var(--color-border);
	border-radius: 10px; min-width: 240px; padding: 8px; box-shadow: 0 12px 30px rgba(0,0,0,.08); z-index: 50;
}
.primary-menu li:hover > ul.sub-menu, .primary-menu li:focus-within > ul.sub-menu { display: block; }
.primary-menu .sub-menu a { padding: 9px 14px; border-radius: 6px; color: var(--color-text); font-size: .9rem; }
.primary-menu .sub-menu a:hover { background: var(--color-surface); color: var(--color-secondary); }

.site-header__icons { display: flex; align-items: center; gap: 6px; }
.icon-btn { position: relative; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--color-primary); border-radius: 50%; }
.icon-btn:hover { background: var(--color-surface); color: var(--color-secondary); }
.icon-btn__count {
	position: absolute; top: -2px; right: -2px; background: var(--color-secondary); color: #fff; font-size: .62rem;
	min-width: 16px; height: 16px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 3px;
}

/* -------------------------------------------------------------------------
   5. MOBILE NAV DRAWER — a full-width panel sliding in from the right,
   with "Menu" / "Categories" tabs at the top instead of a small side
   drawer, per the shop owner's reference screenshot.
   ---------------------------------------------------------------------- */
.mobile-nav { position: fixed; inset: 0; z-index: 900; }
.mobile-nav[hidden] { display: none; }
.mobile-nav__backdrop { position: absolute; inset: 0; background: rgba(11,61,54,.5); z-index: 1; }
.mobile-nav__panel {
	position: absolute; top: 0; right: 0; z-index: 2; width: 100%; max-width: 480px; height: 100%;
	background: #fff; overflow-y: auto; display: flex; flex-direction: column;
	animation: nahmed-slide-in-right .22s ease;
}
@keyframes nahmed-slide-in-right { from { transform: translateX(100%); } to { transform: translateX(0); } }

.mobile-nav__tabbar {
	display: grid; grid-template-columns: 1fr 1fr 52px; align-items: stretch; flex-shrink: 0;
	border-bottom: 1px solid var(--color-border); position: sticky; top: 0; background: #fff; z-index: 3;
}
.mobile-nav__tab {
	background: none; border: 0; border-bottom: 3px solid transparent; padding: 16px 8px;
	font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; color: var(--color-muted); cursor: pointer;
}
.mobile-nav__tab.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.mobile-nav__close {
	background: none; border: 0; border-left: 1px solid var(--color-border); font-size: 1.6rem; line-height: 1;
	color: var(--color-primary); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.mobile-nav__close:hover { color: var(--color-secondary); }

.mobile-nav__body { flex: 1; }
.mobile-nav__panel-body[hidden] { display: none; }

.mobile-menu { padding: 0; }
.mobile-menu li { position: relative; }
.mobile-menu li a { display: block; padding: 13px 44px 13px 12px; border-bottom: 1px solid var(--color-border); color: var(--color-text); font-weight: 500; }
.mobile-menu__toggle {
	position: absolute; top: 0; right: 0; width: 46px; height: 46px; background: none; border: 0;
	display: flex; align-items: center; justify-content: center; color: var(--color-primary);
}
.mobile-menu__toggle svg { transition: transform .15s ease; }
.mobile-menu li.is-open > .mobile-menu__toggle svg, .footer-menu--tree li.is-open > .mobile-menu__toggle svg { transform: rotate(90deg); }
.mobile-menu .sub-menu { display: none; background: var(--color-surface); }
.mobile-menu li.is-open > .sub-menu { display: block; }
.mobile-menu .sub-menu a { padding-left: 26px; font-weight: 400; font-size: .92rem; }
.mobile-menu .sub-menu .sub-menu a { padding-left: 40px; }

/* The Categories tab reuses nahmed_render_category_tree() — the exact
   same markup as the footer's Categories accordion — so give it the same
   row look as the Menu tab only inside this panel. */
#js-mobile-nav .mobile-menu > li > a,
#js-mobile-nav .footer-menu--tree > li > a {
	padding: 15px 44px 15px 16px; text-transform: uppercase; letter-spacing: .02em; font-weight: 700; font-size: .84rem;
}
#js-mobile-nav .footer-menu--tree .sub-menu a { padding-left: 30px; text-transform: none; font-weight: 400; }
#js-mobile-nav .footer-menu--tree .sub-menu .sub-menu a { padding-left: 44px; }

/* Optional "Live" badge — add the CSS class `menu-badge-live` to any menu
   item in Appearance → Menus to show this next to it (e.g. a live sale). */
.menu-badge-live > a::after {
	content: 'Live'; display: inline-block; margin-left: 8px; background: var(--color-sale); color: #fff;
	font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
	padding: 2px 9px; border-radius: 999px; vertical-align: middle;
}

/* -------------------------------------------------------------------------
   6. SEARCH OVERLAY
   ---------------------------------------------------------------------- */
.search-overlay { position: fixed; inset: 0; z-index: 950; background: rgba(11,61,54,.6); backdrop-filter: blur(2px); }
.search-overlay[hidden] { display: none; }
.search-overlay__inner { background: #fff; padding: 20px 16px; max-height: 100vh; overflow-y: auto; margin-top: 0; }
.search-overlay__field { display: flex; align-items: center; gap: 10px; border: 2px solid var(--color-border); border-radius: 999px; padding: 10px 16px; }
.search-overlay__field input { flex: 1; border: 0; outline: 0; background: none; }
.search-overlay__field button { background: none; border: 0; font-size: 1.4rem; color: var(--color-muted); }
.search-overlay__results { margin-top: 16px; }
.search-result-item { display: flex; gap: 12px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--color-border); }
.search-result-item img { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; background: var(--color-surface); }
.search-result-item__title { font-weight: 500; color: var(--color-text); font-size: .9rem; }
.search-result-item__meta { font-size: .78rem; color: var(--color-muted); }
.search-result-item__price { color: var(--color-secondary); font-weight: 600; font-size: .85rem; }
.search-view-all { display: block; text-align: center; padding: 14px; font-weight: 600; color: var(--color-secondary); }
.search-empty, .search-loading { padding: 20px 4px; color: var(--color-muted); text-align: center; }

/* -------------------------------------------------------------------------
   7. HERO — image-only rotating banner slideshow
   ---------------------------------------------------------------------- */
.hero-slider { position: relative; overflow: hidden; background: var(--color-surface); cursor: grab; touch-action: pan-y; }
.hero-slider.is-dragging { cursor: grabbing; }
.hero-slider__track {
	display: flex; width: 100%; aspect-ratio: 16/9; gap: 0;
	transition: transform .5s cubic-bezier(.22,.61,.36,1); will-change: transform;
	transform: translateZ(0); backface-visibility: hidden;
}
.hero-slider__track.is-dragging { transition: none; }
.hero-slider__slide { position: relative; flex: 0 0 100%; width: 100%; height: 100%; display: block; margin: 0; overflow: hidden; }
/* A blurred, scaled-up copy of the same image fills the frame edge-to-edge
   behind it, so the real banner (object-fit: contain, below) can show the
   ENTIRE image with no cropping on any screen size/aspect ratio — phone,
   tablet or desktop — instead of chopping off the sides/top like
   object-fit: cover would on banners that don't exactly match the frame. */
.hero-slider__slide-bg {
	position: absolute; inset: -20px; z-index: 0; display: block;
	background-size: cover; background-position: center; filter: blur(28px) brightness(.82); transform: scale(1.15);
}
.hero-slider__slide img {
	position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none;
	-webkit-user-drag: none; user-select: none;
}
.hero-slider__dots {
	position: absolute; left: 0; right: 0; bottom: 14px; z-index: 2; display: flex; justify-content: center; gap: 8px;
}
.hero-slider__dot {
	width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.55); border: 0; padding: 0;
	transition: background .15s ease, transform .15s ease;
}
.hero-slider__dot.is-active { background: #fff; transform: scale(1.3); }

/* Banner fills the full width on every screen (phone, laptop, desktop) — no
   side bars / empty space. Same 16:9 frame on all sizes, image covers it. */
.hero-slider__slide img { object-fit: cover; object-position: center; }
/* The blurred backdrop is no longer needed and its heavy blur filter made
   the page laggy on weaker laptops. */
.hero-slider__slide-bg { display: none; }

/* -------------------------------------------------------------------------
   8. SECTION HEADINGS / GENERIC SECTIONS
   ---------------------------------------------------------------------- */
.section-heading { margin-bottom: 20px; }
.section-heading--center { text-align: center; }
.section-title { font-size: 1.5rem; margin-bottom: .2em; }
.section-subtitle { color: var(--color-muted); margin: 0; }
.product-section, .category-grid-section, .category-spotlight, .reviews-section, .newsletter-section, .trust-bar { padding: 40px 0; }
.category-grid-section, .trust-bar { background: var(--color-surface); }
.section-cta { text-align: center; margin-top: 24px; }

/* -------------------------------------------------------------------------
   9. HORIZONTAL SCROLL CAROUSEL (generic — used by Shop By Category,
   Featured Products, Best Sellers, New Arrivals: a single scrollable row
   with prev/next arrows instead of a wrapping grid)
   ---------------------------------------------------------------------- */
.hscroll { position: relative; display: flex; align-items: center; gap: 6px; padding: 0; }
.hscroll__track {
	display: flex; gap: 12px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory;
	padding: 4px 16px 14px; flex: 1; scrollbar-width: none; -ms-overflow-style: none; min-width: 0;
	-webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; cursor: grab; user-select: none;
}
.hscroll__track.is-grabbing { cursor: grabbing; scroll-snap-type: none; }
.hscroll__track::-webkit-scrollbar { display: none; }
.hscroll__arrow {
	display: none; flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 1px solid var(--color-border);
	color: var(--color-primary); align-items: center; justify-content: center; z-index: 2; box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.hscroll__arrow:hover { color: var(--color-secondary); border-color: var(--color-secondary); }
.hscroll__arrow:disabled { opacity: .35; pointer-events: none; }
/* Arrows only make sense once there's room for them beside the track — on
   phones the row is swipe-only, which is smoother than squeezing arrows in. */
@media (min-width: 768px) {
	.hscroll { padding: 0 8px; }
	.hscroll__track { padding: 4px 8px 14px; gap: 14px; }
	.hscroll__arrow { display: flex; }
}
@media (min-width: 1025px) { .hscroll__arrow { width: 44px; height: 44px; } }

/* Category tiles inside the carousel — a circular photo with the category
   name shown plainly underneath it (not overlaid on the image). */
.category-tile {
	flex: 0 0 108px; scroll-snap-align: start;
	display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
}
.category-tile__image {
	display: block; width: 100%; aspect-ratio: 1/1; border-radius: 50%; overflow: hidden;
	background: var(--color-surface); border: 1px solid var(--color-border);
	transition: box-shadow .15s ease, transform .15s ease;
}
.category-tile:hover .category-tile__image { box-shadow: 0 10px 24px rgba(11,61,54,.18); transform: translateY(-2px); }
.category-tile__image img { width: 100%; height: 100%; object-fit: cover; }
.category-tile__label {
	font-weight: 600; color: var(--color-text); font-size: .78rem; line-height: 1.3;
}

/* "Coming Soon" tile — shown automatically for any category with no
   published products yet (see nahmed_category_has_products()). */
.category-tile--soon { cursor: default; }
.category-tile--soon .category-tile__image { position: relative; }
.category-tile--soon .category-tile__image img { filter: grayscale(1); opacity: .4; }
.category-tile--soon:hover .category-tile__image { box-shadow: none; transform: none; }
.category-tile__soon {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	background: var(--color-primary); color: #fff; font-size: .6rem; font-weight: 700; letter-spacing: .05em;
	text-transform: uppercase; padding: 5px 9px; border-radius: 999px; white-space: nowrap;
}
@media (min-width: 768px) { .category-tile__soon { font-size: .68rem; padding: 6px 12px; } }

/* Slow auto-scrolling category row (JS: initAutoScroll). Snap + smooth
   scrolling are switched off here because they fight the gentle drift. */
.hscroll[data-autoscroll] .hscroll__track { scroll-snap-type: none; scroll-behavior: auto; }
.hscroll__track.no-loop .is-clone { display: none; }

/* Product cards inside a carousel: sized so exactly 3 whole cards fill
   the row on a typical phone screen (per the shop owner's request),
   stepping up to fixed pixel widths on larger screens. The width is
   calculated (track content width minus the 2 gaps between 3 cards,
   divided by 3) instead of a flat 30%, so the 3rd card always ends
   exactly at the row's edge — no more 4th card peeking in half-cut. */
.hscroll__track .product-card { flex: 0 0 calc((100% - 24px) / 3); scroll-snap-align: start; }
.hscroll__track .product-card .product-card__title { font-size: .8rem; }
.hscroll__track .product-card .product-card__price { font-size: .85rem; }
.hscroll__track .product-card .product-card__actions .add_to_cart_button,
.hscroll__track .product-card .product-card__actions .product-card__add-to-cart-btn { font-size: .7rem; padding: 8px 6px; }

@media (min-width: 768px) {
	.category-tile { flex-basis: 160px; }
	.category-tile__label { font-size: .92rem; }
	.hscroll__track .product-card { flex-basis: 230px; }
	.hscroll__track .product-card .product-card__title { font-size: .9rem; }
	.hscroll__track .product-card .product-card__price { font-size: .98rem; }
	.hscroll__track .product-card .product-card__actions .add_to_cart_button,
	.hscroll__track .product-card .product-card__actions .product-card__add-to-cart-btn { font-size: .8rem; padding: 9px 10px; }
}
@media (min-width: 1025px) {
	.category-tile { flex-basis: 180px; }
	.hscroll__track .product-card { flex-basis: 260px; }
}


/* -------------------------------------------------------------------------
   10. TRUST BAR
   ---------------------------------------------------------------------- */
.trust-bar { overflow: hidden; }
.trust-bar__track {
	display: inline-flex; gap: 16px; animation: nahmed-trust-scroll 26s linear infinite;
	will-change: transform; transform: translateZ(0); backface-visibility: hidden;
}
.trust-bar:hover .trust-bar__track { animation-play-state: paused; }
@keyframes nahmed-trust-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .trust-bar__track { animation: none; overflow-x: auto; } }
.trust-bar__item {
	flex: 0 0 auto; width: 220px; background: #fff; border: 1px solid var(--color-border); border-radius: 14px; padding: 20px 16px; text-align: center;
}
.trust-bar__icon { color: var(--color-secondary); display: inline-flex; margin-bottom: 10px; }
.trust-bar__item h3 { font-size: .95rem; margin-bottom: .3em; }
.trust-bar__item p { font-size: .8rem; color: var(--color-muted); margin: 0; }

/* -------------------------------------------------------------------------
   11. PRODUCT GRID + CARD
   ---------------------------------------------------------------------- */
.products-grid, ul.products {
	display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 14px;
	margin: 0 !important; padding: 0 !important; list-style: none !important;
}
/* The <li> that WooCommerce wraps around each loop item is a plain grid
   cell only — it must NOT duplicate the card's border/padding/flex rules,
   or you get a "card inside a card" double box that breaks the layout
   (this was the cause of the narrow/overlapping product cards). */
li.products-grid__item {
	list-style: none; margin: 0; padding: 0; border: 0; background: none; min-width: 0;
}
.product-card {
	background: #fff; border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden;
	display: flex; flex-direction: column; position: relative; transition: box-shadow .15s ease; height: 100%;
}
.product-card:hover { box-shadow: 0 10px 26px rgba(11,61,54,.09); }
.product-card__media { position: relative; background: var(--color-surface); aspect-ratio: 1/1; display: block; }
.product-card__image-link { display: block; width: 100%; height: 100%; }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-badges { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; gap: 4px; z-index: 2; }
.badge { font-size: .68rem; font-weight: 700; padding: 3px 8px; border-radius: 5px; color: #fff; text-transform: uppercase; letter-spacing: .02em; }
.badge--sale { background: var(--color-sale); }
.badge--new { background: var(--color-secondary); }
.badge--featured { background: var(--color-primary); }
.badge--bestseller { background: #B8860B; }
.badge--limited { background: #8A4B08; }
.badge--outofstock { background: #6B7770; }

.product-card__remove {
	position: absolute; top: 8px; right: 8px; z-index: 2; width: 30px; height: 30px; border-radius: 50%;
	background: #fff; border: 1px solid var(--color-border); color: var(--color-sale); display: flex; align-items: center; justify-content: center;
	font-size: 1.1rem; box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

.product-card__body { padding: 12px 14px 14px; flex: 1; display: flex; flex-direction: column; }
.product-card__brand { font-size: .7rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.product-card__title { font-size: .9rem; margin: 0 0 6px; font-weight: 500; line-height: 1.35; }
.product-card__title a { color: var(--color-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.product-card__title a:hover { color: var(--color-secondary); }
.product-card__price { color: var(--color-secondary); font-weight: 700; font-size: .98rem; }
.product-card__price del { color: var(--color-muted); font-weight: 400; font-size: .82em; margin-right: 6px; }
.product-card__price ins { text-decoration: none; }
.product-card__stock { font-size: .72rem; margin-top: 4px; font-weight: 600; }
.product-card__stock--out { color: var(--color-muted); }
.product-card__stock--low { color: var(--color-sale); }

/* Actions row: wishlist + compare icons, add-to-cart fills remaining space.
   Always visible, in normal flow — never overlaps the title again. */
.product-card__actions { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; }
.quick-action {
	width: 34px; height: 34px; border-radius: 50%; background: var(--color-surface); border: 1px solid var(--color-border); flex-shrink: 0;
	display: flex; align-items: center; justify-content: center; color: var(--color-primary);
}
.quick-action[aria-pressed="true"] { background: var(--color-secondary); color: #fff; border-color: var(--color-secondary); }
.quick-action:hover { color: var(--color-secondary); }
.product-card .add_to_cart_button, .product-card .product-card__add-to-cart-btn, .product-card__view-btn {
	flex: 1; text-align: center; padding: 9px 10px; font-weight: 600; font-size: .8rem; border-radius: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.product-card .added_to_cart { display: block; text-align: center; font-size: .75rem; margin-top: 6px; }

/* -------------------------------------------------------------------------
   12. CATEGORY SPOTLIGHT (Kitchen/Home/Cooling/Solar big cards)
   ---------------------------------------------------------------------- */
.category-spotlight__grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.spotlight-card { position: relative; display: block; border-radius: 16px; overflow: hidden; background: var(--color-primary); color: #fff; aspect-ratio: 16/9; transform: translateZ(0); }
.spotlight-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.spotlight-card:hover img { transform: scale(1.04); }
/* Dark gradient at the bottom keeps the text readable without washing out the photo. */
.spotlight-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,0) 70%); pointer-events: none; }
.spotlight-card__content { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; }
.spotlight-card__content h3 { color: #fff; margin-bottom: .2em; }
.spotlight-card__content p { color: rgba(255,255,255,.85); font-size: .85rem; margin-bottom: .6em; }
.spotlight-card__cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: #fff; font-size: .85rem; }

/* -------------------------------------------------------------------------
   13. REVIEWS / NEWSLETTER
   ---------------------------------------------------------------------- */
.newsletter-section { background: var(--color-primary); color: #fff; text-align: center; padding: 28px 0; }
.newsletter-section h2 { color: #fff; margin-bottom: .3em; }
.newsletter-section p { color: rgba(255,255,255,.8); margin-bottom: 0; }
.newsletter-section__inner { display: flex; flex-direction: column; align-items: center; gap: 12px; }

/* -------------------------------------------------------------------------
   14. FOOTER
   ---------------------------------------------------------------------- */
.site-footer { background: #fff; border-top: 1px solid var(--color-border); padding-top: 26px; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 22px; padding-bottom: 20px; align-items: start; }
/* Fixed size like the header logo — it used to render at the file's full
   384px width, so the footer looked oversized/gappy depending on screen size. */
.footer-logo { height: 56px; width: auto; max-width: 100%; margin-bottom: 8px; object-fit: contain; }
.footer-col p { color: var(--color-muted); font-size: .88rem; margin-bottom: .6em; }
.footer-col__title, .footer-widget__title { font-size: 1rem; margin-bottom: .5em; }
.footer-menu li, .footer-contact li { margin-bottom: 10px; font-size: .88rem; }
.footer-contact--icons li { display: flex; align-items: flex-start; gap: 10px; }
.footer-contact__icon { flex-shrink: 0; color: var(--color-secondary); margin-top: 2px; }
.footer-menu a, .footer-contact a { color: var(--color-muted); }
.footer-menu a:hover, .footer-contact a:hover { color: var(--color-secondary); }
.footer-contact--icons a { font-weight: 700; color: var(--color-primary); }
.footer-contact--icons a:hover { color: var(--color-secondary); }
.footer-social { display: flex; gap: 8px; margin-top: 12px; }
.footer-social a {
	width: 34px; height: 34px; border-radius: 50%; background: var(--color-surface); color: var(--color-primary);
	display: flex; align-items: center; justify-content: center; transition: background .15s ease, color .15s ease;
}
.footer-social a:hover { background: var(--color-secondary); color: #fff; }
.footer-bottom { border-top: 1px solid var(--color-border); padding: 12px 0 90px; margin-top: 4px; }
.footer-bottom__row { display: flex; flex-direction: column; gap: 8px; font-size: .78rem; color: var(--color-muted); }
.footer-legal-menu { display: flex; gap: 12px; flex-wrap: wrap; }
.footer-legal-menu a { color: var(--color-muted); }
.footer-empty-note { font-size: .8rem; color: var(--color-muted); font-style: italic; }

/* Footer accordion: "Our Policies" column — Who We Are / Categories / Policies */
.footer-accordion__item { border-bottom: 1px solid var(--color-border); }
.footer-accordion__item:first-child { border-top: 1px solid var(--color-border); }
.footer-accordion__trigger {
	width: 100%; display: flex; justify-content: space-between; align-items: center; background: none; border: 0;
	padding: 11px 2px; font-weight: 600; font-size: .92rem; color: var(--color-primary); text-align: left;
}
.footer-accordion__icon { font-size: 1.1rem; color: var(--color-secondary); transition: transform .15s ease; line-height: 1; }
.footer-accordion__trigger[aria-expanded="true"] .footer-accordion__icon { transform: rotate(45deg); }
.footer-accordion__panel { padding: 0 2px 12px; }
.footer-accordion__panel .footer-menu li { margin-bottom: 6px; }
/* Category tree hierarchy — mirrors the header's Shop dropdown: bold
   parent categories, indented/lighter children beneath each. Each parent
   with children gets its own tap-to-expand toggle (same behaviour as the
   mobile hamburger menu's Shop dropdown) so the whole tree doesn't dump
   open at once. */
.footer-menu--tree > li > a { font-weight: 700; color: var(--color-primary); }
.footer-menu--tree li.menu-item-has-children { position: relative; }
.footer-menu--tree li.menu-item-has-children > a { display: inline-block; padding-right: 28px; }
.footer-menu--tree .mobile-menu__toggle { width: 26px; height: 26px; top: -3px; }
.footer-menu--tree .sub-menu { display: none; list-style: none; margin: 6px 0 12px; padding-left: 16px; border-left: 2px solid var(--color-border); }
.footer-menu--tree li.is-open > .sub-menu { display: block; }
.footer-menu--tree .sub-menu li { margin-bottom: 6px; }
.footer-menu--tree .sub-menu a { font-weight: 400; color: var(--color-muted); font-size: .82rem; padding-right: 0; }
.footer-menu--tree .sub-menu a:hover { color: var(--color-secondary); }

@media (min-width: 768px) { .footer-bottom { padding-bottom: 24px; } }

/* -------------------------------------------------------------------------
   15. MOBILE TAB BAR
   ---------------------------------------------------------------------- */
.mobile-tabbar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 400; background: #fff; border-top: 1px solid var(--color-border);
	display: flex; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 14px rgba(0,0,0,.05);
}
.mobile-tabbar__item {
	flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px;
	color: var(--color-muted); font-size: .64rem; background: none; border: 0; text-align: center;
}
.mobile-tabbar__item.is-active { color: var(--color-secondary); }
.mobile-tabbar__icon-wrap { position: relative; }

/* -------------------------------------------------------------------------
   16. SOCIAL FAB (WhatsApp / Instagram / Facebook / Google Reviews)
   ---------------------------------------------------------------------- */
.nahmed-social-fab {
	position: fixed; right: 16px; bottom: 78px; z-index: 600; touch-action: none;
}
.nahmed-social-fab.is-dragging { cursor: grabbing; }
.nahmed-social-fab.is-dragging .nahmed-social-fab__toggle { box-shadow: 0 10px 26px rgba(0,0,0,.3); transition: none; }

.nahmed-social-fab__toggle {
	width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: grab;
	background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center;
	box-shadow: 0 6px 18px rgba(0,0,0,.2); position: relative; z-index: 2; padding: 0;
	transition: background-color .2s ease;
}
.nahmed-social-fab__toggle svg { width: 26px; height: 26px; position: absolute; transition: opacity .2s ease, transform .2s ease; }
.nahmed-social-fab__icon-close { opacity: 0; transform: rotate(-45deg) scale(.6); }
.nahmed-social-fab__icon-open  { opacity: 1; transform: rotate(0) scale(1); }
.nahmed-social-fab.is-open .nahmed-social-fab__toggle { background: #111827; }
.nahmed-social-fab.is-open .nahmed-social-fab__icon-close { opacity: 1; transform: rotate(0) scale(1); }
.nahmed-social-fab.is-open .nahmed-social-fab__icon-open  { opacity: 0; transform: rotate(45deg) scale(.6); }

.nahmed-social-fab__items {
	position: absolute; right: 3px; bottom: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px;
	margin-bottom: 12px; pointer-events: none;
}
.nahmed-social-fab__item {
	width: 46px; height: 46px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center;
	box-shadow: 0 4px 12px rgba(0,0,0,.18); opacity: 0; transform: translateY(10px) scale(.7);
	transition: opacity .18s ease, transform .18s ease; pointer-events: none;
}
.nahmed-social-fab__item svg { width: 26px; height: 26px; }
.nahmed-social-fab.is-open .nahmed-social-fab__items { pointer-events: auto; }
.nahmed-social-fab.is-open .nahmed-social-fab__item { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
/* Stagger the pop-in so items cascade rather than appearing all at once. */
.nahmed-social-fab.is-open .nahmed-social-fab__item--google    { transition-delay: 0ms; }
.nahmed-social-fab.is-open .nahmed-social-fab__item--facebook  { transition-delay: 40ms; }
.nahmed-social-fab.is-open .nahmed-social-fab__item--instagram { transition-delay: 80ms; }
.nahmed-social-fab.is-open .nahmed-social-fab__item--whatsapp  { transition-delay: 120ms; }

/* Hide our floating buttons while the mobile menu is open so they never
   sit on top of the drawer and block taps on menu items. */
body.nahmed-nav-open .nahmed-social-fab { display: none; }
@media (min-width: 1025px) { .nahmed-social-fab { bottom: 24px; } }

/* -------------------------------------------------------------------------
   17. COMPARE BAR
   ---------------------------------------------------------------------- */
.compare-bar {
	position: fixed; left: 0; right: 0; bottom: 58px; z-index: 500; background: var(--color-primary); color: #fff; padding: 10px 0;
}
.compare-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .82rem; flex-wrap: wrap; }
.compare-bar__actions { display: flex; gap: 8px; }
.compare-bar .btn--small { padding: 7px 14px; }
.compare-bar .btn--ghost { color: #fff; }
@media (min-width: 1025px) { .compare-bar { bottom: 0; } }

/* -------------------------------------------------------------------------
   18. PRODUCT INFO TABS (Key Features / Specifications / Overview)
   ---------------------------------------------------------------------- */
.product-tabs { padding: 36px 0 48px; }
.product-tabs__nav {
	display: flex; gap: 4px; overflow-x: auto; border-bottom: 2px solid var(--color-border); margin-bottom: 24px;
	scrollbar-width: none; -ms-overflow-style: none;
}
.product-tabs__nav::-webkit-scrollbar { display: none; }
.product-tabs__tab {
	display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; background: none; border: 0;
	padding: 12px 18px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .9rem; color: var(--color-muted);
	border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.product-tabs__tab[aria-selected="true"] { color: var(--color-secondary); border-bottom-color: var(--color-secondary); }
.product-tabs__tab:hover { color: var(--color-primary); }
.product-tabs__panel { animation: nahmed-fade-in .15s ease; }
@keyframes nahmed-fade-in { from { opacity: 0; } to { opacity: 1; } }
.product-tabs__prose { font-size: .92rem; color: var(--color-text); }
.product-tabs__prose ul { list-style: disc; padding-left: 1.3em; margin-bottom: 1em; }
.product-tabs__prose ul li { margin-bottom: .4em; }

.feature-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.feature-grid__item {
	display: flex; align-items: flex-start; gap: 10px; background: var(--color-surface); border-radius: 10px; padding: 14px 16px; font-size: .88rem; color: var(--color-text);
}
.feature-grid__check {
	flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--color-secondary); color: #fff;
	display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
@media (min-width: 576px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }

.specs-table th, .specs-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--color-border); font-size: .88rem; }
.specs-table tr:nth-child(even) { background: var(--color-surface); }
.specs-table th { width: 42%; color: var(--color-muted); font-weight: 600; }
.specs-table tr:last-child th, .specs-table tr:last-child td { border-bottom: 0; }

/* -------------------------------------------------------------------------
   18b. LEGACY ACCORDION (kept for any future use; not used on the product
   page anymore — that now uses .product-tabs above)
   ---------------------------------------------------------------------- */
.accordion-item { border-bottom: 1px solid var(--color-border); }
.accordion-item__header { margin: 0; }
.accordion-item__trigger {
	width: 100%; display: flex; justify-content: space-between; align-items: center; background: none; border: 0;
	padding: 18px 4px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .98rem; color: var(--color-primary); text-align: left;
}
.accordion-item__icon { font-size: 1.3rem; color: var(--color-secondary); transition: transform .15s ease; line-height: 1; }
.accordion-item__trigger[aria-expanded="true"] .accordion-item__icon { transform: rotate(45deg); }
.accordion-item__panel { overflow: hidden; }
.accordion-item__panel-inner { padding: 0 4px 20px; color: var(--color-text); font-size: .92rem; }

/* -------------------------------------------------------------------------
   19. PRODUCT SINGLE PAGE EXTRAS
   ---------------------------------------------------------------------- */
.product-brand { color: var(--color-secondary); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.product-actions-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.product-actions-row__btn {
	display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--color-border);
	background: #fff; color: var(--color-primary); font-size: .82rem; font-weight: 600;
}
.product-actions-row__btn[aria-pressed="true"] { background: var(--color-surface); border-color: var(--color-secondary); color: var(--color-secondary); }
.product-actions-row__btn--whatsapp { background: #25D366; color: #fff; border-color: #25D366; }
.product-actions-row__btn--whatsapp:hover { color: #fff; opacity: .92; }

.product-trust-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 20px 0; }
.product-trust-strip li { display: flex; align-items: center; gap: 8px; background: var(--color-surface); border-radius: 10px; padding: 10px 12px; font-size: .78rem; color: var(--color-primary); font-weight: 600; }
.product-trust-strip svg { flex-shrink: 0; color: var(--color-secondary); width: 20px; height: 20px; }

/* Sticky mobile add-to-cart bar */
.sticky-atc {
	position: fixed; left: 0; right: 0; bottom: 58px; z-index: 480; background: #fff; border-top: 1px solid var(--color-border);
	padding: 10px 14px; display: flex; align-items: center; gap: 12px; transform: translateY(120%); transition: transform .2s ease;
	box-shadow: 0 -4px 14px rgba(0,0,0,.06);
}
.sticky-atc.is-visible { transform: translateY(0); }
.sticky-atc__info { flex: 1; min-width: 0; }
.sticky-atc__name { font-size: .8rem; font-weight: 600; color: var(--color-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-atc__price { color: var(--color-secondary); font-weight: 700; font-size: .85rem; }
@media (min-width: 1025px) { .sticky-atc { display: none; } }

/* Recently viewed */
.nahmed-recently-viewed { padding: 32px 0 48px; }

/* -------------------------------------------------------------------------
   20. WISHLIST / COMPARE PAGES
   ---------------------------------------------------------------------- */
.nahmed-storage-page { padding: 8px 0 60px; }
.nahmed-storage-page__header { margin-bottom: 20px; }
.nahmed-empty-state { color: var(--color-muted); text-align: center; padding: 40px 16px; }
.nahmed-loading { text-align: center; color: var(--color-muted); padding: 40px 0; }

/* Compare table */
.compare-table-wrap { overflow-x: auto; }
.compare-table { min-width: 640px; }
.compare-table th, .compare-table td { border: 1px solid var(--color-border); padding: 12px; vertical-align: top; font-size: .85rem; }
.compare-table__label-col { background: var(--color-surface); font-weight: 600; white-space: nowrap; }
.compare-table__product-col { text-align: center; min-width: 200px; position: relative; }
.compare-table__product-col img { width: 100px; height: 100px; object-fit: contain; margin: 0 auto 8px; }
.compare-table__title { font-weight: 600; color: var(--color-text); font-size: .85rem; }
.compare-table__price { color: var(--color-secondary); font-weight: 700; margin: 6px 0; }
.compare-table__remove { position: absolute; top: 6px; right: 6px; background: none; border: 0; font-size: 1.1rem; color: var(--color-muted); }

/* -------------------------------------------------------------------------
   21. SHOP LAYOUT / FILTERS
   ---------------------------------------------------------------------- */
.shop-page { padding-top: 20px; padding-bottom: 60px; }
.nahmed-breadcrumb { font-size: .78rem; color: var(--color-muted); margin-bottom: 14px; }
.nahmed-breadcrumb a { color: var(--color-muted); }
.shop-header { margin-bottom: 18px; }
.shop-header__title { font-size: 1.6rem; }
.shop-header__description { color: var(--color-muted); font-size: .9rem; max-width: 70ch; }
.subcategory-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.subcategory-pill { border: 1px solid var(--color-border); border-radius: 999px; padding: 7px 14px; font-size: .8rem; color: var(--color-primary); font-weight: 500; }
.subcategory-pill:hover { border-color: var(--color-secondary); color: var(--color-secondary); }
.subcategory-pill span { color: var(--color-muted); }

.shop-layout { display: block; }
.shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.woocommerce-result-count { margin: 0; font-size: .82rem; color: var(--color-muted); }
.woocommerce-ordering select { border: 1px solid var(--color-border); border-radius: 8px; padding: 8px 10px; background: #fff; }

.shop-sidebar {
	position: fixed; top: 0; right: 0; bottom: 0; width: 86%; max-width: 340px; background: #fff; z-index: 900;
	transform: translateX(100%); transition: transform .2s ease; overflow-y: auto; padding: 16px;
}
.shop-sidebar.is-open { transform: translateX(0); }
.shop-sidebar__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.shop-sidebar__header button { background: none; border: 0; font-size: 1.6rem; color: var(--color-primary); }
.shop-sidebar__backdrop { position: fixed; inset: 0; background: rgba(11,61,54,.5); z-index: 890; display: none; }
.shop-sidebar__backdrop.is-open { display: block; }

.filter-block { border-bottom: 1px solid var(--color-border); padding: 14px 0; }
.filter-block__title { font-size: .95rem; margin-bottom: 10px; text-transform: uppercase; letter-spacing: .03em; }
.filter-block ul { display: flex; flex-direction: column; gap: 8px; }
.filter-block a { color: var(--color-text); font-size: .88rem; }
.filter-block a:hover { color: var(--color-secondary); }
.price_slider_wrapper .ui-slider { background: var(--color-border); }
.price_slider_wrapper .ui-slider .ui-slider-range { background: var(--color-secondary); }
.price_slider_wrapper .ui-slider .ui-slider-handle { background: var(--color-primary); border: 0; }
.price_slider_amount .button { float: right; }

@media (min-width: 1025px) {
	.shop-layout { display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: start; }
	.shop-layout--no-sidebar { display: block; }
	.shop-sidebar { position: static; width: auto; max-width: none; transform: none; padding: 0; }
	.shop-sidebar__header { display: none; }
	.shop-sidebar__backdrop { display: none !important; }
}

/* -------------------------------------------------------------------------
   22. BLOG / GENERIC PAGES
   ---------------------------------------------------------------------- */
.page-header {
	background: var(--color-surface); padding: 32px 0 24px; margin-bottom: 28px;
	position: relative; z-index: 2; isolation: isolate;
}
.page-header__title { font-size: 1.8rem; margin-bottom: .2em; }
.nahmed-breadcrumb--onheader { font-size: .82rem; }
/* Guard against a page-builder block in the content area (Contact Us, etc.)
   using a negative top margin that would otherwise ride up into the title
   band above it. */
.content-narrow { position: relative; z-index: 1; }
.content-narrow > *:first-child { margin-top: 0 !important; }
.blog-post { padding: 20px 0; border-bottom: 1px solid var(--color-border); }
.blog-post__thumb img { border-radius: 10px; margin-bottom: 12px; }
.blog-post__title { font-size: 1.2rem; }
.pagination { display: flex; justify-content: center; gap: 8px; padding: 24px 0; }

/* -------------------------------------------------------------------------
   23. RESPONSIVE — TABLET / DESKTOP
   ---------------------------------------------------------------------- */
@media (min-width: 576px) {
}

@media (min-width: 768px) {
	.products-grid, ul.products { grid-template-columns: repeat(3, 1fr); gap: 20px; }
	.category-spotlight__grid { grid-template-columns: repeat(2, 1fr); }
	.mobile-tabbar { display: none; }
	.compare-bar { bottom: 0; }
	.footer-grid { grid-template-columns: repeat(2, 1fr); }
	.nahmed-social-fab { bottom: 24px; }
	.product-trust-strip { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1025px) {
	.hamburger { display: none; }
	.site-header__nav { display: block; }
	.products-grid, ul.products { grid-template-columns: repeat(4, 1fr); }
	.footer-grid { grid-template-columns: 2fr 1.4fr 1.2fr; }
	.mobile-tabbar { display: none; }
	.container { padding: 0 24px; }
}


/* -------------------------------------------------------------------------
   24. CONTACT PAGE TEMPLATE
   ---------------------------------------------------------------------- */
.contact-page { padding: 0 0 0; }
.contact-page > .container { padding-top: 40px; padding-bottom: 48px; }
.contact-page__intro { text-align: center; max-width: 640px; margin: 0 auto 30px; }
.contact-page__intro h2 { font-size: 1.7rem; margin-bottom: .3em; }
.contact-page__intro p { color: var(--color-muted); margin: 0; }

/* Quick-contact cards: 2 across on phones, 4 across on desktop. */
.contact-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 36px; }
.contact-card {
	display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
	background: #fff; border: 1px solid var(--color-border); border-radius: 16px; padding: 22px 12px;
	color: var(--color-text); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.contact-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(11,61,54,.12); border-color: var(--color-secondary); }
.contact-card__icon {
	width: 54px; height: 54px; border-radius: 50%; margin-bottom: 8px; display: flex; align-items: center; justify-content: center;
	background: var(--color-surface); color: var(--color-primary);
}
.contact-card--whatsapp .contact-card__icon { background: #E6F9EE; color: #1EA952; }
.contact-card__icon svg { width: 26px; height: 26px; }
.contact-card__title { font-weight: 700; font-size: 1rem; color: var(--color-primary); }
.contact-card__text { font-size: .82rem; color: var(--color-muted); overflow-wrap: anywhere; line-height: 1.4; }

.contact-page__grid { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
.contact-page__form-card {
	background: #fff; border: 1px solid var(--color-border); border-radius: 18px; padding: 26px 20px;
	box-shadow: 0 8px 28px rgba(0,0,0,.04);
}
.contact-page__form-card h2 { font-size: 1.4rem; margin-bottom: .2em; }
.contact-page__form-card > p { color: var(--color-muted); margin-bottom: 20px; }

.contact-page__side { display: grid; gap: 16px; }
.contact-side-card { background: var(--color-surface); border-radius: 16px; padding: 22px 20px; }
.contact-side-card h3 { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; margin: 0 0 12px; color: var(--color-primary); }
.contact-side-card__icon {
	width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--color-secondary);
	display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.contact-side-card__icon svg { width: 20px; height: 20px; }
.contact-side-card p { margin: 0 0 12px; color: var(--color-text); }
.contact-hours { list-style: none; margin: 0; padding: 0; }
.contact-hours li { padding: 8px 0; border-bottom: 1px dashed var(--color-border); font-size: .9rem; }
.contact-hours li:last-child { border-bottom: 0; }
.contact-page__social-icons { display: flex; flex-wrap: wrap; gap: 10px; }
.contact-page__social-icon {
	display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px;
	background: #fff; color: var(--color-primary); font-weight: 600; font-size: .85rem;
	border: 1px solid var(--color-border); transition: background .15s ease, color .15s ease, transform .15s ease;
}
.contact-page__social-icon:hover { background: var(--color-primary); color: #fff; transform: translateY(-2px); }

.contact-map { width: 100%; height: 320px; background: var(--color-surface); line-height: 0; }
.contact-map iframe { width: 100%; height: 100%; border: 0; }

.contact-form__row { margin-bottom: 14px; }
.contact-form label { display: block; font-weight: 600; font-size: .85rem; margin-bottom: 6px; color: var(--color-primary); }
.contact-form__honeypot label { margin: 0; }
.contact-form__two { display: grid; grid-template-columns: 1fr; gap: 0 14px; }
.contact-form input, .contact-form textarea {
	width: 100%; padding: 13px 16px; border: 1px solid var(--color-border); border-radius: 10px; background: #fff; font-family: inherit;
}
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--color-secondary); outline: none; }
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form__honeypot {
	position: absolute !important; left: -9999px !important; top: -9999px !important;
	width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important;
}
.contact-form__status { margin: 12px 0 0; font-size: .88rem; min-height: 1.2em; }
.contact-form__status.is-success { color: #1E8A5F; }
.contact-form__status.is-error { color: var(--color-sale); }

@media (min-width: 640px) {
	.contact-form__two { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 768px) {
	.contact-cards { grid-template-columns: repeat(4, 1fr); gap: 18px; }
	.contact-page__form-card { padding: 36px 34px; }
	.contact-map { height: 380px; }
}
@media (min-width: 1025px) {
	.contact-page__grid { grid-template-columns: 1.4fr 1fr; gap: 28px; }
}

/* -------------------------------------------------------------------------
   25. "OUR BRANDS" LOGO STRIP (auto-scrolling)
   ---------------------------------------------------------------------- */
.brands-strip { padding: 36px 0; overflow: hidden; background: #fff; }
.brands-strip .section-title { margin-bottom: 24px; }
.brands-strip__track {
	display: inline-flex; align-items: center; gap: 48px; animation: nahmed-brands-scroll 22s linear infinite;
	will-change: transform; transform: translateZ(0); backface-visibility: hidden;
}
.brands-strip:hover .brands-strip__track { animation-play-state: paused; }
@keyframes nahmed-brands-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .brands-strip__track { animation: none; overflow-x: auto; } }
.brands-strip__item { flex: 0 0 140px; display: flex; align-items: center; justify-content: center; height: 56px; }
.brands-strip__item img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }

/* -------------------------------------------------------------------------
   26. PRODUCT DETAILS (continuous block, replacing the old tab bar —
   matches the reference layout: intro → ✨ Product Features → 📋 Specs,
   with small collapsible extras below for Installation/Warranty/Shipping)
   ---------------------------------------------------------------------- */
.product-details { padding: 36px 0 48px; }
.product-details__heading { font-size: 1.3rem; margin-bottom: 16px; }
.product-details__body { font-size: .95rem; color: var(--color-text); }
.product-details__intro p { margin-bottom: 1em; }
.product-details__intro strong { color: var(--color-primary); }
.product-details__subheading { font-size: 1.05rem; margin: 24px 0 10px; }
.feature-list { list-style: none; margin: 0 0 8px; padding: 0; }
.feature-list li {
	position: relative; padding-left: 22px; margin-bottom: 10px; font-size: .92rem; line-height: 1.5;
}
.feature-list li::before {
	content: ''; position: absolute; left: 0; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-secondary);
}
.feature-list strong { color: var(--color-primary); }
.product-details__extras { margin-top: 28px; border-top: 1px solid var(--color-border); }

/* ---------------------------------------------------------------------
 * Shop/category filters — Brand + Availability (checkbox style, with a
 * tick mark and live counts), to match the WooCommerce Price filter
 * already styled above. See inc/shop-filters.php.
 * ------------------------------------------------------------------- */
.nahmed-filter-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.nahmed-filter-list__item a { display: flex; align-items: center; gap: 10px; padding: 6px 2px; color: var(--color-text); font-size: .9rem; border-radius: 6px; }
.nahmed-filter-list__item a:hover { color: var(--color-primary); background: rgba(11,61,54,.05); }
.nahmed-filter-list__box {
	flex: none; width: 16px; height: 16px; border: 1.5px solid var(--color-border); border-radius: 4px;
	display: flex; align-items: center; justify-content: center; font-size: .7rem; line-height: 1; color: #fff;
}
.nahmed-filter-list__item.is-checked .nahmed-filter-list__box { background: var(--color-primary); border-color: var(--color-primary); }
.nahmed-filter-list__item.is-checked a { color: var(--color-primary); font-weight: 600; }
.nahmed-filter-list__label { flex: 1; }
.nahmed-filter-list__count { color: var(--color-text-light); font-size: .8rem; }

/* ---------------------------------------------------------------------
 * Payment method badges — footer + checkout (inc/payment-badges.php).
 * Plain text/colour badges rather than brand logo image files.
 * ------------------------------------------------------------------- */
.nahmed-payment-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.nahmed-payment-badges--footer { max-width: 1280px; margin: 0 auto; padding: 0 20px 20px; }
.nahmed-payment-badges--checkout { margin-top: 14px; justify-content: center; }
.nahmed-payment-badge {
	display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 6px;
	font-size: .72rem; font-weight: 700; letter-spacing: .02em; color: #fff; background: #6b7280; white-space: nowrap;
}
.nahmed-payment-badge--logo { height: 28px; width: auto; padding: 0; background: none; object-fit: contain; }
.nahmed-payment-badge--cod { background: #0b3d36; }
.nahmed-payment-badge--visa { background: #1a1f71; }
.nahmed-payment-badge--mastercard { background: #eb001b; }
.nahmed-payment-badge--jazzcash { background: #c8102e; }
.nahmed-payment-badge--easypaisa { background: #00935f; }
.nahmed-payment-badge--raast { background: #0a5c36; }
.nahmed-payment-badge--gpay { background: #4285f4; }