/* =========================================================
   RUSHD COLLECTION — CLEAN V1
   Clean styling layer over the native EasyOrders DOM.
   No layout reconstruction. No hard-fix patches.
========================================================= */

:root{
  --rushd-navy:#0E1F3D;
  --rushd-deep:#081327;
  --rushd-red:#E43036;
  --rushd-cream:#F7F4EE;
  --rushd-white:#FFFFFF;
  --rushd-muted:#61758A;
  --rushd-ease:cubic-bezier(.22,.8,.22,1);
}

/* =========================
   COLLECTION PAGE
========================= */

body.rushd-collection{
  background:
    radial-gradient(circle at 12% 18%,rgba(228,48,54,.13),transparent 24%),
    radial-gradient(circle at 88% 82%,rgba(14,31,61,.18),transparent 30%),
    linear-gradient(135deg,#F7F4EE 0%,#FFFFFF 48%,#F7F4EE 100%) !important;
}

body.rushd-collection main{
  position:relative;
  overflow:hidden;
}

body.rushd-collection main::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.55;
  background:
    radial-gradient(circle at 14% 18%,rgba(228,48,54,.14) 0 2px,transparent 3px),
    radial-gradient(circle at 84% 22%,rgba(14,31,61,.14) 0 2px,transparent 3px),
    radial-gradient(circle at 28% 74%,rgba(14,31,61,.10) 0 2px,transparent 3px),
    linear-gradient(32deg,transparent 48.8%,rgba(14,31,61,.07) 49.2%,rgba(14,31,61,.07) 49.8%,transparent 50.2%) 0 0/150px 150px,
    linear-gradient(-32deg,transparent 48.8%,rgba(228,48,54,.06) 49.2%,rgba(228,48,54,.06) 49.8%,transparent 50.2%) 0 0/150px 150px;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.95),rgba(0,0,0,.5) 65%,transparent);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.95),rgba(0,0,0,.5) 65%,transparent);
}

body.rushd-collection main::after{
  content:"";
  position:absolute;
  right:-120px;
  top:-110px;
  width:430px;
  height:430px;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  opacity:.16;
  background:
    repeating-radial-gradient(circle at center,transparent 0 26px,rgba(14,31,61,.22) 27px 28px,transparent 29px 52px),
    conic-gradient(from 0deg,
      rgba(14,31,61,.22) 0 1deg,transparent 1deg 29deg,
      rgba(14,31,61,.22) 29deg 30deg,transparent 30deg 59deg,
      rgba(14,31,61,.22) 59deg 60deg,transparent 60deg 89deg,
      rgba(14,31,61,.22) 89deg 90deg,transparent 90deg 119deg,
      rgba(14,31,61,.22) 119deg 120deg,transparent 120deg 149deg,
      rgba(14,31,61,.22) 149deg 150deg,transparent 150deg 179deg,
      rgba(14,31,61,.22) 179deg 180deg,transparent 180deg 209deg,
      rgba(14,31,61,.22) 209deg 210deg,transparent 210deg 239deg,
      rgba(14,31,61,.22) 239deg 240deg,transparent 240deg 269deg,
      rgba(14,31,61,.22) 269deg 270deg,transparent 270deg 299deg,
      rgba(14,31,61,.22) 299deg 300deg,transparent 300deg 329deg,
      rgba(14,31,61,.22) 329deg 330deg,transparent 330deg);
}

body.rushd-collection main > *{
  position:relative;
  z-index:1;
}

body.rushd-collection .home_section_top_container{
  display:none !important;
}

/* ---------- Collection headline ---------- */
body.rushd-collection .category_section_header{
  position:relative;
  overflow:visible;
  min-height:150px;
  margin:0 0 30px !important;
  padding:28px 30px !important;

  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto auto auto;
  align-items:center;
  gap:6px 24px;

  border:1px solid rgba(255,255,255,.08);
  border-bottom:2px solid var(--rushd-red);
  border-radius:26px;

  background:
    radial-gradient(circle at 7% 46%,rgba(228,48,54,.20),transparent 26%),
    radial-gradient(circle at 85% 5%,rgba(255,255,255,.055),transparent 25%),
    linear-gradient(135deg,var(--rushd-deep),var(--rushd-navy));

  box-shadow:0 20px 44px rgba(8,19,39,.12);
}

