/* =============================================
   PATIPET — ZIGGY PET E-COMMERCE DESIGN SYSTEM
   Deep Purple + Orange + Playful Roundness
   Pet E-Commerce & Services Platform
   Version: 3.0.0
   ============================================= */

/* -----------------------------------------------
   1. DESIGN TOKENS
   ----------------------------------------------- */
:root {
    /* Primary — Deep Purple */
    --primary: #6C3CE1;
    --primary-light: #8B5CF6;
    --primary-dark: #5B21B6;
    --primary-pale: #F3EEFF;
    --primary-rgb: 108, 60, 225;

    /* Secondary — Orange (prices, CTA) */
    --secondary: #F97316;
    --secondary-light: #FB923C;
    --secondary-dark: #EA580C;
    --secondary-pale: #FFF7ED;
    --secondary-rgb: 249, 115, 22;

    /* Accent — Sunny Amber (stars, ratings) */
    --accent: #FFD166;
    --accent-light: #FFDC8A;
    --accent-dark: #E6B84D;
    --accent-pale: #FFF8E7;
    --accent-rgb: 255, 209, 102;

    /* Tertiary — Lavender */
    --lavender: #A78BFA;
    --lavender-light: #C4B5FD;
    --lavender-pale: #F5F3FF;

    /* Surfaces */
    --bg: #FFFFFF;
    --bg-alt: #FDF2F8;
    --bg-warm: #FFF7ED;
    --bg-card: #FFFFFF;
    --bg-elevated: #FFFFFF;
    --bg-inverse: #2D1B69;

    /* Text */
    --text: #1A1A2E;
    --text-secondary: #4B5563;
    --text-muted: #6B7280;
    --text-inverse: #FFFFFF;
    --text-link: var(--primary);

    /* Borders */
    --border: #E5E7EB;
    --border-light: #F3F4F6;
    --border-strong: #D1D5DB;

    /* Shadows — purple tinted */
    --shadow-xs: 0 1px 2px rgba(108,60,225,0.04);
    --shadow-sm: 0 2px 8px rgba(108,60,225,0.06);
    --shadow: 0 4px 20px rgba(108,60,225,0.08);
    --shadow-md: 0 8px 32px rgba(108,60,225,0.10);
    --shadow-lg: 0 20px 60px rgba(108,60,225,0.12);
    --shadow-primary: 0 8px 30px rgba(108,60,225,0.25);
    --shadow-secondary: 0 8px 30px rgba(249,115,22,0.20);
    --shadow-accent: 0 8px 30px rgba(255,209,102,0.25);

    /* Typography */
    --font-display: 'Quicksand', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Fluid font sizes */
    --fs-hero: clamp(3rem, 7vw, 5rem);
    --fs-h1: clamp(2.25rem, 5vw, 3.25rem);
    --fs-h2: clamp(1.75rem, 4vw, 2.5rem);
    --fs-h3: clamp(1.25rem, 2.5vw, 1.625rem);
    --fs-h4: 1.25rem;
    --fs-body: 1rem;
    --fs-sm: 0.875rem;
    --fs-xs: 0.75rem;

    /* Spacing — 8px grid */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;
    --sp-20: 80px;
    --sp-24: 96px;

    /* Border Radius — Ziggy playful roundness */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Layout */
    --container: 1320px;
    --container-narrow: 900px;
    --header-h: 80px;
    --topbar-h: 40px;
    --section-py: clamp(80px, 10vw, 120px);
    --gap: 24px;
    --gutter: clamp(20px, 4vw, 48px);

    /* Motion */
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-spring: cubic-bezier(0.22, 0.61, 0.36, 1);
    --duration: 0.5s;
    --duration-fast: 0.3s;
    --duration-slow: 0.8s;
    --transition: 0.5s var(--ease);
    --transition-fast: 0.3s var(--ease);

    /* Z-index */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-header: 500;
    --z-overlay: 900;
    --z-modal: 1000;
    --z-cart: 1100;
    --z-toast: 1200;

    /* Status */
    --success: #22C55E;
    --success-pale: #F0FDF4;
    --error: #EF4444;
    --error-pale: #FEF2F2;
    --warning: #F59E0B;
    --warning-pale: #FFFBEB;
    --info: #3B82F6;
    --info-pale: #EFF6FF;
}

/* -----------------------------------------------
   2. DARK THEME
   ----------------------------------------------- */
[data-theme="dark"] {
    --primary: #8B5CF6;
    --primary-light: #A78BFA;
    --primary-dark: #6C3CE1;
    --primary-pale: rgba(139,92,246,0.08);

    --secondary: #FB923C;
    --secondary-light: #FDBA74;
    --secondary-dark: #F97316;
    --secondary-pale: rgba(251,146,60,0.08);

    --accent: #FFDC8A;
    --accent-light: #FFE6A8;
    --accent-dark: #FFD166;
    --accent-pale: rgba(255,220,138,0.08);

    --lavender: #C4B5FD;
    --lavender-pale: rgba(196,181,253,0.08);

    --bg: #0F0A1A;
    --bg-alt: #1A1228;
    --bg-warm: #151020;
    --bg-card: #1E1630;
    --bg-elevated: #2A1F40;
    --bg-inverse: #FFFFFF;

    --text: #F0EDF5;
    --text-secondary: #B0ACB8;
    --text-muted: #6E6A78;
    --text-inverse: #0F0A1A;
    --text-link: var(--primary);

    --border: #2D2640;
    --border-light: #231D35;
    --border-strong: #3D3555;

    --shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.35);
    --shadow: 0 4px 20px rgba(0,0,0,0.4);
    --shadow-md: 0 8px 32px rgba(0,0,0,0.45);
    --shadow-lg: 0 20px 60px rgba(0,0,0,0.55);
    --shadow-primary: 0 8px 30px rgba(139,92,246,0.15);
    --shadow-secondary: 0 8px 30px rgba(251,146,60,0.12);
    --shadow-accent: 0 8px 30px rgba(255,220,138,0.10);

    --success-pale: rgba(34,197,94,0.1);
    --error-pale: rgba(239,68,68,0.1);
    --warning-pale: rgba(245,158,11,0.1);
    --info-pale: rgba(59,130,246,0.1);
}

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 20px);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.7;
    color: var(--text);
    background: var(--bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--text-link);
    text-decoration: none;
    transition: color var(--transition-fast);
}

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

ul, ol { list-style: none; }
button { cursor: pointer; background: none; border: none; font: inherit; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }

::selection {
    background: rgba(108,60,225,0.2);
    color: var(--text);
}

[data-theme="dark"] ::selection {
    background: rgba(139,92,246,0.25);
}

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

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-alt); }
::-webkit-scrollbar-thumb { background: var(--border-strong); }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* -----------------------------------------------
   4. TYPOGRAPHY
   ----------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.15;
    color: var(--text);
    letter-spacing: -0.02em;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p {
    margin-bottom: 1rem;
    color: var(--text-secondary);
}

strong { font-weight: 700; color: var(--text); }
small { font-size: var(--fs-sm); }

.t-hero {
    font-family: var(--font-display);
    font-size: var(--fs-hero);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
}

.t-overline {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.t-overline::before {
    content: '';
    width: 24px;
    height: 2px;
    background: var(--primary);
}

.t-price {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--text);
    line-height: 1;
}

.t-price-old {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    text-decoration: line-through;
    font-weight: 400;
}

/* -----------------------------------------------
   5. LAYOUT
   ----------------------------------------------- */
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.container-narrow {
    max-width: var(--container-narrow);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.section {
    padding: var(--section-py) 0;
    position: relative;
}

.section-alt { background: var(--bg-alt); }
.section-warm { background: var(--bg-warm); }

.section-dark {
    background: var(--bg-inverse);
    color: var(--text-inverse);
}

[data-theme="dark"] .section-dark { background: #0A0A12; }
.section-dark h2, .section-dark h3, .section-dark h4 { color: #FFFFFF; }
.section-dark p { color: #B0ACB8; }
.section-dark .t-overline { color: var(--primary-light); }
.section-dark .t-overline::before { background: var(--primary-light); }

.section-header {
    margin-bottom: var(--sp-16);
    position: relative;
}

.section-header h2 { margin-bottom: var(--sp-3); }

.section-header p {
    max-width: 540px;
    color: var(--text-muted);
    font-size: 1.0625rem;
}

.section-header.center { text-align: center; }
.section-header.center p { margin-left: auto; margin-right: auto; }
.section-header .t-overline { margin-bottom: var(--sp-4); }

/* Grid helpers */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }

.divider {
    width: 100%;
    height: 1px;
    background: var(--border);
}

/* -----------------------------------------------
   6. SECTION DIVIDERS
   ----------------------------------------------- */
.paw-divider {
    display: block;
    width: 100%;
    height: 1px;
    background: var(--border);
    margin: var(--sp-8) 0;
    border: none;
}

.paw-divider::before,
.paw-divider::after {
    display: none;
}

.paw-divider svg {
    display: none;
}

/* Section separator — thin line fallback for wave elements */
.wave-top,
.wave-bottom {
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 1;
    height: 1px;
    background: var(--border-light);
    overflow: hidden;
    line-height: 0;
}

.wave-top { top: 0; }
.wave-bottom { bottom: 0; }

.wave-top svg,
.wave-bottom svg {
    display: none;
}

.section-dark .wave-top,
.section-dark .wave-bottom {
    background: rgba(255,255,255,0.06);
}

/* Paw pattern — disabled */
.paw-pattern {
    display: none;
}

[data-theme="dark"] .paw-pattern {
    display: none;
}

/* -----------------------------------------------
   7. BUTTONS
   ----------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    border: 2px solid transparent;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease);
    position: relative;
    overflow: hidden;
    z-index: 1;
    white-space: nowrap;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--duration) var(--ease);
    z-index: -1;
}

.btn:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}

.btn svg {
    width: 18px;
    height: 18px;
    transition: transform var(--duration-fast) var(--ease);
}

.btn:hover svg { transform: translateX(3px); }

/* Press effect */
.btn:active {
    transform: scale(0.97);
    transition-duration: 0.1s;
}

/* Primary — Coral */
.btn-primary {
    background: var(--primary);
    color: #FFFFFF;
    border-color: var(--primary);
}

.btn-primary::before { background: var(--primary-dark); }

.btn-primary:hover {
    color: #FFFFFF;
    border-color: var(--primary-dark);
    box-shadow: var(--shadow-primary);
}

/* Secondary — Mint */
.btn-secondary {
    background: var(--secondary);
    color: #FFFFFF;
    border-color: var(--secondary);
}

.btn-secondary::before { background: var(--secondary-dark); }

.btn-secondary:hover {
    color: #FFFFFF;
    border-color: var(--secondary-dark);
    box-shadow: var(--shadow-secondary);
}

/* Accent — Amber */
.btn-accent {
    background: var(--accent);
    color: var(--text);
    border-color: var(--accent);
}

.btn-accent::before { background: var(--accent-dark); }

.btn-accent:hover {
    border-color: var(--accent-dark);
}

/* Dark */
.btn-dark {
    background: var(--text);
    color: var(--bg);
    border-color: var(--text);
}

.btn-dark::before { background: var(--primary); }

.btn-dark:hover {
    color: #FFFFFF;
    border-color: var(--primary);
}

[data-theme="dark"] .btn-dark {
    background: var(--bg-elevated);
    color: var(--text);
    border-color: var(--border-strong);
}

[data-theme="dark"] .btn-dark::before { background: var(--primary); }
[data-theme="dark"] .btn-dark:hover { color: #FFFFFF; border-color: var(--primary); }

/* Outline */
.btn-outline {
    background: transparent;
    color: var(--text);
    border-color: var(--border-strong);
}

.btn-outline::before { background: var(--text); }

.btn-outline:hover {
    color: var(--bg);
    border-color: var(--text);
}

/* Outline white */
.btn-outline-white {
    background: transparent;
    color: #FFFFFF;
    border-color: rgba(255,255,255,0.3);
}

.btn-outline-white::before { background: #FFFFFF; }

.btn-outline-white:hover {
    color: var(--text);
    border-color: #FFFFFF;
}

/* Ghost */
.btn-ghost {
    background: transparent;
    color: var(--primary);
    padding: 10px 16px;
}

.btn-ghost:hover { background: var(--primary-pale); }
.btn-ghost::before { display: none; }

/* Icon button */
.btn-icon {
    width: 48px;
    height: 48px;
    padding: 0;
}

.btn-icon.btn-sm { width: 40px; height: 40px; }

.btn-icon:hover svg { transform: scale(1.1); }

/* Sizes */
.btn-sm { padding: 10px 20px; font-size: var(--fs-xs); }
.btn-lg { padding: 18px 40px; font-size: 1rem; }
.btn-block { width: 100%; }

/* -----------------------------------------------
   8. BADGES & TAGS
   ----------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.badge-primary { background: var(--primary); color: #FFFFFF; }
.badge-secondary { background: var(--secondary); color: #FFFFFF; }
.badge-accent { background: var(--accent); color: var(--text); }
.badge-lavender { background: var(--lavender); color: #FFFFFF; }
.badge-new { background: var(--secondary); color: #FFFFFF; }
.badge-sale { background: var(--primary); color: #FFFFFF; }
.badge-popular { background: var(--accent); color: var(--text); }
.badge-outline { background: transparent; border: 1px solid var(--border); color: var(--text-secondary); }

.tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: var(--fs-xs);
    font-weight: 600;
    background: var(--bg-alt);
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.tag:hover { background: var(--primary-pale); color: var(--primary-dark); }
.tag.active { background: var(--primary); color: #FFFFFF; }

/* -----------------------------------------------
   9. HEADER
   ----------------------------------------------- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-h);
    z-index: var(--z-header);
    transition: all var(--duration-fast) var(--ease);
    background: rgba(255, 248, 240, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid transparent;
}

[data-theme="dark"] .site-header {
    background: rgba(17, 17, 24, 0.85);
}

.site-header.scrolled {
    border-bottom-color: var(--border-light);
    box-shadow: var(--shadow-sm);
}

.site-header.hero-active {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.site-header.hero-active.scrolled {
    background: rgba(255, 248, 240, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

[data-theme="dark"] .site-header.hero-active.scrolled {
    background: rgba(17, 17, 24, 0.95);
}

.header-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-8);
}

/* Logo */
.header-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.header-logo img { height: 40px; width: auto; }
.header-logo .logo-icon { flex-shrink: 0; }

.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--sp-4);
}

.header-logo-text {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.5px;
}

.header-logo-text span { color: var(--primary); }

/* Navigation */
.header-nav {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}

.header-nav a,
.nav-link {
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-secondary);
    padding: 8px 16px;
    position: relative;
    transition: color var(--transition-fast);
}

.header-nav a::after,
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 16px;
    right: 16px;
    height: 2px;
    background: var(--primary);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--transition-fast);
}

.header-nav a:hover,
.header-nav a.active,
.nav-link:hover,
.nav-link.active {
    color: var(--text);
}

.header-nav a:hover::after,
.header-nav a.active::after,
.nav-link:hover::after,
.nav-link.active::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Header actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.header-action-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    position: relative;
    transition: all var(--transition-fast);
}

.header-action-btn:hover { color: var(--primary); }
.header-action-btn svg { width: 22px; height: 22px; }

.header-action-btn .cart-count {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    background: var(--primary);
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}

/* Cart bounce animation */
@keyframes cartBounce {
    0%, 100% { transform: scale(1); }
    30% { transform: scale(1.3); }
    60% { transform: scale(0.9); }
}

.header-action-btn.bounce .cart-count {
    animation: cartBounce 0.5s var(--ease-bounce);
}

/* Theme toggle */
.theme-toggle {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color var(--transition-fast);
}

.theme-toggle:hover { color: var(--primary); }
.theme-toggle svg { width: 20px; height: 20px; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }

/* Mobile toggle */
.mobile-toggle {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.mobile-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text);
    transition: all var(--duration-fast) var(--ease);
    transform-origin: center;
}

.mobile-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.mobile-toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.mobile-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* -----------------------------------------------
   10. MOBILE MENU
   ----------------------------------------------- */
.mobile-menu {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: calc(var(--z-header) - 1);
    padding: calc(var(--header-h) + 32px) var(--gutter) 32px;
    opacity: 0;
    visibility: hidden;
    transition: all var(--duration) var(--ease);
    overflow-y: auto;
}

.mobile-menu.active { opacity: 1; visibility: visible; }

.mobile-menu-nav {
    display: flex;
    flex-direction: column;
}

.mobile-menu-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
    border-bottom: 1px solid var(--border-light);
    transition: all var(--transition-fast);
    transform: translateY(20px);
    opacity: 0;
}

.mobile-menu.active .mobile-menu-nav a {
    transform: translateY(0);
    opacity: 1;
}

.mobile-menu-nav a:nth-child(1) { transition-delay: 0.05s; }
.mobile-menu-nav a:nth-child(2) { transition-delay: 0.1s; }
.mobile-menu-nav a:nth-child(3) { transition-delay: 0.15s; }
.mobile-menu-nav a:nth-child(4) { transition-delay: 0.2s; }
.mobile-menu-nav a:nth-child(5) { transition-delay: 0.25s; }
.mobile-menu-nav a:nth-child(6) { transition-delay: 0.3s; }
.mobile-menu-nav a:nth-child(7) { transition-delay: 0.35s; }

.mobile-menu-nav a:hover { color: var(--primary); padding-left: 8px; }
.mobile-menu-nav a svg { width: 20px; height: 20px; color: var(--text-muted); }

.mobile-menu-bottom {
    margin-top: var(--sp-12);
    padding-top: var(--sp-8);
    border-top: 1px solid var(--border);
}

.mobile-menu-bottom .btn { width: 100%; margin-bottom: var(--sp-4); }

/* -----------------------------------------------
   11. HERO
   ----------------------------------------------- */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: calc(var(--header-h) + 40px) 0 80px;
    position: relative;
    overflow: hidden;
    background: var(--bg-warm);
}

[data-theme="dark"] .hero { background: var(--bg); }

.hero .container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    z-index: 2;
    max-width: 780px;
}

/* Decorative elements */
.hero::before {
    content: '';
    position: absolute;
    top: 10%;
    right: 5%;
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, var(--primary) 0%, rgba(255,107,107,0.3) 100%);
    opacity: 0.06;
    pointer-events: none;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: 15%;
    right: 15%;
    width: 120px;
    height: 120px;
    background: var(--secondary);
    opacity: 0.08;
    pointer-events: none;
}

