/* ============================================================
   HYLI — BRUTUS-STYLE EDITORIAL JAPANESE DESIGN
   Phong cách: Neo-Wa Editorial · Phá cách · Contrast cao
   Inspired by: BRUTUS, POPEYE, IDEA magazine Japan
   ============================================================ */

/* ===== IMPORT FONTS ===== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;700;900&family=Noto+Sans+JP:wght@300;400;500;700;900&display=swap');

/* ============================================================
   LIGHT MODE PALETTE — Crisp & High Contrast
   ============================================================ */
:root {
    /* Core Wa palette */
    --wa-white:      #F7F3EC;      /* Washi paper */
    --wa-cream:      #EDE4D0;      /* Kinari (生成) */
    --wa-black:      #0D0D0D;      /* Deep sumi ink */
    --wa-cha:        #5C3D2E;      /* Dark tea brown */
    --wa-beniaka:    #8B1A2F;      /* Deep crimson */
    --wa-kuchiba:    #B5722A;      /* Amber fallen leaf */
    --wa-matcha:     #3D5E38;      /* Deep matcha */
    --wa-fuji:       #5C4E8A;      /* Wisteria */
    --wa-border:     #C8B89A;      /* Bamboo line */
    --wa-border-dark:#1A1512;

    /* Semantic — Light mode */
    --color-bg:          #F7F3EC;
    --color-bg-alt:      #EDE4D0;
    --color-bg-card:     #FEFCF8;
    --color-text:        #0D0D0D;
    --color-text-muted:  #5A4A3A;
    --color-border:      #C8B89A;
    --color-accent:      #8B1A2F;
    --color-accent2:     #B5722A;

    /* Legacy aliases */
    --primary-color: var(--wa-cha);
    --accent-color:  var(--wa-kuchiba);
    --bg-warm:       var(--wa-white);
    --text-dark:     var(--wa-black);
    --text-muted:    #5A4A3A;
    --card-bg:       #FEFCF8;
    --border-warm:   var(--wa-border);
    --primary-hover: #3D281C;
}

/* ============================================================
   DARK MODE — True Black with Ink-wash depth
   ============================================================ */
[data-theme="dark"] {
    --color-bg:          #0A0806;
    --color-bg-alt:      #141008;
    --color-bg-card:     #1C1510;
    --color-text:        #F0E6D4;
    --color-text-muted:  #9A8070;
    --color-border:      #2A201A;
    --color-accent:      #C8354E;
    --color-accent2:     #D4923C;

    /* Legacy aliases */
    --wa-white:     #0A0806;
    --wa-cream:     #141008;
    --wa-sumi:      #F0E6D4;
    --wa-border:    #2A201A;
    --bg-warm:      #0A0806;
    --text-dark:    #F0E6D4;
    --text-muted:   #9A8070;
    --card-bg:      #1C1510;
    --border-warm:  #2A201A;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.8;
    color: var(--color-text);
    background-color: var(--color-bg);
    letter-spacing: 0.025em;
    transition: background-color 0.4s ease, color 0.4s ease;
}

/* Particles */
#tsparticles {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1; pointer-events: none;
}

/* ============================================================
   TYPOGRAPHY — Editorial Wa
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.font-serif, .hero-title, .section-title, .brand-text {
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: 1.35;
    color: var(--color-text);
}

.section-title {
    font-size: 1.9rem;
    font-weight: 300;
    letter-spacing: 0.06em;
    position: relative;
    padding-bottom: 1.1rem;
    margin-bottom: 2.5rem;
    color: var(--color-text);
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 36px; height: 3px;
    background: var(--color-accent);
}

.text-italic { font-style: italic; color: var(--wa-cha); }
[data-theme="dark"] .text-italic { color: var(--color-accent2); }

.text-muted { color: var(--color-text-muted) !important; }

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================
   LAYOUT
   ============================================================ */
.split-layout { display: block; }
.split-left   { display: none; }
.split-right  { margin-left: 0; }
.content-wrapper { min-height: 60vh; }

/* ============================================================
   NAVBAR — Editorial floating bar
   ============================================================ */
.navbar {
    position: sticky !important;
    top: 0;
    z-index: 1030;
    height: 66px;
    padding: 0 !important;
    background: var(--color-bg) !important;
    border-bottom: 2px solid var(--color-text) !important;
    transition: background 0.4s, box-shadow 0.3s;
}

.navbar.scrolled {
    box-shadow: 0 4px 30px rgba(0,0,0,0.12);
}

[data-theme="dark"] .navbar {
    border-color: var(--color-text) !important;
}

/* Brand */
.brand-logo {
    width: 40px; height: 40px;
    background: var(--color-text);
    color: var(--color-bg);
    border-radius: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
    transition: background 0.3s, color 0.3s;
}

.brand-text {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: 0.14em;
    transition: color 0.3s;
}

/* ===== Nav Links — underline hover ===== */
.wa-nav-link {
    font-family: var(--font-heading);
    font-size: 0.86rem;
    font-weight: 400;
    color: var(--color-text) !important;
    text-decoration: none;
    padding: 0.4rem 0.9rem !important;
    letter-spacing: 0.07em;
    position: relative;
    transition: color 0.2s;
}

.wa-nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 50%;
    width: 0; height: 2px;
    background: var(--color-accent);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.wa-nav-link:hover { color: var(--color-accent) !important; }
.wa-nav-link:hover::after { width: 70%; }

