/*
Theme Name: Printo
Theme URI: https://printo.in
Author: Printo Team
Author URI: https://printo.in
Description: A custom eCommerce theme for Printo - India's leading online printing platform. Supports WooCommerce, responsive design, and modern aesthetics.
Version: 1.2.1
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: printo
Tags: e-commerce, woocommerce, responsive, custom-colors, custom-logo, full-width-template
*/

/* ============================================================
   TABLE OF CONTENTS
   1. CSS Variables / Design Tokens
   2. Reset & Base
   3. Typography
   4. Layout Utilities
   5. Header & Navigation
   6. Hero / Banner
   7. Section Headings
   8. Category Grid
   9. Product Cards
   10. Best Sellers
   11. New Launches
   12. Testimonials
   13. Trust Badges
   14. Corporate Banner
   15. Blog Section
   16. FAQ Section
   17. Footer
   18. Responsive
   ============================================================ */

/* ============================================================
   1. CSS VARIABLES
   ============================================================ */
:root {
  --color-primary:    #6b21a8;   /* Purple */
  --color-primary-dark: #4c1772; /* Darker Purple for hovers/accessibility */
  --color-primary-light: #f5f3ff; /* Soft Purple background/hover tint */
  --color-secondary:  #f47920;   /* Orange CTA */
  --color-secondary-dark: #d4600a; /* Darker Orange for hovers */
  --color-accent:     #fff200;   /* Yellow highlight */
  --color-dark:       #18181b;   /* Charcoal Black */
  --color-gray-100:   #f9fafb;
  --color-gray-200:   #f3f4f6;
  --color-gray-300:   #e5e7eb;
  --color-gray-500:   #6b7280;
  --color-gray-700:   #374151;
  --color-white:      #ffffff;
  --color-text:       #111827;

  --font-primary:     'Inter', 'Segoe UI', Arial, sans-serif;
  --font-heading:     'Poppins', 'Inter', Arial, sans-serif;

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  --shadow-sm:   0 1px 3px rgba(0,0,0,.08);
  --shadow-md:   0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:   0 8px 32px rgba(0,0,0,.14);

  --transition:  .2s ease;
  --container:   1240px;
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 17px; }

body {
  font-family: var(--font-primary);
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a  { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; font-family: inherit; }

/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-dark);
}
h1 { font-size: clamp(2.1rem, 4.5vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.1rem; }

p { margin-bottom: .75rem; }

/* ============================================================
   4. LAYOUT UTILITIES
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.section { padding: 3.5rem 0; }
.section--gray { background: var(--color-gray-100); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1.5rem;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: .9rem;
  transition: var(--transition);
  border: 2px solid transparent;
}
.btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
}
.btn-primary:hover { background: var(--color-primary-dark); }

.btn-secondary {
  background: var(--color-secondary);
  color: var(--color-white);
}
.btn-secondary:hover { background: var(--color-secondary-dark); }

.btn-sm {
  padding: .4rem .9rem;
  font-size: .78rem;
  margin-top: .5rem;
  width: 100%;
  justify-content: center;
}

.btn-outline {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn-outline:hover { background: var(--color-primary); color: var(--color-white); }

/* ============================================================
   4a. LUCIDE ICON GLOBAL STYLES
   ============================================================ */

/* Base — all Lucide icons inherit current font size */
[data-lucide], svg.lucide {
  width: 1em;
  height: 1em;
  vertical-align: middle;
  stroke-width: 1.75;
  flex-shrink: 0;
  display: inline-block;
}

/* Header action icons — handled per .header-action-item above */

/* Trust badge icons */
.trust-badge-item .icon [data-lucide],
.trust-badge-item .icon svg.lucide {
  width: 2.4rem;
  height: 2.4rem;
  stroke: var(--color-primary);
  stroke-width: 1.5;
}

/* Marquee bar icons */
#printo-announcement-bar [data-lucide],
#printo-announcement-bar svg.lucide {
  width: .85rem;
  height: .85rem;
  margin-right: .3rem;
}

/* Footer social icons */
.footer-social [data-lucide],
.footer-social svg.lucide {
  width: 1rem;
  height: 1rem;
}

/* Search button icon */
.header-search button [data-lucide],
.header-search button svg.lucide {
  width: 1rem;
  height: 1rem;
}

/* AI badge + button icons */
.badge [data-lucide], .badge svg.lucide,
.btn [data-lucide], .btn svg.lucide {
  width: .9rem;
  height: .9rem;
}

/* Mobile nav toggle */
.nav-toggle [data-lucide],
.nav-toggle svg.lucide {
  width: 1.5rem;
  height: 1.5rem;
}

/* ============================================================
   4b. ANNOUNCEMENT MARQUEE BAR
   ============================================================ */
#printo-announcement-bar {
  background: var(--color-dark);
  color: #ffffff;
  font-size: .8rem;
  font-weight: 500;
  padding: .45rem 0;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  border-bottom: 2px solid var(--color-primary); /* Cyan accent line */
}

.announcement-track {
  display: inline-flex;
  gap: 3.5rem;
  animation: printo-marquee 28s linear infinite;
  will-change: transform;
}

/* Pause on hover for readability */
#printo-announcement-bar:hover .announcement-track {
  animation-play-state: paused;
}

.announcement-track span {
  flex-shrink: 0;
  letter-spacing: .2px;
}

.announcement-track strong {
  color: #fbbf24; /* yellow highlight for coupon codes */
}

@keyframes printo-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============================================================
   5. HEADER & NAVIGATION
   ============================================================ */
#site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
}

/* Top bar */
.header-topbar {
  background: #f5f5f5;
  color: var(--color-gray-700);
  font-size: .85rem;
  padding: .4rem 0;
  border-bottom: 1px solid var(--color-gray-300);
}
.header-topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.topbar-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.topbar-links a {
  color: var(--color-gray-700);
  font-weight: 500;
  transition: color var(--transition);
  display: flex;
  align-items: center;
  gap: .3rem;
}
.topbar-links a:hover { color: var(--color-primary); }

.topbar-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.topbar-right a {
  color: var(--color-gray-700);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: .3rem;
  transition: color var(--transition);
}
.topbar-right a:hover { color: var(--color-primary); }

/* Store Locator link — purple icon */
.topbar-store-locator {
  color: var(--color-primary) !important;
  font-weight: 600 !important;
}
.topbar-store-locator svg.lucide { stroke: var(--color-primary); }

/* Business Solutions CTA pill */
.topbar-cta {
  background: var(--color-secondary) !important;
  color: var(--color-white) !important;
  padding: .3rem .9rem !important;
  border-radius: var(--radius-full) !important;
  font-weight: 600 !important;
  font-size: .85rem !important;
}
.topbar-cta:hover { background: var(--color-secondary-dark) !important; color: #fff !important; }

/* Main header row */
.header-main {
  padding: .75rem 0;
  border-bottom: 1px solid var(--color-gray-300);
}
.header-main .container {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* Logo */
.site-logo {
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: -1px;
}
.site-logo span { color: var(--color-secondary); }

/* Search */
.header-search {
  flex: 1;
  max-width: 560px;
}
.header-search form {
  display: flex;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.header-search input {
  flex: 1;
  padding: .6rem 1rem;
  border: none;
  outline: none;
  font-size: .95rem;
  background: var(--color-gray-100);
}
.header-search button {
  padding: .6rem 1.1rem;
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  font-size: .95rem;
}
.header-search button:hover { background: var(--color-primary-dark); }

/* Header actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-left: auto;
  flex-shrink: 0;
}

/* Each action item: icon + label side by side (horizontal) */
.header-action-item {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .92rem;
  font-weight: 500;
  color: var(--color-gray-700);
  white-space: nowrap;
  transition: color var(--transition);
  text-decoration: none;
}
.header-action-item:hover { color: var(--color-primary); }

.header-action-item svg.lucide,
.header-action-item [data-lucide] {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
}

/* Cart button — icon with absolute top-right badge */
.cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
}

.cart-btn svg.lucide,
.cart-btn [data-lucide] {
  width: 1.35rem;
  height: 1.35rem;
}

.cart-count {
  position: absolute;
  top: -4px;
  right: -6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-full);
  font-family: 'Inter', sans-serif;
  font-size: .55rem;
  font-weight: 500;
  line-height: 1;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border: 2px solid var(--color-white);
  letter-spacing: -.3px;
}

/* ── Nav bar ─────────────────────────────────────────── */
.header-nav {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray-300);
  position: relative;
  z-index: 900;
  overflow-x: clip;    /* hides overflowing nav items horizontally */
  overflow-y: visible; /* lets mega-menu drop down below the bar */
}
.header-nav .container { padding: 0 1.25rem; }

.nav-list {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow: visible; /* mega-menu must not be clipped */
}

/* Each nav item */
.nav-item {
  flex-shrink: 0; /* never compress — JS hides overflow items instead */
  position: relative; /* so mega-menu can escape from here */
}

