/* ============================================================
   Zynx Labs — storefront styles
   Ported from the approved design. Palette:
   #121838 navy · #3ca2d4 cyan · #b6c2d4 light · #8fd0ef accent · #f6f8fc bg
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* Mobile safety net: the design positions decorative circles off the right edge
   with negative offsets, and a phone should never scroll sideways because of
   them. `clip` (not `hidden`) prevents horizontal scroll WITHOUT breaking the
   sticky header the way overflow:hidden would. */
html { overflow-x: clip; }
body { overflow-x: clip; max-width: 100%; }

/* The design sets display inline on almost everything, which outranks the UA
   sheet's [hidden] { display: none } and leaves "hidden" elements visible —
   carousel slides stack, tab panels all show at once. This wins it back. */
[hidden] { display: none !important; }

body {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  color: #121838;
  background: #f6f8fc;
  -webkit-font-smoothing: antialiased;
}

::selection { background: #8fd0ef; color: #121838; }

h1, h2, h3, h4, h5, h6, p, span, a, button, label, li { text-wrap: balance; }

img { max-width: 100%; }

/* ---- Texture utilities from the design ---- */
.zx-stripe {
  background-image: repeating-linear-gradient(135deg, rgba(18,24,56,.05) 0 8px, rgba(18,24,56,.02) 8px 16px);
}
.zx-hex {
  background-image: radial-gradient(rgba(255,255,255,.5) 1.4px, transparent 1.4px);
  background-size: 20px 20px;
}
.zx-hex-d {
  background-image: radial-gradient(rgba(18,24,56,.06) 1.4px, transparent 1.4px);
  background-size: 20px 20px;
}

.zx-lift { transition: transform .22s ease, box-shadow .22s ease; }
.zx-lift:hover { transform: translateY(-6px); box-shadow: 0 26px 44px -26px rgba(18,24,56,.45); }

.zx-link { transition: color .15s ease; }
.zx-link:hover { color: #3ca2d4 !important; }

.zx-scroll::-webkit-scrollbar { height: 8px; }
.zx-scroll::-webkit-scrollbar-thumb { background: #b6c2d4; border-radius: 8px; }

/* ---- Animations ---- */
@keyframes zx-slide { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.zx-slidein { animation: zx-slide .5s cubic-bezier(.22,.61,.36,1) both; }

@keyframes zx-pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.zx-pop { animation: zx-pop .4s ease both; }

@keyframes zx-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.zx-fade { animation: zx-fade .3s ease both; }

@keyframes zx-spin { to { transform: rotate(360deg); } }
.zx-spin { animation: zx-spin .8s linear infinite; }

/* ---- Layout primitives ---- */
.zx-wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.zx-section { max-width: 1280px; margin: 0 auto; padding: 72px 32px 0; }

.zx-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.zx-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.zx-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

/* ---- Forms ---- */
.zx-input {
  width: 100%; height: 50px;
  border: 1px solid rgba(18,24,56,.14);
  border-radius: 12px; padding: 0 16px;
  font-size: 15px; font-family: inherit; color: #121838;
  outline: none; background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.zx-input:focus { border-color: #3ca2d4; box-shadow: 0 0 0 3px rgba(60,162,212,.15); }
.zx-input::placeholder { color: #98a6bd; }
.zx-input[aria-invalid="true"] { border-color: #d1495b; }

textarea.zx-input { height: auto; min-height: 130px; padding: 14px 16px; line-height: 1.6; resize: vertical; }
select.zx-input { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23121838' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px;
}

.zx-label { display: block; font-weight: 600; font-size: 14px; margin: 0 0 7px; color: #121838; }
.zx-error-text { color: #d1495b; font-size: 13px; font-weight: 500; margin: 6px 0 0; }

/* ---- Buttons ---- */
.zx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 54px; padding: 0 30px; border-radius: 999px; border: none;
  background: #121838; color: #fff;
  font-family: inherit; font-weight: 700; font-size: 16px;
  cursor: pointer; text-decoration: none;
  transition: transform .15s ease, opacity .15s ease, background .15s ease;
}
.zx-btn:hover { background: #1c264f; }
.zx-btn:active { transform: scale(.985); }
.zx-btn:disabled { opacity: .55; cursor: not-allowed; }
.zx-btn-cyan { background: #3ca2d4; box-shadow: 0 18px 34px -16px rgba(60,162,212,.9); }
.zx-btn-cyan:hover { background: #2b8fc0; }
.zx-btn-ghost { background: #fff; border: 1px solid rgba(18,24,56,.14); color: #121838; font-weight: 600; }
.zx-btn-ghost:hover { background: #f6f8fc; }
.zx-btn-block { width: 100%; }

/* ---- Flash messages ---- */
.zx-flash {
  display: flex; align-items: flex-start; gap: 12px;
  border-radius: 14px; padding: 15px 20px; margin: 0 0 16px;
  font-size: 14px; line-height: 1.55; font-weight: 500;
}
.zx-flash-success { background: #e7f6ee; border: 1px solid #b7e0c9; color: #0f5132; }
.zx-flash-error   { background: #fdecee; border: 1px solid #f5c2c7; color: #842029; }
.zx-flash-info    { background: #e7f2fb; border: 1px solid #bcdcf2; color: #124a6b; }
.zx-flash-warning { background: #fff5e1; border: 1px solid #f5dfad; color: #7a5200; }

/* ---- Toast (add-to-cart confirmation) ---- */
.zx-toast {
  position: fixed; right: 24px; bottom: 24px; z-index: 200;
  display: flex; align-items: center; gap: 12px;
  background: #121838; color: #fff;
  padding: 15px 22px; border-radius: 14px;
  font-size: 14px; font-weight: 600;
  box-shadow: 0 24px 50px -20px rgba(10,14,34,.8);
  animation: zx-fade .25s ease both;
}

/* ---- Homepage hero ----
   A fixed height, not `min-height`.

   The design used min-height:500px and let the content decide, which meant a
   longer headline made its slide 60px taller than its neighbours — the whole
   page jumped every 5.5s as the carousel rotated. Fixing it also gives every
   banner one exact size to be designed against (Media::HERO_HEIGHT).

   1216 × 684 is 16:9 at the design's full width. The smaller steps keep the
   composed slides readable; image-only banners are cropped from the centre by
   object-fit: cover. */
.zx-hero { height: 684px; }

@media (max-width: 1280px) {
  /* Below the design width the hero narrows, so hold the 16:9 shape.
     min-height stops it collapsing under the text on mid-size screens. */
  .zx-hero { height: auto; aspect-ratio: 16 / 9; min-height: 560px; }
}

/* From here down the text needs more room than 16:9 would give, so the height
   is set outright. Each rule clears min-height too: it is inherited from the
   1280 rule above and would otherwise quietly win over the value declared here.
   560px is the measured floor — the composed slides fit inside it on a 390px
   phone with nothing clipped. Do not lower it without re-measuring. */
@media (max-width: 1080px) {
  .zx-hero { aspect-ratio: auto; height: 600px; min-height: 0; }
}
@media (max-width: 900px) {
  .zx-hero { aspect-ratio: auto; height: 560px; min-height: 0; }
}

/* ---- Category card with a product cutout ----
   The cutout occupies a 46% column pinned to the right of the card; the text
   keeps the rest.

   Why 46% + 48% and no per-breakpoint fiddling: `width` on the column resolves
   against the card, while `padding-right` on the text resolves against the
   card's *content box* (card minus its 32px padding). Those are different
   references, so a matched pair of percentages only lines up at one card width
   and collides at every other. Anchoring the column at right:0 makes the
   required text padding work out to ~45% at any card width, so 48% clears it
   everywhere with room to spare. Only the type size needs breakpoints. */
.zx-cat-text { padding-right: 48%; }

@media (max-width: 1080px) {
  .zx-cat-name { font-size: 24px !important; }
}
@media (max-width: 900px) {
  .zx-cat-name { font-size: 22px !important; }
}
@media (max-width: 680px) {
  .zx-cat-name { font-size: 25px !important; }
}

/* ---- Product image placeholder (until a real photo is uploaded) ---- */
.zx-shot {
  display: grid; place-items: center;
  background: #f1f4f9; border-radius: 16px;
  text-align: center; overflow: hidden;
}
.zx-shot img { width: 100%; height: 100%; object-fit: cover; }
.zx-shot-name { font-weight: 700; font-size: 18px; color: #121838; }
.zx-shot-hint { font-family: ui-monospace, monospace; font-size: 10px; color: #7c8aa0; margin-top: 6px; }

/* ============================================================
   Responsive
   The design was drawn at 1280px. Everything below keeps that
   layout untouched on desktop and collapses it sensibly on
   smaller screens.
   ============================================================ */

@media (max-width: 1080px) {
  .zx-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .zx-hero-inner { grid-template-columns: 1fr !important; }
  .zx-hero-art { display: none !important; }
  .zx-checkout-grid { grid-template-columns: 1fr !important; }
  .zx-cart-grid { grid-template-columns: 1fr !important; }
  .zx-product-grid { grid-template-columns: 1fr !important; }
  .zx-sticky { position: static !important; }
}

@media (max-width: 900px) {
  .zx-wrap, .zx-section { padding-left: 20px; padding-right: 20px; }
  .zx-section { padding-top: 48px; }
  .zx-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .zx-nav-links { display: none !important; }
  .zx-header-grid { grid-template-columns: auto 1fr !important; }
  .zx-shop-grid { grid-template-columns: 220px 1fr !important; }
  .zx-newsletter { grid-template-columns: 1fr !important; }
  .zx-newsletter-form { min-width: 0 !important; }
  .zx-account-grid { grid-template-columns: 1fr !important; }
  .zx-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
  .zx-h1 { font-size: 36px !important; }
  .zx-h2 { font-size: 30px !important; }
  .zx-hero-title { font-size: 40px !important; }
  .zx-hero-inner { padding: 40px 28px 20px !important; }
  .zx-pad-lg { padding: 32px 24px !important; }
}

@media (max-width: 680px) {
  .zx-grid-2, .zx-grid-3, .zx-grid-4 { grid-template-columns: 1fr; }
  .zx-shop-grid { grid-template-columns: 1fr !important; }
  .zx-shop-sidebar { position: static !important; }
  .zx-form-2 { grid-template-columns: 1fr !important; }
  .zx-footer-grid { grid-template-columns: 1fr !important; }
  .zx-hide-sm { display: none !important; }
  .zx-stack-sm { flex-direction: column !important; align-items: stretch !important; }
  .zx-stack-sm > * { width: 100%; }
  .zx-h1 { font-size: 30px !important; }
  .zx-hero-title { font-size: 32px !important; }
  .zx-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .zx-table-scroll > table { min-width: 640px; }
  .zx-cart-row { grid-template-columns: 72px 1fr !important; row-gap: 14px !important; }
  .zx-toast { left: 16px; right: 16px; bottom: 16px; }
}

/* ---- Motion preferences ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .zx-lift:hover { transform: none; }
}

/* ---- Print (order receipts) ---- */
@media print {
  header, footer, .zx-no-print { display: none !important; }
  body { background: #fff; }
}