/**
 * Cosette.phil Intelligent Retail System
 * Main Stylesheet
 * Save this as: css/styles.css
 */

/* ============================================
   ROOT & GENERAL STYLES
   ============================================ */

:root {
    --primary-color: #111111;
    --primary-hover: #2d2d2d;
    --primary-shadow: rgba(17, 17, 17, 0.18);
    --secondary-color: #efefef;
    --danger-color: #c0392b;
    --success-color: #2d8f5d;
    --dark-color: #111111;
    --light-color: #f7f7f7;
    --text-color: #1d1d1d;
    --border-color: #d7d7d7;

    --primary-dark: #111111;
    --primary-light: #f7f7f7;
    --accent-color: #8a8a8a;
    --text-dark: #111111;
    --text-light: #666666;
    --white: #FFFFFF;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-color);
    background-color: #efefef;
}

body {
    line-height: 1.6;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: var(--dark-color);
    margin-bottom: 1rem;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.5rem;
}

p {
    margin-bottom: 0.5rem;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover {
    color: var(--secondary-color);
    text-decoration: underline;
}

/* ============================================
   NAVIGATION BAR
   ============================================ */

.navbar {
   background: rgba(255, 255, 255, 0.98) !important;
   border-bottom: 1px solid rgba(17, 17, 17, 0.08);
   min-height: 52px;
   height: 54px;
   padding: 0 1.25rem;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   z-index: 100;
   box-shadow: 0 1px 0 rgba(17,17,17,0.03);
   display: flex;
   align-items: center;
}

.navbar:not(.navbar-hero) {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1050;
   background: rgba(255, 255, 255, 0.98) !important;
   border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}

.navbar-hero {
   background: rgba(15, 15, 15, 0.18) !important;
   backdrop-filter: blur(4px);
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   z-index: 100;
   min-height: 52px;
   height: 54px;
   padding: 0 1.25rem;
   display: flex;
   align-items: center;
}

.navbar .container-fluid {
   background: transparent !important;
   min-height: 52px;
   display: flex;
   align-items: center;
}

.navbar-brand {
   font-weight: 700;
   font-size: 1.3rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: #111111 !important;
   font-family: Georgia, 'Times New Roman', serif;
   display: inline-flex;
   align-items: center;
   padding: 0;
   margin-right: 2rem;
   text-decoration: none;
   line-height: 1;
   height: 44px;
}

.brand-logo {
   height: 42px !important;
   width: auto !important;
   max-height: 44px !important;
   object-fit: contain;
   display: inline-block;
   vertical-align: middle;
   transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
}

.navbar-brand:hover .brand-logo,
.store-brand:hover .brand-logo {
   transform: scale(1.04);
}

.brand-logo-light {
   display: none;
}

.brand-logo-dark {
   display: block;
}

.navbar-hero .brand-logo-light {
   display: block !important;
}

.navbar-hero .brand-logo-dark {
   display: none !important;
}

.navbar-hero .btn-outline-dark {
   border-color: rgba(255, 255, 255, 0.65) !important;
   color: #ffffff !important;
   background: transparent;
}

.navbar-hero .btn-outline-dark:hover {
   background: rgba(255, 255, 255, 0.15) !important;
   color: #ffffff !important;
}

/* Minimalist Borderless Header Icon Buttons (User, Bag, Search) */
.user-icon-btn,
.bag-icon-btn,
.search-icon-btn {
   background: transparent !important;
   border: none !important;
   outline: none !important;
   box-shadow: none !important;
   padding: 0.35rem 0.5rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: #111111;
   font-size: 1.18rem;
   cursor: pointer;
   border-radius: 50%;
   transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, color 0.2s ease;
   position: relative;
   line-height: 1;
   text-decoration: none;
   -webkit-appearance: none;
   appearance: none;
}

.user-icon-btn::after,
.bag-icon-btn::after,
.search-icon-btn::after {
   display: none !important;
}

.user-icon-btn:hover,
.user-icon-btn:focus,
.bag-icon-btn:hover,
.bag-icon-btn:focus,
.search-icon-btn:hover,
.search-icon-btn:focus {
   transform: scale(1.12);
   color: #111111;
   outline: none;
   text-decoration: none;
}

.navbar-hero .user-icon-btn,
.navbar-hero .bag-icon-btn,
.navbar-hero .search-icon-btn {
   color: #ffffff !important;
}

.navbar-hero .user-icon-btn:hover,
.navbar-hero .bag-icon-btn:hover,
.navbar-hero .search-icon-btn:hover {
   color: #ffffff !important;
   opacity: 0.85;
}

.navbar.navbar-scrolled .user-icon-btn,
.navbar.navbar-scrolled .bag-icon-btn,
.navbar.navbar-scrolled .search-icon-btn {
   color: #111111 !important;
}

.navbar.navbar-scrolled .user-icon-btn:hover,
.navbar.navbar-scrolled .bag-icon-btn:hover,
.navbar.navbar-scrolled .search-icon-btn:hover {
   color: #000000 !important;
   opacity: 0.8;
}

.store-header .user-icon-btn,
.store-header .bag-icon-btn,
.store-header .search-icon-btn {
   color: #111111 !important;
}

.store-header .user-icon-btn:hover,
.store-header .bag-icon-btn:hover,
.store-header .search-icon-btn:hover {
   color: #000000 !important;
   opacity: 0.8;
}

/* Minimalist Bag Count Badge */
.bag-icon-btn .bag-badge,
.bag-badge {
   position: absolute;
   top: 1px;
   right: 0px;
   background: #dc3545;
   color: #ffffff;
   font-size: 0.62rem;
   font-weight: 700;
   min-width: 15px;
   height: 15px;
   line-height: 15px;
   padding: 0 3px;
   border-radius: 999px;
   text-align: center;
   pointer-events: none;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
   transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   will-change: transform;
}

.bag-badge.badge-pop {
   animation: badgeBounce 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

@keyframes badgeBounce {
   0% { transform: scale(1); }
   35% { transform: scale(1.4); }
   70% { transform: scale(0.92); }
   100% { transform: scale(1); }
}

.bag-icon-btn .bag-svg-icon,
.user-icon-btn .user-svg-icon {
   width: 1.18rem;
   height: 1.18rem;
   display: inline-block;
   vertical-align: middle;
   stroke: currentColor;
   fill: none;
   stroke-width: 1.6;
}

/* User dropdown on hover + click */
.auth-user-dropdown {
   position: relative;
   display: inline-flex;
   align-items: center;
}

.auth-user-dropdown .dropdown-menu {
   display: block !important;
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   transform: translateY(6px);
   transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s ease;
   min-width: 215px;
   border-radius: 12px;
   padding: 0.5rem 0;
   box-shadow: 0 14px 35px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.05);
   border: 1px solid rgba(0, 0, 0, 0.08);
   background: #ffffff;
   position: absolute;
   top: 100%;
   right: 0;
   left: auto;
   margin-top: 0.35rem;
   z-index: 1060;
}

/* Invisible bridge so mouse moving from icon to menu never loses hover */
.auth-user-dropdown .dropdown-menu::before {
   content: '';
   position: absolute;
   top: -12px;
   left: 0;
   right: 0;
   height: 12px;
   background: transparent;
}

.auth-user-dropdown:hover > .dropdown-menu,
.auth-user-dropdown:focus-within > .dropdown-menu,
.auth-user-dropdown.show > .dropdown-menu,
.auth-user-dropdown > .dropdown-menu.show {
   opacity: 1 !important;
   visibility: visible !important;
   pointer-events: auto !important;
   transform: translateY(0) !important;
}

.auth-user-dropdown .dropdown-item {
   padding: 0.6rem 1.15rem;
   font-size: 0.86rem;
   color: #222222;
   transition: background-color 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
   background: transparent;
   border: none;
   width: 100%;
   text-align: left;
}

.auth-user-dropdown .dropdown-item:hover {
   background-color: #f6f6f6;
   color: #111111;
   padding-left: 1.3rem;
}

/* ==========================================================================
   FLOATING ACCOUNT POPOVER CARD (Embedded Login & Account Div)
   ========================================================================== */
.account-popover-card {
   position: absolute;
   top: calc(100% + 8px);
   right: 0;
   width: 355px;
   max-width: calc(100vw - 20px);
   background: #ffffff;
   border-radius: 20px;
   padding: 1.35rem 1.35rem 1.15rem;
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.16), 0 4px 14px rgba(0, 0, 0, 0.06);
   border: 1px solid rgba(0, 0, 0, 0.08);
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   transform: translate3d(0, 10px, 0) scale(0.97);
   transform-origin: top right;
   transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1), transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.22s ease;
   z-index: 1080;
   color: #111827;
   text-align: left;
   box-sizing: border-box;
   will-change: transform, opacity;
   backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
}

.account-popover-card.show {
   opacity: 1 !important;
   visibility: visible !important;
   pointer-events: auto !important;
   transform: translate3d(0, 0, 0) scale(1) !important;
   transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1), transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.account-card-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 1.1rem;
}

.account-card-title {
   font-size: 1.08rem;
   font-weight: 700;
   color: #111827;
   margin: 0;
   letter-spacing: -0.01em;
   line-height: 1.3;
}

.account-card-close-btn {
   width: 30px;
   height: 30px;
   border-radius: 50%;
   background: #f3f4f6;
   border: none;
   color: #6b7280;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
   padding: 0;
   font-size: 1.25rem;
   line-height: 1;
}

.account-card-close-btn:hover {
   background: #e5e7eb;
   color: #111827;
   transform: scale(1.06);
}

.account-card-alert {
   padding: 0.6rem 0.8rem;
   border-radius: 10px;
   font-size: 0.8rem;
   margin-bottom: 0.85rem;
   background: #fee2e2;
   color: #991b1b;
   border: 1px solid #fecaca;
   line-height: 1.35;
}

.account-card-google-btn {
   width: 100%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   padding: 0.65rem 1rem;
   border-radius: 999px;
   border: 1px solid #e5e7eb;
   background: #ffffff;
   color: #1f2937;
   font-size: 0.88rem;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.15s ease;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.account-card-google-btn:hover {
   background: #f9fafb;
   border-color: #d1d5db;
   box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}

.account-card-divider {
   display: flex;
   align-items: center;
   margin: 1rem 0;
   color: #9ca3af;
   font-size: 0.7rem;
   font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
}

.account-card-divider::before,
.account-card-divider::after {
   content: "";
   flex: 1;
   border-bottom: 1px solid #e5e7eb;
}

.account-card-divider span {
   padding: 0 8px;
}

.account-card-label {
   display: block;
   font-size: 0.78rem;
   font-weight: 600;
   color: #374151;
   margin-bottom: 0.3rem;
}

.account-card-input {
   width: 100%;
   padding: 0.6rem 0.85rem;
   border-radius: 10px;
   border: 1px solid #d1d5db;
   font-size: 0.86rem;
   color: #111827;
   background: #fafafa;
   transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
   box-sizing: border-box;
}

.account-card-input:focus {
   background: #ffffff;
   border-color: #111111;
   box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08);
   outline: none;
}

.account-card-link {
   color: #4b5563;
   text-decoration: none;
   font-size: 0.78rem;
   transition: color 0.15s ease;
}

.account-card-link:hover {
   color: #111827;
   text-decoration: underline;
}

.account-card-submit-btn {
   width: 100%;
   padding: 0.68rem 1rem;
   border-radius: 10px;
   background: #111111;
   color: #ffffff;
   border: none;
   font-size: 0.88rem;
   font-weight: 600;
   cursor: pointer;
   transition: background 0.15s ease, transform 0.1s ease;
}

.account-card-submit-btn:hover {
   background: #262626;
}

.account-card-submit-btn:active {
   transform: scale(0.99);
}

.account-card-submit-btn:disabled,
.account-card-google-btn:disabled {
   opacity: 0.65;
   cursor: not-allowed;
}

.account-card-pills {
   display: flex;
   gap: 10px;
   margin-top: 1.15rem;
   padding-top: 1rem;
   border-top: 1px solid #f1f3f5;
}

.account-pill-btn {
   flex: 1;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 7px;
   padding: 0.55rem 0.85rem;
   border-radius: 999px;
   border: 1px solid #e5e7eb;
   background: #ffffff;
   color: #374151;
   font-size: 0.82rem;
   font-weight: 500;
   text-decoration: none;
   transition: all 0.15s ease;
}

.account-pill-btn:hover {
   background: #f9fafb;
   border-color: #d1d5db;
   color: #111827;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
}

.account-card-user-info {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 0.6rem 0.4rem;
   margin-bottom: 0.5rem;
}

.account-card-avatar {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: #f3f4f6;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   flex-shrink: 0;
}

.account-card-avatar img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.account-card-links {
   display: flex;
   flex-direction: column;
   gap: 4px;
   margin: 0.75rem 0;
   padding-top: 0.5rem;
   border-top: 1px solid #f1f3f5;
}

.account-card-menu-link {
   display: flex;
   align-items: center;
   padding: 0.5rem 0.75rem;
   border-radius: 8px;
   color: #374151;
   font-size: 0.86rem;
   text-decoration: none;
   transition: background 0.15s ease, color 0.15s ease;
}

.account-card-menu-link:hover {
   background: #f3f4f6;
   color: #111827;
}

.account-card-signout-btn {
   width: 100%;
   padding: 0.6rem 1rem;
   border-radius: 10px;
   background: #fee2e2;
   color: #dc2626;
   border: 1px solid #fecaca;
   font-size: 0.85rem;
   font-weight: 600;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   transition: background 0.15s ease;
}

