@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Parisienne&display=swap');

:root{
  --cream:#fffaf8;
  --blush:#f8e6eb;
  --pink:#eaa4b5;
  --rose:#d77f97;
  --ink:#272326;
  --muted:#6f6568;
  --line:#f0ccd5;
  --white:#ffffff;
  --shadow:0 18px 45px rgba(121, 78, 92, .14);
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(180deg,#ffd6ec 0%,#ffe3f3 25%,#dff4ff 65%,#bfe9ff 100%);
  background-attachment: fixed;
}

.cloud {
  position: fixed;
  width: 280px;
  height: 140px;
  background: rgba(255,255,255,0.75);
  border-radius: 100px;
  filter: blur(4px);
  z-index: -1;
  opacity: 0.8;
  pointer-events: none;
}

.cloud::before,.cloud::after {
  content: "";
  position: absolute;
  background: rgba(255,255,255,0.75);
  border-radius: 50%;
}

.cloud::before { width:120px; height:120px; top:-50px; left:40px; }
.cloud::after { width:100px; height:100px; top:-35px; right:40px; }
.cloud-left { top:18%; left:-320px; animation:cloudMoveLeft 45s linear infinite; }
.cloud-right { top:52%; right:-320px; animation:cloudMoveRight 55s linear infinite; }

@keyframes cloudMoveLeft {
  0%{transform:translateX(0) translateY(0)}
  50%{transform:translateX(55vw) translateY(-18px)}
  100%{transform:translateX(120vw) translateY(0)}
}

@keyframes cloudMoveRight {
  0%{transform:translateX(0) translateY(0)}
  50%{transform:translateX(-55vw) translateY(18px)}
  100%{transform:translateX(-120vw) translateY(0)}
}

.dream-bg{
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.28) 1px, transparent 1px);
  background-size:44px 44px;
  opacity:.35;
  mask-image:linear-gradient(to bottom, black, transparent 75%);
}

a{color:inherit;text-decoration:none}

.site-header{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:20px 7vw;
  background:rgba(255,250,250,.86);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(240,204,213,.55);
}

.brand{display:flex;flex-direction:column;line-height:.95;min-width:190px}
.brand span{font-family:Cormorant Garamond, serif;font-size:28px}
.brand strong{font-family:Parisienne, cursive;font-size:40px;color:var(--rose);font-weight:400;margin-left:42px}

nav{display:flex;gap:28px;align-items:center;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
nav a{position:relative}
nav a:after{content:"";position:absolute;left:0;bottom:-7px;width:0;height:1px;background:var(--rose);transition:.25s ease}
nav a:hover:after{width:100%}

.header-cta,.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:12px;transition:.25s ease}
.header-cta,.btn.primary{color:white;background:linear-gradient(135deg, var(--pink), var(--rose));box-shadow:0 10px 24px rgba(215,127,151,.28);padding:15px 24px}
.btn.secondary{color:var(--rose);border:1px solid var(--line);padding:15px 24px;background:rgba(255,255,255,.62)}
.header-cta:hover,.btn:hover{transform:translateY(-2px)}

.section{width:min(1160px, 86vw);margin:0 auto;padding:82px 0}
.hero-image,.about-image{width:80%;border-radius:12px;box-shadow:0 18px 45px rgba(121,78,92,.14);object-fit:cover;min-height:440px;background:white}
.hero{min-height:670px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:70px}
.eyebrow,.script{color:var(--rose);font-family:Parisienne, cursive;font-size:30px;margin:0 0 14px}
h1,h2,h3,p{margin-top:0}
h1,h2{font-family:Cormorant Garamond, serif;font-weight:500;line-height:1.02}
h1{font-size:clamp(48px, 7vw, 88px);letter-spacing:-.04em;max-width:720px}
h2{font-size:clamp(38px, 5vw, 64px);letter-spacing:-.03em;margin-bottom:18px}
h3{font-size:15px;letter-spacing:.08em;text-transform:uppercase}
p{color:var(--muted);line-height:1.85;font-size:16px}
.hero-text{max-width:580px;font-size:18px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}

