:root{
  --burgundy:#6a0f20;
  --wine:#7a0f20;
  --gold:#d4af37;
  --pink:#6a0f20;
  --dark:#111;
  --light:#fff;
  --cream:#fbf9f6;
}

/* Smooth native page-to-page transitions. TintLane is a plain multi-page
   site (no SPA router), so every link click used to be a hard flash to
   white before the next page painted. This turns on the browser's native
   cross-document View Transition for same-origin navigations — a quick
   crossfade between the old and new page — with zero JS and zero added
   load time (it's purely a paint-time effect, doesn't delay anything the
   page was already going to do). Chrome/Edge 126+ support it; every other
   browser just ignores this rule and navigates exactly as before, so
   there's no fallback needed. */
@view-transition{
  navigation:auto;
}

/* The browser's default cross-document transition runs ~0.25s — enough
   to feel like an added delay on top of the page's real load time. This
   only overrides its speed/easing (still the same built-in crossfade,
   nothing custom to break), so it reads as snappy rather than sluggish. */
::view-transition-old(root),
::view-transition-new(root){
  animation-duration:0.12s;
  animation-timing-function:ease-out;
}

/* Respect reduced-motion: keep the instant default page swap, just skip
   the animated crossfade. */
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){
    animation:none!important;
  }
}

/* ==========================================================
   FULL-SCREEN SPLASH LOADER
   Shown the instant a page starts loading, hides once real
   content is ready (or on window.load as a fallback for pages
   with no async content to wait for). The markup + the tiny
   inline script that reveals/hides it live as the very first
   thing in <body> on every page — it has to be plain HTML/CSS,
   not JS-mounted like the header/footer, because it needs to
   paint before any deferred module script has even run.
   ========================================================== */

.tl-page-loader{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
  background:radial-gradient(circle at 50% 40%,#ffffff 0%,#fdf7f4 55%,#f8ece8 100%);
  transition:opacity .4s ease, visibility .4s ease;
}

.tl-page-loader.tl-loader-hide{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

/* Just the brand mark, pulsing gently with a soft sheen sweeping
   across it — a quiet, premium loading cue. No feather, no sparkles,
   no orbiting ring, no blurred glow anywhere; every effect here is a
   crisp line or a clean shadow. */
.tl-loader-logo{
  position:relative;
  width:88px;
  height:88px;
  border-radius:50%;
  overflow:hidden;
  box-shadow:0 14px 32px rgba(106,15,32,.18);
  animation:tlLoaderPulse 1.6s ease-in-out infinite;
}

.tl-loader-logo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

@media(max-width:600px){
  .tl-loader-logo{
    width:64px;
    height:64px;
  }
}

/* A thin diagonal band of light that sweeps across the logo on a slow
   loop — the same "sheen" cue premium product UIs use, built from a
   plain gradient with no blur/box-shadow glow involved. */
.tl-loader-logo::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg,
    transparent 40%,
    rgba(255,255,255,.55) 50%,
    transparent 60%);
  background-size:250% 250%;
  background-position:-40% -40%;
  animation:tlLoaderSheen 2.6s ease-in-out infinite;
}

@keyframes tlLoaderPulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.08);}
}

@keyframes tlLoaderSheen{
  0%{background-position:-40% -40%;}
  55%,100%{background-position:140% 140%;}
}

@media (prefers-reduced-motion: reduce){
  .tl-loader-logo,
  .tl-loader-logo::after{
    animation:none;
  }
}

/* ==========================================================
   SKELETON SHIMMER CARDS
   Placeholder cards shown inside listing/creator grids while
   their real content is still being fetched from Firestore, so
   the grid is never a jarring empty gap. Sized to approximate
   ".category-lux-card" (the site's main card shape) by default;
   ".tl-skel-mini" shrinks it to match the smaller ".related-card"
   rails on the listing page.
   ========================================================== */

@keyframes tlShimmer{
  0%{background-position:-400px 0;}
  100%{background-position:400px 0;}
}

.tl-skel-card{
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:28px;
  background:linear-gradient(180deg,#ffffff,#fcf9f8);
  box-shadow:0 12px 28px rgba(0,0,0,.06);
}

.tl-skel-img,
.tl-skel-line,
.tl-skel-avatar{
  background-color:#f1e9e6;
  background-image:linear-gradient(90deg,#f1e9e6 0px,#f8f1ee 40px,#f1e9e6 80px);
  background-size:600px 100%;
  animation:tlShimmer 1.4s ease-in-out infinite;
}

.tl-skel-img{
  height:250px;
}

.tl-skel-body{
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:1;
}

.tl-skel-line{
  border-radius:6px;
}

.tl-skel-label{ width:55%; height:11px; }
.tl-skel-title{ width:90%; height:16px; }
.tl-skel-title2{ width:65%; height:16px; margin-top:-4px; }

.tl-skel-row{
  margin-top:auto;
  padding-top:6px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.tl-skel-price{ width:35%; height:18px; }
.tl-skel-rating{ width:20%; height:14px; }

.tl-skel-card.tl-skel-mini{
  min-width:210px;
  max-width:210px;
  border-radius:22px;
  flex-shrink:0;
}
.tl-skel-card.tl-skel-mini .tl-skel-img{ height:150px; }
.tl-skel-card.tl-skel-mini .tl-skel-body{ padding:14px; gap:8px; }

/* Row-shaped skeleton variant — for list layouts (orders, followed
   creators) rather than card grids: a small round avatar + a couple of
   text bars, laid out horizontally. */
.tl-skel-listrow{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px;
  border-radius:16px;
  background:linear-gradient(180deg,#ffffff,#fcf9f8);
  box-shadow:0 8px 20px rgba(0,0,0,.05);
  margin-bottom:12px;
}

.tl-skel-avatar{
  width:48px;
  height:48px;
  border-radius:50%;
  flex-shrink:0;
}

.tl-skel-listrow-body{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

@media (prefers-reduced-motion: reduce){
  .tl-skel-img,
  .tl-skel-line,
  .tl-skel-avatar{
    animation:none;
  }
}

*{box-sizing:border-box}
/* "overflow-x:hidden" was already on body, but not here on html — and on
   a page where html (not body) ends up as the actual scrolling element,
   body's own overflow-x:hidden clips rendering inside body's box but
   does nothing to stop html itself from panning/scrolling sideways.
   That's exactly what let mobile order cards (and anything else with a
   similar wide-content edge case) drag the whole page into a horizontal
   scroll even though every individual element measured back within the
   screen's width — the overflow was happening one level up from where
   the fix was being applied. Locking it here too closes that gap
   site-wide, for every page, regardless of what causes a future
   overflow. */
html{overflow-anchor:none; overflow-x:hidden;}
body{font-family:'Poppins',sans-serif;background:var(--cream);color:var(--dark);margin:0;display:flex;flex-direction:column;min-height:100vh;overflow-anchor:none;overflow-x:hidden;}

/* Sticky-footer fix: on short pages the footer should sit flush at the
   bottom of the viewport instead of leaving empty body background below it.
   Only the footer itself absorbs the leftover space (via auto margin), so
   the slack always collects right above the footer — never as a stray gap
   in the middle of the page. */
body > footer.site-footer,
body > #site-footer-mount{
  margin-top:auto;
}

/* ===== HEADER (sticky) ===== */
.navbar{
  position:sticky; top:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  gap:28px;
  padding:9px 5%; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,0.06);
}
.brand-logo{

    width:75px;
    height:75px;

    display:block;

    object-fit:cover;
    object-position:center;

    border-radius:50%;

    transition:.35s ease;

    box-shadow:
        0 12px 32px rgba(0,0,0,.14);

}

.brand-logo:hover{

    transform:scale(1.06);

    box-shadow:
        0 18px 42px rgba(0,0,0,.20);

}

/* Cart badge */
.cart-container{position:relative}
.cart-count{
  position:absolute; top:-6px; right:-6px;
  background:var(--burgundy); color:#fff; border-radius:999px;
  font-size:10.5px; padding:1.5px 5px; font-weight:800; min-width:16px; text-align:center;
}

/* Signup dropdown */
.dropdown{position:relative; margin-left:auto}
.signup-btn{
  background:linear-gradient(180deg,#7c1428,var(--burgundy));color:#fff;border:none;padding:8px 16px;border-radius:20px;font-weight:800;cursor:pointer;
  text-shadow:0 1px 1px rgba(0,0,0,.20);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -2px 3px rgba(0,0,0,.15),
    0 10px 20px rgba(106,15,32,.28),
    0 2px 5px rgba(106,15,32,.18);
  transition:transform .2s ease, box-shadow .2s ease;
}
.signup-btn:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -2px 3px rgba(0,0,0,.15),
    0 16px 28px rgba(106,15,32,.34),
    0 4px 8px rgba(106,15,32,.20);
}
.signup-btn:active{
  transform:translateY(0);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.30);
}
/* ------------------------------- */
/* HEADER AUTH */
/* ------------------------------- */

.auth-buttons{

display:flex;

align-items:center;

margin-right:-24px;

flex-shrink:0;

}

.auth-buttons .signup-btn{

width:auto !important;

min-width:140px;

height:34px;

display:flex;

align-items:center;

justify-content:center;

padding:0 18px;

white-space:nowrap;

box-sizing:border-box;

}

/* Signed-in account chip (customer first name / seller shop name) —
   mirrors the .header-account pill used on the seller & service
   dashboard headers, so the identity treatment stays consistent
   across the whole site once someone is logged in. */
.auth-buttons .signup-btn.nav-account-chip{
  background:linear-gradient(180deg,#ffffff,#f7efee);
  color:#4a3a3e;
  border:1px solid rgba(106,15,32,.10);
  padding:3px 16px 3px 5px;
  /* ".auth-buttons .signup-btn" (the base rule, above) also sets
     "min-width:140px" — sized for the plain "Sign Up / Log In ▾" text
     button so it doesn't look cramped. This chip is a different shape
     (avatar + name + caret) that should size to its own content; a
     short name like "Riya" is well under 140px, so that inherited
     minimum was stretching the pill and leaving visible dead space
     next to the caret. Long names already grow past 140px naturally
     (up to the 170px ellipsis cap on .nav-account-name below), so this
     only changes the short-name case. */
  min-width:0;
  /* ".auth-buttons .signup-btn" (the base rule, above) fixes
     "height:34px" for the plain "Sign Up / Log In" text button — with
     box-sizing:border-box, that leaves only ~22px of content height
     once this chip's own padding and border are subtracted, so the
     28px ".nav-account-avatar" circle never fit and was overflowing the
     chip's box. ".header-account" (the dashboard header's identical
     chip, which this is meant to mirror) has no fixed height at all for
     exactly this reason — sizing to "auto" here lets the chip's real
     height follow its content instead. Padding trimmed to 3px
     top/bottom (from 5px) so the chip's natural height (avatar 28px +
     padding 6px + border 2px = 36px) lands right at the same ~35px used
     by the header's wishlist/cart circular buttons next to it, instead
     of sitting a few px taller than them. */
  height:auto;
  justify-content:flex-start;
  gap:10px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 2px rgba(106,15,32,.06),
    0 10px 20px rgba(106,15,32,.16),
    0 2px 5px rgba(106,15,32,.10);
  transition:transform .22s ease, box-shadow .22s ease;
}

.auth-buttons .signup-btn.nav-account-chip:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 2px rgba(106,15,32,.06),
    0 16px 28px rgba(106,15,32,.22),
    0 4px 8px rgba(106,15,32,.12);
}

.auth-buttons .signup-btn.nav-account-chip:active{
  transform:translateY(0);
  box-shadow:
    inset 0 1px 3px rgba(106,15,32,.18),
    0 4px 10px rgba(106,15,32,.14);
}

/* Seller Guide header button — sits to the left of the seller's
   account chip, only shown once a seller is signed in. Matches the
   site's 3D button treatment (inset highlight + outset drop shadow,
   lifts on hover, presses on active). */
.seller-guide-header-btn{
  display:none;
  align-items:center;
  gap:8px;
  margin-right:10px;
  padding:7.5px 17px;
  border-radius:20px;
  background:linear-gradient(180deg,#ffffff,#f7efee);
  color:#4a3a3e;
  font-weight:500;
  font-size:13.5px;
  text-decoration:none;
  border:1px solid rgba(106,15,32,.10);
  white-space:nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 2px rgba(106,15,32,.06),
    0 10px 20px rgba(106,15,32,.16),
    0 2px 5px rgba(106,15,32,.10);
  transition:transform .22s ease, box-shadow .22s ease;
}
.seller-guide-header-btn i{ font-size:12px; color:#6a0f20; }
.seller-guide-header-btn:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 2px rgba(106,15,32,.06),
    0 16px 28px rgba(106,15,32,.22),
    0 4px 8px rgba(106,15,32,.12);
}
.seller-guide-header-btn:active{
  transform:translateY(0);
  box-shadow:
    inset 0 1px 3px rgba(106,15,32,.18),
    0 4px 10px rgba(106,15,32,.14);
}

/* Only ever shown as a header pill on desktop — on mobile the site
   collapses the header to icons only, so Seller Guide moves into the
   account dropdown instead (see .guide-dropdown-link below). */
@media (max-width:768px){
  .seller-guide-header-btn{ display:none !important; }
}

/* The dropdown's own "Seller Guide" link is mobile-only — desktop
   sellers already have the header pill above, so showing it a second
   time in the dropdown would be redundant. */
.guide-dropdown-link{ display:none !important; }
@media (max-width:768px){
  .guide-dropdown-link{ display:block !important; }
}

.nav-account-avatar{
  width:28px;
  height:28px;
  border-radius:50%;
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:'Poppins',sans-serif;
  font-weight:700;
  font-size:12px;
  color:#fff;
  background:linear-gradient(145deg,#7a1428,#5a0c1a 55%,#d4af37);
  text-shadow:0 1px 1px rgba(0,0,0,.30);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.45),
    inset 0 -2px 3px rgba(0,0,0,.28),
    0 0 0 2px #fff,
    0 3px 7px rgba(106,15,32,.35);
}

.nav-account-name{
  font-family:'Poppins',sans-serif;
  font-weight:700;
  font-size:14px;
  color:#4a0413;
  text-shadow:0 1px 0 rgba(255,255,255,.7);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:170px;
}

.nav-account-caret{
  margin-left:2px;
  color:#8a6f6f;
  font-size:11px;
  flex-shrink:0;
}

.dropdown{

position:relative;

}

.dropdown-content{

display:none;

position:absolute;

top:105%;

right:0;

min-width:230px;

background:#fff;

border-radius:16px;

box-shadow:0 18px 45px rgba(0,0,0,.12);

padding:10px 0;

z-index:99999;

overflow:hidden;

}

.dropdown-content.show{

display:block;

animation:fadeDown .25s ease;

}

.dropdown-content a{

display:block;

padding:13px 18px;

text-decoration:none;

color:#5d1326;

font-weight:600;

transition:.25s;

}

.dropdown-content a:hover{

background:#fff4f7;

}

.dropdown-divider{

height:1px;

background:#ececec;

margin:8px 0;

}

.dropdown-group-label{

padding:6px 18px 4px;

font-size:11px;

font-weight:800;

letter-spacing:.4px;

text-transform:uppercase;

color:#b98a97;

}

@keyframes fadeDown{

from{

opacity:0;

transform:translateY(-10px);

}

to{

opacity:1;

transform:translateY(0);

}

}
/* A second, duplicate ".dropdown-content"/".dropdown-content a" block used
   to live here (10px radius, 160px min-width, black "#111" link text). It
   was a leftover from an earlier pass at this same dropdown and, being
   later in the file than the real definition above (same specificity),
   it silently won the cascade — overriding the burgundy "#5d1326" link
   color with black, and shrinking the dropdown from the intended 230px/
   16px-radius/13px-18px-padding down to 160px/10px/10px-14px. Removed;
   the block above (lines ~470-524) is the complete, correct one. The
   ".dropdown:hover" removal note that used to sit here still applies —
   open/close is handled purely by the ".show" class in script.js. */

/* ===== HERO (no dim, bright) ===== */
.hero{
    background:
        url("../../images/hero-feather.webp")
        center center / cover
        no-repeat;

    height:480px;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    color:#fff;
    position:relative;
    overflow:hidden;
}
/* The hero photo ends in a flat, solid-colored strip that met the
   "#featuredCreators" section below it as a hard, ruled-line edge.
   Fading just that bottom sliver into the same near-white that section
   starts with (its own "radial-gradient(circle at top left, #fffaf7, ...)")
   blends the two together instead of a visible seam. Sits below
   ".hero-inner" (z-index:2) so the title/buttons are never faded. */
.hero::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:linear-gradient(to bottom, transparent calc(100% - 90px), #fffaf7 100%);
}
.hero-inner{position:relative; z-index:2; padding:0 16px}
.hero-title{font-size:64px; font-weight:800; text-shadow:3px 3px 10px #000}
.hero-sub{font-size:22px; margin-bottom:20px; text-shadow:2px 2px 8px #000}
.cta-btn{

    width:220px;
    height:54px;
    letter-spacing:.3px;
    backdrop-filter:blur(8px);

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border:none;
    border-radius:999px;

    cursor:pointer;

    font-family:'Poppins',sans-serif;
    font-size:17px;
    font-weight:700;

    color:#ffffff;

    background:linear-gradient(
        135deg,
        #b45b82 0%,
        #cf7da2 55%,
        #e5a6bf 100%
    );

    text-shadow:0 1px 2px rgba(0,0,0,.18);

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.45),
        inset 0 -3px 5px rgba(0,0,0,.15),
        0 12px 26px rgba(180,91,130,.32),
        0 3px 6px rgba(180,91,130,.20);

    transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.cta-btn:hover{

    transform:translateY(-3px);

    background:linear-gradient(
        135deg,
        #a84a73,
        #c86f98,
        #e095b4
    );

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.45),
        inset 0 -3px 5px rgba(0,0,0,.15),
        0 20px 38px rgba(180,91,130,.42),
        0 6px 12px rgba(180,91,130,.24);

}
.cta-btn:active{

    transform:translateY(0);

    box-shadow:
        inset 0 3px 6px rgba(0,0,0,.28),
        0 6px 14px rgba(180,91,130,.30);

}
.hero-buttons{
    display:flex;
    justify-content:center;
    gap:14px;
    margin-top:30px;
}

/* tiny tint gradient behind CTA for extra polish */
.cta-btn::after{
  content:'';
  position:absolute;
  inset:auto 50% -18px;
  width:120px;height:34px;
  transform:translateX(-50%);
  filter:blur(18px);
  opacity:.28;
  background:linear-gradient(90deg, rgba(106,15,32,0.28), rgba(212,175,55,0.28));
  border-radius:50%;
}

/* tint behind social icons */
.social-icons a{
  position:relative;
  padding:6px;
  border-radius:8px;
}
.social-icons a::after{
  content:'';
  position:absolute; inset:0;
  border-radius:8px;
  z-index:-1;
  transition:opacity .25s;
  opacity:0;
  background:linear-gradient(90deg, rgba(106,15,32,0.06), rgba(212,175,55,0.06));
}
.social-icons a:hover::after{ opacity:1 }

/* ===== HORIZONTAL CATEGORIES BAR ===== */
.categories-bar{
  display:flex; gap:10px; overflow:auto; padding:12px 5%; background:#fff; border-bottom:1px solid #eee;
  position:sticky; top:92px; z-index:900;  /* sticks below header */
}
.cat-pill{
  white-space:nowrap; border:none; background:linear-gradient(180deg,#ffffff,#f2f2f2); color:#111; padding:7px 12px; border-radius:999px; cursor:pointer; font-weight:700;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 2px rgba(0,0,0,.05),
    0 6px 14px rgba(0,0,0,.08),
    0 2px 4px rgba(0,0,0,.06);
  transition:transform .2s ease, box-shadow .2s ease;
}
.cat-pill.active, .cat-pill:hover{
  background:linear-gradient(180deg,#fff5f8,#fbeaf0); color:#6a0f20;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 8px 18px rgba(106,15,32,.16),
    0 2px 5px rgba(106,15,32,.10);
}
.cat-pill:hover{ transform:translateY(-2px); }
.cat-pill:active{ transform:translateY(0); box-shadow:inset 0 1px 3px rgba(106,15,32,.18); }

/* ===== PRODUCT/SERVICE SECTIONS ===== */
.grid-section{text-align:center; padding:64px 5%}
.grid-section h2{font-family:'Playfair Display',serif; font-size:48px; color:var(--burgundy); font-weight:800; margin:0 0 8px}

.view-all-link{
  display:inline-block;
  margin:0 0 28px;
  font-weight:700;
  font-size:15px;
  color:var(--burgundy);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, color .2s ease;
}
.view-all-link:hover{
  color:var(--wine);
  border-bottom-color:var(--gold);
}

/* Grid + Card (with bottom-only tint + parallax tilt) */
.grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:28px; max-width:1200px; margin:auto;
  perspective: 1200px; -webkit-perspective:1200px;
}
.card{
  background:#fff; border-radius:14px; overflow:hidden; isolation:isolate; position:relative; cursor:pointer;
  box-shadow:0 12px 30px rgba(0,0,0,.08);
  transition:transform .35s cubic-bezier(.2,.9,.25,1), box-shadow .35s, filter .35s;
  transform-style:preserve-3d; will-change:transform;
  padding-bottom:14px;
}
.card:hover{transform:translateY(-12px) scale(1.02); box-shadow:

0 18px 38px rgba(0,0,0,.12),

0 28px 60px rgba(var(--tint-rgb),.20); filter:saturate(1.04)}
.card img{width:100%; height:220px; object-fit:cover; display:block; transition:transform .35s cubic-bezier(.2,.9,.25,1)}
.card:hover img{transform:translateZ(36px) scale(1.03)}
.card h3{font-size:15px; margin:12px 12px 6px; color:#111; position:relative; z-index:3} /* reduced font-size */
.card .price{color:var(--wine); font-weight:900; margin:0 12px 14px; position:relative; z-index:3} /* stronger weight */

/* card creator small styles */
.creator-card h3{font-size:16px;margin:12px}
.creator-tag{color:#6a0f20;font-weight:600;margin:0 12px 8px}

/* bottom tint overlay (only lower part) */
.card .bottom-tint{
  position:absolute; left:0; right:0; bottom:0; height:18%;
  opacity:0; pointer-events:none; transition:opacity .28s ease, transform .35s cubic-bezier(.2,.9,.25,1);
  border-bottom-left-radius:14px; border-bottom-right-radius:14px;
  box-shadow: inset 0 8px 24px rgba(0,0,0,.10);
}

.card:hover .bottom-tint {
  opacity: 1;
  transform: translateY(0);
  height: 28%; /* only lower half covered */
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  box-shadow: inset 0 8px 24px rgba(0,0,0,.10);
  transition: opacity .3s ease, height .35s cubic-bezier(.2,.9,.25,1);
}
/* === 2. Lower tint area for Products & Services (no white gap) === */
#products .card .bottom-tint,
#services .card .bottom-tint {
  height: 32%; /* lower than before */
background:
linear-gradient(
    to top,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.02) 10%,
    rgba(255,255,255,.08) 18%,
    rgba(255,255,255,.16) 26%,
    rgba(255,255,255,.22) 32%,
    rgba(var(--tint-rgb),.18) 42%,
    rgba(var(--tint-rgb),.38) 62%,
    rgba(var(--tint-rgb),.72) 100%
);
  opacity: 0;
  z-index: 2;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  pointer-events: none;
  transition: opacity .3s ease;
}

#products .card:hover .bottom-tint,
#services .card:hover .bottom-tint {
  opacity: 1;
}

/* Touch / coarse-pointer safety net — same problem, same fix as the
   ".category-lux-card" touch reset further down this file: touch
   devices have no real hover to "leave" after a tap, so tapping a
   Products/Services card left the ":hover"-triggered lift + tint
   panel visibly frozen "on" until the user tapped something else. The
   scroll-driven ".mobile-tint" class (mobile-index.css) is what's
   meant to control the tint on mobile instead — this only stops
   ":hover" itself from getting stuck and fighting it. */
@media (hover:none), (pointer:coarse){

  .card:hover{
    transform:none;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
    filter:none;
  }

  .card:hover img{
    transform:none;
  }

  .card:hover .bottom-tint{
    opacity:0;
    transform:none;
    height:18%;
  }

  #products .card:hover .bottom-tint,
  #services .card:hover .bottom-tint{
    opacity:0;
  }

}

/* skeleton placeholder for loading */
.skeleton { position:relative; overflow:hidden; }
.skeleton::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.6), rgba(255,255,255,0));
  transform:translateX(-120%);
  animation: shimmer 1s linear infinite;
  z-index:4;
}
.skeleton .skeleton-img{
  width:100%; height:220px; background:#f6f6f6;
}
@keyframes shimmer { to{ transform:translateX(120%); } }