.hero-content { position: relative; z-index: 2; }

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: var(--primary-pale);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--primary-dark);
    margin-bottom: var(--sp-8);
}

[data-theme="dark"] .hero-badge {
    background: rgba(255,142,142,0.1);
    color: var(--primary);
}

.hero-badge svg { width: 18px; height: 18px; }

.hero-title {
    font-family: var(--font-display);
    font-size: var(--fs-hero);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: var(--sp-6);
}

.hero-title .highlight {
    color: var(--primary);
    position: relative;
    display: inline-block;
}

.hero-title .highlight::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
    height: 8px;
    background: var(--accent);
    opacity: 0.4;
    z-index: -1;
}

.hero-desc {
    font-size: 1.125rem;
    color: var(--text-secondary);
    max-width: 480px;
    margin-bottom: var(--sp-10);
    line-height: 1.8;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    flex-wrap: wrap;
}

/* Hero stats */
.hero-stats {
    display: flex;
    gap: var(--sp-10);
    margin-top: var(--sp-12);
    padding-top: var(--sp-8);
    border-top: 1px solid var(--border);
}

.hero-stat-number {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1;
    margin-bottom: 4px;
}

.hero-stat-label {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    font-weight: 500;
}

/* Hero visual — hidden in full-width layout */
.hero-visual {
    display: none;
}

.hero-image-wrap {
    position: relative;
    width: 100%;
    max-width: 560px;
}

.hero-image-wrap img {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 2;
}

/* Floating cards */
.hero-float {
    position: absolute;
    background: var(--bg-card);
    box-shadow: var(--shadow-md);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 3;
    animation: heroFloat 4s ease-in-out infinite;
}

.hero-float-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hero-float-icon svg { width: 20px; height: 20px; }

.hero-float-text { font-size: var(--fs-sm); font-weight: 600; color: var(--text); white-space: nowrap; }
.hero-float-sub { font-size: var(--fs-xs); color: var(--text-muted); }

.hero-float--top { top: 10%; right: -10px; }
.hero-float--bottom { bottom: 15%; left: -20px; animation-delay: 2s; }

@keyframes heroFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

/* Hero scroll indicator */
.hero-scroll {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: var(--fs-xs);
    animation: scrollPulse 2s ease-in-out infinite;
    z-index: 2;
}

.hero-scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, var(--primary), transparent);
}

@keyframes scrollPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Parallax layer (JS controlled) */
.parallax-layer {
    will-change: transform;
    transition: transform 0.1s linear;
}

/* -----------------------------------------------
   12. CATEGORIES STRIP
   ----------------------------------------------- */
.categories-strip {
    padding: var(--sp-16) 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border-light);
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: var(--sp-4);
}

.category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-6) var(--sp-4);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    transition: all var(--transition-fast);
    text-align: center;
    cursor: pointer;
}

.category-item:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-xs);
    transform: translateY(-2px);
}

.category-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-pale);
    color: var(--primary);
    transition: all var(--transition-fast);
}

.category-item:hover .category-icon { background: var(--primary); color: #FFFFFF; }
.category-icon svg { width: 20px; height: 20px; }
.category-icon i { font-size: 20px; }

.category-name {
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text);
}

/* -----------------------------------------------
   13. PRODUCT CARDS
   ----------------------------------------------- */
.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
}

.product-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    transition: all 0.35s var(--ease);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow);
    transform: translateY(-4px);
}

.product-card-image,
.product-image-wrap {
    position: relative;
    aspect-ratio: 1;
    background: var(--bg-alt);
    overflow: hidden;
    display: block;
}

.product-card-image img,
.product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--ease);
}

.product-card:hover .product-card-image img,
.product-card:hover .product-image { transform: scale(1.06); }

.product-badge,
.product-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Quick actions overlay */
.product-actions {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: linear-gradient(transparent, rgba(0,0,0,0.04));
    transform: translateY(100%);
    opacity: 0;
    transition: all var(--duration-fast) var(--ease);
    z-index: 3;
}

.product-card:hover .product-actions { transform: translateY(0); opacity: 1; }

.product-action-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.product-action-btn:hover { background: var(--primary); border-color: var(--primary); color: #FFFFFF; }
.product-action-btn svg { width: 18px; height: 18px; }

/* Wishlist heart */
.product-action-btn.wishlisted { background: var(--primary); border-color: var(--primary); color: #FFFFFF; }

/* Product info */
.product-info,
.product-card-body {
    padding: 16px 20px 20px;
    display: flex;
    flex-direction: column;
}

.product-category,
.product-card-category {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    display: block;
}

.product-name,
.product-card-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-name a,
.product-card-title a { color: inherit; transition: color var(--transition-fast); }
.product-name a:hover,
.product-card-title a:hover { color: var(--primary); }

.product-card-brand {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin-bottom: 8px;
    display: block;
}

/* Rating */
.rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 10px;
}

.rating .stars {
    display: flex;
    gap: 1px;
}

.star { color: var(--accent); font-size: 12px; }
.star.empty { color: var(--border); }

.rating .count {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin-left: 4px;
}

/* Price */
.product-price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.product-price,
.product-card-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 8px;
}

.product-card-price .t-price {
    font-family: var(--font-mono);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--primary-dark);
    line-height: 1;
}

.product-card-price .t-price-old {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--text-muted);
    text-decoration: line-through;
}

.product-price-old {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    text-decoration: line-through;
    font-weight: 400;
    font-family: var(--font-mono);
}

.product-discount {
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--primary);
}

/* Add to cart button on card */
.product-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    background: var(--bg-alt);
    border-top: 1px solid var(--border-light);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.product-add-btn:hover { background: var(--primary); color: #FFFFFF; border-top-color: var(--primary); }
.product-add-btn svg { width: 18px; height: 18px; }

/* List view */
.products-grid.list-view { grid-template-columns: 1fr; }
.products-grid.list-view .product-card { display: grid; grid-template-columns: 260px 1fr; }
.products-grid.list-view .product-image-wrap { aspect-ratio: auto; height: 100%; }

/* Filter & sorting bar */
.product-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-8);
    flex-wrap: wrap;
}

.filter-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-tab {
    padding: 10px 24px;
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.filter-tab:hover { border-color: var(--primary); color: var(--primary); }
.filter-tab.active { background: var(--primary); border-color: var(--primary); color: #FFFFFF; }

.sort-select {
    padding: 10px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}

.view-toggle {
    display: flex;
    gap: 4px;
}

.view-toggle button {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    color: var(--text-muted);
    transition: all var(--transition-fast);
}

.view-toggle button.active,
.view-toggle button:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* -----------------------------------------------
   14. ADOPTION CARD (Pet-specific)
   ----------------------------------------------- */
.adoption-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
}

.adoption-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    overflow: hidden;
    transition: all var(--transition);
    position: relative;
}

.adoption-card:hover {
    border-color: var(--secondary);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.adoption-image-wrap {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
}

.adoption-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease);
}

.adoption-card:hover .adoption-image { transform: scale(1.05); }

.adoption-status {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 12px;
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
}

.adoption-status.available { background: var(--secondary); color: #FFFFFF; }
.adoption-status.reserved { background: var(--accent); color: var(--text); }
.adoption-status.adopted { background: var(--text-muted); color: #FFFFFF; }

.adoption-info { padding: 20px; }

.adoption-breed {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.adoption-name {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}

.adoption-meta {
    display: flex;
    gap: var(--sp-4);
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.adoption-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.adoption-meta svg { width: 14px; height: 14px; }

/* -----------------------------------------------
   15. SERVICE CARDS
   ----------------------------------------------- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
}

.service-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    padding: var(--sp-10);
    transition: all var(--transition);
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 0;
    background: var(--primary);
    transition: height var(--duration) var(--ease);
}

.service-card:hover::before { height: 100%; }

.service-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.service-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--secondary-pale);
    color: var(--secondary);
    margin-bottom: var(--sp-6);
    transition: all var(--transition-fast);
}

.service-card:hover .service-icon { background: var(--secondary); color: #FFFFFF; }
.service-icon svg { width: 22px; height: 22px; }
.service-card-image {
    aspect-ratio: 16/11;
    overflow: hidden;
    margin: calc(var(--sp-10) * -1) calc(var(--sp-10) * -1) var(--sp-6);
}
.service-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.service-card:hover .service-card-image img { transform: scale(1.05); }
.service-card h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-3); }
.service-card p { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-6); }

.service-link {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap var(--transition-fast);
}

.service-link:hover { gap: 10px; }
.service-link svg { width: 16px; height: 16px; }

/* -----------------------------------------------
   16. BLOG CARDS
   ----------------------------------------------- */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
}

.blog-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    overflow: hidden;
    transition: all var(--transition);
    display: flex;
    flex-direction: column;
}

.blog-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow);
    transform: translateY(-4px);
}

.blog-card-image,
.blog-image-wrap {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    display: block;
}

.blog-card-image img,
.blog-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease);
}

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

.blog-category,
.blog-card-category {
    display: inline-block;
    padding: 4px 12px;
    background: var(--primary);
    color: #FFFFFF;
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.blog-content,
.blog-card-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.blog-meta,
.blog-card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--border-light);
}

.blog-meta span { display: flex; align-items: center; gap: 4px; }
.blog-meta svg { width: 14px; height: 14px; }

.blog-card h3 { font-size: 1.125rem; margin-bottom: 10px; line-height: 1.4; font-weight: 700; }
.blog-card h3 a { color: var(--text); transition: color var(--transition-fast); }
.blog-card h3 a:hover { color: var(--primary); }
.blog-card p { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.6; margin-bottom: var(--sp-4); flex: 1; }

.blog-excerpt {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: var(--sp-4);
}

.blog-read-more {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.blog-read-more svg { width: 16px; height: 16px; transition: transform var(--transition-fast); }
.blog-read-more:hover svg { transform: translateX(4px); }

/* -----------------------------------------------
   17. ABOUT SECTION
   ----------------------------------------------- */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-16);
    align-items: center;
}

.about-image-wrap { position: relative; }

.about-image {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
}

.about-image-wrap::after {
    content: '';
    position: absolute;
    bottom: -16px;
    right: -16px;
    width: 100%;
    height: 100%;
    border: 3px solid var(--primary);
    z-index: -1;
    opacity: 0.3;
}

.about-content h2 { margin-bottom: var(--sp-6); }
.about-content p { margin-bottom: var(--sp-6); line-height: 1.8; }

.about-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
    margin: var(--sp-8) 0 var(--sp-10);
}

.about-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--sp-3) 0;
}

.about-feature-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--secondary-pale);
    color: var(--secondary);
    flex-shrink: 0;
}

.about-feature-icon svg { width: 16px; height: 16px; }
.about-feature span { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }

/* -----------------------------------------------
   18. STATS COUNTER
   ----------------------------------------------- */
.stats-strip {
    padding: var(--sp-16) 0;
    background: var(--bg-inverse);
    color: var(--text-inverse);
    position: relative;
    overflow: hidden;
}

[data-theme="dark"] .stats-strip { background: #0A0A12; }

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
}

.stat-item {
    text-align: center;
    padding: var(--sp-6) 0;
    position: relative;
}

.stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 48px;
    background: rgba(255,255,255,0.1);
}

.stat-number {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
    margin-bottom: 8px;
}

.stat-label {
    font-size: var(--fs-sm);
    color: rgba(255,255,255,0.6);
}

/* -----------------------------------------------
   19. TESTIMONIALS
   ----------------------------------------------- */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
}

.testimonial-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    padding: var(--sp-10);
    transition: all var(--transition);
    position: relative;
}

.testimonial-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }

.testimonial-card::before {
    content: '\201C';
    position: absolute;
    top: 16px;
    right: 24px;
    font-family: var(--font-display);
    font-size: 4rem;
    color: var(--primary);
    opacity: 0.12;
    line-height: 1;
}

.testimonial-stars {
    display: flex;
    gap: 2px;
    color: var(--accent);
    margin-bottom: var(--sp-4);
    font-size: 14px;
}

.testimonial-text {
    font-size: var(--fs-body);
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: var(--sp-6);
    font-style: italic;
}

.testimonial-author { display: flex; align-items: center; gap: 14px; }

.testimonial-author picture,
.testimonial-avatar {
    width: 52px;
    height: 52px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--primary-pale);
    display: block;
}

.testimonial-author picture img,
.testimonial-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.testimonial-author strong { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700; color: var(--text); display: block; }
.testimonial-author span { font-size: var(--fs-xs); color: var(--text-muted); display: block; margin-top: 2px; }

.testimonial-name { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700; color: var(--text); }
.testimonial-role { font-size: var(--fs-xs); color: var(--text-muted); }

/* -----------------------------------------------
   20. FAQ / ACCORDION
   ----------------------------------------------- */
.faq-list {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item { border-bottom: 1px solid var(--border); }

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: var(--sp-6) 0;
    cursor: pointer;
    transition: color var(--transition-fast);
    width: 100%;
}

.faq-question:hover { color: var(--primary); }
.faq-question h3 { font-size: 1.0625rem; font-weight: 600; }

.faq-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--border);
    transition: all var(--transition-fast);
}

.faq-icon svg { width: 16px; height: 16px; transition: transform var(--duration-fast); }
.faq-item.active .faq-icon { background: var(--primary); border-color: var(--primary); color: #FFFFFF; }
.faq-item.active .faq-icon svg { transform: rotate(45deg); }

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--duration) var(--ease);
}

.faq-answer-inner {
    padding: 0 0 var(--sp-6);
    color: var(--text-secondary);
    line-height: 1.7;
}

.faq-item.active .faq-answer { max-height: 500px; }

/* Generic accordion */
.accordion-item { border-bottom: 1px solid var(--border); }

.accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--sp-5) 0;
    font-weight: 600;
    cursor: pointer;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--duration) var(--ease);
}

.accordion-item.active .accordion-content { max-height: 1000px; }

/* -----------------------------------------------
   21. CTA SECTION
   ----------------------------------------------- */
.cta-section {
    padding: var(--section-py) 0;
    background: var(--bg-inverse);
    position: relative;
    overflow: hidden;
}

[data-theme="dark"] .cta-section { background: #0A0A12; }

.cta-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255,107,107,0.1) 0%, transparent 70%);
    pointer-events: none;
}

.cta-content { text-align: center; position: relative; z-index: 2; }

.cta-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: var(--sp-4);
}

.cta-desc {
    font-size: 1.125rem;
    color: rgba(255,255,255,0.6);
    max-width: 540px;
    margin: 0 auto var(--sp-10);
}

.cta-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-4);
    flex-wrap: wrap;
}

/* -----------------------------------------------
   22. TEAM
   ----------------------------------------------- */
.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
}

.team-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    overflow: hidden;
    transition: all var(--transition);
    text-align: center;
}

.team-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }

.team-image-wrap {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--bg-alt);
}

.team-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease);
}

.team-card:hover .team-image { transform: scale(1.05); }

.team-social {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    background: linear-gradient(transparent, rgba(0,0,0,0.5));
    transform: translateY(100%);
    transition: transform var(--duration-fast) var(--ease);
}

.team-card:hover .team-social { transform: translateY(0); }

.team-social a {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.9);
    color: var(--text);
    transition: all var(--transition-fast);
}

.team-social a:hover { background: var(--primary); color: #FFFFFF; }
.team-social a svg { width: 16px; height: 16px; }

.team-info { padding: 20px; }
.team-name { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.team-role { font-size: var(--fs-sm); color: var(--secondary); font-weight: 500; }

/* -----------------------------------------------
   23. CONTACT
   ----------------------------------------------- */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--sp-12);
}

.contact-info { display: flex; flex-direction: column; gap: var(--sp-8); }

.contact-info-item { display: flex; gap: var(--sp-4); }

.contact-info-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-pale);
    color: var(--primary);
    flex-shrink: 0;
}

.contact-info-icon svg { width: 22px; height: 22px; }
.contact-info-label { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 4px; }
.contact-info-value { font-size: 1rem; color: var(--text); font-weight: 500; }
.contact-info-value a { color: var(--text); }
.contact-info-value a:hover { color: var(--primary); }

.contact-map { margin-top: var(--sp-10); height: 240px; background: var(--bg-alt); overflow: hidden; }
.contact-map iframe { width: 100%; height: 100%; border: none; }

.contact-form { background: var(--bg-card); border: 1px solid var(--border-light); padding: var(--sp-10); }

/* -----------------------------------------------
   24. FORMS
   ----------------------------------------------- */
.form-group { margin-bottom: var(--sp-6); }

.form-label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text);
    margin-bottom: var(--sp-2);
}

.form-label .required { color: var(--primary); }

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 14px 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    font-size: var(--fs-body);
    color: var(--text);
    transition: all var(--transition-fast);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(255,107,107,0.1);
}

[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] .form-textarea:focus {
    box-shadow: 0 0 0 3px rgba(255,142,142,0.08);
}

.form-input::placeholder,
.form-textarea::placeholder { color: var(--text-muted); }

.form-textarea { min-height: 140px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.form-error { font-size: var(--fs-xs); color: var(--error); margin-top: var(--sp-1); }
.form-help { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--sp-1); }

/* Checkbox & Radio */
.form-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.form-check input { width: 18px; height: 18px; accent-color: var(--primary); margin-top: 2px; }
.form-check-label { font-size: var(--fs-sm); color: var(--text-secondary); }

/* -----------------------------------------------
   25. CART DRAWER
   ----------------------------------------------- */
.cart-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--z-cart);
    opacity: 0;
    visibility: hidden;
    transition: all var(--duration-fast);
}

.cart-overlay.active { opacity: 1; visibility: visible; }

/* ============================================
   SEARCH MODAL
   ============================================ */
.search-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 120px;
    backdrop-filter: blur(4px);
}
.search-modal.active,
.search-modal.open { opacity: 1; visibility: visible; }

.search-modal-inner {
    background: var(--bg-card);
    width: 90%;
    max-width: 640px;
    max-height: 70vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    transform: translateY(-20px);
    transition: transform 0.3s ease;
}
.search-modal.active .search-modal-inner,
.search-modal.open .search-modal-inner { transform: translateY(0); }

.search-modal-header {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-6);
    border-bottom: 1px solid var(--border-light);
}

.search-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}
.search-input-wrap svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--text-muted); }
.search-input-wrap input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1rem;
    background: transparent;
    color: var(--text);
    font-family: var(--font-body);
}
.search-input-wrap input::placeholder { color: var(--text-muted); }