.account-card-signout-btn:hover {
   background: #fecaca;
   color: #b91c1c;
}


.nav-link {
   color: rgba(17, 17, 17, 0.84) !important;
   font-weight: 500;
   margin-left: 1.5rem;
   text-decoration: none;
   transition: color 0.3s ease, opacity 0.3s ease;
   font-size: 0.78rem;
   letter-spacing: 0.14em;
   text-transform: uppercase;
}

.nav-link:hover,
.nav-link:focus,
.nav-link.active {
   color: #111111 !important;
   opacity: 1;
   text-decoration: none !important;
}

.navbar-hero .navbar-brand,
.navbar-hero .nav-link,
.navbar-hero .btn-outline-primary,
.navbar-hero .btn-primary {
   color: #ffffff !important;
}

.navbar-hero .btn-primary {
   background: rgba(255, 255, 255, 0.12);
   border-color: rgba(255, 255, 255, 0.45);
}

.navbar-hero .btn-outline-primary {
   border-color: rgba(255, 255, 255, 0.6);
   color: #ffffff !important;
   background: transparent;
}

/* Sticky Scrolled State for dynamic transition */
.navbar {
   transition: background-color 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}

.navbar.navbar-scrolled {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1050;
   background: rgba(255, 255, 255, 0.95) !important;
   backdrop-filter: blur(12px);
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
   border-bottom: 1px solid rgba(0, 0, 0, 0.06);
   min-height: 52px;
   height: 54px;
   padding: 0 1.25rem;
}

.navbar.navbar-scrolled .nav-link {
   color: rgba(17, 17, 17, 0.85) !important;
}

.navbar.navbar-scrolled .nav-link:hover,
.navbar.navbar-scrolled .nav-link.active {
   color: #111111 !important;
}

.navbar.navbar-scrolled .brand-logo-light {
   display: none !important;
}

.navbar.navbar-scrolled .brand-logo-dark {
   display: block !important;
}

.navbar.navbar-scrolled .btn-primary {
   background: #111111 !important;
   border-color: #111111 !important;
   color: #ffffff !important;
}

.navbar.navbar-scrolled .btn-outline-dark {
   border-color: #111111 !important;
   color: #111111 !important;
   background: transparent !important;
}

.navbar.navbar-scrolled .navbar-toggler {
   border-color: rgba(0, 0, 0, 0.2);
}

.navbar.navbar-scrolled .navbar-toggler-icon {
   filter: invert(1);
}

.dropdown-menu {
   border: 1px solid rgba(0, 0, 0, 0.08);
   box-shadow: 0 8px 20px rgba(0,0,0,0.08);
   border-radius: 10px;
   padding: 0.5rem 0;
}

.dropdown-item {
   color: #333;
   padding: 0.6rem 1rem;
   font-size: 0.9rem;
}

.dropdown-item:hover {
   background-color: #f1f1f1;
   color: #111111;
}

.badge {
   font-size: 0.65rem;
   padding: 0.25rem 0.4rem !important;
}

.navbar .btn {
   border-radius: 999px;
   padding: 0.62rem 1.2rem;
   font-size: 0.8rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
}

.navbar .btn-primary {
   background: rgba(255,255,255,0.96);
   color: #111111;
   border: 1px solid rgba(255,255,255,0.85);
}

.navbar-hero .btn-primary {
   color: #111111 !important;
}

.navbar .btn-primary:hover {
   background: #ffffff;
}

.navbar .btn-outline-primary {
   border-color: rgba(255,255,255,0.8);
   color: #ffffff;
}

.navbar .btn-outline-primary:hover {
   background: rgba(255,255,255,0.12);
   color: #ffffff;
}

/* ============================================
   HERO SECTION
   ============================================ */

.hero-banner {
   position: relative;
   height: 700px;
   overflow: hidden;
   margin: 0;
   background: #111;
}

.hero-slider {
   position: relative;
   width: 100%;
   height: 100%;
}

.hero-slide {
   position: absolute;
   inset: 0;
   background-size: cover;
   background-position: center center;
   opacity: 0;
   transform: scale(1.06) translateY(18px);
   transition: opacity 1s ease, transform 1.2s ease;
   display: block;
   cursor: pointer;
   text-decoration: none;
}

.hero-slide.has-overlay-text::before {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.38) 36%, rgba(0,0,0,0.16) 100%);
}

.hero-slide.active {
   opacity: 1;
   transform: scale(1) translateY(0);
}

.banner-overlay {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   z-index: 1;
   padding-left: clamp(1.5rem, 6vw, 7rem);
   padding-top: 20px;
}
 
.banner-content {
   display: block;
   max-width: 560px;
   color: #ffffff;
}

.banner-content h1 {
   color: #ffffff;
   font-family: Georgia, 'Times New Roman', serif;
   font-size: clamp(2.6rem, 5vw, 5rem);
   line-height: 1;
   margin-bottom: 1rem;
}

.banner-content p {
   color: rgba(255,255,255,0.9);
   font-size: 1.05rem;
   margin-bottom: 1.5rem;
}

.banner-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0.8rem 1.3rem;
   background: #ffffff;
   color: #111111;
   font-size: 0.78rem;
   font-weight: 700;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   text-decoration: none;
}

.banner-button:hover,
.banner-button:focus {
   background: #111111;
   color: #ffffff;
   text-decoration: none;
}

.slider-controls {
   position: absolute;
   left: 50%;
   bottom: 20px;
   transform: translateX(-50%);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 2;
}
  
.slider-dots {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
   background: transparent;
   border: none;
   padding: 0;
}
  
.slider-dot {
   width: 8px;
   height: 8px;
   border: 1px solid rgba(255,255,255,0.9);
   border-radius: 50%;
   background: rgba(255,255,255,0.35);
   display: inline-block;
   transition: all 0.25s ease;
   cursor: pointer;
   padding: 0;
   appearance: none;
   -webkit-appearance: none;
   box-shadow: none;
}
  
.slider-dot:hover,
.slider-dot:focus-visible {
   background: rgba(255,255,255,0.7);
   outline: none;
}
  
.slider-dot.active {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: white;
   box-shadow: 0 0 0 2px rgba(255,255,255,0.18);
}

@media (max-width: 768px) {
   .hero-banner {
       height: 560px;
   }

   .banner-content h1 {
       font-size: 2.6rem;
   }

   .banner-overlay {
       padding-left: 1.25rem;
       padding-right: 1.25rem;
       padding-top: 40px;
   }

   .slider-controls {
       gap: 10px;
       bottom: 16px;
   }

   .slider-arrow {
       width: 32px;
       height: 32px;
   }

   .slider-dot.active {
       width: 22px;
   }
}
/* ============================================
   CATEGORY / BEST SELLER SECTION
   ============================================ */

.shop-by-category {
    background: #f2f2f2;
    padding: 2.5rem 0 0.5rem;
}

.category-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding-bottom: 1rem;
}

.category-pill-item {
    min-width: 180px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background: transparent;
    color: #1a1a1a;
    border: 1px solid rgba(17,17,17,0.12);
    border-radius: 999px;
    padding: 0.8rem 1.5rem;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.category-icon {
    font-size: 0.95rem;
}

.best-sellers {
    background: #f2f2f2;
    padding: 1.75rem 0 4rem;
}

.best-seller-track {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding: 0.5rem 0 0.75rem;
}

.best-seller-track::-webkit-scrollbar {
    display: none;
}

.best-product {
    width: min(22vw, 270px);
    min-width: 220px;
    background: rgba(255,255,255,0.45);
    border: 1px solid rgba(17,17,17,0.05);
    border-radius: 1.1rem;
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(17,17,17,0.04);
    scroll-snap-align: center;
}

.best-product.featured {
    transform: translateY(-10px);
}

.best-product-image {
    position: relative;
    background: linear-gradient(180deg, #f6f6f6 0%, #e9e9e9 100%);
    height: 270px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.best-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sale-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(255,255,255,0.84);
    color: #111111;
    border-radius: 999px;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.45rem 0.7rem;
}

.best-product-info {
    padding: 1rem 1rem 1.25rem;
    text-align: center;
}

.best-product-info h3 {
    font-size: 1rem;
    margin-bottom: 0.4rem;
    color: #1b1b1b;
}

.best-product-info p {
    margin-bottom: 0.85rem;
    color: #2a2a2a;
    font-weight: 600;
}

.product-swatches {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.45rem;
}

.product-swatches span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(17,17,17,0.15);
    display: inline-block;
}

.shop-page {
   background: #f4f1ee;
   color: #1d1d1d;
   padding-top: 54px;
}

.store-header {
   background: #f4f1ee;
   border-bottom: 1px solid rgba(17,17,17,0.08);
}

.store-header .container {
   max-width: 100%;
   padding: 0;
}

.store-header-inner {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
   min-height: 54px;
   gap: 1.2rem;
   padding: 0 1.2rem;
   box-sizing: border-box;
}

.store-brand {
   display: inline-flex;
   align-items: center;
   justify-self: start;
   gap: 0.55rem;
   color: #111111 !important;
   font-size: clamp(1.08rem, 1.2vw, 1.5rem);
   font-weight: 700;
   font-family: Georgia, 'Times New Roman', serif;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   text-decoration: none;
   white-space: nowrap;
   line-height: 1.2;
}

.store-brand .brand-logo {
   height: 42px !important;
   max-height: 44px !important;
}

.store-brand i {
   font-size: 0.9rem;
}

.store-brand:hover {
   text-decoration: none;
   color: #111111 !important;
}

.store-nav {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 2.2rem;
   flex-wrap: wrap;
   width: max-content;
   max-width: 100%;
   margin: 0 auto;
   text-align: center;
   justify-self: center;
}

.store-nav a {
   color: #55504a;
   font-size: 0.84rem;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   text-decoration: none;
   transition: color 0.2s ease, opacity 0.2s ease;
   white-space: nowrap;
   font-weight: 500;
   position: relative;
   padding: 0.35rem 0.2rem;
}

.store-nav a:hover {
   color: #111111;
   text-decoration: none;
}

.store-nav a.active {
   color: #111111;
   font-weight: 700;
}

.store-nav a.active::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 2px;
   background: #36280B;
   border-radius: 1px;
}

.navbar-hero .navbar-nav {
   display: flex;
   align-items: center;
   gap: 1.5rem;
   margin: 0;
   padding: 0;
}

.navbar-hero .navbar-nav .nav-item {
   margin: 0 !important;
   padding: 0 !important;
}

.navbar-hero .navbar-nav .nav-link {
   color: #ffffff !important;
   font-size: 0.94rem;
   letter-spacing: 0.02em;
   text-transform: none;
   font-weight: 500;
   padding: 0.35rem 0.2rem !important;
   margin: 0 !important;
   position: relative;
   background: transparent !important;
   border: none !important;
   border-radius: 0 !important;
   box-shadow: none !important;
   backdrop-filter: none !important;
   text-decoration: none !important;
   opacity: 0.92;
   transition: opacity 0.2s ease, color 0.2s ease;
   display: inline-block;
   line-height: 1.3;
}

.navbar-hero .navbar-nav .nav-link:hover,
.navbar-hero .navbar-nav .nav-link:focus {
   color: #ffffff !important;
   opacity: 0.65;
   background: transparent !important;
   border: none !important;
   box-shadow: none !important;
   text-decoration: none !important;
   transform: none !important;
}

.navbar-hero .navbar-nav .nav-link.active {
   color: #ffffff !important;
   font-weight: 600;
   opacity: 1;
   background: transparent !important;
   border: none !important;
   box-shadow: none !important;
   text-decoration: none !important;
}

.navbar-hero .navbar-nav .nav-link::after {
   display: none !important;
   content: none !important;
}

/* Scrolled Navbar State for Nav Links & Standard Navbar */
.navbar.navbar-scrolled .navbar-nav,
.navbar:not(.navbar-hero) .navbar-nav {
   display: flex;
   align-items: center;
   gap: 1.5rem;
   margin: 0;
   padding: 0;
}

.navbar.navbar-scrolled .navbar-nav .nav-item,
.navbar:not(.navbar-hero) .navbar-nav .nav-item {
   margin: 0 !important;
   padding: 0 !important;
}

.navbar.navbar-scrolled .navbar-nav .nav-link,
.navbar:not(.navbar-hero) .navbar-nav .nav-link {
   color: #111111 !important;
   font-size: 0.94rem;
   letter-spacing: 0.02em;
   text-transform: none;
   font-weight: 500;
   padding: 0.35rem 0.2rem !important;
   margin: 0 !important;
   background: transparent !important;
   border: none !important;
   border-radius: 0 !important;
   box-shadow: none !important;
   text-decoration: none !important;
   opacity: 0.88;
   transition: opacity 0.2s ease, color 0.2s ease;
   display: inline-block;
   line-height: 1.3;
}

.navbar.navbar-scrolled .navbar-nav .nav-link:hover,
.navbar.navbar-scrolled .navbar-nav .nav-link:focus,
.navbar:not(.navbar-hero) .navbar-nav .nav-link:hover,
.navbar:not(.navbar-hero) .navbar-nav .nav-link:focus {
   color: #111111 !important;
   opacity: 0.55;
   background: transparent !important;
   border: none !important;
   box-shadow: none !important;
   text-decoration: none !important;
   transform: none !important;
}