/* ===== MODAL ===== */
.modal{display:none; position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:1200; align-items:center; justify-content:center}
.modal-content{background:#fff; padding:20px; border-radius:14px; text-align:center; position:relative; width:92%; max-width:680px}
.modal-content img{width:100%; border-radius:10px}
.close{position:absolute; top:8px; right:12px; border:none; background:transparent; font-size:22px; cursor:pointer}
.modal-actions{margin-top:10px}
.modal-actions .btn{margin:8px; padding:10px 18px; border:none; border-radius:20px; background:var(--burgundy); color:#fff; font-weight:800; cursor:pointer}
.modal-actions .btn:hover{background:var(--gold); color:#111}

/* CTA small button size */
.btn.small{padding:8px 12px;border-radius:12px;background:linear-gradient(135deg,#d4af37,#6a0f20);color:#fff;border:none;cursor:pointer}

#searchBar{
  flex:1;min-width:0;width:auto;padding:9px 14px;border:1px solid #eee;border-radius:24px;
  outline:none;background:#fff;
}

/* ===== RESPONSIVE ===== */
@media (max-width:1024px){
  .brand-logo{height:75px}
  .hero-title{font-size:44px}
}
@media (max-width:600px){
  .brand-logo{height:75px}
  .hero{height:420px}
  .hero-title{font-size:34px}
  .hero-sub{font-size:16px}
}

.site-footer{
    background:#6a0f20;
    color:#fff;
    text-align:center;
    padding:22px 20px;
}

.footer-support{
    margin-bottom:12px;
    background:none;
    border:none;
    padding:0;
}

.footer-label{
    color:#ffffff;
}

.footer-email{
    color:#ffffff;
    text-decoration:none;
    font-weight:700;
}

.footer-email:hover{
    color:#d4af37;
}

.footer-copy{
    margin:0;
    font-size:14px;
}
/* ===== Sliding Categories Panel ===== */
/* ==========================
   TINTLANE MEGA CATEGORY MENU
========================== */

.cat-panel-inner{
  padding:20px 24px;
  align-items:start;
}

.cat-mega{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px 28px;
  align-items:start;
}

.mega-col{
  margin:0;
  padding:0;
  align-self:start;
}

.mega-col li{
  margin:0;
  padding:0;
}

/* MAIN CATEGORY TITLES */

.mega-col strong{
  display:block;
  margin-bottom:8px;
  color:#6a0f20;
  font-size:1.05rem;
  font-weight:700;
  font-family:'Playfair Display',serif;
}

/* SUBCATEGORY LINKS */

.mega-col a{
  display:block;
  padding:4px 0;
  line-height:1.25;
  text-decoration:none;
  color:#4d3d3d;
  font-size:.98rem;
  transition:all .25s ease;
  border-radius:8px;
}

/* HOVER */

.mega-col a:hover{
  color:#6a0f20;
  transform:translateX(4px);
}

/* NON-LINK ITEMS */

.mega-col li:not(:has(strong)):not(:has(a)){
  color:#5b4c4c;
  font-size:.98rem;
  padding:4px 0;
  line-height:1.25;
  cursor:pointer;
  transition:.25s;
}

.mega-col li:not(:has(strong)):not(:has(a)):hover{
  color:#6a0f20;
  transform:translateX(4px);
}

/* Keep categories bar sticky under header (you already had this) */
.categories-bar{
  display:flex; gap:10px; overflow:auto; padding:12px 5%; background:#fff; border-bottom:1px solid #eee;
  position:sticky; top:92px; z-index:900;
}
.cat-pill{
  white-space:nowrap; border:none; background:linear-gradient(180deg,#ffffff,#f2f2f2); color:#111; padding:7px 12px; border-radius:999px; cursor:pointer; font-weight:700;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 2px rgba(0,0,0,.05),
    0 6px 14px rgba(0,0,0,.08),
    0 2px 4px rgba(0,0,0,.06);
  transition:transform .2s ease, box-shadow .2s ease;
}
.cat-pill.active, .cat-pill:hover{
  background:linear-gradient(180deg,#fff5f8,#fbeaf0); color:#6a0f20;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 8px 18px rgba(106,15,32,.16),
    0 2px 5px rgba(106,15,32,.10);
}
.cat-pill:hover{ transform:translateY(-2px); }
.cat-pill:active{ transform:translateY(0); box-shadow:inset 0 1px 3px rgba(106,15,32,.18); }
/* Social icons near logo */
.social-icons {
  display: inline-flex;
  gap: 14px;
  margin-left: 16px;
  vertical-align: middle;
}
.social-icons a {
  color: #6a0f20;
  font-size: 20px;
  transition: color .3s ease;
  text-decoration: none;
}
.social-icons a:hover {
  color: var(--gold);
  transform: translateY(-2px);
  text-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
  transition: all 0.3s ease;
}
/* --- Fix: keep icons next to logo, match screenshot #1 --- */
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.brand-logo{display:inline-block;} /* stop forcing a line break */

/* Social icons next to logo (legacy rule, kept harmless if unused) */
.social-icons{display:flex;gap:14px;margin-left:16px;align-items:center;}
.social-icons a{color:#6a0f20;font-size:20px;line-height:1;transition:color .25s;text-decoration:none;}
.social-icons a:hover{color:#6a0f20;}

/* ===== PREMIUM BRAND LOCKUP (logo only, blended into the header) =====
   The old "logo.webp" had a lot of baked-in empty cream canvas around
   the actual mark, so it needed a -30px negative margin just to sit
   at a normal-looking position and still read as small/cramped. Now
   that the file has a real transparent background with the mark
   cropped close to its edges (checked: only ~3-4% padding left/right),
   that hack just pushes it too close to the viewport edge instead.
   Removed it and sized the mark up so it actually reads as the site's
   primary brand element instead of competing for space with the
   search bar and icons next to it. */
.brand-link{
  position:relative;
  display:flex;
  align-items:center;
  text-decoration:none;
  margin-left:-16px;
  overflow:hidden;
}
/* Shine sweep — a soft diagonal band of light drifts across the logo
   on a loop, then pauses off-screen before repeating. Same technique
   as the card shine effects elsewhere on the site (.category-lux-card,
   .featured-creator-card), just applied to the brand mark itself. */
.brand-link::after{
  content:"";
  position:absolute;
  top:-50%;
  left:-60%;
  width:35%;
  height:220%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent);
  transform:rotate(20deg);
  pointer-events:none;
  animation:brandShineSweep 4.5s ease-in-out infinite;
}
@keyframes brandShineSweep{
  0%{ left:-60%; }
  35%{ left:130%; }
  100%{ left:130%; }
}
.brand-link .brand-logo{
  width:auto;
  height:62px;
  max-width:220px;
  object-fit:contain;
  object-position:left center;
  border-radius:0;
  box-shadow:none;
  background:transparent;
  /* Desktop's own drop-shadow filter was removed — it read as a faint,
     slightly muddy haze on the flat wordmark rather than real depth.
     Mobile keeps its 3D lift via the box-shadow ring on
     ".navbar .brand-logo" in mobile-shared.css instead (a real
     box-shadow respects the circular border-radius clip cleanly, which
     is why that one was kept and this filter wasn't). */
}

/* Header controls to restore the pill look + alignment */
.nav-actions{display:flex;align-items:center;justify-content:flex-end;gap:18px;flex:1;}
.header-icons{display:flex;align-items:center;gap:14px;}

/* ===== HEADER QUICK LINKS (secondary nav strip) =====
   Restrained boutique-nav treatment: a soft frosted-glass bar (kept —
   this part read fine) but the per-link glass "pill" bubbles with
   bright gold icons were dropped, since that combination read as
   playful/childish rather than premium. In their place: plain
   uppercase, letter-spaced small text (no background shape at all) and
   a thin gold-to-burgundy underline that sweeps in on hover — the
   quieter, editorial-luxury nav treatment fashion sites use. */
.header-quicklinks{
  display:flex;
  align-items:center;
  justify-content:space-evenly;
  padding:11px 5%;
  background:linear-gradient(180deg, rgba(255,250,249,.92), rgba(253,238,234,.85));
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid rgba(212,175,55,.30);
  overflow-x:auto;
}
.header-quicklinks a{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#4a0413;
  text-decoration:none;
  white-space:nowrap;
  padding:3px 1px;
  transition:color .25s ease;
}
.header-quicklinks a i{
  font-size:10.5px;
  background:linear-gradient(90deg,#4a0413,#a91d3a,#d4af37,#a91d3a,#4a0413);
  background-size:300% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  animation:headerIconShift 5s linear infinite;
}
@keyframes headerIconShift{
  0%{ background-position:0% 50%; }
  100%{ background-position:300% 50%; }
}
.header-quicklinks a::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-5px;
  width:0;
  height:1.5px;
  background:linear-gradient(90deg,#d4af37,#7c1428);
  transition:width .3s ease, left .3s ease;
}
.header-quicklinks a:hover{
  color:#7c1428;
}
.header-quicklinks a:hover::after{
  width:100%;
  left:0;
}
.location-btn{
  background:linear-gradient(180deg,#ffffff,#f7f7f7);border:1px solid #eee;border-radius:16px;
  padding:6px 12px;font-weight:600; cursor:pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 6px 14px rgba(0,0,0,.08);
  transition:transform .2s ease, box-shadow .2s ease;
}
.location-btn:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 10px 20px rgba(0,0,0,.12);
}
.location-btn:active{
  transform:translateY(0);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.15);
}
#searchBar:focus{border-color:#6a0f20;box-shadow:0 0 0 3px rgba(106,15,32,.20);}
#currencySelector{
  padding:8px 12px;border:1px solid #eee;border-radius:16px;background:#fff;
}
.icon-btn{
  background:linear-gradient(180deg,#ffffff,#f7f7f7);border:1px solid #eee;border-radius:12px;padding:5px 9px;cursor:pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 2px rgba(0,0,0,.04),
    0 6px 14px rgba(0,0,0,.08),
    0 2px 4px rgba(0,0,0,.06);
  transition:transform .2s ease, box-shadow .2s ease;
}
.icon-btn:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 10px 20px rgba(106,15,32,.14),
    0 3px 6px rgba(106,15,32,.10);
}
.icon-btn:active{
  transform:translateY(0);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.15);
}

/* --- Slide-out subcategory flyout (Products/Services) --- */
.categories-bar{ position: sticky; top:92px; z-index:900; } /* already set, reiterating for clarity */

.cat-panel{ /* default: panel hidden until a subcategory is chosen */
  width:720px;
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none; /* invisible when closed — must not swallow clicks
                            meant for whatever sits underneath it (e.g. the
                            breadcrumb/back bar right below the header) */
}
.cat-panel.show-mega{
  max-height: 520px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Reuse your .split-select as a floating flyout next to the button */
.split-select.flyout{
  position: fixed;               /* anchor to viewport so it sits exactly beside the button */
  display: inline-flex;
  gap: 10px;
  background: #fff;
  padding: 8px;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  z-index: 950;
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity .25s ease, transform .25s ease;
}
.split-select.flyout.open{
  opacity: 1;
  transform: translateX(0);
}

/* While flyout is open, keep the big mega-lists hidden */
.cat-panel:not(.show-mega) .cat-mega{ display: none !important; }

/* When a subcategory is selected, show the chosen mega list (your old styles apply) */
.cat-panel.show-mega .cat-mega.active{
  display: grid;
  grid-template-columns: repeat(4, minmax(180px,1fr));
}
@keyframes flyBounce {
  0% { transform: translateY(-8px); opacity: 0; }
  60% { transform: translateY(3px); opacity: 1; }
  100% { transform: translateY(0); }
}
.cat-flyout.open .split-btn {
  animation: flyBounce 0.5s ease both;
}

/* === Cart & Wishlist Visual Balance === */

.cart-container .cart-btn:active,
.wishlist-btn:active {
  transform: scale(0.9);
}

/* Ensure cart badge stays aligned properly */
.cart-container {
  position: relative;
  display: inline-block;
}
/* Kept in sync with the ".cart-count" rule near the top of this file
   (line ~297) — this one comes later in the cascade and was silently
   winning on equal specificity, which is why shrinking the badge there
   didn't visibly change anything. */
.cart-count {
  position: absolute;
  top: -6px;
  right: -10px;
  background: var(--burgundy);
  color: #fff;
  border-radius: 999px;
  font-size: 10.5px;
  padding: 1.5px 5px;
  font-weight: 700;
  min-width: 16px;
  text-align: center;
}

/* === Flyout appears right next to 'All Categories' button ===
   Redesigned for visual consistency with the rest of the site's premium
   language (burgundy/gold gradients, soft tinted shadows, gold hairline
   borders — same treatment as .cat-pill/.icon-btn/.location-btn) instead
   of the flat grey/plain-white generic dropdown it had before. */
.cat-flyout {
  position: absolute;
  display: inline-flex;
  flex-direction: column;
  gap: 12px;
  width: min(560px, 92vw);
  background: linear-gradient(180deg,#ffffff,#fdfaf8);
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(212,175,55,.16);
  box-shadow:
    0 26px 60px rgba(106,15,32,.16),
    0 6px 16px rgba(106,15,32,.08);
  z-index: 1050;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

.cat-flyout.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Tabs row — separated from the list below by a thin gold hairline
   instead of the two just floating directly on top of each other. */
.cat-flyout .flyout-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(212,175,55,.14);
}
.cat-flyout .flyout-tabs {
  display: inline-flex;
  gap: 10px;
}
/* Same gradient-pill treatment as ".cat-pill" (the "All ▾" button itself)
   so the tabs read as part of the same design system, not a separate
   generic widget. */
.cat-flyout .split-btn {
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 999px;
  padding: 9px 18px;
  font-weight: 700;
  font-size: .92rem;
  color: #5b4c4c;
  background: linear-gradient(180deg,#ffffff,#f7f7f7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 4px 10px rgba(0,0,0,.05);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.cat-flyout .split-btn:hover {
  transform: translateY(-1px);
}
.cat-flyout .split-btn.active {
  background: linear-gradient(180deg,#fff5f8,#fbeaf0);
  color: #6a0f20;
  border-color: rgba(106,15,32,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 8px 18px rgba(106,15,32,.16),
    0 2px 5px rgba(106,15,32,.10);
}
/* Close button — a proper circular icon button (same recipe as
   ".icon-btn") instead of a bare "✕" glyph floating with no chrome. */
.cat-flyout .flyout-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 50%;
  background: linear-gradient(180deg,#ffffff,#f7f7f7);
  color: #6a0f20;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 4px 10px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.cat-flyout .flyout-close:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg,#fff5f8,#fbeaf0);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 8px 18px rgba(106,15,32,.14);
}

/* Body with subcategories — thin gold scrollbar instead of the default
   grey browser one, which was the one obviously "un-premium" detail
   left showing whenever the list overflowed. */
.cat-flyout .flyout-body {
  overflow: auto;
  overflow-x: hidden;
  max-height: 60vh;
  padding-right: 6px;
}
.cat-flyout .flyout-body::-webkit-scrollbar { width: 6px; }
.cat-flyout .flyout-body::-webkit-scrollbar-track { background: transparent; }
.cat-flyout .flyout-body::-webkit-scrollbar-thumb {
  background: rgba(212,175,55,.35);
  border-radius: 999px;
}
.cat-flyout .flyout-body::-webkit-scrollbar-thumb:hover {
  background: rgba(212,175,55,.55);
}

/* Adapted grid layout — hairline dividers between columns (padding
   absorbed from the border instead of the grid gap, so spacing stays
   even) instead of relying on bare whitespace to separate them. */
.cat-flyout .cat-mega {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 0 20px;
}
.cat-flyout .mega-col { list-style: none; padding: 0; margin: 0; line-height: 1.7; }
.cat-flyout .mega-col:not(:first-child) {
  border-left: 1px solid rgba(0,0,0,.06);
  padding-left: 20px;
}
.cat-flyout .mega-col li strong { color: #6a0f20; }

/* Wider viewports: a third column so more top-level categories are
   visible at once without scrolling as much. */
@media (min-width:900px){
  .cat-flyout .cat-mega { grid-template-columns: repeat(3, minmax(140px, 1fr)); }
}

/* Mobile — this flyout previously had zero mobile-specific handling at
   all: it just inherited the desktop layout and the JS-computed
   "left"/"top" (anchored beside the "All ▾" button), which on a narrow
   phone screen pushed it off-center/off-screen and left it feeling
   unfinished. Pinned as a centered, edge-anchored panel instead — the
   "!important"s are required to beat the inline left/top the flyout's
   positioning script sets on every open (see script.js). */
@media (max-width:700px){
  .cat-flyout {
    /* The base rule above is "position: absolute", which anchors
       top/left to the DOCUMENT, not the screen — so "top: 84px" only
       sat near the visible top when you happened to already be
       scrolled to the top of the page. Scroll down first, then open
       it, and it opened 84px from the top of the whole document —
       off-screen above the current viewport until you scrolled back
       up. "fixed" anchors it to the viewport instead, so it always
       opens in the same visible spot no matter how far you've
       scrolled. */
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: 84px !important;
    width: auto;
    padding: 14px;
    max-height: 78vh;
  }
  .cat-flyout .split-btn { padding: 8px 14px; font-size: .85rem; }
  .cat-flyout .flyout-body { max-height: 62vh; }
  .cat-flyout .cat-mega { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
  .cat-flyout .mega-col:not(:first-child) { padding-left: 14px; }
  .cat-flyout .mega-col li strong { font-size: .96rem; }
  .cat-flyout .mega-col a { font-size: .9rem; }
}

/* === Align 'All Categories' neatly below logo === */
.categories-bar.under-logo {
  position: absolute;
  top: 100%; /* just below the logo */
  left: 5%;  /* aligns with logo padding */
  transform: translateY(6px);
  background: transparent;
  border: none;
  padding: 0;
  z-index: 950;
}

.categories-bar.under-logo .cat-pill {
  background: #f8f8f8;
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  transition: all 0.25s ease;
}

.categories-bar.under-logo .cat-pill:hover {
  background: #fbeaf0;
  color: var(--burgundy);
  transform: translateY(-2px);
}

/* ===== Featured Creators: Elegant Glow Section ===== */
#featuredCreators {
  position: relative;
  background: radial-gradient(circle at top left, #fffaf7, #fff9f5 40%, #fff);
  overflow: hidden;
  padding-top: 70px;
  padding-bottom: 70px;
  /* border-top removed: the hero now fades into this same #fffaf7 at its
     own bottom edge (see ".hero::after" above), so a ruled line right at
     that seam would just redraw the hard edge the fade was added to
     remove. border-bottom (unrelated to the hero) is unchanged. */
  border-bottom: 2px solid rgba(212,175,55,0.1);
}

/* Same quiet metallic sweep as the Why TintLane backdrop — a single soft
   gold/white sheen gliding across the section. No blend mode here (the
   section's own background is near-white, so a screen blend would have
   nothing to lighten against — this stays visible as a direct overlay). */
#featuredCreators::before {
  content: '';
  position: absolute;
  inset: 0;
  background:linear-gradient(100deg, transparent 42%, rgba(212,175,55,.06) 47%, rgba(255,255,255,.18) 50%, rgba(212,175,55,.06) 53%, transparent 58%);
  background-size:220% 220%;
  background-position:200% 0;
  animation: bgShimmerSweep 9s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@media (prefers-reduced-motion: reduce){
  #featuredCreators::before{ animation:none; opacity:0; }
}

/* Headings & text sit above glow */
#featuredCreators h2,
#featuredCreators p,
#featuredCreators .grid {
  position: relative;
  z-index: 2;
}

/* Same metallic shimmer sweep as the Why TintLane heading */
#featuredCreators h2 {
  display:inline-block;
  background: linear-gradient(100deg, var(--burgundy) 35%, #f1d385 48%, var(--burgundy) 62%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: tintlaneShimmer 6s linear infinite;
}
@media (prefers-reduced-motion: reduce){
  #featuredCreators h2{ animation:none; background-position:0 0; }
}

/* Card enhancements for featured section */
#featuredCreators .card {
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  transition: transform .35s ease, box-shadow .35s ease;
  background: #fff;
}

#featuredCreators .card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

/* Add soft highlight on hover */
#featuredCreators .card::after {
  display:none;
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(255,230,220,0.25), transparent);
  opacity: 0;
  transition: opacity .35s ease;
}
#featuredCreators .card:hover::after {
  opacity: 1;
}

/* Button gradient updated for luxury tone */
#featuredCreators .btn.small {
  background: linear-gradient(135deg, #d4af37, #6a0f20);
  color: #fff;
  border: none;
}
#featuredCreators .btn.small:hover {
  background: linear-gradient(135deg, #e1c167, #6a0f20);
}
/* === 3. Keep "View Shop" visible at all times === */
#featuredCreators .btn.small {
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative;
  z-index: 5;
  margin: 12px auto 14px auto !important;
  text-align: center;
  padding: 9px 18px;
  font-weight: 700;
  border-radius: 999px;
  background: linear-gradient(135deg, #d4af37, #6a0f20);
  color: #fff !important;
  border: none;
  box-shadow: 0 8px 18px rgba(0,0,0,0.08);
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}
#featuredCreators .btn.small:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.12);
}

#featuredCreators .btn.small:hover {
  transform: translateY(-2px);
}

/* === 1. Remove bottom gap === */
main, body, html {
  margin: 0;
  padding: 0;
}

footer {
  margin: 0 !important;
  padding-bottom: 18px !important;
}

section:last-of-type {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* === Why TintLane? — centered & premium === */
/* If your Why section doesn't already have an id, add id="whyTintLane" to the section element in HTML.
   Example: <section id="whyTintLane"> ... </section> */

#whyTintLane {
  background: #fdf9f2;
  padding-top: 72px !important;
  padding-left: 7% !important;
  padding-right: 7% !important;
  padding-bottom: 72px !important;
  margin-top: 10px !important;
  margin-bottom: 70px !important;
  text-align: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(212,175,55,.32),
    inset 0 1px 0 rgba(255,255,255,.6),
    0 30px 70px -30px rgba(106,15,32,.18);
}

/* Quiet, couture backdrop: a single soft gold vignette (one tone, not a
   patchwork of colors) plus a fine paper-grain texture, both static — the
   shimmering heading text is the only thing that moves. */
#whyTintLane::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(212,175,55,.10), transparent 62%),
    radial-gradient(140% 100% at 50% 100%, rgba(106,15,32,.06), transparent 65%);
}
#whyTintLane::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.72  0 0 0 0 0.55  0 0 0 0 0.22  0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* A single soft gold sheen slowly sweeps across the whole backdrop — same
   quiet metallic shimmer as the heading, just stretched over the section
   instead of a patchwork of colors. */
#whyTintLane .bg-shimmer{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(100deg, transparent 28%, rgba(255,255,255,.8) 46%, rgba(241,211,133,.65) 50%, transparent 70%);
  background-size:220% 220%;
  background-position:200% 0;
  mix-blend-mode:screen;
  animation:bgShimmerSweep 9s ease-in-out infinite;
}
@keyframes bgShimmerSweep{
  0%{   background-position:220% 0; }
  100%{ background-position:-120% 0; }
}
@media (prefers-reduced-motion: reduce){
  #whyTintLane .bg-shimmer{ animation:none; opacity:0; }
}

#whyTintLane .brand-story-inner{
  position:relative;
  z-index:2;
}

.brand-story-inner{
  max-width: 780px;
  margin: 0 auto;
  position: relative;
}

#whyTintLane h3,
#whyTintLane h2 {
  font-family: 'Playfair Display', serif;
  font-size: 38px;
  letter-spacing: 0.6px;
  margin: 0 0 10px;
  display:inline-block;
  background:linear-gradient(100deg, var(--burgundy) 35%, #f1d385 48%, var(--burgundy) 62%);
  background-size:260% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:tintlaneShimmer 6s linear infinite;
}
@keyframes tintlaneShimmer{
  0%{   background-position:220% 0; }
  100%{ background-position:-120% 0; }
}
@media (prefers-reduced-motion: reduce){
  #whyTintLane h3, #whyTintLane h2{ animation:none; background-position:0 0; }
}

#whyTintLane p {
  max-width: 660px;
  margin: 0 auto;
  color: #41333a;
  font-size: 18px;
  line-height: 1.7;
  opacity: 0.95;
  margin-top: 12px;
}

/* small decorative underline */
#whyTintLane .why-underline {
  width: 64px;
  height: 5px;
  background: linear-gradient(90deg, var(--gold), var(--pink));
  margin: 16px auto 20px;
  border-radius: 99px;
}

/* Simple, quiet stat strip instead of pills/gradient card */
.story-stats{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:60px;
  margin-top:42px;
  flex-wrap:wrap;
}

.story-stat-value{
  font-family:'Playfair Display', serif;
  font-size:30px;
  font-weight:700;
  color:var(--burgundy);
  line-height:1.2;
}

.story-stat-label{
  margin-top:5px;
  font-size:14px;
  font-weight:600;
  color:#8a6f76;
  letter-spacing:.2px;
}

