/*
 B2B MADE user-supplied real product photo layer.
 IMPORTANT:
 - no body HTML changes
 - visual enhancement only
 - current UI/content/function authority remains unchanged
*/

/* shared safe image rendering */
body.public .hero,
body.shop .hero{
  position:relative;
  overflow:hidden;
}

/* B2B public hero: real custom medals */
body.public .hero::after{
  content:"";
  position:absolute;
  z-index:0;
  right:4%;
  top:10%;
  bottom:10%;
  width:min(43%,620px);
  border-radius:20px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,0)),
    url("/assets/b2bmade_product_photos/medals_custom.webp") center/cover no-repeat;
  box-shadow:0 16px 40px rgba(11,74,136,.10);
  pointer-events:none;
}
body.public .hero > *{
  position:relative;
  z-index:1;
}
body.public .hero-copy{
  max-width:52%;
}

/* consumer / kalbon hero: actual printed medal ribbons */
body.shop .hero::after{
  content:"";
  position:absolute;
  z-index:0;
  right:4%;
  top:11%;
  bottom:11%;
  width:min(42%,600px);
  border-radius:20px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,0)),
    url("/assets/b2bmade_product_photos/printed_medal_lanyards_01.webp") center/cover no-repeat;
  box-shadow:0 16px 42px rgba(245,158,11,.10);
  pointer-events:none;
}
body.shop .hero > *{
  position:relative;
  z-index:1;
}
body.shop .hero-copy{
  max-width:52%;
}

/* Current kalbon category cards: real product thumbnails without HTML changes */
body.shop .category{
  position:relative;
  padding-top:138px!important;
  overflow:hidden;
}
body.shop .category::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:118px;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  border-bottom:1px solid #e7ebee;
}
body.shop .category:nth-child(1)::before{
  background-image:url("/assets/b2bmade_product_photos/medals_custom.webp");
}
body.shop .category:nth-child(2)::before{
  background-image:url("/assets/b2bmade_product_photos/plain_medal_lanyards.webp");
}
body.shop .category:nth-child(3)::before{
  background-image:url("/assets/b2bmade_product_photos/id_card_lanyard.webp");
}
body.shop .category:nth-child(4)::before{
  background-image:url("/assets/b2bmade_product_photos/id_lanyards_retractable.webp");
}

/* use cards get subtle real-material accents */
body.shop .use:nth-child(1){
  background-image:linear-gradient(rgba(255,255,255,.93),rgba(255,255,255,.93)),
    url("/assets/b2bmade_product_photos/printed_medal_lanyards_02.webp");
  background-size:cover;
}
body.shop .use:nth-child(2){
  background-image:linear-gradient(rgba(255,255,255,.93),rgba(255,255,255,.93)),
    url("/assets/b2bmade_product_photos/clip_lanyards.webp");
  background-size:cover;
}
body.shop .use:nth-child(3){
  background-image:linear-gradient(rgba(255,255,255,.93),rgba(255,255,255,.93)),
    url("/assets/b2bmade_product_photos/ribbon_bars.webp");
  background-size:cover;
}

/* SHOP generic visual support: only when matching elements exist */
body.shop .product-card:nth-child(4n+1),
body.shop .card.product:nth-child(4n+1){
  background-image:linear-gradient(rgba(255,255,255,.92),rgba(255,255,255,.92)),
    url("/assets/b2bmade_product_photos/medals_custom.webp");
  background-size:cover;
}
body.shop .product-card:nth-child(4n+2),
body.shop .card.product:nth-child(4n+2){
  background-image:linear-gradient(rgba(255,255,255,.92),rgba(255,255,255,.92)),
    url("/assets/b2bmade_product_photos/plain_medal_lanyards.webp");
  background-size:cover;
}
body.shop .product-card:nth-child(4n+3),
body.shop .card.product:nth-child(4n+3){
  background-image:linear-gradient(rgba(255,255,255,.92),rgba(255,255,255,.92)),
    url("/assets/b2bmade_product_photos/id_card_lanyard.webp");
  background-size:cover;
}
body.shop .product-card:nth-child(4n),
body.shop .card.product:nth-child(4n){
  background-image:linear-gradient(rgba(255,255,255,.92),rgba(255,255,255,.92)),
    url("/assets/b2bmade_product_photos/cord_lanyards.webp");
  background-size:cover;
}

/* brand hub only gets a very light real-product background accent */
body.brand-hub::before{
  content:"";
  position:fixed;
  inset:auto 0 0 auto;
  width:38vw;
  height:34vh;
  background:url("/assets/b2bmade_product_photos/id_lanyards_color.webp") right bottom/contain no-repeat;
  opacity:.045;
  pointer-events:none;
  z-index:-1;
}

