/* ============================================================================
   Home. Loaded only on the front page.

   Measures on display type are set in em, not ch: the Georgian "0" is ~3x the
   width of an average Mkhedruli letter, so a ch-based cap lands about 40% short
   of the intended measure and the headline stacks.
   The hero is the one black field on the site; everything below returns to the
   white/grey ground so the catalogue itself stays the loudest thing.
   ========================================================================= */

/* The hero is no longer a black field with a headline in it — it is three
   components on the page ground, and the black would have fought all three.
   .dg-btn--onblack and the fact strip went with it: nothing renders them now. */
.dg-hero{background:var(--white)}

/* --- sections ------------------------------------------------------------ */
/* 32px, so adjacent sections sit 64px apart rather than 128. On a transparent
   section this padding is not breathing room — it IS the gap to the next one,
   and two of them stacked was half a screen of nothing between every block. */
.dg-sec{padding:var(--sp-6) 0}
/* A FILLED section is the exception: there the padding is the room inside a
   coloured band rather than a gap between two, so it keeps the larger value.
   These are the only two sections that paint their own full-bleed ground. */
.dg-sec--steps,.dg-cta{padding:var(--sp-8) 0}
.dg-sec--steps{background:var(--panel)}
.dg-sec__title{font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:700;
  margin:0 0 var(--sp-5);color:var(--text)}
.dg-sec__lede{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-2);
  margin:calc(var(--sp-5) * -1) 0 var(--sp-5);max-width:60ch}
/* Title and its "see all" are one object, so they sit on one rule rather than at
   opposite ends of 1400px of nothing. The heading also stops shouting: at --fs-h2
   in the condensed display face it was the largest thing on the page after the
   banner, competing with the products it introduces. */
.dg-sec__head{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-4) var(--sp-5);flex-wrap:wrap;
  padding-bottom:var(--sp-3);margin-bottom:var(--sp-5);
  border-bottom:1px solid var(--rule)}
/* No size override: the head takes the section title's own --fs-h2. It was
   knocked down to --fs-h3 back when the display face was the condensed cut and
   24px genuinely shouted; on the current face it just left the heading barely
   larger than the card titles underneath it. */
.dg-sec__head .dg-sec__title{margin:0}
/* A bordered pill, not a bare amber word: at the far end of a wide row a plain
   link reads as a stray piece of text rather than the section's own control. */
.dg-sec__more{display:inline-flex;align-items:center;gap:7px;flex:none;
  min-height:38px;padding:0 var(--sp-4);
  border:1px solid var(--rule);border-radius:100px;
  font-size:var(--fs-meta);font-weight:700;color:var(--text-2);text-decoration:none;
  transition:border-color var(--dur-instant) linear,color var(--dur-instant) linear,
             background-color var(--dur-instant) linear}
.dg-sec__more svg{transition:transform var(--dur-base) var(--ease-standard)}
@media (hover:hover){
  .dg-sec__more:hover{border-color:var(--ink);color:var(--ink);background:var(--white)}
  .dg-sec__more:hover svg{transform:translateX(3px)}
}
.dg-sec__more:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media (max-width:560px){
  .dg-sec__head{gap:var(--sp-3);padding-bottom:var(--sp-2);margin-bottom:var(--sp-4)}
  .dg-sec__more{min-height:34px;padding:0 var(--sp-3)}
}


/* --- materials -----------------------------------------------------------
   Three rows, hairline-separated, each row one link. The count leads because it
   is the only number a price-free catalogue can put on its home page, and three
   real machines from the material do the work a badge cannot. */
/* --- materials -----------------------------------------------------------
   Three panels sharing one row. Point at one and it takes the room off the
   other two — flex-grow is animatable, so the whole thing is the transition of
   a single number and needs no JS and no measuring.

   The material IS the picture: these panels are full-bleed texture rather than
   three 60px thumbnails of the same catalogue photography that is already on
   every card above them. */
.dg-mat{list-style:none;margin:var(--sp-5) 0 0;padding:0;
  display:flex;gap:var(--sp-3);height:440px}
.dg-mat__item{flex:1 1 0;min-width:0;
  transition:flex-grow var(--dur-panel) var(--ease-standard)}
/* Only where there is a pointer to do the pointing. On touch the three stay
   equal, which is the layout the content was written for anyway. */
@media (hover:hover){
  .dg-mat:hover .dg-mat__item{flex-grow:.75}
  .dg-mat__item:hover{flex-grow:2}
}
/* Keyboard gets the same behaviour, on every device: tab to a panel and it
   opens. :focus-within on the item, because the focus lands on the link. */
.dg-mat__item:focus-within{flex-grow:2}

.dg-mat__link{position:relative;isolation:isolate;
  display:flex;height:100%;overflow:hidden;
  border-radius:calc(var(--radius-lg) * 1.5);
  background:var(--ink);color:var(--white);text-decoration:none}
.dg-mat__link:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
/* Negative z-index over the link's own isolation: the picture sits under the
   veil, the veil under the type, and none of the three needs a stacking
   context of its own. */
.dg-mat__bg{position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;
  transition:transform var(--dur-panel) var(--ease-standard)}
@media (hover:hover){
  .dg-mat__item:hover .dg-mat__bg{transform:scale(1.05)}
}
/* Dark at the foot, clear at the head. The board panel is a bright photograph
   and white type on it is unreadable without this; the timber one barely needs
   it. One gradient rather than three, so a fourth material added later is
   legible without anyone remembering why. */
.dg-mat__veil{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,
    rgba(20,20,22,.12) 0%, rgba(20,20,22,.48) 46%, rgba(20,20,22,.90) 100%)}

.dg-mat__body{position:relative;align-self:flex-end;width:100%;
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--sp-4);padding:var(--sp-5);min-width:0}
.dg-mat__say{min-width:0}
.dg-mat__n{display:flex;align-items:baseline;gap:6px;
  color:rgba(255,255,255,.78)}
.dg-mat__n b{font-family:var(--font-display);font-weight:700;
  font-size:var(--fs-h3);line-height:1;color:var(--white);
  font-variant-numeric:tabular-nums}
.dg-mat__n i{font-style:normal;font-size:var(--fs-micro);line-height:1.3}
.dg-mat__name{display:block;margin-top:var(--sp-2);
  font-family:var(--font-display);font-weight:700;
  font-size:var(--fs-h1);line-height:var(--lh-h1);color:var(--white);
  text-wrap:balance}