@media (max-width:640px){
  .story-stats{ gap:30px; }
}
/* --- SIGNUP MODAL STYLES --- */
.signup-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}
.signup-form input {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 15px;
}
.signup-form .btn {
  background: var(--burgundy);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
  font-weight: 600;
}
.signup-form .btn:hover {
  background: var(--gold);
  color: var(--dark);
}
/* ----- Signup Modal Styles ----- */
#signupModal { display: none; position: fixed; inset:0; background: rgba(0,0,0,0.6); z-index:1300; align-items:center; justify-content:center; }
#signupModal .modal-content {
  max-width:540px; width:92%; text-align:center; padding:32px 30px 26px;
  border-radius:16px; background:#fff;
  box-shadow:0 30px 60px rgba(0,0,0,0.18);
  position: relative;
}
.signup-form { display:flex; flex-direction:column; gap:12px; margin-top:6px; }
.signup-form input { padding:11px 14px; border-radius:10px; border:1px solid #e8e5e5; font-size:15px; }
.signup-form .btn { padding:11px 14px; border-radius:10px; border:none; background:var(--burgundy); color:#fff; font-weight:700; cursor:pointer; }
.signup-form .btn:hover { background: linear-gradient(90deg,#d4af37,#6a0f20); color:#111; }
#signupMessage { min-height:22px; }
#closeSignup { position:absolute; right:16px; top:12px; background:transparent; border:none; font-size:20px; cursor:pointer; }
@media (max-width:600px) { #signupModal .modal-content{ padding:20px 18px 18px; } }

/* A blanket "#signupModal img{display:none}" further down used to hide
   every <img> in this modal (a defensive fix against some other page's
   leftover ".modal-content img{width:100%}" rule making an unrelated
   image fill the box). The new brand mark below needs its own
   higher-priority override to actually show, rather than loosening that
   original guard for every image in the modal. */
#signupModal .auth-modal-logo { display: block !important; width: 46px; height: 46px; margin: 0 auto 10px; border-radius: 50%; }

#signupModal .auth-modal-head { margin-bottom: 18px; }
#signupModal #signupTitle { font-family: 'Playfair Display', serif; font-size: 26px; color: var(--burgundy); margin: 0; }
#signupModal .auth-modal-subtitle { margin: 6px 0 0; font-size: 13px; color: #8a6a72; }

/* "Continue with Google" — a real Firebase GoogleAuthProvider popup
   sign-in wired up in script.js, not just a decorative button. Requires
   the Google provider to actually be turned on in the Firebase console
   (Authentication → Sign-in method) or it'll fail with
   "auth/operation-not-allowed". */
#signupModal .google-signin-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid #e0dcdc;
  background: #fff;
  color: #3c3c3c;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
#signupModal .google-signin-btn:hover {
  border-color: #c9c4c4;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  transform: translateY(-1px);
}
#signupModal .google-signin-icon { width: 18px; height: 18px; flex-shrink: 0; }

#signupModal .auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 14px;
  color: #b3a2a7;
  font-size: 12px;
}
#signupModal .auth-divider::before,
#signupModal .auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #ece5e7;
}

/* Show/hide-password fields. The eye button sits inside the same
   padding-box as the input (absolute, inset from the right) rather than
   as a separate element beside it, matching the standard pattern used
   on every premium auth form instead of a bare unstyled toggle. */
#signupModal .pw-field { position: relative; }
#signupModal .pw-field input { width: 100%; box-sizing: border-box; }
#signupModal .pw-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: #8a7a7e;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
#signupModal .pw-toggle:hover { background: rgba(106,15,32,.08); color: var(--burgundy); }
#signupModal .pw-toggle i { font-size: 15px; }

/* This container existed in the markup already but was left permanently
   "display:none" inline with nothing in script.js ever un-hiding it —
   the sign-up form had no way to switch to log-in mode (or vice versa)
   even though the JS to toggle the title/button/fields between the two
   modes was fully wired up. Giving it a real, always-on flex display is
   what actually makes that toggle link visible and usable. */
#signupModal .auth-switch-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 13px;
  color: #6a5a5e;
}
#signupModal .auth-switch-row a {
  color: var(--burgundy);
  font-weight: 700;
  text-decoration: none;
}
#signupModal .auth-switch-row a:hover { text-decoration: underline; }
#signupModal img:not(.auth-modal-logo) { display: none !important; }

/* ---- TintLane success popup (matches burgundy / rose / gold vibe) ---- */
#successPopup {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(6, 6, 6, 0.42);
  z-index: 99999;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

#successPopup .success-box {
  width: min(520px, 92%);
background: linear-gradient(
  180deg,
  #fffdfb 0%,
  #fff7f3 100%
);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 18px 40px rgba(105, 30, 40, 0.18);
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  border: 1px solid rgba(218, 190, 180, 0.25);
  transform-origin: center;
  animation: popup-pop 420ms cubic-bezier(.2,.9,.3,1);
}

/* tick badge */
#successPopup .tick {
  width: 72px;
  height: 72px;
  border-radius: 50%;
background: linear-gradient(
  135deg,
  #d4af37,
  #b76e79
);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(255, 110, 140, 0.18), inset 0 -4px 8px rgba(0,0,0,0.06);
}
#successPopup .tick .check {
  width: 34px;
  height: 20px;
  transform: rotate(-45deg);
  border-left: 5px solid #fff;
  border-bottom: 5px solid #fff;
  box-sizing: border-box;
}

/* message */
#successPopup .success-msg {
  margin: 0;
  font-weight: 700;
  color: #6a0f20;
  font-size: 20px;
  line-height: 1.4;
  padding: 0 8px;
}

/* de-emphasized subtext (optional) */
#successPopup .success-sub {
  margin: 0;
  color: #9a5a5a;
  font-size: 14px;
  margin-top: 6px;
}

/* small wiggle animation for the tick */
@keyframes tick-wiggle {
  0% { transform: scale(0.94) rotate(0); }
  50% { transform: scale(1.06) rotate(6deg); }
  100% { transform: scale(1) rotate(-3deg); }
}
#successPopup .tick { animation: tick-wiggle 800ms ease-out; }

