:root{--navy:#053c59;--blue:#0088ce;--ink:#123e55;--muted:#648092;--pale:#f0f7fa;--font-body:"DM Sans",Arial,sans-serif;--font-heading:"Outfit","DM Sans",Arial,sans-serif;--font:var(--font-body)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}h1,h2,h3,.intro h1,.catalog-heading h2,.bottom-cta h2{font-family:var(--font-heading)}body{margin:0;font-family:var(--font-body);color:var(--ink);background:#fff}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button{border:0}img{display:block;max-width:100%}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #42bdf4;outline-offset:5px}.wrap{width:min(1440px,calc(100% - 96px));margin-inline:auto}.sr-only,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.skip:focus{position:fixed;z-index:20;background:white;padding:16px}.masthead{background:radial-gradient(ellipse at 80% 35%,#0879b0 0,transparent 55%),linear-gradient(120deg,#04374f,#075783);color:#fff;overflow:hidden}.header{height:112px;display:flex;align-items:center;justify-content:space-between;gap:36px}.logo{width:180px;height:auto;filter:brightness(0) invert(1)}.header nav{display:flex;align-items:center;gap:clamp(24px,3.4vw,60px)}.header nav a{position:relative;padding:0;font-size:clamp(12px,.9vw,17px);font-weight:400;color:rgba(255,255,255,.92);white-space:nowrap;opacity:1}.header nav a:hover,.header nav a[aria-current]{color:#fff}.header nav a:after{content:'';position:absolute;left:5%;right:5%;bottom:-13px;height:5px;border-radius:8px;background:#00a1f1;transform:scaleX(0);transition:transform 180ms ease}.header nav a:hover:after,.header nav a[aria-current]:after{transform:scaleX(1)}.header-cta{justify-self:end}.intro{display:grid;grid-template-columns:1.1fr 1fr;min-height:445px;position:relative}.intro-copy{padding:25px 0 55px;z-index:1}.breadcrumb{font-size:12px;color:#a6c9dc;margin:0 0 38px;display:flex;gap:15px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:2px;display:flex;align-items:center;gap:10px}.eyebrow i{width:6px;height:6px;border-radius:50%;background:#21baff}.intro h1{font-size:clamp(42px,4.7vw,70px);line-height:1.07;font-weight:300;letter-spacing:-3px;margin:20px 0}.intro h1 strong{font-weight:800}.intro h1 em{font-style:normal;color:#36c1ff}.intro-lead{font-size:16px;line-height:1.7;color:#c6e2ee}.explore{font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:25px;margin-top:14px}.explore span{border:1px solid #ffffff50;border-radius:50%;width:32px;height:32px;display:grid;place-items:center}.intro-art{position:relative;min-height:430px}.orbit{position:absolute;width:370px;height:370px;border:1px solid #ffffff1f;border-radius:50%;left:15%;top:10%}.orbit:after{content:'';position:absolute;inset:30px;border:1px solid #ffffff0e;border-radius:50%}.art-bottle{position:absolute;height:330px;object-fit:contain;width:190px;left:12%;top:74px;transform:rotate(-12deg);filter:drop-shadow(8px 20px 15px #00294035)}.art-can{position:absolute;width:280px;height:300px;object-fit:contain;left:40%;top:93px;transform:rotate(9deg);filter:drop-shadow(8px 16px 12px #00294026)}.art-label{position:absolute;right:0;top:26px;font-size:9px;letter-spacing:2px;color:#b8d9e7}.art-note{position:absolute;right:16px;bottom:38px;font-size:12px;line-height:1.7;color:#b9dbe9}.art-note b{font-weight:500;color:white}.ribbon{border-top:1px solid #ffffff15;background:#003b5b35}.ribbon .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:65px}.ribbon span{font-size:10px;letter-spacing:1.5px;color:#a1c6da}.ribbon p{font-size:13px;display:flex;gap:24px}.ribbon i{color:#43b4e1;font-style:normal}.catalog{padding-top:76px;padding-bottom:72px}.catalog-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:38px}.catalog-heading .eyebrow{color:var(--blue)}h2{font-size:36px;font-weight:300;letter-spacing:-1.4px;line-height:1.15;margin:12px 0}h2 strong{font-weight:750}.catalog-heading>p{font-size:14px;line-height:1.7;color:var(--muted);margin:0}.catalog-layout{display:grid;grid-template-columns:235px 1fr;gap:42px}.sidebar>h3{font-size:15px;display:flex;justify-content:space-between;align-items:center;margin:14px 0 20px}.sidebar>h3 span{font-size:11px;color:var(--muted);font-weight:400}.filters{display:flex;flex-direction:column;gap:5px}.filter{display:flex;justify-content:space-between;gap:10px;text-align:left;width:100%;background:transparent;color:var(--muted);font-size:12px;line-height:1.5;border-radius:12px;padding:14px 13px;transition:background .2s,color .2s}.filter[aria-pressed=true]{background:#e8f5fc;color:#0077b6;font-weight:700}.filter:hover{background:var(--pale)}.filter span{font-size:10px;opacity:.7}.help-card{background:var(--pale);padding:25px;border-radius:20px;margin-top:34px}.help-card>span{color:var(--blue);font-size:26px}.help-card h3{font-size:21px;letter-spacing:-.7px;line-height:1.2}.help-card p{font-size:12px;line-height:1.7;color:var(--muted)}.help-card a{font-size:12px;font-weight:700;color:#007fbd;display:block;margin-top:22px}.toolbar{display:flex;align-items:center;gap:18px}.search{background:#f2f7f9;display:flex;align-items:center;gap:12px;border-radius:12px;flex:1;padding:0 16px;height:49px}.search svg{width:19px;height:19px;flex:none;color:#688395}.search input{width:100%;border:0;background:transparent;min-width:0;font-size:13px;color:var(--ink);outline-offset:0}.search input::placeholder{color:#7c939f}.sort select{background:white;border:0;color:var(--ink);font-size:12px;max-width:100%;padding:12px 0}.result-meta{display:flex;align-items:center;justify-content:space-between;min-height:56px;font-size:12px;color:var(--muted)}.result-meta button{font-size:11px;color:#0079b5;background:transparent}.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 20px}.product-card{min-width:0}.product-visual{background:#f3f7f8;border-radius:22px;position:relative;overflow:hidden;aspect-ratio:1 / 1.06}.product-open{width:100%;height:100%;display:grid;place-items:center;background:transparent;padding:30px 25px;position:relative}.product-open img{width:100%;height:100%;max-height:220px;object-fit:contain;transition:transform .4s cubic-bezier(.2,.7,.3,1);filter:drop-shadow(0 8px 9px #07374e0b)}.product-open:hover img{transform:scale(1.07)}.product-arrow{position:absolute;bottom:15px;right:15px;display:grid;place-items:center;background:white;color:#0088ce;width:32px;height:32px;border-radius:50%;font-size:19px;transition:background .2s,color .2s}.product-open:hover .product-arrow{background:var(--blue);color:#fff}.product-index{position:absolute;top:16px;left:18px;font-size:10px;color:#8ea2ae;letter-spacing:1px}.product-info{padding:16px 3px 0}.product-info>p{font-size:9px;letter-spacing:1px;color:#0084bc;text-transform:uppercase;margin:0 0 7px}.product-info h3{font-size:16px;font-weight:600;letter-spacing:-.4px;margin:0}.product-info button{padding:0;text-align:left;background:transparent;color:inherit}.product-info .caption{color:var(--muted);font-size:12px;line-height:1.6;margin:8px 0 0}.empty{text-align:center;padding:70px 20px;background:var(--pale);border-radius:20px}.empty p{color:var(--muted);font-size:14px}.bottom-cta{border-radius:26px;background:#edf7fb;padding:40px 48px;display:flex;justify-content:space-between;align-items:center;gap:30px;margin-bottom:72px}.bottom-cta .eyebrow{color:#0088ce}.bottom-cta h2{font-size:32px}.bottom-cta p:not(.eyebrow){font-size:14px;color:var(--muted);line-height:1.6}.bottom-cta .button{flex-shrink:0}footer{background:linear-gradient(115deg,#04374f,#075f93);color:#bdd8e6}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:42px}.footer-inner p,.footer-inner>a:last-child{font-size:13px}.copyright{padding-block:20px;border-top:1px solid #ffffff15;font-size:11px}dialog{border:0;border-radius:26px;padding:0;max-width:820px;width:calc(100% - 40px);color:var(--ink);max-height:90vh;overflow:auto}dialog[open]{display:grid;grid-template-columns:1fr 1.1fr}dialog::backdrop{background:#03283bc9;backdrop-filter:blur(5px)}.dialog-close{position:absolute;top:12px;right:14px;width:36px;height:36px;border-radius:50%;background:white;color:var(--ink);font-size:25px;z-index:1}.dialog-image{background:var(--pale);display:grid;place-items:center;padding:45px}.dialog-image img{max-height:300px;object-fit:contain}.dialog-copy{padding:55px 35px 40px}.dialog-copy .eyebrow{color:var(--blue);font-size:10px;line-height:1.7}.dialog-copy h2{font-size:32px;font-weight:700}.dialog-copy>p:not(.eyebrow){font-size:14px;line-height:1.8;color:var(--muted)}.dialog-copy .detail-note{padding-top:15px}.dialog-copy .button{margin-top:12px;font-size:12px}[hidden]{display:none!important}@media(min-width:1600px){.intro{min-height:485px}.intro-art{transform:scale(1.08);transform-origin:center}.intro-copy{padding-top:35px}}@media(max-width:1100px){.wrap{width:calc(100% - 56px)}.header{gap:20px}.header nav{gap:22px}.header-cta{display:none}.intro h1{font-size:52px}.intro-art{transform:scale(.86);transform-origin:center}.catalog-layout{grid-template-columns:205px 1fr;gap:26px}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.catalog-heading h2{font-size:31px}}@media(max-width:700px){.wrap{width:calc(100% - 36px)}.header{gap:16px}.logo{width:145px}.intro{grid-template-columns:1fr;min-height:0}.intro-copy{padding:22px 0 0}.breadcrumb{margin-bottom:27px;font-size:11px}.intro h1{font-size:49px;letter-spacing:-2px}.intro-lead{font-size:14px}.intro-art{height:290px;min-height:0;transform:none;max-width:400px;width:100%;margin:auto}.orbit{width:245px;height:245px;top:12px;left:20%}.art-bottle{height:240px;width:135px;top:25px;left:15%}.art-can{height:210px;width:200px;top:49px;left:42%}.art-label,.art-note{display:none}.ribbon .wrap{display:block;padding-block:18px}.ribbon span{font-size:9px}.ribbon p{gap:12px;font-size:11px;margin-bottom:0;flex-wrap:wrap}.catalog{padding-top:42px;padding-bottom:35px}.catalog-heading{display:block;margin-bottom:22px}.catalog-heading>p{display:none}.catalog-heading h2{font-size:30px}.catalog-layout{display:block}.sidebar>h3,.help-card{display:none}.filters{flex-direction:row;overflow-x:auto;padding-bottom:12px;margin-bottom:15px}.filter{width:auto;white-space:nowrap;padding:11px 14px;background:#f4f8fa;font-size:11px;flex:none}.filter span{display:none}.toolbar{gap:12px;flex-wrap:wrap}.search{flex-basis:100%}.sort{margin-left:auto}.sort select{padding-block:3px}.result-meta{min-height:38px}.product-grid{gap:23px 12px}.product-visual{border-radius:17px;aspect-ratio:1 / 1.15}.product-open{padding:28px 18px}.product-open img{max-height:155px}.product-info h3{font-size:14px}.product-info .caption{font-size:11px}.product-info>p{font-size:8px;line-height:1.6}.bottom-cta{padding:28px;display:block;margin-bottom:35px}.bottom-cta h2{font-size:29px}.bottom-cta .button{margin-top:10px}.footer-inner{flex-direction:column;align-items:start;padding-block:32px;gap:15px}.footer-inner p{margin:0}.copyright{font-size:10px}dialog[open]{grid-template-columns:1fr}.dialog-image{padding:30px}.dialog-image img{max-height:190px}.dialog-copy{padding:25px}.dialog-copy h2{font-size:27px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}
/* Match the archive area to the homepage's #hakkimizda background. */
body { overflow-x: hidden; background: #f0f7fb; }
.bottom-cta { background: #fff; }

#arsiv {
  position: relative;
  isolation: isolate;
}
#arsiv::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 85% 12%, #d9eefa, transparent 46%), #f0f7fb;
}

/* Archive cards follow the homepage category-card appearance and motion. */
.catalog-layout {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.category-bar h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  font-size: 15px;
}
.category-bar h3 span { color: var(--muted); font-size: 11px; font-weight: 400; }
.category-bar .filters {
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 14px;
  padding: 6px 4px 14px;
  margin: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: #c4e4f3 transparent;
}
.category-bar .filter {
  position: relative;
  width: 166px;
  flex: 0 0 166px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  padding: 14px 12px 16px;
  border-radius: 22px;
  background: #f7f7f4;
  scroll-snap-align: start;
  white-space: normal;
  text-align: center;
}
.category-bar { min-width: 0; }
.category-bar__heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.category-bar__heading h3 { margin: 0; }
.category-controls { display: flex; gap: 8px; }
.category-controls button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: #0088ce; color: white; font-size: 20px; }
.category-controls button:disabled { opacity: .3; cursor: default; }
.category-bar .filter span { display: block; opacity: 1; }
.category-bar .filter__media { height: 100px; width: 100%; display: flex !important; align-items: center; justify-content: center; }
.filter__media img { height: 100%; width: 100%; object-fit: contain; transition: transform 300ms ease; }
.filter__media--collection img { width: 38%; margin-inline: -3%; }
.category-bar .filter__label { font-size: 12px; font-weight: 600; line-height: 1.4; min-height: 34px; }
.category-bar .filter__count { position: absolute; right: 12px; top: 10px; font-size: 10px; opacity: .65; }
.filter:hover .filter__media img { transform: scale(1.06); }
@media (max-width: 700px) {
  .category-bar .filter { width: 140px; flex-basis: 140px; }
  .category-bar .filter__media { height: 85px; }
}

/* Homepage footer */
.site-footer {
  --site-max: 1440px;
  --site-gutter: 56px;
  position: relative;
  background:
    radial-gradient(ellipse at 69% 97%, #0076bc 0%, transparent 46%),
    radial-gradient(ellipse at 77% 0%, #076bb2 0%, transparent 42%),
    radial-gradient(ellipse at 0% 2%, #054770 0%, transparent 47%),
    linear-gradient(120deg, #02334e 4%, #034875 68%, #005c9d);
  color: rgba(255, 255, 255, .82);
}
.site-footer .footer-notch { display: block; width: 100%; height: 110px; }
.site-footer .footer-notch path { fill: #f0f7fb; }
.site-footer .footer-inner {
  width: 100%; max-width: var(--site-max); margin: 0 auto;
  padding: 40px var(--site-gutter);
  display: flex;
  align-items: flex-start;
  gap: 80px;
}
.site-footer .footer-logo img { width: 150px; height: auto; filter: brightness(0) invert(1); }
.site-footer .footer-brand {
  position: relative;
  justify-self: start;
  width: max-content;
  max-width: 100%;
}
.site-footer .footer-brand::after {
  content: none;
}
.site-footer .footer-brand p { margin: 16px 0 0; max-width: 32ch; font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.62); }
.site-footer .footer-brand__cta { margin-top: 22px; }
.site-footer .footer-col { display: flex; flex-direction: column; flex: none; gap: 12px; min-width: 0; width: max-content; max-width: 22ch; padding-top: 0; }
.site-footer .footer-col:nth-child(2) { margin-left: auto; }
.site-footer .footer-col--products { max-width: 32ch; }
.site-footer .footer-col--contact { max-width: 28ch; }
.site-footer .footer-col strong { margin: 0 0 4px; font-size: 18px; font-weight: 700; letter-spacing: .06em; line-height: 1.3; text-transform: uppercase; color: #fff; }
.site-footer .footer-col a { color: rgba(255,255,255,.68); font-size: 18px; line-height: 1.5; overflow-wrap: break-word; }
.site-footer .footer-col a:hover { color: #fff; }
.site-footer .footer-col--contact a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.site-footer .footer-col--contact a::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.site-footer .footer-col--contact a[href^="mailto:"]::before { background-image: url("assets/icons/mail.png"); }
.site-footer .footer-col--contact a[href^="tel:"]::before { background-image: url("assets/icons/phone.png"); }
.site-footer .footer-col--contact a[href*="harita"]::before,
.site-footer .footer-col--contact a[href*="maps"]::before { background-image: url("assets/icons/pin.png"); }
.site-footer .footer-cards {
  width: 100%;
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 40px var(--site-gutter);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
  border-bottom: 1px solid rgb(255 255 255 / 5%);
}
.site-footer:has(.footer-cards) .footer-inner { padding-top: 40px; }
.site-footer .footer-card {
  display: flex;
  align-items: center;
  gap: 28px;
  min-width: 0;
  min-height: 120px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 16px;
  background: transparent;
  color: #fff;
  text-decoration: none;
}
.site-footer .footer-card:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .55);
  outline-offset: 3px;
}
.site-footer .footer-card__icon {
  flex: none;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 28px 28px;
}
.site-footer .footer-card[href^="mailto:"] .footer-card__icon { background-image: url("assets/icons/mail.png"); }
.site-footer .footer-card[href^="tel:"] .footer-card__icon { background-image: url("assets/icons/phone.png"); }
.site-footer .footer-card[href*="maps"] .footer-card__icon { background-image: url("assets/icons/pin.png"); }
.site-footer .footer-card__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.site-footer .footer-card__label {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.3;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.site-footer .footer-card__value {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  overflow-wrap: break-word;
}
.site-footer .footer-bar { border-top: 1px solid rgba(255,255,255,.08); font-size: 16px; color: rgba(255,255,255,.45); }
.site-footer .footer-bar__inner { width: 100%; max-width: var(--site-max); margin: 0 auto; padding: 32px var(--site-gutter); text-align: center; }
@media (max-width: 900px) {
  .site-footer { --site-gutter: 22px; }
  .site-footer .footer-cards { grid-template-columns: 1fr; padding: 32px var(--site-gutter); }
  .site-footer .footer-inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 32px var(--site-gutter);
    gap: 32px 24px;
    text-align: center;
    justify-items: stretch;
  }
  .site-footer:has(.footer-cards) .footer-inner { padding-top: 32px; }
  .site-footer .footer-brand {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    max-width: none;
    padding-right: 0;
  }
  .site-footer .footer-brand::after { display: none; }
  .site-footer .footer-brand p {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .site-footer .footer-col {
    width: 100%;
    max-width: none;
    min-width: 0;
    align-items: center;
    gap: 12px;
    margin-left: 0;
  }
  .site-footer .footer-col:last-child {
    grid-column: 1 / -1;
  }
  .site-footer .footer-col a {
    width: 100%;
    line-height: 1.4;
  }
  .site-footer .footer-col--contact {
    align-items: flex-start;
    text-align: left;
  }
  .site-footer .footer-col--contact strong {
    width: 100%;
    text-align: left;
  }
  .site-footer .footer-col--contact a {
    width: auto;
    max-width: 100%;
    text-align: left;
  }
  .site-footer .footer-bar__inner {
    padding: 24px var(--site-gutter);
    text-align: center;
  }
  .site-footer .footer-notch { height: 80px; }
}
.category-bar .filter[aria-pressed="true"] { background: #0088ce; color: #fff; }
.category-bar .filter:hover { background: #e5f2f9; color: #0078b5; }
.category-bar .filter[aria-pressed="true"]:hover { background: #0078b5; color: #fff; }
.results { min-width: 0; }
.product-grid {
  align-items: start;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 46px 26px;
  padding-top: 18px;
}
.archive-card {
  position: relative;
  min-width: 0;
  height: 330px;
}
.archive-card__button {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 30px;
  background: transparent;
  color: #1a1a1a;
  text-align: left;
}
.archive-card__surface {
  position: absolute;
  inset: 0;
  border-radius: 30px;
  background: #f7f7f4;
  box-shadow: none;
  transition: transform 550ms cubic-bezier(.22, 1, .36, 1), box-shadow 550ms ease;
}
.archive-card__media {
  position: absolute;
  inset: -20px 0 70px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 24px;
  pointer-events: none;
}
.archive-card__media img {
  width: auto;
  height: 220px;
  max-width: none;
  max-height: 220px;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(2, 51, 78, .09));
  transition: transform 700ms cubic-bezier(.22, 1, .36, 1), filter 700ms ease;
}
.archive-card__content {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 18px;
  transition: transform 650ms cubic-bezier(.22, 1, .36, 1);
}
.archive-card__name {
  display: block;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.02em;
}
.archive-card__description {
  display: block;
  font-size: 13px;
  line-height: 1.45;
  color: #6a6a6a;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: translateY(14px);
  transition: opacity 650ms ease, transform 650ms ease, max-height 650ms ease, margin 650ms ease;
}
.archive-card__arrow {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #07558a;
  color: white;
  opacity: 0;
  transition: opacity 600ms ease;
}
.archive-card__arrow svg { width: 18px; height: 18px; }
@media (hover: hover) {
  .archive-card:hover { z-index: 2; }
  .archive-card__button:hover .archive-card__surface,
  .archive-card__button:focus-visible .archive-card__surface {
    transform: scale(1.03);
    box-shadow: 0 14px 32px rgba(2, 51, 78, .085);
  }
  .archive-card__button:hover .archive-card__media img,
  .archive-card__button:focus-visible .archive-card__media img {
    transform: translateY(-55px) scale(1.05);
    filter: drop-shadow(0 14px 18px rgba(2, 51, 78, .12));
  }
  .archive-card__button:hover .archive-card__content,
  .archive-card__button:focus-visible .archive-card__content { transform: translateY(-18px); }
  .archive-card__button:hover .archive-card__description,
  .archive-card__button:focus-visible .archive-card__description {
    opacity: 1;
    max-height: 100px;
    margin-top: 8px;
    transform: none;
  }
  .archive-card__button:hover .archive-card__arrow,
  .archive-card__button:focus-visible .archive-card__arrow { opacity: 1; }
}
@media (hover: none) {
  .archive-card__arrow { opacity: 1; }
}
@media (max-width: 700px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .archive-card { height: 255px; }
  .archive-card__media { padding: 0 12px; bottom: 68px; }
  .archive-card__media img { height: 160px; max-height: 160px; max-width: 100%; }
  .archive-card__content { left: 15px; right: 15px; bottom: 18px; }
  .archive-card__name { font-size: 13px; line-height: 1.25; }
  .archive-card__arrow { width: 30px; height: 30px; top: 12px; right: 12px; }
}

@media (min-width: 701px) and (max-width: 1100px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.catalog-product {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 15px;
  border-radius: 28px;
  background: #fff;
  box-shadow: none;
  min-height: var(--catalog-card-height, 0px);
  transition: min-height 280ms cubic-bezier(.22, 1, .36, 1), transform 280ms cubic-bezier(.22, 1, .36, 1), box-shadow 280ms ease;
}
.product-grid.is-measuring .catalog-product { min-height: 0 !important; transition: none !important; }
@media (hover: hover) {
  .catalog-product:hover,
  .catalog-product:focus-within {
    min-height: calc(var(--catalog-card-height, 0px) + 72px);
    transform: translateY(-8px) scale(1.015);
    box-shadow: 0 14px 34px rgba(5, 60, 89, .12);
    z-index: 2;
  }
  .catalog-product__actions {
    position: absolute;
    right: 19px;
    bottom: 18px;
    left: 19px;
  }
  .catalog-product:hover .catalog-product__actions,
  .catalog-product:focus-within .catalog-product__actions { margin-top: 0; }
}
.catalog-product__image {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 18px;
  border: 0;
  border-radius: 21px;
  overflow: hidden;
  background: #f7f7f4;
  cursor: pointer;
}
.catalog-product__image img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  filter: drop-shadow(0 8px 7px #183b4c18);
  transition: transform 350ms cubic-bezier(.22, 1, .36, 1);
}
.catalog-product:hover .catalog-product__image img { transform: scale(1.06); }
.catalog-product__body { display: flex; flex-direction: column; flex: 1; padding: 18px 4px 3px; }
.catalog-product__body h3 {
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -.4px;
  font-weight: 700;
  margin: 0 0 10px;
  min-height: calc(1.25em * 2);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.catalog-product__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  padding: 5px 9px;
  border-radius: 20px;
  background: #eaf5fb;
  color: #0078b5;
  font-size: 10px;
  line-height: 1.3;
  pointer-events: none;
}
.catalog-product__body p { color: #71818a; font-size: 13px; line-height: 1.55; margin: 10px 0 20px; }
.catalog-product__body .catalog-product__spec { margin: 0 0 18px; color: #204b64; font-size: 12px; }
.catalog-product__spec span { display: block; font-size: 10px; color: #71818a; margin-bottom: 4px; }
#dialog-description { white-space: pre-line; }
.catalog-product__body > p:last-of-type { margin-bottom: 0; }
.catalog-product__actions { display: flex; flex-wrap: wrap; gap: 8px; max-height: 0; overflow: hidden; margin-top: 0; opacity: 0; pointer-events: none; transform: translateY(8px); transition: max-height 250ms ease, margin-top 250ms ease, opacity 200ms ease, transform 250ms ease; }
.catalog-product:hover .catalog-product__actions,
.catalog-product:focus-within .catalog-product__actions { max-height: 140px; margin-top: 18px; opacity: 1; pointer-events: auto; transform: none; overflow: visible; }
.catalog-product__actions .button,
.catalog-product__actions .catalog-product__detail { flex: 1 1 0; min-width: 0; }
/* Homepage-style category showcase; product cards below remain unchanged. */
.category-bar {
  --category-width: 270px;
  position: relative;
  width: calc(100vw - 20px);
  align-self: center;
}
.category-bar__heading { margin: 0; }
.category-bar__heading h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.category-bar .filters {
  position: relative;
  gap: 32px;
  padding: 48px max(48px, calc((100vw - 1440px) / 2));
  scroll-padding-inline: max(48px, calc((100vw - 1440px) / 2));
  scrollbar-width: none;
}
.category-bar .filters::-webkit-scrollbar { display: none; }
.category-bar .filter {
  flex: 0 0 var(--category-width);
  width: var(--category-width);
  height: 330px;
  padding: 0;
  border: 0;
  border-radius: 30px;
  text-align: left;
  scroll-snap-align: center;
  transform: perspective(900px) rotateY(var(--category-tilt, 0deg)) scale(var(--category-scale, .92));
  box-shadow: none;
}
.category-bar .filter,
.category-bar .filter:hover,
.category-bar .filter[aria-pressed="true"],
.category-bar .filter[aria-pressed="true"]:hover { background: #f7f7f4; color: #1a1a1a; }
.category-bar .filter[aria-pressed="true"] { border-bottom: 3px solid #0088ce; box-shadow: none; }
.category-bar .filter:hover { box-shadow: 0 14px 32px rgba(2, 51, 78, .085); }
.category-bar .filter__media { position: absolute; inset: 15px 20px 65px; width: auto; height: auto; }
.category-bar .filter__media img { height: 100%; width: auto; max-width: none; filter: drop-shadow(0 10px 14px rgba(2, 51, 78, .09)); }
.category-bar .filter__label { position: absolute; left: 22px; right: 22px; bottom: 18px; font-size: 16px; font-weight: 500; line-height: 1.2; min-height: 0; letter-spacing: -.02em; }
.category-bar .filter .filter__count { display: none; }
.category-controls { position: absolute; inset: 0 max(24px, calc((100% - 1400px) / 2)); align-items: center; justify-content: space-between; pointer-events: none; z-index: 2; }
.category-controls button { width: 48px; height: 48px; background: #07558a; pointer-events: auto; }
@media (max-width: 700px) {
  .category-bar { --category-width: 220px; }
  .category-bar .filter { height: 285px; }
  .category-bar .filter__label { font-size: 14px; }
  .category-controls { inset-inline: 12px; }
  .category-controls button { width: 38px; height: 38px; }
}
@media (hover: none), (pointer: coarse) {
  .catalog-product__actions { max-height: none; margin-top: 18px; overflow: visible; opacity: 1; pointer-events: auto; transform: none; }
}
@media (max-width: 700px) {
  .catalog-product { padding: 9px; border-radius: 22px; }
  .catalog-product__image { padding: 10px; border-radius: 16px; }
  .catalog-product__body { padding: 14px 3px 4px; }
  .catalog-product__body h3 { font-size: 14px; }
  .catalog-product__body p { font-size: 11px; }
  .catalog-product__tag { font-size: 9px; }
  .catalog-product__actions { flex-direction: column; }
}

/* Hero products trade places in two load-triggered animation runs. */
.intro-art {
  --product-swap-x: 210px;
  --product-swap-x-back: -210px;
  --product-swap-y: 19px;
  --product-swap-y-back: -19px;
}
.intro-art.is-load-animated .art-bottle,
.intro-art.is-load-animated .art-can {
  transform-origin: center;
  backface-visibility: hidden;
  will-change: transform;
  animation-duration: 1.5s;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}
.intro-art.is-load-animated .art-bottle {
  animation-name: intro-bottle-swap;
}
.intro-art.is-load-animated .art-can {
  animation-name: intro-can-swap;
}

@keyframes intro-bottle-swap {
  0%, 100% {
    z-index: 2;
    transform: translate3d(0, 0, 0) rotate(-12deg) scale(1);
    animation-timing-function: cubic-bezier(.2, .85, .25, 1);
  }
  40%, 60% {
    z-index: 1;
    transform: translate3d(var(--product-swap-x), var(--product-swap-y), 0) rotate(8deg) scale(.66);
    animation-timing-function: cubic-bezier(.2, .85, .25, 1);
  }
}

@keyframes intro-can-swap {
  0%, 100% {
    z-index: 1;
    transform: translate3d(0, 0, 0) rotate(9deg) scale(1);
    animation-timing-function: cubic-bezier(.2, .85, .25, 1);
  }
  40%, 60% {
    z-index: 2;
    transform: translate3d(var(--product-swap-x-back), var(--product-swap-y-back), 0) rotate(-10deg) scale(1.38);
    animation-timing-function: cubic-bezier(.2, .85, .25, 1);
  }
}

@media (max-width: 700px) {
  .intro-art {
    --product-swap-x: 140px;
    --product-swap-x-back: -140px;
    --product-swap-y: 22px;
    --product-swap-y-back: -22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-art.is-load-animated .art-bottle,
  .intro-art.is-load-animated .art-can {
    animation: none !important;
  }
  .intro-motto-caret { display: none; }
}


/* Mobile hamburger — matches homepage hero-blue nav */
.masthead { position: relative; }
.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex-shrink: 0;
}
.menu-toggle {
  display: none;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.menu-toggle:active {
  transform: scale(0.97);
}
.menu-toggle__icon {
  display: block;
  width: 24px;
  height: 24px;
  margin: 0 auto;
  pointer-events: none;
}
.menu-toggle__icon path {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 300ms cubic-bezier(0.5, 0.85, 0.25, 1.1);
}
.menu-toggle__icon path:nth-child(1) {
  transform: translateY(-7px);
}
.menu-toggle__icon path:nth-child(2) {
  transition-timing-function: cubic-bezier(0.5, 0.85, 0.25, 1.8);
}
.menu-toggle__icon path:nth-child(3) {
  transform: translateY(7px);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__icon path:nth-child(1) {
  transform: translateY(0) rotate(315deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__icon path:nth-child(2) {
  transform: rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__icon path:nth-child(3) {
  transform: translateY(0) rotate(135deg);
}
@media (prefers-reduced-motion: reduce) {
  .menu-toggle__icon path {
    transition-duration: 0.01ms;
  }
}
@media (max-width: 900px) {
  .header {
    height: 94px;
    gap: 16px;
  }
  .header nav,
  .header .nav {
    display: none;
    position: absolute;
    top: 94px;
    left: 0;
    right: 0;
    z-index: 30;
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
    padding: 24px 6%;
    background: #03466a;
    border-radius: 0 0 20px 20px;
  }
  .header nav.is-open,
  .header .nav.is-open {
    display: flex;
  }
  .header nav a,
  .header .nav a {
    font-size: 16px;
  }
  .header nav a:after,
  .header .nav a:after {
    bottom: -6px;
    height: 4px;
  }
  .menu-toggle {
    display: block;
  }
  .header-cta {
    display: none;
  }
}

/* Center intro copy on stacked (mobile) layout */
.intro-copy .intro-motto {
  display: block;
  max-width: 100%;
  margin: 0 0 8px;
  padding: 0;
  font-family: var(--font-body);
  font-size: clamp(10px, .91vw, 15px);
  font-weight: 600;
  line-height: 1.55;
  text-transform: uppercase;
  color: #9fff79;
  text-shadow: 0 0 16px color-mix(in srgb, #9fff79 28%, transparent);
  white-space: normal;
  position: relative;
}
.intro-copy .intro-motto i {
  display: none;
}
.intro-motto-sizer {
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}
.intro-motto-live {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  max-width: 100%;
}
.intro-motto-caret {
  display: inline-block;
  width: 1px;
  height: .92em;
  margin-left: 1px;
  background: currentColor;
  vertical-align: -.12em;
  letter-spacing: 0;
  pointer-events: none;
  opacity: 0;
}
.intro-motto.is-typing .intro-motto-caret {
  animation: intro-motto-caret 600ms ease-in-out infinite;
}
@keyframes intro-motto-caret {
  0%, 45% { opacity: 1; }
  55%, 100% { opacity: 0; }
}

@media (max-width: 1100px) {
  .intro-copy {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }
  .breadcrumb,
  .eyebrow,
  .intro h1,
  .intro-lead {
    margin: 0;
  }
  .breadcrumb {
    justify-content: center;
  }
  .eyebrow {
    justify-content: center;
  }
  .intro-copy .intro-motto {
    font-size: 11px;
    text-align: center;
  }
  .intro-lead {
    max-width: 34ch;
  }
  .explore {
    display: none;
  }
}

/* Center bottom CTA on mobile */
@media (max-width: 700px) {
  .bottom-cta {
    text-align: center;
  }
  .bottom-cta .eyebrow {
    justify-content: center;
  }
  .bottom-cta .button {
    margin-inline: auto;
  }
}

.masthead,
.header {
  overflow: visible;
}
.header {
  position: relative;
  z-index: 40;
}
.nav-drop {
  position: relative;
  z-index: 80;
  display: flex;
  align-items: center;
}
.nav-drop__trigger {
  display: inline-flex;
  align-items: center;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}
.nav-drop__trigger:hover {
  transform: translateY(-3px);
}
.nav-drop__caret {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-left: 7px;
  background: currentColor;
  opacity: .9;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.nav-drop::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 14px;
}
.nav-drop__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 100%;
  width: max-content;
  padding: 12px 16px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 36px rgba(1, 24, 44, .35);
  overflow: visible;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 80;
}
.nav-drop:hover .nav-drop__menu,
.nav-drop:focus-within .nav-drop__menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.nav-drop__menu a,
.header nav .nav-drop__menu a,
.header .nav .nav-drop__menu a,
.detail-header nav .nav-drop__menu a,
.nav .nav-drop__menu a {
  display: block;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #022b43;
  white-space: nowrap;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1), color .28s ease;
}
.nav-drop__menu a:hover,
.nav-drop__menu a[aria-current],
.header nav .nav-drop__menu a:hover,
.header nav .nav-drop__menu a[aria-current],
.header .nav .nav-drop__menu a:hover,
.header .nav .nav-drop__menu a[aria-current] {
  background: transparent;
  color: #022b43;
  transform: translateY(-3px);
}
.header nav .nav-drop__trigger:after,
.header .nav .nav-drop__trigger:after,
.header nav .nav-drop__menu a:after,
.header .nav .nav-drop__menu a:after,
.detail-header nav .nav-drop__trigger::after,
.detail-header nav .nav-drop__menu a::after,
.nav .nav-drop__trigger::after,
.nav .nav-drop__menu a::after {
  content: none !important;
  display: none !important;
}
@media (max-width: 900px) {
  .nav-drop {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    z-index: auto;
  }
  .nav-drop::after { display: none; }
  .nav-drop__menu {
    position: static;
    width: 100%;
    min-width: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .nav-drop__menu a,
  .header nav .nav-drop__menu a,
  .header .nav .nav-drop__menu a,
  .nav-drop__menu a:hover,
  .nav-drop__menu a[aria-current],
  .header nav .nav-drop__menu a:hover,
  .header nav .nav-drop__menu a[aria-current],
  .header .nav .nav-drop__menu a:hover,
  .header .nav .nav-drop__menu a[aria-current] {
    width: auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: inherit;
  }
}