.dg-mat__go{flex:none;width:48px;height:48px;display:grid;place-items:center;
  border-radius:50%;background:rgba(255,255,255,.14);color:var(--white);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background-color var(--dur-instant) linear,
             color var(--dur-instant) linear,
             transform var(--dur-base) var(--ease-standard)}
@media (hover:hover){
  .dg-mat__item:hover .dg-mat__go{background:var(--accent);color:var(--on-accent);
    transform:translateX(3px)}
}
@media (prefers-reduced-motion:reduce){
  .dg-mat__item,.dg-mat__bg,.dg-mat__go{transition-duration:1ms}
  .dg-mat__item:hover .dg-mat__bg{transform:none}
}

/* --- how ordering works --------------------------------------------------
   A rail that says who answers, and one spine that says what happens. */
/* --- how ordering works ---------------------------------------------------
   A header band, then the four steps across the full measure. The old split put
   the steps in a 1000px column beside a 340px rail that ran out of content
   two thirds of the way down. */
.dg-how{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--sp-5) var(--sp-7);margin-bottom:var(--sp-7)}
.dg-how__say{flex:1 1 420px;min-width:0}
.dg-how__say .dg-sec__title{margin:0}
.dg-how__lede{font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--text-2);
  margin:var(--sp-2) 0 0;max-width:46ch}
/* The person and the way to reach them, together on one line: the agent card is
   the answer to "who replies", and the button is how you make them. */
.dg-how__act{flex:0 1 auto;display:flex;align-items:center;gap:var(--sp-5);flex-wrap:wrap}
.dg-how .dg-agent{margin:0;border:0;padding:0}
.dg-how__cta{margin:0;flex:none}

/* Four columns. Georgian needs the room, so they stop being four well before a
   phone: 4 → 2 → 1 rather than 4 → 1. */
.dg-steps{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-6) var(--sp-5)}
.dg-steps li{position:relative;min-width:0;padding-top:var(--sp-4);
  border-top:2px solid var(--ink)}
/* The two steps we take rather than the reader: a lighter rule says so without
   a second colour or a legend. */
.dg-steps li:nth-child(3),.dg-steps li:nth-child(4){border-top-color:var(--grey-300)}
/* The numeral IS the marker — no box drawn round it. At display size it reads
   as a step number from across the room, which a 32px outlined square never
   did, and it costs no extra element. */
.dg-steps__n{display:block;
  font-family:var(--font-display);font-size:var(--fs-display);line-height:1;
  font-weight:700;color:var(--grey-300);font-variant-numeric:tabular-nums;
  letter-spacing:.01em}
/* One amber moment, on the only step the reader performs. */
.dg-steps li.is-you .dg-steps__n{color:var(--accent-text)}
.dg-steps li.is-you{border-top-color:var(--accent)}
/* FiraGO bold, not the display face: below 767px --fs-h3 does not step down, so
   a display-face step title would land one pixel from the section heading. */
.dg-steps h3{font-size:var(--fs-card);line-height:var(--lh-card);font-weight:700;
  margin:var(--sp-3) 0 var(--sp-2);color:var(--text);text-wrap:pretty}
.dg-steps p{font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--text-2);margin:0;
  text-wrap:pretty}

/* --- makers --------------------------------------------------------------
   Three equal plates. The first one used to take a tile twice as tall as the
   others, which would have been right if the brand terms carried a description
   — none of them does, so it was a logo and two numbers in 300px of empty grey.
   Three of the maker's own machines fills it instead. */
.dg-makers{list-style:none;margin:var(--sp-5) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--sp-4)}
.dg-maker__link{position:relative;display:flex;flex-direction:column;height:100%;
  gap:var(--sp-4);padding:var(--sp-5);
  /* Grey plate, white photo wrappers inside it. Supplier photography is shot on
     white, so a white plate left each machine floating in a field of its own
     background with only a hairline to say where the picture stopped. Inverting
     the two gives every shot a white frame that ends where the machine does.
     No resting shadow: the tone change is already doing that work, and a shadow
     under a grey block on a white page reads as a lifted slab. */
  background:var(--grey-100);border:0;border-radius:var(--radius-lg);
  text-decoration:none;color:inherit;
  transition:transform var(--dur-base) var(--ease-standard),
             box-shadow var(--dur-base) var(--ease-standard)}
@media (hover:hover){
  /* Lift only. Lightening the plate to white on hover would have dissolved the
     three white photo frames into it. */
  .dg-maker__link:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
}
.dg-maker__link:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

.dg-maker__top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4)}
.dg-maker__mark{display:block;min-width:0}
.dg-maker__logo img{height:30px;width:auto;max-width:200px;object-fit:contain;
  object-position:left center;display:block}
/* No logo file: the mark falls back to the maker's name as type. */
.dg-maker__logo--text{font-size:var(--fs-h3);font-weight:700;letter-spacing:.02em;color:var(--ink)}
.dg-maker__go{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  background:var(--white);color:var(--text-2);
  transition:background-color var(--dur-instant) linear,
             color var(--dur-instant) linear,
             transform var(--dur-base) var(--ease-standard)}
@media (hover:hover){
  .dg-maker__link:hover .dg-maker__go{background:var(--accent);color:var(--on-accent);
    transform:translateX(3px)}
}
.dg-maker__line{font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--text-2);
  max-width:38ch}

/* Three machines, equal thirds, cropped square. Supplier photography is shot on
   white so it meets the plate with no cut-out work and no halo. */
.dg-maker__shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sp-2);margin-top:auto}
.dg-maker__fig{display:block;aspect-ratio:1/1;overflow:hidden;
  border-radius:var(--radius-sm);background:var(--white)}
.dg-maker__fig img{width:100%;height:100%;display:block;object-fit:contain;
  padding:6px;
  transition:transform var(--dur-panel) var(--ease-standard)}
@media (hover:hover){
  .dg-maker__link:hover .dg-maker__fig img{transform:scale(1.06)}
}

/* Under the photographs, over a hairline: the numbers are the summary of what
   is above them rather than a second heading for it. */
/* --grey-300, not --grey-200: a 200 hairline on a 100 ground is very nearly
   the same colour. */
.dg-maker__stats{display:flex;flex-wrap:wrap;gap:var(--sp-5);
  padding-top:var(--sp-4);border-top:1px solid var(--grey-300)}
.dg-maker__stat{display:flex;align-items:baseline;gap:6px}
.dg-maker__stat b{font-size:var(--fs-card);font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums}
.dg-maker__stat i{font-style:normal;font-size:var(--fs-micro);color:var(--text-3)}

