/* ============================================================
   Product page
   The flavour's own colour arrives as --flavour, set by product.js
   from the pack, so the page dresses itself per product.
   ============================================================ */

.pdp { margin-block-start: 102px; }

.pdp__top { background: var(--cream); padding-block: clamp(28px, 4vw, 56px); }

.pdp__grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
  gap: clamp(22px, 3.4vw, 56px);
  align-items: start;
}

/* minmax(0, 1fr), not 1fr: a bare fr keeps an automatic minimum of
   its own content, so the column sized itself to the thumbnail strip
   and the page went sideways on a 320px phone. The two-column rule
   above already guards against this; the one-column rule did not. */
@media (max-width: 760px) { .pdp__grid { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------ gallery --- */

/* The square stage takes its height from its width, so the way to keep
   it inside a short screen is to cap the WIDTH by the screen height.
   Capping the height afterwards left the box with two answers and the
   picture resolved its own height against the wrong one. */
.gal { width: 100%; max-width: 470px; }
@media (max-width: 760px) { .gal { max-width: 420px; margin-inline: auto; } }

.gal__stage {
  /* No aspect-ratio, no height of its own, and nothing clipping it.
     The frame is whatever the picture inside needs plus its padding,
     so there is no box for the picture to be too big for and no
     overflow rule that could cut it. Three attempts at squaring this
     box each moved the crop somewhere else; a box that is not told a
     height cannot disagree with its contents about one. */
  display: block;
  /* a share of the frame, not a pixel count. clamp(22px, 3vw, 46px)
     measured against the viewport, so the same rule left 9% of air on
     a desktop and 6.5% on a phone, and the cup came within a hair of
     the border on the small screen where it matters most. */
  padding: 11%;
  border-radius: var(--r-lg);
  border: 3px solid var(--ink);
  background: var(--white);
}

/* The only limit is in viewport units, which are absolute: no
   percentage has to resolve against a parent height, which is where
   every engine disagreed. */
.gal__stage img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 56vh;
  object-fit: contain;
}

/* A square stage takes its height from its width, and on a phone held
   sideways that is taller than the screen: the picture ran under the
   fold and the cup looked cut off. A ceiling in screen heights holds
   at every size rather than at one breakpoint, and does nothing on a
   tall screen where 58vh is larger than the stage anyway. */
@media (max-height: 560px) {
  .gal__thumbs { margin-block-start: 14px; }
}

/* the strip scrolls sideways, and a scroll box clips top and
   bottom too, without this padding the selected thumb's lift
   pushes its coloured border out of view */
/* min-width: 0 or the strip will not go under its own content:
   five 58px thumbs and four 10px gaps come to 330, so on a 320px
   phone the scroll box refused to shrink and pushed the page sideways
   instead of scrolling, which is the one thing it exists to do. */
.gal__thumbs { display: flex; min-width: 0; gap: 10px; margin-block-start: 25px; padding-block: 5px 6px; overflow-x: auto; scrollbar-width: none; }
.gal__thumbs::-webkit-scrollbar { display: none; }

.gal__thumb {
  display: block;
  flex: none;
  width: 68px;
  aspect-ratio: 1;
  padding: 13px;
  border-radius: var(--r);
  border: 3px solid var(--ink);
  background: var(--white);
  transition: transform .15s cubic-bezier(.34,1.6,.5,1);
}

/* the gallery column narrows before the layout stacks, so the
   thumbs shrink with it and all five stay in view */
@media (max-width: 900px) { .gal__thumb { width: 58px; padding: 11px; } }

.gal__thumb img { width: 100%; height: 100%; object-fit: contain; }

/* Which product, as three squares rather than three words. Names of
   different lengths in a pill switch read as a paragraph; a row of
   pictures reads at a glance, and the pack is what a customer
   recognises anyway. The one being read wears its own colour and
   lifts, the same way the gallery marks the shot in view. */
/* the flavour's name above its own table, so a box of two is read as
   two packs rather than one long column */
.numpack__h {
  margin-block: 28px 10px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}

html[lang="ar"] .numpack__h { letter-spacing: 0; text-transform: none; font-size: 16px; }

.numpack__h:first-child { margin-block-start: 0; }

.picks { display: flex; flex-wrap: wrap; gap: 10px; }

.pick {
  display: block;
  flex: none;
  width: 68px;
  aspect-ratio: 1;
  padding: 10px;
  border-radius: var(--r);
  border: 3px solid var(--ink);
  background: var(--white);
  transition: transform .15s cubic-bezier(.34,1.6,.5,1), border-color .15s;
}

.pick img { width: 100%; height: 100%; object-fit: contain; }

.pick:hover { transform: translateY(-2px); }

.pick[aria-pressed="true"] {
  border-color: var(--pick, var(--ink));
  transform: translateY(-3px);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pick, var(--ink)) 22%, transparent);
}

