/* Kliko — approved cream / yellow / ink identity. Loaded after base UI. */
:root{--blue:#25251f;--ink:#111214;--muted:#68675f;--line:#efede6;--pale:#f8f5ed;--yellow:#ffdf43}
html:has(.customer-page){background:#f6f2e9}
body{color:var(--ink)}
.brand{color:#101114;gap:9px;font-weight:900}
.brand .brand-word{color:inherit;margin:0;font-size:28px;letter-spacing:-1.2px}
.brand b{width:37px;height:39px;background:var(--yellow);color:#111214;border-radius:11px;font-size:30px;font-weight:900}
.customer-page{background:#fffcf5;box-shadow:0 0 80px #50422009}
.customer-page .app-header{background:transparent;border:0;padding:12px 18px;height:75px}
.customer-page main{padding:0 13px 24px}
.customer-page .brand{font-size:28px}
.customer-page .brand b{width:36px;height:38px}
.head-actions{gap:5px}.head-btn{color:#111214;width:38px;height:40px}.head-btn .icon{width:26px;height:26px}
.preview-banner{background:#f4efdf;color:#655f4e;font-size:10px;padding:3px 6px}.preview-banner a{color:#292719;text-decoration:underline}
.hero{flex-direction:row;background:radial-gradient(ellipse at 38% 38%,#ffed86 0%,#ffe357 52%,#ffde40 100%);border-radius:23px;box-shadow:none;margin:0 0 14px;padding:22px 15px;min-height:200px;gap:0}
.hero-copy{max-width:59%;width:59%;flex-shrink:0}
.hero-copy h1{font-size:26px;line-height:1.22;letter-spacing:-.8px;color:#111214}
.hero-copy p{font-size:13px;color:#222016;margin:10px 0 0;line-height:1.6}
.hero-cta{color:#fff;background:#171816;border-radius:19px;font-size:14px;gap:10px;padding:10px 13px;margin-top:14px;box-shadow:none;white-space:nowrap}
.hero-cta .icon{width:20px;height:20px}
.hero-art{width:41%;height:160px;flex-shrink:1;margin-left:-3px}
.hero-art:before{display:none}.tile{box-shadow:0 6px 12px #71641622;border-radius:13px;line-height:1}
.tile.a{width:53px;height:61px;left:27px;top:2px;background:#151918;transform:rotate(-12deg)}
.tile.b{width:55px;height:58px;left:82px;right:auto;top:35px;background:#131916;transform:rotate(12deg);padding:8px}
.tile.c{width:44px;height:46px;left:0;top:49px;background:#fff;transform:rotate(-9deg);padding:7px}
.tile.d{width:65px;height:64px;left:40px;top:96px;background:linear-gradient(145deg,#04ced0,#386afa 55%,#8a1dff);transform:rotate(12deg);color:white}
.tile svg{width:100%;height:100%}.brand-svg{width:100%;height:100%;object-fit:contain}
.netflix-letter{font:bold 54px Arial,sans-serif;letter-spacing:-5px;margin-left:-5px;color:#e50914;text-shadow:3px 2px #a70b16}
.canva-word{font:italic 700 21px Georgia,serif;letter-spacing:-1.5px}
.hero-spark{position:absolute;left:8px;top:12px;font-size:23px}.hero-heart{position:absolute;left:115px;top:107px}.hero-heart .icon{width:20px;height:20px;stroke-width:2.5}.hero-note{display:none}
.cat-grid{gap:7px;align-items:stretch;margin-bottom:8px}
.cat-scroll{gap:7px;padding:0;align-items:stretch}.cat-scroll .cat{width:65px;flex-basis:65px}
.cat{background:#f6f2e9;border-radius:17px;padding:11px 5px 9px;gap:7px;font-size:11px;line-height:1.35;color:#141513;min-height:83px;justify-content:flex-start}
.cat-ic{width:34px;height:32px;background:none;border-radius:0}.cat-ic .icon{width:27px;height:27px;color:#111214;stroke-width:1.9}.cat-ic.more,.cat-ic.all{background:none;color:inherit}
.all-cat{flex:0 0 54px;background:var(--yellow)}.more-pin{width:58px;flex:0 0 58px;background:var(--yellow);font-weight:700}.more-pin .icon{fill:#26241b;stroke:#26241b}.cat-ic .filled-category{stroke:none;width:30px;height:30px}.more-pin:after{display:none}
.cat-grid.wide{grid-template-columns:repeat(3,minmax(0,1fr))}.cat-grid.wide .cat{font-size:13px;padding:16px 8px}
.sec-head{margin:24px 0 12px}.sec-head h2,.customer-page .sec-head h2{font-size:23px;letter-spacing:-.5px;gap:5px}.sec-head a{color:#676254;font-size:11px}.kliko-spark{color:#efbd10;font-size:24px}.pct{background:#ffe889;color:#302b19}
.prod-grid{gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
.prod{border:0;border-radius:21px;padding:12px 10px 10px;box-shadow:0 8px 24px #74684c09;overflow:hidden;min-width:0;gap:8px}
.prod .prod-top{display:flex;flex-direction:column;gap:0;align-items:stretch;min-width:0;flex:1}
/* Full-bleed product artwork above all offer information. */
.prod-grid .prod{padding:0 0 10px;gap:5px;border-radius:17px}
.prod .prod-media{width:100%;height:auto;aspect-ratio:16/9;flex:0 0 auto;border-radius:0;align-self:stretch}
.prod .prod-media.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.prod .prod-logo{padding:14px;height:100%;position:absolute;inset:0}
.prod .prod-logo svg,.prod .prod-logo .brand-svg{max-height:70px}
.prod .prod-logo .netflix-letter{font-size:64px}
.prod .prod-logo .canva-word{font-size:30px}
.prod .prod-body{padding:9px 10px 0;flex:1;gap:3px}
.prod .prod-body h3{min-height:1.3em;text-align:right}
.prod .prod-sub{margin-top:auto}
.prod .prod-price{margin-top:3px}
.prod .prod-details{margin:0 10px;min-height:20px}
.prod-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:3px 10px 0}
.prod .prod-actions a{width:100%;margin:0;min-width:0;min-height:44px;height:44px;border-radius:10px;font-size:12px;display:flex;align-items:center;justify-content:center;white-space:nowrap}
.details-btn{border:1px solid #d8d3c7;background:#fffdf7;color:#575247;font-weight:700}
.offer-detail{background:#fff;border-radius:18px;overflow:hidden}
.offer-detail .offer-detail-cover{width:100%;height:auto;aspect-ratio:16/9;border-radius:0}
.offer-detail .offer-detail-cover.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.offer-detail-cover .prod-logo{position:absolute;inset:0;padding:28px}
.offer-detail-body{padding:16px}
.offer-category{margin:0 0 3px;color:var(--muted);font-size:12px}
.offer-detail h2{margin:0;font-size:23px;overflow-wrap:anywhere;text-align:right}
.offer-detail-price{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:7px 0 10px}
.offer-detail-price b{font-size:24px}.offer-detail-price s{color:var(--muted);font-size:14px}
.offer-facts{margin:0 0 16px}.offer-facts>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.offer-facts dt{color:var(--muted)}.offer-facts dd{margin:0;overflow-wrap:anywhere;font-weight:700}
.prod-media{height:54px;width:49px;flex:0 0 49px;border-radius:12px;overflow:hidden;background:#f5f4f0}
.prod-media.netflix,.prod-media.spotify{background:#131918}.prod-media.openai{background:#f5f5f5}.prod-media.generic{background:#f4f0e5}.prod-media.generic .prod-logo{color:#333}.prod-media.canva{background:linear-gradient(145deg,#00cbd1,#4161f6 55%,#8a1aff)}
.prod-logo{direction:ltr;width:100%;height:100%;padding:8px;display:grid;place-items:center;font-size:24px}.prod-logo svg,.prod-logo .brand-svg{width:100%;height:100%}.prod-logo .netflix-letter{font-size:42px}.prod-logo .canva-word{font-size:16px;letter-spacing:-1px}.prod-media.disney .prod-logo{font-size:10px;padding:2px}.prod-media.microsoft .prod-logo{font-size:23px}
.prod-media.cover img{object-fit:contain;background:#f7f6f3}
.prod-body{padding:0;gap:5px;min-width:0;flex:1;text-align:right}
.prod-body h3{font-size:13px;color:#101114;line-height:1.3;overflow-wrap:anywhere;font-weight:700}
.prod-sub{font-size:11px;line-height:1.35;color:#6b6861}
.prod-price{gap:3px}.prod-price b{font-size:16px;line-height:1.3;color:#111214;white-space:nowrap}.prod-price s{color:#8a857a;font-size:10px}
.prod-details{display:flex;gap:4px;align-items:center;justify-content:flex-start;min-height:24px;flex-wrap:wrap}
.prod-tag{background:#f5f0de;color:#615529;border-radius:20px;padding:3px 8px;font-size:10px;line-height:1.5}.prod:nth-child(3n+1) .prod-tag{background:#eaf7f0;color:#256247}.prod:nth-child(3n+2) .prod-tag{background:#fff0ef;color:#9e3733}.discount-tag{font-size:10px;color:#8f3531}
.cart-btn{display:flex;justify-content:center;align-items:center;gap:7px;background:linear-gradient(100deg,#ffdc36,#ffe35b);color:#14150f;width:100%;height:44px;min-height:44px;border-radius:13px;font-size:13px;font-weight:700}.cart-btn .icon{height:18px;width:18px}
.customer-bottom-nav{bottom:10px;bottom:calc(10px + env(safe-area-inset-bottom));width:min(calc(100% - 26px),454px);height:72px;border:1px solid #fff;border-radius:38px;padding:7px 12px;background:#fffffff5;box-shadow:0 6px 35px #746a5218;align-items:center}
.customer-bottom-nav a{position:relative;color:#67665f;gap:2px;font-size:12px;justify-content:center;min-height:54px}.customer-bottom-nav .icon{width:30px;height:30px;padding:3px;box-sizing:content-box}.customer-bottom-nav a.selected{color:#866400}.customer-bottom-nav a.selected .icon{border-radius:50%;background:var(--yellow);color:#151610}.customer-bottom-nav .nav-badge{position:absolute;top:0;right:calc(50% - 23px)}
.customer-page footer{padding-bottom:112px;color:#7d786a}.customer-page .page-title h1{font-size:23px}.customer-page .page-title{padding-top:15px}.customer-page:has(.page-title) .app-header{display:flex}.customer-page:has(.page-title) main{padding-top:0}
button,.button{background:var(--yellow);color:#151610}.ghost{background:#f3efdF}.text-button{background:none;color:#746e60}input[type=checkbox],input[type=radio]{accent-color:#b18a00}a:focus-visible,button:focus-visible,input:focus-visible{outline-color:#977000}
.customer-page .active-summary{background:var(--yellow);color:#151610;box-shadow:none}.active-summary .pill-link{background:#fff8cf;color:#342d16}.customer-page .quick-actions a>span{color:#24251e;background:#fff1a3}.customer-page .subscription-meta{background:#f8f5ec;border-color:#eee8da}.customer-page .subscription-meta .icon{color:#746022}.customer-page .payment-choice:has(input:checked){border-color:#b18a00;background:#fff9dc}.customer-page .payment-choice .icon{color:#635319}
.admin-sidebar .selected{background:#fff5c0;border-right-color:#e2b700;color:#3b3215!important}
@media(min-width:430px){.hero-copy h1{font-size:30px}.hero{min-height:215px}.hero-art{transform:scale(1.1);transform-origin:left center}.prod-media{width:61px;height:67px;flex-basis:61px}.prod-body h3{font-size:14px}.prod-price b{font-size:18px}.prod{padding:14px 12px 12px}}
@media(max-width:350px){.hero{padding:18px 11px;min-height:190px}.hero-copy h1{font-size:23px}.hero-copy p{font-size:11px}.hero-cta{font-size:12px;padding:9px 10px}.hero-art{transform:scale(.8);transform-origin:left center}.prod-top{flex-direction:column;align-items:stretch}.prod-media{width:55px;flex-basis:55px;align-self:flex-start}.prod-body h3{font-size:13px}.cat-scroll .cat{width:61px;flex-basis:61px}}