/* --- closing CTA --------------------------------------------------------- */
.dg-cta{background:var(--ink);color:var(--white)}
/* Centred, not top-aligned. The form is the taller column whatever is done to
   it, and pinning both to the top left the agent card sitting over a third of a
   screen of empty ink. */
.dg-cta__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:var(--sp-7) var(--sp-8);align-items:center}
/* Display size, and the only heading on the page set this big. This is the last
   thing the page asks and the one section whose job is conversion — at --fs-h1
   it was the same size as six headings above it and read as another section
   label rather than as the question it is. */
.dg-cta__title{font-size:var(--fs-display);line-height:var(--lh-display);font-weight:700;
  margin:0 0 var(--sp-4);text-wrap:balance;max-width:15em}
.dg-cta__lede{font-size:var(--fs-card);line-height:var(--lh-body);color:var(--grey-300);
  margin:0 0 var(--sp-5);max-width:42ch}

/* Two ways past the form. The white-ground tints these buttons use elsewhere are
   10% washes and vanish on ink, so they carry their own light fill here. */
.dg-cta__reach{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);
  margin-bottom:var(--sp-5);max-width:420px}
.dg-cta__reach:has(> a:only-child){grid-template-columns:1fr}
.dg-cta__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:50px;padding:0 var(--sp-3);border-radius:var(--radius);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  color:var(--white);font-size:var(--fs-meta);font-weight:700;text-decoration:none;
  transition:background-color var(--dur-instant) linear,border-color var(--dur-instant) linear}
.dg-cta__btn:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.34)}
.dg-cta__btn svg{flex:none}
/* WhatsApp keeps its own green: a brand mark recoloured is a brand mark misused. */
.dg-cta__btn.is-wa svg{color:#25D366}
.dg-cta__btn.is-tel svg{color:var(--accent)}
.dg-cta__btn.is-tel span{font-variant-numeric:tabular-nums;white-space:nowrap}

/* The agent card was built for a light buy box; on ink its divider and the
   presence dot's ring both have to flip. */
.dg-cta .dg-agent{border-top-color:rgba(255,255,255,.16)}
.dg-cta .dg-agent__who strong{color:var(--white)}
.dg-cta .dg-agent__who em,.dg-cta .dg-agent__hrs{color:var(--grey-400)}
.dg-cta .dg-agent__dot{border-color:var(--ink)}

/* var(--white) literally, not var(--ground): --ground flips to grey under 768px,
   which is exactly where the card needs the most separation from the band. */
/* color, not just background: .dg-cta sets colour:var(--white) for the band, and
   every label, hint and privacy line inside this white card was inheriting it —
   white type on a white card. The old markup only ever fixed the h2. */
.dg-cta__card{background:var(--white);color:var(--text);
  border-radius:var(--radius-lg);padding:var(--sp-5)}
/* The form ships its own panel, border and 560px cap for standalone use. Inside
   this card that is a second frame around the first. */
.dg-cta__card .dg-quote-sec{padding:0;background:none;border:0}
.dg-cta__card .dg-quote--cta{background:none;border:0;padding:0;max-width:none}

.dg-quote__ctx{font-size:var(--fs-meta);color:var(--text-3);margin:0 0 var(--sp-4)}

/* --- responsive ---------------------------------------------------------- */
@media (max-width:1023px){
  /* Four Georgian step titles stop fitting across well before a phone does.
     4 -> 2 -> 1, never 4 -> 1. */
  .dg-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-6) var(--sp-5)}
  /* A phone taps call; it does not type four fields. The two escape hatches go
     above the form, and the person stays with them. */
  .dg-cta__in{grid-template-columns:1fr;gap:var(--sp-5)}
  .dg-cta__say{display:flex;flex-direction:column}
  .dg-cta__title{order:1} .dg-cta__lede{order:2}
  .dg-cta__reach{order:3;max-width:none} .dg-cta .dg-agent{order:4;margin-bottom:0}
  /* The strip is the first thing to give up its width. */
  /* Stacked, equal, and nothing expands: a 390px panel has no room to give
     away, and there is no pointer to ask it to. */
  .dg-mat{flex-direction:column;height:auto;gap:var(--sp-3)}
  .dg-mat__item{flex:0 0 auto;height:168px}
  .dg-mat:hover .dg-mat__item,.dg-mat__item:hover,.dg-mat__item:focus-within{flex-grow:0}
  .dg-mat__body{padding:var(--sp-4)}
  .dg-mat__name{font-size:var(--fs-h2);line-height:var(--lh-h2)}
  .dg-mat__go{width:40px;height:40px}
}
@media (max-width:640px){
  .dg-steps{grid-template-columns:minmax(0,1fr);gap:var(--sp-5)}
  .dg-steps__n{font-size:var(--fs-h1)}
  .dg-how{align-items:flex-start;gap:var(--sp-5)}
  .dg-how__act{width:100%;justify-content:space-between}
  .dg-how__cta{width:100%}
  .dg-maker__link{padding:var(--sp-4)}
}
@media (max-width:767px){
  /* .dg-sec--steps is --panel, so the chip's white ground and the agent dot's
     ring both need the panel tone instead. */
  .dg-sec--steps .dg-steps__n{background:var(--panel)}
  .dg-sec--steps .dg-agent__dot{border-color:var(--panel)}
}
@media (max-width:640px){
  .dg-sec{padding:var(--sp-5) 0}
  .dg-sec--steps,.dg-cta{padding:var(--sp-7) 0}
  .dg-mat__item{height:148px}
  .dg-mat__name{font-size:var(--fs-h3);line-height:var(--lh-h3)}
  .dg-cta__reach{grid-template-columns:1fr}
  .dg-cta__card{padding:var(--sp-4)}
}

/* ============================================================ hero, 3 columns */
/* A navigation rail, the slider, and two entry points. The middle column carries
   the weight; the outer two are utilities and must not compete with it. */
.dg-hero__grid{
  --rail-w:250px;
  --promo-w:260px;
  --gutter:var(--sp-5);        /* .dg-wrap's own padding, which the flyout clears */
  /* Room above: the hero used to start 12px under a 108px header, so the page
     opened with no breath at all between chrome and content. */
  --pad-t:var(--sp-6); --pad-b:var(--sp-6);
  position:relative;
  display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr) var(--promo-w);
  /* Four separate offers, not one block cut into four: at 16px the rail, the
     banner and the two tiles read as a single grid with rules through it. */
  gap:var(--sp-5);align-items:stretch;padding-block:var(--pad-t) var(--pad-b)}
/* Breakpoints live at the end of this section, after every component they
   override — a media query carries no extra specificity, so up here the later
   base rules simply won. */