/* popup pop scale */
@keyframes popup-pop {
  from { transform: translateY(8px) scale(.96); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* confetti pieces (emojis) */
.confetti {
  position: fixed;
  pointer-events: none;
  font-size: 18px;
  will-change: transform, opacity;
  z-index: 100100;
  opacity: 0;
  animation: confetti-fall 1200ms linear forwards;
}

@keyframes confetti-fall {
  0% { transform: translateY(-20vh) rotate(0deg) scale(0.9); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translateY(70vh) rotate(540deg) scale(1); opacity: 0; }
}
/* ===== Creator Onboarding styles (append to bottom of style.css) ===== */
/* (If duplications with existing classes occur, these are scoped with .onboard- prefixes) */

.onboard-wrap { max-width:980px; margin:40px auto 120px; padding:28px; background:linear-gradient(180deg,#fffaf8,#fff7f5); border-radius:16px; box-shadow:0 18px 40px rgba(106,15,32,.07); }
.onboard-head { display:flex; align-items:center; gap:18px; margin-bottom:18px; }
.onboard-head h1 { font-family:'Playfair Display',serif; font-size:30px; color:var(--burgundy); margin:0; }
.onboard-sub { color:#6a0f20; font-weight:600; opacity:.9; margin:6px 0 18px; }
.onboard-grid { display:grid; grid-template-columns: 1fr 360px; gap:20px; align-items:start; }
@media (max-width:920px){ .onboard-grid { grid-template-columns:1fr; } .onboard-wrap{margin:18px;padding:18px} }

.onboard-form label { display:block; margin:10px 0 6px; font-weight:700; color:#2b1a1f }
.onboard-form input[type="text"], .onboard-form input[type="number"], .onboard-form input[type="tel"], .onboard-form textarea {
  width:100%; padding:10px 12px; border-radius:12px; border:1px solid #eee; background:#fff; font-size:14px; outline:none;
}
.onboard-form textarea { min-height:120px; resize:vertical; }
.onboard-actions { display:flex; gap:12px; margin-top:16px; align-items:center; }
.onboard-btn { padding:10px 18px; border-radius:999px; font-weight:800; cursor:pointer; border:none; }
.onboard-btn.primary { background: linear-gradient(135deg,#d4af37,#6a0f20); color:#fff; box-shadow:0 10px 26px rgba(212,175,55,.12) }
.onboard-btn.ghost { background:transparent; border:1px solid #eee; color:#6a0f20 }

.onboard-preview { background:#fff; border-radius:14px; padding:18px; box-shadow:0 8px 30px rgba(0,0,0,.06) }
.shop-preview { border-radius:12px; overflow:hidden; padding:16px; display:flex; gap:12px; align-items:center; }
.preview-avatar { width:78px; height:78px; border-radius:18px; background:#f4f0ef; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,.06) }
.preview-details h3{ margin:0; font-size:18px; color:#111; font-weight:800 }
.preview-details p{ margin:6px 0 0; color:#6a0f20; font-weight:700 }

.tint-pill { width:100%; height:56px; border-radius:12px; display:flex; gap:6px; align-items:center; padding:8px; box-shadow: inset 0 -6px 18px rgba(0,0,0,.03) }
.tint-block { flex:1; height:38px; border-radius:8px }

.helper { font-size:13px; color:#6a0f20; margin-top:6px; }
.small-muted { font-size:13px; color:#8a6f6f; }

/* Success overlay */
.onboard-success {
  position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:99999;
  background:linear-gradient(180deg, rgba(0,0,0,0.36), rgba(0,0,0,0.36));
}
.success-card {
  background:linear-gradient(180deg,#fffaf6,#fff6f3);
  padding:28px; border-radius:18px; text-align:center; box-shadow: 0 24px 70px rgba(106,15,32,.25);
  width:min(520px,94%);
}
.success-tick { width:92px;height:92px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;
  background: linear-gradient(180deg,#ffd37a,#d4af37); box-shadow:0 10px 30px rgba(212,175,55,.18);
  transform:scale(.7); animation:popIn .45s cubic-bezier(.2,.9,.25,1) forwards;
}
@keyframes popIn { to { transform:scale(1); } }
.success-title { font-family:'Playfair Display',serif; font-size:22px; color:#2b1a1f; margin:8px 0 8px; }
.success-sub { color:#5a3f3f; margin:0 0 12px; }

/* ===== Listing Creation + Render styles (append) ===== */
.create-wrap{max-width:1100px;margin:34px auto;padding:26px;background:linear-gradient(180deg,#fffaf8,#fff7f5);border-radius:14px;box-shadow:0 18px 40px rgba(106,15,32,.06)}
.create-grid{display:grid;grid-template-columns:1fr 380px;gap:22px}
@media (max-width:960px){ .create-grid{grid-template-columns:1fr} }
.images-drop{

    border:2px dashed rgba(212,175,55,.35);

    border-radius:18px;

    padding:32px;

    background:linear-gradient(
        180deg,
        #fffdfb,
        #fff7f4
    );

    transition:.25s;

    cursor:pointer;

    text-align:center;

}

.images-drop:hover{

    border-color:#d4af37;

    transform:translateY(-2px);

    box-shadow:0 15px 35px rgba(212,175,55,.12);

}
.thumb{width:86px;height:86px;border-radius:10px;overflow:hidden;box-shadow:0 8px 18px rgba(0,0,0,.08);position:relative}
.thumb img{width:100%;height:100%;object-fit:cover}
.progress-bar{height:8px;border-radius:6px;background:#f0f0f0;overflow:hidden}
.progress-bar > i{display:block;height:100%;width:0%;background:linear-gradient(90deg,#d4af37,#6a0f20)}
.preview-img{height:160px;border-radius:10px;overflow:hidden}
.preview-img img{width:100%;height:100%;object-fit:cover}

.account-menu { position:relative; }

/* Scoped to ".account-menu" — this used to be a bare ".dropdown-content"
   rule, which (being later in this file than the real header dropdown's
   own ".dropdown-content" rules) silently won the cascade on EVERY page
   and overrode the header's signup/account dropdown's position, z-index
   and sizing site-wide, since style.css loads on every page. That's why
   the header dropdown only ever looked/behaved correctly on whichever
   page happened to not trip this — scoping it here so it only affects
   this component's own menu. */
.account-menu .dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  top: 44px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
  padding: 8px 0;
  min-width: 160px;
  flex-direction: column;   /* ⭐ THIS FIXES SIDE BY SIDE */
  gap: 0;
  z-index: 999;
}

.account-menu .dropdown-content a {
  padding: 10px 16px;
  text-decoration: none;
  color: #6a0f20;
  font-weight: 600;
  display: block;
}

.account-menu .dropdown-content a:hover {
  background: #fff4f6;
}
.badge {
  position:absolute;
  top:10px;
  left:10px;
  padding:4px 10px;
  font-size:12px;
  font-weight:700;
  border-radius:999px;
  backdrop-filter: blur(6px);
}

.badge.product {
  background:rgba(212,175,55,0.85);
  color:#fff;
}

.badge.service {
  background:rgba(107,23,38,0.85);
  color:#fff;
}
/* ===== CATEGORY CARD LUXURY EFFECT ===== */

.category-card {
  cursor: pointer;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  overflow: hidden;
}

.category-card img {
  transition: transform 0.6s ease;
}

.category-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.12);
}

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

.category-card h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  margin-top: 12px;
  letter-spacing: 0.5px;
}

#followedGrid .category-card,
#newArrivalsGrid .category-card{

  overflow:hidden;
  cursor:pointer;

}

#newArrivalsGrid .category-card,
#followedGrid .category-card{

    position:relative;
    overflow:hidden;

}
/* ===================================== */
/* NEW ARRIVALS + FOLLOWED CREATOR CARDS */
/* ===================================== */

#newArrivalsGrid .category-card,
#followedGrid .category-card{

    position:relative;
    overflow:hidden;
    cursor:pointer;

    transition:
    transform .35s ease,
    box-shadow .35s ease;

}


/* ===== LISTING PAGE LAYOUT ===== */

.listing-layout{

max-width:1180px;

margin:40px auto;

display:grid;

grid-template-columns:55% 45%;

gap:28px;

padding:24px;

background:#fff;

border-radius:28px;

box-shadow:
0 10px 40px rgba(0,0,0,.06);

overflow:visible;

min-height:auto;

}

.listing-image{

width:100%;

height:520px;

border-radius:28px;

overflow:hidden;

background:#f7f7f7;

}

.listing-image img{

width:100%;

height:100%;

object-fit:cover;

display:block;

}

.listing-image:hover img {
  transform: scale(1.03);
}

.listing-details h1{

font-size:18px;

font-weight:700;

line-height:1.45;

margin:14px 0;

min-height:56px;

max-height:56px;

overflow:hidden;

display:-webkit-box;

-webkit-line-clamp:2;

-webkit-box-orient:vertical;

}

.listing-details{

display:flex;

flex-direction:column;

justify-content:flex-start;

padding:10px 10px 10px 0;

height:auto;

overflow:visible;

gap:14px;

}

.listing-price{

font-size:32px;

font-weight:800;

margin:12px 0;

color:var(--tint1);

}
.listing-stats{

font-size:14px;

color:#666;

margin-bottom:14px;

}

.listing-desc{

font-size:16px;

line-height:1.7;

color:#555;

margin:12px 0;

max-width:100%;

height:auto;

max-height:none;

overflow:visible;

display:block;

-webkit-line-clamp:unset;

-webkit-box-orient:unset;

}

/* ===== TYPE BADGE ===== */

.type-badge{

padding:8px 16px;

font-size:12px;

font-weight:700;

letter-spacing:.5px;

text-transform:uppercase;

}

/* ===== PRIMARY BUTTON ===== */
.primary-btn{

  width:100%;

  height:58px;

  border:none;

  border-radius:999px;

  font-size:16px;
  font-weight:700;

  color:white;

text-shadow:
0 1px 0 rgba(0,0,0,.60),
0 2px 5px rgba(0,0,0,.32),
0 0 10px rgba(0,0,0,.08);

  background:
  linear-gradient(
  135deg,
  var(--tint1),
  var(--tint2)
  );

  cursor:pointer;

  transition:.3s;
}

.primary-btn:hover{

  transform:translateY(-3px);

  box-shadow:
  0 18px 35px
  rgba(0,0,0,.15);

}
/* ===== LUXURY TINT CARD ===== */

.listing-card {
  max-width: 1150px;
  margin: 60px auto;
  padding: 50px;
  border-radius: 30px;
  background: #ffffff;
  position: relative;
  transition: transform 0.5s ease, box-shadow 0.5s ease;
  overflow: hidden;
}

/* Gradient aura layer */
.listing-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--tint1), var(--tint2));
  opacity: 0.07;
  z-index: 0;
  transition: opacity 0.4s ease;
}

.listing-card:hover::before {
  opacity: 0.15;
}

/* Soft glow */
.listing-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 25px 60px rgba(0,0,0,0.12),
    0 0 40px var(--tint1);
}

/* Keep content above aura */
.listing-layout {
  position: relative;
  z-index: 2;
}
.listing-image {
  overflow: hidden;
  border-radius: 24px;
}

.listing-image img {
  transition: transform 0.6s ease;
}

.listing-card:hover .listing-image img {
  transform: scale(1.05);
}
.listing-price {
  color: #111;
  transition: all 0.3s ease;
}

.listing-card:hover .listing-price {
  color: var(--tint1);
  
}

.card {
  position: relative;
}
.listing-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.listing-title-row .wishlist-btn{
  font-size:22px;
  background:white;
  border:none;
  border-radius:50%;
  padding:8px 12px;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
  transition:transform .2s ease;
}

.listing-title-row .wishlist-btn:hover{
  transform:scale(1.1);
}
.visit-shop-btn{
  display:inline-block;
  margin-top:18px;
  padding:10px 18px;
  border-radius:20px;
  background:linear-gradient(45deg,var(--tint1),var(--tint2));
  color:white;
  text-shadow:0 1px 2px rgba(0,0,0,.20);
  font-weight:600;
  text-decoration:none;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.35),
    inset 0 -3px 5px rgba(0,0,0,.15),
    0 8px 18px rgba(0,0,0,.18),
    0 2px 5px rgba(0,0,0,.12);
  transition:transform .3s ease, box-shadow .3s ease;
}

.visit-shop-btn:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.35),
    inset 0 -3px 5px rgba(0,0,0,.15),
    0 14px 28px rgba(0,0,0,.26),
    0 4px 8px rgba(0,0,0,.16);
}

.visit-shop-btn:active{
  transform:translateY(0);
  box-shadow:inset 0 3px 6px rgba(0,0,0,.30);
}

.follow-btn{
  margin-left:12px;
  padding:6px 14px;
  border-radius:18px;
  border:none;
  background:var(--tint1);
  color:white;
  text-shadow:0 1px 2px rgba(0,0,0,.20);
  font-weight:600;
  cursor:pointer;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.35),
    inset 0 -2px 4px rgba(0,0,0,.15),
    0 6px 14px rgba(0,0,0,.16),
    0 2px 4px rgba(0,0,0,.10);
  transition:transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}

.follow-btn:hover{
  opacity:0.92;
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.35),
    inset 0 -2px 4px rgba(0,0,0,.15),
    0 10px 20px rgba(0,0,0,.22),
    0 3px 6px rgba(0,0,0,.14);
}

.follow-btn:active{
  transform:translateY(0);
  box-shadow:inset 0 3px 6px rgba(0,0,0,.30);
}
.cart-popup{
  position:fixed;
  top:30px;
  right:30px;
  display:none;
  z-index:9999;
}

.cart-popup-box{
  background:#1bbf6b;
  color:white;
  padding:14px 22px;
  border-radius:10px;
  font-weight:600;
  box-shadow:0 6px 18px rgba(0,0,0,0.2);
  animation:cartPopupFade 0.4s ease;
}

@keyframes cartPopupFade{
  from{
    opacity:0;
    transform:translateY(-10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}
.cart-popup{
  position:fixed;
  top:30px;
  right:30px;
  display:none;
  z-index:9999;
}

.cart-popup-box{
  background:#1bbf6b;
  color:white;
  padding:14px 22px;
  border-radius:10px;
  font-weight:600;
  box-shadow:0 6px 18px rgba(0,0,0,0.2);
  animation:cartPopupFade 0.4s ease;
}

@keyframes cartPopupFade{
  from{
    opacity:0;
    transform:translateY(-10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}
.qty-controls{
display:flex;
align-items:center;
gap:10px;
margin:10px 0;
}

.qty-controls button{
width:28px;
height:28px;
border:none;
background:var(--tint1);
color:white;
border-radius:4px;
cursor:pointer;
}

.remove-btn{
margin-top:6px;
padding:6px 10px;
border:none;
background:#e74c3c;
color:white;
border-radius:6px;
cursor:pointer;
}
/* soften content readability */
.listing-details,
.listing-image {
  position: relative;
  z-index: 2;
}

/* === HOVER GLOW EFFECT === */

.listing-layout:hover {
  transform: translateY(-8px) scale(1.01);

  box-shadow:
    0 20px 50px rgba(0,0,0,0.15),
    0 0 40px var(--tint1),
    0 0 80px var(--tint2);
}
.card-img img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 12px;
}
.cart-card {
  display: flex;
  gap: 16px;
  background: #fff;
  padding: 16px;
  margin-bottom: 16px;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

.cart-card img {
  width: 130px;
  height: 130px;
  object-fit: cover;
  border-radius: 10px;
}

.cart-info {
  flex: 1;
}

.qty-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
}

.qty-btn {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: #6b1726;
  color: white;
  cursor: pointer;
}
#cartItems
.remove-btn {
  margin-top: 8px;
  background: #eee;
  border: none;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
}
/* ============================= */
/* 🛒 TINTLANE CART DESIGN */
/* ============================= */

#cartItems {
  max-width: 900px;
  margin: 40px auto;

  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cart-item {
  display: grid;
  grid-template-columns: 100px 1fr 120px;
  align-items: center;
  gap: 20px;
  flex: 0 0 auto;

  background: linear-gradient(145deg, #fff9f7, #fff3ef);
  padding: 18px 22px;
  border-radius: 18px;

  box-shadow: 0 10px 30px rgba(107, 23, 38, 0.08);
  transition: all 0.25s ease;

  width: 100%;
  box-sizing: border-box;
}

.cart-item:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 18px 40px rgba(107, 23, 38, 0.15);
}

/* LEFT SECTION */
.cart-left img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 12px;
}

/* CENTER */
.cart-center h3 {
  font-size: 18px;
  margin: 0;
  color: #2b1b1b;
}

.cart-center p {
  margin: 6px 0;
  color: #6b1726;
  font-weight: 600;
}

/* RIGHT */
.cart-right {
  text-align: right;
}

.cart-price {
  font-weight: 800;
  font-size: 18px;
  color: #6b1726;
}

/* QUANTITY */
.qty-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

.qty-controls button {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  cursor: pointer;

  background: linear-gradient(135deg, #d4af37, #6a0f20);
  color: white;
  font-weight: bold;

  transition: 0.2s;
}

.qty-controls button:hover {
  transform: scale(1.1);
}

/* REMOVE BUTTON */
.remove-btn {
  margin-top: 10px;
  background: none;
  border: none;
  color: #8a6f6f;
  cursor: pointer;
  font-size: 14px;
}

.remove-btn:hover {
  color: #6b1726;
}

/* ========================= */
/* TINTLANE CART SUMMARY */
/* ========================= */

#cartSummary{

max-width:900px;

margin:40px auto;

}

.cart-summary-card{

background:
linear-gradient(
145deg,
#fffaf8,
#fff2ee
);

padding:28px;

border-radius:24px;

box-shadow:
0 15px 40px
rgba(0,0,0,.06);

}

.cart-summary-card h2{

margin:0 0 20px;

font-family:
"Playfair Display",
serif;

color:#6b1726;

}

.summary-row{

display:flex;

justify-content:space-between;

align-items:center;

padding:12px 0;

border-bottom:
1px solid
rgba(0,0,0,.06);

}

.summary-row strong{

font-size:18px;

color:#6b1726;

}

.cart-summary-note{

margin-top:20px;

padding:16px;

border-radius:16px;

background:
rgba(212,175,55,.08);

color:#6b1726;

font-size:14px;

line-height:1.6;

}
/* ===== CART FINAL CLEAN LAYOUT ===== */

#cartItems {
  max-width: 900px;
  margin: 40px auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cart-item {
  display: grid;
  grid-template-columns: 100px 1fr 120px;
  align-items: center;
  gap: 20px;

  background: linear-gradient(145deg, #fff9f7, #fff3ef);
  padding: 18px;
  border-radius: 18px;

  box-shadow: 0 10px 30px rgba(107, 23, 38, 0.08);
  transition: 0.25s;

  width: 100%;
}

.cart-item:hover {
  transform: translateY(-4px);
}

/* IMAGE */
.cart-left img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 12px;
}

/* CENTER */
.cart-center h3 {
  margin: 0;
  font-size: 18px;
}

.cart-center p {
  margin: 6px 0;
  font-weight: 600;
  color: #6b1726;
}

/* RIGHT */
.cart-right {
  text-align: right;
}

.cart-price {
  font-weight: 800;
  color: #6b1726;
}

/* QUANTITY */
.qty-controls {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.qty-controls button {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(180deg, #e6c15c, #d4af37 55%, #6a0f20);
  color: white;
  cursor: pointer;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.4),
    inset 0 -2px 3px rgba(0,0,0,.15),
    0 6px 14px rgba(212,175,55,.28);
  transition: transform .2s ease, box-shadow .2s ease;
}

.qty-controls button:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.4),
    inset 0 -2px 3px rgba(0,0,0,.15),
    0 10px 20px rgba(212,175,55,.36);
}

.qty-controls button:active {
  transform: translateY(0);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.25);
}

/* REMOVE */
.remove-btn {
  margin-top: 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: #8a6f6f;
  border-radius: 10px;
  padding: 6px 10px;
  transition: background .2s ease, box-shadow .2s ease, color .2s ease;
}

.remove-btn:hover {
  background: #f5eeef;
  color: #6b1726;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 4px 10px rgba(106,15,32,.10);
}

.remove-btn:active {
  box-shadow: inset 0 2px 4px rgba(106,15,32,.15);
}

/* ========================= */
/* CREATOR CART GROUPS */
/* ========================= */

.creator-cart-group{

  background:#fff;

  border-radius:24px;

  padding:24px;

  margin-bottom:32px;

  box-shadow:
  0 15px 40px rgba(0,0,0,.06);

}

.creator-cart-header{

  padding-bottom:16px;

  margin-bottom:18px;

  border-bottom:
  1px solid rgba(0,0,0,.08);

}

.creator-cart-header h2{

  margin:0;

  color:#6b1726;

  font-family:
  "Playfair Display",
  serif;

}

.creator-cart-footer{

  display:flex;

  justify-content:space-between;

  align-items:center;

  margin-top:18px;

  padding-top:18px;

  border-top:
  1px solid rgba(0,0,0,.08);

}

.creator-subtotal{

  font-size:20px;

  font-weight:700;

  color:#6b1726;

}

.creator-checkout-btn{

  border:none;

  cursor:pointer;

  border-radius:999px;

  padding:14px 28px;

  font-weight:700;

  color:white;

  text-shadow:0 1px 2px rgba(0,0,0,.18);

  background:
  linear-gradient(
    135deg,
    #d4af37,
    #6a0f20
  );

  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.4),
    inset 0 -3px 5px rgba(0,0,0,.12),
    0 12px 24px rgba(212,175,55,.28),
    0 3px 6px rgba(212,175,55,.18);

  transition:transform .25s ease, box-shadow .25s ease;

}

.creator-checkout-btn:hover{

  transform:
  translateY(-2px);

  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.4),
    inset 0 -3px 5px rgba(0,0,0,.12),
    0 18px 32px rgba(212,175,55,.36),
    0 5px 10px rgba(212,175,55,.22);

}

.creator-checkout-btn:active{

  transform:translateY(0);

  box-shadow:inset 0 3px 6px rgba(0,0,0,.25);

}
/* ===== CHECKOUT PAGE ===== */

.checkout-container {
  max-width: 1100px;
  margin: 40px auto;
  padding: 20px;
}

.checkout-title {
  font-size: 32px;
  margin-bottom: 20px;
  color: #6b1726;
}

.checkout-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 30px;
}

.checkout-card {
  background: linear-gradient(145deg, #fff9f7, #fff3ef);
  padding: 24px;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.06);
}

.checkout-card h3 {
  margin-bottom: 16px;
  color: #3b2226;
}

/* INPUTS */
.form-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-grid input {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #eee;
  font-size: 14px;
  outline: none;
  transition: 0.2s;
}

.form-grid input:focus {
  border-color: #d4af37;
  box-shadow: 0 0 0 2px rgba(212,175,55,0.15);
}

/* SUMMARY */
.summary-items {
  margin-bottom: 16px;
}

.summary-items p {
  margin: 6px 0;
  font-size: 14px;
}

.summary-total {
  font-size: 20px;
  font-weight: 800;
  color: #6b1726;
  margin: 16px 0;
}

/* BUTTON */
.checkout-btn {
  width: 100%;
  padding: 14px;
  border-radius: 999px;
  border: none;
  cursor: pointer;

  background: linear-gradient(135deg, #d4af37, #6a0f20);
  color: white;
  font-weight: 700;
  font-size: 16px;

  transition: 0.25s;
}

.checkout-btn:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 20px rgba(212,175,55,0.3);
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .checkout-grid {
    grid-template-columns: 1fr;
  }
}
/* ===== PREMIUM CHECKOUT ===== */

.checkout-info {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.info-box {
  background: linear-gradient(145deg, #fffaf8, #fff5f1);
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 14px;
  color: #4a2b2b;
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
}

.info-box strong {
  display: block;
  margin-bottom: 4px;
  color: #6b1726;
}

/* ORDER SUMMARY IMPROVED */

.summary-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.summary-items p {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 6px 0;
}

.summary-divider {
  height: 1px;
  background: #eee;
  margin: 12px 0;
}

/* TITLE UPGRADE */
.checkout-title {
  font-size: 34px;
  font-weight: 800;
  color: #6b1726;
}

/* BUTTON PREMIUM */
.checkout-btn {
  width: 100%;
  padding: 14px;
  border-radius: 999px;
  border: none;

  background: linear-gradient(135deg, #d4af37, #6a0f20);
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
  font-weight: 700;
  font-size: 16px;

  cursor: pointer;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.4),
    inset 0 -3px 5px rgba(0,0,0,.12),
    0 10px 25px rgba(212,175,55,.28);
  transition: transform .25s ease, box-shadow .25s ease;
}

.checkout-btn:hover {
  transform: scale(1.03) translateY(-2px);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.4),
    inset 0 -3px 5px rgba(0,0,0,.12),
    0 16px 34px rgba(212,175,55,.38);
}

.checkout-btn:active {
  transform: scale(1);
  box-shadow: inset 0 3px 6px rgba(0,0,0,.25);
}
/* ===== CHECKOUT ITEMS ===== */

.checkout-item {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 12px;
  align-items: center;

  background: #fff;
  padding: 10px;
  border-radius: 12px;

  box-shadow: 0 6px 14px rgba(0,0,0,0.04);
}

.checkout-item img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 10px;
}

.checkout-item-center h4 {
  margin: 0;
  font-size: 14px;
}

.checkout-item-center p {
  margin: 2px 0;
  font-size: 12px;
  color: #6a4a4a;
}

.delivery-note {
  color: #6b1726;
  font-weight: 600;
}

.checkout-item-right {
  font-weight: 700;
  color: #6b1726;
}

/* ===== FLOW SECTION ===== */

.checkout-flow {
  margin-top: 20px;
  background: linear-gradient(145deg, #fff9f7, #fff3ef);
  padding: 16px;
  border-radius: 14px;
}

.checkout-flow h3 {
  margin-bottom: 10px;
  color: #6b1726;
}

.flow-step {
  font-size: 14px;
  margin: 6px 0;
}
.order-card {
  background: linear-gradient(145deg,#fff9f7,#fff3ef);
  padding: 20px;
  border-radius: 16px;
  margin-bottom: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.order-status {
  margin: 10px 0;
  font-weight: bold;
  font-size: 16px;
}

.order-status.placed { color: #b26b00; }
.order-status.packed { color: #6b1726; }
.order-status.shipped { color: #0077b6; }
.order-status.delivered { color: green; }
/* ORDER SUCCESS POPUP */

.order-popup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.order-popup-box {
  background: linear-gradient(145deg,#fff9f7,#fff3ef);
  padding: 30px;
  border-radius: 20px;
  text-align: center;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.15);
  animation: popupFade .45s cubic-bezier(.34,1.56,.64,1);
}

.order-tick {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg,#d4af37,#6a0f20);
  color: white;
  font-size: 30px;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
  animation: orderTickPop .5s cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes orderTickPop {
  from { transform: scale(.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.order-popup-box h2 {
  color: #6b1726;
  margin-bottom: 10px;
}

.order-sub {
  font-size: 14px;
  color: #8a6f6f;
  margin-top: 6px;
}

.order-redirect-note{
  margin:16px 0 0;
  font-size:12.5px;
  color:#8a6f6f;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}

/* Equal-specificity clash between this class's own `display:flex` and
   the browser's built-in `[hidden]{display:none}` — whichever rule
   comes later in the cascade wins a tie, and this one does, so without
   this explicit override the "Redirecting…" line would render even
   while `hidden` is set (same bug fixed on the loading overlay's
   submessage — see the PR-047 section below). */
.order-redirect-note[hidden]{
  display:none;
}

.order-actions{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
  margin-top:20px;
}

.order-btn{
  padding:12px 24px;
  border:none;
  border-radius:999px;
  font-weight:700;
  font-size:13px;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.order-btn-primary{
  background:linear-gradient(135deg,#d4af37,#6b1726);
  color:white;
  box-shadow:0 10px 24px rgba(106,15,32,.22);
}

.order-btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(106,15,32,.3);
}

.order-btn-outline{
  background:#fff;
  color:#6a0f20;
  border:1.5px solid rgba(106,15,32,.28);
}

.order-btn-outline:hover{
  background:rgba(106,15,32,.06);
  transform:translateY(-2px);
}

@keyframes popupFade {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.orders-grid{
  display:flex;
  flex-direction:column;
  gap:20px;
  margin-top:20px;
}

.order-card{
  background:#fffaf8;
  border-radius:16px;
  padding:18px;
  box-shadow:0 12px 30px rgba(106,15,32,0.08);
}

.order-header{
  font-weight:700;
  margin-bottom:8px;
  color:#6a0f20;
}

.order-customer{
  font-size:14px;
  color:#6a0f20;
  margin-bottom:10px;
}

.order-items p{
  margin:4px 0;
  font-size:14px;
}

.order-status{
  margin-top:10px;
  font-weight:600;
  color:#b76e79;
}


.order-actions button{
  border:none;
  padding:8px 14px;
  border-radius:999px;
  cursor:pointer;
  font-weight:600;
  background:linear-gradient(135deg,#d4af37,#6a0f20);
  color:white;
}
.order-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}

.order-date{
  font-size:12px;
  color:#8a6f6f;
}

.order-status-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  background:#f3e5e7;
  color:#6a0f20;
}

.order-status-pill i{
  font-size:14px;
}

.order-progress{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:18px 0;
}

.step{
  width:44px;
  height:44px;
  border-radius:50%;
  background:#eee;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  flex-shrink:0;
}

.step.active{
  background:linear-gradient(135deg,#d4af37,#6a0f20);
  color:#fff;
}

.line{
  flex:1;
  height:4px;
  background:#eee;
}

.line.active{
  background:linear-gradient(90deg,#d4af37,#6a0f20);
}

.order-item{
  display:flex;
  justify-content:space-between;
  font-size:14px;
  margin:6px 0;
}

.order-total{
  margin-top:10px;
  font-weight:700;
  color:#6a0f20;
}

.order-note{
  margin-top:10px;
  font-size:13px;
  color:#8a6f6f;
}
/* ===== PREMIUM ORDER TRACKING ===== */

.order-card{
  background:#fffaf8;
  border-radius:16px;
  padding:18px;
  margin-bottom:20px;
  box-shadow:0 12px 30px rgba(106,15,32,0.08);
}

.order-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}

.order-date{
  font-size:12px;
  color:#8a6f6f;
}

.order-status-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  background:#f3e5e7;
  color:#6a0f20;
}

.order-status-pill i{
  font-size:14px;
}

/* Solid, per-status colored pills — same status-color scheme as the
   service dashboard's ".service-status status-X" pills (identical hex
   values), so a status reads the same color whether it's seen by the
   seller, on the customer's order list, or on a service booking.
   ".product-" / "service-" prefixed so "delivered" (a final, green
   state for products but a mid-stage, purple state for services) can't
   collide between the two order types sharing this same class. Higher
   specificity than the flat fallback above, so these always win. */
.order-status-pill.product-placed{ background:#2563a8; color:white; }
.order-status-pill.product-packed{ background:#b8770f; color:white; }
.order-status-pill.product-shipped{ background:#7c5cbf; color:white; }
.order-status-pill.product-delivered{ background:#1f9d55; color:white; }

.order-status-pill.service-paid{ background:#2563a8; color:white; }
.order-status-pill.service-inprogress{ background:#b8770f; color:white; }
.order-status-pill.service-delivered{ background:#7c5cbf; color:white; }
.order-status-pill.service-completed{ background:#1f9d55; color:white; }
.order-status-pill.service-reviewed{ background:#a4718a; color:white; }

.order-progress{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:18px 0;
}

.step{
  width:44px;
  height:44px;
  border-radius:50%;
  background:#eee;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  flex-shrink:0;
}

.step.active{
  background:linear-gradient(135deg,#d4af37,#6a0f20);
  color:#fff;
}

.line{
  flex:1;
  height:4px;
  background:#eee;
}

.line.active{
  background:linear-gradient(90deg,#d4af37,#6a0f20);
}

.order-item{
  display:flex;
  justify-content:space-between;
  font-size:14px;
  margin:6px 0;
}

.order-total{
  margin-top:10px;
  font-weight:700;
  color:#6a0f20;
}

.order-note{
  margin-top:10px;
  font-size:13px;
  color:#8a6f6f;
}
.order-actions button.active-btn{
  background:linear-gradient(135deg,#6a0f20,#b76e79);
  color:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
}

button:disabled,
.action-btn:disabled,
.dashboard-btn:disabled {

  opacity: 1 !important;

  background:
    linear-gradient(
      135deg,
      #d4af37,
      #6a0f20
    ) !important;

  color: #ffffff !important;

  border: none !important;

  cursor: not-allowed !important;

  filter: none !important;

  -webkit-text-fill-color: #ffffff !important;

  box-shadow:
    0 10px 24px rgba(212,175,55,.18) !important;

}

button:disabled:hover,
.action-btn:disabled:hover,
.dashboard-btn:disabled:hover {

  opacity: 1 !important;

  filter: none !important;

  transform: none !important;

  background:
    linear-gradient(
      135deg,
      #d4af37,
      #6a0f20
    ) !important;

}
/* ===== LUXURY POPUP ===== */

.lux-popup{
  position:fixed;
  inset:0;
  display:none;
  justify-content:center;
  align-items:center;
  background:rgba(0,0,0,0.4);
  backdrop-filter:blur(6px);
  z-index:99999;
}

.lux-box{
  width:min(420px,90%);
  background:linear-gradient(180deg,#fffaf8,#fff5f2);
  padding:24px;
  border-radius:18px;
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,0.2);
  animation:popupFade 0.3s ease;
}

.lux-box h3{
  margin:0;
  font-family:'Playfair Display',serif;
  color:#6a0f20;
}

.lux-box p{
  margin:12px 0 18px;
  color:#6a0f20;
  font-size:14px;
  line-height:1.5;
}

.lux-actions{
  display:flex;
  gap:10px;
  justify-content:center;
}

.lux-btn{
  padding:10px 18px;
  border-radius:999px;
  border:none;
  cursor:pointer;
  font-weight:600;
  transition:transform .2s ease, box-shadow .2s ease;
}

.lux-btn.primary{
  background:linear-gradient(135deg,#d4af37,#6a0f20);
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.18);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.4),
    inset 0 -3px 5px rgba(0,0,0,.12),
    0 10px 20px rgba(212,175,55,.28);
}
.lux-btn.primary:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.4),
    inset 0 -3px 5px rgba(0,0,0,.12),
    0 16px 30px rgba(212,175,55,.36);
}
.lux-btn.primary:active{
  transform:translateY(0);
  box-shadow:inset 0 3px 6px rgba(0,0,0,.25);
}

.lux-btn.ghost{
  background:linear-gradient(180deg,#ffffff,#faf7f6);
  border:1px solid #eee;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 6px 14px rgba(0,0,0,.06);
}
.lux-btn.ghost:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 10px 20px rgba(0,0,0,.10);
}
.lux-btn.ghost:active{
  transform:translateY(0);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.12);
}

@keyframes popupFade{
  from{opacity:0; transform:scale(0.9);}
  to{opacity:1; transform:scale(1);}
}
/* 🔔 NOTIFICATION SYSTEM */

#notifCount{

position:absolute;

top:4px;
right:4px;

width:18px;
height:18px;
font-size:9px;

display:flex;
align-items:center;
justify-content:center;

background:#8b0f34;

color:white;

border-radius:50%;

font-weight:700;

line-height:1;

}

/* Anchored to the bell itself (position:absolute, not fixed to the
   viewport) so it opens right under the bell wherever that bell sits
   on the page, instead of floating at a fixed viewport coordinate
   regardless of scroll position or which page it's on. */
.notif-panel{

position:absolute;

top:calc(100% + 12px);

right:0;

  width:360px;

  max-height:460px;

  overflow:hidden;

  background:white;

  border-radius:20px;

  border:1px solid rgba(212,175,55,.14);

  box-shadow:
    0 24px 60px rgba(106,15,32,.18);

  z-index:999;

  display:none;

  flex-direction:column;

}

.notif-panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 18px;
  border-bottom:1px solid #f1e8e5;
  font-family:'Playfair Display',serif;
  font-size:15px;
  font-weight:700;
  color:#6a0f20;
  flex-shrink:0;
}

.notif-mark-all{
  border:none;
  background:none;
  font-family:'Poppins',sans-serif;
  font-size:12px;
  font-weight:600;
  color:#b8860b;
  cursor:pointer;
  padding:4px 6px;
  border-radius:8px;
  transition:background .2s ease;
}

.notif-mark-all:hover{
  background:#fff8e0;
}

.notif-panel-list{
  overflow-y:auto;
  flex:1;
}

.notif-item{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 18px;
  border-bottom:1px solid #f1e8e5;
  font-size:13.5px;
  line-height:1.5;
  color:#38232a;
  cursor:pointer;
  transition:background .2s ease;
  position:relative;
}

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

.notif-item:hover{
  background:#faf6f4;
}

.notif-item.unseen{
  background:#fff8fa;
}

.notif-item-icon{
  flex-shrink:0;
  width:34px;
  height:34px;
  border-radius:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
}

.notif-item-content{
  flex:1;
  min-width:0;
}

.notif-item-msg{
  color:#38232a;
  font-weight:500;
}

.notif-item.unseen .notif-item-msg{
  font-weight:700;
}

.notif-item-time{
  margin-top:4px;
  font-size:11.5px;
  color:#a1838b;
}

.notif-item-dot{
  flex-shrink:0;
  width:8px;
  height:8px;
  margin-top:6px;
  border-radius:50%;
  background:#c23768;
  box-shadow:0 0 0 3px rgba(194,55,104,.14);
}

.notif-empty{
  padding:40px 18px;
  text-align:center;
  font-size:13px;
  color:#8d7480;
}

.notif-empty i{
  display:block;
  font-size:22px;
  margin-bottom:10px;
  color:#d8c3c9;
}
/* 🔥 TOAST NOTIFICATION */

.toast{
  position:fixed;
  bottom:30px;
  right:30px;
  background:linear-gradient(135deg,#6a0f20,#6a0f20);
  color:#fff;
  padding:14px 18px;
  border-radius:14px;
  box-shadow:0 20px 50px rgba(0,0,0,0.2);
  opacity:0;
  transform:translateY(20px);
  transition:all 0.4s ease;
  max-width:300px;
  z-index:99999;
}

.toast.show{
  opacity:1;
  transform:translateY(0);
}
.edit-btn {
  background: linear-gradient(135deg, #d4af37, #6a0f20);
  border: none;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}

.delete-btn {
  background: linear-gradient(135deg, #6a0f20, #b76e79);
  color: white;
  border: none;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}

.edit-btn:hover,
.delete-btn:hover {
  transform: scale(1.05);
  opacity: 0.9;
}
.edit-btn, .delete-btn {
  position: relative;
  z-index: 10;
  cursor: pointer;
}

.listing-card img {
  pointer-events: none; /* 🔥 THIS FIXES 90% CLICK ISSUES */
}
.pause-btn {

  background:
    linear-gradient(
      135deg,
      #d4af37,
      #6a0f20
    ) !important;

  color: #ffffff !important;

  border: none !important;

  opacity: 1 !important;

  filter: none !important;

  -webkit-text-fill-color: #ffffff !important;

  box-shadow:
    0 10px 24px rgba(212,175,55,.18);

}

/* EDIT */
.edit-btn{
  background:linear-gradient(
    135deg,
    #f1c35c,
    #6a0f20
  );

  color:white;

  box-shadow:
    0 4px 12px rgba(106,15,32,0.25);
}

/* DELETE */
.delete-btn{
  background:linear-gradient(
    135deg,
    #8f1737,
    #b04d7a
  );

  color:white;

  box-shadow:
    0 4px 12px rgba(143,23,55,0.22);
}

/* PAUSE */
.pause-btn{
  background:#f4f1ee;

  color:#3d2d2d;

  border:1px solid #ebe4df;

  box-shadow:
    0 3px 10px rgba(0,0,0,0.04);
}

/* PUBLISH */
.publish-btn{
  min-height: 50px;
  background:linear-gradient(
    135deg,
    #f1c35c,
    #6a0f20
  );

  color:white;

  box-shadow:
    0 4px 12px rgba(106,15,32,0.25);
}

/* HOVER */
.listing-actions button:hover{
  transform:translateY(-2px);

  box-shadow:
    0 8px 20px rgba(0,0,0,0.10);
}

#successOk{
  margin-top: 8px;

  border: none;

  background: linear-gradient(
    135deg,
    #d4af37,
    #b76e79
  );

  color: white;

  padding: 12px 26px;

  border-radius: 999px;

  font-weight: 700;

  cursor: pointer;

  transition: 0.25s ease;

  box-shadow:
    0 8px 18px rgba(183,110,121,0.25);
}

#successOk:hover{
  transform: translateY(-2px);
}
.order-actions button{
  width: 150px;
  height: 44px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius: 14px;
}
#luxPopup,
#successPopup {

  position: fixed;
  inset: 0;

  background: rgba(20, 10, 15, 0.45);

  display: none;

  align-items: center;
  justify-content: center;

  z-index: 9999;

  backdrop-filter: blur(6px);

}
/* ===== FINAL POPUP FIX ===== */

#luxPopup,
#successPopup {
  position: fixed;
  inset: 0;

  display: none;

  align-items: center;
  justify-content: center;

  background: rgba(0,0,0,0.45);

  z-index: 999999;

  backdrop-filter: blur(6px);
}

#luxPopup.active,
#successPopup.active {
  display: flex;
}
/* FIX CREATE LISTING BUTTON CLICK ISSUE */

.btn-row,
.btn-row button,
#publishBtn,
#saveDraft {
  position: relative;
  z-index: 9999 !important;
  pointer-events: auto !important;
}

.preview-card,
.preview-img,
.create-grid aside,
.create-grid {
  pointer-events: auto;
}

.images-drop,
.preview-card {
  position: relative;
  z-index: 1;
}
/* =========================================
   TINTLANE LUXURY POPUPS
========================================= */

.lux-popup-overlay{
  position:fixed;
  inset:0;
  background:rgba(20,10,15,.45);
  backdrop-filter:blur(6px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:999999;
}

.lux-popup-box{
  width:min(92%,420px);
  background:#fffaf8;
  border-radius:28px;
  padding:30px;
  box-shadow:
    0 30px 80px rgba(106,15,32,.18);
  border:1px solid rgba(255,255,255,.7);
  animation:popupFade .28s ease;
}

.success-popup{
  text-align:center;
}

.lux-popup-message{
  font-size:17px;
  line-height:1.7;
  color:#4a2230;
  font-weight:600;
}

.lux-popup-actions{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  margin-top:26px;
}

.lux-popup-confirm,
.lux-popup-cancel{
  border:none;
  border-radius:999px;
  padding:12px 24px;
  font-weight:700;
  cursor:pointer;
  transition:.25s ease;
}

.lux-popup-confirm{
  background:
    linear-gradient(
      135deg,
      #d4af37,
      #6a0f20
    );

  color:white;

  box-shadow:
    0 12px 24px rgba(106,15,32,.28);
}

.lux-popup-confirm:hover{
  transform:translateY(-2px);
  box-shadow:
    0 18px 32px rgba(106,15,32,.36);
}

.lux-popup-cancel{
  background:#f4ebee;
  color:#6a0f20;
}

.lux-popup-cancel:hover{
  background:#ead9df;
}

@keyframes popupFade{
  from{
    opacity:0;
    transform:
      translateY(10px)
      scale(.96);
  }

  to{
    opacity:1;
    transform:
      translateY(0)
      scale(1);
  }
}
/* =========================================
   TINTLANE LUXURY POPUPS
========================================= */

.lux-popup-overlay {

  position: fixed;
  inset: 0;

  background: rgba(20, 10, 15, 0.45);
  backdrop-filter: blur(8px);

  display: none;
  align-items: center;
  justify-content: center;

  z-index: 999999;

  animation: tintFadeIn 0.25s ease;
}

.lux-popup-card,
.lux-popup-box {

  padding: 42px 40px;
  width: 92%;
  max-width: 460px;

  background:
    linear-gradient(
      145deg,
      #fffaf8,
      #fff4f6
    );

  border-radius: 28px;

  padding: 34px 30px;

  box-shadow:
    0 25px 70px rgba(106,15,32,.18),
    0 8px 30px rgba(212,175,55,.10);

  border:
    1px solid rgba(255,255,255,.65);

  text-align: center;

  position: relative;

  overflow: hidden;

  animation:
    tintPopupUp 0.28s ease;
}

.lux-popup-card::before,
.lux-popup-box::before {

  content: "";

  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      circle at top right,
      rgba(106,15,32,.16),
      transparent 40%
    );

  pointer-events: none;
}

.lux-popup-message {

  font-family:
    'Poppins',
    sans-serif;

  font-size: 1.08rem;

  line-height: 1.7;

  font-weight: 500;

  letter-spacing: -.1px;

  color: #6a0f20;

  margin-bottom: 26px;

  text-align: center;

  max-width: 520px;

  position: relative;
  z-index: 2;
}

.lux-popup-buttons,
.lux-popup-actions {

  display: flex;
  justify-content: center;
  gap: 14px;

  flex-wrap: wrap;

  position: relative;
  z-index: 2;
}

.lux-popup-btn,
.lux-popup-confirm,
.lux-popup-cancel {

  font-size: 15px;

  letter-spacing: -.2px;

  font-family: 'Poppins', sans-serif;

  border: none;

  padding: 13px 24px;

  border-radius: 999px;

  font-weight: 700;

  font-size: 15px;

  cursor: pointer;

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    opacity .22s ease;
}

.lux-popup-confirm,
.lux-popup-btn.primary {

  background:
    linear-gradient(
      135deg,
      #d4af37,
      #6a0f20
    );

  color: white;

  text-shadow: 0 1px 2px rgba(0,0,0,.18);

  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.4),
    inset 0 -3px 5px rgba(0,0,0,.12),
    0 10px 25px rgba(212,175,55,.25);
}

.lux-popup-cancel,
.lux-popup-btn.secondary {

  background: linear-gradient(180deg,#ffffff,#faf7f6);

  color: #6a0f20;

  border:
    1px solid rgba(106,15,32,.10);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 6px 14px rgba(106,15,32,.06);
}

.lux-popup-confirm:hover,
.lux-popup-btn.primary:hover {

  transform: translateY(-2px);

  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.4),
    inset 0 -3px 5px rgba(0,0,0,.12),
    0 16px 30px rgba(212,175,55,.32);
}

.lux-popup-cancel:hover,
.lux-popup-btn.secondary:hover {

  transform: translateY(-2px);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 14px 28px rgba(106,15,32,.14);
}

.lux-popup-confirm:active,
.lux-popup-btn.primary:active {
  transform: translateY(0);
  box-shadow: inset 0 3px 6px rgba(0,0,0,.25);
}

.lux-popup-cancel:active,
.lux-popup-btn.secondary:active {
  transform: translateY(0);
  box-shadow: inset 0 2px 4px rgba(106,15,32,.15);
}

.success-popup {

  border:
    1px solid rgba(212,175,55,.18);
}

@keyframes tintPopupUp {

  from {
    opacity: 0;
    transform:
      translateY(16px)
      scale(.96);
  }

  to {
    opacity: 1;
    transform:
      translateY(0)
      scale(1);
  }
}

@keyframes tintFadeIn {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
/* =========================================
   TINTLANE DASHBOARD FILTER DROPDOWNS
========================================= */

#listingStatusFilter,
#listingStockFilter,
#sortListings,
#dashboardMode,
#statusFilter,
#dateFilter,
#analyticsTimeFilter,
#analyticsStatusFilter,
#serviceStatusFilter,
#sortServices,
#bookingStatusFilter,
#bookingDateFilter,
#wishlistTypeFilter,
#wishlistSort {

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.96),
      rgba(255,247,245,.96)
    );

  border:
    1px solid rgba(106,15,32,.08);

  color: #6a0f20;

  padding:
    12px 44px 12px 16px;

  border-radius: 16px;

  font-family:
    'Poppins',
    sans-serif;

  font-size: 14px;

  font-weight: 600;

  cursor: pointer;

  box-shadow:
    0 8px 24px rgba(106,15,32,.06);

  transition:
    all .25s ease;

  outline: none;

  min-width: 170px;

  background-image:
    linear-gradient(
      135deg,
      rgba(255,255,255,.96),
      rgba(255,247,245,.96)
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%236a0f20' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  background-repeat:
    no-repeat,
    no-repeat;

  background-position:
    center,
    right 14px center;

}

/* HOVER */

#listingStatusFilter:hover,
#listingStockFilter:hover,
#sortListings:hover,
#dashboardMode:hover,
#statusFilter:hover,
#dateFilter:hover,
#analyticsTimeFilter:hover,
#analyticsStatusFilter:hover,
#serviceStatusFilter:hover,
#sortServices:hover,
#bookingStatusFilter:hover,
#bookingDateFilter:hover,
#wishlistTypeFilter:hover,
#wishlistSort:hover {

  transform:
    translateY(-1px);

  box-shadow:
    0 12px 30px rgba(106,15,32,.10);

  border-color:
    rgba(212,175,55,.35);

}

/* FOCUS */

#listingStatusFilter:focus,
#listingStockFilter:focus,
#sortListings:focus,
#dashboardMode:focus,
#statusFilter:focus,
#dateFilter:focus,
#analyticsTimeFilter:focus,
#analyticsStatusFilter:focus,
#serviceStatusFilter:focus,
#sortServices:focus,
#bookingStatusFilter:focus,
#bookingDateFilter:focus,
#wishlistTypeFilter:focus,
#wishlistSort:focus {

  border-color:
    rgba(212,175,55,.55);

  box-shadow:
    0 0 0 4px rgba(212,175,55,.10);

}
/* =========================================
   TINTLANE LISTING SEARCH
========================================= */

.listing-search-wrap {

  position: relative;

  display: flex;

  align-items: center;

}

#listingSearch {

  width: 320px;

  padding:
    12px 18px;

  border-radius: 16px;

  border:
    1px solid rgba(106,15,32,.08);

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.96),
      rgba(255,247,245,.96)
    );

  color: #6a0f20;

  font-family:
    'Poppins',
    sans-serif;

  font-size: 14px;

  font-weight: 500;

  outline: none;

  transition:
    all .25s ease;

  box-shadow:
    0 8px 24px rgba(106,15,32,.06);

}

#listingSearch::placeholder {

  color: #b58b95;

}

#listingSearch:hover {

  transform:
    translateY(-1px);

  box-shadow:
    0 12px 28px rgba(106,15,32,.10);

}

#listingSearch:focus {

  border-color:
    rgba(212,175,55,.45);

  box-shadow:
    0 0 0 4px rgba(212,175,55,.10);

}
/* =========================================
   TINTLANE ORDERS TOOLBAR — SAME PILL STYLE
   AS THE LISTING SEARCH + FILTER DROPDOWNS
========================================= */

#orderSearch,
#ordersStartDate,
#ordersEndDate,
#serviceSearch,
#bookingSearch,
#bookingStartDate,
#bookingEndDate,
#wishlistSearch,
#followedCreatorsSearch {

  padding: 12px 18px;

  border-radius: 16px;

  border:
    1px solid rgba(106,15,32,.08);

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.96),
      rgba(255,247,245,.96)
    );

  color: #6a0f20;

  font-family:
    'Poppins',
    sans-serif;

  font-size: 14px;

  font-weight: 500;

  outline: none;

  transition: all .25s ease;

  box-shadow:
    0 8px 24px rgba(106,15,32,.06);

}

#orderSearch::placeholder,
#serviceSearch::placeholder,
#bookingSearch::placeholder,
#wishlistSearch::placeholder,
#followedCreatorsSearch::placeholder {

  color: #b58b95;

}

#orderSearch:hover,
#ordersStartDate:hover,
#ordersEndDate:hover,
#serviceSearch:hover,
#bookingSearch:hover,
#bookingStartDate:hover,
#bookingEndDate:hover,
#wishlistSearch:hover,
#followedCreatorsSearch:hover {

  transform: translateY(-1px);

  box-shadow:
    0 12px 28px rgba(106,15,32,.10);

}

#orderSearch:focus,
#ordersStartDate:focus,
#ordersEndDate:focus,
#serviceSearch:focus,
#bookingSearch:focus,
#bookingStartDate:focus,
#bookingEndDate:focus,
#wishlistSearch:focus,
#followedCreatorsSearch:focus {

  border-color:
    rgba(212,175,55,.45);

  box-shadow:
    0 0 0 4px rgba(212,175,55,.10);

}

/* #followedCreatorsSearch keeps its own search icon (account.html's
   ".follow-search-wrap i", absolutely positioned at left:16px) — the
   shared pill padding above is even on both sides, which would run
   the placeholder text straight under that icon. Left padding only,
   restored just for this one field. */
#followedCreatorsSearch {
  padding-left: 44px;
}

#followedGrid .card-img,
#newArrivalsGrid .card-img{

  height:260px;
  overflow:hidden;

}

#followedGrid .card-img img,
#newArrivalsGrid .card-img img{

  width:100%;
  height:100%;
  object-fit:cover;

}
/* ========================================= */
/* FOLLOWED + NEW ARRIVALS SAME CARD SYSTEM */
/* ========================================= */

#newArrivalsGrid .card,
#followedGrid .card{

    position:relative;
    overflow:hidden;
    box-shadow:
  0 10px 24px rgba(20,10,10,.05),
  0 24px 50px rgba(20,10,10,.06),
  0 50px 90px rgba(20,10,10,.04);

border:1px solid #eee2e4;

}