.navbar.navbar-scrolled .navbar-nav .nav-link.active,
.navbar:not(.navbar-hero) .navbar-nav .nav-link.active {
   color: #111111 !important;
   font-weight: 600;
   opacity: 1;
   background: transparent !important;
   border: none !important;
   box-shadow: none !important;
   text-decoration: none !important;
}

.navbar.navbar-scrolled .navbar-nav .nav-link::after,
.navbar:not(.navbar-hero) .navbar-nav .nav-link::after {
   display: none !important;
   content: none !important;
}

.navbar-hero #authActionsContainer,
.navbar #authActionsContainer {
   margin-left: 1.5rem !important;
}

.navbar:not(.navbar-hero) .user-icon-btn,
.navbar:not(.navbar-hero) .bag-icon-btn,
.navbar:not(.navbar-hero) .search-icon-btn {
   color: #111111 !important;
}

.navbar:not(.navbar-hero) .user-icon-btn:hover,
.navbar:not(.navbar-hero) .bag-icon-btn:hover,
.navbar:not(.navbar-hero) .search-icon-btn:hover {
   color: #000000 !important;
   opacity: 0.8;
}

.navbar:not(.navbar-hero) .navbar-toggler-icon {
   filter: invert(1);
}

@media (max-width: 991.98px) {
   .navbar {
      height: auto !important;
      min-height: 54px;
      padding-top: 0.4rem;
      padding-bottom: 0.4rem;
   }
   .navbar .navbar-collapse {
      background: #ffffff;
      padding: 1rem 0.75rem;
      border-radius: 12px;
      margin-top: 0.5rem;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      border: 1px solid rgba(0, 0, 0, 0.06);
   }
   .navbar.navbar-hero:not(.navbar-scrolled) .navbar-collapse {
      background: rgba(22, 22, 22, 0.96);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.12);
   }
   .navbar #authActionsContainer {
      margin-top: 0.85rem;
      margin-left: 0 !important;
      padding-top: 0.85rem;
      border-top: 1px solid rgba(0, 0, 0, 0.08);
   }
   .navbar.navbar-hero:not(.navbar-scrolled) #authActionsContainer {
      border-top-color: rgba(255, 255, 255, 0.12);
   }
}

.header-actions {
   display: flex;
   align-items: center;
   justify-self: end;
   gap: 0.7rem;
   color: #1a1a1a;
   font-size: 1.05rem;
   margin-left: 0.5rem;
}

.header-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 32px;
   height: 32px;
   color: #1a1a1a;
   background: transparent;
   border: none;
   padding: 0;
   cursor: pointer;
   border-radius: 999px;
   transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.header-icon:hover,
.header-icon:focus-visible {
   background: rgba(17,17,17,0.06);
   transform: translateY(-1px);
   box-shadow: 0 6px 14px rgba(17,17,17,0.08);
   outline: none;
}

.header-icon:active {
   transform: translateY(0);
}

.header-icon i {
   font-size: 0.95rem;
}

/* ==========================================================================
   MINIMALIST SEARCH OVERLAY & POPUP PANEL (Matches Reference Image)
   ========================================================================== */
.search-overlay {
   position: fixed;
   inset: 0;
   background: rgba(17, 17, 17, 0.45);
   backdrop-filter: blur(3px);
   -webkit-backdrop-filter: blur(3px);
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s ease;
   z-index: 1095;
   overflow-y: auto;
   overscroll-behavior: contain;
}

.search-overlay.is-open {
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
}

body.search-modal-open {
   overflow: hidden !important;
}

.search-panel {
   position: relative;
   top: 0;
   width: 100%;
   background: #ffffff;
   border-bottom: 1px solid rgba(17, 17, 17, 0.08);
   box-shadow: 0 20px 45px rgba(0, 0, 0, 0.14);
   transform: translateY(-24px);
   transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
   max-height: 90vh;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
}

.search-overlay.is-open .search-panel {
   transform: translateY(0);
}

.search-panel-inner {
   max-width: 1240px;
   margin: 0 auto;
   padding: 1.5rem 2rem 2.5rem;
   box-sizing: border-box;
}

.search-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   padding-bottom: 0.9rem;
   border-bottom: 1.5px solid #43382c;
}

.search-input-wrap {
   display: flex;
   align-items: center;
   gap: 0.85rem;
   flex: 1;
}

.search-input-wrap .search-input-icon,
.search-input-wrap i {
   width: 20px;
   height: 20px;
   color: #736b5e;
   stroke: #736b5e;
   font-size: 1.15rem;
   flex-shrink: 0;
}

.search-input-wrap input {
   width: 100%;
   border: none !important;
   outline: none !important;
   box-shadow: none !important;
   background: transparent;
   font-size: 1.15rem;
   color: #221910;
   font-family: inherit;
   padding: 0;
   line-height: 1.4;
}

.search-input-wrap input::placeholder {
   color: #8c8275;
   font-weight: 400;
}

.search-close {
   width: 32px;
   height: 32px;
   border: none;
   background: transparent;
   color: #43382c;
   font-size: 1.8rem;
   line-height: 1;
   cursor: pointer;
   padding: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   transition: opacity 0.2s ease, transform 0.2s ease;
}

.search-close:hover {
   opacity: 0.7;
   transform: scale(1.1);
}

.search-results {
   padding-top: 1.75rem;
}

.search-results-title {
   font-size: 1.25rem;
   font-weight: 700;
   color: #36280B;
   margin: 0 0 1.35rem;
   letter-spacing: -0.01em;
   font-family: inherit;
}

.search-results-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 1.5rem;
}

.search-product-card {
   background: transparent;
   border: none;
   border-radius: 0;
   overflow: hidden;
   transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
   display: block;
}

.search-product-card:hover {
   transform: translateY(-3px);
}

.search-product-card a {
   display: block;
   color: inherit;
   text-decoration: none;
}

.search-product-card a:hover {
   color: inherit;
   text-decoration: none;
}

.search-product-media {
   position: relative;
   width: 100%;
   aspect-ratio: 1 / 1;
   background: #f4f1ee;
   overflow: hidden;
   border-radius: 2px;
}

.search-product-media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.search-product-card:hover .search-product-media img {
   transform: scale(1.03);
}

.search-product-info {
   padding: 0.75rem 0 0.25rem;
}

.search-product-title {
   margin: 0 0 0.3rem;
   color: #221910;
   font-size: 1.05rem;
   font-weight: 500;
   line-height: 1.35;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.search-product-price {
   font-size: 1.12rem;
   color: #36280B;
   font-weight: 700;
   display: block;
   letter-spacing: -0.01em;
}

.search-empty-state {
   grid-column: 1 / -1;
   text-align: center;
   color: #6b6359;
   padding: 2.5rem 1rem;
   font-size: 1rem;
}

@media (max-width: 992px) {
   .search-results-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1.25rem;
   }
   .search-panel-inner {
      padding: 1.25rem 1.25rem 2rem;
   }
}

@media (max-width: 640px) {
   .search-results-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem;
   }
   .search-product-title {
      font-size: 0.95rem;
   }
   .search-product-price {
      font-size: 1rem;
   }
}

/* ==========================================================================
   SLIDE-OUT CART DRAWER & BACKDROP (Enhanced Smooth Cinematic Transitions)
   ========================================================================== */
.cart-backdrop {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.4);
   z-index: 1085;
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   transition: opacity 0.35s cubic-bezier(0.32, 0, 0.67, 0), visibility 0.35s;
   will-change: opacity, visibility;
}

.cart-backdrop.is-open {
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
   transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.45s;
}

body.cart-drawer-locked {
   overflow: hidden !important;
}

.cart-drawer {
   position: fixed;
   top: 0;
   right: 0;
   width: 440px;
   max-width: 100vw;
   height: 100vh;
   height: 100dvh;
   background: #ffffff;
   box-shadow: -22px 0 60px rgba(0, 0, 0, 0.2), -4px 0 16px rgba(0, 0, 0, 0.08);
   z-index: 1090;
   transform: translate3d(100%, 0, 0);
   transition: transform 0.38s cubic-bezier(0.32, 0, 0.67, 0);
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
   will-change: transform;
   backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
}

.cart-drawer.is-open {
   transform: translate3d(0, 0, 0);
   transition: transform 0.54s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Staggered silky smooth entrance for drawer items */
.cart-drawer.is-open .cart-drawer-item {
   animation: drawerItemSlideIn 0.52s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.cart-drawer.is-open .cart-drawer-item:nth-child(1) { animation-delay: 0.08s; }
.cart-drawer.is-open .cart-drawer-item:nth-child(2) { animation-delay: 0.16s; }
.cart-drawer.is-open .cart-drawer-item:nth-child(3) { animation-delay: 0.24s; }
.cart-drawer.is-open .cart-drawer-item:nth-child(4) { animation-delay: 0.32s; }
.cart-drawer.is-open .cart-drawer-item:nth-child(n+5) { animation-delay: 0.38s; }

@keyframes drawerItemSlideIn {
   0% {
      opacity: 0;
      transform: translate3d(40px, 0, 0);
   }
   100% {
      opacity: 1;
      transform: translate3d(0, 0, 0);
   }
}

.cart-drawer.is-open .cart-drawer-footer {
   animation: drawerFooterSlideUp 0.54s cubic-bezier(0.22, 1, 0.36, 1) both 0.14s;
}

@keyframes drawerFooterSlideUp {
   0% {
      opacity: 0;
      transform: translate3d(0, 24px, 0);
   }
   100% {
      opacity: 1;
      transform: translate3d(0, 0, 0);
   }
}

.cart-drawer-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 1.25rem 1.4rem 0.4rem;
   border-bottom: none;
}

.cart-drawer-header-left {
   display: flex;
   align-items: center;
   gap: 8px;
}

.cart-drawer-title {
   margin: 0;
   font-size: 1.4rem;
   font-weight: 700;
   color: #272015;
   letter-spacing: -0.01em;
}

.cart-drawer-count {
   font-size: 0.78rem;
   font-weight: 500;
   padding: 1px 7px;
   border-radius: 999px;
   background: #ebebeb;
   color: #4b5563;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 20px;
}

.cart-drawer-close,
.cart-close {
   width: 32px;
   height: 32px;
   background: #ffffff;
   border: 1px solid #e5e7eb;
   color: #4b5563;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all 0.15s ease;
   padding: 0;
   border-radius: 50%;
}

.cart-drawer-close:hover,
.cart-close:hover {
   background: #f9fafb;
   color: #111827;
   border-color: #d1d5db;
   transform: scale(1.04);
}

.cart-drawer-body {
   flex: 1;
   overflow-y: auto;
   padding: 0.4rem 1.4rem 1rem;
   -webkit-overflow-scrolling: touch;
}

.cart-drawer-items {
   display: flex;
   flex-direction: column;
}

.cart-drawer-item {
   display: flex;
   gap: 12px;
   align-items: flex-start;
   padding: 0.6rem 0;
   border-bottom: none;
}

.cart-drawer-item:last-child {
   border-bottom: none;
}

.cart-drawer-item-img {
   width: 62px;
   height: 62px;
   border-radius: 4px;
   object-fit: cover;
   background: #f4f4f5;
   flex-shrink: 0;
   border: none;
}

.cart-drawer-item-info {
   flex: 1;
   min-width: 0;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
}

.cart-drawer-item-top {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   gap: 10px;
}

.cart-drawer-item-title {
   font-size: 0.95rem;
   font-weight: 600;
   color: #1a1a1a;
   margin: 0;
   line-height: 1.3;
   word-break: break-word;
}

.cart-drawer-item-total {
   font-size: 0.95rem;
   font-weight: 700;
   color: #1a1a1a;
   white-space: nowrap;
   flex-shrink: 0;
   line-height: 1.3;
}

.cart-drawer-item-var {
   display: block;
   font-size: 0.85rem;
   color: #64748b;
   margin-top: 3px;
   line-height: 1.3;
   word-break: break-word;
}

.cart-drawer-item-unit {
   display: block;
   font-size: 0.85rem;
   font-weight: 500;
   color: #475569;
   margin-top: 3px;
   line-height: 1.25;
}

.cart-drawer-item-controls {
   display: flex;
   align-items: center;
   gap: 14px;
   margin-top: 8px;
}

.cart-drawer-item-stepper {
   display: inline-flex;
   align-items: center;
   border: 1px solid #e7ded4;
   border-radius: 8px;
   background: #ffffff;
   overflow: hidden;
   height: 28px;
}

.cart-stepper-btn {
   width: 26px;
   height: 28px;
   background: none;
   border: none;
   color: #4b5563;
   font-size: 0.9rem;
   font-weight: 400;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background 0.12s ease;
   padding: 0;
}

.cart-stepper-btn:hover {
   background: #f7f7f7;
}

.cart-stepper-qty {
   min-width: 24px;
   text-align: center;
   font-size: 0.84rem;
   font-weight: 500;
   color: #1f2937;
}

.cart-trash-btn {
   background: none;
   border: none;
   color: #374151;
   cursor: pointer;
   padding: 2px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 4px;
   transition: color 0.15s ease, transform 0.12s ease;
}

.cart-trash-btn:hover {
   color: #ef4444;
   transform: scale(1.1);
}

.cart-drawer-empty {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   height: 100%;
   min-height: 280px;
   text-align: center;
   padding: 2.5rem 1rem;
   color: #6b7280;
}

.cart-empty-icon {
   width: 64px;
   height: 64px;
   border-radius: 50%;
   background: #f3f4f6;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #9ca3af;
   margin-bottom: 1.2rem;
}

.cart-empty-title {
   font-size: 1.15rem;
   font-weight: 600;
   color: #111827;
   margin-bottom: 0.4rem;
}

.cart-empty-desc {
   font-size: 0.85rem;
   color: #6b7280;
   margin-bottom: 1.5rem;
   max-width: 240px;
   line-height: 1.45;
}

/* ==========================================================================
   CART DRAWER FOOTER & ACCORDIONS (Discount)
   ========================================================================== */
.cart-drawer-footer {
   border-top: 1px solid #f1f3f5;
   padding: 0.85rem 1.5rem 1.4rem;
   background: #ffffff;
   display: flex;
   flex-direction: column;
   box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.03);
}