.nav-link {
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .75rem .9rem;
  font-size: .88rem;
  font-weight: 500;
  color: var(--color-gray-700);
  white-space: nowrap;
  transition: color var(--transition);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.nav-link:hover,
.nav-link--active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}
.nav-link--bulk {
  color: var(--color-secondary);
  font-weight: 700;
}
.nav-link--bulk:hover { color: var(--color-secondary-dark); border-bottom-color: var(--color-secondary-dark); }

/* Chevron icon inside nav link */
.nav-chevron {
  width: .8rem !important;
  height: .8rem !important;
  transition: transform var(--transition);
}
.has-mega-menu:hover .nav-chevron { transform: rotate(180deg); }

/* ── MEGA MENU ───────────────────────────────────────── */
.mega-menu {
  /* Hidden by default — use visibility+opacity so mouse can travel into it */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  /* Fixed to viewport so it escapes any overflow clipping on ancestors */
  position: fixed;
  top: auto; /* overridden by JS below if needed; anchors via .has-mega-menu */
  left: 0;
  right: 0;
  background: var(--color-white);
  border-top: 2px solid var(--color-primary);
  border-bottom: 1px solid var(--color-gray-300);
  box-shadow: 0 12px 40px rgba(0,0,0,.12);
  z-index: 9999;
  transition: opacity .15s ease, visibility .15s ease;
}

/* Show when hovering the LI — covers both link AND dropdown */
.has-mega-menu:hover .mega-menu {
  visibility: visible;
  opacity: 1;
  pointer-events: all;
}

.mega-menu-inner {
  display: grid;
  /* auto-fit so it works with 1-5 columns depending on how many categories exist */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0;
  padding: 1.75rem 1.25rem;
  max-width: var(--container);
  margin: 0 auto;
}

/* Each column */
.mega-col {
  padding: 0 1.25rem;
  border-right: 1px solid var(--color-gray-200);
}
.mega-col:first-child { padding-left: 0; }
.mega-col:last-child  { border-right: none; padding-right: 0; }

.mega-col-title {
  font-size: .78rem;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: .75rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--color-gray-200);
}

.mega-col ul { list-style: none; margin: 0; padding: 0; }
.mega-col ul li { margin-bottom: .35rem; }

.mega-col ul li a {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .8rem;
  color: var(--color-gray-700);
  padding: .2rem 0;
  transition: color var(--transition);
  text-decoration: none;
}
.mega-col ul li a:hover { color: var(--color-primary); }

/* Chevron icon inside mega links */
.mega-col ul li a svg.lucide,
.mega-col ul li a [data-lucide] {
  width: .75rem;
  height: .75rem;
  flex-shrink: 0;
}

/* Badges — Popular / Recommended */
.mega-badge {
  display: inline-block;
  font-size: .6rem;
  font-weight: 700;
  padding: .15rem .45rem;
  border-radius: var(--radius-full);
  margin-left: .3rem;
  vertical-align: middle;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.mega-badge--popular     { background: #0d9488; color: #fff; }
.mega-badge--recommended { background: var(--color-secondary); color: #fff; }

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--color-dark);
  margin-left: auto;
  padding: .5rem;
}
.nav-toggle svg.lucide { width: 1.5rem; height: 1.5rem; }

/* ============================================================
   5b. QUICK CATEGORY STRIP
   ============================================================ */
.quick-cats {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray-200);
  padding: .75rem 0;
}

.quick-cats-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: .5rem;
}

.quick-cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: .75rem .5rem;
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-gray-700);
  font-size: .72rem;
  font-weight: 600;
  text-align: center;
  transition: all var(--transition);
  background: var(--color-white);
  line-height: 1.3;
}

.quick-cat-card:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: 0 4px 16px rgba(0, 174, 239, .1);
  transform: translateY(-2px);
}

.quick-cat-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quick-cat-icon svg {
  width: 52px;
  height: 52px;
}

/* Delivery card special styling */
.quick-cat-card--delivery .quick-cat-icon svg circle {
  fill: #fef3c7;
}

@media (max-width: 900px) {
  .quick-cats-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 560px) {
  .quick-cats-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   6. HERO / BANNER SLIDER
   ============================================================ */
.hero-section {
  background: linear-gradient(135deg, #f3e8ff 0%, #ede9fe 50%, #fef3c7 100%);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  padding: 1.5rem 0;
}
.hero-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 220px;
  display: flex;
  align-items: flex-end;
  padding: 1.5rem;
  color: var(--color-white);
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition);
}
.hero-card:hover { transform: translateY(-3px); }

.hero-card--business {
  background: linear-gradient(135deg, #18181b 60%, #6b21a8);
}
.hero-card--apparel {
  background: linear-gradient(135deg, #18181b 60%, #f47920);
}

.hero-card-content { position: relative; z-index: 2; }
.hero-card-content h2 { font-size: 1.5rem; margin-bottom: .4rem; color: var(--color-white); }
.hero-card-content p { font-size: .85rem; opacity: .85; margin-bottom: .75rem; }

/* AI gift creator banner */
.ai-banner {
  background: linear-gradient(90deg, #18181b 0%, #2d0a5e 100%);
  color: var(--color-white);
  padding: 2rem 0;
  margin: 1rem 0;
}
.ai-banner .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}
.ai-banner-text .badge {
  background: var(--color-secondary);
  color: var(--color-white);
  font-size: .7rem;
  font-weight: 700;
  padding: .25rem .6rem;
  border-radius: var(--radius-full);
  display: inline-block;
  margin-bottom: .75rem;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.ai-banner-text h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  color: var(--color-white);
  margin-bottom: .5rem;
  line-height: 1.15;
}
.ai-banner-text h2 em {
  font-style: normal;
  color: var(--color-accent);
}
.ai-banner-text p { opacity: .8; margin-bottom: 1rem; }
.ai-banner-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-height: 240px;
}
.ai-banner-image img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}

/* ============================================================
   7. SECTION HEADINGS
   ============================================================ */
.section-header {
  text-align: center;
  margin-bottom: 2rem;
}
.section-header h2 {
  margin-bottom: .4rem;
}
.section-header p {
  color: var(--color-gray-500);
  font-size: .95rem;
  max-width: 540px;
  margin: 0 auto;
}
.section-divider {
  width: 60px;
  height: 4px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  margin: .6rem auto 0;
}

/* ============================================================
   8. CATEGORY GRID — Shop By Business Needs
   ============================================================ */
.section-header--business-needs {
  position: relative;
  text-align: center;
  margin-bottom: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.section-header--business-needs::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--color-gray-300);
  z-index: 1;
}
.section-header--business-needs h2 {
  position: relative;
  z-index: 2;
  background: var(--color-white);
  padding: 0 1.5rem;
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-gray-900);
}
.category-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.75rem 1.25rem;
}
.category-card {
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  display: block;
}
.category-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: .75rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.category-card:hover img {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.category-card p {
  font-size: .88rem;
  font-weight: 600;
  color: var(--color-gray-900);
  margin: 0;
  line-height: 1.35;
  transition: color 0.3s ease;
}
.category-card:hover p {
  color: var(--color-primary);
}

/* Popular categories pills */
.section-header--popular-categories {
  position: relative;
  text-align: center;
  margin-bottom: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.section-header--popular-categories::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--color-gray-300);
  z-index: 1;
}
.section-header--popular-categories h2 {
  position: relative;
  z-index: 2;
  background: var(--color-gray-100);
  padding: 0 1.5rem;
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-gray-900);
}
.popular-categories {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5rem;
}
.pop-cat-item {
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  display: block;
}
.pop-cat-item img {
  width: 100%;
  aspect-ratio: 1.3 / 1;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: .75rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pop-cat-item:hover img {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.pop-cat-item span {
  font-size: .88rem;
  font-weight: 600;
  color: var(--color-gray-900);
  display: block;
  text-align: center;
  line-height: 1.35;
  transition: color 0.3s ease;
}
.pop-cat-item:hover span {
  color: var(--color-primary);
}

/* ============================================================
   9. PRODUCT CARDS
   ============================================================ */
.product-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}

.product-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1.5px solid var(--color-gray-200);
  transition: var(--transition);
  position: relative;
  display: flex;
  flex-direction: column;
}
.product-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.product-card-badge {
  position: absolute;
  top: .5rem;
  left: .5rem;
  background: var(--color-secondary);
  color: var(--color-white);
  font-size: .65rem;
  font-weight: 700;
  padding: .2rem .5rem;
  border-radius: var(--radius-full);
  z-index: 1;
}

