/* =========================================================
   APEC Bottle + Interface Enhancements
   Consolidated external stylesheet
   ========================================================= */

/* =========================================================
   Root variables
   ========================================================= */

:root {
  --gap: 2px;
  --tile-pad: 6px;
  --radius: 10px;
  --line: #d7dbe0;
  --txt: #222;
  --muted: #5f6570;

  /* enhancement color */
  --apec-accent: #03a5e0;
}

/* =========================================================
   Product sizes section
   ========================================================= */

.product-sizes {
  margin: 12px 0 4px;
}

.product-sizes > h3 {
  margin: 10px auto;
  font: 600 16px/1.25 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--txt);
}

/* =========================================================
   Bottle grid
   ========================================================= */

.bottle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  gap: var(--gap);
  justify-content: start;
}

/* =========================================================
   Bottle tiles
   ========================================================= */

.tile {
  width: 100px;
  display: grid;
  grid-template-rows: 80px auto;
  gap: 6px;
  padding: var(--tile-pad);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02) inset;
}

/* Silhouette */
.tile::before {
  content: "";
  width: 84px;
  height: 84px;
  justify-self: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f5f7fa center no-repeat;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02) inset;
}

/* Facts */
.tile::after {
  content:
    var(--name) "\A"
    "Vol: " var(--vol) "\A"
    "Case: " var(--case);
  display: block;
  white-space: pre-wrap;
  font: 11px/1.25 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--txt);
  text-align: center;
}

/* =========================================================
   Product number pill
   ========================================================= */

.product-num {
  display: block;
  width: fit-content;
  margin-top: 0.35rem;
  padding: 0.25rem;
  border-radius: 0;
  background-color: var(--apec-accent);
  color: #fff;
  font-size: large;
}

/* =========================================================
   Highlight behavior
   Silhouette-only highlight, no tile glow/border emphasis
   ========================================================= */

.tile.is-highlight {
  border-color: var(--line);
  box-shadow: none;
}

.tile.is-highlight::before {
  background-color: var(--apec-accent);
  border-color: var(--line);
}

/* =========================================================
   Bottle silhouette images
   ========================================================= */

.bottle--dr::before { background-image: url("/images/librariesprovider3/product-page-icons/bottle_DR.png"); }
.bottle--pl5::before { background-image: url("/images/librariesprovider3/product-page-icons/bottle_PL5.png"); }
.bottle--fsc::before { background-image: url("/images/librariesprovider3/product-page-icons/bottle_FS-FSE.png"); }
.bottle--fse::before { background-image: url("/images/librariesprovider3/product-page-icons/bottle_FS-FSE.png"); }
.bottle--fs::before { background-image: url("/images/librariesprovider3/product-page-icons/bottle_FS-FSE.png"); }
.bottle--mp::before { background-image: url("/images/librariesprovider3/product-page-icons/bottle_MP.png"); }
.bottle--mpc::before { background-image: url("/images/librariesprovider3/product-page-icons/bottle_MPC.png"); }
.bottle--mpe::before { background-image: url("/images/librariesprovider3/product-page-icons/bottle_MPE.png"); }
.bottle--gl3::before { background-image: url("/images/librariesprovider3/product-page-icons/bottle_GL3.png"); }
.bottle--d::before { background-image: url("/images/librariesprovider3/product-page-icons/bottle_D.png"); }
.bottle--dtc::before { background-image: url("/images/librariesprovider3/product-page-icons/bottle_DTC.png"); }
.bottle--dtcq::before { background-image: url("/images/librariesprovider3/product-page-icons/bottle_DTCQ.png"); }
.bottle--dtcq128::before { background-image: url("/images/librariesprovider3/product-page-icons/bottle_DTCQ128.png"); }
.bottle--dd::before { background-image: url("/images/librariesprovider3/product-page-icons/bottle_DD.png"); }
.bottle--rtu::before { background-image: url("/images/librariesprovider3/product-page-icons/bottle_RTU.png"); }
.bottle--rtumpe::before { background-image: url("/images/librariesprovider3/product-page-icons/bottle_MPE.png"); }
.bottle--q12::before { background-image: url("/images/librariesprovider3/product-page-icons/bottle_Q12.png"); }
.bottle--l5::before { background-image: url("/images/librariesprovider3/product-page-icons/bottle_L5.png"); }

/* =========================================================
   Bottle facts data
   ========================================================= */

.bottle--dr      { --name: "DR";      --vol: "55 US gal";         --case: "per unit"; --pallet: "4"; }
.bottle--pl5     { --name: "PL5";     --vol: "5 US gal (19 L)";   --case: "per unit"; --pallet: "36"; }
.bottle--fsc     { --name: "FSC";     --vol: "2.5 US gal (9.5 L)";--case: "2 per";    --pallet: "48"; }
.bottle--fse     { --name: "FSE";     --vol: "10L (2.64 US gal)"; --case: "2 per";    --pallet: "48"; }
.bottle--fs      { --name: "FS";      --vol: "2.5 US gal (9.5 L)";--case: "2 per";    --pallet: "48"; }
.bottle--mp      { --name: "MP";      --vol: "1.06 US gal (4 L)"; --case: "4 per";    --pallet: "48"; }
.bottle--mpc     { --name: "MPC";     --vol: "1.06 US gal (4 L)"; --case: "4 per";    --pallet: "48"; }
.bottle--mpe     { --name: "MPE";     --vol: "1.06 US gal (4 L)"; --case: "4 per";    --pallet: "48"; }
.bottle--gl3     { --name: "GL3";     --vol: "1 US gal (3.8 L)";  --case: "3 per";    --pallet: "60"; }
.bottle--d       { --name: "D";       --vol: "1.06 US gal (4 L)"; --case: "4 per";    --pallet: "48"; }
.bottle--dtc     { --name: "DTC";     --vol: "0.53 US gal (2 L)"; --case: "4 per";    --pallet: "88"; }
.bottle--dtcq    { --name: "DTCQ";    --vol: "0.53 US gal (2 L)"; --case: "4 per";    --pallet: "88"; }
.bottle--dtcq128 { --name: "DTCQ128"; --vol: "0.53 US gal (2 L)"; --case: "4 per";    --pallet: "88"; }
.bottle--dd      { --name: "DD";      --vol: "0.50 US gal (1.9 L)"; --case: "3 per";  --pallet: "112"; }
.bottle--rtu     { --name: "RTU";     --vol: "32 US oz (946 ml)"; --case: "12 per";   --pallet: "44 or 55"; }
.bottle--rtumpe  { --name: "RTUMPE";  --vol: "32 US oz (946 ml)"; --case: "12 per";   --pallet: "44 or 55"; }
.bottle--q12     { --name: "Q12";     --vol: "32 US oz (946 ml)"; --case: "12 per";   --pallet: "44 or 55"; }
.bottle--l5      { --name: "L5";      --vol: "5 L (1.32 US gal)"; --case: "2 per";    --pallet: "44 or 55"; }