#newArrivalsGrid .card::before,
#followedGrid .card::before{

    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:0;

    background:
      linear-gradient(
        135deg,
        var(--tint1),
        var(--tint2)
      );

    z-index:1;

    transition:height .35s ease;

    /* PREMIUM DEPTH */

    box-shadow:

      inset 0 1px 0 rgba(255,255,255,.35),

      inset 0 -12px 20px rgba(0,0,0,.08),

      inset -8px 0 18px rgba(0,0,0,.04),

      inset 8px 0 18px rgba(255,255,255,.08);

}

#newArrivalsGrid .card:hover::before,
#followedGrid .card:hover::before{

    height:39%;

    box-shadow:

      inset 0 1px 0 rgba(255,255,255,.55),

      inset 0 -16px 24px rgba(0,0,0,.12),

      inset -10px 0 20px rgba(0,0,0,.05),

      inset 10px 0 20px rgba(255,255,255,.10);

}

#newArrivalsGrid .card h3,
#newArrivalsGrid .card .price,
#followedGrid .card h3,
#followedGrid .card .price{

    position:relative;
    z-index:5;

}

#newArrivalsGrid .card:hover h3,
#newArrivalsGrid .card:hover .price,
#followedGrid .card:hover h3,
#followedGrid .card:hover .price{

    color:white;
      text-shadow:
    0 1px 2px rgba(0,0,0,.35),
    0 2px 8px rgba(0,0,0,.25),
    0 0 18px rgba(0,0,0,.18);

}
#followedGrid{

    display:grid;

    grid-template-columns:inherit;

    gap:inherit;

}
/* ===================================== */
/* TINTLANE LUXURY LISTING CARDS */
/* ===================================== */

#newArrivalsGrid,
#followedGrid{

    display:grid;

    grid-template-columns:
    repeat(4,260px);

    gap:28px;

    justify-content:center;

}

@media(max-width:1200px){

  #newArrivalsGrid,
  #followedGrid{

    grid-template-columns:
    repeat(auto-fit,minmax(260px,260px));

  }

}

/* card base */

#newArrivalsGrid .category-card,
#followedGrid .category-card{

    position:relative;
    overflow:hidden;

    border-radius:18px;

    background:#fff;

    transition:
    transform .45s ease,
    box-shadow .45s ease;

    transform-style:preserve-3d;

    box-shadow:
    0 10px 25px rgba(0,0,0,.08);

}

/* image */

#newArrivalsGrid .category-card img,
#followedGrid .category-card img{

    transition:
    transform .5s ease;

}

/* luxury tint */

#newArrivalsGrid .category-card::before,
#followedGrid .category-card::before{

    content:"";
    position:absolute;

    inset:0;

    background:
    linear-gradient(
      135deg,
      var(--tint1),
      var(--tint2)
    );

    opacity:.12;

    transition:.35s ease;

    z-index:1;

}

/* premium corner shading */

#newArrivalsGrid .category-card::after,
#followedGrid .category-card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:18px;

    box-shadow:
      inset 0 2px 2px rgba(255,255,255,.55),
      inset 0 -10px 25px rgba(0,0,0,.12);

    opacity:0;

    transition:.35s ease;

    pointer-events:none;

}

/* hover */

#newArrivalsGrid .category-card:hover,
#followedGrid .category-card:hover{

    transform:
      translateY(-10px)
      scale(1.02);

    box-shadow:
      0 25px 55px rgba(0,0,0,.18);

}

/* image zoom */

#newArrivalsGrid .category-card:hover img,
#followedGrid .category-card:hover img{

    transform:scale(1.08);

}

/* show tint */

#newArrivalsGrid .category-card:hover::before,
#followedGrid .category-card:hover::before{

    opacity:.28;

}

/* show luxury shading */

#newArrivalsGrid .category-card:hover::after,
#followedGrid .category-card:hover::after{

    opacity:1;

}

/* text above tint */

#newArrivalsGrid .category-card h3,
#newArrivalsGrid .category-card .price,
#newArrivalsGrid .badge,

#followedGrid .category-card h3,
#followedGrid .category-card .price{

    position:relative;

    z-index:5;

}
#products,
#services,
#followedFeed,
#newArrivals{

    padding-top:20px !important;

}
#newArrivals{

    padding-bottom:100px !important;

}
/* ================================= */
/* TINTLANE CATEGORY EXPERIENCE */
/* ================================= */

.category-page{
  max-width:1400px;
  margin:0 auto;
  padding:40px 5% 80px;
  /* overflow-x:hidden intentionally NOT set here — this box is centered and
     narrower than the viewport, so it would clip .browse-sidebar's full-bleed
     breakout down to a sliver. The safety net now lives on body instead,
     which spans the true viewport width. */
}

.category-hero{
  margin-bottom:50px;
}

.category-breadcrumb{
  /* Redundant with the shared breadcrumb component already mounted at
     the top of these pages (#site-breadcrumb-mount) — this was a second,
     duplicate "Home › Category" row sitting directly above the page
     heading. Removed on every device, not just mobile. */
  display:none;
  gap:10px;
  align-items:center;
  color:#8a6f6f;
  font-size:14px;
  margin-bottom:18px;
}

.category-breadcrumb a{
  text-decoration:none;
  color:#6a0f20;
}

.category-hero h1{
  font-size:52px;
  margin:0;
  color:#111;
  font-family:'Playfair Display',serif;
}

.category-subtitle{
  max-width:650px;
  font-size:18px;
  line-height:1.7;
  color:#6d5d5d;
  margin-top:12px;
}

.category-meta{
  margin-top:24px;
}

.category-meta span{
  background:#fff;
  padding:10px 16px;
  border-radius:999px;
  font-weight:700;
  box-shadow:0 8px 20px rgba(0,0,0,.05);
}

/* Smaller, premium-style hero heading — opt-in via .compact-hero so
   products.html, services.html AND category.html can share it, while any
   other page still reusing .category-hero keeps the original larger size.

   On these pages .category-hero now lives INSIDE .browse-main (a sibling of
   .browse-sidebar, both inside the full-bleed .browse-layout row), so the
   sidebar runs the full height alongside the heading AND the results grid,
   and the heading naturally lines up with the grid below it — no separate
   breakout/padding math needed here anymore. */
.category-hero.compact-hero{
  margin-bottom:30px;
}
.category-hero.compact-hero .category-breadcrumb{
  margin-bottom:12px;
}
.category-hero.compact-hero h1{
  font-size:28px;
  font-weight:700;
  letter-spacing:.5px;
}
.category-hero.compact-hero .category-subtitle{
  font-size:14.5px;
  margin-top:6px;
  max-width:560px;
}

/* ==========================================
   PRODUCTS / SERVICES "browse all" layout —
   collapsible category sidebar + main grid.
========================================== */
/* Sidebar breaks out of the page's centered max-width container and sits
   flush against the true left edge of the viewport, industry-standard
   filter-panel style (Amazon/Flipkart-like), regardless of screen width. */
.browse-layout{
  display:flex;
  align-items:flex-start;
  gap:0;
  margin-left:calc(50% - 50vw);
  /* Previously only the left edge broke out of .category-page's
     max-width:1400px/centered wrapper (to flush the sidebar against
     the true viewport edge) — the right side never got the same
     treatment, so on any screen wider than ~1400px .browse-main (the
     toolbar bar, the grid, everything) fell short of the actual right
     edge of the page, leaving a large dead strip of unused space.
     Mirrored here so the whole row spans the true viewport on both
     sides now. */
  margin-right:calc(50% - 50vw);
}
.browse-main{
  flex:1;
  min-width:0;
  padding-left:32px;
  padding-right:32px;
}

/* No internal scrolling and no height coupling to the main column — the
   sidebar always shows its full content at its own natural height, even
   when a strict filter leaves the results grid very short. */
.browse-sidebar{
  width:280px;
  flex-shrink:0;
  background:#fff;
  border-radius:0 22px 22px 0;
  box-shadow:
    0 18px 40px rgba(106,15,32,.06);
  border:1px solid rgba(212,175,55,.16);
  border-left:none;
  position:sticky;
  top:92px; /* matches the sticky .navbar's actual height, same offset as .category-toolbar */
  transition:width .25s ease, padding .25s ease, box-shadow .25s ease;
}