.cart-accordion-item {
   border-bottom: 1px solid #f1f3f5;
}

.cart-accordion-toggle {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   background: none;
   border: none;
   padding: 0.95rem 0;
   font-size: 0.95rem;
   font-weight: 600;
   color: #111827;
   cursor: pointer;
   transition: color 0.15s ease;
}

.cart-accordion-toggle:hover {
   color: #000000;
}

.cart-accordion-symbol {
   font-size: 1.25rem;
   font-weight: 300;
   line-height: 1;
   color: #111827;
   transition: transform 0.2s ease;
}

.cart-accordion-content {
   padding: 0 0 0.95rem 0;
   animation: cartAccordionFade 0.2s ease;
}

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

.cart-discount-form {
   display: flex;
   gap: 8px;
   width: 100%;
   box-sizing: border-box;
}

.cart-discount-input {
   flex: 1;
   min-width: 0;
   border: 1px solid #e4e4e7;
   border-radius: 8px;
   padding: 0.55rem 0.85rem;
   font-size: 0.85rem;
   font-family: inherit;
   color: #18181b;
   outline: none;
   text-transform: uppercase;
   transition: border-color 0.15s ease;
}

.cart-discount-input:focus {
   border-color: #18181b;
}

.cart-discount-apply-btn {
   background: #18181b;
   color: #ffffff;
   border: none;
   border-radius: 8px;
   padding: 0.55rem 1.15rem;
   font-size: 0.82rem;
   font-weight: 500;
   cursor: pointer;
   transition: background 0.15s ease;
   white-space: nowrap;
}

.cart-discount-apply-btn:hover {
   background: #27272a;
}

.cart-discount-applied {
   display: flex;
   align-items: center;
   justify-content: space-between;
   background: #f0fdf4;
   border: 1px solid #bbf7d0;
   border-radius: 8px;
   padding: 0.55rem 0.85rem;
   font-size: 0.82rem;
   color: #166534;
}

.cart-discount-remove-btn {
   background: none;
   border: none;
   color: #dc2626;
   font-size: 0.78rem;
   font-weight: 500;
   cursor: pointer;
   text-decoration: underline;
   padding: 0;
}

.cart-discount-error {
   font-size: 0.78rem;
   color: #dc2626;
   margin-top: 6px;
}

/* ==========================================================================
   ESTIMATED TOTAL & DARK ESPRESSO PILL CHECKOUT BUTTON
   ========================================================================== */
.cart-total-section {
   padding-top: 1rem;
   margin-bottom: 1.15rem;
}

.cart-discount-summary-row {
   display: flex;
   justify-content: space-between;
   font-size: 0.88rem;
   color: #166534;
   margin-bottom: 0.4rem;
}

.cart-total-row {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
}

.cart-total-label {
   font-size: 1.05rem;
   font-weight: 500;
   color: #111827;
}

.cart-total-val {
   font-size: 1.05rem;
   font-weight: 700;
   color: #111827;
}

.cart-total-note {
   font-size: 0.8rem;
   color: #6b7280;
   margin-top: 0.35rem;
   line-height: 1.4;
}

.cart-checkout-pill-btn {
   width: 100%;
   padding: 0.95rem 1.5rem;
   border-radius: 999px;
   background: #36280b;
   color: #ffffff;
   border: none;
   font-size: 0.98rem;
   font-weight: 600;
   cursor: pointer;
   transition: background 0.15s ease, transform 0.1s ease;
   text-decoration: none;
   text-align: center;
   display: block;
   box-sizing: border-box;
}

.cart-checkout-pill-btn:hover {
   background: #251b06;
   color: #ffffff;
   transform: translateY(-1px);
}

.cart-checkout-pill-btn:active {
   transform: translateY(0);
}

.shop-main {
   background: #f4f1ee;
}

.shop-hero {
   background: #f0efec;
   border-bottom: 1px solid rgba(17,17,17,0.04);
}

.shop-hero-inner {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 1.3rem;
   min-height: 180px;
   padding-top: 1.6rem;
   padding-bottom: 1.6rem;
   text-align: center;
}

.shop-hero-copy-wrap {
   max-width: 760px;
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   margin: 0 auto;
   text-align: center;
}

.shop-hero-kicker {
   margin: 0 0 0.45rem;
   font-size: 0.72rem;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: rgba(17,17,17,0.68);
   font-weight: 600;
}

.shop-hero-inner h1 {
   font-size: clamp(2.4rem, 4vw, 4rem);
   font-weight: 400;
   letter-spacing: -0.06em;
   margin: 0;
   color: #111111;
}

.shop-hero-copy {
   max-width: 620px;
   color: rgba(17,17,17,0.72);
   font-size: 0.95rem;
   line-height: 1.7;
   margin: 0;
}

.shop-hero-copy span {
   display: block;
   margin-top: 0.5rem;
   color: rgba(17,17,17,0.82);
}

.shop-feature-list {
   display: flex;
   align-items: stretch;
   gap: 1rem;
   flex-wrap: wrap;
   justify-content: center;
   margin-left: 0;
}

.feature-pill {
   min-width: 132px;
   padding: 1rem 0.8rem 0.75rem;
   border-radius: 0.9rem;
   border: 1px solid rgba(17,17,17,0.08);
   background: rgba(255,255,255,0.2);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 0.55rem;
   color: #111111;
   font-size: 0.75rem;
   letter-spacing: 0.05em;
   text-transform: capitalize;
}

.feature-pill .feature-icon {
   width: 40px;
   height: 40px;
   border: 1px solid rgba(17,17,17,0.14);
   border-radius: 0.7rem;
   display: grid;
   place-items: center;
   background: rgba(255,255,255,0.35);
   font-size: 1rem;
}

/* ==========================================================================
   COLLECTION TOOLBAR & FILTER DROPDOWNS (Gouache/Shopify Ref)
   ========================================================================== */

.shop-toolbar-wrapper {
   background: #ffffff;
   border-bottom: none;
   padding: 0.75rem 0 0.5rem;
   width: 100%;
}

.shop-toolbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1.5rem;
   color: #000000;
   font-size: 13px;
   font-family: "Instrument Sans", sans-serif;
   position: relative;
}

.toolbar-group {
   display: flex;
   align-items: center;
   gap: 1.85rem;
   flex-wrap: wrap;
}

.toolbar-right {
   display: flex;
   align-items: center;
   gap: 1.25rem;
   flex-wrap: nowrap;
}

.toolbar-dropdown {
   position: relative;
}

.toolbar-pill {
   display: inline-flex;
   align-items: center;
   gap: 0.45rem;
   color: #000000;
   border: none;
   background: transparent;
   font-size: 13px;
   font-weight: 400;
   padding: 0.35rem 0;
   cursor: pointer;
   font-family: "Instrument Sans", sans-serif;
   transition: color 0.18s ease;
}

.toolbar-pill:hover {
   color: #555555;
}

.toolbar-chevron {
   transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
   color: #555555;
   display: inline-block;
}

.toolbar-dropdown.is-open .toolbar-chevron {
   transform: rotate(180deg);
}

.toolbar-menu {
   position: absolute;
   top: calc(100% + 12px);
   left: 0;
   background: #ffffff;
   border: 1px solid rgba(17, 17, 17, 0.08);
   border-radius: 12px;
   box-shadow: 0 14px 38px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.04);
   display: none;
   z-index: 1050;
   animation: toolbarDropdownFade 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.toolbar-dropdown.is-open .toolbar-menu {
   display: block;
}

/* Availability Menu (Image 3) */
.availability-menu {
   min-width: 190px;
   padding: 16px 20px;
}

.toolbar-checkbox-label {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 6px 0;
   cursor: pointer;
   user-select: none;
   font-size: 0.92rem;
   color: #111111;
   margin: 0;
}

.toolbar-checkbox-label input[type="checkbox"] {
   display: none;
}

.custom-checkbox {
   width: 18px;
   height: 18px;
   border: 1.5px solid #a8a8a8;
   border-radius: 5px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   transition: all 0.18s ease;
   background: #ffffff;
   flex-shrink: 0;
}

.toolbar-checkbox-label input[type="checkbox"]:checked + .custom-checkbox {
   background: #111111;
   border-color: #111111;
}

.toolbar-checkbox-label input[type="checkbox"]:checked + .custom-checkbox::after {
   content: "✓";
   color: #ffffff;
   font-size: 11px;
   font-weight: 700;
}

/* Price Menu (Image 4) */
.price-menu {
   min-width: 295px;
   padding: 18px 20px;
}

.price-inputs-row {
   display: flex;
   align-items: center;
   gap: 10px;
}

.price-input-box {
   display: flex;
   align-items: center;
   border: 1px solid #d4d4d4;
   border-radius: 8px;
   padding: 6px 12px;
   background: #ffffff;
   flex: 1;
   transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.price-input-box:focus-within {
   border-color: #111111;
   box-shadow: 0 0 0 1px #111111;
}

.price-currency {
   color: #666666;
   font-size: 0.9rem;
   margin-right: 6px;
   user-select: none;
}

.price-input-box input {
   border: none;
   background: transparent;
   width: 100%;
   outline: none;
   font-size: 0.92rem;
   color: #111111;
   font-weight: 450;
   text-align: right;
   -moz-appearance: textfield;
}

.price-input-box input::-webkit-outer-spin-button,
.price-input-box input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
}

.price-to-label {
   color: #444444;
   font-size: 0.88rem;
   font-weight: 400;
}

.price-highest-hint {
   font-size: 0.82rem;
   color: #222222;
   margin-top: 12px;
   font-weight: 400;
}

/* Sort Menu & Category Menu (Image 5) */
.sort-menu,
.category-menu {
   min-width: 215px;
   padding: 8px 0;
}

.toolbar-dropdown[data-dropdown="sort"] .toolbar-menu {
   right: 0;
   left: auto;
}

.menu-option-item {
   display: flex;
   align-items: center;
   width: 100%;
   border: none;
   background: transparent;
   padding: 8px 18px;
   text-align: left;
   font-size: 0.88rem;
   color: #1a1a1a;
   cursor: pointer;
   transition: background 0.15s ease;
}

.menu-option-item:hover {
   background: #f6f6f6;
}

.menu-option-item.is-selected {
   font-weight: 600;
   color: #111111;
}

.menu-option-item .check-icon {
   width: 18px;
   font-size: 0.95rem;
   font-weight: 700;
   color: #111111;
   display: inline-block;
   margin-right: 8px;
   text-align: center;
}

/* Product Count */
.product-count {
   color: #555555;
   font-size: 13px;
   font-weight: 400;
   font-family: "Instrument Sans", sans-serif;
   white-space: nowrap;
}

/* View Buttons */
.toolbar-view-buttons {
   display: flex;
   align-items: center;
   gap: 4px;
}

.grid-view-btn {
   width: 29px;
   height: 29px;
   border: none;
   background: transparent;
   border-radius: 6px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: #666666;
   cursor: pointer;
   transition: all 0.18s ease;
   padding: 0;
}

.grid-view-btn:hover {
   color: #000000;
   background: rgba(0, 0, 0, 0.05);
}

.grid-view-btn.active {
   background: #ebe8e1;
   color: #000000;
}

/* ==========================================================================
   PRODUCT GRID: 5 PER ROW (Standard) & 12 PER ROW (Compact)
   ========================================================================== */

#shopProductsContainer {
   transition: max-width 0.3s ease, padding 0.3s ease;
}

#shopProductsContainer.is-compact {
   max-width: 98vw;
   padding-left: 2rem;
   padding-right: 2rem;
}

/* Standard Mode (5 products per row on large screens) */
.product-grid,
.products-grid {
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
   gap: 1.35rem;
   row-gap: 2.25rem;
   margin-bottom: 3.5rem;
   transition: grid-template-columns 0.35s ease, gap 0.35s ease, transform 0.35s ease;
}

@media (max-width: 1399px) {
   .product-grid,
   .products-grid {
       grid-template-columns: repeat(4, minmax(0, 1fr));
   }
}

@media (max-width: 991px) {
   .product-grid,
   .products-grid {
       grid-template-columns: repeat(3, minmax(0, 1fr));
       gap: 1.15rem;
       row-gap: 1.85rem;
   }
}

@media (max-width: 767px) {
   .product-grid,
   .products-grid {
       grid-template-columns: repeat(2, minmax(0, 1fr));
       gap: 0.95rem;
       row-gap: 1.5rem;
   }
}

@media (max-width: 480px) {
   .product-grid,
   .products-grid {
       grid-template-columns: repeat(2, minmax(0, 1fr));
       gap: 0.75rem;
       row-gap: 1.25rem;
   }
}

/* Compact Mode (12 products per row on wide screens) */
.product-grid.is-expanded,
.product-grid.is-compact,
.products-grid.is-compact,
.products-grid.is-expanded {
   grid-template-columns: repeat(12, minmax(0, 1fr));
   gap: 0.65rem;
   row-gap: 1.25rem;
   transform: scale(0.995);
}