body.rushd-collection .category_section_header::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.12;
  background:
    repeating-radial-gradient(circle at 92% 20%,transparent 0 38px,rgba(247,244,238,.34) 39px 40px,transparent 41px 69px),
    repeating-conic-gradient(from 0deg at 92% 20%,rgba(247,244,238,.30) 0deg 1deg,transparent 1deg 30deg);
  -webkit-mask:linear-gradient(to left,#000 0,rgba(0,0,0,.68) 44%,transparent 82%);
  mask:linear-gradient(to left,#000 0,rgba(0,0,0,.68) 44%,transparent 82%);
}

body.rushd-collection .category_section_header_title{
  position:relative;
  z-index:2;

  grid-column:1;
  grid-row:1;

  margin:0 !important;
  padding:0 !important;

  color:#fff !important;
  font-size:clamp(30px,4vw,46px) !important;
  line-height:1.25 !important;
  font-weight:800 !important;
  letter-spacing:-.03em;
}

body.rushd-collection .rushd-collection-subtitle{
  position:relative;
  z-index:2;

  grid-column:1;
  grid-row:2;

  margin:0;
  color:rgba(247,244,238,.72);
  font-size:12px;
  line-height:1.7;
  font-weight:600;
}

body.rushd-collection .rushd-collection-nodes{
  position:relative;
  z-index:2;

  grid-column:1;
  grid-row:3;

  display:flex;
  align-items:center;
  gap:0;
  margin-top:8px;
  direction:ltr;
}

body.rushd-collection .rushd-collection-nodes span{
  width:8px;
  height:8px;
  border:1.5px solid rgba(247,244,238,.48);
  border-radius:50%;
  background:var(--rushd-navy);
}

body.rushd-collection .rushd-collection-nodes span:first-child{
  border-color:var(--rushd-red);
  background:var(--rushd-red);
  box-shadow:0 0 0 4px rgba(228,48,54,.09);
}

body.rushd-collection .rushd-collection-nodes i{
  width:38px;
  height:1px;
  background:linear-gradient(90deg,rgba(228,48,54,.50),rgba(247,244,238,.22));
}

/* Native sort — styled in place */
body.rushd-collection .category_section_header > div:has(> button[aria-haspopup="true"]){
  position:relative;
  z-index:3;

  grid-column:2;
  grid-row:1 / span 3;
}

body.rushd-collection .category_section_header button[aria-haspopup="true"]{
  min-width:165px;
  min-height:46px;

  justify-content:center;

  border:1px solid rgba(247,244,238,.18) !important;
  border-radius:13px !important;

  background:rgba(255,255,255,.075) !important;
  color:var(--rushd-cream) !important;

  box-shadow:inset 0 1px rgba(255,255,255,.05);

  backdrop-filter:blur(12px) saturate(120%);
  -webkit-backdrop-filter:blur(12px) saturate(120%);

  transition:border-color .2s ease,background .2s ease,transform .2s var(--rushd-ease);
}

body.rushd-collection .category_section_header button[aria-haspopup="true"]:hover,
body.rushd-collection .category_section_header button[aria-expanded="true"]{
  transform:translateY(-1px);
  border-color:rgba(228,48,54,.44) !important;
  background:rgba(228,48,54,.10) !important;
}

body.rushd-collection .category_section_header button[aria-haspopup="true"] svg{
  color:var(--rushd-red) !important;
}

/* ---------- Product cards — PREMIUM PLP V3 ---------- */
/*
  UX direction:
  - clear visual hierarchy
  - large, consistent product image
  - category -> title -> price order
  - stable card heights for easy comparison
  - quick actions stay secondary to the product itself
*/

body.rushd-collection .category_products_grid_container{
  gap:22px 14px !important;
  align-items:stretch !important;
}

body.rushd-collection .category_products_grid_container > div{
  min-width:0;
  height:100%;
}

body.rushd-collection .category_products_grid_container > div > .group{
  position:relative;
  height:100%;
  min-height:100%;
  overflow:hidden !important;

  padding:10px 10px 16px !important;

  border:1px solid rgba(14,31,61,.085);
  border-radius:22px !important;

  background:
    linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.94) 68%,rgba(247,244,238,.94) 100%) !important;

  box-shadow:
    0 10px 28px rgba(8,19,39,.055),
    inset 0 1px 0 rgba(255,255,255,.95);

  isolation:isolate;

  transition:
    transform .30s var(--rushd-ease),
    box-shadow .30s var(--rushd-ease),
    border-color .22s ease !important;
}

body.rushd-collection .category_products_grid_container > div > .group::before{
  content:"";
  position:absolute;
  z-index:0;
  top:0;
  right:18px;
  width:62px;
  height:3px;
  border-radius:0 0 999px 999px;
  background:linear-gradient(90deg,var(--rushd-red),rgba(228,48,54,.22));
  opacity:.92;
}

body.rushd-collection .category_products_grid_container > div > .group::after{
  content:"";
  position:absolute;
  z-index:0;
  right:-46px;
  top:-48px;
  width:145px;
  height:145px;
  border-radius:50%;
  pointer-events:none;
  opacity:.045;
  background:
    repeating-radial-gradient(circle at center,transparent 0 15px,rgba(14,31,61,.55) 16px 17px,transparent 18px 31px),
    repeating-conic-gradient(from 0deg at center,rgba(14,31,61,.55) 0 1deg,transparent 1deg 36deg);
}

body.rushd-collection .category_products_grid_container > div > .group:hover{
  transform:translateY(-6px) !important;
  border-color:rgba(228,48,54,.20);
  box-shadow:
    0 22px 48px rgba(8,19,39,.11),
    0 0 0 1px rgba(228,48,54,.025) inset;
}

/* Image area — visually dominant and consistent */
body.rushd-collection .category_products_grid_container > div > .group > .flex.relative{
  width:100%;
}

body.rushd-collection .category_products_grid_container > div > .group > .flex.relative > .relative{
  position:relative;
  z-index:1;

  width:100%;
  aspect-ratio:1 / 1.12;
  min-height:0;

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

  overflow:hidden !important;

  border:1px solid rgba(14,31,61,.06);
  border-radius:16px !important;

  background:
    radial-gradient(ellipse at 50% 84%,rgba(14,31,61,.085),transparent 42%),
    radial-gradient(circle at 18% 14%,rgba(228,48,54,.055),transparent 26%),
    linear-gradient(180deg,#FFFFFF 0%,#F8F7F4 100%);

  perspective:1100px;
}

body.rushd-collection .category_products_grid_container > div > .group > .flex.relative > .relative::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.035;
  background:
    linear-gradient(32deg,transparent 49%,rgba(14,31,61,.48) 49.5%,transparent 50%) 0 0/92px 92px,
    linear-gradient(-32deg,transparent 49%,rgba(228,48,54,.40) 49.5%,transparent 50%) 0 0/92px 92px;
}