.search-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--border-light);
    cursor: pointer;
    font-size: 1.25rem;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: all 0.2s;
}
.search-close:hover { color: var(--primary); border-color: var(--primary); }

.search-results {
    overflow-y: auto;
    padding: var(--sp-4) var(--sp-6);
    max-height: calc(70vh - 60px);
}

/* Search result items */
.search-result-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3);
    border-radius: var(--radius-sm);
    color: var(--text);
    transition: background 0.15s;
    text-decoration: none;
}
.search-result-item:hover { background: var(--primary-pale); color: var(--text); }
.search-result-img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    background: var(--bg-alt);
}
.search-result-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-pale);
    color: var(--primary);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    font-size: 1rem;
}
.search-result-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.search-result-title {
    font-weight: 500;
    font-size: var(--fs-body);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-result-meta {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}
.search-empty {
    padding: var(--sp-8) var(--sp-4);
    text-align: center;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

/* ============================================
   MOBILE OVERLAY
   ============================================ */
.mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
.mobile-overlay.active { opacity: 1; visibility: visible; }

.cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 420px;
    height: 100%;
    background: var(--bg-card);
    z-index: calc(var(--z-cart) + 1);
    transform: translateX(100%);
    transition: transform var(--duration) var(--ease);
    display: flex;
    flex-direction: column;
}

.cart-drawer.active { transform: translateX(0); }

.cart-header {
    padding: var(--sp-6) var(--sp-8);
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--text); }

.cart-close {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.cart-close:hover { border-color: var(--text); color: var(--text); }
.cart-close svg { width: 20px; height: 20px; }

.cart-items { flex: 1; overflow-y: auto; padding: var(--sp-6) var(--sp-8); }

.cart-empty { text-align: center; padding: var(--sp-16) 0; color: var(--text-muted); }
.cart-empty svg { width: 48px; height: 48px; color: var(--border); margin-bottom: var(--sp-4); }
.cart-empty p { font-family: var(--font-display); font-size: 1.125rem; color: var(--text-secondary); }

.cart-item { display: flex; gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--border-light); }

.cart-item-image { width: 72px; height: 72px; background: var(--bg-alt); flex-shrink: 0; overflow: hidden; }
.cart-item-image img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }

.cart-item-info { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.cart-item-name { font-size: var(--fs-sm); font-weight: 600; color: var(--text); line-height: 1.3; }
.cart-item-price { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 700; color: var(--primary); }

.cart-item-qty { display: flex; align-items: center; margin-top: 4px; }

.cart-item-qty button {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.cart-item-qty button:hover { border-color: var(--primary); color: var(--primary); }
.cart-item-qty span { width: 32px; text-align: center; font-size: var(--fs-sm); font-weight: 600; }

.cart-item-remove { color: var(--text-muted); align-self: flex-start; padding: 4px; transition: color var(--transition-fast); }
.cart-item-remove:hover { color: var(--error); }
.cart-item-remove svg { width: 16px; height: 16px; }

.cart-footer { padding: var(--sp-6) var(--sp-8); border-top: 1px solid var(--border); }

.cart-subtotal { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-4); }
.cart-subtotal-label { font-size: var(--fs-body); color: var(--text-secondary); }
.cart-subtotal-value { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 700; color: var(--text); }

.cart-footer .btn { width: 100%; margin-bottom: var(--sp-3); }
.cart-footer .btn:last-child { margin-bottom: 0; }

/* -----------------------------------------------
   26. CART PAGE & CHECKOUT
   ----------------------------------------------- */
.cart-page-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--sp-10);
    align-items: start;
}

.cart-table { width: 100%; border-collapse: collapse; }

.cart-table th {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    padding: var(--sp-4) var(--sp-3);
    border-bottom: 2px solid var(--border);
    text-align: left;
}

.cart-table td {
    padding: var(--sp-4) var(--sp-3);
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}

.cart-summary {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    padding: var(--sp-8);
    position: sticky;
    top: calc(var(--header-h) + 20px);
}

.cart-summary h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-6); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border); }

.cart-summary-row { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-3) 0; font-size: var(--fs-sm); }

.cart-summary-row.total {
    font-size: 1.125rem;
    font-weight: 700;
    padding-top: var(--sp-4);
    margin-top: var(--sp-3);
    border-top: 2px solid var(--border);
}

.cart-summary-row.total .amount { font-family: var(--font-mono); color: var(--primary); font-size: 1.375rem; }

/* Checkout */
.checkout-grid {
    display: grid;
    grid-template-columns: 1fr 440px;
    gap: var(--sp-10);
    align-items: start;
}

.checkout-section {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    padding: var(--sp-8);
    margin-bottom: var(--sp-6);
}

.checkout-section h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-6); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border); }

.payment-method {
    border: 1px solid var(--border);
    padding: var(--sp-4) var(--sp-6);
    margin-bottom: var(--sp-3);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    transition: all var(--transition-fast);
}

.payment-method:hover,
.payment-method.active { border-color: var(--primary); }
.payment-method.active { background: var(--primary-pale); }

.payment-method-radio {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.payment-method.active .payment-method-radio { border-color: var(--primary); }
.payment-method.active .payment-method-radio::after { content: ''; width: 10px; height: 10px; background: var(--primary); }

.checkout-order-summary {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    padding: var(--sp-8);
    position: sticky;
    top: calc(var(--header-h) + 20px);
}

/* -----------------------------------------------
   27. PAGE HEADER & BREADCRUMB
   ----------------------------------------------- */
.page-hero {
    padding: calc(var(--header-h) + 48px) 0 48px;
    background: var(--bg-warm);
    position: relative;
}

[data-theme="dark"] .page-hero { background: var(--bg-alt); }

.page-hero h1 { font-size: var(--fs-h1); margin-bottom: var(--sp-3); }
.page-hero p { font-size: 1.0625rem; color: var(--text-secondary); max-width: 560px; }

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    margin-bottom: var(--sp-6);
}

.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb .sep { font-size: 10px; }
.breadcrumb .current { color: var(--text); font-weight: 500; }

/* -----------------------------------------------
   28. SERVICE & BLOG DETAIL
   ----------------------------------------------- */
.detail-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--sp-10);
    align-items: start;
}

/* Rich content */
.rich-content h2 { font-size: var(--fs-h3); margin: var(--sp-10) 0 var(--sp-4); }
.rich-content h3 { font-size: var(--fs-h4); margin: var(--sp-8) 0 var(--sp-3); }
.rich-content p { margin-bottom: var(--sp-4); line-height: 1.8; }
.rich-content img { margin: var(--sp-8) 0; }
.rich-content ul, .rich-content ol { padding-left: var(--sp-6); margin-bottom: var(--sp-4); }
.rich-content li { margin-bottom: var(--sp-2); line-height: 1.7; color: var(--text-secondary); }
.rich-content ul li { list-style: disc; }
.rich-content ol li { list-style: decimal; }

/* Sidebar */
.sidebar {
    position: sticky;
    top: calc(var(--header-h) + 20px);
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
}

.sidebar-widget {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    padding: var(--sp-6);
}

.sidebar-widget h4 { font-size: var(--fs-body); margin-bottom: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border-light); }

.sidebar-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3) 0;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-light);
}

.sidebar-nav a:last-child { border-bottom: none; }
.sidebar-nav a:hover, .sidebar-nav a.active { color: var(--primary); }

/* Share */
.share-buttons {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-top: var(--sp-10);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--border);
}

.share-buttons span { font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); }

.share-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-alt);
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.share-btn:hover { background: var(--primary); color: #FFFFFF; }
.share-btn svg { width: 18px; height: 18px; }

/* -----------------------------------------------
   29. PRODUCT DETAIL
   ----------------------------------------------- */
.product-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-12);
    align-items: start;
}

.product-gallery { position: sticky; top: calc(var(--header-h) + 20px); }

.product-gallery-main {
    aspect-ratio: 1;
    background: var(--bg-alt);
    overflow: hidden;
    margin-bottom: var(--sp-3);
    position: relative;
}

.product-gallery-main img { width: 100%; height: 100%; object-fit: contain; padding: 32px; }

.product-gallery-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }

.product-gallery-thumb {
    aspect-ratio: 1;
    background: var(--bg-alt);
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

.product-gallery-thumb.active,
.product-gallery-thumb:hover { border-color: var(--primary); }

.product-gallery-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }

.product-detail-info h1 { font-size: var(--fs-h2); margin-bottom: var(--sp-3); }
.product-detail-sku { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: var(--sp-4); font-family: var(--font-mono); }

.product-detail-price {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: var(--sp-6);
    padding-bottom: var(--sp-6);
    border-bottom: 1px solid var(--border);
}

.product-detail-price .current { font-family: var(--font-mono); font-size: 2rem; font-weight: 700; color: var(--text); }
.product-detail-price .old { font-size: 1.125rem; color: var(--text-muted); text-decoration: line-through; font-family: var(--font-mono); }
.product-detail-price .discount-badge { padding: 4px 10px; background: var(--primary); color: #FFFFFF; font-size: var(--fs-xs); font-weight: 700; }

.product-detail-desc { margin-bottom: var(--sp-8); line-height: 1.8; color: var(--text-secondary); }

/* Quantity selector */
.quantity-selector {
    display: flex;
    align-items: center;
    border: 1px solid var(--border);
    width: fit-content;
}

.quantity-selector button {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.quantity-selector button:hover { background: var(--bg-alt); color: var(--primary); }

.quantity-selector input {
    width: 56px;
    height: 44px;
    text-align: center;
    border: none;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    background: transparent;
    font-weight: 600;
}

.product-detail-actions { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-6); }

/* Tabs */
.tabs { margin-top: var(--sp-16); }

.tabs-nav {
    display: flex;
    border-bottom: 2px solid var(--border);
}

.tab-btn {
    padding: var(--sp-4) var(--sp-8);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all var(--transition-fast);
}

.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }

.tab-content { padding: var(--sp-8) 0; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Stock status */
.stock-status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; }
.stock-dot { width: 8px; height: 8px; }
.stock-in .stock-dot { background: var(--success); }
.stock-low .stock-dot { background: var(--warning); }
.stock-out .stock-dot { background: var(--error); }
.stock-in { color: var(--success); }
.stock-low { color: var(--warning); }
.stock-out { color: var(--error); }

/* -----------------------------------------------
   30. MODAL
   ----------------------------------------------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: var(--z-modal);
    opacity: 0;
    visibility: hidden;
    transition: all var(--duration-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-6);
}

.modal-overlay.active { opacity: 1; visibility: visible; }

.modal {
    background: var(--bg-card);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.95) translateY(20px);
    opacity: 0;
    transition: all var(--duration) var(--ease);
}

.modal-overlay.active .modal { transform: scale(1) translateY(0); opacity: 1; }

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-6) var(--sp-8);
    border-bottom: 1px solid var(--border);
}

.modal-header h3 { font-size: var(--fs-h4); }

.modal-close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: color var(--transition-fast);
}

.modal-close:hover { color: var(--text); }
.modal-close svg { width: 20px; height: 20px; }

.modal-body { padding: var(--sp-8); }
.modal-footer { padding: var(--sp-6) var(--sp-8); border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: var(--sp-3); }

/* -----------------------------------------------
   31. FOOTER
   ----------------------------------------------- */
.site-footer {
    background: var(--bg-inverse);
    color: #9B96A8;
    padding: 80px 0 0;
}

[data-theme="dark"] .site-footer { background: #0A0A12; }

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--sp-12);
    padding-bottom: var(--sp-12);
    border-bottom: 1px solid rgba(255,107,107,0.12);
}

.site-footer .header-logo-text {
    color: #FFFFFF;
}

.site-footer .header-logo-text span { color: var(--primary); }
.footer-brand p { font-size: var(--fs-sm); color: #9B96A8; line-height: 1.7; margin-bottom: var(--sp-6); }

.footer-social { display: flex; gap: 8px; }

.footer-social a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,107,107,0.08);
    color: #9B96A8;
    transition: all var(--duration-fast);
}

.footer-social a:hover { background: var(--primary); color: #FFFFFF; }
.footer-social a svg { width: 18px; height: 18px; }

.footer-col h4 {
    font-family: var(--font-display);
    color: #FFFFFF;
    font-size: var(--fs-sm);
    margin-bottom: var(--sp-5);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
}

.footer-title {
    font-family: var(--font-display);
    color: #FFFFFF;
    font-size: var(--fs-sm);
    margin-bottom: var(--sp-5);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
}

.footer-newsletter h5 {
    color: #FFFFFF;
    font-size: var(--fs-sm);
    font-weight: 600;
    margin-bottom: var(--sp-3);
}

.footer-col a { display: block; font-size: var(--fs-sm); color: #9B96A8; padding: 5px 0; transition: color var(--duration-fast); }
.footer-col a:hover { color: var(--primary-light); }
.footer-col p { font-size: var(--fs-sm); color: #9B96A8; margin-bottom: 4px; }

.footer-desc { font-size: var(--fs-sm); color: #9B96A8; line-height: 1.7; margin-bottom: var(--sp-6); }

.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin: 0; }
.footer-links a { display: block; font-size: var(--fs-sm); color: #9B96A8; padding: 5px 0; transition: color var(--duration-fast); }
.footer-links a:hover { color: var(--primary-light); }

.footer-contact { list-style: none; padding: 0; margin: 0; }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; font-size: var(--fs-sm); color: #9B96A8; }
.footer-contact li i { width: 16px; margin-top: 3px; color: var(--primary); flex-shrink: 0; }
.footer-contact li a { display: inline; padding: 0; color: #9B96A8; transition: color var(--duration-fast); }
.footer-contact li a:hover { color: var(--primary-light); }

.footer-payments { display: flex; align-items: center; gap: 12px; }
.footer-payments svg { height: 24px; width: auto; opacity: 0.5; transition: opacity var(--transition-fast); }
.footer-payments svg:hover { opacity: 0.8; }

/* Newsletter */
.footer-newsletter { margin-top: var(--sp-6); }

.footer-newsletter-form { display: flex; }

.footer-newsletter-form input {
    flex: 1;
    padding: 12px 16px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: #FFFFFF;
    font-size: var(--fs-sm);
}

.footer-newsletter-form input::placeholder { color: #6E6A78; }
.footer-newsletter-form input:focus { outline: none; border-color: var(--primary); }

.footer-newsletter-form button {
    padding: 12px 20px;
    background: var(--primary);
    color: #FFFFFF;
    font-weight: 600;
    font-size: var(--fs-sm);
    transition: background var(--transition-fast);
}

.footer-newsletter-form button:hover { background: var(--primary-dark); }

.footer-bottom {
    padding: var(--sp-6) 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-4);
    font-size: var(--fs-xs);
    color: #6E6A78;
}

.footer-copyright { margin: 0; }

.footer-bottom-links { display: flex; gap: var(--sp-4); }
.footer-bottom-links a { color: #6E6A78; transition: color var(--duration-fast); }
.footer-bottom-links a:hover { color: var(--primary-light); }

#fcreds { font-size: 0.6875rem; color: #6E6A78; opacity: 0.7; margin: 0; }
#fcreds:empty::after { content: "Powered by ALFA Dizayn"; }
#fcreds a { color: #6E6A78 !important; text-decoration: none !important; transition: color 0.3s; }
#fcreds a:hover { color: var(--primary) !important; }

/* -----------------------------------------------
   32. TOAST / NOTIFICATIONS
   ----------------------------------------------- */
.toast-container {
    position: fixed;
    top: calc(var(--header-h) + 16px);
    right: 16px;
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    min-width: 320px;
    max-width: 440px;
    transform: translateX(120%);
    transition: transform var(--duration) var(--ease);
}

.toast.show { transform: translateX(0); }

.toast-icon { width: 24px; height: 24px; flex-shrink: 0; }
.toast-success .toast-icon { color: var(--success); }
.toast-error .toast-icon { color: var(--error); }
.toast-warning .toast-icon { color: var(--warning); }
.toast-info .toast-icon { color: var(--info); }

.toast-message { flex: 1; font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.toast-close { color: var(--text-muted); padding: 4px; transition: color var(--transition-fast); }
.toast-close:hover { color: var(--text); }

/* Alert */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: var(--sp-4) var(--sp-6);
    margin-bottom: var(--sp-6);
    font-size: var(--fs-sm);
}

.alert-icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.alert-success { background: var(--success-pale); border-left: 3px solid var(--success); color: var(--success); }
.alert-error { background: var(--error-pale); border-left: 3px solid var(--error); color: var(--error); }
.alert-warning { background: var(--warning-pale); border-left: 3px solid var(--warning); color: var(--warning); }
.alert-info { background: var(--info-pale); border-left: 3px solid var(--info); color: var(--info); }

/* -----------------------------------------------
   33. PAGINATION
   ----------------------------------------------- */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: var(--sp-12);
}

.pagination a,
.pagination span {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    transition: all var(--transition-fast);
}

.pagination a:hover { border-color: var(--primary); color: var(--primary); }
.pagination .active { background: var(--primary); border-color: var(--primary); color: #FFFFFF; }
.pagination .dots { border: none; color: var(--text-muted); }
.pagination svg { width: 16px; height: 16px; }

/* -----------------------------------------------
   34. 404 PAGE
   ----------------------------------------------- */
.error-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--sp-20) var(--gutter);
}

.error-code {
    font-family: var(--font-display);
    font-size: clamp(100px, 20vw, 200px);
    font-weight: 800;
    color: var(--border-light);
    line-height: 1;
    margin-bottom: var(--sp-6);
}

[data-theme="dark"] .error-code { color: var(--border); }
.error-page h1 { margin-bottom: var(--sp-4); }
.error-page p { max-width: 460px; margin: 0 auto var(--sp-10); }

/* -----------------------------------------------
   35. SKELETON & LOADING
   ----------------------------------------------- */
.skeleton {
    background: linear-gradient(90deg, var(--bg-alt) 25%, var(--border-light) 50%, var(--bg-alt) 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s infinite;
}

@keyframes skeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.spinner-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255,248,240,0.8);
    z-index: var(--z-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
}

[data-theme="dark"] .spinner-overlay {
    background: rgba(17,17,24,0.8);
}

/* -----------------------------------------------
   36. ANIMATIONS
   ----------------------------------------------- */
/* Reveal on scroll */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--duration-slow) var(--ease), transform var(--duration-slow) var(--ease);
}

.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity var(--duration-slow) var(--ease), transform var(--duration-slow) var(--ease);
}

.reveal-left.visible { opacity: 1; transform: translateX(0); }

.reveal-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity var(--duration-slow) var(--ease), transform var(--duration-slow) var(--ease);
}