@media (max-width: 1440px) {
   .product-grid.is-expanded,
   .product-grid.is-compact,
   .products-grid.is-compact,
   .products-grid.is-expanded {
       grid-template-columns: repeat(10, minmax(0, 1fr));
       gap: 0.55rem;
   }
}

@media (max-width: 1199px) {
   .product-grid.is-expanded,
   .product-grid.is-compact,
   .products-grid.is-compact,
   .products-grid.is-expanded {
       grid-template-columns: repeat(8, minmax(0, 1fr));
       gap: 0.5rem;
   }
}

@media (max-width: 991px) {
   .product-grid.is-expanded,
   .product-grid.is-compact,
   .products-grid.is-compact,
   .products-grid.is-expanded {
       grid-template-columns: repeat(6, minmax(0, 1fr));
       gap: 0.45rem;
   }
}

@media (max-width: 767px) {
   .product-grid.is-expanded,
   .product-grid.is-compact,
   .products-grid.is-compact,
   .products-grid.is-expanded {
       grid-template-columns: repeat(4, minmax(0, 1fr));
       gap: 0.4rem;
   }
}

@media (max-width: 480px) {
   .product-grid.is-expanded,
   .product-grid.is-compact,
   .products-grid.is-compact,
   .products-grid.is-expanded {
       grid-template-columns: repeat(3, minmax(0, 1fr));
       gap: 0.35rem;
   }
}

/* ==========================================================================
   POINTED PRODUCT CARDS (Gouache Minimalist UI)
   ========================================================================== */