body.rushd-collection .category_products_grid_container > div > .group > .flex.relative > .relative::after{
  content:"";
  position:absolute;
  left:23%;
  right:23%;
  bottom:12%;
  height:11px;
  border-radius:50%;
  background:rgba(8,19,39,.15);
  filter:blur(9px);
  pointer-events:none;
}

body.rushd-collection .category_products_grid_container > div > .group > .flex.relative > .relative img{
  position:relative;
  z-index:2;

  width:auto !important;
  height:auto !important;
  max-width:78% !important;
  max-height:80% !important;

  object-fit:contain !important;
  border-radius:7px !important;

  transform:rotateY(-4.5deg) rotateX(.7deg) translateZ(18px);
  box-shadow:
    -7px 12px 18px rgba(8,19,39,.15),
    0 2px 4px rgba(8,19,39,.05);

  transition:
    transform .34s var(--rushd-ease),
    box-shadow .34s var(--rushd-ease);
}

body.rushd-collection .category_products_grid_container > div > .group:hover > .flex.relative > .relative img{
  transform:translateY(-5px) rotateY(-2deg) rotateX(.5deg) translateZ(28px);
  box-shadow:
    -9px 17px 25px rgba(8,19,39,.18),
    0 3px 5px rgba(8,19,39,.05);
}

/* Quick actions — secondary and unobtrusive */
body.rushd-collection .category_products_grid_container > div > .group > .flex.relative > div:last-child{
  z-index:5 !important;

  left:10px !important;
  right:auto !important;
  bottom:10px !important;

  flex-direction:row !important;
  gap:5px !important;

  padding:5px !important;

  border:1px solid rgba(14,31,61,.09) !important;
  border-radius:999px !important;

  background:rgba(255,255,255,.90) !important;

  box-shadow:
    0 9px 22px rgba(8,19,39,.10),
    inset 0 1px rgba(255,255,255,.88) !important;

  backdrop-filter:blur(12px) saturate(120%);
  -webkit-backdrop-filter:blur(12px) saturate(120%);

  transition:
    opacity .2s ease,
    transform .24s var(--rushd-ease) !important;
}

body.rushd-collection .category_products_grid_container > div > .group > .flex.relative > div:last-child button{
  width:34px;
  height:34px;

  display:grid;
  place-items:center;

  margin:0 !important;
  padding:0 !important;

  border-radius:50%;

  color:var(--rushd-navy) !important;
  background:transparent;

  transition:
    color .18s ease,
    background .18s ease,
    transform .18s ease;
}

body.rushd-collection .category_products_grid_container > div > .group > .flex.relative > div:last-child button:hover{
  color:#fff !important;
  background:var(--rushd-navy) !important;
  transform:scale(1.05);
}

body.rushd-collection .category_products_grid_container > div > .group > .flex.relative > div:last-child button:first-child{
  color:var(--rushd-red) !important;
}

body.rushd-collection .category_products_grid_container > div > .group > .flex.relative > div:last-child button svg{
  width:18px !important;
  height:18px !important;
}

/* Information stack */
body.rushd-collection .category_products_grid_container > div > .group > .text-center{
  position:relative;
  z-index:2;

  width:100% !important;
  min-height:132px;

  display:flex;
  flex-direction:column;
  align-items:flex-start !important;

  padding:0 5px !important;

  text-align:right !important;
}

body.rushd-collection .category_products_grid_container > div > .group > .text-center > div:first-child{
  width:100%;
  margin:12px 0 0 !important;
  text-align:right;
}

body.rushd-collection .category_products_grid_container > div > .group > .text-center > div:first-child span{
  display:inline-flex !important;
  align-items:center;
  gap:6px;

  margin:0 !important;
  padding:5px 8px;

  border:1px solid rgba(14,31,61,.07);
  border-radius:8px;

  background:rgba(14,31,61,.035);

  color:#667085 !important;
  font-size:8px !important;
  line-height:1 !important;
  font-weight:800 !important;
}

body.rushd-collection .category_products_grid_container > div > .group > .text-center > div:first-child span::before{
  content:"";
  width:5px;
  height:5px;
  flex:none;
  border-radius:50%;
  background:var(--rushd-red);
  box-shadow:0 0 0 3px rgba(228,48,54,.07);
}

/* Product title: 2-line consistent rhythm */
body.rushd-collection .category_products_grid_container > div > .group h3{
  width:100%;

  margin:9px 0 0 !important;

  color:var(--rushd-deep) !important;

  font-size:14px !important;
  line-height:1.62 !important;
  font-weight:800 !important;
  letter-spacing:-.015em;

  text-align:right !important;

  min-height:45px;

  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}

/* Price block anchored at bottom for easy comparison */
body.rushd-collection .category_products_grid_container > div > .group > .text-center > div:last-child{
  width:100%;

  margin:auto 0 0 !important;
  padding-top:10px;

  justify-content:flex-start !important;

  border-top:1px solid rgba(14,31,61,.07);
}

body.rushd-collection .category_products_grid_container > div > .group > .text-center > div:last-child > span{
  color:var(--rushd-red) !important;

  font-size:20px !important;
  line-height:1 !important;
  font-weight:800 !important;
  letter-spacing:-.025em;
}

body.rushd-collection .category_products_grid_container > div > .group > .text-center > div:last-child > span span{
  color:var(--rushd-navy) !important;
  font-size:.58em !important;
  font-weight:800 !important;
}

/* Better pointer affordance */
body.rushd-collection .category_products_grid_container > div > .group,
body.rushd-collection .category_products_grid_container > div > .group h3{
  cursor:pointer;
}