/* --------------------------------------------------------------- left rail */
/* Deliberately NOT position:relative, and neither is .dg-hnav__item — the
   flyout is positioned against .dg-hero__grid so it can span the slider's whole
   column. A positioned ancestor here would capture it and collapse it into the
   250px rail. */
.dg-hnav{display:flex;background:var(--white);
  border:1px solid var(--grey-200);border-radius:var(--radius-lg);padding:var(--sp-2)}
.dg-hnav__list{flex:1;list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:1px}
/* Rows share the column height rather than leaving dead space under the last
   one — the rail is a grid child at stretch, so that gap was ~90px. */
.dg-hnav__item{flex:1;display:flex;flex-direction:column}
.dg-hnav__row{flex:1;display:flex;align-items:center;gap:10px;
  min-height:40px;padding:9px 10px;border-radius:var(--radius-sm);text-decoration:none;
  color:var(--text-2);font-size:var(--fs-meta);line-height:1.3;
  transition:background-color var(--dur-instant) linear,color var(--dur-instant) linear}
.dg-hnav__ico{display:inline-flex;flex:none;color:var(--grey-400);
  transition:color var(--dur-instant) linear}
.dg-hnav__name{flex:1;min-width:0}
.dg-hnav__chev{display:inline-flex;flex:none;color:var(--grey-400);
  opacity:0;transform:translateX(-3px);
  transition:opacity var(--dur-base) var(--ease-standard),
             transform var(--dur-base) var(--ease-standard)}
.dg-hnav__item.is-on > .dg-hnav__row,
.dg-hnav__row:hover,.dg-hnav__row:focus-visible{
  background:var(--tint-saved);color:var(--ink);font-weight:600}
.dg-hnav__item.is-on > .dg-hnav__row .dg-hnav__ico,
.dg-hnav__row:hover .dg-hnav__ico{color:var(--amber-800)}
.dg-hnav__item.is-on > .dg-hnav__row .dg-hnav__chev,
.dg-hnav__row:hover .dg-hnav__chev{opacity:1;transform:none}

/* The panel is a sibling of the row and positioned against the rail, so the
   row's own padding cannot clip it. */
/* Positioned against .dg-hero__grid, not against the row it belongs to, so it
   lands exactly on the slider: same left edge, same right edge, same top and
   bottom. Whichever family is hovered, the panel is the same rectangle — it no
   longer hangs off the bottom of the rail from the last row. The containing
   block is the grid's PADDING box, which includes the page gutter, hence the
   gutter in both inline offsets. Empty space in a family with four
   subcategories is intended: a panel that changes size on every hover is worse
   than one that is sometimes half full. */
.dg-hnav__panel{position:absolute;
  inset-block:var(--pad-t) var(--pad-b);
  inset-inline-start:calc(var(--gutter) + var(--rail-w) + var(--sp-4));
  inset-inline-end:calc(var(--gutter) + var(--promo-w) + var(--sp-4));
  z-index:30;overflow-y:auto;
  /* No overscroll-behavior:contain here. The mega menu is a menu you opened and
     trapping the wheel inside it is right; this one opens on hover, so trapping
     the wheel means the page stops scrolling because the pointer happens to be
     over the hero. It chains, and app.js closes it on scroll anyway. */
  background:var(--white);border:1px solid var(--grey-200);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-2);
  padding:var(--sp-5);
  opacity:0;visibility:hidden;transform:translateX(-8px);
  transition:opacity var(--dur-exit) linear,
             transform var(--dur-exit) var(--ease-exit),
             visibility 0s linear var(--dur-exit)}
.dg-hnav__item.is-on .dg-hnav__panel{
  opacity:1;visibility:visible;transform:none;
  transition:opacity var(--dur-base) linear,
             transform var(--dur-panel) var(--ease-enter),
             visibility 0s linear 0s}
.dg-hnav__all{display:inline-flex;align-items:center;gap:7px;margin-bottom:var(--sp-3);
  font-size:var(--fs-sm);font-weight:700;color:var(--ink);text-decoration:none}
.dg-hnav__all svg{color:var(--amber-800);transition:transform var(--dur-base) var(--ease-standard)}
.dg-hnav__all:hover svg{transform:translateX(3px)}
.dg-hnav__kids{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:2px var(--sp-4);align-content:start}
.dg-hnav__kids a{display:flex;align-items:center;gap:var(--sp-2);
  padding:7px 9px;border-radius:var(--radius-sm);text-decoration:none;
  font-size:var(--fs-meta);line-height:1.35;color:var(--text-2);
  transition:background-color var(--dur-instant) linear,color var(--dur-instant) linear}
.dg-hnav__kids a:hover{background:var(--grey-100);color:var(--ink)}
/* Staggered so the panel reads as one object arriving, not eight. */
.dg-hnav__item.is-on .dg-hnav__kids li{
  animation:dg-hnav-in var(--dur-base) var(--ease-enter) both;
  animation-delay:calc(var(--i,0) * 18ms)}
@keyframes dg-hnav-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------- the slider */
/* Shorter than 16:9: the hero is a router, not a billboard, and every pixel it
   spends pushes the catalogue itself further down the page. */
/* align-self:start, NOT the grid's default stretch. Stretching hands the frame a
   definite height — the row's, set by whichever column is tallest — and a box
   with an aspect-ratio and a definite height derives its WIDTH from that height.
   The rail is the tallest column at every width below 1440: six Georgian labels,
   all of which wrap to two lines, make it 352px at --rail-w:250 and 384px at 200.
   So the frame demanded 352 x 2.35 = 827px however narrow its column got. It ran
   under the promo column from 1439 down (129px of overlap at 1280, invisible
   because the promos paint over it), and past the page edge from 1180, where the
   promo column drops away and nothing absorbs it: 151px of horizontal scroll at
   1000, 290px at 861. min-width:0 does not touch this — it is the ratio choosing
   the width, not a minimum refusing to shrink. Leaving the item at start keeps
   its height indefinite, so the ratio runs the way it was written to: width from
   the column, height from the width. The cost is the rail ending below the frame
   between 861 and 1180 — a shorter banner, not a cropped one, and the banners
   carry their own typography, which a cover-crop eats first. */
.dg-hslide{position:relative;aspect-ratio:2.35/1;border-radius:var(--radius-lg);
  overflow:hidden;background:var(--grey-100);align-self:start}
