:root {
     --text: #f5f5f5;
     --muted: #a1a1a1;
     --accent: #ffffff;
     --font-system: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
     --left-ratio: 7;
     /* left : right ratio (7 / 3 -> 70/30) */
     --right-ratio: 6;
     --section-gap: 40px;
     --card-max-vh: 36vh;
     /* adjust card compactness vs left height */
     --accent: #D2824B;
     --glass: rgba(255, 255, 255, 0.03);
     --card-bg: linear-gradient(180deg, #0f1011, #141516);
     --radius-lg: 18px;
     --radius-sm: 12px;
     --transition: 320ms cubic-bezier(.2, .9, .3, 1);
     --visible-desktop: 4;
     /* visible cards on wide screens */
     --visible-tablet: 3;
     --visible-mobile: 1;
     --card-gap: 18px;
     --slider-speed: 0.85;
     /* pixels per frame (tweak to change speed) */
     --text: #f6f6f6;
     --muted: rgba(246, 246, 246, 0.6);
     --bg: #000;
     --transition2: cubic-bezier(.2, .9, .3, 1);
     --colorGold: #D2824B;

 }

 * {
     box-sizing: border-box;
 }

 html,
 body {
     height: 100%;
     margin: 0;
     font-family: var(--font-system);
     background: var(--bg);
     color: var(--text);
     -webkit-font-smoothing: antialiased;
 }

 .nav {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: .7rem 1rem;
     gap: 1rem;
     background: linear-gradient(90deg,
             /* left to right */
             rgba(0, 0, 0, 0.8) 0%,
             /* dark on left */
             rgba(0, 0, 0, 0) 50%,
             /* transparent in center */
             rgba(0, 0, 0, 0.8) 100%
             /* dark on right */
         );

     backdrop-filter: blur(6px);
     border-bottom: 1px solid rgba(255, 255, 255, 0.03);
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     z-index: 99;
 }

 .brand {
     display: flex;
     align-items: center;
     gap: .75rem
 }

 .logo {
     width: 44px;
     height: 44px;
     border-radius: 10px;
     background: linear-gradient(135deg, var(--accent), var(--accent-2));
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 800;
     color: #001;
     box-shadow: 0 8px 28px rgba(3, 7, 18, .6);
     font-family: ui-sans-serif;
 }

 .site-title {
     font-size: 1rem;
     font-weight: 700;
     color: var(--text)
 }

 /* HAMBURGER */
 .hamburger {
     width: 48px;
     height: 48px;
     border-radius: 10px;
     background: var(--glass);
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     border: 1px solid rgba(255, 255, 255, 0.04);
     transition: background .12s;
     z-index: 999;
 }

 .hamburger:focus {
     outline: 3px solid rgba(6, 182, 212, 0.16)
 }

 .hamburger-inner {
     width: 22px;
     height: 16px;
     position: relative;
     display: inline-block
 }

 .hamburger-inner span {
     position: absolute;
     left: 0;
     right: 0;
     height: 2px;
     background: var(--text);
     border-radius: 2px;
     transition: transform .28s cubic-bezier(.2, .9, .2, 1), opacity .18s, top .28s;
     z-index: 999;
 }

 .hamburger-inner span:nth-child(1) {
     top: 0
 }

 .hamburger-inner span:nth-child(2) {
     top: 7px
 }

 .hamburger-inner span:nth-child(3) {
     top: 14px
 }

 .hamburger.open .hamburger-inner span:nth-child(1) {
     transform: translateY(7px) rotate(45deg)
 }

 .hamburger.open .hamburger-inner span:nth-child(2) {
     opacity: 0
 }

 .hamburger.open .hamburger-inner span:nth-child(3) {
     transform: translateY(-7px) rotate(-45deg)
 }

 /* OVERLAY */
 .menu-overlay {
     position: fixed;
     inset: 0;
     display: flex;
     align-items: stretch;
     justify-content: flex-end;
     pointer-events: none;
     opacity: 0;
     transition: opacity .28s ease;
     z-index: 60;
     background: transparent;
     z-index: 999;
 }

 .menu-overlay.show {
     pointer-events: auto;
     opacity: 1;
     background: rgba(2, 6, 23, 0.5);
     backdrop-filter: blur(2px);
 }

 /* SIDEBAR */
 .sidebar {
     width: var(--panel-width);
     max-width: 96vw;
     height: 100vh;
     background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
     border-left: 1px solid rgba(255, 255, 255, 0.04);
     box-shadow: var(--shadow);
     transform: translateX(110%);
     transition: transform .32s cubic-bezier(.2, .9, .2, 1);
     backdrop-filter: blur(12px) saturate(120%);
     display: flex;
     flex-direction: column;
     padding: 1.25rem;
     gap: 1rem;
     border-radius: var(--radius) 0 0 var(--radius);
     overflow: auto;
 }

 .menu-overlay.show .sidebar {
     transform: translateX(0);
 }

 .sidebar-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 1rem
 }

 .sidebar .logo {
     width: 48px;
     height: 48px;
     border-radius: 10px;
     box-shadow: 0 12px 36px rgba(3, 7, 18, .6);
     color: #001
 }

 .sidebar-title {
     font-weight: 800;
     font-size: 1.05rem;
     color: var(--text)
 }

 .sidebar-sub {
     font-size: .85rem;
     color: var(--muted)
 }

 /* PROFILE TILE */
 .profile {
     display: flex;
     align-items: center;
     gap: .75rem;
     padding: .5rem;
     border-radius: 10px;
     background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent);
     border: 1px solid rgba(255, 255, 255, 0.02);
 }

 .avatar {
     width: 44px;
     height: 44px;
     border-radius: 10px;
     background: linear-gradient(135deg, var(--accent), var(--accent-2));
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 700;
     color: #001;
 }

 .profile-info {
     display: flex;
     flex-direction: column
 }

 .profile-name {
     font-weight: 700;
     color: var(--text)
 }

 .profile-role {
     font-size: .83rem;
     color: var(--muted)
 }

 /* SEARCH */
 .search {
     display: flex;
     gap: .5rem;
     align-items: center;
     padding: .5rem;
     border-radius: 10px;
     background: rgba(255, 255, 255, 0.02);
     border: 1px solid rgba(255, 255, 255, 0.02);
 }

 .search input {
     background: transparent;
     border: 0;
     color: var(--text);
     outline: none;
     font-size: .95rem;
     width: 100%;
 }

 .search svg {
     opacity: 0.9
 }

 /* MENU GROUPS / ACCORDION */
 .group-title {
     font-size: .78rem;
     font-weight: 700;
     color: var(--muted);
     text-transform: uppercase;
     letter-spacing: .08em;
     margin-top: .5rem
 }

 .menu-list {
     display: flex;
     flex-direction: column;
     gap: .4rem;
     margin: 0;
     padding: 0;
     list-style: none
 }

 .menu-item {
     display: flex;
     align-items: center;
     gap: .75rem;
     padding: .85rem;
     border-radius: 10px;
     background: transparent;
     border: 1px solid rgba(255, 255, 255, 0.02);
     cursor: pointer;
     color: var(--text);
     font-weight: 600;
     transition: transform .12s, background .12s, box-shadow .12s;
 }

 .menu-item svg {
     width: 18px;
     height: 18px;
     flex-shrink: 0;
     opacity: 0.95
 }

 .menu-item:hover,
 .menu-item:focus {
     transform: translateX(6px);
     background: linear-gradient(90deg, rgba(255, 255, 255, 0.02), rgba(6, 182, 212, 0.03));
     box-shadow: 0 6px 30px rgba(3, 7, 18, 0.45);
     outline: none;
 }

 .menu-item .label {
     flex: 1;
     text-align: left;
     color: var(--text)
 }

 .menu-item .chev {
     opacity: .9
 }

 /* Accordion content */
 .accordion-panel {
     margin-left: 36px;
     margin-top: 6px;
     display: none;
     flex-direction: column;
     gap: .4rem;
 }

 .accordion-panel.show {
     display: flex
 }

 .accordion-panel .sub-item {
     padding: .6rem .9rem;
     border-radius: 8px;
     background: transparent;
     border: 1px solid rgba(255, 255, 255, 0.02);
     color: var(--text);
     font-weight: 600;
     cursor: pointer;
     text-align: left;
 }

 .accordion-panel .sub-item:hover,
 .accordion-panel .sub-item:focus {
     transform: translateX(4px);
     background: linear-gradient(90deg, rgba(255, 255, 255, 0.015), rgba(6, 182, 212, 0.02));
     box-shadow: 0 8px 30px rgba(3, 7, 18, 0.35);
     outline: none;
 }

 /* CTA */
 .cta {
     display: inline-flex;
     align-items: center;
     gap: .6rem;
     padding: .85rem 1rem;
     border-radius: 10px;
     background: linear-gradient(90deg, var(--accent), var(--accent-2));
     color: #001;
     font-weight: 800;
     border: none;
     cursor: pointer;
     box-shadow: 0 10px 30px rgba(124, 58, 237, 0.18);
 }

 /* divider */
 .divider {
     height: 1px;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.03), transparent);
     margin: 6px 0;
     border-radius: 2px
 }

 .sidebar-footer {
     margin-top: auto;
     font-size: .88rem;
     color: var(--muted);
     text-align: left;
     padding-top: 1rem;
     display: flex;
     flex-direction: column;
     gap: .5rem
 }

 .socials {
     display: flex;
     gap: .5rem;
     align-items: center
 }

 .socials a {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 38px;
     height: 38px;
     border-radius: 8px;
     background: rgba(255, 255, 255, 0.02);
     border: 1px solid rgba(255, 255, 255, 0.02);
     color: var(--text);
     text-decoration: none
 }

 .socials a:hover {
     background: linear-gradient(90deg, rgba(255, 255, 255, 0.02), rgba(6, 182, 212, 0.03));
 }

 .small-btn {
     display: inline-flex;
     align-items: center;
     gap: .5rem;
     padding: .45rem .6rem;
     border-radius: 10px;
     border: 1px solid rgba(255, 255, 255, 0.03);
     background: transparent;
     color: var(--text);
     cursor: pointer;
     font-weight: 700;
 }

 /* responsiveness */
 @media (max-width:420px) {
     :root {
         --panel-width: 92vw
     }

     .sidebar {
         padding: 1rem;
         border-radius: 10px 0 0 10px
     }

     .sidebar .logo {
         width: 40px;
         height: 40px
     }
 }

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

 /* HERO */
 .hero {
     position: relative;
     height: 100vh;
     width: 100%;
     overflow: hidden;
 }

 .hero-media {
     position: absolute;
     inset: 0;
     z-index: 0;
 }

 .hero-media video {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .hero-overlay {
     position: absolute;
     inset: 0;
     background: rgba(0, 0, 0, 0.45);
     z-index: 1;
 }

 .hero-inner {
     position: relative;
     z-index: 2;
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100%;
     text-align: center;
 }

 #clct {
     margin-top: 40px;
 }

 .coll {
     margin-top: 20px;
     text-align: center;
     font-size: 2rem;
     letter-spacing: 0.6rem;
     font-weight: bold;
     text-transform: uppercase;
 }

 

 

 @media (max-width: 540px) {
     .category {
         min-height: 350px;
     }
 }


 .flex-section {
     display: flex;
     gap: 1rem;
     padding: 1rem 3rem;

     /* dark theme background */
     color: #fff;
 }

 .col {
     display: flex;
     flex-direction: column;
     flex: 1;
     gap: 1rem;
 }

 .inner,
 .basic1,
 .basic2 .inbas {

     /* fallback bg */
     border-radius: 8px;
     overflow: hidden;
 }

 .inner img,
 .basic1 img,
 .inbas img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     border-radius: 8px;
 }

 /* Left column */
 .first .inner1 {
     flex: 2;
 }

 .first .inner2 {
     flex: 1;
 }

 /* Right column */
 .second .inner3 {
     flex: 1;
 }

 /* ensure parent .second sets children vertically and shares height */
 .col.second {
     display: flex;
     flex-direction: column;
     gap: 12px;
     flex: 1;
     min-width: 0;
     /* keep flex children from overflowing */
 }

 /* make .inner3 and .basic share the same height by giving equal flex */
 .col.second .inner3 {
     flex: 1 1 0;
     min-height: 220px;
     /* visually sensible minimum */
     position: relative;
     overflow: hidden;
     border-radius: 12px;
     box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
 }

 .col.second .basic {
     display: flex;
     flex-direction: row;
     /* row layout: left (basic1) and right (basic2) */
     gap: 12px;
     flex: 1 1 0;
     /* same flex as .inner3 = equal height */
     min-height: 0;
     /* allow children to shrink properly */
 }

 /* left column (full height) */
 .basic1 {
     flex: 1 1 0;
     /* take 50% by default (flex basis negotiable) */
     min-width: 0;
     /* important to allow image to shrink */
     border-radius: 12px;
     overflow: hidden;
     position: relative;
 }

 /* right column — split vertically */
 .basic2 {
     flex: 1 1 0;
     /* take remaining 50% */
     display: flex;
     flex-direction: column;
     /* stack two .inbas vertically */
     gap: 12px;
     min-width: 0;
 }

 /* each of the two stacked blocks share equal height */
 .basic2 .inbas {
     flex: 1 1 0;
     min-height: 0;
     border-radius: 12px;
     overflow: hidden;
     position: relative;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
 }

 /* make images fill their boxes */
 .basic1 img,
 .basic2 .inbas img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     transition: transform 420ms ease;
 }

 /* hover micro-scale */
 .basic1 img:hover,
 .basic2 .inbas img:hover {
     transform: scale(1.03);
 }

 /* RESPONSIVE: on small screens stack vertically */
 @media (max-width: 980px) {

     .col.second .basic {
         flex-direction: column;
         /* stacked: basic1 on top, basic2 below */
     }

     .basic2 {
         flex-direction: row;
         /* in small widths, place the two inbas side-by-side if space permits */
     }

     @media (max-width: 520px) {
         .basic2 {
             flex-direction: column;
             /* on smallest screens stack everything vertically */
         }
     }
 }

 .product-section {
     display: flex;
     gap: var(--section-gap);
     align-items: stretch;

     margin: 36px auto;
     padding: 0 50px;
     height: 100vh;
     /* left hero fills viewport */
     box-sizing: border-box;
 }

 /* Left image (70%) */
 .product-left {
     flex: var(--left-ratio);
     border-radius: var(--radius-lg);
     overflow: hidden;
     position: relative;

 }

 /* Ensure image fully covers and centers the outfit details */
 .product-left img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center top;
     /* show upper body by default — tweak as needed */
     display: block;
     transition: transform 900ms var(--transition), filter 900ms var(--transition);
     will-change: transform;
 }

 .product-left:hover img {
     transform: scale(1.04);
 }

 /* subtle gradient overlay at bottom for readable overlay text */
 .product-left::after {
     content: "";
     position: absolute;
     inset: auto 0 0 0;
     height: 38%;
     pointer-events: none;

 }

 /* optional overlay panel (title + CTA) */
 .left-overlay {
     position: absolute;
     left: 32px;
     bottom: 28px;
     z-index: 3;
     pointer-events: none;
 }

 .left-overlay .panel {
     pointer-events: auto;

     padding: 14px 18px;
     border-radius: 12px;
     backdrop-filter: blur(6px);
     color: var(--text);

 }

 .left-overlay .eyebrow {
     color: var(--accent);
     font-weight: 800;
     font-size: 12px;
     text-transform: uppercase;
     letter-spacing: 1px;
     margin-bottom: 6px;
 }

 .left-overlay .title {
     margin: 0 0 6px;
     font-size: 18px;
     font-weight: 800;
     line-height: 1;
 }

 .left-overlay .cta {
     display: inline-block;
     padding: 8px 12px;
     border-radius: 999px;
     background: var(--accent);
     color: #000;
     font-weight: 800;
     text-decoration: none;
 }

 /* Right column (30%) */
 .product-right {
     flex: var(--right-ratio);
     display: flex;
     flex-direction: column;
     gap: 18px;
     justify-content: center;
     min-width: 280px;
     height: 100%;
 }

 /* Each product card is compact and elegant */
 .product-card {
     display: flex;
     gap: 16px;
     align-items: stretch;

     border-radius: var(--radius-sm);
     padding: 12px;

     transition: transform 260ms var(--transition), box-shadow 260ms var(--transition);
     overflow: hidden;
     max-height: var(--card-max-vh);
     min-height: 140px;
 }

 /* left thumbnail area inside card (vertical stack feel) */
 .product-card .thumb {
     flex: 0 0 38%;
     min-width: 110px;
     border-radius: 10px;
     overflow: hidden;
     box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
 }

 .product-card .thumb img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     transition: transform 420ms var(--transition);
 }

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

 /* card text / actions */
 .product-card .card-body {
     display: flex;
     flex-direction: column;
     gap: 6px;
     padding-right: 6px;
     min-width: 0;
 }

 .product-card .title {
     margin: 0;
     font-size: 1.03rem;
     font-weight: 800;
     line-height: 1.02;
 }

 .product-card .desc {
     margin: 0;
     color: var(--muted);
     font-size: 0.92rem;
 }

 .card-footer {
     margin-top: auto;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
 }

 /* price style */
 .price {
     font-weight: 900;
     color: var(--accent);
     font-size: 1.03rem;

     padding: 6px 10px;
     border-radius: 10px;
 }

 /* actions */
 .actions {
     display: flex;
     gap: 10px;
     align-items: center;
 }

 .actions a {
     padding: 8px 12px;
     border-radius: 999px;
     font-weight: 800;
     text-decoration: none;
     transition: transform 180ms, box-shadow 180ms;
 }

 .btn-cart {
     border: 1px solid rgba(255, 255, 255, 0.06);
     color: var(--text);
     background: transparent;
 }

 .btn-cart:hover {
     background: rgba(255, 255, 255, 0.02);
     transform: translateY(-2px);
 }

 .btn-buy {
     background: var(--accent);
     color: #000;
 }

 .btn-buy:hover {
     transform: translateY(-3px);
     box-shadow: 0 10px 30px rgba(126, 231, 135, 0.06);
 }

 /* hover lift */
 .product-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 26px 86px rgba(0, 0, 0, 0.6);
 }

 /* focus states for accessibility */
 .product-card a:focus,
 .product-card button:focus {
     outline: 3px solid rgba(126, 231, 135, 0.12);
     outline-offset: 3px;
     border-radius: 8px;
 }

 /* Responsive: adjust to tablet */
 @media (max-width: 1100px) {
     :root {
         --card-max-vh: 22vh;
     }

     /* smaller cards */
     .product-section {
         gap: 20px;
         padding: 0 18px;
     }

     .product-right {
         min-width: 260px;
     }
 }

 /* Mobile: stack vertically, image first, cards full width */
 @media (max-width: 780px) {
     .product-section {
         flex-direction: column;
         height: auto;
         padding: 20px;
         gap: 18px;
     }

     .product-left {
         width: 100%;
         height: 56vh;
         border-radius: 14px;
     }

     .product-left img {
         height: 100%;
         object-position: center;
     }

     .product-right {
         width: 100%;
         flex-direction: column;
         align-items: stretch;
     }

     .product-card {
         max-height: none;
         min-height: 120px;
         padding: 10px;
         flex-direction: row;
         gap: 12px;
     }

     .product-card .thumb {
         flex: 0 0 140px;
         min-width: 120px;
         height: 100%;
     }

     .card-body {
         padding: 6px 0;
     }
 }

 /* small phones */
 @media (max-width: 420px) {
     .product-left {
         height: 48vh;
     }

     .product-card .thumb {
         flex: 0 0 110px;
     }

     .actions a {
         padding: 7px 10px;
         font-size: 13px;
     }

     .title {
         font-size: 0.98rem;
     }

     .desc {
         font-size: 0.84rem;
     }
 }

 /* ---- Continuous slider (4 visible cards) ---- */
 /* Uses your root variables: --section-gap, --card-max-vh, --accent, --muted, --text, etc. */

 /* visible cards count (desktop) */
 .products-tabs {
     padding: 28px 0 18px;
     text-align: center;
 }

 .tabs-wrap {
     display: inline-flex;
     gap: 10px;
     margin-bottom: 18px;
     flex-wrap: wrap;
     justify-content: center;
 }

 /* tab buttons */
 .tab {
     background: rgba(255, 255, 255, 0.03);
     border: 1px solid rgba(255, 255, 255, 0.03);
     color: var(--text);
     padding: 10px 14px;
     border-radius: 999px;
     font-weight: 700;
     cursor: pointer;
     transition: transform 160ms var(--transition), background 200ms;
 }

 .tab[aria-selected="true"],
 .tab.active {

     border-color: rgba(126, 231, 135, 0.12);
     transform: translateY(-3px);
     color: #e9ffee;

 }

 /* viewport */
 .slider-viewport {
     overflow: hidden;
     width: 100%;
     margin: 0 auto;
     padding: 14px;
     border-radius: 14px;

     box-sizing: border-box;
     -webkit-user-select: none;
     user-select: none;
     position: relative;
     border: 1px solid rgba(255, 255, 255, 0.03);
 }

 /* track - make it the scrollable element */
 .slider-track {
     display: flex;
     gap: var(--card-gap);
     align-items: stretch;
     will-change: scroll-left, transform;
     overflow-x: auto;
     /* make track scrollable */
     scroll-behavior: auto;
     -webkit-overflow-scrolling: touch;
     padding-bottom: 8px;
     /* hide native scrollbar visually */
     scrollbar-width: none;
     /* firefox */
 }

 .slider-track::-webkit-scrollbar {
     display: none;
 }

 /* chrome */

 /* product card */
 .product-card-inline {

     border-radius: 12px;
     padding: 12px;
     box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 10px;
     position: relative;
     transition: transform 220ms var(--transition), box-shadow 220ms, opacity 220ms;
     opacity: 0.98;
     flex-shrink: 0;
     /* prevent shrinking */
     border: 1px solid rgba(255, 255, 255, 0.03);
 }

 /* compute width based on CSS calc using variable --visible */
 .product-card-inline {
     width: calc((100% - ((var(--visible-desktop) - 1) * var(--card-gap))) / var(--visible-desktop));
     min-width: calc((100% - ((var(--visible-desktop) - 1) * var(--card-gap))) / var(--visible-desktop));
     max-width: calc((100% - ((var(--visible-desktop) - 1) * var(--card-gap))) / var(--visible-desktop));
 }

 /* bigger image area so card height is taller */
 .p-image {
     width: 100%;
     height: 220px;
     border-radius: 10px;
     overflow: hidden;
     background: linear-gradient(180deg, #0b0b0b, #0a0a0a);
     display: block;
 }

 .p-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     opacity: 0.86;
     transition: transform 420ms var(--transition), opacity 220ms;
     display: block;
 }

 .product-card-inline:hover .p-image img {
     transform: scale(1.06);
     opacity: 1;
 }

 /* title and desc */
 .p-title {
     font-size: 1rem;
     font-weight: 800;
     margin: 0;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
     width: 100%;
     text-align: center;
     color: #fff;
 }

 .p-desc {
     margin: 0;
     font-size: 0.9rem;
     color: var(--muted);
     height: 40px;
     overflow: hidden;
     text-align: center;
 }

 /* bottom row */
 .p-bottom {
     width: 100%;
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 8px;
     margin-top: auto;
 }

 .p-price {
     font-weight: 900;
     color: #041b00;
     padding: 8px 12px;
     border-radius: 10px;
     background: var(--colorGold);
     font-size: 0.95rem;
 }

 .p-buy {
     padding: 8px 12px;
     border-radius: 999px;
     background: rgba(255, 255, 255, 0.06);
     color: var(--text);
     font-weight: 800;
     text-decoration: none;
     border: 1px solid rgba(255, 255, 255, 0.02);
 }

 /* small tag */
 .p-tag {
     position: absolute;
     top: 12px;
     left: 12px;
     background: rgba(0, 0, 0, 0.45);
     color: var(--text);
     padding: 6px 8px;
     border-radius: 999px;
     font-size: 11px;
     font-weight: 800;
     backdrop-filter: blur(4px);
 }

 /* hover */
 .product-card-inline:hover {
     transform: translateY(-8px);
     box-shadow: 0 38px 120px rgba(0, 0, 0, 0.65);
     opacity: 1;
 }

 /* responsiveness */
 @media (max-width:1100px) {
     .product-card-inline {
         width: calc((100% - ((var(--visible-tablet) - 1) * var(--card-gap))) / var(--visible-tablet));
         min-width: calc((100% - ((var(--visible-tablet) - 1) * var(--card-gap))) / var(--visible-tablet));
         max-width: calc((100% - ((var(--visible-tablet) - 1) * var(--card-gap))) / var(--visible-tablet));
     }

     .p-image {
         height: 180px;
     }
 }

 @media (max-width:780px) {
     .product-card-inline {
         width: calc((100% - ((var(--visible-mobile) - 1) * var(--card-gap))) / var(--visible-mobile));
         min-width: calc((100% - ((var(--visible-mobile) - 1) * var(--card-gap))) / var(--visible-mobile));
         max-width: calc((100% - ((var(--visible-mobile) - 1) * var(--card-gap))) / var(--visible-mobile));
     }

     .p-image {
         height: 140px;
     }

     .tabs-wrap {
         gap: 8px;
         margin-bottom: 12px;
     }
 }

 @media (max-width:420px) {
     .p-image {
         height: 120px;
     }

     .p-title {
         font-size: 0.95rem;
     }
 }

 /* subtle helper overlay when dragging to show user feedback */
 .slider-viewport.dragging {
     cursor: grabbing;
 }

 
 .best-seller-section {
     width: 100%;

     padding: 2rem 1rem;
     color: #fff;
     text-align: center;
 }

 .best-seller-title {
     font-size: 2rem;
     margin-bottom: 2rem;
     text-transform: uppercase;
     letter-spacing: 0.6rem;
 }

 .best-seller-grid {
     display: flex;
     flex-wrap: wrap;
     gap: 1rem;
     justify-content: center;

 }

 .best-seller-card {
     background: #1c1c1c;
     border-radius: 8px;
     padding: 1rem;
     width: 20%;
     text-align: center;
     position: relative;
     transition: transform 0.3s ease;
 }

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

 .best-seller-card img {
     width: 100%;
     height: 250px;
     object-fit: cover;
     border-radius: 6px;
     margin-bottom: 1rem;
 }

 .best-seller-name {
     font-size: 1rem;
     margin: 0.5rem 0;
     min-height: 40px;
 }

 .best-seller-price {
     font-size: 1rem;
     margin: 0.5rem 0;
 }

 .old-price {
     text-decoration: line-through;
     color: #888;
     margin-right: 0.5rem;
 }

 .best-seller-badge {
     position: absolute;
     top: 10px;
     left: 10px;
     background: crimson;
     color: white;
     font-size: 0.8rem;
     padding: 0.2rem 0.5rem;
     border-radius: 4px;
 }

 .best-seller-rating {
     margin: 0.5rem 0;
     color: var(--colorGold);
     font-size: 0.9rem;
 }

 .best-seller-colors {
     display: flex;
     justify-content: center;
     gap: 0.5rem;
     margin-top: 0.5rem;
 }

 .color-option {
     width: 18px;
     height: 18px;
     border-radius: 50%;
     border: 2px solid #fff;
     cursor: pointer;
 }

 .color-option.red {
     background: #c00;
 }

 .color-option.gray {
     background: #666;
 }

 .color-option.black {
     background: #000;
 }

 .color-option.brown {
     background: #5a3c2a;
 }

 /* Responsive */
 @media (max-width: 1024px) {
     .best-seller-card {
         width: 200px;
     }
 }

 @media (max-width: 768px) {
     .best-seller-card {
         width: 45%;
     }
 }

 @media (max-width: 480px) {
     .best-seller-card {
         width: 100%;
     }
 }

 .bg-video-section {
     position: relative;
     width: 100%;
     height: 60vh;
     /* requested height */
     min-height: 360px;
     /* optional sensible min */
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
     background: #111;
     margin-top: 20px;
     margin-bottom: 20px;
     /* fallback color while video loads */
 }

 /* VIDEO: fill the container, keep aspect ratio, and crop with cover */
 .bg-video {
     position: absolute;
     inset: 0;
     /* top/right/bottom/left = 0 */
     width: 100%;
     height: 100%;
     object-fit: cover;
     /* ensures cover crop behaviour */
     object-position: center;
     /* center focal point */
     will-change: transform;
     transform-origin: center;
     z-index: 0;
     /* slight zoom animation (optional & reduced-motion safe) */
     animation: vid-pan 18s ease-in-out infinite alternate;
 }

 @keyframes vid-pan {
     from {
         transform: scale(1);
     }

     to {
         transform: scale(1.03);
     }
 }

 /* Overlay sits above the video */
 .video-overlay {
     position: relative;
     z-index: 2;
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 2rem;
     box-sizing: border-box;
     background: var(--overlay-gradient);
     pointer-events: none;
     /* overlay doesn't block clicks by default */
 }

 .overlay-inner {
     pointer-events: auto;
     /* allow clicking inside the content area */
     text-align: center;
     color: #fff;
     max-width: 920px;
 }

 .overlay-title {
     margin: 0 0 .5rem;
     font-size: clamp(1.4rem, 3.5vw, 2.6rem);
     letter-spacing: 0.02em;
     font-weight: 700;
     text-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
     transform: translateY(8px);
     opacity: 0;
     transition: transform .7s var(--transition-ease), opacity .7s var(--transition-ease);
 }

 .overlay-sub {
     margin: 0 0 1rem;
     font-size: clamp(.9rem, 1.8vw, 1.05rem);
     color: rgba(255, 255, 255, 0.92);
     transform: translateY(8px);
     opacity: 0;
     transition: transform .75s var(--transition-ease) .05s, opacity .75s var(--transition-ease) .05s;
 }

 .overlay-cta {
     display: inline-block;
     padding: .65rem 1.15rem;
     background: rgba(255, 255, 255, 0.95);
     color: #111;
     text-decoration: none;
     border-radius: 6px;
     font-weight: 600;
     transform: translateY(8px);
     opacity: 0;
     transition: transform .75s var(--transition-ease) .1s, opacity .75s var(--transition-ease) .1s, box-shadow .2s;
 }

 .overlay-cta:hover {
     box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
 }

 /* animate overlay entrance when JS toggles .entered */
 .bg-video-section.entered .overlay-title,
 .bg-video-section.entered .overlay-sub,
 .bg-video-section.entered .overlay-cta {
     transform: none;
     opacity: 1;
 }

 /* Accessibility: Respect prefers-reduced-motion */
 @media (prefers-reduced-motion: reduce) {
     .bg-video {
         animation: none;
         transform: none;
     }

     .overlay-title,
     .overlay-sub,
     .overlay-cta {
         transition: none;
         opacity: 1;
         transform: none;
     }
 }

 /* Mobile: lower min-height and ensure poster looks good */
 @media (max-width: 640px) {
     .bg-video-section {
         height: 52vh;
         min-height: 300px;
     }

     .video-overlay {
         padding: 1.2rem;
         background: linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.55));
     }

     .overlay-cta {
         padding: .55rem .9rem;
     }
 }


 .newsletter-dark {

     color: #fff;
     padding: 56px 20px;
     font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
 }

 .nl-container {
     max-width: 1100px;
     margin: 0 auto;
 }

 /* Top area */
 .nl-top {
     text-align: center;
     max-width: 920px;
     margin: 0 auto 36px;
 }

 .nl-heading {
     font-size: clamp(1.6rem, 3.6vw, 2.2rem);
     margin: 0 0 8px;
     font-weight: 700;
     letter-spacing: 0.01em;
 }

 .nl-sub {
     color: rgba(255, 255, 255, 0.9);
     max-width: 720px;
     margin: 0 auto 18px;
     font-size: 0.95rem;
     line-height: 1.45;
     opacity: 0.95;
 }

 /* social icons */
 .nl-social {
     display: flex;
     gap: 14px;
     justify-content: center;
     margin-bottom: 20px;
 }

 .nl-social .s {
     display: inline-flex;
     width: 34px;
     height: 34px;
     align-items: center;
     justify-content: center;
     background: rgba(255, 255, 255, 0.08);
     border-radius: 50%;
     color: #D2824B;
     text-decoration: none;
     transition: transform .15s ease;
 }

 .nl-social .s:hover {
     transform: translateY(-4px);
     background: rgba(255, 255, 255, 0.12);
 }

 /* form */
 .nl-form-dark {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 12px;
 }

 .nl-inputs {
     display: flex;
     gap: 20px;
     width: 100%;
     justify-content: center;
     max-width: 760px;
 }

 .nl-inputs input {
     width: 320px;
     background: transparent;
     border: 0;
     border-bottom: 2px solid rgba(255, 255, 255, 0.55);
     padding: 10px 8px;
     color: #fff;
     font-size: 14px;
     outline: none;
     transition: border-color .18s ease, transform .12s ease;
 }

 .nl-inputs input::placeholder {
     color: rgba(255, 255, 255, 0.55);
 }

 .nl-inputs input:focus {
     border-bottom-color: #ff9a1c;
     transform: translateY(-2px);
 }

 /* ensure small screens stack inputs */
 @media (max-width: 780px) {
     .nl-inputs {
         flex-direction: column;
         gap: 12px;
         align-items: center;
     }

     .nl-inputs input {
         width: 86%;
         max-width: 520px;
     }
 }

 .nl-submit {
     margin-top: 6px;
     background: #D2824B;
     color: #08101a;
     border: none;
     padding: 12px 26px;
     border-radius: 28px;
     font-weight: 700;
     letter-spacing: .06em;
     width: 360px;
     max-width: 86%;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
     cursor: pointer;
     transition: transform .14s ease, box-shadow .14s;
 }

 .nl-submit:hover {
     transform: translateY(-4px);
     box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
 }

 .nl-feedback {
     margin-top: 8px;
     font-weight: 600;
     color: #dff6e7;
     min-height: 1.1em;
 }

 /* cards */
 .nl-cards {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 18px;
     margin-top: 46px;
 }

 .card {
     background: rgba(255, 255, 255, 0.02);
     border: 2px solid rgba(255, 154, 28, 0.14);
     padding: 22px;
     border-radius: 10px;
     text-align: center;
     color: #fff;
     min-height: 150px;
     display: flex;
     flex-direction: column;
     gap: 12px;
     justify-content: center;
 }

 .card-icon {
     width: 62px;
     height: 62px;
     border-radius: 50%;
     background: #D2824B;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     color: #0b0b0d;
     font-size: 20px;
     margin: 0 auto;
     box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
 }

 .card h4 {
     margin: 0;
     font-size: 1.02rem;
     letter-spacing: .02em;
 }

 .card .muted {
     color: rgba(255, 255, 255, 0.82);
     font-size: 0.92rem;
     margin: 0;
 }

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

 /* responsive for cards */
 @media (max-width: 920px) {
     .nl-cards {
         grid-template-columns: 1fr;
     }

     .card {
         min-height: auto;
         padding: 18px;
     }

     .nl-submit {
         width: 320px;
     }
 }

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