/* The bottles series — the local styles of one product family's detail page
   (parts/product-bottle.php, loaded only on those products).

   The page reuses the site's vocabulary — .section, .wrap, .grid.g-4, .mcard,
   .ph frames, .strip chips, .btn, table.spec and .enquiry-form — and only what
   this composition adds is written here: the breadcrumb strip, the picture set
   with its strip of thumbnails, the heading beside it, the specification table's
   proportions, the case card, and the narrower row and band at the foot. */

/* ---------------------------------------------------------------- breadcrumb
   The product's own name is the heading beside the pictures, so above the block
   there is only the trail back to the catalogue. */
.bottle-crumb{padding:clamp(16px,1.8vw,24px) 0 0}

/* ---------------------------------------------------------------- top block */
.bottle-top{padding-top:clamp(20px,2.4vw,32px)}
.bottle-top__grid{display:grid;grid-template-columns:minmax(0,.66fr) minmax(0,1.34fr);
  gap:clamp(26px,3.4vw,56px);align-items:start}

/* ------------------------------------------------------------------ pictures
   A thumbnail brings its own picture into the frame — the built-in `tabs`
   behaviour, with the strip as its tab list — so the set stays a set and nothing
   opens over the page. The frame is square and capped: the picture set is an
   illustration here, not the page's main measure. */
/* Main picture frame: with JavaScript on, every picture shares the one cell, so the
   frames the tabs behaviour hides take no room at all and the thumbnail strip below
   never moves when it runs — measured on a phone as the page's largest layout shift.
   Without JavaScript nothing is hidden and the pictures still stand open in a column,
   as they did before. */
.bottle-gal__main{max-width:min(100%,420px)}
.js .bottle-gal__main{display:grid}
.js .bottle-gal__main>*{grid-area:1/1}
.bottle-gal .ph{background:var(--off);border-color:var(--line)}
.bottle-gal .ph::after{display:none}
.bottle-gal .ph img{object-fit:contain}
.bottle-gal__main .ph[hidden]{display:none}
/* The main picture answers the pointer: it grows inside its own frame and the cursor
   says so, which is the magnifier the owner saw on the reference shop. No script and
   no overlay — the frame crops what the zoom pushes past its edge. */
.bottle-gal__main .ph{cursor:zoom-in}
.bottle-gal__main .ph img{transition:transform .45s var(--ease);
  transform-origin:var(--zx,50%) var(--zy,50%)}
.bottle-gal__main .ph:hover img{transform:scale(1.6)}
@media (hover:none),(prefers-reduced-motion:reduce){
  .bottle-gal__main .ph:hover img{transform:none}
  .bottle-gal__main .ph{cursor:default}
}
/* Four across, at the picture frame's own width: the strip reads as a row of
   pictures rather than as a row of dots, and a fifth picture starts a second row
   by itself. Fixed at four tracks so a narrow screen shrinks the thumbnails
   instead of dropping to three, and capped at the frame's measure so a single-column
   layout does not blow them up. */
.bottle-gal__thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;margin:14px 0 0;padding:0;max-width:420px}
.bottle-thumb{display:block;padding:0;border:1px solid var(--line);border-radius:var(--r);
  background:var(--off);cursor:pointer;overflow:hidden;aspect-ratio:1/1}
.bottle-thumb img{display:block;width:100%;height:100%;object-fit:contain}
.bottle-thumb:hover{border-color:var(--steel-2)}
.bottle-thumb[aria-selected=true]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.bottle-thumb:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ------------------------------------------------- the product and its copy */
/* The heading carries the model's whole name, model number and "(GL-XX Series)"
   included, and the owner wants that on one line. Two things had to change for it:
   the site's own h1 caps every heading at 16em, which no full product name can fit,
   so this heading is let out to its whole column; and its size is measured against
   that column (3.4cqw) rather than the viewport, so a narrower desktop shrinks the
   type instead of breaking the name. The vw size first is the fallback for a browser
   without container units. */
.bottle-side{container-type:inline-size}
.bottle-title{margin:0 0 clamp(18px,2.2vw,26px);max-width:none;
  font-size:clamp(19px,1.85vw,25px);
  font-size:clamp(19px,3.4cqw,28px);line-height:1.2;text-wrap:balance}
