/* === Custom Nav Item & Hamburger Overrides === */
/* =======================================================
    Odesk Digital - Global Dark Theme Stylesheet
    Path: /assets/css/style.css
    ======================================================= */

/* ==========================
    1. BASE VARIABLES
    ========================== */
:root {
   /* ---- Color Palette ---- */
   --bg-page: #1f1f22;
   --bg-header: #1a1a1d;
   --bg-card: #2a2d33;
   --bg-card-hover: #343840;
   --text-light: #ffffff;
   --text-dim: #8a8f9e;
   --border: #3a3f4a;
   --accent-red: #ff3434;
   --accent-blue: #0d6efd;
   --accent-green: #00c853;

   /* ---- Layout & Shape ---- */
   --radius-sm: 0.4rem;
   --radius-md: 0.6rem;
   --radius-lg: 0.8rem;
   --radius-xl: 1rem;
   --max-width: 1200px;
}

/* ==========================
    2. GLOBAL RESET & BASE
    ========================== */
html, body {
   background: var(--bg-page);
   color: var(--text-light);
   font-family: system-ui, -apple-system, "Inter", "Segoe UI", Roboto, sans-serif;
   margin: 0;
   padding: 0;
   scroll-behavior: smooth;
}

a {
   color: var(--accent-blue);
   text-decoration: none;
}
a:hover {
   text-decoration: underline;
}

button, input, textarea, select {
   font-family: inherit;
   color: inherit;
}

/* Remove outlines & default focus glow */
button:focus,
button:active,
a:focus {
   outline: none;
   box-shadow: none !important;
}

/* ==========================
    3. GENERIC HELPERS
    ========================== */
.container-custom {
   width: 100%;
   max-width: var(--max-width);
   margin: 0 auto;
   padding: 0 0.75rem;
}

/* Responsive search page title */
.search-title {
   font-weight: 800;
   /* Scales smoothly from mobile to desktop */
   font-size: clamp(1rem, 3.8vw, 1.75rem);
   line-height: 1.2;
}
@media (max-width: 767.98px) {
   .search-title {
      font-size: 0.95rem;
      margin-top: .5rem;
      margin-bottom: .5rem;
   }
}

.card-dark {
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   color: var(--text-light);
}

.text-dim { color: var(--text-dim) !important; }
hr, .border-line { border-color: var(--border) !important; }

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

/* Logo container to ensure visibility */
.logo-dark-bg img {
   filter: brightness(1.1);
   width: 60px;
   height: auto;
}

/* Scrollbar styling for dark theme */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #111; }
::-webkit-scrollbar-thumb {
   background: #333;
   border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: #444; }

/* Buttons */
.btn-outline-blue {
   border: 1px solid var(--accent-blue);
   color: #fff;
   background: transparent;
   border-radius: 2rem;
   font-weight: 500;
   padding: 0.6rem 1.2rem;
}
.btn-outline-blue:hover {
   background: var(--accent-blue);
   color: #fff;
}

.btn-accent-blue {
   background: var(--accent-blue);
   color: #fff;
   border: 1px solid var(--accent-blue);
   border-radius: 2rem;
   font-weight: 600;
   padding: 0.7rem 1.3rem;
}
.btn-accent-blue:hover { opacity: 0.9; }

/* ==========================
    4. NAVBAR & HEADER
    ========================== */

.header-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #0a0a0a;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 4px 30px rgba(0,0,0,0.5);
}

.navbar {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
}

/* Ensure consistent navbar height on desktop regardless of search visibility */
@media (min-width: 768px) {
   .header-fixed .navbar {
         min-height: 64px; /* keep header the same size across pages */
         display: flex;
         align-items: center;
   }
}

.search-box .input-group {
   max-width: 400px;
   border-radius: 2rem;
   font-size: 1.1rem;
   padding: 0.3rem 0.7rem;
}

body {
    padding-top: 80px;
}

@media (max-width: 767.98px) {
   body { padding-top: 80px; }
   /* When mobile search is visible (no .no-mobile-search), reserve extra space */
   body:not(.no-mobile-search) { padding-top: 140px; }
}

/* Admin layout does not use the fixed site header; remove reserved space */
body.admin-body { padding-top: 0 !important; }
@media (max-width: 767.98px) { body.admin-body { padding-top: 0 !important; } }

/* Hide search UI globally when body has .hide-search */
body.hide-search .search-box,
body.hide-search .search-mobile-wrap { display: none !important; }

.offcanvas-body .list-group-item {
    padding: 0.75rem 1rem;
    transition: all 0.2s ease;
}

.offcanvas-body .list-group-item:hover {
    background: rgba(255,255,255,0.1) !important;
    padding-left: 1.25rem;
}


/* Desktop container */
.nav-inner {
   width: 100%;
   max-width: var(--max-width);
   margin: 0 auto;
   padding: .75rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: .5rem;
}

/* Mobile container (stacked) */
.nav-inner-mobile {
   display: none;
   flex-direction: column;
   gap: .5rem;
   padding: .75rem;
   width: 100%;
   max-width: var(--max-width);
   margin: 0 auto;
}

@media (max-width: 767.98px) {
   .nav-inner { display: none; }
   .nav-inner-mobile { display: flex; }
}

/* ---- Brand ---- */
.brand {
   background: #111;
   border-radius: var(--radius-sm);
   line-height: 1rem;
   padding: .35rem .6rem;
   font-weight: 700;
   letter-spacing: .02em;
   font-family: Impact, system-ui;
   color: #fff;
   text-transform: uppercase;
}

/* ---- Hamburger & icon buttons ---- */
.ham,
.icon-pill,
.btn-outline {
   height: 48px;
   border-radius: 2rem;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.25rem;
}

.ham {
   width: 48px;
   background: #2a2d33;
   border: 1px solid var(--border);
   color: #fff;
   border-radius: 2rem;
}

.icon-pill {
   width: 48px;
   background: #2a2d33;
   border: 1px solid var(--border);
   position: relative;
   color: #fff;
   cursor: pointer;
   border-radius: 2rem;
}