.browse-sidebar-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 22px 16px;
  border-bottom:1px solid rgba(212,175,55,.22);
  background:#fffdfa;
  border-radius:0 22px 0 0;
}
.browse-sidebar-head h3{
  margin:0;
  font-family:'Poppins',sans-serif;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:2.2px;
  text-transform:uppercase;
  color:#8a6f5a;
  white-space:nowrap;
  overflow:hidden;
}
.sidebar-toggle-btn{
  border:1px solid rgba(212,175,55,.35);
  background:linear-gradient(180deg,#ffffff,#fdfaf8);
  color:var(--burgundy);
  width:32px;
  height:32px;
  border-radius:50%;
  cursor:pointer;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 6px 14px rgba(106,15,32,.10),
    0 2px 4px rgba(106,15,32,.08);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.sidebar-toggle-btn:hover{
  background:var(--burgundy);
  color:#fff;
  border-color:var(--burgundy);
  transform:translateY(-2px);
  box-shadow:
    0 10px 20px rgba(106,15,32,.24),
    0 3px 6px rgba(106,15,32,.16);
}
.sidebar-toggle-btn:active{
  transform:translateY(0);
  box-shadow:inset 0 3px 6px rgba(0,0,0,.25);
}

.sidebar-clear-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:12px 16px 0;
  border:none;
  background:none;
  color:var(--burgundy);
  font-size:12px;
  font-weight:700;
  letter-spacing:.3px;
  cursor:pointer;
  padding:2px 0;
}
.sidebar-clear-btn i{ font-size:10px; }
.sidebar-clear-btn:hover{ color:var(--wine); text-decoration:underline; }
/* !important needed: the JS toggles this button's inline style.display
   whenever a filter is active/cleared, and an inline style always beats a
   plain class rule — without !important this rule loses that fight and the
   button stays visible (wrapping awkwardly) inside the collapsed 56px rail. */
.browse-sidebar.collapsed .sidebar-clear-btn{ display:none !important; }

.browse-sidebar-body{
  padding:16px 16px 26px;
}

.sidebar-all-btn{
  width:100%;
  text-align:left;
  border:1px solid rgba(212,175,55,.3);
  background:linear-gradient(180deg,#ffffff,#fffdfa);
  color:#3a2a2a;
  font-weight:600;
  font-size:13.5px;
  letter-spacing:.3px;
  padding:11px 14px;
  border-radius:10px;
  cursor:pointer;
  margin-bottom:16px;
  display:flex;
  align-items:center;
  gap:9px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 4px 10px rgba(106,15,32,.06);
  transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.sidebar-all-btn i{ font-size:12px; color:#c7a84f; }
.sidebar-all-btn.active{
  background:#fbf6ea;
  color:var(--burgundy);
  border-color:var(--gold);
  font-weight:700;
  box-shadow:
    inset 0 1px 3px rgba(106,15,32,.10),
    0 4px 10px rgba(106,15,32,.10);
}
.sidebar-all-btn.active i{ color:var(--burgundy); }
.sidebar-all-btn:hover{
  border-color:var(--gold);
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 8px 16px rgba(106,15,32,.12);
}
.sidebar-all-btn:active{
  transform:translateY(0);
  box-shadow:inset 0 2px 4px rgba(106,15,32,.15);
}

.sidebar-group{
  border-top:none;
  margin-bottom:10px;
}

/* Top-level category rows get the same embossed-pill treatment as the
   account page sidebar's nav buttons (.account-link-btn): a standalone
   card with a background, rounded corners and a resting shadow — not
   just a plain text row. The nested sub-category rows underneath stay
   as lighter list rows so the tree doesn't turn into a wall of pills. */
.sidebar-group-head{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  border:none;
  background:linear-gradient(180deg,#ffffff,#faf6f4);
  border-radius:14px;
  padding:14px 16px;
  font-family:'Poppins',sans-serif;
  font-weight:600;
  font-size:11.5px;
  letter-spacing:1.3px;
  text-transform:uppercase;
  color:#5a4640;
  cursor:pointer;
  text-align:left;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 2px rgba(106,15,32,.05),
    0 6px 14px rgba(106,15,32,.07),
    0 2px 4px rgba(106,15,32,.05);
  transition:transform .2s ease, color .2s ease, box-shadow .2s ease, background .2s ease;
}
.sidebar-group-head:hover{
  color:var(--burgundy);
  transform:translateY(-2px);
  background:linear-gradient(135deg, rgba(212,175,55,.15), rgba(106,15,32,.15));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 10px 20px rgba(106,15,32,.14),
    0 3px 6px rgba(106,15,32,.10);
}
.sidebar-group-head:active{
  transform:translateY(0);
  box-shadow:inset 0 3px 6px rgba(106,15,32,.15);
}
.sidebar-group.open .sidebar-group-head{
  background:#fbf6ea;
  box-shadow:
    inset 0 1px 3px rgba(106,15,32,.10),
    0 4px 10px rgba(106,15,32,.10);
}
.sidebar-cat-label{
  display:inline-flex;
  align-items:center;
  gap:9px;
}
.sidebar-cat-icon{
  font-size:12.5px;
  width:15px;
  text-align:center;
  flex-shrink:0;
  color:#c7a84f; /* same muted gold as .sidebar-all-btn's icon, for consistency */
  transition:color .2s ease;
}
.sidebar-group.open .sidebar-cat-icon,
.sidebar-group-head:hover .sidebar-cat-icon{
  color:var(--burgundy);
}
.sidebar-group.open .sidebar-group-head{ color:var(--burgundy); }
.sidebar-chevron{
  font-size:10px;
  color:#c7a84f;
  transition:transform .25s ease;
}
.sidebar-group.open .sidebar-chevron{ transform:rotate(180deg); }

.sidebar-subcats{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .28s ease;
}
.sidebar-subcats-inner{ overflow:hidden; }
.sidebar-group.open .sidebar-subcats{ grid-template-rows:1fr; }

.sidebar-sub-btn{
  position:relative;
  display:block;
  width:100%;
  text-align:left;
  border:none;
  background:none;
  padding:9px 10px 9px 20px;
  font-size:13px;
  font-weight:400;
  letter-spacing:.2px;
  color:#7a6a63;
  cursor:pointer;
  border-radius:0 8px 8px 0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:background .2s ease, color .2s ease;
}
.sidebar-sub-btn::before{
  content:"";
  position:absolute;
  left:0; top:8px; bottom:8px;
  width:2px;
  background:transparent;
  transition:background .2s ease;
}
.sidebar-sub-btn:hover{
  background:#faf6ee;
  color:#4a3630;
  box-shadow:inset 0 1px 4px rgba(106,15,32,.06);
}
.sidebar-sub-btn:active{
  box-shadow:inset 0 2px 5px rgba(106,15,32,.12);
}
.sidebar-sub-btn.active{
  background:#fbf6ea;
  color:var(--burgundy);
  font-weight:600;
  box-shadow:inset 0 1px 4px rgba(106,15,32,.08);
}
.sidebar-sub-btn.active::before{ background:var(--gold); }
.sidebar-main-btn{
  font-weight:600;
  color:#4a3630;
  letter-spacing:.2px;
  padding-left:12px;
}

/* Collapsed state: shrink to a slim rail, hide labels. min-height keeps it
   a tall, clean bar instead of shrinking down to a stubby floating capsule
   once the body content (which normally gives it its height) is hidden. */
.browse-sidebar.collapsed{
  width:56px;
  min-height:calc(100vh - 140px);
}
.browse-sidebar.collapsed .browse-sidebar-head h3,
.browse-sidebar.collapsed .browse-sidebar-body{
  display:none;
}

/* Icon-only rail: hidden while the sidebar is expanded (the full text tree
   already covers this), shown only in the collapsed 56px state so a category
   is still one click away without reopening the panel first. */
.browse-sidebar-rail{
  display:none;
}
.browse-sidebar.collapsed .browse-sidebar-rail{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:14px 8px 20px;
}
/* Matches .account-link-btn's collapsed treatment exactly: a soft
   embossed background + shadow, no hard outline — the border was
   making these read as "boxed chrome" next to the account sidebar's
   softer, borderless icon tiles. */
.sidebar-rail-btn{
  width:38px;
  height:38px;
  flex-shrink:0;
  border:none;
  background:linear-gradient(180deg,#ffffff,#faf6f4);
  border-radius:12px;
  font-size:17px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 2px rgba(106,15,32,.05),
    0 6px 14px rgba(106,15,32,.08),
    0 2px 4px rgba(106,15,32,.06);
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.sidebar-rail-btn:hover{
  background:linear-gradient(135deg, rgba(212,175,55,.15), rgba(106,15,32,.15));
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 10px 20px rgba(106,15,32,.14),
    0 3px 6px rgba(106,15,32,.10);
}
.sidebar-rail-btn:active{
  transform:translateY(0);
  box-shadow:inset 0 2px 4px rgba(106,15,32,.18);
}
.sidebar-rail-btn.active{
  background:linear-gradient(180deg,#fdf6e6,#fbf6ea);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 2px rgba(106,15,32,.10),
    0 6px 14px rgba(106,15,32,.16),
    0 2px 4px rgba(106,15,32,.12);
}
.sidebar-rail-btn i{
  color:#c7a84f;
  transition:color .2s ease;
}
.sidebar-rail-btn:hover i,
.sidebar-rail-btn.active i{
  color:var(--burgundy);
}
@media (max-width:900px){
  .browse-sidebar.collapsed .browse-sidebar-rail{
    display:none;
  }
}

.active-filter-pill{
  display:inline-block;
  margin-left:12px;
  font-size:13px;
  color:#8a6f76;
  /* Keep the "Filtering: X — Y" label on one line no matter how long
     the category/subcategory name is — it used to wrap across 2-3
     lines and blow out the toolbar's height. Truncates with an
     ellipsis instead (safe here since this is a plain span, not the
     native <select> that has the documented Chrome ellipsis-corruption
     bug noted elsewhere in this file). */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
  flex:1;
  vertical-align:bottom;
}
.active-filter-pill strong{ color:var(--burgundy); }

.browse-main .category-grid.browse-grid{
  grid-template-columns:repeat(3,1fr);
}
@media (min-width:1201px){
  .browse-sidebar.collapsed ~ .browse-main .category-grid.browse-grid{
    grid-template-columns:repeat(4,1fr);
  }
}
@media (max-width:1200px){
  .browse-main .category-grid.browse-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:901px) and (max-width:1200px){
  .browse-sidebar.collapsed ~ .browse-main .category-grid.browse-grid{
    grid-template-columns:repeat(3,1fr);
  }
}
/* SINGLE-LISTING CATEGORIES — desktop/tablet only (>=769px; mobile is
   handled entirely by mobile-shared.css and is untouched here).
   The grid container's own available width was proven (via testing)
   to render inconsistently between different category pages even at
   an identical window size, so a lone card sized as a fraction of
   that container inherited the same inconsistency. Sidestepping it
   entirely: for a category with exactly one listing, the row switches
   from a grid to a centered flex row and the card is sized directly
   off the viewport width (clamp, independent of the unstable
   container), giving it the same, predictable size every time,
   matching a normal card's scale. Left-aligned (not centered) so it
   sits flush with the sidebar edge, exactly where a normal grid's
   first card would land. Categories with more than one listing
   (:has() only matches when there's exactly one card) are completely
   unaffected — they keep using the grid exactly as before. */
@media (min-width:769px){
  .browse-main .category-grid.browse-grid:has(> .category-lux-card:only-child){
    display:flex;
    justify-content:flex-start;
  }
  .browse-main .category-grid.browse-grid > .category-lux-card:only-child{
    width:clamp(280px, 21vw, 420px);
    flex-shrink:0;
  }
}
@media (max-width:640px){
  .browse-main .category-grid.browse-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
}

@media (max-width:900px){
  /* Mobile stacks sidebar above main (flex-direction:column) and never
     had the desktop full-bleed treatment — margin-left was already
     reset to 0 here. The new margin-right/padding-right added to the
     desktop full-bleed fix apply everywhere by default (no media
     query of their own), so without resetting them here too, mobile
     would inherit a negative margin-right, pushing the stacked layout
     past the true right edge and causing horizontal overflow. Reset
     to 0 here, same as the left side always was. */
  .browse-layout{ flex-direction:column; margin-left:0; margin-right:0; }
  .browse-main{ padding-left:0; padding-right:0; }
  .browse-sidebar{
    width:100%;
    position:static;
    max-height:none;
    border-radius:22px;
    border-left:1px solid rgba(212,175,55,.16);
  }
  .browse-sidebar.collapsed{ width:100%; min-height:0; }
  .browse-sidebar.collapsed .browse-sidebar-body{ display:none; }
  .browse-sidebar:not(.collapsed) .browse-sidebar-body{ display:block; }
}

.category-grid{

  display:grid;

  grid-template-columns:
  repeat(4,minmax(0,1fr));

  gap:28px;

  align-items:start;

}
@media(max-width:1200px){

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

}

@media(max-width:900px){

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

}

@media(max-width:600px){

  .category-grid{
    grid-template-columns:repeat(2,1fr);
    gap:12px;
  }

}

.category-empty{
  text-align:center;
  color:#8a6f6f;
  padding:60px 0;
}
.category-grid .card img{

  height:220px;
  object-fit:cover;

}

.category-grid .card{

  min-height:auto;

}
/* CATEGORY PAGE CARD GRID */

.category-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
  perspective:1200px;
}

.category-grid .card{
  transform-style:preserve-3d;
  will-change:transform;
}

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

@media (max-width:900px){
  .category-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width:600px){
  .category-grid{
    grid-template-columns:repeat(2,1fr);
    gap:12px;
  }
}
/* ================================= */
/* CATEGORY PAGE TINT ONLY */
/* ================================= */

.category-grid .card .bottom-tint{
    height:18%;
    opacity:0;
    transition:
    opacity .3s ease,
    height .35s ease;
}

.category-grid .card:hover .bottom-tint{

    opacity:1;

    height:42%;

    transform:translateY(0);

    filter:saturate(1.2);

    box-shadow:

        inset 0 20px 35px rgba(255,255,255,.08),

        inset 0 -40px 60px rgba(0,0,0,.12),

        0 -8px 24px rgba(var(--tint-rgb),.25);


}
.card .bottom-tint{
  position:absolute;
  left:0;
  right:0;
  bottom:0;

  height:18%;

  opacity:0;

  pointer-events:none;

  transition:
  opacity .28s ease,
  transform .35s cubic-bezier(.2,.9,.25,1);

  border-bottom-left-radius:14px;
  border-bottom-right-radius:14px;
}

.card:hover .bottom-tint{

  opacity:1;

  height:28%;    /* HOMEPAGE HEIGHT */

}
/* =====================================
   FEATURED CREATORS TINT
===================================== */

#featuredCreators .card:hover .bottom-tint{
    height:48%;
}

/* =====================================
   CATEGORY PAGE TINT
===================================== */

.category-grid .card:hover .bottom-tint{
    height:45%;
}

.listing-content{
padding:16px;
position:relative;
z-index:2;
}

.creator-line{

display:flex;

align-items:center;

gap:16px;

margin:20px 0;

}
.creator-link{

font-size:15px;

font-weight:600;

color:#222;

text-decoration:none;

}

.follow-btn{

height:38px;

padding:0 18px;

border:none;

border-radius:999px;

background:linear-gradient(180deg,#f3e6c8,#ecd7a8);

color:#6a0f20;

font-weight:600;

cursor:pointer;

box-shadow:
  inset 0 1px 0 rgba(255,255,255,.8),
  inset 0 -1px 2px rgba(106,15,32,.08),
  0 8px 18px rgba(106,15,32,.14),
  0 2px 4px rgba(106,15,32,.10);

transition:transform .25s ease, box-shadow .25s ease;

}

.follow-btn:hover{

transform:translateY(-2px);

box-shadow:
  inset 0 1px 0 rgba(255,255,255,.8),
  0 12px 24px rgba(106,15,32,.20),
  0 3px 6px rgba(106,15,32,.14);

}

.follow-btn:active{

transform:translateY(0);

box-shadow:inset 0 3px 6px rgba(106,15,32,.20);

}

.creator-avatar{
width:34px;
height:34px;
border-radius:50%;
background:linear-gradient(
135deg,
var(--tint1),
var(--tint2)
);
display:flex;
align-items:center;
justify-content:center;
color:white;
font-weight:700;
font-size:13px;
}

.verified-badge{
color:#1d9bf0;
font-size:13px;
}

.listing-rating{
margin-top:8px;
font-size:13px;
font-weight:600;
color:#d4af37;
}

.listing-rating span{
color:#444;
margin-left:4px;
}

.sales-row{
margin-top:10px;
font-size:12px;
opacity:.75;
}

@keyframes heartPop{

0%{
transform:scale(.6);
}

60%{
transform:scale(1.18);
}

100%{
transform:scale(1);
}

}

/* =========================
   PREMIUM REVIEW MODAL
========================= */

.review-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,.55);
backdrop-filter:blur(10px);
display:none;
align-items:center;
justify-content:center;
z-index:99999;
}

.review-modal{
width:520px;
background:white;
border-radius:32px;
padding:40px;
position:relative;
box-shadow:
0 30px 80px rgba(0,0,0,.18);
animation:reviewPop .25s ease;
}

@keyframes reviewPop{
from{
transform:translateY(30px);
opacity:0;
}
to{
transform:none;
opacity:1;
}
}

.review-close{
position:absolute;
right:22px;
top:22px;

width:46px;
height:46px;

border:none;
cursor:pointer;

border-radius:50%;

background:linear-gradient(180deg,#ffffff,#f7f4f5);

font-size:22px;

box-shadow:
  inset 0 1px 0 rgba(255,255,255,.9),
  inset 0 -1px 2px rgba(0,0,0,.05),
  0 8px 18px rgba(0,0,0,.10),
  0 2px 4px rgba(0,0,0,.08);

transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.review-close:hover{
background:#efe7ea;
transform:rotate(90deg) translateY(-1px);
box-shadow:
  inset 0 1px 0 rgba(255,255,255,.9),
  0 12px 24px rgba(0,0,0,.16),
  0 3px 6px rgba(0,0,0,.10);
}

.review-close:active{
box-shadow:inset 0 2px 5px rgba(0,0,0,.20);
}

.review-title{
margin:0;
font-size:34px;
font-family:'Playfair Display',serif;
color:#6b1726;
text-align:center;
}

.review-subtitle{
text-align:center;
color:#85727a;
margin-top:10px;
margin-bottom:30px;
}

.star-rating{
  display:flex;
  justify-content:center;
  gap:14px;
  margin-bottom:30px;
}

.star{

  appearance:none;
  -webkit-appearance:none;

  border:none !important;
  background:transparent !important;

  width:auto;
  height:auto;
  padding:0;

  cursor:pointer;

  font-size:52px;
  line-height:1;

  color:#e5dce0;

  transition:
  transform .25s ease,
  color .25s ease,
  text-shadow .25s ease;

  box-shadow:none !important;
}

.star:hover{
  transform:scale(1.15);
}

.star.active{

  color:#d4af37;

  text-shadow:
  0 0 12px rgba(212,175,55,.35);

}

.review-textarea{
width:100%;
height:160px;
border:1px solid #ece5e8;
border-radius:20px;
padding:18px;
font-family:Poppins;
font-size:15px;
resize:none;
}

.review-submit-btn{
margin-top:24px;
width:100%;
height:58px;
border:none;
border-radius:999px;
cursor:pointer;
font-weight:700;
font-size:16px;
color:white;
text-shadow:0 1px 2px rgba(0,0,0,.18);
background:
linear-gradient(
135deg,
#d4af37,
#6a0f20
);
box-shadow:
  inset 0 1px 1px rgba(255,255,255,.4),
  inset 0 -3px 5px rgba(0,0,0,.12),
  0 12px 24px rgba(212,175,55,.28),
  0 3px 6px rgba(212,175,55,.18);
transition:transform .25s ease, box-shadow .25s ease;
}
.review-submit-btn:hover{
transform:translateY(-2px);
box-shadow:
  inset 0 1px 1px rgba(255,255,255,.4),
  inset 0 -3px 5px rgba(0,0,0,.12),
  0 18px 32px rgba(212,175,55,.36),
  0 5px 10px rgba(212,175,55,.22);
}
.review-submit-btn:active{
transform:translateY(0);
box-shadow:inset 0 3px 6px rgba(0,0,0,.25);
}
.review-btn{
min-width:150px;
white-space:nowrap;
margin-top:25px;
border:none;
cursor:pointer;
padding:8px 22px;
border-radius:999px;
font-weight:700;
font-size:14px;
color:white;
text-shadow:0 1px 2px rgba(0,0,0,.18);

background:
linear-gradient(
135deg,
#d4af37,
#6a0f20
);

box-shadow:
  inset 0 1px 1px rgba(255,255,255,.4),
  inset 0 -3px 5px rgba(0,0,0,.12),
  0 10px 20px rgba(212,175,55,.28),
  0 3px 6px rgba(212,175,55,.18);

transition:transform .3s ease, box-shadow .3s ease;
}

.review-btn:hover{
transform:translateY(-2px);
box-shadow:
  inset 0 1px 1px rgba(255,255,255,.4),
  inset 0 -3px 5px rgba(0,0,0,.12),
  0 16px 30px rgba(212,175,55,.36),
  0 5px 10px rgba(212,175,55,.22);
}

.review-btn:active{
transform:translateY(0);
box-shadow:inset 0 3px 6px rgba(0,0,0,.25);
}
.order-actions{
  display:flex;
  gap:16px;
  margin-top:24px;
}

.review-btn,
.chat-fab-btn{
display:flex;

align-items:center;
justify-content:center;

gap:8px;

min-width:190px;

height:56px;

padding:0 26px;

border:none;

border-radius:999px;

cursor:pointer;

font-weight:700;

font-size:16px;

white-space:nowrap;

color:white;

background:
linear-gradient(
135deg,
#d4af37,
#6a0f20
);

box-shadow:
0 12px 24px rgba(106,15,32,.12);

transition:.3s ease;

}

/* ===== MY ORDERS BUTTONS ===== */

.order-actions{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:20px;
}

.review-btn,
.chat-fab-btn{

  width:150px;
  height:60px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:none;
  border-radius:999px;

  font-size:15px;
  font-weight:700;

  white-space:nowrap;

  background:
  linear-gradient(
    135deg,
    #d4af37,
    #6a0f20
  );

  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.18);
  cursor:pointer;

  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.4),
    inset 0 -3px 5px rgba(0,0,0,.12),
    0 12px 24px rgba(106,15,32,.20),
    0 3px 6px rgba(106,15,32,.14);

  transition:transform .25s ease, box-shadow .25s ease;
}

.review-btn:hover,
.chat-fab-btn:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.4),
    inset 0 -3px 5px rgba(0,0,0,.12),
    0 18px 34px rgba(106,15,32,.28),
    0 5px 10px rgba(106,15,32,.18);
}

.review-btn:active,
.chat-fab-btn:active{
  transform:translateY(0);
  box-shadow:inset 0 3px 6px rgba(0,0,0,.25);
}

.listing-layout::before{

content:"";

position:absolute;

inset:0;

background:

radial-gradient(
circle at top right,
rgba(212,175,55,.12),
transparent 40%
),

radial-gradient(
circle at bottom left,
rgba(106,15,32,.12),
transparent 40%
);

pointer-events:none;

}

.listing-layout:hover{

transform:translateY(-4px);

transition:.4s;

}

.primary-btn{

width:100%;

height:52px;

border:none;

border-radius:999px;

font-size:18px;

font-weight:700;

cursor:pointer;

background:
linear-gradient(
135deg,
var(--tint1),
var(--tint2)
);

color:white;

margin-top:10px;

}

.visit-shop-btn{

width:100%;

height:52px;

display:flex;

align-items:center;

justify-content:center;

border-radius:999px;

text-decoration:none;

margin-top:14px;

border:1px solid #e8e8e8;

font-weight:700;

font-size:17px;

color:#222;

background:#fff;

}/* ==================================
LUXURY LISTING V2
================================== */

.listing-layout{
  padding:30px;
  box-sizing:border-box;
  display:grid;
  grid-template-columns:58% 42%;
  gap:32px;
  align-items:start;
}

.listing-image{
  width:100%;
  height:620px;
  border-radius:24px;
  overflow:hidden;
  background:#f7f3f5;
}

.listing-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.gallery-thumbs{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:8px;
  margin-top:12px;
}

.thumb-img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:10px;
}

.thumb-img.active{
  border:2px solid var(--tint1);
  box-shadow:
  0 10px 25px rgba(106,15,32,.15);
}

.gallery-thumbs img:hover{

transform:translateY(-4px);

border-color:var(--tint1);

}

.listing-details{
  padding:20px 35px 20px 25px;
  display:flex;
  flex-direction:column;
  gap:14px;
  box-sizing:border-box;
}

.listing-topbar{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:16px;

}

.listing-title{

height:58px;

font-size:24px;

font-weight:700;

line-height:1.25;

overflow:hidden;

display:-webkit-box;

-webkit-line-clamp:2;

-webkit-box-orient:vertical;

margin:14px 0 12px;

}

.listing-meta{
  display:flex;
  gap:10px;
  align-items:center;
  font-size:15px;
  color:#777;
  margin:4px 0 8px;
}

.listing-price{

font-size:32px;

font-weight:800;

margin:0;

color:#111;

}
.price-location-row{
  display:flex;
  align-items:center;
  gap:16px;
  margin:4px 0 12px;
}

.listing-location-inline{
  font-size:15px;
  color:#6a0f20;
  font-weight:600;
  background:#fff8fb;
  border:1px solid #f2d8e2;
  padding:8px 14px;
  border-radius:999px;
}

/* "+N more" trigger shown inline in the location pill when a seller
   ships to more than 2 states/cities — opens .location-popover. */
.listing-location-more{
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:2px;
  margin-left:2px;
}

/* Small anchored popover (built at runtime by listing.js) listing
   every place a seller ships to — positioned just under the "+N
   more" trigger rather than a full-screen modal, since it's a short
   supplementary list, not a decision the buyer needs to confirm. */
.location-popover{
  position:absolute;
  z-index:60;
  background:#fff;
  border:1px solid #f2d8e2;
  border-radius:14px;
  box-shadow:0 14px 30px rgba(106,15,32,.18);
  padding:14px 16px;
  min-width:180px;
  max-width:260px;
}
.location-popover-title{
  font-size:12px;
  font-weight:700;
  color:#6a0f20;
  text-transform:uppercase;
  letter-spacing:.03em;
  margin-bottom:8px;
  display:flex;
  align-items:center;
  gap:6px;
}
.location-popover-list{
  list-style:none;
  margin:0;
  padding:0;
  max-height:200px;
  overflow-y:auto;
}
.location-popover-list li{
  font-size:13.5px;
  color:#3a2a2e;
  padding:5px 0;
  border-bottom:1px solid #f7ecef;
}
.location-popover-list li:last-child{ border-bottom:none; }

/* Estimated delivery pill, seller-set — sits directly below the location
   pill above (same visual language), on its own row so it never disturbs
   the price/stock/location row's layout. Only rendered by listing.js when
   the seller actually set a delivery estimate. */
.listing-delivery-inline{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:15px;
  color:#6a0f20;
  font-weight:600;
  background:#fff8fb;
  border:1px solid #f2d8e2;
  padding:8px 14px;
  border-radius:999px;
  margin:0 0 12px;
}

.listing-desc{
  color:#555;
  font-size:15px;
  line-height:1.7;
  margin:12px 0;
  padding-right:0;
  overflow:visible;
  display:block;
}

.creator-card{
  max-width:1450px;
  width:100%;
  margin:0 auto;
display:flex;

align-items:center;

justify-content:space-between;

gap:24px;

padding:22px;

border-radius:24px;

background:#fff;

border:1px solid #eee;

box-shadow:
0 10px 24px rgba(0,0,0,.04);

}

.creator-left{
display:flex;
align-items:center;
gap:18px;
flex:1;
}

.creator-info{
display:flex;
flex-direction:column;
gap:6px;
}

.creator-name{
font-size:20px;
font-weight:700;
line-height:1;
text-shadow:
0 1px 0 rgba(255,255,255,.6),
0 2px 4px rgba(74,4,19,.18);
}

.creator-sub{
display:flex;
align-items:center;
gap:12px;
flex-wrap:wrap;
font-size:15px;
color:#666;
}

.creator-avatar{

position:relative;
overflow:hidden;

width:70px;
height:70px;

border-radius:50%;

font-size:28px;

display:flex;
align-items:center;
justify-content:center;

color:white;

font-weight:700;
text-shadow:0 2px 3px rgba(0,0,0,.35);

background:
linear-gradient(
135deg,
var(--tint1),
var(--tint2)
);

/* Pushed well past a flat drop shadow into an actual glossy-sphere
   look: a wide dark outer shadow lifts it off the card, a thin bright
   rim traces the top-left edge where light would catch, and a heavy
   inset shade wraps the bottom-right so the circle reads as curved
   rather than a flat tinted disc. The ::before sheen below adds the
   glassy highlight on top. */
box-shadow:
0 14px 26px rgba(74,4,19,.32),
0 5px 10px rgba(0,0,0,.2),
inset 0 3px 4px rgba(255,255,255,.55),
inset 0 -8px 12px rgba(0,0,0,.32),
inset 5px 5px 6px rgba(255,255,255,.15);

}

.creator-avatar::before{
content:"";
position:absolute;
top:6%;
left:16%;
width:60%;
height:42%;
border-radius:50%;
background:linear-gradient(
180deg,
rgba(255,255,255,.65),
rgba(255,255,255,0)
);
filter:blur(1px);
pointer-events:none;
}

.creator-meta h3{

margin:0;

font-size:24px;

font-weight:700;

}

.creator-meta p{

margin:6px 0 0;

font-size:15px;

color:#777;

}

.primary-btn{

flex:1;
width:100%;
background:
linear-gradient(
135deg,
var(--tint1),
var(--tint2)
);

color:white;
text-shadow:0 1px 2px rgba(0,0,0,.20);

border:none;

cursor:pointer;

box-shadow:
  inset 0 1px 1px rgba(255,255,255,.35),
  inset 0 -3px 5px rgba(0,0,0,.15),
  0 12px 30px rgba(0,0,0,.16),
  0 3px 6px rgba(0,0,0,.12);

}

.primary-btn:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.35),
    inset 0 -3px 5px rgba(0,0,0,.15),
    0 18px 36px rgba(0,0,0,.24),
    0 4px 8px rgba(0,0,0,.16);
}

.primary-btn:active{
  transform:translateY(0);
  box-shadow:inset 0 3px 6px rgba(0,0,0,.30);
}

.visit-shop-btn{
width:100%;
text-align:center;
flex:1;

background:linear-gradient(180deg,#ffffff,#f7f7f7);

border:1px solid #e7e7e7;

color:#111;

box-shadow:
  inset 0 1px 0 rgba(255,255,255,.9),
  0 8px 18px rgba(0,0,0,.08),
  0 2px 4px rgba(0,0,0,.06);

}

.visit-shop-btn:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 12px 24px rgba(0,0,0,.12),
    0 3px 6px rgba(0,0,0,.08);
}

.visit-shop-btn:active{
  transform:translateY(0);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.15);
}

.action-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  width:100%;
  margin-top:18px;
}

.primary-btn,
.visit-shop-btn{
width:100%;
min-width:0;
box-sizing:border-box;
height:48px;
font-size:17px;
font-weight:600;
border-radius:18px;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
transition:transform .25s ease, box-shadow .25s ease;
}
/* ==========================================
   FEATURED CREATOR CARDS
========================================== */

#featuredCreators .card{

position:relative;

background:#fff;

border-radius:24px;

overflow:hidden;

display:flex;

flex-direction:column;

height:400px;

padding:0;

box-shadow:
0 12px 30px rgba(0,0,0,.08);

transition:.3s;

}

#featuredCreators .card:hover{

transform:translateY(-6px);

box-shadow:
0 18px 40px rgba(0,0,0,.12);

}

#featuredCreators .card::after{

content:"";

position:absolute;

left:0;
right:0;
bottom:0;

height:120px;

background:
linear-gradient(
135deg,
rgba(106,15,32,.22),
rgba(212,175,55,.22)
);

pointer-events:none;

z-index:1;

}

/* IMAGE */

#featuredCreators .card img{

width:100%;

height:210px;

object-fit:cover;

display:block;

flex-shrink:0;

}

/* TITLE */

#featuredCreators .card h3{

margin:-10px;

text-align:center;

font-size:18px;

font-weight:700;

color:#222;

position:relative;

z-index:2;

}

/* DESCRIPTION */

#featuredCreators .creator-tag{

padding:0 18px;

text-align:center;

font-size:15px;

line-height:1.45;

color:#6b1726;

height:100px;

overflow:hidden;

display:-webkit-box;

-webkit-line-clamp:2;

-webkit-box-orient:vertical;

position:relative;

z-index:2;

}

/* PUSH BUTTON TO BOTTOM */

#featuredCreators .card .btn.small{

margin-top:auto;

margin-left:auto;

margin-right:auto;

margin-bottom:10px;

width:140px;

height:42px;

border:none;

border-radius:999px;

display:flex;

align-items:center;

justify-content:center;

background:
linear-gradient(
135deg,
#d4af37,
#6a0f20
);

color:#fff;

font-size:15px;

font-weight:700;

text-decoration:none;

cursor:pointer;

position:relative;

z-index:5;

box-shadow:
0 6px 18px rgba(0,0,0,.10);

}

/* BUTTON HOVER */

#featuredCreators .card .btn.small:hover{

transform:translateY(-2px);

}
.creator-section-title{
  max-width:1450px;
  margin:40px auto 14px;
font-size:13px;

font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

color:#888;

margin-bottom:12px;

}
.creator-stats{

display:flex;
gap:10px;

font-size:13px;
color:#777;

margin-top:8px;

}
.creator-label{
padding-top:32px;
border-top:1px solid #ececec;
}
.listing-image img{
transition:.4s;
}

.listing-image:hover img{
transform:scale(1.04);
}
.account-notification-float{

  position:absolute;

  top:125px;

  right:40px;

  z-index:50;

}
/* ===================================
LISTING PAGE SECTIONS
=================================== */

.listing-extra-section{

max-width:1180px;

margin:40px auto;

padding:30px 30px 45px;

background:#fff;

border-radius:24px;

box-shadow:
0 10px 30px rgba(0,0,0,.05);

}
.listing-extra-section h2{

margin-top:0;

font-size:30px;

font-family:'Playfair Display',serif;

color:#6a0f20;

margin-bottom:20px;

}

.listing-long-description{

font-size:15px;

line-height:1.9;

color:#555;

}

.creator-bio-box{

display:flex;

align-items:center;

gap:20px;

}

.creator-avatar.large{

width:80px;

height:80px;

border-radius:50%;

background:
linear-gradient(
135deg,
var(--tint1),
var(--tint2)
);

display:flex;

align-items:center;

justify-content:center;

color:white;

font-size:30px;

font-weight:700;

}

#creatorListingsGrid{

display:grid;

grid-template-columns:
repeat(4,260px);

gap:28px;

justify-content:center;

align-items:start;

margin-top:30px;

padding-bottom:20px;

}

#creatorListingsGrid .card{

width:100%;
max-width:320px;

min-height:auto;

height:auto;

}
#creatorListingsGrid .listing-image-wrap{

height:220px;

overflow:hidden;

border-radius:14px 14px 0 0;

}
#creatorListingsGrid .listing-image-wrap img{

width:100%;
height:100%;
object-fit:cover;

}
#creatorListingsGrid .listing-content{

padding:18px;

min-height:auto;

}
/* ======================================
   MORE FROM CREATOR PREMIUM CARDS
====================================== */

#creatorListingsGrid .card{

position:relative;

overflow:hidden;

border-radius:18px;

background:#fff;

cursor:pointer;

transition:
transform .35s ease,
box-shadow .35s ease;

box-shadow:
0 10px 25px rgba(0,0,0,.08);

}

#creatorListingsGrid .card:hover{

transform:
translateY(-10px)
scale(1.02);

box-shadow:
0 25px 55px rgba(0,0,0,.18);

}

#creatorListingsGrid .card::before{

content:"";

position:absolute;

left:0;
right:0;
bottom:0;

height:0;

background:
linear-gradient(
135deg,
var(--tint1),
var(--tint2)
);

transition:.35s ease;

z-index:1;

}

#creatorListingsGrid .card:hover::before{

height:46%;

}

#creatorListingsGrid .listing-image-wrap img{

transition:
transform .5s ease;

}

#creatorListingsGrid .card:hover .listing-image-wrap img{

transform:scale(1.08);

}

#creatorListingsGrid h3,
#creatorListingsGrid .price,
#creatorListingsGrid .listing-content{

position:relative;

z-index:5;

}

#creatorListingsGrid .card:hover h3,
#creatorListingsGrid .card:hover .price{

color:white;

}
/* ===================================
REVIEWS & RATINGS
   Rebuilt from scratch (fresh "rr-" class names) after the previous
   ".review-*"/".reviews-*" version kept getting silently overridden by
   a duplicate set of rules in listing.html's own inline <style> block
   (which loads after this file and wins ties). New names guarantee
   there's no leftover rule anywhere still matching, and everything
   this section needs — desktop AND mobile — now lives in this one
   file, in one place, so there's a single source of truth going
   forward. listing.html's old duplicate review rules have been
   removed to match.
=================================== */

