@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Hanken+Grotesk:wght@400;500;600;700&display=swap");
html,body{margin:0;background:var(--surface-100);color:var(--ink);font-family:var(--font-sans);font-size:16px;line-height:24px}
*{box-sizing:border-box}
.wk-stage{padding:var(--space-4);display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:flex-start}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* Button */
.wk-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--tap-target);padding:0 var(--space-5);border-radius:var(--radius-md);border:1px solid transparent;font:600 15px/20px var(--font-sans);letter-spacing:.2px;cursor:pointer;text-decoration:none}
.wk-btn--primary{background:var(--brand);color:var(--on-brand)}
.wk-btn--accent{background:var(--accent);color:var(--on-accent)}
.wk-btn--secondary{background:transparent;color:var(--ink);border-color:var(--border-strong)}
.wk-btn--ghost{background:transparent;color:var(--brand);padding:0 var(--space-3);text-decoration:underline;text-underline-offset:3px}
.wk-btn--sm{min-height:36px;padding:0 var(--space-4);font-size:13px}
.wk-btn--lg{min-height:52px;padding:0 var(--space-6);font-size:16px}
.wk-btn--block{display:flex;width:100%}
.wk-btn[disabled]{background:var(--surface-300);color:var(--ink-muted);border-color:var(--hairline);cursor:not-allowed}

/* Field */
.wk-field{display:flex;flex-direction:column;gap:var(--space-1);width:260px}
.wk-field label{font:600 14px/20px var(--font-sans)}
.wk-field input{min-height:var(--tap-target);padding:0 var(--space-3);border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--surface-200);color:var(--ink);font:400 16px/24px var(--font-sans)}
.wk-field .wk-hint{font:400 14px/20px var(--font-sans);color:var(--ink-muted)}
.wk-field--error input{border-color:var(--sale);border-width:2px}
.wk-field--error .wk-hint{color:var(--sale)}

/* Chip */
.wk-chip{display:inline-flex;align-items:center;gap:var(--space-1);min-height:36px;padding:0 var(--space-4);border:1px solid var(--border-strong);border-radius:var(--radius-pill);background:var(--surface-200);color:var(--ink);font:500 14px/20px var(--font-sans);cursor:pointer}
.wk-chip[aria-pressed="true"]{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}

/* Badge */
.wk-badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:2px var(--space-2);border-radius:var(--radius-sm);font:700 12px/16px var(--font-sans);letter-spacing:1px;text-transform:uppercase}
.wk-badge--new{background:var(--accent);color:var(--on-accent)}
.wk-badge--sale{background:var(--sale);color:var(--on-sale)}
.wk-badge--low{background:var(--surface-200);color:var(--sale);border:1px solid var(--sale)}
.wk-badge--original{background:var(--surface-inverse);color:var(--on-inverse)}
.wk-badge--partner{background:transparent;color:var(--ink);border:1px solid var(--border-strong)}
.wk-badge svg{width:12px;height:12px}

/* Price */
.wk-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2)}
.wk-price__now{font:700 20px/24px var(--font-sans)}
.wk-price__mrp{font:400 14px/20px var(--font-sans);color:var(--ink-muted);text-decoration:line-through}
.wk-price__off{font:700 14px/20px var(--font-sans);color:var(--sale)}
.wk-price--lg .wk-price__now{font-size:24px;line-height:28px}
.wk-tax{flex-basis:100%;font:400 12px/16px var(--font-sans);color:var(--ink-muted)}

/* Rating */
.wk-rating{display:inline-flex;align-items:center;gap:var(--space-1);font:600 14px/20px var(--font-sans)}
.wk-rating svg{width:14px;height:14px;fill:var(--silver)}
.wk-rating small{font:400 12px/16px var(--font-sans);color:var(--ink-muted)}

/* Swatch */
.wk-swatches{display:flex;gap:var(--space-2)}
.wk-swatch{width:var(--tap-target);height:var(--tap-target);border-radius:var(--radius-pill);border:0;padding:0;background:transparent;cursor:pointer;display:grid;place-items:center}
.wk-swatch i{display:block;width:28px;height:28px;border-radius:var(--radius-pill);border:1px solid var(--border-strong)}
.wk-swatch[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--ink)}