.reveal-right.visible { opacity: 1; transform: translateX(0); }

/* Stagger children */
.stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.stagger.visible > * { opacity: 1; transform: translateY(0); }
.stagger.visible > *:nth-child(1) { transition-delay: 0.05s; }
.stagger.visible > *:nth-child(2) { transition-delay: 0.1s; }
.stagger.visible > *:nth-child(3) { transition-delay: 0.15s; }
.stagger.visible > *:nth-child(4) { transition-delay: 0.2s; }
.stagger.visible > *:nth-child(5) { transition-delay: 0.25s; }
.stagger.visible > *:nth-child(6) { transition-delay: 0.3s; }
.stagger.visible > *:nth-child(7) { transition-delay: 0.35s; }
.stagger.visible > *:nth-child(8) { transition-delay: 0.4s; }

/* Scale in */
.scale-in {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.scale-in.visible { opacity: 1; transform: scale(1); }

/* Fade */
.fade-in {
    opacity: 0;
    transition: opacity var(--duration-slow) var(--ease);
}

.fade-in.visible { opacity: 1; }

/* Number counter animation target */
.counter[data-target] {
    font-variant-numeric: tabular-nums;
}

/* Smooth page transition */
.page-transition {
    animation: pageIn 0.4s var(--ease);
}

@keyframes pageIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* -----------------------------------------------
   37. UTILITY CLASSES
   ----------------------------------------------- */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-primary { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-accent { color: var(--accent); }
.text-muted { color: var(--text-muted); }

.bg-primary { background: var(--primary); }
.bg-secondary { background: var(--secondary); }
.bg-accent { background: var(--accent); }
.bg-alt { background: var(--bg-alt); }

.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--sp-4); }
.mt-8 { margin-top: var(--sp-8); }
.mt-12 { margin-top: var(--sp-12); }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-8 { margin-bottom: var(--sp-8); }

.d-none { display: none; }
.d-flex { display: flex; }
.d-grid { display: grid; }
.gap-4 { gap: var(--sp-4); }
.gap-6 { gap: var(--sp-6); }
.gap-8 { gap: var(--sp-8); }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }

.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* -----------------------------------------------
   38. RESPONSIVE — 1200px
   ----------------------------------------------- */
@media (max-width: 1200px) {
    .hero .container { max-width: 640px; }
    .hero-content { max-width: 100%; }
    .products-grid { grid-template-columns: repeat(3, 1fr); }
    .checkout-grid { grid-template-columns: 1fr 380px; }
}

/* -----------------------------------------------
   39. RESPONSIVE — 1024px
   ----------------------------------------------- */
@media (max-width: 1024px) {
    :root { --section-py: 80px; }

    .header-nav { display: none; }
    .mobile-toggle { display: flex; }

    .categories-grid { grid-template-columns: repeat(4, 1fr); }

    .products-grid { grid-template-columns: repeat(2, 1fr); }
    .services-grid, .testimonials-grid, .blog-grid, .adoption-grid { grid-template-columns: repeat(2, 1fr); }
    .team-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .stat-item:nth-child(2)::after { display: none; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .detail-grid { grid-template-columns: 1fr; }
    .sidebar { position: static; }
    .product-detail-grid { grid-template-columns: 1fr; }
    .product-gallery { position: static; }
    .cart-page-grid { grid-template-columns: 1fr; }
    .cart-summary { position: static; }
    .checkout-grid { grid-template-columns: 1fr; }
    .checkout-order-summary { position: static; }
    .about-grid { grid-template-columns: 1fr; gap: var(--sp-10); }
    .about-image-wrap { max-width: 480px; }
    .contact-grid { grid-template-columns: 1fr; }
}

/* -----------------------------------------------
   40. RESPONSIVE — 768px
   ----------------------------------------------- */
@media (max-width: 768px) {
    :root { --header-h: 64px; --section-py: 64px; }

    .container { padding: 0 1.25rem; }

    .hero { min-height: auto; padding: calc(var(--header-h) + 40px) 0 64px; }
    .hero-title { font-size: clamp(2.25rem, 8vw, 3rem); }
    .hero-stats { gap: var(--sp-6); }
    .page-hero { padding: calc(var(--header-h) + 32px) 0 32px; }

    .categories-grid { grid-template-columns: repeat(4, 1fr); }

    .products-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
    .product-info,
    .product-card-body { padding: 12px 14px 14px; }
    .product-name,
    .product-card-title { font-size: var(--fs-sm); }
    .product-price,
    .product-card-price { font-size: 1.0625rem; }

    .services-grid, .testimonials-grid, .blog-grid, .adoption-grid { grid-template-columns: 1fr; }
    .team-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
    .stat-item:not(:last-child)::after { display: none; }
    .about-features { grid-template-columns: 1fr; }

    .filter-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: var(--sp-2);
    }
    .filter-tab { flex-shrink: 0; }

    .section-header { margin-bottom: var(--sp-10); }
    .footer-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
    .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
    .form-row { grid-template-columns: 1fr; }
    .cart-drawer { width: 100%; }
    .contact-form { padding: var(--sp-6); }
    .breadcrumb { font-size: var(--fs-xs); }

    .tabs-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tab-btn { white-space: nowrap; flex-shrink: 0; }
}

/* -----------------------------------------------
   41. RESPONSIVE — 480px
   ----------------------------------------------- */
@media (max-width: 480px) {
    .hero-actions { flex-direction: column; width: 100%; }
    .hero-actions .btn { width: 100%; }
    .hero-stats { flex-direction: column; gap: var(--sp-4); }

    .products-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .product-info,
    .product-card-body { padding: 10px 12px 12px; }
    .rating { display: none; }

    .team-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr; }

    .categories-grid { grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
    .category-item { padding: var(--sp-4) var(--sp-2); }
    .category-icon { width: 40px; height: 40px; }
    .category-name { font-size: var(--fs-xs); }

    .pagination a, .pagination span { width: 36px; height: 36px; font-size: var(--fs-xs); }

    .product-gallery-main { aspect-ratio: 4/3; }
    .product-detail-price .current { font-size: 1.5rem; }
    .product-detail-actions { flex-wrap: wrap; }
    .quantity-selector button { width: 36px; height: 36px; }
    .quantity-selector input { width: 44px; height: 36px; }
}

/* -----------------------------------------------
   42. RESPONSIVE — 375px
   ----------------------------------------------- */
@media (max-width: 375px) {
    .products-grid { grid-template-columns: 1fr; }
    .product-image-wrap { aspect-ratio: 4/3; }
    .categories-grid { grid-template-columns: repeat(3, 1fr); }
    .cta-title { font-size: 1.5rem; }
}

/* -----------------------------------------------
   43. PAGE-SPECIFIC ALIASES & ADDITIONS
   ----------------------------------------------- */

/* === A1. form-control alias for form-input === */
.form-control {
    width: 100%;
    padding: 14px 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    font-size: var(--fs-body);
    color: var(--text);
    transition: all var(--transition-fast);
}
.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(255,107,107,0.1);
}
[data-theme="dark"] .form-control:focus {
    box-shadow: 0 0 0 3px rgba(255,142,142,0.08);
}
.form-control::placeholder { color: var(--text-muted); }

/* === A2. product-grid alias for products-grid === */
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
}

/* === A3. qty-selector alias for quantity-selector === */
.qty-selector {
    display: flex;
    align-items: center;
    border: 1px solid var(--border);
    width: fit-content;
}
.qty-selector button,
.qty-minus,
.qty-plus {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}
.qty-selector button:hover,
.qty-minus:hover,
.qty-plus:hover { background: var(--bg-alt); color: var(--primary); }
.qty-selector input,
.qty-input {
    width: 56px;
    height: 44px;
    text-align: center;
    border: none;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    background: transparent;
    font-weight: 600;
}

/* === A4. page-hero-content === */
.page-hero-content { position: relative; z-index: 2; }

/* === A5. empty-state + empty-icon === */
.empty-state { text-align: center; padding: 60px 20px; }
.empty-state h3 { margin-bottom: 8px; }
.empty-state p { color: var(--text-muted); margin-bottom: 24px; }
.empty-icon { width: 64px; height: 64px; margin: 0 auto 20px; color: var(--text-muted); opacity: 0.4; }
.empty-icon svg { width: 100%; height: 100%; }

/* === A6. input-group === */
.input-group { display: flex; }
.input-group .form-input,
.input-group .form-control { flex: 1; }
.input-group .btn { flex-shrink: 0; }

/* === A7. prose alias for rich-content === */
.prose h2 { font-size: var(--fs-h3); margin: var(--sp-10) 0 var(--sp-4); }
.prose h3 { font-size: var(--fs-h4); margin: var(--sp-8) 0 var(--sp-3); }
.prose p { margin-bottom: var(--sp-4); line-height: 1.8; }
.prose img { margin: var(--sp-8) 0; }
.prose ul, .prose ol { padding-left: var(--sp-6); margin-bottom: var(--sp-4); }
.prose li { margin-bottom: var(--sp-2); line-height: 1.7; color: var(--text-secondary); }
.prose ul li { list-style: disc; }
.prose ol li { list-style: decimal; }

/* === A8. filter-checkbox alias for form-check === */
.filter-checkbox { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.filter-checkbox input { width: 18px; height: 18px; accent-color: var(--primary); margin-top: 2px; }
.filter-checkbox label { font-size: var(--fs-sm); color: var(--text-secondary); }

/* ==========================================
   B. KATEGORİ SAYFASI
   ========================================== */
.page-header-block {
    padding: var(--sp-12) 0 var(--sp-10);
    background: linear-gradient(135deg, var(--bg-warm) 0%, #F3EEFF 50%, var(--bg-warm) 100%);
    position: relative;
    text-align: center;
}
[data-theme="dark"] .page-header-block { background: linear-gradient(135deg, var(--bg-alt) 0%, rgba(108,60,225,0.06) 50%, var(--bg-alt) 100%); }
.page-header-block h1 { font-size: var(--fs-h1); margin-bottom: var(--sp-2); }
.page-header-block p { font-size: 1.0625rem; color: var(--text-secondary); max-width: 560px; margin: 0 auto var(--sp-3); }
.product-count {
    display: inline-block;
    font-size: var(--fs-sm);
    color: var(--primary);
    font-weight: 500;
    letter-spacing: 0.02em;
}

.shop-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--gap);
    align-items: start;
}
.shop-sidebar {
    position: sticky;
    top: calc(var(--header-h) + 20px);
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
}
.shop-sidebar .sidebar-widget,
.shop-sidebar > div {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    padding: var(--sp-6);
}
.shop-content { min-width: 0; }
.shop-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--sp-6);
    gap: var(--sp-4);
    flex-wrap: wrap;
}
.shop-toolbar-left,
.shop-toolbar-right {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}
.result-count,
.product-count {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}
.filter-group { margin-bottom: var(--sp-6); }
.filter-title {
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    margin-bottom: var(--sp-3);
}
.filter-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.price-range-inputs {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
}
.price-range-inputs input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    font-size: var(--fs-sm);
    color: var(--text);
}
.filter-cat-btn {
    padding: 10px 24px;
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.filter-cat-btn:hover { border-color: var(--primary); color: var(--primary); }
.filter-cat-btn.active { background: var(--primary); border-color: var(--primary); color: #FFFFFF; }

/* ==========================================
   C. ÜRÜN DETAY SAYFASI
   ========================================== */
/* Alias: product-detail → product-detail-grid */
.product-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-12);
    align-items: start;
}

/* Alias: product-main-image → product-gallery-main */
.product-main-image {
    aspect-ratio: 1;
    background: var(--bg-alt);
    overflow: hidden;
    margin-bottom: var(--sp-3);
    position: relative;
}
.product-main-image img { width: 100%; height: 100%; object-fit: contain; padding: 32px; }

/* Alias: product-thumbs → product-gallery-thumbs */
.product-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }

/* Alias: product-thumb → product-gallery-thumb */
.product-thumb {
    aspect-ratio: 1;
    background: var(--bg-alt);
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color var(--transition-fast);
}
.product-thumb.active,
.product-thumb:hover { border-color: var(--primary); }
.product-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }

/* Alias: product-price-block → product-detail-price */
.product-price-block {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: var(--sp-6);
    padding-bottom: var(--sp-6);
    border-bottom: 1px solid var(--border);
}
.product-price-block .current { font-family: var(--font-mono); font-size: 2rem; font-weight: 700; color: var(--text); }
.product-price-block .old { font-size: 1.125rem; color: var(--text-muted); text-decoration: line-through; font-family: var(--font-mono); }
.product-price-block .discount-badge { padding: 4px 10px; background: var(--primary); color: #FFFFFF; font-size: var(--fs-xs); font-weight: 700; }

/* Alias: product-short-desc → product-detail-desc */
.product-short-desc { margin-bottom: var(--sp-8); line-height: 1.8; color: var(--text-secondary); }

/* Alias: product-add-to-cart → product-detail-actions */
.product-add-to-cart { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-6); }

/* Alias: product-tabs → tabs */
.product-tabs { margin-top: var(--sp-16); }

/* Alias: product-description → rich-content */
.product-description h2 { font-size: var(--fs-h3); margin: var(--sp-10) 0 var(--sp-4); }
.product-description h3 { font-size: var(--fs-h4); margin: var(--sp-8) 0 var(--sp-3); }
.product-description p { margin-bottom: var(--sp-4); line-height: 1.8; }
.product-description img { margin: var(--sp-8) 0; }
.product-description ul, .product-description ol { padding-left: var(--sp-6); margin-bottom: var(--sp-4); }
.product-description li { margin-bottom: var(--sp-2); line-height: 1.7; color: var(--text-secondary); }
.product-description ul li { list-style: disc; }
.product-description ol li { list-style: decimal; }

/* Alias: product-stock → stock-status */
.product-stock { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; }
.product-stock .stock-dot { width: 8px; height: 8px; }
.product-stock.in-stock .stock-dot { background: var(--success); }
.product-stock.in-stock { color: var(--success); }
.product-stock.out-stock .stock-dot { background: var(--error); }
.product-stock.out-stock { color: var(--error); }

/* New product detail classes */
.product-title { font-size: var(--fs-h2); margin-bottom: var(--sp-2); }
.product-brand { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-4); }
.product-rating { display: flex; align-items: center; gap: 8px; margin-bottom: var(--sp-4); }
.product-rating .stars { display: flex; gap: 2px; color: var(--accent); }
.product-rating .stars svg { width: 16px; height: 16px; }
.product-rating .count { font-size: var(--fs-sm); color: var(--text-muted); }
.product-variants { margin-bottom: var(--sp-6); }
.variant-group { margin-bottom: var(--sp-4); }
.variant-label { font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--sp-2); display: block; }
.variant-options { display: flex; flex-wrap: wrap; gap: 8px; }
.variant-btn {
    padding: 8px 16px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.variant-btn:hover { border-color: var(--primary); }
.variant-btn.active { border-color: var(--primary); background: var(--primary-pale); color: var(--primary-dark); }
.btn-add-main { flex: 1; }
.product-wish-btn {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    background: var(--bg-card);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.product-wish-btn:hover { border-color: var(--primary); color: var(--primary); }
.product-wish-btn.active { border-color: var(--coral); color: var(--coral); background: rgba(255,107,107,.08); }
.product-wish-btn.active svg { fill: var(--coral); stroke: var(--coral); }
.product-wish-btn.pulse { animation: wishPulse .4s ease; }
@keyframes wishPulse { 0%{transform:scale(1)} 50%{transform:scale(1.15)} 100%{transform:scale(1)} }
.product-meta-info {
    margin-top: var(--sp-6);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--border);
    font-size: var(--fs-sm);
    color: var(--text-muted);
}
.product-meta-info span { display: block; margin-bottom: 4px; }
.specs-table { width: 100%; border-collapse: collapse; }
.specs-table tr:not(:last-child) { border-bottom: 1px solid var(--border-light); }
.specs-table td { padding: 12px 0; font-size: var(--fs-sm); }
.specs-table td:first-child { font-weight: 600; color: var(--text); width: 40%; }
.specs-table td:last-child { color: var(--text-secondary); }
.review-item { padding: var(--sp-6) 0; border-bottom: 1px solid var(--border-light); }
.review-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--sp-3); }
.review-author { font-weight: 600; }
.review-date { font-size: var(--fs-xs); color: var(--text-muted); }
.review-stars { display: flex; gap: 2px; color: var(--accent); margin-bottom: var(--sp-2); }
.review-stars svg { width: 14px; height: 14px; }
.review-form-wrap { margin-top: var(--sp-8); padding-top: var(--sp-8); border-top: 1px solid var(--border); }
.rating-select { display: flex; gap: 4px; margin-bottom: var(--sp-4); }
.rating-select .star { cursor: pointer; font-size: 24px; color: var(--border); transition: color var(--transition-fast); }
.rating-select .star:hover,
.rating-select .star.active { color: var(--accent); }

/* ==========================================
   D. HİZMETLER SAYFASI
   ========================================== */