@media (max-width: 900px) { .pick { width: 58px; padding: 8px; } }
.gal__thumb:hover { transform: translateY(-3px); }
.gal__thumb[aria-pressed="true"] { border-color: var(--flavour, var(--red)); transform: translateY(-3px); }

/* ---------------------------------------------------- buy --- */

.buy__title {
  color: var(--flavour, var(--red));
  font-size: clamp(30px, 3.4vw, 50px);
}

/* A product that is two flavours gets a name in both, split down the
   middle with a hard stop rather than a blend: a gradient reads as a
   effect, two colours meeting reads as two things in one box.

   The colour is painted through the text, so the fallback matters:
   if a browser will not clip a background to its glyphs it keeps the
   colour set above and the name is simply red. */
.is-pair .buy__title {
  background: linear-gradient(90deg,
              var(--flavour-a, var(--red)) 0 50%,
              var(--flavour-b, var(--blue)) 50% 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* right to left, the first flavour should still be the first read */
html[dir="rtl"] .is-pair .buy__title {
  background: linear-gradient(270deg,
              var(--flavour-a, var(--red)) 0 50%,
              var(--flavour-b, var(--blue)) 50% 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.buy__blurb { margin-block-start: 18px; max-width: 46ch; font-size: 17px; }

/* On a phone the buy panel is the whole screen, and three lines of
   prose between the name and the price push the price under the
   fold. The same words are still in the page further down. */
@media (max-width: 760px) { .buy__blurb { display: none; } }

.buy__unit { margin-block-start: 24px; }

.switch--sm button { padding: 9px 16px; font-size: 12.5px; }

.buy__hint {
  margin-block-start: 12px;
  max-width: 46ch;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--mute);
}

.buy__hint[hidden] { display: none; }

/* the button that leaves the site says so with an arrow that points
   out of it, not along it */

.buy__lab {
  display: block;
  margin-block-end: 10px;
  font-size: 11.5px; font-weight: 900;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--mute);
}

html[lang="ar"] .buy__lab { letter-spacing: 0; text-transform: none; font-size: 13.5px; }

/* the unit chooser, the store decides what these are called */
.switch {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  border-radius: var(--pill);
  border: 3px solid var(--ink);
  background: var(--white);
}

.switch button,
.switch a {
  padding: 12px 22px;
  border-radius: var(--pill);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  transition: background-color .15s, color .15s;
}

.switch button:hover { background: rgba(20,20,20,.08); }
.switch button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.switch button[aria-pressed="true"]:hover { background: var(--ink); }

@media (max-width: 420px) {
  .switch { border-radius: var(--r); width: 100%; }
  .switch button { flex: 1 1 auto; }
}

.buy__row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-block-start: 20px; }

.buy__price { display: flex; align-items: baseline; gap: 10px; }

.buy__now {
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 900;
  font-variation-settings: "wdth" var(--display-wdth), "wght" 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* The count beside the price, not under it: the doubt it answers is
   "is that for one?", and an answer a line below is read after the
   doubt has already formed. */
.buy__per {
  font-size: 15px;
  font-weight: 900;
  color: var(--ink);
  background: var(--cream, rgba(20,20,20,.08));
  border-radius: var(--pill);
  padding: 5px 12px;
  white-space: nowrap;
}

.buy__was { font-size: 16px; font-weight: 700; color: var(--mute); }
.buy__was[hidden] { display: none; }

/* two ways out of this page: fill the basket, or leave with it.
   The gold one is still the loud one. */
.buy__cta { display: grid; grid-template-columns: 1.6fr 1fr; gap: 10px; margin-block-start: 20px; }
.buy__cta .btn { width: 100%; justify-content: center; }
.buy__go[hidden] { display: none; }
@media (max-width: 420px) { .buy__cta { grid-template-columns: 1fr; } }

.buy__add { width: 100%; justify-content: center; }
.buy__add:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.buy__note { margin-block-start: 12px; font-size: 13px; line-height: 1.55; color: var(--mute); }

.buy__gone {
  margin-block-start: 16px;
  padding: 12px 18px;
  border-radius: var(--r);
  border: 3px solid var(--red);
  color: var(--red);
  font-size: 14px;
  font-weight: 800;
}

.buy__gone[hidden] { display: none; }

/* -------------------------------------------------- facts --- */

.facts { background: var(--ink); color: var(--paper); }

.facts__in { display: grid; grid-template-columns: repeat(4, 1fr); }

@media (max-width: 640px) { .facts__in { grid-template-columns: repeat(2, 1fr); } }

.fact { padding: clamp(20px, 2.6vw, 34px) 8px; }
.fact + .fact { border-inline-start: 2px solid rgba(255,253,247,.2); padding-inline-start: 18px; }

@media (max-width: 640px) {
  .fact:nth-child(3) { border-inline-start: 0; padding-inline-start: 8px; }
  .fact:nth-child(n+3) { border-block-start: 2px solid rgba(255,253,247,.2); }
}

.fact b {
  display: block;
  font-size: clamp(28px, 3.6vw, 48px);
  font-weight: 900;
  font-variation-settings: "wdth" var(--display-wdth), "wght" 900;
  line-height: 1;
  color: var(--gold);
}

.fact span {
  display: block;
  margin-block-start: 8px;
  font-size: 11px; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
}

html[lang="ar"] .fact span { letter-spacing: 0; text-transform: none; font-size: 13.5px; }

/* --------------------------------------------------- make --- */

.make__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 3.6vw, 56px);
  align-items: center;
}

