/* =============================================================================
   The Brand Clan - PRODUCT PAGE
   Loaded after tbc-base.css and tbc-v4.css. Generated by
   scratchpad/build_products.py, so class names are fixed by that template.
   ========================================================================== */

/* ---- breadcrumb band ---------------------------------------------------- */
.v4 .p-crumb{background:var(--paper-2);border-bottom:1px solid var(--rule);padding:15px 0;}
.v4 .p-crumb .crumb{margin-bottom:0;}

/* ---- the two columns ---------------------------------------------------- */
.v4 .p-main .p-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);align-items:start;}
.v4 .p-main .p-grid > *{min-width:0;}
@media(max-width:960px){ .v4 .p-main .p-grid{grid-template-columns:1fr;} }

/* ---- imagery ------------------------------------------------------------ */
.v4 .p-media{position:sticky;top:112px;}
@media(max-width:960px){ .v4 .p-media{position:static;} }
.v4 .p-hero{background:#fff;border:1px solid var(--rule);display:flex;
  align-items:center;justify-content:center;padding:clamp(20px,3vw,38px);aspect-ratio:1/1;}
.v4 .p-hero img{max-width:100%;max-height:100%;object-fit:contain;}
.v4 .p-thumbs{display:flex;flex-wrap:wrap;gap:9px;margin-top:11px;}
.v4 .p-thumbs button{
  width:74px;height:74px;background:#fff;border:1px solid var(--rule);cursor:pointer;
  padding:6px;display:flex;align-items:center;justify-content:center;
  transition:border-color .22s ease;
}
.v4 .p-thumbs button img{max-width:100%;max-height:100%;object-fit:contain;}
.v4 .p-thumbs button:hover{border-color:var(--gold-dp);}
.v4 .p-thumbs button[aria-current="true"]{border-color:var(--ink);border-width:2px;padding:5px;}

/* ---- the buy column ----------------------------------------------------- */
.v4 .p-head{padding-bottom:clamp(20px,2.4vw,28px);border-bottom:1px solid var(--rule);}
.v4 .p-head .eyebrow{display:block;font-size:10.5px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-dp);margin-bottom:11px;}
.v4 .p-buybox h1{font-size:clamp(28px,3.4vw,44px);line-height:1.06;letter-spacing:-.012em;
  margin-bottom:14px;}
.v4 .p-from{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin-bottom:16px;}
.v4 .p-from b{font-family:var(--display);font-size:clamp(25px,2.8vw,34px);font-weight:400;color:var(--ink);}
.v4 .p-from span{font-size:13px;color:var(--body);}
.v4 .p-desc{font-size:15.5px;line-height:1.65;}

.v4 .p-block{padding-top:clamp(22px,2.6vw,32px);}
.v4 .p-block > h2{font-family:var(--text);font-size:10.5px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink);margin-bottom:14px;}

/* ---- the variants table: one stepper and one button per row -------------
   Column headings only: a th[scope=row] carries the option name, so the
   uppercase label styling must not reach it. ------------------------------ */
.v4 .p-tablewrap{border-top:1px solid var(--rule);}
.v4 .p-cart-table{width:100%;border-collapse:collapse;}
.v4 .p-cart-table thead th{
  text-align:left;font-family:var(--text);font-size:9.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--body);padding:11px 0;border-bottom:1px solid var(--rule);
}
.v4 .p-cart-table thead th:last-child{text-align:right;}
.v4 .p-cart-table tbody th,
.v4 .p-cart-table tbody td{padding:14px 0;border-bottom:1px solid var(--rule);vertical-align:middle;}
.v4 .p-cart-table tbody th{text-align:left;font-weight:400;padding-right:16px;}

.v4 .p-cart-table .opt{display:block;font-family:var(--text);font-size:15.5px;font-weight:600;
  color:var(--ink);line-height:1.25;letter-spacing:0;text-transform:none;}