.nav-link {
    font-family: var(--font-heading);
    font-weight: 400;
    color: var(--color-text) !important;
    padding: 0.4rem 0.9rem !important;
    font-size: 0.86rem;
    letter-spacing: 0.05em;
    transition: color 0.2s;
}
.nav-link:hover { color: var(--color-accent) !important; }

/* Thin red accent line */
.wa-accent-line {
    height: 1px;
    background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent2) 50%, transparent 100%);
}

/* ============================================================
   DARK MODE TOGGLE — Signature Wa design
   ============================================================ */
.dark-mode-toggle {
    position: relative;
    width: 64px;
    height: 32px;
    background: var(--color-text);
    border: none;
    border-radius: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0 6px;
    transition: background 0.4s;
    flex-shrink: 0;
    overflow: hidden;
}

/* The inner sliding knob */
.dark-mode-toggle::before {
    content: '';
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    position: absolute;
    left: 7px;
    color: var(--color-bg);
    transition: all 0.35s;
    letter-spacing: 0;
}

.dark-mode-toggle::after {
    content: '';
    position: absolute;
    right: 6px;
    width: 20px; height: 20px;
    background: var(--color-bg);
    transition: all 0.35s;
    border-radius: 0;
}

[data-theme="dark"] .dark-mode-toggle {
    background: var(--color-accent);
}

[data-theme="dark"] .dark-mode-toggle::before {
    content: '';
    left: 7px;
    color: white;
}

/* Hide the icon inside since we use pseudo-elements */
.dark-mode-toggle #darkModeIcon { display: none; }

/* ============================================================
   SEARCH BOX
   ============================================================ */
.ai-search-wrapper { position: relative; }

.ai-search-box {
    display: flex; align-items: center;
    background: var(--color-bg-alt);
    border: 1.5px solid var(--color-border);
    padding: 0.38rem 0.9rem;
    gap: 0.5rem;
    transition: border-color 0.2s, background 0.3s;
}

.ai-search-box:focus-within {
    border-color: var(--color-text);
    background: var(--color-bg-card);
}

.ai-search-box input {
    border: none; background: transparent; outline: none;
    width: 150px; font-size: 0.82rem;
    color: var(--color-text); letter-spacing: 0.03em;
}

.ai-search-box input::placeholder { color: var(--color-text-muted); }

.ai-search-dropdown {
    position: absolute;
    top: calc(100% + 2px); left: 0; right: 0;
    background: var(--color-bg-card);
    border: 1.5px solid var(--color-text);
    z-index: 9999;
    max-height: 320px; overflow-y: auto;
    display: none;
    box-shadow: 4px 4px 0 var(--color-text);
}

.ai-search-dropdown.visible { display: block; }

.ai-search-item {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.65rem 1rem; cursor: pointer;
    transition: background 0.12s;
    border-bottom: 1px solid var(--color-border);
    text-decoration: none; color: var(--color-text);
}

.ai-search-item:hover {
    background: var(--color-bg-alt);
    color: var(--color-text);
}

.ai-search-item img { width: 40px; height: 40px; object-fit: cover; border: 1px solid var(--color-border); flex-shrink: 0; }
.ai-search-item-name  { font-weight: 500; font-size: 0.82rem; color: var(--color-text); }
.ai-search-item-price { font-size: 0.75rem; color: var(--color-accent2); font-weight: 600; }
.ai-search-item-type  { font-size: 0.7rem; color: var(--color-text-muted); }

/* Cart badge */
.cart-trigger { font-size: 1.1rem; color: var(--color-text); }
.cart-badge {
    font-size: 0.6rem;
    padding: 0.22em 0.45em;
    background-color: var(--color-accent) !important;
    border-radius: 0;
    min-width: 18px;
    color: white !important;
}

/* ===== DROPDOWN MENU ===== */
.dropdown-menu {
    background: var(--color-bg-card);
    border: 1.5px solid var(--color-text);
    border-radius: 0;
    box-shadow: 5px 5px 0 var(--color-text);
    font-size: 0.85rem;
}

.dropdown-item {
    color: var(--color-text);
    padding: 0.6rem 1rem;
    transition: background 0.15s;
}

.dropdown-item:hover {
    background: var(--color-bg-alt);
    color: var(--color-text);
}

.dropdown-divider { border-color: var(--color-border); }

/* Login button in navbar */
.btn-nav-login {
    font-family: var(--font-heading);
    font-size: 0.82rem;
    padding: 0.42rem 1.2rem;
    letter-spacing: 0.1em;
    background: var(--color-text);
    color: var(--color-bg) !important;
    border: none;
    border-radius: 0;
    transition: all 0.2s;
}

.btn-nav-login:hover {
    background: var(--color-accent);
    color: white !important;
}

/* ============================================================
   HERO — Bold Editorial, Asymmetric
   ============================================================ */
.wa-hero {
    position: relative;
    min-height: 88vh;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

/* Strong gradient overlay for contrast */
.wa-hero::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(
        108deg,
        var(--color-bg)  0%,
        rgba(247,243,236,0.88) 38%,
        rgba(247,243,236,0.3) 65%,
        transparent 100%
    );
    z-index: 1;
}

[data-theme="dark"] .wa-hero::before {
    background: linear-gradient(
        108deg,
        var(--color-bg) 0%,
        rgba(10,8,6,0.92) 38%,
        rgba(10,8,6,0.4) 65%,
        transparent 100%
    );
}