@media (max-width: 760px) { .make__in { grid-template-columns: 1fr; } }

.make__steps { margin: clamp(22px, 3vw, 34px) 0 0; padding: 0; list-style: none; display: grid; gap: 16px; }

.make__steps li { display: flex; gap: 14px; align-items: baseline; font-size: 16.5px; }

.make__steps b {
  flex: none;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .1em;
  color: var(--flavour, var(--red));
}

.make__note { margin-block-start: 20px; max-width: 48ch; font-size: 14.5px; color: var(--mute); }

/* the frame keeps its size; the picture inside steps back from the
   edges rather than filling them */
.make__shot {
  display: grid;
  place-items: center;
  padding: 11%;
  border-radius: var(--r-lg);
  border: 3px solid var(--ink);
  background: var(--white);
}

.make__shot img { width: 70%; height: auto; }

/* -------------------------------------------------- other --- */
/* the band wears the colour of the flavour it is pointing at */

/* A row of what else there is. It was one card, because there were
   two flavours and the other one was the whole answer. With three it
   is a row, and it is built from the product table so a fourth needs
   no rule here. */
.other {
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  padding-block: clamp(36px, 5vw, 64px);
}

.others {
  margin-block-start: 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}

/* each card wears the colour of the thing it points at, so the row
   reads as three products rather than three links */
.ocard {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 12px 16px 12px 12px;
  border-radius: var(--r-lg);
  border: 3px solid var(--card, var(--paper));
  background: var(--card, transparent);
  color: var(--white);
  transition: transform .15s cubic-bezier(.34,1.6,.5,1);
}

.ocard:hover { transform: translateY(-3px); }

.ocard__art {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: var(--r);
  background: rgba(255,255,255,.14);
}

.ocard__art img { width: 78%; height: auto; }

.ocard__body { display: grid; gap: 4px; min-width: 0; }

.ocard__name {
  font-size: 14px;
  font-weight: 900;
  line-height: 1.35;
}

.ocard__price { font-size: 15px; font-weight: 900; opacity: .92; }

.other__k {
  display: block;
  margin-block-end: 12px;
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .78;
}

html[lang="ar"] .other__k { letter-spacing: 0; text-transform: none; font-size: 13.5px; }

.other__copy p { margin-block-start: 16px; max-width: 44ch; font-size: 16px; opacity: .92; }

.other__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-block-start: 26px;
}

.other__foot .price { font-size: 22px; font-weight: 900; }

.other__art { display: grid; place-items: center; }
.other__art img { max-height: clamp(240px, 26vw, 380px); width: auto; }