/* Size selector */
.wk-size{width:320px;font-family:var(--font-sans)}
.wk-size__head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--space-2)}
.wk-size__head b{font:600 16px/24px var(--font-sans)}
.wk-size__head a{font:500 14px/20px var(--font-sans);color:var(--brand);text-underline-offset:3px}
.wk-size__units{display:inline-flex;border:1px solid var(--border-strong);border-radius:var(--radius-md);overflow:hidden;margin-bottom:var(--space-3)}
.wk-size__units button{min-height:36px;padding:0 var(--space-3);border:0;background:transparent;color:var(--ink);font:600 13px/20px var(--font-sans);cursor:pointer}
.wk-size__units button[aria-pressed="true"]{background:var(--ink);color:var(--surface-100)}
.wk-size__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2)}
.wk-size__tile{min-height:var(--tap-target);border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--surface-200);color:var(--ink);font:600 15px/20px var(--font-sans);cursor:pointer}
.wk-size__tile[aria-pressed="true"]{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.wk-size__tile[disabled]{background:var(--surface-300);color:var(--ink-muted);border-style:dashed;text-decoration:line-through;cursor:not-allowed}
.wk-size__note{margin:var(--space-3) 0 0;font:400 14px/20px var(--font-sans);color:var(--ink-muted)}
.wk-size__note b{color:var(--success)}

/* Product card */
.wk-card{width:240px;background:var(--glass-fill-lite);border-radius:var(--radius-xl);overflow:hidden;position:relative;font-family:var(--font-sans)}
.wk-card:hover{box-shadow:var(--shadow-card)}
.wk-card__img{aspect-ratio:3/4;overflow:hidden;background:var(--surface-300);display:grid;place-items:center;color:var(--ink-muted);font:500 13px/16px var(--font-sans);position:relative}
.wk-card__flag{position:absolute;top:var(--space-3);left:var(--space-3)}
.wk-card__wish{position:absolute;top:var(--space-1);right:var(--space-1);width:var(--tap-target);height:var(--tap-target);border:0;border-radius:var(--radius-pill);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer}
.wk-card__wish svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.75}
.wk-card__body{padding:var(--space-3) var(--space-4) var(--space-4);display:flex;flex-direction:column;gap:var(--space-1)}
.wk-card__brand{font:700 12px/16px var(--font-sans);letter-spacing:1px;text-transform:uppercase}
.wk-card__name{font:400 14px/20px var(--font-sans);color:var(--ink-muted);margin:0}
.wk-card__meta{font:400 12px/16px var(--font-sans);color:var(--ink-muted)}

/* Promo bar */
.wk-promo{background:var(--surface-inverse);color:var(--on-inverse);display:flex;justify-content:center;gap:var(--space-6);flex-wrap:wrap;padding:var(--space-2) var(--space-4);font:500 13px/20px var(--font-sans);width:100%}
.wk-promo span{display:inline-flex;align-items:center;gap:var(--space-2)}
.wk-promo svg{width:14px;height:14px;stroke:var(--silver);fill:none;stroke-width:2}

