/* Focused refinements for the official PLIKA site. Existing brand tokens,
   photography, layouts and desktop creator remain the source of truth. */
.hero-delivery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:26px}
.hero-delivery-card{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:18px;border:1px solid #cbd2f3;border-radius:16px;background:#ffffffeb;color:var(--blue);text-decoration:none;box-shadow:0 5px 16px #263fe808}
.hero-delivery-card:first-child{background:var(--citron);border-color:#d7e46c}
.hero-delivery-place{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;font-size:17px;font-weight:700}
.hero-delivery-place svg{width:21px;height:21px;flex:none}
.hero-delivery-service{font-size:13px;margin-top:3px;color:#414c76}
.hero-delivery-order{font-size:15px;margin-top:17px}
.hero-delivery-card strong{font-size:clamp(20px,1.65vw,25px);line-height:1.12;letter-spacing:-.025em;margin-top:4px;max-width:175px}
.hero-delivery-card:hover{border-color:var(--blue);box-shadow:0 5px 18px #263fe814}
.hero-delivery-card:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.hero-delivery-note{font-size:13px;line-height:1.5;color:#505b6a;margin:12px 0 23px}
.hero-delivery-note a{color:var(--blue);text-underline-offset:3px}
.hero-copy .opening-note{margin-top:20px;font-size:14px}
.quick-facts{gap:16px;padding-block:26px;border-bottom:0}
.quick-facts>div,.quick-facts>div:first-child,.quick-facts>div:last-child{flex-direction:row;justify-content:flex-start;align-items:center;gap:16px;padding:22px;border:1px solid #dfe4f5;border-radius:16px;background:#f0f3ff;color:var(--blue)}
.quick-facts>div+div{border-left:1px solid #dfe4f5}
.quick-facts>div:nth-child(2){background:#f7fadf;border-color:#e2eabb}
.quick-facts>div:nth-child(3){background:var(--pearl);border-color:#e0e5ed}
.quick-facts svg{box-sizing:content-box;width:28px;height:28px;flex:none;padding:12px;border-radius:13px;background:#fff;color:var(--blue)}
.quick-facts b{font-size:19px;line-height:1.2}
.quick-facts small{font-size:14px;line-height:1.45;margin-top:6px}
.delivery-facts strong{display:block;font-size:21px;line-height:1.35;color:var(--blue);margin-top:7px}
.delivery-copy>.delivery-conditions,.delivery-copy>.delivery-availability{font-size:15px;line-height:1.6;margin:16px 0}
.delivery-availability{padding:16px 18px;border-left:3px solid var(--blue);background:#fff;border-radius:0 10px 10px 0}
.mobile-live-preview{display:none}
@media(min-width:801px) and (max-width:1100px){
 .hero-delivery{gap:9px;margin-top:22px}
 .hero-delivery-card{padding:15px 12px}
 .hero-delivery-place{font-size:16px}
 .hero-delivery-service{font-size:12px}
 .hero-delivery-order{font-size:14px}
 .quick-facts>div,.quick-facts>div:first-child,.quick-facts>div:last-child{gap:12px;padding:18px 14px}
 .quick-facts svg{width:24px;height:24px;padding:9px}
 .quick-facts b{font-size:17px}
}
@media(max-width:800px){
 .hero-delivery{max-width:520px;margin-top:24px}
 .hero-delivery-card{padding:18px 16px}
 .hero-delivery-card strong{font-size:24px}
 .hero-delivery-note{max-width:520px}
 .quick-facts{grid-template-columns:1fr;gap:12px;padding-block:23px}
 .quick-facts>div,.quick-facts>div:first-child,.quick-facts>div:last-child{gap:17px;padding:17px 20px}
 .quick-facts b{font-size:19px}
 .quick-facts small{font-size:14px;margin-top:4px}
 .mobile-live-preview{position:sticky;top:var(--header-height,78px);z-index:8;display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;gap:14px;padding:10px 14px 10px 10px;margin:0 0 24px;background:#fff;border:1px solid #cdd5fc;border-radius:14px;box-shadow:0 7px 18px #12203912}
 .mobile-live-preview .mobile-live-stage{grid-row:auto;height:116px;padding:8px;border-radius:9px}
 #mobile-live-artwork{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-width:0}
 #mobile-live-artwork .label-art{width:min(100%,calc(100px * var(--ratio)));height:auto;aspect-ratio:var(--ratio);flex:none;box-shadow:1px 5px 9px #12203924}
 .mobile-live-copy{min-width:0}
 .mobile-live-eyebrow{display:block;font-size:11px;font-weight:700;letter-spacing:.07em;color:var(--blue);margin-bottom:3px}
 .mobile-live-copy>strong{display:block;font-size:16px;line-height:1.25;color:var(--ink)}
 .mobile-live-specs{display:block;font-size:13px;line-height:1.4;color:var(--muted);margin-top:4px;overflow-wrap:anywhere}
 .mobile-live-actions{display:flex;align-items:center;flex-wrap:wrap;gap:0 9px;margin-top:5px}
 .mobile-live-actions .mobile-preview-toggle{display:inline-flex;align-items:center;gap:6px;margin:0;min-height:44px;padding:8px 10px;border:1px solid #d9e0fc;border-radius:8px;background:#f0f3ff;color:var(--blue);font-size:14px;line-height:1.2}
 .mobile-live-actions .icon{width:17px;height:17px;flex:none}
 .mobile-live-actions small{font-size:11px;line-height:1.4;color:var(--muted)}
 .studio-panel :is(input,select,textarea,button),#step-title,#studio-status{scroll-margin-top:calc(var(--live-preview-height,146px) + 24px);scroll-margin-bottom:24px}
 .mobile-live-preview.is-keyboard-compact{grid-template-columns:76px minmax(0,1fr);gap:12px;padding-block:7px}
 .mobile-live-preview.is-keyboard-compact .mobile-live-stage{height:76px}
 .mobile-live-preview.is-keyboard-compact .label-art{width:min(100%,calc(60px * var(--ratio)))}
 .mobile-live-preview.is-keyboard-compact .mobile-live-eyebrow,.mobile-live-preview.is-keyboard-compact .mobile-live-actions small{display:none}
 .mobile-live-preview.is-keyboard-compact .mobile-live-actions{margin-top:2px}
}
@media(max-width:540px){
 .hero-delivery{gap:10px}
 .hero-delivery-card{padding:15px 13px}
 .hero-delivery-place{font-size:16px}
 .hero-delivery-service{font-size:12px}
 .hero-delivery-card strong{font-size:21px}
 .hero-delivery-note{font-size:13px;margin-bottom:20px}
 .mobile-live-preview{margin-inline:14px;grid-template-columns:104px minmax(0,1fr);gap:12px;padding-right:10px}
}
@media(max-width:380px){
 .hero-delivery-card{padding:14px 11px}
 .hero-delivery-card strong{font-size:20px}
 .hero-delivery-place svg{width:18px;height:18px}
 .mobile-live-preview{margin-inline:10px;gap:10px}
 .mobile-live-copy>strong{font-size:15px}
}

/* Small functional accents. Text, selection and primary actions stay PLIKA blue.
   The darker icon inks keep contrast on their pastel tiles. */
[data-accent="citrus"]{--accent-ink:#4e6b20;--accent-soft:#f0f5d9}
[data-accent="sky"]{--accent-ink:#096d87;--accent-soft:#e6f4f8}
[data-accent="rose"]{--accent-ink:#a73464;--accent-soft:#faeaf1}
[data-accent="violet"]{--accent-ink:#7042a8;--accent-soft:#f0eafb}
[data-accent="orange"]{--accent-ink:#a84b18;--accent-soft:#fff0e5}
[data-accent="blue"]{--accent-ink:#263fe8;--accent-soft:#edf0ff}
.header-create-short,.hero-eyebrow-mobile,.nav-intro,.nav-copy small,.nav-arrow,.menu-close-icon,.nav-backdrop{display:none}
.header .nav a{gap:7px}
.nav-icon{display:grid;place-items:center;color:var(--accent-ink,var(--blue));flex:none}
.nav-icon svg{width:17px;height:17px}
.header .nav a[aria-current="page"] .nav-icon{color:#fff}
.header .nav-copy{min-width:0}
.use-grid .choice-card{position:relative}
.use-grid .choice-icon{display:grid;place-items:center;width:44px;height:44px;margin-bottom:15px;border-radius:12px;color:var(--accent-ink);background:var(--accent-soft)}
.use-grid .choice-icon .icon{color:inherit;width:26px;height:26px;margin:0}
.use-grid .choice-copy{display:block;min-width:0}
.use-grid .choice-selected{position:absolute;right:13px;top:13px;display:grid;place-items:center;width:20px;height:20px;border:1px solid #b8c2d1;border-radius:50%;color:#fff;background:#fff}
.use-grid .choice-selected .icon{width:13px;height:13px;color:inherit;opacity:0}
.use-grid .choice-card.on .choice-selected{background:var(--blue);border-color:var(--blue)}
.use-grid .choice-card.on .choice-selected .icon{opacity:1}
.stepper button>span:first-child,.stepper button.current>span:first-child,.stepper button.completed>span:first-child{color:var(--accent-ink);background:var(--accent-soft);border-color:var(--accent-ink)}
.quick-facts>div:nth-child(1)>svg{color:#096d87;background:#e6f4f8}
.quick-facts>div:nth-child(2)>svg{color:#7042a8;background:#f0eafb}
.quick-facts>div:nth-child(3)>svg{color:#a73464;background:#faeaf1}

/* The dropdown floats below the header instead of stretching it or squeezing
   four pills into a phone-width row. Without JS, the links remain in flow. */
@media(max-width:1040px){
 .header .header-inner{height:auto;min-height:72px;gap:12px;padding-block:12px}
 .header .nav{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;width:100%;padding:14px;border:1px solid #dfe4ef;border-radius:18px;background:#fff;text-align:left}
 .js .header .nav{position:absolute;inset:calc(100% + 8px) 16px auto;width:auto;margin:0;max-height:calc(100svh - var(--header-height,72px) - 28px);overflow-y:auto;overscroll-behavior:contain;display:none;box-shadow:0 16px 38px #151d321c}
 .js .header .nav.is-open{display:grid}
 .header .nav-intro{display:block;margin:2px 10px 6px;font-size:11px;letter-spacing:.1em;font-weight:700;color:var(--muted)}
 .header .nav a{display:grid;grid-template-columns:44px minmax(0,1fr) 18px;align-items:center;gap:13px;min-height:72px;padding:12px 10px;border:1px solid transparent;border-radius:12px;background:#fff;color:var(--ink);text-align:left;white-space:normal}
 .header .nav a:hover,.header .nav a[aria-current="page"]{background:#f5f7fc;border-color:#dfe4ef;color:var(--blue)}
 .header .nav a:focus-visible{outline:3px solid var(--blue);outline-offset:0}
 .header .nav a .nav-icon,.header .nav a[aria-current="page"] .nav-icon{width:44px;height:44px;border-radius:12px;background:var(--accent-soft);color:var(--accent-ink)}
 .header .nav-icon svg{width:24px;height:24px}
 .header .nav-name{display:block;font-size:17px;line-height:1.25;font-weight:700}
 .header .nav-copy small{display:block;font-size:13px;line-height:1.4;font-weight:400;color:var(--muted);margin-top:4px}
 .header .nav-arrow{display:grid;place-items:center;color:#6b7891}
 .header .nav-arrow svg{width:18px;height:18px}
 .js .header .menu-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:44px;width:44px;min-height:44px;height:44px;border:1px solid #d8dff4;border-radius:50%;padding:10px;background:#fff}
 .header .menu-toggle svg{width:22px;height:22px;flex:none}
 .header .menu-toggle[aria-expanded="true"]{background:#eef1ff;border-color:var(--blue)}
 .menu-toggle[aria-expanded="true"] .menu-open-icon{display:none}
 .menu-toggle[aria-expanded="true"] .menu-close-icon{display:block}
 .nav-backdrop:not([hidden]){position:fixed;inset:var(--header-height,72px) 0 0;z-index:9;display:block;width:100%;height:auto;padding:0;border:0;border-radius:0;background:#151d3229;cursor:default;touch-action:none}
 html.nav-is-open{overflow:hidden}
}

/* Art-directed phone cover: existing complete roll photograph first. The
   desktop composition and its image are deliberately left unchanged. */
@media(max-width:800px){
 .hero{display:flex;flex-direction:column;background:#f7f3ed}
 .hero .hero-photo{order:0;align-self:center;width:min(100%,480px);margin-inline:auto}
 .hero .hero-photo img{display:block;width:100%;height:auto;max-height:none;aspect-ratio:4/3;object-fit:contain;background:#f7f3ed}
 .hero .hero-photo:before{inset:auto 0 0;height:24px;background:linear-gradient(transparent,#f7f3ed)}
 .hero .hero-copy{order:1;width:100%;max-width:520px;margin:0 auto;padding:20px 24px 30px;background:#f7f3ed}
 .hero .eyebrow{display:flex;align-items:center;gap:8px;margin:0 0 13px;font-size:11px;line-height:1.4;letter-spacing:.055em;max-width:none}
 .hero-eyebrow-full{display:none}
 .hero-eyebrow-mobile{display:inline}
 .hero .eyebrow .square{width:11px;height:11px;flex:none;margin:0}
 .hero h1{font-size:clamp(33px,9vw,43px);line-height:1.04;letter-spacing:-.035em}
 .hero .hero-delivery{grid-template-columns:minmax(0,1fr);gap:10px;margin-top:23px;max-width:none}
 .hero .hero-delivery-card{display:grid;grid-template-columns:105px minmax(0,1fr);grid-template-areas:"place order" "service receive";column-gap:18px;row-gap:4px;align-items:start;padding:15px 17px;border-radius:13px;box-shadow:none}
 .hero .hero-delivery-place{grid-area:place;justify-content:flex-start;gap:6px;font-size:16px;line-height:1.3}
 .hero .hero-delivery-place svg{width:18px;height:18px}
 .hero .hero-delivery-service{grid-area:service;font-size:11px;line-height:1.4;margin:0}
 .hero .hero-delivery-order{grid-area:order;font-size:13px;line-height:1.3;margin:0}
 .hero .hero-delivery-card strong{grid-area:receive;font-size:19px;line-height:1.15;letter-spacing:-.02em;max-width:none;margin:0}
 .hero .hero-delivery-note{font-size:12px;line-height:1.5;margin:11px 0 20px}
 .hero .hero-actions{display:flex;flex-direction:row;align-items:center;gap:10px 16px}
 .hero .hero-actions .button{font-size:14px;min-height:48px;padding:13px 17px;gap:10px}
 .hero .hero-actions .button svg{width:18px;height:18px}
 .hero .hero-actions .underlink{display:inline-flex;align-items:center;min-height:44px;font-size:13px}
 .hero .opening-note{font-size:13px;line-height:1.5;margin-top:19px}
}
@media(max-width:600px){
 .use-grid{grid-template-columns:minmax(0,1fr);gap:11px}
 .use-grid .choice-card{display:grid;grid-template-columns:44px minmax(0,1fr) 20px;align-items:center;gap:14px;padding:16px}
 .use-grid .choice-icon{margin:0}
 .use-grid .choice-card .choice-copy b{font-size:16px;line-height:1.3}
 .use-grid .choice-card .choice-copy small{font-size:14px;line-height:1.45;margin-top:4px}
 .use-grid .choice-selected{position:static;align-self:center}
}
@media(max-width:540px){
 .header .header-inner{width:calc(100% - 32px);min-height:68px;gap:8px;padding-block:10px}
 .header .brand img{width:105px}
 .header .header-action-group{gap:5px}
 .header-create-full{display:none}
 .header-create-short{display:inline}
 .header .button{font-size:12px;padding-inline:13px;min-height:44px}
 .header .cart-link{min-width:40px;font-size:12px;gap:3px}
 .header .cart-link svg{width:20px;height:20px}
 .hero .hero-copy{padding:20px 20px 28px}
 .hero h1{font-size:clamp(32px,8.8vw,39px)}
 .hero .hero-delivery-card{grid-template-columns:98px minmax(0,1fr);column-gap:14px;padding:14px}
 .hero .hero-delivery-card strong{font-size:18px}
}
@media(max-width:380px){
 .header .brand img{width:92px}
 .header .button{padding-inline:11px}
 .js .header .nav{left:12px;right:12px;padding:11px}
 .header .nav a{gap:11px;padding-inline:8px}
 .header .nav-copy small{font-size:12px}
 .hero .hero-delivery-card{grid-template-columns:93px minmax(0,1fr);column-gap:12px}
 .hero .hero-actions{gap:8px 12px}
 .hero .hero-actions .button{padding-inline:14px}
 .use-grid .choice-card{gap:11px;padding:14px}
}