.dg-hslide__track{position:absolute;inset:0}
.dg-hslide__slide{position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity var(--dur-panel) linear,visibility 0s linear var(--dur-panel)}
.dg-hslide__slide.is-on{opacity:1;visibility:visible;transition-delay:0s,0s}
.dg-hslide__slide img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;transform:scale(1.03);
  transition:transform var(--dur-backdrop) var(--ease-standard)}
.dg-hslide__slide.is-on img{transform:none}
/* No scrim. It existed to hold white HTML copy over the photograph; the banner
   now carries its own type, and darkening the artwork to protect text that is
   no longer there only muddied the picture. */
.dg-hslide__hit{position:absolute;inset:0;z-index:2;display:block}
.dg-hslide__hit:focus-visible{outline:3px solid var(--accent);outline-offset:-5px;
  border-radius:var(--radius-lg)}
/* .dg-hslide__copy, __t and the chip that lived in them are gone: the banner
   carries its own typography now and the slide is one link. */

/* The dot is 7px because that is the right size for a dot. The BUTTON is not:
   at 7x7 with 6px gaps these were the only manual control a touch reader had
   (the arrows are display:none under hover:none) and they were unhittable. The
   mark is drawn on ::before, so the target can be 26x32 without the row growing
   into a stripe of pills. */
.dg-hslide__dots{position:absolute;inset-inline:0;bottom:6px;z-index:3;
  display:flex;justify-content:center;gap:2px;
  /* Vertical pans still belong to the page; horizontal ones to the slider. */
  touch-action:pan-y}
.dg-hslide__dot{position:relative;width:26px;height:32px;padding:0;border:0;
  background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.dg-hslide__dot::before{content:"";position:absolute;top:50%;left:50%;
  width:7px;height:7px;border-radius:100px;background:rgba(255,255,255,.5);
  transform:translate(-50%,-50%);
  transition:width var(--dur-base) var(--ease-standard),
             background-color var(--dur-base) linear}
.dg-hslide__dot:hover::before{background:rgba(255,255,255,.8)}
.dg-hslide__dot.is-on::before{width:22px;background:var(--amber-500)}
.dg-hslide__dot:focus-visible{outline:2px solid var(--white);outline-offset:-4px;
  border-radius:var(--radius-sm)}
/* The track takes a damped offset while a finger is on it — see initSlide().
   Horizontal gestures are the slider's; vertical ones stay the page's. */
.dg-hslide__track{touch-action:pan-y}

.dg-hslide__arw{position:absolute;top:50%;z-index:3;translate:0 -50%;
  width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  padding:0;cursor:pointer;border:0;border-radius:50%;
  background:rgba(255,255,255,.9);color:var(--ink);
  opacity:0;transition:opacity var(--dur-base) linear,background-color var(--dur-instant) linear}
.dg-hslide__arw.is-prev{inset-inline-start:var(--sp-4);rotate:180deg}
.dg-hslide__arw.is-next{inset-inline-end:var(--sp-4)}
.dg-hslide:hover .dg-hslide__arw,.dg-hslide__arw:focus-visible{opacity:1}
.dg-hslide__arw:hover{background:var(--white)}
@media (hover:none){.dg-hslide__arw{display:none}}

/* ----------------------------------------------------------- right promos */
.dg-hpromo{display:flex;flex-direction:column;gap:var(--sp-5)}
.dg-hpromo__b{position:relative;flex:1;display:flex;flex-direction:column;
  justify-content:flex-start;
  padding:var(--sp-5);border-radius:var(--radius-lg);overflow:hidden;
  text-decoration:none;min-height:164px;
  transition:transform var(--dur-base) var(--ease-standard),
             box-shadow var(--dur-base) var(--ease-standard)}
a.dg-hpromo__b:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.dg-hpromo__b.is-new{background:var(--accent);color:var(--ink)}
.dg-hpromo__b.is-used{background:var(--ink);color:var(--white)}
.dg-hpromo__b.is-brands{background:var(--grey-100);color:var(--text-2)}
.dg-hpromo__eyebrow{font-size:var(--fs-micro);font-weight:700;opacity:.7}
/* Copy top left, art bottom right — the tile is read before it is looked at. */
.dg-hpromo__copy{position:relative;z-index:1;display:flex;flex-direction:column;
  align-items:flex-start;gap:var(--sp-2);max-width:8.5em}
/* The display face, the same one the page's own headings use. */
.dg-hpromo__h{margin:0;font-family:var(--font-display);
  font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:700;letter-spacing:.005em}
/* A tag, not a loose word: "მალე" floating under a heading read as a second
   line of the heading. */
.dg-hpromo__tag{display:inline-flex;align-items:center;
  padding:3px var(--sp-3);border-radius:100px;
  font-family:var(--font-display);font-size:var(--fs-meta);line-height:1.5;
  font-weight:700;letter-spacing:.01em}
.dg-hpromo__b.is-new .dg-hpromo__tag{background:rgba(20,20,22,.14);color:var(--ink)}
.dg-hpromo__b.is-used .dg-hpromo__tag{background:rgba(255,255,255,.14);color:var(--white)}

/* The illustration sits IN the corner, part-cropped by it, rather than floating
   inside the padding — the tile reads as one object with a machine in it instead
   of a box containing a sticker. Each render is lit for the ground it lands on:
   charcoal on the amber tile, amber on the ink one. */
/* Sized against the tile's HEIGHT, not its width. The two tiles share the
   slider's column, so each is about 160px tall — art scaled off the 260px width
   was taller than the tile and got sliced through the middle of the machine.
   A small bleed past two edges reads as placement; a cut through the subject
   reads as an accident. */
.dg-hpromo__art{position:absolute;z-index:0;
  inset-inline-end:-10px;bottom:-14px;
  width:clamp(112px,48%,158px);height:auto;pointer-events:none;
  transition:transform var(--dur-panel) var(--ease-standard)}
@media (hover:hover){
  a.dg-hpromo__b:hover .dg-hpromo__art{transform:scale(1.06) rotate(-3deg)}
}
@media (prefers-reduced-motion:reduce){.dg-hpromo__art{transition:none}}
/* Nothing in stock yet: the art steps back, the tag says why. */
.dg-hpromo__b.is-soon .dg-hpromo__art{opacity:.8}
.dg-hpromo__n{font-size:var(--fs-h2);line-height:1.1;font-weight:800;
  font-variant-numeric:tabular-nums}
.dg-hpromo__go{position:absolute;top:var(--sp-4);inset-inline-end:var(--sp-4);
  display:inline-flex;transition:transform var(--dur-base) var(--ease-standard)}
.dg-hpromo__b.is-used .dg-hpromo__go{color:var(--lime-400)}
a.dg-hpromo__b:hover .dg-hpromo__go{transform:translateX(3px)}
.dg-hpromo__brands{list-style:none;margin:auto 0;padding:0;
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3)}
.dg-hpromo__brands a{display:block;opacity:.85;
  transition:opacity var(--dur-instant) linear}
