/*
  The gallery (المعرض, decision 0026): a store shaped like the ones buyers in
  Iraq already know (the owner's reference, 2026-10-31), dressed as Dawzan:
  a search in the bar and the collections under it, a slider of what is on
  offer, a picture for each collection, rows of pieces, every card ready to
  buy. White and warm paper, deep ink, soft depth; the store's own colour
  (--brand) is the one accent. Loaded only when the merchant chose the
  gallery and scoped to it, so the classic store is untouched.
*/
body[data-layout='gallery'] {
  --g-paper: #f7f6f3;
  --g-paper-2: #f0eeea;
  --g-ink: #14161a;
  --g-ink-2: #4b5058;
  --g-ink-3: #6f747c;
  --g-line: #e6e3dd;
  --g-shade: 0 28px 60px -32px rgb(20 22 26 / 38%);
  --g-shade-soft: 0 10px 30px -18px rgb(20 22 26 / 28%);
  --g-radius: 22px;
  --g-radius-small: 14px;
  --g-gutter: clamp(16px, 3.5vw, 40px);
  --g-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --g-wide: 1320px;
  --g-star: #e8a317;
  background: var(--g-paper);
  color: var(--g-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body[data-layout='gallery'] ::selection {
  background: color-mix(in srgb, var(--brand) 22%, #fff);
}
body[data-layout='gallery'] main.g-main {
  max-width: none;
  padding: 0 0 96px;
}

/* ------------------------------------------------------------------ the bar */
body[data-layout='gallery'] .bar {
  flex-wrap: wrap;
  gap: 12px 20px;
  padding: 14px var(--g-gutter);
  border-bottom: 0;
  background: color-mix(in srgb, #fff 92%, transparent);
  transition: box-shadow 0.3s var(--g-ease);
}
body[data-layout='gallery'][data-scrolled] .bar {
  box-shadow: 0 8px 24px -18px rgb(20 22 26 / 45%);
}
body[data-layout='gallery'] .brand {
  font-size: 20px;
}
body[data-layout='gallery'] .logo {
  width: 40px;
  height: 40px;
}
body[data-layout='gallery'] .cart-button,
body[data-layout='gallery'] .account-link {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--g-paper);
  color: var(--g-ink);
  transition: background-color 0.25s;
}
body[data-layout='gallery'] .cart-button:hover,
body[data-layout='gallery'] .account-link:hover {
  background: var(--g-paper-2);
}
.g-bar-search {
  display: flex;
  flex: 1 1 420px;
  order: 0;
  max-width: 640px;
  margin-inline: auto;
  overflow: hidden;
  border: 1.5px solid var(--g-line);
  border-radius: 999px;
  background: var(--g-paper);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.g-bar-search:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent);
}
.g-bar-search label {
  flex: 1;
}
.g-bar-search input {
  width: 100%;
  height: 46px;
  padding: 0 20px;
  border: 0;
  background: transparent;
  color: var(--g-ink);
  font: inherit;
  outline: none;
}
.g-bar-search button {
  display: grid;
  place-items: center;
  width: 56px;
  margin: 4px;
  border: 0;
  border-radius: 999px;
  background: var(--brand);
  color: var(--on-fill);
}
@media (max-width: 759px) {
  .g-bar-search {
    flex-basis: 100%;
    order: 3;
  }
}

/* The collections, under the bar. */
.g-subbar {
  position: relative;
  border-block: 1px solid var(--g-line);
  background: #fff;
}
.g-subbar-track {
  display: flex;
  gap: 4px;
  max-width: var(--g-wide);
  margin: 0 auto;
  padding: 0 var(--g-gutter);
  overflow-x: auto;
  scrollbar-width: none;
}
.g-subbar a {
  position: relative;
  flex-shrink: 0;
  padding: 14px 14px;
  color: var(--g-ink-2);
  font-size: 15px;
  white-space: nowrap;
  transition: color 0.2s;
}
.g-subbar a:hover,
.g-subbar a[aria-current='page'] {
  color: var(--g-ink);
}
.g-subbar a[aria-current='page']::after {
  position: absolute;
  inset-inline: 14px;
  inset-block-end: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--brand);
  content: '';
}

/* Buttons: one shape across the gallery. */
.g-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 30px;
  border: 1px solid var(--brand);
  border-radius: 999px;
  background: var(--brand);
  color: var(--on-fill);
  font-weight: 700;
  transition: transform 0.35s var(--g-ease), box-shadow 0.35s var(--g-ease);
}
.g-button:hover {
  box-shadow: var(--g-shade-soft);
  transform: translateY(-2px);
}
.g-button.is-quiet {
  border-color: currentColor;
  background: transparent;
  color: inherit;
}
.g-button.is-wide {
  width: 100%;
}
.g-button:disabled {
  border-color: var(--g-line);
  background: var(--g-line);
  color: var(--g-ink-3);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}