body.shop-page .product-card {
   background: #ffffff !important;
   border: 1px solid #e5e5e5 !important;
   border-radius: 0 !important;
   box-shadow: none !important;
   padding: 10px;
   overflow: hidden;
   cursor: pointer;
   text-align: center;
   transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

body.shop-page .product-card:hover {
   border-color: #111111 !important;
   transform: translateY(-2px);
   box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
}

body.shop-page .product-image-wrapper {
   position: relative;
   overflow: hidden;
   background-color: #ffffff !important;
   aspect-ratio: 1 / 1;
   margin-bottom: 0.65rem;
   border-radius: 0 !important;
   border: none;
   display: flex;
   align-items: center;
   justify-content: center;
   --product-img-fit: contain;
   --product-img-padding: 0px;
}

body.shop-page .product-card-img-link,
body.shop-page .product-image-main {
   display: block;
   width: 100%;
   height: 100%;
   border-radius: 0 !important;
}

body.shop-page .product-image {
   width: 100%;
   height: 100%;
   object-fit: var(--product-img-fit, contain);
   padding: var(--product-img-padding, 0px);
   border-radius: 0 !important;
   display: block;
   background-color: transparent;
   mix-blend-mode: multiply;
   transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease;
}

body.shop-page .product-card:hover .product-image {
   transform: scale(1.03);
   opacity: 0.96;
}

body.shop-page .product-info {
   padding: 0.25rem 0 0;
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

body.shop-page .product-name {
   font-family: "Instrument Sans", sans-serif;
   font-size: 13px;
   font-weight: 400;
   line-height: 1.35;
   margin: 0.35rem 0 0.2rem;
   color: #000000;
   text-align: center;
   width: 100%;
}

body.shop-page .product-name a {
   color: #000000;
   text-decoration: none;
   transition: opacity 0.2s ease;
}

body.shop-page .product-name a:hover {
   opacity: 0.65;
   text-decoration: none;
}

body.shop-page .product-price {
   font-family: "Instrument Sans", sans-serif;
   font-size: 13px;
   font-weight: 400;
   color: #000000;
   margin: 0 !important;
   padding: 0 !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   text-align: center !important;
   width: 100% !important;
}

body.shop-page .product-price .price {
   color: #000000;
   font-weight: 400;
   text-align: center !important;
   display: inline-block;
}

body.shop-page .product-desc,
body.shop-page .product-actions {
   display: none !important;
}

/* Card Color Variations Swatches */
.product-card-swatches {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   margin: 4px 0 3px;
   min-height: 18px;
   flex-wrap: wrap;
}

body.shop-page .products-grid.is-compact .product-card-swatches {
   display: none; /* Hide swatches in 12-per-row compact mode for ultra-clean view */
}

.product-card-swatch-item {
   width: 14px;
   height: 14px;
   border: 1px solid #d4d0c8;
   border-radius: 0 !important; /* Pointed borders */
   padding: 0;
   margin: 0;
   cursor: pointer;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   transition: transform 0.15s ease, outline 0.15s ease, border-color 0.15s ease;
   position: relative;
   outline: 1px solid transparent;
   outline-offset: 1px;
}

.product-card-swatch-item:hover,
.product-card-swatch-item.is-previewed {
   transform: scale(1.22);
   border-color: #111111;
   outline: 1.5px solid #111111;
   z-index: 2;
}

.product-card-swatch-item.is-active {
   border-color: #000000;
   outline: 1.5px solid #000000;
}

.product-card-swatches-overflow {
   font-size: 10px;
   color: #888888;
   font-family: "Instrument Sans", sans-serif;
   line-height: 14px;
   margin-left: 2px;
}

/* Compact Mode (12-per-row) Specific Card Styles */
body.shop-page .products-grid.is-compact .product-card,
body.shop-page .product-grid.is-expanded .product-card {
   border-radius: 0 !important;
   padding: 4px;
   border: 1px solid #ededed !important;
   transform: none;
}

body.shop-page .products-grid.is-compact .product-image-wrapper,
body.shop-page .product-grid.is-expanded .product-image-wrapper {
   margin-bottom: 0.35rem;
   border-radius: 0 !important;
   background-color: #ffffff !important;
}

body.shop-page .products-grid.is-compact .product-image,
body.shop-page .product-grid.is-expanded .product-image {
   border-radius: 0 !important;
   padding: 0px;
}

body.shop-page .products-grid.is-compact .product-name,
body.shop-page .product-grid.is-expanded .product-card-info h3 {
   font-size: 0.72rem;
   font-weight: 400;
   margin: 0.25rem 0 0.1rem;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   line-height: 1.25;
}

body.shop-page .products-grid.is-compact .product-price .price,
body.shop-page .product-grid.is-expanded .product-card-price {
   font-size: 0.72rem;
   font-weight: 400;
}

.product-card-media {
   position: relative;
   aspect-ratio: 1 / 1.02;
   background: #f3f1ee;
   display: grid;
   place-items: center;
   overflow: hidden;
}

.product-card-stock-badge {
   position: absolute;
   top: 12px;
   left: 12px;
   z-index: 2;
   padding: 0.4rem 0.65rem;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.86);
   color: #111;
   font-size: 0.62rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
}

.product-card-media::before {
   content: "";
   position: absolute;
   width: 52%;
   height: 52%;
   left: 24%;
   top: 22%;
   border-radius: 1rem;
   background: rgba(17,17,17,0.07);
   border: 1px solid rgba(17,17,17,0.08);
   box-shadow: inset 0 0 0 10px rgba(255,255,255,0.14);
}

.product-card-media::after {
   content: "";
   position: absolute;
   width: 20%;
   height: 18%;
   left: 40%;
   top: 14%;
   border-radius: 0.5rem 0.5rem 0 0;
   background: rgba(17,17,17,0.1);
}

.product-card-info {
   padding: 0.9rem 0.8rem 1rem;
   text-align: center;
}

.product-card-info h3 {
   font-size: 0.92rem;
   margin: 0;
   color: #1f1f1f;
   font-weight: 500;
   line-height: 1.5;
   min-height: 2.8em;
}

.product-card-price {
   display: block;
   margin-top: 0.35rem;
   color: #111;
   font-size: 0.9rem;
   font-weight: 600;
}

.product-empty-state {
   grid-column: 1 / -1;
   text-align: center;
   color: rgba(17,17,17,0.7);
   padding: 3rem 1rem 4rem;
}

.shop-footer {
   background: #ece8e4;
   border-top: 1px solid rgba(17,17,17,0.08);
   padding-top: 2.5rem;
   padding-bottom: 1.3rem;
   color: #1a1a1a;
}

.shop-footer .container {
   max-width: 1200px;
}

.shop-footer-grid {
   display: grid;
   grid-template-columns: 1.7fr 1fr 1.3fr 1.6fr;
   gap: 2.4rem;
   align-items: start;
}

.footer-block h4 {
   margin: 0 0 1rem;
   font-size: 1.05rem;
   color: #111111;
   font-weight: 600;
}

.footer-block ul {
   list-style: none;
   padding: 0;
   margin: 0;
   display: grid;
   gap: 0.35rem;
}

.footer-block li,
.footer-block p,
.footer-block a {
   color: rgba(17,17,17,0.8);
   line-height: 1.8;
   text-decoration: none;
}

.footer-block a:hover {
   color: #111111;
   text-decoration: underline;
}

.newsletter {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   margin-top: 0.75rem;
   border: 1px solid rgba(17,17,17,0.12);
   background: rgba(255,255,255,0.3);
   border-radius: 999px;
   padding: 0.22rem 0.22rem 0.22rem 1rem;
}

.newsletter input {
   border: none;
   background: transparent;
   padding: 0.7rem 0.4rem;
   width: 100%;
   color: #111111;
   outline: none;
}

.newsletter button {
   border: none;
   background: #dfe3cf;
   color: #111111;
   border-radius: 999px;
   padding: 0.75rem 1rem;
   font-size: 0.8rem;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   cursor: pointer;
   transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.newsletter button:hover,
.newsletter button:focus-visible {
   background: #d4d9bf;
   transform: translateY(-1px);
   box-shadow: 0 8px 18px rgba(17, 17, 17, 0.08);
   outline: none;
}

.newsletter button:active {
   transform: translateY(0);
}

.footer-social {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0.7rem;
   margin-top: 1.2rem;
   color: #111111;
}

.footer-social a {
   width: 26px;
   height: 26px;
   border-radius: 50%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border: 1px solid rgba(17,17,17,0.12);
   background: rgba(255,255,255,0.15);
   color: #111111;
}

.social-list {
   display: grid;
   gap: 0.55rem;
   margin-top: 0.5rem;
}

.social-link {
   display: flex;
   align-items: center;
   gap: 0.7rem;
   color: rgba(17,17,17,0.8);
   line-height: 1.5;
   text-decoration: none;
}

.social-link:hover {
   color: #111111;
   text-decoration: underline;
}

.social-icon {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: rgba(17,17,17,0.06);
   border: 1px solid rgba(17,17,17,0.08);
   color: #111111;
   font-size: 0.8rem;
   flex-shrink: 0;
}

.socials-title {
   margin-top: 1rem;
}

.site-meta {
   border-top: 1px solid rgba(17,17,17,0.09);
   margin-top: 2rem;
   padding-top: 1rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   color: rgba(17,17,17,0.65);
   font-size: 0.82rem;
}

@media (max-width: 1100px) {
   .grid-layout {
       grid-template-columns: repeat(4, minmax(0, 1fr));
   }

   .shop-footer-grid {
       grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

@media (max-width: 900px) {
   .store-header-inner {
       flex-wrap: wrap;
       justify-content: center;
       padding: 0.9rem 0;
   }

   .store-brand {
       width: 100%;
       justify-content: center;
   }

   .shop-hero-inner {
       flex-direction: column;
       align-items: flex-start;
       justify-content: center;
       padding-top: 1.75rem;
       padding-bottom: 1.75rem;
   }

   .shop-feature-list {
       justify-content: flex-start;
   }

   .grid-layout {
       grid-template-columns: repeat(3, minmax(0, 1fr));
   }
}

@media (max-width: 640px) {
   .store-nav {
       gap: 0.8rem;
   }

   .shop-toolbar {
       flex-direction: column;
       align-items: flex-start;
   }

   .grid-layout {
       grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .shop-footer-grid {
       grid-template-columns: 1fr;
   }

   .site-meta {
       flex-direction: column;
       text-align: center;
   }
}

/* ============================================
   BUTTONS
   ============================================ */

.btn {
    border-radius: 5px;
    font-weight: 600;
    padding: 0.5rem 1.5rem;
    transition: all 0.3s ease;
    border: none;
}

.btn-primary {
    background-color: #111111;
    color: #ffffff;
}

.btn-primary:hover {
    background-color: #2d2d2d;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(17, 17, 17, 0.15);
}

.btn-outline-primary {
    color: #111111;
    border: 2px solid #111111;
}

.btn-outline-primary:hover {
    background-color: #111111;
    color: #ffffff;
}

.auth-modal .modal-content {
    border: none;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(17, 17, 17, 0.18);
}

.auth-modal .modal-header {
    padding-bottom: 0;
}

.auth-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto;
    border-radius: 50%;
    background: rgba(17, 17, 17, 0.06);
    color: #111111;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.auth-title {
    margin: 0;
    font-size: 2rem;
    color: #111111;
}

.auth-subtitle {
    margin: 0.35rem 0 0;
    color: #666666;
}

.auth-form .form-label {
    font-weight: 600;
    color: #333333;
}

.auth-form .form-control {
    border-radius: 12px;
    border: 1px solid #E5E7EB;
    padding: 0.8rem 0.9rem;
}

.auth-form .form-control:focus {
    border-color: #111111;
    box-shadow: 0 0 0 0.2rem rgba(17, 17, 17, 0.08);
}

.text-link {
    color: #111111;
    text-decoration: none;
    font-weight: 600;
}

.text-link:hover {
    color: #333333;
    text-decoration: underline;
}

.auth-submit-btn {
    border-radius: 12px;
    padding: 0.85rem 1rem;
    font-size: 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.auth-submit-btn:hover,
.auth-submit-btn:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(17, 17, 17, 0.12);
    outline: none;
}

.auth-submit-btn:active {
    transform: translateY(0);
}

.auth-muted {
    color: #666666;
}

.auth-page-body {
    min-height: 100vh;
    background: #f4f1ee;
    padding: 0;
}

.auth-page-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3.5rem 1.25rem 2.5rem;
}

.auth-page-shell {
    width: 100%;
    max-width: 480px;
}

.auth-page-card {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: 22px;
    box-shadow: 0 18px 40px rgba(17, 17, 17, 0.08);
    padding: 32px 28px;
}

.auth-page-header h2 {
    margin: 0;
    font-size: 2rem;
    color: #111111;
}

.auth-page-header p {
    margin: 0.5rem 0 0;
    color: #666666;
}

.auth-form .form-control {
    height: 48px;
}

.password-field-wrap {
    position: relative;
}

.password-input-group {
    position: relative;
}

.password-input-group .form-control {
    padding-right: 48px;
}

.password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: #666666;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.password-toggle:hover,
.password-toggle:focus-visible {
    color: #111111;
    background: rgba(17, 17, 17, 0.05);
    outline: none;
}

.password-toggle:active {
    transform: translateY(-50%) scale(0.96);
}

.btn-success {
    background-color: var(--success-color);
}

.btn-danger {
    background-color: var(--danger-color);
}

/* ============================================
   PRODUCT CARDS
   ============================================ */

.products-section {
    padding: 4rem 0;
    background-color: #f5f5f5;
}

.section-title {
    font-size: 2rem;
    font-weight: 700;
    color: #111111;
    text-align: center;
    margin-bottom: 3rem;
    letter-spacing: -0.04em;
}

/* Grid Layout - Responsive */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

@media (max-width: 1200px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

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

/* Product Card */
.product-card {
    transition: all 0.3s ease;
}

.product-card:hover {
    transform: translateY(-5px);
}

/* Product Image Wrapper */
.product-image-wrapper {
    position: relative;
    overflow: hidden;
    background-color: #F9F9F9;
    aspect-ratio: 1;
    margin-bottom: 1rem;
    cursor: pointer;
}

.product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.product-image-wrapper:hover .product-image {
    transform: scale(1.05);
}

/* Alternative Images on Hover */
.product-image-thumbnails {
    display: none;
    position: absolute;
    bottom: 10px;
    left: 10px;
    gap: 5px;
}

.product-image-thumbnails img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.product-image-thumbnails img:hover {
    opacity: 1;
}

/* Badge */
.product-badge {
    position: absolute;
    top: 10px;
    left: 10px;
}

.badge-new, .badge-sale {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background-color: #333;
    color: white;
}

.badge-sale {
    background-color: #E74C3C;
}

/* Product Info */
.product-info {
    padding: 0;
}

.product-name {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

/* Color Options */
.product-variants {
    margin-bottom: 1rem;
}

.color-options {
    display: flex;
    gap: 8px;
}

.color-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #E8E8E8;
    cursor: pointer;
    transition: all 0.2s ease;
}

.color-circle:hover {
    border-color: #333;
}

/* Price */
.product-price {
    margin-bottom: 1rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.price {
    font-size: 1.1rem;
    font-weight: 700;
    color: #333;
}

.price-original {
    font-size: 0.9rem;
    color: #999;
    text-decoration: line-through;
}

/* Action Buttons (Disabled on card hover - users must view details to select variations) */
.product-actions {
    display: none !important;
}

.product-actions .btn {
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.5rem;
}

.btn-dark {
    background-color: #333;
    border-color: #333;
    color: white;
}

.btn-dark:hover {
    background-color: #000;
    border-color: #000;
}

.btn-outline-dark {
    border-color: #333;
    color: #333;
}

.btn-outline-dark:hover {
    background-color: #333;
    color: white;
}

/* ============================================
   FORMS
   ============================================ */

.form-control {
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: 0.75rem;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(139, 90, 142, 0.25);
}

.form-label {
    font-weight: 600;
    color: var(--dark-color);
    margin-bottom: 0.5rem;
}

.form-check-input {
    border: 1px solid var(--border-color);
}

.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* ============================================
   TABLES
   ============================================ */

.table {
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.table thead {
    background-color: var(--dark-color);
    color: white;
}

.table th {
    font-weight: 600;
    border: none;
}

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

.table tbody tr:hover {
    background-color: rgba(139, 90, 142, 0.05);
}

/* ============================================
   MODALS
   ============================================ */

.modal-content {
    border-radius: 8px;
    border: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.modal-header {
    background-color: var(--primary-color);
    color: white;
    border: none;
}

.modal-title {
    font-weight: 600;
}

.close {
    color: white;
    opacity: 0.8;
}

.close:hover {
    opacity: 1;
}

/* ============================================
   ALERTS & BADGES
   ============================================ */

.alert {
    border: none;
    border-radius: 5px;
    border-left: 4px solid;
}

.alert-success {
    background-color: #D4EDDA;
    color: #155724;
    border-left-color: var(--success-color);
}

.alert-danger {
    background-color: #F8D7DA;
    color: #721C24;
    border-left-color: var(--danger-color);
}

.alert-warning {
    background-color: #FFF3CD;
    color: #856404;
    border-left-color: #FFC107;
}

.alert-info {
    background-color: #D1ECF1;
    color: #0C5460;
    border-left-color: #17A2B8;
}

.badge {
    padding: 0.5rem 0.75rem;
    border-radius: 50px;
    font-size: 0.85rem;
}

.badge-success {
    background-color: var(--success-color);
}

.badge-danger {
    background-color: var(--danger-color);
}

/* ============================================
   CARDS & BOXES
   ============================================ */

.card {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.card-header {
    background-color: var(--light-color);
    border-bottom: 2px solid var(--border-color);
    font-weight: 600;
}

.card-footer {
    background-color: var(--light-color);
    border-top: 1px solid var(--border-color);
}

/* ============================================
   ADMIN DASHBOARD
   ============================================ */

.admin-container {
    display: flex;
    min-height: 100vh;
}

.admin-sidebar {
    width: 250px;
    background-color: var(--dark-color);
    color: white;
    padding: 1.5rem;
    position: fixed;
    height: 100vh;
    overflow-y: auto;
}

.admin-sidebar .brand {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: white;
}

.admin-sidebar .nav-item {
    list-style: none;
    margin-bottom: 0.5rem;
}

.admin-sidebar .nav-link {
    color: #ccc;
    padding: 0.75rem 1rem;
    display: block;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.admin-sidebar .nav-link:hover,
.admin-sidebar .nav-link.active {
    background-color: var(--primary-color);
    color: white;
}

.admin-main {
    margin-left: 250px;
    flex: 1;
    padding: 2rem;
}

.dashboard-stat {
    background: white;
    border-radius: 8px;
    padding: 2rem;
    margin-bottom: 1.5rem;
    border-left: 4px solid var(--primary-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.dashboard-stat h4 {
    color: #999;
    font-size: 0.9rem;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.dashboard-stat .stat-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

/* ============================================
   FOOTER
   ============================================ */

footer {
    background-color: var(--dark-color);
    color: white;
    margin-top: 4rem;
}

footer h6 {
    color: white;
    font-weight: 700;
}

footer a {
    color: #999;
}

footer a:hover {
    color: var(--secondary-color);
}

/* ============================================
   UTILITIES
   ============================================ */

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

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

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

.bg-light-primary {
    background-color: rgba(139, 90, 142, 0.1) !important;
}

.shadow-sm {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

.shadow-lg {
    box-shadow: 0 8px 16px rgba(0,0,0,0.15) !important;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 768px) {
    .hero-section {
        padding: 40px 0 !important;
    }
    
    .hero-section h1 {
        font-size: 2rem;
    }
    
    .hero-section .lead {
        font-size: 1rem;
    }
    
    .admin-sidebar {
        width: 100%;
        height: auto;
        position: relative;
    }
    
    .admin-main {
        margin-left: 0;
    }
    
    .product-image-container {
        height: 200px;
    }
}

@media (max-width: 576px) {
    .hero-section {
        padding: 30px 0 !important;
    }
    
    h1 {
        font-size: 1.75rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    .btn {
        padding: 0.4rem 1rem;
        font-size: 0.9rem;
    }
    
    .product-card .card-body {
        padding: 1rem;
    }
}

/* ============================================
   ANIMATIONS
   ============================================ */

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn 0.5s ease;
}

.slide-in {
    animation: slideIn 0.5s ease;
}

/* ============================================
   END OF STYLESHEET
   ============================================ */

/* ============================================
   Gouache-inspired additions
   ============================================ */

.shop-by-category {
    padding: 4rem 0;
    background-color: var(--primary-light);
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.category-card {
    text-align: center;
}

.category-image {
    position: relative;
    overflow: hidden;
    height: 300px;
    margin-bottom: 1rem;
}

.category-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.category-card:hover .category-image img {
    transform: scale(1.1);
}

.category-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.category-card:hover .category-overlay {
    opacity: 1;
}

.category-btn {
    padding: 0.75rem 2rem;
    background-color: white;
    color: #333;
    text-decoration: none;
    font-weight: 600;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.category-btn:hover {
    background-color: #333;
    color: white;
}

.story-section {
    padding: 4rem 0;
    background-color: var(--white);
}

.story-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem;
}

.story-item {
    text-align: center;
}

.story-number {
    font-size: 3rem;
    font-weight: 700;
    color: #E8E8E8;
    margin-bottom: 1rem;
}

.story-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.story-item h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
}

.story-item p {
    color: var(--text-light);
    line-height: 1.6;
    font-size: 0.95rem;
}

.newsletter-section {
    padding: 4rem 0;
    background-color: var(--primary-light);
}

.newsletter-container {
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
}

.newsletter-container h3 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.newsletter-container p {
    color: var(--text-light);
    margin-bottom: 2rem;
    font-size: 0.95rem;
}

.newsletter-form {
    display: flex;
    gap: 0.5rem;
}

.newsletter-form .form-control {
    padding: 0.75rem 1rem;
    border: 1px solid #DDD;
    border-radius: 4px;
    font-size: 0.95rem;
}

.newsletter-form .btn {
    padding: 0.75rem 1.5rem;
}

.stories-section {
    padding: 4rem 0;
    background-color: var(--white);
}

.stories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.story-card {
    overflow: hidden;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.story-card:hover {
    transform: translateY(-5px);
}

.story-image {
    overflow: hidden;
    height: 250px;
}

.story-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

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

.story-content {
    padding: 1.5rem;
    background-color: var(--primary-light);
}

.story-card h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.story-card p {
    color: var(--text-light);
    font-size: 0.9rem;
    margin-bottom: 1rem;
    line-height: 1.6;
}

.read-more {
    color: var(--text-dark);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}

.read-more:hover {
    color: var(--accent-color);
}

/* ============================================
   SHOP HERO / COLLECTION BANNER (Cosette Themed)
   ============================================ */

body.shop-page {
    padding-top: 54px;
    font-family: "Instrument Sans", sans-serif;
    background-color: #ffffff;
    color: #000000;
}

.shop-collection-banner {
    --shop-banner-bg: #f1ede7;
    background-color: var(--shop-banner-bg);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding: 3.5rem 0 3.25rem;
    width: 100%;
}

.shop-banner-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
}

.shop-banner-col-title {
    flex: 0 0 auto;
}

.shop-banner-title {
    font-size: 2.85rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: #000000;
    margin: 0;
    line-height: 1.15;
    font-family: "Tenor Sans", sans-serif;
    transition: opacity 0.2s ease;
}

.shop-banner-col-desc {
    flex: 1 1 auto;
    max-width: 580px;
    margin: 0 1.5rem;
}

.shop-banner-text {
    font-size: 12px;
    line-height: 1.5;
    color: #000000;
    margin: 0;
    font-weight: 400;
    font-family: "Instrument Sans", sans-serif;
}

.shop-banner-col-badges {
    flex: 0 0 auto;
}

.craft-badges-list {
    display: flex;
    align-items: flex-start;
    gap: 2.25rem;
}

.craft-badge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 90px;
    cursor: default;
    font-family: "Instrument Sans", sans-serif;
}

.craft-badge-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    color: #000000;
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.craft-badge-item:hover .craft-badge-icon {
    transform: translateY(-3px);
}

.craft-badge-label {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    color: #000000;
    text-align: center;
    font-family: "Instrument Sans", sans-serif;
}

/* Responsive Breakpoints */
@media (max-width: 991px) {
    .shop-collection-banner {
        padding: 2.75rem 0;
    }

    .shop-banner-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.75rem;
    }

    .shop-banner-col-desc {
        margin: 0;
        max-width: 100%;
    }

    .craft-badges-list {
        gap: 2rem;
    }
}

@media (max-width: 576px) {
    .shop-collection-banner {
        padding: 2.25rem 0;
    }

    .shop-banner-title {
        font-size: 1.95rem;
    }

    .shop-banner-col-badges {
        width: 100%;
    }

    .craft-badges-list {
        width: 100%;
        justify-content: space-around;
        gap: 0.5rem;
    }

    .craft-badge-item {
        width: 80px;
    }

    .craft-badge-icon {
        width: 38px;
        height: 38px;
    }
}

/* ==========================================================================
   PRODUCT DETAIL PAGE (GOUACHE-INSPIRED HIGH-END PDP STYLING)
   ========================================================================== */
.pdp-page {
    background-color: #ffffff;
    color: #111111;
    font-family: "Instrument Sans", sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Breadcrumbs */
.pdp-breadcrumb-nav {
    padding: 1.25rem 0 0.5rem;
    font-size: 0.82rem;
    font-family: "Instrument Sans", sans-serif;
    color: #888888;
}

.pdp-breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pdp-breadcrumb-item a {
    color: #666666;
    text-decoration: none;
    transition: color 0.15s ease;
}

.pdp-breadcrumb-item a:hover {
    color: #000000;
}

.pdp-breadcrumb-separator {
    color: #cccccc;
    user-select: none;
}

.pdp-breadcrumb-item.active {
    color: #111111;
    font-weight: 500;
}

/* Main PDP 2-Column Grid */
.pdp-main-wrapper {
    padding: 1.5rem 0 4rem;
}

.pdp-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 48px;
    align-items: start;
}

/* Left Column: Media Gallery */
.pdp-gallery-col {
    position: relative;
    width: 100%;
}

.pdp-gallery-sticky {
    position: sticky;
    top: 96px;
}

.pdp-main-image-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #ffffff;
    border: 1px solid #e8e4de;
    border-radius: 0 !important; /* Pointed borders */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdp-main-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease;
}

.pdp-main-image-container:hover .pdp-main-image {
    transform: scale(1.04);
}

/* Gallery Arrow Chevrons */
.pdp-gallery-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0 !important; /* Pointed borders */
    color: #111111;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease;
    z-index: 5;
}

.pdp-main-image-container:hover .pdp-gallery-nav-btn {
    opacity: 1;
}

.pdp-gallery-nav-btn:hover {
    background: #ffffff;
    color: #000000;
}

.pdp-gallery-nav-btn.prev {
    left: 12px;
}

.pdp-gallery-nav-btn.next {
    right: 12px;
}

/* Thumbnail Carousel Strip */
.pdp-thumbnail-strip {
    display: flex;
    gap: 12px;
    margin-top: 14px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
}

.pdp-thumbnail-strip::-webkit-scrollbar {
    height: 4px;
}

.pdp-thumbnail-strip::-webkit-scrollbar-thumb {
    background: #d8d4cd;
}

.pdp-thumbnail-item {
    width: 76px;
    height: 76px;
    flex-shrink: 0;
    border: 1px solid #e0dbd3;
    border-radius: 0 !important; /* Pointed borders */
    background: #ffffff;
    padding: 4px;
    cursor: pointer;
    transition: border-color 0.2s ease, opacity 0.2s ease;
    opacity: 0.75;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdp-thumbnail-item:hover {
    opacity: 1;
    border-color: #888888;
}

.pdp-thumbnail-item.active {
    opacity: 1;
    border: 2px solid #000000;
}

.pdp-thumbnail-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

/* Right Column: Sticky Product Info */
.pdp-info-col {
    width: 100%;
}

.pdp-info-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pdp-eyebrow {
    font-family: "Instrument Sans", sans-serif;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #777777;
    margin: 0;
}

.pdp-product-title {
    font-family: "Tenor Sans", sans-serif;
    font-size: 2.25rem;
    font-weight: 400;
    line-height: 1.22;
    letter-spacing: 0.3px;
    color: #000000;
    margin: 0;
}

.pdp-price-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-top: 2px;
}

.pdp-current-price {
    font-family: "Tenor Sans", sans-serif;
    font-size: 1.45rem;
    font-weight: 400;
    color: #000000;
}

.pdp-compare-price {
    font-family: "Instrument Sans", sans-serif;
    font-size: 1.1rem;
    color: #999999;
    text-decoration: line-through;
}

.pdp-tax-notice {
    font-size: 0.8rem;
    color: #777777;
    margin-top: -6px;
    margin-bottom: 6px;
}

.pdp-stock-badge-wrap {
    margin-top: 2px;
}

.pdp-stock-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 0 !important; /* Pointed borders */
    border: 1px solid transparent;
}

.pdp-stock-badge.in-stock {
    background: #edf7ed;
    color: #1e4620;
    border-color: #c3e6cb;
}

.pdp-stock-badge.out-stock {
    background: #fdf0f0;
    color: #842029;
    border-color: #f5c2c7;
}

.pdp-stock-badge.pre-order {
    background: #fff8e6;
    color: #7a5400;
    border-color: #ffe69c;
}

/* Variations Selector */
.pdp-variations-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid #ebe6df;
}

.pdp-variation-group-label {
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #111111;
    margin-bottom: 8px;
}

.pdp-variation-group-label span {
    font-weight: 400;
    color: #555555;
    text-transform: none;
}

.pdp-variation-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pdp-var-pill-btn {
    font-family: "Instrument Sans", sans-serif;
    font-size: 0.86rem;
    font-weight: 450;
    padding: 7px 16px;
    background: #ffffff;
    color: #111111;
    border: 1px solid #d4d0c8;
    border-radius: 0 !important; /* Pointed borders */
    cursor: pointer;
    transition: all 0.18s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pdp-var-swatch-dot {
    width: 11px;
    height: 11px;
    border: 1px solid rgba(0, 0, 0, 0.22);
    border-radius: 0 !important; /* Pointed borders */
    display: inline-block;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
}

.pdp-var-pill-btn.active .pdp-var-swatch-dot {
    border-color: #ffffff;
}

.pdp-var-pill-btn:hover,
.pdp-var-pill-btn.is-previewed {
    border-color: #000000;
    background: #f8f6f3;
}

.pdp-var-pill-btn.active {
    background: #000000;
    color: #ffffff;
    border-color: #000000;
}

.pdp-var-pill-btn.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* Buy Action Box */
.pdp-action-box {
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin-top: 10px;
}

.pdp-quantity-selector {
    display: flex;
    align-items: center;
    border: 1px solid #000000;
    border-radius: 0 !important; /* Pointed borders */
    background: #ffffff;
    height: 48px;
    flex-shrink: 0;
}

.pdp-qty-btn {
    width: 38px;
    height: 100%;
    border: none;
    background: transparent;
    color: #000000;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.pdp-qty-btn:hover {
    background: #f4f2ee;
}

.pdp-qty-input {
    width: 44px;
    height: 100%;
    border: none;
    background: transparent;
    text-align: center;
    font-family: "Instrument Sans", sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #000000;
    outline: none;
}

.pdp-add-to-bag-btn {
    flex: 1;
    height: 48px;
    background: #000000;
    color: #ffffff;
    border: 1px solid #000000;
    border-radius: 0 !important; /* Pointed borders */
    font-family: "Instrument Sans", sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pdp-add-to-bag-btn:hover:not(:disabled) {
    background: #222222;
    transform: translateY(-1px);
}

.pdp-add-to-bag-btn:disabled {
    background: #cccccc;
    border-color: #cccccc;
    color: #666666;
    cursor: not-allowed;
    transform: none;
}

.pdp-add-to-bag-btn.added-success {
    background: #198754 !important;
    border-color: #198754 !important;
    color: #ffffff !important;
}

/* Product Story & Description */
.pdp-description-wrap {
    margin-top: 14px;
    font-size: 0.92rem;
    line-height: 1.75;
    color: #333333;
}

.pdp-description-wrap p {
    margin-bottom: 12px;
}

.pdp-features-bullets {
    margin: 12px 0;
    padding-left: 1.2rem;
    color: #444444;
}

.pdp-features-bullets li {
    margin-bottom: 6px;
}

/* Accordions Section */
.pdp-accordions-group {
    margin-top: 18px;
    border-top: 1px solid #e8e4de;
}

.pdp-accordion-item {
    border-bottom: 1px solid #e8e4de;
}

.pdp-accordion-item details {
    width: 100%;
}

.pdp-accordion-summary {
    padding: 18px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: "Instrument Sans", sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    color: #000000;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.pdp-accordion-summary::-webkit-details-marker {
    display: none;
}

.pdp-accordion-icon {
    font-size: 1.1rem;
    font-weight: 300;
    transition: transform 0.25s ease;
    display: inline-block;
    color: #111111;
}

.pdp-accordion-item details[open] .pdp-accordion-icon {
    transform: rotate(45deg);
}

.pdp-accordion-content {
    padding: 0 0 20px;
    font-size: 0.88rem;
    line-height: 1.75;
    color: #555555;
}

.pdp-accordion-content p:last-child {
    margin-bottom: 0;
}

/* Craft Values Card Strip */
.pdp-craft-badges-strip {
    display: flex;
    justify-content: space-around;
    padding: 22px 14px;
    background: #fbf9f6;
    border: 1px solid #ece7df;
    border-radius: 0 !important; /* Pointed borders */
    margin-top: 24px;
    gap: 12px;
}

.pdp-craft-badge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    flex: 1;
}

.pdp-craft-badge-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000000;
}

.pdp-craft-badge-text {
    font-size: 0.76rem;
    font-weight: 450;
    color: #000000;
    line-height: 1.3;
}

/* Sticky Bottom Add-to-Cart Bar (Gouache Signature UX) */
.pdp-sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(10px);
    border-top: 1px solid #e5e0d8;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1040;
    transform: translateY(110%);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.05);
}

.pdp-sticky-bar.is-visible {
    transform: translateY(0);
}

.pdp-sticky-bar-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pdp-sticky-thumb {
    width: 48px;
    height: 48px;
    border: 1px solid #e0dbd3;
    border-radius: 0 !important; /* Pointed borders */
    background: #ffffff;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.pdp-sticky-info {
    display: flex;
    flex-direction: column;
}

.pdp-sticky-title {
    font-family: "Tenor Sans", sans-serif;
    font-size: 0.98rem;
    font-weight: 500;
    color: #000000;
    margin: 0;
}

.pdp-sticky-variant {
    font-size: 0.78rem;
    color: #777777;
}

.pdp-sticky-bar-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.pdp-sticky-price {
    font-family: "Tenor Sans", sans-serif;
    font-size: 1.15rem;
    font-weight: 500;
    color: #000000;
}

.pdp-sticky-btn {
    height: 40px;
    padding: 0 24px;
    background: #000000;
    color: #ffffff;
    border: 1px solid #000000;
    border-radius: 0 !important; /* Pointed borders */
    font-family: "Instrument Sans", sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.18s ease;
}

.pdp-sticky-btn:hover {
    background: #222222;
}

/* Customer Top Picks Section (Matching Gouache Reference) */
.pdp-recommendations-section {
    margin-top: 4.5rem;
    padding-top: 3.5rem;
    border-top: 1px solid #e8e4de;
}

.pdp-recommendations-header {
    text-align: center;
    margin-bottom: 2.25rem;
}

.pdp-recommendations-title {
    font-family: "Tenor Sans", sans-serif;
    font-size: 2.05rem;
    color: #000000;
    font-weight: 400;
    letter-spacing: 0.4px;
    margin: 0;
}

/* 4-Column Grid matching reference */
.pdp-top-picks-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    width: 100%;
}

/* Card: Completely borderless, no outer shadow, no box */
.pdp-top-pick-card {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    text-align: left;
    cursor: pointer;
    overflow: visible;
}

/* Media: Soft rounded corners, studio backdrop */
.pdp-top-pick-media {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #f4f3ef;
    border-radius: 8px !important;
    overflow: hidden;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdp-top-pick-img-link {
    display: block;
    width: 100%;
    height: 100%;
}

.pdp-top-pick-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: multiply;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: block;
}

.pdp-top-pick-card:hover .pdp-top-pick-image {
    transform: scale(1.03);
}

/* Info: Left-aligned, minimal typography matching reference */
.pdp-top-pick-info {
    padding-top: 12px;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.pdp-top-pick-title {
    font-family: "Instrument Sans", sans-serif;
    font-size: 13px;
    font-weight: 450;
    line-height: 1.35;
    color: #111111;
    margin: 0 0 3px;
    text-align: left;
    width: 100%;
}

.pdp-top-pick-title a {
    color: #111111;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.pdp-top-pick-title a:hover {
    opacity: 0.65;
}

.pdp-top-pick-price {
    font-family: "Instrument Sans", sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #111111;
    margin: 0 0 6px;
    text-align: left;
}

/* Circular Color Swatches directly below the price */
.pdp-top-pick-swatches {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    margin-top: 2px;
    flex-wrap: wrap;
    min-height: 16px;
}

.pdp-top-pick-swatch-item {
    width: 14px;
    height: 14px;
    border-radius: 50% !important; /* Circular as shown in reference */
    border: 1px solid rgba(0, 0, 0, 0.12);
    padding: 0;
    margin: 0;
    cursor: pointer;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.15s ease, outline 0.15s ease;
    outline: 1.5px solid transparent;
    outline-offset: 1.5px;
    display: inline-block;
}

.pdp-top-pick-swatch-item:hover,
.pdp-top-pick-swatch-item.is-previewed {
    transform: scale(1.18);
    outline-color: #000000;
    z-index: 2;
}

.pdp-top-pick-swatch-item.is-active {
    outline-color: #000000;
}

.pdp-top-pick-overflow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 500;
    color: #666666;
    text-decoration: none;
    line-height: 14px;
    height: 14px;
    padding: 0 4px;
    border-radius: 4px;
    letter-spacing: -0.2px;
    transition: color 0.15s ease, background-color 0.15s ease;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.pdp-top-pick-overflow:hover {
    color: #000000;
    background-color: rgba(0, 0, 0, 0.06);
    text-decoration: none;
}

@media (max-width: 991px) {
    .pdp-top-picks-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 576px) {
    .pdp-top-picks-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .pdp-recommendations-title {
        font-size: 1.6rem;
    }
}

/* Responsive PDP styles */
@media (max-width: 991px) {
    .pdp-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .pdp-gallery-sticky {
        position: static;
    }

    .pdp-product-title {
        font-size: 1.85rem;
    }

    .pdp-sticky-bar {
        padding: 10px 16px;
    }

    .pdp-sticky-bar-left .pdp-sticky-variant {
        display: none;
    }
}

@media (max-width: 576px) {
    .pdp-main-image-container {
        aspect-ratio: 1 / 1;
    }

    .pdp-thumbnail-item {
        width: 64px;
        height: 64px;
    }

    .pdp-action-box {
        flex-direction: column;
    }

    .pdp-quantity-selector {
        width: 100%;
        justify-content: space-between;
    }

    .pdp-qty-btn {
        flex: 1;
    }

    .pdp-sticky-bar-left {
        gap: 10px;
    }

    .pdp-sticky-thumb {
        width: 40px;
        height: 40px;
    }

    .pdp-sticky-title {
        font-size: 0.88rem;
        max-width: 140px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .pdp-sticky-price {
        display: none;
    }

    .pdp-craft-badges-strip {
        flex-direction: column;
        gap: 16px;
    }
}

/* ==========================================================================
   PRODUCT REVIEWS & FEEDBACK (MATCHING GOUACHE / JUDGE.ME SYSTEM)
   ========================================================================== */

.pdp-reviews-section {
    margin-top: 3.5rem;
    padding-top: 2.75rem;
    border-top: 1px solid #e8e4de;
    position: relative;
}

.pdp-reviews-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 16px;
    position: relative;
}

.pdp-reviews-summary-wrapper {
    position: relative;
    display: inline-block;
}

.pdp-reviews-dropdown-btn {
    background: transparent;
    border: none;
    padding: 6px 10px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
    user-select: none;
}

.pdp-reviews-dropdown-btn:hover {
    background: rgba(0, 0, 0, 0.04);
}

.pdp-reviews-stars {
    color: #f59e0b;
    font-size: 1.25rem;
    letter-spacing: 2px;
    line-height: 1;
    display: inline-flex;
}

.pdp-reviews-count-text {
    font-size: 1rem;
    font-weight: 500;
    color: #18181b;
}

.pdp-reviews-chevron {
    transition: transform 0.25s ease;
    color: #52525b;
}

.pdp-reviews-dropdown-btn.is-open .pdp-reviews-chevron {
    transform: rotate(180deg);
}

/* Rating Breakdown Dropdown (Image 2) */
.pdp-reviews-breakdown-popover {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 1050;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.04);
    border: 1px solid #e5e7eb;
    padding: 22px 24px;
    width: 320px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pdp-reviews-breakdown-popover.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.pdp-reviews-big-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 18px;
}

.pdp-reviews-big-star {
    color: #f59e0b;
    font-size: 2.2rem;
    line-height: 1;
}

.pdp-reviews-big-score {
    font-size: 2.4rem;
    font-weight: 700;
    color: #18181b;
    letter-spacing: -0.5px;
    line-height: 1;
}

.pdp-reviews-bars-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pdp-reviews-bar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.88rem;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    transition: background 0.15s ease;
}

.pdp-reviews-bar-row:hover {
    background: #f9fafb;
}

.pdp-bar-stars {
    color: #f59e0b;
    font-size: 0.95rem;
    letter-spacing: 1px;
    width: 76px;
    display: inline-block;
}

.pdp-bar-track {
    flex: 1;
    height: 8px;
    background: #f3f4f6;
    border-radius: 4px;
    margin: 0 12px;
    overflow: hidden;
}

.pdp-bar-fill {
    height: 100%;
    background: #6b7280;
    border-radius: 4px;
    transition: width 0.4s ease;
}

.pdp-bar-count {
    color: #4b5563;
    font-size: 0.82rem;
    width: 24px;
    text-align: right;
}

/* Header Action Buttons */
.pdp-reviews-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pdp-write-review-btn {
    border: 1px solid #d4d4d8 !important;
    background: #ffffff !important;
    color: #18181b !important;
    font-weight: 500 !important;
    font-size: 0.92rem !important;
    padding: 7px 18px !important;
    border-radius: 8px !important;
    transition: all 0.15s ease !important;
}

.pdp-write-review-btn:hover {
    background: #f4f4f5 !important;
    border-color: #18181b !important;
}

.pdp-review-filter-btn {
    border: 1px solid #d4d4d8 !important;
    background: #ffffff !important;
    color: #18181b !important;
    padding: 7px 10px !important;
    border-radius: 8px !important;
    transition: all 0.15s ease !important;
}

.pdp-review-filter-btn:hover {
    background: #f4f4f5 !important;
}

/* Review Cards Grid (Image 1) */
.pdp-reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 320px));
    gap: 20px;
    margin-top: 1rem;
    align-items: stretch;
}