.product-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}
.product-card-body {
  padding: .6rem .75rem .75rem;
  display: flex;
  flex-direction: column;
  flex: 1; /* fill remaining card height */
}
.product-card-body .btn-sm {
  margin-top: auto; /* push button to bottom */
}
.product-card-body h4 {
  font-size: .8rem;
  font-weight: 600;
  margin-bottom: .3rem;
  color: var(--color-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-card-price {
  font-size: .78rem;
  color: var(--color-gray-500);
  margin: .4rem 0 0;
}
.product-card-price strong {
  color: var(--color-primary);
  font-size: .85rem;
  margin-right: .3rem;
}

/* WooCommerce dynamic price HTML styling */
.product-card-price .price {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}
.product-card-price .price ins {
  text-decoration: none;
  color: var(--color-primary);
  font-weight: 700;
  font-size: .88rem;
}
.product-card-price .price del {
  color: var(--color-gray-400);
  font-size: .78rem;
  font-weight: 400;
}
.product-card-price .price .woocommerce-Price-amount {
  font-weight: 600;
}
/* Single price (no sale) */
.product-card-price .price > .woocommerce-Price-amount {
  color: var(--color-primary);
  font-weight: 700;
  font-size: .88rem;
}

/* ============================================================
   10. BEST SELLERS (wider grid with labels)
   ============================================================ */
.best-sellers-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.25rem;
  margin-bottom: 2rem;
}

/* Second row is same grid */

/* ============================================================
   11. NEW LAUNCHES
   ============================================================ */
/* Reuses .product-grid */

/* ============================================================
   12. TESTIMONIALS CAROUSEL
   ============================================================ */
/* Outer row: arrow | clipped track | arrow */
/* ── Testimonial Carousel ────────────────────────────── */
.testimonial-outer {
  position: relative;
  padding: 0 52px; /* space for arrows on both sides */
}

.testimonial-carousel {
  overflow: hidden;
  width: 100%;
}

.testimonial-track {
  display: flex;
  gap: 20px;
  transition: transform .45s cubic-bezier(.25,.46,.45,.94);
  will-change: transform;
}

/* Card — JS sets explicit px width */
.testimonial-card {
  flex-shrink: 0;
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
  gap: .75rem;
  transition: box-shadow .25s, transform .25s, border-color .25s;
  box-sizing: border-box;
}
.testimonial-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 8px 28px rgba(0, 174, 239, .13);
  transform: translateY(-4px);
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.author-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.05rem;
  flex-shrink: 0;
  font-family: 'Poppins', sans-serif;
}
.author-info h4 {
  font-size: .9rem;
  font-weight: 700;
  margin: 0 0 .1rem;
  color: #111827;
}
.author-info span {
  font-size: .75rem;
  color: #6b7280;
}

.testimonial-text {
  font-size: .85rem;
  color: #374151;
  line-height: 1.7;
  flex: 1;
  margin: 0;
}

.star-rating {
  color: #f59e0b;
  font-size: 1rem;
  letter-spacing: 3px;
  margin-top: auto;
}

/* Arrows — absolutely positioned over the outer padding */
.testimonial-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-primary);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 174, 239, .35);
  transition: background .2s, box-shadow .2s, transform .2s;
  z-index: 10;
}
.testimonial-btn:hover {
  background: var(--color-primary-dark);
  box-shadow: 0 6px 20px rgba(0, 174, 239, .45);
  transform: translateY(-50%) scale(1.08);
}
.testimonial-btn svg { width: 18px; height: 18px; }
.testimonial-btn--prev { left: 0; }
.testimonial-btn--next { right: 0; }

/* Dots */
.testimonial-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 1.5rem;
}
.testimonial-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #d1d5db;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: width .25s, background .25s;
}
.testimonial-dot.active {
  background: var(--color-primary);
  width: 28px;
}

/* ============================================================
   13. TRUST BADGES
   ============================================================ */
.trust-badges {
  background: var(--color-white);
  border-top: 1px solid var(--color-gray-200);
  border-bottom: 1px solid var(--color-gray-200);
  padding: 2.5rem 0;
  /* no overflow:hidden — it clips the reveal animation */
}
.trust-badges-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  text-align: center;
}

/* Badge card styling */
.trust-badge-item {
  background: #fff;
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: 2rem 1.25rem;
  text-align: center;
  transition: opacity .55s ease, transform .55s ease, box-shadow .25s, border-color .25s;
}
.trust-badge-item:hover {
  border-color: var(--color-primary);
  box-shadow: 0 8px 28px rgba(0, 174, 239, .10);
}
.trust-badge-item .badge-text { flex: 1; }

/* JS adds .will-animate on load, then .revealed to trigger animation */
.trust-badge-item.will-animate {
  opacity: 0;
  transform: translateY(28px);
}
.trust-badge-item.will-animate:nth-child(1) { transition-delay: .05s; }
.trust-badge-item.will-animate:nth-child(2) { transition-delay: .15s; }
.trust-badge-item.will-animate:nth-child(3) { transition-delay: .25s; }
.trust-badge-item.will-animate:nth-child(4) { transition-delay: .35s; }

.trust-badge-item.will-animate.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Icon wrapper */
.trust-badge-item .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto .85rem;
  border-radius: var(--radius-full);
  background: #f3e8ff;
  transition: background var(--transition), transform var(--transition);
  position: relative;
}

/* Ripple ring on hover */
.trust-badge-item .icon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-primary);
  opacity: 0;
  transform: scale(1);
  transition: opacity .3s, transform .3s;
}
.trust-badge-item:hover .icon::after {
  opacity: 1;
  transform: scale(1.35);
}
.trust-badge-item:hover .icon {
  background: var(--color-primary);
}
.trust-badge-item:hover .icon svg.lucide,
.trust-badge-item:hover .icon [data-lucide] {
  stroke: #fff;
}

/* Icon bounce keyframe — triggered by JS on hover */
@keyframes icon-bounce {
  0%,100% { transform: translateY(0) scale(1); }
  30%      { transform: translateY(-8px) scale(1.1); }
  60%      { transform: translateY(-3px) scale(1.05); }
}
.icon-bounce { animation: icon-bounce .55s ease forwards; }

.trust-badge-item h4 {
  font-size: .92rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: .3rem;
}
.trust-badge-item p { font-size: .78rem; color: var(--color-gray-500); margin: 0; }

/* Dividers between items */
.trust-badges-grid .trust-badge-item + .trust-badge-item {
  border-left: 1px solid var(--color-gray-200);
}

/* ============================================================
   14. CORPORATE BANNER
   ============================================================ */
.corporate-banner {
  background: linear-gradient(90deg, #f3e8ff 0%, #ede9fe 100%);
  padding: 2rem 0;
  margin: 2rem 0;
  border-radius: var(--radius-lg);
}
.corporate-banner .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.corporate-banner-text h3 {
  font-size: 1.1rem;
  margin-bottom: .3rem;
}
.corporate-banner-text p { font-size: .85rem; color: var(--color-gray-700); margin: 0; }

/* ── Get in Touch animated button ── */
.btn-get-in-touch {
  position: relative;
  overflow: hidden;
  background: var(--color-primary);
  box-shadow: 0 0 0 0 rgba(0, 174, 239, .5);
  animation: git-pulse 2.2s ease-in-out infinite;
  gap: .5rem;
  padding: .75rem 1.75rem;
  font-size: .95rem;
}
.btn-get-in-touch::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: git-shimmer 2.4s ease-in-out infinite;
}
.btn-get-in-touch .btn-arrow {
  width: .95rem;
  height: .95rem;
  transition: transform .3s ease;
  flex-shrink: 0;
}
.btn-get-in-touch:hover .btn-arrow {
  transform: translateX(5px);
}
.btn-get-in-touch:hover {
  background: var(--color-primary-dark);
  box-shadow: 0 6px 24px rgba(0, 174, 239, .45);
  animation: none;
}

@keyframes git-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(0, 174, 239, .45); }
  50%      { box-shadow: 0 0 0 10px rgba(0, 174, 239, 0); }
}
@keyframes git-shimmer {
  0%   { transform: translateX(-100%); }
  60%,100% { transform: translateX(200%); }
}
.partners-logos {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.partner-logo {
  font-size: .7rem;
  font-weight: 800;
  color: var(--color-gray-700);
  background: var(--color-white);
  padding: .4rem .8rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  letter-spacing: .5px;
}

.promo-banner {
  background: linear-gradient(270deg, #6b21a8, #f47920, #ffd400, #6b21a8);
  background-size: 300% 300%;
  animation: promo-gradient 4s ease infinite, promo-pulse 2.5s ease-in-out infinite;
  color: var(--color-white);
  text-align: center;
  padding: .9rem;
  font-size: .9rem;
  font-weight: 600;
  margin: 1.5rem 0;
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
  letter-spacing: .2px;
}

/* Animated shimmer sweep */
.promo-banner::after {
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%);
  animation: promo-shimmer 2.8s ease-in-out infinite;
}

@keyframes promo-gradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes promo-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 174, 239, .4); }
  50%       { box-shadow: 0 0 0 6px rgba(0, 174, 239, 0); }
}

@keyframes promo-shimmer {
  0%   { left: -75%; }
  100% { left: 125%; }
}

.promo-banner strong {
  color: var(--color-accent);
  font-weight: 800;
  font-size: 1rem;
  animation: promo-highlight 1.5s ease-in-out infinite alternate;
}

