/* H&M Signature v2.3 — gallery covers, consistent occasion cards, one floral canvas,
   more usable story heading, and floating WhatsApp. Applied after v2.2 through the
   Studio website-update importer. Only presentation styles; original media untouched. */
:root {
  --hm-gallery-cover-scale: 1.30;
  --hm-category-cover-scale: 1.24;
  --hm-feature-cover-scale: 1.19;
  --hm-category-card-width: 158px;
  --hm-story-intro-width: 335px;
}
/* No nested scroll container: overflow:hidden on the original Signature wrapper
   caused anchor jumps to scroll an invisible inner element. clip does not scroll. */
body.hm-v20-ready .hm-signature-home { overflow: clip !important; }
body.hm-v20-ready main { overflow: clip !important; }
body.hm-v20-ready .hm-sig-featured { scroll-margin-top: 20px; }

/* A single seamless backdrop for every section underneath the image hero.
   The original v2.1 inserted the SAME flower again in Featured and Values. */
body.hm-v20-ready .hm-signature-home {
  background-image:
    url('/assets/art/hm-sig-reference-floral-top-left.png'),
    url('/assets/art/hm-sig-reference-floral-bottom-left.png'),
    url('/assets/art/hm-sig-reference-floral-bottom-right.png'),
    radial-gradient(ellipse at 35% 48%, #fffdfa 0%, #faf2e6 60%, #f6eadb 100%) !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important;
  background-position: left 30%, left 83%, right bottom, center !important;
  background-size: clamp(140px, 15vw, 210px) auto,
                   clamp(165px, 18vw, 265px) auto,
                   clamp(180px, 21vw, 300px) auto, cover !important;
}
body.hm-v20-ready .hm-signature-home::before,
body.hm-v20-ready .hm-signature-home::after,
body.hm-v20-ready .hm-sig-featured::before,
body.hm-v20-ready .hm-sig-values::before,
body.hm-v20-ready .hm-sig-bottom-cta::before { content:none !important; display:none !important; }
body.hm-v20-ready .hm-sig-featured,
body.hm-v20-ready .hm-sig-values,
body.hm-v20-ready .hm-sig-bottom-cta { background:transparent !important; }

/* Crop the decorative black/mustard edges OUT of cover thumbnails, not the
   original photographs, modal viewers or downloadable image files. */
.setup-tile .photo-view,
.setup-tile .photo-view picture,
.photo-tile .photo-view,
.hm-subcategory-card { overflow:hidden !important; }
.setup-tile .photo-view img,
.photo-tile .photo-view img,
.hm-subcategory-card > img {
  object-fit:cover !important;
  object-position:center 50% !important;
  transform:scale(var(--hm-gallery-cover-scale)) !important;
  transform-origin:center center !important;
}
.setup-tile:hover .photo-view img,
.photo-tile:hover .photo-view img { transform:scale(calc(var(--hm-gallery-cover-scale) + .035)) !important; }
body.hm-v20-ready .hm-sig-ribbon .hm-sig-category-link {
  flex:0 0 var(--hm-category-card-width) !important;
  width:var(--hm-category-card-width) !important;
  min-width:0 !important;
  max-width:var(--hm-category-card-width) !important;
  min-height:123px !important;
  padding:8px 5px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:9px !important;
  scroll-snap-align:start;
  text-align:center !important;
}
body.hm-v20-ready .hm-sig-ribbon {
  display:flex !important;
  justify-content:flex-start !important;
  align-items:stretch !important;
  gap:clamp(8px,1.35vw,22px) !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scroll-snap-type:x proximity;
  overscroll-behavior-inline:contain;
  scrollbar-width:thin;
  padding:10px 18px !important;
}
body.hm-v20-ready .hm-sig-ribbon a.hm-sig-category-link img {
  display:block !important;
  flex:none !important;
  width:69px !important;
  height:69px !important;
  min-width:69px !important;
  min-height:69px !important;
  object-fit:cover !important;
  transform:scale(var(--hm-category-cover-scale)) !important;
  transform-origin:center !important;
  border-radius:50% !important;
  border:0 !important;
  box-shadow:none !important;
}
/* Individual clipping circle: the image expands within its own 69px circular
   viewport; wrapper is inserted by the v2.3 JS without changing gallery data. */
body.hm-v20-ready .hm-sig-ribbon a.hm-sig-category-link .hm-occasion-image {
  width:69px !important;height:69px !important;flex:none !important;
  overflow:hidden !important;border-radius:50% !important;
  border:2px solid #e7d3a9;box-shadow:0 3px 9px #6a4d2d25;
}
body.hm-v20-ready .hm-sig-ribbon a.hm-sig-category-link .hm-occasion-image img {
  width:100% !important;height:100% !important;
}
body.hm-v20-ready .hm-sig-ribbon a.hm-sig-category-link > span:not(.hm-occasion-image) {
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-height:36px;
  white-space:normal !important;
  overflow-wrap:break-word !important;
  word-break:normal !important;
  hyphens:auto;
  font-size:clamp(.67rem,.85vw,.82rem) !important;
  line-height:1.3 !important;
  font-weight:600 !important;
  text-align:center !important;
}
body.hm-v20-ready .hm-sig-ribbon .hm-sig-ribbon-next {
  flex:0 0 43px !important;
  position:sticky !important;right:0;align-self:center;
  z-index:6;
}
body.hm-v20-ready .hm-sig-img {overflow:hidden !important;}
body.hm-v20-ready .hm-sig-featured-grid .hm-sig-img > img {
  object-fit:cover !important;
  object-position:50% 50% !important;
  transform:scale(var(--hm-feature-cover-scale)) !important;
  transform-origin:center center !important;
}
body.hm-v20-ready .hm-sig-card:hover .hm-sig-img > img {
  transform:scale(calc(var(--hm-feature-cover-scale) + .045)) !important;
}
/* Preserve the four featured cards while giving the heading room for two lines. */
body.hm-v20-ready .hm-sig-values-layout {
  grid-template-columns:minmax(var(--hm-story-intro-width),1fr) minmax(0,3.1fr) !important;
  gap:clamp(20px,2.2vw,34px) !important;
}
body.hm-v20-ready .hm-sig-values-title {padding-left:clamp(0px,1.3vw,18px) !important;min-width:0;}
body.hm-v20-ready .hm-sig-values-title h2 {
  max-width:100%;font-size:clamp(2.25rem,3vw,3.15rem) !important;
  line-height:1.02 !important;
}
body.hm-v20-ready .hm-sig-values {padding-block:36px !important;}

/* Fixed chat shortcut: appears on the homepage, never obscures the image modal. */
a.hm-floating-whatsapp {
  box-sizing:border-box;position:fixed;right:max(18px,env(safe-area-inset-right));
  bottom:max(22px,env(safe-area-inset-bottom));
  z-index:240;display:flex;justify-content:center;align-items:center;
  width:60px;height:60px;border-radius:999px;
  background:#25d366;color:white;text-decoration:none;
  box-shadow:0 10px 28px #173c2580,0 0 0 3px #ffffffed;
  transition:transform .2s,box-shadow .2s;
}
a.hm-floating-whatsapp svg{width:36px;height:36px;display:block;fill:none;stroke:currentColor;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
a.hm-floating-whatsapp:hover{transform:translateY(-4px);box-shadow:0 14px 33px #173c2588,0 0 0 3px white}
a.hm-floating-whatsapp:focus-visible{outline:3px solid #ad6b1c;outline-offset:5px}
.hm-sig-modal-open a.hm-floating-whatsapp{visibility:hidden}
@media(max-width:1020px){
 body.hm-v20-ready .hm-sig-values-layout{grid-template-columns:1fr !important;gap:18px !important;}
 body.hm-v20-ready .hm-sig-values-title h2 br{display:none !important;}
 body.hm-v20-ready .hm-sig-values-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
 body.hm-v20-ready .hm-sig-ribbon a.hm-sig-category-link{min-height:118px !important;}
}
@media(max-width:600px){
 body.hm-v20-ready .hm-sig-values-grid{grid-template-columns:1fr !important;}
 body.hm-v20-ready .hm-sig-ribbon a.hm-sig-category-link{min-height:111px !important;}
 body.hm-v20-ready .hm-sig-ribbon a.hm-sig-category-link > span:not(.hm-occasion-image){font-size:.75rem !important;}
 body.hm-v20-ready .hm-sig-ribbon{gap:8px !important;padding:9px 10px !important;}
 body.hm-v20-ready .hm-sig-ribbon-wrap{width:calc(100% - 20px)!important;}
 a.hm-floating-whatsapp{width:54px;height:54px;right:14px;bottom:calc(15px + env(safe-area-inset-bottom));}
 a.hm-floating-whatsapp svg{width:33px;height:33px}
}
@media(prefers-reduced-motion:reduce){
 a.hm-floating-whatsapp,.setup-tile .photo-view img,.hm-sig-img > img{transition:none !important;}
}