.wa-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 5rem 0 4rem;
}

/* Huge typographic decoration */
.wa-hero-number {
    font-family: var(--font-heading);
    font-size: 32vw;
    font-weight: 900;
    line-height: 0.85;
    color: var(--color-text);
    opacity: 0.035;
    position: absolute;
    right: -2vw; bottom: -5%;
    pointer-events: none;
    user-select: none;
    z-index: 1;
}

/* Vertical side label */
.wa-hero-label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: var(--font-heading);
    font-size: 0.68rem;
    letter-spacing: 0.38em;
    color: var(--color-accent);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: absolute;
    right: 2rem; top: 50%;
    transform: translateY(-50%);
    opacity: 0.7;
    z-index: 3;
}

.hero-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.4em;
    color: var(--color-accent);
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    border-left: 3px solid var(--color-accent);
    padding-left: 0.75rem;
}

.hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 5vw, 4.2rem);
    font-weight: 300;
    line-height: 1.25;
    color: var(--color-text);
    letter-spacing: 0.02em;
    margin-bottom: 1.5rem;
}

.hero-desc {
    font-size: 0.92rem;
    color: var(--color-text-muted);
    line-height: 2;
    max-width: 420px;
    font-weight: 400;
    margin-bottom: 2.5rem;
}

/* Stats strip */
.hero-stats {
    display: flex;
    gap: 2.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--color-border);
    margin-top: 2rem;
}

.hero-stat-num {
    font-family: var(--font-heading);
    font-size: 1.7rem;
    font-weight: 200;
    color: var(--color-text);
    line-height: 1;
    margin-bottom: 0.2rem;
}

.hero-stat-label {
    font-size: 0.73rem;
    color: var(--color-text-muted);
    letter-spacing: 0.08em;
}

/* Horizontal ink rule */
.wa-divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 1.75rem 0;
}

/* ============================================================
   BUTTONS — Editorial Wa with high contrast
   ============================================================ */

/* Primary: filled solid black/dark */
.btn-primary {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 0.83rem;
    letter-spacing: 0.14em;
    padding: 0.78rem 2.2rem;
    border-radius: 0;
    background: var(--color-text) !important;
    color: var(--color-bg) !important;
    border: 2px solid var(--color-text) !important;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 4px 4px 0 var(--color-accent);
}

.btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
    z-index: 0;
}

.btn-primary span, .btn-primary i { position: relative; z-index: 1; }

.btn-primary:hover {
    border-color: var(--color-accent) !important;
    box-shadow: 6px 6px 0 var(--color-accent2);
    transform: translate(-2px, -2px);
    color: white !important;
}

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

/* Outline version */
.btn-outline-dark {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 0.83rem;
    letter-spacing: 0.14em;
    padding: 0.78rem 2.2rem;
    border-radius: 0;
    background: transparent;
    color: var(--color-text) !important;
    border: 2px solid var(--color-text);
    transition: all 0.3s ease;
    box-shadow: none;
}

.btn-outline-dark:hover {
    background: var(--color-text);
    color: var(--color-bg) !important;
    box-shadow: 4px 4px 0 var(--color-accent);
    transform: translate(-2px, -2px);
}

/* Filter tabs */
.btn-filter {
    background: transparent;
    border: 1px solid var(--color-border);
    padding: 0.38rem 1.1rem;
    border-radius: 0;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    color: var(--color-text-muted);
    letter-spacing: 0.06em;
    transition: all 0.22s;
    white-space: nowrap;
}

.btn-filter:hover {
    border-color: var(--color-text);
    color: var(--color-text);
    background: var(--color-bg-alt);
    box-shadow: none;
}

.btn-filter.active {
    background: var(--color-text);
    color: var(--color-bg);
    border-color: var(--color-text);
    box-shadow: none;
}

/* Small buttons */
.btn-sm {
    font-size: 0.78rem !important;
    padding: 0.35rem 0.9rem !important;
    border-radius: 0 !important;
}

/* Danger button */
.btn-danger {
    border-radius: 0 !important;
    background: var(--wa-beniaka) !important;
    border-color: var(--wa-beniaka) !important;
}

.btn-secondary { border-radius: 0 !important; }
.btn-success   { border-radius: 0 !important; }
.btn-warning   { border-radius: 0 !important; }

/* ============================================================
   SECTION SPACING
   ============================================================ */
.wa-section    { padding: 5rem 0; }
.wa-section-sm { padding: 3.5rem 0; }

/* ============================================================
   ABOUT SECTION
   ============================================================ */
.zen-about-wrapper {
    position: relative;
    overflow: hidden;
    border: 2px solid var(--color-text);
    box-shadow: 8px 8px 0 var(--color-text);
}

.zen-about-image {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    filter: saturate(0.7) contrast(1.15);
    transition: filter 0.5s, transform 0.6s;
}

.zen-about-wrapper:hover .zen-about-image {
    filter: saturate(0.9) contrast(1.1);
    transform: scale(1.04);
}

.about-badge {
    position: absolute; bottom: 0; right: 0;
    background: var(--color-text);
    color: var(--color-bg);
    padding: 1.2rem 0.85rem;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-family: var(--font-heading);
    font-size: 0.7rem;
    letter-spacing: 0.3em;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-border);
    transition: padding-left 0.2s;
}

.feature-item:hover { padding-left: 0.5rem; border-color: var(--color-text); }