/* Brand tile */
.wk-brand{width:200px;background:var(--surface-200);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3);font-family:var(--font-sans);color:var(--ink);text-decoration:none}
.wk-brand__mark{height:72px;border-radius:var(--radius-md);background:var(--surface-300);display:grid;place-items:center;font:500 22px/26px var(--font-display);letter-spacing:-.3px}
.wk-brand__name{font:600 16px/22px var(--font-sans)}
.wk-brand__meta{font:400 13px/18px var(--font-sans);color:var(--ink-muted)}
.wk-brand__go{font:600 14px/20px var(--font-sans);color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.wk-h{font-family:var(--font-display)}

.wk-card__img img,.wk-tile__img img{width:100%;height:100%;object-fit:cover;display:block}

/* Glass surface: backdrop, blur, tinted body, window reflection (upper-left), rim, lift. Chrome and containers only; never body copy over busy photos. */
.wk-glass{position:relative;isolation:isolate;border-radius:var(--radius-xl);background:var(--glass-fill);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.7);backdrop-filter:blur(var(--glass-blur)) saturate(1.7);box-shadow:var(--glass-lift);color:var(--ink)}
.wk-glass--lite{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--glass-fill-lite)}
.wk-glass--pill{border-radius:var(--radius-pill)}
.wk-glass::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;padding:1px;background:linear-gradient(135deg,var(--glass-rim) 0%,transparent 34%,transparent 62%,var(--glass-window) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.wk-glass::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;overflow:hidden;background:radial-gradient(120% 90% at 22% 0%,var(--glass-window),transparent 46%);opacity:.55}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.wk-glass{background:var(--surface-200)}}
@media (prefers-reduced-transparency:reduce){.wk-glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--surface-200)}.wk-glass::after{display:none}}
.wk-backdrop{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--surface-100),var(--surface-300))}
.wk-backdrop i{position:absolute;border-radius:50%;pointer-events:none}

/* Category tile: photo with a glass label */
.wk-tile{position:relative;display:block;width:200px;color:var(--ink);text-decoration:none}
.wk-tile__img{aspect-ratio:3/4;border-radius:var(--radius-xl);overflow:hidden;background:var(--surface-300)}
.wk-tile__label{position:absolute;left:12px;right:12px;bottom:12px;padding:12px 16px;text-align:center;font:600 14px/20px var(--font-sans)}

/* Hero carousel */
.wk-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;font-family:var(--font-sans);color:var(--ink);padding:var(--space-5)}
.wk-hero__stack{display:grid}
.wk-hs{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .5s ease,transform .6s cubic-bezier(.23,1,.32,1),visibility 0s .5s}
.wk-hs.is-active{opacity:1;visibility:visible;transform:none;transition-delay:.12s,.12s,0s}
.wk-eyebrow{font:700 12px/16px var(--font-sans);letter-spacing:1.5px;text-transform:uppercase;color:var(--accent)}
.wk-hs h1{margin:12px 0 10px;font:500 56px/54px var(--font-display);letter-spacing:-2px;color:var(--brand)}
.wk-hs .wk-sub{margin:0 0 10px;font:600 20px/28px var(--font-sans);color:var(--brand)}
.wk-hs .wk-lede{margin:0 0 24px;font:400 16px/24px var(--font-sans);color:var(--ink-muted);max-width:440px;min-height:72px}
.wk-hero__photos{position:relative;width:100%;aspect-ratio:3/4;max-width:380px;margin-left:auto;border-radius:var(--radius-2xl);overflow:hidden;background:var(--surface-300);box-shadow:var(--glass-lift)}
.wk-hero__photos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);transition:opacity .7s ease,transform 1.2s cubic-bezier(.23,1,.32,1)}
.wk-hero__photos img.is-active{opacity:1;transform:none}
.wk-hero__ctl{display:flex;align-items:center;gap:20px;margin-top:28px;flex-wrap:wrap}
.wk-dots{display:flex;gap:4px;align-items:center}
.wk-dot{width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.wk-dot i{display:block;width:10px;height:10px;border-radius:999px;background:var(--border-strong);opacity:.5;position:relative;overflow:hidden;transition:width .35s cubic-bezier(.23,1,.32,1)}
.wk-dot.is-active i{width:36px;opacity:1;background:var(--hairline)}
.wk-dot.is-active i::after{content:"";position:absolute;inset:0;background:var(--brand);transform-origin:left;transform:scaleX(var(--p,0))}
.wk-arrow{width:44px;height:44px;border:0;display:inline-grid;place-items:center;cursor:pointer;color:var(--ink);padding:0}
.wk-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wk-count{font:600 13px/16px var(--font-sans);letter-spacing:1px;color:var(--ink-muted);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.wk-hs,.wk-hero__photos img{transition:none}}

/* Logo lockup */
.wk-logo{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}
.wk-logo img{height:40px;width:auto;display:block}
.wk-wordmark{font:600 22px/1 var(--font-wordmark);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}