/*
Theme Name: AMA Faradid
Theme URI: https://shop.amafaradid.com
Description: Custom RTL WooCommerce storefront for AMA Faradid — a Persian digital & electronics shop (Apple, Microsoft, Sony).
Author: AMA Faradid
Author URI: https://shop.amafaradid.com
Version: 1.21.3
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ama-faradid
Domain Path: /languages
Tags: e-commerce, rtl-language-support, translation-ready, custom-logo, custom-menu, featured-images
*/

/* ---------------------------------------------------------------------------
   Vazirmatn (variable font, self-hosted) — primary brand typeface
--------------------------------------------------------------------------- */
@font-face {
  font-family: "Vazirmatn";
  src: url("assets/fonts/Vazirmatn.woff2") format("woff2") tech("variations"),
       url("assets/fonts/Vazirmatn.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}



/* ---------------------------------------------------------------------------
   Design tokens
--------------------------------------------------------------------------- */
:root {
  /* Vibrant multi-color palette — indigo primary + bright accents */
  --blue: #4f46e5;        /* primary (indigo) */
  --blue-dark: #4338ca;   /* primary hover */
  --ink: #0f172a;
  --ink-2: #1f2937;
  --muted: #5b6472;
  --line: #eceef4;
  --bg: #f7f8fc;
  --card: #ffffff;
  --red: #f43f5e;
  --amber: #f59e0b;
  --green: #10b981;
  --star: #f5b301;
  /* accent palette (used for tiles, feature cards, badges) */
  --c-pink: #ec4899;
  --c-amber: #f59e0b;
  --c-green: #10b981;
  --c-cyan: #06b6d4;
  --c-violet: #8b5cf6;
  --c-indigo: #4f46e5;
  --radius-lg: 20px;
  --radius: 16px;
  --radius-md: 12px;
  --radius-sm: 12px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.04);
  --shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.05);
  --maxw: 1200px;
  --font: "Vazirmatn", "Tahoma", system-ui, -apple-system, sans-serif;
}

/* ---------------------------------------------------------------------------
   Base
--------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.7;
  font-size: 15px;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; } /* WooCommerce cart/checkout controls inherit Vazirmatn */
.container { max-width: var(--maxw); margin-inline: auto; padding-inline: 20px; }
.muted { color: var(--muted); }