.feature-icon-box {
    width: 38px; height: 38px;
    border: 1.5px solid var(--color-border);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    background: var(--color-bg-alt);
    transition: background 0.2s, border-color 0.2s;
}

.feature-item:hover .feature-icon-box {
    border-color: var(--color-text);
    background: var(--color-text);
}

.feature-item:hover .feature-icon-box i { color: var(--color-bg) !important; }

/* ============================================================
   PRODUCT CARDS — Editorial Framed Display
   ============================================================ */
.product-card {
    background: var(--color-bg-card);
    border: 1.5px solid var(--color-border);
    border-radius: 0;
    overflow: hidden;
    position: relative;
    transition: all 0.35s ease;
    display: flex;
    flex-direction: column;
}

/* Hover: bold shadow shift */
.product-card:hover {
    border-color: var(--color-text);
    box-shadow: 7px 7px 0 var(--color-text);
    transform: translate(-3px, -3px);
}

/* Left edge accent */
.product-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 3px; height: 0;
    background: var(--color-accent);
    transition: height 0.4s ease;
    z-index: 2;
}

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

/* Product image frame */
.product-img-wrapper {
    height: 240px;
    overflow: hidden;
    position: relative;
    background: var(--color-bg-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1.5px solid var(--color-border);
    transition: border-color 0.3s;
}

.product-card:hover .product-img-wrapper {
    border-color: var(--color-text);
}

.product-img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease, filter 0.4s;
    filter: saturate(0.75) contrast(1.1);
}

.product-card:hover .product-img {
    transform: scale(1.08);
    filter: saturate(1) contrast(1.05);
}

/* Product type badge — top right, bold */
.product-badge {
    position: absolute;
    top: 0; right: 0;
    background: var(--color-text);
    color: var(--color-bg);
    padding: 0.3rem 0.7rem;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    z-index: 3;
    font-family: var(--font-heading);
    text-transform: uppercase;
}

/* Body */
.product-card-body {
    padding: 1.1rem 1.2rem 1.3rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Product name */
.product-name {
    font-family: var(--font-heading);
    font-size: 0.97rem;
    font-weight: 400;
    color: var(--color-text);
    letter-spacing: 0.03em;
    margin-bottom: 0.2rem;
    transition: color 0.2s;
}

.product-name:hover { color: var(--color-accent); }

/* Star rating */
.product-stars { color: var(--color-accent2); font-size: 0.78rem; }

/* Price */
.product-price {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--wa-cha);
    letter-spacing: 0.02em;
}

[data-theme="dark"] .product-price { color: var(--color-accent2); }

/* Add to cart button inside card */
.btn-add-to-cart-card {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    padding: 0.42rem 0.9rem;
    border-radius: 0;
    background: transparent;
    border: 1.5px solid var(--color-border);
    color: var(--color-text);
    letter-spacing: 0.08em;
    transition: all 0.22s;
    cursor: pointer;
}

.btn-add-to-cart-card:hover {
    background: var(--color-text);
    color: var(--color-bg);
    border-color: var(--color-text);
}

/* Out of stock badge */
.badge-out-stock {
    display: inline-block;
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.68rem;
    padding: 0.3rem 0.65rem;
    letter-spacing: 0.08em;
    border-radius: 0;
}

/* ============================================================
   GLASS PANEL (compatibility)
   ============================================================ */
.glass-panel {
    background: var(--color-bg-card);
    border: 1.5px solid var(--color-border);
    border-radius: 0;
}

/* ============================================================
   CART SIDEBAR
   ============================================================ */
.cart-sidebar {
    position: fixed;
    top: 0; right: -480px;
    width: 460px;
    height: 100vh;
    background: var(--color-bg);
    z-index: 3500;
    transition: right 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex;
    flex-direction: column;
    border-left: 2px solid var(--color-text);
    box-shadow: -8px 0 40px rgba(0,0,0,0.15);
}

.cart-sidebar.active { right: 0; }

.cart-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 3499;
    display: none;
}

.cart-overlay.active { display: block; }
.bg-light-warm { background-color: var(--color-bg-alt); }

/* ============================================================
   AUTH CARD
   ============================================================ */
.auth-card {
    background: var(--color-bg-card);
    border: 2px solid var(--color-text);
    border-radius: 0;
    box-shadow: 8px 8px 0 var(--color-text);
}

.auth-title {
    font-family: var(--font-heading);
    font-size: 1.85rem;
    font-weight: 300;
    letter-spacing: 0.06em;
    color: var(--color-text);
}

.auth-input {
    background: var(--color-bg-alt);
    border: 1.5px solid var(--color-border);
    padding: 0.8rem 1.2rem;
    border-radius: 0;
    font-size: 0.88rem;
    color: var(--color-text);
    transition: border-color 0.2s, background 0.2s;
}

.auth-input:focus {
    background: var(--color-bg-card);
    border-color: var(--color-text);
    box-shadow: 0 0 0 2px rgba(0,0,0,0.08);
    color: var(--color-text);
}

.auth-input::placeholder { color: var(--color-text-muted); }

/* ============================================================
   ORDER CARDS
   ============================================================ */
.my-orders-container { display: flex; flex-direction: column; gap: 1.5rem; }

.order-card {
    background: var(--color-bg-card);
    border: 1.5px solid var(--color-border);
    border-left: 4px solid var(--wa-cha);
    border-radius: 0;
    padding: 1.75rem;
    transition: all 0.3s ease;
}