@keyframes promo-highlight {
  from { text-shadow: 0 0 0px #fff200; }
  to   { text-shadow: 0 0 10px #fff200, 0 0 20px rgba(255,242,0, .4); }
}

/* ============================================================
   15. BLOG SECTION
   ============================================================ */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* ── Blog card ────────────────────────────────────────────── */
.blog-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  transition: box-shadow var(--transition), transform var(--transition);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
}
.blog-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

/* Thumbnail link wrapper */
.blog-card-thumb {
  display: block;
  overflow: hidden;
  aspect-ratio: 16/9;
  background: var(--color-gray-100);
  text-decoration: none;
  flex-shrink: 0;
}
.blog-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.blog-card:hover .blog-card-thumb img { transform: scale(1.06); }

/* Placeholder when no image */
.blog-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: linear-gradient(135deg, var(--color-gray-200) 0%, var(--color-primary-light) 100%);
  color: var(--color-primary);
}
.blog-card:hover .blog-card-placeholder {
  background: linear-gradient(135deg, var(--color-primary-light) 0%, #cceeff 100%);
}
.blog-card-placeholder span {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
  opacity: .75;
}

/* Card body */
.blog-card-body {
  padding: 1.1rem 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Meta row: category pill + date */
.blog-card-meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .6rem;
  flex-wrap: wrap;
}
.blog-card-cat {
  display: inline-block;
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .2rem .65rem;
  border-radius: var(--radius-full);
  text-decoration: none;
  border: 1px solid rgba(107,33,168,.2);
  transition: background var(--transition), color var(--transition);
}
.blog-card-cat:hover { background: var(--color-primary); color: #fff; }
.blog-card-date {
  font-size: .72rem;
  color: var(--color-gray-500);
}

/* Title */
.blog-card-body h4 {
  font-family: var(--font-heading);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: .45rem;
  color: var(--color-dark);
}
.blog-card-body h4 a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}
.blog-card-body h4 a:hover { color: var(--color-primary); }

/* Excerpt */
.blog-card-body p {
  font-size: .82rem;
  color: var(--color-gray-500);
  line-height: 1.6;
  margin: 0 0 .75rem;
  flex: 1;
}

/* Read more */
.blog-card-body .read-more {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  margin-top: auto;
  font-size: .78rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  transition: gap var(--transition), color var(--transition);
}
.blog-card-body .read-more:hover {
  color: var(--color-primary-dark);
  gap: .45rem;
}

/* ============================================================
   16. FAQ SECTION
   ============================================================ */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.faq-item {
  background: var(--color-white);
  border: 1.5px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.faq-question {
  width: 100%;
  text-align: left;
  padding: .9rem 1rem;
  background: none;
  border: none;
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-dark);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.faq-question:after {
  content: '+';
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--color-primary);
  flex-shrink: 0;
}
.faq-question.open:after { content: '−'; }
.faq-answer {
  padding: 0 1rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease, padding .3s ease;
  font-size: .82rem;
  color: var(--color-gray-700);
}
.faq-answer.open {
  max-height: 200px;
  padding: .5rem 1rem .9rem;
}

/* ============================================================
   17. FOOTER
   ============================================================ */
#site-footer {
  background: var(--color-dark);
  color: #d1d5db;
  padding: 3rem 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-brand .site-logo { color: #fff; font-size: 1.4rem; margin-bottom: .75rem; }
.footer-brand p { font-size: .82rem; line-height: 1.6; margin-bottom: 1rem; }
.footer-social { display: flex; gap: .6rem; }
.footer-social a {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  transition: var(--transition);
  color: #d1d5db;
}
/* ── App Banner Card ──────────────────────────────────── */
.app-banner-card {
  background: linear-gradient(135deg, #1a1a2e, #2d1b69);
  border-radius: var(--radius-lg);
  padding: 2rem;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
}
.app-banner-text { flex: 1; }
.app-banner-text h3 {
  color: #fff;
  font-size: 1.3rem;
  margin-bottom: .75rem;
}
.app-banner-text p {
  opacity: .8;
  font-size: .88rem;
  line-height: 1.6;
}
.app-banner-btns {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}
.app-store-btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: .55rem 1rem;
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--transition);
}
.app-store-btn:hover { background: rgba(255,255,255,.22); color: #fff; }
.app-store-btn i { width: 18px; height: 18px; flex-shrink: 0; }
.app-store-btn span { display: flex; flex-direction: column; line-height: 1.2; }
.app-store-btn small { font-size: .65rem; font-weight: 400; opacity: .75; }

.footer-social a:hover { background: var(--color-primary); color: #fff; }

.footer-col h5 {
  font-size: .88rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1rem;
  letter-spacing: .3px;
}
.footer-col ul li { margin-bottom: .5rem; }
.footer-col ul li a { font-size: .8rem; color: #9ca3af; transition: color var(--transition); }
.footer-col ul li a:hover { color: var(--color-white); }

.footer-bottom {
  padding: 1.25rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-bottom p { font-size: .78rem; color: #6b7280; margin: 0; }
.payment-methods { display: flex; align-items: center; gap: .5rem; }
.payment-methods img { height: 24px; border-radius: 3px; }
/* ── Stores & App Grid ── */
.stores-app-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: stretch;
}

.payment-logo-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: transform var(--transition);
}
.payment-logo-wrapper:hover {
  transform: translateY(-2px);
}

/* ── Admin hint (shown when no WC data exists yet) ───── */
.printo-admin-hint {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: #f5f0ff;
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  max-width: 520px;
  margin: 0 auto;
  color: var(--color-gray-700);
}
.printo-admin-hint svg { flex-shrink: 0; color: var(--color-primary); margin-top: 2px; }
.printo-admin-hint strong { display: block; font-weight: 700; color: #111827; margin-bottom: .35rem; }
.printo-admin-hint p { font-size: .85rem; margin: 0; line-height: 1.6; }

/* ── Nav "More" overflow dropdown ────────────────────── */
.nav-more { position: relative; }

.nav-more-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #fff;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  min-width: 200px;
  padding: .5rem 0;
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .18s, transform .18s, visibility .18s;
  list-style: none;
  margin: 0;
}
.nav-more.open .nav-more-dropdown {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
.nav-more-dropdown li a {
  display: block;
  padding: .55rem 1.1rem;
  font-size: .85rem;
  font-weight: 500;
  color: var(--color-gray-700);
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.nav-more-dropdown li a:hover {
  background: var(--color-primary-light, #f5f0ff);
  color: var(--color-primary);
}
.nav-more-toggle { white-space: nowrap; }

/* ============================================================
   18. RESPONSIVE
   ============================================================ */

/* ── 1100px ─────────────────────────────────────────── */
@media (max-width: 1100px) {
  .product-grid,
  .best-sellers-grid { grid-template-columns: repeat(4, 1fr); }
  .category-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ── 1024px — tablet landscape ──────────────────────── */
@media (max-width: 1024px) {
  /* Trust badges: 2×2 grid with bigger cards */
  .trust-badges { padding: 2.5rem 0; }
  .trust-badges-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
  .trust-badge-item {
    padding: 2rem 1.5rem;
    display: flex;
    align-items: center;
    text-align: left;
    gap: 1.25rem;
  }
  .trust-badge-item .icon {
    margin: 0;
    flex-shrink: 0;
    width: 58px;
    height: 58px;
  }
  .trust-badge-item .badge-text { flex: 1; }
  .trust-badge-item h4 { margin-bottom: .3rem; }

  /* Carousel: show 2 cards at 1024px */
  .product-grid,
  .best-sellers-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── 900px ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .ai-banner .container { grid-template-columns: 1fr; }
  .ai-banner-image { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .product-grid,
  .best-sellers-grid { grid-template-columns: repeat(3, 1fr); }
  .trust-badges-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-badge-item {
    flex-direction: column;
    text-align: center;
    gap: 0;
  }
  .trust-badge-item .icon { margin: 0 auto .85rem; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .faq-grid { grid-template-columns: 1fr; }
  .category-grid { grid-template-columns: repeat(4, 1fr); }

  /* Header adjustments to prevent overflow */
  .header-action-item .label {
    display: none;
  }
  .header-actions {
    gap: 1.25rem;
  }
  .header-main .container {
    gap: 1rem;
  }
  .header-search {
    min-width: 0;
  }
  .stores-app-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* ── 640px ───────────────────────────────────────────── */
@media (max-width: 640px) {
  .header-topbar {
    display: none;
  }

  .header-main .container {
    flex-wrap: wrap;
    row-gap: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .site-logo {
    order: 1;
  }

  .header-actions {
    order: 2;
    margin-left: auto;
    gap: 0.85rem;
  }

  .nav-toggle {
    display: block;
    order: 3;
    margin-left: 0.25rem;
  }

  .header-search {
    order: 4;
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Mobile Navigation Drawer */
  .header-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    border-bottom: 2px solid var(--color-primary);
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    z-index: 1000;
  }

  .header-nav.open {
    display: block;
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .nav-item {
    width: 100%;
  }

  .nav-link {
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--color-gray-200);
    font-size: 0.9rem;
  }

  .nav-link:hover,
  .nav-link--active {
    border-bottom-color: var(--color-gray-200);
    background: var(--color-gray-100);
  }

  /* Mobile Mega Menu Accordion style */
  .mega-menu {
    display: none;
    position: static;
    visibility: visible;
    opacity: 1;
    pointer-events: all;
    border: none;
    box-shadow: none;
    background: var(--color-gray-100);
    transform: none;
    transition: none;
  }

  .has-mega-menu.active .mega-menu {
    display: block;
  }

  .has-mega-menu.active .nav-chevron {
    transform: rotate(180deg);
  }

  .mega-menu-inner {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 1.25rem 1.25rem;
    gap: 1.25rem;
  }

  .mega-col {
    padding: 0;
    border: none;
  }

  .mega-col-title {
    margin-top: 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--color-gray-300);
  }

  .trust-badges-grid { grid-template-columns: 1fr 1fr; }
  .trust-badge-item { padding: 1.25rem 1rem; }
}

/* ============================================================
   19. SINGLE POST / BLOG DETAIL
   ============================================================ */

/* ── Hero ─────────────────────────────────────────────────── */
.sp-hero {
  position: relative;
  background: linear-gradient(135deg, var(--color-dark) 0%, #0d1f2d 100%);
  padding: 3.5rem 0 3rem;
  overflow: hidden;
}

.sp-hero--has-img {
  padding: 5rem 0 4rem;
  min-height: 480px;
  display: flex;
  align-items: flex-end;
}

.sp-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.sp-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sp-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.35) 0%,
    rgba(0,0,0,.72) 100%
  );
}

.sp-hero__content {
  position: relative;
  z-index: 1;
  max-width: 860px;
}

/* Breadcrumb */
.sp-breadcrumb {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.sp-breadcrumb a {
  color: rgba(255,255,255,.7);
  text-decoration: none;
  transition: color var(--transition);
}

.sp-breadcrumb a:hover { color: var(--color-primary); }

.sp-breadcrumb__sep { color: rgba(255,255,255,.4); }

/* Category pill */
.sp-cat-pill {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .25rem .75rem;
  border-radius: var(--radius-full);
  text-decoration: none;
  margin-bottom: .9rem;
}

.sp-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  margin-bottom: 1.25rem;
  max-width: 800px;
}

/* Meta row */
.sp-meta {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  font-size: .85rem;
  color: rgba(255,255,255,.8);
}

.sp-meta__author {
  display: flex;
  align-items: center;
  gap: .45rem;
}

.sp-meta__avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50%;
  border: 2px solid var(--color-primary);
  object-fit: cover;
}

.sp-meta__sep { opacity: .4; }

/* ── Page layout ──────────────────────────────────────────── */
.sp-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2.5rem;
  padding-top: 2.5rem;
  padding-bottom: 4rem;
  align-items: start;
}

/* ── Floating share bar (desktop) ─────────────────────────── */
.sp-content {
  position: relative;
  min-width: 0;
}

.sp-share-bar {
  position: absolute;
  left: -72px;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}

.sp-share-bar__label {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-gray-500);
  writing-mode: vertical-rl;
  margin-bottom: .25rem;
}

.sp-share-bar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition);
  color: #fff;
  font-size: .8rem;
  gap: .4rem;
}

.sp-share-bar__btn:hover { transform: scale(1.12); box-shadow: var(--shadow-md); }

.sp-share-bar__btn--fb  { background: #1877f2; }
.sp-share-bar__btn--tw  { background: #000; }
.sp-share-bar__btn--wa  { background: #25d366; }
.sp-share-bar__btn--copy { background: var(--color-primary); }
.sp-share-bar__btn--copy.copied { background: #22c55e; }

/* ── Article body ─────────────────────────────────────────── */
.sp-article {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-gray-200);
}

.sp-article__body {
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--color-gray-700);
}

.sp-article__body h2,
.sp-article__body h3,
.sp-article__body h4 {
  font-family: var(--font-heading);
  color: var(--color-dark);
  margin-top: 2rem;
  margin-bottom: .75rem;
}

.sp-article__body h2 { font-size: 1.5rem; }
.sp-article__body h3 { font-size: 1.2rem; }

.sp-article__body p { margin-bottom: 1.25rem; }

.sp-article__body a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: rgba(107,33,168,.35);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--transition);
}

.sp-article__body a:hover { text-decoration-color: var(--color-primary); }

.sp-article__body ul,
.sp-article__body ol {
  padding-left: 1.5rem;
  margin-bottom: 1.25rem;
}

.sp-article__body li { margin-bottom: .4rem; }

.sp-article__body blockquote {
  border-left: 4px solid var(--color-primary);
  background: var(--color-primary-light);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: var(--color-primary-dark);
}

.sp-article__body img {
  max-width: 100%;
  border-radius: var(--radius-md);
  margin: 1.5rem 0;
  display: block;
}

.sp-article__body pre,
.sp-article__body code {
  background: var(--color-gray-100);
  border-radius: var(--radius-sm);
  font-size: .9em;
}

.sp-article__body pre {
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
  margin: 1.5rem 0;
}

.sp-article__body code { padding: .15em .4em; }

/* ── Tags ─────────────────────────────────────────────────── */
.sp-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-gray-200);
}

.sp-tags__label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.sp-tag {
  display: inline-block;
  padding: .3rem .75rem;
  background: var(--color-gray-100);
  color: var(--color-gray-700);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-full);
  font-size: .78rem;
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.sp-tag:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

/* ── Mobile share ─────────────────────────────────────────── */
.sp-share-mobile {
  display: none;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-gray-200);
  gap: .75rem;
  flex-direction: column;
}

.sp-share-mobile span {
  font-weight: 600;
  font-size: .85rem;
  color: var(--color-gray-500);
}

.sp-share-mobile__btns {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}

.sp-share-mobile .sp-share-bar__btn {
  width: auto;
  height: auto;
  border-radius: var(--radius-full);
  padding: .4rem .9rem;
  font-size: .78rem;
  border-radius: var(--radius-full);
}

/* ── Author card ──────────────────────────────────────────── */
.sp-author-card {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  background: linear-gradient(135deg, var(--color-primary-light) 0%, #fff 100%);
  border: 1px solid rgba(107,33,168,.2);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  margin-top: 1.75rem;
}

.sp-author-card__img {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  border: 3px solid var(--color-primary) !important;
  object-fit: cover;
  flex-shrink: 0;
}

.sp-author-card__byline {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: .2rem;
}

.sp-author-card__name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: .4rem;
}

.sp-author-card__bio {
  font-size: .88rem;
  color: var(--color-gray-500);
  line-height: 1.6;
  margin: 0;
}

/* ── Related posts ────────────────────────────────────────── */
.sp-related { margin-top: 2.5rem; }

.sp-related__heading {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}

.sp-related__heading::after {
  content: '';
  flex: 1;
  height: 2px;
  background: linear-gradient(to right, var(--color-primary), transparent);
  border-radius: 2px;
}

.sp-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.sp-related__card {
  background: #fff;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition), transform var(--transition);
}

.sp-related__card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.sp-related__thumb {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--color-gray-200);
}