body[data-layout='gallery'] :is(a, button, select, input):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

/* --------------------------------------------------------------- the slider */
.g-slider {
  position: relative;
  max-width: var(--g-wide);
  margin: 20px auto 0;
  padding: 0 var(--g-gutter);
}
.g-slides {
  display: grid;
  grid-auto-columns: 100%;
  grid-auto-flow: column;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  border-radius: 28px;
  box-shadow: var(--g-shade);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  list-style: none;
}
.g-slides::-webkit-scrollbar {
  display: none;
}
.g-slide {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  min-height: clamp(340px, 40vw, 520px);
  padding: clamp(28px, 5vw, 64px);
  overflow: hidden;
  background:
    radial-gradient(80% 120% at 15% 50%, color-mix(in srgb, var(--brand) 22%, #fff) 0%, transparent 60%),
    linear-gradient(135deg, #fff 0%, color-mix(in srgb, var(--brand) 9%, #fff) 100%);
  scroll-snap-align: center;
  isolation: isolate;
}
/* Every second slide is set at night: the slider never reads as one long banner. */
.g-slide:nth-child(even) {
  background:
    radial-gradient(70% 110% at 18% 50%, color-mix(in srgb, var(--brand) 55%, #000) 0%, transparent 65%),
    linear-gradient(135deg, #15171b 0%, #20232a 100%);
  color: #fff;
}
.g-slide:nth-child(even) .g-slide-price s {
  color: rgb(255 255 255 / 60%);
}
.g-slide:nth-child(even) .g-kicker {
  border-color: rgb(255 255 255 / 30%);
  background: rgb(255 255 255 / 10%);
  color: #fff;
}
.g-slide-text {
  position: relative;
  z-index: 1;
  max-width: 540px;
}
.g-kicker {
  display: inline-flex;
  margin: 0 0 16px;
  padding: 6px 14px;
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 10%, #fff);
  color: var(--brand-deep);
  font-size: 14px;
  font-weight: 700;
}
.g-slide h1,
.g-slide h2 {
  margin: 0;
  font-size: clamp(30px, 4.6vw, 64px);
  font-weight: 700;
  line-height: 1.12;
  text-wrap: balance;
}
.g-slide-price {
  margin: 14px 0 26px;
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 700;
}
.g-slide-price s {
  margin-inline-start: 10px;
  color: var(--g-ink-3);
  font-size: 0.65em;
  font-weight: 400;
}
.g-lead {
  max-width: 520px;
  margin: 14px 0 26px;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.8;
  opacity: 0.88;
}
.g-slide-picture {
  justify-self: center;
  width: min(100%, 420px);
  aspect-ratio: 1;
  overflow: hidden;
  border: 8px solid #fff;
  border-radius: 32px;
  background: #fff;
  box-shadow: 0 40px 80px -36px rgb(0 0 0 / 55%);
  transform: rotate(-3deg);
  transition: transform 0.8s var(--g-ease);
}
.g-slide:nth-child(even) .g-slide-picture {
  transform: rotate(3deg);
}
.g-slide-picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.g-slide.is-cover {
  grid-template-columns: minmax(0, 1fr);
  color: #fff;
}
.g-slide-cover {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.g-slide.is-cover::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: '';
  background: linear-gradient(270deg, rgb(10 11 13 / 78%) 0%, rgb(10 11 13 / 35%) 55%, rgb(10 11 13 / 10%) 100%);
}
.g-slide.is-cover .g-kicker {
  border-color: rgb(255 255 255 / 35%);
  background: rgb(255 255 255 / 12%);
  color: #fff;
  backdrop-filter: blur(8px);
}
.g-slider.is-plain .g-slide {
  grid-template-columns: minmax(0, 1fr);
  border-radius: 28px;
}
.g-slider-controls {
  position: absolute;
  inset-inline: calc(var(--g-gutter) + 20px);
  inset-block-end: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
.g-slider-controls > * {
  pointer-events: auto;
}
.g-slider-step {
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 90%);
  box-shadow: var(--g-shade-soft);
  color: var(--g-ink);
  font-size: 22px;
  backdrop-filter: blur(8px);
}
.g-dots {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgb(255 255 255 / 75%);
  backdrop-filter: blur(8px);
}
.g-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgb(20 22 26 / 25%);
  transition: width 0.4s var(--g-ease), background-color 0.3s;
}
.g-dots button[aria-current='true'] {
  position: relative;
  width: 32px;
  overflow: hidden;
  background: color-mix(in srgb, var(--brand) 30%, transparent);
}
/* While the slider turns on its own, the current dot fills until the next slide. */
.g-dots button[aria-current='true']::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--brand);
  content: '';
}
.g-slider.is-playing .g-dots button[aria-current='true']::after {
  transform-origin: right;
  animation: g-fill 6s linear forwards;
}
@keyframes g-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@media (max-width: 759px) {
  .g-slide {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 18px;
    min-height: 520px;
    padding: 28px 24px 84px;
  }
  .g-slide-picture {
    order: -1;
    width: min(78%, 280px);
  }
  .g-slider-step {
    display: none;
  }
  .g-slider-controls {
    justify-content: center;
  }
}

/* ------------------------------------------------------ pictured collections */
.g-cats {
  display: flex;
  gap: clamp(14px, 2.4vw, 28px);
  max-width: var(--g-wide);
  margin: 0 auto;
  padding: 36px var(--g-gutter) 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.g-cats a {
  display: grid;
  flex-shrink: 0;
  justify-items: center;
  gap: 10px;
  width: clamp(88px, 10vw, 120px);
  color: var(--g-ink-2);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}
.g-cat-picture {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--g-paper-2);
  box-shadow: 0 0 0 1.5px var(--g-line), var(--g-shade-soft);
  color: var(--brand-deep);
  font-size: 32px;
  transition: box-shadow 0.3s var(--g-ease), transform 0.4s var(--g-ease);
}
.g-cat-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.g-cats a:hover .g-cat-picture {
  box-shadow: 0 0 0 2.5px var(--brand), var(--g-shade);
  transform: translateY(-3px);
}

/* The store's promises, in one quiet bar. */
.g-promises {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  max-width: calc(var(--g-wide) - 2 * var(--g-gutter));
  margin: 28px auto 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius);
  background: #fff;
  list-style: none;
}
@media (max-width: 1319px) {
  .g-promises {
    margin-inline: var(--g-gutter);
  }
}
.g-promises li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 14px;
  align-items: center;
  padding: 18px 22px;
  border-inline-start: 1px solid var(--g-line);
}
.g-promises svg {
  grid-row: span 2;
  width: 42px;
  height: 42px;
  padding: 9px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--brand) 10%, #fff);
  fill: none;
  stroke: var(--brand-deep);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.g-promises li:first-child {
  border-inline-start: 0;
}
.g-promises strong {
  font-size: 15px;
}
.g-promises span {
  color: var(--g-ink-3);
  font-size: 13px;
}

/* -------------------------------------------------------------------- rows */
.g-row,
.g-collection {
  max-width: var(--g-wide);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) var(--g-gutter) 0;
}
.g-row-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  margin-bottom: 20px;
}
.g-row-head h2 {
  margin: 0;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.2;
}
.g-row-count {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--g-paper-2);
  color: var(--g-ink-3);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.g-more {
  color: var(--brand-deep);
  font-size: 15px;
  font-weight: 700;
}
.g-rail-arrows {
  display: flex;
  gap: 8px;
  margin-inline-start: auto;
}
.g-rail-arrows button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--g-line);
  border-radius: 50%;
  background: #fff;
  color: var(--g-ink);
  font-size: 20px;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}
