/* Studio storefront: shared surfaces and responsive editorial sections. */
:root { --pink:#bf3967; --pink-dark:#98264e; --pink-soft:#fbeaf0; --blush:#fbf4ef; --ink:#292126; --paper:#fffdf9; --line:#e9ddd8; }
.dg-site-header { background:var(--ink); box-shadow:none; }
.dg-nav-links { gap:clamp(16px,2.2vw,32px); }
.dg-nav-links a { position:relative; color:#fffdf9; }
.dg-nav-links a::after { content:""; position:absolute; bottom:-6px; left:0; width:100%; height:2px; background:var(--pink); transform:scaleX(0); transform-origin:left; transition:transform .2s; }
.dg-nav-links a:hover::after,.dg-nav-links a.active::after { transform:scaleX(1); }
.dg-nav-links .active { color:var(--pink) !important; }
.dg-search-box .dg-search-link { color:#fffdf9; }
.dg-user-menu > summary { color:#fffdf9; }
.dg-user-menu[open] > summary { color:var(--pink); }
.dg-announcement { background:#334d41; color:#fff; text-align:center; padding:10px 16px; font:600 12px var(--font-ui); letter-spacing:.08em; }
.dg-footer { background:#f3eee6; border-top:1px solid var(--line); }
.dg-footer a:hover { text-decoration:underline; text-underline-offset:4px; }
.dg-footer-grid > * { min-width:0; overflow-wrap:anywhere; }
.dg-icon-button { border:0; background:transparent; padding:0; color:var(--ink); }
.dg-search-box .dg-search-link { min-width:36px; min-height:40px; align-items:center; justify-content:center; }
.dg-search-panel.is-open { display:flex; }
.dg-nav-links.is-open { display:flex; }
.dg-search-panel { max-width:calc(100vw - 40px); }
.dg-search-panel input { min-width:0; }
.btn-primary { --bs-btn-active-bg:var(--pink-dark); --bs-btn-active-border-color:var(--pink-dark); --bs-btn-disabled-bg:var(--pink); --bs-btn-disabled-border-color:var(--pink); }
.btn:disabled { transform:none; box-shadow:none; cursor:wait; }
.dg-page-hero { background:radial-gradient(ellipse at 12% 90%,#e5eddf 0,transparent 45%),radial-gradient(ellipse at 90% 0,#f4d9df 0,transparent 45%),var(--blush); }
.dg-product-card { box-shadow:none; }
.dg-product-card:focus-visible { transform:translateY(-4px); }
.dg-product-image { border-bottom:1px solid var(--line); }
.dg-product-copy { background:#fffdf9; }
.dg-card-badge { color:var(--pink-dark); }
.dg-field input:focus,.dg-field textarea:focus { box-shadow:0 0 0 4px #bf396713; }
.dg-auth-card,.dg-account-card,.dg-order-card { box-shadow:0 16px 48px #29212607; }
.dg-click-control { border:0; background:transparent; font:inherit; padding:0; }
.dg-click-control:focus-visible { outline:3px solid var(--pink); outline-offset:3px; }
.dg-hero-split { display:grid; grid-template-columns:1.1fr .95fr; align-items:stretch; min-height:clamp(520px,70vh,700px); background:var(--ink); overflow:hidden; }
.dg-hero-copy { display:flex; flex-direction:column; justify-content:center; padding-top:56px; padding-bottom:56px; }
.dg-hero-copy .eyebrow { color:#f2c9d6; }
.dg-hero-copy h1 { font-size:clamp(50px,6.4vw,100px); font-weight:700; line-height:.94; letter-spacing:-.03em; text-transform:uppercase; color:#fffdf9; margin:16px 0 18px; }
.dg-hero-copy > p { max-width:420px; color:#e8dee2; font-size:16px; line-height:1.75; margin:0 0 30px; }
.dg-hero-cta-row { display:flex; flex-wrap:wrap; gap:14px; }
.dg-hero-photo-panel { position:relative; overflow:hidden; }
.dg-hero-photo-panel img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 15%; }
.btn-block { display:inline-flex; align-items:center; justify-content:center; padding:16px 30px; background:#fffdf9; color:var(--ink); font:700 13px var(--font-ui); letter-spacing:.06em; text-decoration:none; border:1.5px solid #fffdf9; transition:transform .18s ease,background-color .18s ease,color .18s ease; }
.btn-block:hover { background:var(--pink); border-color:var(--pink); color:#fff; transform:translateY(-2px); }
.btn-block-outline { background:transparent; color:#fffdf9; border-color:#fffdf9; }
.btn-block-outline:hover { background:#fffdf9; color:var(--ink); }
.dg-section-heading em,.dg-play-copy h2 em,.dg-studio-invite h2 em { font-family:var(--font-script); font-weight:400; text-transform:none; color:var(--pink); letter-spacing:0; font-size:1.2em; }
.dg-value-ribbon { display:flex; flex-wrap:wrap; justify-content:center; gap:16px 30px; padding:20px var(--dg-px); background:#334d41; color:#fffdf9; font:500 14px var(--font-ui); }
.dg-value-ribbon [aria-hidden] { color:#e9d893; }
.dg-home-section { padding-top:80px; padding-bottom:80px; }
.dg-section-heading { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:34px; }
.dg-section-heading h2,.dg-play-copy h2 { font-size:clamp(30px,3.3vw,48px); font-weight:700; letter-spacing:-.045em; line-height:1.15; margin:12px 0 0; }
.dg-section-heading > a { flex-shrink:0; }
.dg-canvas-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:20px; }
.dg-canvas-card { text-decoration:none; color:var(--ink); }
.dg-canvas-card > div { position:relative; overflow:hidden; background:var(--blush); }
.dg-canvas-card img { width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; transition:transform .4s; }
.dg-canvas-card:hover img { transform:scale(1.06); }
.dg-canvas-card > div > span { position:absolute; right:12px; bottom:12px; background:#fffdf9; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; }
.dg-canvas-card h3 { font:700 17px var(--font-ui); margin:16px 0 4px; }
.dg-canvas-card p { font-size:12px; color:#75676e; }
.dg-play-studio { background:#edf0e6; padding-top:70px; padding-bottom:70px; scroll-margin-top:90px; }
.dg-play-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:9%; }
.dg-play-preview { position:relative; overflow:hidden; border-radius:20px; border:1px solid #dedbd0; background:#fffdf9; --art-color:#bf3967; }
.dg-play-preview img { width:100%; height:auto; display:block; }
.dg-play-label,.dg-play-caption { position:absolute; left:16px; right:16px; text-align:center; z-index:1; font:600 11px var(--font-ui); letter-spacing:.08em; }
.dg-play-label { top:22px; }
.dg-play-caption { bottom:20px; font-size:11px; letter-spacing:0; background:#fffdf9e8; border-radius:20px; padding:8px; }
.dg-play-art { position:absolute; top:38%; left:40%; width:20%; height:18%; display:grid; place-items:center; color:var(--art-color); font-size:clamp(50px,7vw,110px); line-height:1; transition:color .2s,transform .2s; }
.dg-play-copy > p { font-size:15px; line-height:1.85; color:#596051; margin:22px 0; }
.dg-play-copy small { display:block; color:#596051; font-size:11px; line-height:1.6; margin-top:15px; max-width:350px; }
.dg-preview-controls fieldset { margin:0 0 22px; padding:0; border:0; }
.dg-preview-controls legend { float:none; width:auto; font:600 13px var(--font-ui); margin-bottom:10px; }
.dg-motif-options,.dg-tone-options { display:flex; flex-wrap:wrap; gap:10px; }
.dg-motif-options button { padding:9px 14px; min-height:44px; border:1px solid #c4c9bb; border-radius:12px; background:transparent; font:600 13px var(--font-ui); color:var(--ink); }
.dg-motif-options button span { margin-right:6px; font-size:20px; }
.dg-motif-options button[aria-pressed="true"] { background:#fffdf9; border-color:#334d41; box-shadow:0 3px 0 #334d4115; }
.dg-tone-options button { background:var(--tone); border:5px solid #edf0e6; width:44px; height:44px; border-radius:50%; outline:1px solid transparent; }
.dg-tone-options button[aria-pressed="true"] { outline:2px solid #334d41; }
.dg-tone-options button,.dg-motif-options button { cursor:pointer; transition:transform .2s ease,box-shadow .2s ease; }
.dg-tone-options button:hover,.dg-motif-options button:hover { transform:translateY(-3px); }
.dg-tone-options button:focus-visible { outline:3px solid var(--pink); outline-offset:3px; }
.dg-preview-status { font-size:12px; color:#596051; }
.dg-home-products { grid-template-columns:repeat(4,minmax(0,1fr)); }
.dg-home-products .dg-product-card { border:0; border-radius:0; box-shadow:none; background:transparent; }
.dg-home-products .dg-product-card:hover { transform:none; box-shadow:none; }
.dg-home-products .dg-product-image { border-bottom:0; background:var(--blush); }
.dg-home-products .dg-product-copy { min-height:auto; padding:18px 0 0; background:transparent; flex-direction:row; align-items:baseline; justify-content:space-between; gap:12px; }
.dg-home-products .dg-product-copy h2 { font-size:13.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; margin:0; }
.dg-home-products .dg-price { margin-top:0; font:600 13px var(--font-ui); color:#75676e; flex-shrink:0; }
.dg-home-products .dg-price span { display:none; }
.dg-process-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.dg-process-grid article { padding:32px; border:1px solid var(--line); border-radius:0; background:#fbf1eb; }
.dg-process-grid article:nth-child(2) { background:#edf0e6; }
.dg-process-grid article:nth-child(3) { background:#f5edf6; }
.dg-process-grid article > span { font:600 11px var(--font-ui); letter-spacing:.09em; }
.dg-process-grid h3 { font-size:21px; line-height:1.4; margin:30px 0 14px; letter-spacing:-.025em; }
.dg-process-grid p { font-size:13px; line-height:1.8; color:#65575e; margin:0; }
.dg-studio-invite { background:var(--ink); text-align:left; padding-top:80px; padding-bottom:90px; }
.dg-studio-invite .eyebrow { color:#f2c9d6; }
.dg-studio-invite h2 { color:#fffdf9; font-size:clamp(34px,5vw,64px); line-height:1.05; font-weight:700; text-transform:uppercase; letter-spacing:-.03em; margin:18px 0 20px; }
.dg-studio-invite p { color:#d9cfd3; font-size:15px; margin:0 0 30px; max-width:450px; }
.reveal { opacity:1; transform:none; }
.reveal.dg-reveal-ready:not(.is-visible) { opacity:0; transform:translateY(22px); }
@media (prefers-reduced-motion:no-preference) {
    .dg-studio-invite .dg-container > span { animation:dg-float 6s ease-in-out infinite; }
    .dg-canvas-card:nth-child(2),.dg-home-products .dg-product-card:nth-child(2),.dg-process-grid article:nth-child(2) { transition-delay:70ms; }
    .dg-canvas-card:nth-child(3),.dg-home-products .dg-product-card:nth-child(3),.dg-process-grid article:nth-child(3) { transition-delay:140ms; }
    .dg-canvas-card:nth-child(4),.dg-home-products .dg-product-card:nth-child(4) { transition-delay:210ms; }
    .dg-canvas-card:nth-child(5) { transition-delay:280ms; }
    .reveal.is-visible:hover { transition-delay:0s; }
}
@media (max-width:1100px) {
    .dg-site-header { gap:16px; }
    .dg-nav-links { gap:15px; font-size:12px !important; letter-spacing:.03em !important; }
    .dg-canvas-grid { gap:12px; }
    .dg-canvas-card h3 { font-size:15px; }
}
@media (max-width:900px) {
    .dg-nav-links a { color:var(--ink); }
    .dg-nav-links a::after { display:none; }
    .dg-hero-overlay h1 { font-size:56px; }
    .dg-play-grid { gap:35px; }
    .dg-home-products { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .dg-process-grid article { padding:24px; }
}
@media (max-width:760px) {
    .dg-play-grid { grid-template-columns:1fr; }
    .dg-hero-full { height:560px; }
    .dg-hero-overlay h1 { font-size:clamp(40px,11vw,60px); }
    .dg-hero-overlay > p { font-size:14px; }
    .dg-section-heading { align-items:start; flex-direction:column; gap:6px; }
    .dg-home-section { padding-top:52px; padding-bottom:52px; }
    .dg-canvas-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 16px; }
    .dg-canvas-card:last-child { grid-column:1 / -1; max-width:260px; width:65%; justify-self:center; }
    .dg-play-preview { max-width:440px; width:100%; margin:auto; }
    .dg-play-art { font-size:80px; }
    .dg-process-grid { grid-template-columns:1fr; }
    .dg-process-grid h3 { margin-top:16px; }
    .dg-value-ribbon { gap:12px; font-size:12px; }
    .dg-value-ribbon [aria-hidden] { display:none; }
    .dg-value-ribbon > span { width:calc(50% - 6px); text-align:center; }
    .dg-nav-links a::after { bottom:5px; width:30px; }
    .dg-search-panel { right:-100px; }
}
@media (max-width:420px) {
    .dg-home-products { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto; }
    *,*::before,*::after { animation:none !important; transition:none !important; }
    .dg-hero-in,.reveal.dg-reveal-ready:not(.is-visible) { opacity:1; transform:none; }
}

/* Native controls retain the existing swatch appearance. */
button.swatch { border:0; padding:0; flex-shrink:0; }
button.size-pill:not(.active) { background:#fffdf9; }
label[role="button"]:focus-visible { outline:3px solid var(--pink); outline-offset:5px; }
@media (max-width:900px) {
    .dg-search-box { position:static; }
    .dg-search-panel { left:20px; right:20px; top:calc(100% + 8px); min-width:0; max-width:none; }
}