.bottle-h{margin:0 0 12px;font-size:clamp(17px,1.5vw,20px)}
.blist + .bottle-h{margin-top:clamp(24px,3vw,34px)}
.blist{list-style:none;margin:0;padding:0}
.blist li{position:relative;margin:0 0 9px;padding:0 0 0 18px;font-size:14.5px;
  line-height:1.6;color:var(--muted)}
.blist li::before{content:"";position:absolute;left:2px;top:.62em;width:5px;height:5px;
  border-radius:50%;background:var(--steel-2)}
.blist b{color:var(--charcoal);font-weight:600}
.bottle-cta{margin:clamp(24px,2.8vw,34px) 0 0}
/* One rule between neighbouring capacity columns, so the table reads across from
   one Item No. to the next instead of running the values together. */
table.bspec tbody td + td{border-left:1px solid var(--line)}

/* ------------------------------------------------------- specification table
   The site's own spec table (table.spec), read one parameter per row and one
   capacity per column. The frame hugs the table instead of drawing an empty
   border beside it, so one capacity is a narrow table and four capacities are a
   wider one; the rule after the parameter column is what separates the parameter
   from its values. It scrolls sideways rather than squeezing if a series ever has
   more capacities than fit. */
.bspec-wrap{width:max-content;max-width:100%;overflow-x:auto}
table.bspec{width:auto;max-width:100%}
table.bspec th,table.bspec td{font-size:14px}
table.bspec tbody th{width:auto;min-width:150px;white-space:nowrap;border-right:1px solid var(--line)}
table.bspec tbody td{min-width:120px}

/* ------------------------------------------------------- model and capacity
   The model's own values and the capacities it is ordered in are read the same
   way — a parameter on the left, its value on the right — so they are printed as
   one row, each table as wide as its own content rather than stretched across
   the page. A long series hands the whole width to the capacity grid, which
   starts a line lower; a narrow screen does the same with both. */
.spec-row{display:flex;flex-wrap:wrap;align-items:flex-start;
  gap:34px clamp(44px,6vw,88px)}
.spec-row .spec-group{min-width:0;max-width:100%}
.spec-row .spec-group + .spec-group{margin-top:0}
.spec-row .spec-group--grid{flex:1 1 100%}
@media (max-width:960px){
  .spec-row{display:block}
  .spec-row .spec-group + .spec-group{margin-top:34px}
}

/* ----------------------------------------------------------- capability cards
   The site's cards stay the site's cards here; what this page changes is the
   colour of the name inside one — the accent blue and its arrow, where the rest of
   the site draws a capability name in its warm signal. The rules below repeat the
   card-and-heading context style.css uses so that they win over it, and the way on
   to the capability index sits a step below the cards. */
.bottle-caps .card h3 a.cap-link{color:var(--accent)}
.bottle-caps .card h3 a.cap-link:hover{color:var(--accent-d)}
.bottle-caps h3 .cap-link::after{color:var(--accent)}
.bottle-caps h3 .cap-link:hover::after{color:var(--accent-d)}
.bottle-caps + .bottle-more{margin-top:clamp(30px,3.4vw,44px)}

/* ------------------------------------------------------------- case cards
   Two cases side by side, each one a card with what it needed on the left and its
   photograph — small, it is a signal here rather than the subject — in a frame on
   the right. A single case keeps the first column's width, so the page does not
   stretch one card across it. */
.relapps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,22px)}
.relapp{display:grid;grid-template-columns:minmax(0,1fr) clamp(120px,18%,160px);
  gap:clamp(18px,2.4vw,32px);align-items:center;padding:clamp(18px,2vw,24px);
  border:1px solid var(--line);border-radius:var(--r);background:var(--white)}
.relapp:hover{border-color:var(--line-2)}
.relapp h3{margin:0 0 10px}
.relapp h3 a{color:var(--charcoal)}
.relapp h3 a:hover{color:var(--accent);text-decoration:none}
.relapp__b p{margin:0 0 10px;font-size:14.5px;color:var(--muted)}
/* The case reads as one line of two: the need stays short enough to be a statement
   rather than a paragraph, and the clamp holds the card's height even when it is
   not. The link under it is a paragraph too, so it is left out. */