.g-rail-arrows button:hover {
  border-color: var(--g-ink);
  background: var(--g-ink);
  color: #fff;
}
.g-row-text {
  max-width: 760px;
  margin: 0;
  color: var(--g-ink-2);
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.9;
}
.g-rail {
  display: grid;
  grid-auto-columns: clamp(200px, 22vw, 260px);
  grid-auto-flow: column;
  gap: 16px;
  margin: 0 calc(var(--g-gutter) * -1);
  padding: 6px var(--g-gutter) 24px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--g-gutter);
  scrollbar-width: none;
  list-style: none;
}
.g-rail::-webkit-scrollbar {
  display: none;
}
.g-rail > li {
  scroll-snap-align: start;
}

/* ----------------------------------------------------------- every piece */
.g-finder {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-inline-start: auto;
}
.g-sort select {
  min-width: 160px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--g-line);
  border-radius: 999px;
  background: #fff;
  color: var(--g-ink);
  font: inherit;
}
.g-clear {
  color: var(--g-ink-2);
  text-decoration: underline;
}
.g-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
  overflow-x: auto;
  scrollbar-width: none;
}
.g-tab {
  flex-shrink: 0;
  padding: 9px 18px;
  border: 1px solid var(--g-line);
  border-radius: 999px;
  background: #fff;
  color: var(--g-ink-2);
  font-size: 15px;
  white-space: nowrap;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}