.pdp-review-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.pdp-review-card:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.pdp-review-card-media {
    width: 100%;
    height: 180px;
    background: #f9fafb;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.pdp-review-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.pdp-review-card-media:hover .pdp-review-card-img {
    transform: scale(1.04);
}

.pdp-review-card-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.pdp-review-author-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.pdp-review-author-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: #18181b;
}

.pdp-review-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #18181b;
}

.pdp-review-verified-badge svg {
    color: #18181b;
}

.pdp-review-date {
    font-size: 0.78rem;
    color: #71717a;
    margin-bottom: 8px;
}

.pdp-review-stars {
    color: #f59e0b;
    font-size: 0.95rem;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.pdp-review-text {
    font-size: 0.88rem;
    color: #27272a;
    line-height: 1.45;
    margin-bottom: 12px;
    flex: 1;
}

.pdp-review-item-type {
    font-size: 0.78rem;
    color: #52525b;
    font-weight: 500;
    margin-top: auto;
}

/* Empty Reviews State */
.pdp-reviews-empty {
    text-align: center;
    padding: 48px 20px;
    background: #fdfcfb;
    border: 1px dashed #dcd4c8;
    border-radius: 12px;
    grid-column: 1 / -1;
}

.pdp-reviews-empty-icon {
    font-size: 2.2rem;
    color: #dcd4c8;
    margin-bottom: 12px;
}

.pdp-reviews-empty-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: #272015;
    margin-bottom: 4px;
}

