/* COSMUSE · Rose Atelier
   Vector ornaments, responsive composition, progressive motion. */
:root {
  --ink:#342d31; --muted:#796c70; --paper:#fcf9f5; --cream:#f4ede6;
  --line:#e8dbd6; --pink:#ac526d; --pink-dark:#893c54; --pink-light:#f7e8ec;
  --green:#5a7063; --shadow:0 18px 56px #67414d0c;
  --rose-shadow:0 15px 42px #9d617b14;
  --ease:cubic-bezier(.22,1,.36,1);
}
body { background:var(--paper); -webkit-font-smoothing:antialiased; }
::selection { background:#ebc6d2; color:#512c3a; }
.container { width:min(1380px,calc(100% - 96px)); }
h1,h2,h3 { text-wrap:balance; }
button,a,input,select,textarea { transition:background-color .22s,color .22s,border-color .22s,box-shadow .22s,transform .35s var(--ease); }
a:focus-visible,button:focus-visible { outline:3px solid #a04b64; outline-offset:5px; }
input:focus,select:focus,textarea:focus { border-color:#b76c82; box-shadow:0 0 0 4px #b76c8212; outline-color:#b76c82; }
input,select,textarea { border-color:#e2d7d2; border-radius:12px; }
.btn { min-height:46px; border-radius:10px; background:#3f5148; box-shadow:0 5px 12px #35463c12; position:relative; }
.btn.primary { background:linear-gradient(120deg,#a9516d,#ba6f82); box-shadow:0 7px 19px #a9516d22; border:1px solid #a9516d; }
.btn.light { background:#fffdf9; border-color:#dfd1cc; }
.btn .icon { transition:transform .35s var(--ease); }
.btn:active { transform:translateY(1px) scale(.98); }
.text-btn { text-underline-offset:5px; border-bottom-color:#c8aaa7; }
.announcement { background:#354a40; color:#f3e9dc; font-size:10px; letter-spacing:1px; padding:8px 16px; }
.announcement span { color:#e4b3bd; }
.site-header { height:92px; background:#fcf9f5ec; border-bottom-color:#e6dcd5; transition:box-shadow .3s; }
.site-header.is-scrolled { box-shadow:0 6px 32px #57404a0c; }
.nav-inner { gap:60px; }
.brand { font-size:30px; letter-spacing:3px; }
.brand-sub { font-family:"DM Sans",sans-serif; letter-spacing:3px; color:#887776; }
.main-nav { gap:34px; }
.main-nav > a { color:#736a69; font-size:13px; }
.main-nav > a.active { color:#95455f; }
.nav-indicator { background:#ac526d; }
.main-nav > a:before { content:""; position:absolute; bottom:-6px; left:0; right:0; height:1px; background:#b96e82; transform:scaleX(0); transition:transform .3s; }
.main-nav > a:hover:before { transform:scaleX(1); }
.nav-tools .icon-btn { border:1px solid #e7dad5; }
.mode-bar { background:#f2eee6; color:#746b57; border-bottom:1px solid #e7e0d5; font-size:10px; }
.hero { padding:76px 0 20px; isolation:isolate; background:radial-gradient(ellipse at 88% 24%,#f0d5d9aa,transparent 52%),radial-gradient(ellipse at 4% 77%,#e6e9dc88,transparent 48%),#fcf7f1; }
.hero > .container { position:relative; z-index:1; }
.hero-atmosphere { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.orbit { position:absolute; border:1px solid #bf8a7b22; width:900px; height:900px; border-radius:50%; }
.orbit-one { right:-270px; top:-410px; }
.orbit-two { right:-300px; top:-440px; }
.hero-atmosphere:after { content:""; position:absolute; inset:0; opacity:.3; background-image:radial-gradient(#b58d72 0.6px,transparent .8px); background-size:30px 30px; mask-image:linear-gradient(90deg,transparent 30%,#000); }
.spark { position:absolute; color:#b27873; font-style:normal; animation:atelier-drift 7s ease-in-out infinite; }
.spark-one { left:45%; top:7%; font-size:16px; }
.spark-two { left:3%; top:53%; font-size:35px; animation-delay:-2s; }
.spark-three { right:5%; bottom:20%; font-size:25px; animation-delay:-4s; }
.hero-grid { grid-template-columns:1fr 1.04fr; gap:64px; padding-bottom:24px; }
.hero-copy { padding:6px 0 14px; min-width:0; }
.eyebrow { color:#9a6a73; font-size:10px; letter-spacing:2.4px; }
.hero .eyebrow:before { display:none; }
.atelier-dot { width:6px; height:6px; background:#b46f81; transform:rotate(45deg); margin-right:4px; box-shadow:0 0 0 5px #b46f8110; }
.hero-prelude { margin-top:28px; font-size:17px; color:#958177; font-style:italic; }
.hero h1 { font-size:clamp(38px,3.55vw,57px); line-height:1.48; letter-spacing:-1.9px; font-weight:500; margin:12px 0 0; }
.muse-underline { position:relative; white-space:nowrap; }
.muse-underline:after { content:""; position:absolute; left:0; right:0; bottom:0; height:8px; border-top:1px solid #c98d98; border-radius:50%; transform:rotate(-3deg); }
.hero-script { font-family:"Playfair Display",serif; font-size:clamp(30px,3.4vw,52px); font-style:italic; color:#a05a70; letter-spacing:-1.7px; line-height:1.3; margin:6px 0 24px; }
.hero-script > span { color:#b9a078; }
.hero-description { font-size:13px; line-height:2; color:#7a6c6c; margin-bottom:27px; }
.hero-buttons { gap:24px; flex-wrap:wrap; }
.hero-buttons > .btn { min-height:52px; padding:13px 25px; }
.hero-buttons > .text-btn { font-size:12px; }
.hero-proof { border-top:1px solid #e3d4ca; padding-top:20px; margin-top:28px; width:fit-content; font-size:10px; }
.avatar-stack span { width:32px; height:32px; background:#f2e0df; color:#a46c7b; }
.avatar-stack span:nth-child(2) { background:#e5e8db; color:#6b7e6e; }
.avatar-stack span:nth-child(3) { background:#f1e5d0; color:#ad8e60; }
.hero-image-wrap { max-width:640px; width:calc(100% - 20px); margin:0 10px 18px; }
.hero-image { height:auto; aspect-ratio:1.17; border-radius:46% 46% 12px 12px; box-shadow:0 24px 60px #644b4720; border:7px solid #fffcf5; }
.hero-image img { object-position:50% 60%; transform:scale(1.025); }
.hero-image:after { background:linear-gradient(0deg,#55323420,transparent 45%); }
.image-orbit { position:absolute; inset:-13px; border:1px solid #bd8e815e; border-radius:46% 46% 19px 19px; pointer-events:none; }
.image-orbit:after { content:""; position:absolute; inset:6px; border:1px dashed #bd8e812e; border-radius:inherit; }
.hero-star { left:-35px; top:36%; color:#aa6178; font-size:66px; text-shadow:0 3px 20px #fff; }
.atelier-seal { position:absolute; right:2px; top:0; z-index:3; width:98px; height:98px; border-radius:50%; border:1px solid #bf9285; background:#fbf3e8; outline:5px solid #fbf3e8; box-shadow:0 8px 22px #664c3612; display:flex; flex-direction:column; justify-content:center; align-items:center; transform:rotate(12deg); color:#92685c; }
.atelier-seal span { font-size:8px; letter-spacing:1.5px; }
.atelier-seal b { font-size:30px; line-height:1.5; font-weight:400; }
.hero-note { bottom:22px; right:-20px; padding:15px 20px; border-radius:12px; background:#fffcf4f0; backdrop-filter:blur(16px); box-shadow:0 12px 36px #65434e1a; transform:rotate(-3deg); }
.hero-note .note-icon { width:43px; height:43px; background:#f2dfe5; border:1px solid #eacfd7; }
.hero-caption { top:110px; right:-35px; font-size:12px; }
.hero-bottom { bottom:-36px; left:4px; font-size:22px; color:#a07676; transform:rotate(-4deg); }
.image-index { position:absolute; bottom:-32px; right:0; font-size:8px; letter-spacing:2px; color:#8a7370; }
.search-strip { position:relative; margin-top:48px; border-radius:16px; padding:15px; border:1px solid #dfcec6; box-shadow:0 10px 32px #775a4510,0 2px 0 #fff inset; background:#fffdf9f5; }
.search-field { padding:6px 24px; }
.search-field > .icon { color:#ad7583; width:22px; height:22px; }
.search-field label { font-size:11px; color:#8b777b; }
.search-field input,.search-field select { font-size:13px; color:#443a40; margin-top:5px; box-shadow:none; }
.search-strip > .btn { background:#3b5145; border:1px solid #3b5145; min-height:51px; }
.trust-row { padding:25px 0 13px; color:#776f62; font-size:11px; gap:40px; flex-wrap:wrap; }
.trust-row .icon { color:#87947b; width:17px; height:17px; }
.atelier-ribbon { display:flex; gap:48px; align-items:center; justify-content:center; padding:16px 24px; border-block:1px solid #e5d8d0; background:#f5eae5; color:#9c7472; overflow:hidden; }
.atelier-ribbon span { font-size:10px; letter-spacing:2.5px; white-space:nowrap; }
.atelier-ribbon i { font-style:normal; font-size:16px; color:#bc8990; }
.catalog-section { padding:70px 0 56px; }
.section-heading { margin-bottom:30px; }
.section-heading .serif { font-style:italic; font-size:19px; color:#b07884; }
.section-heading h2 { font-size:29px; font-weight:500; margin-top:9px; letter-spacing:-.7px; }
.section-heading p { color:#84767a; font-size:13px; }
.count-label { color:#9e6579; white-space:nowrap; }
.catalog-toolbar { border-top:1px solid #e7dad3; padding-top:24px; }
.categories { gap:9px; }
.category { background:#fffdfa; border:1px solid #e5d8d1; padding:10px 20px; min-height:44px; color:#7b6a6d; }
.category.active { background:#a35b71; border-color:#a35b71; box-shadow:0 4px 14px #a35b711c; }
.sort { border-bottom:1px solid #d9c7bf; border-radius:0; font-size:12px; width:180px; }
.filter-date { background:linear-gradient(110deg,#f7f0e9,#f9f4f0); border:1px solid #e8dcd3; padding:17px 20px; border-radius:14px; margin-bottom:28px; gap:16px; }
.filter-date label { color:#856f72; font-size:11px; }
.filter-date input { background:#fffcf9; min-height:41px; font-size:12px; }
.product-grid { gap:30px 24px; }
.product-card { background:#fffdfa; border:1px solid #e8dcd6; border-radius:17px; padding:7px; box-shadow:0 5px 16px #69485105; transition:border-color .3s,box-shadow .35s,transform .4s var(--ease); animation:none; }
.product-media { border-radius:11px; aspect-ratio:4/4.6; }
.product-media img { transition:transform .8s var(--ease); }
.product-top { inset:11px 10px auto; }
.product-top .badge { background:#fffdf4eb; border:1px solid #ffffffc9; color:#73635e; border-radius:6px; padding:5px 8px; }
.favorite { width:36px; height:36px; box-shadow:0 3px 10px #5140460b; }
.favorite.active { background:#a9516d; color:#fff; }
.favorite.active .icon { fill:#fff; stroke:#fff; }
.product-content { padding:17px 12px 13px; }
.product-character { color:#9f7b77; font-size:9px; letter-spacing:1.6px; }
.product-title { margin:6px 0; font-size:18px; }
.product-subtitle { font-size:11px; color:#8d7d7d; }
.price-line { padding-top:13px; margin-top:14px; border-top:1px solid #eee3dd; }
.price-line strong { color:#9c516b; font-size:20px; font-weight:600; }
.price-line small { color:#8a7a7c; }
.sizes { background:#f2eee6; color:#7e7e6c; border-radius:5px; }
.product-action { background:#fffcf4ed; backdrop-filter:blur(12px); color:#71495a; border:1px solid #fff9; font-size:11px; border-radius:8px; }
.sample-tag { color:#61524f; background:#fffdf6de; border-radius:4px; font-size:8px; }
.gallery-note { color:#877579; margin-top:23px; }
.muse-invitation { display:flex; align-items:center; gap:35px; padding:30px 40px; margin-bottom:65px; border:1px solid #e6cec9; border-radius:20px; background:radial-gradient(ellipse at 0 100%,#e6c7ce80,transparent 50%),#f4e8e4; position:relative; overflow:hidden; }
.invitation-art { flex:0 0 180px; color:#b77f8b; position:relative; }
.invitation-art svg { width:100%; transform:rotate(-12deg); }
.invitation-art > span { position:absolute; top:-6px; right:0; font-size:35px; }
.muse-invitation h2 { font-size:26px; margin:10px 0 8px; color:#6b4655; line-height:1.5; }
.muse-invitation h2 br { display:none; }
.muse-invitation p { color:#8f7177; font-size:12px; }
.muse-invitation .btn { margin-left:auto; flex-shrink:0; }
.guide-band { padding:62px 0 65px; background:radial-gradient(ellipse at 50% 20%,#fcfaf4,transparent 70%),#eeeee5; border-block:1px solid #e0e1d6; }
.steps { gap:22px; margin-top:34px; }
.step { padding:25px 20px 22px; border:1px solid #dddfd2; background:#fcfaf477; border-radius:15px; transition:transform .35s,background .35s; }
.step-icon { width:53px; height:53px; background:#e8eadd; color:#738370; border:1px solid #d7ddcb; }
.step .num { top:17px; left:calc(50% + 15px); background:#fffdf8; border-color:#e2e4d7; color:#8f9d83; }
.step p { color:#7d8172; }
.footer { background:#fcf7f0; padding:43px 0 24px; border-top:0; }
.footer-signature { display:flex; justify-content:space-between; align-items:center; padding-bottom:33px; margin-bottom:33px; border-bottom:1px solid #e8dcd1; font-family:"Playfair Display",serif; font-style:italic; font-size:clamp(20px,2.5vw,33px); color:#b28a83; }
.footer-signature span { font-style:normal; font-size:36px; color:#bd8d8e; }
.footer .brand { font-size:28px; }
.footer p,.footer-links,.footer-bottom { color:#8c7775; }
.footer-links { flex-wrap:wrap; row-gap:14px; }
.footer-links a:hover { color:#a34d67; }
.page { padding-top:40px; }
.page-title { font-size:35px; color:#523e47; }
.panel,.order-card { border-color:#e8dbd5; border-radius:18px; box-shadow:0 5px 26px #69485106; background:#fffdfb; }
.panel.soft { background:#f6eee8; }
.breadcrumbs { flex-wrap:wrap; color:#977c80; font-size:12px; }
.product-detail { gap:62px; }
.detail-main-image { border:7px solid #fffdf8; box-shadow:0 12px 40px #79515a0e; border-radius:24px; }
.detail-heading { color:#59414d; }
.detail-price { color:#a35470; padding:17px 0; border-bottom:1px solid #eadbd5; margin-bottom:18px; }
.detail-facts { background:#f6eee8; border:1px solid #e8d9d2; border-radius:14px; padding:18px; gap:18px; }
.variants { gap:10px; }
.variant { border-radius:9px; min-width:46px; min-height:44px; }
.variant.active { background:#f3dfe6; color:#903e5a; border-color:#b8778d; box-shadow:0 0 0 2px #b8778d12; }
.availability-message { border-radius:12px; padding:16px; }
.detail-accordion details,.faq-list details { border-color:#e5d9d2; }
summary { cursor:pointer; color:#68525b; }
summary:hover { color:#a34f6a; }
.booking-summary { background:linear-gradient(145deg,#fffdfa,#faf0eb); border-top:3px solid #be7e91; }
.summary-total strong { color:#a1516d; }
.radio-card:has(input:checked) { border-color:#b36a80; background:#fbf1f4; box-shadow:0 0 0 2px #b36a8009; }
.auth-wrap { width:min(1000px,calc(100% - 64px)); display:grid; grid-template-columns:1fr 1fr; align-items:stretch; margin:64px auto 80px; border:1px solid #e6d6d0; border-radius:24px; overflow:hidden; box-shadow:0 20px 80px #72455910; background:#fffdf9; }
.auth-decoration { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; text-align:left; background:radial-gradient(ellipse at 10% 20%,#f5dfe3,transparent 75%),#eee7dc; padding:52px 42px; color:#935c6b; position:relative; overflow:hidden; margin:0; }
.auth-decoration:after { content:""; position:absolute; width:410px; height:550px; border:1px solid #b37e7a44; border-radius:50% 50% 0 0; right:-170px; bottom:-220px; transform:rotate(-20deg); pointer-events:none; }
.auth-decoration strong { font-size:44px; font-weight:500; line-height:1.25; font-style:italic; margin:23px 0; position:relative; z-index:1; }
.auth-decoration .eyebrow { font-family:"DM Sans",sans-serif; }
.auth-decoration p { font-family:"Noto Sans Thai",sans-serif; font-size:13px; color:#93767b; line-height:1.9; }
.auth-star { font-size:66px; line-height:1; margin-bottom:32px; animation:atelier-drift 6s ease-in-out infinite; }
.auth-art-caption { font-size:9px; letter-spacing:3px; margin-top:45px; font-family:"DM Sans",sans-serif; }
.auth-card { border:0; border-radius:0; padding:48px 36px; align-self:center; background:transparent; }
.auth-card h1 { font-size:26px; }
.auth-wrap:has(.admin-note) { display:block; max-width:620px; }
.auth-wrap:has(.admin-note) .auth-decoration { padding:25px 36px; font-size:34px; }
.empty { border:1px dashed #d9c5bd; border-radius:20px; background:#fcf5ef; margin:26px auto; padding:50px 25px; }
.empty > .icon { color:#ae7188; }
.tabs { gap:8px; }
.tab { padding:9px 15px; border-radius:8px; min-height:40px; }
.tab.active { background:#f0dce3; color:#913d58; }
.studio-layout { max-width:1920px; margin:auto; background:#f8f4ee; }
.sidebar { background:linear-gradient(160deg,#f6eee8,#f0eee5); border-right:1px solid #e2d6ce; }
.shop-identity { padding-bottom:24px; border-bottom:1px solid #dfd3ca; }
.shop-logo { background:#edd8dc; color:#a15c72; border:1px solid #ddbcc5; }
.sidebar-caption { color:#9d8c82; letter-spacing:2px; }
.side-link { border:1px solid transparent; border-radius:10px; padding:12px; margin-bottom:5px; color:#7f706b; }
.side-link.active { background:#fffaf5; border-color:#e4ccc8; color:#a14f6a; box-shadow:0 3px 12px #74535b08; }
.side-link.active .icon { color:#aa6178; }
.menu-count { background:#f1e1e5; color:#a3546f; }
.sidebar-bottom { border-top:1px solid #dfd3ca; padding-top:22px; }
.sidebar-bottom strong { color:#a8787f; }
.studio-main { padding:36px; min-width:0; }
.studio-heading { padding-bottom:26px; border-bottom:1px solid #e6d9d0; margin-bottom:28px; }
.studio-heading h1 { color:#59434c; font-size:29px; }
.studio-heading p { color:#8c7d77; }
.stats { gap:18px; }
.stat { padding:23px; border-radius:15px; border:1px solid #e6d8d0; background:linear-gradient(145deg,#fffdfb,#faf4ef); box-shadow:0 4px 20px #75545a05; position:relative; overflow:hidden; }
.stat:before { content:""; position:absolute; top:0; left:23px; right:23px; height:2px; background:#c28699; }
.stat:nth-child(2):before { background:#9ba991; }
.stat:nth-child(3):before { background:#c0a47d; }
.stat:nth-child(4):before { background:#aca0b7; }
.stat > span { font-size:11px; color:#897771; }
.stat > span .icon { color:#af7287; width:21px; height:21px; }
.stat strong { font-size:31px; color:#654451; font-variant-numeric:tabular-nums; }
.stat small { color:#92857d; }
.data-table th { background:#f7f0e9; color:#8b726b; padding:15px 14px; }
.data-table td { border-bottom-color:#f0e5dc; }
.data-table tbody tr { transition:background .2s; }
.data-table tbody tr:hover { background:#fcf6ef; }
.data-table .thumb { border-radius:8px; }
.calendar-grid { border-radius:12px; overflow:hidden; }
.calendar-day.today { background:#f9e9ee; box-shadow:inset 0 3px #ba7890; }
.calendar-event { padding:5px 6px; border-left:2px solid #b26c83; background:#f4e5ea; }
.bar-group .bar { background:linear-gradient(0deg,#bc7891,#e0b7c4); border-radius:6px 6px 0 0; }
.image-uploader,.site-image { border-color:#d6bcb5; background:#fcf6f0; border-radius:14px; }
.image-uploader:hover { border-color:#b36a80; background:#fbefef; }
.modal-backdrop { background:#392a365b; backdrop-filter:blur(8px); }
.modal { border:1px solid #fff8; background:#fffcf8; box-shadow:0 30px 100px #3d203040; border-radius:22px; animation:atelier-dialog .3s var(--ease) both; }
.modal-top { border-bottom:1px solid #ecdcd5; padding-bottom:18px; }
.toast { border-radius:12px; box-shadow:0 12px 40px #49312c22; border:1px solid #ffffff25; }
.mobile-menu { border:1px solid #e4d2ca; border-radius:0 0 18px 18px; background:#fffcf7f7; backdrop-filter:blur(18px); box-shadow:0 18px 40px #5a38421a; top:var(--menu-top,92px); }
.mobile-menu a { padding:10px 14px; border-radius:8px; }
.mobile-menu a:hover { background:#f3e4e6; }
.motion-toggle { position:fixed; z-index:35; bottom:20px; left:20px; display:flex; align-items:center; gap:7px; border:1px solid #dfcdc8; background:#fffaf4ed; backdrop-filter:blur(12px); color:#87666f; border-radius:100px; min-height:36px; padding:7px 12px; font-size:10px; box-shadow:0 4px 20px #67414d0d; }
.motion-toggle svg { width:13px; height:13px; }
.motion-toggle[aria-pressed="true"] { background:#f0e0e5; color:#8d425e; }
.reveal-pending { opacity:0; transform:translateY(20px); }
.reveal-visible { opacity:1; transform:translateY(0); transition:opacity .75s var(--ease),transform .75s var(--ease); transition-delay:var(--reveal-delay,0ms); }
@keyframes atelier-drift { 0%,100% { transform:translateY(0) rotate(-3deg); } 50% { transform:translateY(-9px) rotate(5deg); } }
@keyframes atelier-dialog { from { opacity:0; transform:translateY(14px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes atelier-heart { 50% { transform:scale(1.2); } }
@media (hover:hover) and (pointer:fine) {
  .btn:hover .icon { transform:translateX(3px); }
  .btn:hover { box-shadow:0 9px 26px #7a495321; }
  .category:not(.active):hover { background:#f8e9ed; border-color:#d3a8b5; color:#a0526b; transform:translateY(-2px); }
  .product-card:hover { transform:translateY(-7px); box-shadow:0 18px 35px #7a4e5c13; border-color:#cfa1af; }
  .product-card:hover .product-media img { transform:scale(1.055); }
  .step:hover { transform:translateY(-5px); background:#fffdf7; }
  .step:hover .step-icon { transform:rotate(-9deg); transition:transform .4s; }
  .side-link:not(.active):hover { background:#fff8f2; color:#a0526b; transform:translateX(3px); }
  .favorite.active { animation:atelier-heart .4s var(--ease); }
}
@media (min-width:1800px) {
  body { font-size:16px; }
  .container { width:min(1720px,calc(100% - 160px)); }
  .hero { padding-top:88px; }
  .hero-grid { gap:100px; }
  .hero-image-wrap { max-width:760px; }
  .hero h1 { font-size:66px; }
  .hero-script { font-size:61px; }
  .hero-description { font-size:16px; }
  .hero-prelude { font-size:20px; }
  .section-heading h2 { font-size:35px; }
  .product-title { font-size:23px; }
  .product-character,.product-subtitle { font-size:13px; }
  .main-nav > a,.search-field input,.search-field select { font-size:15px; }
  .search-field label { font-size:12px; }
  .product-grid { gap:35px; }
  .product-content { padding:21px 17px 17px; }
  .price-line strong { font-size:25px; }
}
@media (max-width:1150px) {
  .container { width:calc(100% - 56px); }
  .nav-inner { gap:28px; }
  .main-nav { gap:22px; }
  .hero { padding-top:50px; }
  .hero-grid { gap:35px; }
  .hero h1 { font-size:39px; }
  .hero-script { font-size:35px; }
  .hero-prelude { font-size:14px; }
  .hero-description { font-size:12px; }
  .hero-note { right:-12px; padding:10px 13px; }
  .hero-note small { font-size:8px; }
  .hero-bottom { font-size:18px; }
  .image-index { font-size:7px; }
  .atelier-seal { width:77px; height:77px; }
  .atelier-seal span { font-size:6px; }
  .atelier-seal b { font-size:24px; }
  .hero-caption { right:-27px; }
  .search-field { padding:6px 15px; }
  .trust-row { gap:25px; font-size:10px; }
  .product-grid { gap:22px 16px; }
  .product-title { font-size:16px; }
  .product-content { padding:13px 8px 10px; }
  .muse-invitation { gap:23px; padding:28px; }
  .invitation-art { flex-basis:125px; }
  .muse-invitation h2 { font-size:22px; }
  .studio-main { padding:25px; }
  .stat { padding:17px; }
  .stat strong { font-size:25px; }
}
@media (max-width:900px) {
  .hero h1 { font-size:34px; }
  .hero-script { font-size:29px; }
  .hero-prelude { font-size:12px; margin-top:22px; }
  .hero-image { aspect-ratio:.91; }
  .hero-buttons { gap:13px; }
  .hero-buttons .btn { min-height:46px; }
  .hero-buttons .text-btn { font-size:11px; }
  .image-index { display:none; }
  .hero-image-wrap { margin-top:20px; }
  .hero-note { right:-10px; font-size:9px; }
  .hero-note .note-icon { width:28px; height:28px; }
  .hero-star { left:-22px; font-size:43px; }
  .atelier-ribbon { gap:24px; }
  .atelier-ribbon span { font-size:8px; letter-spacing:1.6px; }
  .section-heading h2 { font-size:24px; }
  .steps { gap:12px; }
  .step { padding:22px 12px; }
  .muse-invitation { flex-wrap:wrap; gap:15px 22px; }
  .muse-invitation > div:nth-child(2) { flex:1; }
  .muse-invitation > .btn { margin-left:147px; }
  .sidebar { padding:16px 12px; }
  .side-link { padding:10px; }
  .auth-decoration { padding:30px; }
  .auth-decoration strong { font-size:36px; }
  .auth-card { padding:35px 26px; }
  .product-detail { gap:30px; }
}
@media (max-width:650px) {
  .container { width:calc(100% - 36px); }
  body { font-size:14px; }
  .announcement { font-size:8px; letter-spacing:.25px; padding:7px 10px; }
  .announcement span { margin:0 5px; }
  .site-header { height:72px; }
  .site-header .brand { font-size:22px; letter-spacing:1.5px; }
  .brand-sub { font-size:6px; letter-spacing:2px; }
  .site-header .nav-inner { gap:7px; }
  .nav-tools { gap:5px; }
  .nav-tools .btn { padding:9px 10px; min-height:38px; }
  .nav-tools .icon-btn { width:33px; height:36px; }
  .nav-tools > a.flex { display:none; }
  .mode-bar { flex-wrap:wrap; gap:3px 6px; font-size:9px; padding:7px 12px; }
  .hero { padding:32px 0 10px; }
  .hero-grid { grid-template-columns:1fr; gap:30px; padding-bottom:0; }
  .hero-copy { padding:0; }
  .hero .eyebrow { font-size:9px; letter-spacing:2px; }
  .hero-prelude { margin-top:18px; font-size:13px; }
  .hero h1 { font-size:clamp(34px,8.8vw,48px); margin:9px 0 0; letter-spacing:-1px; line-height:1.45; }
  .hero-script { font-size:clamp(30px,8vw,42px); margin:7px 0 18px; letter-spacing:-1px; }
  .hero-description { max-width:100%; font-size:12px; line-height:1.95; margin-bottom:20px; }
  .hero-buttons { gap:17px; }
  .hero-buttons .btn { padding:12px 18px; min-height:46px; }
  .hero-proof { display:none; }
  .hero-image-wrap { padding-left:0; width:calc(100% - 34px); max-width:420px; justify-self:center; margin:12px 0 24px; }
  .hero-image { aspect-ratio:1.28; border-width:5px; border-radius:45% 45% 10px 10px; }
  .hero-image img { object-position:50% 60%; }
  .image-orbit { inset:-9px; }
  .atelier-seal { width:70px; height:70px; right:-1px; top:-5px; }
  .hero-note { bottom:16px; right:-13px; padding:10px 12px; font-size:10px; }
  .hero-note small { font-size:8px; }
  .hero-note .note-icon { width:32px; height:32px; }
  .hero-star { font-size:46px; left:-25px; top:27%; }
  .hero-bottom { font-size:19px; bottom:-31px; }
  .hero-caption { display:none; }
  .spark-one { left:auto; right:8%; top:4%; }
  .spark-two { left:auto; right:5%; top:24%; }
  .spark-three { display:none; }
  .search-strip { display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:26px; padding:12px; border-radius:15px; }
  .search-field { padding:9px; border:0; min-width:0; }
  .search-field:first-child { grid-column:1/-1; border-bottom:1px solid #e8dcd5; margin-bottom:6px; padding-bottom:14px; }
  .search-field:nth-child(2) { display:flex; }
  .search-field:nth-child(3) { display:none; }
  .search-field label { white-space:normal; font-size:10px; width:100%; }
  .search-field input,.search-field select { font-size:16px; min-height:30px; }
  .search-field:nth-child(2) input { font-size:14px; }
  .search-strip > .btn { min-height:44px; padding:9px 12px; margin:0 0 0 10px; width:auto; font-size:12px; }
  .trust-row { display:grid; grid-template-columns:1fr 1fr; gap:13px 10px; padding:22px 0 15px; font-size:9px; }
  .trust-row span,.trust-row span:nth-child(3) { display:flex; justify-content:center; gap:6px; }
  .trust-row .icon { width:14px; height:14px; }
  .atelier-ribbon { justify-content:space-around; padding:13px 12px; gap:13px; }
  .atelier-ribbon span { font-size:7px; letter-spacing:1.1px; }
  .atelier-ribbon span:nth-of-type(3),.atelier-ribbon i:last-child { display:none; }
  .atelier-ribbon i { font-size:11px; }
  .catalog-section { padding:38px 0; }
  .section-heading { gap:14px; margin-bottom:22px; }
  .section-heading .serif { font-size:16px; }
  .section-heading h2 { font-size:23px; }
  .section-heading p { font-size:11px; line-height:1.9; }
  .section-heading > .text-btn { font-size:11px; }
  .catalog-toolbar { flex-wrap:wrap; gap:14px; padding-top:18px; margin-bottom:16px; }
  .categories { width:100%; gap:6px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
  .category { justify-content:center; padding:9px 5px; font-size:10px; gap:4px; min-height:42px; }
  .category .icon { width:13px; height:13px; }
  .sort { margin-left:auto; font-size:11px; width:170px; }
  .filter-date { padding:12px; gap:10px; display:grid; grid-template-columns:1fr 1fr; }
  .filter-date label { max-width:none; min-width:0; font-size:10px; }
  .filter-date input { padding:9px 7px; font-size:14px; min-height:42px; }
  .filter-date .btn { padding:8px; font-size:10px; }
  .filter-date .text-btn { font-size:10px; justify-self:center; }
  .filter-date > .muted { grid-column:1/-1; }
  .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px 10px; }
  .product-card { padding:5px; border-radius:13px; }
  .product-media { border-radius:9px; aspect-ratio:4/4.85; }
  .product-top { inset:7px 6px auto; gap:3px; }
  .product-top .badge { padding:3px 5px; font-size:8px; }
  .product-top .badge .icon { width:10px; height:10px; }
  .favorite { width:31px; height:31px; }
  .favorite .icon { width:15px; height:15px; }
  .product-content { padding:12px 5px 8px; }
  .product-character { font-size:8px; letter-spacing:.7px; }
  .product-title { font-size:14px; line-height:1.5; margin:5px 0; }
  .product-subtitle { font-size:10px; }
  .price-line { gap:3px; flex-wrap:wrap; padding-top:10px; margin-top:10px; }
  .price-line strong { font-size:17px; }
  .price-line small { font-size:9px; }
  .sizes { font-size:8px; max-width:100%; }
  .product-action { font-size:9px; left:6px; right:6px; padding:8px 4px; }
  .product-action .icon { width:12px; height:12px; }
  .sample-tag { font-size:7px; bottom:41px; }
  .gallery-note { font-size:9px; }
  .muse-invitation { margin-bottom:35px; padding:24px 20px; gap:15px; }
  .invitation-art { flex-basis:72px; }
  .invitation-art > span { font-size:20px; }
  .muse-invitation .eyebrow { font-size:7px; letter-spacing:1px; }
  .muse-invitation h2 { font-size:20px; }
  .muse-invitation h2 br { display:block; }
  .muse-invitation p { font-size:10px; }
  .muse-invitation > .btn { margin-left:87px; font-size:11px; min-height:42px; }
  .guide-band { padding:36px 0; }
  .steps { grid-template-columns:1fr 1fr; gap:12px; margin-top:24px; }
  .step { padding:21px 11px 18px; }
  .step h3 { font-size:12px; }
  .step p { font-size:10px; }
  .step-icon { width:46px; height:46px; }
  .footer { padding:30px 0 66px; }
  .footer-signature { font-size:21px; gap:20px; line-height:1.4; padding-bottom:24px; margin-bottom:25px; }
  .footer-signature span { font-size:30px; }
  .footer-top { gap:24px; }
  .footer-links { gap:14px 20px; font-size:11px; }
  .footer-bottom { gap:10px; font-size:9px; }
  .page { padding-top:25px; }
  .page-title { font-size:28px; }
  .panel { border-radius:14px; padding:18px; }
  .product-detail { gap:25px; }
  .detail-main-image { border-width:5px; border-radius:18px; }
  .detail-heading { font-size:29px; }
  .detail-facts { padding:14px; }
  .auth-wrap { width:calc(100% - 36px); grid-template-columns:1fr; margin:28px auto 45px; border-radius:19px; }
  .auth-decoration { min-height:205px; padding:27px 26px; }
  .auth-star { position:absolute; right:27px; top:30px; font-size:58px; }
  .auth-decoration strong { font-size:34px; margin:14px 0 0; }
  .auth-decoration p,.auth-art-caption { display:none; }
  .auth-card { padding:28px 23px; }
  .auth-card h1 { font-size:24px; }
  .auth-card input,.form-grid input,.form-grid select,.form-grid textarea { font-size:16px; }
  .studio-main { padding:22px 16px; }
  .studio-heading { padding-bottom:20px; gap:12px; }
  .studio-heading h1 { font-size:25px; }
  .studio-heading p { font-size:11px; }
  .sidebar { padding:12px; gap:6px; }
  .side-link { border:1px solid #e3d5ce; background:#fbf7f1; font-size:10px; margin:0; min-height:42px; }
  .side-link.active { background:#f0dce3; border-color:#d6b2c0; }
  .stats { gap:10px; }
  .stat { padding:15px; }
  .stat > span { font-size:10px; }
  .stat strong { font-size:25px; }
  .stat small { font-size:9px; }
  .data-table tr { border-color:#e4d4cb; box-shadow:0 3px 15px #67414d05; border-radius:13px; }
  .data-table td { padding:8px 0; }
  .modal { padding:21px; border-radius:19px; }
  .modal-backdrop { padding:13px; }
  .motion-toggle { left:12px; bottom:max(12px,env(safe-area-inset-bottom)); font-size:9px; min-height:34px; padding:7px 10px; }
  #toasts { bottom:65px; right:14px; left:14px; }
  .toast { max-width:100%; }
}
@media (max-width:360px) {
  .site-header .brand { font-size:19px; }
  .brand-sub { letter-spacing:1.4px; }
  .nav-tools .btn { font-size:9px; padding:8px; }
  .nav-tools .icon-btn { width:29px; }
  .nav-tools { gap:3px; }
  .hero-buttons { gap:12px; }
  .hero-buttons > .text-btn { font-size:10px; }
  .category { font-size:9px; }
  .category .icon { display:none; }
}
/* Keep touch actions visible and all content available without animation. */
@media (hover:none) {
  /* A blur layer per product card makes scrolling the grid janky on phones. */
  .product-action { opacity:1; transform:none; backdrop-filter:none; background:#fffcf4; }
}
html[data-motion="off"] *,html[data-motion="off"] *:before,html[data-motion="off"] *:after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
html[data-motion="off"] { scroll-behavior:auto; }
html[data-motion="off"] .reveal-pending { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*:before,*:after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal-pending { opacity:1; transform:none; }
}
.atelier-sleeping *, .atelier-sleeping *:before, .atelier-sleeping *:after { animation-play-state:paused !important; }
.motion-toggle:disabled { cursor:default; opacity:.85; }