.service-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: var(--sp-8);
}
.services-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
}
.service-detail-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    overflow: hidden;
    transition: all var(--transition);
    position: relative;
}
.service-detail-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}
.service-detail-icon-wrap {
    aspect-ratio: 16/11;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-pale) 0%, var(--secondary-pale) 100%);
    border-bottom: 1px solid var(--border-light);
}
.service-detail-icon-wrap i {
    font-size: 3rem;
    color: var(--primary);
    transition: transform 0.4s var(--ease);
}
.service-detail-card:hover .service-detail-icon-wrap i { transform: scale(1.15) rotate(-5deg); }
.service-detail-image {
    aspect-ratio: 16/11;
    overflow: hidden;
}
.service-detail-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.service-detail-card:hover .service-detail-image img { transform: scale(1.05); }
.service-detail-content,
.service-card-body { padding: var(--sp-6); }
.service-actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-6); }
.service-price-tag {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 8px 16px;
    background: var(--primary-pale);
    margin-top: var(--sp-4);
}
.service-price-tag .t-price {
    font-family: var(--font-mono);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--primary-dark);
}
.service-price-tag .t-label {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

/* ==========================================
   E. HİZMET DETAY SAYFASI
   ========================================== */
.service-detail-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--sp-10);
    align-items: start;
}
.service-detail-main { min-width: 0; }
.service-detail-sidebar {
    position: sticky;
    top: calc(var(--header-h) + 20px);
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
}
.service-sidebar-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    padding: var(--sp-6);
}
.service-sidebar-card h4 { font-size: var(--fs-body); margin-bottom: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border-light); }
.service-sidebar-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3) 0;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-light);
}
.service-sidebar-list a:last-child { border-bottom: none; }
.service-sidebar-list a:hover,
.service-sidebar-list a.active { color: var(--primary); }
.service-detail-hero-image { aspect-ratio: 16/9; overflow: hidden; margin-bottom: var(--sp-8); }
.service-detail-hero-image img { width: 100%; height: 100%; object-fit: cover; }
.service-description h2 { font-size: var(--fs-h3); margin: var(--sp-10) 0 var(--sp-4); }
.service-description h3 { font-size: var(--fs-h4); margin: var(--sp-8) 0 var(--sp-3); }
.service-description p { margin-bottom: var(--sp-4); line-height: 1.8; }
.service-features { margin: var(--sp-8) 0; }
.feature-list { list-style: none; padding: 0; }
.feature-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-light); }
.feature-item svg,
.feature-item i { color: var(--secondary); flex-shrink: 0; margin-top: 2px; }
.service-sidebar-price { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700; color: var(--primary); margin-bottom: var(--sp-4); }
.service-sidebar-info { list-style: none; padding: 0; }
.service-sidebar-info li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border-light); font-size: var(--fs-sm); }

/* ==========================================
   F. HAKKIMIZDA SAYFASI
   ========================================== */
/* Aliases */
.about-story-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-16);
    align-items: center;
}
.about-story-content h2 { margin-bottom: var(--sp-6); }
.about-story-content p { margin-bottom: var(--sp-6); line-height: 1.8; }
.about-story-image { position: relative; }
.about-story-image::after {
    content: '';
    position: absolute;
    bottom: -16px;
    right: -16px;
    width: 100%;
    height: 100%;
    border: 3px solid var(--primary);
    z-index: -1;
    opacity: 0.3;
}
.about-story-image img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }

.about-values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
    margin: var(--sp-8) 0 var(--sp-10);
}
.about-value-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
    padding: var(--sp-8);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    transition: border-color 0.3s, box-shadow 0.3s;
}
.about-value-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
}
.about-value-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-pale);
    color: var(--primary);
    flex-shrink: 0;
}
.about-value-icon svg { width: 26px; height: 26px; }
.about-value-card h3 { font-size: var(--fs-lg); margin: 0; }
.about-value-card p { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; margin: 0; }

.about-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
}
.about-stat { text-align: center; padding: var(--sp-6) 0; position: relative; }
.about-stat-number {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
    margin-bottom: 8px;
}
.about-stat-label { font-size: var(--fs-sm); color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }

/* team-card-image → team-image-wrap alias */
.team-card-image {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--bg-alt);
}
.team-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.team-card:hover .team-card-image img { transform: scale(1.05); }

/* team-card-body → team-info alias */
.team-card-body { padding: 20px; text-align: center; }
.team-card-body h3 { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.team-card-body p { font-size: var(--fs-sm); color: var(--secondary); font-weight: 500; margin-bottom: 0; }

/* Avatar fallback */
.team-card-avatar {
    width: 100%;
    aspect-ratio: 1;
    background: var(--bg-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
}

/* ==========================================
   G. İLETİŞİM SAYFASI
   ========================================== */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--sp-12);
}
.contact-form-wrap {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    padding: var(--sp-10);
}
.contact-info-wrap { display: flex; flex-direction: column; gap: var(--sp-8); }
.contact-info-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    padding: var(--sp-8);
}
.contact-social-links { display: flex; gap: 8px; margin-top: var(--sp-6); }
.contact-social-link {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-pale);
    color: var(--primary);
    transition: all var(--transition-fast);
}
.contact-social-link:hover { background: var(--primary); color: #FFFFFF; }
.contact-social-link svg { width: 18px; height: 18px; }

/* ==========================================
   H. SAHİPLENDİRME SAYFASI
   ========================================== */
.adoption-card-image {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
}
.adoption-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.adoption-card:hover .adoption-card-image img { transform: scale(1.05); }

.adoption-card-body { padding: 20px; }
.adoption-type-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 12px;
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
}
.adoption-type-badge.available { background: var(--secondary); color: #FFFFFF; }
.adoption-type-badge.reserved { background: var(--accent); color: var(--text); }
.adoption-type-badge.adopted { background: var(--text-muted); color: #FFFFFF; }

.adoption-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
    margin-bottom: var(--sp-12);
}
.adoption-info-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
    padding: var(--sp-6);
    text-align: center;
}
.adoption-info-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
    transform: translateY(-3px);
}
.adoption-info-card h3 { font-size: var(--fs-lg); margin: var(--sp-3) 0 var(--sp-2); }
.adoption-info-card p { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; }
.adoption-info-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--sp-4);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-pale);
    color: var(--primary);
}
.adoption-info-icon svg { width: 28px; height: 28px; }
.adoption-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--gap);
    margin: var(--sp-12) 0;
}
.adoption-step { text-align: center; padding: var(--sp-6); }
.adoption-step-number {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #FFFFFF;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
    margin: 0 auto var(--sp-4);
}

/* Grooming section */
.grooming-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
}
.grooming-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    overflow: hidden;
}
.grooming-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.grooming-before,
.grooming-after,
.grooming-single { aspect-ratio: 1; overflow: hidden; position: relative; }
.grooming-before img,
.grooming-after img,
.grooming-single img { width: 100%; height: 100%; object-fit: cover; }
.grooming-label {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 2px 8px;
    font-size: var(--fs-xs);
    font-weight: 700;
    background: rgba(0,0,0,0.6);
    color: #FFF;
}
.grooming-info { padding: var(--sp-4); }

/* ==========================================
   I. SEPET SAYFASI
   ========================================== */
.cart-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--sp-10);
    align-items: start;
}
.cart-items { min-width: 0; }
.cart-table-header {
    display: grid;
    grid-template-columns: 3fr 1fr 120px 1fr 40px;
    gap: var(--sp-4);
    padding: var(--sp-4) 0;
    border-bottom: 2px solid var(--border);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-muted);
}
.cart-col-product { }
.cart-col-price,
.cart-col-total { text-align: right; }
.cart-col-qty { text-align: center; }
.cart-col-action { text-align: center; }
.cart-item-page {
    display: grid;
    grid-template-columns: 3fr 1fr 120px 1fr 40px;
    gap: var(--sp-4);
    padding: var(--sp-6) 0;
    border-bottom: 1px solid var(--border-light);
    align-items: center;
}
.cart-item-image { width: 80px; height: 80px; background: var(--bg-alt); overflow: hidden; flex-shrink: 0; }
.cart-item-image img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.cart-item-info { display: flex; gap: var(--sp-4); align-items: center; }
.cart-item-name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); }
.cart-item-name a { color: var(--text); }
.cart-item-name a:hover { color: var(--primary); }
.cart-item-variant { font-size: var(--fs-xs); color: var(--text-muted); }
.cart-item-sku { font-size: var(--fs-xs); color: var(--text-muted); font-family: var(--font-mono); }
.cart-remove-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: color var(--transition-fast);
}
.cart-remove-btn:hover { color: var(--error); }
.cart-remove-btn svg { width: 18px; height: 18px; }
.cart-summary-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    padding: var(--sp-8);
    position: sticky;
    top: calc(var(--header-h) + 20px);
}
.cart-summary-card h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-6); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border); }
.cart-summary-divider { height: 1px; background: var(--border); margin: var(--sp-4) 0; }
.cart-summary-total {
    font-size: 1.125rem;
    font-weight: 700;
    padding-top: var(--sp-4);
    margin-top: var(--sp-3);
    border-top: 2px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cart-summary-total .amount { font-family: var(--font-mono); color: var(--primary); font-size: 1.375rem; }
.cart-free-shipping-bar { margin: var(--sp-4) 0; }
.cart-free-shipping-bar p { font-size: var(--fs-sm); margin-bottom: var(--sp-2); }
.cart-free-shipping-progress { height: 4px; background: var(--border-light); overflow: hidden; }
.cart-free-shipping-progress div { height: 100%; background: var(--secondary); transition: width 0.5s var(--ease); }
.cart-coupon-form { margin: var(--sp-4) 0; }

/* ==========================================
   J. CHECKOUT SAYFASI
   ========================================== */
.checkout-layout {
    display: grid;
    grid-template-columns: 1fr 440px;
    gap: var(--sp-10);
    align-items: start;
}
.checkout-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    padding: var(--sp-8);
    margin-bottom: var(--sp-6);
}
.checkout-panel h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-6); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border); }
.checkout-payment-option {
    border: 1px solid var(--border);
    padding: var(--sp-4) var(--sp-6);
    margin-bottom: var(--sp-3);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    transition: all var(--transition-fast);
}
.checkout-payment-option:hover,
.checkout-payment-option.active { border-color: var(--primary); }
.checkout-payment-option.active { background: var(--primary-pale); }
.checkout-summary {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    padding: var(--sp-8);
    position: sticky;
    top: calc(var(--header-h) + 20px);
}
.checkout-steps {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: var(--sp-10);
}
.checkout-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}
.checkout-step.active { color: var(--primary); }
.checkout-step.active .checkout-step-number { background: var(--primary); color: #FFF; }
.checkout-step-number {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--border);
    color: var(--text-muted);
    font-weight: 700;
    font-size: var(--fs-sm);
}
.checkout-step-label { font-weight: 600; }
.checkout-step-line { width: 40px; height: 2px; background: var(--border); margin: 0 var(--sp-3); }
.checkout-main { min-width: 0; }
.checkout-login-prompt { background: var(--bg-alt); padding: var(--sp-4); margin-bottom: var(--sp-6); font-size: var(--fs-sm); }
.checkout-saved-addresses { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-6); }
.checkout-address-option { position: relative; }
.checkout-address-card {
    padding: var(--sp-4);
    border: 2px solid var(--border-light);
    cursor: pointer;
    transition: border-color var(--transition-fast);
}
.checkout-address-card:hover,
.checkout-address-option input:checked + .checkout-address-card { border-color: var(--primary); }
.checkout-address-form { margin-top: var(--sp-4); }
.checkout-payment-methods { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.checkout-payment-card {
    padding: var(--sp-4);
    border: 2px solid var(--border-light);
    cursor: pointer;
    transition: border-color var(--transition-fast);
}
.checkout-cc-form { margin-top: var(--sp-4); padding: var(--sp-4); background: var(--bg-alt); }
.checkout-bank-info { margin-top: var(--sp-4); padding: var(--sp-4); background: var(--bg-alt); font-size: var(--fs-sm); }
.checkout-terms { margin: var(--sp-6) 0; }
.checkout-nav { display: flex; justify-content: space-between; gap: var(--sp-4); margin-top: var(--sp-8); }
.checkout-items-list { margin-bottom: var(--sp-6); }
.checkout-item {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--border-light);
}
.checkout-item-image { width: 60px; height: 60px; background: var(--bg-alt); flex-shrink: 0; overflow: hidden; }
.checkout-item-image img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.checkout-item-info { flex: 1; font-size: var(--fs-sm); }
.checkout-item-qty { font-size: var(--fs-xs); color: var(--text-muted); }

/* ==========================================
   K. HESAP SAYFALARI
   ========================================== */
.auth-card {
    max-width: 480px;
    margin: 0 auto;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    padding: var(--sp-12);
}
.auth-card h2 { text-align: center; margin-bottom: var(--sp-2); }
.auth-card p { text-align: center; margin-bottom: var(--sp-8); }
.auth-footer { text-align: center; margin-top: var(--sp-6); font-size: var(--fs-sm); }

.account-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--sp-8);
    align-items: start;
}
.account-main { min-width: 0; }
.account-sidebar {
    position: sticky;
    top: calc(var(--header-h) + 20px);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    padding: var(--sp-6);
}
/* account-nav rules moved to section N (account nav fix) */
.account-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--sp-6);
}
.account-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--sp-4);
    margin-bottom: var(--sp-8);
}
.account-stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    padding: var(--sp-6);
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}
.account-stat-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-pale);
    color: var(--primary);
    flex-shrink: 0;
}
.account-stat-icon svg { width: 22px; height: 22px; }
.account-orders-table { width: 100%; }
.account-order-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr auto;
    gap: var(--sp-4);
    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--border-light);
    align-items: center;
    font-size: var(--fs-sm);
}
.address-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--sp-4);
}
.address-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    padding: var(--sp-6);
    position: relative;
}
.address-card.address-default { border-color: var(--primary); }
.address-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.address-form-wrap {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    padding: var(--sp-8);
    margin-bottom: var(--sp-6);
}
.form-actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-6); }

/* ==========================================
   L. BLOG DETAY SAYFASI
   ========================================== */
.blog-detail-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--sp-10);
    align-items: start;
}
.blog-detail-main { min-width: 0; }
.blog-detail-sidebar {
    position: sticky;
    top: calc(var(--header-h) + 20px);
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
}
.blog-sidebar-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    padding: var(--sp-6);
}
.blog-sidebar-card h4 { font-size: var(--fs-body); margin-bottom: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border-light); }
.blog-sidebar-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3) 0;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-light);
}
.blog-sidebar-list a:last-child { border-bottom: none; }
.blog-sidebar-list a:hover,
.blog-sidebar-list a.active { color: var(--primary); }
.blog-detail-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin-bottom: 10px;
}
.blog-detail-meta span { display: flex; align-items: center; gap: 4px; }
.blog-detail-meta svg { width: 14px; height: 14px; }
.blog-detail-content h2 { font-size: var(--fs-h3); margin: var(--sp-10) 0 var(--sp-4); }
.blog-detail-content h3 { font-size: var(--fs-h4); margin: var(--sp-8) 0 var(--sp-3); }
.blog-detail-content p { margin-bottom: var(--sp-4); line-height: 1.8; }
.blog-detail-content img { margin: var(--sp-8) 0; }
.blog-detail-content ul, .blog-detail-content ol { padding-left: var(--sp-6); margin-bottom: var(--sp-4); }
.blog-detail-content li { margin-bottom: var(--sp-2); line-height: 1.7; color: var(--text-secondary); }
.blog-detail-content ul li { list-style: disc; }
.blog-detail-content ol li { list-style: decimal; }
.blog-detail-header { margin-bottom: var(--sp-8); }
.blog-detail-header h1 { margin-bottom: var(--sp-4); }
.blog-meta-author { display: flex; align-items: center; gap: 8px; }
.blog-meta-author img { width: 32px; height: 32px; object-fit: cover; }
.blog-detail-image { aspect-ratio: 16/9; overflow: hidden; margin-bottom: var(--sp-8); }
.blog-detail-image img { width: 100%; height: 100%; object-fit: cover; }
.blog-detail-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--sp-6) 0; }
.blog-detail-share { margin-top: var(--sp-6); padding-top: var(--sp-6); border-top: 1px solid var(--border); }
.blog-search-form { display: flex; gap: 0; }
.blog-search-form input { flex: 1; border-radius: var(--radius-sm) 0 0 var(--radius-sm); border-right: none; min-width: 0; }
.blog-search-form button { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; white-space: nowrap; padding: 0 var(--sp-4); flex-shrink: 0; }
.blog-sidebar-posts { list-style: none; padding: 0; }
.blog-sidebar-posts li { padding: var(--sp-3) 0; border-bottom: 1px solid var(--border-light); }
.blog-sidebar-posts li:last-child { border-bottom: none; }
.blog-sidebar-post-title { font-size: var(--fs-sm); font-weight: 600; }
.blog-sidebar-post-title a { color: var(--text); }
.blog-sidebar-post-title a:hover { color: var(--primary); }
.blog-sidebar-post-date { font-size: var(--fs-xs); color: var(--text-muted); }

/* ==========================================
   M. SİPARİŞ ONAY SAYFASI
   ========================================== */
.order-confirm-card {
    max-width: 700px;
    margin: 0 auto;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    padding: var(--sp-12);
    text-align: center;
}
.order-confirm-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--sp-6);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--success-pale);
    color: var(--success);
}
.order-confirm-icon svg { width: 32px; height: 32px; }
.order-confirm-number {
    font-family: var(--font-mono);
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: var(--sp-8);
}
.order-confirm-details { text-align: left; margin-bottom: var(--sp-6); }
.order-confirm-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-light);
    font-size: var(--fs-sm);
}
.order-confirm-items { text-align: left; margin-bottom: var(--sp-6); }
.order-confirm-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-light);
    font-size: var(--fs-sm);
}
.order-confirm-item-info { flex: 1; }
.order-confirm-totals { text-align: left; margin-bottom: var(--sp-6); }
.order-confirm-total {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-weight: 700;
    font-size: 1.125rem;
    border-top: 2px solid var(--border);
}
.order-confirm-actions { display: flex; justify-content: center; gap: var(--sp-4); margin-top: var(--sp-8); }

/* ==========================================
   N. MISSING GLOBAL CLASSES
   ========================================== */

/* === Breadcrumb system (breadcrumb.php) === */
.breadcrumb-nav {
    padding: var(--sp-4) 0;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}
.breadcrumb-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.breadcrumb-list li {
    display: flex;
    align-items: center;
    gap: 4px;
}
.breadcrumb-list a { color: var(--text-muted); }
.breadcrumb-list a:hover { color: var(--primary); }
.breadcrumb-sep {
    display: inline-flex;
    align-items: center;
    color: var(--border-strong);
    margin: 0 2px;
}
.breadcrumb-sep svg { width: 12px; height: 12px; }
.breadcrumb-current { color: var(--text); font-weight: 500; }

/* === Stagger animation system (main.js) === */
.stagger-container .stagger-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.stagger-container.visible .stagger-item,
.stagger-item.visible { opacity: 1; transform: translateY(0); }
.stagger-container.visible .stagger-item:nth-child(1) { transition-delay: 0.05s; }
.stagger-container.visible .stagger-item:nth-child(2) { transition-delay: 0.1s; }
.stagger-container.visible .stagger-item:nth-child(3) { transition-delay: 0.15s; }
.stagger-container.visible .stagger-item:nth-child(4) { transition-delay: 0.2s; }
.stagger-container.visible .stagger-item:nth-child(5) { transition-delay: 0.25s; }
.stagger-container.visible .stagger-item:nth-child(6) { transition-delay: 0.3s; }
.stagger-container.visible .stagger-item:nth-child(7) { transition-delay: 0.35s; }
.stagger-container.visible .stagger-item:nth-child(8) { transition-delay: 0.4s; }
.stagger-container.visible .stagger-item:nth-child(9) { transition-delay: 0.45s; }
.stagger-container.visible .stagger-item:nth-child(10) { transition-delay: 0.5s; }
.stagger-container.visible .stagger-item:nth-child(11) { transition-delay: 0.55s; }
.stagger-container.visible .stagger-item:nth-child(12) { transition-delay: 0.6s; }