.sp-related__thumb--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-500);
}

.sp-related__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.sp-related__card:hover .sp-related__img { transform: scale(1.06); }

.sp-related__meta {
  padding: .75rem .9rem 0;
  font-size: .72rem;
  color: var(--color-primary);
  font-weight: 600;
}

.sp-related__title {
  font-size: .9rem;
  font-weight: 600;
  color: var(--color-dark);
  padding: .4rem .9rem .9rem;
  line-height: 1.4;
}

/* ── Comments ─────────────────────────────────────────────── */
.sp-comments {
  margin-top: 2.5rem;
  background: #fff;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: 2rem 2.5rem;
}

.sp-comments .comments-title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 1.5rem;
  padding-bottom: .75rem;
  border-bottom: 2px solid var(--color-gray-200);
}

.sp-comments .comment-list { list-style: none; padding: 0; }

.sp-comments .comment-body {
  background: var(--color-gray-100);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.sp-comments .comment-author { font-weight: 700; color: var(--color-dark); }

.sp-comments .comment-metadata {
  font-size: .78rem;
  color: var(--color-gray-500);
  margin-bottom: .75rem;
}

.sp-comments .comment-metadata a { color: inherit; text-decoration: none; }

.sp-comments .comment-content p { font-size: .92rem; color: var(--color-gray-700); line-height: 1.65; margin: 0; }

.sp-comments .reply a {
  font-size: .78rem;
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  margin-top: .5rem;
  display: inline-block;
}

.sp-comments .comment-reply-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.sp-comments .comment-form label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--color-gray-700);
  margin-bottom: .35rem;
}

