/*!**************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./node_modules/@fontsource/dm-sans/400.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************/
/* dm-sans-latin-ext-400-normal */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_next/static/media/dm-sans-latin-ext-400-normal.1094bc4c.woff2) format('woff2'), url(/_next/static/media/dm-sans-latin-ext-400-normal.8d0900be.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* dm-sans-latin-400-normal */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_next/static/media/dm-sans-latin-400-normal.86f93955.woff2) format('woff2'), url(/_next/static/media/dm-sans-latin-400-normal.d4745557.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./node_modules/@fontsource/dm-sans/500.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************/
/* dm-sans-latin-ext-500-normal */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/_next/static/media/dm-sans-latin-ext-500-normal.e9ce3c5e.woff2) format('woff2'), url(/_next/static/media/dm-sans-latin-ext-500-normal.f4f886b7.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* dm-sans-latin-500-normal */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/_next/static/media/dm-sans-latin-500-normal.a5bbb6f1.woff2) format('woff2'), url(/_next/static/media/dm-sans-latin-500-normal.7bec3d6f.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./node_modules/@fontsource/dm-sans/600.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************/
/* dm-sans-latin-ext-600-normal */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/_next/static/media/dm-sans-latin-ext-600-normal.159e4722.woff2) format('woff2'), url(/_next/static/media/dm-sans-latin-ext-600-normal.677c81bc.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* dm-sans-latin-600-normal */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/_next/static/media/dm-sans-latin-600-normal.23063a26.woff2) format('woff2'), url(/_next/static/media/dm-sans-latin-600-normal.486e2b2e.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./node_modules/@fontsource/dm-sans/700.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************/
/* dm-sans-latin-ext-700-normal */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/_next/static/media/dm-sans-latin-ext-700-normal.dbe25c4d.woff2) format('woff2'), url(/_next/static/media/dm-sans-latin-ext-700-normal.53df5e90.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* dm-sans-latin-700-normal */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/_next/static/media/dm-sans-latin-700-normal.96e0e764.woff2) format('woff2'), url(/_next/static/media/dm-sans-latin-700-normal.9266daac.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
:root {
  --paper: #f8f6f2;
  --paper-deep: #f1ece6;
  --surface: #ffffff;
  --ink: #272322;
  --muted: #817977;
  --line: #e6dfdb;
  --line-strong: #d2c7c3;
  --coral: #ff382f;
  --coral-deep: #e92e27;
  --blush: #d89a9d;
  --soft-coral: #fde6e3;
  --green: #63725f;
  --radius: 18px;
  --small-radius: 12px;
}

/* Storefront */

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

.store-root { min-height: 100vh; background: #fbfaf7; }
.shop-home { width: min(1320px, calc(100% - 48px)); margin: 0 auto; padding: 58px 0 100px; }
.shop-home-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, .8fr); align-items: stretch; grid-gap: clamp(28px, 5vw, 72px); gap: clamp(28px, 5vw, 72px); padding-bottom: 45px; border-bottom: 1px solid var(--line); }
.shop-home-heading > div { align-self: center; }
.shop-home-heading h1 { margin: 0; font-family: Georgia, serif; font-size: clamp(48px, 5.2vw, 74px); font-weight: 400; line-height: .98; letter-spacing: -.055em; }
.shop-home-heading > div > p { max-width: 650px; margin: 18px 0 0; color: var(--muted); font-size: 16px; line-height: 1.6; }
.own-design-card { display: grid; min-height: 190px; grid-template-columns: auto 1fr auto; align-items: center; grid-gap: 18px; gap: 18px; padding: 28px; overflow: hidden; border: 1px solid rgba(255, 56, 47, .23); border-radius: 22px; background: linear-gradient(125deg, #fff0ed 0%, #f8efff 54%, #e9faf7 100%); box-shadow: 0 18px 48px rgba(80, 52, 60, .08); transition: transform 180ms ease, box-shadow 180ms ease; }
.own-design-card:hover { box-shadow: 0 22px 55px rgba(80, 52, 60, .13); transform: translateY(-3px); }
.own-design-icon { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 16px; background: #fff; color: var(--coral-deep); box-shadow: 0 9px 25px rgba(99, 63, 70, .1); }
.own-design-card > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.own-design-card small { color: var(--coral-deep); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.own-design-card strong { font-family: Georgia, serif; font-size: clamp(23px, 2.1vw, 31px); font-weight: 400; line-height: 1.05; letter-spacing: -.035em; }
.own-design-card em { color: var(--muted); font-size: 13px; font-style: normal; line-height: 1.45; }
.shop-home-products { padding-top: 42px; }
.shop-home-products-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 25px; }
.shop-home-products-heading > div { display: flex; flex-direction: column; gap: 4px; }
.shop-home-products-heading span { color: var(--coral-deep); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.shop-home-products-heading h2 { margin: 0; font-size: 27px; letter-spacing: -.035em; }
.shop-home-products-heading > a { display: inline-flex; min-height: 44px; align-items: center; gap: 7px; padding: 0 15px; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 700; }
.store-header { position: -webkit-sticky; position: sticky; z-index: 60; top: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 78px; padding: 8px clamp(20px, 4vw, 64px); border-bottom: 1px solid rgba(39, 35, 34, .09); background: rgba(251, 250, 247, .92); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.store-logo { display: block; width: 126px; height: 54px; }
.store-logo img { width: 100%; height: 100%; object-fit: contain; }
.store-header nav { display: flex; align-items: center; gap: 32px; }
.store-header nav a { position: relative; padding: 14px 0; font-size: 14px; font-weight: 650; }
.store-header nav a::after { position: absolute; right: 0; bottom: 8px; left: 0; height: 2px; background: var(--coral); content: ""; transform: scaleX(0); transition: transform 180ms ease; }
.store-header nav a:hover::after { transform: scaleX(1); }
.store-header-actions { display: flex; justify-content: flex-end; align-items: center; gap: 9px; }
.store-account-link, .store-cart-link { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 700; }
.store-account-link { padding: 0 16px; }
.store-cart-link { min-width: 58px; padding: 0 14px; border-color: var(--ink); background: var(--ink); color: #fff; }
.store-menu-toggle { display: none; width: 44px; height: 44px; place-items: center; border-radius: 50%; background: #fff; }
.store-hero { display: grid; width: min(1420px, calc(100% - 48px)); min-height: 690px; grid-template-columns: .92fr 1.08fr; align-items: center; grid-gap: clamp(36px, 6vw, 100px); gap: clamp(36px, 6vw, 100px); margin: 0 auto; padding: 42px 0 70px; }
.store-hero-copy { max-width: 650px; padding-left: clamp(0px, 3vw, 40px); }
.store-eyebrow { display: inline-block; margin-bottom: 16px; color: var(--coral-deep); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.store-hero h1, .catalog-heading h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(54px, 6.2vw, 94px); font-weight: 400; line-height: .94; letter-spacing: -.065em; }
.store-hero-copy > p { max-width: 590px; margin: 28px 0; color: #6e6764; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.55; letter-spacing: -.02em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; }
.primary-store-button, .secondary-store-button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 9px; padding: 0 22px; border-radius: 999px; font-size: 14px; font-weight: 750; transition: transform 170ms ease, box-shadow 170ms ease, background 170ms ease; }
.primary-store-button { border: 1px solid var(--ink); background: var(--ink); color: #fff; box-shadow: 0 10px 25px rgba(39, 35, 34, .12); }
.primary-store-button:hover { background: var(--coral-deep); border-color: var(--coral-deep); box-shadow: 0 13px 30px rgba(233, 46, 39, .18); transform: translateY(-2px); }
.primary-store-button:disabled { cursor: wait; opacity: .65; transform: none; }
.secondary-store-button { border: 1px solid var(--line-strong); background: #fff; }
.secondary-store-button:hover { border-color: var(--ink); transform: translateY(-2px); }
.compact-button { min-height: 44px; padding: 0 17px; }
.hero-assurances { display: flex; flex-wrap: wrap; gap: 23px; margin-top: 27px; color: var(--muted); font-size: 13px; font-weight: 650; }
.hero-assurances span { display: inline-flex; align-items: center; gap: 7px; }
.store-hero-visual { position: relative; min-height: 600px; overflow: hidden; border-radius: 36px 36px 120px 36px; background: #e8dcd6; box-shadow: 0 28px 80px rgba(70, 49, 42, .13); }
.store-hero-visual::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(34, 22, 18, .34)); content: ""; }
.store-hero-visual img { object-fit: cover; }
.store-hero-visual > span { position: absolute; z-index: 2; right: 36px; bottom: 33px; color: #fff; font-family: Georgia, serif; font-size: 25px; line-height: 1.1; text-align: right; }
.store-hero-visual strong { font-size: 38px; font-style: italic; font-weight: 400; }
.store-section { width: min(1320px, calc(100% - 48px)); margin: 0 auto; padding: 90px 0; }
.featured-products { border-top: 1px solid var(--line); }
.store-section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 38px; }
.store-section-heading h2, .custom-callout h2, .related-products h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(40px, 4.5vw, 65px); font-weight: 400; letter-spacing: -.05em; line-height: 1; }
.store-section-heading > p { max-width: 430px; margin: 0 0 5px; color: var(--muted); font-size: 16px; line-height: 1.55; }
.store-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 20px; gap: 20px; }
.store-product-card { display: flex; min-width: 0; flex-direction: column; gap: 18px; }
.store-product-image { position: relative; display: block; aspect-ratio: 1 / .92; overflow: hidden; border-radius: 22px; background: #f0ebe6; }
.store-product-image::after { position: absolute; inset: 0; border: 1px solid rgba(39, 35, 34, .07); border-radius: inherit; content: ""; pointer-events: none; }
.store-product-image img { object-fit: cover; transition: transform 420ms cubic-bezier(.2,.8,.2,1); }
.ready-artwork { position: absolute; z-index: 1; top: 45%; left: 50%; display: flex; align-items: center; flex-direction: column; color: #e74234; font-family: Georgia, serif; font-size: clamp(10px, 1vw, 18px); line-height: .86; letter-spacing: -.04em; text-align: center; transform: translate(-50%, -50%) rotate(-3deg); text-shadow: 0 1px rgba(255,255,255,.35); }
.ready-artwork b { font-weight: 700; }.ready-artwork b:last-child { font-style: italic; }
.ready-artwork.is-large { font-size: clamp(18px, 2vw, 34px); }
.art-soft-launch-hoodie { top: 47%; }.art-tiny-wins-tumbler { top: 55%; font-size: clamp(8px, .8vw, 14px); }.art-tiny-wins-tumbler.is-large { font-size: clamp(14px, 1.5vw, 25px); }.art-carry-good-things-tote { top: 59%; font-size: clamp(9px, .85vw, 15px); }.art-carry-good-things-tote.is-large { font-size: clamp(15px, 1.6vw, 27px); }.art-offline-club-cap { top: 42%; font-family: "DM Sans", sans-serif; font-size: clamp(7px, .7vw, 12px); line-height: .9; letter-spacing: .02em; }.art-offline-club-cap.is-large { font-size: clamp(12px, 1.3vw, 21px); }.art-main-character-phone-case { top: 55%; font-size: clamp(7px, .7vw, 12px); }.art-main-character-phone-case.is-large { font-size: clamp(12px, 1.3vw, 21px); }
.store-product-card:hover img { transform: scale(1.035); }
.store-product-image i { position: absolute; z-index: 2; top: 14px; left: 14px; padding: 7px 11px; border-radius: 999px; background: var(--coral); color: #fff; font-size: 11px; font-style: normal; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.store-product-copy { display: flex; justify-content: space-between; gap: 18px; }
.store-product-copy > span { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.store-product-copy small { color: var(--coral-deep); font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.store-product-copy strong { font-size: 19px; }
.store-product-copy em { overflow: hidden; color: var(--muted); font-size: 13px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.store-product-copy > span:last-child { flex: 0 0 auto; align-items: flex-end; }
.store-product-copy b { font-size: 16px; }
.text-link { display: inline-flex; min-height: 44px; align-items: center; gap: 8px; margin-top: 34px; border-bottom: 1px solid var(--ink); font-size: 14px; font-weight: 750; }
.custom-callout { display: grid; grid-template-columns: 1.03fr .97fr; grid-gap: clamp(50px, 8vw, 120px); gap: clamp(50px, 8vw, 120px); align-items: center; }
.custom-callout-image { position: relative; min-height: 610px; overflow: hidden; border-radius: 120px 30px 30px; background: #ede7e1; }
.custom-callout-image img { object-fit: cover; }
.custom-callout > div:last-child > p { max-width: 560px; margin: 24px 0 30px; color: var(--muted); font-size: 17px; line-height: 1.65; }
.custom-callout ol { display: grid; grid-gap: 18px; gap: 18px; margin: 0 0 32px; padding: 0; list-style: none; }
.custom-callout li { display: flex; align-items: center; gap: 15px; }
.custom-callout li > b { display: grid; width: 38px; height: 38px; place-items: center; flex: 0 0 auto; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--coral-deep); }
.custom-callout li span { display: flex; flex-direction: column; gap: 2px; }
.custom-callout li strong { font-size: 15px; }
.custom-callout li small { color: var(--muted); font-size: 13px; }
.store-values { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 0; gap: 0; border-top: 1px solid var(--line); }
.store-values article { padding: 0 40px; border-right: 1px solid var(--line); }
.store-values article:first-child { padding-left: 0; }.store-values article:last-child { padding-right: 0; border: 0; }
.store-values strong { font-family: Georgia, serif; font-size: 24px; font-weight: 400; }
.store-values p { margin: 10px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.store-footer { display: flex; width: min(1320px, calc(100% - 48px)); justify-content: space-between; gap: 25px; margin: 0 auto; padding: 38px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.store-footer strong { color: var(--ink); }

.catalog-page, .product-page, .cart-page, .checkout-page, .account-page { width: min(1320px, calc(100% - 48px)); margin: 0 auto; padding: 70px 0 110px; }
.catalog-heading { display: grid; grid-template-columns: 1fr .45fr; align-items: end; grid-gap: 60px; gap: 60px; margin-bottom: 55px; }
.catalog-heading .store-eyebrow { grid-column: 1 / -1; margin-bottom: -30px; }
.catalog-heading p { margin: 0 0 7px; color: var(--muted); font-size: 17px; line-height: 1.6; }
.product-detail { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(400px, .72fr); grid-gap: clamp(45px, 7vw, 110px); gap: clamp(45px, 7vw, 110px); align-items: start; }
.product-main-image { position: relative; min-height: 680px; overflow: hidden; border-radius: 28px; background: #efeae4; }
.product-main-image img { object-fit: cover; }
.product-main-image > .product-badge { position: absolute; z-index: 2; top: 18px; left: 18px; padding: 8px 13px; border-radius: 999px; background: var(--coral); color: #fff; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.product-gallery > p { color: var(--muted); font-size: 12px; }
.product-info { padding-top: 18px; }
.product-info h1 { margin: 0; font-family: Georgia, serif; font-size: clamp(46px, 5vw, 72px); font-weight: 400; line-height: .98; letter-spacing: -.055em; }
.product-tagline { margin: 15px 0 20px; color: var(--muted); font-size: 18px; }
.product-price { display: block; margin-bottom: 24px; font-size: 22px; }
.product-description { padding: 20px 0; border-top: 1px solid var(--line); color: #625b58; font-size: 15px; line-height: 1.65; }
.product-purchase { display: grid; grid-gap: 21px; gap: 21px; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.product-purchase fieldset { margin: 0; padding: 0; border: 0; }
.product-purchase legend { display: flex; width: 100%; justify-content: space-between; margin-bottom: 10px; font-size: 13px; font-weight: 700; }
.product-purchase legend strong { color: var(--muted); font-weight: 500; }
.choice-row { display: flex; flex-wrap: wrap; gap: 7px; }
.choice-row button { min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 13px; font-weight: 650; }
.choice-row button.is-active { border-color: var(--ink); background: var(--ink); color: #fff; }
.purchase-actions { display: grid; grid-template-columns: auto 1fr; grid-gap: 10px; gap: 10px; }
.quantity-control { display: inline-flex; min-height: 50px; align-items: center; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; }
.quantity-control button { display: grid; width: 42px; height: 44px; place-items: center; background: transparent; }
.quantity-control strong { min-width: 28px; text-align: center; }
.product-facts { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 12px; gap: 12px; padding: 21px 0; }
.product-facts span { display: flex; flex-direction: column; gap: 4px; }
.product-facts small { color: var(--muted); font-size: 11px; text-transform: uppercase; }.product-facts strong { font-size: 13px; }
.product-info ul { display: grid; grid-gap: 9px; gap: 9px; margin: 0 0 22px; padding: 0; list-style: none; color: #665f5c; font-size: 13px; }
.product-info li { display: flex; align-items: center; gap: 8px; }.product-info li svg { color: var(--green); }
.customise-link { display: flex; align-items: center; gap: 12px; padding: 17px; border-radius: 15px; background: var(--soft-coral); }
.customise-link > svg { color: var(--coral-deep); }.customise-link span { display: flex; flex-direction: column; gap: 3px; }.customise-link small { color: var(--muted); font-size: 12px; }
.related-products { padding-top: 100px; }

.cart-layout, .checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-gap: clamp(40px, 7vw, 100px); gap: clamp(40px, 7vw, 100px); align-items: start; }
.cart-items h1, .checkout-form h1, .checkout-complete h1 { margin: 0 0 32px; font-family: Georgia, serif; font-size: clamp(45px, 5vw, 70px); font-weight: 400; letter-spacing: -.05em; }
.cart-line { display: grid; grid-template-columns: 120px 1fr auto auto; align-items: center; grid-gap: 22px; gap: 22px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.cart-line img { width: 120px; height: 120px; object-fit: cover; border-radius: 14px; }
.cart-line-image { position: relative; display: block; width: 120px; height: 120px; overflow: hidden; border-radius: 14px; }.cart-line-image .ready-artwork { font-size: 7px; }
.cart-line-copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 6px; }.cart-line-copy > a { font-size: 16px; font-weight: 750; }.cart-line-copy small { color: var(--muted); font-size: 13px; }.cart-line-copy button { display: inline-flex; min-height: 35px; align-items: center; gap: 5px; padding: 0; background: transparent; color: var(--muted); font-size: 12px; }
.cart-summary-panel, .checkout-summary { position: -webkit-sticky; position: sticky; top: 104px; display: grid; grid-gap: 18px; gap: 18px; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 20px 60px rgba(51, 39, 34, .06); }
.cart-summary-panel h2, .checkout-summary h2 { margin: 0 0 8px; font-size: 20px; }.cart-summary-panel > span, .checkout-summary > span { display: flex; justify-content: space-between; gap: 20px; }.cart-summary-panel small, .checkout-summary small { color: var(--muted); font-size: 13px; }.cart-summary-panel > p { margin: -4px 0; color: var(--coral-deep); font-size: 12px; }.cart-summary-total, .checkout-total { padding-top: 18px; border-top: 1px solid var(--line); font-size: 19px; }.cart-summary-panel > small { text-align: center; line-height: 1.45; }
.empty-state { display: grid; min-height: 400px; place-items: center; align-content: center; text-align: center; }.empty-state h1, .empty-state h3 { margin: 0 0 10px; font-family: Georgia, serif; font-size: clamp(35px, 5vw, 60px); font-weight: 400; }.empty-state p { margin: 0 0 22px; color: var(--muted); }.cart-empty { min-height: 570px; }

.checkout-form { max-width: 760px; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 17px; gap: 17px; margin-bottom: 23px; }.form-grid label, .auth-form label { display: flex; flex-direction: column; gap: 7px; }.form-grid label.full { grid-column: 1 / -1; }.form-grid label > span, .auth-form label > span { font-size: 13px; font-weight: 700; }.form-grid input, .form-grid select, .auth-form input { width: 100%; min-height: 50px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: #fff; font-size: 14px; }.form-grid input:-moz-read-only { background: #f2efeb; color: var(--muted); }.form-grid input:read-only { background: #f2efeb; color: var(--muted); }.form-grid label small { color: var(--muted); font-weight: 400; }.form-error { padding: 12px 14px; border-radius: 9px; background: #fee9e7; color: #a3201b; font-size: 13px; }.checkout-honesty { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }.checkout-summary span small { display: flex; flex-direction: column; gap: 3px; }.checkout-summary em { font-style: normal; font-size: 11px; }.checkout-summary hr { width: 100%; border: 0; border-top: 1px solid var(--line); }.checkout-complete { max-width: 700px; margin: 70px auto; text-align: center; }.checkout-complete > svg { margin: 0 auto 22px; color: var(--green); }.checkout-complete p { margin: -8px auto 28px; color: var(--muted); font-size: 16px; line-height: 1.65; }

.auth-page, .admin-auth-page { display: grid; min-height: calc(100vh - 78px); place-items: center; padding: 50px 20px; background: radial-gradient(circle at 20% 10%, #fde8e5, transparent 38%), #f8f6f2; }.admin-auth-page { min-height: 100vh; background: #242120; }.auth-card { width: min(100%, 470px); padding: 38px; border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: 0 30px 80px rgba(45, 31, 27, .1); }.auth-card h1 { margin: 0; font-family: Georgia, serif; font-size: 43px; font-weight: 400; line-height: 1; letter-spacing: -.045em; }.auth-card > p { margin: 15px 0 24px; color: var(--muted); line-height: 1.55; }.auth-form { display: grid; grid-gap: 16px; gap: 16px; }.auth-form .primary-store-button { width: 100%; margin-top: 4px; }.auth-switch { margin: 3px 0 0; text-align: center; font-size: 13px; }.auth-switch a { color: var(--coral-deep); font-weight: 750; }.admin-mark { display: inline-block; margin-bottom: 18px; color: var(--coral); font: 800 11px/1 "DM Sans", sans-serif; letter-spacing: .14em; }
.account-heading { display: flex; justify-content: space-between; gap: 30px; align-items: flex-end; margin-bottom: 46px; }.account-heading h1 { margin: 0; font-family: Georgia, serif; font-size: clamp(45px, 6vw, 76px); font-weight: 400; letter-spacing: -.05em; }.account-heading p { margin: 8px 0 0; color: var(--muted); }.orders-panel { padding: 30px; border: 1px solid var(--line); border-radius: 22px; background: #fff; }.orders-panel h2 { margin: 0 0 20px; }.orders-panel .empty-state { min-height: 300px; }.order-list { display: grid; }.order-list article { display: flex; justify-content: space-between; gap: 30px; padding: 18px 0; border-top: 1px solid var(--line); }.order-list article > span { display: flex; flex-direction: column; gap: 4px; }.order-list article > span:last-child { align-items: flex-end; }.order-list small { color: var(--muted); }.order-list b { color: var(--coral-deep); font-size: 11px; text-transform: uppercase; }

.admin-page { min-height: 100vh; padding: 40px clamp(22px, 5vw, 76px); background: #f2f1ee; }.admin-page > header { display: flex; justify-content: space-between; align-items: center; gap: 30px; }.admin-page h1 { margin: 0; font-size: 36px; }.admin-page header > div:last-child { display: flex; align-items: center; gap: 12px; }.admin-page header a { font-size: 13px; font-weight: 700; }.admin-stats { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 16px; gap: 16px; margin: 36px 0; }.admin-stats article { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 16px; background: #fff; }.admin-stats small { color: var(--muted); font-size: 12px; text-transform: uppercase; }.admin-stats strong { font-size: 36px; }.admin-orders { padding: 28px; border-radius: 18px; background: #fff; }.admin-orders h2 { margin: 0 0 20px; }.admin-table-row { display: grid; grid-template-columns: 1fr 1.4fr .8fr .6fr; grid-gap: 18px; gap: 18px; padding: 15px 0; border-top: 1px solid var(--line); }.admin-table-row.heading { color: var(--muted); font-size: 11px; font-weight: 750; text-transform: uppercase; }.admin-table-row > span { display: flex; min-width: 0; flex-direction: column; gap: 3px; }.admin-table-row small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; }.admin-table-row b { color: var(--coral-deep); font-size: 11px; text-transform: uppercase; }

@media (max-width: 980px) {
  .shop-home-heading { grid-template-columns: 1fr; }.own-design-card { min-height: 165px; }
  .store-hero { min-height: auto; grid-template-columns: 1fr; padding-top: 65px; }.store-hero-copy { padding: 0; }.store-hero-visual { min-height: 560px; }.store-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.custom-callout { grid-template-columns: 1fr; }.custom-callout-image { min-height: 540px; }.catalog-heading { grid-template-columns: 1fr; gap: 25px; }.catalog-heading .store-eyebrow { margin-bottom: -5px; }.product-detail { grid-template-columns: 1fr; }.product-main-image { min-height: min(740px, 90vw); }.product-info { max-width: 720px; }.cart-layout, .checkout-layout { grid-template-columns: 1fr; }.cart-summary-panel, .checkout-summary { position: static; }.admin-table-row { grid-template-columns: 1fr 1.2fr .8fr; }.admin-table-row > span:last-child { display: none; }
}

@media (max-width: 720px) {
  .shop-home { width: min(100% - 28px, 1320px); padding: 38px 0 70px; }.shop-home-heading { gap: 26px; padding-bottom: 32px; }.shop-home-heading h1 { font-size: 48px; }.shop-home-heading > div > p { font-size: 15px; }.own-design-card { min-height: 0; grid-template-columns: auto 1fr; gap: 14px; padding: 20px 17px; }.own-design-card > svg { display: none; }.own-design-icon { width: 46px; height: 46px; border-radius: 13px; }.own-design-card strong { font-size: 23px; }.own-design-card em { font-size: 12px; }.shop-home-products { padding-top: 32px; }.shop-home-products-heading { align-items: flex-start; flex-direction: column; gap: 13px; }.shop-home-products-heading h2 { font-size: 25px; }
  .store-header { grid-template-columns: auto 1fr auto; min-height: 68px; padding: 7px 14px; }.store-logo { width: 105px; height: 48px; }.store-menu-toggle { display: grid; justify-self: end; order: 2; }.store-header-actions { order: 3; }.store-account-link { display: none; }.store-header nav { position: absolute; top: 68px; right: 0; left: 0; display: none; align-items: stretch; gap: 0; padding: 12px 18px 20px; border-bottom: 1px solid var(--line); background: #fff; box-shadow: 0 18px 30px rgba(39,35,34,.08); }.store-header nav.is-open { display: grid; }.store-header nav a { min-height: 48px; padding: 14px 5px; border-bottom: 1px solid var(--line); }.store-hero, .store-section, .catalog-page, .product-page, .cart-page, .checkout-page, .account-page, .store-footer { width: min(100% - 28px, 1320px); }.store-hero { gap: 38px; padding: 45px 0 55px; }.store-hero h1, .catalog-heading h1 { font-size: clamp(47px, 14vw, 68px); }.store-hero-copy > p { font-size: 16px; }.hero-actions { align-items: stretch; flex-direction: column; }.hero-actions a { width: 100%; }.store-hero-visual { min-height: 440px; border-radius: 26px 26px 70px 26px; }.store-hero-visual > span { right: 22px; bottom: 22px; font-size: 20px; }.store-hero-visual strong { font-size: 30px; }.store-section { padding: 62px 0; }.store-section-heading { align-items: flex-start; flex-direction: column; gap: 18px; }.store-product-grid { grid-template-columns: 1fr; gap: 35px; }.store-product-image { aspect-ratio: 1 / .9; }.custom-callout { gap: 38px; }.custom-callout-image { min-height: 430px; border-radius: 65px 22px 22px; }.store-values { grid-template-columns: 1fr; }.store-values article, .store-values article:first-child, .store-values article:last-child { padding: 23px 0; border-right: 0; border-bottom: 1px solid var(--line); }.store-values article:last-child { border: 0; }.store-footer { align-items: flex-start; flex-direction: column; }.catalog-page, .product-page, .cart-page, .checkout-page, .account-page { padding: 46px 0 80px; }.product-main-image { min-height: 112vw; }.product-info h1 { font-size: 49px; }.purchase-actions { grid-template-columns: 1fr; }.purchase-actions .quantity-control { width: 136px; justify-content: space-between; }.product-facts { grid-template-columns: 1fr; }.cart-line { grid-template-columns: 86px 1fr auto; gap: 13px; }.cart-line img { width: 86px; height: 86px; }.cart-line > .quantity-control { grid-column: 2; width: 120px; }.cart-line > strong { grid-column: 3; grid-row: 1; align-self: end; }.cart-summary-panel, .checkout-summary { padding: 22px; }.form-grid { grid-template-columns: 1fr; }.form-grid label.full { grid-column: auto; }.auth-card { padding: 28px 22px; }.auth-card h1 { font-size: 37px; }.account-heading { align-items: flex-start; flex-direction: column; }.orders-panel { padding: 20px; }.order-list article { align-items: flex-start; flex-direction: column; }.order-list article > span:last-child { align-items: flex-start; }.admin-page > header { align-items: flex-start; flex-direction: column; }.admin-stats { grid-template-columns: 1fr; }.admin-table-row { grid-template-columns: 1fr; }.admin-table-row.heading { display: none; }.admin-table-row > span:last-child { display: flex; }
}

* {
  box-sizing: border-box;
}

html {
  background: var(--paper);
}

body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -0.025em;
}

body:has(.cart-overlay),
body:has(.ai-studio-overlay),
body:has(.product-picker-overlay),
body:has(.order-configurator-overlay),
body:has(.route-transition.is-active) {
  overflow: hidden;
}

button,
input,
textarea,
select {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

button,
a,
label {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
label:has(input:focus-visible) {
  outline: 3px solid rgba(255, 56, 47, .22);
  outline-offset: 2px;
}

img,
svg {
  display: block;
}

.app-root {
  min-height: 100vh;
}

.app-header {
  position: relative;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 74px;
  overflow: hidden;
  padding: 8px 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
}

.logo-button {
  display: inline-grid;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0;
  place-items: center;
  background: transparent;
}

.memomo-logo {
  position: relative;
  display: grid;
  width: 94px;
  height: 56px;
  place-items: center;
  overflow: hidden;
}

.memomo-logo img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}

.memomo-logo.is-compact {
  width: 58px;
  height: 68px;
}

.header-context {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.app-progress {
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-progress > span {
  width: 46px;
  height: 1px;
  background: var(--line-strong);
}

.app-progress button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 0;
  color: #aaa3a0;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
}

.app-progress button > span,
.app-progress button > svg {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
}

.app-progress button.is-done {
  color: var(--green);
}

.app-progress button.is-done svg {
  padding: 4px;
  border-color: var(--green);
  background: #edf1ea;
}

.app-progress button.is-current {
  color: var(--ink);
}

.app-progress button.is-current > span {
  border-color: var(--coral);
  background: var(--coral);
  color: #fff;
}

.header-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
}

.help-button,
.language-button,
.header-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  transition: border-color 160ms ease, background 160ms ease;
}

.help-button {
  border-color: transparent;
  color: var(--muted);
}

.header-cart {
  min-width: 54px;
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.help-button:hover,
.language-button:hover {
  border-color: var(--line-strong);
  background: var(--paper);
}

/* Product picker */

.picker-view {
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(42px, 6vw, 72px) 0 28px;
  animation: view-in 420ms cubic-bezier(.2, .8, .2, 1) both;
}

.picker-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr);
  align-items: flex-end;
  grid-gap: 50px;
  gap: 50px;
  margin-bottom: 34px;
}

.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 13px;
  color: var(--coral-deep);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.picker-heading h1 {
  margin: 0;
  font-size: clamp(42px, 5.5vw, 70px);
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.065em;
}

.picker-heading p {
  max-width: 430px;
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.product-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 14px;
  gap: 14px;
}

.product-choice {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 330px;
  flex-direction: column;
  overflow: hidden;
  padding: 17px 17px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  text-align: left;
  transition: border-color 200ms ease, transform 240ms cubic-bezier(.2, .8, .2, 1), background 200ms ease;
}

.product-choice::after {
  position: absolute;
  right: -50px;
  bottom: -80px;
  width: 190px;
  height: 190px;
  border: 28px solid rgba(255, 56, 47, .05);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.product-choice:hover {
  z-index: 2;
  border-color: var(--coral);
  transform: translateY(-5px);
}

.product-choice:active {
  transform: translateY(-1px) scale(.99);
}

.choice-topline {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.choice-topline svg {
  width: 34px;
  height: 34px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  transition: color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.product-choice:hover .choice-topline svg {
  border-color: var(--coral);
  color: var(--coral);
  transform: translateX(2px);
}

.choice-visual {
  position: relative;
  display: grid;
  height: 206px;
  place-items: center;
  overflow: hidden;
  border-radius: 14px;
}

.choice-visual::before {
  position: absolute;
  width: 190px;
  height: 128px;
  border-radius: 50%;
  background: var(--paper-deep);
  content: "";
  transform: rotate(-7deg);
}

.choice-hoodie .choice-visual::before,
.choice-phone .choice-visual::before {
  background: var(--soft-coral);
}

.choice-cap .choice-visual::before,
.choice-tote .choice-visual::before {
  background: #f0e1df;
}

.choice-visual .product-shape {
  position: relative;
  z-index: 1;
  width: 225px;
  height: 225px;
  transition: transform 260ms cubic-bezier(.2, .8, .2, 1);
}

.choice-phone .choice-visual .product-shape {
  width: 150px;
  height: 190px;
}

.choice-tumbler .choice-visual .product-shape {
  width: 170px;
  height: 205px;
}

.choice-cap .choice-visual .product-shape {
  width: 235px;
  height: 210px;
}

.product-choice:hover .choice-visual .product-shape {
  transform: translateY(-4px) rotate(-1.5deg) scale(1.025);
}

.choice-visual::before {
  position: absolute;
  inset: -24px;
  display: block;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: var(--paper-deep) var(--product-image) center / cover no-repeat;
  content: "";
  opacity: .34;
  filter: blur(18px) saturate(.8);
  transform: scale(1.08);
}

.choice-visual .product-photo,
.choice-phone .choice-visual .product-photo,
.choice-tumbler .choice-visual .product-photo,
.choice-cap .choice-visual .product-photo {
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  z-index: 1;
  inset: 0;
  object-fit: contain;
  border-radius: 14px;
}

.choice-copy {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-top: auto;
}

.choice-copy > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.choice-copy > span:last-child {
  flex: 0 0 auto;
  align-items: flex-end;
}

.choice-copy strong {
  font-size: 18px;
  line-height: 1.2;
}

.choice-copy small {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.choice-copy > span:last-child strong {
  color: var(--coral-deep);
}

.picker-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 24px 4px 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.picker-footer > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.picker-footer svg {
  color: var(--coral);
}

/* Studio shell */

.studio-view {
  display: grid;
  grid-template-columns: 310px minmax(420px, 1fr) 300px;
  min-height: calc(100vh - 74px);
  animation: view-in 420ms cubic-bezier(.2, .8, .2, 1) both;
}

.tool-panel,
.inspector-panel {
  position: relative;
  z-index: 3;
  min-width: 0;
  background: var(--surface);
}

.tool-panel {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
}

.panel-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 76px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}

.panel-heading > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.panel-heading span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.panel-heading strong {
  font-size: 16px;
}

.saved-state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-radius: 999px;
  background: #eef2eb;
  color: var(--green) !important;
}

.tool-navigation {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(248, 246, 242, .7));
}

.tool-tabs {
  display: grid;
  grid-template-columns: minmax(82px, 1.18fr) 12px repeat(3, minmax(0, 1fr));
  align-items: stretch;
  grid-gap: 5px;
  gap: 5px;
}

.tool-tabs .ai-studio-tab {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 58px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  overflow: hidden;
  padding: 6px 4px;
  border: 1px solid rgba(255, 56, 47, .24);
  border-radius: 11px;
  background: linear-gradient(125deg, #fff0ed 0%, #f6ecff 54%, #e8fbf7 100%);
  color: var(--ink);
  text-align: center;
  box-shadow: 0 8px 22px rgba(107, 75, 91, .1), inset 0 0 0 1px rgba(255, 255, 255, .65);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.ai-studio-tab::before {
  position: absolute;
  top: -50%;
  left: -42%;
  width: 28%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .76), transparent);
  content: "";
  transform: rotate(18deg);
  animation: ai-tab-shine 3.4s ease-in-out infinite;
}

.tool-tabs .ai-studio-tab:hover {
  border-color: rgba(255, 56, 47, .46);
  box-shadow: 0 13px 34px rgba(107, 75, 91, .15), inset 0 0 0 1px rgba(255, 255, 255, .75);
  transform: translateY(-1px);
}

.tool-tabs .ai-studio-tab.is-active {
  border-color: transparent;
  background: linear-gradient(125deg, #ff493f 0%, #d8518d 52%, #6e6bc6 100%);
  color: #fff;
  box-shadow: 0 10px 26px rgba(194, 57, 92, .28);
}

.ai-tab-icon {
  position: relative;
  z-index: 1;
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, .78);
  color: var(--coral-deep);
  box-shadow: 0 7px 18px rgba(91, 55, 76, .12);
}

.ai-tab-icon svg {
  width: 16px;
  height: 16px;
}

.ai-studio-tab.is-active .ai-tab-icon {
  background: rgba(255, 255, 255, .18);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}

.ai-tab-icon i {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: ai-sparkle 1.8s ease-in-out infinite;
}

.ai-tab-icon i:first-of-type { top: 3px; right: 3px; }
.ai-tab-icon i:last-of-type { bottom: 3px; left: 3px; animation-delay: .6s; }

.ai-tab-copy {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.ai-tab-copy strong {
  font-size: 9px;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.ai-tab-copy small {
  overflow: hidden;
  color: var(--muted);
  font-size: 8px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-studio-tab.is-active .ai-tab-copy small {
  color: rgba(255, 255, 255, .76);
}

.ai-tab-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 1;
  padding: 2px 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .74);
  color: #9d456c;
  font-size: 5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ai-studio-tab.is-active .ai-tab-badge {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

.tool-tabs button {
  display: flex;
  min-width: 0;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  transition: background 160ms ease, color 160ms ease;
}

.tool-tab-divider {
  display: grid;
  place-items: center;
  color: var(--line-strong);
  font-size: 18px;
  font-weight: 300;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.tool-tabs button:hover {
  background: var(--paper);
  color: var(--ink);
}

.tool-tabs button.is-active {
  background: var(--ink);
  color: #fff;
}

.tool-content {
  min-height: 0;
  flex: 1 1;
  overflow-y: auto;
  padding: 20px;
  scrollbar-width: thin;
}

.ai-guide {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 17px;
  padding: 11px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--soft-coral), #fff7f4);
}

.ai-guide > span {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  border-radius: 50%;
  background: var(--coral);
  color: #fff;
}

.ai-guide p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.ai-guide strong {
  display: block;
  margin-bottom: 2px;
  color: var(--ink);
  font-size: 11px;
}

.ai-studio-flow {
  animation: view-in 240ms ease both;
}

.ai-guide-featured {
  position: relative;
  margin-bottom: 13px;
  padding: 13px 48px 13px 12px;
  border: 1px solid rgba(255, 56, 47, .16);
  background: linear-gradient(135deg, #fff0ed, #f8edff 56%, #ecfbf7);
  box-shadow: 0 10px 26px rgba(83, 59, 72, .07);
}

.ai-guide-featured > span {
  background: linear-gradient(145deg, #ff493f, #b34b9b);
  box-shadow: 0 7px 16px rgba(194, 57, 92, .2);
}

.ai-guide-featured p > small {
  display: block;
  margin-bottom: 3px;
  color: #a34873;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ai-guide-featured > i {
  position: absolute;
  top: 11px;
  right: 10px;
  padding: 4px 6px;
  border-radius: 999px;
  background: #fff;
  color: #a34873;
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(83, 59, 72, .08);
}

.ai-progress {
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  align-items: center;
  grid-gap: 4px;
  gap: 4px;
  margin-bottom: 10px;
}

.ai-progress > i {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
}

.ai-progress > i.is-complete,
.ai-progress > i.is-current {
  background: linear-gradient(90deg, var(--coral), #c15292);
}

.ai-progress > i.is-current {
  animation: ai-progress-pulse 1.6s ease-in-out infinite;
}

.ai-progress span {
  margin-left: 5px;
  color: var(--muted);
  font-size: 7px;
  font-weight: 800;
  white-space: nowrap;
}

.ai-brief-pills {
  display: flex;
  gap: 5px;
  margin-bottom: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}

.ai-brief-pills button {
  display: flex;
  min-width: 0;
  flex: 1 0 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font-size: 8px;
  font-weight: 700;
}

.ai-brief-pills button.is-active {
  border-color: #d85a8e;
  background: #fff5f8;
  color: #9f3e69;
}

.ai-brief-pills small {
  color: var(--muted);
  font-size: 6px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.ai-question-card {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 12px 28px rgba(54, 45, 45, .06);
  animation: ai-question-in 240ms cubic-bezier(.2, .8, .2, 1) both;
}

.ai-question-heading {
  display: grid;
  grid-template-columns: 29px 1fr;
  align-items: start;
  grid-gap: 9px;
  gap: 9px;
  margin-bottom: 11px;
}

.ai-question-heading > span {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border-radius: 9px;
  background: linear-gradient(145deg, var(--coral), #b54f9d);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  box-shadow: 0 6px 14px rgba(194, 57, 92, .18);
}

.ai-question-heading > div {
  min-width: 0;
}

.ai-question-heading small {
  display: block;
  margin-bottom: 2px;
  color: #a34873;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ai-question-heading h3 {
  margin: 0;
  font-size: 14px;
  letter-spacing: -.035em;
}

.ai-question-heading p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.4;
}

.ai-answer-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ai-answer-list > button {
  display: grid;
  min-height: 50px;
  grid-template-columns: 31px 1fr auto;
  align-items: center;
  grid-gap: 8px;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.ai-answer-list > button:hover,
.ai-answer-list > button.is-active {
  border-color: #d85a8e;
  background: #fff7f9;
  box-shadow: 0 7px 18px rgba(166, 66, 107, .08);
  transform: translateX(2px);
}

.ai-answer-list > button > i {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border-radius: 9px;
  background: #fff;
  color: #a34873;
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(163, 72, 115, .1);
}

.ai-answer-list > button.is-active > i {
  background: linear-gradient(145deg, var(--coral), #b54f9d);
  color: #fff;
}

.ai-answer-list > button > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.ai-answer-list strong {
  font-size: 9px;
}

.ai-answer-list small {
  color: var(--muted);
  font-size: 7px;
  line-height: 1.35;
}

.ai-answer-list > button > svg {
  color: #b9afad;
}

.ai-brief-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 5px;
  gap: 5px;
  margin-bottom: 11px;
}

.ai-brief-summary > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
  padding: 7px;
  border-radius: 8px;
  background: var(--paper);
}

.ai-brief-summary small {
  color: var(--muted);
  font-size: 6px;
  font-weight: 700;
  text-transform: uppercase;
}

.ai-brief-summary strong {
  overflow: hidden;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-prompt-field textarea {
  min-height: 104px !important;
  background: #fffdfd;
}

.ai-generate-action {
  background: linear-gradient(120deg, var(--coral), #c54f8c 58%, #706bc5);
  box-shadow: 0 9px 22px rgba(194, 57, 92, .2);
}

.ai-generate-action:hover:not(:disabled) {
  background: linear-gradient(120deg, var(--coral-deep), #aa3f78 58%, #5f5bb3);
}

.ai-generate-action small {
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  opacity: 1;
  font-weight: 800;
  text-transform: uppercase;
}

.ai-back-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 11px;
  padding: 5px 0;
  background: transparent;
  color: var(--muted);
  font-size: 7px;
  font-weight: 700;
}

.ai-back-button:hover {
  color: var(--ink);
}

.choice-question {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 14px 0 7px;
  font-size: 10px;
  font-weight: 700;
}

.choice-question i {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  background: var(--paper-deep);
  color: var(--coral-deep);
  font-size: 9px;
  font-style: normal;
}

.smart-choice-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 6px;
  gap: 6px;
}

.smart-choice-list button {
  min-height: 34px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease, transform 160ms ease;
}

.smart-choice-list button:hover {
  transform: translateY(-1px);
}

.smart-choice-list button.is-active {
  border-color: var(--coral);
  background: var(--soft-coral);
  color: var(--coral-deep);
}

.vibe-choices button:nth-child(1)::before { content: "😄 "; }
.vibe-choices button:nth-child(2)::before { content: "♡ "; }
.vibe-choices button:nth-child(3)::before { content: "— "; }
.vibe-choices button:nth-child(4)::before { content: "✦ "; }

.field-label,
.sub-label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
}

.fine-tune-label {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
}

.fine-tune-label small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 500;
}

.fine-tune-label + .prompt-field textarea {
  min-height: 76px;
}

.sub-label {
  margin-top: 23px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.prompt-field {
  position: relative;
}

.prompt-field textarea,
.text-input {
  width: 100%;
  resize: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--small-radius);
  outline: 0;
  background: #fff;
  font-size: 13px;
  line-height: 1.5;
  transition: border-color 160ms ease;
}

.prompt-field textarea {
  min-height: 112px;
  padding: 13px 13px 28px;
}

.text-input {
  height: 48px;
  padding: 0 13px;
}

.prompt-field textarea:focus,
.text-input:focus {
  border-color: var(--coral);
}

.prompt-field > span {
  position: absolute;
  right: 11px;
  bottom: 9px;
  color: #aaa3a0;
  font-size: 10px;
}

.idea-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.idea-list button {
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  transition: border-color 160ms ease, color 160ms ease;
}

.idea-list button:hover {
  border-color: var(--blush);
  color: var(--coral-deep);
}

.generate-action {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  gap: 9px;
  margin-top: 15px;
  padding: 0 13px;
  border-radius: var(--small-radius);
  background: var(--coral);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  transition: background 160ms ease, transform 160ms ease;
}

.generate-action:hover:not(:disabled) {
  background: var(--coral-deep);
  transform: translateY(-1px);
}

.generate-action:disabled {
  cursor: wait;
  opacity: .8;
}

.generate-action span {
  flex: 1 1;
  text-align: left;
}

.generate-action small {
  opacity: .72;
  font-size: 9px;
}

.generation-reaction {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  background: #edf1ea;
  color: var(--green);
  font-size: 9px;
  line-height: 1.35;
  animation: view-in 260ms ease both;
}

.generation-reaction svg {
  flex: 0 0 auto;
}

.generation-reaction span {
  display: flex;
  flex-direction: column;
}

.generation-reaction strong {
  color: var(--ink);
  font-size: 10px;
}

.ai-kit-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 10px;
}

.ai-kit-list > button {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  grid-gap: 9px;
  gap: 9px;
  min-height: 62px;
  padding: 7px 10px 7px 7px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  text-align: left;
  transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}

.ai-kit-list > button:hover {
  border-color: var(--coral);
  background: #fffafa;
  transform: translateX(2px);
}

.ai-kit-list > button > span:nth-child(2) {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.ai-kit-list strong {
  font-size: 10px;
}

.ai-kit-list small {
  color: var(--muted);
  font-size: 8px;
}

.kit-preview {
  position: relative;
  display: grid;
  width: 52px;
  height: 48px;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background: var(--paper-deep);
  color: var(--coral);
}

.kit-preview > svg,
.kit-preview > div {
  width: 30px;
  height: 30px;
  transform: translateX(-7px);
}

.kit-preview b {
  position: absolute;
  right: 3px;
  bottom: 5px;
  font-size: 5px;
  line-height: .9;
  text-align: right;
}

.kit-preview i {
  position: absolute;
  top: 4px;
  right: 5px;
  font-size: 11px;
  font-style: normal;
}

.library-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 13px;
}

.library-heading > span:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.library-heading strong {
  font-size: 12px;
}

.library-heading small,
.library-heading > span:last-child {
  color: var(--muted);
  font-size: 8px;
}

.graphic-library {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 7px;
  gap: 7px;
}

.graphic-library button {
  position: relative;
  display: grid;
  min-height: 94px;
  padding: 9px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--paper);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.graphic-library button:hover {
  border-color: var(--coral);
  background: var(--soft-coral);
  transform: translateY(-2px);
}

.graphic-library button > svg,
.graphic-library button > div {
  width: 50px;
  height: 50px;
}

.graphic-library button > span {
  width: 100%;
  overflow: hidden;
  color: var(--muted);
  font-size: 8px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.graphic-library button > svg:last-child {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 17px;
  height: 17px;
  padding: 3px;
  border-radius: 50%;
  background: #fff;
}

.graphic-art {
  width: 100%;
  height: 100%;
}

.mini-ai-box {
  margin-top: 14px;
  padding: 11px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--soft-coral), #fff);
}

.mini-ai-box > span {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  color: var(--coral-deep);
  font-size: 10px;
}

.mini-ai-box input {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border: 1px solid rgba(216, 154, 157, .5);
  border-radius: 9px;
  outline: 0;
  background: rgba(255, 255, 255, .8);
  font-size: 9px;
}

.mini-ai-box > button {
  display: flex;
  width: 100%;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 7px;
  border-radius: 9px;
  background: var(--ink);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
}

.image-ai-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px;
  border-radius: 12px;
  background: var(--soft-coral);
}

.image-ai-card > span {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border-radius: 50%;
  background: var(--coral);
  color: #fff;
}

.image-ai-card > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.image-ai-card strong { font-size: 11px; }
.image-ai-card small { color: var(--muted); font-size: 8px; line-height: 1.35; }

.image-style-picks {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.image-style-picks button {
  flex: 1 1;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 8px;
  font-weight: 700;
}

.image-style-picks button:first-child {
  border-color: var(--coral);
  background: var(--soft-coral);
  color: var(--coral-deep);
}

.image-generate { margin-top: 11px; }

.or-divider {
  position: relative;
  margin: 18px 0 12px;
  border-top: 1px solid var(--line);
  text-align: center;
}

.or-divider span {
  position: relative;
  top: -7px;
  padding: 0 8px;
  background: #fff;
  color: var(--muted);
  font-size: 8px;
}

.compact-upload {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  grid-gap: 9px;
  gap: 9px;
  padding: 11px;
  border: 1px dashed var(--blush);
  border-radius: 11px;
  background: #fffafa;
  cursor: pointer;
}

.compact-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.compact-upload > svg:first-of-type { color: var(--coral); }
.compact-upload > span { display: flex; flex-direction: column; gap: 2px; }
.compact-upload strong { font-size: 10px; }
.compact-upload small { color: var(--muted); font-size: 8px; }

.text-add-row {
  display: grid;
  grid-template-columns: 1fr 66px;
  grid-gap: 6px;
  gap: 6px;
}

.text-add-row > button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 10px;
  background: var(--coral);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
}

.copy-suggestions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.copy-suggestions button {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--paper);
  font-size: 9px;
  font-weight: 700;
  text-align: left;
}

.copy-suggestions button:hover {
  border-color: var(--coral);
  color: var(--coral-deep);
}

.spin {
  animation: spin 700ms linear infinite;
}

.result-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 6px;
  gap: 6px;
  margin-top: 14px;
}

.result-row button {
  position: relative;
  display: grid;
  aspect-ratio: 1;
  padding: 8px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}

.variant-check {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  width: 15px;
  height: 15px;
  place-items: center;
  border-radius: 50%;
  background: var(--coral);
  color: #fff;
}

.result-row button.is-active {
  border-color: var(--coral);
  box-shadow: inset 0 0 0 1px var(--coral);
  background: var(--soft-coral);
}

.result-row .type-art strong {
  font-size: 7px;
}

.result-row .type-art span {
  display: none;
}

.result-row .type-art svg {
  width: 11px;
}

.result-row .smile-art {
  border-width: 4px;
}

.result-row .smile-art i {
  border-bottom-width: 3px;
}

.upload-zone {
  display: flex;
  min-height: 255px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 26px 16px;
  border: 1px dashed var(--blush);
  border-radius: var(--radius);
  background: #fffafa;
  text-align: center;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}

.upload-zone:hover {
  border-color: var(--coral);
  background: var(--soft-coral);
}

.upload-zone input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.upload-icon {
  display: grid;
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  place-items: center;
  border-radius: 50%;
  background: var(--soft-coral);
  color: var(--coral);
}

.upload-zone strong {
  margin-bottom: 5px;
  font-size: 13px;
}

.upload-zone > span:not(.upload-icon) {
  color: var(--muted);
  font-size: 10px;
}

.upload-zone i {
  margin-top: 18px;
  padding: 8px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.uploaded-file {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  grid-gap: 10px;
  gap: 10px;
  margin-top: 12px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: var(--small-radius);
}

.uploaded-file img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 8px;
  background: var(--paper);
}

.uploaded-file > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.uploaded-file strong {
  font-size: 11px;
}

.uploaded-file small {
  color: var(--muted);
  font-size: 9px;
}

.uploaded-file button {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: var(--paper);
}

.upload-tip {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 18px;
  padding: 12px;
  border-radius: var(--small-radius);
  background: var(--paper);
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.upload-tip svg {
  flex: 0 0 auto;
  color: var(--coral);
}

.upload-tip span {
  display: flex;
  flex-direction: column;
}

.upload-tip strong {
  color: var(--ink);
}

.font-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 7px;
  gap: 7px;
}

.font-options button {
  display: flex;
  min-height: 70px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.font-options button.is-active {
  border-color: var(--coral);
  background: var(--soft-coral);
}

.font-options strong {
  font-size: 18px;
}

.font-options span {
  color: var(--muted);
  font-size: 9px;
}

.font-soft {
  font-weight: 400;
  letter-spacing: .02em;
}

.font-hand {
  font-family: cursive;
  font-style: italic;
  font-weight: 400;
}

.swatch-list {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.swatch-list button,
.stage-swatches button {
  position: relative;
  width: 29px;
  height: 29px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--line-strong);
}

.swatch-list button.is-active,
.stage-swatches button.is-active {
  box-shadow: 0 0 0 2px var(--coral);
}

.panel-footnote {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 9px;
}

.panel-footnote svg {
  color: var(--coral);
}

/* Canvas */

.canvas-panel {
  display: flex;
  min-width: 0;
  flex-direction: column;
  background: var(--paper-deep);
}

.canvas-toolbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 58px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(248, 246, 242, .82);
}

.back-to-products {
  display: inline-flex;
  width: -moz-fit-content;
  width: fit-content;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.back-to-products:hover {
  background: #fff;
  color: var(--ink);
}

.canvas-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
}

.canvas-title i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6f8068;
}

.canvas-toolbar > div {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 3px;
}

.canvas-toolbar > div > span {
  width: 1px;
  height: 22px;
  margin: 0 5px;
  background: var(--line);
}

.canvas-toolbar > div button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
}

.canvas-toolbar > div button:hover {
  background: #fff;
  color: var(--ink);
}

.canvas-toolbar > div button.is-liked {
  background: var(--soft-coral);
  color: var(--coral);
}

.canvas-toolbar > div button.is-tool-active {
  background: var(--ink);
  color: #fff;
}

.design-stage {
  --stage: #f2ebe4;
  position: relative;
  display: grid;
  flex: 1 1;
  min-height: 580px;
  overflow: hidden;
  place-items: center;
  background-color: var(--stage);
  background-image: radial-gradient(rgba(80, 63, 60, .08) .7px, transparent .7px);
  background-size: 16px 16px;
  cursor: -webkit-grab;
  cursor: grab;
  touch-action: none;
  transition: background-color 220ms ease;
}

.design-stage.is-panning,
.design-stage.is-panning .art-placement {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.design-stage.is-panning .zoom-wrap {
  transition: none;
}

.design-stage::before,
.design-stage::after {
  position: absolute;
  width: 240px;
  height: 240px;
  border: 42px solid rgba(255, 255, 255, .24);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.design-stage::before {
  top: -130px;
  left: -90px;
}

.design-stage::after {
  right: -110px;
  bottom: -125px;
}

.drag-hint {
  position: absolute;
  z-index: 4;
  top: 17px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  color: var(--muted);
  font-size: 9px;
  font-weight: 600;
  pointer-events: none;
  transform: translateX(-50%);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.view-turner {
  position: absolute;
  z-index: 8;
  top: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 999px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 10px 28px rgba(39, 35, 34, .08);
  pointer-events: none;
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}

.view-turner button {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  pointer-events: auto;
}

.view-turner button:hover {
  background: var(--ink);
  color: #fff;
}

.view-turner > span {
  display: flex;
  min-width: 74px;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.view-turner small {
  color: var(--muted);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.view-turner strong {
  font-size: 9px;
}

.ai-working {
  position: absolute;
  z-index: 20;
  top: 50%;
  left: 50%;
  display: flex;
  min-width: 210px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 18px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 18px 55px rgba(72, 47, 44, .14);
  transform: translate(-50%, -50%);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  animation: view-in 180ms ease both;
}

.ai-working > span {
  display: flex;
  gap: 5px;
  margin-bottom: 10px;
}

.ai-working i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral);
  animation: thinking-dot 800ms ease-in-out infinite alternate;
}

.ai-working i:nth-child(2) { animation-delay: 160ms; }
.ai-working i:nth-child(3) { animation-delay: 320ms; }

.ai-working strong {
  font-size: 12px;
}

.ai-working small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}

.design-toast {
  position: absolute;
  z-index: 18;
  top: 56px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  transform: translateX(-50%);
  box-shadow: 0 12px 30px rgba(39, 35, 34, .18);
  animation: toast-pop 280ms cubic-bezier(.2, .8, .2, 1) both;
}

.design-toast > span {
  display: flex;
  flex-direction: column;
  font-size: 8px;
  opacity: .82;
}

.design-toast strong {
  font-size: 10px;
  opacity: 1;
}

.design-toast svg {
  color: #ff766f;
}

.zoom-wrap {
  --zoom: 1;
  --pan-x: 0px;
  --pan-y: 0px;
  position: relative;
  z-index: 2;
  width: min(68vh, 590px);
  max-width: 85%;
  aspect-ratio: 1;
  transform: translate3d(var(--pan-x), var(--pan-y), 0) scale(var(--zoom));
  transition: transform 220ms cubic-bezier(.2, .8, .2, 1);
  animation: product-in 480ms cubic-bezier(.2, .8, .2, 1) both;
}

.product-preview {
  --view-rotation: 0deg;
  --view-shift: 0px;
  position: relative;
  width: 100%;
  height: 100%;
  transform: perspective(1200px) translateX(var(--view-shift)) rotateY(var(--view-rotation));
  transform-style: preserve-3d;
  animation: live-view-turn 420ms cubic-bezier(.2, .8, .2, 1) both;
}

.product-preview > .product-shape {
  width: 100%;
  height: 100%;
}

.product-preview > .product-photo {
  object-fit: cover;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 22px 48px rgba(48, 43, 41, .12);
  transition: transform 360ms cubic-bezier(.2, .8, .2, 1);
}

.product-preview.surface-left-side {
  --view-rotation: -9deg;
  --view-shift: -5px;
}

.product-preview.surface-right-side {
  --view-rotation: 9deg;
  --view-shift: 5px;
}

.product-preview.surface-left-sleeve,
.product-preview.surface-right-sleeve {
  --view-rotation: 0deg;
  --view-shift: 0px;
  overflow: hidden;
  border-radius: 28px;
}

.product-preview.surface-right-sleeve > .product-photo {
  transform: scaleX(-1);
}

.product-cap.surface-right-side > .product-photo {
  transform: scaleX(-1);
}

.print-area {
  --print-width: 34%;
  --print-height: 40%;
  --print-left: 50%;
  --print-top: 50%;
  --print-rotate: 0deg;
  position: absolute;
  z-index: 5;
  top: var(--print-top);
  left: var(--print-left);
  width: var(--print-width);
  height: var(--print-height);
  border: 1px dashed rgba(255, 56, 47, .72);
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
  transform: translate(-50%, -50%) rotate(var(--print-rotate));
  transform-style: preserve-3d;
}

.print-area::after {
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 5px;
  content: "";
  pointer-events: none;
}

.print-area-label {
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(39, 35, 34, .82);
  color: #fff;
  font-size: 7px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  transform: translateX(-50%);
  white-space: nowrap;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

.sleeve-projection {
  position: absolute;
  z-index: 6;
  overflow: hidden;
  opacity: .94;
  pointer-events: none;
}

.product-tshirt .sleeve-projection {
  top: 30%;
  width: 20%;
  height: 23%;
}

.product-tshirt .projection-left {
  left: 11%;
  transform: perspective(500px) rotateY(32deg) rotateZ(12deg);
  transform-origin: right center;
}

.product-tshirt .projection-right {
  right: 11%;
  transform: perspective(500px) rotateY(-32deg) rotateZ(-12deg);
  transform-origin: left center;
}

.product-hoodie .sleeve-projection {
  top: 37%;
  width: 19%;
  height: 37%;
}

.product-hoodie .projection-left {
  left: 9%;
  transform: perspective(500px) rotateY(34deg) rotateZ(8deg);
  transform-origin: right center;
}

.product-hoodie .projection-right {
  right: 9%;
  transform: perspective(500px) rotateY(-34deg) rotateZ(-8deg);
  transform-origin: left center;
}

.product-tshirt .projection-left.projection-on-back,
.product-hoodie .projection-left.projection-on-back {
  transform: perspective(500px) rotateY(-32deg) rotateZ(10deg);
}

.product-tshirt .projection-right.projection-on-back,
.product-hoodie .projection-right.projection-on-back {
  transform: perspective(500px) rotateY(32deg) rotateZ(-10deg);
}

.projection-half-right .projected-sleeve-art {
  -webkit-clip-path: inset(0 0 0 50%);
          clip-path: inset(0 0 0 50%);
}

.projection-half-left .projected-sleeve-art {
  -webkit-clip-path: inset(0 50% 0 0);
          clip-path: inset(0 50% 0 0);
}

.projected-sleeve-art {
  --projection-x: 0px;
  --projection-y: 0px;
  --projection-scale: .2;
  --projection-rotate: 0deg;
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 122px;
  height: 138px;
  place-items: center;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .08));
  transform: translate(calc(-50% + var(--projection-x)), calc(-50% + var(--projection-y))) scale(var(--projection-scale)) rotate(var(--projection-rotate));
  transform-origin: center;
}

.projected-sleeve-art > svg,
.projected-sleeve-art > div,
.projected-sleeve-art > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.art-placement {
  --art-x: 0px;
  --art-y: 0px;
  --art-scale: 1;
  --art-rotate: 0deg;
  position: absolute;
  z-index: 4;
  top: 52%;
  left: 50%;
  display: grid;
  width: 122px;
  height: 138px;
  place-items: center;
  transform: translate(calc(-50% + var(--art-x)), calc(-50% + var(--art-y))) scale(var(--art-scale)) rotate(var(--art-rotate));
  transform-origin: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.art-placement.is-draggable {
  cursor: default;
  touch-action: none;
}

.product-preview .art-placement {
  top: 50%;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .08));
}

.product-preview .art-placement.element-text,
.product-preview .art-placement.element-graphic {
  filter: none;
}

.art-placement.is-draggable:active {
  cursor: move;
}

.design-stage.is-hand-tool .art-placement.is-draggable {
  cursor: -webkit-grab;
  cursor: grab;
}

.design-stage.is-hand-tool.is-panning .art-placement.is-draggable {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.design-stage.is-select-tool {
  cursor: default;
}

.design-stage.is-select-tool .art-placement.is-draggable {
  cursor: pointer;
}

.design-stage.is-select-tool .art-placement.is-draggable.is-active {
  cursor: move;
}

.placement-outline {
  position: absolute;
  inset: -8px;
  border: 1px dashed rgba(255, 56, 47, .45);
  border-radius: 5px;
  opacity: 0;
  transition: opacity 160ms ease;
}

.art-placement:hover .placement-outline,
.art-placement:active .placement-outline,
.art-placement.is-active .placement-outline {
  opacity: 1;
}

.art-placement.is-active .placement-outline {
  border-style: solid;
  border-color: var(--coral);
}

.art-placement.element-text > .placement-outline {
  display: none;
}

.art-placement.element-text {
  pointer-events: none;
}

.art-placement.element-text .type-art strong,
.art-placement.element-text .inline-text-edit-shell,
.art-placement.element-text .element-options {
  pointer-events: auto;
}

.element-options {
  position: absolute;
  z-index: 15;
  top: -10px;
  right: -10px;
  opacity: 0;
  pointer-events: auto;
  transform: scale(var(--art-ui-scale)) rotate(calc(-1 * var(--art-rotate)));
  transform-origin: right top;
  transition: opacity 140ms ease;
}

.art-placement:hover .element-options,
.art-placement.is-active .element-options,
.element-options.is-open {
  opacity: 1;
}

.element-options-trigger {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .88);
  border-radius: 6px;
  background: rgba(39, 35, 34, .92);
  color: #fff;
  box-shadow: 0 7px 18px rgba(39, 35, 34, .2);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

.element-options-trigger svg {
  width: 12px;
  height: 12px;
}

.element-options-menu {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  width: 132px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(39, 35, 34, .2);
}

.element-options-menu button {
  display: flex;
  width: 100%;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border-radius: 7px;
  background: transparent;
  color: var(--coral-deep);
  font-size: 13px;
  font-weight: 800;
  text-align: left;
}

.element-options-menu button:hover {
  background: var(--soft-coral);
}

.art-placement.element-text:not(.is-editing):hover .type-art strong,
.art-placement.element-text:not(.is-editing):active .type-art strong {
  outline: 1px dashed rgba(255, 56, 47, .55);
  outline-offset: 7px;
}

.art-placement.element-text.is-active:not(.is-editing) .type-art strong {
  outline: 1px solid var(--coral);
  outline-offset: 7px;
}

.placement-outline i {
  position: absolute;
  right: -5px;
  bottom: -5px;
  display: none;
  width: 9px;
  height: 9px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--coral);
}

.art-placement.is-active .placement-outline i {
  display: block;
}

.art-placement.element-text {
  width: 150px;
  height: 96px;
}

.art-placement.element-image {
  width: 132px;
  height: 132px;
}

.bloom-art,
.heart-art,
.uploaded-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.type-art {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}

.type-art strong {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow: visible;
  font-size: 24px;
  line-height: var(--text-line-height, 1);
  letter-spacing: var(--text-letter-spacing, -.045em);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.type-art {
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

.art-placement.element-graphic svg {
  shape-rendering: geometricPrecision;
}

.type-art-heading strong {
  font-size: 28px;
}

.type-art-subheading strong {
  font-size: 21px;
}

.type-art-body strong {
  font-size: 15px;
}

.type-font-sans strong {
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
}

.type-font-serif strong {
  font-family: Georgia, "Times New Roman", serif;
}

.type-font-rounded strong {
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", ui-sans-serif, sans-serif;
}

.type-font-condensed strong {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-weight: 400;
}

.type-font-mono strong {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

.type-font-hand strong {
  font-family: "Comic Sans MS", "Bradley Hand", cursive;
}

.type-font-lato strong { font-family: Lato, "DM Sans", sans-serif; }
.type-font-lato-light strong { font-family: Lato, "DM Sans", sans-serif; font-weight: 300; }
.type-font-lato-black strong { font-family: Lato, "DM Sans", sans-serif; font-weight: 900; }
.type-font-dejavu-sans strong { font-family: "DejaVu Sans", Arial, sans-serif; }
.type-font-dejavu-serif strong { font-family: "DejaVu Serif", Georgia, serif; }
.type-font-dejavu-mono strong { font-family: "DejaVu Sans Mono", Consolas, monospace; }
.type-font-noto-sans strong { font-family: "Noto Sans", "Noto Sans CJK SC", sans-serif; }
.type-font-noto-serif strong { font-family: "Noto Serif", "Noto Serif CJK SC", serif; }
.type-font-noto-mono strong { font-family: "Noto Sans Mono CJK SC", "DejaVu Sans Mono", monospace; }
.type-font-arial strong { font-family: Arial, Helvetica, sans-serif; }
.type-font-helvetica strong { font-family: Helvetica, Arial, sans-serif; }
.type-font-verdana strong { font-family: Verdana, Geneva, sans-serif; }
.type-font-tahoma strong { font-family: Tahoma, Verdana, sans-serif; }
.type-font-trebuchet strong { font-family: "Trebuchet MS", Arial, sans-serif; }
.type-font-georgia strong { font-family: Georgia, "Times New Roman", serif; }
.type-font-times strong { font-family: "Times New Roman", Times, serif; }
.type-font-garamond strong { font-family: Garamond, Georgia, serif; }
.type-font-palatino strong { font-family: "Palatino Linotype", Palatino, Georgia, serif; }
.type-font-baskerville strong { font-family: Baskerville, "Times New Roman", serif; }
.type-font-didot strong { font-family: Didot, "Bodoni MT", Georgia, serif; }
.type-font-courier strong { font-family: "Courier New", Courier, monospace; }
.type-font-lucida strong { font-family: "Lucida Console", Monaco, monospace; }
.type-font-impact strong { font-family: Impact, Haettenschweiler, sans-serif; font-weight: 400; }
.type-font-arial-narrow strong { font-family: "Arial Narrow", "Liberation Sans Narrow", Arial, sans-serif; font-stretch: condensed; }
.type-font-copperplate strong { font-family: Copperplate, "Copperplate Gothic Light", Georgia, serif; }
.type-font-papyrus strong { font-family: Papyrus, fantasy; }
.type-font-brush strong { font-family: "Brush Script MT", "Segoe Script", cursive; font-weight: 400; }
.type-font-comic strong { font-family: "Comic Sans MS", "Comic Sans", cursive; }
.type-font-century strong { font-family: "Century Gothic", Futura, Arial, sans-serif; }
.type-font-optima strong { font-family: Optima, Candara, "Trebuchet MS", sans-serif; }

.type-art.is-bold strong {
  font-weight: 900;
}

.type-art.is-italic strong {
  font-style: italic;
}

.type-art.is-underlined strong {
  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .12em;
}

.text-effect-drop strong {
  text-shadow: 4px 5px 0 rgba(39, 35, 34, .28);
}

.text-effect-lift strong {
  text-shadow: 0 7px 12px rgba(39, 35, 34, .28);
}

.text-effect-outline strong {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--text-color, currentColor);
}

.text-effect-echo strong {
  text-shadow: 3px 3px 0 #ffaaa5, 6px 6px 0 #7772c9;
}

.text-effect-glow strong {
  text-shadow: 0 0 5px var(--text-color, currentColor), 0 0 14px var(--text-color, currentColor), 0 0 24px var(--text-color, currentColor);
}

.type-align-left {
  align-items: flex-start;
  text-align: left;
}

.type-align-center {
  align-items: center;
  text-align: center;
}

.type-align-right {
  align-items: flex-end;
  text-align: right;
}

.inline-text-edit-shell {
  position: relative;
  width: 100%;
  height: 100%;
}

.inline-text-editor {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 6px;
  overflow: visible;
  border: 2px solid var(--coral);
  border-radius: 7px;
  outline: 4px solid rgba(255, 255, 255, .84);
  background: rgba(255, 255, 255, .86);
  caret-color: var(--text-color, var(--ink));
  cursor: text;
  pointer-events: auto;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
  scrollbar-width: none;
}

.inline-text-editor::-webkit-scrollbar {
  display: none;
}

.inline-text-editor strong {
  overflow: visible;
  -webkit-line-clamp: unset;
}

.inline-text-save-row {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: calc(0px - var(--art-ui-offset));
  display: flex;
  width: max-content;
  align-items: center;
  gap: 9px;
  padding: 5px 5px 5px 9px;
  border-radius: 10px;
  background: rgba(39, 35, 34, .94);
  color: rgba(255, 255, 255, .72);
  font-size: 11px;
  font-weight: 600;
  transform: scale(var(--art-ui-scale)) rotate(calc(-1 * var(--art-rotate)));
  transform-origin: right top;
  box-shadow: 0 9px 24px rgba(39, 35, 34, .22);
  white-space: nowrap;
}

.inline-text-save-row button {
  display: flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 10px;
  border-radius: 7px;
  background: var(--coral);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.art-placement.is-editing {
  cursor: text;
}

.art-placement.is-editing .placement-outline {
  display: none;
}

.smile-art {
  position: relative;
  width: 82%;
  height: 82%;
  border: 7px solid currentColor;
  border-radius: 50%;
}

.smile-art > span {
  position: absolute;
  top: 34%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.smile-art > span:first-child {
  left: 27%;
}

.smile-art > span:nth-child(2) {
  right: 27%;
}

.smile-art i {
  position: absolute;
  bottom: 20%;
  left: 50%;
  width: 46%;
  height: 27%;
  border-bottom: 6px solid currentColor;
  border-radius: 50%;
  transform: translateX(-50%);
}

.stage-bottom-tools {
  position: absolute;
  z-index: 5;
  right: 16px;
  bottom: 16px;
  left: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}

.stage-swatches,
.zoom-tools {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  pointer-events: auto;
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}

.stage-swatches button {
  width: 22px;
  height: 22px;
}

.zoom-tools button {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: transparent;
}

.zoom-tools button:hover {
  background: var(--paper);
}

.zoom-tools button:disabled {
  cursor: not-allowed;
  opacity: .35;
}

.zoom-tools span {
  min-width: 38px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  text-align: center;
}

/* Inspector and order */

.inspector-panel {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--line);
}

.inspector-scroll {
  flex: 1 1;
  overflow-y: auto;
  scrollbar-width: thin;
}

.inspector-section {
  padding: 18px;
  border-bottom: 1px solid var(--line);
}

.inspector-label {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.selected-product {
  position: relative;
  display: grid;
  width: 100%;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  grid-gap: 10px;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--small-radius);
  background: #fff;
  color: var(--ink);
  text-align: left;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.selected-product:hover {
  border-color: var(--coral);
  box-shadow: 0 10px 24px rgba(64, 46, 43, .07);
  transform: translateY(-1px);
}

.selected-thumb {
  display: grid;
  width: 52px;
  height: 52px;
  overflow: hidden;
  place-items: center;
  border-radius: 9px;
  background: var(--paper-deep);
}

.selected-thumb .product-shape {
  width: 56px;
  height: 56px;
}

.selected-thumb .product-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.selected-product-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.selected-product strong {
  font-size: 12px;
}

.selected-product small {
  color: var(--muted);
  font-size: 9px;
}

.selected-product-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}

.selected-product-meta i {
  width: 21px;
  height: 21px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--line-strong);
}

.inspector-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 13px;
}

.inspector-heading > span {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
}

.inspector-heading small {
  color: var(--muted);
  font-size: 9px;
}

.inspector-heading button {
  padding: 4px 0;
  background: transparent;
  color: var(--coral-deep);
  font-size: 9px;
  font-weight: 700;
}

.product-color-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 6px;
  gap: 6px;
}

.product-color-options button {
  display: flex;
  min-width: 0;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--muted);
  font-size: 8px;
  font-weight: 700;
  text-align: left;
}

.product-color-options button:hover,
.product-color-options button.is-active {
  border-color: var(--coral);
  color: var(--ink);
}

.product-color-options button.is-active {
  background: #fffafa;
  box-shadow: inset 0 0 0 1px rgba(255, 56, 47, .12);
}

.product-color-options i {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--line-strong);
}

.print-surface-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 6px;
  gap: 6px;
}

.print-surface-list button {
  display: grid;
  min-width: 0;
  min-height: 50px;
  grid-template-columns: 25px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  grid-column-gap: 7px;
  column-gap: 7px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  text-align: left;
}

.print-surface-list button:hover,
.print-surface-list button.is-active {
  border-color: var(--coral);
}

.print-surface-list button.is-active {
  background: var(--soft-coral);
}

.print-surface-list button > span {
  position: relative;
  display: grid;
  width: 25px;
  height: 32px;
  grid-row: 1 / 3;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 5px 5px 7px 7px;
  background: var(--paper);
}

.print-surface-list button > span i:first-child {
  width: 13px;
  height: 15px;
  border: 1px dashed var(--coral);
  border-radius: 2px;
}

.print-surface-list button > span i:last-child {
  position: absolute;
  right: 4px;
  bottom: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
}

.print-surface-list strong {
  align-self: end;
  overflow: hidden;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.print-surface-list small {
  align-self: start;
  color: var(--muted);
  font-size: 7px;
}

.print-surface-note {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 7px;
  line-height: 1.4;
}

.print-surface-note svg {
  flex: 0 0 auto;
  color: var(--coral);
}

.layers-section {
  padding-bottom: 14px;
}

.layer-list {
  display: flex;
  max-height: 190px;
  flex-direction: column;
  gap: 5px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.layer-item {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  grid-gap: 8px;
  gap: 8px;
  min-height: 46px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  text-align: left;
}

.layer-item.is-active {
  border-color: var(--coral);
  background: #fffafa;
}

.layer-thumb {
  display: grid;
  width: 36px;
  height: 36px;
  padding: 5px;
  place-items: center;
  overflow: hidden;
  border-radius: 7px;
  background: var(--paper-deep);
}

.layer-thumb > svg,
.layer-thumb > div,
.layer-thumb > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.layer-thumb .type-art strong { font-size: 5px; }
.layer-thumb .type-art span,
.layer-thumb .type-art svg { display: none; }

.layer-item > span:nth-child(2) {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

.layer-item > span:nth-child(2) strong {
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.layer-item > span:nth-child(2) small {
  color: var(--muted);
  font-size: 7px;
  text-transform: capitalize;
}

.layer-actions {
  display: flex;
  align-items: center;
  gap: 1px;
}

.layer-actions i {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 5px;
  color: var(--muted);
  font-style: normal;
}

.layer-actions i:hover {
  background: var(--paper-deep);
  color: var(--ink);
}

.layer-quick-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 5px;
  gap: 5px;
  margin-top: 7px;
}

.layer-quick-actions button {
  display: flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 8px;
  background: var(--paper);
  color: var(--muted);
  font-size: 8px;
  font-weight: 700;
}

.layer-quick-actions button:last-child:hover {
  background: var(--soft-coral);
  color: var(--coral-deep);
}

.element-color-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.element-color-row > span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 600;
}

.element-color-row > div {
  display: flex;
  gap: 5px;
}

.element-color-row button {
  width: 20px;
  height: 20px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--line-strong);
}

.element-color-row button.is-active {
  box-shadow: 0 0 0 2px var(--coral);
}

.empty-layer-button {
  display: flex;
  width: 100%;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px dashed var(--line-strong);
  border-radius: 9px;
  background: var(--paper);
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.product-swatches {
  gap: 8px;
}

.product-swatches button {
  width: 27px;
  height: 27px;
}

.range-control {
  display: grid;
  grid-template-columns: 42px 1fr 34px;
  align-items: center;
  grid-gap: 8px;
  gap: 8px;
  min-height: 34px;
}

.range-control + .range-control {
  margin-top: 5px;
}

.range-control span,
.range-control strong {
  color: var(--muted);
  font-size: 9px;
  font-weight: 600;
}

.range-control strong {
  text-align: right;
}

.range-control input {
  width: 100%;
  height: 3px;
  accent-color: var(--coral);
}

.order-dock {
  padding: 16px;
  border-top: 1px solid var(--line);
  background: #fff;
}

.order-dock > button,
.checkout-button,
.checkout-done > button {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--small-radius);
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  transition: background 160ms ease, transform 160ms ease;
}

.order-dock > button:hover,
.checkout-button:hover,
.checkout-done > button:hover {
  background: var(--coral);
  transform: translateY(-1px);
}

.order-dock.is-ready > button {
  background: var(--coral);
  box-shadow: 0 8px 22px rgba(255, 56, 47, .18);
}

.order-dock.is-ready > button:hover {
  background: var(--coral-deep);
}

.order-dock .order-configure-button {
  justify-content: space-between;
  padding: 9px 13px 9px 15px;
  text-align: left;
}

.order-configure-button > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.order-configure-button > span strong {
  font-size: 13px;
}

.order-configure-button > span small {
  color: rgba(255, 255, 255, .7);
  font-size: 10px;
}

.order-configure-button > b {
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.order-dock > small {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 9px;
  color: var(--muted);
  font-size: 9px;
}

.order-dock > small svg {
  color: var(--green);
}

/* Route transition */

.route-transition {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: flex;
  visibility: hidden;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  background: var(--coral);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  -webkit-clip-path: circle(0 at 50% 50%);
          clip-path: circle(0 at 50% 50%);
  transition: opacity 80ms linear, visibility 420ms, -webkit-clip-path 420ms cubic-bezier(.7, 0, .3, 1);
  transition: clip-path 420ms cubic-bezier(.7, 0, .3, 1), opacity 80ms linear, visibility 420ms;
  transition: clip-path 420ms cubic-bezier(.7, 0, .3, 1), opacity 80ms linear, visibility 420ms, -webkit-clip-path 420ms cubic-bezier(.7, 0, .3, 1);
}

.route-transition::before,
.route-transition::after {
  position: absolute;
  width: 360px;
  height: 360px;
  border: 70px solid rgba(255, 255, 255, .08);
  border-radius: 50%;
  content: "";
}

.route-transition::before {
  top: -180px;
  right: -140px;
}

.route-transition::after {
  bottom: -200px;
  left: -140px;
}

.route-transition.is-active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  -webkit-clip-path: circle(145% at 50% 50%);
          clip-path: circle(145% at 50% 50%);
}

.route-transition .memomo-logo {
  position: relative;
  z-index: 1;
  filter: brightness(0) invert(1);
}

.route-transition > span {
  position: relative;
  z-index: 1;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}

/* Cart */

.product-picker-overlay {
  position: fixed;
  z-index: 190;
  inset: 0;
  display: grid;
  padding: 18px;
  place-items: center;
  background: rgba(39, 35, 34, .38);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  animation: fade-in 180ms ease both;
}

.product-picker-modal {
  display: flex;
  width: min(1080px, 100%);
  max-height: min(940px, calc(100vh - 36px));
  overflow: hidden;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 28px 90px rgba(45, 31, 29, .24);
  animation: product-picker-in 260ms cubic-bezier(.2, .8, .2, 1) both;
}

.product-picker-header {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  align-items: center;
  grid-gap: 18px;
  gap: 18px;
  padding: 25px 30px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(130deg, #fff8f5, #f9f2ff 55%, #eefaf8);
}

.product-picker-title-icon {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--coral), #b64d99);
  color: #fff;
  box-shadow: 0 9px 20px rgba(190, 65, 103, .2);
}

.product-picker-header > span:nth-child(2) {
  min-width: 0;
}

.product-picker-header small {
  color: #a34873;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.product-picker-header h2 {
  margin: 3px 0 5px;
  font-size: 30px;
  letter-spacing: -.045em;
}

.product-picker-header p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.product-picker-header > button {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .82);
  color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--line);
}

.product-picker-body {
  min-height: 0;
  overflow-y: auto;
  padding: 28px 30px;
}

.product-picker-group + .product-picker-group {
  margin-top: 28px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.product-picker-group-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.product-picker-group-heading > span {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 800;
}

.product-picker-group-heading > span i {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 8px;
  background: var(--soft-coral);
  color: var(--coral-deep);
  font-size: 12px;
  font-style: normal;
}

.product-picker-group-heading > small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.product-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.product-picker-grid > button {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 158px;
  grid-template-columns: 112px 1fr;
  align-items: center;
  grid-gap: 14px;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.product-picker-grid > button:hover,
.product-picker-grid > button.is-active {
  border-color: var(--coral);
  background: #fffafa;
  box-shadow: 0 9px 24px rgba(109, 61, 57, .08);
  transform: translateY(-1px);
}

.product-picker-preview {
  display: grid;
  width: 112px;
  height: 134px;
  overflow: hidden;
  place-items: center;
  border-radius: 12px;
  background: var(--paper);
}

.product-picker-preview .product-shape {
  width: 134px;
  height: 134px;
}

.product-picker-preview .product-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-picker-grid > button > span:nth-child(2) {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
}

.product-picker-grid strong {
  font-size: 16px;
}

.product-picker-grid small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.product-picker-grid b {
  margin-top: 7px;
  color: var(--coral-deep);
  font-size: 14px;
}

.product-picker-check {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: var(--coral);
  color: #fff;
}

.product-picker-colors {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.product-picker-colors button {
  display: grid;
  min-width: 0;
  min-height: 84px;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  grid-gap: 12px;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  text-align: left;
}

.product-picker-colors button:hover,
.product-picker-colors button.is-active {
  border-color: var(--coral);
  background: #fffafa;
}

.product-picker-colors button > i {
  width: 40px;
  height: 40px;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--line-strong);
}

.product-picker-colors button > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.product-picker-colors strong {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-picker-colors small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-picker-colors button > svg {
  color: var(--coral-deep);
}

.product-picker-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 16px 30px;
  border-top: 1px solid var(--line);
  background: var(--paper);
}

.product-picker-footer > span {
  display: grid;
  min-width: 0;
  grid-template-columns: 60px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  grid-column-gap: 12px;
  column-gap: 12px;
}

.product-picker-footer .product-shape {
  width: 60px;
  height: 60px;
  grid-row: 1 / 3;
}

.product-picker-footer .product-photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-picker-footer small {
  align-self: end;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.product-picker-footer strong {
  align-self: start;
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-picker-footer > button {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 24px;
  border-radius: 14px;
  background: var(--ink);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}

@keyframes product-picker-in {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.order-configurator-overlay {
  position: fixed;
  z-index: 190;
  inset: 0;
  display: grid;
  padding: 18px;
  place-items: center;
  background: rgba(39, 35, 34, .42);
  -webkit-backdrop-filter: blur(9px);
          backdrop-filter: blur(9px);
  animation: fade-in 180ms ease both;
}

.order-configurator-modal {
  display: flex;
  width: min(900px, 100%);
  max-height: min(900px, calc(100vh - 36px));
  overflow: hidden;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 30px 100px rgba(45, 31, 29, .28);
  animation: product-picker-in 260ms cubic-bezier(.2, .8, .2, 1) both;
}

.order-configurator-header {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  align-items: center;
  grid-gap: 18px;
  gap: 18px;
  padding: 25px 30px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(130deg, #fff8f5, #f9f2ff 55%, #eefaf8);
}

.order-configurator-icon {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(145deg, var(--coral), #b64d99);
  color: #fff;
  box-shadow: 0 10px 22px rgba(190, 65, 103, .22);
}

.order-configurator-header > span:nth-child(2) {
  min-width: 0;
}

.order-configurator-header small {
  color: #a34873;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.order-configurator-header h2 {
  margin: 3px 0 5px;
  font-size: 30px;
  letter-spacing: -.045em;
}

.order-configurator-header p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.order-configurator-header > button {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .82);
  color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--line);
}

.order-configurator-body {
  display: grid;
  min-height: 0;
  grid-template-columns: 330px minmax(0, 1fr);
  overflow-y: auto;
}

.order-preview-panel {
  display: flex;
  min-width: 0;
  justify-content: center;
  flex-direction: column;
  padding: 26px;
  border-right: 1px solid var(--line);
  background: linear-gradient(160deg, var(--paper), #f0f5f2);
}

.order-product-preview {
  position: relative;
  display: grid;
  width: 100%;
  height: 350px;
  overflow: hidden;
  place-items: center;
  border-radius: 20px;
  background: rgba(255, 255, 255, .7);
  box-shadow: inset 0 0 0 1px rgba(210, 199, 195, .72);
}

.order-product-preview .product-shape {
  width: 350px;
  height: 350px;
}

.order-product-preview .product-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.order-preview-artwork {
  position: absolute;
  z-index: 2;
  top: 53%;
  left: 50%;
  display: grid;
  width: 66px;
  height: 78px;
  place-items: center;
  color: var(--coral);
  transform: translate(-50%, -50%);
  mix-blend-mode: multiply;
}

.order-preview-artwork > i {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform-origin: center;
}

.order-preview-artwork > i > svg,
.order-preview-artwork > i > div,
.order-preview-artwork > i > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.order-preview-artwork .type-art strong {
  font-size: 11px;
}

.order-preview-artwork .type-art span,
.order-preview-artwork .type-art svg {
  display: none;
}

.order-preview-caption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 18px;
  text-align: center;
}

.order-preview-caption small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.order-preview-caption strong {
  font-size: 20px;
}

.order-preview-caption span {
  color: var(--muted);
  font-size: 12px;
}

.order-configurator-options {
  min-width: 0;
  padding: 28px 30px 30px;
}

.order-option-group + .order-option-group {
  margin-top: 27px;
  padding-top: 25px;
  border-top: 1px solid var(--line);
}

.order-option-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.order-option-heading > span {
  display: flex;
  align-items: center;
  gap: 10px;
}

.order-option-heading > span i {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  background: var(--soft-coral);
  color: var(--coral-deep);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.order-option-heading strong {
  font-size: 17px;
}

.order-option-heading > small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.order-size-allocation {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 15px;
  background: #fff;
}

.order-size-allocation-header,
.order-size-row {
  display: grid;
  grid-template-columns: minmax(70px, 1fr) 174px 100px;
  align-items: center;
  grid-gap: 12px;
  gap: 12px;
  padding: 0 14px;
}

.order-size-allocation-header {
  min-height: 38px;
  background: var(--paper);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.order-size-allocation-header span:nth-child(2) {
  text-align: center;
}

.order-size-allocation-header span:last-child {
  text-align: right;
}

.order-size-row {
  min-height: 66px;
  border-top: 1px solid var(--line);
  transition: background 160ms ease;
}

.order-size-row.is-active {
  background: #fff8f7;
}

.order-size-name {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.order-size-name strong {
  font-size: 16px;
}

.order-size-name small {
  color: var(--muted);
  font-size: 10px;
}

.order-size-row.is-active .order-size-name small {
  color: var(--coral-deep);
  font-weight: 700;
}

.order-size-quantity {
  display: grid;
  height: 46px;
  grid-template-columns: 42px 1fr 42px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: #fff;
}

.order-size-quantity button {
  display: grid;
  place-items: center;
  background: var(--paper);
  color: var(--ink);
}

.order-size-quantity button:hover:not(:disabled) {
  background: var(--soft-coral);
  color: var(--coral-deep);
}

.order-size-quantity button:disabled {
  cursor: not-allowed;
  opacity: .32;
}

.order-size-quantity input {
  width: 100%;
  padding: 0;
  border: 0;
  border-right: 1px solid var(--line);
  border-left: 1px solid var(--line);
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 17px;
  font-weight: 800;
  text-align: center;
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}

.order-size-quantity input::-webkit-inner-spin-button,
.order-size-quantity input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
          appearance: none;
}

.order-size-line-total {
  color: var(--ink);
  font-size: 14px;
  text-align: right;
}

.order-size-row.is-active .order-size-line-total {
  color: var(--coral-deep);
}

.order-allocation-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
  padding: 13px 15px;
  border-radius: 13px;
  background: var(--soft-coral);
}

.order-allocation-summary span {
  color: var(--coral-deep);
  font-size: 12px;
  font-weight: 700;
}

.order-allocation-summary strong {
  color: var(--coral-deep);
  font-size: 19px;
  white-space: nowrap;
}

.order-quantity-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

.order-quantity-stepper {
  display: grid;
  width: 210px;
  min-height: 64px;
  grid-template-columns: 54px 1fr 54px;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: #fff;
}

.order-quantity-stepper > button {
  display: grid;
  place-items: center;
  background: var(--paper);
  color: var(--ink);
}

.order-quantity-stepper > button:hover:not(:disabled) {
  background: var(--soft-coral);
  color: var(--coral-deep);
}

.order-quantity-stepper > button:disabled {
  cursor: not-allowed;
  opacity: .35;
}

.order-quantity-stepper label {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1px;
  border-right: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.order-quantity-stepper label span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.order-quantity-stepper input {
  width: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 21px;
  font-weight: 800;
  text-align: center;
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}

.order-quantity-stepper input::-webkit-inner-spin-button,
.order-quantity-stepper input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
          appearance: none;
}

.order-calculation-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  white-space: nowrap;
}

.order-calculation-inline strong {
  color: var(--ink);
  font-size: 14px;
}

.order-calculation-inline i {
  font-size: 13px;
  font-style: normal;
}

.order-calculation-inline b {
  color: var(--coral-deep);
  font-size: 18px;
}

.order-price-breakdown {
  margin-top: 27px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
}

.order-price-breakdown > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 28px;
  color: var(--muted);
  font-size: 13px;
}

.order-price-breakdown > div strong {
  color: var(--ink);
  font-size: 14px;
  text-align: right;
}

.order-price-breakdown > div.is-total {
  min-height: 54px;
  margin-top: 10px;
  padding-top: 13px;
  border-top: 1px solid var(--line-strong);
  color: var(--ink);
  font-size: 16px;
  font-weight: 800;
}

.order-price-breakdown > div.is-total strong {
  color: var(--coral-deep);
  font-size: 26px;
}

.order-price-breakdown > small {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.order-final-action {
  display: flex;
  width: 100%;
  min-height: 68px;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-top: 14px;
  padding: 10px 18px 10px 20px;
  border-radius: 15px;
  background: var(--coral);
  color: #fff;
  text-align: left;
  box-shadow: 0 12px 28px rgba(255, 56, 47, .22);
  transition: background 160ms ease, transform 160ms ease;
}

.order-final-action:hover {
  background: var(--coral-deep);
  transform: translateY(-1px);
}

.order-final-action:disabled {
  cursor: not-allowed;
  background: #b8afac;
  box-shadow: none;
  transform: none;
}

.order-final-action > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.order-final-action > span strong {
  font-size: 16px;
}

.order-final-action > span small {
  color: rgba(255, 255, 255, .75);
  font-size: 12px;
}

.order-final-action > b {
  font-size: 20px;
  white-space: nowrap;
}

.cart-overlay {
  position: fixed;
  z-index: 180;
  inset: 0;
  background: rgba(39, 35, 34, .24);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  animation: fade-in 180ms ease both;
}

.cart-drawer {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  width: min(430px, 100%);
  height: 100%;
  flex-direction: column;
  padding: 22px;
  background: #fff;
  animation: drawer-in 280ms cubic-bezier(.2, .8, .2, 1) both;
}

.cart-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.cart-heading > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cart-heading small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.cart-heading strong {
  font-size: 22px;
}

.cart-heading button {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: var(--paper);
}

.cart-product {
  display: grid;
  grid-template-columns: 86px 1fr auto;
  align-items: center;
  grid-gap: 12px;
  gap: 12px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.cart-product > div {
  position: relative;
  display: grid;
  width: 86px;
  height: 86px;
  overflow: hidden;
  place-items: center;
  border-radius: var(--small-radius);
  background: var(--paper-deep);
}

.cart-product .product-shape {
  width: 94px;
  height: 94px;
}

.cart-product .product-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-artwork {
  position: absolute;
  z-index: 2;
  top: 54%;
  left: 50%;
  display: grid;
  width: 20px;
  height: 24px;
  place-items: center;
  color: var(--coral);
  transform: translate(-50%, -50%);
  mix-blend-mode: multiply;
}

.cart-artwork > i {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform-origin: center;
}

.cart-artwork > i > svg,
.cart-artwork > i > div,
.cart-artwork > i > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cart-artwork .type-art strong {
  font-size: 4px;
}

.cart-artwork .type-art span,
.cart-artwork .type-art svg {
  display: none;
}

.cart-artwork .smile-art {
  border-width: 2px;
}

.cart-artwork .smile-art > span {
  width: 2px;
  height: 2px;
}

.cart-artwork .smile-art i {
  border-bottom-width: 2px;
}

.cart-product > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.cart-product > span strong {
  font-size: 13px;
}

.cart-product small {
  color: var(--muted);
  font-size: 10px;
}

.cart-product > strong {
  align-self: start;
  margin-top: 4px;
  font-size: 13px;
}

.delivery-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  padding: 14px;
  border-radius: var(--small-radius);
  background: #edf1ea;
  color: var(--green);
}

.delivery-note > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.delivery-note strong {
  font-size: 11px;
}

.delivery-note small {
  font-size: 9px;
  opacity: .8;
}

.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}

.cart-total span {
  color: var(--muted);
  font-size: 12px;
}

.cart-total strong {
  font-size: 22px;
}

.payment-note {
  margin: 11px 0 0;
  color: var(--muted);
  font-size: 9px;
  text-align: center;
}

.checkout-done {
  display: flex;
  flex: 1 1;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.checkout-done > span {
  display: grid;
  width: 60px;
  height: 60px;
  margin-bottom: 18px;
  place-items: center;
  border-radius: 50%;
  background: var(--soft-coral);
  color: var(--coral);
}

.checkout-done h2 {
  margin: 0;
  font-size: 30px;
  letter-spacing: -.05em;
}

.checkout-done p {
  max-width: 280px;
  margin: 10px 0 24px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.checkout-done > button {
  width: auto;
  padding: 0 22px;
}

@keyframes view-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes product-in {
  from { opacity: 0; transform: translate3d(var(--pan-x), calc(var(--pan-y) + 14px), 0) scale(calc(var(--zoom) * .96)); }
  to { opacity: 1; transform: translate3d(var(--pan-x), var(--pan-y), 0) scale(var(--zoom)); }
}

@keyframes live-view-turn {
  from { opacity: .3; transform: perspective(1200px) translateX(var(--view-shift)) rotateY(calc(var(--view-rotation) - 24deg)) scale(.96); }
  to { opacity: 1; transform: perspective(1200px) translateX(var(--view-shift)) rotateY(var(--view-rotation)) scale(1); }
}

@keyframes ai-tab-shine {
  0%, 62% { left: -42%; opacity: 0; }
  72% { opacity: .9; }
  92%, 100% { left: 118%; opacity: 0; }
}

@keyframes ai-sparkle {
  0%, 100% { opacity: .35; transform: scale(.7); }
  50% { opacity: 1; transform: scale(1.25); }
}

@keyframes ai-progress-pulse {
  0%, 100% { opacity: .7; }
  50% { opacity: 1; box-shadow: 0 0 8px rgba(197, 79, 140, .4); }
}

@keyframes ai-question-in {
  from { opacity: 0; transform: translateX(8px) scale(.99); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes drawer-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes thinking-dot {
  from { opacity: .28; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(-2px); }
}

@keyframes toast-pop {
  from { opacity: 0; transform: translate(-50%, -8px) scale(.94); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@media (min-width: 1181px) {
  .studio-view {
    width: 100%;
    height: calc(100vh - 74px);
    min-height: 0;
    grid-template-columns: clamp(370px, 22vw, 400px) minmax(460px, 1fr) clamp(350px, 21vw, 380px);
    overflow: hidden;
  }

  .tool-panel,
  .canvas-panel,
  .inspector-panel {
    min-height: 0;
  }

  .panel-heading {
    min-height: 84px;
    padding: 18px 22px;
  }

  .panel-heading span {
    font-size: 12px;
  }

  .panel-heading strong {
    font-size: 18px;
  }

  .saved-state {
    padding: 7px 10px;
  }

  .tool-tabs {
    grid-template-columns: minmax(96px, 1.2fr) 14px repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 0;
  }

  .tool-tabs button {
    min-height: 66px;
    gap: 6px;
    font-size: 11px;
  }

  .tool-tabs button svg {
    width: 21px;
    height: 21px;
  }

  .tool-tabs .ai-studio-tab {
    min-height: 66px;
  }

  .tool-tabs .ai-tab-icon {
    width: 31px;
    height: 31px;
  }

  .tool-tabs .ai-tab-icon svg {
    width: 18px;
    height: 18px;
  }

  .tool-tabs .ai-tab-copy strong {
    font-size: 11px;
  }

  .tool-content {
    padding: 22px;
  }

  .ai-guide {
    gap: 12px;
    margin-bottom: 19px;
    padding: 13px;
  }

  .ai-guide > span {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .ai-guide p {
    font-size: 11px;
  }

  .ai-guide strong {
    font-size: 12px;
  }

  .choice-question {
    gap: 8px;
    margin: 16px 0 8px;
    font-size: 11px;
  }

  .choice-question i {
    width: 20px;
    height: 20px;
    font-size: 10px;
  }

  .smart-choice-list {
    gap: 7px;
  }

  .smart-choice-list button {
    min-height: 38px;
    font-size: 11px;
  }

  .field-label,
  .sub-label {
    font-size: 12px;
  }

  .prompt-field textarea {
    font-size: 13px;
  }

  .fine-tune-label + .prompt-field textarea {
    min-height: 88px;
  }

  .generate-action {
    min-height: 52px;
    font-size: 13px;
  }

  .generation-reaction {
    padding: 11px 12px;
    font-size: 10px;
  }

  .generation-reaction strong {
    font-size: 11px;
  }

  .ai-kit-list {
    gap: 8px;
  }

  .ai-kit-list > button {
    grid-template-columns: 58px 1fr auto;
    min-height: 70px;
    gap: 11px;
    padding: 8px 12px 8px 8px;
  }

  .kit-preview {
    width: 58px;
    height: 54px;
  }

  .ai-kit-list strong {
    font-size: 11px;
  }

  .ai-kit-list small {
    font-size: 9px;
  }

  .library-heading strong {
    font-size: 14px;
  }

  .library-heading small,
  .library-heading > span:last-child {
    font-size: 9px;
  }

  .graphic-library {
    gap: 9px;
  }

  .graphic-library button {
    min-height: 108px;
  }

  .graphic-library button > svg,
  .graphic-library button > div {
    width: 58px;
    height: 58px;
  }

  .graphic-library button > span,
  .copy-suggestions button,
  .mini-ai-box input,
  .mini-ai-box > button {
    font-size: 10px;
  }

  .canvas-toolbar {
    min-height: 64px;
    padding-inline: 19px;
  }

  .back-to-products,
  .canvas-title {
    font-size: 12px;
  }

  .design-stage {
    min-height: 650px;
  }

  .drag-hint {
    padding: 8px 12px;
    font-size: 10px;
  }

  .zoom-wrap {
    width: min(72vh, 660px);
    max-width: 90%;
  }

  .art-placement {
    width: 136px;
    height: 150px;
  }

  .art-placement.element-text {
    width: 166px;
    height: 106px;
  }

  .art-placement.element-image {
    width: 145px;
    height: 145px;
  }

  .inspector-section {
    padding: 20px;
  }

  .inspector-label {
    font-size: 11px;
  }

  .selected-product {
    grid-template-columns: 58px 1fr auto;
    gap: 11px;
    padding: 9px;
  }

  .selected-thumb {
    width: 58px;
    height: 58px;
  }

  .selected-product strong {
    font-size: 13px;
  }

  .selected-product small,
  .inspector-heading small {
    font-size: 10px;
  }

  .inspector-heading > span {
    font-size: 12px;
  }

  .layer-list {
    max-height: 230px;
    gap: 6px;
  }

  .layer-item {
    grid-template-columns: 40px 1fr auto;
    min-height: 52px;
    gap: 9px;
    padding: 6px;
  }

  .layer-thumb {
    width: 40px;
    height: 40px;
  }

  .layer-item > span:nth-child(2) strong {
    font-size: 10px;
  }

  .layer-item > span:nth-child(2) small,
  .layer-quick-actions button,
  .element-color-row > span,
  .range-control span,
  .range-control strong {
    font-size: 9px;
  }

  .layer-actions i {
    width: 24px;
    height: 24px;
  }

  .product-swatches button {
    width: 30px;
    height: 30px;
  }

  .element-color-row button {
    width: 22px;
    height: 22px;
  }

  .order-dock {
    padding: 18px;
  }

  .order-dock > button {
    min-height: 52px;
    font-size: 13px;
  }

  .panel-heading strong { font-size: 21px; }
  .panel-heading span { font-size: 13px; }
  .tool-tabs button { min-height: 68px; font-size: 13px; }
  .tool-tabs button svg { width: 22px; height: 22px; }
  .tool-tabs .ai-tab-copy strong { font-size: 12px; }
  .tool-content { padding: 25px; }
  .ai-guide { padding: 15px; }
  .ai-guide > span { width: 40px; height: 40px; flex-basis: 40px; }
  .ai-guide p { font-size: 13px; }
  .ai-guide strong { font-size: 14px; }
  .ai-guide-featured p > small { font-size: 10px; }
  .ai-guide-featured > i { font-size: 9px; }
  .choice-question { font-size: 13px; }
  .choice-question i { width: 23px; height: 23px; font-size: 11px; }
  .smart-choice-list button { min-height: 44px; font-size: 13px; }
  .field-label, .sub-label { font-size: 13px; }
  .prompt-field textarea { font-size: 15px; }
  .fine-tune-label + .prompt-field textarea { min-height: 104px; }
  .generate-action { min-height: 58px; font-size: 14px; }
  .generation-reaction { font-size: 11px; }
  .generation-reaction strong { font-size: 12px; }
  .ai-kit-list > button { min-height: 78px; grid-template-columns: 64px 1fr auto; }
  .kit-preview { width: 64px; height: 60px; }
  .ai-kit-list strong { font-size: 13px; }
  .ai-kit-list small { font-size: 10px; }
  .canvas-toolbar { min-height: 68px; }
  .back-to-products, .canvas-title { font-size: 14px; }
  .drag-hint { padding: 9px 14px; font-size: 12px; }
  .zoom-wrap { width: min(78vh, 740px); max-width: 96%; }
  .art-placement { width: 150px; height: 166px; }
  .art-placement.element-text { width: 184px; height: 118px; }
  .art-placement.element-image { width: 160px; height: 160px; }
  .inspector-section { padding: 23px; }
  .inspector-label { font-size: 13px; }
  .selected-product { grid-template-columns: 64px 1fr auto; padding: 10px; }
  .selected-thumb { width: 64px; height: 64px; }
  .selected-product strong { font-size: 16px; }
  .selected-product small, .inspector-heading small { font-size: 12px; }
  .inspector-heading > span { font-size: 17px; }
  .inspector-heading button { font-size: 12px; }
  .product-color-options button { min-height: 42px; padding: 7px 10px; font-size: 11px; }
  .product-color-options i { width: 23px; height: 23px; flex-basis: 23px; }
  .print-surface-list button { min-height: 60px; padding: 9px; }
  .print-surface-list strong { font-size: 12px; }
  .print-surface-list small { font-size: 10px; }
  .print-surface-note { font-size: 10px; }
  .layer-item { grid-template-columns: 44px 1fr auto; min-height: 58px; }
  .layer-thumb { width: 44px; height: 44px; }
  .layer-item > span:nth-child(2) strong { font-size: 13px; }
  .layer-item > span:nth-child(2) small { font-size: 11px; }
  .layer-quick-actions button { min-height: 38px; font-size: 11px; }
  .empty-layer-button { min-height: 44px; font-size: 12px; }
  .range-control span, .range-control strong, .element-color-row > span { font-size: 13px; }
  .order-dock > button { min-height: 58px; font-size: 15px; }
  .ai-progress span { font-size: 9px; }
  .ai-brief-pills button { padding: 8px 10px; font-size: 11px; }
  .ai-brief-pills small { font-size: 8px; }
  .ai-question-card { padding: 16px; }
  .ai-question-heading { grid-template-columns: 34px 1fr; gap: 11px; }
  .ai-question-heading > span { width: 34px; height: 34px; font-size: 12px; }
  .ai-question-heading small { font-size: 10px; }
  .ai-question-heading h3 { font-size: 19px; }
  .ai-question-heading p { font-size: 12px; }
  .ai-answer-list { gap: 8px; }
  .ai-answer-list > button { min-height: 58px; grid-template-columns: 36px 1fr auto; padding: 9px 10px; }
  .ai-answer-list > button > i { width: 36px; height: 36px; font-size: 10px; }
  .ai-answer-list strong { font-size: 13px; }
  .ai-answer-list small { font-size: 10px; }
  .order-configure-button > span strong { font-size: 15px; }
  .order-configure-button > span small { font-size: 11px; }
  .order-configure-button > b { font-size: 13px; }
  .order-dock > small { font-size: 10px; }
}

@media (max-width: 1180px) {
  .studio-view {
    grid-template-columns: 280px minmax(390px, 1fr) 272px;
  }

  .tool-content {
    padding: 17px;
  }

  .inspector-section {
    padding: 16px;
  }

  .zoom-wrap {
    max-width: 92%;
  }
}

@media (max-width: 980px) {
  .studio-view {
    grid-template-columns: 290px minmax(0, 1fr);
  }

  .tool-panel,
  .canvas-panel {
    min-height: 680px;
  }

  .inspector-panel {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: 1fr 290px;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .inspector-scroll {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible;
  }

  .inspector-section {
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  .order-dock {
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  .picker-heading {
    gap: 30px;
  }

  .product-choice {
    min-height: 305px;
  }

  .choice-visual {
    height: 182px;
  }
}

@media (max-width: 760px) {
  .app-header {
    grid-template-columns: 1fr auto;
    min-height: 64px;
    padding: 6px 14px;
  }

  .app-header .memomo-logo {
    width: 82px;
    height: 50px;
  }

  .header-context,
  .app-progress,
  .help-button {
    display: none;
  }

  .drag-hint {
    display: none;
  }

  .view-turner {
    top: 10px;
    left: 10px;
  }

  .picker-view {
    width: min(100% - 28px, 620px);
    padding-top: 34px;
  }

  .picker-heading {
    display: block;
    margin-bottom: 25px;
  }

  .picker-heading p {
    margin-top: 15px;
  }

  .product-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .product-choice {
    min-height: 270px;
    padding: 13px;
    border-radius: 15px;
  }

  .choice-visual {
    height: 155px;
  }

  .choice-visual::before {
    width: 140px;
    height: 95px;
  }

  .choice-visual .product-shape {
    width: 170px;
    height: 170px;
  }

  .choice-phone .choice-visual .product-shape {
    width: 115px;
    height: 150px;
  }

  .choice-tumbler .choice-visual .product-shape {
    width: 125px;
    height: 155px;
  }

  .choice-cap .choice-visual .product-shape {
    width: 180px;
    height: 160px;
  }

  .choice-copy {
    align-items: start;
    flex-direction: column;
    gap: 7px;
  }

  .choice-copy > span:last-child {
    align-items: flex-start;
    flex-direction: row;
    gap: 4px;
  }

  .choice-copy strong {
    font-size: 15px;
  }

  .choice-copy small {
    max-width: 145px;
    font-size: 10px;
  }

  .picker-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .studio-view {
    display: flex;
    flex-direction: column;
  }

  .canvas-panel {
    order: 1;
    min-height: 560px;
  }

  .tool-panel {
    order: 2;
    min-height: auto;
    border-top: 1px solid var(--line);
    border-right: 0;
  }

  .inspector-panel {
    display: flex;
    order: 3;
    flex-direction: column;
  }

  .inspector-scroll {
    display: block;
  }

  .inspector-section {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .order-dock {
    border-left: 0;
  }

  .design-stage {
    min-height: 500px;
  }

  .zoom-wrap {
    width: min(96vw, 520px);
    max-width: 96%;
  }

  .panel-footnote {
    display: none;
  }

  .tool-content {
    min-height: 370px;
  }

  .inspector-scroll .inspector-section {
    padding-inline: 20px;
  }

  .product-picker-overlay {
    padding: 12px;
  }

  .product-picker-modal {
    max-height: calc(100vh - 24px);
    border-radius: 19px;
  }

  .product-picker-header {
    grid-template-columns: 40px 1fr auto;
    padding: 16px;
  }

  .product-picker-title-icon {
    width: 40px;
    height: 40px;
  }

  .product-picker-header h2 {
    font-size: 22px;
  }

  .product-picker-header p {
    display: none;
  }

  .product-picker-body {
    padding: 18px;
  }

  .product-picker-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-picker-colors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-picker-footer {
    padding: 14px 18px;
  }

  .order-configurator-overlay {
    padding: 12px;
  }

  .order-configurator-modal {
    max-height: calc(100vh - 24px);
    border-radius: 19px;
  }

  .order-configurator-header {
    grid-template-columns: 44px 1fr auto;
    gap: 12px;
    padding: 16px 18px;
  }

  .order-configurator-icon {
    width: 44px;
    height: 44px;
  }

  .order-configurator-header h2 {
    font-size: 22px;
  }

  .order-configurator-header p {
    display: none;
  }

  .order-configurator-header > button {
    width: 40px;
    height: 40px;
  }

  .order-configurator-body {
    display: block;
    overflow-y: auto;
  }

  .order-preview-panel {
    display: grid;
    grid-template-columns: 150px 1fr;
    align-items: center;
    grid-gap: 18px;
    gap: 18px;
    padding: 16px 18px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .order-product-preview {
    width: 150px;
    height: 150px;
  }

  .order-product-preview .product-shape {
    width: 170px;
    height: 170px;
  }

  .order-preview-artwork {
    width: 34px;
    height: 42px;
  }

  .order-preview-caption {
    margin-top: 0;
    text-align: left;
  }

  .order-preview-caption strong {
    font-size: 18px;
  }

  .order-configurator-options {
    padding: 20px 18px 22px;
  }
}

@media (max-width: 430px) {
  .language-button {
    min-width: 44px;
    padding: 0 9px;
  }

  .picker-heading h1 {
    font-size: 41px;
  }

  .product-choice {
    min-height: 252px;
  }

  .choice-topline {
    font-size: 9px;
  }

  .choice-topline svg {
    width: 30px;
    height: 30px;
  }

  .choice-visual {
    height: 143px;
  }

  .choice-copy small {
    max-width: 122px;
  }

  .canvas-toolbar {
    grid-template-columns: 1fr auto;
  }

  .canvas-title {
    display: none;
  }

  .design-stage {
    min-height: 450px;
  }

  .drag-hint {
    top: 12px;
  }

  .stage-bottom-tools {
    right: 10px;
    bottom: 10px;
    left: 10px;
  }

  .zoom-wrap {
    width: 108vw;
    max-width: 108%;
  }

  .art-placement {
    width: 105px;
    height: 120px;
  }

  .product-tote .art-placement {
    width: 112px;
    height: 120px;
  }

  .tool-content {
    padding: 18px;
  }

  .cart-drawer {
    padding: 18px;
  }

  .product-picker-grid > button {
    min-height: 105px;
    grid-template-columns: 70px 1fr;
  }

  .product-picker-preview {
    width: 70px;
    height: 86px;
  }

  .product-picker-preview .product-shape {
    width: 86px;
    height: 86px;
  }

  .product-picker-footer > span {
    display: none;
  }

  .product-picker-footer > button {
    width: 100%;
  }

  .order-preview-panel {
    grid-template-columns: 112px 1fr;
    gap: 13px;
  }

  .order-product-preview {
    width: 112px;
    height: 112px;
    border-radius: 15px;
  }

  .order-product-preview .product-shape {
    width: 132px;
    height: 132px;
  }

  .order-preview-artwork {
    width: 26px;
    height: 32px;
  }

  .order-preview-caption small {
    font-size: 9px;
  }

  .order-preview-caption strong {
    font-size: 16px;
  }

  .order-preview-caption span {
    font-size: 11px;
  }

  .order-size-allocation-header,
  .order-size-row {
    grid-template-columns: 58px minmax(138px, 1fr) 82px;
    gap: 7px;
    padding: 0 9px;
  }

  .order-size-allocation-header {
    font-size: 9px;
  }

  .order-size-name small {
    display: none;
  }

  .order-size-quantity {
    grid-template-columns: 36px 1fr 36px;
  }

  .order-quantity-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .order-quantity-stepper {
    width: 100%;
  }

  .order-calculation-inline {
    align-self: flex-end;
  }

  .order-price-breakdown > div.is-total strong {
    font-size: 23px;
  }
}

/* AI Studio modal */

.ai-studio-overlay {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: grid;
  padding: 18px;
  place-items: center;
  background: rgba(39, 35, 34, .44);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  animation: fade-in 180ms ease both;
}

.studio-view:has(.ai-studio-overlay) {
  animation: none;
  transform: none;
}

.tool-panel:has(.ai-studio-overlay) {
  z-index: 200;
}

.tool-content:has(.ai-studio-overlay) {
  overflow: visible;
}

.ai-studio-modal {
  display: flex;
  width: min(980px, 100%);
  max-height: min(920px, calc(100vh - 36px));
  overflow: hidden;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 32px 110px rgba(45, 31, 29, .3);
  animation: product-picker-in 260ms cubic-bezier(.2, .8, .2, 1) both;
}

.ai-studio-modal-header {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  align-items: center;
  grid-gap: 18px;
  gap: 18px;
  padding: 24px 30px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(130deg, #fff5f1, #f8efff 55%, #eafaf7);
}

.ai-studio-modal-icon {
  display: grid;
  width: 60px;
  height: 60px;
  place-items: center;
  border-radius: 17px;
  background: linear-gradient(145deg, #ff493f, #b64d99 62%, #706bc5);
  color: #fff;
  box-shadow: 0 11px 25px rgba(190, 65, 103, .24);
}

.ai-studio-modal-header > span:nth-child(2) {
  min-width: 0;
}

.ai-studio-modal-header small {
  color: #a34873;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ai-studio-modal-header h2 {
  margin: 2px 0 4px;
  font-size: 31px;
  letter-spacing: -.045em;
}

.ai-studio-modal-header p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.ai-studio-modal-header > button {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .84);
  color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--line);
}

.ai-studio-modal-body {
  min-height: 0;
  overflow-y: auto;
  padding: 28px 34px 34px;
}

.ai-studio-modal .ai-studio-flow {
  width: min(820px, 100%);
  margin-inline: auto;
}

.ai-studio-modal .ai-guide-featured {
  align-items: center;
  margin-bottom: 20px;
  padding: 18px 68px 18px 18px;
  border-radius: 16px;
}

.ai-studio-modal .ai-guide-featured > span {
  width: 46px;
  height: 46px;
  flex-basis: 46px;
}

.ai-studio-modal .ai-guide-featured p {
  font-size: 13px;
  line-height: 1.5;
}

.ai-studio-modal .ai-guide-featured strong {
  margin-bottom: 3px;
  font-size: 16px;
}

.ai-studio-modal .ai-guide-featured p > small,
.ai-studio-modal .ai-guide-featured > i {
  font-size: 10px;
}

.ai-studio-modal .ai-progress {
  gap: 7px;
  margin-bottom: 14px;
}

.ai-studio-modal .ai-progress > i {
  height: 6px;
}

.ai-studio-modal .ai-progress span {
  font-size: 12px;
}

.ai-studio-modal .ai-brief-pills {
  gap: 9px;
  margin-bottom: 16px;
}

.ai-studio-modal .ai-brief-pills button {
  min-height: 52px;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 13px;
}

.ai-studio-modal .ai-brief-pills small {
  font-size: 10px;
}

.ai-studio-modal .ai-question-card {
  padding: 22px;
  border-radius: 18px;
}

.ai-studio-modal .ai-question-heading {
  grid-template-columns: 44px 1fr;
  gap: 14px;
  margin-bottom: 18px;
}

.ai-studio-modal .ai-question-heading > span {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-size: 15px;
}

.ai-studio-modal .ai-question-heading small {
  font-size: 10px;
}

.ai-studio-modal .ai-question-heading h3 {
  font-size: 23px;
}

.ai-studio-modal .ai-question-heading p {
  margin-top: 6px;
  font-size: 13px;
}

.ai-studio-modal .ai-answer-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.ai-studio-modal .ai-answer-list > button {
  min-height: 76px;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 13px;
}

.ai-studio-modal .ai-answer-list > button > i {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-size: 12px;
}

.ai-studio-modal .ai-answer-list strong {
  font-size: 14px;
}

.ai-studio-modal .ai-answer-list small {
  font-size: 12px;
}

.ai-studio-modal .ai-brief-summary {
  gap: 9px;
  margin-bottom: 18px;
}

.ai-studio-modal .ai-brief-summary > span {
  min-height: 60px;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 11px;
}

.ai-studio-modal .ai-brief-summary small {
  font-size: 10px;
}

.ai-studio-modal .ai-brief-summary strong {
  font-size: 13px;
}

.ai-studio-modal .field-label {
  font-size: 14px;
}

.ai-studio-modal .fine-tune-label small {
  font-size: 12px;
}

.ai-studio-modal .prompt-field textarea {
  font-size: 14px;
}

.ai-studio-modal .generate-action {
  min-height: 58px;
  font-size: 14px;
}

.ai-studio-modal .generation-reaction {
  padding: 13px 14px;
  font-size: 12px;
}

.ai-studio-modal .generation-reaction strong {
  font-size: 13px;
}

.ai-studio-modal .ai-kit-list > button {
  min-height: 78px;
  grid-template-columns: 64px 1fr auto;
  gap: 13px;
  padding: 9px 14px 9px 9px;
}

.ai-studio-modal .kit-preview {
  width: 64px;
  height: 60px;
}

.ai-studio-modal .ai-kit-list strong {
  font-size: 14px;
}

.ai-studio-modal .ai-kit-list small {
  font-size: 12px;
}

.ai-studio-modal .ai-back-button {
  min-height: 44px;
  margin-top: 12px;
  font-size: 12px;
}

/* Larger type for the persistent left-panel tools */

.tool-tabs > button:not(.ai-studio-tab) {
  font-size: 13px;
}

.tool-tabs .ai-tab-copy strong {
  font-size: 13px;
}

.tool-content-graphics .library-heading strong,
.tool-content-images .library-heading strong,
.tool-content-text .library-heading strong {
  font-size: 18px;
}

.tool-content-graphics .library-heading small,
.tool-content-graphics .library-heading > span:last-child,
.tool-content-images .library-heading small,
.tool-content-text .library-heading small {
  font-size: 12px;
  line-height: 1.4;
}

.tool-content-graphics .graphic-library button {
  min-height: 116px;
}

.tool-content-graphics .graphic-library button > span {
  font-size: 13px;
}

.tool-content-graphics .mini-ai-box {
  padding: 14px;
}

.tool-content-graphics .mini-ai-box > span {
  font-size: 14px;
}

.tool-content-graphics .mini-ai-box input {
  height: 44px;
  font-size: 13px;
}

.tool-content-graphics .mini-ai-box > button {
  min-height: 44px;
  font-size: 13px;
}

.tool-content-images .image-ai-card strong {
  font-size: 16px;
}

.tool-content-images .image-ai-card small {
  font-size: 12px;
}

.tool-content-images .field-label,
.tool-content-text .sub-label {
  font-size: 14px;
}

.tool-content-images .fine-tune-label small {
  font-size: 12px;
}

.tool-content-images .prompt-field textarea {
  font-size: 14px;
}

.tool-content-images .prompt-field > span {
  font-size: 12px;
}

.tool-content-images .image-style-picks button {
  min-height: 44px;
  font-size: 13px;
}

.tool-content-images .generate-action {
  min-height: 54px;
  font-size: 14px;
}

.tool-content-images .generate-action small {
  font-size: 12px;
}

.tool-content-images .or-divider span {
  font-size: 12px;
}

.tool-content-images .compact-upload {
  min-height: 70px;
  padding: 13px;
}

.tool-content-images .compact-upload strong {
  font-size: 14px;
}

.tool-content-images .compact-upload small {
  font-size: 12px;
}

.tool-content-images .upload-tip {
  font-size: 13px;
}

.tool-content-images .upload-tip strong {
  font-size: 14px;
}

.upload-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 2px 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.upload-hint svg {
  flex: 0 0 auto;
  opacity: .72;
}

.tool-content-text .text-add-row {
  grid-template-columns: minmax(0, 1fr) 84px;
  gap: 8px;
}

.tool-content-text .text-input {
  font-size: 14px;
}

.tool-content-text .text-add-row > button {
  min-height: 48px;
  font-size: 13px;
}

.tool-content-text .copy-suggestions {
  gap: 8px;
}

.tool-content-text .copy-suggestions button {
  min-height: 48px;
  padding-inline: 13px;
  font-size: 13px;
}

.tool-content-text .font-options button {
  min-height: 82px;
}

.tool-content-text .font-options strong {
  font-size: 24px;
}

.tool-content-text .font-options span {
  font-size: 13px;
}

.tool-content-text .swatch-list button {
  width: 36px;
  height: 36px;
}

.text-primary-add {
  display: grid;
  width: 100%;
  min-height: 68px;
  grid-template-columns: 42px 1fr;
  align-items: center;
  grid-gap: 12px;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 13px;
  background: var(--ink);
  color: #fff;
  text-align: left;
}

.text-primary-add > svg {
  width: 42px;
  height: 42px;
  padding: 11px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .12);
}

.text-primary-add > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.text-primary-add strong {
  font-size: 15px;
}

.text-primary-add small {
  color: rgba(255, 255, 255, .7);
  font-size: 12px;
}

.text-preset-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.text-preset-list > button {
  display: grid;
  min-height: 58px;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  grid-gap: 2px 10px;
  gap: 2px 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.text-preset-list > button:hover {
  border-color: var(--coral);
  background: #fffafa;
  transform: translateX(2px);
}

.text-preset-list > button > span {
  font-size: 14px;
  font-weight: 800;
}

.text-preset-list > button > small {
  color: var(--muted);
  font-size: 12px;
}

.text-preset-list > button > svg {
  grid-row: 1 / 3;
  grid-column: 2;
  color: var(--coral-deep);
}

.text-preset-subheading > span {
  font-weight: 600 !important;
}

.text-preset-body > span {
  font-size: 13px !important;
  font-weight: 500 !important;
}

.text-editor-card {
  margin-top: 18px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--paper);
}

.text-editor-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.text-editor-heading > span {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.text-editor-heading small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.text-editor-heading strong {
  font-size: 17px;
}

.text-editor-heading > i {
  padding: 4px 7px;
  border-radius: 999px;
  background: #e9f2e7;
  color: var(--green);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}

.text-editor-input {
  width: 100%;
  min-height: 92px;
  resize: vertical;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  outline: 0;
  background: #fff;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.4;
}

.text-editor-input:focus {
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(255, 56, 47, .1);
}

.text-control-label {
  display: block;
  margin: 16px 0 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.text-role-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 6px;
  gap: 6px;
}

.text-role-options button {
  min-height: 44px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.text-role-options button.is-active {
  border-color: var(--coral);
  background: var(--soft-coral);
  color: var(--coral-deep);
}

.text-transform-row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  grid-gap: 10px;
  gap: 10px;
  margin-top: 16px;
}

.text-transform-row > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 7px;
}

.text-transform-row > span > small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.text-size-stepper,
.text-align-options {
  display: grid;
  min-height: 44px;
  grid-template-columns: 40px minmax(52px, 1fr) 40px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.text-size-stepper button,
.text-align-options button {
  display: grid;
  min-width: 0;
  place-items: center;
  background: #fff;
  color: var(--muted);
}

.text-size-stepper button:first-child,
.text-align-options button:not(:last-child) {
  border-right: 1px solid var(--line);
}

.text-size-stepper strong {
  display: grid;
  place-items: center;
  font-size: 12px;
}

.text-align-options {
  grid-template-columns: repeat(3, 1fr);
}

.text-align-options button.is-active {
  background: var(--ink);
  color: #fff;
}

.text-editor-empty {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 18px;
  padding: 14px;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  background: var(--paper);
  color: var(--muted);
}

.text-editor-empty > svg {
  flex: 0 0 auto;
  color: var(--coral);
}

.text-editor-empty > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.text-editor-empty strong {
  color: var(--ink);
  font-size: 13px;
}

.text-editor-empty small {
  font-size: 12px;
  line-height: 1.4;
}

.text-editor-card.is-active,
.text-editor-empty.is-top {
  margin-top: 0;
}

.text-editor-card.is-active {
  border-color: rgba(255, 56, 47, .2);
  background: linear-gradient(180deg, #fffafa, var(--paper));
  box-shadow: 0 10px 26px rgba(72, 47, 44, .06);
}

.text-font-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  grid-gap: 8px;
  gap: 8px;
  margin-top: 12px;
}

.text-font-toolbar > label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
}

.text-font-toolbar > label > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.text-font-toolbar select {
  width: 100%;
  height: 44px;
  padding: 0 34px 0 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: 0;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
}

.text-font-toolbar select:focus {
  border-color: var(--coral);
}

.text-format-buttons {
  display: grid;
  grid-template-columns: repeat(3, 42px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.text-format-buttons button {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-right: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
}

.text-format-buttons button:last-child {
  border-right: 0;
}

.text-format-buttons button.is-active {
  background: var(--ink);
  color: #fff;
}

.text-spacing-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.text-spacing-controls label,
.text-transparency-control {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.text-spacing-controls label > span,
.text-transparency-control > span {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.text-spacing-controls strong,
.text-transparency-control strong {
  color: var(--ink);
  font-size: 12px;
}

.text-spacing-controls input,
.text-transparency-control input {
  width: 100%;
  accent-color: var(--coral);
}

.text-effect-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 7px;
  gap: 7px;
}

.text-effect-options button {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  padding: 7px 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
}

.text-effect-options button.is-active {
  border-color: var(--coral);
  background: var(--soft-coral);
  box-shadow: inset 0 0 0 1px rgba(255, 56, 47, .12);
}

.effect-sample {
  display: grid;
  min-height: 25px;
  place-items: center;
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  --text-color: var(--ink);
}

.text-effect-options small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.text-transparency-control {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.text-add-section,
.font-combination-section {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.text-add-section.is-first {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.text-basic-presets {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
}

.text-basic-presets > button {
  display: grid;
  width: 100%;
  min-height: 58px;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  grid-gap: 2px 10px;
  gap: 2px 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  text-align: left;
  transition: background 160ms ease, color 160ms ease;
}

.text-basic-presets > button:last-child {
  border-bottom: 0;
}

.text-basic-presets > button:hover {
  background: #fff7f5;
  color: var(--coral-deep);
}

.text-basic-presets > button > span {
  font-size: 15px;
  font-weight: 800;
}

.text-basic-presets > button > small {
  color: var(--muted);
  font-size: 12px;
}

.text-basic-presets > button > svg {
  grid-row: 1 / 3;
  grid-column: 2;
}

.text-basic-presets .text-preset-subheading > span {
  font-size: 14px;
  font-weight: 600 !important;
}

.text-basic-presets .text-preset-body > span {
  font-size: 13px !important;
  font-weight: 500 !important;
}

.font-combination-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 9px;
  gap: 9px;
}

.font-combination-grid > button {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 154px;
  overflow: hidden;
  flex-direction: column;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.font-combination-grid > button:hover {
  border-color: var(--coral);
  box-shadow: 0 10px 24px rgba(72, 47, 44, .1);
  transform: translateY(-2px);
}

.font-combination-grid > button > svg {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 24px;
  height: 24px;
  padding: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--coral-deep);
  box-shadow: 0 4px 12px rgba(39, 35, 34, .08);
}

.font-combination-preview {
  display: grid;
  width: 100%;
  height: 100px;
  padding: 13px;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(145deg, var(--paper), #fff8f5);
}

.font-combination-preview .type-art-heading strong {
  font-size: 21px;
}

.font-combination-preview .type-art-subheading strong {
  font-size: 17px;
}

.font-combination-preview .type-art-body strong {
  font-size: 13px;
}

.font-combination-meta {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
  padding: 9px 10px 10px;
}

.font-combination-meta strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.font-combination-meta small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-text-toolbar {
  position: absolute;
  z-index: 30;
  top: 14px;
  left: 50%;
  width: max-content;
  max-width: calc(100% - 32px);
  border: 1px solid rgba(255, 255, 255, .88);
  border-radius: 14px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 14px 38px rgba(39, 35, 34, .16);
  transform: translateX(-50%);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  animation: fade-in 180ms ease both;
}

.canvas-text-toolbar-main {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 54px;
  overflow-x: auto;
  padding: 6px;
  scrollbar-width: none;
}

.canvas-text-toolbar-main::-webkit-scrollbar {
  display: none;
}

.canvas-font-picker {
  position: relative;
  flex: 0 0 auto;
}

.canvas-font-picker-trigger {
  display: flex;
  width: 176px;
  height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
}

.canvas-font-picker-trigger > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-font-picker-trigger strong {
  font-size: 12px;
}

.canvas-font-picker-menu {
  position: absolute;
  z-index: 80;
  top: calc(100% + 10px);
  left: -6px;
  width: min(320px, calc(100vw - 44px));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 22px 60px rgba(39, 35, 34, .2);
}

.canvas-text-toolbar-main:has(.canvas-font-picker-menu) {
  overflow: visible;
}

.canvas-font-picker-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.canvas-font-picker-heading strong {
  font-size: 14px;
}

.canvas-font-picker-heading span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.canvas-font-picker-list {
  display: grid;
  max-height: 370px;
  grid-template-columns: 1fr;
  grid-gap: 5px;
  gap: 5px;
  overflow-y: auto;
  padding: 8px;
}

.canvas-font-picker-list > button {
  display: flex;
  min-width: 0;
  min-height: 58px;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  text-align: left;
}

.canvas-font-picker-list > button:hover,
.canvas-font-picker-list > button:focus-visible {
  border-color: var(--coral);
  background: #fff7f5;
  outline: 0;
}

.canvas-font-picker-list > button.is-active {
  background: var(--ink);
  color: #fff;
}

.font-choice-sample {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.font-choice-sample strong {
  font-size: 16px;
  line-height: 1.1;
}

.canvas-font-picker-list small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.canvas-font-picker-list > button.is-active small {
  color: rgba(255, 255, 255, .68);
}

.canvas-text-toolbar-main > textarea {
  width: 180px;
  height: 42px;
  flex: 0 0 180px;
  resize: none;
  overflow: hidden;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  outline: 0;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

.canvas-text-toolbar-main > textarea:focus,
.canvas-text-toolbar-main > select:focus {
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(255, 56, 47, .1);
}

.canvas-text-toolbar-main > select {
  width: 142px;
  height: 42px;
  flex: 0 0 142px;
  padding: 0 30px 0 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  outline: 0;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
}

.canvas-text-size,
.canvas-text-format,
.canvas-text-align {
  display: grid;
  height: 42px;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
}

.canvas-text-size {
  grid-template-columns: 36px 50px 36px;
}

.canvas-text-format,
.canvas-text-align {
  grid-template-columns: repeat(3, 39px);
}

.canvas-text-size button,
.canvas-text-format button,
.canvas-text-align button {
  display: grid;
  place-items: center;
  border-right: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
}

.canvas-text-size button:last-child,
.canvas-text-format button:last-child,
.canvas-text-align button:last-child {
  border-right: 0;
}

.canvas-text-size strong {
  display: grid;
  place-items: center;
  border-right: 1px solid var(--line);
  font-size: 11px;
}

.canvas-text-format button.is-active,
.canvas-text-align button.is-active {
  background: var(--ink);
  color: #fff;
}

.canvas-text-more {
  display: flex;
  min-width: 116px;
  height: 42px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: 9px;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.canvas-object-label {
  display: flex;
  height: 42px;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border-radius: 9px;
  background: var(--paper);
  color: var(--ink);
}

.canvas-object-label svg {
  color: var(--coral-deep);
}

.canvas-object-label strong {
  font-size: 12px;
}

.canvas-object-rotate {
  display: grid;
  height: 42px;
  flex: 0 0 auto;
  grid-template-columns: 38px 52px 38px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
}

.canvas-object-rotate button,
.canvas-object-rotate strong {
  display: grid;
  place-items: center;
  border-right: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
}

.canvas-object-rotate button:last-child {
  border-right: 0;
}

.canvas-object-rotate strong {
  color: var(--ink);
  font-size: 11px;
}

.canvas-object-rotate .is-counterclockwise svg {
  transform: scaleX(-1);
}

.canvas-object-colors {
  display: flex;
  height: 42px;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
}

.canvas-object-colors button {
  width: 22px;
  height: 22px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--line-strong);
}

.canvas-object-colors button.is-active {
  box-shadow: 0 0 0 2px var(--coral);
}

.canvas-object-action {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--muted);
}

.canvas-object-action.is-delete {
  color: var(--coral-deep);
}

.product-preview .art-placement.element-image {
  height: auto;
  aspect-ratio: var(--art-aspect, 1);
  overflow: visible;
}

.canvas-text-more > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-text-toolbar.is-expanded .canvas-text-more > svg:last-child {
  transform: rotate(180deg);
}

.canvas-text-toolbar-advanced {
  display: grid;
  max-height: min(430px, calc(100vh - 220px));
  grid-template-columns: repeat(2, minmax(250px, 1fr));
  grid-gap: 18px;
  gap: 18px;
  overflow-y: auto;
  padding: 18px;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, .97);
  border-radius: 0 0 14px 14px;
}

.canvas-text-toolbar-advanced > section {
  min-width: 0;
}

.canvas-text-toolbar-label {
  display: block;
  margin-bottom: 9px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.canvas-text-toolbar-advanced .text-role-options button {
  font-size: 11px;
}

.canvas-text-toolbar-advanced .text-effect-options button {
  min-height: 58px;
}

.canvas-text-sliders,
.canvas-text-finish {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.canvas-text-sliders label,
.canvas-text-finish label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.canvas-text-sliders label > span,
.canvas-text-finish label > span {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.canvas-text-sliders label strong,
.canvas-text-finish label strong {
  color: var(--ink);
}

.canvas-text-sliders input,
.canvas-text-finish input {
  width: 100%;
  accent-color: var(--coral);
}

.canvas-text-finish .swatch-list {
  margin-bottom: 3px;
}

.design-stage:has(.canvas-text-toolbar) .view-turner {
  top: 82px;
}

.design-stage:has(.canvas-text-toolbar) .design-toast {
  top: 82px;
}

.panel-footnote {
  font-size: 12px;
}

@media (max-width: 760px) {
  .ai-studio-overlay {
    padding: 10px;
  }

  .ai-studio-modal {
    max-height: calc(100vh - 20px);
    border-radius: 20px;
  }

  .ai-studio-modal-header {
    grid-template-columns: 46px 1fr auto;
    gap: 12px;
    padding: 16px;
  }

  .ai-studio-modal-icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
  }

  .ai-studio-modal-header h2 {
    font-size: 24px;
  }

  .ai-studio-modal-header p {
    display: none;
  }

  .ai-studio-modal-header > button {
    width: 44px;
    height: 44px;
  }

  .ai-studio-modal-body {
    padding: 18px 16px 24px;
  }

  .ai-studio-modal .ai-answer-list {
    grid-template-columns: 1fr;
  }

  .ai-studio-modal .ai-brief-pills {
    flex-wrap: wrap;
  }

  .ai-studio-modal .ai-brief-pills button {
    flex: 1 1 130px;
  }

  .ai-studio-modal .ai-guide-featured {
    padding-right: 18px;
  }

  .ai-studio-modal .ai-guide-featured > i {
    display: none;
  }

  .canvas-text-toolbar {
    top: 10px;
    width: max-content;
    max-width: calc(100% - 20px);
    border-radius: 12px;
  }

  .canvas-text-toolbar-main {
    padding: 5px;
  }

  .canvas-text-toolbar-main > textarea {
    width: 150px;
    flex-basis: 150px;
  }

  .canvas-text-toolbar-advanced {
    max-height: min(390px, calc(100vh - 190px));
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 15px;
  }

  .design-stage:has(.canvas-text-toolbar) .view-turner,
  .design-stage:has(.canvas-text-toolbar) .design-toast {
    top: 76px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}