.pdp-reviews-empty-text {
    font-size: 0.88rem;
    color: #71717a;
    margin-bottom: 16px;
}

/* ==========================================================================
   MULTI-STEP WRITE A REVIEW MODAL (IMAGES 1 & 3, 4, 5 SPEC)
   ========================================================================== */

.pdp-review-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.42) !important; /* Gentle dark tint matching Image 1 */
    backdrop-filter: none !important;           /* Not blurred, matching Image 1! */
    -webkit-backdrop-filter: none !important;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
    will-change: opacity;
}

.pdp-review-modal-backdrop.show {
    opacity: 1;
    visibility: visible;
}

.pdp-review-modal {
    background: #ffffff;
    border-radius: 8px; /* Clean rectangular corners matching Image 1 */
    width: 100%;
    max-width: 780px;   /* Roomy, wide card matching Image 1 proportion */
    height: 560px;      /* Fixed stable height to guarantee 100% smooth horizontal slides */
    max-height: 92vh;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.24);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.96) translateY(8px);
    opacity: 0;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease;
    will-change: transform, opacity;
}

.pdp-review-modal-backdrop.show .pdp-review-modal {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.pdp-modal-close-btn {
    position: absolute;
    top: 22px;
    left: 22px;
    background: transparent;
    border: none;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #111111;
    z-index: 30;
    padding: 0;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.pdp-modal-close-btn:hover {
    opacity: 0.6;
    transform: scale(1.12);
}

/* Slider Track with Pure Hardware-Accelerated translate3d */
.pdp-modal-slider-viewport {
    width: 100%;
    height: 100%;
    overflow: hidden;
    flex: 1;
    position: relative;
}

.pdp-modal-slider-track {
    display: flex;
    width: 300%;
    height: 100%;
    transition: transform 0.44s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

.pdp-modal-slide {
    width: 33.333333%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    position: relative;
}

/* Slide 1 specifics (Image 1 / Image 3) */
.pdp-slide-1 {
    padding: 40px 48px 20px;
}

.pdp-slide-content-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.pdp-slide-footer-powered {
    display: flex;
    justify-content: flex-end;
    font-size: 0.74rem;
    color: #a1a1aa;
    font-weight: 500;
    letter-spacing: 0.02em;
    user-select: none;
    padding-bottom: 4px;
}

/* Slide 2 & 3 specifics */
.pdp-slide-2,
.pdp-slide-3 {
    padding: 44px 48px 0;
}

.pdp-slide-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
}

.pdp-modal-slide-title {
    font-size: 1.85rem;
    font-weight: 700;
    color: #111111;
    text-align: center;
    margin-bottom: 2rem;
    letter-spacing: -0.02em;
}

/* Slide 1: Rating Stars (Image 1 reference) */
.pdp-rate-stars-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.pdp-rate-stars-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.pdp-rate-star-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    line-height: 1;
    padding: 8px;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pdp-rate-star-btn:hover {
    transform: scale(1.22);
}

.pdp-rate-star-btn:active {
    transform: scale(0.92);
}

.pdp-rate-star-btn svg {
    width: 56px;
    height: 56px;
    stroke: #eab308;
    stroke-width: 1.5;
    fill: transparent;
    transition: fill 0.18s ease;
}

.pdp-rate-star-btn.is-active svg,
.pdp-rate-star-btn.is-hovered svg {
    fill: #eab308;
}

.pdp-rate-labels-row {
    display: flex;
    justify-content: space-between;
    width: 360px;
    font-size: 0.95rem;
    font-weight: 500;
    color: #18181b;
}

/* Slide 2: Experience Text (Image 4) */
.pdp-experience-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pdp-review-textarea {
    width: 100%;
    min-height: 200px;
    border: 1.5px solid #27272a !important;
    border-radius: 12px !important;
    padding: 16px 18px !important;
    font-size: 1rem !important;
    resize: none !important;
    color: #18181b !important;
    box-shadow: none !important;
    line-height: 1.5 !important;
}

.pdp-review-textarea:focus {
    outline: none !important;
    border-color: #000000 !important;
    box-shadow: 0 0 0 1px #000000 !important;
}

/* Photo Attachment Button */
.pdp-review-photo-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pdp-photo-attach-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #4b5563;
    background: #f9fafb;
    border: 1.5px dashed #d1d5db;
    border-radius: 8px;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.pdp-photo-attach-btn:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
    color: #111827;
}

.pdp-photo-preview-wrap {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.pdp-photo-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pdp-photo-remove-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Slide 3: About You (Image 5) */
.pdp-about-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pdp-name-fields-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.pdp-input-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: #18181b;
    margin-bottom: 6px;
}

.pdp-input-group label .req-star {
    color: #ef4444;
}

.pdp-review-input {
    width: 100%;
    height: 46px;
    border: 1.5px solid #27272a !important;
    border-radius: 10px !important;
    padding: 10px 16px !important;
    font-size: 0.98rem !important;
    color: #18181b !important;
    box-shadow: none !important;
}

.pdp-review-input:focus {
    outline: none !important;
    border-color: #000000 !important;
    box-shadow: 0 0 0 1px #000000 !important;
}

.pdp-modal-disclaimer {
    font-size: 0.8rem;
    color: #52525b;
    text-align: center;
    line-height: 1.45;
    margin-top: 10px;
}

.pdp-modal-disclaimer a {
    color: #18181b;
    text-decoration: underline;
}

/* Bottom Navigation Bar inside Slide 2 and Slide 3 */
.pdp-modal-bottom-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 48px 24px;
    width: 100%;
    margin-top: auto;
    border-top: 1px solid #f4f4f5;
    background: #ffffff;
    box-sizing: border-box;
}

.pdp-modal-back-btn {
    background: transparent;
    border: none;
    font-size: 0.98rem;
    font-weight: 600;
    color: #18181b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    transition: opacity 0.15s ease;
}

.pdp-modal-back-btn:hover {
    opacity: 0.65;
}

/* Progress Pills */
.pdp-modal-progress-pills {
    display: flex;
    align-items: center;
    gap: 9px;
}

.pdp-modal-pill {
    width: 54px;
    height: 6px;
    background: #e4e4e7;
    border-radius: 999px;
    transition: background 0.25s ease;
}

.pdp-modal-pill.is-active {
    background: #000000;
}

.pdp-modal-next-btn {
    background: #f4f4f5;
    color: #a1a1aa;
    border: none;
    border-radius: 8px;
    padding: 11px 30px;
    font-weight: 600;
    font-size: 0.98rem;
    cursor: pointer;
    transition: all 0.18s ease;
}

.pdp-modal-next-btn.is-ready {
    background: #18181b;
    color: #ffffff;
}

.pdp-modal-done-btn {
    background: #000000;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 11px 36px;
    font-weight: 700;
    font-size: 0.98rem;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}

.pdp-modal-done-btn:hover {
    background: #27272a;
}

.pdp-modal-done-btn:active {
    transform: scale(0.97);
}

.pdp-modal-done-btn:hover {
    background: #27272a;
}

.pdp-modal-done-btn:active {
    transform: scale(0.98);
}