.relapp__b>p:not(.more){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.relapp__b .more{margin:0}
.relapp__m .ph{border-color:var(--line)}
/* The case photograph is shown whole: the frame takes the picture's own
   proportions rather than a fixed 4:3 crop, so a photograph that is not 4:3 keeps
   the edges it was taken with. */
.relapp__m .ph{background:var(--light);aspect-ratio:auto}
.relapp__m .ph img{height:auto;object-fit:contain}

/* ------------------------------------------------------------- best sellers
   A pointer into the series rather than a second catalogue: the row is narrower
   than the measure and its cards are the small ones. The line above each title
   names the series alone and reads one step below the site's card meta; the row's
   way on is the site's filled accent button, centred under the row. */
.bottle-sellers .grid.g-4{max-width:900px;gap:clamp(14px,1.8vw,22px)}
/* The series name keeps to one line in a 900px row of four: at this size and
   tracking "Insulated Water Bottle" fits the column whole instead of ending in an
   ellipsis, and every card in the row then reads the same way. */
.bottle-sellers .mcard__i{font-size:9px;letter-spacing:.05em}
/* The row of four is narrow, so the card gives its padding back to the text: the
   series name fits the column whole and the model name keeps its measure. */
.bottle-sellers .mcard__b{padding-left:clamp(14px,1.4vw,20px);padding-right:clamp(14px,1.4vw,20px)}
.bottle-sellers .mcard h3{font-size:16px}
/* The description line only: the series name above the title is a <p> too, and this
   rule used to reach it as well — which is why the label stayed 13.5px however small
   its own rule made it, and kept ending in an ellipsis. */
.bottle-sellers .mcard__b>p:not(.mcard__i){font-size:13.5px}
.bottle-sellers .bottle-more{text-align:center}
.bottle-more{margin:clamp(20px,2.4vw,28px) 0 0}

/* ---------------------------------------------------------------- enquiry
   The site's pale action tint, not the charcoal band: the footer is charcoal, and
   the two were reading as one block. The heading on the left is followed by the
   five lines that decide the price — no paragraph between them — and the card is
   the small form (Name, Email, the requirement box). */
.bottle-enq{background:var(--accent-t)}
.bottle-enq__grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(26px,3.6vw,58px);align-items:start}
.bottle-enq__text .kicker{margin:0 0 14px}
.bottle-enq__text h2{margin:0 0 16px}
.bottle-enq__text .bottle-enq__list{margin:clamp(18px,2vw,24px) 0 0}
.bottle-enq__text .bottle-enq__list li{line-height:1.55}
.bottle-enq__note{margin:clamp(22px,2.6vw,30px) 0 0;max-width:50ch;font-size:14.5px;
  line-height:1.6;color:var(--muted)}
.bottle-enq__card .enquiry-form{padding:clamp(16px,1.8vw,22px)}
.bottle-enq__card .enquiry-form .field-grid{gap:12px 14px;margin-bottom:12px}
.bottle-enq__card .enquiry-form textarea{height:112px;min-height:0}
.bottle-enq__card .enquiry-form .form-foot{margin-top:14px;padding-top:0;gap:10px}
.bottle-enq__card .enquiry-form .form-foot .btn{padding:13px 20px;font-size:14px}

@media (max-width:980px){
  .bottle-top__grid{grid-template-columns:1fr}
  .bottle-gal__main{max-width:min(100%,380px)}
}
@media (max-width:900px){
  .bottle-enq__grid{grid-template-columns:1fr}
  .relapps{grid-template-columns:1fr}
}
@media (max-width:760px){
  .relapp{grid-template-columns:1fr}
  .relapp__m{max-width:240px}
}
@media (max-width:640px){
  /* table.spec stacks its cells on a narrow screen, which is right for the
     two-column table it was written for and wrong here: with one column per
     capacity the values would lose the capacity they belong to. The table keeps
     its rows and scrolls sideways instead. */
  table.bspec tbody tr{display:table-row;border-bottom:0}
  table.bspec tbody th,table.bspec tbody td{display:table-cell;width:auto;
    padding:11px 14px;border-bottom:1px solid var(--line)}
  table.bspec tbody th{padding-top:11px;white-space:nowrap}
  table.bspec tbody td{padding-bottom:11px}
}