.g-tab:hover {
  border-color: var(--g-ink);
}
.g-tab[aria-current='page'] {
  border-color: var(--g-ink);
  background: var(--g-ink);
  color: #fff;
}
.g-found {
  margin: 0 0 16px;
  color: var(--g-ink-3);
}
.g-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 760px) {
  .g-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
}
@media (min-width: 1100px) {
  .g-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.g-grid > li[hidden] {
  display: none;
}
.g-empty {
  padding: 48px 0;
  color: var(--g-ink-3);
  text-align: center;
}

/* ------------------------------------------------------------------- a card */
.g-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 10px 10px 12px;
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius);
  background: #fff;
  transition: box-shadow 0.4s var(--g-ease), transform 0.4s var(--g-ease), border-color 0.3s;
}
.g-card-media {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--g-radius-small);
  background: var(--g-paper-2);
}
.g-card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--g-ease), opacity 0.5s var(--g-ease);
}
.g-card-alt {
  opacity: 0;
}
/* A picture fades in once it arrives, over the paper it waits on (set by gallery.js). */
.g-images-on .g-card-media img:not(.g-card-alt):not(.is-loaded),
.g-images-on .g-slide-picture img:not(.is-loaded),
.g-images-on .g-cat-picture img:not(.is-loaded) {
  opacity: 0;
}
.g-heart {
  position: absolute;
  inset-block-start: 18px;
  inset-inline-end: 18px;
  z-index: 2;
  margin: 0;
}
.g-heart button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 88%);
  box-shadow: var(--g-shade-soft);
  color: var(--g-ink);
  backdrop-filter: blur(8px);
  transition: transform 0.3s var(--g-ease), color 0.2s;
}
.g-heart button:hover {
  color: var(--brand-deep);
  transform: scale(1.08);
}
.g-placeholder {
  display: grid;
  place-items: center;
  height: 100%;
  color: color-mix(in srgb, var(--brand) 55%, var(--g-paper));
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 700;
}
.g-placeholder.is-big {
  aspect-ratio: 4 / 5;
  border-radius: var(--g-radius);
  background: var(--g-paper-2);
  font-size: 160px;
}
.g-tag {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--g-ink);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.g-tag.is-offer {
  background: var(--brand);
  color: var(--on-fill);
}
.g-card-text {
  flex: 1;
  padding: 0 4px;
}
.g-card-text h3 {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.g-price {
  margin: 6px 0 0;
  color: var(--brand-deep);
  font-size: 17px;
  font-weight: 700;
}
.g-price small {
  color: var(--g-ink-3);
  font-size: 13px;
  font-weight: 400;
}
.g-price s {
  margin-inline-start: 6px;
  color: var(--g-ink-3);
  font-size: 13px;
  font-weight: 400;
}
.g-card-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--on-fill);
  font-size: 14px;
  font-weight: 700;
  transition: background-color 0.25s, transform 0.25s var(--g-ease);
}
.g-card-action:active {
  transform: scale(0.97);
}
.g-card-action.is-quiet {
  border: 1.5px solid var(--g-ink);
  background: transparent;
  color: var(--g-ink);
}
.g-card-action.is-off {
  background: var(--g-paper-2);
  color: var(--g-ink-3);
}
.g-card-action.is-done {
  background: var(--g-ink);
  color: #fff;
}
@media (hover: hover) and (pointer: fine) {
  .g-card:hover {
    border-color: transparent;
    box-shadow: var(--g-shade);
    transform: translateY(-4px);
  }
  .g-card:hover .g-card-media img {
    transform: scale(1.05);
  }
  .g-card:hover .g-card-alt {
    opacity: 1;
  }
  .g-card-action.is-quiet:hover {
    background: var(--g-ink);
    color: #fff;
  }
}