/* =========================
   PRODUCT PREVIEW POPUP
   Native EasyOrders structure only
========================= */

[data-product-preview="root"]{
  --rushd-navy:#0E1F3D;
  --rushd-deep:#081327;
  --rushd-red:#E43036;
  --rushd-cream:#F7F4EE;
  --rushd-ease:cubic-bezier(.22,.8,.22,1);
}

/* Native overlay */
[data-product-preview="overlay"]{
  background:rgba(8,19,39,.52) !important;
  backdrop-filter:blur(7px) saturate(108%) !important;
  -webkit-backdrop-filter:blur(7px) saturate(108%) !important;
}

/* Native wrapper/container */
[data-product-preview="wrapper"]{
  overflow-y:auto !important;
  overflow-x:hidden !important;
}

[data-product-preview="panel-container"]{
  padding:16px !important;
}

/* Native panel */
[data-product-preview="panel"]{
  overflow:hidden !important;

  border:1px solid rgba(247,244,238,.15) !important;
  border-top:2px solid var(--rushd-red) !important;
  border-radius:26px !important;

  background:
    radial-gradient(circle at 7% 14%,rgba(228,48,54,.17),transparent 28%),
    linear-gradient(145deg,rgba(14,31,61,.92),rgba(8,19,39,.88)) !important;

  box-shadow:
    0 34px 90px rgba(8,19,39,.38),
    inset 0 1px rgba(255,255,255,.07) !important;

  backdrop-filter:blur(28px) saturate(138%) !important;
  -webkit-backdrop-filter:blur(28px) saturate(138%) !important;
}

/* Native scroll container */
[data-product-preview="panel-inner"]{
  max-height:85vh !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;

  background:transparent !important;

  scrollbar-width:thin;
  scrollbar-color:rgba(247,244,238,.24) transparent;
}

[data-product-preview="content"]{
  padding:24px !important;
}

/* Native grid — keep its own responsive structure */
[data-product-preview="grid"]{
  gap:22px !important;
  align-items:start !important;
}

/* Gallery */
[data-product-preview="gallery"]{
  padding:10px !important;

  border:1px solid rgba(14,31,61,.08);
  border-radius:20px;

  background:#fff;

  box-shadow:0 16px 38px rgba(8,19,39,.12);
}