[data-theme="dark"] .order-card { border-left-color: var(--color-accent2); }

.order-card:hover {
    border-color: var(--color-text);
    box-shadow: 5px 5px 0 var(--color-text);
    transform: translate(-2px, -2px);
}

.order-header { border-bottom: 1px solid var(--color-border); padding-bottom: 1rem; margin-bottom: 1rem; }

/* ============================================================
   STATUS STEPS
   ============================================================ */
.status-step { flex: 1; text-align: center; padding-bottom: 1.5rem; position: relative; }

.status-step::after {
    content: ''; position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 2px;
    background: var(--color-border);
}

.status-step.active::after    { background: var(--color-accent2); }
.status-step.completed::after { background: var(--wa-cha); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer-section {
    background: var(--color-text);
    color: var(--color-bg);
    padding: 5rem 0 2.5rem;
    border-top: 4px solid var(--wa-cha);
    transition: background 0.4s, color 0.4s;
}

.footer-desc { color: rgba(247,243,236,0.5); line-height: 1.9; font-size: 0.85rem; }
[data-theme="dark"] .footer-section { background: #0A0806; color: var(--color-text); border-top-color: var(--color-accent); }
[data-theme="dark"] .footer-desc { color: rgba(240,230,212,0.4); }

.footer-heading {
    font-family: var(--font-heading);
    font-weight: 400;
    margin-bottom: 1.5rem;
    font-size: 0.72rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--color-accent2);
}

.footer-links li { margin-bottom: 0.75rem; }
.footer-links a { color: rgba(247,243,236,0.45); text-decoration: none; font-size: 0.84rem; transition: color 0.2s, padding-left 0.2s; }
.footer-links a:hover { color: var(--color-accent2); padding-left: 0.4rem; }
[data-theme="dark"] .footer-links a { color: rgba(240,230,212,0.4); }

.footer-contact li { color: rgba(247,243,236,0.45); margin-bottom: 0.9rem; display: flex; align-items: flex-start; font-size: 0.84rem; }
.footer-contact i  { color: var(--color-accent2); margin-right: 0.7rem; margin-top: 3px; flex-shrink: 0; }
[data-theme="dark"] .footer-contact li { color: rgba(240,230,212,0.4); }

.footer-bottom { border-top: 1px solid rgba(247,243,236,0.1); padding-top: 1.5rem; margin-top: 3rem; }
[data-theme="dark"] .footer-bottom { border-color: rgba(240,230,212,0.08); }

.social-links a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border: 1px solid rgba(247,243,236,0.2);
    color: rgba(247,243,236,0.5);
    text-decoration: none; transition: all 0.25s;
    margin-right: 0.4rem; border-radius: 0; font-size: 0.82rem;
}
.social-links a:hover { background: var(--wa-cha); border-color: var(--wa-cha); color: white; transform: translateY(-2px); }

/* ============================================================
   MODALS
   ============================================================ */
.modal-content {
    background: var(--color-bg-card);
    border: 2px solid var(--color-text);
    border-radius: 0;
    color: var(--color-text);
    box-shadow: 10px 10px 0 var(--color-text);
}

.rounded-modal { border-radius: 0; }
.modal-header { border-bottom: 1.5px solid var(--color-border); }
.modal-footer { border-top: 1.5px solid var(--color-border); }
.btn-close { filter: none; }
[data-theme="dark"] .btn-close { filter: invert(1); }

/* ============================================================
   FORM CONTROLS
   ============================================================ */
.form-control, .form-select {
    background: var(--color-bg-alt);
    border: 1.5px solid var(--color-border);
    border-radius: 0;
    color: var(--color-text);
    font-size: 0.88rem;
    transition: border-color 0.2s, background 0.3s;
}

.form-control:focus, .form-select:focus {
    background: var(--color-bg-card);
    border-color: var(--color-text);
    box-shadow: 0 0 0 2px rgba(0,0,0,0.08);
    color: var(--color-text);
}

.form-control::placeholder { color: var(--color-text-muted); }
.form-label { color: var(--color-text-muted); font-size: 0.78rem; letter-spacing: 0.04em; margin-bottom: 0.4rem; }

/* ============================================================
   TOASTS
   ============================================================ */
.toast-custom {
    min-width: 300px;
    border-radius: 0;
    background: var(--color-bg-card);
    border: 1.5px solid var(--color-text);
    border-left: 4px solid var(--wa-cha);
    box-shadow: 5px 5px 0 var(--color-text);
    margin-bottom: 10px;
    overflow: hidden;
    animation: slideDown 0.35s ease forwards;
}