/* The strip above the bar: how the store sells, one line at a time. */
.g-announce {
  background: var(--g-ink);
  color: #fff;
  font-size: 13.5px;
  text-align: center;
}
.g-announce p {
  margin: 0;
  padding: 9px var(--g-gutter);
}
.g-announce span {
  display: inline-block;
  animation: g-announce-in 0.6s var(--g-ease);
}
.g-announce span[hidden] {
  display: none;
}
@keyframes g-announce-in {
  from { opacity: 0; transform: translateY(6px); }
}
/* The cart's count gives a small jump when a card adds to it. */
.cart-count.is-bumped {
  animation: g-bump 0.6s var(--g-ease);
}
@keyframes g-bump {
  30% { transform: scale(1.45); }
}

/* What a card just did: a note at the foot of the screen with the way to the cart. */
.g-toast {
  position: fixed;
  inset-inline: 0;
  inset-block-end: calc(84px + env(safe-area-inset-bottom));
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 14px;
  width: max-content;
  max-width: calc(100vw - 32px);
  margin: 0 auto;
  padding: 10px 10px 10px 18px;
  border-radius: 999px;
  background: var(--g-ink);
  color: #fff;
  box-shadow: var(--g-shade);
  font-size: 14px;
  animation: g-toast-in 0.45s var(--g-ease);
}
.g-toast[hidden] {
  display: none;
}
.g-toast button {
  min-height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--g-ink);
  font-weight: 700;
}
@keyframes g-toast-in {
  from { opacity: 0; transform: translateY(16px); }
}
@media (min-width: 760px) {
  .g-toast {
    inset-block-end: 28px;
  }
}