.dg-hpromo__brands a:hover{opacity:1}
.dg-hpromo__mark img{height:17px;width:auto;max-width:100px;object-fit:contain;display:block}

/* ================================================================ the rail */
.dg-sec--rail{overflow:hidden}
.dg-rail{position:relative;margin-top:var(--sp-4)}
/* The block padding is not decoration: overflow-x:auto forces overflow-y:auto,
   which makes this a scroll container that clips its children vertically — the
   cards' 3px hover lift was sliced flat at the top, the bottom of their shadow
   was cut, and a focus ring on a card was clipped on both. The matching negative
   margin keeps the row's measured position unchanged. */
.dg-rail__track{list-style:none;margin:0;padding:0 var(--sp-5);
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  gap:var(--sp-4);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--sp-5);scrollbar-width:none;
  padding-block:8px 22px;margin-block:-8px -22px;
  /* The gutter is the page's, so the first card lines up with everything above. */
  max-width:1440px;margin-inline:auto}
.dg-rail__track::-webkit-scrollbar{display:none}
.dg-rail__track > *{scroll-snap-align:start}
/* Half a card of the next one always showing: a row that ends flush at the
   edge reads as finished, and nobody scrolls it. */
@media (min-width:1281px){.dg-rail__track{grid-auto-columns:calc((100% - var(--sp-4) * 4) / 4.5)}}
@media (max-width:1280px){.dg-rail__track{grid-auto-columns:calc((100% - var(--sp-4) * 3) / 3.5)}}
@media (max-width:900px){.dg-rail__track{grid-auto-columns:calc((100% - var(--sp-4) * 2) / 2.5)}}
/* 1.15 not 1: the next card peeks, so the row reads as scrollable with no arrow. */
@media (max-width:640px){.dg-rail__track{grid-auto-columns:78%;padding-inline:var(--sp-4);
  scroll-padding-inline:var(--sp-4)}}

.dg-rail__arw{position:absolute;top:38%;z-index:4;translate:0 -50%;
  width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  padding:0;cursor:pointer;border:1px solid var(--grey-200);border-radius:50%;
  background:var(--white);color:var(--ink);box-shadow:var(--shadow-2);
  transition:opacity var(--dur-base) linear,background-color var(--dur-instant) linear}
.dg-rail__arw.is-prev{inset-inline-start:10px;rotate:180deg}
.dg-rail__arw.is-next{inset-inline-end:10px}
.dg-rail__arw:hover{background:var(--grey-100)}
/* Disabled at the end, never wrapping: in a finite list, wrap-around loses you. */
.dg-rail__arw[disabled]{opacity:0;pointer-events:none}
@media (hover:none){.dg-rail__arw{display:none}}

/* ================================================================ the band */
.dg-band{background:none}
/* A painted box inside the page measure, not a full-bleed band. The ground is
   the logo's own ramp — green through lime to yellow — which is the only place
   on the site that gradient appears, so it reads as the brand rather than as
   decoration. It is bright enough throughout that the type on it stays ink. */
.dg-band__in{position:relative;isolation:isolate;overflow:hidden;
  display:grid;grid-template-columns:300px minmax(0,1fr);
  gap:var(--sp-6);align-items:center;
  padding:var(--sp-6);border-radius:calc(var(--radius-lg) * 1.5);
  background:linear-gradient(112deg,
    var(--green-500) 0%, var(--lime-400) 48%, var(--yellow-500) 100%)}
/* Fractal noise over the ramp: a flat two-stop gradient at this size bands
   visibly on 8-bit displays, and the grain both hides that and keeps the panel
   from looking like a stock gradient. soft-light so it darkens and lightens the
   ramp rather than greying it. */
.dg-band__in::before{content:"";position:absolute;inset:0;z-index:-1;
  pointer-events:none;opacity:.42;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (max-width:900px){.dg-band__in{grid-template-columns:1fr;gap:var(--sp-4);
  padding:var(--sp-5) var(--sp-4)}}
.dg-band__copy p{margin:var(--sp-2) 0 var(--sp-3);color:rgba(20,20,22,.74);
  font-size:var(--fs-sm);line-height:var(--lh-sm);max-width:36ch}
.dg-band__copy .dg-sec__title{margin-bottom:0}
/* Ink, not --accent-text: a dark amber link on a green-to-yellow ground is the
   one combination this ramp cannot carry. */
.dg-band__all{display:inline-flex;align-items:center;gap:7px;
  font-size:var(--fs-sm);font-weight:700;color:var(--ink);text-decoration:none;
  border-bottom:1px solid rgba(20,20,22,.3);padding-bottom:2px}
.dg-band__all:hover{border-bottom-color:var(--ink)}
.dg-band__all svg{transition:transform var(--dur-base) var(--ease-standard)}
.dg-band__all:hover svg{transform:translateX(3px)}

/* Always a scroller, never a clipper. Six tiles at the 150px floor plus five
   12px gaps need 960px, and the column they sit in only reaches that at a 1404px
   viewport — below it the row overflowed and .dg-band__in{overflow:hidden} simply
   cut the last tiles off with no way to reach them. The scroll fallback used to
   live in the mobile query alone, which left 901-1403px silently broken.
   The block padding is for the tiles' 2px hover lift and their shadow:
   overflow-x:auto forces overflow-y:auto, so without it the scroller clips both. */
.dg-band__row{list-style:none;margin:0;padding:0;
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);gap:var(--sp-3);
  overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;
  padding-block:6px 16px;margin-block:-6px -16px;
  margin-inline:calc(var(--sp-4) * -1);
  padding-inline:var(--sp-4);scroll-padding-inline:var(--sp-4)}
.dg-band__row::-webkit-scrollbar{display:none}
.dg-band__cell{scroll-snap-align:start}
@media (max-width:900px){
  /* Wider cards so a phone shows two and a peek, rather than four slivers. */
  .dg-band__row{grid-auto-columns:minmax(150px,46%);scroll-snap-type:x mandatory}
}
/* On the ramp the tiles need no border to separate from the ground — a hairline
   would only fight the gradient behind it. */