/* Plain wrapper — no background/border/shadow of its own. ".listing-
   extra-section" (the white rounded card the <h2> already sits in) is
   the only visible container here, same as the "More From This
   Creator" / "Discover New Creators" sections right above it on this
   same page. An inner box here on top of that outer one read as a
   "container inside a container" and looked off. Its own bottom
   padding is still what gives the review list clear room before that
   outer card's border. */
.rr-card{
  padding-bottom:30px;
}

.rr-summary{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:40px;
  padding-bottom:24px;
  margin-bottom:24px;
  border-bottom:1px solid #e5e0dd;
}

.rr-score{
  width:220px;
  flex-shrink:0;
  text-align:center;
}

.rr-score-number{
  font-size:42px;
  font-weight:700;
  color:#6a0f20;
  line-height:1;
}

.rr-score-stars{
  font-size:22px;
  margin:10px 0;
  color:#d4af37;
}

.rr-score-count{
  font-size:14px;
  color:#777;
}

.rr-breakdown{
  flex:1;
  min-width:220px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.rr-bar-row{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  color:#8f7b85;
}

.rr-bar-label{
  width:38px;
  flex-shrink:0;
}

.rr-bar-track{
  flex:1;
  height:8px;
  border-radius:999px;
  background:#f1e8e5;
  overflow:hidden;
}

.rr-bar-fill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#d4af37,#6a0f20);
}

.rr-bar-count{
  width:26px;
  flex-shrink:0;
  text-align:right;
}

.rr-list{
  display:grid;
}

.rr-item{
  padding:20px 0;
}

.rr-item + .rr-item{
  border-top:1px solid #e5e0dd;
}

.rr-item-stars{
  font-size:16px;
  color:#d4af37;
}

.rr-item-name{
  font-size:13px;
  font-weight:600;
  color:#6b1726;
  margin:8px 0;
}

.rr-item-text{
  color:#555;
  line-height:1.7;
}

.rr-empty{
  text-align:center;
  color:#999;
  padding:40px 20px;
}

@media(max-width:768px){

  .rr-card{ padding-bottom:20px; }
  .rr-summary{ gap:14px; padding-bottom:16px; margin-bottom:16px; }
  .rr-score{ width:108px; }
  .rr-score-number{ font-size:24px; }
  .rr-score-stars{ font-size:13px; margin:6px 0; }
  .rr-score-count{ font-size:10px; }
  .rr-breakdown{ min-width:0; gap:4px; }
  .rr-bar-row{ font-size:10.5px; gap:6px; }
  .rr-bar-label{ width:30px; }
  .rr-bar-track{ height:6px; }
  .rr-bar-count{ width:20px; }
  .rr-item{ padding:14px 0; }
  .rr-item-text{ font-size:12.5px; line-height:1.6; }
  .rr-empty{ padding:20px; font-size:12.5px; }

}
/* ===========================
RELATED PRODUCTS
=========================== */

#relatedProductsRow{

display:flex;

gap:18px;

overflow-x:auto;
overflow-y:visible;

padding-top:14px;
padding-bottom:14px;

scrollbar-width:none;

}

#relatedProductsRow::-webkit-scrollbar{

display:none;

}

.related-card{

position:relative;

min-width:210px;

max-width:210px;

background:
linear-gradient(
180deg,
#ffffff,
#fcf9f8
);

border-radius:22px;

overflow:hidden;

cursor:pointer;

flex-shrink:0;

isolation:isolate;

transform-style:preserve-3d;

perspective:1200px;

transition:
transform .25s ease,
box-shadow .35s ease;

box-shadow:
0 10px 25px rgba(0,0,0,.08),
0 20px 45px rgba(0,0,0,.05);

}

.related-card:hover{

transform:
translateY(-7px)
scale(1.02);

box-shadow:
0 28px 55px rgba(0,0,0,.18);

animation:
relatedPulse .9s ease;

}
.related-card::after{

content:"";

position:absolute;

top:-130%;

left:-45%;

width:55%;

height:260%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.18),

transparent

);

transform:rotate(25deg);

opacity:0;

pointer-events:none;

transition:.75s;

}

.related-card:hover::after{

left:150%;

opacity:1;

}

/* "Discover New Creators" mini cards, DESKTOP/LAPTOP ONLY — the image
   area was too short (110px) for object-fit:cover to show the photo
   without an awkward crop. Grown taller so the image fills the card
   properly, with the text area below trimmed down to compensate so the
   card overall still reads as "mini". Mobile is untouched — its own
   rule in listing.html's mobile media query (".related-img{height:90px;
   object-fit:cover}") still applies below that breakpoint. */
.related-img{

width:100%;

height:150px;

object-fit:cover;

display:block;

}

.related-info{

position:relative;

z-index:5;

padding:10px 14px;

overflow:hidden;

}

.related-title{

font-size:13px;

font-weight:600;

line-height:1.35;

height:34px;

overflow:hidden;

}

.related-price{

margin-top:6px;

font-size:14px;

font-weight:700;

color:#8b0029;

}
.related-card{

position:relative;

overflow:hidden;

}

.related-bottom-tint{

position:absolute;

left:0;

right:0;

bottom:0;

/* Matches the shrunk ".related-info" block above (10px padding + 34px
   title + 6px margin + ~18px price line + 10px padding) so the hover
   tint still only covers the text area, not the image. */
height:78px;

background:

linear-gradient(

135deg,

var(--tint1),

var(--tint2)

);

transform:translateY(100%);

transition:
transform .35s ease;

z-index:1;

box-shadow:

inset 0 2px 0 rgba(255,255,255,.25),

inset 0 -18px 24px rgba(0,0,0,.12);

}

.related-info{

position:relative;

z-index:2;

}

.related-card:hover
.related-bottom-tint{

transform:translateY(0);

}

.related-card:hover .related-title,
.related-card:hover .related-price{

color:#fff;

text-shadow:
0 1px 0 rgba(0,0,0,.55),
0 2px 4px rgba(0,0,0,.30);

}

.related-card:hover .related-img{

transform:scale(1.08);

}

.related-img{

transition:.5s ease;

}
@keyframes relatedPulse{

0%{

transform:
translateY(-10px)
scale(1.02);

}

50%{

transform:
translateY(-12px)
scale(1.03);

}

100%{

transform:
translateY(-10px)
scale(1.02);

}

}

/* NOTIFICATION BELL — shared by customer pages (account, my-orders,
   wishlist) and the seller/service dashboards, so it always looks
   and behaves the same everywhere. Used to be position:fixed, which
   floated it over page content regardless of scroll position; every
   page that used it had to fight that with a local !important
   override. Fixed at the source instead. */
.notification-wrapper{

position:relative;

flex-shrink:0;

}

.notif-bell{

position:relative;

width:38px;
height:38px;
font-size:19px;

display:flex;
align-items:center;
justify-content:center;

background:linear-gradient(180deg,#ffffff,#faf6f4);

border-radius:14px;

cursor:pointer;

box-shadow:
  inset 0 1px 0 rgba(255,255,255,.9),
  inset 0 -1px 2px rgba(106,15,32,.05),
  0 6px 14px rgba(106,15,32,.10),
  0 2px 4px rgba(106,15,32,.08);

transition:transform .25s ease, box-shadow .25s ease;

}

.notif-bell:hover{

transform:translateY(-2px);

box-shadow:
  inset 0 1px 0 rgba(255,255,255,.9),
  0 10px 20px rgba(106,15,32,.16),
  0 3px 6px rgba(106,15,32,.12);

}

.notif-bell:active{

transform:translateY(0);

box-shadow:inset 0 3px 6px rgba(0,0,0,.18);

}
/* SIZE SECTION */

.size-picker{
  display:block;
  margin-top:-10px;
}

.size-picker h4{
  margin-bottom:8px;
  font-size:16px;
  font-weight:700;
  color:#2a1a1d;
}

#sizeOptions{
  display:flex;
  gap:10px;
  margin-top:10px;
}

.size-btn{
  min-width:48px;
  height:48px;
  border-radius:14px;
  border:1px solid rgba(106,15,32,.15);
  background:linear-gradient(180deg,#ffffff,#faf7f6);
  font-weight:700;
  cursor:pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 6px 14px rgba(106,15,32,.06);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.size-btn:hover{
  transform:translateY(-2px);
  border-color:#d4af37;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 10px 20px rgba(106,15,32,.12);
}

.size-btn:active{
  transform:translateY(0);
  box-shadow:inset 0 2px 4px rgba(106,15,32,.15);
}

.size-btn.active{
  background:linear-gradient(
    135deg,
    #d4af37,
    #6a0f20
  );
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.18);
  border:none;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.4),
    inset 0 -3px 5px rgba(0,0,0,.12),
    0 12px 30px rgba(212,175,55,.25);
}

.product-options-row{
  display:block;
  margin-top:18px;
  margin-bottom:18px;
}

.customization-pill{
  margin-top:16px;
  padding:12px 18px;
  border-radius:999px;
  background:
  linear-gradient(
    135deg,
    rgba(212,175,55,.12),
    rgba(106,15,32,.12)
  );

  border:1px solid rgba(212,175,55,.25);

  color:#6a0f20;

  font-weight:700;
}
.custom-popup-btn{
  height:52px;
  padding:0 24px;
  border:none;
  border-radius:999px;
  font-weight:700;
  font-size:15px;
  cursor:pointer;
  transition:.25s;
}

.custom-popup-btn.primary{

  background:
  linear-gradient(
    135deg,
    #d4af37,
    #6a0f20
  );

  color:white;

  text-shadow:0 1px 2px rgba(0,0,0,.18);

  box-shadow:
  inset 0 1px 1px rgba(255,255,255,.4),
  inset 0 -3px 5px rgba(0,0,0,.12),
  0 12px 28px rgba(
    212,
    175,
    55,
    .25
  );

}

.custom-popup-btn.primary:hover{

  transform:
  translateY(-2px);

  box-shadow:
  inset 0 1px 1px rgba(255,255,255,.4),
  inset 0 -3px 5px rgba(0,0,0,.12),
  0 18px 34px rgba(212,175,55,.34);

}

.custom-popup-btn.primary:active{
  transform:translateY(0);
  box-shadow:inset 0 3px 6px rgba(0,0,0,.25);
}

.custom-popup-btn.secondary{

  background:linear-gradient(180deg,#ffffff,#faf7f8);

  color:#6a0f20;

  border:1px solid rgba(
    106,
    15,
    32,
    .12
  );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 6px 14px rgba(106,15,32,.08);

}

.custom-popup-btn.secondary:hover{

  background:#faf7f8;

  transform:translateY(-2px);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 10px 20px rgba(106,15,32,.12);

}

.custom-popup-btn.secondary:active{
  transform:translateY(0);
  box-shadow:inset 0 2px 4px rgba(106,15,32,.15);
}
.product-options-row{
  margin-top:10px;
  margin-bottom:10px;
}

.action-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:20px;
  width:100%;
  box-sizing:border-box;
}

.creator-card{
  max-width:1180px;
  margin:0 auto 30px;
}
.card:hover .listing-content{
  color:#fff;

  text-shadow:
    0 1px 2px rgba(0,0,0,.35),
    0 2px 8px rgba(0,0,0,.25),
    0 0 18px rgba(0,0,0,.18);
}
/* =========================
   SELLER PRICING MODAL
========================= */

.pricing-modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(8px);
  z-index:999999;
  justify-content:center;
  align-items:center;
}

.pricing-modal-box{
  width:min(900px,92%);
  background:#fff;
  border-radius:28px;
  padding:40px;
  position:relative;
  box-shadow:0 30px 80px rgba(0,0,0,.25);
  animation:pricingPop .3s ease;
}

@keyframes pricingPop{
  from{
    transform:scale(.9);
    opacity:0;
  }
  to{
    transform:scale(1);
    opacity:1;
  }
}

.pricing-close{
  position:absolute;
  top:15px;
  right:15px;
  width:42px;
  height:42px;
  border:none;
  border-radius:50%;
  cursor:pointer;
  font-size:18px;
}

.pricing-modal-box h2{
  text-align:center;
  margin-bottom:12px;
  color:#6b1726;
}

.pricing-sub{
  text-align:center;
  max-width:650px;
  margin:auto;
  color:#666;
  line-height:1.6;
}

.pricing-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
  margin-top:35px;
}

.pricing-card{
  border:1px solid #eee;
  border-radius:24px;
  padding:30px;
  text-align:center;
}

.pricing-card.featured{
  border:2px solid #6b1726;
  transform:scale(1.03);
}

.pricing-price{
  font-size:42px;
  font-weight:700;
  color:#6b1726;
  margin:20px 0;
}

.choose-plan-btn{
  width:100%;
  border:none;
  border-radius:50px;
  padding:14px;
  cursor:pointer;
  background:linear-gradient(180deg,#7c1a2e,#6b1726);
  color:white;
  text-shadow:0 1px 2px rgba(0,0,0,.20);
  font-weight:700;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -2px 3px rgba(0,0,0,.15),
    0 10px 22px rgba(107,23,38,.28);
  transition:transform .25s ease, box-shadow .25s ease;
}

.choose-plan-btn:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -2px 3px rgba(0,0,0,.15),
    0 16px 30px rgba(107,23,38,.36);
}

.choose-plan-btn:active{
  transform:translateY(0);
  box-shadow:inset 0 3px 6px rgba(0,0,0,.30);
}

@media(max-width:768px){

  .pricing-grid{
    grid-template-columns:1fr;
  }

}
/* ==========================
   CATEGORY PAGINATION
========================== */

.pagination{
display:flex;
justify-content:center;
align-items:center;
gap:14px;
margin:60px 0 30px;
flex-wrap:wrap;
}

.page-btn,
.page-number{

height:44px;
min-width:44px;
padding:0 18px;

border:1px solid #e9e9e9;

background:linear-gradient(180deg,#ffffff,#f7f7f7);

border-radius:999px;

cursor:pointer;

font-weight:600;

box-shadow:
  inset 0 1px 0 rgba(255,255,255,.9),
  0 4px 10px rgba(0,0,0,.05);

transition:transform .25s ease, box-shadow .25s ease;

}

.page-btn:hover,
.page-number:hover{

transform:translateY(-2px);

box-shadow:
  inset 0 1px 0 rgba(255,255,255,.9),
  0 10px 25px rgba(0,0,0,.10);

}

.page-btn:active,
.page-number:active{

transform:translateY(0);

box-shadow:inset 0 2px 4px rgba(0,0,0,.15);

}

.page-number.active{

background:linear-gradient(
135deg,
var(--gold),
var(--pink)
);

color:#fff;

text-shadow:0 1px 2px rgba(0,0,0,.18);

border:none;

box-shadow:
  inset 0 1px 1px rgba(255,255,255,.4),
  inset 0 -3px 5px rgba(0,0,0,.12),
  0 10px 20px rgba(212,175,55,.28);

}

.page-btn:disabled{

opacity:.4;

cursor:not-allowed;

transform:none;

box-shadow:none;

}

.page-numbers{

display:flex;

gap:5px;

flex-wrap:wrap;

justify-content:center;

}
.category-toolbar{

position:static; /* scrolls away with the page instead of staying pinned */

display:flex;

justify-content:space-between;

align-items:center;

gap:25px;

padding:18px 24px;

margin-bottom:34px;

background:rgba(255,255,255,.92);

backdrop-filter:blur(18px);

-webkit-backdrop-filter:blur(18px);

border:1px solid rgba(212,175,55,.12);

border-radius:22px;

box-shadow:

0 10px 30px rgba(0,0,0,.05);

}
/* Lets the left side (listing count + "Filtering: ..." pill) shrink
   and truncate instead of wrapping the whole toolbar onto 2-3 lines;
   the sort dropdown on the right keeps its own natural size. */
.toolbar-left{ min-width:0; flex:1; }
.toolbar-right{ flex-shrink:0; }
#showingCount{ white-space:nowrap; flex-shrink:0; }
#sortSelect{

appearance:none;

padding:14px 48px 14px 20px;

border-radius:999px;

border:1px solid rgba(212,175,55,.25);

background:

linear-gradient(

135deg,

#fff,

#fffaf2

);

font-weight:600;

font-size:14px;

cursor:pointer;

transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;

box-shadow:

  inset 0 1px 0 rgba(255,255,255,.9),
  inset 0 -1px 2px rgba(106,15,32,.04),
  0 10px 24px rgba(106,15,32,.08),
  0 2px 5px rgba(106,15,32,.06);

}

#sortSelect:active{

box-shadow:inset 0 2px 5px rgba(106,15,32,.15);

}

#sortSelect:hover{

border-color:var(--gold);

transform:translateY(-2px);

box-shadow:

  inset 0 1px 0 rgba(255,255,255,.9),
  0 18px 35px rgba(212,175,55,.24),
  0 4px 8px rgba(212,175,55,.16);

}

#sortSelect:focus{

outline:none;

border-color:var(--gold);

}
.listing-counter{

display:flex;

align-items:center;

gap:14px;

font-size:15px;

font-weight:600;

color:#555;

/* Lets the "Filtering: ..." pill actually shrink/truncate instead of
   forcing this whole row (and the toolbar around it) to wrap or grow
   — flex items default to a content-based min-width otherwise. */
min-width:0;

}

.divider{

width:6px;

height:6px;

border-radius:50%;

background:var(--gold);

}

/* ======================================
   HEADER WISHLIST BUTTON
====================================== */

.header-wishlist-btn{

display:flex;
align-items:center;
justify-content:center;

width:35px;
height:35px;

border:none;
border-radius:50%;

background:linear-gradient(180deg,#ffffff,#f7f7f7);

color:#6b1726;          /* TintLane Burgundy */

font-size:17px;

font-weight:700;

cursor:pointer;

box-shadow:
inset 0 1px 0 rgba(255,255,255,.9),
inset 0 -1px 2px rgba(0,0,0,.05),
0 8px 24px rgba(0,0,0,.10),
0 2px 5px rgba(0,0,0,.06);

transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;

}

.header-wishlist-btn:hover{

transform:translateY(-2px);

background:linear-gradient(180deg,#7a1a2d,#6b1726);

color:#ffffff;

box-shadow:
inset 0 1px 1px rgba(255,255,255,.25),
inset 0 -2px 3px rgba(0,0,0,.20),
0 14px 32px rgba(107,23,38,.34),
0 4px 8px rgba(107,23,38,.20);

}

.header-wishlist-btn:active{

transform:translateY(0);

box-shadow:
inset 0 2px 5px rgba(0,0,0,.30);

}

/* Cart button (".icon-btn.cart-btn", header + my-service-requests.html)
   never got the same fixed circular sizing as its sibling
   ".header-wishlist-btn" right next to it — it was just ".icon-btn"'s
   generic padding around the raw emoji, so it rendered noticeably
   smaller and inconsistently next to the wishlist heart and the account
   avatar. Same 35px circle, mirroring ".header-wishlist-btn" exactly so
   all three header controls line up at a matching size. */
.cart-btn{

display:flex;
align-items:center;
justify-content:center;

width:35px;
height:35px;

border:none;
border-radius:50%;

background:linear-gradient(180deg,#ffffff,#f7f7f7);

color:#6b1726;

font-size:19px;
font-weight:700;

cursor:pointer;

box-shadow:
inset 0 1px 0 rgba(255,255,255,.9),
inset 0 -1px 2px rgba(0,0,0,.05),
0 8px 24px rgba(0,0,0,.10),
0 2px 5px rgba(0,0,0,.06);

transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;

}

.cart-btn:hover{

transform:translateY(-2px);

background:linear-gradient(180deg,#7a1a2d,#6b1726);

color:#ffffff;

box-shadow:
inset 0 1px 1px rgba(255,255,255,.25),
inset 0 -2px 3px rgba(0,0,0,.20),
0 14px 32px rgba(107,23,38,.34),
0 4px 8px rgba(107,23,38,.20);

}

.cart-btn:active{

transform:translateY(0);

box-shadow:
inset 0 2px 5px rgba(0,0,0,.30);

}
/*==================================================
LISTING ACTION ICONS
==================================================*/

/* ==========================================
   LISTING ACTION BUTTONS
========================================== */

.listing-topbar{

display:flex;
align-items:center;
justify-content:space-between;

}

.listing-actions{

display:flex !important;
flex-direction:row !important;
align-items:center;
justify-content:flex-end;
gap:10px;

margin-left:auto;

flex-wrap:nowrap;

}

.listing-actions button{

width:48px;
height:48px;

min-width:48px;

border:none;

border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

cursor:pointer;

transition:.28s;

font-size:18px;

box-shadow:
0 12px 26px rgba(0,0,0,.08);

}

#wishlistBtn{

background:white;

color:#7b1122;

border:1px solid rgba(123,17,34,.12);

}

#wishlistBtn:hover{

transform:translateY(-3px);

}

#wishlistBtn.active{

background:#7b1122;

color:white;

border-color:#7b1122;

}

#shareBtn{

background:white;

color:#7b1122;

border:1px solid rgba(123,17,34,.12);

}

#shareBtn:hover{

background:#f7f1f3;

transform:translateY(-3px);

}
/* ==========================
   CATEGORY CARD WISHLIST
========================== */

.listing-image-wrap{
    position:relative;
    height:235px;
}

.wishlist-heart{

    position:absolute;
    top:12px;
    right:12px;

    width:35px;
    height:35px;

    border:none;
    outline:none;

    border-radius:50%;

    background:#fff;

    color:var(--burgundy);

    font-size:22px;
    cursor:pointer;

    display:flex;
    align-items:center;
    justify-content:center;

    box-shadow:
        0 12px 30px rgba(0,0,0,.12);

    transition:.25s ease;

    z-index:20;

}

.wishlist-heart:hover{

    transform:scale(1.08);

}

.wishlist-heart.active{

    background:#8b1830;

    color:#fff;

}
/* ==========================================================
   TINTLANE CATEGORY LUXURY CARD
========================================================== */

.category-lux-card{

position:relative;

display:flex;
text-decoration:none;
color:inherit;
flex-direction:column;

overflow:hidden;

border-radius:28px;

background:linear-gradient(
180deg,
#ffffff,
#fcf9f8
);

cursor:pointer;

isolation:isolate;

transform-style:preserve-3d;

perspective:1200px;

transition:
transform .25s ease,
box-shadow .35s ease;

box-shadow:
0 12px 28px rgba(0,0,0,.08),
0 24px 50px rgba(0,0,0,.05);

}
.category-lux-card,
.category-lux-card:link,
.category-lux-card:visited,
.category-lux-card:hover,
.category-lux-card:active{

    text-decoration:none;
    color:inherit;

}
.category-lux-card:hover{

transform:
translateY(-10px)
scale(1.02);

box-shadow:
0 28px 60px rgba(0,0,0,.18);

}

/* ---------- Image ---------- */

.category-lux-image-wrap{

position:relative;

height:250px;

overflow:hidden;

display:block;

background:#f7f3f1;

}

.category-lux-image{

width:100%;

height:100%;

object-fit:cover;

display:block;
vertical-align:top;
transition:
transform .7s ease;

}

.category-lux-card:hover
.category-lux-image{

transform:scale(1.08);

}

/* ---------- Heart ---------- */

.category-lux-heart{

position:absolute;

top:14px;

right:14px;

width:40px;

height:40px;

border:none;

border-radius:50%;

background:
linear-gradient(180deg,#ffffff,#f7f7f7);

display:flex;

align-items:center;

justify-content:center;

font-size:17px;

cursor:pointer;

transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;

z-index:50;

box-shadow:
  inset 0 1px 0 rgba(255,255,255,.9),
  inset 0 -1px 2px rgba(0,0,0,.05),
  0 8px 20px rgba(0,0,0,.14),
  0 2px 5px rgba(0,0,0,.10);

}

.category-lux-heart:hover{

    transform:translateY(-2px);

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.9),
      0 12px 24px rgba(0,0,0,.18),
      0 3px 6px rgba(0,0,0,.12);

}

.category-lux-heart:active{

    transform:translateY(0);

    box-shadow:inset 0 2px 5px rgba(0,0,0,.25);

}