/* A phone's tab bar: home, every piece, the cart, the account. */
.g-tabbar {
  position: fixed;
  inset-inline: 10px;
  inset-block-end: max(10px, env(safe-area-inset-bottom));
  z-index: 7;
  display: none;
  justify-content: space-around;
  padding: 6px;
  border: 1px solid var(--g-line);
  border-radius: 22px;
  background: color-mix(in srgb, #fff 90%, transparent);
  box-shadow: var(--g-shade-soft);
  backdrop-filter: blur(14px);
}
.g-tabbar a,
.g-tabbar button {
  display: grid;
  flex: 1;
  justify-items: center;
  gap: 2px;
  padding: 6px 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: var(--g-ink-3);
  font-size: 12px;
  font-weight: 700;
}
.g-tabbar [aria-current='page'] {
  background: color-mix(in srgb, var(--brand) 10%, #fff);
  color: var(--brand-deep);
}
@media (max-width: 759px) {
  .g-tabbar {
    display: flex;
  }
  body[data-layout='gallery'] main.g-main {
    padding-bottom: 120px;
  }
}

/* ------------------------------------------------------ the product page */
.showcase {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  max-width: var(--g-wide);
  margin: 0 auto;
  padding: clamp(20px, 4vw, 48px) var(--g-gutter) 0;
}
@media (min-width: 960px) {
  .showcase {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: start;
  }
  .s-details {
    position: sticky;
    inset-block-start: 96px;
  }
}
.s-stage {
  position: relative;
  display: grid;
  gap: 14px;
}
/* The thumbnails' column only when there are thumbnails: one picture takes the whole stage. */
@media (min-width: 960px) {
  .s-stage:has(.s-thumbs) {
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: start;
  }
  .s-stage:has(.s-thumbs) .s-slides {
    grid-column: 2;
    grid-row: 1;
  }
  .s-thumbs {
    grid-column: 1;
    grid-row: 1;
    flex-direction: column;
  }
}
.s-slides {
  display: grid;
  grid-auto-columns: 100%;
  grid-auto-flow: column;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  border-radius: var(--g-radius);
  background: var(--g-paper-2);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  list-style: none;
}
.s-slides::-webkit-scrollbar {
  display: none;
}
.s-slide {
  scroll-snap-align: center;
}
.s-zoom {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.s-zoom img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--g-ease);
  transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%);
}
@media (hover: hover) and (pointer: fine) {
  .s-zoom:hover img {
    transform: scale(1.9);
  }
}
.s-thumbs {
  display: flex;
  gap: 10px;
  overflow: auto;
  scrollbar-width: none;
}
.s-thumb {
  flex-shrink: 0;
  width: 72px;
  height: 88px;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--g-radius-small);
  background: var(--g-paper-2);
  opacity: 0.6;
  transition: opacity 0.3s, border-color 0.3s;
}
.s-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.s-thumb[aria-current='true'],
.s-thumb:hover {
  border-color: var(--g-ink);
  opacity: 1;
}
.s-count {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-end: 14px;
  margin: 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgb(255 255 255 / 85%);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.s-trail {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--g-ink-3);
  font-size: 14px;
}
.s-trail a:hover {
  color: var(--g-ink);
}
.s-details h1 {
  margin: 12px 0 0;
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 700;
  line-height: 1.2;
}
.s-price {
  margin: 16px 0 0;
  color: var(--brand-deep);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
}
.s-price s {
  margin-inline-start: 8px;
  color: var(--g-ink-3);
  font-size: 0.6em;
  font-weight: 400;
}
.s-offer {
  margin: 8px 0 0;
  color: var(--brand-deep);
  font-weight: 700;
}
.s-deals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.s-deals li {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--brand-frost);
  color: var(--brand-deep);
  font-size: 13px;
}
.s-option {
  margin: 24px 0 0;
  padding: 0;
  border: 0;
}
.s-option legend {
  margin-bottom: 10px;
  color: var(--g-ink-2);
  font-size: 14px;
}
.s-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body[data-layout='gallery'] .s-choices .chip {
  min-height: 46px;
  padding: 6px 20px;
  border-color: var(--g-line);
  border-radius: 999px;
  background: #fff;
  transition: border-color 0.25s, background-color 0.25s, color 0.25s;
}
body[data-layout='gallery'] .s-choices .chip:hover:not(:disabled) {
  border-color: var(--g-ink);
}
body[data-layout='gallery'] .s-choices .chip[aria-pressed='true'] {
  border-color: var(--g-ink);
  background: var(--g-ink);
  color: var(--g-paper);
}
.s-stock {
  min-height: 1.6em;
  margin: 16px 0 0;
  color: var(--g-ink-2);
  font-size: 14px;
}
.s-buy {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
body[data-layout='gallery'] .trust li {
  background: #fff;
}
.s-folds {
  margin-top: 28px;
  border-top: 1px solid var(--g-line);
}
.s-folds details {
  border-bottom: 1px solid var(--g-line);
}
.s-folds summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}
.s-folds summary::-webkit-details-marker {
  display: none;
}
.s-folds summary::after {
  content: '+';
  font-size: 22px;
  font-weight: 400;
  transition: transform 0.3s var(--g-ease);
}
.s-folds details[open] summary::after {
  transform: rotate(45deg);
}
.s-fold-body {
  padding-bottom: 18px;
  color: var(--g-ink-2);
  line-height: 1.9;
}
.s-fold-body p {
  margin: 0 0 10px;
}
.s-specs {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 24px;
  margin: 0 0 18px;
}
.s-specs dt {
  color: var(--g-ink-3);
}
.s-specs dd {
  margin: 0;
}