.sp-comments .comment-form input[type="text"],
.sp-comments .comment-form input[type="email"],
.sp-comments .comment-form input[type="url"],
.sp-comments .comment-form textarea {
  width: 100%;
  border: 1.5px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  padding: .65rem 1rem;
  font-family: var(--font-primary);
  font-size: .9rem;
  color: var(--color-dark);
  transition: border-color var(--transition), box-shadow var(--transition);
  margin-bottom: 1rem;
  background: #fff;
}

.sp-comments .comment-form input:focus,
.sp-comments .comment-form textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(107,33,168,.12);
}

.sp-comments .comment-form textarea { min-height: 130px; resize: vertical; }

.sp-comments .submit {
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-full);
  padding: .7rem 2rem;
  font-family: var(--font-primary);
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}

.sp-comments .submit:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}

/* ── Sidebar ──────────────────────────────────────────────── */
.sp-sidebar { position: sticky; top: 100px; }

.sp-sidebar__cta {
  background: linear-gradient(135deg, var(--color-dark) 0%, #1a3a50 100%);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  text-align: center;
  margin-bottom: 1.5rem;
}

.sp-sidebar__cta-icon { font-size: 2.5rem; margin-bottom: .75rem; }

.sp-sidebar__cta h3 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .5rem;
}

.sp-sidebar__cta p { font-size: .85rem; color: rgba(255,255,255,.7); line-height: 1.5; }

.sp-sidebar__widget {
  background: #fff;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}

.sp-sidebar__widget-title {
  font-family: var(--font-heading);
  font-size: .95rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 1rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--color-primary);
  display: inline-block;
}

.sp-sidebar__recent { list-style: none; padding: 0; margin: 0; }

.sp-sidebar__recent-item {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .75rem 0;
  border-bottom: 1px solid var(--color-gray-200);
}

.sp-sidebar__recent-item:last-child { border-bottom: none; padding-bottom: 0; }

.sp-sidebar__recent-thumb {
  width: 60px;
  height: 50px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: block;
}

.sp-sidebar__recent-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sp-sidebar__recent-link {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-dark);
  text-decoration: none;
  line-height: 1.4;
  margin-bottom: .2rem;
  transition: color var(--transition);
}

.sp-sidebar__recent-link:hover { color: var(--color-primary); }

.sp-sidebar__recent-date { font-size: .72rem; color: var(--color-gray-500); }

.sp-sidebar__cats { list-style: none; padding: 0; margin: 0; }

.sp-sidebar__cats li { border-bottom: 1px solid var(--color-gray-200); }
.sp-sidebar__cats li:last-child { border-bottom: none; }

.sp-sidebar__cats a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .6rem 0;
  font-size: .88rem;
  color: var(--color-gray-700);
  text-decoration: none;
  transition: color var(--transition);
}

.sp-sidebar__cats a:hover { color: var(--color-primary); }

.sp-sidebar__cats a span {
  background: var(--color-gray-100);
  color: var(--color-gray-500);
  font-size: .72rem;
  font-weight: 700;
  padding: .15rem .5rem;
  border-radius: var(--radius-full);
}

/* ── Responsive: single post ──────────────────────────────── */
@media (max-width: 1100px) {
  .sp-share-bar { display: none; }
  .sp-share-mobile { display: flex; }
}

@media (max-width: 900px) {
  .sp-layout {
    grid-template-columns: 1fr;
  }
  .sp-sidebar { position: static; }
  .sp-related__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .sp-hero--has-img { min-height: 320px; }
  .sp-article { padding: 1.5rem; }
  .sp-comments { padding: 1.25rem 1.5rem; }
  .sp-related__grid { grid-template-columns: 1fr; }
}
/* ============================================================
   20. WOOCOMMERCE PAGE STYLES
   ============================================================ */

/* ── Page wrapper ─────────────────────────────────────────── */
.woo-page-wrap {
  padding: 2rem 0 4rem;
  background: var(--color-gray-100);
  min-height: 60vh;
}

/* Breadcrumb */
.woo-breadcrumb {
  font-size: .82rem;
  color: var(--color-gray-500);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .25rem;
}

.woo-breadcrumb a { color: var(--color-primary); text-decoration: none; }
.woo-breadcrumb a:hover { text-decoration: underline; }
.woo-breadcrumb__sep { color: var(--color-gray-300); }

/* Woo content wrapper */
.woo-content { }
.woo-main { }

/* ── Shop header (title + result count + ordering) ────────── */
.woocommerce-products-header__title,
.woocommerce .woocommerce-products-header h1 {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 1.25rem;
}

.woocommerce-result-count {
  font-size: .85rem;
  color: var(--color-gray-500);
  margin-bottom: 1rem;
}

.woocommerce-ordering select {
  border: 1.5px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  padding: .5rem .85rem;
  font-family: var(--font-primary);
  font-size: .85rem;
  color: var(--color-dark);
  background: #fff;
  cursor: pointer;
}

.woocommerce-ordering select:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* ── Product grid ─────────────────────────────────────────── */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
  list-style: none !important;
  padding: 0 !important;
  margin: 1.25rem 0 0 !important;
  float: none !important;
  clear: both;
}

.woocommerce ul.products li.product {
  background: #fff;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  float: none !important;
}

.woocommerce ul.products li.product:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

/* Product image */
.woocommerce ul.products li.product a img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}

.woocommerce ul.products li.product:hover a img {
  transform: scale(1.05);
}

/* Product image wrapper */
.woocommerce ul.products li.product .woocommerce-loop-product__link {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Product info */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-heading);
  font-size: .9rem;
  font-weight: 600;
  color: var(--color-dark);
  padding: .75rem 1rem .25rem;
  line-height: 1.35;
  margin: 0 !important;
}

.woocommerce ul.products li.product .price {
  display: block;
  padding: .15rem 1rem .75rem;
  font-size: .95rem;
  font-weight: 700;
  color: var(--color-primary);
}

.woocommerce ul.products li.product .price del {
  color: var(--color-gray-500);
  font-weight: 400;
  font-size: .82rem;
  text-decoration: line-through;
  margin-right: .3rem;
}

.woocommerce ul.products li.product .price ins {
  text-decoration: none;
  color: var(--color-secondary);
}

/* Sale badge */
.woocommerce ul.products li.product .onsale {
  background: var(--color-secondary);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  padding: .25rem .6rem;
  border-radius: var(--radius-full);
  position: absolute;
  top: .75rem;
  left: .75rem;
  z-index: 2;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.woocommerce ul.products li.product {
  position: relative;
}

/* Add to cart button */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
  display: block;
  width: calc(100% - 2rem);
  margin: 0 1rem 1rem;
  text-align: center;
  background: var(--color-primary);
  color: #fff !important;
  border: none;
  border-radius: var(--radius-full);
  padding: .55rem 1rem;
  font-family: var(--font-primary);
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), transform var(--transition);
  margin-top: auto;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}

/* Added to cart state */
.woocommerce ul.products li.product .added_to_cart {
  display: none;
}

/* ── Single product page ──────────────────────────────────── */
.woocommerce div.product {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-gray-200);
}

.woocommerce div.product .product_title {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: .5rem;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 1rem 0;
  display: block;
}

.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
  color: var(--color-gray-500);
  font-size: 1rem;
  font-weight: 400;
}

.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
  text-decoration: none;
  color: var(--color-secondary);
}

.woocommerce div.product .woocommerce-product-gallery {
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Add to cart form */
.woocommerce div.product form.cart .button {
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-full);
  padding: .75rem 2rem;
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}

.woocommerce div.product form.cart .button:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
}

/* Quantity input */
.woocommerce div.product form.cart .qty {
  border: 1.5px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  padding: .5rem .75rem;
  font-size: 1rem;
  width: 70px;
  text-align: center;
  margin-right: .75rem;
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  gap: .5rem;
  border-bottom: 2px solid var(--color-gray-200);
  padding: 0;
  list-style: none;
  margin-bottom: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: .6rem 1.25rem;
  color: var(--color-gray-500);
  text-decoration: none;
  font-weight: 600;
  font-size: .88rem;
  border-bottom: 3px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.woocommerce div.product .woocommerce-tabs .panel {
  background: var(--color-gray-100);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: 1.5rem;
  border: 1px solid var(--color-gray-200);
  border-top: none;
}

/* ── Cart & Checkout ──────────────────────────────────────── */
.woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-gray-200);
}

.woocommerce table.shop_table th {
  background: var(--color-gray-100);
  color: var(--color-dark);
  font-weight: 700;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .85rem 1rem;
  border-bottom: 2px solid var(--color-gray-200);
  text-align: left;
}

.woocommerce table.shop_table td {
  padding: 1rem;
  border-bottom: 1px solid var(--color-gray-200);
  vertical-align: middle;
  font-size: .9rem;
  color: var(--color-gray-700);
}

.woocommerce table.shop_table tr:last-child td { border-bottom: none; }