@keyframes slideDown {
    from { transform: translateY(-14px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

.toast-success { border-left-color: var(--wa-matcha); }
.toast-error   { border-left-color: var(--color-accent); }
.toast-info    { border-left-color: var(--wa-fuji); }

/* ============================================================
   ADMIN CARDS (shim for admin pages)
   ============================================================ */
.admin-card {
    background: var(--color-bg-card);
    border: 1.5px solid var(--color-border);
    border-radius: 0;
}

.table thead th {
    font-family: var(--font-heading);
    font-weight: 400;
    letter-spacing: 0.07em;
    border-bottom: 2px solid var(--color-text);
    font-size: 0.78rem;
    text-transform: uppercase;
    color: var(--color-text-muted);
    background: var(--color-bg-alt);
}

.table {
    color: var(--color-text);
    border-color: var(--color-border);
}

.table td, .table th {
    border-color: var(--color-border);
    vertical-align: middle;
}

/* ============================================================
   STAT CARDS
   ============================================================ */
.stat-card {
    background: var(--color-bg-card);
    border: 1.5px solid var(--color-border);
    border-radius: 0;
    transition: all 0.25s;
    position: relative;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 4px; height: 100%;
    background: var(--color-accent);
}

.stat-card:hover {
    border-color: var(--color-text);
    box-shadow: 4px 4px 0 var(--color-text);
    transform: translate(-2px, -2px);
}

.stat-icon {
    width: 50px; height: 50px;
    border: 1.5px solid var(--color-border);
    background: var(--color-bg-alt);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    border-radius: 0;
}

.admin-tab-btn {
    background: var(--color-bg-card);
    border: 1.5px solid var(--color-border);
    padding: 0.5rem 1.2rem;
    border-radius: 0;
    font-size: 0.82rem;
    color: var(--color-text-muted);
    transition: all 0.2s;
    letter-spacing: 0.04em;
}

.admin-tab-btn:hover, .admin-tab-btn.active {
    background: var(--color-text);
    color: var(--color-bg);
    border-color: var(--color-text);
}

/* Color helpers */
.bg-primary-light { background: rgba(107,76,59,0.08); }
.bg-warning-light { background: rgba(200,136,58,0.08); }
.bg-success-light { background: rgba(92,122,76,0.08); }
.bg-danger-light  { background: rgba(155,27,48,0.08); }
.text-success     { color: var(--wa-matcha) !important; }
.text-danger      { color: var(--color-accent) !important; }
.text-info        { color: var(--wa-fuji) !important; }
.text-warning     { color: var(--color-accent2) !important; }

/* ============================================================
   SKELETON LOADING
   ============================================================ */
.skeleton {
    background: linear-gradient(90deg, var(--color-bg-alt) 25%, var(--color-border) 50%, var(--color-bg-alt) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: 0;
}

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

.skeleton-img  { height: 240px; }
.skeleton-text { height: 13px; margin-bottom: 0.5rem; }
.skeleton-text.short  { width: 55%; }
.skeleton-text.medium { width: 80%; }

/* ============================================================
   MICRO-ANIMATIONS
   ============================================================ */
@keyframes addToCartPop {
    0%   { transform: scale(1); }
    25%  { transform: scale(0.88); }
    50%  { transform: scale(1.12); }
    100% { transform: scale(1); }
}

.btn-add-to-cart.animating { animation: addToCartPop 0.35s ease; }

.fly-item {
    position: fixed; width: 30px; height: 30px;
    background: var(--color-accent); z-index: 9999;
    pointer-events: none;
    animation: flyToCart 0.55s ease forwards;
}

@keyframes flyToCart {
    0%   { opacity: 1; transform: scale(1) translate(0,0); }
    80%  { opacity: 0.3; }
    100% { opacity: 0; transform: scale(0.2) translate(80px,-160px); }
}

/* ============================================================
   QTY CONTROL
   ============================================================ */
.qty-control { display: flex; align-items: center; border: 1.5px solid var(--color-border); }
.qty-btn {
    width: 30px; height: 30px;
    border: none; background: var(--color-bg-alt);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.78rem; color: var(--color-text); cursor: pointer;
    transition: all 0.18s;
}
.qty-btn:hover { background: var(--color-text); color: var(--color-bg); }
.qty-val { min-width: 34px; text-align: center; font-weight: 600; font-size: 0.88rem; border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border); padding: 0 0.4rem; color: var(--color-text); }

/* ============================================================
   TAG CHIPS
   ============================================================ */
.tag-chip {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.68rem; font-weight: 500;
    padding: 0.18rem 0.5rem; border-radius: 0;
    border: 1px solid var(--color-border);
    background: var(--color-bg-alt);
    margin-right: 0.2rem; margin-bottom: 0.2rem;
    white-space: nowrap; letter-spacing: 0.04em;
    transition: all 0.15s; color: var(--color-text);
}
.tag-chip:hover { border-color: var(--color-text); background: var(--color-text); color: var(--color-bg); }

/* ============================================================
   FADE IN UP
   ============================================================ */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fade-in-up { animation: fadeInUp 0.45s ease forwards; }
.fade-in-up:nth-child(1) { animation-delay: 0.04s; }
.fade-in-up:nth-child(2) { animation-delay: 0.09s; }
.fade-in-up:nth-child(3) { animation-delay: 0.14s; }
.fade-in-up:nth-child(4) { animation-delay: 0.19s; }

/* ============================================================
   CONFIRM ICON
   ============================================================ */
.confirm-icon-wrapper {
    width: 68px; height: 68px;
    background: var(--color-bg-alt);
    border: 2px solid var(--color-text);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto; border-radius: 0;
}

/* ============================================================
   SCROLLBAR — Minimal Wa
   ============================================================ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }

/* ============================================================
   FEEDBACK, ADMIN NAV etc.
   ============================================================ */
.feedback-history-container { max-height: 400px; overflow-y: auto; padding-right: 8px; }
.admin-nav::-webkit-scrollbar { height: 3px; }
.admin-nav::-webkit-scrollbar-thumb { background: var(--color-border); }

/* ============================================================
   DARK MODE — All elements
   ============================================================ */
[data-theme="dark"] p,
[data-theme="dark"] h1, [data-theme="dark"] h2,
[data-theme="dark"] h3, [data-theme="dark"] h4,
[data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--color-text) !important; }

[data-theme="dark"] .section-title  { color: var(--color-text) !important; }
[data-theme="dark"] .product-name   { color: var(--color-text) !important; }
[data-theme="dark"] .product-card   { background: var(--color-bg-card); border-color: var(--color-border); }
[data-theme="dark"] .product-img-wrapper { background: #201510; border-color: var(--color-border); }
[data-theme="dark"] .product-card:hover  { border-color: var(--color-text); box-shadow: 7px 7px 0 var(--color-text); }
[data-theme="dark"] .product-badge       { background: var(--color-text); color: var(--color-bg); }
[data-theme="dark"] .order-card    { background: var(--color-bg-card); border-color: var(--color-border); }
[data-theme="dark"] .order-card:hover { border-color: var(--color-text); box-shadow: 5px 5px 0 var(--color-text); }
[data-theme="dark"] .auth-card     { background: var(--color-bg-card); border-color: var(--color-text); box-shadow: 8px 8px 0 var(--color-text); }
[data-theme="dark"] .auth-input    { background: var(--color-bg-alt) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; }
[data-theme="dark"] .auth-input:focus { background: var(--color-bg-card) !important; border-color: var(--color-text) !important; color: var(--color-text) !important; }
[data-theme="dark"] .cart-sidebar  { background: var(--color-bg) !important; border-color: var(--color-text); }
[data-theme="dark"] .ai-search-box { background: var(--color-bg-alt); border-color: var(--color-border); }
[data-theme="dark"] .ai-search-box input { color: var(--color-text); }
[data-theme="dark"] .ai-search-dropdown { background: var(--color-bg-card); border-color: var(--color-text); box-shadow: 4px 4px 0 var(--color-text); }
[data-theme="dark"] .ai-search-item { color: var(--color-text); border-bottom-color: var(--color-border); }
[data-theme="dark"] .ai-search-item:hover { background: var(--color-bg-alt); }
[data-theme="dark"] .admin-card    { background: var(--color-bg-card); border-color: var(--color-border); }
[data-theme="dark"] .glass-panel   { background: var(--color-bg-card); border-color: var(--color-border); }
[data-theme="dark"] .toast-custom  { background: var(--color-bg-card); border-color: var(--color-text); box-shadow: 5px 5px 0 var(--color-text); }
[data-theme="dark"] .btn-filter    { border-color: var(--color-border); color: var(--color-text-muted); }
[data-theme="dark"] .btn-filter:hover { border-color: var(--color-text); color: var(--color-text); background: var(--color-bg-alt); }
[data-theme="dark"] .btn-filter.active { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
[data-theme="dark"] .dropdown-menu { background: var(--color-bg-card); border-color: var(--color-text); box-shadow: 5px 5px 0 var(--color-text); }
[data-theme="dark"] .dropdown-item { color: var(--color-text); }
[data-theme="dark"] .dropdown-item:hover { background: var(--color-bg-alt); }
[data-theme="dark"] .navbar { border-color: var(--color-text) !important; }
[data-theme="dark"] .brand-text { color: var(--color-text); }
[data-theme="dark"] .brand-logo { background: var(--color-text); color: var(--color-bg); }
[data-theme="dark"] .zen-about-wrapper { border-color: var(--color-text); box-shadow: 8px 8px 0 var(--color-text); }
[data-theme="dark"] .about-badge { background: var(--color-text); color: var(--color-bg); }

/* Bootstrap Form Controls — Dark Mode */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] textarea.form-control {
    background-color: var(--color-bg-alt) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: var(--color-bg-card) !important;
    border-color: var(--color-accent2) !important;
    color: var(--color-text) !important;
    box-shadow: 0 0 0 2px rgba(212,146,60,0.2) !important;
}
[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] textarea.form-control::placeholder { color: var(--color-text-muted) !important; }
[data-theme="dark"] .form-label { color: var(--color-text) !important; }
[data-theme="dark"] .form-check-label { color: var(--color-text) !important; }
[data-theme="dark"] .form-check-input { background-color: var(--color-bg-alt); border-color: var(--color-border); }
[data-theme="dark"] .form-check-input:checked { background-color: var(--color-accent2); border-color: var(--color-accent2); }

/* Bootstrap Tables — Dark Mode */
[data-theme="dark"] .table {
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
    --bs-table-bg: transparent;
    --bs-table-color: var(--color-text);
    --bs-table-border-color: var(--color-border);
    --bs-table-hover-bg: rgba(212,146,60,0.06);
    --bs-table-striped-bg: rgba(255,255,255,0.02);
}
[data-theme="dark"] .table th,
[data-theme="dark"] .table td { color: var(--color-text) !important; background-color: transparent !important; }
[data-theme="dark"] .table-light > *, [data-theme="dark"] .table-light {
    background-color: rgba(212,146,60,0.06) !important;
    color: var(--color-accent2) !important;
    border-color: var(--color-border) !important;
}
[data-theme="dark"] .table-hover tbody tr:hover > * {
    background-color: rgba(212,146,60,0.06) !important;
    color: var(--color-text) !important;
}

/* Bootstrap Cards — Dark Mode */
[data-theme="dark"] .card { background-color: var(--color-bg-card) !important; border-color: var(--color-border) !important; color: var(--color-text) !important; }
[data-theme="dark"] .card-header, [data-theme="dark"] .card-footer { background-color: var(--color-bg-alt) !important; border-color: var(--color-border) !important; color: var(--color-text) !important; }
[data-theme="dark"] .card-body { color: var(--color-text) !important; }
[data-theme="dark"] .bg-white { background-color: var(--color-bg-card) !important; color: var(--color-text) !important; }
[data-theme="dark"] .bg-light { background-color: var(--color-bg-alt) !important; color: var(--color-text) !important; }

/* Bootstrap List Groups — Dark Mode */
[data-theme="dark"] .list-group-item { background-color: var(--color-bg-card) !important; border-color: var(--color-border) !important; color: var(--color-text) !important; }
[data-theme="dark"] .list-group-item:hover { background-color: var(--color-bg-alt) !important; }

/* Bootstrap Badges — Dark Mode */
[data-theme="dark"] .badge.bg-secondary { background-color: rgba(212,146,60,0.2) !important; color: var(--color-accent2) !important; }
[data-theme="dark"] .badge.bg-success   { background-color: rgba(61,94,56,0.5) !important; color: #7fc47a !important; }
[data-theme="dark"] .badge.bg-danger    { background-color: rgba(139,26,47,0.5) !important; color: #f4899e !important; }
[data-theme="dark"] .badge.bg-warning   { background-color: rgba(181,114,42,0.4) !important; color: #ffd580 !important; }
[data-theme="dark"] .badge.bg-primary   { background-color: rgba(200,53,78,0.4) !important; color: #f48fa3 !important; }
[data-theme="dark"] .badge.bg-info      { background-color: rgba(92,78,138,0.4) !important; color: #c4b5f5 !important; }

/* Bootstrap Alerts — Dark Mode */
[data-theme="dark"] .alert-success { background-color: rgba(61,94,56,0.3) !important; color: #7fc47a !important; border-color: rgba(61,94,56,0.5) !important; }
[data-theme="dark"] .alert-danger  { background-color: rgba(139,26,47,0.3) !important; color: #f4899e !important; border-color: rgba(139,26,47,0.5) !important; }
[data-theme="dark"] .alert-warning { background-color: rgba(181,114,42,0.3) !important; color: #ffd580 !important; border-color: rgba(181,114,42,0.5) !important; }
[data-theme="dark"] .alert-info    { background-color: rgba(92,78,138,0.3) !important; color: #c4b5f5 !important; border-color: rgba(92,78,138,0.5) !important; }

/* Modal — Dark Mode */
[data-theme="dark"] .modal-content { background: var(--color-bg-card); color: var(--color-text); border-color: var(--color-text); box-shadow: 10px 10px 0 var(--color-text); }
[data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { border-color: var(--color-border); }
[data-theme="dark"] .btn-close { filter: invert(1) opacity(0.7); }

/* Misc — Dark Mode */
[data-theme="dark"] .admin-tab-btn { background: var(--color-bg-card); border-color: var(--color-border); color: var(--color-text-muted); }
[data-theme="dark"] .admin-tab-btn:hover, [data-theme="dark"] .admin-tab-btn.active { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
[data-theme="dark"] .tag-chip { background: var(--color-bg-alt); border-color: var(--color-border); color: var(--color-text); }
[data-theme="dark"] .tag-chip:hover { background: var(--color-text); border-color: var(--color-text); color: var(--color-bg); }
[data-theme="dark"] .qty-btn { background: var(--color-bg-alt); color: var(--color-text); }
[data-theme="dark"] .qty-btn:hover { background: var(--color-text); color: var(--color-bg); }
[data-theme="dark"] .confirm-icon-wrapper { background: var(--color-bg-alt); border-color: var(--color-text); }
[data-theme="dark"] .stat-card { background: var(--color-bg-card); border-color: var(--color-border); }
[data-theme="dark"] .stat-card:hover { border-color: var(--color-text); box-shadow: 4px 4px 0 var(--color-text); }
[data-theme="dark"] .stat-icon { background: var(--color-bg-alt); border-color: var(--color-border); }
[data-theme="dark"] .wa-accent-line { opacity: 0.8; }
[data-theme="dark"] .zen-about-image { filter: saturate(0.6) contrast(1.2); }
[data-theme="dark"] .admin-topbar { background: var(--color-bg-card) !important; border-color: var(--color-text) !important; }
[data-theme="dark"] .border-bottom { border-color: var(--color-border) !important; }
[data-theme="dark"] .border-top    { border-color: var(--color-border) !important; }
[data-theme="dark"] .text-muted    { color: var(--color-text-muted) !important; }
[data-theme="dark"] small          { color: var(--color-text-muted); }
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--color-bg); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--color-border); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 992px) {
    .wa-hero { min-height: 70vh; }
    .hero-title { font-size: clamp(2rem, 5vw, 2.8rem); }
}

@media (max-width: 768px) {
    .hero-title { font-size: 2.1rem; }
    .section-title { font-size: 1.65rem; }
    .cart-sidebar { width: 100%; right: -100%; }
    .wa-hero { min-height: 75vh; }
    .hero-stats { gap: 1.5rem; flex-wrap: wrap; }
    .navbar { height: 58px; }
}

@media (max-width: 576px) {
    .hero-title { font-size: 1.85rem; }
}