[data-product-preview="gallery-main-panel"]{
  overflow:hidden;
  border-radius:15px;
  background:linear-gradient(180deg,#FCFCFD,#F7F4EE);
}

[data-product-preview="gallery-main-image"]{
  object-fit:contain !important;
  padding:6px;
}

[data-product-preview="gallery-thumbnails"]{
  padding-top:8px !important;
}

[data-product-preview="gallery-thumbnail"]{
  border:1px solid rgba(14,31,61,.10) !important;
  border-radius:10px !important;
  background:#fff !important;

  transition:transform .2s var(--rushd-ease),border-color .2s ease !important;
}

[data-product-preview="gallery-thumbnail"]:hover{
  transform:translateY(-2px);
  border-color:rgba(228,48,54,.36) !important;
}

[data-product-preview="gallery-thumbnail"][aria-selected="true"]{
  border:2px solid var(--rushd-red) !important;
}

/* Details */
[data-product-preview="details"]{
  color:var(--rushd-cream);
}

[data-product-preview="category"]{
  display:inline-flex !important;
  align-items:center;

  padding:7px 10px;

  border:1px solid rgba(247,244,238,.12);
  border-radius:9px;

  background:rgba(247,244,238,.075);

  color:var(--rushd-red) !important;
  font-size:10px !important;
  font-weight:800 !important;
  text-decoration:none;
}

[data-product-preview="title"]{
  color:#fff !important;
  font-size:clamp(26px,2.6vw,38px) !important;
  line-height:1.3 !important;
  font-weight:800 !important;
}

[data-product-preview="description"]{
  color:rgba(247,244,238,.70) !important;
  line-height:1.9 !important;
}

[data-product-preview="current-price"]{
  color:var(--rushd-red) !important;
  font-weight:800 !important;
}

[data-product-preview="current-price"] span{
  color:var(--rushd-cream) !important;
}

/* Quantity */
[data-product-preview="quantity-control"]{
  min-height:48px;

  border:1px solid rgba(247,244,238,.14) !important;
  border-radius:12px !important;

  background:rgba(247,244,238,.96) !important;

  color:var(--rushd-deep) !important;
}

[data-product-preview="quantity-control"] button{
  color:var(--rushd-navy) !important;
}

[data-product-preview="quantity-control"] button:hover:not(:disabled){
  background:var(--rushd-navy) !important;
  color:#fff !important;
}

[data-product-preview="quantity-control"] button svg{
  color:currentColor !important;
}

/* Add to cart + Buy — EXACT PRODUCT PAGE BUTTON LANGUAGE */
[data-product-preview="add-to-cart"],
[data-product-preview="buy-now"]{
  position:relative !important;
  z-index:1;
  isolation:isolate;
  overflow:visible !important;

  min-height:48px;

  border:1px solid rgba(14,31,61,.10) !important;
  border-radius:12px !important;

  color:var(--rushd-red) !important;
  font-weight:800 !important;

  background-image:
    linear-gradient(90deg,var(--rushd-navy) 0%,var(--rushd-navy) 100%),
    linear-gradient(135deg,#FFFFFF,var(--rushd-cream)) !important;
  background-size:0% 100%,100% 100% !important;
  background-position:left top,left top !important;
  background-repeat:no-repeat !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    0 6px 16px rgba(14,31,61,.055) !important;

  transition:
    transform .28s var(--rushd-ease),
    color .18s ease .10s,
    border-color .24s ease,
    box-shadow .28s var(--rushd-ease),
    background-size .38s cubic-bezier(.22,.8,.2,1) !important;
}

/* RUSHD web energy around the button on hover */
[data-product-preview="add-to-cart"]::before,
[data-product-preview="buy-now"]::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  z-index:-1;
  width:calc(100% + 20px);
  height:calc(100% + 12px);
  transform:translate(-50%,-50%) scale(.68) rotate(-3deg);
  opacity:0;
  pointer-events:none;

  background:
    radial-gradient(circle at 50% 50%,transparent 0 18%,rgba(255,255,255,.72) 19% 20%,transparent 21%),
    repeating-conic-gradient(from 8deg at 50% 50%,rgba(255,255,255,.72) 0deg 1.25deg,transparent 1.25deg 38deg),
    radial-gradient(ellipse at 50% 50%,rgba(247,244,238,.14),transparent 62%);

  -webkit-mask:radial-gradient(ellipse at 50% 50%,transparent 0 23%,#000 25% 72%,transparent 74%);
  mask:radial-gradient(ellipse at 50% 50%,transparent 0 23%,#000 25% 72%,transparent 74%);

  transition:
    opacity .18s ease .03s,
    transform .36s var(--rushd-ease);
}

/* Red premium border flash */
[data-product-preview="add-to-cart"]::after,
[data-product-preview="buy-now"]::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  border:1px solid transparent;
  background:
    linear-gradient(
      145deg,
      rgba(228,48,54,.82),
      rgba(247,244,238,.22),
      rgba(228,48,54,.62)
    ) border-box;
  -webkit-mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:opacity .22s ease;
}

[data-product-preview="add-to-cart"]:hover,
[data-product-preview="add-to-cart"]:focus-visible,
[data-product-preview="buy-now"]:hover,
[data-product-preview="buy-now"]:focus-visible{
  color:var(--rushd-cream) !important;
  transform:translateY(-3px) scale(1.015);
  border-color:rgba(228,48,54,.44) !important;
  background-size:100% 100%,100% 100% !important;

  box-shadow:
    inset 0 1px 0 rgba(247,244,238,.12),
    0 10px 22px rgba(14,31,61,.14),
    0 0 0 1px rgba(228,48,54,.08),
    0 0 18px rgba(228,48,54,.10) !important;
}

[data-product-preview="add-to-cart"]:hover::before,
[data-product-preview="add-to-cart"]:focus-visible::before,
[data-product-preview="buy-now"]:hover::before,
[data-product-preview="buy-now"]:focus-visible::before{
  opacity:.78;
  transform:translate(-50%,-50%) scale(1) rotate(2.5deg);
}

[data-product-preview="add-to-cart"]:hover::after,
[data-product-preview="add-to-cart"]:focus-visible::after,
[data-product-preview="buy-now"]:hover::after,
[data-product-preview="buy-now"]:focus-visible::after{
  opacity:1;
}

/* Native full-details link stays in normal flow */
[data-product-preview="view-full-details"]{
  display:inline-flex !important;
  align-items:center;
  gap:8px;

  margin-top:16px !important;

  color:rgba(247,244,238,.82) !important;
  font-weight:800 !important;
  text-decoration:none !important;
}

[data-product-preview="view-full-details"] svg{
  color:var(--rushd-red);
}

/* Native close button — style only */
[data-product-preview="close-button"]{
  width:40px;
  height:40px;

  display:grid !important;
  place-items:center;

  padding:0 !important;

  border:1px solid rgba(228,48,54,.20) !important;
  border-radius:50% !important;

  background:rgba(247,244,238,.96) !important;
  color:var(--rushd-red) !important;

  box-shadow:0 8px 20px rgba(8,19,39,.15) !important;
}

[data-product-preview="close-button"] svg{
  color:currentColor !important;
}


/* =========================
   DESKTOP CHARACTER ONLY
========================= */

.rushd-preview-character{
  position:absolute;
  z-index:2;

  width:clamp(210px,18vw,300px);
  height:auto;

  pointer-events:none;
  user-select:none;

  filter:
    drop-shadow(0 22px 28px rgba(8,19,39,.24))
    drop-shadow(0 4px 10px rgba(228,48,54,.08));
}

[data-product-preview="panel-container"]{
  position:relative !important;
  overflow:visible !important;
  isolation:isolate;
}

[data-product-preview="panel"]{
  position:relative !important;
  z-index:3 !important;
}


/* =========================
   MOBILE
========================= */

@media(max-width:767px){

  body.rushd-collection main{
    padding-left:12px !important;
    padding-right:12px !important;
  }

  /* Same collection headline, simply responsive */
  body.rushd-collection .category_section_header{
    min-height:112px;

    margin-bottom:18px !important;
    padding:15px 14px !important;

    grid-template-columns:minmax(0,1fr) 92px;
    gap:4px 8px;

    border-radius:18px;
  }

  body.rushd-collection .category_section_header_title{
    font-size:21px !important;
    line-height:1.35 !important;
  }

  body.rushd-collection .rushd-collection-subtitle{
    font-size:8.5px;
  }

  body.rushd-collection .rushd-collection-nodes{
    margin-top:4px;
  }

  body.rushd-collection .rushd-collection-nodes span{
    width:6px;
    height:6px;
  }

  body.rushd-collection .rushd-collection-nodes i{
    width:22px;
  }

  body.rushd-collection .category_section_header > div:has(> button[aria-haspopup="true"]){
    width:92px;
  }

  body.rushd-collection .category_section_header button[aria-haspopup="true"]{
    width:92px;
    min-width:92px;
    min-height:38px;

    padding:6px 5px !important;

    font-size:9px !important;

    border-radius:10px !important;
  }

  body.rushd-collection .category_section_header button[aria-haspopup="true"] span{
    padding-left:4px !important;
    padding-right:4px !important;
  }

  /* Premium 2-col product cards on mobile */
  body.rushd-collection .category_products_grid_container{
    gap:10px !important;
  }

  body.rushd-collection .category_products_grid_container > div > .group{
    padding:6px 6px 11px !important;
    border-radius:15px !important;
    transform:none !important;
    box-shadow:0 8px 20px rgba(8,19,39,.055);
  }

  body.rushd-collection .category_products_grid_container > div > .group:hover{
    transform:none !important;
  }

  body.rushd-collection .category_products_grid_container > div > .group::before{
    right:12px;
    width:38px;
    height:2px;
  }

  body.rushd-collection .category_products_grid_container > div > .group > .flex.relative > .relative{
    aspect-ratio:1 / 1.16;
    border-radius:11px !important;
    perspective:800px;
  }

  body.rushd-collection .category_products_grid_container > div > .group > .flex.relative > .relative img{
    max-width:79% !important;
    max-height:79% !important;
    transform:rotateY(-3deg) rotateX(.5deg) translateZ(10px);
    box-shadow:-5px 8px 12px rgba(8,19,39,.13);
  }

  body.rushd-collection .category_products_grid_container > div > .group:hover > .flex.relative > .relative img{
    transform:rotateY(-3deg) rotateX(.5deg) translateZ(10px);
  }

  body.rushd-collection .category_products_grid_container > div > .group > .flex.relative > div:last-child{
    left:6px !important;
    bottom:6px !important;
    gap:2px !important;
    padding:3px !important;
    opacity:1 !important;
  }

  body.rushd-collection .category_products_grid_container > div > .group > .flex.relative > div:last-child button{
    width:28px;
    height:28px;
  }

  body.rushd-collection .category_products_grid_container > div > .group > .flex.relative > div:last-child button svg{
    width:15px !important;
    height:15px !important;
  }

  body.rushd-collection .category_products_grid_container > div > .group > .text-center{
    min-height:112px;
    padding:0 3px !important;
  }

  body.rushd-collection .category_products_grid_container > div > .group > .text-center > div:first-child{
    margin-top:8px !important;
  }

  body.rushd-collection .category_products_grid_container > div > .group > .text-center > div:first-child span{
    padding:4px 6px;
    border-radius:7px;
    font-size:6.8px !important;
  }

  body.rushd-collection .category_products_grid_container > div > .group h3{
    min-height:38px;
    margin-top:7px !important;
    font-size:11px !important;
    line-height:1.55 !important;
  }

  body.rushd-collection .category_products_grid_container > div > .group > .text-center > div:last-child{
    padding-top:8px;
  }

  body.rushd-collection .category_products_grid_container > div > .group > .text-center > div:last-child > span{
    font-size:17px !important;
  }


  /* ---------- Popup mobile: native structure, responsive sizing ---------- */

  [data-product-preview="panel-container"]{
    padding:8px !important;
    align-items:center !important;
  }

  [data-product-preview="panel"]{
    width:100% !important;
    max-width:420px !important;

    border-radius:18px !important;
  }

  [data-product-preview="panel-inner"]{
    max-height:calc(100dvh - 16px) !important;
  }

  [data-product-preview="content"]{
    padding:10px !important;
  }

  /* Native grid already becomes 1 column */
  [data-product-preview="grid"]{
    gap:10px !important;
  }

  [data-product-preview="gallery"]{
    padding:6px !important;
    border-radius:14px;
  }

  [data-product-preview="gallery-main-panel"]{
    height:min(48dvh,300px) !important;
    border-radius:12px;
  }

  [data-product-preview="gallery-main-image"]{
    padding:3px;
  }

  [data-product-preview="gallery-thumbnails"]{
    gap:5px !important;
    padding:6px 0 0 !important;
  }

  [data-product-preview="gallery-thumbnail"]{
    width:56px !important;
    height:52px !important;
    border-radius:7px !important;
  }

  [data-product-preview="details"]{
    margin-top:0 !important;
  }

  [data-product-preview="category"]{
    padding:5px 7px;
    font-size:8px !important;
  }

  [data-product-preview="title"]{
    margin-top:6px !important;
    font-size:18px !important;
    line-height:1.35 !important;
  }

  [data-product-preview="description"]{
    margin-top:5px !important;

    font-size:10px !important;
    line-height:1.65 !important;

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

  [data-product-preview="price"]{
    margin-top:6px !important;
  }

  [data-product-preview="current-price"]{
    font-size:23px !important;
  }

  [data-product-preview="actions-row"]{
    margin-top:9px !important;
    margin-bottom:7px !important;

    gap:7px !important;
  }

  [data-product-preview="quantity-control"]{
    min-width:95px;
    min-height:42px;
  }

  [data-product-preview="add-to-cart"]{
    min-height:42px;
    font-size:10px !important;
  }

  [data-product-preview="buy-now"]{
    min-height:42px;
    font-size:10px !important;
  }

  [data-product-preview="view-full-details"]{
    width:100%;

    justify-content:center;

    margin-top:8px !important;
    padding:9px 10px;

    border:1px solid rgba(247,244,238,.14);
    border-radius:10px;

    background:rgba(247,244,238,.08);

    font-size:9px !important;
  }

  [data-product-preview="close-button"]{
    top:7px !important;
    left:7px !important;

    width:34px;
    height:34px;
  }

  /* Character intentionally absent on mobile */
  .rushd-preview-character{
    display:none !important;
  }
}

@media(prefers-reduced-motion:reduce){
  body.rushd-collection *,
  [data-product-preview="root"] *{
    transition:none !important;
    animation:none !important;
  }
}


/* =========================================================
   V4 — QUICK ACTION SVG CONTRAST FIX
   When the circular action button turns Navy on hover,
   force the icon itself to White for proper contrast.
========================================================= */

body.rushd-collection
.category_products_grid_container
> div > .group
> .flex.relative
> div:last-child
button:hover,
body.rushd-collection
.category_products_grid_container
> div > .group
> .flex.relative
> div:last-child
button:focus-visible{
  color:#FFFFFF !important;
}

body.rushd-collection
.category_products_grid_container
> div > .group
> .flex.relative
> div:last-child
button:hover svg,
body.rushd-collection
.category_products_grid_container
> div > .group
> .flex.relative
> div:last-child
button:focus-visible svg{
  color:#FFFFFF !important;
  stroke:#FFFFFF !important;
  fill:none !important;
}

body.rushd-collection
.category_products_grid_container
> div > .group
> .flex.relative
> div:last-child
button:hover svg path,
body.rushd-collection
.category_products_grid_container
> div > .group
> .flex.relative
> div:last-child
button:focus-visible svg path{
  stroke:#FFFFFF !important;
}

/* Cart icon is a filled SVG on EasyOrders, so keep its fill white on hover. */
body.rushd-collection
.category_products_grid_container
> div > .group
> .flex.relative
> div:last-child
button:hover svg[fill]:not([fill="none"]),
body.rushd-collection
.category_products_grid_container
> div > .group
> .flex.relative
> div:last-child
button:focus-visible svg[fill]:not([fill="none"]){
  fill:#FFFFFF !important;
}

body.rushd-collection
.category_products_grid_container
> div > .group
> .flex.relative
> div:last-child
button:hover svg[fill]:not([fill="none"]) path,
body.rushd-collection
.category_products_grid_container
> div > .group
> .flex.relative
> div:last-child
button:focus-visible svg[fill]:not([fill="none"]) path{
  fill:#FFFFFF !important;
  stroke:currentColor !important;
}


/* =========================================================
   V5 — SORT / FILTER DROPDOWN FIX
   Keep the native EasyOrders HeadlessUI menu, only style it.
========================================================= */

body.rushd-collection .category_section_header::before{
  border-radius:inherit;
}

/* native trigger */
body.rushd-collection .category_section_header button[aria-haspopup="true"]{
  position:relative !important;
  z-index:20 !important;
}

/* menu receives this class from V5 JS */
.rushd-sort-menu{
  z-index:99999 !important;

  min-width:170px !important;
  padding:6px !important;

  border:1px solid rgba(14,31,61,.10) !important;
  border-radius:13px !important;

  background:rgba(255,255,255,.97) !important;
  color:#0E1F3D !important;

  box-shadow:
    0 18px 42px rgba(8,19,39,.16),
    inset 0 1px rgba(255,255,255,.92) !important;

  backdrop-filter:blur(16px) saturate(125%) !important;
  -webkit-backdrop-filter:blur(16px) saturate(125%) !important;

  overflow:hidden !important;
}

.rushd-sort-menu [role="option"],
.rushd-sort-menu button{
  width:100% !important;
  min-height:38px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:7px !important;

  margin:0 !important;
  padding:8px 10px !important;

  border:0 !important;
  border-radius:9px !important;

  background:transparent !important;
  color:#0E1F3D !important;

  font-family:"Almarai",sans-serif !important;
  font-size:10px !important;
  font-weight:700 !important;
  line-height:1.35 !important;
  text-align:right !important;

  cursor:pointer !important;

  transition:
    background .18s ease,
    color .18s ease,
    transform .18s ease !important;
}

.rushd-sort-menu [role="option"]::before,
.rushd-sort-menu button::before{
  content:"";
  width:6px;
  height:6px;
  flex:none;
  border-radius:50%;
  background:rgba(14,31,61,.16);
  transition:background .18s ease,box-shadow .18s ease;
}

.rushd-sort-menu [role="option"]:hover,
.rushd-sort-menu [role="option"]:focus-visible,
.rushd-sort-menu button:hover,
.rushd-sort-menu button:focus-visible,
.rushd-sort-menu [aria-selected="true"]{
  outline:none !important;
  transform:translateX(-2px);
  background:rgba(14,31,61,.07) !important;
  color:#0E1F3D !important;
}

.rushd-sort-menu [role="option"]:hover::before,
.rushd-sort-menu [role="option"]:focus-visible::before,
.rushd-sort-menu button:hover::before,
.rushd-sort-menu button:focus-visible::before,
.rushd-sort-menu [aria-selected="true"]::before{
  background:#E43036;
  box-shadow:0 0 0 3px rgba(228,48,54,.09);
}

.rushd-sort-menu [aria-selected="true"]{
  background:rgba(228,48,54,.075) !important;
  color:#0E1F3D !important;
}

/* Mobile: same UI, tighter dimensions */
@media(max-width:767px){
  .rushd-sort-menu{
    min-width:145px !important;
    padding:5px !important;
    border-radius:11px !important;
  }

  .rushd-sort-menu [role="option"],
  .rushd-sort-menu button{
    min-height:34px !important;
    padding:7px 8px !important;
    border-radius:8px !important;
    font-size:9px !important;
  }
}


/* =========================================================
   V6 — NAVY GLASS SORT MENU
   - Remove custom dots
   - Keep only EasyOrders native selected checkmark
   - Navy glass blur surface
========================================================= */

.rushd-sort-menu{
  border:1px solid rgba(255,255,255,.12) !important;
  background:
    radial-gradient(circle at 12% 18%,rgba(228,48,54,.14),transparent 26%),
    linear-gradient(145deg,rgba(14,31,61,.94),rgba(8,19,39,.90)) !important;
  color:#F7F4EE !important;

  box-shadow:
    0 22px 48px rgba(8,19,39,.28),
    inset 0 1px rgba(255,255,255,.07),
    inset 0 0 0 1px rgba(255,255,255,.02) !important;

  backdrop-filter:blur(22px) saturate(135%) !important;
  -webkit-backdrop-filter:blur(22px) saturate(135%) !important;
}

/* Remove ONLY the custom V5 dot markers */
.rushd-sort-menu [role="option"]::before,
.rushd-sort-menu button::before{
  content:none !important;
  display:none !important;
}

/* Base option */
.rushd-sort-menu [role="option"],
.rushd-sort-menu button{
  position:relative !important;

  justify-content:flex-start !important;
  gap:8px !important;

  border:1px solid transparent !important;

  background:transparent !important;
  color:rgba(247,244,238,.82) !important;

  box-shadow:none !important;
}

/* Hover/focus */
.rushd-sort-menu [role="option"]:hover,
.rushd-sort-menu [role="option"]:focus-visible,
.rushd-sort-menu button:hover,
.rushd-sort-menu button:focus-visible{
  transform:translateX(-2px);
  border-color:rgba(255,255,255,.08) !important;
  background:rgba(255,255,255,.065) !important;
  color:#FFFFFF !important;
}

/* Selected row — preserve native EasyOrders checkmark */
.rushd-sort-menu [role="option"][aria-selected="true"],
.rushd-sort-menu button[aria-selected="true"]{
  border-color:rgba(228,48,54,.24) !important;
  background:
    linear-gradient(90deg,rgba(228,48,54,.16),rgba(255,255,255,.035)) !important;
  color:#FFFFFF !important;
  font-weight:800 !important;
}

/* Any native checkmark/icon inherits the selected-row contrast */
.rushd-sort-menu [aria-selected="true"] svg{
  color:#E43036 !important;
  stroke:#E43036 !important;
}

/* Neutral icons stay readable */
.rushd-sort-menu svg{
  flex:none;
}

/* Mobile uses the exact same glass language */
@media(max-width:767px){
  .rushd-sort-menu{
    background:
      radial-gradient(circle at 12% 18%,rgba(228,48,54,.14),transparent 26%),
      linear-gradient(145deg,rgba(14,31,61,.96),rgba(8,19,39,.93)) !important;

    backdrop-filter:blur(20px) saturate(130%) !important;
    -webkit-backdrop-filter:blur(20px) saturate(130%) !important;
  }
}


/* =========================================================
   V7 — SORT INDICATOR: DOT ONLY
   Remove native EasyOrders checkmark and use one red dot.
========================================================= */

/* Hide native selected checkmark/icons */
.rushd-sort-menu [role="option"] > svg,
.rushd-sort-menu button > svg{
  display:none !important;
}

/* Single dot indicator for every option */
.rushd-sort-menu [role="option"]::before,
.rushd-sort-menu button::before{
  content:"" !important;
  display:block !important;

  width:6px !important;
  height:6px !important;
  flex:none !important;

  border-radius:50% !important;

  background:rgba(247,244,238,.22) !important;
  box-shadow:none !important;

  transition:
    background .18s ease,
    box-shadow .18s ease,
    transform .18s ease !important;
}

/* Hover/focus dot */
.rushd-sort-menu [role="option"]:hover::before,
.rushd-sort-menu [role="option"]:focus-visible::before,
.rushd-sort-menu button:hover::before,
.rushd-sort-menu button:focus-visible::before{
  background:rgba(228,48,54,.72) !important;
  box-shadow:0 0 8px rgba(228,48,54,.28) !important;
}

/* Selected option gets the only strong red dot */
.rushd-sort-menu [role="option"][aria-selected="true"]::before,
.rushd-sort-menu button[aria-selected="true"]::before{
  background:#E43036 !important;
  box-shadow:
    0 0 0 3px rgba(228,48,54,.10),
    0 0 10px rgba(228,48,54,.38) !important;
  transform:scale(1.05);
}


/* =========================================================
   V8 — REMOVE NATIVE CHECKMARK COMPLETELY
   Keep DOT as the ONLY selection indicator.
========================================================= */

/* EasyOrders may wrap the check icon, so hide ALL SVG descendants
   inside dropdown options, not just direct-child SVGs. */
.rushd-sort-menu [role="option"] svg,
.rushd-sort-menu button svg,
.rushd-sort-menu [role="option"] [class*="check"],
.rushd-sort-menu button [class*="check"]{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
}

/* Kill any native/pseudo checkmark marker while preserving our ::before dot. */
.rushd-sort-menu [role="option"]::after,
.rushd-sort-menu button::after{
  content:none !important;
  display:none !important;
}

/* DOT remains the sole active-state indicator */
.rushd-sort-menu [role="option"]::before,
.rushd-sort-menu button::before{
  content:"" !important;
  display:block !important;
}

.rushd-sort-menu [role="option"][aria-selected="true"]::before,
.rushd-sort-menu button[aria-selected="true"]::before{
  background:#E43036 !important;
  box-shadow:
    0 0 0 3px rgba(228,48,54,.10),
    0 0 10px rgba(228,48,54,.38) !important;
}