/* === CTA block === */
.cta-block {
    text-align: center;
    position: relative;
    z-index: 2;
}

/* === t-label — small muted label text === */
.t-label {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    font-weight: 400;
}

/* === Scroll progress bar === */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--primary);
    z-index: calc(var(--z-header) + 1);
    transition: width 0.1s linear;
}

/* === Back to top button === */
.back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #FFFFFF;
    border: none;
    cursor: pointer;
    z-index: var(--z-sticky);
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-primary);
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--primary-dark); transform: translateY(-2px); }
.back-to-top svg { width: 20px; height: 20px; }

/* === Demo banner === */
.demo-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-inverse);
    color: var(--text-inverse);
    padding: 8px 16px;
    text-align: center;
    font-size: var(--fs-xs);
    z-index: var(--z-toast);
}
.demo-banner a { color: var(--primary-light); text-decoration: underline; }

/* === Cart drawer header/body aliases === */
.cart-drawer-header {
    padding: var(--sp-6) var(--sp-8);
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cart-drawer-body { flex: 1; overflow-y: auto; padding: var(--sp-6) var(--sp-8); }

/* === Account nav fix — <a> used directly as nav items === */
.account-nav {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.account-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    transition: all var(--transition-fast);
    border-left: 2px solid transparent;
}
.account-nav-item:hover { color: var(--primary); background: var(--primary-pale); }
.account-nav-item.active { color: var(--primary); border-left-color: var(--primary); font-weight: 600; }
.account-nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.account-nav-logout { color: var(--error) !important; }
.account-nav-logout:hover { background: var(--error-pale) !important; }

/* === Service price (used in related services) === */
.service-price {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--primary-dark);
    display: inline-block;
    padding: 4px 12px;
    background: var(--primary-pale);
    margin-bottom: var(--sp-3);
}

/* === Order address card (siparis-detay) === */
.order-address-card {
    background: var(--bg-alt);
    padding: var(--sp-4);
    font-size: var(--fs-sm);
    line-height: 1.6;
}

/* === Status badge (hesap pages) === */
.status-badge {
    display: inline-flex;
    padding: 4px 10px;
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.status-pending { background: var(--warning-pale); color: var(--warning); }
.status-processing { background: var(--info-pale); color: var(--info); }
.status-shipped { background: var(--accent-pale); color: var(--accent-dark); }
.status-delivered { background: var(--success-pale); color: var(--success); }
.status-cancelled { background: var(--error-pale); color: var(--error); }

/* ==========================================
   O. CART DRAWER EXTRAS
   ========================================== */
.cart-drawer-footer {
    padding: var(--sp-6) var(--sp-8);
    border-top: 1px solid var(--border);
}
.cart-drawer-footer .btn { width: 100%; margin-bottom: var(--sp-3); }
.cart-drawer-footer .btn:last-child { margin-bottom: 0; }
.cart-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--sp-4);
    font-size: var(--fs-body);
}
.cart-total strong {
    font-family: var(--font-mono);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
}
.cart-item-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-sm);
}
.cart-item-qty-text {
    color: var(--text-muted);
    font-size: var(--fs-xs);
}
.cart-item-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}
.qty-selector-sm {
    display: flex;
    align-items: center;
    border: 1px solid var(--border);
    width: fit-content;
}
.qty-selector-sm button {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}
.qty-selector-sm button:hover { border-color: var(--primary); color: var(--primary); }
.qty-selector-sm input {
    width: 36px;
    height: 28px;
    text-align: center;
    border: none;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    background: transparent;
    font-size: var(--fs-xs);
    font-weight: 600;
}

/* ==========================================
   P. ERROR PAGES (403, 404, 500, 503)
   ========================================== */
.error-section {
    min-height: calc(100vh - var(--header-h));
    display: flex;
    align-items: center;
    justify-content: center;
}
.error-content { text-align: center; }
.error-content .error-code {
    font-family: var(--font-display);
    font-size: clamp(100px, 20vw, 200px);
    font-weight: 800;
    color: var(--border-light);
    line-height: 1;
    margin-bottom: var(--sp-4);
}
[data-theme="dark"] .error-content .error-code { color: var(--border); }
.error-icon { margin-bottom: var(--sp-6); }
.error-content h1 { margin-bottom: var(--sp-4); }
.error-content p { max-width: 460px; margin: 0 auto var(--sp-6); }
.error-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-4);
    flex-wrap: wrap;
}

/* ==========================================
   Q. LEGAL PAGES
   ========================================== */
.legal-content { margin-bottom: var(--sp-16); }
.legal-content h1 { margin-bottom: var(--sp-4); }

/* ==========================================
   R. ORDER DETAIL (hesap/siparis-detay)
   ========================================== */
.order-detail-info {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    padding: var(--sp-6);
}
.order-detail-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--sp-6);
}
.order-detail-info-grid div { display: flex; flex-direction: column; gap: 4px; }
.order-detail-info-grid .t-label { font-size: var(--fs-xs); }
.order-items-list { display: flex; flex-direction: column; }
.order-item-row {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--border-light);
}
.order-item-row:last-child { border-bottom: none; }
.order-item-image {
    width: 60px;
    height: 60px;
    background: var(--bg-alt);
    flex-shrink: 0;
    overflow: hidden;
}
.order-item-image img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.order-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.order-item-info a { color: var(--text); font-weight: 600; font-size: var(--fs-sm); }
.order-item-info a:hover { color: var(--primary); }
.order-totals {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    padding: var(--sp-6);
}
.order-total-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: var(--fs-sm);
    border-bottom: 1px solid var(--border-light);
}
.order-total-row:last-child { border-bottom: none; }
.order-total-grand {
    font-weight: 700;
    font-size: 1.125rem;
    padding-top: var(--sp-4);
    margin-top: var(--sp-2);
    border-top: 2px solid var(--border);
    border-bottom: none;
}

/* ==========================================
   S. MISC MISSING CLASSES
   ========================================== */
/* hero-stat-item (index hero stats) */
.hero-stat-item { }

/* related-products section wrapper */
.related-products { }
.related-products .section-header { margin-bottom: var(--sp-8); }

/* product-badge-float — discount badge on product detail image */
.product-badge-float {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
}

/* badge-coral — accent badge color */
.badge-coral { background: var(--primary); color: #FFFFFF; }

/* badge-lg — larger badge */
.badge-lg { padding: 6px 14px; font-size: var(--fs-xs); }

/* pagination-dots */
.pagination-dots { border: none; color: var(--text-muted); }

/* blog-filters / blog-filter-tags / blog-search-info */
.blog-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-8);
}
.blog-filter-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.blog-search-info {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

/* alert-danger alias for alert-error */
.alert-danger { background: var(--error-pale); border-left: 3px solid var(--error); color: var(--error); }

/* accordion-header / accordion-body (iletisim FAQ) */
.accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--sp-5) 0;
    font-weight: 600;
    cursor: pointer;
}
.accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--duration) var(--ease);
}

/* ==========================================
   RESPONSIVE — NEW CLASSES
   ========================================== */
@media (max-width: 1200px) {
    .product-grid { grid-template-columns: repeat(3, 1fr); }
    .checkout-layout { grid-template-columns: 1fr 380px; }
}

@media (max-width: 1024px) {
    .shop-layout { grid-template-columns: 1fr; }
    .shop-sidebar { position: static; order: -1; }
    .service-detail-layout { grid-template-columns: 1fr; }
    .service-detail-sidebar { position: static; }
    .product-detail { grid-template-columns: 1fr; }
    .account-layout { grid-template-columns: 1fr; }
    .account-sidebar { position: static; }
    .blog-detail-layout { grid-template-columns: 1fr; }
    .blog-detail-sidebar { position: static; }
    .cart-layout { grid-template-columns: 1fr; }
    .cart-summary-card { position: static; }
    .checkout-layout { grid-template-columns: 1fr; }
    .checkout-summary { position: static; }
    .contact-layout { grid-template-columns: 1fr; }
    .about-story-layout { grid-template-columns: 1fr; gap: var(--sp-10); }
    .about-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .product-grid { grid-template-columns: repeat(2, 1fr); }
    .services-list { grid-template-columns: repeat(2, 1fr); }
    .grooming-grid { grid-template-columns: repeat(2, 1fr); }
    .adoption-info-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .cart-table-header { display: none; }
    .cart-item-page { grid-template-columns: 1fr; gap: var(--sp-2); }
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
    .services-list { grid-template-columns: 1fr; }
    .about-values-grid { grid-template-columns: 1fr; }
    .about-stats-grid { grid-template-columns: 1fr 1fr; }
    .contact-form-wrap { padding: var(--sp-6); }
    .auth-card { padding: var(--sp-8); }
    .account-order-row { grid-template-columns: 1fr 1fr; }
    .checkout-saved-addresses { grid-template-columns: 1fr; }
    .grooming-grid { grid-template-columns: 1fr; }
    .adoption-info-grid { grid-template-columns: 1fr; }
    .service-categories { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: var(--sp-2); }
    .filter-cat-btn { flex-shrink: 0; }
}

@media (max-width: 480px) {
    .product-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .about-stats-grid { grid-template-columns: 1fr; }
    .order-confirm-card { padding: var(--sp-8); }
    .product-detail .product-main-image { aspect-ratio: 4/3; }
    .product-add-to-cart { flex-wrap: wrap; }
    .checkout-steps { flex-wrap: wrap; gap: var(--sp-2); }
}

@media (max-width: 375px) {
    .product-grid { grid-template-columns: 1fr; }
}

/* -----------------------------------------------
   44. PRINT
   ----------------------------------------------- */
@media print {
    .site-header, .mobile-menu, .cart-overlay, .cart-drawer, .toast-container,
    .site-footer, .hero-scroll, .product-actions, .share-buttons, .modal-overlay {
        display: none !important;
    }

    body { color: #000; background: #fff; }
    .section { padding: 20px 0; }
}

/* =============================================
   ZIGGY THEME OVERRIDES — Rounded, Playful Pet E-Commerce
   Applied on top of existing styles
   ============================================= */

/* -----------------------------------------------
   Z1. GLOBAL RADIUS SWEEP
   ----------------------------------------------- */
.badge,
.tag,
.category-icon,
.category-item,
.product-card,
.product-card-image,
.product-action-btn,
.service-card,
.service-card-image,
.service-icon,
.blog-card,
.blog-card-image,
.blog-card-category,
.testimonial-card,
.testimonial-avatar,
.testimonial-author picture,
.team-card,
.team-card-image,
.adoption-card,
.adoption-card-image,
.about-value-card,
.about-value-icon,
.contact-info-card,
.contact-info-icon,
.cart-summary,
.cart-drawer,
.cart-item-image,
.checkout-section,
.checkout-order-summary,
.form-control,
.form-input,
.form-select,
.form-textarea,
.sort-select,
.filter-tab,
.search-modal-inner,
.search-close,
.search-input-wrap input,
.sidebar-widget,
.blog-sidebar-card,
.accordion-item,
.faq-item,
.faq-icon,
.hero-badge,
.hero-float,
.page-hero,
.empty-state,
.alert,
.toast,
.modal-content,
.payment-method,
.order-confirm-card,
.auth-card,
.account-card,
.grooming-card,
.grooming-compare,
.adoption-info-card,
.adoption-step,
.filter-group,
.shop-toolbar,
.product-tabs .tabs,
.tab-content,
.specs-table,
.review-item,
.review-form-wrap,
.product-meta-info,
.variant-btn,
.qty-selector,
.breadcrumb-nav,
.blog-detail-image,
.product-main-image,
.product-thumb,
.contact-map,
.footer-newsletter-form,
.footer-newsletter-form input,
.price-range-inputs input {
    border-radius: var(--radius-md);
}

/* Pill shapes */
.badge,
.tag,
.blog-card-category,
.hero-badge,
.product-tabs .tab-btn,
.variant-btn,
.filter-tab,
.filter-cat-btn {
    border-radius: var(--radius-full);
}

/* Circle shapes */
.category-icon,
.service-icon,
.about-value-icon,
.contact-info-icon,
.faq-icon,
.adoption-step-number,
.testimonial-avatar,
.testimonial-author picture,
.footer-social a,
.share-btn,
.contact-social-link,
.team-social a,
.product-action-btn,
.cart-close,
.search-close,
.back-to-top,
.qty-selector button {
    border-radius: 50%;
}

/* Large radius */
.product-card,
.blog-card,
.service-card,
.testimonial-card,
.team-card,
.adoption-card,
.about-value-card,
.contact-info-card,
.cart-summary,
.checkout-section,
.sidebar-widget,
.blog-sidebar-card,
.auth-card,
.account-card,
.grooming-card,
.adoption-info-card,
.search-modal-inner,
.cart-drawer,
.hero-float,
.order-confirm-card {
    border-radius: var(--radius-lg);
}

/* Image top radius */
.product-card-image,
.blog-card-image,
.service-card-image,
.team-card-image,
.adoption-card-image,
.grooming-compare {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Input radius */
.form-control,
.form-input,
.form-select,
.form-textarea,
.sort-select,
.price-range-inputs input,
.search-input-wrap input,
.footer-newsletter-form input {
    border-radius: var(--radius-sm);
}

/* XL radius */
.page-hero {
    border-radius: 0;
}

/* -----------------------------------------------
   Z2. TOP ANNOUNCEMENT BAR
   ----------------------------------------------- */
.top-bar {
    background: var(--bg-inverse);
    color: #FFFFFF;
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    font-size: var(--fs-xs);
    position: relative;
    z-index: calc(var(--z-header) + 1);
    transition: margin-top 0.3s var(--ease);
}

.top-bar.top-bar-hidden {
    margin-top: calc(-1 * var(--topbar-h));
}

.top-bar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
}
.top-bar-left, .top-bar-center, .top-bar-right {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}
.top-bar-center { flex-shrink: 1; }

.top-bar-left {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
}

.top-bar-left a {
    color: rgba(255,255,255,0.7);
    font-size: var(--fs-xs);
    transition: color 0.2s;
}
.top-bar-left a:hover { color: #fff; }

.top-bar-center {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    font-weight: 500;
}

.top-bar-center .top-badge {
    background: var(--secondary);
    color: #fff;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    font-weight: 700;
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}

.top-bar-right a {
    color: rgba(255,255,255,0.7);
    font-size: var(--fs-xs);
    transition: color 0.2s;
}
.top-bar-right a:hover { color: #fff; }

/* Adjust header position for top bar */
.top-bar + .site-header {
    top: var(--topbar-h);
}

.top-bar ~ .mobile-menu {
    padding-top: calc(var(--header-h) + var(--topbar-h) + 32px);
}

/* Hide topbar on scroll — margin-top approach */
.site-header.topbar-hidden {
    top: 0 !important;
}

/* -----------------------------------------------
   Z3. HEADER SEARCH BAR (inline)
   ----------------------------------------------- */
.header-search-inline {
    flex: 1;
    max-width: 420px;
    display: flex;
    align-items: center;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    padding: 0 4px 0 16px;
    height: 44px;
    transition: all 0.2s;
}

.header-search-inline:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(108,60,225,0.1);
}

[data-theme="dark"] .header-search-inline {
    background: var(--bg-elevated);
}

.header-search-inline input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: var(--fs-sm);
    color: var(--text);
    font-family: var(--font-body);
}

.header-search-inline input::placeholder { color: var(--text-muted); }

.header-search-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
}

.header-search-btn:hover { background: var(--primary-dark); }
.header-search-btn svg { width: 16px; height: 16px; }

/* Cart badge with total */
.header-cart-total {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--text);
    margin-left: 4px;
    display: none;
}

@media (min-width: 1024px) {
    .header-cart-total { display: inline; }
}

/* -----------------------------------------------
   Z4. HERO SLIDER
   ----------------------------------------------- */
/* ---- HERO V2 — Premium Crossfade Slider ---- */
.hero-v2 {
    position: relative;
    overflow: hidden;
    min-height: 640px;
}

/* Slide — crossfade */
.hero-v2-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s cubic-bezier(.4,0,.2,1), visibility 0.8s;
    z-index: 0;
}
.hero-v2-slide.active {
    position: relative;
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

/* Grid: sol içerik, sağ görsel */
.hero-v2-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-12);
    align-items: center;
    min-height: 640px;
    padding: calc(var(--header-h) + var(--topbar-h) + 48px) 0 80px;
}

/* İçerik animasyonu */
.hero-v2-content {
    position: relative;
    z-index: 3;
}
.hero-v2-slide.active .hero-v2-content {
    animation: heroContentIn 0.9s cubic-bezier(.16,1,.3,1) both;
}
@keyframes heroContentIn {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hero-v2-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: rgba(108,60,225,.1);
    color: var(--primary);
    font-size: var(--fs-xs);
    font-weight: 600;
    border-radius: var(--radius-full);
    margin-bottom: var(--sp-4);
}
.hero-v2-badge svg { flex-shrink: 0; }

.hero-v2-content h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 700;
    line-height: 1.12;
    margin-bottom: var(--sp-4);
    color: var(--text);
}
.hero-v2-content h1 span { color: var(--secondary); }

.hero-v2-content > p {
    font-size: 1.0625rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: var(--sp-6);
    max-width: 480px;
}

.hero-v2-actions {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-bottom: var(--sp-6);
}

.hero-v2-trust {
    display: flex;
    gap: var(--sp-5);
    flex-wrap: wrap;
}
.hero-v2-trust span {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    font-weight: 500;
}
.hero-v2-trust svg { color: var(--success); }

/* Görsel alan */
.hero-v2-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.hero-v2-slide.active .hero-v2-visual {
    animation: heroVisualIn 1s cubic-bezier(.16,1,.3,1) 0.15s both;
}
@keyframes heroVisualIn {
    from { opacity: 0; transform: scale(0.88) translateX(40px); }
    to   { opacity: 1; transform: scale(1) translateX(0); }
}

