@import url("https://fonts.googleapis.com/css2?family=Exo:wght@400;500;600;700&display=swap");

.so {
    width: 100%;
    overflow-x: clip;
    --ink: #111;
    --muted: #4b5563;
    --line: #e5e7eb;
    --soft: #f3f4f6;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: #f3efe8;
    color: #161616;
    font-family: Exo, "Fira Sans Condensed", sans-serif;
}
.so > main { flex: 1 0 auto; display: flex; flex-direction: column; width: 100%; animation: rise 0.4s ease both; }
.so a { color: inherit; text-decoration: none; }
.so button, .so input, .so textarea { font-family: inherit; }

.so-chrome { position: sticky; top: 0; z-index: 40; background: #fff; box-shadow: 0 10px 28px rgba(20, 16, 12, 0.08); }
.so-top {
    background: #000; color: #fff; text-align: center;
    font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 0.55rem 0.8rem;
}
.so-top-amt {
    color: #fbbf24; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.02em;
    text-transform: none; vertical-align: -0.06em;
}
.so-head {
    display: flex; align-items: center; gap: 1.5rem;
    width: 100%; padding: 0.9rem clamp(1rem, 2vw, 2.25rem);
}
.so-logo { display: flex; align-items: center; gap: 0.7rem; flex-shrink: 0; }
.so-logo img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #000; }
.so-logo span { font-size: 1.45rem; font-weight: 600; letter-spacing: 0.18em; }
.so-search { flex: 1; position: relative; }
.so-search input {
    width: 100%; background: #faf8f5; border: 1px solid #e6e0d6; border-radius: 999px;
    padding: 0.72rem 2.2rem 0.72rem 2.6rem; font-size: 0.9rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.so-search input:focus { outline: none; border-color: #111; box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.06); }
.so-search button {
    position: absolute; left: 0.9rem; top: 0.55rem; border: 0; background: none; color: #9ca3af; cursor: pointer;
}
.so-tools {
    margin-left: auto; display: flex; align-items: center; gap: 0.28rem;
    padding: 0.22rem; border-radius: 999px; background: #faf8f5; border: 1px solid #efe8df;
    box-shadow: 0 8px 18px rgba(20, 16, 12, 0.06);
}
.so-tools a, .so-tools button {
    display: grid; place-items: center; width: 2.15rem; height: 2.15rem; border-radius: 50%;
    background: #fff; border: 0; color: #1c1917; cursor: pointer; padding: 0; position: relative;
    font-size: 1.05rem; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}
.so-tools a:hover, .so-tools button:hover { background: #9f1239; color: #fff; }
.so-tools i { display: block; line-height: 1; }
.so-bag {
    position: absolute; top: -0.12rem; right: -0.12rem; min-width: 1.05rem; height: 1.05rem; padding: 0 0.22rem;
    border-radius: 999px; border: 2px solid #fff; background: #9f1239; color: #fff;
    font-size: 0.62rem; font-weight: 700; line-height: 1; display: grid; place-items: center;
}
.so-tools a:hover .so-bag, .so-tools button:hover .so-bag { background: #fff; color: #9f1239; }
.so-nav {
    position: relative; color: #fff;
    background:
        radial-gradient(90% 160% at 12% 120%, rgba(159, 18, 57, 0.42), transparent 46%),
        radial-gradient(70% 150% at 88% -20%, rgba(56, 189, 248, 0.22), transparent 42%),
        radial-gradient(50% 120% at 50% 140%, rgba(251, 191, 36, 0.16), transparent 48%),
        linear-gradient(180deg, #24181b 0%, #101010 48%, #161616 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.so-nav-row {
    width: 100%; display: flex; justify-content: center; align-items: center; gap: clamp(0.35rem, 1.4vw, 1.1rem);
    padding: 0.55rem clamp(1rem, 2vw, 2.25rem); font-size: 0.78rem; letter-spacing: 0.14em; font-weight: 600;
}
.so-nav-row > a, .so-drop > a {
    position: relative; color: rgba(255, 255, 255, 0.78); padding: 0.42rem 0.8rem; border-radius: 999px;
    transition: color 0.2s ease, background 0.2s ease;
}
.so-nav-row > a:hover, .so-drop:hover > a, .so-drop:focus-within > a { color: #fff; background: rgba(255, 255, 255, 0.07); }
.so-nav-row > a.on, .so-drop.on > a { color: #fff; background: rgba(255, 255, 255, 0.12); }
.so-nav-row > a::after, .so-drop > a::after {
    content: ""; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0.08rem; height: 3px; border-radius: 999px;
    background: linear-gradient(90deg, #fb7185 0%, #fbbf24 26%, #4ade80 50%, #38bdf8 74%, #c084fc 100%);
    transform: scaleX(0); transform-origin: center; transition: transform 0.28s ease, box-shadow 0.28s ease, opacity 0.28s ease;
}
.so-nav-row > a:hover::after, .so-drop:hover > a::after, .so-drop:focus-within > a::after { transform: scaleX(1); opacity: 0.55; }
.so-nav-row > a.on::after, .so-drop.on > a::after {
    transform: scaleX(1); opacity: 1;
    box-shadow: 0 0 8px rgba(251, 113, 133, 0.9), 0 0 10px rgba(56, 189, 248, 0.75);
}
.so-drop { position: relative; }
.so-drop::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 0.7rem; }
.so-menu {
    --menu-photo: none;
    display: flex; flex-direction: column; justify-content: center;
    position: absolute; top: calc(100% + 0.45rem); left: 50%; width: min(32rem, 78vw); min-height: 15.5rem;
    padding: 1.25rem 1.1rem 1.15rem; z-index: 30; border-radius: 1.05rem; overflow: hidden; color: #161616;
    background:
        linear-gradient(100deg, rgba(255, 250, 246, 0.98) 0 9.5rem, rgba(255, 250, 246, 0.78) 13rem, rgba(255, 250, 246, 0.12) 18rem, transparent 22rem),
        var(--menu-photo) right 16% / cover no-repeat, #fff;
    box-shadow: 0 22px 48px rgba(20, 16, 12, 0.22);
    opacity: 0; visibility: hidden; transform: translate(-50%, 10px); pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}
.so-menu-arrivals { --menu-photo: url("brand/menu-arrivals.jpg"); }
.so-menu-women { --menu-photo: url("brand/menu-women.jpg"); }
.so-menu-sale { --menu-photo: url("brand/menu-sale.jpg"); }
.so-menu-men { --menu-photo: url("brand/menu-men.jpg"); left: auto; right: 0; transform: translateY(10px); }
.so-menu::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, #fb7185, #fbbf24, #4ade80, #38bdf8, #c084fc, #fb7185);
    background-size: 200% 100%; transform: scaleX(0); transform-origin: left;
    transition: transform 0.35s ease;
}
.so-drop:hover .so-menu, .so-drop:focus-within .so-menu {
    opacity: 1; visibility: visible; pointer-events: auto;
}
.so-drop:hover .so-menu, .so-drop:focus-within .so-menu { transform: translate(-50%, 0); }
.so-drop:hover .so-menu-men, .so-drop:focus-within .so-menu-men { transform: none; }
.so-drop:hover .so-menu::before, .so-drop:focus-within .so-menu::before {
    transform: scaleX(1); animation: rainbow-run 1.6s linear infinite;
}
.so-menu a {
    position: relative; display: block; width: fit-content; min-width: 10.5rem;
    margin: 0.16rem 0; padding: 0.46rem 0.9rem; border-radius: 999px;
    font-weight: 600; letter-spacing: 0.01em; text-transform: none; font-size: 0.92rem; color: #161616;
    background: rgba(255, 255, 255, 0.62); backdrop-filter: blur(8px);
    transition: background 0.2s ease, color 0.2s ease;
}
.so-menu a::after {
    content: ""; position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.28rem; height: 2px; border-radius: 999px;
    background: linear-gradient(90deg, #fb7185, #fbbf24, #4ade80, #38bdf8, #c084fc, #fb7185);
    background-size: 220% 100%; transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease;
}
.so-menu a:hover { background: rgba(255, 255, 255, 0.92); color: #111; }
.so-menu a:hover::after { transform: scaleX(1); animation: rainbow-run 0.85s linear infinite; }
.so-menu-btn { display: none; border: 0; background: none; color: #374151; padding: 0; font-size: 1.55rem; line-height: 1; cursor: pointer; }
.so-nav-back, .so-drawer { display: none; }

.so-wrap { width: 100%; padding: 1.2rem clamp(1rem, 2vw, 2.25rem) 2.5rem; }

.hero-bleed { width: 100%; }
.hero-slide { position: relative; overflow: hidden; background: #111; }
.hero-slide img {
    width: 100%; height: min(68vh, 720px); min-height: 320px; object-fit: cover; object-position: center center; display: block;
    animation: hero-ken 6.5s ease both;
}
.hero-cap {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #fff; text-align: center; text-shadow: 0 2px 18px rgba(0,0,0,.45);
    background: linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.08) 42%, rgba(0,0,0,.4));
    animation: rise 0.55s ease both;
}
.hero-cap::before { content: ""; width: 3.2rem; height: 1px; background: #fff; margin-bottom: 0.85rem; }
.hero-cap h1 { margin: 0; font-size: clamp(2.2rem, 5.4vw, 4rem); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.hero-cap p { margin: 0.45rem 0 0; font-size: 1.05rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; }
.hero-nav {
    position: absolute; top: 50%; transform: translateY(-50%); width: 2.4rem; height: 2.4rem; border-radius: 50%;
    border: 0; background: rgba(255,255,255,.85); cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
}
.hero-nav:hover { transform: translateY(-50%) scale(1.08); background: #fff; }
.hero-nav.prev { left: 0.7rem; }
.hero-nav.next { right: 0.7rem; }

.tile-row { display: flex; gap: 2rem; margin: 1.6rem 0 0.2rem; justify-content: center; }
.round-tile { width: 168px; text-align: center; }
.round-tile img {
    width: 152px; height: 152px; object-fit: cover; border-radius: 1.1rem; background: #f3f4f6; border: 4px solid #fff;
    box-shadow: 0 14px 30px rgba(40, 30, 20, 0.14); transition: transform 0.35s ease;
}
.round-tile:hover img { transform: translateY(-4px) scale(1.03); }
.round-tile span { display: block; margin-top: 0.55rem; font-size: 0.72rem; letter-spacing: 0.16em; font-weight: 700; }

.so h2.sec, .cat-title {
    text-align: center; font-size: 1.25rem; letter-spacing: 0.22em; font-weight: 600; margin: 2.2rem 0 1rem; text-transform: uppercase;
}
.so h2.sec::after, .cat-title::after {
    content: ""; display: block; width: 2.4rem; height: 1px; background: #111; margin: 0.6rem auto 0;
}
.so h2.sec span, .cat-title span {
    display: block; margin-bottom: 0.3rem; font-size: 0.68rem; letter-spacing: 0.32em; font-weight: 500; color: #78716c;
}
.arrival-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.7rem; }
.arrival { overflow: hidden; position: relative; background: #eee; box-shadow: 0 12px 28px rgba(40, 30, 20, 0.08); }
.arrival img { width: 100%; height: 320px; object-fit: cover; display: block; transition: transform 0.55s ease; }
.arrival:hover img { transform: scale(1.06); }
.arrival span {
    position: absolute; left: 0; right: 0; bottom: 0; color: #fff;
    background: linear-gradient(transparent, rgba(0,0,0,.72));
    text-align: center; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
    padding: 2.2rem 0.4rem 0.75rem;
}
.circle-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-items: center; gap: 1.2rem; }
.circle { width: min(100%, 240px); text-align: center; }
.circle img {
    width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; border-radius: 50%; border: 8px solid #fff;
    box-shadow: 0 16px 36px rgba(40, 30, 20, 0.14);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.circle:hover img { transform: scale(1.04); box-shadow: 0 18px 40px rgba(40, 30, 20, 0.2); }
.circle span { display: block; margin-top: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.82rem; }

.catalog { display: grid; grid-template-columns: 230px 1fr; gap: 1.6rem; }
.side {
    background: #fff; padding: 0 0.7rem 1.05rem; align-self: start; border-radius: 1.15rem;
    box-shadow: 0 18px 40px rgba(40, 30, 20, 0.1);
    position: sticky; top: 11rem; max-height: calc(100dvh - 12.2rem); overflow: auto;
}
.side::before {
    content: ""; display: block; height: 4px; margin: 0 -0.7rem 0.95rem;
    background: linear-gradient(90deg, #9f1239 0%, #9f1239 28%, #111 100%);
    border-radius: 1.15rem 1.15rem 0 0;
}
.side h3 {
    display: flex; align-items: center; gap: 0.42rem;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
    border: 0; margin: 0.15rem 0.35rem 0.5rem; padding: 0; color: #9f1239;
}
.side h3::before {
    content: ""; width: 0.38rem; height: 0.38rem; border-radius: 50%; background: #9f1239; flex: 0 0 auto;
}
.side h3::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, #f3c6d0, transparent); }
.side-nav { display: flex; flex-direction: column; gap: 0.18rem; }
.side-nav a {
    display: flex; align-items: center; padding: 0.28rem 0.7rem; border-radius: 999px;
    color: #44403c; font-size: 0.78rem; font-weight: 700; line-height: 1.2;
    transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}
.side-nav a:hover { background: #f6f3ee; color: #111; transform: translateX(3px); }
.side-nav a.on { background: #111; color: #fff; font-weight: 700; box-shadow: 0 8px 16px rgba(17, 17, 17, 0.16); }
.side-nav a.on:hover { background: #111; color: #fff; transform: none; }
.side-tools { display: flex; flex-direction: column; gap: 0.45rem; margin: 0.95rem 0.2rem 0.15rem; padding-top: 0.9rem; border-top: 1px solid #ece7df; }
.side-tools a {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; align-items: center; justify-content: center; gap: 0.4rem;
    padding: 0.52rem 0.7rem; border-radius: 999px; border: 0; color: #fff;
    background-color: #111; background-size: cover; background-position: center;
    font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.side-tools a::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
}
.side-tools a:hover { transform: translateY(-1px); }
.side-sale { background-image: url("/brand/side-sale.jpg?v=1"); }
.side-sale::before { background: linear-gradient(90deg, rgba(62, 8, 24, 0.62), rgba(62, 8, 24, 0.28)); }
.side-sale:hover { color: #fff; }
.side-sale.on { box-shadow: inset 0 0 0 2px #fff, 0 8px 16px rgba(159, 18, 57, 0.28); }
.side-sale.on::before { background: linear-gradient(90deg, rgba(62, 8, 24, 0.78), rgba(62, 8, 24, 0.5)); }
.side-stock { justify-content: flex-start; padding-left: 0.75rem; background-image: url("/brand/side-stock.jpg?v=1"); background-position: right center; text-shadow: none; }
.side-stock::before { background: linear-gradient(90deg, #111 0%, #111 54%, rgba(17, 17, 17, 0.15) 76%, rgba(17, 17, 17, 0) 100%); }
.side-stock:hover { color: #fff; }
.side-stock.on { box-shadow: inset 0 0 0 2px #fff, 0 8px 16px rgba(17, 17, 17, 0.22); }
.side-stock.on::before { background: linear-gradient(90deg, #111 0%, #111 54%, rgba(17, 17, 17, 0.35) 76%, rgba(17, 17, 17, 0.12) 100%); }
.side-fab { margin: 0.85rem 0.15rem 0; padding-top: 0.85rem; border-top: 1px solid #ece7df; }
.side-chips { display: flex; flex-wrap: wrap; gap: 0.28rem; padding: 0 0.3rem; }
.side-chips a {
    display: inline-flex; align-items: center; padding: 0.14rem 0.46rem; border-radius: 999px;
    background: #f6f3ee; color: #44403c; font-size: 0.66rem; font-weight: 700; line-height: 1.2;
    border: 1px solid transparent;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.side-chips a:hover { background: #fff; color: #111; border-color: #e7e2da; }
.side-chips a.on { background: #111; color: #fff; border-color: #111; font-weight: 700; }
.side::-webkit-scrollbar { width: 6px; }
.side::-webkit-scrollbar-thumb { background: #e7e2da; border-radius: 99px; }
.catalog h1 { font-size: 1.55rem; font-weight: 600; margin: 0; letter-spacing: 0.14em; text-transform: uppercase; }
.grid4 { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.9rem; align-items: stretch; }
.grid4 .pcard { animation: card-in 0.62s cubic-bezier(.2, .7, .2, 1) both; }
.grid4 .pcard:nth-child(6n+2) { animation-delay: 0.06s; }
.grid4 .pcard:nth-child(6n+3) { animation-delay: 0.12s; }
.grid4 .pcard:nth-child(6n+4) { animation-delay: 0.18s; }
.grid4 .pcard:nth-child(6n+5) { animation-delay: 0.24s; }
.grid4 .pcard:nth-child(6n+6) { animation-delay: 0.3s; }
.pcard {
    display: flex; flex-direction: column; height: 100%; position: relative; border: 0; border-radius: 0.15rem; overflow: hidden; background: #fff;
    box-shadow: 0 12px 28px rgba(40, 30, 20, 0.07);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pcard-link { display: block; color: inherit; }
.pcard-copy { display: contents; color: inherit; }
.pcard:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(40, 30, 20, 0.14); }
.pcard .shot { position: relative; aspect-ratio: 3/4; background: #ece7df; overflow: hidden; }
.pcard .shot img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; transition: transform 0.55s ease; }
.pcard:hover .shot img { transform: scale(1.06); }
.pcard.sold .shot img { filter: grayscale(0.9); opacity: 0.62; }
.pcard.sold:hover .shot img { transform: none; }
.badge {
    position: absolute; top: 0.7rem; left: 0.7rem; background: #fff; border: 0; color: #111;
    font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
    padding: 0.28rem 0.5rem; box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
.badge.sale { background: #9f1239; color: #fff; }
.badge.sold {
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: #111; color: #fff; font-size: 0.95rem; letter-spacing: 0.2em;
    padding: 0.62rem 1.05rem; border: 2px solid #fff; white-space: nowrap;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.38);
}
.pcard .meta {
    flex: 1; display: grid; grid-template-rows: auto 2.5em 1.45rem 2.55rem; align-content: start; gap: 0.32rem;
    padding: 0.8rem 0.85rem 0.95rem; color: inherit; font-size: 0.92rem;
}
.pcard .meta .brand-line {
    justify-self: center; display: inline-flex; align-items: center; justify-content: center;
    width: fit-content; max-width: 100%; margin: 0; height: auto; min-height: 1.2rem;
    padding: 0.16rem 0.68rem; border-radius: 999px; background: #9f1239; color: #fff;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; line-height: 1.1;
    text-transform: uppercase; text-align: center; text-decoration: none;
    box-shadow: 0 6px 14px rgba(159, 18, 57, 0.28);
}
.pcard .meta .brand-line:empty { display: block; width: 100%; min-height: 1.1rem; padding: 0; background: none; box-shadow: none; }
.pcard .meta a.brand-line:hover { background: #881337; color: #fff; }
.pcard .meta p {
    margin: 0; height: 2.5em; line-height: 1.25; font-size: 0.82rem; color: #44403c; font-weight: 700; letter-spacing: 0.01em;
    overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
.pcard .price-line { display: flex; align-items: baseline; justify-content: flex-end; gap: 0.4rem; height: 1.45rem; overflow: hidden; white-space: nowrap; }
.pcard .meta strong { font-size: 1.05rem; letter-spacing: 0.01em; color: #9f1239; font-weight: 700; }
.pcard .meta .was { color: #a8a29e; text-decoration: line-through; font-weight: 500; font-size: 0.82rem; }
.pcard .card-sizes { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 0.28rem; height: 2.55rem; overflow: hidden; }
.pcard .card-sizes span {
    display: inline-flex; align-items: center; height: 1.12rem; padding: 0 0.42rem; border-radius: 999px;
    background: #f6f3ee; color: #44403c; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em;
}
.pcard .card-sizes span.off { background: transparent; color: #a8a29e; box-shadow: inset 0 0 0 1px #e7e2da; }

.pdp { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 2rem; align-items: start; }
.pdp-shot { border-radius: 0.15rem; overflow: hidden; background: #ece7df; border: 0; position: relative; box-shadow: 0 18px 44px rgba(40, 30, 20, 0.14); }
.pdp-shot img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.pdp-shot.sold img { filter: grayscale(0.9); opacity: 0.62; }
.sold-banner {
    margin: 0 0 0.75rem; padding: 0.62rem 0.8rem; background: #111; color: #fff;
    font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; text-align: center;
}
.pdp-thumbs { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.55rem; }
.pdp-thumbs button { width: 4.2rem; height: 5.5rem; padding: 0; border: 2px solid transparent; background: #fff; cursor: pointer; overflow: hidden; }
.pdp-thumbs button.on { border-color: #9f1239; }
.pdp-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp h1 { font-size: 1.85rem; font-weight: 700; margin: 0 0 0.35rem; text-transform: none; letter-spacing: 0; color: #1c1917; }
.pdp .price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem 0.55rem; font-size: 1.7rem; font-weight: 700; margin: 0 0 0.9rem; color: #9f1239; }
.pdp .each { font-size: 0.85rem; font-weight: 700; color: #78716c; }
.pdp .was { color: #a8a29e; text-decoration: line-through; font-weight: 600; margin-right: 0.45rem; font-size: 1.05rem; }
.pdp .qty-label, .pdp .size-head { color: #9f1239; font-weight: 700; letter-spacing: 0.12em; }
.pdp .stepper { border: 1px solid #fecdd3; border-radius: 999px; }
.pdp .stepper button { color: #9f1239; font-weight: 700; font-size: 1.05rem; background: #fff; cursor: pointer; }
.pdp .stepper span { color: #9f1239; font-weight: 700; background: #fff1f2; }
.pdp .size-head .text-btn { color: #9f1239; font-weight: 700; text-decoration: none; }
.pdp .sizes button { font-weight: 700; border-radius: 999px; color: #44403c; }
.pdp .sizes button.on { background: #9f1239; color: #fff; border-color: #9f1239; }
.pdp .sizes button.on small { color: #ffe4e6; font-weight: 700; }
.pdp .sizes button:disabled { color: #a8a29e; background: #f5f5f4; text-decoration: line-through; opacity: 1; }
.pdp .sizes button:disabled small { color: #9f1239; font-weight: 700; text-decoration: none; }
.pdp .buy-row .btn-black { background: #9f1239; border-color: #9f1239; }
.pdp .buy-row .btn-black:hover { background: #881337; }
.pdp .buy-row .btn-ghost { color: #9f1239; border-color: #9f1239; font-weight: 700; }
.pdp .buy-row .btn-ghost:hover { background: #fff1f2; }
.pdp h3 {
    margin: 1.15rem 0 0.4rem; color: #9f1239; font-size: 0.78rem; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
}
.pdp .pdp-copy { margin: 0; font-weight: 600; color: #44403c; line-height: 1.55; }
.pdp-points { margin: 0; padding: 0 0 0 1.15rem; }
.pdp-points li { margin: 0.28rem 0; font-weight: 600; color: #44403c; line-height: 1.5; }
.pdp-points li::marker { color: #9f1239; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; margin: 0.2rem 0 0.4rem; }
.facts div { background: #fff; border-radius: 0.7rem; padding: 0.55rem 0.7rem; box-shadow: 0 6px 16px rgba(40, 30, 20, 0.05); }
.facts dt { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: #9f1239; font-weight: 700; }
.facts dd { margin: 0.15rem 0 0; font-weight: 700; color: #1c1917; display: flex; align-items: center; gap: 0.4rem; }
.facts a { color: inherit; text-decoration: none; }
.facts a:hover { color: #9f1239; }
.facts .dot { width: 0.72rem; height: 0.72rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.pdp .promise { color: #44403c; font-weight: 600; }
.pdp .promise strong { color: #9f1239; font-weight: 700; }
.pdp .wish { color: #9f1239; border-color: #fecdd3; font-weight: 700; }
.qty-label { font-size: 0.72rem; letter-spacing: 0.08em; color: #6b7280; }
.stepper { display: inline-flex; border: 1px solid #d1d5db; border-radius: 0.4rem; overflow: hidden; margin: 0.35rem 0 0.9rem; }
.stepper button, .stepper span { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; background: #fff; border: 0; }
.buy-row { display: flex; gap: 0.6rem; }
.btn-black, .btn-ghost, .btn-solid, .btn-line {
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    border-radius: 0.35rem; padding: 0.75rem 1.2rem; font-weight: 700; letter-spacing: 0.06em; font-size: 0.82rem;
}
.btn-black, .btn-solid { background: #111; color: #fff; border: 1px solid #111; transition: background 0.2s ease, transform 0.2s ease; }
.btn-black:hover, .btn-solid:hover { background: #333; }
.btn-ghost, .btn-line { background: #fff; color: #111; border: 1px solid #d1d5db; transition: background 0.2s ease; }
.btn-ghost:hover, .btn-line:hover { background: #f3f4f6; }
.btn-black:disabled, .btn-solid:disabled { opacity: 0.45; }
.sizes { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.7rem 0; }
.sizes button {
    min-width: 3rem; border: 1px solid #d1d5db; background: #fff; border-radius: 0.35rem; padding: 0.35rem 0.45rem; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; line-height: 1.15;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.sizes button small { font-size: 0.68rem; color: #6b7280; }
.sizes button.on { background: #111; color: #fff; border-color: #111; }
.sizes button.on small { color: #e5e7eb; }
.sizes button:disabled { opacity: 1; color: #a8a29e; background: #f5f5f4; text-decoration: line-through; }
.sizes button:disabled small { color: #9f1239; font-weight: 700; text-decoration: none; letter-spacing: 0.06em; text-transform: uppercase; }

.so-foot { background: #111; color: #f5f5f4; border-top: 0; margin-top: auto; padding: 2.4rem clamp(1rem, 2vw, 2.25rem) 1.1rem; font-weight: 700; }
.so-foot-grid { width: 100%; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 1.2rem; }
.so-foot h3 { font-size: 0.72rem; margin: 0 0 0.7rem; letter-spacing: 0.16em; color: #fff; font-weight: 700; }
.so-foot a, .so-foot li, .so-foot p, .so-foot input, .so-foot button, .so-copy { color: #d6d3d1; font-size: 0.8rem; font-weight: 700; }
.so-foot a:hover { color: #fff; }
.so-foot ul { list-style: none; margin: 0; padding: 0; }
.so-foot li { margin: 0.4rem 0; }
.so-copy { width: 100%; margin: 1.5rem 0 0; border-top: 1px solid #2a2a2a; padding-top: 0.9rem; display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; flex-wrap: wrap; font-size: 0.75rem; font-weight: 700; color: #a8a29e; }
.so-stats { display: inline-flex; align-items: center; gap: 0.4rem; }
.so-stat {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.14rem 0.6rem; border-radius: 999px;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; line-height: 1.4;
    font-variant-numeric: tabular-nums;
}
.so-stat strong { font-weight: 700; }
.so-stat.is-visits { background: #0e8f78; color: #fff; }
.so-stat.is-online { background: #1d5fa8; color: #fff; }
.so-foot .btn-black { background: #fff; color: #111; border-color: #fff; }
.so-foot .btn-black:hover { background: #e7e5e4; }
.so-wa {
    position: fixed; right: 1rem; bottom: 1rem; z-index: 50;
    background: #22c55e; color: #fff !important; border-radius: 999px; padding: 0.65rem 0.95rem;
    font-weight: 600; box-shadow: 0 8px 20px rgba(0,0,0,.15);
    animation: wa-in 0.5s ease both;
    transition: transform 0.2s ease;
}
.so-wa:hover { transform: translateY(-2px); }

.bag, .checkout, .account, .doc, .story { width: 100%; padding: 1.4rem clamp(1rem, 2vw, 2.25rem) 2.5rem; }
.gate { max-width: 28rem; margin: auto; padding: 2rem 1.6rem; width: 100%; background: #fff; box-shadow: 0 18px 44px rgba(40, 30, 20, 0.08); }
.gate h1, .doc h1, .bag h1 { font-size: 1.7rem; font-weight: 700; text-transform: none; }
.field { display: flex; flex-direction: column; gap: 0.2rem; margin-bottom: 0.7rem; }
.field span { font-size: 0.85rem; }
.field input, .field textarea, .sheet input, .sheet textarea {
    border: 1px solid #d1d5db; border-radius: 0.35rem; padding: 0.55rem 0.6rem; width: 100%;
}
.checkout { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 1.4rem; }
.summary, .sheet { border: 0; border-radius: 0.2rem; padding: 1.1rem; background: #fff; box-shadow: 0 12px 30px rgba(40, 30, 20, 0.06); }
.sum-line, .bag-row { display: grid; grid-template-columns: 72px 1fr auto; gap: 0.7rem; align-items: center; border-bottom: 1px solid var(--line); padding: 0.65rem 0; }
.sum-line { grid-template-columns: 1fr auto; }
.bag-row .cloth-photo { width: 72px; height: 96px; object-fit: cover; border-radius: 0.35rem; }
.account-nav { display: flex; gap: 1rem; margin-bottom: 1rem; font-size: 0.92rem; }
.account-nav a.active { border-bottom: 2px solid #111; }
.note { background: #f3f4f6; padding: 0.55rem 0.7rem; border-radius: 0.35rem; }
.note.bad { background: #fef2f2; color: #991b1b; }
.note.ok { background: #e9f7ef; color: #166534; }
.order-continue { margin: 0.55rem 0 0.85rem; }
.order-continue a {
    color: #9f1239; font-weight: 700; text-decoration: underline; text-underline-offset: 0.18em;
}
.order-continue a:hover { color: #881337; }
.order-page { max-width: 58rem; }
.order-page, .order-page :where(h1, h2, p, span, a, button, strong, li) { font-weight: 700; }
.order-page .account-nav {
    gap: 0.35rem; margin-bottom: 1.15rem; flex-wrap: wrap;
}
.order-page .account-nav a {
    padding: 0.45rem 0.9rem; border-radius: 999px; background: #fff; color: #57534e;
    border: 1.5px solid #e7e2da; text-decoration: none; font-size: 0.88rem;
}
.order-page .account-nav a.active {
    background: #111; color: #fff; border-color: #111; border-bottom: 1.5px solid #111;
}
.order-hero {
    position: relative; overflow: hidden; margin: 0 0 1rem; padding: 1.2rem 1.25rem 1.25rem;
    background:
        linear-gradient(115deg, rgba(255,255,255,.98) 0%, rgba(255,241,242,.88) 42%, rgba(255,255,255,.94) 100%),
        #fff;
    border-radius: 1.15rem; box-shadow: 0 12px 30px rgba(40, 30, 20, 0.06);
}
.order-hero::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, #9f1239 0%, #111 100%);
}
.order-hero .eyebrow { margin: 0; color: #9f1239; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; }
.order-hero h1 {
    margin: 0.25rem 0 0.7rem; font-size: clamp(1.55rem, 3vw, 2rem); letter-spacing: 0.04em;
    text-transform: uppercase; color: #111; line-height: 1.1;
}
.order-status { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.85rem; }
.order-page .chip {
    display: inline-flex; align-items: center; padding: 0.32rem 0.7rem; border-radius: 999px;
    background: #f5f5f4; color: #292524; font-size: 0.78rem; letter-spacing: 0.04em;
}
.order-page .chip.ok { background: #fff1f2; color: #9f1239; }
.order-page .chip.bad { background: #fef2f2; color: #991b1b; }
.order-page .chip.warn { background: #fff7ed; color: #c2410c; }
.order-page .chip.muted { background: #f5f5f4; color: #78716c; }
.order-page .chip.tiny { padding: 0.18rem 0.5rem; font-size: 0.7rem; margin-left: 0.35rem; vertical-align: middle; }
.order-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.order-page .order-actions .btn-black,
.order-page .order-actions .btn-line { border-radius: 999px; font-weight: 700; }
.order-page .order-actions .btn-black { background: #9f1239; border-color: #9f1239; }
.order-page .order-actions .btn-black:hover { background: #881337; }
.order-banner {
    margin: 0.85rem 0 0; padding: 0.7rem 0.85rem; border-radius: 0.8rem;
    background: #f5f5f4; color: #292524; font-weight: 700;
}
.order-banner.ok { background: #fff1f2; color: #9f1239; }
.order-banner.bad { background: #fef2f2; color: #991b1b; }
.order-grid {
    display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 1rem; margin-bottom: 1rem;
}
.order-panel {
    position: relative; margin: 0 0 1rem; padding: 1.15rem 1.2rem 1.2rem;
    background: #fff; border-radius: 1.1rem; box-shadow: 0 12px 30px rgba(40, 30, 20, 0.06);
}
.order-panel::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
    border-radius: 1.1rem 1.1rem 0 0;
    background: linear-gradient(90deg, #9f1239 0%, #9f1239 28%, #111 100%);
}
.order-panel h2 {
    margin: 0 0 0.75rem; font-size: 1.15rem; letter-spacing: 0; text-transform: none; color: #111;
}
.order-ship-name { margin: 0 0 0.25rem; font-size: 1.05rem; color: #111; }
.order-ship, .order-track { margin: 0; color: #44403c; line-height: 1.45; }
.order-lines { margin-bottom: 0.75rem; }
.order-page .sum-line {
    border-bottom: 1px dashed #e7e2da; padding: 0.55rem 0; gap: 0.75rem;
}
.order-page .sum-line span { color: #44403c; }
.order-page .sum-line strong { color: #111; font-variant-numeric: tabular-nums; }
.order-page .co-totals {
    margin-top: 0.15rem; padding: 0.85rem 0.9rem 0.35rem;
    background: #faf8f5; border: 1.5px solid #ece7df; border-radius: 0.95rem;
}
.order-page .co-totals .bag-row {
    display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline;
    margin: 0; padding: 0.55rem 0; border: 0; border-bottom: 1px dashed #e7e2da;
}
.order-page .co-totals .bag-row:last-child { border-bottom: 0; }
.order-page .co-totals .bag-row span { color: #57534e; font-size: 0.95rem; }
.order-page .co-totals .bag-row strong { color: #111; font-size: 0.98rem; font-variant-numeric: tabular-nums; }
.order-page .co-totals .co-free { color: #9f1239; }
.order-page .co-totals .bag-grand {
    margin-top: 0.2rem; padding: 0.75rem 0.8rem; border-radius: 0.75rem;
    background: #111; align-items: center;
}
.order-page .co-totals .bag-grand span { color: #fff; font-size: 0.92rem; letter-spacing: 0.08em; text-transform: uppercase; }
.order-page .co-totals .bag-grand strong { color: #fff; font-size: 1.35rem; }
.order-page .hint { margin: 0.65rem 0 0; color: #57534e; }
.order-pays { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 0.75rem; }
.order-pay-row {
    display: flex; justify-content: space-between; gap: 0.75rem; align-items: flex-start;
    padding: 0.75rem 0.85rem; border-radius: 0.85rem; background: #faf8f5; border: 1.5px solid #ece7df;
}
.order-pay-row strong { color: #111; }
.order-pay-row .meta { margin: 0.2rem 0 0; }
.order-page .timeline { margin: 0.35rem 0 0; }
.order-page .timeline li {
    border-left: 3px solid #9f1239; padding: 0.15rem 0 0.75rem 0.85rem; color: #44403c;
}
.order-page .timeline li strong { color: #111; }
@media (max-width: 900px) {
    .order-grid { grid-template-columns: 1fr; }
    .order-page .order-actions .btn-black,
    .order-page .order-actions .btn-line { width: 100%; justify-content: center; }
}
.live-check { margin: 0.15rem 0 0; font-size: 0.78rem; color: #9f1239; font-weight: 600; }
.hint, .meta { color: #6b7280; font-size: 0.85rem; }
.stars { letter-spacing: 0.12em; font-weight: 700; }
.rate-1 { color: #9f1239; }
.rate-2 { color: #c2410c; }
.rate-3 { color: #a16207; }
.rate-4 { color: #3f6212; }
.rate-5 { color: #166534; }
.pay-choices { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.4rem 0 0.8rem; }
.pay-choices button { border: 1px solid #d1d5db; background: #fff; border-radius: 0.35rem; padding: 0.45rem 0.7rem; cursor: pointer; }
.pay-choices button.on { background: #111; color: #fff; border-color: #111; }
.pay-card { max-width: 32rem; margin: 2rem auto; }
.timeline { list-style: none; padding: 0; }
.timeline li { border-left: 2px solid #111; padding: 0.15rem 0 0.6rem 0.7rem; }
.msg { border-top: 1px solid var(--line); padding: 0.6rem 0; }
.chat {
    display: flex; flex-direction: column; width: min(46rem, 100%); height: min(68vh, 38rem); min-height: 22rem;
    background: #fff; border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(40, 30, 20, 0.06);
}
.chat-log { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 0.55rem; padding: 1rem 0.9rem; background: #f6f1ea; }
.chat-log::before { content: ""; margin-top: auto; }
.bubble { max-width: min(78%, 34rem); padding: 0.5rem 0.75rem 0.55rem; border-radius: 1rem 1rem 1rem 0.3rem; background: #fff; color: #161616; }
.bubble.mine { margin-left: auto; border-radius: 1rem 1rem 0.3rem 1rem; background: #9f1239; color: #fff; }
.bubble .who { display: block; font-size: 0.72rem; opacity: 0.75; }
.bubble p { margin: 0.15rem 0 0; white-space: pre-wrap; }
.chat-error { margin: 0; padding: 0.35rem 0.75rem; background: #fdecec; color: #9f1239; }
.chat-compose { display: flex; gap: 0.45rem; align-items: flex-end; padding: 0.65rem; border-top: 1px solid #e7e5e4; background: #fff; }
.chat-compose textarea {
    flex: 1; resize: none; border: 1px solid #e7e5e4; border-radius: 1.1rem; padding: 0.55rem 0.8rem;
    min-height: 2.6rem; font: inherit; color: inherit; background: #fff;
}
.chat-compose button { border: 0; border-radius: 999px; background: #111; color: #fff; padding: 0.55rem 1.05rem; cursor: pointer; }

@media (max-width: 1100px) {
    .arrival-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .circle-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .so-head {
        display: grid; grid-template-columns: 1fr auto 1fr;
        grid-template-areas: "menu logo tools" "search search search";
        gap: 0.85rem 0.35rem; align-items: center;
        padding: 0.85rem 1rem 0.75rem;
    }
    .so-menu-btn {
        display: grid; place-items: center; grid-area: menu; justify-self: start;
        width: 2.45rem; height: 2.45rem; border-radius: 50%; background: #f6f1ea; color: #1c1917;
    }
    .so-logo { grid-area: logo; flex-direction: column; gap: 0.15rem; }
    .so-logo img { width: 48px; height: 48px; }
    .so-logo span { display: block; font-size: 0.95rem; letter-spacing: 0.18em; }
    .so-search { display: block; grid-area: search; width: 100%; }
    .so-tools { grid-area: tools; justify-self: end; margin-left: 0; gap: 0.2rem; padding: 0.16rem; }
    .so-tools a, .so-tools button { width: 2rem; height: 2rem; font-size: 1rem; }
    .so-nav { display: none; }
    .so-nav-back {
        display: block; position: fixed; inset: 0; z-index: 60; border: 0; padding: 0;
        background: rgba(0, 0, 0, 0.6); opacity: 0; visibility: hidden; pointer-events: none;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    .so.menu-open .so-nav-back { opacity: 1; visibility: visible; pointer-events: auto; }
    .so-drawer {
        display: flex; flex-direction: column; position: fixed; top: 0; left: 0; z-index: 61; height: 100dvh;
        width: 86%; max-width: 360px; padding: 1.15rem 1rem 1.6rem; overflow-y: auto; color: #1c1917;
        background: linear-gradient(180deg, #fff 0%, #fbf7f2 100%);
        border-radius: 0 1.35rem 1.35rem 0; box-shadow: 18px 0 48px rgba(20, 16, 12, 0.22);
        transform: translateX(-105%); transition: transform 0.32s ease; font-family: Exo, sans-serif;
    }
    .so.menu-open .so-drawer { transform: translateX(0); }
    body:has(.so.menu-open) { overflow: hidden; }
    .so-drawer-head {
        display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
        margin: 0 0.15rem 0.7rem; padding-bottom: 0.85rem; position: relative;
    }
    .so-drawer-head::after {
        content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 999px;
        background: linear-gradient(90deg, #9f1239 0%, #e7b3c2 62%, transparent 100%);
    }
    .so-drawer-brand { display: flex; align-items: center; gap: 0.65rem; }
    .so-drawer-brand img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: #000; }
    .so-drawer-brand strong { display: block; font-size: 1.2rem; font-weight: 700; letter-spacing: 0; line-height: 1.1; }
    .so-drawer-brand span { display: block; margin-top: 0.12rem; font-size: 0.68rem; letter-spacing: 0.22em; color: #9f1239; font-weight: 600; }
    .so-drawer-head button {
        width: 2.15rem; height: 2.15rem; border: 0; border-radius: 50%; background: #f3ece4; color: #1c1917;
        display: grid; place-items: center; font-size: 0.85rem; cursor: pointer;
    }
    .so-acc { border-bottom: 1px solid #efe8df; }
    .so.menu-open .so-acc, .so.menu-open .so-acc-link { animation: rise 0.34s ease both; }
    .so.menu-open .so-acc:nth-child(3) { animation-delay: 0.04s; }
    .so.menu-open .so-acc:nth-child(4) { animation-delay: 0.08s; }
    .so.menu-open .so-acc:nth-child(5) { animation-delay: 0.12s; }
    .so.menu-open .so-acc-link:nth-of-type(1) { animation-delay: 0.16s; }
    .so.menu-open .so-acc-link:nth-of-type(2) { animation-delay: 0.2s; }
    .so-acc > button {
        width: 100%; display: flex; align-items: center; justify-content: space-between;
        border: 0; background: none; color: #1c1917; cursor: pointer; text-align: left;
        margin: 0.28rem 0; padding: 0.72rem 0.7rem; border-radius: 0.8rem;
        font-size: 1.02rem; font-weight: 600; letter-spacing: 0.01em; text-transform: none;
    }
    .so-acc > button.sale { color: #9f1239; }
    .so-acc > button.open { background: #fff5f7; color: #9f1239; }
    .so-acc > button i {
        width: 1.45rem; height: 1.45rem; border-radius: 50%; background: #f6f1ea; color: #78716c;
        display: grid; place-items: center; font-size: 0.68rem; transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
    }
    .so-acc > button.open i { transform: rotate(180deg); background: #9f1239; color: #fff; }
    .so-acc-sub {
        margin: 0 0.15rem 0.7rem 0.35rem; padding: 0.35rem; border-radius: 0.9rem; background: #f6f1ea;
        animation: rise 0.22s ease both;
    }
    .so .so-acc-sub a, .so .so-acc-link {
        display: flex; align-items: center; gap: 0.55rem; padding: 0.55rem 0.7rem; border-radius: 0.7rem;
        color: #44403c; font-size: 0.92rem; font-weight: 600; letter-spacing: 0.02em; text-transform: none;
    }
    .so .so-acc-sub a::before {
        content: ""; width: 0.38rem; height: 0.38rem; border-radius: 50%; background: #9f1239; flex: 0 0 auto;
    }
    .so .so-acc-link {
        margin: 0.15rem 0; padding: 0.85rem 0.7rem; color: #1c1917; font-size: 1.02rem; border-bottom: 1px solid #efe8df; border-radius: 0;
    }
    .so .so-acc-link::after { content: "\F285"; font-family: bootstrap-icons; margin-left: auto; font-size: 0.8rem; color: #a8a29e; font-weight: 400; }
    .catalog, .checkout, .so-foot-grid { grid-template-columns: 1fr 1fr; }
    .catalog, .pdp { grid-template-columns: 1fr; }
    .pdp { gap: 1.15rem; }
    .pdp h1 { font-size: 1.55rem; }
    .pdp .price { font-size: 1.45rem; }
    .pdp .buy-row { display: grid; grid-template-columns: 1fr 1fr; }
    .pdp .buy-row .btn-black, .pdp .buy-row .btn-ghost { width: 100%; padding-left: 0.45rem; padding-right: 0.45rem; }
    .so > main, .grid4 .pcard, .so.menu-open .so-acc, .so.menu-open .so-acc-link, .so-acc-sub { animation: none; }
    .side { position: static; max-height: none; }
    .bag-layout, .co-layout { grid-template-columns: 1fr; }
    .bag-summary { position: static; }
    .arrival-row, .circle-row, .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.catalog-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap;
    margin: 0 0 1rem; padding: 0.65rem 0.85rem 0.65rem 1.05rem;
    background: #fff; border-radius: 1rem; box-shadow: 0 12px 28px rgba(40, 30, 20, 0.07);
}
.catalog-title { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.catalog-bar h1 { margin: 0; font-weight: 700; }
.catalog-bar p {
    margin: 0; padding: 0.22rem 0.62rem; border-radius: 999px; background: #fff1f2; color: #9f1239;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}
.catalog-sort {
    display: inline-flex; align-items: center; gap: 0.45rem; margin: 0;
    padding: 0.18rem 0.18rem 0.18rem 0.72rem; border-radius: 999px; background: #f6f3ee;
    color: #78716c; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.catalog-sort select {
    margin: 0; border: 0; border-radius: 999px; padding: 0.38rem 0.65rem; background: #fff;
    font: inherit; font-size: 0.82rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: #161616;
}
.catalog-empty {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.4rem; min-height: 16rem; margin: 0.15rem 0 0; padding: 2.5rem 1.4rem 2.7rem;
    text-align: center; background: #fff; border-radius: 1.15rem; overflow: hidden;
    box-shadow: 0 18px 40px rgba(40, 30, 20, 0.08);
}
.catalog-empty::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, #9f1239 0%, #9f1239 28%, #111 100%);
}
.catalog-empty-mark {
    display: grid; place-items: center; width: 3.4rem; height: 3.4rem; margin-bottom: 0.45rem;
    border-radius: 50%; background: #fff1f2; color: #9f1239; font-size: 1.25rem;
    box-shadow: inset 0 0 0 1px #f3c6d0;
}
.catalog-empty p {
    margin: 0; color: #161616; font-size: 1.02rem; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase;
}
.catalog-empty span:last-child {
    max-width: 24rem; color: #78716c; font-size: 0.92rem; font-weight: 600; line-height: 1.45;
}
.wish {
    position: absolute; top: 0.55rem; right: 0.55rem; z-index: 2;
    width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: #fff; color: #111; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.wish { transition: transform 0.2s ease, color 0.2s ease; }
.wish:hover { transform: scale(1.08); }
.wish.on { color: #dc2626; }
.wish.on i { animation: pop 0.35s ease; }
.pdp .wish { position: static; width: auto; height: auto; margin-top: 0.8rem; padding: 0.45rem 0.8rem; border-radius: 0.35rem; gap: 0.35rem; box-shadow: none; border: 1px solid var(--line); }
.size-head { display: flex; justify-content: space-between; align-items: center; margin-top: 0.8rem; font-size: 0.78rem; letter-spacing: 0.08em; }
.text-btn { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; font: inherit; letter-spacing: 0; }
.guide { border: 1px solid var(--line); padding: 0.7rem; margin-bottom: 0.7rem; font-size: 0.85rem; animation: rise 0.25s ease; }
.guide table { width: 100%; border-collapse: collapse; }
.guide th, .guide td { text-align: left; padding: 0.3rem 0.2rem; border-bottom: 1px solid var(--line); }
.promise { list-style: none; padding: 0; margin: 0.8rem 0; color: #4b5563; font-size: 0.85rem; }
.promise li { margin: 0.2rem 0; }
.related { margin-top: 2rem; }
.trust { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; margin: 1.2rem 0 0.4rem; padding: 0; }
.trust li {
    position: relative; display: flex; flex-direction: column; justify-content: center; gap: 0.15rem;
    min-height: 118px; padding: 0.9rem 1rem; overflow: hidden; border: 0; color: #1a1a1a;
    background-color: #f4f1ea; background-size: cover; animation: rise 0.45s ease both;
}
.trust li::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.9) 32%, rgba(255,255,255,.22) 56%, rgba(255,255,255,0) 74%);
}
.trust li > * { position: relative; z-index: 1; }
.trust li:nth-child(2) { animation-delay: 0.06s; }
.trust li:nth-child(3) { animation-delay: 0.12s; }
.trust li:nth-child(4) { animation-delay: 0.18s; }
.trust i { font-size: 1.15rem; }
.trust strong { font-weight: 700; }
.trust span { font-size: 0.78rem; font-weight: 600; }
.trust-delivery, .trust-delivery i, .trust-delivery strong { color: #1c1917; }
.trust-delivery span { color: #44403c; }
.trust-cod, .trust-cod i, .trust-cod strong { color: #a16207; }
.trust-cod span { color: #92400e; }
.trust-exchange, .trust-exchange i, .trust-exchange strong { color: #3f6212; }
.trust-exchange span { color: #4d7c0f; }
.trust-size, .trust-size i, .trust-size strong { color: #1e3a5f; }
.trust-size span { color: #1d4ed8; }
.trust-delivery { background-image: url("/brand/trust-delivery.jpg?v=2"); background-position: right center; }
.trust-cod { background-image: url("/brand/trust-cod.jpg?v=2"); background-position: right center; }
.trust-exchange { background-image: url("/brand/trust-exchange.jpg?v=2"); background-position: right center; }
.trust-size { background-image: url("/brand/trust-size.jpg?v=2"); background-position: right center; }
.news { width: 100%; margin: 0 0 1.6rem; display: grid; grid-template-columns: 1fr auto; gap: 0.8rem 1.2rem; align-items: center; padding-bottom: 1.4rem; border-bottom: 1px solid #2a2a2a; }
.news h3 { margin: 0 0 0.25rem; letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.72rem; }
.news p { margin: 0; color: #d6d3d1; }
.news-row { display: flex; gap: 0.4rem; }
.news-row input { background: transparent; color: #fff; border: 0; border-bottom: 1px solid #57534e; padding: 0.65rem 0.2rem; min-width: 16rem; font: inherit; }
.news-row input::placeholder { color: #a8a29e; }
.news-note { grid-column: 1 / -1; }
@media (max-width: 640px) {
    .grid4 { grid-template-columns: 1fr 1fr; }
    .so-foot-grid, .checkout, .trust, .news { grid-template-columns: 1fr; }
    .news-row { flex-direction: column; }
    .news-row input { min-width: 0; width: 100%; }
    .hero-slide img { height: 52vh; min-height: 240px; }
}

.drawer-backdrop { position: fixed; inset: 0; background: rgba(17, 17, 17, 0.42); z-index: 70; }
.cart-drawer {
    position: fixed; top: 0; right: 0; z-index: 80; height: 100%; width: min(440px, 100%);
    background: #f6f3ee; display: flex; flex-direction: column;
    box-shadow: -16px 0 40px rgba(20, 16, 12, 0.2);
    animation: drawer-in 0.28s ease both;
}
.cart-drawer header, .cart-drawer footer { padding: 1rem 1.15rem; background: #fff; }
.cart-drawer header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #e6dfd6; }
.cart-drawer header strong { font-size: 1.15rem; }
.cart-drawer footer { border-top: 1px solid #e6dfd6; margin-top: auto; display: flex; flex-direction: column; gap: 0.45rem; }
.cart-drawer .body { padding: 0.85rem 1rem 1rem; overflow: auto; flex: 1; }
.cart-drawer footer .btn-black, .cart-drawer footer .btn-line { width: 100%; }
.bag-page .section-head h1 { margin: 0; font-size: 1.7rem; letter-spacing: 0; text-transform: none; }
.bag-page .section-head p { margin: 0.25rem 0 1rem; color: #6b7280; }
.bag-layout, .co-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.75fr); gap: 1.15rem; align-items: start; }
.bag-list { display: flex; flex-direction: column; gap: 0.75rem; }
.bag-line {
    display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 1rem; align-items: center;
    background: #fff; border-radius: 1.1rem; padding: 0.85rem; box-shadow: 0 12px 30px rgba(40, 30, 20, 0.06);
}
.bag-photo .cloth-photo { width: 104px; height: 104px; object-fit: cover; border-radius: 0.85rem; background: #ece7df; }
.bag-main { display: flex; flex-direction: column; align-items: flex-start; gap: 0.28rem; min-width: 0; }
.bag-name { font-weight: 700; font-size: 1.05rem; line-height: 1.2; }
.bag-size { font-weight: 700; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #9f1239; }
.bag-unit { font-weight: 600; font-size: 0.9rem; color: #78716c; }
.bag-side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.45rem; }
.bag-total { font-weight: 700; font-size: 1.15rem; color: #9f1239; }
.bag-remove {
    width: 2.15rem; height: 2.15rem; border: 0; border-radius: 0.65rem; background: #fff1f2; color: #9f1239;
    display: grid; place-items: center; cursor: pointer;
}
.bag-remove:hover { background: #9f1239; color: #fff; }
.qty-control { display: inline-flex; align-items: stretch; border-radius: 999px; overflow: hidden; background: #111; }
.qty-control button {
    width: 2.15rem; height: 2.15rem; border: 0; background: #111; color: #fff; cursor: pointer; font-weight: 700; font-size: 1.05rem;
}
.qty-control .qty-num { min-width: 2.1rem; display: grid; place-items: center; background: #fff; font-weight: 700; }
.bag-summary, .co-summary {
    position: sticky; top: 11rem; background: #fff; border-radius: 1.1rem; padding: 1.15rem 1.2rem;
    box-shadow: 0 12px 30px rgba(40, 30, 20, 0.06);
}
.bag-summary h2, .co-summary h2, .co-panel h2 { margin: 0 0 0.85rem; font-size: 1.2rem; letter-spacing: 0; text-transform: none; }
.bag-page .bag-row, .bag-summary .bag-row, .cart-drawer .bag-row, .co-summary .bag-row {
    display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline;
    margin: 0 0 0.4rem; padding: 0; border: 0; grid-template-columns: none;
}
.bag-page .bag-row span, .bag-summary .bag-row span, .cart-drawer .bag-row span, .co-summary .bag-row span { color: #78716c; font-size: 0.92rem; }
.bag-grand { margin-top: 0.45rem; padding-top: 0.7rem; border-top: 1px solid #ece7df; }
.bag-grand strong { color: #9f1239; font-size: 1.3rem; }
.bag-summary .btn-black { width: 100%; }
.cart-drawer .bag-list { gap: 0; }
.cart-drawer .bag-line {
    box-shadow: none; border-radius: 0; padding: 0.8rem 0.15rem; background: transparent;
    border-bottom: 1px solid #e6dfd6; grid-template-columns: 76px minmax(0, 1fr) auto;
}
.cart-drawer .bag-photo .cloth-photo { width: 76px; height: 76px; border-radius: 0.75rem; }
.cart-drawer .bag-name { font-size: 0.98rem; }
.cart-drawer .bag-total { font-size: 1rem; }
.empty-state { text-align: center; padding: 2.5rem 1rem; color: #78716c; }
.empty-state .btn-black { margin-top: 1rem; }
.co-hero {
    position: relative; overflow: hidden; margin: 0 0 1.15rem; padding: 1.15rem 1.25rem 1.2rem;
    background:
        linear-gradient(115deg, rgba(255,255,255,.98) 0%, rgba(255,241,242,.88) 42%, rgba(255,255,255,.94) 100%),
        #fff;
    border-radius: 1.15rem; box-shadow: 0 12px 30px rgba(40, 30, 20, 0.06);
}
.co-hero::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, #9f1239 0%, #111 100%);
}
.co-hero h1 { margin: 0.2rem 0 0.45rem; font-size: clamp(1.7rem, 3vw, 2.15rem); letter-spacing: 0; text-transform: none; line-height: 1.05; }
.co-hero p, .co-hero-copy { margin: 0; max-width: 40rem; color: #44403c; }
.co-steps { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.co-steps span { padding: 0.4rem 0.85rem; border-radius: 999px; background: #fff; color: #78716c; font-size: 0.82rem; font-weight: 700; }
.co-steps span.active { background: #111; color: #fff; }
.co-steps span.done { background: #fff1f2; color: #9f1239; }
.co-account { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.co-panel, .co-summary { background: #fff; border-radius: 1.1rem; padding: 1.15rem 1.2rem; box-shadow: 0 12px 30px rgba(40, 30, 20, 0.06); }
.co-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 0.65rem; align-items: center; margin-bottom: 0.65rem; }
.co-item .cloth-photo { width: 56px; height: 72px; object-fit: cover; border-radius: 0.45rem; }
.coupon-row { margin: 0.4rem 0 0.8rem; }
.coupon-row label { display: block; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #78716c; margin-bottom: 0.3rem; }
.coupon-apply { display: flex; gap: 0.4rem; }
.coupon-apply input { flex: 1; border: 1px solid #e7e2da; border-radius: 0.35rem; padding: 0.5rem 0.6rem; }
.co-pay-total {
    display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.45rem;
    padding: 0.85rem 1rem; border-radius: 0.85rem; background: #111; color: #fff;
}
.co-pay-total strong { color: #fff; font-size: 1.45rem; }
.co-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.8rem; }
@media (max-width: 900px) {
    .co-layout { grid-template-columns: 1fr; }
    .co-summary { position: static; }
    .co-hero h1 { font-size: 1.45rem; }
    .co-panel, .co-summary { min-width: 0; padding: 1rem 0.9rem; }
    .co-page .field input, .co-page .field textarea, .co-page .nlkp, .co-page .nlkp-input { width: 100%; min-width: 0; max-width: 100%; }
    .co-page .coupon-apply { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
    .co-page .coupon-apply input { width: 100%; min-width: 0; }
    .co-page .pay-choices { display: grid; grid-template-columns: 1fr; }
    .co-page .pay-choices button, .co-page .co-actions .btn-black, .co-page .co-actions .btn-line, .co-panel > .btn-black { width: 100%; }
    .co-page .co-actions { display: grid; grid-template-columns: 1fr; }
    .co-item span { min-width: 0; overflow-wrap: anywhere; }
    .co-account .hint { flex-basis: 100%; }
}
.co-page, .co-page :where(h1, h2, p, span, a, label, input, textarea, button, strong) { font-weight: 700; }
.co-page button, .co-page input, .co-page textarea, .co-page .form-control {
    font-family: Exo, "Fira Sans Condensed", sans-serif !important;
    font-weight: 700;
}
.co-page input::placeholder, .co-page textarea::placeholder { font-weight: 700; color: #a8a29e; }
.co-page .eyebrow { margin: 0; color: #9f1239; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; }
.co-hero h1 { font-weight: 700; color: #111; }
.co-hero-copy { font-weight: 700; color: #44403c; font-size: 1rem; line-height: 1.45; }
.co-totals {
    margin-top: 0.35rem; padding: 0.85rem 0.9rem 0.35rem;
    background: #faf8f5; border: 1.5px solid #ece7df; border-radius: 0.95rem;
}
.co-page .co-totals .bag-row {
    margin: 0; padding: 0.55rem 0; border-bottom: 1px dashed #e7e2da;
}
.co-page .co-totals .bag-row:last-child { border-bottom: 0; }
.co-page .co-totals .bag-row span { color: #57534e; font-size: 0.95rem; font-weight: 700; }
.co-page .co-totals .bag-row strong { color: #111; font-size: 0.98rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.co-page .co-totals .co-free { color: #9f1239; }
.co-page .co-totals .bag-grand {
    margin-top: 0.2rem; padding: 0.75rem 0.8rem; border: 0; border-radius: 0.75rem;
    background: #111; align-items: center;
}
.co-page .co-totals .bag-grand span { color: #fff; font-size: 0.92rem; letter-spacing: 0.08em; text-transform: uppercase; }
.co-page .co-totals .bag-grand strong { color: #fff; font-size: 1.35rem; }
.co-ship-note {
    margin: 0.85rem 0 0; padding: 0.7rem 0.85rem; border-radius: 0.8rem;
    background: #fff1f2; color: #9f1239; font-weight: 700; font-size: 0.9rem; line-height: 1.4;
}
.co-steps span { font-weight: 700; letter-spacing: 0.04em; }
.co-panel, .co-summary { position: relative; }
.co-summary { position: sticky; }
.co-panel::before, .co-summary::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; pointer-events: none;
    border-radius: 1.1rem 1.1rem 0 0;
    background: linear-gradient(90deg, #9f1239 0%, #9f1239 28%, #111 100%);
}
.co-panel, .co-summary { padding-top: 1.35rem; }
.co-page .field { gap: 0.35rem; margin-bottom: 0.85rem; }
.co-page .field span, .co-page .coupon-row label, .co-page .co-panel > span {
    font-size: 0.84rem; letter-spacing: 0.08em; text-transform: uppercase; color: #292524; font-weight: 700;
}
.co-page .field input, .co-page .field textarea, .co-page .nlkp-input, .co-page .coupon-apply input, .co-page .form-control {
    border: 1.5px solid #e7e2da; border-radius: 0.75rem; background: #faf8f5; color: #111;
    padding: 0.72rem 0.85rem; min-height: 2.75rem; font-size: 0.98rem; box-shadow: none;
}
.co-page .field textarea { min-height: 5.5rem; resize: vertical; }
.co-page .field input:focus, .co-page .field textarea:focus, .co-page .nlkp-input:focus, .co-page .coupon-apply input:focus, .co-page .form-control:focus {
    outline: none; border-color: #9f1239; background: #fff; box-shadow: 0 0 0 3px rgba(159, 18, 57, 0.12);
}
.co-page .pay-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.55rem; }
.co-page .pay-choices button {
    min-height: 3.15rem; border-radius: 0.9rem; border: 1.5px solid #e7e2da; background: #faf8f5;
    font-weight: 700; letter-spacing: 0.02em; padding: 0.7rem 0.55rem;
}
.co-page .pay-choices button.on { background: #111; color: #fff; border-color: #111; box-shadow: 0 8px 18px rgba(17, 17, 17, 0.16); }
.co-page .hint { font-weight: 700; color: #292524; font-size: 0.95rem; }
.co-page .note { font-weight: 700; }
.co-panel > .btn-black, .co-page .co-actions .btn-black {
    width: 100%; border-radius: 999px; background: #9f1239; border-color: #9f1239; font-weight: 700;
}
.co-panel > .btn-black:hover, .co-page .co-actions .btn-black:hover { background: #881337; }
.co-page .co-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: stretch; }
.co-page .co-actions .btn-line, .co-page .coupon-apply .btn-line { border-radius: 999px; font-weight: 700; }
.co-page .co-item span, .co-page .co-item strong, .co-page .bag-row span, .co-page .bag-row strong { font-weight: 700; }
@media (max-width: 900px) {
    .co-page .pay-choices, .co-page .co-actions { grid-template-columns: 1fr; }
    .co-summary { position: static; }
}
@keyframes rainbow-run {
    from { background-position: 0% 50%; }
    to { background-position: 200% 50%; }
}
@keyframes drawer-in {
    from { transform: translateX(28px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes card-in {
    from { opacity: 0; translate: 0 22px; }
    to { opacity: 1; translate: 0 0; }
}
@keyframes hero-ken {
    from { transform: scale(1.02); }
    to { transform: scale(1); }
}
@keyframes rise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}
@keyframes pop {
    0% { transform: scale(0.6); }
    55% { transform: scale(1.28); }
    100% { transform: scale(1); }
}
@keyframes wa-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}
.story-hero {
    position: relative; overflow: hidden; border-radius: 1.25rem;
    padding: clamp(1.4rem, 3vw, 2.4rem); margin-bottom: 1.15rem;
    background:
        radial-gradient(70% 140% at 100% -10%, rgba(159, 18, 57, 0.16), transparent 52%),
        radial-gradient(50% 120% at 0% 120%, rgba(56, 189, 248, 0.1), transparent 46%),
        linear-gradient(180deg, #fff 0%, #faf6f1 100%);
    box-shadow: 0 16px 40px rgba(40, 30, 20, 0.06);
}
.story-hero::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, #fb7185, #fbbf24, #4ade80, #38bdf8, #c084fc);
}
.story-kicker {
    margin: 0 0 0.35rem; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
    font-weight: 700; color: #9f1239;
}
.story-hero h1 {
    margin: 0; font-size: clamp(2rem, 4.2vw, 3.15rem); font-weight: 700;
    letter-spacing: 0; text-transform: none; line-height: 1.05;
}
.story-lead { margin: 0.75rem 0 0; max-width: 42rem; font-size: 1.08rem; font-weight: 600; color: #44403c; }
.story-prose { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 0.85rem; margin: 0 0 0.85rem; }
.story-prose article {
    position: relative; overflow: hidden; padding: 1.2rem 1.25rem 1.3rem 1.35rem;
    border-radius: 1.1rem; background: #fff; box-shadow: 0 12px 30px rgba(40, 30, 20, 0.06);
}
.story-prose article::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, #9f1239, #fb7185);
}
.story-prose article:last-child { background: #111; color: #fff; }
.story-prose article:last-child::before { background: linear-gradient(180deg, #fbbf24, #fb7185); }
.story-prose span {
    display: block; margin-bottom: 0.4rem; font-size: 0.72rem; letter-spacing: 0.18em;
    text-transform: uppercase; font-weight: 700; color: #9f1239;
}
.story-prose article:last-child span { color: #fbbf24; }
.story-prose p { margin: 0; font-size: 1.12rem; line-height: 1.45; font-weight: 600; color: #1c1917; }
.story-prose article:last-child p { color: #f5f5f4; }
.brand-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.85rem; }
.brand-card {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.28rem;
    min-height: 12.5rem; padding: 1.15rem 1.15rem 1.2rem; border-radius: 1.1rem; color: inherit;
    background:
        linear-gradient(100deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.94) 36%, rgba(255,255,255,.62) 58%, rgba(255,255,255,.16) 100%),
        var(--brand-art) right center / cover no-repeat, #fff;
    box-shadow: 0 12px 30px rgba(40, 30, 20, 0.06); transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.brand-card strong, .brand-card p { position: relative; z-index: 1; max-width: 12rem; }
.brand-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(40, 30, 20, 0.1); }
.brand-card span { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: #9f1239; }
.brand-card strong { font-size: 1.25rem; font-weight: 700; letter-spacing: 0.04em; color: #1c1917; }
.brand-card p { margin: 0; font-weight: 600; color: #44403c; }
.brand-card em { font-style: normal; font-size: 0.82rem; font-weight: 700; color: #9f1239; }
.story-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem; }
.story-cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.story-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem;
    min-height: 100%; padding: 1.15rem 1.15rem 1.2rem; border-radius: 1.1rem; background: #fff; color: inherit;
    box-shadow: 0 12px 30px rgba(40, 30, 20, 0.06); animation: rise 0.45s ease both;
}
a.story-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
a.story-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(40, 30, 20, 0.1); }
.story-card i {
    width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 0.75rem;
    font-size: 1.15rem; margin-bottom: 0.25rem;
}
.story-card h2 { margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
.story-card p { margin: 0; font-weight: 600; color: #44403c; }
.story-card span { font-size: 0.82rem; font-weight: 700; }
.story-card-fabric {
    background:
        linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.96) 46%, rgba(255,255,255,.55) 64%, rgba(255,255,255,0) 82%),
        url("/brand/about-fabric.jpg?v=1") right center / cover no-repeat;
}
.story-card-fabric h2, .story-card-fabric p { max-width: 14.5rem; }
.tone-rose i { background: #fff1f2; color: #9f1239; }
.tone-rose h2, .tone-rose span { color: #9f1239; }
.tone-gold i { background: #fef3c7; color: #a16207; }
.tone-gold h2, .tone-gold span { color: #a16207; }
.tone-sage i { background: #ecfccb; color: #3f6212; }
.tone-sage h2, .tone-sage span { color: #3f6212; }
.tone-navy i { background: #dbeafe; color: #1e3a5f; }
.tone-navy h2, .tone-navy span { color: #1e3a5f; }
.tone-ink i { background: #f5f5f4; color: #1c1917; }
.tone-ink h2, .tone-ink span { color: #1c1917; }
.story-people {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem; margin-top: 0.85rem;
}
.story-people div {
    padding: 1.1rem 1.15rem; border-radius: 1.1rem; background: #111; color: #fff;
}
.story-people .is-women { background: #9f1239; }
.story-people .is-women span { color: #fecdd3; }
.story-people .is-men { background: #1e3a5f; }
.story-people .is-men span { color: #bfdbfe; }
.story-people .is-families { background: #a16207; }
.story-people .is-families span { color: #fef3c7; }
.story-people strong { display: block; font-size: 1.15rem; letter-spacing: 0.04em; }
.story-people span { color: #d6d3d1; font-weight: 600; font-size: 0.9rem; }
.reach {
    display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 1.1rem; align-items: stretch;
    margin-top: 0.95rem; padding: 1.25rem; border-radius: 1.25rem; background: #fff;
    box-shadow: 0 16px 40px rgba(40, 30, 20, 0.06);
}
.reach-copy h2 { margin: 0.15rem 0 0.55rem; font-size: 1.7rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
.reach-copy p { margin: 0 0 0.8rem; font-weight: 600; color: #44403c; }
.reach-copy ul { list-style: none; margin: 0; padding: 0; }
.reach-copy li { display: flex; align-items: center; gap: 0.45rem; margin: 0.35rem 0; font-weight: 700; }
.reach-copy li i { color: #9f1239; }
.reach-form { display: flex; flex-direction: column; gap: 0.65rem; }
.reach-form label { display: flex; flex-direction: column; gap: 0.28rem; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: #9f1239; }
.reach-form input, .reach-form textarea {
    border: 1px solid #e7e2da; border-radius: 0.7rem; padding: 0.7rem 0.8rem; font: inherit; font-size: 0.95rem;
    letter-spacing: 0; text-transform: none; font-weight: 600; color: #161616; background: #faf8f5;
}
.reach-form input:focus, .reach-form textarea:focus { outline: none; border-color: #9f1239; box-shadow: 0 0 0 3px rgba(159, 18, 57, 0.12); }
.reach-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.2rem; }
.reach-actions .btn-black { background: #9f1239; border-color: #9f1239; gap: 0.4rem; }
.reach-actions .btn-black:hover { background: #881337; }
.reach-actions .btn-line { gap: 0.4rem; }
.faq-group { margin-bottom: 1.15rem; }
.faq-group h2 {
    margin: 0 0 0.5rem; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
    font-weight: 700; color: #9f1239;
}
.faq-group.is-payment h2 { color: #1e3a5f; }
.faq-group.is-orders h2 { color: #a16207; }
.faq-list { display: flex; flex-direction: column; gap: 0.55rem; }
.faq { background: #fff; border-radius: 1rem; box-shadow: 0 10px 26px rgba(40, 30, 20, 0.05); overflow: hidden; }
.faq button {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    border: 0; background: transparent; padding: 1rem 1.1rem; cursor: pointer; text-align: left;
    font: inherit; font-weight: 700; font-size: 1.02rem; color: #1c1917;
}
.faq button i {
    width: 1.8rem; height: 1.8rem; flex: 0 0 auto; display: grid; place-items: center;
    border-radius: 50%; background: #fff1f2; color: #9f1239;
}
.faq.open button { color: #9f1239; }
.faq p { margin: 0; padding: 0 1.15rem 1.05rem; font-weight: 600; color: #44403c; animation: rise 0.25s ease; }
.story-foot {
    margin: 1.35rem 0 0;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.25rem;
    padding: 1.05rem 1.2rem 1.1rem;
    border-radius: 1.2rem;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(159, 18, 57, 0.14), transparent 55%),
        linear-gradient(135deg, #1c1917 0%, #292524 55%, #3f1d2a 100%);
    color: #fafaf9;
    box-shadow: 0 18px 40px rgba(28, 25, 23, 0.18);
}
.story-foot-copy { display: flex; flex-direction: column; gap: 0.18rem; min-width: min(100%, 12rem); }
.story-foot-kicker {
    font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
    font-weight: 700; color: #fda4af;
}
.story-foot-copy strong {
    font-size: 1.18rem; font-weight: 700; letter-spacing: 0.01em; color: #fff;
}
.story-foot-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.story-foot-pill {
    display: inline-flex; align-items: center; gap: 0.65rem;
    min-height: 3.1rem; padding: 0.55rem 0.95rem 0.55rem 0.65rem;
    border-radius: 999px; text-decoration: none; color: #1c1917;
    background: #fff; border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.story-foot-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
    background: #fff7f8;
}
.story-foot-pill i {
    width: 2.15rem; height: 2.15rem; flex: 0 0 auto;
    display: grid; place-items: center; border-radius: 50%;
    font-size: 1.05rem; color: #fff;
}
.story-foot-pill.is-wa i { background: #16a34a; }
.story-foot-pill.is-mail i { background: #9f1239; }
.story-foot-pill > span {
    display: flex; flex-direction: column; gap: 0.05rem;
    font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
    font-weight: 700; color: #78716c; line-height: 1.1;
}
.story-foot-pill > span > span {
    font-size: 0.98rem; letter-spacing: 0.01em; text-transform: none;
    font-weight: 700; color: #1c1917;
}
@media (max-width: 640px) {
    .story-foot { padding: 1rem; }
    .story-foot-actions { width: 100%; }
    .story-foot-pill { flex: 1 1 12rem; }
}
@media (max-width: 900px) {
    .story-cards, .story-cards-4, .story-people, .story-prose, .reach { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .story-cards, .story-cards-4, .story-people, .story-prose, .reach { grid-template-columns: 1fr; }
}

.auth-scene {
    min-height: 100dvh; display: grid; place-items: center;
    padding: 1.4rem; background: #d7dbe3;
    font-family: Exo, "Fira Sans Condensed", sans-serif !important;
    color: #1c1917;
}
.auth-scene button, .auth-scene input, .auth-scene a { font-family: inherit !important; }
.auth-login, .auth-login :where(h1, p, span, a, label, input, button, strong) { font-weight: 700; }
.auth-login input::placeholder { font-weight: 700; }
.auth-card {
    width: min(1080px, 100%); min-height: 640px;
    display: grid; grid-template-columns: 0.92fr 1.08fr;
    background: linear-gradient(180deg, #fbf7ef 0%, #f3ecdf 100%);
    border-radius: 2rem; overflow: hidden;
    box-shadow: 0 30px 70px rgba(30, 36, 50, 0.18);
}
.auth-form { padding: 1.6rem 2.4rem 1.4rem; display: flex; flex-direction: column; }
.auth-logo {
    align-self: flex-start; border: 1px solid #e6dfd2; background: rgba(255,255,255,.55);
    border-radius: 999px; padding: 0.45rem 1rem; letter-spacing: 0.16em; font-weight: 600; font-size: 0.92rem;
    color: #1c1917;
}
.auth-copy { text-align: center; margin: 1.6rem 0 1.1rem; }
.auth-copy h1 { margin: 0; font-size: 1.85rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.auth-copy p { margin: 0.35rem 0 0; color: #78716c; font-size: 0.95rem; }
.auth-field { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.85rem; color: #57534e; font-size: 0.86rem; }
.auth-field input {
    width: 100%; border: 0; background: #fff; border-radius: 999px;
    padding: 0.85rem 1.15rem; box-shadow: 0 10px 24px rgba(90, 70, 30, 0.06); color: #1c1917;
}
.auth-field input:focus { outline: 2px solid #f6c445; }
.auth-pass { position: relative; display: block; }
.auth-pass input { padding-right: 2.8rem; }
.auth-pass button {
    position: absolute; right: 0.85rem; top: 50%; transform: translateY(-50%);
    border: 0; background: transparent; color: #78716c; cursor: pointer; padding: 0;
}
.auth-submit {
    width: 100%; margin-top: 0.4rem; border: 0; border-radius: 999px; cursor: pointer;
    background: #f6c445; color: #1c1917; font-weight: 700; font-size: 1rem;
    padding: 0.9rem 1rem; box-shadow: 0 12px 24px rgba(246, 196, 69, 0.35);
}
.auth-submit:hover { background: #f3b932; }
.auth-forgot { align-self: flex-end; margin: -0.2rem 0 0.75rem; font-size: 0.82rem; color: #1c1917; text-decoration: underline; text-underline-offset: 0.15rem; }
.auth-foot {
    margin-top: auto; padding-top: 1.4rem; display: flex; justify-content: space-between; gap: 1rem;
    font-size: 0.82rem; color: #78716c;
}
.auth-foot a { color: #1c1917; text-decoration: underline; text-underline-offset: 0.15rem; }
.auth-scene .note { margin: 0 0 0.8rem; }
.auth-visual { position: relative; min-height: 100%; background: #1c1917; }
.auth-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; display: block; }
.auth-x {
    position: absolute; top: 0.9rem; right: 0.9rem; width: 2rem; height: 2rem;
    display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.92);
    color: #1c1917; font-size: 1.25rem; line-height: 1;
}
.auth-chip {
    position: absolute; top: 1.3rem; left: 1.2rem; display: flex; align-items: center; gap: 0.45rem;
    background: #f6c445; color: #1c1917; border-radius: 0.9rem; padding: 0.55rem 0.8rem;
    font-weight: 700; font-size: 0.82rem; box-shadow: 0 10px 24px rgba(0,0,0,.15);
}
.auth-chip i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: #1c1917; }
.auth-note {
    position: absolute; left: 1.2rem; bottom: 1.4rem; width: min(15rem, 70%);
    background: #fff; border-radius: 1rem; padding: 0.75rem 0.85rem;
    box-shadow: 0 16px 32px rgba(0,0,0,.16);
}
.auth-note strong { display: block; font-size: 0.92rem; }
.auth-note span { color: #78716c; font-size: 0.8rem; }
.auth-login .auth-logo, .auth-login .auth-copy h1 { font-weight: 700; }
@media (max-width: 860px) {
    .auth-card { grid-template-columns: 1fr; min-height: 0; }
    .auth-visual { min-height: 240px; }
    .auth-form { padding: 1.2rem 1.1rem 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
    .so *, .so *::before, .so *::after {
        animation: none !important;
        transition: none !important;
    }
}