.category-lux-heart.active{

    background:linear-gradient(180deg,#7c1428,#6a0f20);

    color:#fff;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.18),
      inset 0 -2px 3px rgba(0,0,0,.15),
      0 10px 20px rgba(106,15,32,.30);

}

.category-lux-heart.active i{

    color:#fff;

}

.category-lux-heart i{

    transition:.25s ease;

}

.category-lux-heart:hover{

    transform:scale(1.08);

}

.category-lux-heart:hover{

transform:scale(1.08);

}

/* ---------- Badge ---------- */

.category-lux-badge{

position:absolute;

left:16px;

bottom:16px;

padding:8px 16px;

border-radius:999px;

background:
rgba(255,255,255,.94);

font-size:11px;

letter-spacing:.14em;

text-transform:uppercase;

font-weight:700;

color:#6a0f20;

z-index:50;

}

/* ---------- Content ---------- */

.category-lux-content{

position:relative;

padding:22px;

overflow:hidden;

z-index:5;

display:flex;

flex-direction:column;

flex:1;

}

.category-lux-content::before{

content:"";

position:absolute;

top:-3px;
left:0;
right:0;
bottom:-2px;

height:auto;

background:

linear-gradient(
135deg,
var(--tint1),
var(--tint2)
);

/* Was exactly "translateY(100%)" — on real device pixel ratios (not
   the round numbers a desktop browser at 100% zoom uses) that can
   round to a fraction of a pixel short of the card's own overflow:
   hidden clip, leaving a hairline sliver of the tint gradient visible
   along the bottom edge of every card at rest. A few extra px of
   travel guarantees it clears fully regardless of rounding — the
   revealed state below is untouched (still exactly translateY(0)). */
transform:translateY(calc(100% + 6px));

transition:
transform .35s ease;

z-index:-1;

box-shadow:

inset 0 2px 0 rgba(255,255,255,.25),

inset 0 -18px 24px rgba(0,0,0,.12);

}

.category-lux-card:hover
.category-lux-content::before{

transform:translateY(0);

}

/* ---------- Creator ---------- */

.category-lux-creator{
width:100%;
text-align:left;
font-size:11px;

font-weight:700;
text-decoration:none;
letter-spacing:.16em;

text-transform:uppercase;

color:#b28d96;

margin-bottom:10px;

transition:.3s;

}

.category-lux-title{
width:100%;
text-align:left;
font-size:17px;
text-decoration:none;
font-weight:700;

line-height:1.45;

color:#24161a;

min-height:48px;

display:-webkit-box;

-webkit-line-clamp:2;

-webkit-box-orient:vertical;

overflow:hidden;

transition:.3s;

}

.category-lux-bottom{

margin-top:auto;

padding-top:18px;

display:flex;

justify-content:space-between;

align-items:center;

}

.category-lux-price{

font-size:20px;
text-decoration:none;
font-weight:700;

color:#7b1027;

transition:.3s;

}

.category-lux-rating{

font-size:13px;
text-decoration:none;
font-weight:600;

color:#9a7b83;

transition:.3s;

}

/* ---------- White Text ---------- */

.category-lux-card:hover
.category-lux-creator,

.category-lux-card:hover
.category-lux-title,

.category-lux-card:hover
.category-lux-price,

.category-lux-card:hover
.category-lux-rating{

color:white;

}

/* ---------- Luxury Text Depth ---------- */

.category-lux-card:hover
.category-lux-title{

text-shadow:
1px 1px 0 rgba(0,0,0,.22),
2px 3px 6px rgba(0,0,0,.18);

}

.category-lux-card:hover
.category-lux-price{

text-shadow:
1px 1px 0 rgba(0,0,0,.22),
2px 3px 6px rgba(0,0,0,.18);

}

.category-lux-card:hover
.category-lux-rating{

text-shadow:
1px 1px 0 rgba(0,0,0,.22),
2px 3px 6px rgba(0,0,0,.18);

}

.category-lux-card:hover
.category-lux-creator{

text-shadow:
1px 1px 0 rgba(0,0,0,.22),
2px 3px 6px rgba(0,0,0,.18);

}

/* ---------- Luxury Shine ---------- */

.category-lux-card::after{

content:"";

position:absolute;

top:-140%;

left:-50%;

width:55%;

height:260%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.18),

transparent

);

transform:rotate(25deg);

opacity:0;

transition:.7s;

pointer-events:none;

}

.category-lux-card:hover::after{

left:150%;

opacity:1;

}

/* ---------- Pulse ---------- */

.category-lux-card:hover{

animation:
categoryPulse .9s ease;

}

@keyframes categoryPulse{

0%{

transform:
translateY(-10px)
scale(1.02);

}

50%{

transform:
translateY(-12px)
scale(1.03);

}

100%{

transform:
translateY(-10px)
scale(1.02);

}

}

/* ---------- Touch / coarse-pointer safety net ---------- */
/* Touch devices (including this project's mobile card rails) don't
   have a true hover state — after a tap, browsers commonly leave
   :hover-matched styles applied until the user taps elsewhere. That's
   what was leaving the bottom tint panel (and lift/scale/shine/white
   text) visibly "stuck on" on cards that had merely been tapped or
   scrolled past, looking like a permanent tinted line/panel instead of
   a hover-only effect. Forcing every :hover-triggered visual on this
   card back to its resting state whenever the device has no real
   hover/fine pointer removes the possibility of it sticking at all. */
@media (hover:none), (pointer:coarse){

  .category-lux-card:hover{
    transform:none;
    box-shadow:0 12px 28px rgba(0,0,0,.08), 0 24px 50px rgba(0,0,0,.05);
    animation:none;
  }

  .category-lux-card:hover .category-lux-image{
    transform:none;
  }

  .category-lux-card:hover .category-lux-content::before{
    transform:translateY(100%);
  }

  .category-lux-card:hover .category-lux-creator,
  .category-lux-card:hover .category-lux-title,
  .category-lux-card:hover .category-lux-price,
  .category-lux-card:hover .category-lux-rating{
    color:inherit;
    text-shadow:none;
  }

  .category-lux-card:hover .category-lux-creator{ color:#b28d96; }
  .category-lux-card:hover .category-lux-title{ color:#24161a; }
  .category-lux-card:hover .category-lux-price{ color:#7b1027; }
  .category-lux-card:hover .category-lux-rating{ color:#9a7b83; }

  .category-lux-card:hover::after{
    left:-50%;
    opacity:0;
  }

}

html,
.home-page{
    margin:0;
    padding:0;
    min-height:100%;
}

.home-page{
    display:flex;
    flex-direction:column;
    min-height:100vh;
}

.home-page main{
    flex:1;
}
/* ".listing-reel-card" / ".watch-reel-btn" used to be defined here too
   — an orphaned duplicate of what's now in listing.html's own <style>
   block (which also handles the newer "Watch Demo Shorts" button,
   mobile sizing, and explicit hover/active/focus/visited colors).
   Having both meant listing.html's Instagram-gradient button was
   randomly picking up this file's white/gold hover state instead.
   Removed here so listing.html's version is the only one left. */
/*==========================================
SEARCH DROPDOWN
==========================================*/

.search-wrap{
    position:relative;
    flex:0 1 600px;
    max-width:600px;
    display:flex;
    align-items:center;
    gap:10px;
    margin-left:0;
}
.search-wrap .cat-pill{
    flex-shrink:0;
}

.search-suggestions{

    position:absolute;

    top:100%;

    left:0;

    right:0;

    margin-top:10px;

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    display:none;

    z-index:99999;

    border:1px solid rgba(0,0,0,.08);

    box-shadow:
        0 18px 45px rgba(0,0,0,.12);

}

.search-item{

    display:flex;

    align-items:center;

    gap:14px;

    padding:14px 18px;

    cursor:pointer;

    transition:.18s;

}

.search-item:hover{

    background:#faf6f8;

}

.search-thumb{

    width:56px;

    height:56px;

    border-radius:12px;

    object-fit:cover;

    flex-shrink:0;

}

.search-info{

    flex:1;

}

.search-title{

    font-weight:700;

    color:#3a1a24;

    margin-bottom:4px;

}

.search-meta{

    font-size:13px;

    color:#8b7077;

}

.search-empty{

    padding:20px;

    text-align:center;

    color:#888;

}

.search-category{

    font-size:12px;

    color:#6a0f20;

    font-weight:700;

    text-transform:uppercase;

}
/* ==========================================
   TINTLANE AUTH POPUP
========================================== */

.auth-popup{

position:fixed;

inset:0;

display:none;

justify-content:center;

align-items:center;

background:rgba(20,15,25,.45);

backdrop-filter:blur(8px);

z-index:999999;

animation:fadeIn .25s ease;

}

.auth-popup-box{

width:min(420px,90vw);

background:white;

border-radius:26px;

padding:35px;

text-align:center;

box-shadow:
0 25px 60px rgba(0,0,0,.18);

animation:popupScale .25s ease;

}

.auth-popup-icon{

width:85px;

height:85px;

margin:auto;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:38px;

background:linear-gradient(
135deg,
#7b1833,
#d4af37
);

color:white;

margin-bottom:18px;

}

.auth-popup-box h2{

font-family:"Playfair Display";

color:#66162b;

margin-bottom:12px;

}

.auth-popup-box p{

line-height:1.7;

color:#666;

margin-bottom:25px;

}

.auth-popup-btn{

border:none;

padding:14px 40px;

border-radius:999px;

cursor:pointer;

font-size:15px;

font-weight:700;

background:linear-gradient(
135deg,
#7b1833,
#a81f43
);

color:white;

text-shadow:0 1px 2px rgba(0,0,0,.20);

box-shadow:
  inset 0 1px 0 rgba(255,255,255,.18),
  inset 0 -2px 3px rgba(0,0,0,.15),
  0 10px 22px rgba(123,24,51,.24);

transition:transform .25s ease, box-shadow .25s ease;

}

.auth-popup-btn:hover{

transform:translateY(-2px);

box-shadow:
  inset 0 1px 0 rgba(255,255,255,.18),
  inset 0 -2px 3px rgba(0,0,0,.15),
  0 16px 30px rgba(123,24,51,.34);

}

.auth-popup-btn:active{

transform:translateY(0);

box-shadow:inset 0 3px 6px rgba(0,0,0,.30);

}

@keyframes popupScale{

from{

transform:scale(.85);

opacity:0;

}

to{

transform:scale(1);

opacity:1;

}

}

@keyframes fadeIn{

from{

opacity:0;

}

to{

opacity:1;

}

}
/*==================================
TINTLANE FOOTER
==================================*/

.site-footer{

background:linear-gradient(180deg,#6a0f20,#54081a);

padding:40px 6% 18px;

margin-top:60px;

text-align:center;

border-top:1px solid rgba(106,15,32,.35);

box-shadow:
0 -10px 30px rgba(0,0,0,.08);

}

.footer-top{

max-width:1300px;

margin:0 auto;

padding-bottom:28px;

display:grid;

grid-template-columns:1.3fr 1fr 1fr 1fr;

column-gap:32px;

row-gap:26px;

text-align:left;

}

.footer-col{

min-width:0;

}

.footer-brand{

padding-right:12px;

}

.footer-logo{

width:50px;

height:50px;

border-radius:50%;

object-fit:cover;

object-position:center;

display:block;

margin-bottom:12px;

box-shadow:0 10px 26px rgba(0,0,0,.28);

}

.footer-tagline{

margin:0 0 14px;

max-width:280px;

font-size:13px;

line-height:1.65;

color:rgba(255,255,255,.72);

}

.footer-tagline .tagline-short{

display:none;

}

.footer-social{

display:flex;

gap:12px;

}

.footer-social a{

width:36px;

height:36px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

text-decoration:none;

background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05));

border:1px solid rgba(255,255,255,.20);

color:#fff;

font-size:15px;

box-shadow:
  inset 0 1px 0 rgba(255,255,255,.25),
  inset 0 -2px 3px rgba(0,0,0,.25),
  0 8px 18px rgba(0,0,0,.25),
  0 2px 4px rgba(0,0,0,.20);

transition:transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease, color .25s ease;

}

.footer-social a:hover{

background:linear-gradient(180deg,#f0d27a,var(--gold));

border-color:var(--gold);

color:#4a0c17;

transform:translateY(-3px);

box-shadow:
  inset 0 1px 1px rgba(255,255,255,.5),
  inset 0 -2px 3px rgba(0,0,0,.15),
  0 14px 26px rgba(212,175,55,.35),
  0 4px 8px rgba(212,175,55,.25);

}

.footer-social a:active{

transform:translateY(0);

box-shadow:inset 0 3px 6px rgba(0,0,0,.35);

}

.footer-heading{

margin:0 0 12px;

font-family:'Playfair Display',serif;

font-size:15px;

font-weight:700;

letter-spacing:.2px;

color:var(--gold);

}

.footer-links{

list-style:none;

margin:0;

padding:0;

display:flex;

flex-direction:column;

gap:9px;

}

.footer-links a{

color:rgba(255,255,255,.8);

text-decoration:none;

font-size:13px;

transition:.2s;

}

.footer-links a:hover{

color:#6a0f20;

padding-left:3px;

}

.footer-loc{

margin-top:14px;

font-size:12px;

font-weight:600;

color:rgba(255,255,255,.6);

}

/* ===== FOOTER TRUST BADGES ===== */
.footer-badges{
max-width:1300px;
margin:0 auto;
padding:30px 0 38px;
border-top:1px solid rgba(255,255,255,.12);
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:14px 34px;
}
.footer-badge{
display:flex;
align-items:center;
gap:10px;
font-size:13px;
font-weight:600;
color:rgba(255,255,255,.82);
letter-spacing:.2px;
}
.footer-badge i{
color:var(--gold);
font-size:15px;
}

.footer-bottom{

max-width:1300px;

margin:0 auto;

padding:16px 0 18px;

border-top:1px solid rgba(255,255,255,.12);

display:flex;

align-items:center;

justify-content:space-between;

flex-wrap:wrap;

gap:14px;

text-align:left;

}

.footer-bottom .footer-copy{

margin:0;

font-size:13px;

color:rgba(255,255,255,.62);

}

.footer-legal{

display:flex;

align-items:center;

gap:10px;

font-size:13px;

}

.footer-legal a{

color:rgba(255,255,255,.62);

text-decoration:none;

transition:.2s;

}

.footer-legal a:hover{

color:var(--gold);

}

.footer-dot{

color:rgba(255,255,255,.35);

}
.mobile-header-top,
.mobile-header-bottom{

display:contents;

}
/*==================================================
   STANDALONE POLICY / INFO PAGES
   (About, Shopping Guide, Shipping, Payments,
   Returns & Refunds, Prohibited Items,
   Privacy & Security, Contact)
==================================================*/

.policy-hero{
  padding:50px 20px 40px;
  position:relative;
  overflow:hidden;
  text-align:center;
  background:linear-gradient(135deg,#fff,#fbf6f5);
}
.policy-hero::before{
  content:"";
  position:absolute;
  width:380px;height:380px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(212,175,55,.10), transparent 70%);
  top:-110px;left:-110px;
  filter:blur(40px);
  pointer-events:none;
}
.policy-eyebrow{
  display:inline-block;
  font-size:13px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--burgundy);
  background:#fbeaf0;
  padding:6px 16px;
  border-radius:999px;
  margin-bottom:16px;
}
.policy-title{
  font-family:'Playfair Display',serif;
  font-size:40px;
  font-weight:700;
  letter-spacing:-.5px;
  color:#6a0f20;
  margin:0 0 14px;
}
.policy-divider{
  width:80px;height:4px;
  margin:0 auto 22px;
  border-radius:50px;
  background:linear-gradient(90deg, var(--gold), var(--pink));
}
.policy-sub{
  max-width:680px;
  margin:0 auto;
  font-size:16px;
  line-height:1.85;
  color:#7d6772;
}
.policy-container{
  max-width:820px;
  margin:0 auto;
  padding:50px 20px 90px;
}
.policy-card{
  background:#fff;
  border-radius:26px;
  padding:38px 40px;
  box-shadow:0 18px 45px rgba(106,15,32,.07);
}
.policy-body p{
  line-height:1.9;
  color:#4a3540;
  font-size:15.5px;
  margin:0 0 20px;
}
.policy-body p:last-child{margin-bottom:0}
.policy-body ul{
  margin:0 0 20px;
  padding-left:22px;
  color:#4a3540;
  line-height:1.9;
  font-size:15.5px;
}
.policy-back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:26px;
  font-size:14px;
  font-weight:700;
  color:var(--burgundy);
  text-decoration:none;
}
.policy-back:hover{ color:var(--pink); }
.policy-nav{
  margin-top:40px;
  padding-top:30px;
  border-top:1px solid #f0e6e6;
}
.policy-nav h4{
  font-family:'Playfair Display',serif;
  font-size:16px;
  color:var(--burgundy);
  margin:0 0 14px;
}
.policy-nav-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.policy-nav-links a{
  font-size:13px;
  font-weight:600;
  color:#6a0f20;
  background:#fbf6f5;
  border:1px solid #f0e0e0;
  border-radius:999px;
  padding:8px 16px;
  text-decoration:none;
  transition:.2s;
}
.policy-nav-links a:hover{
  background:#fbeaf0;
  border-color:#f3c9d6;
}

/* ===== Shared breadcrumb + back bar (site-breadcrumb.js) =====
   Also reused as-is by listing.html's own dynamic breadcrumb so both
   look identical. */
.site-breadcrumb-bar{
  background:#fbf8f6;
  border-bottom:1px solid rgba(212,175,55,.14);
}
.breadcrumb-inner{
  max-width:1400px;
  margin:0 auto;
  padding:7px 5%;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.breadcrumb-back{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 11px;
  border-radius:999px;
  border:1px solid rgba(212,175,55,.25);
  background:linear-gradient(180deg,#ffffff,#faf7f6);
  color:var(--burgundy);
  font-size:11.5px;
  font-weight:600;
  cursor:pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 4px 10px rgba(106,15,32,.06);
  transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
  flex-shrink:0;
  font-family:'Poppins',sans-serif;
}
.breadcrumb-back:hover{
  background:var(--burgundy);
  color:#fff;
  border-color:var(--burgundy);
  transform:translateY(-1px);
  box-shadow:
    0 8px 16px rgba(106,15,32,.20);
}
.breadcrumb-back:active{
  transform:translateY(0);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.20);
}
.breadcrumb-trail{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:5px;
  font-size:11.5px;
  color:#a1838b;
  min-width:0;
}
.breadcrumb-trail a{
  color:#a1838b;
  text-decoration:none;
  transition:.2s ease;
}
.breadcrumb-trail a:hover{
  color:var(--burgundy);
}
.breadcrumb-sep{
  color:#d8c3c9;
}
.breadcrumb-current{
  color:var(--burgundy);
  font-weight:600;
  max-width:320px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
@media (max-width:600px){
  .breadcrumb-inner{padding:6px 4%; gap:8px;}
  .breadcrumb-back{padding:3px 10px; font-size:11px;}
  .breadcrumb-trail{font-size:11px;}
}

/* =========================================
   CUSTOM THEMED DROPDOWN POPUP
   -----------------------------------------
   Every <select> keeps its own existing box styling untouched (pill
   sort buttons, dashboard filters, etc.) — this is only the themed
   list that assets/js/shared/custom-select.js swaps in for the
   native popup, since Chrome always renders that in its own OS style
   (blue hover included) no matter what CSS targets the <select>.
========================================= */
.tl-select-popup{
  position:fixed;
  z-index:99999;
  margin:0;
  padding:6px;
  list-style:none;
  max-height:280px;
  overflow-y:auto;
  background:#fff;
  border:1px solid rgba(106,15,32,.10);
  border-radius:14px;
  box-shadow:
    0 18px 45px rgba(0,0,0,.16),
    0 4px 14px rgba(106,15,32,.10);
  font-family:'Poppins',sans-serif;
  animation:tlSelectPop .16s ease;
}
@keyframes tlSelectPop{
  from{ opacity:0; transform:translateY(-4px); }
  to{ opacity:1; transform:translateY(0); }
}
.tl-select-popup-option{
  padding:9px 14px;
  font-size:14px;
  font-weight:600;
  color:#3a2a2e;
  border-radius:9px;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.tl-select-popup-option:hover,
.tl-select-popup-option:focus{
  background:linear-gradient(135deg,#6a0f20,#8a1c30);
  color:#fff;
  outline:none;
}
.tl-select-popup-option.active{
  color:#6a0f20;
  background:rgba(212,175,55,.16);
}
.tl-select-popup-option.active:hover,
.tl-select-popup-option.active:focus{
  background:linear-gradient(135deg,#6a0f20,#8a1c30);
  color:#fff;
}
.tl-select-popup-option[aria-disabled="true"]{
  opacity:.45;
  cursor:not-allowed;
}
.tl-select-popup::-webkit-scrollbar{ width:8px; }
.tl-select-popup::-webkit-scrollbar-thumb{ background:rgba(106,15,32,.18); border-radius:8px; }

/* ==========================================================
   PR-047 — SHARED LOADING STATES
   Two reusable pieces used everywhere a button waits on
   Firestore/a Cloud Function/Razorpay:
     1. Button-level: disables the button and swaps its label
        for a small spinner + a specific message, sized to the
        button's own locked-in width so nothing reflows.
     2. Full overlay: for multi-step waits (payment creation/
        verification) where the button alone isn't enough
        context — reuses the same brand mark + pulse/sheen
        animation as the full-page splash loader above, in a
        smaller card, with an optional "still working" line
        that appears if a wait runs long instead of leaving a
        silent spinner with no explanation.
   Driven by assets/js/shared/loading.js — see that file for
   the JS half of this pattern.
   ========================================================== */

.tl-btn-loading{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:not-allowed!important;
  opacity:.92;
}

.tl-btn-spinner{
  display:inline-block;
  width:15px;
  height:15px;
  border-radius:50%;
  border:2.5px solid rgba(255,255,255,.4);
  border-top-color:#fff;
  animation:tlBtnSpin .7s linear infinite;
  flex-shrink:0;
}

/* For buttons on a light background (e.g. "Continue with Google",
   white/outline buttons) — pass theme:"dark" to setButtonLoading(). */
.tl-btn-loading.tl-btn-spinner-dark .tl-btn-spinner{
  border-color:rgba(106,15,32,.22);
  border-top-color:#6a0f20;
}

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

@media (prefers-reduced-motion: reduce){
  .tl-btn-spinner{ animation:none; }
}

/* No card. The overlay itself blurs + dims the real page behind it —
   only the brand mark, a halo ring, and the message float on top. See
   assets/js/shared/loading.js for the DOM this styles (buildOverlay()). */
.tl-loading-overlay{
  position:fixed;
  inset:0;
  z-index:100000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:radial-gradient(circle at 50% 45%, rgba(20,10,11,.5), rgba(15,8,9,.72));
  backdrop-filter:blur(9px) saturate(115%);
  -webkit-backdrop-filter:blur(9px) saturate(115%);
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}

.tl-loading-overlay.tl-loading-visible{
  opacity:1;
  visibility:visible;
}

.tl-loading-stack{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  text-align:center;
  max-width:320px;
  transform:scale(.92);
  opacity:0;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1), opacity .35s ease;
}

.tl-loading-overlay.tl-loading-visible .tl-loading-stack{
  transform:scale(1);
  opacity:1;
}

/* Brand mark: a soft blurred halo behind a rotating gold->burgundy
   ring, with the logo sitting still (and slightly inset) at the
   center — the same "actively working" ring language used by upload/
   sync avatars, dressed in TintLane's own gradient. */
.tl-loader-visual{
  position:relative;
  width:130px;
  height:130px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.tl-loader-halo{
  position:absolute;
  inset:-10px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(212,175,55,.45), rgba(106,15,32,.2) 55%, transparent 72%);
  filter:blur(6px);
}

.tl-loading-ring{
  position:relative;
  width:104px;
  height:104px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.tl-loading-ring::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:conic-gradient(from 0deg,#d4af37,#6a0f20,#d4af37 95%,#d4af37);
  animation:tlRingSpin 1.7s linear infinite;
}

.tl-loading-ring::after{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:50%;
  background:rgba(20,11,12,.94);
}

.tl-loading-ring img{
  position:relative;
  z-index:1;
  width:72px;
  height:72px;
  border-radius:50%;
  object-fit:cover;
  display:block;
  box-shadow:0 12px 30px rgba(0,0,0,.4);
}

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

.tl-loading-message{
  margin:0;
  font-family:'Poppins',sans-serif;
  font-weight:700;
  font-size:17px;
  color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.4);
  min-height:24px;
  transition:opacity .22s ease, transform .22s ease;
}

/* Applied briefly by updateLoadingOverlay() while swapping between
   stages (e.g. "Creating your order…" -> "Confirming your payment…")
   so the text crossfades instead of snapping. */
.tl-loading-message.tl-msg-swap{
  opacity:0;
  transform:translateY(-5px);
}

/* Slim indeterminate shimmer — reinforces "still actively working"
   without ever implying a fake percentage. */
.tl-loading-progress{
  width:100%;
  max-width:180px;
  height:3px;
  border-radius:3px;
  background:rgba(255,255,255,.16);
  overflow:hidden;
  position:relative;
}

.tl-loading-progress-bar{
  position:absolute;
  top:0;
  left:-40%;
  width:40%;
  height:100%;
  border-radius:3px;
  background:linear-gradient(90deg, rgba(212,175,55,0), #d4af37 40%, #f3d38a 60%, rgba(212,175,55,0));
  animation:tlProgressSlide 1.5s ease-in-out infinite;
}

@keyframes tlProgressSlide{
  0%{ left:-40%; }
  100%{ left:100%; }
}

/* Plain text, not a pill/box — sits directly on the blurred backdrop
   like the message above it, wrapping to two short lines instead of
   forcing one long line. */
.tl-loading-submessage{
  margin:0;
  font-family:'Poppins',sans-serif;
  font-weight:500;
  font-size:13px;
  line-height:1.6;
  color:rgba(255,255,255,.85);
  text-shadow:0 2px 10px rgba(0,0,0,.35);
  max-width:250px;
  transition:opacity .2s ease, transform .2s ease;
}

/* Applied briefly by showLoadingOverlay()'s swapSub() helper each time
   the line alternates between the "please hang on" and support-contact
   text, so every hand-off between the two crossfades like the main
   message does, instead of the text just snapping mid-cycle. */
.tl-loading-submessage.tl-sub-swap{
  opacity:0;
  transform:translateY(-4px);
}

/* [hidden] alone isn't reliable once a same-specificity class rule
   above sets its own `display` later in the cascade — this makes sure
   the element actually disappears (no empty gap) until the escalation
   timer in loading.js reveals it. */
.tl-loading-submessage[hidden]{
  display:none;
}

/* Applied once by showLoadingOverlay()'s escalation timer, the moment
   the "still working" line appears, for a small entrance instead of a
   hard cut. */
.tl-loading-submessage.tl-sub-enter{
  animation:tlSubIn .3s ease both;
}

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

.tl-loading-submessage a{
  color:#f3d38a;
  font-weight:700;
  text-decoration:underline;
}

@media (prefers-reduced-motion: reduce){
  .tl-loading-ring::before,
  .tl-loading-progress-bar{
    animation:none;
  }
}

@media(max-width:420px){
  .tl-loader-visual{ width:108px; height:108px; }
  .tl-loading-ring{ width:88px; height:88px; }
  .tl-loading-ring img{ width:60px; height:60px; }
}