/* Pan Asia — geometry measured from the live Wix site at a 1280px viewport.
   Desktop lays every element out in "design units" (--u = 1px at 1280px, scaling down on narrower screens). */
@font-face { font-family: "Poppins ExtraLight"; font-weight: 200; font-style: normal; font-display: swap; src: url(/fonts/poppins-latin-200-normal.woff2) format("woff2"); }
@font-face { font-family: "Nunito Sans Local"; font-weight: 300; font-style: normal; font-display: swap; src: url(/fonts/nunito-sans-latin-300-normal.woff2) format("woff2"); }
@font-face { font-family: "Nunito Sans Local"; font-weight: 800; font-style: normal; font-display: swap; src: url(/fonts/nunito-sans-latin-800-normal.woff2) format("woff2"); }
@font-face { font-family: "Jost Local"; font-weight: 400; font-style: normal; font-display: swap; src: url(/fonts/jost-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Jost Local"; font-weight: 700; font-style: normal; font-display: swap; src: url(/fonts/jost-latin-700-normal.woff2) format("woff2"); }

:root {
  --u: min(1px, 100vw / 1280);
  --ink: #30362c;
  --lucida: "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
  --poppins: "Poppins ExtraLight", "Poppins", sans-serif;
  --avenir: "Avenir LT 35 Light", "Avenir", "Avenir Next", "Nunito Sans Local", "Segoe UI", sans-serif;
  --futura: "Futura", "Futura PT", "Jost Local", "Century Gothic", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; color: var(--ink); background: #fff; font: 400 16px/1.2 var(--lucida); overflow-x: clip; }
img { display: block; max-width: none; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; font-weight: 400; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: -9999px; top: 0; z-index: 100; background: #fff; padding: 10px 14px; }
.skip:focus { left: 0; }
.ph { background: #eef2f4; }

/* Absolute placement in design units */
.stage { position: relative; width: min(1280px, 100vw); margin: 0 auto; height: calc(var(--sh) * var(--u)); }
.a { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); }
.a[style*="--h:"] { height: calc(var(--h) * var(--u)); }
.t { font-size: calc(var(--fs, 16) * var(--u)); line-height: var(--lh, 1.2); letter-spacing: calc(var(--ls, 0) * var(--u)); }
.c { text-align: center; }
.b { font-weight: 700; }
.up { text-transform: uppercase; }
.pop { font-family: var(--poppins); }
.aven { font-family: var(--avenir); font-weight: 300; }
.aven.b { font-weight: 800; }
.fut { font-family: var(--futura); }
.fut.b { font-weight: 700; }
.white { color: #fff; }
.pop.up.c { white-space: nowrap; }

/* Full-bleed picture strips */
.bleed { position: absolute; left: 50%; transform: translateX(-50%); width: min(100vw, 1325px); top: calc(var(--y) * var(--u)); height: calc(var(--h) * var(--u)); overflow: hidden; }
.bleed > img { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: max(calc(var(--iw) * var(--u)), 100vw); height: 100%; object-fit: cover; }
.bleed.wash::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .68); }
.pic { overflow: hidden; }
.pic > img, .pic > .ph { width: 100%; height: 100%; object-fit: cover; }

/* Header: 105 units tall, sticky, as on Wix */
.site-header { position: sticky; top: 0; z-index: 50; height: calc(105 * var(--u)); background: #f9f9f9; box-shadow: 0 0 5px rgba(0, 0, 0, .18); }
.hd { position: relative; width: min(1280px, 100vw); height: 100%; margin: 0 auto; }
.brand img { width: 100%; height: auto; }
.nv { display: block; height: calc(50 * var(--u)); padding: 0; border: 0; background: none; font: 400 calc(18 * var(--u)) / calc(50 * var(--u)) Arial, Helvetica, sans-serif; color: var(--ink); text-align: center; text-decoration: none; cursor: pointer; white-space: nowrap; }
.nv:hover { opacity: .7; }
.nav-products { position: absolute; left: calc(854 * var(--u)); top: calc(27 * var(--u)); width: calc(91 * var(--u)); }
.nav-products > button { width: 100%; }
.products-menu { display: none; position: absolute; left: 0; top: calc(50 * var(--u)); min-width: 100%; padding: calc(6 * var(--u)) 0; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.products-menu a { display: block; padding: calc(9 * var(--u)) calc(14 * var(--u)); font: 400 calc(18 * var(--u)) Arial, Helvetica, sans-serif; color: var(--ink); text-decoration: none; text-align: center; }
.products-menu a:hover { opacity: .7; }
.nav-products:hover .products-menu, .nav-products.open .products-menu { display: block; }
.search-button { padding: 0; border: 0; background: none; cursor: pointer; height: calc(25 * var(--u)); }
.search-button svg { width: 100%; height: 100%; fill: #070d3a; }
.nav-toggle { display: none; }

/* Footer: 79 units tall */
.site-footer { position: relative; height: calc(79 * var(--u)); }
.fd { position: relative; width: min(1280px, 100vw); height: 100%; margin: 0 auto; }
.fd .copy { position: absolute; left: calc(44 * var(--u)); top: calc(47 * var(--u)); font: 400 calc(12 * var(--u)) / 1.2 var(--lucida); white-space: nowrap; }
.fd nav a, .fd nav span { position: absolute; top: calc(46 * var(--u)); font: 400 calc(12 * var(--u)) / calc(16 * var(--u)) var(--futura); color: #000; text-decoration: none; white-space: nowrap; }

/* Home */
.home-slider { position: absolute; left: 50%; transform: translateX(-50%); width: min(100vw, 1325px); top: calc(620 * var(--u)); height: calc(350 * var(--u)); background: #61966a; overflow: hidden; }
.slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .6s ease; }
.slide.active { opacity: 1; pointer-events: auto; }
.slide > img { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: max(calc(1323 * var(--u)), 100vw); height: 100%; object-fit: cover; }
.slide-title { position: absolute; left: 50%; transform: translateX(-50%); top: calc(132 * var(--u)); width: calc(692 * var(--u)); text-align: center; font: 700 calc(34 * var(--u)) / 1.5 var(--poppins); letter-spacing: calc(1.7 * var(--u)); text-transform: uppercase; }
.order-button { position: absolute; left: 50%; transform: translateX(-50%); top: calc(250 * var(--u)); width: calc(142 * var(--u)); height: calc(40 * var(--u)); display: grid; place-items: center; background: #30362c; color: #fff; text-decoration: none; font: 800 calc(19 * var(--u)) var(--avenir); }
.slide-dots { position: absolute; z-index: 3; bottom: calc(18 * var(--u)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; }
.slide-dots button { appearance: none; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #fff; opacity: .95; cursor: pointer; }
.slide-dots button.active { width: 12px; height: 12px; }
.tiles { position: absolute; left: 50%; transform: translateX(-50%); width: calc(100vw + 42 * var(--u)); top: calc(1053 * var(--u)); height: calc(683 * var(--u)); display: flex; }
.tile { position: relative; flex: 1; display: block; overflow: hidden; }
.tile img { position: absolute; left: calc(2 * var(--u)); top: calc(2 * var(--u)); width: calc(100% - 4 * var(--u)); height: calc(100% - 6 * var(--u)); object-fit: cover; }

/* Terms of sale (About page) */
.terms .th { font-size: calc(18 * var(--u)); line-height: 1.2; text-transform: uppercase; margin-bottom: calc(24 * var(--u)); }
.terms .ti { font-size: calc(16 * var(--u)); line-height: 1.36; margin-bottom: calc(27 * var(--u)); width: calc(817 * var(--u)); }
.terms .cl { font-size: calc(16 * var(--u)); margin-top: calc(26 * var(--u)); line-height: 1.2; text-transform: uppercase; }
.terms .cl.first { margin-left: calc(29 * var(--u)); margin-top: 0; }
.terms .cp { font-size: calc(16 * var(--u)); margin: calc(4 * var(--u)) 0 0 calc(58 * var(--u)); width: calc(775 * var(--u)); line-height: 1.35; }

/* Catalog (Men / Women / Kids) */
.cat-top { position: relative; width: min(1280px, 100vw); margin: 0 auto; height: calc(var(--cth, 648) * var(--u)); }
.cat-title { position: absolute; left: calc(600 * var(--u)); top: calc(var(--tt, 14) * var(--u)); width: calc(80 * var(--u)); font-size: calc(37 * var(--u)); line-height: 1.2; text-align: center; }
.catalog-banner { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: max(calc(1323 * var(--u)), 100vw); height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.1s ease; }
.catalog-banner.active { opacity: 1; }
.catalog-dots { position: absolute; z-index: 2; bottom: calc(18 * var(--u)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; }
.catalog-dots i { width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.catalog-dots i.active { width: 12px; height: 12px; }
.product-grid { width: calc(var(--gw, 1159) * var(--u)); margin: 0 auto; padding-bottom: calc(var(--pb, 58) * var(--u)); display: grid; grid-template-columns: repeat(3, calc(var(--cw, 364) * var(--u))); justify-content: space-between; gap: calc(var(--rg, 36) * var(--u)) 0; position: relative; left: calc(var(--gl, 0.5) * var(--u)); }
.product-card { margin: 0; }
.product-card > a { display: block; color: inherit; text-decoration: none; }
.product-image { width: calc(var(--cw, 364) * var(--u)); height: calc(var(--ch, 485) * var(--u)); object-fit: cover; }
.product-card figcaption { margin-top: calc(var(--cm, 15) * var(--u)); min-height: calc(45 * var(--u)); text-align: center; font: 300 calc(16 * var(--u)) / calc(22.5 * var(--u)) var(--avenir); }
.product-card figcaption a { color: inherit; text-decoration: none; }

/* Product page */
.pp-zoom { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.pp-zoom img { width: 100%; height: 100%; object-fit: cover; }
.pp-lightbox { position: fixed; inset: 0; z-index: 100; background: #fff; display: flex; align-items: center; justify-content: center; }
.pp-lightbox[hidden] { display: none; }
.pp-lightbox img { max-width: 92vw; max-height: 94vh; object-fit: contain; }
.pp-close { position: absolute; top: 14px; right: 22px; border: 0; background: none; font-size: 40px; line-height: 1; cursor: pointer; }

/* Contact */
.contact-form label { display: block; font: 400 calc(14 * var(--u)) / calc(14 * var(--u)) var(--futura); color: #757575; }
.contact-form input, .contact-form textarea { display: block; width: 100%; margin-top: calc(2 * var(--u)); border: 0; border-bottom: 2px solid rgba(0, 0, 0, .28); border-radius: 0; background: transparent; padding: calc(3 * var(--u)) calc(3 * var(--u)) calc(3 * var(--u)) calc(12 * var(--u)); font: 400 calc(18 * var(--u)) / 1.4 var(--futura); color: #000; height: calc(var(--ih) * var(--u)); }
.contact-form textarea { padding-top: calc(13.5 * var(--u)); resize: none; }
.contact-form input:focus, .contact-form textarea:focus { outline: 0; border-bottom-color: #000; }
.contact-form button[type=submit] { display: block; width: 100%; height: 100%; border: 2px solid #000; background: #000; color: #fff; font: 700 calc(16 * var(--u)) var(--futura); cursor: pointer; }
.contact-form button[type=submit]:hover { background: #fff; color: #000; }
.hp { position: absolute; left: -9999px; }
#form-status { font-size: calc(14 * var(--u)); }
#form-status.ok { color: #14794a; }
#form-status.err { color: #b3261e; }
.ico { position: absolute; fill: rgba(7, 13, 58, .71); }
.contact-details a { text-decoration: none; }

.not-found { padding: 90px 20px 160px; text-align: center; }

.mbg { display: none; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