.woocommerce .cart-collaterals .cart_totals {
  background: #fff;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.woocommerce .cart-collaterals .cart_totals h2 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--color-dark);
}

/* Checkout / cart buttons */
.woocommerce .button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  background: var(--color-primary) !important;
  color: #fff !important;
  border-radius: var(--radius-full) !important;
  border: none !important;
  font-family: var(--font-primary) !important;
  font-weight: 700 !important;
  transition: background var(--transition) !important;
}

.woocommerce .button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
  background: var(--color-primary-dark) !important;
}

/* ── Notices ──────────────────────────────────────────────── */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-radius: var(--radius-md);
  font-size: .9rem;
  padding: .85rem 1.25rem;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}

.woocommerce-message { background: #ecfdf5; border-left: 4px solid #22c55e; color: #166534; }
.woocommerce-info    { background: var(--color-primary-light); border-left: 4px solid var(--color-primary); color: var(--color-primary-dark); }
.woocommerce-error   { background: #fef2f2; border-left: 4px solid #ef4444; color: #991b1b; }

/* ── Pagination ───────────────────────────────────────────── */
.woocommerce nav.woocommerce-pagination ul {
  display: flex;
  gap: .4rem;
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  justify-content: center;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-gray-300);
  color: var(--color-gray-700);
  text-decoration: none;
  font-size: .88rem;
  font-weight: 600;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* ── No products found ────────────────────────────────────── */
.woocommerce-info.woocommerce-no-products-found {
  margin-top: 2rem;
  font-size: 1rem;
  justify-content: flex-start;
}

/* ── Responsive woo ───────────────────────────────────────── */
@media (max-width: 768px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .woocommerce ul.products {
    grid-template-columns: 1fr;
  }
}

/* ── Comment submit — loading state ───────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.sp-comments .submit.btn--loading {
  position: relative;
  color: transparent !important;   /* hide text */
  pointer-events: none;
  opacity: .85;
  min-width: 140px;
}

.sp-comments .submit.btn--loading::after {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 3px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

/* ============================================================
   21. ARCHIVE / CATEGORY PAGE
   ============================================================ */

/* ── Hero banner ──────────────────────────────────────────── */
.archive-hero {
  background: linear-gradient(135deg, var(--color-dark) 0%, #0d2235 100%);
  padding: 4rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.archive-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(107,33,168,.15) 0%, transparent 65%);
  pointer-events: none;
}

.archive-hero__inner { position: relative; z-index: 1; }

.archive-hero__label {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .25rem .85rem;
  border-radius: var(--radius-full);
  margin-bottom: .85rem;
}

.archive-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: .5rem;
}

.archive-hero__desc {
  color: rgba(255,255,255,.65);
  font-size: .95rem;
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ── Grid wrap ────────────────────────────────────────────── */
.archive-wrap {
  padding-top: 3rem;
  padding-bottom: 4rem;
}

/* ── Blog card thumbnail link ─────────────────────────────── */
.blog-card-thumb {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  aspect-ratio: 16/9;
  background: var(--color-gray-200);
  text-decoration: none;
}

.blog-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}

.blog-card:hover .blog-card-thumb img {
  transform: scale(1.05);
}

/* ── Placeholder (no featured image) ─────────────────────── */
.blog-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  background: linear-gradient(135deg, var(--color-gray-200) 0%, var(--color-primary-light) 100%);
  color: var(--color-primary);
  transition: background var(--transition);
}

.blog-card:hover .blog-card-placeholder {
  background: linear-gradient(135deg, var(--color-primary-light) 0%, #d0f0fc 100%);
}

.blog-card-placeholder span {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
  opacity: .75;
}
/* ── Blog grid responsive ─────────────────────────────────── */
@media (max-width: 767px) {
  .blog-grid { grid-template-columns: 1fr; }
  .archive-hero { padding: 2rem 0; }
  .archive-hero__title { font-size: 1.5rem; }
}
/* ============================================================
   22. HOMEPAGE BLOG SECTION
   ============================================================ */

.blog-hp-section { background: var(--color-gray-100); }

/* Header row */
.blog-hp-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}

.blog-hp-title {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  font-weight: 800;
  color: var(--color-dark);
  margin-bottom: .3rem;
}

.blog-hp-sub {
  font-size: .88rem;
  color: var(--color-gray-500);
  margin: 0;
}

/* "View all posts" — styled as a pill button */
.blog-hp-viewall {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: var(--color-primary);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  padding: .55rem 1.25rem;
  border-radius: 9999px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 2px 8px rgba(107,33,168,.3);
}
.blog-hp-viewall:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,168,225,.4);
}

/* ── Grid: 3 equal columns ────────────────────────────────── */
.blog-hp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  align-items: stretch; /* equal height */
}

/* ── Card ─────────────────────────────────────────────────── */
.blog-hp-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--color-gray-200);
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
  display: flex;
  flex-direction: column;
  height: 100%; /* fill grid row */
  transition: box-shadow .2s ease, transform .2s ease;
}
.blog-hp-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,.11);
  transform: translateY(-4px);
}

/* Thumbnail wrapper */
.blog-hp-card__thumb-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/10;
  background: var(--color-gray-200);
  flex-shrink: 0;
}
.blog-hp-card__thumb-link {
  display: block;
  width: 100%;
  height: 100%;
}
.blog-hp-card__thumb-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s ease;
}
.blog-hp-card:hover .blog-hp-card__thumb-link img { transform: scale(1.06); }

/* Placeholder */
.blog-hp-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: linear-gradient(135deg, #f3f4f6 0%, #f5f3ff 100%);
  color: var(--color-primary);
}
.blog-hp-card__placeholder span {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
  opacity: .7;
}

/* Category pill — overlaid on image */
.blog-hp-card__cat {
  position: absolute;
  top: .75rem;
  left: .75rem;
  background: var(--color-primary);
  color: #fff;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .22rem .7rem;
  border-radius: 9999px;
  text-decoration: none;
  z-index: 2;
  transition: background var(--transition);
}
.blog-hp-card__cat:hover { background: var(--color-primary-dark); }

/* Body — fills remaining height */
.blog-hp-card__body {
  padding: 1.1rem 1.2rem 1.3rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-hp-card__date {
  display: block;
  font-size: .7rem;
  color: var(--color-gray-500);
  margin-bottom: .45rem;
}

.blog-hp-card__title {
  font-family: var(--font-heading);
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-dark);
  margin-bottom: .5rem;
  /* clamp to 2 lines so all cards stay uniform */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-hp-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}
.blog-hp-card__title a:hover { color: var(--color-primary); }

.blog-hp-card__excerpt {
  font-size: .8rem;
  color: var(--color-gray-500);
  line-height: 1.6;
  margin-bottom: .9rem;
  flex: 1;
  /* clamp to 3 lines */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-hp-card__more {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  margin-top: auto;
  transition: gap var(--transition), color var(--transition);
}
.blog-hp-card__more:hover { color: var(--color-primary-dark); gap: .5rem; }

/* Responsive */
@media (max-width: 900px) {
  .blog-hp-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-hp-header { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 560px) {
  .blog-hp-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   23. SHOP PAGE
   ============================================================ */

/* ── Hero ─────────────────────────────────────────────────── */
.shop-hero {
  background: linear-gradient(135deg, #18181b 0%, #2d0a5e 100%);
  padding: 3.5rem 0;
  position: relative;
  overflow: hidden;
}
.shop-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 75% 50%, rgba(107,33,168,.2) 0%, transparent 55%),
              radial-gradient(ellipse at 20% 80%, rgba(244,121,32,.1) 0%, transparent 50%);
  pointer-events: none;
}
.shop-hero__inner {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
}
.shop-hero__label {
  display: inline-block;
  background: rgba(107,33,168,.15); border: 1px solid rgba(107,33,168,.35);
  color: #6b21a8; font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .25rem .9rem; border-radius: 9999px; margin-bottom: .7rem;
}
.shop-hero__title {
  font-family: var(--font-heading); font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800; color: #fff; margin-bottom: .5rem; line-height: 1.15;
}
.shop-hero__sub { color: rgba(255,255,255,.6); font-size: .9rem; max-width: 420px; line-height: 1.6; margin: 0; }
.shop-hero__stats { display: flex; gap: 2.5rem; flex-shrink: 0; }
.shop-hero__stat { text-align: center; }
.shop-hero__stat-num {
  display: block; font-family: var(--font-heading); font-size: 2rem;
  font-weight: 800; color: #6b21a8; line-height: 1; margin-bottom: .3rem;
}
.shop-hero__stat-lbl {
  font-size: .7rem; color: rgba(255,255,255,.5);
  text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
}

/* ── Two-column layout ────────────────────────────────────── */
.shop-page {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 1.75rem;
  padding-top: 2rem;
  padding-bottom: 4rem;
  align-items: start;
}

/* ── Sidebar ──────────────────────────────────────────────── */
.shop-sidebar {
  position: sticky; top: 90px;
  background: #fff;
  border: 1px solid var(--color-gray-200);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
}
.shop-sidebar__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.1rem;
  background: var(--color-gray-100);
  border-bottom: 1px solid var(--color-gray-200);
}
.shop-sidebar__title {
  font-size: .82rem; font-weight: 700; color: var(--color-dark);
  display: flex; align-items: center; gap: .45rem;
}
.shop-sidebar__clear {
  font-size: .72rem; font-weight: 600;
  color: var(--color-gray-500); text-decoration: none;
  transition: color var(--transition);
}
.shop-sidebar__clear:hover { color: var(--color-secondary); }

.shop-filter-block {
  border-bottom: 1px solid var(--color-gray-200);
  padding: .85rem 1.1rem .75rem;
}
.shop-filter-block:last-child { border-bottom: none; }
.shop-filter-block__title {
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--color-gray-500); margin-bottom: .55rem;
}
.shop-filter-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .1rem; }