.pin-frame{position:relative;isolation:isolate}
.pin-frame:before{content:"";position:absolute;inset:24px -20px -20px 20px;background:rgba(248,206,216,.34);filter:blur(.2px);z-index:-1;transform:rotate(-2deg)}
.bow{position:absolute;z-index:2;top:-34px;left:50%;transform:translateX(-50%);color:var(--pink);font-size:54px;text-shadow:0 8px 14px rgba(215,127,151,.24)}
.placeholder{min-height:330px;background:white;border:1px solid #f4d8df;border-radius:10px;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;color:#c9a0aa;text-transform:uppercase;font-size:11px;font-weight:800;letter-spacing:.16em;padding:30px}
.placeholder.large{min-height:440px}
.placeholder.vertical{min-height:500px}
.hero-pin{transform:rotate(2deg)}
.about{display:grid;grid-template-columns:.9fr 1fr;gap:80px;align-items:center}
.tilt-left{transform:rotate(-2deg)}
.about-copy{background:rgba(255,255,255,.52);border:1px solid rgba(240,204,213,.66);border-radius:32px;padding:46px;box-shadow:0 18px 45px rgba(121,78,92,.08)}
.center{text-align:center}
.cards,.video-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:28px;margin-top:44px}
.mini-card{background:rgba(255,255,255,.7);border:1px solid rgba(240,204,213,.75);border-radius:28px;padding:34px 28px;text-align:center;box-shadow:0 16px 40px rgba(121,78,92,.08)}
.icon{display:inline-flex;align-items:center;justify-content:center;width:74px;height:52px;margin-bottom:20px;color:var(--rose);font-size:32px;background:white;border:1px solid var(--line);border-radius:18px;box-shadow:0 10px 25px rgba(121,78,92,.08)}
.section-heading{max-width:650px;margin:0 auto 46px;text-align:center}
.video-grid .pin-frame h3{text-align:center;margin-top:24px}
.services{background:rgba(255,255,255,.5);border:1px solid rgba(240,204,213,.68);border-radius:38px;padding:58px;box-shadow:0 18px 50px rgba(121,78,92,.08)}
.service-list{display:grid;grid-template-columns:repeat(2, 1fr);gap:22px;margin-top:34px}
.service-list div{padding:28px;border-radius:26px;background:#fff;border:1px solid #f5d9e0}
.service-list span{color:var(--rose);font-family:Cormorant Garamond, serif;font-size:34px}
.brands{text-align:center;padding:50px 0}
.brands p{color:var(--rose);font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.brands div{display:flex;justify-content:center;flex-wrap:wrap;gap:18px}
.brands span{background:white;border:1px solid var(--line);border-radius:999px;padding:12px 20px;color:var(--muted);font-weight:700;text-transform:uppercase;font-size:12px;letter-spacing:.1em}
.contact{display:grid;grid-template-columns:1fr .85fr;gap:44px;align-items:center}
.contact-card{background:white;border:1px solid var(--line);border-radius:32px;padding:28px;box-shadow:var(--shadow);display:grid;gap:12px}
.contact-card a{display:block;padding:16px 18px;border-radius:18px;background:#fff8fa;border:1px solid #f6dce3;color:var(--rose);font-weight:800}
footer{text-align:center;padding:38px 20px;color:var(--muted);border-top:1px solid rgba(240,204,213,.6);background:rgba(255,250,250,.7)}
footer p{margin:0 0 8px}

@media (max-width:900px){
  .site-header{position:relative;flex-direction:column;align-items:flex-start}
  nav{flex-wrap:wrap;gap:16px}
  .header-cta{display:none}
  .hero,.about,.contact{grid-template-columns:1fr}
  .cards,.video-grid,.service-list{grid-template-columns:1fr}
  .section{width:min(90vw, 680px);padding:58px 0}
  .services{padding:34px 22px}
}

body::before{content:"";position:fixed;inset:0;background:radial-gradient(circle at top left, rgba(255,255,255,0.35), transparent 35%),radial-gradient(circle at top right, rgba(255,255,255,0.25), transparent 30%);pointer-events:none}
.instagram-media{border-radius:18px !important;overflow:hidden;box-shadow:0 18px 45px rgba(121,78,92,.14)}
.tiktok-embed-custom{width:100%;max-width:540px;aspect-ratio:9 / 16;border-radius:18px;overflow:hidden;background:white;box-shadow:0 18px 45px rgba(121,78,92,.14);display:block;margin:0 auto}

/* STICKER SHOP */
.sticker-hero{text-align:center;max-width:720px;margin-left:auto;margin-right:auto}
.sticker-hero-copy{display:flex;flex-direction:column;align-items:center}
.sticker-hero h1{max-width:640px}
.sticker-hero .hero-text{text-align:center}
.sticker-grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:28px}
.sticker-card{background:rgba(255,255,255,.72);border:1px solid rgba(240,204,213,.75);border-radius:28px;overflow:hidden;box-shadow:0 16px 40px rgba(121,78,92,.08);transition:transform .25s ease, box-shadow .25s ease}
.sticker-card:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(121,78,92,.14)}
.sticker-image-wrap{background:linear-gradient(135deg, #fff5f8, #fce8f0, #f0e4ff);display:flex;align-items:center;justify-content:center;height:380px;overflow:hidden;padding:16px}
.sticker-placeholder{display:flex;align-items:center;justify-content:center}
.sticker-img{width:100%;height:100%;object-fit:contain;display:block}
.sticker-icon{font-size:72px;filter:drop-shadow(0 6px 14px rgba(215,127,151,.18))}
.sticker-info{padding:22px 24px 26px;text-align:center}
.sticker-info h3{margin-bottom:8px;color:var(--ink)}
.sticker-info p{font-size:14px;margin-bottom:12px}
.sticker-price{display:inline-block;background:linear-gradient(135deg, var(--pink), var(--rose));color:white;font-weight:800;font-size:13px;letter-spacing:.08em;padding:6px 16px;border-radius:999px}
.sticker-bundle-banner{margin-top:48px;text-align:center;background:rgba(255,255,255,.6);border:1px solid rgba(240,204,213,.7);border-radius:32px;padding:36px 28px;box-shadow:0 14px 36px rgba(121,78,92,.06)}
.sticker-bundle-banner h3{font-family:Cormorant Garamond, serif;font-size:clamp(22px, 3vw, 32px);font-weight:500;text-transform:none;letter-spacing:-.01em;color:var(--ink)}
.sticker-bundle-banner p{margin-bottom:0}
.coming-soon-badge{display:inline-block;background:linear-gradient(135deg, #f8e6eb, #f0e4ff);color:var(--rose);font-weight:800;font-size:14px;letter-spacing:.12em;text-transform:uppercase;padding:12px 28px;border-radius:999px;border:1px solid rgba(240,204,213,.75);margin-bottom:10px}
.hero-subtext{font-size:16px;color:var(--muted);max-width:500px;text-align:center;margin-bottom:6px}
.sticker-coming-soon{display:inline-block;background:linear-gradient(135deg, #f8e6eb, #f0e4ff);color:var(--rose);font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:6px 16px;border-radius:999px;border:1px solid rgba(240,204,213,.6)}
.sticker-available{display:inline-block;background:linear-gradient(135deg, #d8f5e3, #eafbe7);color:#3f8f63;font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:6px 16px;border-radius:999px;border:1px solid rgba(110,190,140,.45)}
.print-method{display:inline-block;background:rgba(255,255,255,.7);color:var(--ink);font-weight:700;font-size:12px;letter-spacing:.04em;padding:6px 16px;border-radius:999px;border:1px solid var(--line);margin-bottom:12px}
.print-method strong{color:var(--rose);font-weight:800}
.btn-order-now{display:inline-block;background:#fff;color:var(--rose);font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:10px 20px;border-radius:999px;border:1px solid var(--line);cursor:pointer;font-family:inherit;margin-bottom:10px;margin-left:6px;transition:transform .2s ease, box-shadow .2s ease}
.btn-order-now:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(215,127,151,.2)}
.checkbox-label.is-disabled{color:var(--muted);cursor:not-allowed}
.checkbox-label.is-disabled:hover{background:none}

/* ORDER FORM */
.order-form-wrap{max-width:680px;margin:0 auto;background:rgba(255,255,255,.58);border:1px solid rgba(240,204,213,.66);border-radius:32px;padding:46px;box-shadow:0 18px 45px rgba(121,78,92,.08)}
.form-group{margin-bottom:22px}
.form-group label,.form-group legend{display:block;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:8px}
.optional{font-weight:400;text-transform:none;letter-spacing:normal;color:var(--muted);font-size:12px}
.form-group input[type="text"],.form-group input[type="email"],.form-group textarea,.form-group select{width:100%;padding:14px 18px;border:1px solid #f0ccd5;border-radius:18px;background:#fff;font-size:15px;font-family:inherit;color:var(--ink);transition:border-color .2s ease, box-shadow .2s ease}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:var(--rose);box-shadow:0 0 0 3px rgba(215,127,151,.15)}
.form-group input::placeholder,.form-group textarea::placeholder{color:#c9a0aa}
.form-group select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23d77f97' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:42px;cursor:pointer}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.sticker-select-group{border:1px solid #f0ccd5;border-radius:22px;padding:22px 24px;background:rgba(255,255,255,.5)}
.sticker-select-group legend{padding:0 8px}
.checkbox-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.checkbox-label{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink);cursor:pointer;padding:8px 12px;border-radius:12px;transition:background .15s ease}
.checkbox-label:hover{background:rgba(248,230,235,.5)}
.checkbox-label input[type="checkbox"]{width:18px;height:18px;accent-color:var(--rose);cursor:pointer;flex-shrink:0}
.form-submit{width:100%;padding:18px 24px;font-size:14px;margin-top:8px;cursor:pointer;border:none;font-family:inherit}
.form-note{text-align:center;font-size:13px;color:var(--muted);margin-top:16px;margin-bottom:0}

/* THANK YOU */
.thank-you-section{display:flex;justify-content:center;align-items:center;min-height:50vh}
.thank-you-card{text-align:center;background:rgba(255,255,255,.58);border:1px solid rgba(240,204,213,.66);border-radius:32px;padding:58px 48px;box-shadow:0 18px 45px rgba(121,78,92,.08);max-width:640px;position:relative}
.thank-you-bow{display:block;color:var(--pink);font-size:54px;text-shadow:0 8px 14px rgba(215,127,151,.24);margin-bottom:8px}
.thank-you-card h1{font-size:clamp(32px, 5vw, 52px)}
.thank-you-card p{font-size:17px;max-width:500px;margin-left:auto;margin-right:auto}

@media (max-width:900px){
  .sticker-grid{grid-template-columns:repeat(2, 1fr)}
  .form-row,.checkbox-grid{grid-template-columns:1fr}
  .order-form-wrap{padding:28px 20px}
}
@media (max-width:560px){.sticker-grid{grid-template-columns:1fr}}

/* MATERIAL PREVIEW BUTTON */
.btn-preview-material{display:inline-block;background:linear-gradient(135deg, var(--pink), var(--rose));color:white;font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:10px 20px;border-radius:999px;border:none;cursor:pointer;font-family:inherit;margin-bottom:10px;transition:transform .2s ease, box-shadow .2s ease;box-shadow:0 6px 18px rgba(215,127,151,.25)}
.btn-preview-material:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(215,127,151,.35)}

/* MATERIAL PREVIEW MODAL */
.material-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:rgba(39,35,38,.6);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .3s ease}
.material-modal.open{opacity:1;pointer-events:all}
.material-modal-content{position:relative;width:min(94vw, 960px);max-height:90vh;background:var(--cream);border-radius:32px;border:1px solid rgba(240,204,213,.75);box-shadow:0 30px 80px rgba(121,78,92,.22);overflow-y:auto;padding:40px;transform:translateY(20px) scale(.97);transition:transform .3s ease}
.material-modal.open .material-modal-content{transform:translateY(0) scale(1)}
.material-modal-close{position:absolute;top:16px;right:20px;background:none;border:none;font-size:28px;color:var(--muted);cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .2s ease, color .2s ease;z-index:5}
.material-modal-close:hover{background:rgba(240,204,213,.4);color:var(--ink)}
.material-preview-layout{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
.material-preview-area{display:flex;flex-direction:column;align-items:center}

/* DIE-CUT MATERIAL PREVIEW
   Important: this works with sticker-material-fix.js.
   The JS removes only the outside white background from opaque PNGs,
   then this CSS uses the cleaned alpha shape for the smooth die-cut material.
*/
.preview-sticker-wrap{
  position:relative;
  width:100%;
  max-width:380px;
  aspect-ratio:1;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  padding:42px;
  overflow:visible;
  box-shadow:none;
}

.preview-sticker-wrap::before{
  content:"";
  position:absolute;
  inset:42px;
  background:var(--material-fill, #fff);
  -webkit-mask:var(--sticker-url) center / contain no-repeat;
  mask:var(--sticker-url) center / contain no-repeat;
  transform:scale(1.16);
  filter:blur(1.2px);
  z-index:1;
  pointer-events:none;
}

.preview-sticker-wrap::after{
  content:"";
  position:absolute;
  inset:42px;
  background:rgba(70,45,55,.22);
  -webkit-mask:var(--sticker-url) center / contain no-repeat;
  mask:var(--sticker-url) center / contain no-repeat;
  transform:scale(1.15) translateY(10px);
  filter:blur(14px);
  opacity:.42;
  z-index:0;
  pointer-events:none;
}

.material-overlay{display:none !important}

.preview-sticker-wrap img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  position:relative;
  z-index:2;
  mix-blend-mode:multiply;
  filter:none;
  transform:translateZ(0);
  backface-visibility:hidden;
}

.material-white-glossy .preview-sticker-wrap{--material-fill:#ffffff}
.material-matte .preview-sticker-wrap{--material-fill:#f6f2ef}
.material-clear .preview-sticker-wrap{--material-fill:rgba(235,246,255,.52)}
.material-holographic .preview-sticker-wrap{--material-fill:linear-gradient(135deg,#b7ebff,#cdaaff,#ffafd7)}
.material-kraft .preview-sticker-wrap{--material-fill:#c9aa80}
.material-glitter .preview-sticker-wrap{--material-fill:linear-gradient(135deg,#defff5,#cdb8ff,#ffbee1)}

.preview-sticker-name{margin-top:16px;font-family:Cormorant Garamond, serif;font-size:24px;font-weight:500;color:var(--ink);text-align:center}
.material-white-glossy,.material-matte,.material-clear,.material-holographic,.material-kraft,.material-glitter{background:#ffffff}

@keyframes holoShift{0%{background-position:0% 50%, 0 0, 0% 50%}50%{background-position:100% 50%, 14px 14px, 100% 50%}100%{background-position:0% 50%, 28px 28px, 0% 50%}}
@keyframes glitterShift{0%{background-position:0 0,20px 12px,42px 28px,8px 54px,52px 18px,18px 46px,0 0,0 0,0% 50%}100%{background-position:36px 28px,0 48px,74px 8px,42px 16px,12px 52px,56px 12px,36px 36px,36px 36px,100% 50%}}

@media (max-width:900px){
  .material-preview-layout{grid-template-columns:1fr}
  .material-modal-content{padding:28px 20px;max-height:95vh;border-radius:24px}
  .preview-sticker-wrap{max-width:300px;padding:34px}
  .preview-sticker-wrap::before,.preview-sticker-wrap::after{inset:34px}
}

@media (max-width:560px){
  .material-modal-content{padding:20px 16px;border-radius:20px}
  .preview-sticker-wrap{max-width:240px;padding:28px}
  .preview-sticker-wrap::before,.preview-sticker-wrap::after{inset:28px}
}

/* MATERIAL SELECTOR */
.material-selector{padding-top:8px}
.material-selector-title{font-family:Cormorant Garamond, serif;font-size:24px;font-weight:500;text-transform:none;letter-spacing:-.01em;margin-bottom:6px}
.material-selector-desc{font-size:14px;margin-bottom:20px}
.material-options{display:flex;flex-direction:column;gap:8px}
.material-option{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;border:1.5px solid transparent;background:rgba(255,255,255,.5);cursor:pointer;transition:all .2s ease;text-align:left;font-family:inherit}
.material-option:hover{background:rgba(255,255,255,.8);border-color:rgba(240,204,213,.6)}
.material-option.active{background:white;border-color:var(--rose);box-shadow:0 4px 16px rgba(215,127,151,.15)}
.material-swatch{width:44px;height:44px;border-radius:12px;flex-shrink:0;border:1px solid rgba(0,0,0,.08);box-shadow:0 2px 8px rgba(0,0,0,.06)}
.swatch-white-glossy{background:#ffffff;background-image:linear-gradient(135deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.8) 50%, rgba(255,255,255,0) 60%)}
.swatch-matte{background:#f5f2f0}
.swatch-clear{background:repeating-conic-gradient(#e8e8e8 0% 25%, #ffffff 0% 50%) 0 0 / 10px 10px}
.swatch-holographic{background:linear-gradient(135deg, #ff6b9d, #ffd166, #8affc1, #6ecbff, #b892ff, #ff9de2);background-size:300% 300%;animation:holoShift 4s ease infinite}
.swatch-kraft{background:#c8a882}
.swatch-glitter{background:radial-gradient(circle at 20% 25%, rgba(255,120,170,.8) 0 1.5px, transparent 2px),radial-gradient(circle at 70% 60%, rgba(90,255,190,.75) 0 1.5px, transparent 2px),radial-gradient(circle at 45% 40%, rgba(255,235,120,.75) 0 1.5px, transparent 2px),radial-gradient(circle at 80% 30%, rgba(110,220,255,.78) 0 1.5px, transparent 2px),radial-gradient(circle at 30% 75%, rgba(180,145,255,.78) 0 1.5px, transparent 2px),radial-gradient(circle at 60% 15%, rgba(255,145,210,.75) 0 1.5px, transparent 2px),linear-gradient(135deg,rgba(160,160,165,.85),rgba(220,220,225,.82) 30%,rgba(170,220,200,.75) 50%,rgba(220,215,225,.82) 70%,rgba(160,160,165,.85));position:relative;overflow:hidden;filter:saturate(1.2) brightness(1.05)}
.swatch-glitter::after{content:"";position:absolute;inset:0;background:radial-gradient(1px 1px at 15% 55%, white 50%, transparent 50%),radial-gradient(1px 1px at 55% 20%, white 50%, transparent 50%),radial-gradient(1px 1px at 85% 80%, rgba(255,255,255,.9) 50%, transparent 50%),radial-gradient(1px 1px at 40% 85%, rgba(255,255,255,.85) 50%, transparent 50%)}
.material-label{display:flex;flex-direction:column;gap:2px}
.material-label strong{font-size:14px;color:var(--ink);letter-spacing:.02em}
.material-label small{font-size:12px;color:var(--muted);line-height:1.4}
.material-note{margin-top:20px;text-align:center}
.material-note p{font-size:13px;color:var(--rose);font-weight:600;letter-spacing:.04em}

@media (max-width:900px){
  .material-preview-layout{grid-template-columns:1fr}
  .material-modal-content{padding:28px 20px;max-height:95vh;border-radius:24px}
  .preview-sticker-wrap{max-width:300px;padding:34px}
  .preview-sticker-wrap::before,.preview-sticker-wrap::after{inset:34px}
}

@media (max-width:560px){
  .material-modal-content{padding:20px 16px;border-radius:20px}
  .preview-sticker-wrap{max-width:240px;padding:28px}
  .preview-sticker-wrap::before,.preview-sticker-wrap::after{inset:28px}
  .material-option{padding:10px 12px;gap:10px}
  .material-swatch{width:36px;height:36px;border-radius:10px}
}