/*W2_CONTRAST_TRUESURFACE_V1*/
/*W2_LIGHT_CONTRAST_V1*/
/*W2_FONT_TRUTH_V1*/
/*STAGE5M_CART_CLASS_ONLY — the page binding is gone: the dark look
is carried by #w2c-root.w2c-dark alone, and that class is set only
when the PAGE is light. A dark page therefore gets a light cart.*/
/*STAGE5K_CART_INVERT — the cart is the first checkout surface, so it
follows the same rule as the sheet: it opposes the page. The dark
styling below was bound to the page theme; it now also answers to
#w2c-root.w2c-dark, which w2cart.js sets when the page is LIGHT.*/
/* W2_CANON_PASS1 — gold, shadows and blur deleted, not overridden. */
/* W2_MERGED_CSS_V1 — all constructor CSS overlays concatenated in exact index.html load order.
28 files -> 1. Cascade order preserved => pixel-identical. Source files kept for rollback. */
/* ==================== w2skin.css ==================== */
/* ============================================================================
W2SKIN_v18_260612_1955 — ShopLink V3 chrome skin (header + footer + soft-black)
Cosmetic override ONLY, layered over the live /miniapp/construct/ dist.
v1: warm-glass header/footer + lens (#w2lens) + frameless phrase + soft CTA.
v3 carries v2 ++ brand-style tile logo -15%; + all harsh constructor black -> soft #46413a.
NOTE: temporary skin — a rebuild/promote of the constructor dist drops it.
--soft-ink = the Add-to-cart tone, used everywhere black was harsh.
========================================================================== */
/* P5_DEADTOKEN_ACCENT_V2 --accent deleted from both themes: zero readers,
proven at deploy across js/css/html/json/svg. --heart is KEPT:
huntmap.html reads it. */
/* P18_DEAD_TILE_CSS_V1 CSS for the removed STYLE logo tile deleted: 0 producers. */
/* P31_DOCK_ONE_STYLESHEET_V1 geometry for .w2-foot-actions removed from this file.
It tied with w2footglass.css on specificity, so the dock's shape depended
on which loaded last. w2footglass.css now decides it alone. */
/* P39_DOCK_CHILDREN_ONE_FILE_V1 the dock's children are declared in w2footglass.css only.
flex/border-radius/width here tied with it on specificity, so the winner
was decided by which loaded last. */
:root{
--text:#46413a !important; /* body / pill text */
--w2-ink:#46413a; /* soft warm near-black (= Add to cart) */
--bg:#FAF9F5 !important; /* clean soft white (not harsh) */
--card:#FAF9F5 !important;
--heart:#EB4014 !important; /* brand-style red (calmer than #e52d2d) */
}
body,.app{background:#FAF9F5 !important;}
/* ========================== v1: FOOTER glass ============================== */
/* W2_FOOT_TWO_V1 — подложки больше нет: только инпут + кнопка */
.w2-foot-bubble{
background:none !important;
-webkit-backdrop-filter:none !important;
backdrop-filter:none !important;
border:0 !important;
box-shadow:none !important;
border-radius:0 !important;
position:relative; overflow:visible !important;
}/* W2_FOOTONE_V1 gap, padding deleted: never applied in any state */
/* keep lens sheen below interactive children */
.w2-foot-bubble > *{position:relative;z-index:1;}
/* ===================== v3 carries v2 +brand-style tile logo -15% ===================== */
/* keep native box (height:30/min-height:32) so labels align with CLASSIC/STREET; shrink visually */
.style-brandmark{transform:scale(.85) !important;transform-origin:center !important;margin-bottom:2px !important;}
/* ===================== v3 carries v2 +land ALL harsh black -> soft #46413a =========== */
/* buttons / selected fills (was #111 / #0a0a0a) */
.btn-main,.btn-open{background:#46413a !important;}
.btn-main:hover{background:#565046 !important;}
/* W2_FOOT_TWO_V1 фон даёт .w2-foot-actions, CTA внутри прозрачный */
.w2-foot-actions:active{filter:brightness(.88);}
/*W2_TABDROP_SINGLE_V1*/ .type-btn.sel{background:transparent !important;border:0 !important;box-shadow:none !important}
.pill.sel{background:#46413a !important;border-color:#46413a !important;}
.vbtn:active,.vbtn.active{background:#46413a !important;border-color:#46413a !important;}
/* selected borders / focus borders / accents (was #111) */
.pick-card.sel{border-color:#46413a !important;}
.layout-card.sel{border-color:#46413a !important;}
.phr-wrap:focus-within{border-color:#46413a !important;}
.df-input:focus{border-color:#46413a !important;}
.qr-big{border-color:#46413a !important;}
.spinner{border-top-color:#46413a !important;}
/* text / typed input (was #111) */
.df-section,.df-input,.df-select{color:#46413a !important;}/* W2_FOOTONE_V1 color deleted: never applied in any state */
/* tile/garment brandmarks (currentColor). HEADER wordmark left ALONE (native grey). */
.style-brandmark{color:#46413a !important;}
/* NOTE: .sh-brandmark/.cb-brandmark inherit .sh-block ink (white on dark, soft on light) — do NOT force here */
/* on-garment print preview text on LIGHT shirts (was #0a0a0a); dark-shirt white stays via its own !important rule */
.chest-brand-small,.chest-main-text,.center-word,.brand-w,.brand-2,.brand-date,.overlay-phrase{color:#46413a !important;}
/* small black chrome on the preview */
.size-badge{background:rgba(70,65,58,.66) !important;}
/* ===================== v4: reach the INLINE-coloured black ================= */
/* on-garment print: ink is inline color:#0A0A0A on LIGHT shirts (white on dark stays — only soften the dark-ink case) */
/* ANY element whose ink is inline black (#0A0A0A / rgb(10,10,10)) -> soft.
Catches garment brandmark .sh-brandmark/.cb-brandmark (the `be` span),
the FREE text div, .sh-block, tile logos, etc. White-on-dark (#FFFFFF /
rgb(255,255,255)) is a different value, so it stays white. */
[style*="rgb(10, 10, 10)"],
[style*="#0A0A0A"],
[style*="#0a0a0a"]{color:#46413a !important;}
/* the one hard-coded black path inside the brand-style W❤² svg */
[fill="#0A0A0A"],[fill="#0a0a0a"]{fill:#46413a !important;}
/* .sh-phrase / .sh-brandmark inherit currentColor from .sh-block -> softened with it */
/* ===================== v5: calm the bright red to brand red =============== */
.sp-heart,.cbs-heart{color:#EB4014 !important;}
/* red heart PNGs nudged toward the calmer brand red-orange; orange/white left alone */
/*W2REDHEART_V1 hue was rotated +10deg toward orange and chroma cut by 10%,
which is why red read brick. No hue shift now: chroma up, contrast a touch
up, tone left alone. Red-specific, exactly as the old rule was. */
/*W2REDDEEP_V1 deep, not bright. Depth comes from luminance, not chroma:
brightness down, saturation barely up so darkening does not grey it out,
hue untouched. Knobs: brightness 0.80 dark .. 0.92 light;
saturate 1.00 as-is .. 1.15 richer. */
/*W2_HEARTTHREAD_V1 DELETED — it owned `filter`, and so did the embroidery.
`filter` holds one value, this one had !important, and the heart was the only
part of the mark that came out unstitched. The same brightness(0.86) and
saturate(1.08) are baked into heart_red_* instead: (236,34,34) -> (212,26,25),
computed with the real CSS saturate matrix. The colour now lives in the file,
which is also the only place a print asset's colour should live. */
/* BLACK heart PNGs (heart_black_*) -> soft ink #46413a — same soft black as everywhere.
Covers garment heart + the BLACK colour swatch + HEART STYLE previews when black is picked. */
/*W2_HEARTTHREAD_V1 DELETED — the same defect as the red one. It painted
the black heart to the soft ink #46413A through `filter`, which is the property
the embroidery needs and which holds only one value. Baked into heart_black_*
instead, so the garment, the colour swatch and the style preview all read one
file. */
/* ===================== v6: avatars back to normal; Host -> hat ============ */
/* Owner (your) avatar: native circle (the broken v4 override is gone, nothing to do). */
/* Guest slot only (src=…mr_host.svg): swap the Mr.Host figure for the brand top-hat,
as a clean circle of the same size. Owner photos (other src) are untouched. */
/* ===================== v8: equalize heart size across styles ============== */
/* w2logo heart height is inline .74*heartScale em; classic=1.1 (=.814em), others=1 (=.74em).
Force all to the classic size so STREET and BRAND STYLE match CLASSIC — tiles AND on garments. */
/* W2_HEARTLOCK_V1 — the ratio is declared so the WIDTH is known before the
image is. height was set and width left auto with no aspect-ratio, so a
freshly mounted heart laid out 0 px wide until the file resolved. The
one-line layout is a different element TYPE from the other two, so React
rebuilds this on every entry and exit — and a cold heart collapsed
the lockup by its own width plus two .09em margins, which translate(-50%)
then re-centred, and the print slid sideways and snapped back.
847x798 is the files' own size — all twelve of them, checked against
the headers in acceptance — so the bitmap landing changes nothing. */
.w2logo-h{height:.814em !important;aspect-ratio:847/798 !important;}
/* W2_HEARTLOCK_V1 — the mascot is the same defect in the same block: an at
height:59px/width:auto with no ratio. Its size lives in a React inline
style, which sets neither aspect-ratio nor width, so this rule composes
with it rather than fighting it. 194x381 is the svg's own viewBox. */
.w2-mascot-layer img[src*="mr_host"]{aspect-ratio:194/381;}
/* tidy the floating Catalog pill: harsh blue -> soft ink */
[style*="rgb(37, 99, 235)"],[style*="#2563eb"]{color:#46413a !important;}
/* === W2SKIN_FOOT_PRICE_V1 — footer price matches the cart =================
$ price: black ink + Syne (like .w2c-total-val)
GBT: red #FF4D00 + Montserrat (like .w2c-total-gbt)
kills the old multicolor (#ec4015 $ / #ff8a00 gbt). */
/* W2_FOOT_TWO_V1 цена внутри кнопки: обычный DM Sans, не дисплейный Syne */
.w2-foot-usd{ font-family:'DM Sans',system-ui,-apple-system,sans-serif !important; font-weight:800 !important; letter-spacing:0 !important;}/* W2_FOOTONE_V1 color deleted: never applied in any state */
.w2-foot-gbt{color:var(--w2-dong) !important; font-family:'DM Sans',system-ui,-apple-system,sans-serif !important; font-weight:600 !important;}
/* === W2SKIN_SMOOTH_V1 — smooth product switching (no emoji flash) ==========
On product/color switch the bundle clears the src and async-loads the PNG;
meanwhile it renders .shirt-fallback = a grey box with an emoji (👜/🧢/👕).
We replace that jarring emoji with the calm Mr.Host hat loader, and fade the
real garment image in on (re)mount. Combined with JS preload (w2cart.js),
the switch reads as a smooth branded load, never a random bag picture. */
.shirt-fallback{
font-size:0 !important; /* hide the emoji glyph */
opacity:1 !important;
background:transparent !important; /* drop the harsh colour box */
background-image:url("/miniapp/construct/hat.svg") !important;
background-repeat:no-repeat !important;
background-position:center !important;
background-size:60px auto !important;
animation:w2HatPulse 1s ease-in-out infinite !important;
}
@keyframes w2HatPulse{
0%,100%{opacity:.32; transform:translateY(0) scale(1);}
50% {opacity:.7; transform:translateY(-3px) scale(1.05);}}
/* gentle fade-in of the actual garment image whenever it (re)mounts */
.shirt-img{animation:w2FadeIn .28s ease both;}
@keyframes w2FadeIn{from{opacity:0;}to{opacity:1;}}
/* === W2_SPREAD_V1 — W2_LAYOUT_GPT_V1 DELETED. It was a second owner of
.scroll layout and it won every fight with !important. w2layout.js it
refers to no longer exists. The clearance it carried now lives once,
mobile-only, in w2order-canon.css. === */
/* W2_SPREAD_V1 — three product-scoped heart-hide blocks DELETED here
(480px, 768px, :not([data-print=logo])). w2order-canon.css hides the
heart cards at every width for every product; these were dead. */
/* === W2_LOGO_SHRINK_V2 (center-scoped; left chest restored) — on-shirt prints smaller, TOP-anchored (top edge stays put) === */
/* uses individual `scale:` so the bundle's own transforms are preserved */
.sh-block.center .sh-brandmark{ scale: .60 !important; transform-origin: top center !important; } /* brand logo -40% (center only) */
.sh-block.center .w2logo{ scale: .82 !important; transform-origin: top center !important; } /* classic/street logo -18% (center only) */
.sh-block.center .sh-phrase{ scale: .85 !important; transform-origin: top center !important; } /* word -15% (center only) */
/* === W2HEADER_ICONS_V1 — Catalog pill -> two round blue icons (close + share) === */
.w2h-bar{ display:flex !important; align-items:center !important; gap:4px !important;
padding:4px !important; border-radius:16px !important; background:rgba(255,255,255,.95) !important;
border:1px solid #ececec !important; }
.w2h-ic{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
border-radius:50%; color:#2563eb; cursor:pointer; -webkit-tap-highlight-color:transparent;
transition:background .15s ease, transform .12s ease; }
.w2h-ic svg{ width:22px; height:22px; display:block; }
.w2h-ic:hover{ background:rgba(37,99,235,.08); }
.w2h-ic:active{ background:rgba(37,99,235,.16); transform:scale(.9); }
/* the price becomes a row so the badge sits beside the number, not above it */
.w2-foot-actions .w2-foot-price{ flex-direction:row !important; align-items:center !important; }
/* === W2_CB_BRAND_SHRINK_V3 (.72, -15% more) (svg-safe transform:scale) — cap + bag brand-style logo -15% (logo only) === */
.cb-brandmark{ transform: scale(.72) !important; transform-origin: center !important; }
/* === W2_CENTER_SPACING_V6 (neg-margin, tight) — pull the word to the W❤² lockup, both center layouts === */
/* one-line (front_center_1): flex-row [logo]·[word] -> tight gap, centered */
.sh-block.center > div[style*="nowrap"]{ /* W2_INLINE_ROW_FIX_v1 */ gap: 0 !important; align-items: center !important; justify-content: center !important; width: -moz-fit-content !important; width: fit-content !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; }
.sh-block.center > div[style*="nowrap"] > .sh-phrase{ margin-left: -.136em !important; margin-top: 0 !important; scale: none !important; font-size: 22px !important; transform: translateY(-2px) !important; }
/* two-line (front_center_2): word below the lockup -> raise it to the logo */
/* brand two-line word is an inline
(no .sh-phrase) */
.sh-block.center > div[style*="230px"], .sh-block.center > div[style*="86%"]{ margin-top: -18px !important; }
/* non-brand (classic/street) two-line word: .sh-phrase as a DIRECT child (one-line .sh-phrase is a grandchild via the nowrap div, so it is NOT hit) */
.sh-block.center > .sh-phrase{ margin-top: -14px !important; }
/* === W2FOOTFIX_CSS_V1 — footer glides above the iOS keyboard (with w2footfix.js) === */
/* P23_DOCK_DEAD_RULES_V1 transition on transform deleted: the dock spring is the single
transform owner, exactly as on the site. A CSS transition on the same
property fights the rAF loop and makes the size stutter. */
.w2-foot{ will-change: transform; }
/* === W2_MASCOT_LIFT_V1 — raise the on-shirt Mr.Host mascot onto the chest (up ~one figure) === */
.sh-block div:has(> img[src*="mr_host"]){ transform: translateY(-58px) !important; }
/* === W2_MASCOT_LIFT_V2 — per-position mascot lift ===
chest (LEFT CHEST) keeps the perfect lift; center sits just below the collar. */
/*W2_MASCOT_FIX_V1 опущен на грудь*/ .sh-block.chest div:has(> img[src*="mr_host"]){ transform: translateY(-40px) !important; }
.sh-block.center div:has(> img[src*="mr_host"]){ transform: translateY(-26px) !important; }
/* ==================== w2clean.css ==================== */
/* W2CLEAN_V1 — MOBILE ONLY: strip the preview furniture for a clean canvas.
Heart size is now pinch (two fingers). Desktop keeps the slider (no pinch on
desktop). Side rotate arrows stay. */
@media (max-width: 480px) {
.color-ind { display: none !important; } /* top "White · Front" chip */
.size-badge { display: none !important; } /* bottom "T-SHIRT" badge */
/* W2_SIZEWORDS_V1 moved into w2scale.js, which owns this strip. */
}
/* W2WORD_PIN_V1 — MOBILE: word chips pinned to the BOTTOM OF THE PHOTO (not the
footer). Absolute inside the preview, horizontal scroll only, no drift. */
@media (max-width: 480px) {
.preview-wrap { position: relative !important; }
#w2word .w2word-chips { padding-left: 12px; padding-right: 16px; }}
/* W2_WEB_NATIVE_ARROWS_V1 — hide the "White · Front" chip on ALL sizes (was mobile-only). */
.color-ind{ display:none !important; }
/* W2_SIZEWORDS_V1 W2_SZ_TOPCENTER_V1 DELETED. It centred an absolutely
positioned pill. Once .w2sz became a static panel card the same rule applied
translateX(-50%) to it and slid the whole card half its width to the left —
which is what pushed SMALL off screen. Centring now lives with the rest of
the strip's geometry in w2scale.js, where it can be read together with the
position it depends on. */
/* W2_FIX3_V1 — W2_WHITEHEART_OUTLINE_V1 DELETED.
It selected by SOURCE (img[src*="heart_white"]), so it applied everywhere the
white heart appears — including on the garment, where a keyline is wrong: the
print has no outline and the factory will not add one. And it applied only to
white, when the keyline is what makes ANY heart read as a button.
The outline is a control treatment now. It lives with the rails in
w2heartrails.js, scoped to .w2hr-img and .heart-thumb, all four colours. */
/* ==================== w2wordfit.css ==================== */
/* W2WORDFIT_V1 — on-garment word fit:
ROOT CAUSE: .sh-phrase had overflow:hidden and .sh-block line-height:1, so
letter descenders (y, g, j, p) fell outside the line box and got clipped.
FIX: give the line box room for descenders (line-height 1.2) so tails show;
and pull the word up ~12% toward the logo for a compact, correct look.
Logo stays put — only the word moves. Loaded AFTER w2skin.css. */
/* descenders visible for every on-garment word (classic / street / brand) */
.sh-block .sh-phrase{
line-height: 1.2 !important;
}
/* pull the word up ~12% toward the logo (was margin-top:-14px in w2skin) */
.sh-block.center > .sh-phrase{
margin-top: -18px !important;
}
/* ==================== w2preview.css ==================== */
/* W2PREVIEW_V1 — cleaner preview stage:
1) remove the golden view dots (the side arrows already rotate the garment);
2) tshirt+hoodie only (shirt group = has .sh-ovl):
web -> raise a bit (too much empty space above),
mobile -> lower a bit. Cap/Bag untouched. */
/* 1) drop the golden view indicators under the garment */
.vdot{display:none!important}
/* 2a) WEB: lift tshirt/hoodie up */
.preview-canvas-wrap:has(.sh-ovl) .shirt-img{
top:-18px!important;
bottom:18px!important;
}
/* 2b) MOBILE: lower tshirt/hoodie down instead */
@media (max-width:480px){
.preview-canvas-wrap:has(.sh-ovl) .shirt-img{
top:14px!important;
bottom:-14px!important;
}}
/* W2_POLO_PREVIEW_260807 W2POLO2 DELETED. It pinned the polo at +14px at every
width while the tee sits at -18px on the web — a 32px jump between the two
tabs. It existed to compensate polo mockups built to a different body; the
blanks that ship with this pack are cut into the tee's own frame, so the
compensation now describes nothing. The generic rule above carries no
product filter, so the polo simply moves with the tee. */
/* ==================== w2cart.css ==================== */
/* W2CART_V1 styles — Mr.Host Store cart look, themed to the W❤² skin.
Ink #46413a, warm white #FAF9F5, line #E6E4DE, orange badge #FF4D00. */
/* cart icon + badge on the Add-to-cart button */
.w2c-cta{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;}
.w2c-ico-wrap{position:relative;display:inline-flex;align-items:center;color:#fff;}
.w2c-ico{display:block;}
.w2c-badge{position:absolute;top:-9px;right:-11px;min-width:17px;height:17px;padding:0 4px;
display:none;align-items:center;justify-content:center;background:var(--w2-gbt);color:#fff;
border-radius:9px;font:700 11px/1 'DM Sans',sans-serif;}
/* lock scroll when open */
body.w2c-lock{overflow:hidden;}
/* root + backdrop + bottom sheet */
#w2c-root{position:fixed;inset:0;z-index:1000;display:none;}
#w2c-root.open{display:block;}
#w2c-root .w2c-backdrop{position:absolute;inset:0;background:rgba(40,36,32,.42);
}
#w2c-root .w2c-sheet{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
width:100%;max-width:560px;max-height:86vh;overflow:hidden;display:flex;flex-direction:column;
background:#FAF9F5;border:1px solid #E6E4DE;border-bottom:0;
border-radius:22px 22px 0 0;
animation:w2c-up .22s cubic-bezier(.22,.8,.3,1);}
@keyframes w2c-up{from{transform:translate(-50%,18px);opacity:.6}to{transform:translate(-50%,0);opacity:1}}
/* header */
.w2c-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 10px;}
.w2c-title{font:800 19px/1 Syne,sans-serif;color:#46413a;}
/* list */
.w2c-list{overflow-y:auto;padding:4px 14px;}
.w2c-empty{display:none;padding:26px 18px 30px;text-align:center;color:var(--w2-ink-3);
font:500 14px/1.4 DM Sans,sans-serif;}
.w2c-row{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid #EFEDE7;}
.w2c-row:last-child{border-bottom:0;}
/* thumbnail (cloned live preview) */
.w2c-thumb{width:64px;height:74px;flex:0 0 auto;border-radius:10px;overflow:hidden;
background:#f5f3ef;border:1px solid #EFEDE7;position:relative;}
.w2c-thumb-inner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.26);transform-origin:center;}
/* info */
.w2c-info{flex:1 1 auto;min-width:0;}
.w2c-name{font:700 14px/1.2 Syne,sans-serif;color:#46413a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.w2c-price{margin-top:3px;font:600 12px/1 DM Sans,sans-serif;color:#8a6a3a;}
/* qty stepper */
.w2c-qty{flex:0 0 auto;display:flex;align-items:center;gap:8px;}
.w2c-qty button{width:26px;height:26px;border:1px solid #E6E4DE;background:#fff;border-radius:8px;
font-size:16px;line-height:1;color:#46413a;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.w2c-qty button:active{background:#f1efe9;}
.w2c-q{min-width:16px;text-align:center;font:700 14px/1 'DM Sans',sans-serif;color:#46413a;}
/*W2_CHECKOUT_CEMENT_V1*/ /*STAGE5I_CART_TRASH*/ .w2c-trash{flex:0 0 auto;width:26px;height:26px;padding:0;border:0;background:none;cursor:pointer;color:#E5484D;opacity:.85;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;transition:opacity .12s,background .12s;}
.w2c-trash svg{width:18px;height:18px;}
.w2c-trash:hover{opacity:1;background:rgba(229,72,77,.12);}
/* footer / totals / actions */
.w2c-foot{padding:12px 18px 18px;border-top:1px solid #EFEDE7;background:#FAF9F5;}
.w2c-totals{display:flex;align-items:baseline;gap:8px;margin-bottom:12px;}
.w2c-total-lbl{font:600 13px/1 DM Sans,sans-serif;color:var(--w2-ink-3);}
.w2c-total-val{font:800 22px/1 Syne,sans-serif;color:#46413a;margin-left:auto;}
.w2c-total-gbt{font:700 12px/1 'DM Sans',sans-serif;color:var(--w2-gbt);}
.w2c-actions{display:flex;gap:10px;}
.w2c-continue{flex:1 1 0;padding:14px;border:1px solid #E6E4DE;background:#fff;border-radius:14px;
font:700 15px/1 'DM Sans',sans-serif;color:#46413a;cursor:pointer;}
.w2c-checkout{flex:2 1 0;padding:14px;border:0;border-radius:14px;background:#46413a;color:#fff;
font:800 15px/1 'DM Sans',sans-serif;cursor:pointer;}
.w2c-checkout:active{background:#322e27;}
/* ==================== w2inputfix.css ==================== */
/* W2INPUTFIX_V1 — force visible dark text + caret in all text inputs.
Telegram Mini App (dark theme) was rendering the caret and text fill white on the
white input background -> the cursor and typed text vanished. Forcing color-scheme:light
+ explicit color / caret-color / -webkit-text-fill-color fixes it on every surface. */
:root{ color-scheme: light; }
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
textarea,
select{
color:#111 !important;
caret-color:#111 !important;
-webkit-text-fill-color:#111 !important;
}
input::placeholder, textarea::placeholder{
color:#9aa0a6 !important;
-webkit-text-fill-color:#9aa0a6 !important;
opacity:1 !important;
}
/* ==================== w2free.css ==================== */
/* ===========================================================================
W2FREE_V1 — FREE-mode input fix (mobile + web)
---------------------------------------------------------------------------
Problem:
- In FREE mode the print text was editable in TWO places at once — the
dedicated Line 1 / Line 2 fields AND the persistent footer field — both
bound to the same value, which feels like a duplicate input.
- On the narrow mobile canvas the preview line had no wrap guard, so a
single line broke into 2-3 visual lines after ~5-6 characters.
Fix:
1) In FREE mode hide the duplicate footer input (keep Add-to-cart + price).
Free text is then edited ONLY in the dedicated Line 1 / Line 2 fields.
2) Free preview lines never wrap — each line stays on one line up to
10 chars (incl. space), same as web.
FREE mode is detected by w2free.js, which toggles `body.w2free`.
Additive overlay: no bundle edits, reversible.
=========================================================================== */
/* 1) Hide the duplicate footer input while in FREE mode (cart + price stay) */
body.w2free .w2-foot-input{ display:none !important; }
/* 2) Free preview lines stay on one line (no 2-3 line wrap on mobile) */
body.w2free .sh-block div,
body.w2free .shirt-overlay div{ white-space:nowrap !important; }
/* ==================== w2lightbox.css ==================== */
/* W2LIGHTBOX_V2css — polished product modal.
Tap a design mockup -> a centered product card scales in from the photo on a
clean studio surface (no white haze on dark garments); dark blurred scrim.
Only data:image snapshots trigger it (see w2lightbox.js). */
img[src^="data:image"]{ cursor:zoom-in; }
.w2lb-overlay{
position:fixed; inset:0; z-index:99999;
display:flex; align-items:center; justify-content:center;
padding:max(20px,4vh) max(16px,4vw);
background:rgba(9,9,11,.80) !important;
cursor:zoom-out;
opacity:0; transition:opacity .2s ease;
}
.w2lb-overlay.w2lb-in{ opacity:1; }
.w2lb-overlay.w2lb-closing{ opacity:0; }
/* the product frame — scales in from the photo */
.w2lb-card{
position:relative;
max-width:min(560px,92vw); max-height:88vh;
border-radius:24px; overflow:hidden;
background:linear-gradient(180deg,#f7f6f4 0%,#edebe7 100%);
inset 0 1px 0 rgba(255,255,255,.65);
cursor:default;
transform:scale(.9); opacity:0;
transition:transform .27s cubic-bezier(.2,.72,.24,1), opacity .22s ease;
}
.w2lb-overlay.w2lb-in .w2lb-card{ transform:scale(1); opacity:1; }
.w2lb-overlay.w2lb-closing .w2lb-card{ transform:scale(.94); opacity:0; }
/* garment sits crisp on the studio surface — no white img-background halo */
.w2lb-img{
display:block; width:100%; height:auto;
max-width:100%; max-height:88vh;
object-fit:contain; background:transparent !important;
image-rendering:auto;
}
/* W2_ONEX_V1 — only where it sits. The look comes from the one block. */
.w2lb-close{ position:fixed; top:18px; right:20px; }
.w2lb-hint{
position:fixed; bottom:22px; left:0; right:0; text-align:center;
color:rgba(255,255,255,.62); font:500 13px/1.2 system-ui,sans-serif; pointer-events:none;
}
/* brand wordmark (vector) */
.w2bl-host{ display:inline-flex; align-items:center; }
.w2bl{ display:inline-flex; align-items:center; color:#46413a; font-size:30px; line-height:1; }
.w2bl-w{ display:inline-flex; align-items:center; }
.w2bl-w svg{ height:.82em; width:auto; display:block; }
.w2bl-h3d{ display:inline-flex; width:1em; height:1em; margin:0 .04em; flex:0 0 auto; align-self:center; position:relative; top:.02em; } /* W2BL_HEART_SIZE_V1 */
.w2bl-h3d svg{ display:block; width:100%; height:100%; filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.28)); }
.w2bl-sup{ display:inline-flex; align-self:flex-start; margin-left:.03em; margin-top:-.02em; }
.w2bl-sup svg{ height:.46em; width:auto; display:block; }
/* V6 — spinning brand heart. W2SPINONE_V1: the base keyframe from the app's
own stylesheet and the one shared duration. The local copy that lived here,
together with the 320px perspective it carried, is deleted -- that
foreshortening is what made an identical turn read as a snap. */
.w2bl-h3d svg{
transform-origin: center;
will-change: transform;
animation: w2HeartSpinGlobal var(--w2-heart-spin) linear infinite;
}
@media (prefers-reduced-motion: reduce){ .w2bl-h3d svg{ animation: none !important; }}
/* V7 — brand logo on tiles (CUSTOM + BRAND STYLE) */
.w2bl-host{ justify-content:center; }
.w2bl-host--custom{ display:flex; margin:0 auto 2px; }
.w2bl-host--custom .w2bl{ font-size:33px; } /* ~ old .style-brandmark 30px */
.w2bl-host--tile{ display:flex; margin:0 auto 2px; }
.w2bl-host--tile .w2bl{ font-size:46px; } /* match CLASSIC/STREET heart size */
/* V11 — precise tile sizes (tunable knobs) */
.w2bl-host--custom{ display:flex; margin:0 auto 2px; }
.w2bl-host--custom .w2bl{ font-size:26px !important; } /* CUSTOM tile (knob) */
.w2bl-host--brand{ display:flex; margin:0 auto 2px; }
.w2bl-host--brand .w2bl{ font-size:28px !important; } /* BRAND STYLE tile (knob, ~30% smaller than v10) */
/* V3 — BRAND on-garment font tuning (print path). Scoped to .sh-brand only;
classic/street untouched. Fixes descender clipping + slightly lighter read. */
.sh-brand{ line-height:1.16 !important; }
.sh-brand .sh-phrase{
line-height:1.30 !important; /* g,y,j,G tails fit, no bottom clip */
letter-spacing:0.012em !important; /* a touch looser -> reads less heavy */
padding-bottom:3px; /* extra bottom breathing room */
-webkit-font-smoothing:antialiased; /* crisper, hair thinner */
text-rendering:geometricPrecision;
}
/* W2_FOOTONE_V1 background, border deleted: never applied in any state */
.w2-foot-bubble::after{display:none!important;}
/* 2) input row (kept) */
.w2-foot-input{
background:#ffffff!important;
transition:border-color .15s ease, box-shadow .15s ease!important;
}/* W2_FOOTONE_V1 border, border-radius, min-height deleted: never applied in any state */
.w2-foot-field{
background:transparent!important;color:#111111!important;font-weight:900!important;
font-size:22px!important;letter-spacing:-.01em!important;
}
.w2-foot-field::placeholder{color:#797065!important;font-weight:700!important;}
.w2-foot-input:focus-within{
border-color:#ff3b30!important;
}
/* 3) counter states (kept) */
.w2-foot-max{font-size:12px!important;font-weight:800!important;color:#7A7062!important;letter-spacing:.02em!important;}
.w2-foot-max.w2warn{color:var(--w2-dong)!important;}
.w2-foot-max.w2full{color:#E30C00!important;}
/* 4) body-level chips block — CHIPS ONLY, glued just above the input */
#w2word{pointer-events:none;
font-family:'DM Sans',system-ui,-apple-system,sans-serif}
#w2word>*{pointer-events:auto}
/* W2WORD_v2: hide the label + helper — chips speak for themselves */
#w2word .w2word-label,
#w2word .w2word-helper{display:none!important}
/* horizontal scroll row: hidden scrollbar, smooth, soft right fade = "more →" */
#w2word .w2word-chips{
display:flex;gap:8px;overflow-x:auto;padding:2px 16px 4px 2px;margin:0;
scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;
-webkit-overflow-scrolling:touch;
-webkit-mask-image:linear-gradient(to right,#000 90%,transparent);
mask-image:linear-gradient(to right,#000 90%,transparent);
}
#w2word .w2word-chips::-webkit-scrollbar{display:none}
/* W2_CHIPS_BLACK_V1 — чёрные чипсы, белый шрифт. Без перламутра, без бликов,
без фона. Выбранный: белый чип, чёрное слово. */
#w2word .w2word-chip{
border:1px solid rgba(255,255,255,.18);
background:#0A0A0A;
border-radius:999px;padding:8px 16px;font-size:13.5px;font-weight:900;
letter-spacing:.005em;
color:#FFFFFF;white-space:nowrap;cursor:pointer;flex:0 0 auto;
box-shadow:none;
-webkit-tap-highlight-color:transparent;
transition:background .14s ease, color .14s ease, border-color .14s ease, transform .12s ease;
}
#w2word .w2word-chip:hover{ border-color:rgba(255,255,255,.38); }
#w2word .w2word-chip:active{ transform:scale(.94); }
#w2word .w2word-chip.sel{
background:#FFFFFF !important;
color:#0A0A0A !important;
border-color:#FFFFFF !important;
}
/* 5) mobile: SHOW the pearl chips (was fully hidden before) */
@media (max-width:480px){/* W2_FOOTONE_V1 min-height deleted: never applied in any state */
#w2word{display:block!important}
#w2word .w2word-chips{padding-right:20px}
#w2word .w2word-chip{padding:7px 13px;font-size:13px}}/* W2_FOOTONE_V1 color deleted: never applied in any state */
html.w2-dark .w2-foot-field::placeholder{ color:rgba(255,255,255,.55) !important; }
.w2flag-wrap{position:relative;display:flex;align-items:center;font-family:'DM Sans',system-ui,-apple-system,sans-serif}
/* ---- canonical dark menu (same look as the site name-row menu) ---- */
@keyframes w2menuIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
/* ==================== w2overrides.css ==================== */
/* W2_FIX3_V1 W2HEARTFIX_V1 DELETED — second owner of the tile keyline,
white-only, and a different grey from the other one. One statement, in
w2heartrails.js, for every colour. */
/* ==================== w2sitefooter.css ==================== */
/* W2SITEFOOTER_V2 — constructor footer (bottom of .scroll). Dark, neat, animated. */
.w2-sitefooter, .w2-sitefooter * { box-sizing: border-box; }
.w2-sitefooter {
order: 99999; /* pinned last among .scroll children */
margin: 26px -16px 16px; /* bleed to the scroll padding edges */
padding: 24px 20px 26px;
background:#0A0A0A; border:1px solid #242424; /* the body's black, in a line */
border-radius: 22px; /* neat rounded card — all corners */
color: #cfcfd4;
font-family: "DM Sans", system-ui, -apple-system, sans-serif;
}
/* ---- brand: W + spinning heart + ² ---- */
.w2-sitefooter .w2sf-brand { margin-bottom: 16px; }
.w2-sitefooter .w2sf-logo {
font-family: "Bagel Fat One", cursive; font-weight: 400; font-size: 30px;
color: #fff; letter-spacing: .5px; line-height: 1; display: inline-flex; align-items: baseline; gap: 1px;
}
.w2-sitefooter .w2sf-logo sup { font-size: .55em; }
.w2-sitefooter .w2sf-heart {
display: inline-flex; width: .86em; height: .86em; margin: 0 .04em; vertical-align: -.04em;
}
.w2-sitefooter .w2sf-heart svg {
display: block; width: 100%; height: 100%;
transform-origin: center; will-change: transform;
filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.28));
animation: w2HeartSpinGlobal var(--w2-heart-spin) linear infinite; /*W2SPINONE_V1 in unison, by construction*/
}
@media (prefers-reduced-motion: reduce) { .w2-sitefooter .w2sf-heart svg { animation: none; }}
/* ---- links (shared) ---- */
.w2-sitefooter .w2sf-link {
color: #b9b9c0; font-size: 13px; line-height: 1.4; text-decoration: none; transition: color .15s;
}
.w2-sitefooter .w2sf-link:hover { color: #fff; text-decoration: underline; }
/* ---- Documents accordion ---- */
.w2-sitefooter .w2sf-acc { padding-top: 18px; }
.w2-sitefooter .w2sf-acc-btn {
width: 100%; display: flex; align-items: center; justify-content: space-between;
background: none; border: 0; padding: 4px 0; cursor: pointer;
color: #fff; font-family: "Syne", system-ui, sans-serif; font-weight: 800; font-size: 16px;
}
.w2-sitefooter .w2sf-caret { transition: transform .22s ease; color: var(--w2-ink-3); flex: none; }
.w2-sitefooter .w2sf-acc.open .w2sf-caret { transform: rotate(180deg); }
.w2-sitefooter .w2sf-acc-panel {
max-height: 0; overflow: hidden; transition: max-height .28s cubic-bezier(.22,.61,.36,1);
}
.w2-sitefooter .w2sf-acc-inner { padding-top: 12px; }
.w2-sitefooter .w2sf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 18px; }
@media (max-width: 460px) { .w2-sitefooter .w2sf-grid { grid-template-columns: 1fr; }}
.w2-sitefooter .w2sf-all {
display: inline-block; margin-top: 14px; color: var(--w2-ink-3); font-weight: 700; font-size: 13px; text-decoration: none;
}
.w2-sitefooter .w2sf-all:hover { text-decoration: underline; }
/* ---- contacts: Support / Investors / Partners + briefs ---- */
.w2-sitefooter .w2sf-contacts { margin-top: 20px; padding-top: 0; }
.w2-sitefooter .w2sf-cgrid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 460px) { .w2-sitefooter .w2sf-cgrid { grid-template-columns: 1fr; gap: 10px; }}
.w2-sitefooter .w2sf-contact { display: flex; flex-direction: column; gap: 2px; text-decoration: none; }
.w2-sitefooter .w2sf-contact b { color: #fff; font-size: 12px; font-weight: 700; }
.w2-sitefooter .w2sf-contact span { color: #b9b9c0; font-size: 12px; font-weight: 600; transition: color .15s; }
.w2-sitefooter .w2sf-contact:hover span { color: #cfcfd4; }
.w2-sitefooter .w2sf-briefs { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; }
.w2-sitefooter .w2sf-brief { color: var(--w2-ink-3); font-weight: 700; font-size: 13px; text-decoration: none; }
.w2-sitefooter .w2sf-brief:hover { text-decoration: underline; }
/* ---- company line ---- */
.w2-sitefooter .w2sf-co {
margin-top: 20px; padding-top: 0;
color: #9a9aa2; font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
}
/* W2_SUP_FIX_V1 - keep the superscript "2" raised regardless of flex/theme,
matching the canonical front W2Logo (translateY, not vertical-align,
because .w2sf-logo is a flex row where vertical-align is ignored). */
.w2-sitefooter .w2sf-logo sup{
font-size:.58em !important;
line-height:1 !important;
vertical-align:baseline !important;
align-self:center !important;
transform:translateY(-.42em) !important;
margin-left:.04em !important;
}
/* ==================== w2rufont.css ==================== */
/* W2_RU_FONT_V1 — Russian UI in ALS Direct (slightly bolder).
Family name "ALS" matches the front; .otf files are copied next to the
overlays on deploy and served from /miniapp/construct/fonts/. */
/* general Russian UI text -> ALS Direct, a touch bolder than default */
html[lang="ru"] body,
html[lang="ru"] .app,
html[lang="ru"] .scroll {
font-family: "ALS", "Manrope", system-ui, sans-serif;
font-weight: 500;
}
/* section titles a bit bolder for presence */
html[lang="ru"] .sec-t {
font-family: "ALS", "Manrope", system-ui, sans-serif;
font-weight: 600;
}
/* brand wordmark / logo keep their own fonts (they declare font-family explicitly) */
/* ==================== w2dark.css ==================== */
/* W2_FROST_DROP_V1 — frosted glass drop for active tab + cart CTA */
/* ============================================================================
W2DARK_V1 — premium dark theme for the constructor (scoped under html.w2-dark).
Strategy: flip the bundle's CSS variables, then surgically darken the
hard-coded #fff/#f8f8f8 panels from both the bundle and w2skin.css.
The PRODUCT STAGE (.preview-wrap / garment) stays light — a lit studio
stage in a dark UI. Selected states + cart CTA go brand-gold.
Loaded LAST in so it wins source order; uses !important to beat the
skin's !important :root vars.
========================================================================== */
html.w2-dark{
--bg:#161616 !important;
--card:#232323 !important;
--text:#f4f4f4 !important;
--muted:rgba(255,255,255,.56) !important;
--border:rgba(255,255,255,.12) !important;
/* --gold / --heart kept (brand + product colours) */
}
/* page / app shell (skin forces body,.app -> #FAF9F5) */
html.w2-dark body,
html.w2-dark .app{ background:#161616 !important; }
/* ---- section headings & labels (follow --muted/--text where possible) ---- */
html.w2-dark .df-section{ color:var(--text) !important; }
html.w2-dark .df-label{ color:var(--muted) !important; }
/* ---- option cards (WHAT TO PRINT / colours / styles) ---- */
html.w2-dark .pick-card{ background:#232323 !important; }
html.w2-dark .pick-card.sel{ background:#2c2c2c !important; border-color:var(--gold) !important; }
html.w2-dark .pick-sub{ color:rgba(255,255,255,.45) !important; }
html.w2-dark .layout-card{ background:#232323 !important; }
html.w2-dark .layout-card.sel{ background:#2c2c2c !important; border-color:var(--gold) !important; }
/* ---- word chips ---- */
/* ---- pills / type switch ---- */
html.w2-dark .pill{ background:#232323 !important; color:var(--text) !important; }
html.w2-dark .pill.sel{ background:var(--gold) !important; border-color:var(--gold) !important; color:#161616 !important; }
/*W2_TABDROP_SINGLE_V1*/ html.w2-dark .type-btn.sel{background:transparent !important; border:0 !important; box-shadow:none !important}
/* ---- inputs / phrase field / selects (bundle #fff + skin #46413a text) ---- */
html.w2-dark .df-input,
html.w2-dark .df-select{ background:#2a2a2a !important; color:var(--text) !important; border-color:rgba(255,255,255,.14) !important; }
html.w2-dark .df-input::placeholder{ color:rgba(255,255,255,.40) !important; }
html.w2-dark .phr-wrap{ background:#232323 !important; }
html.w2-dark .w2-foot-field{ color:var(--text) !important; }
html.w2-dark .w2-foot-input{ color:var(--text) !important; }/* W2_FOOTONE_V1 background deleted: never applied in any state */
/* ---- QR helper note (gold-tinted, keep but darken) ---- */
html.w2-dark .qr-info{ background:rgba(216,170,39,.10) !important; border-color:rgba(216,170,39,.28) !important; color:#e3c069 !important; }
/* ---- colour indicator on the stage ---- */
html.w2-dark .color-ind{ background:rgba(28,28,28,.92) !important; border-color:rgba(255,255,255,.14) !important; color:rgba(255,255,255,.72) !important; }/* W2_FOOTONE_V1 background, border deleted: never applied in any state */
html.w2-dark .w2-foot-bubble::after{ background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 38%) !important; }
html.w2-dark .bottom{ background:rgba(20,20,20,.86) !important; }/* W2_FOOTONE_V1 color deleted: never applied in any state *//* W2_FOOTONE_V1 background, border, color deleted: never applied in any state */
/* W2_CTAPILL_V1 a dead :active gradient for the same CTA, outranked
by w2footglass.css and never painted. Deleted at source. */
html.w2-dark .btn-main,
html.w2-dark .btn-open{ background:#333 !important; }
html.w2-dark .btn-main:hover{ background:#3d3d3d !important; }
/* ---- success modal ---- */
html.w2-dark .succ-card{ background:#232323 !important; color:var(--text) !important; }
/* ---- PRODUCT STAGE stays light (lit studio) ---- */
/* .preview-wrap / .preview-canvas-wrap intentionally NOT darkened.
On-garment QR keeps its white quiet zone. */
html.w2-dark .sh-qr{ background:#fff !important; }
/* ============================================================================
W2DARK_V2 — mobile edge seal + white Mr.Host mascot + inverted (light) footer
========================================================================== */
/* seal the whole html so overscroll / notch / safe-area show no light seam */
html.w2-dark{ background:#161616 !important; }
html.w2-dark body{ background:#161616 !important; }
/* control-panel Mr.Host mascot -> white silhouette.
Scoped to .pick-card so the mascot ON the light garment stage stays dark. */
html.w2-dark .pick-card img[src*="mr_host"]{ filter:brightness(0) invert(1) !important; opacity:.92 !important; }
/* footer INVERTED: a light card floating on the dark page (premium contrast).
Light theme keeps the dark ink-gradient footer untouched. */
html.w2-dark .w2-sitefooter{
background:#FFFFFF !important; border:1px solid #E6E6E6 !important;
color:#3a3a3a !important;
}
html.w2-dark .w2-sitefooter .w2sf-logo{ color:#161616 !important; }
html.w2-dark .w2-sitefooter .w2sf-acc-btn{ color:#161616 !important; }
html.w2-dark .w2-sitefooter .w2sf-link{ color:#5c5c63 !important; }
html.w2-dark .w2-sitefooter .w2sf-link:hover{ color:#000 !important; }
html.w2-dark .w2-sitefooter .w2sf-contact b{ color:#161616 !important; }
html.w2-dark .w2-sitefooter .w2sf-contact span{ color:#5c5c63 !important; }
html.w2-dark .w2-sitefooter .w2sf-contact:hover span{ color:#161616 !important; }
html.w2-dark .w2-sitefooter .w2sf-co{ color:#83838b !important; }
html.w2-dark .w2-sitefooter .w2sf-caret,
html.w2-dark .w2-sitefooter .w2sf-all,
html.w2-dark .w2-sitefooter .w2sf-brief{ color:#9a7a35 !important; }
/* W2_WTP_DARKINK_V1 — dark theme: whiten the 'What to print' logo (W + superscript),
the FREE label and the style previews so they stay visible; hearts keep their red. */
html.w2-dark .wtp-ink{ color:#ffffff !important; }
html.w2-dark .pick-card .style-preview{ color:#ffffff !important; }
/* ==================== w2styletiles.css ==================== */
/* W2STYLETILES_V4 — style-tile word sizing (responsive) + dark-theme lighten. */
.w2sp-word{display:inline-flex;align-items:center;justify-content:center;height:34px;line-height:1;
letter-spacing:-.01em;white-space:nowrap;font-size:23px;opacity:1;pointer-events:none}
.w2sp-word.w2sp-brand{font-size:21px}
/* mobile: shrink + allow wrap so even BRAND STYLE fits the tile */
@media (max-width:560px){
.w2sp-word{height:auto;min-height:28px;white-space:normal;text-align:center;line-height:1.04;font-size:14px;padding:1px 2px}
.w2sp-word.w2sp-street{font-size:15px}
.w2sp-word.w2sp-brand{font-size:12px}}
html.w2-dark .pick-sub{ color:rgba(244,241,236,.60) !important; }
html.w2-dark .pick-card{ background:rgba(255,255,255,.055) !important; border-color:rgba(255,255,255,.10) !important; }
html.w2-dark .pick-card.sel{ background:transparent !important; border-color:#FFFFFF !important; }
/* ==================== w2compose.css ==================== */
/* W2COMPOSE_v4 — composer:
- placeholder TEXT only is swapped to "Would love to..." (set by JS). No font,
size, colour or ellipsis change — it inherits the field's own placeholder
styling, exactly like the original "Type your word...".
- the 0/10 counter is hidden and a sticker (printable image) icon takes its
place on the right of the input, opening the picker. */
/* NOTE: intentionally no ::placeholder font/colour overrides — keep it native. */
/* hide the 0/10 counter — replaced by the sticker icon */
.w2-foot-max{display:none!important;}
/* sticker icon button (body-level, glued where the counter was) */
/* W2COMPOSE_v7 — native flex child of .w2-foot-input (no fixed, no jitter) */
#w2wltc-emoji{
position:static;flex:0 0 auto;width:34px;height:34px;border-radius:11px;cursor:pointer;color:#6b6b70;
display:flex;align-items:center;justify-content:center;padding:0;margin:0;
border:1px solid rgba(120,120,128,.28);background:rgba(120,120,128,.10);
transition:transform .12s ease, background .15s ease;-webkit-tap-highlight-color:transparent;
}
#w2wltc-emoji.w2on{display:flex;}
#w2wltc-emoji:hover{background:rgba(120,120,128,.20);}
#w2wltc-emoji:active{transform:scale(.92);}
/* ---- sticker modal ---- */
.w2wltc-modal-ov{
position:fixed;inset:0;z-index:2147483600;display:flex;align-items:flex-end;justify-content:center;
background:rgba(15,14,13,.46);
opacity:0;transition:opacity .16s ease;
}
.w2wltc-modal-ov.w2on{opacity:1;}
@media (min-width:560px){.w2wltc-modal-ov{align-items:center;}}
.w2wltc-modal{
width:min(440px,94vw);margin:0 0 14px;background:#1f1d1b;color:#f4f1ec;
border:1px solid rgba(255,255,255,.08);border-radius:20px;
padding:16px 16px 18px;
transform:translateY(14px);transition:transform .18s ease;
}
@media (min-width:560px){.w2wltc-modal{margin:0;}}
.w2wltc-modal-ov.w2on .w2wltc-modal{transform:none;}
.w2wltc-head{display:flex;align-items:center;justify-content:space-between;margin:0 2px 12px;}
.w2wltc-title{
font-family:'WLT Brand','Bagel Fat One',cursive;font-weight:400;font-size:22px;line-height:1;
background:linear-gradient(150deg,#f0b25a 0%,#e2433f 70%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.w2wltc-x{
width:30px;height:30px;border-radius:999px;border:0;background:rgba(255,255,255,.08);
color:#f4f1ec;font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.w2wltc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.w2wltc-item{
aspect-ratio:1;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.05);
display:flex;align-items:center;justify-content:center;font-size:30px;cursor:pointer;
transition:transform .12s ease, background .15s ease;-webkit-tap-highlight-color:transparent;
}
.w2wltc-item:hover{background:rgba(255,255,255,.10);}
.w2wltc-item:active{transform:scale(.92);}
.w2wltc-note{margin:12px 4px 0;font-size:12px;font-weight:600;color:#a9a097;
font-family:'DM Sans',system-ui,-apple-system,sans-serif;}
/* ==================== w2footfont.css ==================== */
/* W2FOOTFONT_V1 — constructor footer polish:
- whole footer in ALS Direct ("ALS"), except the W❤² wordmark (keeps its brand font);
- inner texts a bit larger, a bit bolder, brighter for readability;
- the language flag becomes a centered chip on the brand row.
Loaded after w2sitefooter.css; relies on the "ALS" @font-face (re-declared here
for safety; the .otf files are served from /miniapp/construct/fonts/). */
/* ---- whole footer -> ALS Direct (wordmark keeps its own brand font) ---- */
.w2-sitefooter,
.w2-sitefooter .w2sf-link,
.w2-sitefooter .w2sf-acc-btn,
.w2-sitefooter .w2sf-contact b,
.w2-sitefooter .w2sf-contact span,
.w2-sitefooter .w2sf-brief,
.w2-sitefooter .w2sf-all,
.w2-sitefooter .w2sf-co{
font-family:"ALS","DM Sans",system-ui,-apple-system,sans-serif !important;
}
.w2-sitefooter .w2sf-logo{font-family:"Bagel Fat One",cursive !important;}
/* ---- Documents heading: ALS, keep its (normal) size ---- */
.w2-sitefooter .w2sf-acc-btn{font-weight:700 !important;color:#ffffff !important;}
/* ---- inner texts: larger, bolder, brighter (much easier to read) ---- */
.w2-sitefooter .w2sf-contact b{font-size:14px !important;font-weight:700 !important;color:#ffffff !important;}
.w2-sitefooter .w2sf-contact span{font-size:14px !important;font-weight:600 !important;color:#d6d6dc !important;}
.w2-sitefooter .w2sf-link{font-size:14.5px !important;font-weight:600 !important;color:#d2d2d9 !important;}
.w2-sitefooter .w2sf-brief{font-size:14.5px !important;font-weight:700 !important;}
.w2-sitefooter .w2sf-all{font-size:14.5px !important;font-weight:700 !important;}
.w2-sitefooter .w2sf-co{font-size:13px !important;font-weight:600 !important;color:#bcbcc4 !important;letter-spacing:.02em;}
/* ---- language: flag -> centered chip on the brand row ---- */
.w2-sitefooter .w2sf-brand{position:relative;}
/* ==================== w2freeinput.css ==================== */
/* W2FREEINPUT_V1 — FREE/CUSTOM line inputs legible on dark.
The Line 1 / Line 2 / Word fields (.phr-inp) sit on a dark wrap in dark theme
(html.w2-dark .phr-wrap -> #232323), but w2inputfix.css forces ALL inputs to
black text+caret (#111) with high specificity, so the typed text and caret are
invisible there. Restore the theme's light text/caret on dark only (light theme
keeps dark text on its light wrap). Specificity intentionally exceeds the
w2inputfix :not()-chain so this wins. */
html.w2-dark .phr-inp:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]){
color:var(--text) !important;
-webkit-text-fill-color:var(--text) !important;
caret-color:var(--text) !important;
}
html.w2-dark .phr-inp::placeholder{
color:rgba(255,255,255,.55) !important;
-webkit-text-fill-color:rgba(255,255,255,.55) !important;
opacity:1 !important;
}
/* ==================== w2strip.css ==================== */
/* ============================================================================
W2STRIP_V1 — strict dark-canvas RIGHT control panel (v2).
Scope: ONLY the right-side option sections (WHAT TO PRINT / HEART COLOR /
HEART STYLE / STYLE). Header, product tabs and word chips are NOT touched.
One solid #161616 canvas: no inner panel background, no divider lines,
no tile boxes, no gold outlines. Only the icon + label text + heart float
on the canvas. Selection = brightness. GOLD reserved for .qr-info banner
and .qr-toggle slider (untouched). Loaded LAST in .
========================================================================== */
/* 1. side stripes on the app frame off (the vertical lines on the sides) */
html.w2-dark .app{ border-left:0 !important; border-right:0 !important; }
/* 2. SECTION WRAPPER -> one solid canvas.
.card = per-section box; base CSS gives it background:var(--card) (#232323
in dark) + border-bottom (the divider line). Kill both so every section
sits directly on the #161616 page with no inner panel and no line between. */
html.w2-dark .card{
background:transparent !important;
border:0 !important;
border-bottom:0 !important;
}
/* 3. option tiles -> no box (WHAT TO PRINT / HEART COLOR / HEART STYLE / STYLE) */
html.w2-dark .pick-card,
html.w2-dark .pick-card.sel,
html.w2-dark .layout-card,
html.w2-dark .layout-card.sel{
background:transparent !important;
border:0 !important;
border-color:transparent !important;
border-radius:0 !important;
padding:6px 4px !important;
}
/* selection by brightness, not by box */
html.w2-dark .pick-card,
html.w2-dark .layout-card{ opacity:.45 !important; transition:opacity .15s ease, transform .15s ease !important; }
html.w2-dark .pick-card.sel,
html.w2-dark .layout-card.sel{ opacity:1 !important; }
/* 4. labels: a touch of colour + a touch bolder */
html.w2-dark .df-section{ color:#f7f4ee !important; font-weight:800 !important; border:0 !important; }
html.w2-dark .df-label{ color:rgba(244,241,234,.70) !important; font-weight:700 !important; }
html.w2-dark .pick-lbl{ color:#f4f1ea !important; font-weight:800 !important; letter-spacing:.05em !important; }
html.w2-dark .pick-sub{ color:rgba(244,241,234,.60) !important; font-weight:600 !important; }
/* 6. remove the two superfluous input hints (all .phr-hint = "Don't think,
just finish it" + "Mr.Host and the word are centered"). No other hint uses
this class, so hiding it removes exactly those two, in every language. */
.phr-hint{ display:none !important; }
/* 5. remove the frame line around the preview stage */
html.w2-dark .preview-wrap{ border:0 !important; }
/* NOT TOUCHED (kept as-is): header (.hdr / hat.svg), product tabs
(.type-sw / .type-btn), word chips (.lib-chip / pearl words),
QR banner (.qr-info), QR slider (.qr-toggle / .qr-knob). */
/* ==================== w2slcard.css ==================== */
/* ============================================================================
W2SLCARD_V1 — ShopLink card polish (constructor). [rev6 — theme-aware]
- DARK theme -> card dark #323232 (address-block tone). This beats w2dark's
`html.w2-dark .w2-sitefooter{cream}` (0,2,1) because the card element is