.dg-band__tile{position:relative;display:block;
  min-height:212px;padding:var(--sp-4);border-radius:var(--radius-lg);
  background:var(--white);border:1px solid transparent;
  box-shadow:0 1px 2px rgba(20,20,22,.06);
  text-decoration:none;overflow:hidden;
  transition:transform var(--dur-base) var(--ease-standard),
             box-shadow var(--dur-base) var(--ease-standard)}
/* The family's own colour as a rail that grows across the tile on hover. */
.dg-band__tile::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;
  height:3px;width:38px;background:currentColor;z-index:2;
  transition:width var(--dur-panel) var(--ease-standard)}
.dg-band__tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.dg-band__tile:hover::before{width:100%}
.dg-band__tile:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.dg-band__tile.is-green{color:#0E8F52}   .dg-band__tile.is-amber{color:#96680A}
.dg-band__tile.is-orange{color:#B85210}  .dg-band__tile.is-lime{color:#5C7A0E}
.dg-band__tile.is-yellow{color:#8A5F00}  .dg-band__tile.is-slate{color:var(--text-3)}

/* Name and count sit top-left and stay above the photograph, which is why the
   tile is a block rather than a flex column: the picture is positioned, and the
   two lines of text simply start at the top. */
.dg-band__name{position:relative;z-index:1;display:block;
  font-size:var(--fs-meta);line-height:1.3;font-weight:700;color:var(--ink);
  text-wrap:balance}

/* A real machine from the family, cropped by the tile's own corner. Supplier
   photography is shot on white, so it meets the card ground with no cut-out
   work and no halo. Deliberately overflowing on two sides: an image that fits
   inside the box reads as a thumbnail, one the box cuts reads as depth. */
.dg-band__fig{position:absolute;inset-inline-end:-14px;bottom:-16px;z-index:0;
  width:88%;height:58%;pointer-events:none}
/* Supplier photography carries a wide white margin of its own. Sized to the box
   it lands as a small floating thumbnail — the machine ends up centred with air
   all round it, which is the opposite of the intent. The base scale eats that
   margin so the subject actually reaches the corner and gets cut by it. */
.dg-band__fig img{width:100%;height:100%;display:block;
  object-fit:contain;object-position:100% 100%;
  transform:scale(1.18);
  /* Grows up and into the tile, not further off the corner it is already
     clipped by. */
  transform-origin:100% 100%;
  transition:transform var(--dur-panel) var(--ease-standard)}
/* A white fade over the photograph's top edge, so the two lines of text always
   have clean ground under them however tall the machine in the picture is. The
   photographs are shot on white, so it is invisible everywhere else. */
.dg-band__fig::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,var(--white) 0%,rgba(255,255,255,0) 42%)}
.dg-band__tile:hover .dg-band__fig img,
.dg-band__tile:focus-visible .dg-band__fig img{transform:scale(1.3)}

/* ========================================================= sourcing panel
   Between the rail and the band, where the catalogue stops answering.

   Three parts across one short panel: the offer on the start side, the picture
   in the middle, what it gets you and the way to ask for it on the end side.
   Ink, and inset inside the page measure — the band immediately below is the
   brand ramp at full strength and the closing enquiry is a full-bleed ink
   field, so a third bright box or a second full-bleed black one would have
   read as the same device repeated down the page. */
.dg-order__in{
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;gap:var(--sp-5);
  min-height:360px;
  padding:var(--sp-6) var(--sp-7);
  border-radius:calc(var(--radius-lg) * 1.5);
  background:var(--ink);color:var(--white);
  /* An ink ground takes the white ring, exactly as the footer and the closing
     enquiry do — the :focus-visible rule itself never changes. */
  --focus:var(--white);
}
/* A warm pool behind the middle, so the cut-out photograph sits in light
   rather than floating on black. Behind the content but above the panel's own
   background: that is what the isolation above is for. */
.dg-order__in::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  left:50%;translate:-50% 0;bottom:-38%;width:56%;height:120%;
  background:radial-gradient(closest-side,rgba(251,202,40,.24),transparent 72%)}

.dg-order__copy{position:relative;z-index:1;min-width:0}
/* No tracking and no rule under it. At 13px a letter-spaced caps eyebrow is the
   single clearest tell of a template, and Mkhedruli has no caps to spare. */
.dg-order__kick{margin:0 0 var(--sp-2);
  font-size:var(--fs-meta);line-height:var(--lh-meta);font-weight:700;
  color:var(--accent)}
.dg-order__h{font-family:var(--font-display);
  font-size:var(--fs-h1);line-height:var(--lh-h1);font-weight:700;
  margin:0;color:var(--white);text-wrap:balance}
.dg-order__lede{margin:var(--sp-3) 0 0;
  font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--grey-300)}

/* Out of the copy column and hung past the bottom edge, so the panel cuts it.
   A stack that fits inside the box reads as a photograph OF containers; one the
   box runs off the bottom of reads as containers too big for the frame, which
   is the claim being made. Same argument as .dg-band__fig.
   Sized off HEIGHT, because the subject is near-square: a width-driven size
   made it taller than the panel and the cut landed on the TOP of the stack as
   well, which is the one edge that has to stay whole. */
.dg-order__art{grid-column:2;align-self:end;justify-self:center;
  height:440px;width:auto;max-width:100%;
  margin-bottom:calc((var(--sp-6) + 90px) * -1)}

.dg-order__aside{position:relative;z-index:1;min-width:0;
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3)}
/* Stacked, not strung along one line: in the end column there is no room for
   three Georgian noun phrases side by side, and the lede already carries the
   explanation so none of them needs a sentence under it. */
.dg-order__pts{list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:var(--sp-3)}
.dg-order__pt{display:flex;align-items:center;gap:10px;
  font-size:var(--fs-label);line-height:var(--lh-label);font-weight:600;
  color:var(--grey-200)}
.dg-order__ico{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;
  background:rgba(251,202,40,.14);color:var(--accent)}
/* --grey-500 is 3.66:1 on ink — under AA for 13px text, and this line carries
   the three maker names, which is the most checkable claim in the panel. */
.dg-order__makers{margin:0;
  font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--grey-400)}
.dg-order__cta{margin-top:var(--sp-2)}

@media (max-width:1279px){
  .dg-order__in{gap:var(--sp-4);padding:var(--sp-5) var(--sp-6)}
  .dg-order__art{height:330px;margin-bottom:calc((var(--sp-5) + 34px) * -1)}
  .dg-order__h{font-size:var(--fs-h2);line-height:var(--lh-h2)}
}
/* Two columns before one: at this width the middle picture has squeezed both
   side columns past the point where a Georgian headline sets, but the panel is
   still far too wide to stack three blocks down it. */