.hero-v2-img-wrap {
    position: relative;
    width: 250%;
    max-width: 1200px;
}
.hero-v2-img-blob {
    position: absolute;
    inset: -8%;
    border-radius: 42% 58% 62% 38% / 52% 38% 62% 48%;
    opacity: 0.12;
    animation: blobMorph 12s ease-in-out infinite alternate;
}
@keyframes blobMorph {
    0%   { border-radius: 42% 58% 62% 38% / 52% 38% 62% 48%; }
    33%  { border-radius: 58% 42% 38% 62% / 38% 62% 48% 52%; }
    66%  { border-radius: 38% 62% 48% 52% / 58% 42% 62% 38%; }
    100% { border-radius: 52% 48% 42% 58% / 62% 38% 38% 62%; }
}

.hero-v2-img-wrap img,
.hero-v2-img-wrap picture {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    border-radius: var(--radius-xl);
    object-fit: cover;
}

.hero-v2-img-placeholder {
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-v2-placeholder-icon { position: relative; z-index: 1; }

/* Yüzen mini kartlar */
.hero-v2-float {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    padding: 10px 16px;
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px rgba(0,0,0,.1);
    z-index: 4;
    animation: heroFloat 4s ease-in-out infinite alternate;
}
.hero-v2-float strong { font-size: .8125rem; display: block; color: var(--text); }
.hero-v2-float small  { font-size: .6875rem; color: var(--text-muted); }
.hero-v2-float-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: #fff;
    font-size: .8rem;
    flex-shrink: 0;
}
.hero-v2-float-discount { top: 20%; right: -10px; animation-delay: 0s; }
.hero-v2-float-delivery { bottom: 15%; left: -10px; animation-delay: -2s; }
@keyframes heroFloat {
    from { transform: translateY(-6px); }
    to   { transform: translateY(6px); }
}

/* Dekoratif şekiller */
.hero-v2-shapes { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.hero-shape { position: absolute; }
.hero-shape-circle {
    width: 340px; height: 340px; border-radius: 50%; opacity: 0.06;
    top: -80px; right: -60px;
    animation: heroShapeFloat 8s ease-in-out infinite alternate;
}
.hero-shape-circle-sm {
    width: 120px; height: 120px; border-radius: 50%;
    background: var(--secondary); opacity: 0.05;
    bottom: 60px; left: 10%;
    animation: heroShapeFloat 6s ease-in-out infinite alternate-reverse;
}
.hero-shape-ring {
    width: 200px; height: 200px; border-radius: 50%;
    border: 3px solid currentColor; opacity: 0.08;
    top: 30%; right: 15%;
    animation: heroShapeFloat 10s ease-in-out infinite alternate;
}
.hero-shape-dots {
    width: 100px; height: 100px;
    background-image: radial-gradient(circle, var(--primary) 1.5px, transparent 1.5px);
    background-size: 16px 16px;
    opacity: 0.08;
    bottom: 20%; left: 35%;
}
.hero-shape-paw {
    color: var(--primary); opacity: 0.05; font-size: 80px;
    top: 25%; right: 8%; transform: rotate(25deg);
    animation: heroShapeFloat 7s ease-in-out infinite alternate;
}
.hero-shape-paw-sm {
    color: var(--secondary); opacity: 0.04; font-size: 48px;
    bottom: 30%; left: 5%; transform: rotate(-15deg);
    animation: heroShapeFloat 9s ease-in-out infinite alternate-reverse;
}
@keyframes heroShapeFloat {
    from { transform: translate(0, 0) rotate(var(--r, 0deg)); }
    to   { transform: translate(12px, -12px) rotate(var(--r, 0deg)); }
}

/* Navigasyon */
.hero-v2-nav {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    z-index: 10;
}
.hero-v2-dots { display: flex; gap: 6px; }
.hero-v2-dot {
    width: 32px; height: 32px; background: none; border: none; cursor: pointer;
    padding: 0; position: relative;
}
.hero-v2-dot::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 8px; height: 8px;
    background: var(--border-strong);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s;
}
.hero-v2-dot.active::before {
    background: var(--primary);
    width: 10px; height: 10px;
}
.hero-v2-dot-ring {
    stroke-dasharray: 88;
    stroke-dashoffset: 88;
    opacity: 0;
    transition: opacity 0.3s;
}
.hero-v2-dot.active .hero-v2-dot-ring {
    opacity: 1;
    animation: dotProgress 5s linear forwards;
}
@keyframes dotProgress {
    from { stroke-dashoffset: 88; }
    to   { stroke-dashoffset: 0; }
}

.hero-v2-arrows { display: flex; gap: 4px; }
.hero-v2-arrow {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.85);
    border: 1px solid var(--border);
    border-radius: 50%;
    cursor: pointer;
    color: var(--text);
    transition: all 0.2s;
}
.hero-v2-arrow:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* Progress bar */
.hero-v2-progress {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: rgba(0,0,0,.06);
    z-index: 10;
}
.hero-v2-progress-bar {
    height: 100%;
    background: var(--primary);
    width: 0%;
    transition: width 0.1s linear;
}

/* Dark mode */
[data-theme="dark"] .hero-v2-slide { background: var(--bg) !important; }
[data-theme="dark"] .hero-v2-float { background: var(--bg-elevated); }

/* Responsive */
@media (max-width: 1024px) {
    .hero-v2-grid { grid-template-columns: 1fr; text-align: center; min-height: 520px; padding-bottom: 60px; }
    .hero-v2-content > p { margin-inline: auto; }
    .hero-v2-actions { justify-content: center; }
    .hero-v2-trust { justify-content: center; }
    .hero-v2-visual { display: none; }
    .hero-v2-nav { bottom: 20px; }
}
@media (max-width: 768px) {
    .hero-v2 { min-height: 480px; }
    .hero-v2-grid { min-height: 480px; padding: calc(var(--header-h) + 48px) 0 60px; }
    .hero-v2-arrows { display: none; }
}

/* -----------------------------------------------
   Z5. PROMO BANNER GRID
   ----------------------------------------------- */
.promo-grid {
    display: grid;
    gap: var(--sp-6);
}

.promo-grid-5 {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
}

.promo-grid-5 .promo-banner:nth-child(4),
.promo-grid-5 .promo-banner:nth-child(5) {
    grid-column: span 1;
}

.promo-grid-5 .promo-banner:nth-child(4) {
    grid-column: 1 / 2;
}

.promo-grid-5 .promo-banner:nth-child(5) {
    grid-column: 2 / 4;
}

.promo-banner {
    position: relative;
    padding: var(--sp-8) var(--sp-10);
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
}

.promo-banner-purple { background: linear-gradient(135deg, #6C3CE1 0%, #8B5CF6 100%); }
.promo-banner-orange { background: linear-gradient(135deg, #F97316 0%, #FB923C 100%); }
.promo-banner-pink { background: linear-gradient(135deg, #EC4899 0%, #F472B6 100%); }
.promo-banner-teal { background: linear-gradient(135deg, #14B8A6 0%, #2DD4BF 100%); }
.promo-banner-indigo { background: linear-gradient(135deg, #2D1B69 0%, #4C1D95 100%); }

.promo-banner h3 {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: var(--sp-2);
}

.promo-banner p {
    font-size: var(--fs-sm);
    color: rgba(255,255,255,0.85);
    margin-bottom: var(--sp-4);
}

.promo-banner .btn {
    align-self: flex-start;
}

.promo-banner-icon {
    position: absolute;
    right: 20px;
    bottom: 20px;
    font-size: 60px;
    opacity: 0.15;
}

/* -----------------------------------------------
   Z6. CIRCULAR CATEGORIES
   ----------------------------------------------- */
.categories-circular {
    display: flex;
    gap: var(--sp-8);
    justify-content: center;
    flex-wrap: wrap;
    padding: var(--sp-12) 0;
}

.category-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    text-decoration: none;
    transition: transform 0.3s var(--ease);
}

.category-circle:hover { transform: translateY(-4px); }

.category-circle-img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--border);
    background: var(--bg-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.3s;
}

.category-circle:hover .category-circle-img { border-color: var(--primary); }

.category-circle-img i {
    font-size: 32px;
    color: var(--primary);
}

.category-circle-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.category-circle-name {
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text);
    text-align: center;
}

/* -----------------------------------------------
   Z7. PRODUCT CARD ZIGGY STYLE
   ----------------------------------------------- */
/* Orange price */
.product-card-price .t-price {
    color: var(--secondary);
}

[data-theme="dark"] .product-card-price .t-price {
    color: var(--secondary-light);
}

/* Star rating on product card */
.product-card-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
}

.product-card-rating svg { width: 14px; height: 14px; }

/* -----------------------------------------------
   Z8. FULL-WIDTH PROMO BANNER
   ----------------------------------------------- */
.promo-fullwidth {
    position: relative;
    padding: var(--sp-16) 0;
    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 50%, var(--primary) 100%);
    color: #fff;
    overflow: hidden;
    border-radius: var(--radius-xl);
    margin: 0 var(--gutter);
}

.promo-fullwidth .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-8);
}

.promo-fullwidth-content {
    max-width: 500px;
}

.promo-fullwidth h2 {
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    font-weight: 700;
    color: #fff;
    margin-bottom: var(--sp-3);
}

.promo-fullwidth p {
    font-size: 1.125rem;
    color: rgba(255,255,255,0.85);
    margin-bottom: var(--sp-6);
}

/* -----------------------------------------------
   Z9. BRAND LOGOS
   ----------------------------------------------- */
.brands-strip {
    padding: var(--sp-12) 0;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}

.brands-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-12);
    flex-wrap: wrap;
}

.brand-logo {
    height: 40px;
    opacity: 0.5;
    filter: grayscale(100%);
    transition: all 0.3s;
}

.brand-logo:hover {
    opacity: 1;
    filter: grayscale(0);
}

.brand-logo img {
    height: 100%;
    width: auto;
    object-fit: contain;
}

.brand-logo-text {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-muted);
    white-space: nowrap;
    letter-spacing: 0.02em;
}

/* Mobil arama butonu — desktop'ta gizle */
.mobile-search-btn { display: none; }
@media (max-width: 1024px) {
    .mobile-search-btn { display: flex; }
}

/* -----------------------------------------------
   Z10. BLOG SIDEBAR LAYOUT
   ----------------------------------------------- */
.blog-with-sidebar {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--sp-10);
    align-items: start;
}

.blog-sidebar {
    position: sticky;
    top: calc(var(--header-h) + var(--topbar-h) + 20px);
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
}

.blog-sidebar-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    padding: var(--sp-6);
    border-radius: var(--radius-lg);
}

.blog-sidebar-card h4 {
    font-size: var(--fs-body);
    font-weight: 700;
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--border-light);
}

.blog-sidebar-list {
    list-style: none;
}

.blog-sidebar-list li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sp-2) 0;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    transition: color 0.2s;
}

.blog-sidebar-list li a:hover,
.blog-sidebar-list li a.active { color: var(--primary); }

.blog-sidebar-posts {
    list-style: none;
}

.blog-sidebar-posts li a {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
    align-items: center;
    transition: opacity 0.2s;
}

.blog-sidebar-posts li a:hover { opacity: 0.8; }

.blog-sidebar-posts li a picture,
.blog-sidebar-posts li a img {
    width: 60px;
    height: 45px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.blog-sidebar-post-title {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text);
    display: block;
    line-height: 1.3;
}

.blog-sidebar-post-date {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    display: block;
    margin-top: 2px;
}

.blog-sidebar-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

/* Blog card read more pill */
.blog-card-readmore {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: var(--secondary);
    color: #fff;
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
    font-weight: 600;
    margin-top: auto;
    align-self: flex-start;
    transition: background 0.2s;
}

.blog-card-readmore:hover {
    background: var(--secondary-dark);
    color: #fff;
}

/* Blog card colored category badges */
.blog-card-category {
    position: relative;
}

.blog-card .blog-card-image {
    position: relative;
}

.blog-card .blog-card-category {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
}

/* Blog card author info */
.blog-card-author {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}

.blog-card-author img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

.blog-card-author span {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

/* -----------------------------------------------
   Z11. BLOG DETAIL WITH SIDEBAR
   ----------------------------------------------- */
.blog-detail-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--sp-10);
    align-items: start;
}

.blog-detail-sidebar {
    position: sticky;
    top: calc(var(--header-h) + var(--topbar-h) + 20px);
}

/* Blog detail blockquote */
.blog-detail-content blockquote,
.prose blockquote {
    position: relative;
    padding: var(--sp-8) var(--sp-10);
    margin: var(--sp-8) 0;
    background: var(--primary-pale);
    border-left: 4px solid var(--primary);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-style: italic;
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--text);
}

.blog-detail-content blockquote::before,
.prose blockquote::before {
    content: '\201C';
    position: absolute;
    top: -10px;
    left: 16px;
    font-family: var(--font-display);
    font-size: 4rem;
    color: var(--primary);
    opacity: 0.3;
    line-height: 1;
}

/* Comment form */
.comment-form {
    margin-top: var(--sp-10);
    padding-top: var(--sp-8);
    border-top: 1px solid var(--border);
}

.comment-form h3 {
    margin-bottom: var(--sp-6);
}

/* -----------------------------------------------
   Z12. HAKKIMIZDA REDESIGN
   ----------------------------------------------- */
.about-hero-collage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-10);
    align-items: center;
}

.about-hero-left {
    max-width: 520px;
}

.about-hero-left h1 {
    font-size: var(--fs-h1);
    margin-bottom: var(--sp-4);
}

.about-hero-left p {
    font-size: 1.0625rem;
    color: var(--text-secondary);
    margin-bottom: var(--sp-6);
    line-height: 1.7;
}

.about-hero-actions {
    display: flex;
    gap: var(--sp-4);
}

.about-hero-photos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--sp-4);
}

.about-hero-photos img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

.about-hero-photos img:first-child {
    grid-row: span 2;
    height: 100%;
}

/* Features with big circles */
.about-features-ziggy {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-8);
    text-align: center;
}

.about-feature-ziggy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-4);
}

.about-feature-icon-big {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--secondary-pale);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--sp-2);
}

.about-feature-icon-big i {
    font-size: 36px;
    color: var(--secondary);
}

.about-feature-ziggy h3 {
    font-size: 1.125rem;
    margin-bottom: var(--sp-2);
}

.about-feature-ziggy p {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    max-width: 280px;
}

/* Circular team */
.team-circular {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--sp-10);
}

.team-member-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    text-align: center;
}

.team-member-photo {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--border);
    background: var(--bg-alt);
    transition: border-color 0.3s;
}

.team-member-circle:hover .team-member-photo { border-color: var(--primary); }

.team-member-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-member-photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary);
    background: var(--primary-pale);
}

.team-member-name {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}

.team-member-title {
    font-size: var(--fs-sm);
    color: var(--secondary);
    font-weight: 500;
    position: relative;
    padding-bottom: var(--sp-2);
}

.team-member-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 2px;
    background: var(--secondary);
}

/* Photo gallery grid */
.about-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-4);
}

.about-gallery-grid img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius-md);
    transition: transform 0.3s;
}

.about-gallery-grid img:hover { transform: scale(1.03); }

/* -----------------------------------------------
   Z13. SSS PAGE
   ----------------------------------------------- */
.sss-layout {
    padding: var(--sp-16) 0;
}

.sss-intro {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--sp-10);
    margin-bottom: var(--sp-16);
}

.sss-intro h1 {
    font-size: var(--fs-h1);
    flex-shrink: 0;
}

.sss-intro p {
    max-width: 480px;
    color: var(--text-secondary);
    font-size: 1.0625rem;
    line-height: 1.7;
}

.sss-group {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: var(--sp-10);
    margin-bottom: var(--sp-16);
    align-items: start;
}

.sss-group-info h2 {
    font-size: var(--fs-h3);
    margin-bottom: var(--sp-3);
}

.sss-group-info p {
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.sss-accordion .accordion-item {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    margin-bottom: var(--sp-3);
    overflow: hidden;
}

.sss-accordion .accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-5) var(--sp-6);
    cursor: pointer;
    font-weight: 600;
    font-size: var(--fs-body);
    color: var(--text);
    width: 100%;
    border: none;
    background: none;
    font-family: var(--font-display);
    text-align: left;
    transition: color 0.2s;
}

.sss-accordion .accordion-header:hover { color: var(--primary); }

.sss-accordion .accordion-header svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: all 0.3s;
    color: var(--text-muted);
}

.sss-accordion .accordion-item.active .accordion-header {
    color: var(--primary);
}

.sss-accordion .accordion-item.active .accordion-header svg {
    transform: rotate(180deg);
    color: var(--secondary);
}

.sss-accordion .accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s var(--ease);
}

.sss-accordion .accordion-body-inner {
    padding: 0 var(--sp-6) var(--sp-6);
    color: var(--text-secondary);
    line-height: 1.7;
}

.sss-accordion .accordion-item.active .accordion-body {
    max-height: 500px;
}

/* -----------------------------------------------
   Z14. STOCK AVAILABILITY BAR
   ----------------------------------------------- */
.stock-bar {
    margin: var(--sp-4) 0;
}

.stock-bar-label {
    display: flex;
    justify-content: space-between;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin-bottom: var(--sp-1);
}

.stock-bar-track {
    height: 6px;
    background: var(--border-light);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.stock-bar-fill {
    height: 100%;
    background: var(--secondary);
    border-radius: var(--radius-full);
    transition: width 0.5s var(--ease);
}

.stock-bar-fill.low { background: var(--error); }
.stock-bar-fill.medium { background: var(--warning); }

/* -----------------------------------------------
   Z15. PRODUCT TABS PILL STYLE
   ----------------------------------------------- */
.product-tabs .tabs {
    display: flex;
    gap: var(--sp-2);
    margin-bottom: var(--sp-6);
    padding: var(--sp-2);
    background: var(--bg-alt);
    border-radius: var(--radius-full);
    overflow-x: auto;
}

.product-tabs .tab-btn {
    padding: 10px 24px;
    border: none;
    background: transparent;
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-full);
    transition: all 0.2s;
    white-space: nowrap;
}

.product-tabs .tab-btn:hover {
    color: var(--text);
}

.product-tabs .tab-btn.active {
    background: var(--primary);
    color: #fff;
    box-shadow: var(--shadow-primary);
}

.product-tabs .tab-content {
    background: var(--bg-alt);
    padding: var(--sp-8);
    border-radius: var(--radius-lg);
}