.v4 .p-cart-table .sz{display:block;font-size:13px;color:var(--body);margin-top:2px;
  letter-spacing:0;text-transform:none;font-weight:400;}
.v4 .p-cart-table td.pr{font-family:var(--display);font-size:19px;color:var(--ink);white-space:nowrap;
  padding-right:16px;}
.v4 .p-cart-table .vat{display:block;font-family:var(--text);font-size:11.5px;color:var(--body);}

/* the action cell is a plain cell; it must not inherit the button component */
.v4 .p-cart-table td.cell-act{border:0;background:none;padding:14px 0;overflow:visible;
  border-bottom:1px solid var(--rule);text-align:right;}
.v4 .p-cart-table td.cell-act::before{content:none;}
/* with wrap allowed, the column's min-content is only its widest child, so the
   stepper and the button stack; nowrap keeps them side by side */
.v4 .p-cart-table .tbc-qty-cell{flex-wrap:nowrap;justify-content:flex-end;}
.v4 .p-cart-table .js-add-to-cart{padding:12px 16px;font-size:10px;white-space:nowrap;min-height:44px;}
.v4 .tbc-qty-stepper{border-radius:0;background:var(--paper-2);}
.v4 .tbc-qty-input{background:var(--paper-2);}

@media(max-width:620px){
  /* each row becomes a card so nothing is squeezed into a narrow column */
  .v4 .p-cart-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  .v4 .p-cart-table,.v4 .p-cart-table tbody,.v4 .p-cart-table tr,
  .v4 .p-cart-table tbody th,.v4 .p-cart-table tbody td{display:block;width:100%;}
  .v4 .p-cart-table tr{padding:15px 0;border-bottom:1px solid var(--rule);}
  .v4 .p-cart-table tbody th,.v4 .p-cart-table tbody td{border:0;padding:0;}
  .v4 .p-cart-table td.cell-act{border:0;margin-top:11px;}
  .v4 .p-cart-table td.pr{margin-top:7px;}
  .v4 .p-cart-table .tbc-qty-cell{justify-content:space-between;}
  .v4 .p-cart-table .js-add-to-cart{flex:1;justify-content:center;}
}

/* ---- add-on photographs -------------------------------------------------
   Only the add-ons carry pictures. The size options are the same product in
   three sizes, so a repeated photograph beside each one would be noise; a
   water bag and a crossover stand are genuinely different objects and the
   picture is what tells you which is which.

   The tile is painted the colour of the studio background the supplier shot
   on (white for the gazebo walls, black for the flag bases). That way the
   photograph fills its tile instead of sitting as a black square on cream,
   and no supplier image has to be retouched to sit on our page. ---------- */
.v4 .p-cart-table .acell{display:flex;align-items:center;gap:14px;}
.v4 .p-cart-table .athumb{flex:0 0 auto;width:62px;height:62px;display:block;
  border:1px solid var(--rule);overflow:hidden;}
.v4 .p-cart-table .athumb img{width:100%;height:100%;object-fit:contain;display:block;}
.v4 .p-cart-table .atx{min-width:0;}

/* the gazebos publish three photographs of walls in place against two or four
   wall sizes, so they illustrate the section rather than the rows */
.v4 .ashots{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px;}
.v4 .ashots .ashot{display:block;aspect-ratio:4/3;border:1px solid var(--rule);overflow:hidden;}
.v4 .ashots .ashot img{width:100%;height:100%;object-fit:contain;display:block;}
.v4 .ashots-cap{font-size:12.5px;color:var(--body);margin:-4px 0 16px;}

@media(max-width:620px){
  .v4 .p-cart-table .athumb{width:54px;height:54px;}
  .v4 .ashots{gap:7px;}
}