.shop-filter-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: .42rem .55rem; border-radius: 8px;
  text-decoration: none; color: var(--color-gray-700); font-size: .82rem;
  transition: background var(--transition), color var(--transition);
}
.shop-filter-link:hover { background: var(--color-primary-light); color: var(--color-primary-dark); }
.shop-filter-link.is-active { background: var(--color-primary); color: #fff; font-weight: 600; }
.shop-filter-link.is-active .shop-filter-link__count { background: rgba(255,255,255,.25); color: #fff; }
.shop-filter-link__count {
  background: var(--color-gray-200); color: var(--color-gray-500);
  font-size: .62rem; font-weight: 700; padding: .1rem .45rem;
  border-radius: 9999px; min-width: 20px; text-align: center;
}

/* ── Main column ──────────────────────────────────────────── */
.shop-main { min-width: 0; }

/* ── Toolbar ──────────────────────────────────────────────── */
.shop-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; background: #fff;
  border: 1px solid var(--color-gray-200); border-radius: 10px;
  padding: .65rem 1rem; margin-bottom: 1.1rem; flex-wrap: wrap;
}
.shop-toolbar__left, .shop-toolbar__right { display: flex; align-items: center; gap: .65rem; }
.shop-toolbar__count p { margin: 0; font-size: .82rem; color: var(--color-gray-500); }
.shop-mob-filter-btn {
  display: none; align-items: center; gap: .4rem;
  background: var(--color-primary-light); color: var(--color-primary-dark);
  border: 1px solid rgba(107,33,168,.3); border-radius: 9999px;
  padding: .38rem .9rem; font-family: var(--font-primary);
  font-size: .78rem; font-weight: 700; cursor: pointer;
  transition: background var(--transition);
}
.shop-mob-filter-btn:hover { background: var(--color-primary); color: #fff; }
.shop-view-btns { display: flex; gap: .25rem; }
.shop-view-btn {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 6px;
  border: 1px solid var(--color-gray-300); background: #fff;
  color: var(--color-gray-500); cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.shop-view-btn.is-active, .shop-view-btn:hover {
  background: var(--color-primary); color: #fff; border-color: var(--color-primary);
}
.shop-toolbar .woocommerce-ordering { margin: 0; }
.shop-toolbar .woocommerce-ordering select {
  border: 1px solid var(--color-gray-300); border-radius: 9999px;
  padding: .38rem .85rem; font-size: .8rem;
  background: #fff; color: var(--color-dark); cursor: pointer; outline: none;
}

/* ── Active filter pills ──────────────────────────────────── */
.shop-active-pills { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.shop-active-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--color-primary-light); border: 1px solid rgba(107,33,168,.25);
  color: var(--color-primary-dark); font-size: .75rem; font-weight: 600;
  padding: .28rem .75rem; border-radius: 9999px;
}
.shop-active-pill a { color: var(--color-primary); text-decoration: none; font-weight: 800; font-size: .9rem; }
.shop-active-pill a:hover { color: var(--color-secondary); }

/* ── WooCommerce product grid ─────────────────────────────── */
/* Hide WC elements we replaced */
.shop-woo-output .woocommerce-breadcrumb,
.shop-woo-output .woocommerce-products-header,
.shop-woo-output h1.woocommerce-products-header__title,
.shop-woo-output .woocommerce-result-count,
.shop-woo-output .woocommerce-ordering { display: none !important; }

/* Grid */
.shop-woo-output .woocommerce ul.products,
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.1rem !important;
  list-style: none !important;
  padding: 0 !important; margin: 0 !important;
  float: none !important; clear: both;
  width: 100% !important;
}

/* Card */
.shop-woo-output .woocommerce ul.products li.product,
.woocommerce ul.products li.product {
  background: #fff !important;
  border: 1px solid var(--color-gray-200) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
  display: flex !important; flex-direction: column !important;
  transition: box-shadow .2s, transform .2s !important;
  padding: 0 !important; margin: 0 !important;
  width: auto !important; float: none !important;
  position: relative !important;
}
.woocommerce ul.products li.product:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,.11) !important;
  transform: translateY(-3px) !important;
}

/* Image */
.woocommerce ul.products li.product a img {
  width: 100% !important; height: 200px !important;
  object-fit: cover !important; display: block !important;
  transition: transform .4s ease !important;
}
.woocommerce ul.products li.product:hover a img { transform: scale(1.05) !important; }

/* Sale badge */
.woocommerce ul.products li.product .onsale {
  position: absolute !important; top: .6rem !important; left: .6rem !important;
  background: var(--color-secondary) !important; color: #fff !important;
  font-size: .62rem !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: .05em !important;
  padding: .2rem .6rem !important; border-radius: 9999px !important;
  z-index: 2 !important; margin: 0 !important;
}

/* Title */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-heading) !important;
  font-size: .88rem !important; font-weight: 600 !important;
  color: var(--color-dark) !important;
  padding: .75rem 1rem .2rem !important; margin: 0 !important; line-height: 1.35 !important;
}

/* Price */
.woocommerce ul.products li.product .price {
  display: block !important; padding: .1rem 1rem .6rem !important;
  font-size: .92rem !important; font-weight: 700 !important; color: var(--color-primary) !important;
}
.woocommerce ul.products li.product .price del {
  color: var(--color-gray-500) !important; font-weight: 400 !important;
  font-size: .78rem !important; margin-right: .2rem !important;
}
.woocommerce ul.products li.product .price ins { text-decoration: none !important; color: var(--color-secondary) !important; }

/* Button */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button {
  display: block !important;
  width: calc(100% - 2rem) !important; margin: auto 1rem 1rem !important;
  text-align: center !important; background: var(--color-primary) !important;
  color: #fff !important; border: none !important; border-radius: 9999px !important;
  padding: .5rem 1rem !important; font-family: var(--font-primary) !important;
  font-size: .8rem !important; font-weight: 700 !important;
  cursor: pointer !important; text-decoration: none !important;
  transition: background .2s, transform .2s !important;
}
.woocommerce ul.products li.product .button:hover { background: var(--color-primary-dark) !important; transform: translateY(-1px) !important; }

/* Pagination */
.woocommerce nav.woocommerce-pagination ul {
  display: flex !important; gap: .35rem !important;
  list-style: none !important; padding: 0 !important; justify-content: center !important;
  margin-top: 2rem !important;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: flex !important; align-items: center !important; justify-content: center !important;
  min-width: 36px !important; height: 36px !important;
  border-radius: 8px !important; border: 1px solid var(--color-gray-300) !important;
  color: var(--color-gray-700) !important; text-decoration: none !important;
  font-size: .85rem !important; font-weight: 600 !important;
  transition: background .2s, border-color .2s, color .2s !important;
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--color-primary-light) !important;
  border-color: var(--color-primary) !important; color: var(--color-primary) !important;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--color-primary) !important; border-color: var(--color-primary) !important; color: #fff !important;
}

/* List view */
.shop-woo-output.list-view .woocommerce ul.products { grid-template-columns: 1fr !important; }
.shop-woo-output.list-view .woocommerce ul.products li.product { flex-direction: row !important; max-height: 170px !important; }
.shop-woo-output.list-view .woocommerce ul.products li.product a img { width: 170px !important; height: 170px !important; flex-shrink: 0 !important; }

/* Overlay */
.shop-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.45); z-index: 998; backdrop-filter: blur(2px);
}
.shop-overlay.is-open { display: block; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .shop-page { grid-template-columns: 200px 1fr; }
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
  .shop-page { grid-template-columns: 1fr; }
  .shop-hero__stats { display: none; }
  .shop-hero { padding: 2rem 0; }
  .shop-sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; width: 270px;
    z-index: 999; border-radius: 0; overflow-y: auto;
    transform: translateX(-100%); transition: transform .3s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,.15);
  }
  .shop-sidebar.is-open { transform: translateX(0); }
  .shop-mob-filter-btn { display: inline-flex !important; }
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  .woocommerce ul.products { grid-template-columns: 1fr !important; }
}