/* On a phone, the price and the way in stay at the foot once the button scrolls away. */
.s-dock {
  position: fixed;
  inset-inline: 12px;
  inset-block-end: max(12px, env(safe-area-inset-bottom));
  z-index: 6;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--g-ink) 94%, transparent);
  backdrop-filter: blur(12px);
  color: #fff;
  box-shadow: var(--g-shade);
  transform: translateY(140%);
  transition: transform 0.45s var(--g-ease);
}
.s-dock-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.s-dock-price {
  font-weight: 700;
}
.s-dock .g-button {
  min-height: 44px;
  padding: 0 18px;
}
@media (max-width: 959px) {
  .s-dock {
    display: flex;
  }
  body[data-dock-shown] .s-dock {
    transform: none;
  }
}

/* The lightbox: one picture at a time, the whole screen. */
.s-lightbox[open] {
  display: grid;
  place-items: center;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
}
.s-lightbox img {
  max-width: min(92vw, 1100px);
  max-height: 88dvh;
  border-radius: var(--g-radius-small);
  object-fit: contain;
}
.s-lightbox-step {
  position: absolute;
  inset-block-start: 50%;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 90%);
  color: var(--g-ink);
  font-size: 26px;
  transform: translateY(-50%);
}
.s-lightbox-step.is-prev {
  inset-inline-start: 20px;
}
.s-lightbox-step.is-next {
  inset-inline-end: 20px;
}