@media (max-width:1023px){
  .dg-order__in{grid-template-columns:minmax(0,1fr) minmax(0,auto);
    align-items:center;min-height:0}
  .dg-order__copy{grid-column:1}
  .dg-order__aside{grid-column:1;margin-top:var(--sp-4)}
  .dg-order__art{grid-column:2;grid-row:1 / span 2;align-self:end;height:300px}
}
/* Stacked, picture first: with no section heading above it this panel arrives
   unannounced, and the photograph is what says "this is an offer" before a word
   is read. The button stays last, nearest the thumb. In flow here rather than
   hung past an edge — at 358px wide a cut would take half the stack. */
@media (max-width:900px){
  .dg-order__in{grid-template-columns:minmax(0,1fr);gap:var(--sp-4);
    padding:var(--sp-5) var(--sp-4)}
  .dg-order__copy,.dg-order__aside{grid-column:1}
  .dg-order__aside{margin-top:0;align-items:stretch}
  .dg-order__art{grid-column:1;grid-row:auto;order:-1;align-self:auto;
    justify-self:center;height:auto;width:auto;
    max-width:min(100%,340px);max-height:230px;margin-bottom:0}
  .dg-order__in::before{bottom:auto;top:-26%;height:56%;width:96%}
  .dg-order__cta{width:100%;margin-top:var(--sp-1)}
}
@media (max-width:420px){
  .dg-order__pt{font-size:var(--fs-meta);line-height:var(--lh-meta)}
  .dg-order__ico{width:28px;height:28px}
}

/* ------------------------------------------------- hero, narrower viewports */
/* Below 1180 the promos cannot hold a 260px column beside a readable slider, so
   they drop under the pair and run as a row instead. */
@media (max-width:1180px){
  /* The promo column drops below the pair, so the slider — and with it the
     flyout — now runs to the page gutter. */
  .dg-hero__grid{--rail-w:200px;--promo-w:0px;grid-template-columns:var(--rail-w) minmax(0,1fr)}
  .dg-hnav__panel{inset-inline-end:var(--gutter)}
  .dg-hpromo{grid-column:1 / -1;flex-direction:row}
  .dg-hpromo__b{min-height:104px}
  .dg-hnav__kids{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
}
/* The rail's value is scanning six families at a glance, which a phone cannot
   do; the header's category menu covers the same ground with one tap. */
@media (max-width:860px){
  /* One gap for the whole cluster. The slider sat 24px above the promo pair
     while the pair sat 8px apart, so three blocks that read as one group were
     spaced by two different numbers. Both are --sp-3 now; .dg-hpromo below
     takes the same value. */
  .dg-hero__grid{grid-template-columns:1fr;gap:var(--sp-3);
    padding-block:var(--sp-3) var(--sp-4)}
  .dg-hnav{display:none}
}
@media (max-width:720px){
  /* One frame at every width. The banners are photographed at 2.35:1, so a
     phone gets the same picture rather than a crop of it — which also means one
     file per slide instead of two. The cost is height: at 358px wide the frame
     is ~152px tall, and the full caption (chip, two lines, a button) needs 161.
     So the caption gives something up rather than the picture being re-cropped:
     the category chip goes, the title takes one line, the button gets compact.
     Title and action survive, which is the pair that matters. */
  /* Side by side, as they are at every width above this. Stacking them cost
     253px between the hero and the first product — at 320-390 nothing from the
     catalogue reached the first screen — and two full-width rows said no more
     than two tiles do. Half the width each, so the tile goes back to the
     column layout it uses on a desktop rather than the row it used when it
     had the whole measure to itself.

     Scoped to .dg-hpromo__b, never to .is-new alone: the .is-used block ships
     the moment dg_condition_count('used') clears zero and must lay out the same
     way — it has the identical eyebrow / heading / count / arrow structure. */
  .dg-hpromo{flex-direction:row;gap:var(--sp-3)}
  .dg-hpromo__b{flex:1 1 0;min-width:0;min-height:96px;overflow:hidden;
    flex-direction:column;align-items:stretch;gap:var(--sp-1);
    padding:var(--sp-3)}
  /* "ახალი" above "ახალი დანადგარები" said new twice, and at half width there
     is no room for it. */
  .dg-hpromo__eyebrow{display:none}
  .dg-hpromo__copy{flex-direction:column;align-items:flex-start;gap:5px;max-width:none}
  /* The title takes two lines here and the art has to stay clear of them, so it
     is capped rather than allowed to fill the tile's trailing half. */
  .dg-hpromo__h{font-size:var(--fs-label);line-height:1.25;
    max-width:8em;text-wrap:pretty}
  .dg-hpromo__tag{font-size:10px;line-height:1.4;padding:1px 7px}
  /* Back to the corner: in a row it had to sit in the flow to avoid the art,
     but a column tile has its own top-trailing corner free. */
  .dg-hpromo__go{position:absolute;top:var(--sp-2);inset-inline-end:var(--sp-2);
    margin:0;flex:none}
  .dg-hpromo__art{width:74px;inset-inline-end:-10px;bottom:-12px}
  .dg-hpromo__brands{margin:0;flex-direction:row;align-items:center;
    justify-content:space-between;gap:var(--sp-4);width:100%}
  .dg-hpromo__brands li{flex:0 1 auto;min-width:0}
  .dg-hpromo__mark img{height:19px}
}

/* ------------------------------------------------------- phone-only repairs */
@media (max-width:1023px){
  /* The chip is centred on the li's 2px spine at inset-inline-start:-17px. In
     the single-column layout the spine sits ON the page gutter, so half the chip
     hung into it and its left border landed at x=1 — touching the screen. The
     desktop grid's column gap was absorbing the overhang. */
  .dg-steps{padding-inline-start:16px}
}
@media (max-width:767px){
}
/* The last section of the front page is the ink-coloured CTA and the band under
   it is ink too, so the footer's 96px clearance — which exists for light pages —
   showed as a grey stripe between two near-black bands. This file only ever
   loads on the front page. */
.dg-footer{margin-top:0}

@media (prefers-reduced-motion:reduce){
  .dg-hnav__panel,.dg-hslide__slide,.dg-hslide__slide img,.dg-hslide__dot,
  .dg-hpromo__b,.dg-band__tile,.dg-band__tile::before,
  .dg-band__fig img{transition-duration:1ms}
  .dg-band__fig img,
  .dg-band__tile:hover .dg-band__fig img{transform:scale(1.18)}
  .dg-hnav__item.is-on .dg-hnav__kids li{animation:none}
  .dg-hslide__slide img{transform:none}
}