/* Product detail price orange */
.product-price-block .t-price {
    color: var(--secondary);
}

/* Product share icons */
.product-share {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border-light);
}

.product-share span {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    font-weight: 500;
}

.product-share a {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-alt);
    color: var(--text-secondary);
    transition: all 0.2s;
}

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

/* -----------------------------------------------
   Z16. FOOTER ZIGGY STYLE
   ----------------------------------------------- */
.footer-ziggy {
    background: var(--bg-alt);
    padding-top: var(--sp-20);
    position: relative;
    overflow: hidden;
}

[data-theme="dark"] .footer-ziggy {
    background: var(--bg-card);
}

.footer-ziggy .footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1.5fr;
    gap: var(--sp-10);
}

.footer-ziggy .footer-title {
    font-family: var(--font-display);
    font-size: var(--fs-body);
    font-weight: 700;
    color: var(--text);
    margin-bottom: var(--sp-6);
}

.footer-ziggy .footer-links {
    list-style: none;
}

.footer-ziggy .footer-links li {
    margin-bottom: var(--sp-2);
}

.footer-ziggy .footer-links a {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    transition: color 0.2s;
}

.footer-ziggy .footer-links a:hover { color: var(--primary); }

.footer-ziggy .footer-brand .footer-desc {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: var(--sp-4);
}

.footer-ziggy .footer-brand .footer-phone {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}

.footer-ziggy .footer-social {
    display: flex;
    gap: var(--sp-2);
}

.footer-ziggy .footer-social a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    transition: all 0.2s;
}

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

/* Newsletter in footer */
.footer-newsletter {
    margin-top: var(--sp-4);
}

.footer-newsletter h5 {
    font-size: var(--fs-sm);
    font-weight: 600;
    margin-bottom: var(--sp-3);
}

.footer-newsletter-form {
    display: flex;
    gap: var(--sp-2);
}

.footer-newsletter-form input {
    flex: 1;
    padding: 10px 16px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    font-size: var(--fs-sm);
    color: var(--text);
}

.footer-newsletter-form button {
    padding: 10px 20px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-full);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.footer-newsletter-form button:hover { background: var(--primary-dark); }

.footer-app-badges {
    display: flex;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
}

.footer-app-badges img {
    height: 36px;
    width: auto;
}

.footer-ziggy .footer-bottom {
    margin-top: var(--sp-12);
    padding: var(--sp-6) 0;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-4);
}

.footer-ziggy .footer-bottom p {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    margin: 0;
}

/* Footer decorative cat */
.footer-deco-cat {
    position: absolute;
    bottom: 60px;
    left: 20px;
    width: 80px;
    opacity: 0.08;
    pointer-events: none;
}

.footer-deco-paw {
    position: absolute;
    bottom: 80px;
    right: 40px;
    font-size: 60px;
    opacity: 0.05;
    color: var(--primary);
    pointer-events: none;
    transform: rotate(-20deg);
}

/* -----------------------------------------------
   Z17. FORM FOCUS RING (purple)
   ----------------------------------------------- */
.form-control:focus,
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(108,60,225,0.1);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] .form-textarea:focus {
    box-shadow: 0 0 0 3px rgba(139,92,246,0.1);
}

/* -----------------------------------------------
   Z18. HEADER STYLES ADJUSTMENT
   ----------------------------------------------- */
.site-header {
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

[data-theme="dark"] .site-header {
    background: #0F0A1A;
}

.site-header.hero-active {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.site-header.hero-active.scrolled {
    background: #ffffff;
}

[data-theme="dark"] .site-header.hero-active.scrolled {
    background: #0F0A1A;
}

/* Header logo SVG update */
.header-logo .logo-icon ellipse { fill: #6C3CE1; }
.header-logo .logo-icon circle { fill: #F97316; }
.footer-logo .logo-icon ellipse { fill: #6C3CE1; }
.footer-logo .logo-icon circle { fill: #F97316; }

[data-theme="dark"] .section-dark { background: #0A0614; }
.cta-section::before {
    background: radial-gradient(circle, rgba(108,60,225,0.15) 0%, transparent 70%);
}

/* -----------------------------------------------
   Z18b. MAIN CONTENT OFFSET (fixed header)
   ----------------------------------------------- */
#pageWrapper {
    padding-top: calc(var(--header-h) + var(--topbar-h));
}

/* Ana sayfa hero'su kendi padding'ini yönetir */
.page-home #pageWrapper {
    padding-top: 0;
}

/* -----------------------------------------------
   Z19. RESPONSIVE OVERRIDES
   ----------------------------------------------- */
@media (max-width: 1024px) {
    .top-bar-center { display: none; }
    .header-search-inline { max-width: 280px; }
    .blog-with-sidebar { grid-template-columns: 1fr; }
    .blog-sidebar { position: static; }
    .blog-detail-layout { grid-template-columns: 1fr; }
    .blog-detail-sidebar { position: static; order: 2; }
    .about-hero-collage { grid-template-columns: 1fr; }
    .about-hero-photos { grid-template-columns: repeat(3, 1fr); }
    .about-hero-photos img:first-child { grid-row: auto; }
    .sss-group { grid-template-columns: 1fr; }
    .sss-intro { flex-direction: column; gap: var(--sp-4); }
    .footer-ziggy .footer-grid { grid-template-columns: repeat(2, 1fr); }
    .promo-grid-5 { grid-template-columns: 1fr 1fr; }
    .promo-grid-5 .promo-banner:nth-child(5) { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
    .top-bar { display: none; }
    .top-bar + .site-header { top: 0; }
    .top-bar ~ .mobile-menu { padding-top: calc(var(--header-h) + 32px); }
    .header-search-inline { display: none; }
    .hero-v2 { min-height: 460px; }
    .hero-v2-grid { min-height: 460px; padding-top: calc(var(--header-h) + 32px); }
    .hero-v2-visual { display: none; }
    .hero-v2-arrows { display: none; }
    .categories-circular { gap: var(--sp-4); }
    .category-circle-img { width: 72px; height: 72px; }
    .promo-grid-5 { grid-template-columns: 1fr; }
    .promo-grid-5 .promo-banner:nth-child(5) { grid-column: auto; }
    .about-features-ziggy { grid-template-columns: 1fr; }
    .team-circular { gap: var(--sp-6); }
    .team-member-photo { width: 100px; height: 100px; }
    .footer-ziggy .footer-grid { grid-template-columns: 1fr; }
    .about-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .categories-circular { gap: var(--sp-3); }
    .category-circle-img { width: 60px; height: 60px; }
    .category-circle-name { font-size: var(--fs-xs); }
}

/* -----------------------------------------------
   Z20. MISC OVERRIDES
   ----------------------------------------------- */

/* Qty selector round */
.qty-selector {
    display: flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.qty-selector button {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    border-radius: 0;
    transition: background 0.2s;
}

.qty-selector button:hover { background: var(--bg-alt); }

.qty-selector input {
    width: 48px;
    text-align: center;
    border: none;
    outline: none;
    font-size: var(--fs-body);
    font-weight: 600;
    background: transparent;
    color: var(--text);
}

/* Variant buttons pill */
.variant-btn {
    padding: 8px 20px;
    border: 1px solid var(--border);
    background: transparent;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.variant-btn:hover { border-color: var(--primary); color: var(--primary); }
.variant-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Cart drawer rounded */
.cart-drawer {
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

/* Form control universal */
.form-control {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-body);
    color: var(--text);
    transition: all 0.2s;
}

/* Search modal rounded */
.search-modal-inner {
    border-radius: var(--radius-xl);
}

/* Back to top */
.back-to-top {
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
}

.back-to-top:hover {
    background: var(--primary-dark);
}

/* Scroll progress bar - purple */
.scroll-progress {
    background: var(--primary);
}

/* Cart item image rounded */
.cart-item-image {
    border-radius: var(--radius-sm);
}

/* Shop sidebar filter group */
.filter-group {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    padding: var(--sp-5);
    margin-bottom: var(--sp-4);
    border-radius: var(--radius-md);
}

/* Category badge colors - alternating */
.blog-card:nth-child(3n+1) .blog-card-category { background: var(--primary); }
.blog-card:nth-child(3n+2) .blog-card-category { background: var(--secondary); }
.blog-card:nth-child(3n+3) .blog-card-category { background: #EC4899; }

/* Product card hover shadow enhanced */
.product-card:hover {
    box-shadow: 0 12px 40px rgba(108,60,225,0.12);
}

/* Service price in orange */
.service-price,
.service-price-tag .t-price {
    color: var(--secondary);
}

/* Cart price color */
.cart-item-price {
    color: var(--secondary);
}

.cart-summary-row.total .amount {
    color: var(--secondary);
}

/* Contact info icon with radius */
.contact-info-icon {
    border-radius: 50%;
    background: var(--primary-pale);
}

/* Adoption type badge pill */
.adoption-type-badge {
    border-radius: var(--radius-full);
}

/* Grooming label pill */
.grooming-label {
    border-radius: var(--radius-full);
}

/* Alert rounded */
.alert {
    border-radius: var(--radius-md);
}

/* Toast rounded */
.toast {
    border-radius: var(--radius-md);
}

/* ============================================
   Z21 — Shop Promo Banners
   ============================================ */
.shop-promo-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6);margin-bottom:var(--sp-8)}
.shop-promo-card{position:relative;padding:var(--sp-8) var(--sp-10);border-radius:var(--radius-lg);color:#fff;overflow:hidden;min-height:160px;display:flex;align-items:center}
.shop-promo-text{position:relative;z-index:1}
.shop-promo-text h3{font-size:1.375rem;font-weight:700;margin:.5rem 0 .25rem;color:#fff}
.shop-promo-text p{opacity:.85;font-size:.875rem}
.shop-promo-text .badge{margin-bottom:.25rem}
.shop-promo-deco{position:absolute;right:24px;top:50%;transform:translateY(-50%);font-size:64px;opacity:.12;color:#fff}

@media(max-width:768px){
    .shop-promo-grid{grid-template-columns:1fr}
}

/* ============================================
   Z22 — Shop View Toggle
   ============================================ */
.shop-view-toggle{display:flex;gap:4px;margin-right:var(--sp-4)}
.view-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-card);color:var(--text-muted);cursor:pointer;transition:all .2s}
.view-btn.active,.view-btn:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.shop-toolbar-right{display:flex;align-items:center}

/* List view mode */
#productGrid.list-view{grid-template-columns:1fr!important}
#productGrid.list-view .product-card{display:grid;grid-template-columns:240px 1fr;text-align:left}
#productGrid.list-view .product-card .card-image{border-radius:var(--radius-md) 0 0 var(--radius-md)}

/* ============================================
   Z23 — Product Detail Ziggy Enhancements
   ============================================ */
.product-stock-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;background:rgba(34,197,94,.1);color:var(--success);font-size:.75rem;font-weight:600;border-radius:var(--radius-full);border:1px solid rgba(34,197,94,.2)}

.product-stock-bar{margin:var(--sp-4) 0}
.stock-bar-info{margin-bottom:6px;font-size:.875rem}
.stock-status{display:flex;align-items:center;gap:6px}
.stock-status.in-stock{color:var(--success)}
.stock-status.out-stock{color:var(--error)}
.stock-bar-track{height:6px;background:var(--border);border-radius:var(--radius-full);overflow:hidden}
.stock-bar-fill{height:100%;background:linear-gradient(90deg,var(--secondary),var(--secondary-light));border-radius:var(--radius-full);transition:width 1s ease}

.product-action-links{display:flex;gap:var(--sp-6);margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--border)}
.product-action-link{display:flex;align-items:center;gap:6px;background:none;border:none;color:var(--text-muted);font-size:.875rem;cursor:pointer;padding:0;transition:color .2s}
.product-action-link:hover,.product-action-link.active{color:var(--primary)}

.product-share{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--border)}
.product-share strong{font-size:.875rem;color:var(--text)}
.share-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);background:var(--bg-alt);color:var(--text-muted);font-size:.875rem;transition:all .2s}
.share-icon:hover{background:var(--primary);color:#fff}

/* Mobile filter toggle */
.shop-filter-toggle{margin-bottom:var(--sp-4)}
@media(max-width:1024px){
    .shop-filter-toggle{display:flex!important}
    .shop-sidebar{display:none}
    .shop-sidebar.mobile-open{display:block;position:fixed;top:0;left:0;width:320px;height:100vh;z-index:1000;background:var(--bg-card);padding:var(--sp-6);overflow-y:auto;box-shadow:var(--shadow-lg)}
}

/* ============================================
   Z24 — Product Grid 5-col option
   ============================================ */
.product-grid.grid-5{grid-template-columns:repeat(5,1fr)}
@media(max-width:1200px){.product-grid.grid-5{grid-template-columns:repeat(4,1fr)}}
@media(max-width:992px){.product-grid.grid-5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:576px){.product-grid.grid-5{grid-template-columns:repeat(2,1fr)}}

/* ============================================
   Z25 — Hizmetler Card Ziggy Style
   ============================================ */
.service-detail-card{border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-card);box-shadow:var(--shadow-sm);transition:all .3s}
.service-detail-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.service-detail-image{border-radius:var(--radius-lg) var(--radius-lg) 0 0;overflow:hidden}
.service-detail-image img,.service-detail-image picture{width:100%;height:240px;object-fit:cover;transition:transform .4s}
.service-detail-card:hover .service-detail-image img,.service-detail-card:hover .service-detail-image picture{transform:scale(1.05)}
.service-detail-content{padding:var(--sp-6)}
.service-detail-content h2{font-size:1.25rem;margin:.5rem 0}
.service-detail-content p{color:var(--text-muted);font-size:.9rem;margin-bottom:var(--sp-4)}
.service-price-tag{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-4)}
.service-price-tag .t-price{color:var(--secondary);font-weight:700}
.service-price-tag .t-label{color:var(--text-muted);font-size:.8rem}
.service-detail-icon-wrap{display:flex;align-items:center;justify-content:center;height:200px;background:var(--primary-pale);font-size:48px;color:var(--primary)}
.service-actions{display:flex;gap:var(--sp-3)}

.service-categories{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-8);justify-content:center}
.services-list{display:grid;grid-template-columns:1fr;gap:var(--sp-8)}

@media(min-width:768px){
    .service-detail-card{display:grid;grid-template-columns:minmax(300px,.4fr) 1fr}
    .service-detail-image{border-radius:var(--radius-lg) 0 0 var(--radius-lg);height:100%}
    .service-detail-image img,.service-detail-image picture{height:100%}
    .service-detail-card:nth-child(even){direction:rtl}
    .service-detail-card:nth-child(even) > *{direction:ltr}
    .service-detail-card:nth-child(even) .service-detail-image{border-radius:0 var(--radius-lg) var(--radius-lg) 0}
}

/* ============================================
   Z26 — Sahiplendirme Cards Ziggy Style
   ============================================ */
.adoption-card{border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-card);box-shadow:var(--shadow-sm);transition:all .3s}
.adoption-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.adoption-card-image{position:relative;overflow:hidden}
.adoption-card-image img,.adoption-card-image picture{width:100%;height:260px;object-fit:cover;transition:transform .4s}
.adoption-card:hover .adoption-card-image img,.adoption-card:hover .adoption-card-image picture{transform:scale(1.05)}
.adoption-type-badge{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.95);padding:4px 12px;border-radius:var(--radius-full);font-size:.75rem;font-weight:600;display:flex;align-items:center;gap:4px}
.adoption-card-body{padding:var(--sp-6)}
.adoption-card-body h3{font-size:1.125rem;margin-bottom:4px}
.adoption-card-body .t-label{color:var(--text-muted);font-size:.8rem;display:block;margin-bottom:var(--sp-2)}
.adoption-card-body p{color:var(--text-muted);font-size:.9rem;margin-bottom:var(--sp-4)}

.adoption-info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-8)}
.adoption-info-card{text-align:center;padding:var(--sp-8);background:var(--bg-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.adoption-info-icon{width:64px;height:64px;display:flex;align-items:center;justify-content:center;margin:0 auto var(--sp-4);border-radius:var(--radius-full);background:var(--primary-pale)}
.adoption-info-card h3{font-size:1.125rem;margin-bottom:var(--sp-2)}
.adoption-info-card p{color:var(--text-muted);font-size:.9rem}

.adoption-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-6);margin-top:var(--sp-8)}
.adoption-step{text-align:center;padding:var(--sp-6)}
.adoption-step-number{width:48px;height:48px;display:flex;align-items:center;justify-content:center;margin:0 auto var(--sp-4);border-radius:var(--radius-full);background:var(--primary);color:#fff;font-weight:700;font-size:1.25rem}

@media(max-width:768px){
    .adoption-info-grid{grid-template-columns:1fr}
    .adoption-steps{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:576px){
    .adoption-steps{grid-template-columns:1fr}
}

/* ============================================
   Z27 — Contact Page Ziggy Style
   ============================================ */
.contact-layout{display:grid;grid-template-columns:1fr 380px;gap:var(--sp-12)}
.contact-form-wrap h2{font-size:1.5rem;margin-bottom:var(--sp-6)}
.contact-info-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--sp-6);margin-bottom:var(--sp-6)}
.contact-info-card h3{font-size:1.125rem;margin-bottom:var(--sp-4)}
.contact-info-item{display:flex;gap:var(--sp-4);align-items:flex-start;padding:var(--sp-3) 0;border-bottom:1px solid var(--border)}
.contact-info-item:last-child{border-bottom:0}
.contact-info-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);background:var(--primary-pale);flex-shrink:0}
.contact-info-item strong{display:block;font-size:.875rem;margin-bottom:2px}
.contact-info-item a,.contact-info-item span{font-size:.875rem;color:var(--text-muted)}
.contact-info-item a:hover{color:var(--primary)}
.contact-social-links{display:flex;gap:var(--sp-3);flex-wrap:wrap}
.contact-social-link{display:flex;align-items:center;gap:var(--sp-2);padding:8px 16px;background:var(--bg-alt);border-radius:var(--radius-full);font-size:.875rem;color:var(--text);transition:all .2s}
.contact-social-link:hover{background:var(--primary);color:#fff}
.contact-social-link i{font-size:1rem}
.contact-map{border-radius:var(--radius-lg);overflow:hidden;height:400px}
.contact-map iframe{width:100%;height:100%;border:0}

@media(max-width:768px){
    .contact-layout{grid-template-columns:1fr}
}