/*
Theme Name: Sakaan
Description: Gen Z, groovy sticker-style e-commerce theme for shaped mirrors, wall art and clothing. WooCommerce ready. Includes Home, Journal, About, Contact and Customization Request pages.
Version: 3.0
Author: Your Studio
Text Domain: sakaan
Requires at least: 6.0
Requires PHP: 7.4
*/

:root{color-scheme:dark;--bg:#0A1230;--card:#101B45;--ink:#EAF1FF;--on:#0A1230;--ol:#7FA2FF;--shc:#2F5BFF;--brand:#4D8BFF;--ice:#CFE0FF;--aqua:#7DE3F0;--mint:#A8F0C6;--violet:#A99BFF;--mist:#B8CCFF;--lilac:var(--violet);--sage:var(--mint);--blush:var(--ice);--muted:#9FB0D9;--line:#22336E;--accent:var(--brand);
--chrome:linear-gradient(125deg,#fff 0%,#cfd9ee 28%,#fbfcff 46%,#a9b4d6 68%,#f1f4ff 100%);
--hd:'Bagel Fat One',system-ui,sans-serif;--bd:'Figtree',system-ui,sans-serif;--r:26px;--w:1180px;--o:2.5px solid var(--ol);--sh:5px 5px 0 var(--shc)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg) radial-gradient(#18285F 1.5px,transparent 1.6px) 0 0/24px 24px;color:var(--ink);font:500 17px/1.6 var(--bd);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}a{color:inherit}
h1,h2,h3,h4{font-family:var(--hd);font-weight:400;line-height:1.05;margin:0 0 .5em;text-transform:lowercase}
h1{font-size:clamp(2.6rem,7vw,5.2rem);color:var(--ink);-webkit-text-stroke:.09em var(--shc);paint-order:stroke fill;text-shadow:.05em .06em 0 var(--brand)}
h2{font-size:clamp(1.9rem,4vw,3rem)}h3{font-size:1.3rem}
p{margin:0 0 1em;max-width:60ch}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:8px}
.wrap{max-width:var(--w);margin:0 auto;padding:0 24px}.sec{padding:84px 0}.sec.tint{background:var(--card);border-block:var(--o)}
.sec-h{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:36px;flex-wrap:wrap}.sec-h h2{margin:0}
.btn,.button,button.single_add_to_cart_button,.woocommerce a.button,.woocommerce button.button,.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce #respond input#submit{display:inline-block;background:var(--brand);color:var(--on)!important;border:var(--o);border-radius:99px;padding:12px 26px;font:700 .98rem var(--bd);text-decoration:none;cursor:pointer;box-shadow:3px 3px 0 var(--shc);transition:transform .15s,box-shadow .15s}
.btn:hover,.button:hover,.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{background:var(--brand);transform:translate(2px,2px);box-shadow:1px 1px 0 var(--shc)}
.btn.ghost{background:var(--card);color:var(--ink)!important}
/* header */
.site-h{position:sticky;top:0;z-index:50;background:rgba(10,18,48,.9);backdrop-filter:blur(10px);border-bottom:var(--o)}
.site-h .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;gap:20px}
.logo{font:400 1.6rem var(--hd);text-decoration:none;text-transform:lowercase}.logo:after{content:" ☺";color:var(--brand)}
.nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0}.nav a{text-decoration:none;font-weight:700;font-size:.98rem}
.nav a:hover,.nav .current-menu-item a,.nav a.cur{text-decoration:underline wavy var(--brand) 2px;text-underline-offset:7px}
.cart{display:inline-flex;gap:8px;align-items:center;text-decoration:none;font-weight:700;background:var(--aqua);border:var(--o);border-radius:99px;padding:6px 16px;box-shadow:3px 3px 0 var(--shc)}
.burger{display:none;background:var(--card);border:var(--o);border-radius:12px;font-size:1.3rem;cursor:pointer;color:var(--ink);padding:2px 10px}
/* hero */
.hero{padding:64px 0 40px}.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.hero p{font-size:1.2rem}.hero .acts{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.mirror{position:relative;aspect-ratio:3/4;max-width:400px;margin:0 auto;width:86%}
.mirror .back,.mirror i{position:absolute;border:var(--o);border-radius:42% 58% 63% 37%/45% 40% 60% 55%;animation:morph 14s ease-in-out infinite}
.mirror .back{inset:3% -9% -4% 9%;background:var(--brand);box-shadow:var(--sh)}
.mirror i{inset:0;background:var(--chrome);overflow:hidden;box-shadow:inset 0 0 0 8px rgba(255,255,255,.6);display:grid;place-items:center}
.mirror i:after{content:"";position:absolute;inset:-40% auto -40% -60%;width:36%;background:rgba(255,255,255,.75);filter:blur(16px);transform:rotate(18deg);animation:shine 6s ease-in-out infinite}
.mirror em{font:400 clamp(1.7rem,4vw,2.5rem)/1 var(--hd);color:var(--brand);-webkit-text-stroke:.07em var(--on);paint-order:stroke fill;text-align:center;transform:rotate(-7deg);z-index:1;font-style:normal;text-transform:lowercase}
.stk{position:absolute;z-index:2;background:#fff;border:var(--o);border-radius:99px;padding:6px 16px;box-shadow:3px 3px 0 var(--shc);font:400 1.05rem var(--hd);animation:bob 4s ease-in-out infinite}
.stk.smile{right:-8%;top:2%;width:78px;height:78px;padding:0;display:grid;place-items:center;font-size:2.8rem;background:var(--aqua);border-radius:50%;transform:rotate(12deg)}
.stk.cloud{left:-10%;bottom:12%;background:var(--violet);transform:rotate(-8deg)}
.stk.sp{border:0;box-shadow:none;background:none;padding:0;font-size:2.4rem;color:var(--ink)}.stk.sp1{left:2%;top:4%;color:var(--aqua);text-shadow:2px 2px 0 var(--shc)}.stk.sp2{right:0;bottom:2%;color:var(--mint);text-shadow:2px 2px 0 var(--shc)}
@keyframes morph{50%{border-radius:58% 42% 40% 60%/55% 60% 40% 45%}}
@keyframes shine{0%,100%{left:-60%}50%{left:120%}}
@keyframes bob{50%{translate:0 -8px}}
.marq{overflow:hidden;background:var(--brand);border-block:var(--o);padding:12px 0;margin:56px -3% 0;white-space:nowrap;transform:rotate(-1.2deg)}
.marq div{display:inline-block;animation:slide 30s linear infinite;font:400 1.4rem var(--hd);text-transform:lowercase}.marq span{margin-left:28px}.marq span:after{content:"✦";margin-left:28px;color:#fff}
@keyframes slide{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* tiles */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.tile{display:flex;flex-direction:column;justify-content:end;min-height:300px;padding:24px;border-radius:var(--r);border:var(--o);box-shadow:var(--sh);text-decoration:none;position:relative;overflow:hidden;transition:transform .2s}
.tile:nth-child(odd){transform:rotate(-1.5deg)}.tile:nth-child(even){transform:rotate(1.5deg)}.tile:hover{transform:rotate(0) translateY(-6px)}
.tile:before{content:"";position:absolute;width:140px;height:140px;right:-24px;top:-24px;background:rgba(255,255,255,.65);border:var(--o);border-radius:42% 58% 63% 37%/45% 40% 60% 55%}
.tile:after{content:"✦";position:absolute;right:46px;top:40px;font-size:1.6rem}
.tile h3{font-size:1.6rem;margin:0 0 4px}.tile small{font-weight:600}
/* products */
ul.products,.woocommerce ul.products{display:grid!important;grid-template-columns:repeat(4,1fr);gap:24px;list-style:none;padding:0;margin:0 0 40px}
ul.products:before,ul.products:after{display:none!important}
ul.products li.product{width:auto!important;margin:0!important;float:none!important;background:var(--card);border:var(--o);border-radius:var(--r);padding:12px 12px 20px;box-shadow:var(--sh);transition:transform .2s}
ul.products li.product:hover{transform:translateY(-5px) rotate(-.8deg)}
ul.products li.product img{border:var(--o);border-radius:18px;margin:0 0 14px!important;aspect-ratio:1;object-fit:cover;width:100%}
.woocommerce-loop-product__title{font:400 1.15rem/1.15 var(--hd)!important;text-transform:lowercase;padding:0 6px!important}
.price{font-weight:700;padding:0 6px;display:block;color:var(--ink)!important}.price ins{text-decoration:none}
ul.products li.product .button{margin:12px 6px 0;padding:8px 18px}
.onsale{background:var(--aqua)!important;color:var(--on)!important;border:var(--o)!important;border-radius:99px!important;min-height:0!important;line-height:1!important;padding:9px 14px!important;top:22px!important;left:22px!important;right:auto!important;margin:0!important;font-weight:700}
.woocommerce div.product{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding:60px 0}
.woocommerce div.product div.images,.woocommerce div.product div.summary{width:100%!important;float:none!important}
.woocommerce div.product div.images img{border:var(--o);border-radius:var(--r);box-shadow:var(--sh)}.woocommerce div.product .product_title{font-size:clamp(2rem,4vw,3rem);text-transform:lowercase}
.woocommerce div.product .woocommerce-tabs,.woocommerce div.product .related{grid-column:1/-1}.woocommerce div.product p.price{font-size:1.5rem}
.woocommerce-message,.woocommerce-info{border:var(--o);border-radius:16px;background:var(--mint);color:var(--on)}
.woocommerce table.shop_table{border:var(--o);border-radius:20px;overflow:hidden;background:var(--card)}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce select{border:2px solid var(--ol);border-radius:14px;padding:12px 14px;font:inherit}
/* custom band, panes */
.band{background:var(--brand);border:var(--o);box-shadow:8px 8px 0 var(--shc);border-radius:40px;padding:64px 52px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.band .btn{background:#fff}.steps{display:grid;gap:14px;counter-reset:s}
.steps div{background:#fff;border:var(--o);box-shadow:3px 3px 0 var(--shc);border-radius:20px;padding:16px 22px;font-weight:700;counter-increment:s}
.steps div:before{content:counter(s);display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--aqua);border:var(--o);font:400 1rem var(--hd);margin-right:14px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.pane{aspect-ratio:1;border:var(--o);box-shadow:var(--sh);border-radius:42% 58% 63% 37%/45% 40% 60% 55%;background:var(--aqua);display:grid;place-items:center;font:400 clamp(1.8rem,4vw,2.8rem)/1.05 var(--hd);text-align:center;padding:12%;text-transform:lowercase}
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:28px}.vals div{border:var(--o);box-shadow:var(--sh);border-radius:var(--r);padding:30px}.vals div:nth-child(2){transform:rotate(1.5deg)}.vals div:first-child{transform:rotate(-1.5deg)}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.post{background:var(--card);border:var(--o);box-shadow:var(--sh);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.post .th{aspect-ratio:4/3;background:var(--violet);object-fit:cover;width:100%;border-bottom:var(--o)}.post .bd{padding:22px}.post h3 a{text-decoration:none}.post time{font-weight:600;color:var(--muted);font-size:.9rem}
.entry{max-width:720px;margin:0 auto;padding:64px 24px}.entry img{border:var(--o);border-radius:var(--r)}.entry h2{margin-top:1.6em}
.pgh{padding:64px 0 24px}.pgh h1{margin-bottom:.35em}.pgh p{font-size:1.2rem}
.pagination{display:flex;gap:10px;justify-content:center;margin-top:40px}.page-numbers{padding:8px 16px;border:var(--o);border-radius:99px;background:var(--card);text-decoration:none;font-weight:700}.page-numbers.current{background:var(--brand)}
/* forms */
.form{background:var(--card);border:var(--o);box-shadow:var(--sh);border-radius:var(--r);padding:36px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form .full{grid-column:1/-1}.form label{display:block;font-weight:700;font-size:.95rem;margin-bottom:6px}
.form input,.form select,.form textarea{width:100%;border:2px solid var(--ol);background:var(--bg);border-radius:14px;padding:12px 16px;font:inherit;color:inherit}
.form input:focus,.form select:focus,.form textarea:focus{background:var(--card);box-shadow:3px 3px 0 var(--brand)}
.form textarea{min-height:150px;resize:vertical}.form .hp{position:absolute;left:-9999px}
.ok{background:var(--mint);border:var(--o);border-radius:16px;padding:14px 20px;margin-bottom:24px;font-weight:700}
.info{display:grid;gap:16px}.info div{border:var(--o);box-shadow:3px 3px 0 var(--shc);background:var(--aqua);border-radius:20px;padding:20px 24px}.info h3{margin-bottom:4px}
/* footer */
.chk{height:30px;margin-top:40px;border-top:var(--o);background:repeating-conic-gradient(var(--brand) 0 25%,var(--bg) 0 50%) 0 0/30px 30px}
.site-f{background:#050A1F;color:#CFE0FF;padding:64px 0 32px}
.site-f .g{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px}.site-f .logo{color:var(--brand)}.site-f .logo:after{color:var(--aqua)}.site-f h3{color:var(--aqua)!important}.site-f ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.site-f a{text-decoration:none}.site-f a:hover{color:#fff}.site-f .c{margin-top:48px;padding-top:24px;border-top:1px solid #2d3a66;font-size:.9rem}
@media(max-width:900px){
.burger{display:block}.nav{display:none;position:absolute;top:76px;left:0;right:0;background:var(--bg);padding:20px 24px;border-bottom:var(--o)}.nav.open{display:block}.nav ul{flex-direction:column;gap:16px}
.hero .wrap,.split,.band,.woocommerce div.product,.form,.site-f .g{grid-template-columns:1fr}
.tiles,ul.products,.woocommerce ul.products{grid-template-columns:repeat(2,1fr)}.posts,.vals{grid-template-columns:1fr}
.band{padding:40px 26px}.sec{padding:56px 0}.form{padding:24px}.stk.cloud{left:-4%}.stk.smile{right:-2%}}
@media(max-width:520px){.tiles{grid-template-columns:1fr}}

.tile,.band,.pane,.vals div,.info div,.ok,.stk,.steps div,.marq,.cart,.page-numbers.current,.chip.on,.chip:hover,.chips a:hover{color:var(--on)}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce select{background:var(--bg);color:var(--ink)}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.chip,.chips a{display:inline-block;border:var(--o);border-radius:99px;padding:6px 18px;font-weight:700;font-size:.95rem;text-decoration:none;background:var(--card)}.chip.on,.chip:hover,.chips a:hover{background:var(--brand)}
.feat{display:grid;grid-template-columns:1.1fr 1fr;background:var(--card);border:var(--o);box-shadow:var(--sh);border-radius:var(--r);overflow:hidden;margin-bottom:36px}
.feat .th{width:100%;height:100%;min-height:340px;object-fit:cover;background:var(--violet);border-right:var(--o)}.feat .bd{padding:40px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.feat h2{margin:8px 0 14px}.feat h2 a{text-decoration:none}.feat time{font-weight:600;color:var(--muted)}
.entry .meta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:18px}.entry .chips{margin-top:32px}
@media(max-width:900px){.feat{grid-template-columns:1fr}.feat .th{border-right:0;border-bottom:var(--o);min-height:220px}.feat .bd{padding:26px}}