/* Persian digits look better with tabular spacing for prices */
.price, .toman { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   Nic-style black navigation bar
--------------------------------------------------------------------------- */
.nicbar { background: rgba(0,0,0,.8); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); color: #fff; position: sticky; top: 0; z-index: 60; transition: box-shadow .2s ease, background .2s ease; }
.nicbar-inner { display: flex; align-items: center; gap: 20px; height: 44px; transition: height .2s ease; }
.nic-logo { font-weight: 800; font-size: 18px; font-style: italic; color: #fff; white-space: nowrap; letter-spacing: .3px; transition: font-size .2s ease; display: flex; align-items: center; }
.nicbar .nic-logo-img { height: 30px !important; width: auto !important; max-width: 190px; display: block; object-fit: contain; transition: height .2s ease; }
.nicbar.is-shrunk .nic-logo-img { height: 26px !important; }
/* Scroll-shrink state (toggled by main.js) — apple-nic keeps the bar slim, just firms up + shadow */
.nicbar.is-shrunk { box-shadow: 0 6px 20px rgba(0,0,0,.28); background: rgba(0,0,0,.88); }
.nicbar.is-shrunk .nicbar-inner { height: 40px; }
.nicbar.is-shrunk .nic-logo { font-size: 17px; }
.nic-menu { flex: 1; min-width: 0; }
.nic-menu ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; justify-content: center; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.nic-menu ul::-webkit-scrollbar { display: none; }
.nic-menu a { color: #e5e7eb; font-size: 12.5px; font-weight: 300; white-space: nowrap; padding: 6px 0; opacity: .85; transition: color .15s, opacity .15s; }
.nic-menu a:hover { opacity: 1; }
.nic-menu a:hover, .nic-menu .current-menu-item > a { color: #fff; }
.nic-icons { display: flex; align-items: center; gap: 8px; }
.nic-ico { background: transparent; border: 0; color: #fff; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
.nic-ico svg { width: 20px; height: 20px; }
.nic-ico:hover { background: rgba(255,255,255,.12); }
.nic-cart-count { position: absolute; top: 4px; inset-inline-start: 4px; background: var(--blue); color: #fff; font-size: 10px; min-width: 16px; height: 16px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 4px; font-weight: 700; }
.nic-search { border-top: 1px solid #1f2937; padding: 14px 0; }
.nic-search form { display: flex; align-items: center; gap: 10px; background: #111827; border: 1px solid #374151; border-radius: 999px; padding: 10px 18px; color: #9ca3af; }
.nic-search input { flex: 1; background: transparent; border: 0; outline: none; color: #fff; font-family: inherit; font-size: 14px; }

/* Intro strip: brand tagline + support */
.intro-strip { background: var(--bg); border-bottom: 1px solid var(--line); }
.intro-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 44px 20px 30px; flex-wrap: wrap; }
.intro-text { max-width: 708px; }
.intro-title { font-size: 25px; font-weight: 800; margin: 0; line-height: 1.6; }
/* apple-nic signature: gradient-filled brand name (blue → orange) + muted subtitle */
.intro-brand { background-image: linear-gradient(to right, #4f46e5 0, #8b5cf6 30%, #ec4899 62%, #f59e0b 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-weight: 800; }
.intro-sub { color: var(--muted); font-weight: 600; }
.ac-orange { color: #d9600a; } /* AA-legible orange for text; #f97316 kept for fills/emoji */
.ac-blue { color: var(--blue); }
.intro-support { display: flex; align-items: center; gap: 10px; justify-content: flex-end; flex-shrink: 0; }
.intro-avatar { width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.intro-support-q { display: block; font-size: 12px; line-height: 18px; color: var(--muted); font-weight: 700; }
.intro-support-link { display: inline-block; padding-top: 4px; color: var(--blue); font-weight: 600; font-size: 12px; }

/* Category icons row */
.cat-icons-wrap { background: #fff; border-bottom: 1px solid var(--line); }
.cat-icons { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; padding: 22px 20px; overflow-x: auto; scrollbar-width: none; }
.cat-icons::-webkit-scrollbar { display: none; }
.cat-icon { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 78px; text-align: center; flex: 0 0 auto; }
.cat-icon-img { width: 74px; height: 74px; display: flex; align-items: center; justify-content: center; border-radius: 50%; padding: 9px; transition: transform .15s ease, box-shadow .15s ease; }
.cat-icon:hover .cat-icon-img { transform: translateY(-3px); box-shadow: var(--shadow); }
/* Vibrant rotating tile colors */
.cat-icon:nth-child(6n+1) .cat-icon-img { background: #eef2ff; }
.cat-icon:nth-child(6n+2) .cat-icon-img { background: #fce7f3; }
.cat-icon:nth-child(6n+3) .cat-icon-img { background: #fef3c7; }
.cat-icon:nth-child(6n+4) .cat-icon-img { background: #d1fae5; }
.cat-icon:nth-child(6n+5) .cat-icon-img { background: #cffafe; }
.cat-icon:nth-child(6n+6) .cat-icon-img { background: #ede9fe; }
.cat-icon-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cat-icon .cat-emoji { font-size: 42px; }
.cat-icon span { font-size: 13px; font-weight: 600; color: var(--ink); }
.cat-icon:hover span { color: var(--blue); }

/* Buttons (used in hero / cart) */
.btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 9px 18px; font-weight: 700; font-size: 14px; border: 1px solid transparent; }
.btn-ghost { color: var(--ink); border-color: var(--line); background: #fff; }
.btn-ghost:hover { background: var(--bg); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; }
.btn-blue { background: var(--blue); color: #fff; }
.btn-blue:hover { background: var(--blue-dark); }

/* ---------------------------------------------------------------------------
   Sections
--------------------------------------------------------------------------- */
section { margin-block: 34px; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.section-head h2 { font-size: 20px; margin: 0; font-weight: 800; }
.section-head h2 .sh-strong { color: var(--ink); }
.section-head .link { color: var(--blue); font-size: 13.5px; font-weight: 600; }

/* Feature cards (آخرین‌ها) */
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.feature-card { border-radius: var(--radius-lg); padding: 26px; min-height: 430px; display: flex; flex-direction: column; position: relative; overflow: hidden; border: 1px solid var(--line); transition: transform .16s ease, box-shadow .16s ease; }
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.feature-card .fc-label { font-size: 13px; font-weight: 800; opacity: .7; }
.feature-card h3 { font-size: 24px; font-weight: 800; margin: 8px 0 8px; line-height: 1.4; }
.feature-card p { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.9; max-width: 90%; }
.feature-card .fc-img { margin-top: auto; height: 220px; display: flex; align-items: center; justify-content: center; padding-top: 16px; }
.feature-card .fc-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.feature-card .fc-img .cat-emoji { font-size: 100px; }
.feat-blue { background: linear-gradient(160deg, #e0e7ff, #eef2ff); }
.feat-white { background: #fff; }
.feat-dark { background: linear-gradient(160deg, #4f46e5, #7c3aed); color: #fff; }
.feat-dark .fc-label { opacity: .85; color: #c7d2fe; }
.feat-dark p { color: #ddd6fe; }
.feat-pink { background: linear-gradient(160deg, #fce7f3, #fdf2f8); }
.feat-amber { background: linear-gradient(160deg, #fef3c7, #fffbeb); }
.feat-green { background: linear-gradient(160deg, #d1fae5, #ecfdf5); }

/* Horizontal per-category product rows */
.cat-row { margin-block: 30px; }
.product-row { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.product-row::-webkit-scrollbar { height: 8px; }
.product-row::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.pr-item { flex: 0 0 236px; scroll-snap-align: start; }
.pr-item .product-card { height: 100%; }

/* Wide promo banners */
.promo-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-block: 30px; }
.promo-banner { position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: 28px; min-height: 176px; display: flex; flex-direction: column; justify-content: center; color: #fff; transition: .18s; }
.promo-banner:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.promo-banner .pb-body { position: relative; z-index: 2; max-width: 78%; }
.promo-banner h3 { font-size: 21px; font-weight: 800; margin: 0 0 8px; line-height: 1.5; }
.promo-banner p { font-size: 13px; opacity: .92; margin: 0 0 14px; line-height: 1.8; }
.promo-banner .pb-go { font-size: 13.5px; font-weight: 800; }
.promo-banner .pb-emoji { position: absolute; inset-inline-start: 18px; bottom: 6px; font-size: 84px; opacity: .9; z-index: 1; filter: drop-shadow(0 6px 16px rgba(0,0,0,.25)); }
.pb-1 { background: linear-gradient(135deg, #0f172a, #334155); }
.pb-2 { background: linear-gradient(135deg, #2f6bff, #1e3a8a); }
.pb-3 { background: linear-gradient(135deg, #f59e0b, #ea580c); }
.pb-4 { background: linear-gradient(135deg, #7c3aed, #4c1d95); }
.pb-5 { background: linear-gradient(135deg, #059669, #065f46); }
.pb-6 { background: linear-gradient(135deg, #e11d48, #9f1239); }

/* Home brand logo strip */
.home-brands-wrap { margin-block: 30px; }
.home-brands-wrap .hb-label { display: block; text-align: center; font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.home-brands { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 30px; display: flex; align-items: center; justify-content: space-around; gap: 20px; flex-wrap: wrap; }
.home-brands span { font-weight: 800; font-size: 20px; color: #c3c8d0; letter-spacing: .5px; transition: color .15s; }
.home-brands span:hover { color: var(--ink); }

/* Services strip */
.service-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.ss-item { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.ss-item .ss-ico { width: 52px; height: 52px; border-radius: 50%; background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 24px; }
.service-strip .ss-item + .ss-item { border-inline-start: 1px solid var(--line); }

/* Hero */
.hero { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; margin-top: 24px; }
.hero-col { display: grid; gap: 16px; }
.hero-card { border-radius: var(--radius-lg); padding: 24px; position: relative; overflow: hidden; min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; }
.hero-main { grid-column: 2; background: #0b1220; color: #fff; min-height: 316px; padding: 34px; }
.hero-main .badge-line { color: #93c5fd; font-size: 12.5px; font-weight: 600; margin-bottom: 10px; }
.hero-main h1 { font-size: 34px; line-height: 1.25; margin: 0 0 14px; font-weight: 800; }
.hero-main p { color: #cbd5e1; max-width: 60%; margin: 0 0 20px; }
.hero-main .hero-buy { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hero-main .price-tag { font-weight: 800; }
.hero-glow { position: absolute; inset-inline-start: -80px; top: 40px; width: 320px; height: 320px; background: radial-gradient(circle, #1e293b, transparent 70%); border-radius: 50%; }
.hero-emoji { position: absolute; inset-inline-end: 30px; top: 40px; font-size: 120px; opacity: .9; }

.hero-blue { background: linear-gradient(135deg, #3b82f6, #2f6bff 60%, #1e4fd6); color: #fff; }
.hero-blue .tag { font-size: 12px; opacity: .85; }
.hero-blue h3 { font-size: 22px; margin: 6px 0 4px; font-weight: 800; }
.hero-white { background: #fff; border: 1px solid var(--line); }
.hero-white .tag { font-size: 12px; color: var(--muted); }
.hero-white h3 { font-size: 20px; margin: 6px 0 4px; font-weight: 800; }
.hero-card .go { font-size: 13.5px; font-weight: 700; }
.hero-blue .go { color: #eaf1ff; }
.hero-white .go { color: var(--blue); }

/* Category chips */
.cat-chips { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; }
.cat-chip { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 10px; text-align: center; font-size: 13.5px; font-weight: 600; transition: .15s; }
.cat-chip:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-3px); }
.cat-chip .ci { font-size: 26px; display: block; margin-bottom: 6px; }

/* Filter tabs */
.filter-tabs { display: flex; gap: 6px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
.filter-tabs button { border: 0; background: transparent; border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; color: var(--muted); }
.filter-tabs button.active { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }

/* ---------------------------------------------------------------------------
   Product grid + cards
--------------------------------------------------------------------------- */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.product-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; position: relative; transition: .18s; }
.product-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.pc-media { aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; font-size: 64px; overflow: hidden; }
.pc-media img { width: 100%; height: 100%; object-fit: cover; }
/* Real product photos: show the whole image (contain) instead of cropping. */
.pc-media.has-img { padding: 10px; }
.pc-media.has-img img { object-fit: contain; }
.pc-badge { position: absolute; top: 10px; inset-inline-start: 10px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.pc-badge.new { background: var(--ink); }
.pc-body { padding: 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pc-cat { font-size: 11.5px; color: var(--muted); }
.pc-title { font-weight: 700; font-size: 15px; margin: 0; line-height: 1.5; }
.pc-meta { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--muted); }
.pc-rating { color: var(--star); font-weight: 700; }
.pc-rating .num { color: var(--muted); margin-inline-start: 3px; }
.pc-foot { display: flex; align-items: flex-end; justify-content: space-between; margin-top: auto; padding-top: 6px; }
.pc-price .old { color: var(--muted); text-decoration: line-through; font-size: 12px; }
.pc-price .now { font-weight: 800; font-size: 15px; }
.pc-price .unit { font-size: 12px; font-weight: 600; color: var(--muted); }
.pc-add { width: 38px; height: 38px; border-radius: var(--radius-md); border: 1px solid var(--line); background: #fff; color: var(--blue); font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center; transition: .15s; }
.pc-add:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.pc-badge.oos { background: #64748b; }
.product-card.is-oos .pc-media { opacity: .5; filter: grayscale(0.35); }
.pc-oos-label { font-weight: 800; font-size: 14px; color: #94a3b8; }
.pc-add.disabled { color: var(--muted); font-size: 16px; }
.pc-add.disabled:hover { background: var(--bg); color: var(--ink); border-color: var(--line); }

/* ---------------------------------------------------------------------------
   Special offers
--------------------------------------------------------------------------- */
.offers { background: var(--red); border-radius: var(--radius-lg); padding: 22px; color: #fff; }
.offers .section-head { margin-bottom: 16px; }
.offers .section-head h2 { color: #fff; }
.offers .section-head .timer { font-size: 13px; opacity: .9; }
.offers-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.offer-card { background: #fff; border-radius: var(--radius-sm); padding: 12px; color: var(--ink); position: relative; text-align: center; }
.offer-card .oc-media { aspect-ratio: 1/1; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 46px; margin-bottom: 8px; overflow: hidden; }
.offer-card .oc-media img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; }
.offer-card .oc-badge { position: absolute; top: 8px; inset-inline-start: 8px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
.offer-card .oc-title { font-size: 13px; font-weight: 700; }
.offer-card .oc-old { color: var(--muted); text-decoration: line-through; font-size: 11px; }
.offer-card .oc-now { font-weight: 800; font-size: 13.5px; }

/* ---------------------------------------------------------------------------
   Services
--------------------------------------------------------------------------- */
.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.service-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.service-card .s-ico { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 12px; color: #fff; }
.service-card h3 { font-size: 15px; margin: 0 0 6px; font-weight: 800; }
.service-card p { font-size: 12.5px; color: var(--muted); margin: 0 0 12px; line-height: 1.7; }
.service-card .link { color: var(--blue); font-size: 13px; font-weight: 700; }

/* ---------------------------------------------------------------------------
   Magazine
--------------------------------------------------------------------------- */
.mag-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mag-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.mag-media { height: 150px; }
.mag-body { padding: 16px; }
.mag-body .mag-meta { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.mag-body h3 { font-size: 15.5px; margin: 0; font-weight: 700; line-height: 1.6; }

/* ---------------------------------------------------------------------------
   Footer
--------------------------------------------------------------------------- */
.brand-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.brand-strip .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 70px; flex-wrap: wrap; }
.brand-strip .bs-label { font-size: 12.5px; color: var(--muted); }
.brand-strip .bs-logos { display: flex; gap: 34px; color: #c3c8d0; font-weight: 800; font-size: 16px; }

.site-footer { background: #0b1220; color: #cbd5e1; margin-top: 40px; padding-block: 42px 24px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; }
.site-footer .f-brand .brand { color: #fff; margin-bottom: 12px; }
.site-footer .f-brand p { font-size: 12.5px; line-height: 2; color: #94a3b8; max-width: 340px; }
.site-footer .f-brand .site-url { color: var(--blue); font-size: 12.5px; }
.site-footer h4 { color: #fff; font-size: 14px; margin: 0 0 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.site-footer ul a { font-size: 13px; color: #94a3b8; }
.site-footer ul a:hover { color: #fff; }
.footer-about { border-top: 1px solid #1e293b; margin-top: 30px; padding-top: 22px; }
.footer-about h4 { font-size: 13px; }
.footer-about p { font-size: 12px; color: #7d8ba1; line-height: 2; }
.footer-bottom { border-top: 1px solid #1e293b; margin-top: 22px; padding-top: 18px; display: flex; justify-content: space-between; font-size: 12px; color: #7d8ba1; flex-wrap: wrap; gap: 10px; }

/* Newsletter signup */
.footer-newsletter { border-top: 1px solid #1e293b; margin-top: 30px; padding-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer-newsletter .fn-copy h4 { margin: 0 0 6px; font-size: 15px; }
.footer-newsletter .fn-copy p { margin: 0; font-size: 12.5px; color: #94a3b8; }
.footer-newsletter .fn-form { display: flex; gap: 8px; flex: 1; min-width: 260px; max-width: 420px; }
.footer-newsletter .fn-form input { flex: 1; min-width: 0; background: #0f1b30; border: 1px solid #24344d; border-radius: 999px; padding: 11px 18px; color: #e2e8f0; font-size: 13px; }
.footer-newsletter .fn-form input::placeholder { color: #64748b; }
.footer-newsletter .fn-form button { background: var(--blue); color: #fff; border: 0; border-radius: 999px; padding: 11px 22px; font-weight: 700; font-size: 13px; transition: background .15s; }
.footer-newsletter .fn-form button:hover { background: var(--blue-dark); }

/* Trust badges (Enamad slot) + payment methods */
.footer-trust { border-top: 1px solid #1e293b; margin-top: 24px; padding-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer-trust .ft-badges { display: flex; gap: 14px; }
.footer-trust .ft-badges img, .footer-trust .ft-badges a img { height: 84px; width: auto; border-radius: 10px; background: #fff; }
.ft-enamad-placeholder { width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 12px; font-weight: 700; line-height: 1.5; color: #94a3b8; border: 1px dashed #334155; border-radius: 10px; }
.footer-trust .ft-pay { text-align: left; }
.footer-trust .ft-pay-label { display: block; font-size: 12px; color: #7d8ba1; margin-bottom: 8px; }
.footer-trust .ft-pay-icons { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.footer-trust .ft-pay-icons li { background: #0f1b30; border: 1px solid #24344d; border-radius: 8px; padding: 8px 12px; font-size: 12px; font-weight: 700; color: #cbd5e1; }
@media (max-width: 640px) {
  .footer-newsletter, .footer-trust { flex-direction: column; align-items: flex-start; }
  .footer-trust .ft-pay { text-align: right; }
}

/* ---------------------------------------------------------------------------
   WooCommerce shop / product pages (kept simple & on-brand)
--------------------------------------------------------------------------- */
.woo-page { max-width: var(--maxw); margin-inline: auto; padding: 30px 20px; }
.woocommerce ul.products { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin: 0; }
.woocommerce ul.products li.product { list-style: none; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; text-align: center; }
.woocommerce ul.products li.product .button,
.woocommerce a.button, .woocommerce button.button, .woocommerce #respond input#submit,
.woocommerce .button { background: var(--blue) !important; color: #fff !important; border-radius: 999px !important; padding: 9px 18px !important; font-weight: 700 !important; border: 0 !important; }
.woocommerce a.button:hover, .woocommerce button.button:hover { background: var(--blue-dark) !important; }
.woocommerce span.price, .woocommerce div.product p.price { color: var(--ink); font-weight: 800; }
.woo-oos { display: inline-block; background: #64748b; color: #fff; font-size: 12px; font-weight: 700; padding: 3px 12px; border-radius: 999px; margin-top: 6px; }
.woocommerce ul.products li.product.outofstock { opacity: .85; }
.woocommerce ul.products li.product.outofstock img { filter: grayscale(0.3); opacity: .8; }
.woocommerce .woocommerce-message, .woocommerce-info { border-top-color: var(--blue); }

/* ---------------------------------------------------------------------------
   Category / archive page
--------------------------------------------------------------------------- */
.archive-catnav { border-top: 0; }
.cat-icon.is-active span { color: var(--blue); }
.cat-icon.is-active .cat-icon-img { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 50%; }
.archive-wrap { padding-block: 26px 50px; }
.cat-banner { display: grid; grid-template-columns: 320px 1fr; gap: 26px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin-bottom: 24px; }
.cat-banner-media { height: 200px; display: flex; align-items: center; justify-content: center; }
.cat-banner-media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cat-banner-title { font-size: 26px; font-weight: 800; margin: 0 0 12px; }
.cat-banner-desc { color: var(--muted); font-size: 14px; line-height: 2; margin: 0 0 14px; max-width: 640px; }
.cat-banner-meta { font-size: 13px; color: var(--blue); font-weight: 700; }
.archive-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 12px; flex-wrap: wrap; }
.archive-toolbar .result-count { color: var(--muted); font-size: 13.5px; }
.archive-toolbar select { font-family: inherit; border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; background: #fff; font-size: 13.5px; color: var(--ink); }
.archive-pagination { margin-top: 30px; display: flex; justify-content: center; }
.archive-pagination ul { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0; }
.archive-pagination a, .archive-pagination span { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-weight: 700; }
.archive-pagination .current { background: var(--blue); color: #fff; border-color: var(--blue); }

/* ---------------------------------------------------------------------------
   Single product page
--------------------------------------------------------------------------- */
.product-single { padding-block: 22px 50px; }
.pd-breadcrumb { font-size: 13px; color: var(--muted); margin-bottom: 16px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pd-breadcrumb a { color: var(--muted); } .pd-breadcrumb a:hover { color: var(--blue); }
.pd-breadcrumb .cur { color: var(--ink); }
.pd-title { font-size: 26px; font-weight: 800; line-height: 1.6; margin: 0 0 22px; }
.pd-main { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; }

.pd-gallery { position: sticky; top: 90px; }
.pd-main-img { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; padding: 24px; overflow: hidden; }
.pd-main-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pd-main-img .cat-emoji { font-size: 120px; }
.pd-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.pd-thumb { width: 72px; height: 72px; border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 6px; cursor: pointer; overflow: hidden; }
.pd-thumb.active { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(47,107,255,.2); }
.pd-thumb img { width: 100%; height: 100%; object-fit: contain; }

.pd-info { display: flex; flex-direction: column; gap: 18px; }
.pd-meta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--muted); padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.pd-meta-row .pd-rating { color: var(--star); font-weight: 800; }
.pd-meta-row a { color: var(--blue); }
.pd-buybox { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.pd-price { font-size: 26px; font-weight: 800; margin-bottom: 8px; }
.pd-price .unit { font-size: 15px; color: var(--muted); font-weight: 600; }
.pd-oos-label { font-size: 22px; font-weight: 800; color: #64748b; margin-bottom: 8px; }
.pd-warranty { font-size: 13px; color: var(--muted); margin-bottom: 18px; line-height: 1.9; }
.pd-cart { margin: 0; }
.pd-add-btn { width: 100%; background: var(--blue); color: #fff; border: 0; border-radius: var(--radius); padding: 16px; font-size: 16px; font-weight: 800; cursor: pointer; transition: .15s; }
.pd-add-btn:hover { background: var(--blue-dark); }
.pd-notify-btn { display: block; text-align: center; background: var(--ink); color: #fff; border-radius: var(--radius); padding: 15px; font-weight: 700; }
.pd-short { color: var(--ink-2); font-size: 14px; line-height: 2; }

.pd-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 34px 0; }
.pd-trust-card { display: flex; gap: 14px; align-items: flex-start; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.pd-trust-card .ico { font-size: 28px; }
.pd-trust-card h4 { margin: 0 0 6px; font-size: 15px; font-weight: 800; }
.pd-trust-card p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.8; }

.pd-question { display: flex; align-items: center; gap: 12px; justify-content: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 34px; font-size: 14.5px; }
.pd-question span { font-size: 22px; }
.pd-question a { color: var(--blue); font-weight: 700; }

.pd-desc { margin-bottom: 40px; }
.pd-desc-body { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; line-height: 2.1; color: var(--ink-2); font-size: 14.5px; }
.pd-desc-body :is(h2,h3) { font-weight: 800; margin: 18px 0 8px; }

.pd-related .section-head { margin-bottom: 16px; }

/* Color swatches (variable product) */
.pd-swatches { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 4px; }
.pd-swatch { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid var(--line); border-radius: 999px; padding: 5px 12px 5px 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: border-color .14s, box-shadow .14s; }
.pd-swatch .sw-dot { width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); flex-shrink: 0; }
.pd-swatch:hover { border-color: var(--blue); }
.pd-swatch.active { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint, #eef2ff); }
/* hide the native select once swatches are present; keep it for WC's engine */
.woocommerce-variation-add-to-cart .reset_variations { margin-inline-start: 8px; font-size: 12px; }
.value:has(.pd-swatches) select,
td.value:has(.pd-swatches) > select { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* variation form on the custom product page */
.pd-buybox .variations_form .variations { width: 100%; margin: 6px 0 12px; }
.pd-buybox .variations td { padding: 4px 0; }
.pd-buybox .variations th.label { font-size: 13.5px; font-weight: 700; color: var(--muted); padding-inline-end: 10px; vertical-align: top; }
.pd-buybox .single_variation .price { font-weight: 800; font-size: 18px; color: var(--ink); margin-bottom: 10px; display: block; }
.pd-buybox .woocommerce-variation-add-to-cart { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pd-buybox .woocommerce-variation-add-to-cart .quantity input { width: 64px; border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.pd-buybox .single_add_to_cart_button { background: var(--blue); color: #fff; border: 0; border-radius: var(--radius); padding: 14px 22px; font-size: 15px; font-weight: 800; cursor: pointer; }
.pd-buybox .single_add_to_cart_button:hover { background: var(--blue-dark); }
.pd-buybox .single_add_to_cart_button.disabled { opacity: .5; cursor: not-allowed; }

/* Product specifications table */
.pd-specs { margin-bottom: 40px; }
.pd-specs-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.pd-specs-table th, .pd-specs-table td { text-align: start; padding: 13px 18px; font-size: 14px; border-top: 1px solid var(--line); }
.pd-specs-table tr:first-child th, .pd-specs-table tr:first-child td { border-top: 0; }
.pd-specs-table th { width: 200px; background: var(--bg); color: var(--muted); font-weight: 700; }
.pd-specs-table td { color: var(--ink-2); font-weight: 600; }

/* ---------------------------------------------------------------------------
   Phase 2 — mega-menu, mobile drawer, search overlay, carousel arrows
--------------------------------------------------------------------------- */
/* Let hover panels escape the nav bar on desktop (overridden to scroll on tablet). */
.nic-menu ul { overflow: visible; }
.nic-hamburger { display: none; }

/* Interim mega-menu */
.has-mega { position: relative; }
.mega-panel {
  position: absolute; top: 100%; inset-inline-start: 0; margin-top: 10px;
  width: 460px; max-width: 92vw; background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(16,24,40,.18); padding: 16px; z-index: 70;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.mega-panel::before { content: ""; position: absolute; top: -12px; inset-inline: 0; height: 12px; } /* hover bridge */
.has-mega:hover .mega-panel, .has-mega:focus-within .mega-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mega-prod { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; transition: background .14s; min-width: 0; overflow: hidden; }
.mega-prod:hover { background: var(--bg); }
.mega-thumb { width: 46px; height: 46px; border-radius: 10px; background: var(--bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.mega-thumb img { width: 100%; height: 100%; object-fit: contain; }
.mega-emoji { font-size: 26px; }
.mega-name { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; line-height: 1.6; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mega-all { display: inline-block; margin-top: 12px; color: var(--blue); font-weight: 700; font-size: 13px; }

/* Mega panel: subcategories lead, a few products support them. */
.mega-panel.has-subs { width: 640px; }
.mega-cols { display: grid; grid-template-columns: 1fr; gap: 16px; }
.has-subs .mega-cols { grid-template-columns: 210px 1fr; align-items: start; }
.has-subs .mega-subs { border-inline-end: 1px solid var(--line); padding-inline-end: 12px; }
.has-subs .mega-inner { grid-template-columns: 1fr; }
/* .nic-menu ul is more specific than a bare .mega-subs, so scope it. */
.mega-panel .mega-subs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 2px; align-content: start; justify-content: stretch; flex-wrap: nowrap; overflow: visible; }
.mega-subs a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--ink-2); transition: background .14s ease, color .14s ease; }
.mega-subs a:hover { background: var(--bg); color: var(--blue); }
.mega-sub-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mega-count { flex-shrink: 0; font-size: 11px; font-weight: 600; color: var(--muted); }
/*
 * A 640px panel hanging off the last items in an RTL bar reached past the
 * viewport edge and gave every page a horizontal scrollbar. Clip the bar on
 * the inline axis only - overflow-y stays visible so the panel can still drop
 * below the header - and flip the panels near the far edge to open inward.
 */
.nicbar { overflow-x: clip; overflow-y: visible; }
.nic-menu li:nth-last-child(-n+4) .mega-panel { inset-inline-start: auto; inset-inline-end: 0; }

/* The map band collapses until an address is configured in the Customizer. */
.amf-map-band:not(:has(.amf-map)) { display: none; }

/* Subcategory chips on a category archive. */
.cat-subnav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.cat-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: 13px; font-weight: 600; color: var(--ink-2); transition: border-color .14s ease, color .14s ease, background .14s ease; }
.cat-chip:hover { border-color: var(--blue); color: var(--blue); background: var(--card); }
.cat-chip-count { font-size: 11px; font-weight: 600; color: var(--muted); }

/* Blog listing header and its empty state. */
.list-head { margin-block: 34px 26px; max-width: 720px; }
.list-title { margin: 0; font-size: 34px; font-weight: 800; line-height: 1.2; color: var(--ink); }
.list-intro { margin-top: 10px; font-size: 16px; line-height: 1.95; color: var(--muted); }
.list-empty { margin-block: 8px 60px; padding: 34px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.list-empty-lead { margin: 0 0 18px; font-size: 15px; font-weight: 700; color: var(--ink-2); }
.list-empty-links { display: flex; flex-wrap: wrap; gap: 8px; }
.list-empty-foot { margin: 22px 0 0; }
.mag-media.has-img { overflow: hidden; background: var(--bg); }
/* Product cut-outs are small and transparent: fit them, do not crop or upscale. */
.mag-media.has-img img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.singular-media { display: flex; align-items: center; justify-content: center; margin: 0 0 24px; padding: 24px; overflow: hidden; border-radius: var(--radius); background: var(--bg); }
/* Never upscale: a 280px product shot stays 280px instead of blurring. */
.singular-media img { display: block; width: auto; max-width: 100%; height: auto; max-height: 360px; }
.entry-content h2 { margin: 34px 0 12px; font-size: 21px; font-weight: 800; line-height: 1.35; color: var(--ink); }
.entry-content h3 { margin: 26px 0 10px; font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--ink); }
.entry-content p { margin: 0 0 16px; }
.entry-content ul, .entry-content ol { margin: 0 0 18px; padding-inline-start: 22px; }
.entry-content li { margin-bottom: 9px; }
.entry-content a { color: var(--blue); font-weight: 600; }
.entry-content a:hover { color: var(--blue-dark); text-decoration: underline; }
.entry-content strong { color: var(--ink); font-weight: 700; }
@media (max-width: 640px) {
  .list-title { font-size: 26px; }
  .list-empty { padding: 24px; }
}

/* --------------------------------------------------------------------------
   Contact form, contact cards and map. Used by the shortcodes in
   inc/contact.php, which Elementor places with its own Shortcode widget.
---------------------------------------------------------------------------- */
.amf-form { display: grid; gap: 14px; max-width: 720px; }
.amf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.amf-field { display: grid; gap: 6px; margin: 0; }
.amf-field label { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.amf-form input[type="text"], .amf-form input[type="email"], .amf-form input[type="tel"], .amf-form textarea {
  width: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--card); color: var(--ink); font: inherit; font-size: 14px;
}
.amf-form input:focus, .amf-form textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(79, 70, 229, .14); }
.amf-form textarea { min-height: 150px; line-height: 1.9; resize: vertical; }
.amf-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 0; }
.amf-hint { font-size: 12px; color: var(--muted); }
.amf-notice { margin: 0; padding: 12px 16px; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; }
.amf-notice.is-ok { background: #ecfdf5; color: #065f46; }
.amf-notice.is-error { background: #fff1f2; color: #9f1239; }
.fn-notice { flex-basis: 100%; margin: 8px 0 0; font-size: 13px; font-weight: 600; }
.fn-notice.is-ok { color: var(--green); }
.fn-notice.is-error { color: var(--red); }
/* Honeypot: off-screen rather than display:none, which some bots detect. */
.amf-hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

.amf-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.amf-card { padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.amf-card-icon { font-size: 26px; line-height: 1; }
.amf-card-title { margin: 12px 0 6px; font-size: 15px; font-weight: 800; color: var(--ink); }
.amf-card-body { font-size: 14px; line-height: 1.9; color: var(--muted); }
.amf-card-body a { color: var(--ink-2); font-weight: 700; }
.amf-card-body a:hover { color: var(--blue); }
.amf-card-sub { font-size: 13px; }
.amf-map { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); }
.amf-map iframe { display: block; width: 100%; height: 380px; border: 0; }
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.footer-legal a { position: relative; }
.footer-legal a:hover { color: #fff; }
.footer-legal a + a::before { content: ""; position: absolute; inset-inline-end: 100%; margin-inline-end: 7px; top: 50%; width: 3px; height: 3px; border-radius: 999px; background: currentColor; opacity: .5; }

@media (max-width: 640px) {
  .amf-row { grid-template-columns: 1fr; }
  .amf-map iframe { height: 280px; }
}

/* Search overlay */
.nic-search { position: fixed; inset: 0; background: rgba(4,7,15,.72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); border: 0; padding: 0; z-index: 90; display: flex; align-items: flex-start; justify-content: center; }
.nic-search[hidden] { display: none; } /* the hidden attribute must win over display:flex */
.nic-search .container { max-width: 720px; width: 100%; margin-top: 12vh; }
.nic-search form { background: #fff; border: 0; border-radius: 999px; padding: 14px 22px; color: var(--muted); box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.nic-search input[type="search"] { color: var(--ink); font-size: 16px; }
.nic-search-close { background: transparent; border: 0; color: var(--muted); font-size: 18px; cursor: pointer; line-height: 1; padding: 0 4px; }
.nic-search-close:hover { color: var(--ink); }

/* Mobile off-canvas drawer (right side, natural for RTL) */
.nic-drawer-backdrop { position: fixed; inset: 0; background: rgba(4,7,15,.5); z-index: 95; opacity: 0; transition: opacity .25s ease; }
.nic-drawer-backdrop.show { opacity: 1; }
.nic-drawer { position: fixed; top: 0; right: 0; height: 100%; width: 82%; max-width: 320px; background: #fff; z-index: 96; box-shadow: -12px 0 40px rgba(0,0,0,.2); transform: translateX(100%); transition: transform .25s ease; display: flex; flex-direction: column; }
.nic-drawer.open { transform: translateX(0); }
.nd-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.nd-title { font-weight: 800; font-size: 16px; }
.nd-close { background: transparent; border: 0; font-size: 20px; cursor: pointer; color: var(--muted); }
.nd-nav { display: flex; flex-direction: column; padding: 8px 0; overflow-y: auto; }
.nd-nav a { padding: 14px 20px; font-size: 15px; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line); }
.nd-nav a:hover { background: var(--bg); color: var(--blue); }

/* Drawer: one collapsible group per top-level category. */
.nd-group { border-bottom: 1px solid var(--line); }
.nd-group > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 20px; font-size: 15px; font-weight: 600; color: var(--ink); }
.nd-group > summary::-webkit-details-marker { display: none; }
.nd-group > summary::after { content: "+"; font-size: 16px; line-height: 1; color: var(--muted); }
.nd-group[open] > summary::after { content: "−"; }
.nd-group > summary:hover { background: var(--bg); color: var(--blue); }
.nd-sub { background: var(--bg); padding-block: 4px; }
.nd-sub a { border-bottom: 0; padding-block: 11px; padding-inline-start: 34px; padding-inline-end: 20px; font-size: 14px; font-weight: 500; color: var(--muted); }
.nd-sub a:hover { background: transparent; color: var(--blue); }
.nd-sub .nd-sub-all { font-weight: 600; color: var(--ink-2); }

/* Carousel prev/next arrows (RTL-aware) */
.pr-wrap { position: relative; }
.pr-arrow { position: absolute; top: calc(50% - 5px); transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5; transition: opacity .15s, background .15s; }
.pr-arrow:hover { background: var(--bg); }
.pr-prev { inset-inline-end: -8px; }   /* previous → toward the start (right in RTL) */
.pr-next { inset-inline-start: -8px; }  /* next → toward newer (left in RTL) */
.pr-arrow.disabled { opacity: 0; pointer-events: none; }

/* ---------------------------------------------------------------------------
   Phase 3 — warranty selector, filter sidebar, cart & checkout
--------------------------------------------------------------------------- */
/* Warranty selector on product page */
.pd-warranty-select { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 0 4px; }
.pd-warranty-select .pw-label { font-size: 13.5px; color: var(--muted); font-weight: 600; }
.pw-opts { display: flex; gap: 8px; flex-wrap: wrap; }
.pw-opt { background: #fff; border: 1.5px solid var(--line); border-radius: 12px; padding: 8px 16px; font-size: 13.5px; font-weight: 700; color: var(--ink-2); transition: .14s; }
.pw-opt:hover { border-color: var(--blue); }
.pw-opt.active { border-color: var(--blue); background: #eff4ff; color: var(--blue-dark); }

/* Category archive: sidebar + results */
.archive-layout { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: start; }
.archive-filters { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; position: sticky; top: 84px; }
.af-title { font-size: 16px; font-weight: 800; margin: 0 0 14px; }
.af-group { padding: 14px 0; border-top: 1px solid var(--line); }
.af-group:first-of-type { border-top: 0; padding-top: 0; }
.af-group h4 { font-size: 13.5px; font-weight: 700; margin: 0 0 10px; }
.af-price { display: flex; align-items: center; gap: 8px; }
.af-price input { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 13px; font-family: inherit; }
.af-price span { color: var(--muted); font-size: 12px; }
.af-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; padding: 4px 0; }
.af-check input { accent-color: var(--blue); width: 16px; height: 16px; }
.af-shell .af-note { font-size: 12px; color: var(--muted); line-height: 1.9; margin: 0; }
.af-apply { width: 100%; background: var(--blue); color: #fff; border: 0; border-radius: 999px; padding: 11px; font-weight: 700; font-size: 14px; margin-top: 14px; transition: background .15s; }
.af-apply:hover { background: var(--blue-dark); }
.af-reset { display: block; text-align: center; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.af-reset:hover { color: var(--ink); }

/* Cart & checkout — brand styling on the classic WooCommerce templates */
.woocommerce table.shop_table { border: 1px solid var(--line); border-radius: var(--radius); border-collapse: separate; border-spacing: 0; overflow: hidden; background: #fff; }
.woocommerce table.shop_table th { background: var(--bg); font-weight: 700; font-size: 13.5px; padding: 14px; }
.woocommerce table.shop_table td { padding: 14px; border-top: 1px solid var(--line); font-size: 14px; }
.woocommerce .cart_item .product-thumbnail img { width: 62px; border-radius: 10px; }
.woocommerce .coupon .input-text { border: 1px solid var(--line); border-radius: 999px; padding: 10px 16px; font-family: inherit; }
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout .woocommerce-checkout-review-order { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.woocommerce .cart_totals h2, .woocommerce-checkout h3 { font-size: 17px; font-weight: 800; margin: 0 0 14px; }
.woocommerce .order-total .amount { color: var(--blue-dark); font-size: 18px; }
.woocommerce-checkout .form-row label { font-size: 13.5px; font-weight: 600; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-checkout .select2-selection { border: 1px solid var(--line) !important; border-radius: 10px !important; padding: 10px 12px !important; font-family: inherit !important; min-height: 44px; }
.woocommerce #payment { background: var(--bg); border-radius: var(--radius); }
.woocommerce #payment .place-order .button, .wc-block-components-button { border-radius: 999px !important; }
.woocommerce .woocommerce-info, .woocommerce .woocommerce-message { border-radius: 12px; }

/* ---------------------------------------------------------------------------
   Responsive
--------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .nic-menu ul { overflow-x: auto; } /* tablet: scroll the menu, hover panels not needed on touch */
  .archive-layout { grid-template-columns: 1fr; }
  .archive-filters { position: static; }
  .product-grid, .services-grid, .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
  .offers-grid { grid-template-columns: repeat(3, 1fr); }
  .mag-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero { grid-template-columns: 1fr; }
  .hero-main { grid-column: 1; }
  .hero-main p { max-width: 100%; }
  .nic-menu ul { justify-content: flex-start; gap: 16px; }
  .intro-title { font-size: 21px; }
  .pd-main { grid-template-columns: 1fr; }
  .pd-gallery { position: static; }
  .cat-banner { grid-template-columns: 1fr; text-align: center; }
  .cat-banner-media { height: 160px; }
  .pd-trust { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-card { min-height: 360px; }
  .service-strip { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .service-strip .ss-item + .ss-item { border-inline-start: 0; }
}
@media (max-width: 640px) {
  .nic-menu { display: none; }
  .nic-hamburger { display: flex; }
  .pr-arrow { display: none; } /* mobile uses touch swipe */
  .nic-search .container { margin-top: 8vh; padding-inline: 14px; }
  .product-grid, .offers-grid, .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
  .brand-strip .bs-logos { gap: 16px; font-size: 13px; }
  .hero-main h1 { font-size: 26px; }
  .intro-inner { flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 28px; }
  .feature-grid { grid-template-columns: 1fr; }
  .service-strip { grid-template-columns: repeat(2, 1fr); }
  .pr-item { flex-basis: 200px; }
}

/* ---------------------------------------------------------------------------
   Phase 4 — accessibility, micro-interactions, polish
--------------------------------------------------------------------------- */
/* Keyboard focus (only for keyboard users, not mouse clicks) */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
.nicbar :focus-visible, .nic-drawer :focus-visible { outline-color: #fff; }
.nicbar .nic-drawer :focus-visible { outline-color: var(--blue); }

/* Skip-to-content link (visible only when focused) */
.skip-link { position: fixed; inset-inline-start: 12px; top: -60px; background: #fff; color: var(--ink); padding: 10px 18px; border-radius: 10px; font-weight: 700; font-size: 13px; z-index: 200; box-shadow: var(--shadow-sm); transition: top .2s ease; }
.skip-link:focus { top: 12px; }

/* Micro-interactions — tactile feedback */
.product-card { transition: transform .16s ease, box-shadow .16s ease; }
.product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.pc-add { transition: transform .12s ease, background .15s ease; }
.pc-add:hover { background: var(--blue-dark); }
.pc-add:active { transform: scale(.88); }
.pd-add-btn { transition: transform .12s ease, background .15s ease, box-shadow .15s ease; }
.pd-add-btn:active { transform: translateY(1px); }
.cat-icon { transition: transform .15s ease; }
.cat-icon:hover { transform: translateY(-3px); }
.btn, .af-apply, .nic-ico, .pw-opt, .nd-nav a { transition: transform .12s ease, background .15s ease, color .15s ease, border-color .15s ease; }
.btn:active, .af-apply:active { transform: translateY(1px); }
.mag-card { transition: transform .16s ease, box-shadow .16s ease; }
.mag-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

/* Consistent image rendering / avoid stretched thumbs */
.product-card img, .mega-thumb img, .cat-icon-img img { image-rendering: auto; }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   Layout helpers

   These replace the inline style="" attributes the templates used to carry
   (audit finding C5). Every value is copied verbatim from the attribute it
   replaces, so rendering is unchanged. They are declared at the end of the
   file so that .singular-wrap wins over .container for max-width.
--------------------------------------------------------------------------- */
.list-wrap { margin-block: 34px; }
.singular-wrap { margin-block: 34px; max-width: 820px; }
.singular-title { font-size: 28px; font-weight: 800; line-height: 1.4; }
.singular-date { margin-bottom: 20px; }
.entry-content { line-height: 2.1; }
.pagination-wrap { margin-top: 24px; }
.archive-empty { padding: 40px 0; }

/* Magazine card placeholder gradients (were inline on .mag-media). */
.mag-media-a { background: linear-gradient(135deg,#3b82f6,#1e3a8a); }
.mag-media-b { background: linear-gradient(135deg,#0f172a,#334155); }
.mag-media-c { background: linear-gradient(135deg,#64748b,#cbd5e1); }
/* ---------------------------------------------------------------------------
   WordPress core content classes

   Required by the Theme Handbook. Nothing in the current content uses them,
   so adding these changes nothing on screen today - but the moment an editor
   aligns an image or adds a caption in the block editor, the result renders
   correctly instead of unstyled.

   alignleft/alignright stay physical on purpose: in WordPress these mean the
   literal side, not the start or end of the text direction.
--------------------------------------------------------------------------- */
.alignleft { float: left; margin-right: 1.5em; margin-bottom: 1em; }
.alignright { float: right; margin-left: 1.5em; margin-bottom: 1em; }
.aligncenter { display: block; margin-inline: auto; margin-bottom: 1em; }
.alignwide { max-width: 1000px; margin-inline: auto; }
.alignfull { max-width: 100%; }

.wp-caption { max-width: 100%; margin-bottom: 1em; }
.wp-caption img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-md); }
.wp-caption-text,
.gallery-caption { font-size: 13px; line-height: 1.9; color: var(--muted); text-align: center; margin-block-start: 8px; }

.sticky { position: relative; }
.bypostauthor { display: block; }

.page-links { margin-block-start: 20px; display: flex; gap: 8px; flex-wrap: wrap; }

/* Visually hidden, still read by assistive technology. */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.screen-reader-text:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip-path: none;
  white-space: normal;
}
/* ---------------------------------------------------------------------------
   Comments

   Added when comments_template() was wired into single.php. Styled from the
   same tokens as the rest of the theme so the thread reads as part of the
   page rather than as unstyled WordPress default markup.
--------------------------------------------------------------------------- */
.comments-area { margin-block-start: 40px; padding-block-start: 28px; border-block-start: 1px solid var(--line); }
.comments-title { font-size: 19px; font-weight: 800; margin: 0 0 20px; line-height: 1.6; }

.comment-list { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.comment-list ol.children { list-style: none; margin: 14px 0 0; padding-inline-start: 22px; display: flex; flex-direction: column; gap: 14px; }

.comment-body {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}
.comment-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-block-end: 10px; }
.comment-author { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14.5px; }
.comment-author img { border-radius: 999px; }
.comment-author .says { display: none; }
.comment-metadata { font-size: 12.5px; color: var(--muted); }
.comment-metadata a { color: var(--muted); text-decoration: none; }
.comment-metadata a:hover { color: var(--blue); }
.comment-content { font-size: 14.5px; line-height: 2; }
.comment-content p:last-child { margin-block-end: 0; }
.comment-awaiting-moderation { display: block; font-size: 12.5px; color: var(--amber); margin-block-start: 8px; }
.reply { margin-block-start: 10px; }
.comment-reply-link { font-size: 13px; font-weight: 700; color: var(--blue); text-decoration: none; }
.comment-reply-link:hover { color: var(--blue-dark); }
.bypostauthor > .comment-body { border-color: var(--blue); }
.no-comments { color: var(--muted); font-size: 14px; }

.comment-respond { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.comment-reply-title { font-size: 17px; font-weight: 800; margin: 0 0 6px; }
.comment-notes, .comment-form-cookies-consent label { font-size: 13px; color: var(--muted); }
.comment-form { display: flex; flex-direction: column; gap: 14px; }
.comment-form label { display: block; font-size: 13.5px; font-weight: 700; margin-block-end: 6px; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 11px 13px;
  min-height: 44px;
}
.comment-form textarea { min-height: 130px; resize: vertical; line-height: 1.9; }
.comment-form input:focus, .comment-form textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: transparent; }
.comment-form .form-submit { margin: 0; }
.comment-form input[type="submit"] {
  background: var(--blue);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 11px 26px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s ease;
}
.comment-form input[type="submit"]:hover { background: var(--blue-dark); }
.comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 8px; }
.comment-form-cookies-consent input { margin-block-start: 4px; }
.comment-form-cookies-consent label { font-weight: 400; margin: 0; }

@media (max-width: 640px) {
  .comment-list ol.children { padding-inline-start: 12px; }
  .comment-body, .comment-respond { padding: 15px 16px; }
}
/* ---------------------------------------------------------------------------
   Promo banners on small screens

   .promo-row was declared as repeat(3, 1fr) outside every media query, so at
   375px each banner got roughly 108px minus 56px of padding - about 52px of
   text width, which broke the headings one word per line. Stacking them below
   the theme's existing 640px breakpoint fixes it without inventing a new one.
--------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .promo-row { grid-template-columns: 1fr; }
  .promo-banner { min-height: 148px; padding: 22px; }
  .promo-banner .pb-body { max-width: 68%; }
  .promo-banner h3 { font-size: 19px; }
  .promo-banner .pb-emoji { font-size: 68px; }
}
/* ---------------------------------------------------------------------------
   Header account link

   Sits beside the search and cart icons. It keeps the 38px icon footprint of
   its siblings but grows to fit a label on wide screens; below the theme's
   1024px breakpoint it collapses back to icon-only so the bar never crowds.
--------------------------------------------------------------------------- */
.nic-account { width: auto; gap: 7px; padding-inline: 11px; }
.nic-account-label { font-size: 12.5px; font-weight: 700; white-space: nowrap; line-height: 1; }

.nd-account {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 700;
  color: var(--blue);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.nd-account:hover { background: var(--accent-soft, #eef2ff); }
.nd-account svg { flex: none; }

@media (max-width: 1024px) {
  .nic-account { width: 38px; padding-inline: 0; gap: 0; }
  .nic-account-label { display: none; }
}
/* ---------------------------------------------------------------------------
   Elementor-assembled section pages

   Restores block flow inside the top-level Elementor containers on pages built
   from the theme's section shortcodes, so sibling margins collapse exactly as
   they did when the sections were children of a single .container div.
   Specificity beats Elementor's own .e-con rule without needing !important.
--------------------------------------------------------------------------- */
/*
 * The theme's section widgets were authored as siblings of one block-level
 * .container and rely on collapsing margins, which a flex container does not
 * do. Only the containers that actually hold such a widget go back to block
 * flow; flattening every container on the page also broke ordinary Elementor
 * columns built alongside them.
 */
.amf-elementor-sections .e-con.e-parent:has([class*="elementor-widget-amafardid-"]),
.amf-elementor-sections .e-con.e-parent:has([class*="elementor-widget-amafardid-"]) > .e-con-inner { display: block; }
/* ---------------------------------------------------------------------------
   WooCommerce product gallery

   The hand-built gallery was replaced with woocommerce_show_product_images()
   so the wc-product-gallery-zoom / -lightbox / -slider theme supports work.
   These rules give WooCommerce's markup the same card the old .pd-main-img
   had: white surface, hairline border, square crop, 72px thumbnail row.
--------------------------------------------------------------------------- */
.pd-gallery .woocommerce-product-gallery { position: relative; }
.pd-gallery .woocommerce-product-gallery__wrapper {
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.pd-gallery .woocommerce-product-gallery__image { margin: 0; }
.pd-gallery .woocommerce-product-gallery__image a { display: block; }
.pd-gallery .woocommerce-product-gallery__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 24px;
  background: #fff;
}

/* Lightbox trigger, styled as a quiet round button in the corner. */
.pd-gallery .woocommerce-product-gallery__trigger {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  z-index: 4;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  text-decoration: none;
  color: var(--ink);
}
.pd-gallery .woocommerce-product-gallery__trigger::after {
  content: "\2315";
  font-size: 19px;
  line-height: 1;
}
.pd-gallery .woocommerce-product-gallery__trigger img { display: none; }

/* Thumbnail strip (flexslider control nav). */
.pd-gallery .flex-control-thumbs {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pd-gallery .flex-control-thumbs li { margin: 0; }
.pd-gallery .flex-control-thumbs img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 6px;
  cursor: pointer;
  opacity: 1;
  transition: border-color .15s ease;
}
.pd-gallery .flex-control-thumbs img.flex-active,
.pd-gallery .flex-control-thumbs img:hover { border-color: var(--blue); }
.pd-gallery .flex-direction-nav { display: none; }
/* ---------------------------------------------------------------------------
   WooCommerce product tabs and reviews

   Restored with woocommerce_output_product_data_tabs(). The theme's own
   standalone description and specification sections were removed so the same
   content is not shown twice.
--------------------------------------------------------------------------- */
.woocommerce-tabs { margin-block: 34px; }
.woocommerce-tabs ul.tabs {
  list-style: none;
  margin: 0 0 -1px;
  padding: 0;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
}
.woocommerce-tabs ul.tabs li { margin: 0; }
.woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 12px 20px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.woocommerce-tabs ul.tabs li a:hover { color: var(--ink); }
.woocommerce-tabs ul.tabs li.active a {
  background: var(--card);
  color: var(--ink);
  border-color: var(--line);
  position: relative;
}
.woocommerce-tabs .woocommerce-Tabs-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0 var(--radius) var(--radius) var(--radius);
  padding: 24px;
  line-height: 2.1;
  font-size: 14.5px;
}
.woocommerce-tabs .woocommerce-Tabs-panel > h2 { font-size: 18px; font-weight: 800; margin: 0 0 14px; }
.woocommerce-tabs .shop_attributes { width: 100%; border-collapse: collapse; }
.woocommerce-tabs .shop_attributes th,
.woocommerce-tabs .shop_attributes td { padding: 11px 14px; border-bottom: 1px solid var(--line); text-align: start; font-size: 14px; }
.woocommerce-tabs .shop_attributes th { font-weight: 700; color: var(--muted); width: 34%; }
/* Review list and form inside the reviews tab. */
#reviews .commentlist { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
#reviews .comment_container { display: flex; gap: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px; }
#reviews .comment_container img.avatar { width: 44px; height: 44px; border-radius: 999px; flex: none; }
#reviews .comment-text { flex: 1; min-width: 0; }
#reviews .woocommerce-review__author { font-weight: 700; font-size: 14.5px; }
#reviews .woocommerce-review__published-date { font-size: 12.5px; color: var(--muted); }
#reviews .woocommerce-noreviews { color: var(--muted); }
#reviews .comment-reply-title { display: block; font-size: 16px; font-weight: 800; margin-block-end: 10px; }
#reviews .comment-form { display: flex; flex-direction: column; gap: 14px; }
#reviews .comment-form label { display: block; font-size: 13.5px; font-weight: 700; margin-block-end: 6px; }
#reviews .comment-form input[type="text"],
#reviews .comment-form input[type="email"],
#reviews .comment-form textarea {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 11px 13px;
  min-height: 44px;
}
#reviews .comment-form textarea { min-height: 120px; resize: vertical; line-height: 1.9; }
#reviews .comment-form input[type="submit"] {
  background: var(--blue);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 11px 26px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  align-self: flex-start;
}
#reviews .comment-form input[type="submit"]:hover { background: var(--blue-dark); }
#reviews .stars a { color: var(--star); text-decoration: none; }
/* Keep the gallery inside its grid track.
   Flexslider writes an inline pixel width onto the gallery wrapper that is the
   sum of every slide, which a grid column sized by content will happily grow
   to. min-width:0 lets the track shrink, and .flex-viewport clips the strip. */
.pd-main > * { min-width: 0; }
.pd-gallery,
.pd-gallery .woocommerce-product-gallery { width: 100%; max-width: 100%; min-width: 0; }
.pd-gallery .flex-viewport { width: 100%; max-width: 100%; overflow: hidden; }
.pd-gallery .woocommerce-product-gallery__wrapper { max-width: 100%; }
/* Footer brand link contrast.
   var(--blue) on the near-black footer measured 2.98:1, below the WCAG AA
   minimum of 4.5:1 for body-size text. This lighter indigo keeps the brand
   hue and measures 6.2:1 on #0b1220. */
.site-footer .f-brand .site-url { color: #818cf8; }
.site-footer .f-brand .site-url:hover { color: #a5b4fc; }
/* ---------------------------------------------------------------------------
   Elementor content locations and the product grid widget

   .amf-location is the wrapper the theme prints around a template assigned to
   a slot; it carries no styling of its own so an editor's design comes through
   untouched. .amf-grid is the product grid widget, whose column count comes
   from the widget's own responsive control.
--------------------------------------------------------------------------- */
.amf-location { display: block; }

.amf-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1024px) { .amf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .amf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ---------------------------------------------------------------------------
   My Account

   WooCommerce ships this area unstyled, so it arrived as bare browser default
   forms. These rules put it on the theme's cards, spacing and controls. The
   page uses the full-width template because the signed-in view is a two-column
   layout and the 820px reading measure squeezed it.
--------------------------------------------------------------------------- */

/* --- Signed out: login beside register --- */
.woocommerce-account #customer_login {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
  margin-block: 10px 30px;
}
.woocommerce-account #customer_login > div {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow-sm);
  width: auto;
  float: none;
}
.woocommerce-account #customer_login h2 {
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 6px;
}
@media (max-width: 640px) {
  .woocommerce-account #customer_login { grid-template-columns: 1fr; }
  .woocommerce-account #customer_login > div { padding: 20px; }
}

/* --- Shared form controls across every account screen --- */
.woocommerce-account .woocommerce form .form-row { display: block; margin: 0 0 16px; padding: 0; }
.woocommerce-account .woocommerce form label { display: block; font-size: 13.5px; font-weight: 700; margin-block-end: 6px; }
.woocommerce-account .woocommerce form .required { color: var(--red); text-decoration: none; }
.woocommerce-account .woocommerce form input[type="text"],
.woocommerce-account .woocommerce form input[type="email"],
.woocommerce-account .woocommerce form input[type="tel"],
.woocommerce-account .woocommerce form input[type="password"],
.woocommerce-account .woocommerce form select,
.woocommerce-account .woocommerce form textarea {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 11px 13px;
  min-height: 46px;
  box-sizing: border-box;
}
.woocommerce-account .woocommerce form input:focus,
.woocommerce-account .woocommerce form select:focus,
.woocommerce-account .woocommerce form textarea:focus {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
  border-color: transparent;
}
.woocommerce-account .woocommerce-form__label-for-checkbox { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 13.5px; }
.woocommerce-account .woocommerce-form__label-for-checkbox input { min-height: 0; width: auto; }
.woocommerce-account .woocommerce-password-hint,
.woocommerce-account .woocommerce-privacy-policy-text { font-size: 12.5px; color: var(--muted); line-height: 1.9; }
.woocommerce-account .lost_password { font-size: 13px; margin-block-start: 10px; }
.woocommerce-account .lost_password a { color: var(--blue); }
/* --- Signed in: navigation beside content --- */
.woocommerce-account .woocommerce { display: block; }
.woocommerce-account.logged-in .woocommerce {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin-block: 10px 30px;
}
@media (max-width: 860px) {
  .woocommerce-account.logged-in .woocommerce { grid-template-columns: 1fr; }
}

.woocommerce-MyAccount-navigation {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px;
  box-shadow: var(--shadow-sm);
  width: auto;
  float: none;
}
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.woocommerce-MyAccount-navigation li a:hover { background: var(--bg); color: var(--blue); }
.woocommerce-MyAccount-navigation li.is-active a { background: var(--blue); color: #fff; }
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--red); }
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a:hover { background: var(--crit-soft, #fdecef); color: var(--red); }

.woocommerce-MyAccount-content {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow-sm);
  width: auto;
  float: none;
  font-size: 14.5px;
  line-height: 2;
}
.woocommerce-MyAccount-content > p:first-child { margin-block-start: 0; }
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 { font-size: 17px; font-weight: 800; margin: 0 0 14px; }
.woocommerce-MyAccount-content fieldset { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 18px; margin-block: 18px 0; }
.woocommerce-MyAccount-content fieldset legend { font-weight: 700; font-size: 14px; padding-inline: 8px; }

/* Addresses */
.woocommerce-Addresses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.woocommerce-Addresses .woocommerce-Address { width: auto; float: none; }
.woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-block-end: 10px; }
.woocommerce-Address address { font-style: normal; line-height: 2.1; color: var(--ink-2); }
@media (max-width: 640px) { .woocommerce-Addresses { grid-template-columns: 1fr; } }

/* Orders and downloads tables */
.woocommerce-account table.woocommerce-orders-table,
.woocommerce-account table.shop_table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-size: 14px;
}
.woocommerce-account table.shop_table th,
.woocommerce-account table.shop_table td { padding: 12px 14px; border-block-end: 1px solid var(--line); text-align: start; }
.woocommerce-account table.shop_table th { background: var(--bg); font-weight: 700; font-size: 12.5px; color: var(--muted); }
.woocommerce-account .woocommerce-Message,
.woocommerce-account .woocommerce-info {
  background: var(--bg);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--blue);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 14px;
}
/*
 * WooCommerce clears its float layouts with `::before { content: ""; display: table }`.
 * Inside a grid container those pseudo elements become real grid items and take
 * up two of the four cells, which pushed the register box down a whole row.
 * The floats are already neutralised above, so the clearfix has nothing to do.
 */
.woocommerce-account #customer_login::before,
.woocommerce-account #customer_login::after,
.woocommerce-account .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-Addresses::after,
.woocommerce-account.logged-in .woocommerce::before,
.woocommerce-account.logged-in .woocommerce::after {
  content: none;
}
/*
 * WooCommerce sizes the account columns with `.woocommerce-account
 * .woocommerce-MyAccount-navigation { float: left; width: 30% }`. That
 * selector carries two classes, so the single-class rules above lost the
 * cascade and the sidebar came out 75px wide inside its 250px grid track.
 * These repeat the reset at matching specificity; the grid owns the widths.
 */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
  float: none;
  width: auto;
}
.woocommerce-account .woocommerce-Addresses .woocommerce-Address {
  float: none;
  width: auto;
}