/* A single framed composition; the original photograph remains intact. */
.hero {
 --hero-paper:#fffaf7;
 background:var(--hero-paper);
 border:1px solid #ddccc7;
 border-radius:24px;
 overflow:hidden;
 grid-template-columns:minmax(0,.43fr) minmax(0,.57fr);
 gap:0;
 min-height:474px;
 box-shadow:0 8px 28px #72283f05;
}
.hero-content { padding:40px; position:relative; z-index:1; }
.hero h1 { font-size:clamp(34px,3vw,45px); letter-spacing:-.8px; }
.hero-art {
 border-radius:0;
 background-size:auto 140%;
 background-position:90% 55%;
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 23%);
 mask-image:linear-gradient(90deg,transparent,#000 23%);
}
.hero-actions { gap:20px; }
.hero .primary-button { min-width:218px; }

/* Equal, quiet collection cards, each with a restrained material colour. */
.categories { gap:12px; margin:20px 0 40px; padding:0; border:0; }
.category-tile {
 min-height:116px;
 padding:16px;
 gap:14px;
 background:var(--collection-paper,#faf7f4);
 border:1px solid var(--collection-line,#e6dcd6);
 border-radius:16px;
 transition:border-color 180ms ease,background-color 180ms ease;
}
.category-tile[data-category="care"] { --collection-paper:#f5f7f1; --collection-line:#dfe5d7; }
.category-tile[data-category="color"] { --collection-paper:#f6f3f9; --collection-line:#e4ddea; }
.category-tile[data-category="style"] { --collection-paper:#fbf4f0; --collection-line:#ecdcd3; }
.category-tile[data-category="sets"] { --collection-paper:#faf6ed; --collection-line:#e8dec8; }
.category-visual { width:70px; height:70px; flex-shrink:0; }
.category-tile>span:nth-child(2) { min-width:0; }
.category-tile .icon { width:18px; height:18px; flex-shrink:0; }
.category-tile strong { font-size:15px; }
.category-tile small { font-size:13px; }

/* Text is centred independently from an arrow; optical baseline is shared. */
.primary-button,.secondary-button,.add-button { position:relative; line-height:1.2; text-align:center; }
.button-label { display:block; transform:translateY(1px); }
.button-icon-end { padding-inline:42px; }
.hero .primary-button.button-icon-end { padding-inline:42px; }
.button-icon-end>.icon { position:absolute; right:17px; top:50%; margin-top:-10px; width:20px; height:20px; }
.button-icon-start { padding-inline:28px; }
.button-icon-start>.icon { position:absolute; left:12px; top:50%; margin-top:-9px; width:18px; height:18px; }
.add-button>.button-label { line-height:1.2; }
.wallet-button { line-height:1.2; }
.favorites-section .product-name { min-height:2.8em; }

@media(hover:hover) and (pointer:fine) {
 .category-tile:hover { background:var(--collection-paper); border-color:#bc9297; }
}
@media(hover:none), (pointer:coarse) {
 .category-tile:hover { background:var(--collection-paper); }
}
@media(max-width:1200px) and (min-width:641px) {
 .hero-content { padding:30px; }
 .hero h1 { font-size:clamp(32px,3.25vw,39px); }
 .hero-art { background-size:auto 118%; background-position:75% 55%; }
}
@media(max-width:1100px) and (min-width:641px) {
 .hero { margin-top:12px; }
 .categories { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:900px) and (min-width:641px) {
 .hero-content { padding:26px; }
 .hero h1 { font-size:32px; }
 .hero .primary-button { min-width:180px; }
 .hero-art { background-position:70% 55%; }
}
@media(max-width:640px) {
 .hero { gap:0; min-height:0; border-radius:20px; }
 .hero-content { padding:26px 22px 12px; }
 .hero h1 { font-size:clamp(29px,8vw,35px); letter-spacing:-.5px; }
 .hero-subtitle { margin-bottom:22px; }
 .hero-actions { gap:20px 16px; }
 .hero .primary-button { min-width:174px; }
 .hero .primary-button.button-icon-end { padding-inline:38px; }
 .hero-art {
  border-radius:0;
  aspect-ratio:1.12;
  background-size:auto 106%;
  background-position:100% 52%;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%);
  mask-image:linear-gradient(180deg,transparent,#000 22%);
 }
 .categories { gap:12px; margin:18px 0 32px; }
 .category-tile { min-height:110px; padding:12px; gap:9px; }
 .category-visual { width:44px; height:44px; }
 .category-tile strong { font-size:13px; }
 .category-tile small { font-size:12px; }
 .category-tile .icon { display:none; }
 .button-icon-end { padding-inline:36px; }
 .button-icon-end>.icon { right:12px; width:18px; height:18px; margin-top:-9px; }
 .favorites-section .product-name { min-height:44px; }
}
@media(max-width:359px) {
 .hero-content { padding:24px 18px 12px; }
 .hero h1 { font-size:29px; }
 .category-tile { padding:10px; gap:8px; }
 .category-visual { width:36px; height:36px; }
 .category-tile strong { font-size:12px; }
 .category-tile small { font-size:11px; }
}
@media(prefers-reduced-motion:reduce) {
 .category-tile { transition:none; }
}