/* The lightbox's close and the gallery's foot. */
.g-look-close {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-end: 14px;
  z-index: 2;
}
.g-look-close button {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 90%);
  color: var(--g-ink);
  font-size: 18px;
}
.s-lightbox::backdrop {
  background: rgb(15 16 18 / 72%);
  backdrop-filter: blur(6px);
}
.s-lightbox {
  padding: 0;
  border: 0;
  background: transparent;
}
body[data-layout='gallery'] .reviews {
  max-width: var(--g-wide);
  margin: 0 auto;
  padding: 72px var(--g-gutter) 0;
}
body[data-layout='gallery'] .reviews li {
  border: 1px solid var(--g-line);
  background: #fff;
}
.g-foot {
  margin-top: 40px;
  padding: 56px var(--g-gutter) 28px;
  background: var(--g-ink);
  color: rgb(255 255 255 / 78%);
}
.g-foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 32px;
  max-width: calc(var(--g-wide) - 2 * var(--g-gutter));
  margin: 0 auto;
}
.g-foot .brand {
  color: #fff;
}
.g-foot-brand p {
  max-width: 340px;
  margin: 14px 0 18px;
  line-height: 1.8;
}
.g-foot-whatsapp {
  display: inline-flex;
  padding: 10px 18px;
  border: 1px solid rgb(255 255 255 / 30%);
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
}
.g-foot nav,
.g-foot section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.g-foot h2 {
  margin: 0 0 6px;
  color: #fff;
  font-size: 16px;
}
.g-foot nav a:hover {
  color: #fff;
}
.g-pays {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.g-pays li {
  padding: 6px 12px;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 10px;
  font-size: 13px;
}
.g-foot-end {
  max-width: calc(var(--g-wide) - 2 * var(--g-gutter));
  margin: 40px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgb(255 255 255 / 14%);
  font-size: 13px;
}
@media (max-width: 899px) {
  .g-foot-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .g-foot-brand {
    grid-column: 1 / -1;
  }
}

/* The product's rating beside its price, and a card's stars below its name. */
.g-rating {
  margin: 8px 0 0;
  color: var(--g-ink-2);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.g-stars {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 0;
  color: var(--g-ink-3);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.g-stars-fill::before {
  content: '★★★★★';
  background: linear-gradient(to left, var(--g-star) calc(var(--stars) * 20%), var(--g-line) 0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 1px;
}
.g-stars small {
  font-size: 12px;
}

/* About the store: what it sells, its kind and whom it sells to, in its own words. */
.g-about {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  max-width: calc(var(--g-wide) - 2 * var(--g-gutter));
  margin: clamp(48px, 7vw, 88px) auto 0;
  padding: clamp(28px, 5vw, 56px);
  overflow: hidden;
  border: 1px solid var(--g-line);
  border-radius: calc(var(--g-radius) + 6px);
  background:
    radial-gradient(55% 90% at 0% 100%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 70%),
    radial-gradient(40% 70% at 100% 0%, color-mix(in srgb, var(--brand) 8%, transparent), transparent 70%),
    linear-gradient(160deg, #fff 0%, var(--g-paper-2) 100%);
  box-shadow: var(--g-shade-soft);
}
@media (max-width: 1319px) {
  .g-about {
    margin-inline: var(--g-gutter);
  }
}
@media (max-width: 759px) {
  .g-about {
    grid-template-columns: minmax(0, 1fr);
  }
}
.g-about-text {
  min-width: 0;
}
.g-eyebrow {
  margin: 0 0 10px;
  color: var(--brand-deep);
  font-size: 13px;
  font-weight: 700;
}
.g-about h2 {
  margin: 0;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.15;
}
.g-about-lead {
  max-width: 560px;
  margin: 14px 0 0;
  color: var(--g-ink-2);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.85;
}
.g-about-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.g-about-tags li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--g-line);
  font-size: 14px;
  font-weight: 700;
}
.g-about-tags svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--brand-deep);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.g-about-figures {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: clamp(8px, 1.2vw, 12px);
  margin: 0;
}
.g-about-figures div {
  display: flex;
  flex-direction: column-reverse;
  gap: 6px;
  padding: clamp(14px, 1.6vw, 18px);
  border-radius: var(--g-radius-small);
  background: rgb(255 255 255 / 78%);
  box-shadow: 0 0 0 1px var(--g-line);
  backdrop-filter: blur(6px);
}
.g-about-figures dd {
  margin: 0;
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.g-about-figures dd small {
  color: var(--g-ink-3);
  font-size: 0.5em;
}
.g-about-figures dt {
  color: var(--g-ink-3);
  font-size: 13px;
}
.g-foot-brand .g-foot-kind {
  margin: 12px 0 -6px;
  color: color-mix(in srgb, var(--brand) 35%, #fff);
  font-weight: 700;
}

/* What arrives as the page scrolls, set by gallery.js; plain without it. */
.g-reveal-on [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--g-ease), transform 0.8s var(--g-ease);
  transition-delay: var(--reveal-delay, 0s);
}
.g-reveal-on [data-reveal].is-seen {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  body[data-layout='gallery'] *,
  body[data-layout='gallery'] *::before,
  body[data-layout='gallery'] *::after {
    animation: none !important;
    transition: none !important;
  }
}