.icon-pill:hover,
.ham:hover { background: #343840; }

.badge-dot {
   position: absolute;
   top: -4px;
   right: -4px;
   background: var(--accent-red);
   color: #fff;
   border-radius: 50%;
   font-size: .6rem;
   font-weight: 700;
   padding: .15rem .3rem;
}

/* ---- Search ---- */
.search-shell {
   flex: 1;
   max-width: 420px;
   background: #2a2d33;
   border: 1px solid var(--border);
   padding: 0 .75rem;
   gap: .5rem;
   height: 40px;
   display: flex;
   align-items: center;
}
.search-shell input {
   background: transparent;
   border: 0;
   outline: 0;
   color: #fff;
   width: 100%;
   font-size: .9rem;
}
.search-shell input::placeholder { color: var(--text-dim); }

/* Autocomplete dropdown */
.search-suggest {
   position: absolute;
   top: 100%;
   left: 0;
   right: 0;
   background: #1a1a1d;
   border: 1px solid var(--border);
   border-top: 0;
   border-radius: 0 0 .5rem .5rem;
   box-shadow: 0 12px 30px rgba(0,0,0,.5);
   z-index: 1055;
   max-height: 320px;
   overflow-y: auto;
}
.search-suggest.empty { display: none !important; }
.search-suggest .s-item {
   display: flex;
   align-items: center;
   gap: .5rem;
   padding: .5rem .6rem;
   color: #fff;
   cursor: pointer;
   text-decoration: none;
}
.search-suggest .s-item:hover { background: #23262c; }
.search-suggest .s-thumb {
   width: 28px; height: 28px; border-radius: .35rem; overflow: hidden; flex: 0 0 28px;
}
.search-suggest .s-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.search-suggest .s-name { font-size: .875rem; font-weight: 600; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-suggest .s-price { font-size: .8rem; color: #b6c2d1; }

/* ---- Outline blue button ---- */
.btn-outline {
   border: 1px solid #2d5fff;
   background: transparent;
   color: #fff;
   padding: 0 .75rem;
   font-size: .85rem;
   font-weight: 500;
   transition: var(--transition-fast);
}
.btn-outline:hover {
   background: #2d5fff;
   border-color: #2d5fff;
}

/* ---- Mobile top row ---- */
.m-top {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
}
.m-left {
   display: flex;
   align-items: center;
   gap: .5rem;
}
.m-icons {
   display: flex;
   align-items: center;
   gap: .5rem;
}

/* ---- Mobile circular icons ---- */
.m-ham,
.m-ico {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #2a2d33;
   color: #fff;
   border: 1px solid rgba(255, 255, 255, .35);
}
.m-ham:hover,
.m-ico:hover { background: #343840; }

/* ---- Mobile search ---- */
.m-search {
   width: 100%;
   height: 40px;
   border-radius: .5rem;
   background: #2a2d33;
   border: 1px solid #3a3f4a;
   display: flex;
   align-items: center;
   gap: .5rem;
   padding: 0 .75rem;
}
.m-search input {
   background: transparent;
   border: 0;
   outline: 0;
   color: #fff;
   width: 100%;
}

/* Hide product search on phones */
@media (max-width: 576px) {
   .m-search,
   .search-shell,
   .search-box { display: none !important; }
}
/* Also hide any desktop-style search bar on mobile breakpoint used by header */
@media (max-width: 767.98px) {
   .search-shell,
   .search-box { display: none !important; }
}

/* Hide any remaining search icon/button in the header on mobile */
@media (max-width: 767.98px) {
   /* Bootstrap Icons magnifier */
   .header-fixed .bi.bi-search,
   .navbar .bi.bi-search,
   .nav-inner .bi.bi-search,
   .nav-inner-mobile .bi.bi-search,
   .search-box .bi.bi-search,
   .m-search .bi.bi-search { display: none !important; }

   /* Typical button wrappers next to the search input */
   .search-box .btn,
   .search-box .input-group-text,
   .m-search .btn { display: none !important; }

   /* EXCEPTION: Show the icon inside the mobile search below the nav */
   .search-mobile-wrap .bi.bi-search { display: inline-block !important; }
}

/* Previously hid the mobile-only search container; allow the dedicated one */
@media (max-width: 767.98px) {
   .header-fixed .bg-black.p-2.d-md-none:not(.search-mobile-wrap),
   .nav-inner-mobile .bg-black.p-2.d-md-none:not(.search-mobile-wrap) { display: none !important; }
}

/* Make the category offcanvas half-width on phones */
@media (max-width: 767.98px) {
   .offcanvas.offcanvas-start { 
      --bs-offcanvas-width: 50vw !important; /* half of the viewport width */
   }
}

/* Ensure category icon and name sit on one line in hamburger menu */
/* Also remove default Bootstrap list-group borders so no bottom lines show */
.offcanvas .list-group-item {
   display: flex;
   align-items: center;
   gap: .5rem;
   border: 0 !important;
   border-top: 0 !important;
   border-bottom: 0 !important;
}
/* Handle list-group-flush and adjacent-item border rules */
.offcanvas .list-group-flush .list-group-item,
.offcanvas .list-group-item + .list-group-item {
   border: 0 !important;
   border-top: 0 !important;
   border-bottom: 0 !important;
}
.offcanvas .list-group-item img { display: inline-block !important; width: 18px; height: 18px; object-fit: contain; }
.offcanvas .offcanvas-body ul li a { display: flex !important; align-items: center; gap: .5rem; }
.offcanvas .offcanvas-body ul li img { display: inline-block !important; width: 18px; height: 18px; object-fit: contain; }

/* ==========================
    5. HOME PAGE LAYOUT
    ========================== */

/* ===== HERO SLIDER RESPONSIVE HEIGHT ===== */

/* Default desktop size */
#heroCarousel img {
   height: 300px;
   width: 100%;
   object-fit: cover;
   object-position: center;
   border-radius: 12px;
}

/* Tablet screens (under 992px) */
@media (max-width: 992px) {
   #heroCarousel img {
      height: 250px;
   }
}

/* Mobile screens (under 768px) */
@media (max-width: 768px) {
   #heroCarousel img {
      height: 200px;
   }
}

/* Very small phones (under 480px) */
@media (max-width: 480px) {
   #heroCarousel img {
      height: 160px;
   }
}


/* Hero slider — match navbar width via container-custom */
.container-custom {
   width: 100%;
   max-width: var(--max-width);
   margin: 0 auto;
   padding: 0 0.75rem;
}

/* Fixed hero image height + clean crop */
#heroCarousel img {
   height: 300px;
   width: 100%;
   object-fit: cover;
   object-position: center;
   border-radius: 12px;
}

/* Make the whole carousel have rounded edges */
#heroCarousel {
   border-radius: 12px;
   overflow: hidden;
}


.hero-wrapper {
   max-width: var(--max-width);
   margin: 0 auto;
}
.hero-card-inner {
   background: #b70000;
   border-radius: var(--radius-md);
   min-height: 180px;
   border: 1px solid rgba(0, 0, 0, .5);
   box-shadow: 0 30px 60px rgba(0, 0, 0, .8);
   position: relative;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
}

/* ---- Category Blocks ---- */
.category-block {
   /* Reduce vertical spacing between hero slider and first category row */
   margin-top: 1.25rem;
   max-width: var(--max-width);
   margin-left: auto;
   margin-right: auto;
}
/* Bootstrap utility mt-5 adds 3rem; tighten it for category blocks on home */
.category-block.mt-5 { margin-top: 1.25rem !important; }
.category-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: .75rem;
}
.category-title {
   font-size: 1.125rem; /* slightly larger for better emphasis */
   font-weight: 600;
   display: flex;
   align-items: center;
   gap: .5rem;
   color: #fff;
}
.category-title .badge-new {
   background: var(--accent-red);
   color: #fff;
   font-size: .6rem;
   padding: .25rem .4rem;
   border-radius: .4rem;
   font-weight: 600;
   text-transform: uppercase;
   line-height: 1;
}

/* ---- Product scroll row ---- */
.scroll-controls {
   display: flex;
   align-items: center;
   gap: .5rem;
}
.scroll-btn {
   background: transparent;
   border: 0;
   width: auto;
   height: auto;
   padding: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   cursor: pointer;
   font-size: 1.25rem; /* icon-only, slightly larger */
}
.scroll-btn:hover { opacity: .8; }

.product-row {
   display: flex;
   flex-wrap: nowrap;
   overflow-x: auto;
   scroll-behavior: smooth;
   scrollbar-width: none;
   -ms-overflow-style: none;
}
.product-row::-webkit-scrollbar { display: none; }

/* ---- Product Card ---- */
.product-card {
   background-color: var(--bg-card);
   border: 1px solid #3a3f4a;
   border-radius: var(--radius-lg);
   flex: 0 0 195px; /* unify desktop with phone card width */
   max-width: 195px;
   margin-right: .75rem;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   position: relative;
}
.product-card:hover {
   background-color: var(--bg-card-hover);
   transform: translateY(-2px);
}
.product-img-wrap {
   position: relative;
   width: 100%;
   background: #1a1a1d;
   height: 195px; /* square image like phone view */
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
}
.product-img-wrap img {
   width: 100%;
   height: 100%; /* fill the 195px square */
   object-fit: cover;
}