/* ---- what is in the box ------------------------------------------------- */
.v4 .p-inc{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;}
.v4 .p-inc li{display:flex;gap:10px;align-items:baseline;font-size:14.5px;color:var(--body);}
.v4 .p-inc i{color:var(--gold-dp);font-size:11px;flex-shrink:0;}
.v4 .p-inc-note{font-size:13.5px;color:var(--body);margin-top:12px;}
@media(max-width:520px){ .v4 .p-inc{grid-template-columns:1fr;} }

/* ---- delivery panel ----------------------------------------------------- */
.v4 .p-delivery{background:var(--paper-2);border:1px solid var(--rule);
  padding:clamp(18px,2.2vw,24px);margin-top:clamp(22px,2.6vw,30px);}
.v4 .p-delivery h2{display:flex;align-items:center;gap:10px;font-family:var(--text);
  font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);margin-bottom:13px;}
.v4 .p-delivery h2 i{color:var(--gold-dp);font-size:13px;}
.v4 .p-delivery ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
/* each line is a bold lead-in followed by its sentence. As a flex row those
   became two columns that never lined up, so the text flows as normal text
   with the marker drawn by a pseudo-element instead. */
.v4 .p-delivery li{display:block;position:relative;padding-left:17px;
  font-size:14px;line-height:1.55;color:var(--body);}
.v4 .p-delivery li::before{content:"";position:absolute;left:0;top:.62em;
  width:5px;height:5px;background:var(--gold-dp);}
.v4 .p-delivery li b{color:var(--ink);font-weight:600;}

/* ---- "not sure what you need" help card --------------------------------- */
.v4 .p-help{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  border:1px solid var(--gold);background:var(--gold-wash);
  padding:clamp(16px,2vw,22px);margin-top:clamp(16px,2vw,22px);}
.v4 .p-help .t{min-width:0;flex:1;}
.v4 .p-help b{display:block;font-family:var(--display);font-size:19px;color:var(--ink);
  font-weight:400;line-height:1.2;}
.v4 .p-help span{display:block;font-size:13.5px;color:var(--body);margin-top:3px;}
.v4 .p-help .act{flex-shrink:0;padding:13px 20px;font-size:10.5px;}
@media(max-width:620px){
  /* the copy takes the full width of the box and the button sits under it */
  .v4 .p-help{flex-direction:column;align-items:stretch;gap:15px;}
  .v4 .p-help .t{flex:none;}
  .v4 .p-help .act{width:100%;justify-content:center;}
}

/* the gold callout for products whose base is sold separately */
.v4 .p-note{display:flex;gap:12px;align-items:baseline;border-left:2px solid var(--gold);
  background:var(--gold-wash);padding:14px 16px;margin-top:14px;font-size:14.5px;color:var(--ink);}
.v4 .p-note i{color:var(--gold-dp);font-size:12px;flex-shrink:0;}

/* ---- more in this range ------------------------------------------------- */
.v4 .p-rel-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.8vw,24px);}
.v4 .p-rel-card{display:flex;flex-direction:column;background:var(--paper-2);
  border:1px solid var(--rule-soft);overflow:hidden;
  transition:border-color .3s ease,transform .4s cubic-bezier(.16,1,.3,1);}
.v4 .p-rel-card:hover{border-color:var(--gold);transform:translateY(-4px);}
.v4 .p-rel-card .im{display:flex;align-items:center;justify-content:center;background:#fff;
  border-bottom:1px solid var(--rule-soft);padding:16px;aspect-ratio:1/1;}
.v4 .p-rel-card .im img{max-width:100%;max-height:100%;object-fit:contain;
  transition:transform .6s cubic-bezier(.16,1,.3,1);}
.v4 .p-rel-card:hover .im img{transform:scale(1.05);}
.v4 .p-rel-card .bd{padding:14px 15px 17px;}
.v4 .p-rel-card .nm{display:block;font-family:var(--display);font-size:17px;color:var(--ink);line-height:1.2;}
.v4 .p-rel-card .pr{display:block;font-size:13px;color:var(--body);margin-top:5px;}
@media(max-width:900px){ .v4 .p-rel-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }