/* Representative photo presentation; existing input-stability CSS is retained. */
.category-art img.real-photo{width:100%;height:100%;max-width:100%;object-fit:contain;background:#fff;padding:7px;}
.product-image{background:#fff;}
.product-image img.real-photo{width:100%;height:100%;max-width:100%;object-fit:contain;border-radius:10px;}
.product-detail-art img.real-photo{width:100%;height:250px;object-fit:contain;}
.basket-thumb.real-photo{object-fit:contain;background:#fff;border-radius:7px;}
.photo-kind{display:block;font-size:10px;color:#786a81;margin-top:5px;}
.hero-photo-frame{position:absolute;right:22px;top:28px;bottom:28px;width:38%;margin:0;z-index:1;}
.hero-photo-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;border-radius:20px;}
.hero-photo-frame figcaption{position:absolute;bottom:8px;left:8px;right:8px;background:#ffffffed;color:#51445b;font-size:10px;padding:5px 7px;border-radius:6px;}
.hero-copy{width:61%;}
.catalogue-note a,.photo-credit-link{text-decoration:underline;text-underline-offset:3px;}
@media(max-width:1200px){.hero-photo-frame{right:15px;width:34%;}.hero-copy{width:65%;}}
@media(max-width:940px){.hero-photo-frame{width:38%;}.hero-copy{width:61%;}}
@media(max-width:640px){.hero{min-height:0;padding-bottom:15px;}.hero-copy{width:100%;padding-bottom:15px;}.hero-foot{width:100%;}.hero-photo-frame{position:relative;top:auto;bottom:auto;right:auto;width:auto;height:200px;margin:0 16px;}.category-art img.real-photo{padding:4px;}.photo-kind{font-size:9px;}}


/* ==========================================================
   BRINGIIT_HOMEPAGE_USP_CATEGORY_IMAGES_V1
   USP-led hero + catalogue-powered category imagery
   ========================================================== */

.hero-usp-card{
  min-height:100%;
  padding:34px;
  border-radius:28px;
  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(255,255,255,.66),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      #f4e7fa 0%,
      #ecd6f5 46%,
      #fff5f0 100%
    );
  border:1px solid rgba(120,50,147,.12);
  display:flex;
  flex-direction:column;
  justify-content:center;
  color:#291337;
  overflow:hidden;
}

.hero-usp-kicker{
  color:#9226b3;
  font-size:12px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
  margin-bottom:18px;
}

.hero-usp-zero{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:18px;
}

.hero-usp-zero strong{
  font-size:72px;
  line-height:.82;
  letter-spacing:-.07em;
  color:#9724b8;
  font-weight:950;
}

.hero-usp-zero span{
  font-size:18px;
  line-height:1.12;
  font-weight:850;
}

.hero-usp-card h2{
  margin:0 0 14px;
  font-size:30px;
  line-height:1.02;
  letter-spacing:-.035em;
}

.hero-usp-card > p{
  margin:0 0 22px;
  max-width:520px;
  font-size:15px;
  line-height:1.5;
  color:#6c6075;
}

.hero-usp-points{
  display:grid;
  gap:9px;
}

.hero-usp-points > div{
  display:flex;
  align-items:center;
  gap:11px;
  padding:11px 13px;
  background:rgba(255,255,255,.66);
  border:1px solid rgba(120,50,147,.09);
  border-radius:14px;
}

.hero-usp-points .icon{
  flex:0 0 auto;
  width:22px;
  height:22px;
  color:#9824b8;
}

.hero-usp-points span{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.hero-usp-points b{
  font-size:13px;
  line-height:1.15;
}

.hero-usp-points small{
  color:#766a7e;
  font-size:11px;
  line-height:1.25;
}

.hero-usp-foot{
  margin-top:17px;
  padding-top:15px;
  border-top:1px solid rgba(120,50,147,.15);
  color:#6c6075;
  font-size:11px;
  line-height:1.4;
}


/* Real catalogue imagery inside category navigation */

.category-art{
  overflow:hidden;
}

.category-live-art{
  width:100%;
  height:100%;
  min-height:74px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.category-live-art img{
  display:block;
  width:100%;
  height:100%;
  max-height:105px;
  object-fit:contain;
  object-position:center;
  mix-blend-mode:multiply;
}

.category-tile:hover .category-live-art img{
  transform:scale(1.04);
}

.category-live-art img{
  transition:transform .18s ease;
}


/* Responsive */

@media (max-width: 900px){
  .hero-usp-card{
    padding:25px;
    border-radius:22px;
  }

  .hero-usp-zero strong{
    font-size:58px;
  }

  .hero-usp-card h2{
    font-size:26px;
  }
}

@media (max-width: 640px){
  .hero-usp-card{
    padding:22px;
  }

  .hero-usp-zero{
    align-items:flex-end;
  }

  .hero-usp-zero strong{
    font-size:52px;
  }

  .hero-usp-zero span{
    font-size:15px;
  }

  .hero-usp-card h2{
    font-size:24px;
  }
}



/* ==========================================================
   BRINGIIT_SMART_SEARCH_CATEGORIES_V1
   Compact USP + visual categories
   ========================================================== */

.hero-usp-compact{
  align-self:center;
  width:min(365px,40%);
  min-width:310px;
  padding:26px;
  border-radius:24px;
  background:
    linear-gradient(
      145deg,
      #f1dcf8 0%,
      #faebfb 58%,
      #fff4ee 100%
    );
  border:1px solid rgba(120,50,147,.12);
  box-sizing:border-box;
}

.usp-badge{
  margin-bottom:16px;
  color:#9824b7;
  font-size:11px;
  font-weight:900;
  letter-spacing:.13em;
}

.usp-commission{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:15px;
}

.usp-commission > strong{
  color:#9824b7;
  font-size:60px;
  line-height:.85;
  font-weight:950;
  letter-spacing:-.07em;
}

.usp-commission > div{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.usp-commission b{
  color:#2b1535;
  font-size:18px;
  line-height:1.08;
}

.usp-commission span{
  color:#736379;
  font-size:12px;
}

.hero-usp-compact > p{
  margin:0 0 16px;
  color:#67576d;
  font-size:13px;
  line-height:1.45;
}

.usp-mini-points{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.usp-mini-points span{
  padding:7px 9px;
  border-radius:999px;
  background:rgba(255,255,255,.74);
  border:1px solid rgba(120,50,147,.09);
  color:#543760;
  font-size:10.5px;
  font-weight:800;
}


/* Expanded category discovery */

.taxonomy-visual{
  margin-top:24px;
  padding:26px;
  border-radius:24px;
  background:#faf8fb;
  border:1px solid #ece5ef;
}

.taxonomy-visual-heading{
  margin-bottom:18px;
}

.taxonomy-visual-heading h3{
  margin:0;
  color:#291534;
  font-size:24px;
  line-height:1.1;
}

.taxonomy-visual-heading p{
  margin:6px 0 0;
  color:#786c7e;
  font-size:13px;
}

.taxonomy-visual-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:14px;
}

.taxonomy-visual-card{
  border:1px solid #ece5ef;
  background:#fff;
  border-radius:18px;
  padding:10px;
  min-height:158px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;
  gap:10px;
  cursor:pointer;
  color:#2b1735;
  text-align:center;
  font:inherit;
  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease;
}

.taxonomy-visual-card:hover{
  transform:translateY(-2px);
  border-color:#d9bee4;
  box-shadow:0 10px 28px rgba(60,25,77,.08);
}

.all-category-image{
  width:100%;
  height:105px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#faf8fb;
  border-radius:13px;
  overflow:hidden;
}

.all-category-image img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.all-category-fallback{
  width:100%;
  height:105px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:13px;
  background:#f3eaf7;
  color:#9824b7;
}

.all-category-fallback .icon{
  width:30px;
  height:30px;
}

.taxonomy-visual-name{
  font-size:12.5px;
  line-height:1.25;
  font-weight:800;
}


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

  .hero-usp-compact{
    min-width:280px;
  }
}

@media(max-width:800px){
  .hero-usp-compact{
    width:100%;
    min-width:0;
    margin-top:18px;
  }

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

@media(max-width:560px){
  .taxonomy-visual{
    padding:16px;
  }

  .taxonomy-visual-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  .taxonomy-visual-card{
    min-height:142px;
  }

  .all-category-image,
  .all-category-fallback{
    height:88px;
  }
}


/* ==========================================================
   BRINGIIT_FIXED_BUSINESS_CTAS_V1
   Persistent desktop business CTAs
   ========================================================== */

#bringiit-fixed-business-ctas{
  pointer-events:none;
  position:fixed;
  inset:0;
  z-index:2147482000;
}

.bringiit-edge-cta{
  position:fixed;
  top:52%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;

  min-height:48px;
  padding:0 20px;

  border:1px solid rgba(120,50,147,.18);
  background:rgba(255,255,255,.97);

  color:#783293;
  font-size:14px;
  line-height:1;
  font-weight:800;

  text-decoration:none;

  box-shadow:
    0 10px 30px rgba(40,18,50,.13),
    0 2px 8px rgba(40,18,50,.07);

  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);

  pointer-events:auto;

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

.bringiit-edge-cta-left{
  left:0;
  border-left:0;
  border-radius:0 16px 16px 0;
}

.bringiit-edge-cta-right{
  right:0;
  border-right:0;

  border-radius:16px 0 0 16px;

  background:
    linear-gradient(
      135deg,
      #783293,
      #a021ba
    );

  color:#fff;
}

.bringiit-edge-cta:hover{
  box-shadow:
    0 15px 34px rgba(40,18,50,.19),
    0 3px 10px rgba(40,18,50,.10);
}

.bringiit-edge-cta-left:hover{
  transform:translateX(4px);
  background:#fbf5fd;
}

.bringiit-edge-cta-right:hover{
  transform:translateX(-4px);
}

.bringiit-edge-cta:focus-visible{
  outline:3px solid rgba(160,33,186,.32);
  outline-offset:3px;
}

.bringiit-edge-cta-icon,
.bringiit-edge-cta-arrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  font-size:19px;
  font-weight:900;
}

.bringiit-edge-cta-arrow{
  transition:transform .18s ease;
}

.bringiit-edge-cta-right:hover
.bringiit-edge-cta-arrow{
  transform:translateX(3px);
}


/*
 * Keep the customer mobile experience clean.
 * Shopper and shop-owner CTAs remain available
 * through the normal navigation/footer there.
 */
@media (max-width: 900px){

  #bringiit-fixed-business-ctas{
    display:none !important;
  }

}


/*
 * Avoid edge tabs becoming too dominant on
 * shorter laptop displays.
 */
@media (
  min-width:901px
) and (
  max-height:720px
){

  .bringiit-edge-cta{
    top:58%;
    min-height:44px;
    padding-left:16px;
    padding-right:16px;
    font-size:13px;
  }

}

/* ==========================================================
   END BRINGIIT_FIXED_BUSINESS_CTAS_V1
   ========================================================== */

/* ==========================================================
   BRINGIIT_VERTICAL_EDGE_CTAS_V2
   Slim vertical fixed desktop tabs
   ========================================================== */

@media (min-width: 901px){

  .bringiit-edge-cta{
    top:50%;

    width:48px;
    min-width:48px;
    min-height:178px;

    padding:16px 0;

    flex-direction:column;
    gap:10px;

    font-size:13px;
    line-height:1;
    letter-spacing:.1px;

    writing-mode:vertical-rl;
    text-orientation:mixed;

    white-space:nowrap;

    border-radius:0;

    box-shadow:
      0 8px 24px rgba(40,18,50,.13),
      0 2px 7px rgba(40,18,50,.07);
  }


  .bringiit-edge-cta-left{
    left:0;

    border-left:0;

    border-radius:
      0 14px 14px 0;

    /*
     * Makes the left-side wording read naturally
     * from bottom towards top.
     */
    transform:
      translateY(-50%)
      rotate(180deg);
  }


  .bringiit-edge-cta-right{
    right:0;

    border-right:0;

    border-radius:
      14px 0 0 14px;

    transform:
      translateY(-50%);
  }


  .bringiit-edge-cta-left:hover{
    transform:
      translateY(-50%)
      translateX(4px)
      rotate(180deg);
  }


  .bringiit-edge-cta-right:hover{
    transform:
      translateY(-50%)
      translateX(-4px);
  }


  .bringiit-edge-cta-icon,
  .bringiit-edge-cta-arrow{
    font-size:17px;

    writing-mode:horizontal-tb;
  }


  .bringiit-edge-cta-left
  .bringiit-edge-cta-icon{
    transform:rotate(180deg);
  }


  .bringiit-edge-cta-right:hover
  .bringiit-edge-cta-arrow{
    transform:none;
  }

}


/*
 * Slightly shorter tabs for smaller laptop heights.
 */
@media (
  min-width:901px
) and (
  max-height:720px
){

  .bringiit-edge-cta{
    top:53%;
    min-height:154px;
    width:44px;
    min-width:44px;
    padding:13px 0;
    font-size:12px;
  }

}

/* ==========================================================
   END BRINGIIT_VERTICAL_EDGE_CTAS_V2
   ========================================================== */

/* ==========================================================
   BRINGIIT_VERTICAL_EDGE_CTAS_V3
   Slimmer tabs, text-only, no symbols
   ========================================================== */

@media (min-width: 901px){

  .bringiit-edge-cta{
    width: 34px !important;
    min-width: 34px !important;
    min-height: 150px !important;
    padding: 10px 0 !important;
    gap: 0 !important;

    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;

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

    box-shadow:
      0 6px 18px rgba(40,18,50,.10),
      0 1px 4px rgba(40,18,50,.06) !important;
  }

  .bringiit-edge-cta-left{
    border-radius: 0 12px 12px 0 !important;
  }

  .bringiit-edge-cta-right{
    border-radius: 12px 0 0 12px !important;
  }

  .bringiit-edge-cta-icon,
  .bringiit-edge-cta-arrow{
    display: none !important;
  }

  .bringiit-edge-cta span,
  .bringiit-edge-cta strong{
    margin: 0 !important;
    padding: 0 !important;
  }

  .bringiit-edge-cta:hover{
    box-shadow:
      0 8px 20px rgba(40,18,50,.12),
      0 2px 6px rgba(40,18,50,.08) !important;
  }

  .bringiit-edge-cta-left:hover{
    transform:
      translateY(-50%)
      translateX(3px)
      rotate(180deg) !important;
  }

  .bringiit-edge-cta-right:hover{
    transform:
      translateY(-50%)
      translateX(-3px) !important;
  }
}

@media (min-width: 901px) and (max-height: 720px){
  .bringiit-edge-cta{
    width: 30px !important;
    min-width: 30px !important;
    min-height: 132px !important;
    padding: 8px 0 !important;
    font-size: 10px !important;
  }
}

/* ==========================================================
   END BRINGIIT_VERTICAL_EDGE_CTAS_V3
   ========================================================== */

/* ==========================================================
   BRINGIIT_SEARCH_MODE_CHEVRON_V1
   Makes Products / Shops nearby visibly selectable
   ========================================================== */

#customer-search-mode{
  -webkit-appearance:none !important;
  appearance:none !important;

  padding-right:34px !important;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23783293' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;

  background-repeat:no-repeat !important;
  background-position:right 12px center !important;
  background-size:12px 7px !important;

  cursor:pointer !important;
}


/*
 * Keep the chevron compact on narrower browser widths.
 */
@media (max-width: 900px){

  #customer-search-mode{
    padding-right:28px !important;
    background-position:right 8px center !important;
    background-size:11px 6px !important;
  }

}

/* ==========================================================
   END BRINGIIT_SEARCH_MODE_CHEVRON_V1
   ========================================================== */