/* ===== Mobile search rounded pill ===== */
.search-mobile-wrap { padding-top: .25rem; padding-bottom: .25rem; }
.input-group-rounded { border-radius: 9999px; overflow: hidden; background: #1e1e1e; }
.input-group-rounded .form-control { background: transparent !important; border: 0 !important; color: #fff !important; }
.input-group-rounded .form-control::placeholder { color: #a0a6b2; }
.input-group-rounded .btn { background: #2a2d33 !important; border: 0 !important; color: #fff !important; }
.input-group-rounded .btn:hover { background: #3a3f4a !important; }

/* Phone: single-line pill (input + icon inline under top nav) */
@media (max-width: 767.98px) {
   /* Ensure the fixed header + mobile search doesn't overlap content */
   body { padding-top: 120px; }
   /* Pages that hide the mobile search (e.g., category) should not reserve extra space */
   body.no-mobile-search { padding-top: 80px !important; }

   .search-mobile-wrap .input-group {
      display: flex !important;                 /* inline pill */
      align-items: center;
      width: 100%;
      gap: 0;                                   /* seamless pill */
   }
   .search-mobile-wrap .input-group .form-control {
      flex: 1 1 auto;
      min-width: 0;                              /* prevent overflow */
      border-radius: 0 !important;               /* wrapper provides rounding */
      height: 42px;                              /* pill height */
      padding: 0 .9rem;                          /* horizontal breathing room */
      font-size: 0.95rem;                        /* slightly larger for legibility */
   }
   .search-mobile-wrap .input-group .btn {
      flex: 0 0 auto;
      border-radius: 0 !important;               /* wrapper provides rounding */
      height: 42px;                              /* match input height */
      padding: 0 .9rem;                          /* balanced with input */
      display: inline-flex;
      align-items: center;
      justify-content: center;
   }
   .search-mobile-wrap .input-group .btn i { font-size: 1.1rem; }
   .search-mobile-wrap .input-group-rounded { height: 42px; }

      /* Force full-bleed width for the search container on phones */
      .search-mobile-wrap .container-custom { max-width: 100% !important; width: 100% !important; }
      .search-mobile-wrap .input-group-rounded { width: 100% !important; }
}
.tag-pill {
   position: absolute;
   top: .5rem;
   left: .5rem;
   background: var(--accent-red);
   color: #fff;
   font-size: .6rem;
   font-weight: 600;
   padding: .3rem .4rem;
   border-radius: .4rem;
   text-transform: uppercase;
   box-shadow: 0 8px 20px rgba(0,0,0,.6);
}
.product-body {
   padding: .75rem .75rem 1rem;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
}
.product-name {
   font-size: .8rem;
   font-weight: 600;
   color: #fff;
   line-height: 1.3;
   margin-bottom: .4rem;
   min-height: 2.1em;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   line-clamp: 2; /* Standard property for broader compatibility */
   -webkit-box-orient: vertical;
   overflow: hidden;
}
/* Fallback for browsers that don't support line-clamp (e.g., Firefox) */
@supports not ((-webkit-line-clamp: 2) or (line-clamp: 2)) {
   .product-name {
      /* Use line-height to approximate two lines; keep overflow hidden */
      display: block;
      max-height: calc(1.3em * 2);
      overflow: hidden;
   }
}
.product-price {
   color: #fff;
   font-size: calc(.85rem + 3px); /* +3px larger as requested */
   font-weight: 600; /* semibold */
   display: flex;
   flex-wrap: wrap;
   gap: .25rem;
   justify-content: center; /* center horizontally */
   text-align: center; /* ensure inline text centers */
   width: 100%;
}
.product-price span {
   /* Remove pill/background styling — keep plain text */
   background: transparent;
   border-radius: 0;
   padding: 0;
   border: 0;
   color: inherit;
   font-weight: inherit;
}

/* Hide product names on category grid cards */
.product-grid .product-name { display: none !important; }

/* ==========================
    6. CATEGORY GRID PAGE
    ========================== */

/* ---- Page wrapper ---- */
.page {
   max-width: var(--max-width);
   margin: auto;
   padding: 1rem .75rem 2.5rem;
}

/* ---- Breadcrumb ---- */
.crumbs {
   color: var(--text-dim);
   font-size: .9rem;
   display: flex;
   align-items: center;
   gap: .5rem;
   margin: .25rem 0 1rem;
}
.crumbs a {
   color: var(--text-dim);
   text-decoration: none;
}
.crumbs i {
   font-size: .95rem;
}

/* Center breadcrumb on desktop and align with page width */
@media (min-width: 768px) {
   .crumbs {
      max-width: var(--max-width);
      margin-left: auto;
      margin-right: auto;
      padding-left: .75rem;
      padding-right: .75rem;
      justify-content: flex-start; /* left-align on desktop */
   }
}

/* ---- Product Grid ---- */
.grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1rem;
}
/* Home-style product cards arranged as grid (for category pages) */
.product-grid {
   width: 100%;
   max-width: var(--max-width);
   margin: 0 auto;
   padding: 0 .75rem;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1rem;
}
@media (max-width:1199.98px){ .product-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:767.98px){ .product-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:460px){ .product-grid{grid-template-columns:repeat(2,1fr);} }

/* Make product-card fit grid cells */
.product-grid .product-card { flex: initial !important; max-width: 100% !important; width: 100% !important; margin-right: 0; }
.product-grid .product-img-wrap { height: 195px; aspect-ratio: auto; }
/* Slightly tighter padding for price-only cards in grid */
.product-grid .product-body { padding: .4rem .55rem .4rem; }
@media (max-width:1199.98px){ .grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:767.98px){ .grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:460px){ .grid{grid-template-columns:repeat(2,1fr);} }

/* ---- Product Card (Grid Style) ---- */
.cardp {
   background: #22262c;
   border: 1px solid var(--border);
   border-radius: .8rem;
   overflow: hidden;
   transition: .15s;
}
.cardp:hover {
   transform: translateY(-2px);
   background: var(--bg-card-hover);
}
.cardp .thumb {
   position: relative;
   background: #111;
   aspect-ratio: 1/1;
   display: flex;
   align-items: center;
   justify-content: center;
}
.cardp .thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}
.cardp .tag {
   position: absolute;
   top: .5rem;
   right: .5rem;
   background: var(--accent-red);
   color: #fff;
   font-size: .65rem;
   font-weight: 700;
   border-radius: .4rem;
   padding: .2rem .4rem;
}
.cardp .logo-stamp {
   position: absolute;
   right: .5rem;
   bottom: .5rem;
   opacity: .9;
   font-size: .95rem;
   color: #fff;
}
.cardp .bar {
   background: #2a2d33;
   border-top: 1px solid var(--border);
   color: #c9ced8;
   padding: .5rem .75rem;
   font-size: .72rem;
}
.cardp .bar strong { color: #fff; }
.cardp .title {
   padding: .65rem .75rem .5rem;
   font-weight: 600;
   line-height: 1.2;
   font-size: .95rem;
   min-height: 2.4em;
}
.cardp a {
   text-decoration: none;
   color: inherit;
   display: block;
}

/* ---- Footer for Category ---- */
footer {
   border-top: 1px solid #2f333b;
   background: #1a1a1d;
   margin-top: 3rem;
   padding: 2rem 0;
   color: var(--text-dim);
}
.footer-inner {
   max-width: var(--max-width);
   margin: auto;
   padding: 0 .75rem;
}
.footer-bottom {
   border-top: 1px solid #2f333b;
   margin-top: 1rem;
   padding-top: 1rem;
   font-size: .8rem;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: .75rem;
}
.social a {
   width: 28px;
   height: 28px;
   border: 1px solid var(--border);
   background: #2a2d33;
   border-radius: .5rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   margin-right: .35rem;
   text-decoration: none;
}

/* ==========================
    7. PRODUCT VIEW PAGE
    ========================== */

/* ---- Layout ---- */
.page-wrap {
   max-width: var(--max-width);
   width: 100%;
   margin: auto;
   padding: 2rem 1rem;
}
.product-flex {
   display: flex;
   gap: 2rem;
   align-items: flex-start;
}
.left-pane,
.right-pane {
   /* Desktop: two equal columns (6/6) */
   flex: 1 1 50%;
}
.right-pane {
   background: #151515;
   border-radius: 10px;
   padding: 1.5rem;
}

/* ---- Product Image ---- */
.prod-img-card {
   border: 1px solid var(--border);
   background: #111;
   border-radius: var(--radius-md);
   /* Allow image card to fill column width on desktop */
   max-width: 100%;
   overflow: hidden;
}
.prod-img-card img {
   width: 100%;
   height: auto;
   object-fit: cover;
   display: block;
}
.mini-badge {
   border: 1px solid var(--border);
   background: #1a1a1d;
   border-radius: var(--radius-sm);
   padding: .4rem .6rem;
   display: inline-block;
   margin-top: .5rem;
   font-size: .75rem;
   font-weight: 600;
   color: #fff;
}

/* ---- Product Info Text ---- */
.netflix-card {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.trust-lines {
    margin-top: 1rem;
    background: #151515;
    border-radius: 10px;
    padding: 1.25rem;
}

.trust-item {
    font-size: 14px;
    line-height: 1.5;
    color: #fff;
    margin-bottom: 0.5rem;
}

.green {
    color: #00c853;
    font-weight: 500;
}

.read-more {
    margin-top: 1rem;
}

.read-more a {
    color: #007bff;
    text-decoration: none;
    font-size: 14px;
}

.extra-details {
    display: none;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    color: #999;
    font-size: 13px;
    line-height: 1.5;
}

/* ---- Order Card ---- */
.order-card {
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
   background: #1f1f22;
   box-shadow: 0 20px 60px rgba(0,0,0,.8);
   padding: 1rem;
   color: #fff;
   font-size: .8rem;
   position: relative; /* allow sticky children to layer correctly */
}
.step-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.step-number {
    width: 24px;
    height: 24px;
    background: #007bff;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
}

.step-label {
    color: white;
    font-size: 14px;
    font-weight: 500;
}

/* ---- Plan Options ---- */
.product-title {
    font-size: 24px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.badge-software {
    background: #007bff;
    color: white;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: normal;
}

.product-subtitle {
   color: #999;
   font-size: 14px;
   margin-bottom: 8px; /* tighter before price section */
}
/* ---- Product Description ---- */
.prod-desc { color: #e6e9ef; font-size: .95rem; }
.prod-desc-content { font-weight: 600; white-space: normal; }
.prod-desc-content p { margin: .25rem 0; }
.prod-desc-content ul { margin: .4rem 0 .4rem 1.1rem; }
.prod-desc-content li { margin: .15rem 0; }
.prod-desc-content.clamp { max-height: 140px; overflow: hidden; position: relative; }
.prod-desc-content.clamp:after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 36px; background: linear-gradient(to bottom, rgba(31,31,34,0), #1f1f22 85%); }
.prod-desc-toggle { display: inline-block; margin-top: .25rem; color: #3fa9f5; font-weight: 600; }
.prod-desc-content.expanded { max-height: none; }
.prod-desc-content.expanded:after { display:none; }

.price-display {
   /* Remove extra top space and turn into responsive grid */
   margin: 0 0 12px 0;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
   gap: 12px;
}

/* Stacked plan buttons (screenshot style) */
.plan-wrap { display: flex; flex-direction: column; gap: 12px; }
.plan-wrap .plan-btn {
   width: 100%;
   border: 1px solid #3a3f4a;
   background: #1a1a1d;
   color: #dbe2ee;
   border-radius: 12px;
   padding: 12px 16px;
   font-size: 16px;
   font-weight: 500;
   cursor: pointer;
   text-align: center;
   transition: all .15s ease;
}
.plan-wrap .plan-btn:hover { background: #20242b; }
.plan-wrap .plan-btn.active {
   background: var(--accent-blue);
   border-color: var(--accent-blue);
   color: #fff;
   box-shadow: 0 0 0 1px rgba(13,110,253,.35) inset;
}

.plan-wrap .plan-btn .stock-info {
   display: block;
   font-size: 12px;
   font-weight: 400;
   opacity: 0.7;
   margin-top: 2px;
}

/* Emphasize price text inside plan buttons */
.plan-wrap .plan-btn .plan-price {
   font-weight: 700;
}

.plan-wrap .plan-btn:hover .stock-info {
   opacity: 0.9;
}

/* Step header chip */
.step-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.step-head .step-num {
   width: 28px; height: 28px; border-radius: 50%; background: var(--accent-blue);
   color: #fff; font-weight: 700; font-size: .85rem; display:flex; align-items:center; justify-content:center;
}
.step-head > div:last-child { font-weight: 700; color: #fff; font-size: 1.05rem; }

.price-radio {
   display: flex;
   align-items: center;
   width: 100%; /* make each option fill its grid cell */
}

.price-radio input[type="radio"] {
    display: none;
}

.price-label {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 15px;
    width: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.price-radio input[type="radio"]:checked + .price-label {
    border-color: #007bff;
    background: rgba(0,123,255,0.1);
}

.price-amount {
    color: #007bff;
    font-size: 18px;
    font-weight: 500;
}

.action-buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.btn-add-cart, .btn-order-now {
    flex: 1;
    border: none;
    border-radius: 8px;
    padding: 12px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-add-cart {
    background: #1a1a1a;
    color: white;
    border: 1px solid #333;
}

.btn-add-cart:hover {
    background: #333;
}

.btn-order-now {
    background: #28a745;
    color: white;
}

.btn-order-now:hover {
    background: #218838;
}

.price-quantity {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 15px 0;
    padding: 15px 0;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
}

.total {
    color: white;
    font-size: 14px;
}

.total strong {
    color: #00c853;
}

.quantity-control {
    display: flex;
    align-items: center;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 6px;
    overflow: hidden;
}

.qty-btn {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
}

.quantity-control input {
    width: 40px;
    background: transparent;
    border: none;
    color: white;
    text-align: center;
    font-size: 14px;
}

/* ---- Quantity & Total ---- */
.qty-price-row {
   margin-top: .75rem;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: .75rem;
}
.total-line {
   font-size: .8rem;
   color: #fff;
}
.total-line strong {
   color: var(--accent-green);
   font-weight: 600;
}
.qty-control {
   display: inline-flex;
   align-items: center;
   background: #2a2d33;
   border: 1px solid #3a3f4a;
   border-radius: 10px;
   overflow: hidden;
}
.qty-control button {
   background: transparent;
   border: 0;
   color: #fff;
   width: 36px;
   height: 36px;
   font-size: 1rem;
}
.qty-control input {
   background: #1a1a1d;
   border: 0;
   outline: 0;
   width: 56px;
   height: 36px;
   text-align: center;
   color: #fff;
   font-size: .9rem;
   font-weight: 700;
}

/* ---- Add to Cart / Buy Now ---- */
.cart-buy-row {
   display: flex;
   flex-wrap: nowrap; /* keep buttons on same line */
   align-items: center;
   gap: .5rem;
   margin-top: 1rem;
   position: sticky; /* keep visible even when form scrolls */
   bottom: 0;
   z-index: 5;
   background: linear-gradient(to bottom, rgba(31,31,34,0.6), #1f1f22 65%);
   padding-bottom: .25rem;
   border-top: 1px solid rgba(255,255,255,0.08);
}
.cart-buy-row.always-show { display: flex !important; }
.or-mid {
   color: #fff;
   font-size: .8rem;
   font-weight: 600;
   flex: 0 0 auto; /* don't stretch */
   white-space: nowrap;
}
.btn-outline-darkish,
.btn-primary-buy {
   flex: 1 1 0; /* allow shrink */
   min-width: 0; /* prevent overflow on phones */
   height: 40px;
   border-radius: .6rem;
   border: 1px solid var(--accent-blue);
   background: transparent;
   color: #fff;
   font-size: .9rem;
   font-weight: 600;
   text-align: center;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0 .75rem;
   box-sizing: border-box;
}
.btn-primary-buy {
   background: var(--accent-blue);
   border-color: var(--accent-blue);
   color: #fff;
   font-weight: 700;
   box-shadow: 0 0 15px rgba(13,110,253,.35);
}
.btn-outline-darkish:hover { background: rgba(13,110,253,.08); }

/* Ensure one-line buttons on small screens */
@media (max-width: 576px) {
   .cart-buy-row { flex-wrap: nowrap !important; }
   .btn-outline-darkish,
   .btn-primary-buy {
      height: 36px;
      font-size: .85rem;
      padding: 0 .5rem;
   }
   .or-mid { font-size: .75rem; }
}

/* ---- Checkout Form ---- */
.checkout-form {
   display: block;
   border-top: 1px solid #2f333b;
   margin-top: 1rem;
   padding-top: 1rem;
}
.checkout-form, .checkout-form form { width: 100%; }
/* Force all form grid items to take full width inside checkout form */
.checkout-form .row { gap: 12px; }
.checkout-form .row > [class^="col-"],
.checkout-form .row > [class*=" col-"] {
   flex: 0 0 100% !important;
   max-width: 100% !important;
}
.checkout-form .form-group,
.checkout-form .form-input,
.checkout-form .form-control { width: 100% !important; }
/* Inputs used on product detail page */
.dark-input {
   width: 100%;
   background: #e1e7ef; /* light gray like screenshot */
   border: 1px solid #99a3b3;
   border-radius: 10px;
   color: #0f172a;
   padding: 12px 14px;
   font-size: 14px;
}
.dark-input::placeholder { color: #6b7280; }
.payment-details { font-size: .95rem; line-height: 1.6; }
.checkout-form .cf-error {
   color: #ffb3b3;
   font-size: 12px;
   margin-top: 4px;
}
.dark-input.field-error,
.checkout-form .form-input.field-error,
.checkout-form .form-control.field-error {
   border-color: #ff3434 !important;
   box-shadow: inset 0 0 0 1px #ff3434;
}
.sub-field + .sub-field { margin-top: .75rem; }
.sub-label {
   display: flex;
   align-items: flex-start;
   gap: .5rem;
   flex-wrap: wrap;
   font-size: .8rem;
   color: #fff;
   font-weight: 600;
   line-height: 1.3;
   margin-bottom: .4rem;
}
.sub-num {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   background: var(--accent-blue);
   color: #fff;
   font-size: .85rem;
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
}
/* ---- Coupon (match screenshot) ---- */
.coupon-flex {
   display: flex;
   flex-wrap: nowrap;
   gap: .5rem;
   align-items: center;
}
.coupon-apply {
   background: #2a2d33;
   border: 1px solid var(--border);
   border-radius: .6rem;
   color: #fff;
   font-size: .9rem;
   font-weight: 700;
   line-height: 1;
   min-width: 100px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
}
@media (max-width: 576px) {
   .coupon-flex { flex-wrap: wrap; }
   .coupon-apply { width: 100%; height: 36px; font-size: .85rem; }
}
.form-group {
    margin-bottom: 20px;
}

.form-input {
    width: 100%;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    color: white;
    padding: 12px 15px;
    font-size: 14px;
}

.form-input::placeholder {
    color: #666;
}

/* Copy button used near account number */
.btn-copy {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 30px;
   height: 30px;
   border-radius: 8px;
   border: 1px solid var(--border);
   background: #2a2d33;
   color: #e6e9ef;
}
.btn-copy:hover { background: #343840; }
.btn-copy.copied { background: #1f8f4e; color: #0b1f14; border-color: #1f8f4e; }

.coupon-input {
    display: flex;
    gap: 8px;
}

.apply-btn {
    background: #007bff;
    border: none;
    border-radius: 8px;
    color: white;
    padding: 0 20px;
    font-size: 14px;
    cursor: pointer;
}

/* Phone view: force inputs to full width */
@media (max-width: 576px) {
   /* Stack any grid columns under checkout/payment blocks */
   .checkout-form .row > [class^="col-"],
   .checkout-form .row > [class*=" col-"],
   .payment-details .row > [class^="col-"],
   .payment-details .row > [class*=" col-"],
   .transaction-form .row > [class^="col-"],
   .transaction-form .row > [class*=" col-"] {
      flex: 0 0 100% !important;
      max-width: 100% !important;
   }

   /* Make all controls span 100% */
   .checkout-form input,
   .checkout-form select,
   .checkout-form textarea,
   .checkout-form .form-control,
   .checkout-form .form-input,
   .payment-details input,
   .payment-details select,
   .payment-details textarea,
   .payment-details .form-control,
   .transaction-form input,
   .transaction-form select,
   .transaction-form textarea,
   .transaction-form .form-control,
   .coupon-input input {
      width: 100% !important;
      box-sizing: border-box !important;
      display: block;
   }

   /* Coupon row stacks vertically on phones */
   .coupon-input { flex-direction: column; }
   .coupon-input button { width: 100% !important; }
}

.payment-methods {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
}

.payment-btn {
    flex: 1;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    color: white;
    padding: 12px;
    font-size: 14px;
    cursor: pointer;
}

.payment-btn.active {
    background: #007bff;
    border-color: #007bff;
}

.payment-details {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 15px;
    margin-top: 15px;
}

.details-header {
    color: #007bff;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 12px;
}

.payment-steps {
    color: #999;
    font-size: 13px;
    padding-left: 20px;
    margin-bottom: 15px;
}

.payment-steps li {
    margin-bottom: 8px;
}

.highlight {
    color: #ffc107;
    font-weight: 500;
}

.amount-to-send {
    color: #00c853;
    font-size: 14px;
    margin-bottom: 12px;
}

.account-info {
    color: white;
    font-size: 14px;
    margin-bottom: 15px;
}

.account-number {
    font-weight: 500;
}

.transaction-form {
    margin-bottom: 15px;
}

.place-order-btn {
    width: 100%;
    background: #007bff;
    border: none;
    border-radius: 8px;
    color: white;
    padding: 12px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

/* ---- Payment Options ---- */
.pay-row {
   display: flex;
   flex-wrap: wrap;
   gap: .5rem;
}
.pay-option {
   flex: 1 1 100px;
   background: #1a1a1d;
   border: 1px solid var(--border);
   border-radius: .4rem;
   color: #fff;
   font-size: .75rem;
   font-weight: 600;
   height: 36px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
}
.pay-option.active {
   background: var(--accent-blue);
   border-color: var(--accent-blue);
   box-shadow: 0 0 15px rgba(13,110,253,.5);
}

/* ---- Payment Details ---- */
.payment-details {
   color: #fff;
   font-size: .7rem;
   line-height: 1.4;
   margin-top: .75rem;
}
.payment-details .text-warning { color: #ffc107 !important; font-weight: 600; }
.payment-details .text-success { color: var(--accent-green) !important; font-weight: 600; }

.txn-inputs {
   display: flex;
   flex-direction: column;
   gap: .5rem;
   margin-top: .75rem;
}
.place-order-btn {
   width: 100%;
   background: var(--accent-blue);
   border: 1px solid var(--accent-blue);
   border-radius: .4rem;
   color: #fff;
   font-weight: 600;
   font-size: .75rem;
   line-height: 1.2;
   height: 36px;
   text-align: center;
   box-shadow: 0 0 15px rgba(13,110,253,.5);
   margin-top: .75rem;
}


/* ==========================
    8. CART PAGE
    ========================== */

/* ---- Cart container ---- */
.cart-page {
   max-width: var(--max-width);
   margin: 0 auto;
   padding: 2rem .75rem 3rem;
}

/* ---- Cart heading ---- */
.cart-head {
   font-size: 1.3rem;
   font-weight: 700;
   margin-bottom: 1rem;
   color: #fff;
}

/* ---- Cart table ---- */
.cart-table {
   width: 100%;
   border-collapse: collapse;
   background: var(--bg-card);
   border-radius: var(--radius-md);
   overflow: hidden;
   border: 1px solid var(--border);
}
.cart-table thead {
   background: #1a1a1d;
}
.cart-table th, .cart-table td {
   padding: .9rem .75rem;
   font-size: .85rem;
   color: #fff;
   border-bottom: 1px solid var(--border);
   text-align: left;
}
.cart-table th {
   color: var(--text-dim);
   text-transform: uppercase;
   font-size: .75rem;
   letter-spacing: .05em;
}
.cart-table td img {
   width: 48px;
   height: 48px;
   object-fit: cover;
   border-radius: .4rem;
   border: 1px solid var(--border);
   margin-right: .5rem;
}
.cart-item {
   display: flex;
   align-items: center;
   gap: .5rem;
}

/* ---- Quantity input inside cart ---- */
.cart-qty {
   display: inline-flex;
   align-items: center;
   border: 1px solid var(--border);
   border-radius: .4rem;
   overflow: hidden;
}
.cart-qty button {
   width: 28px;
   height: 28px;
   border: none;
   background: transparent;
   color: #fff;
   font-size: .8rem;
}
.cart-qty input {
   width: 32px;
   text-align: center;
   background: transparent;
   border: none;
   color: #fff;
   font-size: .8rem;
}

/* ---- Remove item link ---- */
.remove-link {
   color: var(--accent-red);
   font-size: .8rem;
   text-decoration: none;
}
.remove-link:hover { text-decoration: underline; }

/* ---- Coupon + Totals ---- */
.cart-bottom {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   gap: 1.5rem;
   margin-top: 2rem;
}
.cart-coupon, .cart-summary {
   flex: 1 1 260px;
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
   padding: 1rem;
}

/* ---- Coupon form ---- */
.cart-coupon h6 {
   font-weight: 600;
   font-size: .9rem;
   margin-bottom: .75rem;
   color: #fff;
}
.coupon-input {
   display: flex;
   gap: .5rem;
}
.coupon-input input {
   flex: 1;
   background: #1a1a1d;
   border: 1px solid var(--border);
   border-radius: .4rem;
   color: #fff;
   font-size: .8rem;
   padding: .5rem .6rem;
}
.coupon-input button {
   background: var(--accent-blue);
   border: 1px solid var(--accent-blue);
   color: #fff;
   border-radius: .4rem;
   font-weight: 600;
   font-size: .8rem;
   padding: .5rem 1rem;
}
.coupon-input button:hover { opacity: .9; }

/* ---- Cart summary ---- */
.cart-summary h6 {
   font-weight: 600;
   font-size: .9rem;
   margin-bottom: .75rem;
   color: #fff;
}
.summary-line {
   display: flex;
   justify-content: space-between;
   margin-bottom: .4rem;
   font-size: .8rem;
   color: var(--text-dim);
}
.summary-line strong {
   color: #fff;
}
.summary-total {
   border-top: 1px solid var(--border);
   margin-top: .75rem;
   padding-top: .75rem;
   display: flex;
   justify-content: space-between;
   font-size: .9rem;
   font-weight: 600;
   color: #fff;
}

/* ---- Checkout button ---- */
.checkout-btn {
   width: 100%;
   margin-top: 1rem;
   background: var(--accent-blue);
   border: 1px solid var(--accent-blue);
   border-radius: .4rem;
   color: #fff;
   font-weight: 600;
   font-size: .85rem;
   height: 38px;
   box-shadow: 0 0 15px rgba(13,110,253,.5);
}

/* ---- Empty cart notice ---- */
.cart-empty {
   text-align: center;
   padding: 3rem 1rem;
   color: var(--text-dim);
}

/* ==========================
    9. AUTH PAGES
    (Login, Register, Forgot Password)
    ========================== */

/* ---- Auth Wrapper ---- */
.auth-page {
   min-height: calc(100vh - 150px);
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 2rem 1rem;
}

/* ---- Auth Form Container ---- */
.form-container {
   width: 100%;
   max-width: 480px;
   background: #1a1a1d;
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
   box-shadow: 0 10px 30px rgba(0, 0, 0, .6);
   padding: 2.5rem 2rem;
   text-align: center;
}
.form-container h3 {
   margin-bottom: 1.5rem;
   font-weight: 700;
   color: #fff;
}

/* ---- Form Controls ---- */
.form-container .form-control {
   background: #0e0e10;
   border: 1px solid var(--border);
   color: #fff;
   border-radius: .4rem;
   padding: .6rem .8rem;
   font-size: .9rem;
}
.form-container .form-control:focus {
   border-color: var(--accent-blue);
   box-shadow: 0 0 0 .25rem rgba(45,95,255,.25);
}
.form-container label {
   font-size: .85rem;
   color: var(--text-dim);
}

/* ---- Buttons ---- */
.form-container .btn-primary {
   background-color: var(--accent-blue);
   border-color: var(--accent-blue);
   color: #fff;
   font-weight: 600;
   width: 100%;
   height: 42px;
   border-radius: .5rem;
}
.form-container .btn-primary:hover {
   background-color: #1a44e8;
}

/* ---- Helper links ---- */
.helper-text {
   font-size: .85rem;
   color: var(--text-dim);
   margin-top: .75rem;
}
.forgot-link {
   text-decoration: none;
   color: var(--accent-blue);
   font-size: .9rem;
}
.forgot-link:hover {
   text-decoration: underline;
}
.auth-alt-link {
   color: var(--text-dim);
   font-size: .85rem;
   margin-top: 1rem;
}
.auth-alt-link a {
   color: var(--accent-blue);
   text-decoration: none;
   font-weight: 600;
}

/* ---- Footer under forms ---- */
footer.auth-footer {
   background-color: #1a1a1d;
   border-top: 1px solid var(--border);
   color: var(--text-dim);
   text-align: center;
   padding: 1.5rem 0;
   margin-top: 5rem;
}
footer.auth-footer .footer-brand {
   font-weight: 600;
   color: #fff;
   margin-bottom: .5rem;
}


/* ==========================
    10. FOOTER (Shared)
    ========================== */

footer {
   border-top: 1px solid #2f333b;
   background: #1a1a1d;
   color: var(--text-dim);
   padding: 2rem 0;
}
.footer-inner {
   max-width: var(--max-width);
   margin: auto;
   padding: 0 .75rem;
}
.footer-top {
   display: flex;
   flex-wrap: wrap;
   gap: 2rem;
   justify-content: space-between;
}
.footer-brand-col {
   flex: 1 1 260px;
   max-width: 480px;
   font-size: .8rem;
   line-height: 1.4;
   color: var(--text-dim);
}
.footer-brand-head {
   font-size: 1rem;
   font-weight: 700;
   color: #fff;
   margin-bottom: .75rem;
}
.footer-brand-head span:nth-child(2) {
   color: var(--accent-green);
}
.footer-col-links {
   min-width: 140px;
}
.footer-col-links h6 {
   font-size: .7rem;
   font-weight: 600;
   text-transform: uppercase;
   margin-bottom: .5rem;
   color: #fff;
}
.footer-col-links a {
   color: #fff;
   text-decoration: none;
   display: block;
   margin-bottom: .4rem;
   font-size: .75rem;
}
.footer-col-links a:hover {
   text-decoration: underline;
}

/* ---- Bottom row ---- */
.footer-bottom {
   border-top: 1px solid #2f333b;
   margin-top: 2rem;
   padding-top: 1rem;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
   gap: .5rem;
   color: var(--text-dim);
   font-size: .75rem;
}
.social-row {
   display: flex;
   gap: .5rem;
   align-items: center;
}
.social-icon {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background: #2a2d33;
   border: 1px solid var(--border);
   color: #fff;
   font-size: .85rem;
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   transition: all 0.2s ease;
}
.social-icon:hover {
   background: #343840;
   transform: translateY(-2px);
}

/* ==========================
    11. RESPONSIVE TWEAKS
    ========================== */

@media (max-width: 992px) {
   .hero-slide-content {
      flex-direction: column;
      text-align: center;
   }
   .product-flex {
      flex-direction: column;
   }
   .left-pane, .right-pane {
      max-width: 100%;
      width: 100%;
      flex: 1 1 100%; /* grid 12 on phones */
   }
}

@media (max-width: 768px) {
   /* Keep horizontal scroll row on tablets/phones */
   .product-row { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; gap: .85rem !important; }
   .product-card { flex: 0 0 195px; max-width: 195px; }
   .cart-bottom { flex-direction: column; }
}

@media (max-width: 480px) {
   /* Same square size on tiny phones */
   .product-card { flex: 0 0 195px; max-width: 195px; }
   .footer-top { flex-direction: column; gap: 1rem; }
   .footer-bottom { 
      flex-direction: column; 
      gap: .75rem; 
      text-align: center; 
   }
   .social-row {
      justify-content: center;
   }
   .social-icon {
      width: 36px;
      height: 36px;
      font-size: .9rem;
   }
}


/* === Refinement: hide product names on listing cards (home + category) === */
.product-row .product-card .product-name { display: none !important; }
.grid .cardp .title { display: none !important; }
/* Keep detailed product page naming unaffected (uses different markup) */


/* === Hover overlay for price on product cards === */
.cardp{position:relative; overflow:hidden; border-radius:10px;}
.cardp .bar{
   position:absolute; left:0; bottom:0; width:100%;
   text-align:center; background:rgba(0,0,0,.65);
   color:#fff; font-weight:500; padding:.5rem 0;
   opacity:0; transition:opacity .25s ease;
}
.cardp:hover .bar{opacity:1;}
.cardp img{width:100%; height:auto; display:block; transition:transform .25s ease;}
.cardp:hover img{transform:scale(1.05);} 

/* keep product-page headings visible (only list cards are affected) */


/* Home product cards: remove scale to keep consistent sizing across devices */
.product-row .product-card { transform: none; }
/* Keep a comfortable gap */
.product-row { gap: 1rem; }
/* Ensure image area is a bit taller for presence */
.product-row .product-card .product-img-wrap img {
   max-height: 210px;
   width: 100%;
   object-fit: cover;
}
/* Make whole card feel clickable */
.product-row .product-card { cursor: pointer; }


/* === Mobile layout tweaks === */
@media (max-width: 576px) {
   /* Keep single-line horizontal scroll on phones by default */
   .product-row { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; gap: .75rem !important; }
   .product-card { flex: 0 0 195px !important; max-width: 195px !important; }
   .product-row .product-card { width: auto !important; transform: none !important; }
   .product-row .product-img-wrap { height: 195px !important; aspect-ratio: auto !important; }
   .product-row .product-img-wrap img { height: 100% !important; width: 100% !important; object-fit: cover !important; }
   /* Price section fixed height (slim) */
   .product-price { min-height: 16px !important; height: 16px !important; align-items: center !important; font-size: 16px !important; line-height: 16px !important; }
   /* Optional: enable vertical grid only when explicitly marked */
   .product-row.phone-vertical { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: .75rem !important; overflow-x: visible !important; }
   .product-row.phone-vertical .product-card { flex: initial !important; max-width: 100% !important; width: 100% !important; }
   /* Hide hero slider on phones */
   #heroCarousel { display: none !important; }
   /* Slider height on phones */
   .carousel,
   .carousel .carousel-inner,
   .carousel .carousel-item { height: 150px !important; }
   .carousel .carousel-item img { height: 150px !important; width: 100% !important; object-fit: cover !important; }
}


/* === Footer mobile layout: My Account + Support side by side === */
@media (max-width: 576px) {
   .footer-inner .footer-top {
      display: flex !important;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: flex-start;
      gap: 1rem;
   }
   .footer-inner .footer-col-links {
      flex: 1 1 48% !important;
      min-width: 140px !important;
   }
   .footer-inner .footer-col-links h6 {
      text-align: center !important;
   }
}

/* === Footer: My Account + Support side-by-side on phones & tablets === */
@media (max-width: 992px) {
   .footer-inner .footer-top {
      display: flex !important;
      flex-wrap: wrap;
      align-items: flex-start;
      gap: 1rem;
   }
   /* Brand column takes full width on small screens */
   .footer-inner .footer-brand-col {
      flex: 1 1 100% !important;
   }
   /* Place the two link columns next to each other */
   .footer-inner .footer-col-links {
      flex: 1 1 calc(50% - 0.5rem) !important;
      min-width: 200px !important;
   }
   .footer-inner .footer-col-links h6 {
      text-align: center !important;
   }
}

/* ======= PRODUCT STRIP: phones & small tablets ======= */
@media (max-width: 768px) {
   .product-row { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; gap: .85rem !important; }
   .product-row .product-card { width: auto !important; margin: 0 !important; transform: none !important; }
   .product-row .product-img-wrap { width: 100% !important; }
   .product-row .product-img-wrap img { width: 100% !important; height: auto !important; object-fit: cover !important; }
}

/* ======= FOOTER GRID: phones & tablets ======= */
@media (max-width: 992px) {
   .footer-inner .footer-top {
      display: flex !important;
      flex-wrap: wrap !important;
      justify-content: center !important;
      align-items: flex-start !important;
      text-align: center !important;
      gap: 1.5rem !important;
   }
   .footer-inner .footer-brand-col {
      flex: 1 1 100% !important;
   }
   .footer-inner .footer-col-links {
      flex: 1 1 45% !important;
      min-width: 160px !important;
   }
   .footer-inner .footer-col-links h6 {
      text-align: center !important;
   }
}

/* === Footer: My Account & Support side-by-side on tiny, phones & tablets === */
@media (max-width: 992px) {
   .footer-inner .footer-top {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      gap: 1.5rem !important;
      text-align: center !important;
   }
   .footer-inner .footer-brand-col { width: 100% !important; }

   .footer-inner .footer-links-row {
      display: flex !important;
      justify-content: center !important;
      align-items: flex-start !important;
      flex-wrap: wrap !important;
      gap: 2rem !important;
      width: 100% !important;
   }
   .footer-inner .footer-links-row .footer-col-links {
      flex: 1 1 45% !important;
      min-width: 150px !important;
      text-align: center !important;
   }
   .footer-inner .footer-col-links h6 { text-align: center !important; }
}

/* Center footer brand logo (image or text) on phones */
@media (max-width: 576px) {
   .footer-brand-col { text-align: center !important; }
   .footer-brand-head { text-align: center !important; display: block !important; }
   .footer-brand-head img { margin: 0 auto !important; display: block !important; }
}

/* Also center on small tablets if brand image used */
@media (max-width: 992px) {
   .footer-brand-head img { margin: 0 auto !important; }
}

/* ======= PRODUCT GRID: tablets (577px–992px) ======= */
@media (min-width: 577px) and (max-width: 992px) {
   .product-row {
      display: grid !important;
      grid-template-columns: repeat(3, 1fr) !important;
      gap: 1.25rem !important;
      overflow: visible !important;
      align-items: stretch !important;
   }
   .product-row .product-card {
      width: 100% !important;
      margin: 0 !important;
      flex: 1 1 auto !important;
      transform: none !important;
   }
   .product-row .product-img-wrap {
      width: 100% !important;
   }
   .product-row .product-img-wrap img {
      width: 100% !important;
      height: 150px !important;
      object-fit: cover !important;
      display: block !important;
   }
}

/* ======= PRODUCT GRID: tablets (577px–992px) — 4 columns ======= */
@media (min-width: 577px) and (max-width: 992px) {
   .product-row {
      display: grid !important;
      grid-template-columns: repeat(4, 1fr) !important;
      gap: 0.75rem !important;
      overflow: visible !important;
      align-items: stretch !important;
   }
   .product-row .product-card {
      width: 100% !important;
      margin: 0 !important;
      flex: 1 1 auto !important;
      transform: none !important;
   }
   .product-row .product-img-wrap {
      width: 100% !important;
   }
   .product-row .product-img-wrap img {
      width: 100% !important;
      height: 150px !important;
      object-fit: cover !important;
      display: block !important;
   }
}


/* === Page top banner (centered) === */
.page-banner {
   margin: 0 auto 1rem auto;
   text-align: center;
}
.page-banner img {
   display: block;
   margin: 0 auto;
   max-width: 100%;
   height: auto;
   border-radius: 8px;
}
@media (max-width: 576px) {
   .page-banner img {
      max-height: 180px;
      width: auto;
   }
}

/* Review/Contact/Refund content refinements */
.page .lead { line-height: 1.5; }
.page .display-6 { font-size: clamp(1.6rem, 3vw, 2.5rem); }
.page .page-banner img { max-width: 900px; width: 100%; }


/* === Footer layout for desktop view (>=993px) === */
@media (min-width: 993px) {
   .footer-inner .footer-top {
      display: flex !important;
      justify-content: space-between !important;
      align-items: flex-start !important;
      text-align: left !important;
      gap: 2rem !important;
   }
   .footer-inner .footer-brand-col {
      flex: 1 1 40% !important;
   }
   .footer-inner .footer-links-row {
      display: flex !important;
      flex: 1 1 50% !important;
      justify-content: flex-end !important;
      align-items: flex-start !important;
      gap: 3rem !important;
   }
   .footer-inner .footer-col-links {
      text-align: left !important;
   }
}

/* ==========================
      12. ADMIN PANEL TWEAKS
      - Mobile hamburger and off-canvas sidebar
      - Responsive tables with horizontal scroll on phones
    ========================== */

/* Utility visibility for admin sidebar */
.only-mobile { display: none; }
.hide-mobile { display: block; }

/* Remove top offset on admin pages (no fixed site header there) */
body.admin-body { padding-top: 0 !important; }
@media (max-width: 767.98px) { body.admin-body { padding-top: 0 !important; } }

/* Make admin content tables scroll horizontally on small screens */
@media (max-width: 768px) {
   .admin-content table {
      display: block !important;
      width: 100% !important;
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch !important;
      white-space: nowrap !important;
      border-spacing: 0;
   }
   .admin-content thead, .admin-content tbody {
      display: table;
      width: 100%;
   }
   .admin-content th, .admin-content td {
      white-space: nowrap !important;
   }
}

/* Off-canvas sidebar for admin on phones */
@media (max-width: 992px) {
   .admin-sidebar {
      position: fixed !important;
      top: 0; left: 0; bottom: 0;
      width: 240px !important;
      max-width: 80%;
      transform: translateX(-100%);
      transition: transform .2s ease-in-out;
      z-index: 1100;
      box-shadow: 8px 0 24px rgba(0,0,0,.5);
   }
   .admin-sidebar.open {
      transform: translateX(0);
   }
   /* Icon-only mode for phone */
   @media (max-width: 576px) {
      .admin-sidebar { width: 64px !important; padding: 0.75rem !important; }
         .admin-sidebar .admin-brand { display: none !important; }
      /* Keep labels hidden on phones (icon-only), but allow Products submenu and caret */
      .admin-sidebar .nav-text { display: none !important; }
      .admin-sidebar nav a,
      .admin-sidebar nav button { justify-content: center !important; gap: 0 !important; padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
      .admin-sidebar .nav-ico { width: 20px; height: 20px; display: inline-flex; }
      .admin-sidebar .only-mobile { display: flex !important; }
      .admin-sidebar .hide-mobile { display: none !important; }
   /* Keep Products toggle button layout with caret at the edge */
   .admin-sidebar .nav-products { justify-content: space-between !important; }
         /* Persistently dock the icon rail on phones */
         .admin-sidebar { transform: none !important; }
         .admin-overlay { display: none !important; }
         .admin-ham { display: none !important; }
         .admin-content { margin-left: 64px !important; transition: margin-left .2s ease; }

      /* Products submenu: keep within the 64px rail on phones */
      .admin-sidebar #menu-products { margin-left: 0 !important; padding-left: 0 !important; border: 0 !important; }
      .admin-sidebar #menu-products a { justify-content: center !important; padding-left: .25rem !important; padding-right: .25rem !important; }

      /* Colorful icons on phone-only */
      .admin-sidebar .nav-dashboard .nav-ico { color: #2d5fff !important; }
      .admin-sidebar .nav-products .nav-ico { color: #00c853 !important; }
      .admin-sidebar .nav-orders .nav-ico { color: #ffc107 !important; }
      .admin-sidebar .nav-subscriptions .nav-ico { color: #9c27b0 !important; }
      .admin-sidebar .nav-categories .nav-ico { color: #20c997 !important; }
      .admin-sidebar .nav-users .nav-ico { color: #17a2b8 !important; }
      .admin-sidebar .nav-sliders .nav-ico { color: #e83e8c !important; }
      .admin-sidebar .nav-profile .nav-ico { color: #0dcaf0 !important; }
      .admin-sidebar .nav-logout .nav-ico { color: var(--accent-red) !important; }
   }

   /* Previously hid Products dropdown on small screens; now allow it so phone can toggle submenu */
   .admin-overlay {
      display: none;
   }
   .admin-overlay.show {
      display: block;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.5);
      z-index: 1000;
   }
   .admin-ham { display: inline-flex !important; }
}

/* Hide hamburger on desktop; keep sidebar static */
@media (min-width: 993px) {
   .admin-ham { display: none !important; }
   .admin-sidebar { position: static !important; transform: none !important; width: 16rem !important; box-shadow: none !important; }
}

/* Final override: hide hamburger on phones where the icon rail is docked */
@media (max-width: 576px) {
   .admin-ham { display: none !important; }
}

/* === Admin sidebar: active menu enhancements === */
.admin-sidebar .nav-item.active { position: relative; }
.admin-sidebar .nav-item.active::before {
   content: "";
   position: absolute;
   left: 0;
   top: 10%;
   width: 3px;
   height: 80%;
   background: var(--accent-blue);
   border-radius: 2px;
}
/* On desktop/tablet, tint the active icon blue; keep phone-specific colors intact */
@media (min-width: 577px) {
   .admin-sidebar .nav-item.active .nav-ico { color: var(--accent-blue) !important; }
}

/* Admin: compact filters on mobile */
@media (max-width: 640px) {
   /* Tighten spacing on the filter bar */
   #productFilterForm {
      padding: 8px !important;
      gap: 6px !important;
      row-gap: 6px !important;
   }

   /* Shrink label segment inside pills */
   #productFilterForm .inline-flex > div:first-child {
      padding: 6px 10px !important;
      font-size: 0.875rem; /* text-sm */
      line-height: 1.25rem;
   }

   /* Shrink selects */
   #productFilterForm select {
      padding: 6px 10px !important;
      font-size: 0.875rem; /* text-sm */
      line-height: 1.25rem;
      max-width: 150px;
   }

   /* Shrink search icon container slightly */
   #productFilterForm .border-r.border-gray-300 {
      padding-top: 6px !important;
      padding-bottom: 6px !important;
      padding-left: 10px !important;
      padding-right: 10px !important;
   }

   /* Shrink search input width */
   #productFilterForm input[name="q"] {
      padding: 6px 10px !important;
      font-size: 0.875rem; /* text-sm */
      line-height: 1.25rem;
      min-width: 110px !important; /* override Tailwind min-w */
      max-width: 180px;
   }

   /* Scale down the search icon */
   #productFilterForm svg {
      width: 14px;
      height: 14px;
   }
}

/* Admin: product table vertical scroll on phones */
@media (max-width: 640px) {
   .admin-table-scroll {
      max-height: 65vh;
      overflow-y: auto;
      border: 1px solid #374151; /* gray-700 */
      border-radius: 8px;
      -webkit-overflow-scrolling: touch;
      background: #0f0f10; /* subtle backdrop under rows */
   }
   .admin-table-scroll table { margin: 0 !important; border-collapse: separate; border-spacing: 0; }
   .admin-table-scroll thead th {
      position: sticky;
      top: 0;
      z-index: 2;
      background: #1a1a1d; /* match admin dark header */
      border-bottom: 1px solid #374151;
   }
   .admin-table-scroll tbody tr:hover { background: #23262c !important; }
}