@media(max-width:900px){
  body.public .hero::after,
  body.shop .hero::after{
    position:relative;
    display:block;
    width:calc(100% - 28px);
    height:230px;
    right:auto;
    top:auto;
    bottom:auto;
    margin:28px 14px 0;
  }
  body.public .hero-copy,
  body.shop .hero-copy{
    max-width:none;
  }
}

/* --------------------------------------------------------------------------
   Resume1 additions from latest user uploads.
   These are visual-only. HTML body/function content remains unchanged.
   -------------------------------------------------------------------------- */

/* public B2B: show direct-production/order-guide imagery as subtle section accents */
body.public .service-grid .service:nth-child(1){
  background-image:
    linear-gradient(rgba(255,255,255,.95),rgba(255,255,255,.95)),
    url("/assets/b2bmade_product_photos/custom_order_factory.webp");
  background-size:cover;
  background-position:center;
}
body.public .service-grid .service:nth-child(3){
  background-image:
    linear-gradient(rgba(255,255,255,.95),rgba(255,255,255,.95)),
    url("/assets/b2bmade_product_photos/custom_order_design_steps.webp");
  background-size:cover;
  background-position:center;
}

/* public cards: product examples */
body.public .category-card:nth-child(1),
body.public .product-card:nth-child(1){
  background-image:
    linear-gradient(rgba(255,255,255,.92),rgba(255,255,255,.92)),
    url("/assets/b2bmade_product_photos/eco_wood_medals.webp");
  background-size:cover;
}
body.public .category-card:nth-child(2),
body.public .product-card:nth-child(2){
  background-image:
    linear-gradient(rgba(255,255,255,.92),rgba(255,255,255,.92)),
    url("/assets/b2bmade_product_photos/premium_metal_medals.webp");
  background-size:cover;
}
body.public .category-card:nth-child(3),
body.public .product-card:nth-child(3){
  background-image:
    linear-gradient(rgba(255,255,255,.92),rgba(255,255,255,.92)),
    url("/assets/b2bmade_product_photos/custom_nameplates.webp");
  background-size:cover;
}

/* kalbon current category cards: improve semantic product match */
body.shop .category:nth-child(1)::before{
  background-image:url("/assets/b2bmade_product_photos/premium_metal_medals.webp");
}
body.shop .category:nth-child(2)::before{
  background-image:url("/assets/b2bmade_product_photos/plain_medal_lanyards.webp");
}
body.shop .category:nth-child(3)::before{
  background-image:url("/assets/b2bmade_product_photos/custom_nameplates.webp");
}
body.shop .category:nth-child(4)::before{
  background-image:url("/assets/b2bmade_product_photos/id_card_lanyard.webp");
}

/* order/production guide: use the polished infographic uploads if compatible sections exist */
body.shop .buybox{
  position:relative;
  overflow:hidden;
}
body.shop .buybox::after{
  content:"";
  display:block;
  width:220px;
  min-height:160px;
  border-radius:14px;
  margin-left:auto;
  background:url("/assets/b2bmade_product_photos/custom_order_design_steps.webp") center top/cover no-repeat;
  opacity:.88;
}

/* SHOP generic product tiles get better matching real product examples */
body.shop .product-card:nth-child(5n+1),
body.shop .card.product:nth-child(5n+1){
  background-image:
    linear-gradient(rgba(255,255,255,.90),rgba(255,255,255,.90)),
    url("/assets/b2bmade_product_photos/eco_wood_medals.webp");
}
body.shop .product-card:nth-child(5n+2),
body.shop .card.product:nth-child(5n+2){
  background-image:
    linear-gradient(rgba(255,255,255,.90),rgba(255,255,255,.90)),
    url("/assets/b2bmade_product_photos/premium_metal_medals.webp");
}
body.shop .product-card:nth-child(5n+3),
body.shop .card.product:nth-child(5n+3){
  background-image:
    linear-gradient(rgba(255,255,255,.90),rgba(255,255,255,.90)),
    url("/assets/b2bmade_product_photos/custom_nameplates.webp");
}
body.shop .product-card:nth-child(5n+4),
body.shop .card.product:nth-child(5n+4){
  background-image:
    linear-gradient(rgba(255,255,255,.90),rgba(255,255,255,.90)),
    url("/assets/b2bmade_product_photos/id_lanyards_retractable.webp");
}
body.shop .product-card:nth-child(5n),
body.shop .card.product:nth-child(5n){
  background-image:
    linear-gradient(rgba(255,255,255,.90),rgba(255,255,255,.90)),
    url("/assets/b2bmade_product_photos/printed_medal_lanyards_01.webp");
}

/* Full-page commerce screenshot is intentionally NOT referenced in CSS.
   It remains archived as reference evidence only. */