/*
Theme Name:   IGSMinis Child
Theme URI:    https://irongatescenery.co.uk
Description:  Restyles the IGSMinis shop over Hello Elementor, and supplies the header,
              footer and the home, print service, trade, events, pre-order, contact
              and reviews page templates. Replaces ONE WooCommerce template,
              woocommerce/archive-product.php (category pages with filters).
              Switching the theme back to Hello Elementor removes everything. Targets
              Woo's own markup, so it reaches product archives and single products.
Author:       IGSMinis
Template:     hello-elementor
Version:      0.42.3
Text Domain:  igsminis-child
*/

/* ==========================================================================
   IGSMinis child theme
   --------------------------------------------------------------------------
   SCOPE: this file styles WooCommerce output only -- shop, category archives,
   single product pages, cart and checkout. Pages built with Elementor (home,
   about) keep their own styling and are deliberately untouched.

   KNOWN LIMIT: if a product or archive page is rendered by an Elementor or
   WooLentor template rather than WooCommerce's own, its markup differs and
   these selectors will not reach it. Where that happens the fix is to switch
   that template back to the WooCommerce default, not to add more CSS here.
   ========================================================================== */

:root{
  --igs-ink:      #16130F;
  --igs-ink-2:    #2A2520;
  --igs-line:     #E3E0DA;
  --igs-wash:     #F7F6F3;
  --igs-yellow:   #F5D313;
  --igs-muted:    #6B655C;
  --igs-green:    #2E7D4F;
  --igs-red:      #B4451F;
  --igs-radius:   5px;
  --igs-max:      1400px;
}

/* --------------------------------------------------------------------------
   1. Typography
   -------------------------------------------------------------------------- */
body,
.woocommerce{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--igs-ink);
}

.woocommerce .page-title,
.woocommerce div.product .product_title,
.woocommerce-products-header__title,
h1.entry-title{
  font-family: "Barlow Condensed", Inter, sans-serif;
  font-weight: 700;
  letter-spacing: .5px;
  line-height: 1.02;
  font-size: clamp(34px, 4vw, 52px);
  margin-bottom: 6px;
}

/* --------------------------------------------------------------------------
   2. Content width -- centred column rather than edge to edge
   -------------------------------------------------------------------------- */
.woocommerce .site-main,
.woocommerce-page .site-main{
  max-width: var(--igs-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* --------------------------------------------------------------------------
   3. Buttons -- one dark button, used everywhere
   -------------------------------------------------------------------------- */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt{
  background: var(--igs-ink);
  color: #fff;
  border: 0;
  border-radius: var(--igs-radius);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  padding: 12px 20px;
  text-transform: none;
  transition: background .15s ease;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover{
  background: #000;
  color: #fff;
}

/* Buttons that are links ("Select options", "Read more", "Add to basket" on
   archives) were rendering black on black. They are <a> elements, so a link
   colour from Elementor's global kit or a :visited rule was beating
   `.woocommerce a.button` on specificity and repainting the text dark.
   Every link state is pinned here so the label always reads against the dark
   fill. !important is deliberate: this is defensive against whatever the
   plugin stack sets, and losing it means an unreadable button. */
.woocommerce a.button,
.woocommerce a.button:link,
.woocommerce a.button:visited,
.woocommerce a.button:hover,
.woocommerce a.button:focus,
.woocommerce a.button:active,
.woocommerce a.added_to_cart,
.woocommerce a.added_to_cart:link,
.woocommerce a.added_to_cart:visited,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.button:visited{
  color: #fff !important;
  text-decoration: none !important;
}

/* the single-product add to cart is the one button that should shout */
.woocommerce div.product form.cart .button{
  font-size: 17px;
  font-weight: 700;
  padding: 18px 34px;
}

/* --------------------------------------------------------------------------
   4. Breadcrumb
   -------------------------------------------------------------------------- */
.woocommerce .woocommerce-breadcrumb{
  font-size: 13px;
  color: var(--igs-muted);
  margin: 18px 0 14px;
}
.woocommerce .woocommerce-breadcrumb a{
  color: var(--igs-muted);
  text-decoration: none;
}
.woocommerce .woocommerce-breadcrumb a:hover{ text-decoration: underline; }

/* --------------------------------------------------------------------------
   5. Category intro copy
   Category descriptions are currently empty on every category. When they are
   filled in, this is how they render: readable measure, not full width.
   -------------------------------------------------------------------------- */
.woocommerce .term-description,
.woocommerce-products-header .term-description{
  font-size: 15.5px;
  line-height: 1.62;
  color: #3B362F;
  max-width: 930px;
  margin-bottom: 22px;
}

/* --------------------------------------------------------------------------
   6. Result count + sorting
   -------------------------------------------------------------------------- */
.woocommerce .woocommerce-result-count{
  font-size: 14px;
  color: var(--igs-muted);
  margin-bottom: 16px;
}
.woocommerce .woocommerce-ordering select{
  padding: 9px 12px;
  border: 1px solid var(--igs-line);
  border-radius: var(--igs-radius);
  font-size: 14px;
  background: #fff;
}

/* --------------------------------------------------------------------------
   7. PRODUCT GRID
   Denser than the default. Customers buy in fives and sixes, so more products
   per screen and a visible price and Add on every tile.
   -------------------------------------------------------------------------- */
.woocommerce ul.products{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin: 0 0 32px;
}
@media (min-width: 700px){
  .woocommerce ul.products{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1000px){
  .woocommerce ul.products{ grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1280px){
  .woocommerce ul.products{ grid-template-columns: repeat(5, 1fr); }
}

/* kill the float/percentage widths Woo ships by default */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  clear: none !important;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--igs-line);
  border-radius: var(--igs-radius);
  overflow: hidden;
  background: #fff;
  transition: box-shadow .15s ease, transform .15s ease;
}
.woocommerce ul.products li.product:hover{
  box-shadow: 0 6px 18px rgba(22,19,15,.10);
  transform: translateY(-2px);
}
.woocommerce ul.products li.product::before,
.woocommerce ul.products li.product::after{ content: none !important; }

/* square, consistent image well -- the catalogue photography varies a lot, and a
   fixed aspect ratio at least stops the grid jumping about */
.woocommerce ul.products li.product a img{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin: 0;
  display: block;
  background: var(--igs-wash);
  border-radius: 0;
}

/* Titles are clamped to two lines. Product names here run from "Chests" to
   "Wasteland Reinforced Container", and left unclamped a three-line name
   pushes everything below it out of step with the tile beside it. */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--igs-ink);
  padding: 11px 12px 0;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc((14.5px * 1.3 * 2) + 11px);
}
.woocommerce ul.products li.product .price{
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 25px;
  color: var(--igs-ink);
  padding: 6px 12px 0;
  margin: 0;
  display: block;
}
.woocommerce ul.products li.product .price del{
  font-size: 15px; opacity: .5; margin-right: 6px;
}
.woocommerce ul.products li.product .price ins{ text-decoration: none; }

/* The saving, sat with the price.
   ---------------------------------------------------------------------------
   This replaced the corner sale flash. A badge pinned to a corner of the image
   aligned with nothing - the tile's name, price and button are centred - which
   is why it read as stuck on however it was styled. Here it sits on the same
   line as the number it is talking about, and inherits the centring.

   Sized DOWN from the price deliberately: the price is the headline, the
   saving is a footnote to it. Making them the same weight gave the tile two
   things competing to be read first. */
.igs-save{
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  background: var(--igs-ink);
  color: var(--igs-yellow);
  border-radius: 2px;
  padding: 2px 6px 1px;
  font-family: "Barlow Condensed", Inter, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  position: relative;
  top: -2px;
  /* "Up to -30%" is the longest this gets. It must not break across lines and
     leave a stray "-30%" under the price. */
  white-space: nowrap;
}
/* The single product price is 46px, so the chip has to grow with it or it
   looks like a stray tag. */
.woocommerce div.product p.price .igs-save,
.woocommerce div.product span.price .igs-save{
  font-size: 18px;
  padding: 3px 9px 2px;
  margin-left: 12px;
  top: -6px;
}

/* The button is pinned to the bottom of the tile with margin-top:auto, so it
   lands on the same line across the whole row no matter how tall the price or
   title above it is. Previously the price carried the auto margin and the
   button simply followed it, which broke the line whenever a price showed a
   range ("£19.95 - £54.95"), a sale strike-through, or a star rating. */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart{
  margin: 12px 12px;
  margin-top: auto;
  align-self: stretch;
  text-align: center;
  font-size: 13.5px;
  padding: 10px 18px;
}

/* Star ratings in the grid: keep them, tone them down.
   The horizontal margin MUST stay `auto`. WooCommerce centres this element
   with `margin: 0 auto`, and the tile's other contents are centred too, so
   setting a fixed left margin here pinned the stars to the left while the
   title, price and button stayed centred. */
/* The stars and their stand-in share ONE box, so a tile without reviews takes
   exactly as much vertical space as one with them and the prices below line up
   across the row. Sized in ems off the font-size, so changing the star size
   moves the placeholder with it and they cannot drift apart. */
.woocommerce ul.products li.product .star-rating,
.woocommerce ul.products li.product .igs-rating-empty{
  display: block;
  font-size: 12px;
  line-height: 1;
  height: 1em;
  margin: 8px auto 0;
}
.woocommerce ul.products li.product .star-rating{ color: #E0A500; }

/* sale flash
   ---------------------------------------------------------------------------
   This set top/left/right but NOTHING WAS POSITIONED. The tile is a flex
   column with no position:relative and the badge had no position:absolute, so
   those offsets did nothing and the badge rendered as a flex ITEM - a red bar
   wedged into the tile's flow above the image instead of a corner flash.
   Hello Elementor is minimal enough that Woo's own positioning never arrived.

   Both halves are needed: the offsets are meaningless without a positioned
   ancestor, which is why setting one alone would not have fixed it. */
/* Every plausible positioning ancestor, because the badge is a sibling of the
   image link in a plain Woo loop but plugins and builders wrap it differently.
   Whichever is nearest, the badge lands in the corner of the picture. */
.woocommerce ul.products li.product{ position: relative; }
.woocommerce ul.products li.product a img{ display: block; }
.woocommerce div.product div.images{ position: relative; }
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper{ position: relative; }

/* The badge itself.
   ---------------------------------------------------------------------------
   Was bright red, uppercase, bold, letter-spaced and pill-shaped - every tell
   of a discount-bin sticker, on a brand that is warm charcoal and yellow
   everywhere else. It read as cheap because it was borrowed styling, not
   because a sale badge is inherently cheap.

   Now the same dark-chip-with-yellow-text device the next-show band and the
   pre-order band already use, so it belongs to the page. Smaller, tighter
   radius, no letter-spacing shout, and the text is the actual saving ("-25%")
   rather than the word SALE - see igs_sale_flash() in functions.php. */
.woocommerce span.onsale{
  position: absolute;
  /* Above the image and any gallery controls, but it is decoration - never let
     it swallow a click meant for the product link underneath. */
  z-index: 5;
  pointer-events: none;

  /* CORNER. Change these two lines together to move it; nothing else needs to
     change. Top RIGHT is WooCommerce's own convention and keeps the badge off
     the product name and price, which sit left. */
  top: 12px;
  right: 12px;
  left: auto;
  bottom: auto;

  background: var(--igs-ink);
  color: var(--igs-yellow);
  border-radius: 2px;
  font-family: "Barlow Condensed", Inter, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: none;
  font-variant-numeric: tabular-nums;
  padding: 3px 8px 2px;
  margin: 0;
  line-height: 1.15;
  /* Reads on a pale product shot without needing a border. */
  box-shadow: 0 1px 6px rgba(22, 19, 15, .28);
  /* Woo ships this as a fixed-size circle in some builds; the theme wants a
     chip that sizes to its text. */
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  text-align: center;
}

/* On the single product page the image is much larger, so the same chip at
   tile size looks lost against it. */
.woocommerce div.product span.onsale{
  top: 16px;
  right: 16px;
  font-size: 17px;
  padding: 4px 10px 3px;
}

/* --------------------------------------------------------------------------
   8. SINGLE PRODUCT
   -------------------------------------------------------------------------- */
.woocommerce div.product{ padding-top: 6px; }

.woocommerce div.product div.images{ width: 56%; }
.woocommerce div.product div.summary{ width: 40%; margin-bottom: 2em; }
@media (max-width: 900px){
  .woocommerce div.product div.images,
  .woocommerce div.product div.summary{ width: 100%; }

  /* PHONES: photo, then name, price and Add to basket, THEN the bundle.
     The bundle is printed straight after the gallery so desktop can place it
     under the photo (below). In plain document order on a phone that put
     "Complete the scene" - four products and a £376 total - between the photo
     and the product's own name and price, which sat two screens down with Add
     to basket at 2.6. `order` moves it without touching the markup, so the
     desktop layout is unchanged. Everything else after the summary (tabs,
     related) keeps its place behind the bundle. */
  .woocommerce div.product{ display: flex; flex-direction: column; }
  .woocommerce div.product > *{ order: 3; }
  .woocommerce div.product > div.images{ order: 1; }
  .woocommerce div.product > div.summary{ order: 2; }
}

/* Grid, so the bundle can sit UNDER THE IMAGE instead of at the bottom of the
   summary. WooCommerce floats the gallery and the summary, and a third block
   in a float layout lands wherever it lands. Grid places it.

   The left column was mostly empty below the photo while the right column ran
   long enough that the description tab was several screens down. Moving one
   tall box across uses the space and shortens the scroll at the same time.

   Everything else in div.product - tabs, upsells, related - spans both columns
   via the `> *` default, so nothing new has to be named as the page grows. */
@media (min-width: 901px){
  .woocommerce div.product{
    display: grid;
    grid-template-columns: 56% 1fr;
    column-gap: 4%;
    align-items: start;
  }
  .woocommerce div.product > *{ grid-column: 1 / -1; min-width: 0; }
  .woocommerce div.product div.images{
    grid-column: 1; grid-row: 1; width: auto; float: none; margin: 0;
  }
  .woocommerce div.product .igs-bundle{
    grid-column: 1; grid-row: 2; margin: 18px 0 0;
  }
  /* Spanning both rows keeps the summary top-aligned with the photo whether or
     not this product has a bundle under it. */
  .woocommerce div.product div.summary{
    grid-column: 2; grid-row: 1 / span 2; width: auto; float: none; margin: 0;
  }
}

.woocommerce div.product div.images img{
  border: 1px solid var(--igs-line);
  border-radius: 6px;
  background: var(--igs-wash);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price{
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 46px;
  line-height: 1;
  color: var(--igs-ink);
  margin: 4px 0 4px;
}
.woocommerce div.product p.price del{ font-size: 26px; opacity: .45; }
.woocommerce div.product p.price ins{ text-decoration: none; }

.woocommerce div.product .woocommerce-product-details__short-description{
  font-size: 16px;
  line-height: 1.65;
  color: #3B362F;
  margin: 14px 0 20px;
}

.woocommerce div.product form.cart{ margin-top: 18px; }
.woocommerce div.product form.cart div.quantity{ margin-right: 12px; }
.woocommerce .quantity .qty{
  height: 54px;
  width: 84px;
  border: 1px solid var(--igs-line);
  border-radius: var(--igs-radius);
  font-size: 17px;
  font-weight: 600;
  text-align: center;
}
/* Forced for the same reason as the finish boxes: the site carries a global
   button/field style that renders both of these as grey lozenges, and it beats
   a plain element selector. */
.woocommerce div.product form.cart .quantity .qty,
.woocommerce .quantity input.qty{
  appearance: none !important; -webkit-appearance: none !important;
  background: #fff !important; color: var(--igs-ink) !important;
  border: 1px solid var(--igs-line) !important;
  border-radius: 3px !important; box-shadow: none !important;
  height: 54px !important; width: 84px !important;
}

/* ADD TO BASKET. The most important control on the page, and it was rendering
   as a grey lozenge indistinguishable from a disabled field.
   Two states, deliberately different:
     - ENABLED  dark ink, white, the same button as everywhere else on the site
     - DISABLED WooCommerce genuinely disables this until a variation is
                chosen, so it must read as "not yet", not as broken. Muted and
                dashed rather than a dead grey slab that looks like a fault. */
.woocommerce div.product form.cart button.single_add_to_cart_button,
.woocommerce div.product form.cart .single_add_to_cart_button{
  appearance: none !important; -webkit-appearance: none !important;
  background: var(--igs-ink) !important;
  background-image: none !important;
  color: #fff !important;
  border: 2px solid var(--igs-ink) !important;
  border-radius: 3px !important;
  box-shadow: none !important; text-shadow: none !important;
  font-family: "Barlow Condensed", Inter, sans-serif !important;
  font-size: 19px !important; font-weight: 700 !important;
  letter-spacing: .02em !important; text-transform: none !important;
  padding: 0 34px !important; height: 54px !important; line-height: 1 !important;
  cursor: pointer !important;
  transition: filter .12s ease, transform .12s ease;
}
.woocommerce div.product form.cart button.single_add_to_cart_button:hover{
  filter: brightness(1.12);
}
.woocommerce div.product form.cart button.single_add_to_cart_button:active{
  transform: translateY(1px);
}
.woocommerce div.product form.cart button.single_add_to_cart_button:focus-visible{
  outline: 2px solid var(--igs-yellow) !important; outline-offset: 2px;
}
.woocommerce div.product form.cart button.single_add_to_cart_button.disabled,
.woocommerce div.product form.cart button.single_add_to_cart_button.wc-variation-selection-needed,
.woocommerce div.product form.cart button.single_add_to_cart_button:disabled{
  background: var(--igs-wash) !important;
  color: var(--igs-muted) !important;
  border: 2px dashed var(--igs-hline, #D9D2C4) !important;
  cursor: not-allowed !important;
  filter: none !important;
}

/* variation dropdowns (Unpainted / Painted etc) */
.woocommerce div.product form.cart .variations select{
  padding: 13px 14px;
  border: 1px solid var(--igs-line);
  border-radius: var(--igs-radius);
  font-size: 15px;
  background: #fff;
  min-width: 220px;
}
.woocommerce div.product form.cart .variations th{
  font-size: 12.5px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--igs-muted);
  font-weight: 600;
}

/* stock line */
.woocommerce div.product .stock{
  color: var(--igs-green);
  font-weight: 600;
  font-size: 14.5px;
}
.woocommerce div.product .stock.out-of-stock{ color: var(--igs-red); }

/* meta (SKU, categories) -- quieten it */
.woocommerce div.product .product_meta{
  font-size: 13px;
  color: var(--igs-muted);
  border-top: 1px solid var(--igs-line);
  padding-top: 14px;
  margin-top: 18px;
}

/* --------------------------------------------------------------------------
   9. Tabs (Description / Additional information / Reviews)
   Where the Scale / Material / Contents data lives once it is filled in as
   product attributes.
   -------------------------------------------------------------------------- */
.woocommerce div.product .woocommerce-tabs ul.tabs{
  padding: 0;
  margin: 40px 0 0;
  border-bottom: 1px solid var(--igs-line);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{ border: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background: none;
  border: 0;
  border-radius: 0;
  margin: 0 26px 0 0;
  padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{ content: none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  font-family: "Barlow Condensed", sans-serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .6px;
  color: var(--igs-muted);
  padding: 12px 0;
  display: block;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{
  color: var(--igs-ink);
  box-shadow: inset 0 -3px 0 var(--igs-ink);
}
.woocommerce div.product .woocommerce-tabs .panel{
  font-size: 16px;
  line-height: 1.68;
  color: #3B362F;
  max-width: 900px;
  padding-top: 20px;
}

/* Description body.
   Until 21 Sep 2026 almost every paragraph in a product description was wrapped
   in <h2>, so the whole description rendered at heading size - which is what
   made these pages look shouty. The markup was rebuilt to <p> / <h3> / <ul>
   (scripts/one_off_fix_woo_description_html_21sep.py), and these rules are what
   that rebuilt markup needs to read properly. Without them <h3> falls back to
   the parent theme's size and the recovered <ul> lists lose their bullets. */
.woocommerce div.product .woocommerce-tabs .panel > p{ margin: 0 0 14px; }
.woocommerce div.product .woocommerce-tabs .panel > p:last-child{ margin-bottom: 0; }
.woocommerce div.product .woocommerce-tabs .panel h3{
  font-family: "Barlow Condensed", Inter, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  margin: 26px 0 10px;
  color: var(--igs-ink);
}
.woocommerce div.product .woocommerce-tabs .panel h3:first-child{ margin-top: 0; }
.woocommerce div.product .woocommerce-tabs .panel h3 strong{ font-weight: inherit; }
.woocommerce div.product .woocommerce-tabs .panel ul{
  margin: 0 0 16px; padding-left: 20px; list-style: disc;
}
.woocommerce div.product .woocommerce-tabs .panel ul li{
  margin: 0 0 5px; padding: 0; list-style: disc;
}
/* Woo's own reset puts pseudo-bullets on some list items; the real marker is
   back now, so suppress the duplicate. */
.woocommerce div.product .woocommerce-tabs .panel ul li::before,
.woocommerce div.product .woocommerce-tabs .panel ul li::after{ content: none; }

/* attributes table -- this is the "at a glance" spec block */
.woocommerce div.product .shop_attributes{
  border: 1px solid var(--igs-line);
  border-radius: 6px;
  border-collapse: separate;
  overflow: hidden;
  max-width: 640px;
}
.woocommerce div.product .shop_attributes th{
  background: var(--igs-wash);
  font-size: 12.5px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--igs-muted);
  font-weight: 600;
  padding: 13px 18px;
  width: 190px;
}
.woocommerce div.product .shop_attributes td{
  font-size: 15.5px;
  font-weight: 600;
  padding: 13px 18px;
  font-style: normal;
}
.woocommerce div.product .shop_attributes td p{ margin: 0; }

/* --------------------------------------------------------------------------
   10. Related / upsells
   -------------------------------------------------------------------------- */
.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2,
.woocommerce .cross-sells > h2{
  font-family: "Barlow Condensed", sans-serif;
  font-size: 28px;
  font-weight: 700;
  margin: 46px 0 16px;
}

/* --------------------------------------------------------------------------
   11. Notices
   -------------------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  border-top: 0;
  border-left: 4px solid var(--igs-ink);
  background: var(--igs-wash);
  border-radius: var(--igs-radius);
  font-size: 15px;
}
.woocommerce-message::before,
.woocommerce-info::before{ color: var(--igs-ink); }
.woocommerce-message{ border-left-color: var(--igs-green); }
.woocommerce-message::before{ color: var(--igs-green); }
.woocommerce-error{ border-left-color: var(--igs-red); }

/* --------------------------------------------------------------------------
   12. IGS trust strip + free-delivery nudge
   Markup added by functions.php via WooCommerce hooks, so no template file is
   replaced. Comment the hooks out in functions.php to remove.
   -------------------------------------------------------------------------- */
.igs-trust{
  background: var(--igs-yellow);
  color: var(--igs-ink);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px 46px;
  padding: 10px 20px;
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
}
.igs-trust b{ font-weight: 800; }

.igs-ship{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--igs-wash);
  border: 1px solid var(--igs-line);
  border-radius: var(--igs-radius);
  padding: 12px 16px;
  font-size: 14.5px;
  margin: 0 0 20px;
}
.igs-ship .igs-bar{
  flex: 0 0 260px;
  height: 8px;
  background: #E1DED7;
  border-radius: 6px;
  overflow: hidden;
}
.igs-ship .igs-bar i{ display: block; height: 100%; background: var(--igs-green); }
.igs-ship.is-free{ color: var(--igs-green); font-weight: 600; }

/* reassurance grid under Add to Basket -- two up on phones, four across on
   desktop, so it never becomes a tall column pushing the tabs off screen */
.igs-reassure{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--igs-line);
  border: 1px solid var(--igs-line);
  border-radius: var(--igs-radius);
  overflow: hidden;
  margin: 22px 0 0;
}
@media (min-width: 900px){
  .igs-reassure{ grid-template-columns: repeat(4, 1fr); }
}
.igs-reassure__item{
  background: #fff;
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.igs-reassure__item b{
  font-size: 13px;
  font-weight: 700;
  color: var(--igs-ink);
  line-height: 1.25;
}
.igs-reassure__item span,
.igs-reassure__item a{
  font-size: 12.5px;
  color: var(--igs-muted);
  line-height: 1.35;
}
.igs-reassure__item a{ text-decoration: underline; }

/* --------------------------------------------------------------------------
   13. Cart & checkout -- light touch, just consistency
   -------------------------------------------------------------------------- */
.woocommerce table.shop_table{
  border: 1px solid var(--igs-line);
  border-radius: 6px;
  border-collapse: separate;
}
.woocommerce table.shop_table th{
  font-size: 12.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--igs-muted);
}
.woocommerce-checkout #payment{
  background: var(--igs-wash);
  border-radius: 6px;
}

/* --------------------------------------------------------------------------
   14. At a glance spec block
   -------------------------------------------------------------------------- */
.igs-spec{
  border: 1px solid var(--igs-line);
  border-radius: var(--igs-radius);
  overflow: hidden;
  margin: 20px 0 0;
}
.igs-spec__head{
  background: var(--igs-wash);
  border-bottom: 1px solid var(--igs-line);
  padding: 9px 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--igs-muted);
}
.igs-spec dl{ margin: 0; display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 600px){ .igs-spec dl{ grid-template-columns: 1fr; } }
.igs-spec dl > div{
  padding: 10px 14px;
  border-bottom: 1px solid var(--igs-line);
  border-right: 1px solid var(--igs-line);
}
.igs-spec dt{
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--igs-muted); margin: 0 0 2px;
}
.igs-spec dd{ margin: 0; font-size: 14.5px; font-weight: 600; color: var(--igs-ink); }

/* --------------------------------------------------------------------------
   15. Finish selector -- the variation dropdown as priced boxes.
   The original <select> is hidden, not removed: Woo's own variation script
   still drives price and availability off it.
   -------------------------------------------------------------------------- */
/* Hidden the screen-reader way, pinned to 1px. It was only opacity 0 and
   height 0, so it kept its full width - 1,092px from a global select rule -
   and, positioned from the variations cell, ran 500px past the right edge.
   Every product with a finish choice scrolled sideways on desktop. */
.variations.igs-has-boxes select{
  position: absolute !important; opacity: 0; pointer-events: none;
  left: 0 !important; top: 0 !important;
  width: 1px !important; min-width: 0 !important; max-width: 1px !important;
  height: 1px !important; overflow: hidden; clip-path: inset(50%);
}
.igs-finish{ display: flex; gap: 10px; flex-wrap: wrap; }
.igs-finish__opt{
  flex: 1 1 140px;
  display: flex; flex-direction: column; gap: 2px;
  text-align: left;
  background: #fff;
  border: 2px solid var(--igs-line);
  border-radius: var(--igs-radius);
  padding: 11px 14px;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.igs-finish__opt:hover{ border-color: #bdb8ae; }
.igs-finish__opt.is-on{ border-color: var(--igs-ink); background: var(--igs-wash); }
.igs-finish__name{ font-size: 14px; font-weight: 700; color: var(--igs-ink); }
.igs-finish__price{ font-size: 13px; color: var(--igs-muted); font-weight: 600; }

/* THE OVERRIDES. The boxes are real <button> elements - that is what makes them
   keyboard-operable and announce themselves correctly - and the site carries a
   global button style that was winning: near-black fill, grey text on top of
   it, and a large asymmetric radius. The result was a pair of unreadable dark
   lozenges where the finish choice should be.
   A single class cannot beat a global `.elementor-kit-NNN button`, so the
   properties that decide legibility are forced. `appearance: none` first,
   because a <button> also carries the browser's own chrome. */
.woocommerce div.product form.cart .igs-finish__opt,
.igs-finish__opt{
  appearance: none !important; -webkit-appearance: none !important;
  background: #fff !important;
  background-image: none !important;
  color: var(--igs-ink) !important;
  border: 2px solid var(--igs-line) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-family: inherit !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-align: left !important;
  padding: 11px 14px !important;
  min-height: 0 !important;
  height: auto !important;
  width: auto !important;
  line-height: 1.3 !important;
}
.woocommerce div.product form.cart .igs-finish__opt:hover,
.igs-finish__opt:hover{ border-color: var(--igs-ink) !important; background: #fff !important; }
.woocommerce div.product form.cart .igs-finish__opt.is-on,
.igs-finish__opt.is-on{
  border-color: var(--igs-ink) !important; background: var(--igs-wash) !important;
}
.igs-finish__opt:focus-visible{ outline: 2px solid var(--igs-yellow) !important; outline-offset: 2px; }
.igs-finish__opt .igs-finish__name{ color: var(--igs-ink) !important; font-size: 14.5px !important; }
.igs-finish__opt .igs-finish__price{ color: var(--igs-muted) !important; font-size: 13px !important; }
.igs-finish__opt.is-on .igs-finish__price{ color: var(--igs-ink) !important; }

/* The variation row sat on a grey slab with the label crushed into a narrow
   left column, leaving the boxes squeezed against the right edge. Collapsing
   the table to blocks puts the label above and gives the choice the full
   width - the same stacking every other block on this page uses. */
.woocommerce div.product form.cart .variations,
.woocommerce div.product form.cart .variations tbody,
.woocommerce div.product form.cart .variations tr,
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td{
  display: block !important; width: 100% !important;
  background: transparent !important; border: 0 !important;
  padding: 0 !important; margin: 0 !important;
}
.woocommerce div.product form.cart .variations th.label{ margin-bottom: 8px !important; }
.woocommerce div.product form.cart .variations th.label label{
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--igs-muted); margin: 0;
}
.woocommerce div.product form.cart .variations + .single_variation_wrap{ margin-top: 16px; }
.woocommerce div.product form.cart .reset_variations{
  display: inline-block; margin-top: 8px; font-size: 12.5px; color: var(--igs-muted);
}

/* --------------------------------------------------------------------------
   16. Complete the scene bundle
   -------------------------------------------------------------------------- */
.igs-bundle{
  border: 1px solid var(--igs-line);
  border-radius: var(--igs-radius);
  margin: 24px 0 0;
  overflow: hidden;
}
.igs-bundle__head{
  background: var(--igs-wash);
  border-bottom: 1px solid var(--igs-line);
  padding: 11px 14px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
}
.igs-bundle__head b{ font-size: 15px; color: var(--igs-ink); }
.igs-bundle__head span{ font-size: 12.5px; color: var(--igs-muted); }
.igs-bundle__row{
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--igs-line);
  cursor: pointer;
}
.igs-bundle__row input{ flex: 0 0 auto; width: 17px; height: 17px; accent-color: var(--igs-ink); }
.igs-bundle__img img{
  width: 46px; height: 46px; object-fit: cover; display: block;
  border-radius: 4px; background: var(--igs-wash);
}
.igs-bundle__name{ flex: 1 1 auto; font-size: 14px; line-height: 1.3; color: var(--igs-ink); }
.igs-bundle__name em{ color: var(--igs-muted); font-style: normal; font-size: 12.5px; }
.igs-bundle__price{ font-weight: 700; font-size: 15px; white-space: nowrap; }
.igs-bundle__foot{
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; padding: 13px 14px;
}
.igs-bundle__total{ font-size: 15px; color: var(--igs-ink); }
.igs-bundle__foot .button[disabled]{ opacity: .45; cursor: not-allowed; }
@media (max-width: 480px){
  .igs-bundle__foot .button{ width: 100%; }
}

/* --------------------------------------------------------------------------
   17. HEADER
   The header is an Elementor template, so this restyles what is already
   there rather than rebuilding it: logo, nav, Advanced Woo Search and the
   menu cart are all present already.

   Scoped entirely to .elementor-location-header, so nothing here can leak
   into page content. Delete this whole section to revert the header alone.
   -------------------------------------------------------------------------- */
.elementor-location-header{
  background: var(--igs-ink);
}
.elementor-location-header,
.elementor-location-header a{ color: #fff; }

/* nav links */
.elementor-location-header .elementor-nav-menu a{
  color: #EDEAE4;
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .2px;
  padding: 14px 16px;
  transition: color .12s ease;
}
.elementor-location-header .elementor-nav-menu a:hover,
.elementor-location-header .elementor-nav-menu a.elementor-item-active{
  color: var(--igs-yellow);
}
/* Elementor draws its own underline on hover; the colour change is enough */
.elementor-location-header .elementor-nav-menu--main .elementor-item:before,
.elementor-location-header .elementor-nav-menu--main .elementor-item:after{
  display: none !important;
}

/* dropdowns need a solid dark panel, not the inherited transparent one */
.elementor-location-header .elementor-nav-menu--dropdown{
  background: var(--igs-ink-2);
}
.elementor-location-header .elementor-nav-menu--dropdown a{
  color: #EDEAE4;
  font-size: 13.5px;
}

/* Advanced Woo Search box */
.elementor-location-header .aws-container .aws-search-field{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 6px;
  color: #fff;
  font-size: 14px;
  height: 42px;
  padding: 0 14px;
}
.elementor-location-header .aws-container .aws-search-field::placeholder{
  color: rgba(255,255,255,.55);
}
.elementor-location-header .aws-container .aws-search-field:focus{
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.34);
  outline: none;
}

/* basket as the one yellow thing in the bar, so it is the obvious target */
.elementor-location-header .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-button{
  background: var(--igs-yellow);
  color: var(--igs-ink);
  border: 0;
  border-radius: 6px;
  font-weight: 800;
  font-size: 14px;
  padding: 11px 18px;
}
.elementor-location-header .elementor-menu-cart__toggle .elementor-button:hover{
  background: #ffe14d;
  color: var(--igs-ink);
}
.elementor-location-header .elementor-menu-cart__toggle .elementor-button-icon,
.elementor-location-header .elementor-menu-cart__toggle .elementor-button-text{
  color: var(--igs-ink);
}

/* the trust strip sits directly under the bar, so lose the gap between them */
.igs-trust{ margin-top: 0; }

/* mobile: the burger needs to read against the dark bar */
.elementor-location-header .elementor-menu-toggle{
  color: #fff;
  background: transparent;
}

/* --------------------------------------------------------------------------
   18. HOME PAGE  (template-home.php)

   REWRITTEN 20 Sep 2026 against mockups/SITE_home_concept_v2.png.

   The one structural change that matters: the dark sections are now FULL BLEED.
   Previously every section sat inside .igs-home { max-width: 1400px }, so the
   hero and print bands were rounded boxes floating on white. In the mockup they
   run edge to edge and the page alternates dark / paper / dark, which is what
   gives it its weight. Each band now spans the viewport and holds an .igs-wrap
   that constrains the CONTENT instead.

   Content width is 1180px, not the 1400px used elsewhere - the mockup's columns
   are noticeably tighter than the shop archive's.
   -------------------------------------------------------------------------- */
.igs-home{
  --igs-paper:  #F7F3E9;   /* warm cream ground */
  --igs-panel:  #EBE6DA;   /* review band / licensed strip */
  --igs-hline:  #D9D2C4;
  --igs-wrap:   1180px;
  background:var(--igs-paper);
  margin:0;
  padding:0 0 0;
}
.igs-home h2,
.igs-home h1{ font-family:"Barlow Condensed",Inter,sans-serif; font-weight:700;
  line-height:.95; letter-spacing:-.01em; margin:0; }

/* The container every band holds. */
.igs-wrap{ max-width:var(--igs-wrap); margin:0 auto; padding:0 24px; }

/* Gold stars. This had NO colour rule anywhere in the file, so every star glyph
   simply inherited its parent's colour - white on the dark hero, near-black in
   the reviews band. */
.igs-home .igs-stars,
.igs-trust .igs-stars{ color:var(--igs-yellow); letter-spacing:2px; }

/* buttons ------------------------------------------------------------------ */
.igs-btn{
  display:inline-flex; align-items:center; gap:.4em;
  font-family:"Barlow Condensed",Inter,sans-serif; font-weight:700; font-size:19px;
  letter-spacing:.02em; padding:13px 26px; border-radius:3px; line-height:1;
  text-decoration:none; border:0; cursor:pointer;
  transition:filter .12s ease, transform .12s ease;
}
.igs-btn:hover{ filter:brightness(1.07); }
.igs-btn:active{ transform:translateY(1px); }
.igs-btn--yellow{ background:var(--igs-yellow); color:var(--igs-ink); }
.igs-btn--yellow:hover{ color:var(--igs-ink); }
.igs-btn--ghost{ background:transparent; color:#fff; box-shadow:inset 0 0 0 1.5px #4a443c;
  border:0; padding:13px 26px; }
.igs-btn--ghost:hover{ box-shadow:inset 0 0 0 1.5px #fff; color:#fff; }
/* The dark button on light ground. This was MISSING while three templates
   already used it - template-trade.php ("Enquire"), template-print-service.php
   ("Ask for a quote") and the events next-show band. .igs-btn sets no
   background or colour of its own, so all of them were rendering as bold text
   on a white card rather than as buttons. */
.igs-btn--dark{ background:var(--igs-ink); color:#fff; }
.igs-btn--dark:hover,
.igs-btn--dark:focus-visible{ color:#fff; }

/* hero --------------------------------------------------------------------- */
.igs-hero{
  background:var(--igs-ink); color:#fff;
  border-bottom:4px solid var(--igs-yellow);
  border-radius:0; margin:0; padding:0;
}
.igs-hero__in{
  max-width:var(--igs-wrap); margin:0 auto; padding:58px 24px 54px;
  display:grid; grid-template-columns:1fr; gap:30px; align-items:center;
}
@media (min-width:900px){ .igs-hero__in{ grid-template-columns:1fr 1.05fr; gap:40px; } }
.igs-hero__rating{ display:flex; align-items:center; gap:10px; font-size:13px; color:#a49b8c;
  margin-bottom:16px; }
.igs-hero__rating b{ font-family:"Barlow Condensed",sans-serif; font-size:27px; color:#fff; }
.igs-hero__rating em{ font-style:normal; line-height:1.3; }
.igs-hero__rating em b{ display:block; font-family:Inter,sans-serif; font-size:13px; }
.igs-hero h1{ font-size:clamp(44px,6.1vw,78px); color:#fff; margin:16px 0 18px; }
.igs-hero p{ color:#a49b8c; font-size:15px; line-height:1.6; margin:0 0 26px; max-width:44ch; }
.igs-hero__cta{ display:flex; gap:12px; flex-wrap:wrap; }
.igs-hero__img{ display:block; }
.igs-hero__img img{ width:100%; height:auto; border-radius:3px; display:block; }

/* sections ----------------------------------------------------------------- */
.igs-sec{ padding:58px 0; }
.igs-sec + .igs-sec{ padding-top:0; }
.igs-sec__head{
  position:relative; display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  margin:0 0 26px; padding-top:22px; border:0;
}
.igs-sec__head:before{ content:""; position:absolute; top:0; left:0;
  width:46px; height:3px; background:var(--igs-ink); }
.igs-sec__head h2{ font-size:34px; }
.igs-sec__head span{ color:var(--igs-muted); font-size:14px; }
.igs-sec__head a{ margin-left:auto; font-size:13.5px; font-weight:400; color:var(--igs-ink);
  text-decoration:none; border-bottom:1px solid var(--igs-hline); padding-bottom:2px;
  white-space:nowrap; }
.igs-sec__head a:hover{ border-bottom-color:var(--igs-ink); text-decoration:none; }

/* category tiles ----------------------------------------------------------- */
.igs-tiles{ display:grid; gap:16px; grid-template-columns:repeat(2,1fr); }
@media (min-width:820px){
  .igs-tiles--3{ grid-template-columns:repeat(3,1fr); }
  .igs-tiles--4{ grid-template-columns:repeat(4,1fr); }
}
/* 4:3, not 16:9. The photography is square, so the tile has to be close to
   square for the image to FILL it without losing the product.
     - 16:9 + cover  cropped the top and bottom off every piece
     - 16:9 + contain left a small stamp floating in a wide dark box
   4:3 + cover loses about a quarter of the height, which is bearable on a
   centred product, and the tile reads as a photograph rather than a thumbnail. */
.igs-tile{
  position:relative; display:block; border-radius:3px; overflow:hidden;
  background:var(--igs-ink-2); aspect-ratio:4/3;
  transition:transform .15s ease;
}
.igs-tile:hover{ transform:translateY(-3px); }
/* height is forced because Hello Elementor ships `img{height:auto}`, which
   silently defeats object-fit. */
.igs-tile img{
  width:100% !important; height:100% !important; object-fit:cover;
  object-position:center 45%; display:block; opacity:1;
  transition:transform .4s ease;
}
.igs-tile:hover img{ transform:scale(1.05); }
.igs-tile__noimg{ display:block; width:100%; height:100%; background:var(--igs-ink-2); }
/* Deeper and taller than the mockup's, because the mockup's tile photography was
   all shot on dark grounds and the real catalogue is a mix - several of these
   products are photographed on white, and a light gradient left the label
   unreadable on those. */
.igs-tile__label{
  position:absolute; left:0; right:0; bottom:0; padding:46px 15px 13px; color:#fff;
  background:linear-gradient(to top, rgba(10,9,8,.96) 30%, rgba(10,9,8,.55) 62%,
    rgba(10,9,8,0));
}
.igs-tile__label b{ display:block; font-family:"Barlow Condensed",sans-serif;
  font-size:21px; line-height:1.05; font-weight:700; }
.igs-tile__label i{ font-style:normal; font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:#bdb3a2; }

/* print-service band ------------------------------------------------------- */
.igs-band{
  background:var(--igs-ink); color:#fff; border-radius:0; margin:0; padding:0;
}
.igs-band__in{
  max-width:var(--igs-wrap); margin:0 auto; padding:54px 24px;
  display:grid; grid-template-columns:1fr; gap:30px; align-items:center;
}
@media (min-width:900px){ .igs-band__in{ grid-template-columns:1fr 1fr; gap:44px; } }
.igs-band h2{ font-size:clamp(32px,4.3vw,50px); margin:0; }
.igs-band h2 span{ color:var(--igs-yellow); }
.igs-band p{ color:#a49b8c; font-size:15px; line-height:1.6; margin:18px 0 0; max-width:46ch; }
.igs-band__price{ font-size:14px; color:#fff !important; margin:16px 0 22px !important; }
.igs-band__price b{ font-family:"Barlow Condensed",sans-serif; font-size:25px;
  color:var(--igs-yellow); }
.igs-band__img img{ width:100%; height:auto; border-radius:3px; display:block; }

/* popular row reuses the shop tile styling */
.igs-popular{ grid-template-columns:repeat(2,1fr) !important; }
@media (min-width:820px){ .igs-popular{ grid-template-columns:repeat(5,1fr) !important; } }

/* WooCommerce ships `ul.products::before/::after { content:" "; display:table }`
   as a float clearfix. Under CSS Grid those two pseudo-elements become GRID
   ITEMS, so they each take a cell: the row began with an empty column and the
   fifth product wrapped onto a second row. Killing them on li.product was not
   enough - they are on the ul. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after{
  content:none !important; display:none !important;
}

/* Card internals: name and price were drifting apart because nothing claimed
   the spare height. The title takes it, so price and button stay pinned to the
   bottom and every card in the row lines up. */
.igs-popular li.product .woocommerce-loop-product__title{ flex:1 0 auto; }
.igs-popular li.product .price{ margin-top:0; }

/* reviews ------------------------------------------------------------------ */
.igs-reviews{
  background:var(--igs-panel); border-radius:0; margin:0; padding:0;
}
.igs-reviews__in{
  max-width:var(--igs-wrap); margin:0 auto; padding:52px 24px;
  display:grid; gap:26px; grid-template-columns:1fr;
}
@media (min-width:900px){ .igs-reviews__in{ grid-template-columns:230px 1fr; gap:38px;
  align-items:start; } }
.igs-reviews__score b{ font-family:"Barlow Condensed",sans-serif; font-size:74px;
  line-height:.85; display:block; }
.igs-reviews__score .igs-stars{ font-size:19px; }
.igs-reviews__score em{ display:block; font-style:normal; font-size:12.5px;
  color:var(--igs-muted); margin-top:10px; max-width:24ch; }
.igs-bars{ margin-top:16px; }
.igs-bar{ display:flex; align-items:center; gap:9px; font-size:11px; color:var(--igs-muted);
  margin-bottom:5px; }
.igs-bar__n{ width:20px; font-variant-numeric:tabular-nums; }
.igs-bar__track{ flex:1; height:6px; background:#dcd5c6; border-radius:99px; overflow:hidden; }
.igs-bar__fill{ display:block; height:100%; background:var(--igs-yellow); }
.igs-bar__pc{ width:30px; text-align:right; font-variant-numeric:tabular-nums; }
.igs-reviews__quotes{ display:grid; gap:14px; grid-template-columns:1fr; align-content:start; }
@media (min-width:700px){ .igs-reviews__quotes{ grid-template-columns:repeat(3,1fr); } }
.igs-reviews__quotes blockquote{
  background:#fff; border:1px solid var(--igs-hline); border-radius:3px; margin:0; padding:16px;
}
.igs-reviews__quotes p{ font-size:13px; line-height:1.55; margin:8px 0 12px; color:#3B362F; }
.igs-reviews__quotes cite{ font-style:normal; font-size:11.5px; color:var(--igs-muted); }

/* events ------------------------------------------------------------------- */
.igs-events{ display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:760px){ .igs-events{ grid-template-columns:repeat(3,1fr); } }
.igs-event{
  display:flex; align-items:center; gap:13px; background:#fff;
  border:1px solid var(--igs-hline); border-radius:3px; padding:13px 15px;
  transition:border-color .15s ease;
}
.igs-event:hover{ border-color:var(--igs-ink); }
.igs-event__date{
  flex:0 0 46px; width:46px; background:var(--igs-ink); color:#fff; border-radius:3px;
  text-align:center; padding:7px 0; line-height:1;
}
.igs-event__date b{ display:block; font-size:21px; font-family:"Barlow Condensed",sans-serif; }
.igs-event__date i{ font-style:normal; font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:#a49b8c; }
.igs-event__what b{ display:block; font-size:14px; font-weight:600; }
.igs-event__what i{ font-style:normal; font-size:12px; color:var(--igs-muted); }

/* newsletter --------------------------------------------------------------- */
.igs-band--signup .igs-band__in{ padding:44px 24px; }
@media (min-width:900px){
  .igs-band--signup .igs-band__in{ grid-template-columns:1fr auto; }
}
.igs-band--signup h2{ font-size:34px; }
.igs-band--signup p{ font-size:13.5px; max-width:52ch; margin:11px 0 0; }

/* licensed strip ----------------------------------------------------------- */
.igs-lic{ background:var(--igs-panel); padding:30px 0; }
.igs-lic__k{ font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--igs-muted); font-weight:600; margin:0; }
.igs-lic ul{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:13px 0 0; padding:0; }
.igs-lic li{ background:#fff; border:1px solid var(--igs-hline); border-radius:3px;
  padding:7px 14px; font-size:12.5px; }

/* --------------------------------------------------------------------------
   19. DESIGNED HEADER  (header-igs.php)

   Home page only for now, via get_header('igs'). Renaming header-igs.php to
   header.php takes it site-wide - see the note in that file.
   -------------------------------------------------------------------------- */
.igs-hdr{ background:#16130F; }
.igs-hdr .igs-wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }

.igs-hdr__util{ border-bottom:1px solid #2a2621; }
.igs-hdr__utilin{ display:flex; align-items:center; gap:20px; min-height:60px; flex-wrap:wrap; }

.igs-hdr__logo{ display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none;
  font-family:"Barlow Condensed",Inter,sans-serif; font-size:24px; font-weight:700;
  flex:0 0 auto; }
/* Pinned hard. The logo rendered full size because the markup nested one <a>
   inside another and the browser broke them apart, so it was never a descendant
   of this wrapper. The markup is fixed; these are belt and braces against
   Hello Elementor's img{height:auto} and Woo's own image rules. */
.igs-hdr__logo img,
.igs-hdr__logo .custom-logo{
  height:38px !important; width:auto !important; max-width:190px !important;
  max-height:38px !important; object-fit:contain; display:block;
}
.igs-hdr__mark{ width:34px; height:34px; display:grid; place-items:center; font-size:14px;
  border:1.5px solid #fff; border-radius:6px; }

.igs-hdr__search{ flex:1; max-width:330px; }
.igs-hdr__search input[type="search"]{
  width:100%; background:#252119; border:1px solid #332e26; border-radius:3px;
  color:#f3efe6; font-size:13px; padding:9px 12px; font-family:inherit;
}
.igs-hdr__search input::placeholder{ color:#6d6458; }

/* Sits between the search box and the yellow basket button, so it needs enough
   weight not to be skipped. The icon does most of that work - "Sign in" as
   plain small text next to a filled yellow button was being missed. */
.igs-hdr__acct{
  color:#fff; font-size:13.5px; font-weight:600; text-decoration:none;
  margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  white-space:nowrap; padding:6px 4px;
}
.igs-hdr__acct:hover,
.igs-hdr__acct:focus-visible{ color:var(--igs-yellow); }
.igs-hdr__accticon{
  width:18px; height:18px; flex:0 0 18px;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
/* Narrow phones: keep the icon, drop the word rather than the whole link. */
@media (max-width:420px){
  .igs-hdr__acct span{ position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
  .igs-hdr__accticon{ width:21px; height:21px; flex-basis:21px; }
}

.igs-hdr__basket{ background:var(--igs-yellow); color:#16130F !important; border-radius:3px;
  padding:7px 14px; line-height:1.25; text-decoration:none; }
.igs-hdr__basket b{ font-family:"Barlow Condensed",sans-serif; font-size:15px; display:block; }
.igs-hdr__basket i{ font-style:normal; font-size:10.5px; opacity:.72; }
.igs-hdr__basket .amount{ font-family:"Barlow Condensed",sans-serif; }

.igs-hdr__nav{ background:#1d1a17; }
.igs-hdr__nav ul{ display:flex; justify-content:center; gap:34px; margin:0; padding:13px 0;
  list-style:none; flex-wrap:wrap; }
.igs-hdr__nav a{ color:#f3efe6; font-size:13.5px; letter-spacing:.03em; text-decoration:none;
  padding:2px 0; border-bottom:2px solid transparent; display:inline-block; }
.igs-hdr__nav a:hover,
.igs-hdr__nav .current-menu-item > a{ border-bottom-color:var(--igs-yellow); color:#fff; }

/* The trust strip hooks wp_body_open, so it lands ABOVE this header. That is
   the documented position and Jordan approved it there - this just removes the
   gap so the two read as one block. */
.igs-has-header .igs-trust{ margin-bottom:0; }

/* --- category dropdowns ---------------------------------------------------
   Child categories, discovered from the taxonomy by the menu builder.

   Opens on :hover AND :focus-within. focus-within is not optional - a
   hover-only dropdown is unreachable by keyboard, and these are the shop's
   primary navigation.
   -------------------------------------------------------------------------- */
.igs-hdr__nav li{ position:relative; }
.igs-hdr__nav .sub-menu{
  position:absolute; top:100%; left:-14px; z-index:60;
  display:none; min-width:210px; margin:0; padding:6px 0;
  background:#1d1a17; border:1px solid #2f2a24; border-radius:3px;
  box-shadow:0 14px 34px rgba(0,0,0,.45);
  flex-direction:column; gap:0;
}
.igs-hdr__nav li:hover > .sub-menu,
.igs-hdr__nav li:focus-within > .sub-menu{ display:flex; }
.igs-hdr__nav .sub-menu li{ border:0; }
.igs-hdr__nav .sub-menu a{
  display:block; padding:8px 16px; font-size:13px; white-space:nowrap;
  border-bottom:0; color:#d8d2c7;
}
.igs-hdr__nav .sub-menu a:hover{ background:#2a251f; color:#fff; border-bottom:0; }

/* A parent with children gets a caret, so it is obvious there is more behind
   it rather than leaving people to discover it by accident. */
.igs-hdr__nav .menu-item-has-children > a::after{
  content:""; display:inline-block; margin-left:6px; vertical-align:middle;
  border-left:3.5px solid transparent; border-right:3.5px solid transparent;
  border-top:4px solid currentColor; opacity:.65;
}

/* --- mobile menu toggle ---------------------------------------------------
   The burger is hidden on desktop and the nav is always open. Below the
   breakpoint that inverts.

   IMPORTANT: the collapsed state is scoped to `.js` on <html>, which the theme
   adds only once the script has run. Without that, a JS failure would leave the
   nav permanently hidden with no way to open it - the menu has to degrade to
   "always visible", never to "unreachable".
   -------------------------------------------------------------------------- */
.igs-hdr__burger{
  display:none; align-items:center; gap:8px; margin-left:4px;
  background:transparent; border:1.5px solid #3a352d; border-radius:3px;
  color:#f3efe6; font-family:"Barlow Condensed",Inter,sans-serif; font-weight:700;
  font-size:15px; letter-spacing:.03em; padding:8px 12px; cursor:pointer;
}
.igs-hdr__burger:hover{ border-color:var(--igs-yellow); color:var(--igs-yellow); }
.igs-hdr__burger-bars{
  position:relative; width:17px; height:2px; background:currentColor; display:block;
}
.igs-hdr__burger-bars::before,
.igs-hdr__burger-bars::after{
  content:""; position:absolute; left:0; width:17px; height:2px; background:currentColor;
  transition:transform .18s ease, opacity .18s ease;
}
.igs-hdr__burger-bars::before{ top:-5px; }
.igs-hdr__burger-bars::after{ top:5px; }
/* Bars become a cross while open. Keyed off aria-expanded, which is the single
   source of truth for the state. */
.igs-hdr__burger[aria-expanded="true"] .igs-hdr__burger-bars{ background:transparent; }
.igs-hdr__burger[aria-expanded="true"] .igs-hdr__burger-bars::before{ transform:translateY(5px) rotate(45deg); }
.igs-hdr__burger[aria-expanded="true"] .igs-hdr__burger-bars::after{ transform:translateY(-5px) rotate(-45deg); }

@media (max-width:900px){
  .igs-hdr__burger{ display:inline-flex; }
  /* ONE ROW, then search. Logo, account, basket, menu across the top; search
     full width underneath. The basket used to wrap onto a row of its own, which
     with the three-line trust strip made the header 218px of a 664px phone
     screen - a third of it - before any product. `order` rearranges without
     touching the markup, so desktop is unchanged. */
  .igs-hdr__utilin{ padding:8px 0 10px; gap:10px; min-height:0; }
  .igs-hdr__logo{ order:0; }
  .igs-hdr__acct{ order:1; margin-left:auto; }
  .igs-hdr__basket{ order:2; padding:6px 10px; }
  .igs-hdr__burger{ order:3; margin-left:0; }
  .igs-hdr__search{ order:4; flex:1 0 100%; max-width:none; }
  .igs-hdr__search input[type="search"]{ padding:8px 12px; }

  .js .igs-hdr__nav{
    display:none; border-top:1px solid #2a2621;
  }
  .js.igs-nav-open .igs-hdr__nav{ display:block; }

  .igs-hdr__nav ul{
    flex-direction:column; gap:0; justify-content:flex-start; padding:6px 0 10px;
  }
  .igs-hdr__nav li{ border-bottom:1px solid #2a2621; }
  .igs-hdr__nav li:last-child{ border-bottom:0; }
  .igs-hdr__nav a{
    display:block; padding:12px 0; font-size:15px; border-bottom:0;
  }
  .igs-hdr__nav a:hover,
  .igs-hdr__nav .current-menu-item > a{ border-bottom:0; color:var(--igs-yellow); }

  /* Dropdowns flatten. An absolutely positioned flyout inside a collapsed nav
     would open off-screen, and hover does not exist on a touchscreen - so the
     children are simply always shown, indented, under their parent. */
  .igs-hdr__nav .sub-menu{
    display:flex; position:static; min-width:0; margin:0 0 6px;
    padding:0 0 0 16px; background:transparent; border:0; box-shadow:none;
    border-left:2px solid #2a2621;
  }
  .igs-hdr__nav .sub-menu a{ padding:9px 0; font-size:13.5px; white-space:normal; }
  .igs-hdr__nav .sub-menu a:hover{ background:transparent; }
  /* No caret: nothing expands, the children are already visible. */
  .igs-hdr__nav .menu-item-has-children > a::after{ display:none; }
}

@media (max-width:560px){
  .igs-hdr__basket i{ display:none; }
  .igs-hdr__logo{ font-size:20px; }
  .igs-hdr__logo img,
  .igs-hdr__logo .custom-logo{ height:30px !important; max-height:30px !important; max-width:130px !important; }
  .igs-hdr__basket b{ font-size:14px; }
}
/* Below 400px the word "Menu" goes and the bars stay; the button keeps its
   aria-label, so it is still announced as Menu. That is what keeps the row
   to one line on a 360px phone. */
@media (max-width:400px){
  .igs-hdr__burger-txt{ display:none; }
  .igs-hdr__utilin{ gap:8px; }
}

/* THE BURGER TURNED PINK when tapped. It is a real <button>, and the site's
   global Elementor button style (focus/active) was winning over the class -
   the same fight the finish boxes had. The states that matter are forced. */
.igs-hdr__burger,
.igs-hdr__burger:hover,
.igs-hdr__burger:focus,
.igs-hdr__burger:active,
.igs-hdr__burger[aria-expanded="true"]{
  background:transparent !important; background-image:none !important;
  box-shadow:none !important; text-shadow:none !important;
  border-radius:3px !important;
}
.igs-hdr__burger{ color:#f3efe6 !important; border:1.5px solid #3a352d !important; }
.igs-hdr__burger:hover,
.igs-hdr__burger:focus-visible,
.igs-hdr__burger[aria-expanded="true"]{ color:var(--igs-yellow) !important; border-color:var(--igs-yellow) !important; }

@media (prefers-reduced-motion:reduce){
  .igs-hdr__burger-bars::before,
  .igs-hdr__burger-bars::after{ transition:none; }
}

/* --------------------------------------------------------------------------
   20. DESIGNED FOOTER  (footer.php)
   Site-wide, matching header.php. Rename to footer-igs.php to revert.
   -------------------------------------------------------------------------- */
.igs-ft{ background:#16130F; color:#a49b8c; padding:46px 0 0; font-size:13px; }
.igs-ft .igs-wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }
.igs-ft a{ color:#a49b8c; text-decoration:none; }
.igs-ft a:hover{ color:#f3efe6; }

.igs-ft__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:34px; }
.igs-ft__logo{ display:inline-block; }
.igs-ft__logo img{ height:34px !important; width:auto !important; max-width:170px !important;
  object-fit:contain; display:block; }
.igs-ft__blurb{ max-width:34ch; margin:14px 0 0; font-size:12.5px; line-height:1.6; }

.igs-ft__social{ display:flex; gap:8px; list-style:none; margin:16px 0 0; padding:0; }
.igs-ft__social a{ display:grid; place-items:center; width:30px; height:30px;
  border:1px solid #332e26; border-radius:3px; font-size:11px; font-weight:600;
  letter-spacing:.04em; }
.igs-ft__social a:hover{ border-color:var(--igs-yellow); color:var(--igs-yellow); }
/* The brand marks. Fill is set inline per network (footer.php), so these are
   the one place brand colours appear; the square around them stays neutral. */
.igs-ft__social a{ width:36px; height:36px; }
.igs-ft__mark{ width:20px; height:20px; display:block; }

.igs-ft__col h4{ font-family:Inter,sans-serif; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:#f3efe6; margin:0 0 13px; font-weight:600; }
.igs-ft__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.igs-ft__col li{ line-height:1.35; }

.igs-ft__bar{ border-top:1px solid #2a2621; margin-top:38px; padding:16px 0;
  display:flex; gap:18px; flex-wrap:wrap; font-size:11.5px; color:#6d6458; }
.igs-ft__bar a{ color:#6d6458; }
.igs-ft__made{ margin-left:auto; }

@media (max-width:900px){
  .igs-ft__grid{ grid-template-columns:1fr 1fr; gap:26px; }
  .igs-ft__about{ grid-column:1 / -1; }
}
@media (max-width:520px){
  .igs-ft__grid{ grid-template-columns:1fr; }
  .igs-ft__made{ margin-left:0; flex-basis:100%; }
}

/* --------------------------------------------------------------------------
   21. TRUST STRIP INSIDE THE HEADER

   It was hooked to wp_body_open, which put it ABOVE the header - documented at
   the time as a limitation of the Elementor header, because hfe_after_header
   never fired. Now the theme owns header.php the strip is rendered inside it,
   where the mockup has it, and the hook is dropped. See igs_trust_strip().
   -------------------------------------------------------------------------- */
.igs-hdr .igs-trust{ margin:0; }
.igs-trust i{ font-style:normal; }

/* PHONES: one line. Three centred spans wrapped onto three rows, 80px of
   yellow before the logo. "Made & printed in Britain" goes (the footer and
   the home hero both say it), and below 480px "from 2,282" goes too, leaving
   "4.9/5 reviews" - the score is the claim, the count is the proof, and the
   proof is one tap away. */
@media (max-width:600px){
  .igs-trust{ flex-wrap:nowrap; gap:14px; padding:7px 12px; font-size:12px; }
  .igs-trust span{ white-space:nowrap; }
  .igs-trust .igs-trust__made{ display:none; }
}
@media (max-width:480px){
  .igs-trust i{ display:none; }
}

/* --------------------------------------------------------------------------
   22. PRINT SERVICE PAGE  (template-print-service.php)

   Only what the home page classes do not already cover. The page carries
   .igs-home as well as .igs-ps so it inherits the ground, type and bands.
   -------------------------------------------------------------------------- */
.igs-ps__prices{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:760px){ .igs-ps__prices{ grid-template-columns:repeat(3,1fr); } }
.igs-ps__price{
  background:#fff; border:1px solid var(--igs-hline,#D9D2C4); border-radius:3px;
  padding:22px 20px; display:flex; flex-direction:column; gap:6px;
}
.igs-ps__price h3{ font-family:"Barlow Condensed",Inter,sans-serif; font-size:22px;
  margin:0; font-weight:700; }
.igs-ps__price p{ margin:0; font-size:13.5px; line-height:1.55; color:var(--igs-muted); }
.igs-ps__amt{
  font-family:"Barlow Condensed",Inter,sans-serif; font-size:52px; line-height:.9;
  color:var(--igs-ink) !important; margin:0 0 2px !important; font-weight:700;
  font-variant-numeric:tabular-nums;
}
.igs-ps__price--note{ background:var(--igs-panel,#EBE6DA); justify-content:space-between; }
.igs-ps__price--note .igs-btn{ align-self:flex-start; margin-top:14px; font-size:16px;
  padding:10px 18px; }
.igs-ps__ship{ margin:16px 0 0; font-size:13px; color:var(--igs-muted); }

/* steps. Numbered because the content genuinely IS a sequence - you cannot
   print a file before it has been sent. */
.igs-ps__steps{ list-style:none; margin:0; padding:0; display:grid; gap:16px;
  grid-template-columns:1fr; counter-reset:igs-step; }
@media (min-width:820px){ .igs-ps__steps{ grid-template-columns:repeat(4,1fr); } }
.igs-ps__steps li{ display:flex; flex-direction:column; gap:7px;
  border-top:3px solid var(--igs-ink); padding-top:14px; }
.igs-ps__n{
  font-family:"Barlow Condensed",Inter,sans-serif; font-size:13px; font-weight:700;
  width:26px; height:26px; border-radius:99px; background:var(--igs-ink); color:#fff;
  display:grid; place-items:center;
}
.igs-ps__steps b{ font-family:"Barlow Condensed",Inter,sans-serif; font-size:20px;
  line-height:1.05; }
.igs-ps__steps i{ font-style:normal; font-size:13.5px; line-height:1.55;
  color:var(--igs-muted); }

/* faq */
.igs-ps__faq{ display:grid; gap:8px; max-width:820px; }
.igs-ps__faq details{ background:#fff; border:1px solid var(--igs-hline,#D9D2C4);
  border-radius:3px; padding:14px 16px; }
.igs-ps__faq summary{ cursor:pointer; font-weight:600; font-size:14.5px; }
.igs-ps__faq p{ margin:10px 0 0; font-size:13.5px; line-height:1.6;
  color:var(--igs-muted); }

/* closing cta */
.igs-ps__cta{
  background:var(--igs-ink); color:#fff; border-radius:3px; padding:34px 30px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  flex-wrap:wrap;
}
.igs-ps__cta h2{ font-size:32px; margin:0; }
.igs-ps__cta p{ margin:9px 0 0; color:#a49b8c; font-size:14px; max-width:48ch; }

/* --------------------------------------------------------------------------
   23. CATEGORY SUB-NAV  (igs_category_subnav)

   A black bar, white text, each category highlighting on hover.

   Wraps rather than scrolls: Scenery has eleven children and a horizontal
   scroller hides whatever does not fit, which on the widest part of the
   catalogue is the opposite of helpful. On a dark bar the wrapped rows need to
   stay legible, hence the row gap.
   -------------------------------------------------------------------------- */
.igs-subnav{
  background: var(--igs-ink);
  border-radius: var(--igs-radius);
  padding: 16px 18px;
  margin: 0 0 26px;
}
.igs-subnav__k{
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: #a49b8c; font-weight: 600; margin: 0 0 11px;
}
.igs-subnav ul{
  display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0;
}
.igs-subnav a{
  display: inline-flex; align-items: baseline; gap: 7px;
  background: transparent; color: #fff;
  border: 1px solid #3a352d; border-radius: 3px;
  padding: 8px 14px; font-size: 13.5px; line-height: 1.2;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
/* Hover AND focus-visible together - a keyboard user gets the same signal a
   mouse user does, rather than a faint default outline on a dark ground. */
.igs-subnav a:hover,
.igs-subnav a:focus-visible{
  background: var(--igs-yellow);
  border-color: var(--igs-yellow);
  color: var(--igs-ink);
  text-decoration: none;
}
/* The count is supporting information, so it stays quieter than the name and
   uses tabular figures so the numbers line up down wrapped rows. */
.igs-subnav a span{
  font-size: 11.5px; color: #a49b8c; font-variant-numeric: tabular-nums;
}
.igs-subnav a:hover span,
.igs-subnav a:focus-visible span{ color: rgba(22,19,15,.66); }

/* Where you already are: filled, but not the hover colour - otherwise every
   chip looks hovered and the highlight stops meaning anything. */
.igs-subnav .is-current a{
  background: #2f2a23; border-color: #4a443c; color: #fff;
}
.igs-subnav .is-current a span{ color: #b5ab9b; }

/* PHONES: one row that scrolls sideways. Wrapped, the eleven Scenery chips
   stacked into six rows and pushed the first product 950px down a 664px
   screen - a row of buttons you swipe is the pattern people expect here, and
   the partly cut-off last chip is what tells them there is more. */
@media (max-width: 600px){
  .igs-subnav{ padding: 12px 0 12px 14px; margin-bottom: 18px; }
  .igs-subnav__k{ margin-bottom: 9px; }
  .igs-subnav ul{
    flex-wrap: nowrap; overflow-x: auto; padding-right: 14px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .igs-subnav ul::-webkit-scrollbar{ display: none; }
  .igs-subnav li{ flex: 0 0 auto; }
  .igs-subnav a{ white-space: nowrap; padding: 7px 12px; }
}

/* --------------------------------------------------------------------------
   24. TRADE PAGE  (template-trade.php)
   Carries .igs-home too, so it inherits the ground, type and bands. Reuses
   .igs-ps__steps / __faq / __cta from the print service page rather than
   duplicating them.
   -------------------------------------------------------------------------- */
.igs-trade__eyebrow{
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--igs-yellow); font-weight: 600; margin: 0 0 14px;
}
.igs-trade__routes{ display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 820px){ .igs-trade__routes{ grid-template-columns: repeat(2, 1fr); } }
.igs-trade__route{
  background: #fff; border: 1px solid var(--igs-hline, #D9D2C4); border-radius: 3px;
  padding: 26px 24px; display: flex; flex-direction: column; gap: 10px;
}
.igs-trade__kicker{
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--igs-muted); font-weight: 600; margin: 0;
}
.igs-trade__route h3{
  font-family: "Barlow Condensed", Inter, sans-serif; font-size: 27px;
  font-weight: 700; margin: 0; line-height: 1;
}
.igs-trade__route > p{ margin: 0; font-size: 14px; line-height: 1.6; color: var(--igs-muted); }
.igs-trade__route ul{
  list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 7px; flex: 1;
}
.igs-trade__route li{
  position: relative; padding-left: 20px; font-size: 13.5px; line-height: 1.45;
}
/* Ticks rather than bullets: these are things the service DOES, not a list of
   arbitrary points. */
.igs-trade__route li::before{
  content: ""; position: absolute; left: 0; top: 5px;
  width: 9px; height: 5px; border-left: 2px solid var(--igs-ink);
  border-bottom: 2px solid var(--igs-ink); transform: rotate(-45deg);
}
.igs-trade__route .igs-btn{ align-self: flex-start; margin-top: 14px; }

/* --------------------------------------------------------------------------
   25. EVENTS PAGE  (template-events.php)
   Carries .igs-home too, so it inherits the ground, type and bands. Reuses
   .igs-event__date from the home page's events band, and .igs-trade__routes /
   .igs-ps__faq / .igs-ps__cta rather than duplicating them.

   The schedule is a LIST, not a grid of cards. A visitor scans this page for
   one thing - is there a date near me, soon - and a single column of rows in
   date order answers that faster than tiles they have to read in two
   directions.
   -------------------------------------------------------------------------- */

/* NEXT SHOW BAND.
   Full width, yellow, directly under the hero. It was a small bordered card in
   the hero text column and was easy to miss - which is the one failure this
   page cannot afford, because this is the single fact most visitors came for.
   Yellow rather than the usual dark band: the hero ends on a 4px yellow rule,
   so this reads as that rule opening out. */
.igs-ev__nextband{ background: var(--igs-yellow); color: #16130F; }
.igs-ev__nextin{
  max-width: var(--igs-wrap); margin: 0 auto; padding: 22px 24px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}

/* The date block. Big enough to read from a scroll, not just a glance. */
.igs-ev__bigdate{
  flex: 0 0 auto; background: #16130F; color: #fff; border-radius: 3px;
  padding: 10px 16px; text-align: center; line-height: 1;
}
.igs-ev__bigdate b{
  display: block; font-family: "Barlow Condensed", Inter, sans-serif;
  font-size: 40px; font-weight: 700;
}
.igs-ev__bigdate i{
  display: block; font-style: normal; font-size: 11px; letter-spacing: .14em;
  font-weight: 600; color: var(--igs-yellow); margin-top: 3px;
}

.igs-ev__nextmain{ flex: 1 1 16rem; min-width: 0; }
.igs-ev__nextlabel{
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
  font-weight: 700; opacity: .72; margin-bottom: 5px;
}
/* The countdown is the urgency. Dark pill so it reads as a separate fact from
   the label rather than more of the same sentence. */
.igs-ev__nextlabel em{
  font-style: normal; letter-spacing: .06em; text-transform: none;
  background: #16130F; color: var(--igs-yellow);
  border-radius: 99px; padding: 3px 10px; font-size: 11.5px; opacity: 1;
}
.igs-ev__nextmain b{
  display: block; font-family: "Barlow Condensed", Inter, sans-serif;
  font-size: clamp(28px, 3.6vw, 40px); line-height: 1.02; font-weight: 700;
}
.igs-ev__nextmain i{
  display: block; font-style: normal; font-size: 14px; margin-top: 6px;
  font-weight: 500;
}
.igs-ev__nextcta{ flex: 0 0 auto; margin-left: auto; }

@media (max-width: 560px){
  .igs-ev__nextin{ gap: 14px; padding: 18px 20px; }
  .igs-ev__bigdate{ padding: 8px 13px; }
  .igs-ev__bigdate b{ font-size: 32px; }
  /* Full width so it is a target, not an afterthought, on a phone. */
  .igs-ev__nextcta{ margin-left: 0; width: 100%; text-align: center; }
}

/* The schedule. */
.igs-ev__list{ list-style: none; margin: 0; padding: 0; max-width: 46rem; }
.igs-ev__year{
  font-family: "Barlow Condensed", Inter, sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: .12em; color: var(--igs-muted);
  margin: 22px 0 9px; border-bottom: 1px solid var(--igs-hline, #D9D2C4); padding-bottom: 6px;
}
.igs-ev__year:first-child{ margin-top: 0; }
.igs-ev__row{
  display: flex; align-items: center; gap: 13px; background: #fff;
  border: 1px solid var(--igs-hline, #D9D2C4); border-radius: 3px;
  padding: 11px 15px; margin-bottom: 8px; transition: border-color .15s ease;
}
.igs-ev__row:hover{ border-color: var(--igs-ink); }
.igs-ev__what{ flex: 1; min-width: 0; }
.igs-ev__what b{ display: block; font-size: 14.5px; font-weight: 600; }
.igs-ev__what i{ display: block; font-style: normal; font-size: 12px; color: var(--igs-muted); }
/* The weekday earns its place - "is it a Saturday" decides whether people can
   come - but it is secondary, so it sits right and quiet. */
.igs-ev__day{
  flex: 0 0 auto; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--igs-muted); font-weight: 600;
}
.igs-ev__note{
  margin: 16px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--igs-muted);
  max-width: 46rem;
}
.igs-ev__empty{ margin: 0; font-size: 14px; line-height: 1.6; color: var(--igs-muted); }

/* Stand cards: four of them, so two up rather than the trade page's two. */
@media (min-width: 900px){
  .igs-ev__stand{ grid-template-columns: repeat(4, 1fr); }
  .igs-ev__stand .igs-trade__route{ padding: 22px 20px; }
  .igs-ev__stand .igs-trade__route h3{ font-size: 23px; }
}

/* --------------------------------------------------------------------------
   26. PRE-ORDER PAGE  (template-preorder.php)
   Reuses the events band shape. The saving is the one number on the page that
   has to land, so it gets the same full-width yellow treatment the next-show
   band gets - and for the same reason.
   -------------------------------------------------------------------------- */
/* Checkout nudge, shown only while they have NOT chosen collection. Once they
   do, the discount appears as its own total line and this would be noise. */
.igs-preorder-nudge td{
  background: var(--igs-yellow); color: #16130F;
  font-size: 13.5px; padding: 10px 12px; border-radius: 3px;
}
.igs-preorder-nudge b{ font-weight: 700; }

.igs-po__band{ background: var(--igs-yellow); color: #16130F; }
.igs-po__bandin{
  max-width: var(--igs-wrap); margin: 0 auto; padding: 22px 24px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.igs-po__pc{
  flex: 0 0 auto; background: #16130F; color: var(--igs-yellow);
  border-radius: 3px; padding: 10px 18px; line-height: 1;
  font-family: "Barlow Condensed", Inter, sans-serif;
  font-size: 40px; font-weight: 700;
}
.igs-po__bandmain{ flex: 1 1 16rem; min-width: 0; }
.igs-po__bandmain b{
  display: block; font-family: "Barlow Condensed", Inter, sans-serif;
  font-size: clamp(24px, 3.2vw, 34px); line-height: 1.05; font-weight: 700;
}
.igs-po__bandmain i{ display: block; font-style: normal; font-size: 14px; margin-top: 5px; }
.igs-po__bandcta{ flex: 0 0 auto; margin-left: auto; }
@media (max-width: 560px){
  .igs-po__bandin{ gap: 14px; padding: 18px 20px; }
  .igs-po__pc{ font-size: 32px; padding: 8px 14px; }
  .igs-po__bandcta{ margin-left: 0; width: 100%; text-align: center; }
}

/* --------------------------------------------------------------------------
   27. CONTACT AND REVIEWS  (template-contact.php, template-reviews.php)
   Both templates WRAP the page's own content rather than replacing it, so the
   form plugin and the reviews plugin keep working. These rules style the frame
   around them and leave the plugin markup alone.
   -------------------------------------------------------------------------- */

/* Contact: no image column, so the hero text should not sit in a half-width
   well with nothing beside it. */
.igs-ct__heroin{ grid-template-columns: 1fr !important; }
.igs-ct__heroin .igs-hero__text{ max-width: 44rem; }

.igs-ct__ways{ display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 860px){ .igs-ct__ways{ grid-template-columns: repeat(3, 1fr); } }
.igs-ct__way{
  background: #fff; border: 1px solid var(--igs-hline, #D9D2C4); border-radius: 3px;
  padding: 24px 22px;
}
.igs-ct__way h2{
  font-family: "Barlow Condensed", Inter, sans-serif; font-size: 24px;
  font-weight: 700; margin: 0 0 10px; line-height: 1;
}
.igs-ct__way p{ margin: 0 0 10px; font-size: 14px; line-height: 1.6; color: var(--igs-muted); }
.igs-ct__way p:last-child{ margin-bottom: 0; }
/* The email address and the show name are the point of their cards. */
.igs-ct__big{
  font-family: "Barlow Condensed", Inter, sans-serif;
  font-size: 21px; font-weight: 700; line-height: 1.15;
  color: var(--igs-ink) !important; word-break: break-word;
}
.igs-ct__big a{ color: inherit; text-decoration: none; border-bottom: 2px solid var(--igs-yellow); }
.igs-ct__big a:hover{ color: inherit; border-bottom-color: var(--igs-ink); }
.igs-ct__links{ list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.igs-ct__links li{ font-size: 13.5px; line-height: 1.45; color: var(--igs-muted); }
.igs-ct__links a{ color: var(--igs-ink); font-weight: 600; }

/* Admin-only warning when the page has no content, so a missing form is
   reported rather than silently looking like a design choice. */
.igs-ct__warn{
  max-width: 44rem; background: #FFF6D6; border: 1px solid var(--igs-yellow);
  border-left: 4px solid var(--igs-yellow); border-radius: 3px; padding: 16px 18px;
}
.igs-ct__warn b{ display: block; font-size: 15px; margin-bottom: 5px; }
.igs-ct__warn span{ font-size: 13.5px; line-height: 1.6; color: #4a4336; }

/* The wrapper the contact form lands in. These rules target the shapes every
   form plugin produces rather than any one plugin's class names - Contact Form
   7, WPForms, Forminator and Gravity all emit plain inputs inside paragraphs or
   divs.

   THE FORM ON THIS SITE IS FORMIDABLE, and it is NOT styled by this block -
   Formidable's own stylesheet ties with these rules on specificity and loads
   after them, so it wins. Section 27a below does the real work. Keep this block
   anyway: it is the floor for any other plugin, and for a plain HTML form. */
/* 56rem, not 44. The form was the narrowest thing on the page and read as
   cramped against the three cards above it, which run the full 1180px wrap. */
.igs-ct__form{ max-width: 56rem; }
.igs-ct__form p{ margin: 0 0 14px; }
/* CF7 wraps every field in a <p> with the label as bare text above the input. */
.igs-ct__form br{ display: none; }
.igs-ct__form input[type="text"],
.igs-ct__form input[type="email"],
.igs-ct__form input[type="tel"],
.igs-ct__form input[type="url"],
.igs-ct__form select,
.igs-ct__form textarea{
  width: 100%; padding: 12px 14px; font: inherit; font-size: 15px;
  border: 1px solid var(--igs-line); border-radius: 3px;
  background: #fff; color: var(--igs-ink);
}
.igs-ct__form textarea{ min-height: 9rem; resize: vertical; }
.igs-ct__form input:focus,
.igs-ct__form select:focus,
.igs-ct__form textarea:focus{
  outline: 2px solid var(--igs-yellow); outline-offset: 1px; border-color: var(--igs-ink);
}
.igs-ct__form label{ display: block; font-size: 13.5px; font-weight: 600; margin: 14px 0 5px; }
.igs-ct__form input[type="submit"],
.igs-ct__form button[type="submit"]{
  width: auto; margin-top: 16px;
  background: var(--igs-ink); color: #fff; border: 0; cursor: pointer;
  font-family: "Barlow Condensed", Inter, sans-serif; font-size: 19px; font-weight: 700;
  padding: 13px 26px; border-radius: 3px;
}
.igs-ct__form input[type="submit"]:hover,
.igs-ct__form button[type="submit"]:hover{ filter: brightness(1.12); }
/* Contact Form 7 puts its spinner inline after the button and its messages in
   a block below; both are unstyled by default and look like a fault. */
.igs-ct__form .wpcf7-spinner{ margin: 0 0 0 10px; vertical-align: middle; }
.igs-ct__form .wpcf7-response-output{
  margin: 18px 0 0 !important; padding: 12px 14px !important;
  border-radius: 3px; font-size: 14px; line-height: 1.5;
  border: 1px solid var(--igs-line) !important;
}
.igs-ct__form form.sent .wpcf7-response-output{
  border-color: var(--igs-green, #2F6F4E) !important; background: #EDF7F1;
}
.igs-ct__form form.invalid .wpcf7-response-output,
.igs-ct__form form.failed .wpcf7-response-output{
  border-color: var(--igs-red) !important; background: #FBEFEA;
}
.igs-ct__form .wpcf7-not-valid-tip{
  color: var(--igs-red); font-size: 12.5px; margin-top: 4px; display: block;
}
.igs-ct__form .wpcf7-not-valid{ border-color: var(--igs-red) !important; }
/* A honeypot or hidden field must never take up space. */
.igs-ct__form input[type="hidden"]{ display: none; }

/* --------------------------------------------------------------------------
   27a. FORMIDABLE FORMS  (the contact form is a Formidable form)

   WHY THIS BLOCK EXISTS, AND WHY THE RULES ABOVE WERE NOT ENOUGH.

   The generic rules above are one class deep - `.igs-ct__form input[type=text]`
   is specificity (0,2,0). Formidable's own stylesheet is exactly as deep:
   `.with_frm_style input[type=text]` is also (0,2,0). On a tie the LAST
   stylesheet wins, and Formidable enqueues its CSS while the shortcode renders,
   which is after this file. So every generic rule above was being overruled and
   the form fell back to Formidable's defaults - tight padding, small type and
   no space between fields. That is the squash.

   Every selector here is therefore scoped `.igs-ct__form .frm_forms ...`, which
   is (0,3,0) and wins on specificity rather than on load order. No !important
   is needed and nothing depends on which stylesheet loads first.

   It also has to work with Formidable's CSS switched OFF entirely (Formidable →
   Global Settings → "Load Formidable styling"). With it off the plugin ships no
   CSS at all, so the honeypot field, the screen-reader legend and the
   label-position containers become visible. Those are handled here too.
   -------------------------------------------------------------------------- */

/* The container the plugin wraps the whole form in. */
.igs-ct__form .frm_forms{ max-width: 100%; }
.igs-ct__form .frm_forms form{ margin: 0; }
.igs-ct__form .frm_forms fieldset{ border: 0; margin: 0; padding: 0; min-width: 0; }

/* Space between fields. Formidable wraps each field in a <div>, not a <p>, so
   the `.igs-ct__form p` margin above never reached them and they stacked with
   nothing between. This is the main reason the form read as cramped. */
.igs-ct__form .frm_forms .frm_form_field{ margin: 0 0 18px; }
.igs-ct__form .frm_forms .frm_form_field:last-child{ margin-bottom: 0; }

/* Labels. */
.igs-ct__form .frm_forms .frm_primary_label{
  display: block; font-size: 13.5px; font-weight: 600;
  margin: 0 0 5px; padding: 0; color: var(--igs-ink); line-height: 1.35;
}
.igs-ct__form .frm_forms .frm_required{ color: var(--igs-red); font-weight: 700; margin-left: 2px; }

/* Fields. `font: inherit` first so the browser's monospace textarea default and
   Formidable's own font-size are both replaced in one go. */
.igs-ct__form .frm_forms input[type="text"],
.igs-ct__form .frm_forms input[type="email"],
.igs-ct__form .frm_forms input[type="tel"],
.igs-ct__form .frm_forms input[type="url"],
.igs-ct__form .frm_forms input[type="number"],
.igs-ct__form .frm_forms input[type="password"],
.igs-ct__form .frm_forms input[type="search"],
.igs-ct__form .frm_forms input[type="date"],
.igs-ct__form .frm_forms select,
.igs-ct__form .frm_forms textarea{
  box-sizing: border-box; width: 100%; max-width: 100%; height: auto;
  padding: 12px 14px; font: inherit; font-size: 15px; line-height: 1.4;
  border: 1px solid var(--igs-line); border-radius: 3px;
  background: #fff; color: var(--igs-ink); margin: 0;
}
.igs-ct__form .frm_forms textarea{ min-height: 9rem; resize: vertical; }
.igs-ct__form .frm_forms input:focus,
.igs-ct__form .frm_forms select:focus,
.igs-ct__form .frm_forms textarea:focus{
  outline: 2px solid var(--igs-yellow); outline-offset: 1px;
  border-color: var(--igs-ink); box-shadow: none;
}
.igs-ct__form .frm_forms ::placeholder{ color: var(--igs-muted); opacity: 1; }

/* Help text under a field. */
.igs-ct__form .frm_forms .frm_description{
  font-size: 12.5px; line-height: 1.5; color: var(--igs-muted); margin: 5px 0 0;
}

/* Checkboxes and radios. The generic `.igs-ct__form label` rule above turns
   every label into a block with a 14px top margin, which on Formidable pushes
   each option away from its own box and bolds it. Formidable puts the input
   INSIDE the label, so these have to go back to inline. */
.igs-ct__form .frm_forms .frm_opt_container{ display: grid; gap: 8px; }
.igs-ct__form .frm_forms .frm_checkbox,
.igs-ct__form .frm_forms .frm_radio{ margin: 0; }
.igs-ct__form .frm_forms .frm_checkbox label,
.igs-ct__form .frm_forms .frm_radio label{
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 14px; font-weight: 400; margin: 0; line-height: 1.45;
  color: var(--igs-ink);
}
.igs-ct__form .frm_forms .frm_checkbox input,
.igs-ct__form .frm_forms .frm_radio input{
  width: auto; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--igs-ink);
}
/* Options laid out across the line rather than down it. */
.igs-ct__form .frm_forms .frm_inline_box .frm_opt_container{
  display: flex; flex-wrap: wrap; gap: 8px 20px;
}

/* Submit. Formidable emits <button class="frm_button_submit"> on current
   versions and <input type="submit"> on older ones, so both are named. */
.igs-ct__form .frm_forms .frm_submit{ margin: 22px 0 0; }
.igs-ct__form .frm_forms .frm_button_submit,
.igs-ct__form .frm_forms input[type="submit"],
.igs-ct__form .frm_forms button[type="submit"]{
  width: auto; height: auto; margin: 0;
  background: var(--igs-ink); color: #fff; border: 0; cursor: pointer;
  font-family: "Barlow Condensed", Inter, sans-serif;
  font-size: 19px; font-weight: 700; letter-spacing: .01em;
  padding: 13px 30px; border-radius: 3px; line-height: 1.1;
}
.igs-ct__form .frm_forms .frm_button_submit:hover,
.igs-ct__form .frm_forms input[type="submit"]:hover,
.igs-ct__form .frm_forms button[type="submit"]:hover{ filter: brightness(1.12); }
.igs-ct__form .frm_forms .frm_button_submit:focus-visible,
.igs-ct__form .frm_forms input[type="submit"]:focus-visible,
.igs-ct__form .frm_forms button[type="submit"]:focus-visible{
  outline: 2px solid var(--igs-yellow); outline-offset: 2px;
}

/* Errors and the success message. All four of these are plain unstyled divs
   without the plugin's stylesheet, so a failed submit would look like the page
   had simply reloaded. */
.igs-ct__form .frm_forms .frm_error{
  color: var(--igs-red); font-size: 12.5px; line-height: 1.45; margin: 5px 0 0;
}
.igs-ct__form .frm_forms .frm_blank_field input,
.igs-ct__form .frm_forms .frm_blank_field select,
.igs-ct__form .frm_forms .frm_blank_field textarea{ border-color: var(--igs-red); }
.igs-ct__form .frm_error_style,
.igs-ct__form .frm_forms .frm_error_style{
  background: #FBEFEA; border: 1px solid var(--igs-red); border-left-width: 4px;
  border-radius: 3px; padding: 13px 16px; margin: 0 0 18px;
  font-size: 14px; line-height: 1.5; color: var(--igs-ink);
}
.igs-ct__form .frm_message,
.igs-ct__form .frm_forms .frm_message{
  background: #EDF7F1; border: 1px solid var(--igs-green); border-left-width: 4px;
  border-radius: 3px; padding: 16px 18px; font-size: 15px; line-height: 1.6;
}
.igs-ct__form .frm_message p:last-child{ margin-bottom: 0; }

/* Multi-column rows. Formidable's layout classes only do anything because of
   its stylesheet, so a two-column form collapses to one narrow column if that
   CSS is off or loads late. These mirror what the plugin intends, so they are a
   no-op when its own CSS is working. */
.igs-ct__form .frm_forms .frm_grid_container,
.igs-ct__form .frm_forms .frm_section_heading + .frm_grid_container{
  display: flex; flex-wrap: wrap; gap: 0 18px;
}
.igs-ct__form .frm_forms .frm_grid_container > .frm_form_field{ flex: 1 1 100%; min-width: 0; }
@media (min-width: 620px){
  .igs-ct__form .frm_forms .frm12,
  .igs-ct__form .frm_forms .frm_full{ flex: 1 1 100%; }
  .igs-ct__form .frm_forms .frm6,
  .igs-ct__form .frm_forms .frm_half{ flex: 1 1 calc(50% - 9px); }
  .igs-ct__form .frm_forms .frm4,
  .igs-ct__form .frm_forms .frm_third{ flex: 1 1 calc(33.333% - 12px); }
  .igs-ct__form .frm_forms .frm8,
  .igs-ct__form .frm_forms .frm_two_thirds{ flex: 1 1 calc(66.666% - 6px); }
  .igs-ct__form .frm_forms .frm3,
  .igs-ct__form .frm_forms .frm_fourth{ flex: 1 1 calc(25% - 13.5px); }
}

/* Things that are only invisible because of the plugin's own CSS. With
   Formidable styling switched off these all render, and the honeypot in
   particular looks like a stray empty field somebody forgot to label. */
.igs-ct__form .frm_verify,
.igs-ct__form .frm_forms .frm_verify,
.igs-ct__form .frm_hidden,
.igs-ct__form .frm_forms .frm_hidden,
.igs-ct__form .frm_forms .frm_none_container .frm_primary_label,
.igs-ct__form .frm_forms .frm_hidden_container{ display: none !important; }
.igs-ct__form .frm_screen_reader{
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   27b. FORMIDABLE — THE OVERRIDES THAT HAVE TO WIN

   WHY !important IS THE RIGHT TOOL HERE, HAVING AVOIDED IT EVERYWHERE ELSE.

   Section 27a raised these rules from (0,2,0) to (0,3,1) to beat Formidable's
   stylesheet. It did not work, because Formidable does not ship ONE stylesheet
   at a fixed depth - it GENERATES one from its visual style editor, at
   selectors like

       .with_frm_style .frm_form_fields .frm_form_field input[type=text]

   which is (0,4,1). Going deeper still just invites the next regeneration to
   go deeper again, and the depth is controlled from a settings screen rather
   than by anything in this repo. A specificity war against a generated
   stylesheet cannot be won on selectors.

   So the handful of properties that decide whether the form looks like this
   site or like a plugin default are forced, and nothing else is. Every rule is
   scoped inside `.igs-ct__form`, so none of it can reach a form anywhere else
   on the site.

   BETTER STILL: switch the plugin's CSS off entirely at Formidable > Global
   Settings > "Load Formidable styling", or set this form's Style to None. Then
   section 27a alone dresses the form and none of the below is needed. These
   rules exist so the page looks right either way, because the setting is not
   visible from this end.
   -------------------------------------------------------------------------- */

.igs-ct__form .frm_forms input[type="text"],
.igs-ct__form .frm_forms input[type="email"],
.igs-ct__form .frm_forms input[type="tel"],
.igs-ct__form .frm_forms input[type="url"],
.igs-ct__form .frm_forms input[type="number"],
.igs-ct__form .frm_forms input[type="password"],
.igs-ct__form .frm_forms input[type="date"],
.igs-ct__form .frm_forms select,
.igs-ct__form .frm_forms textarea{
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  padding: 12px 14px !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  border: 1px solid var(--igs-line) !important;
  border-radius: 3px !important;
  background-color: #fff !important;
  color: var(--igs-ink) !important;
  margin: 0 !important;
}
.igs-ct__form .frm_forms textarea{ min-height: 9rem !important; }
.igs-ct__form .frm_forms .frm_form_field{ margin-bottom: 18px !important; }
.igs-ct__form .frm_forms .frm_primary_label{
  font-size: 13.5px !important; font-weight: 600 !important;
  color: var(--igs-ink) !important; margin-bottom: 5px !important;
}
.igs-ct__form .frm_forms .frm_button_submit,
.igs-ct__form .frm_forms input[type="submit"],
.igs-ct__form .frm_forms button[type="submit"]{
  width: auto !important; height: auto !important;
  background-color: var(--igs-ink) !important; color: #fff !important;
  border: 0 !important; border-radius: 3px !important;
  font-size: 19px !important; padding: 13px 30px !important;
}

/* The Name field was rendering at half width with a small "First" beneath it,
   while every other field ran full width.

   Formidable's name field is a COMBO - it wraps one input per enabled
   sub-field (First, Middle, Last) and gives each a fixed-width grid class. With
   only First switched on, that class still says "half", so one input sits in a
   two-column layout that has nothing in its second column.

   Making the container a flex row with `flex: 1 1 0` on each child means the
   sub-fields always divide the full width between however many of them there
   actually are. One becomes full width; two become halves; three, thirds. It
   fixes the current case without hard-coding it, so switching Last back on in
   the form builder needs no CSS change. */
.igs-ct__form .frm_forms .frm_combo_inputs_container{
  display: flex !important; flex-wrap: wrap; gap: 0 14px;
  width: 100% !important; max-width: 100% !important;
}
.igs-ct__form .frm_forms .frm_combo_inputs_container > div{
  flex: 1 1 0 !important; min-width: 0; width: auto !important;
  padding: 0 !important; margin: 0 !important; float: none !important;
}
/* The sub-label ("First") sits UNDER its input and is a caption, not a heading. */
.igs-ct__form .frm_forms .frm_combo_inputs_container label{
  display: block; font-size: 12px !important; font-weight: 400 !important;
  color: var(--igs-muted) !important; margin: 4px 0 0 !important;
}

/* The page body is built in Elementor, and its section sets its own content
   width - narrower than this wrapper, which is what made the form look cramped
   no matter how wide the wrapper got. Scoped to the contact form area only, so
   no other Elementor page is touched. */
.igs-ct__form .elementor-container,
.igs-ct__form .elementor-widget-container{ max-width: 100% !important; }

/* --------------------------------------------------------------------------
   27c. GIVING THE FORM A SHAPE

   Once 27a/27b landed, the form was correctly styled and still looked cheap.
   The cause was not the styling: it was SIX IDENTICAL FULL-WIDTH SLABS with
   nothing to distinguish a two-word answer from a paragraph. A "Country" box
   as wide as the message box tells the reader nothing about what goes in it,
   and the whole thing reads as a default.

   Same mistake as the sale badge on 21 Sep, where two rounds went into
   restyling a corner badge when the problem was that it was a corner badge at
   all. "Looks poop" is usually a STRUCTURE complaint.

   So: short answers share a row, long ones get the full width. The field's own
   content decides which, rather than a hard-coded list of field names.
   -------------------------------------------------------------------------- */

.igs-ct__form .frm_forms .frm_fields_container{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px;
}
/* Default to full width, so anything unrecognised keeps today's behaviour.
   That also means no `:has()` support degrades to the current single column
   rather than to a broken layout. */
.igs-ct__form .frm_forms .frm_fields_container > .frm_form_field{ grid-column: 1 / -1; }
/* A field holding a single-line input is a short answer - half a row. A
   textarea, a captcha or anything else keeps the full width. */
.igs-ct__form .frm_forms .frm_fields_container > .frm_form_field:has(input[type="text"]),
.igs-ct__form .frm_forms .frm_fields_container > .frm_form_field:has(input[type="email"]),
.igs-ct__form .frm_forms .frm_fields_container > .frm_form_field:has(input[type="tel"]),
.igs-ct__form .frm_forms .frm_fields_container > .frm_form_field:has(select){
  grid-column: span 1;
}
.igs-ct__form .frm_forms .frm_fields_container > .frm_submit{ grid-column: 1 / -1; }
@media (max-width: 720px){
  .igs-ct__form .frm_forms .frm_fields_container{ grid-template-columns: 1fr; }
  .igs-ct__form .frm_forms .frm_fields_container > .frm_form_field{ grid-column: 1 / -1; }
}

/* The Name field was STILL half width after 27b, because the sub-field wrapper
   does not always carry `frm_combo_inputs_container` - the grid class sits on
   `frm_form_subfield-first` itself, and that class name varies by sub-field.
   Matching on the substring catches first/middle/last whatever grid class rides
   along with it. */
.igs-ct__form .frm_forms [class*="frm_form_subfield"]{
  width: 100% !important; max-width: 100% !important;
  float: none !important; padding-left: 0 !important; padding-right: 0 !important;
}
/* "First" under a lone name box is noise - the field's own label already says
   Name. It earns its place only when there is a Last beside it to tell apart. */
.igs-ct__form .frm_forms [class*="frm_form_subfield"]:only-child > label{ display: none; }

/* A section heading inside the form, if the form uses them. */
.igs-ct__form .frm_forms .frm_section_heading > h3,
.igs-ct__form .frm_forms .frm_section_heading > legend{
  font-family: "Barlow Condensed", Inter, sans-serif; font-size: 21px;
  font-weight: 700; margin: 26px 0 12px; padding: 0 0 8px;
  border-bottom: 1px solid var(--igs-hline, #D9D2C4); line-height: 1;
}
.igs-ct__form .frm_forms .frm_section_heading:first-child > h3{ margin-top: 0; }

/* Reviews: the score block sits where the hero image usually does. */
.igs-rv__score{
  text-align: center; align-self: center;
  background: rgba(255,255,255,.06); border: 1px solid #2a2621;
  border-radius: 3px; padding: 30px 24px;
}
.igs-rv__score b{
  display: block; font-family: "Barlow Condensed", Inter, sans-serif;
  font-size: clamp(64px, 9vw, 104px); line-height: .9; color: #fff;
}
.igs-rv__score .igs-stars{ display: block; color: var(--igs-yellow); font-size: 24px; margin: 8px 0 6px; }
.igs-rv__score i{ font-style: normal; font-size: 14px; color: #a49b8c; }
.igs-rv__bars{ max-width: 38rem; }
.igs-rv__body{ max-width: 58rem; }

/* --------------------------------------------------------------------------
   27d. CUSTOMER REVIEWS FOR WOOCOMMERCE  (CusRev)

   The review list and slider on this page come from the CusRev plugin. Class
   names below were read off the plugin's own templates rather than guessed -
   `templates/cr-review.php` and `templates/reviews-slider.php` - because the
   two use COMPLETELY DIFFERENT markup and a guess would have styled one and
   missed the other:

     - the slider emits its own cards: .cr-review-card, .reviewer-name,
       .review-text, .datetime, .review-product
     - the all-reviews list reuses WOOCOMMERCE'S COMMENT MARKUP:
       li > .comment_container > .cr-comment-text, with
       .woocommerce-review__author and .woocommerce-review__published-date

   EVERYTHING IS SCOPED UNDER .igs-rv__body. The slider's own class names are
   things like `.top-row`, `.rating` and `.datetime` - bare enough that an
   unscoped rule would reach half the site.

   No !important anywhere: CusRev ships a static stylesheet, so an extra class
   of depth wins honestly. The colours it renders INLINE come from the
   shortcode's own attributes, which is why those were set to the theme's
   values when the shortcodes were rewritten - an inline style would beat any
   selector here.

   Only the product page is left alone. It uses this same markup, so these
   rules can be widened to it, but that is a different page and was not asked
   for.
   -------------------------------------------------------------------------- */

/* ---- the all-reviews list ---- */
.igs-rv__body .commentlist,
#reviews #comments .commentlist,
.igs-rv__body ol.commentlist,
#reviews #comments ol.commentlist{ list-style: none; margin: 0; padding: 0; }
.igs-rv__body .commentlist li,
#reviews #comments .commentlist li{
  list-style: none; margin: 0 0 14px; padding: 0; background: none; border: 0;
}
.igs-rv__body .comment_container,
#reviews #comments .comment_container{
  display: flex; gap: 14px; align-items: flex-start;
  background: #fff; border: 1px solid var(--igs-hline, #D9D2C4);
  border-radius: 3px; padding: 18px 20px;
}
/* A verified purchase is the whole point of a review on a shop. Marked with a
   yellow edge rather than a badge colour, so it reads at a glance without
   adding another colour to the page. */
.igs-rv__body .comment_container.cr-verified-owner,
#reviews #comments .comment_container.cr-verified-owner{ border-left: 3px solid var(--igs-yellow); }
.igs-rv__body .cr-std-avatar,
#reviews #comments .cr-std-avatar{
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; margin: 0;
}
.igs-rv__body .cr-comment-text,
#reviews #comments .cr-comment-text{ flex: 1 1 auto; min-width: 0; }
.igs-rv__body .comment_container .meta,
#reviews #comments .comment_container .meta{
  margin: 0 0 6px; font-size: 13.5px; line-height: 1.4; color: var(--igs-muted);
}
.igs-rv__body .woocommerce-review__author,
#reviews #comments .woocommerce-review__author{
  font-weight: 600; color: var(--igs-ink); font-size: 14.5px;
}
.igs-rv__body .woocommerce-review__published-date,
#reviews #comments .woocommerce-review__published-date{
  display: block; font-size: 12.5px; color: var(--igs-muted); margin-top: 2px;
}
.igs-rv__body .woocommerce-review__verified,
#reviews #comments .woocommerce-review__verified{
  font-size: 12px; font-weight: 600; color: var(--igs-green);
}
.igs-rv__body .cr-comment-text p,
#reviews #comments .cr-comment-text p{ font-size: 14.5px; line-height: 1.65; margin: 8px 0 0; }
/* Which product it was left against - useful, but it is a footnote to the
   review, not a heading competing with the reviewer's name. */
.igs-rv__body .cr-rating-product-name,
#reviews #comments .cr-rating-product-name{
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--igs-line);
}
.igs-rv__body .cr-product-name-picture,
#reviews #comments .cr-product-name-picture{ display: flex; align-items: center; gap: 9px; }
.igs-rv__body .iv-comment-product-img,
#reviews #comments .iv-comment-product-img{ width: 34px; height: 34px; object-fit: cover; border-radius: 3px; }
.igs-rv__body .cr-comment-productname-a,
#reviews #comments .cr-comment-productname-a{
  font-size: 12.5px; font-weight: 600; color: var(--igs-ink); text-decoration: none;
}
.igs-rv__body .cr-comment-productname-a:hover,
#reviews #comments .cr-comment-productname-a:hover{ border-bottom: 2px solid var(--igs-yellow); }

/* ---- the slider ---- */
.igs-rv__body .cr-reviews-slider{ margin: 0 0 26px; }
.igs-rv__body .cr-reviews-slider .cr-review-card-inner{
  background: #fff; border: 1px solid var(--igs-hline, #D9D2C4);
  border-radius: 3px; padding: 18px 20px; height: 100%;
}
.igs-rv__body .cr-reviews-slider .reviewer-name{
  font-weight: 600; font-size: 14.5px; color: var(--igs-ink);
}
.igs-rv__body .cr-reviews-slider .datetime{ font-size: 12.5px; color: var(--igs-muted); }
.igs-rv__body .cr-reviews-slider .review-text{ font-size: 14.5px; line-height: 1.65; }
.igs-rv__body .cr-reviews-slider .cr-slider-read-more,
.igs-rv__body .cr-reviews-slider .cr-slider-read-less{
  font-size: 12.5px; font-weight: 600; color: var(--igs-ink);
  border-bottom: 2px solid var(--igs-yellow); cursor: pointer;
}
.igs-rv__body .cr-reviews-slider .verified-badge,
.igs-rv__body .cr-reviews-slider .cr-reviewer-verified{
  font-size: 12px; font-weight: 600; color: var(--igs-green);
}
.igs-rv__body .cr-reviews-slider .review-product{
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--igs-line);
  display: flex; align-items: center; gap: 9px;
}
.igs-rv__body .cr-reviews-slider .cr-product-thumbnail img,
.igs-rv__body .cr-reviews-slider .review-thumbnail img{
  width: 34px; height: 34px; object-fit: cover; border-radius: 3px;
}
.igs-rv__body .cr-reviews-slider .product-title{
  font-size: 12.5px; font-weight: 600; line-height: 1.35;
}
.igs-rv__body .cr-reviews-slider .product-title a{ color: var(--igs-ink); text-decoration: none; }

/* The star SVG sizes off font-size in this plugin, so it is set once here
   rather than per block, and both markups pick it up. */
.igs-rv__body .crstar-rating-svg{ font-size: 15px; line-height: 1; margin: 2px 0 0; }

/* Pagination / load more, which ships unstyled. */
.igs-rv__body .cr-load-more-reviews,
.igs-rv__body .cr-reviews-pagination a{
  font-family: "Barlow Condensed", Inter, sans-serif; font-weight: 700;
  font-size: 16px; color: var(--igs-ink); background: #fff;
  border: 1px solid var(--igs-hline, #D9D2C4); border-radius: 3px;
  padding: 9px 18px; text-decoration: none; cursor: pointer;
}
.igs-rv__body .cr-load-more-reviews:hover,
.igs-rv__body .cr-reviews-pagination a:hover{ background: var(--igs-yellow); border-color: var(--igs-yellow); }

/* --------------------------------------------------------------------------
   27e. CUSREV — THE OVERRIDES THAT HAVE TO WIN

   27d was written on the assumption that "CusRev ships a static stylesheet, so
   one extra class of depth wins honestly." That was an ASSUMPTION, not a
   measurement, and the reviews came out still looking like the plugin.

   Same error as section 27a made about Formidable. Both times the reasoning
   was sound and the premise was untested. WooCommerce and CusRev both target
   this area with TWO IDS - `#reviews #comments ol.commentlist li ...` - and
   the plugin's stylesheet is enqueued per-shortcode, so it can also land after
   the theme's.

   So the properties that decide whether a review looks like this site are
   forced, and the plugin keeps everything structural - the slider's carousel
   layout in particular, which is why its stylesheet is not simply dequeued.

   Scoped to `.igs-rv__body` and `#reviews`. Nothing here reaches any other
   part of the site.
   -------------------------------------------------------------------------- */

.igs-rv__body .comment_container,
#reviews #comments .comment_container{
  background: #fff !important;
  border: 1px solid var(--igs-hline, #D9D2C4) !important;
  border-radius: 3px !important;
  padding: 18px 20px !important;
  box-shadow: none !important;
}
.igs-rv__body .comment_container.cr-verified-owner,
#reviews #comments .comment_container.cr-verified-owner{
  border-left: 3px solid var(--igs-yellow) !important;
}
.igs-rv__body .cr-std-avatar,
#reviews #comments .cr-std-avatar{
  width: 40px !important; height: 40px !important; border-radius: 50% !important;
}
/* The plugin sets its own font stack on review text. Inheriting puts it back
   on Inter with everything else - the single biggest reason plugin output
   reads as foreign even when the colours match. */
.igs-rv__body .cr-comment-text,
.igs-rv__body .cr-comment-text p,
.igs-rv__body .cr-reviews-slider .review-text,
#reviews #comments .cr-comment-text,
#reviews #comments .cr-comment-text p{
  font-family: inherit !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  color: var(--igs-ink) !important;
}
.igs-rv__body .woocommerce-review__author,
#reviews #comments .woocommerce-review__author{
  font-family: inherit !important; font-weight: 600 !important;
  font-size: 14.5px !important; color: var(--igs-ink) !important;
}
.igs-rv__body .woocommerce-review__published-date,
#reviews #comments .woocommerce-review__published-date{
  font-size: 12.5px !important; color: var(--igs-muted) !important;
}
.igs-rv__body .cr-reviews-slider .cr-review-card-inner{
  background: #fff !important;
  border: 1px solid var(--igs-hline, #D9D2C4) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
}
.igs-rv__body .cr-reviews-slider .reviewer-name{
  font-family: inherit !important; font-weight: 600 !important; font-size: 14.5px !important;
}
.igs-rv__body .cr-reviews-slider .datetime{
  font-size: 12.5px !important; color: var(--igs-muted) !important;
}
/* The slider ships THREE stacked grey panels: one around the whole carousel,
   one behind each review's text, and one behind the product footnote. Against
   a cream page that reads as a widget borrowed from another site. The card
   itself is the only surface that should be a different colour from the page,
   so everything else goes transparent. */
.igs-rv__body .cr-reviews-slider,
.igs-rv__body .cr-reviews-slider .middle-row,
.igs-rv__body .cr-reviews-slider .review-content,
.igs-rv__body .cr-reviews-slider .review-product,
.igs-rv__body .cr-reviews-slider .top-row{
  background: transparent !important; border-color: transparent !important;
}
/* The product footnote keeps a rule above it rather than a filled box - same
   device as the review list, so the two read as one design. */
.igs-rv__body .cr-reviews-slider .review-product{
  border-top: 1px solid var(--igs-line) !important;
}

/* If the summary bar is ever switched back on in the shortcode, it must not
   sit on a grey slab under a page that already shows the score and the bars. */
.igs-rv__body [class*="summary"],
#reviews #comments [class*="summary"]{ background: transparent !important; }

/* ---- the product page ----
   The card rules above already carry a `#reviews #comments` twin, so the review
   LIST matches the reviews page. Two IDs deliberately: WooCommerce's own
   stylesheet targets this area as `#reviews #comments ol.commentlist li ...`,
   and a single-class scope loses to it.

   What the product page has and the reviews page does not is the SUBMISSION
   FORM, which ships unstyled and looks like a fault against this design. */
.woocommerce #reviews .woocommerce-Reviews-title,
.woocommerce #reviews .comment-reply-title{
  font-family: "Barlow Condensed", Inter, sans-serif; font-size: 24px;
  font-weight: 700; line-height: 1.1; margin: 0 0 14px; display: block;
}
.woocommerce #reviews .woocommerce-noreviews{ font-size: 14.5px; color: var(--igs-muted); }
.woocommerce #review_form_wrapper{
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--igs-hline, #D9D2C4);
}
.woocommerce #review_form .comment-form-author,
.woocommerce #review_form .comment-form-email,
.woocommerce #review_form .comment-form-comment{ margin: 0 0 16px; }
.woocommerce #review_form label{
  display: block; font-size: 13.5px; font-weight: 600;
  color: var(--igs-ink); margin: 0 0 5px;
}
.woocommerce #review_form input[type="text"],
.woocommerce #review_form input[type="email"],
.woocommerce #review_form textarea,
.woocommerce #review_form .cr-review-form-textbox{
  box-sizing: border-box; width: 100%; padding: 12px 14px;
  font: inherit; font-size: 15px; line-height: 1.4;
  border: 1px solid var(--igs-line); border-radius: 3px;
  background: #fff; color: var(--igs-ink);
}
.woocommerce #review_form textarea,
.woocommerce #review_form .cr-review-form-textbox{ min-height: 8rem; resize: vertical; }
.woocommerce #review_form input:focus,
.woocommerce #review_form textarea:focus{
  outline: 2px solid var(--igs-yellow); outline-offset: 1px; border-color: var(--igs-ink);
}
.woocommerce #review_form .comment-form-rating{ margin: 0 0 16px; }
.woocommerce #review_form .submit,
.woocommerce #review_form .cr-single-product-rev-submit{
  width: auto; background: var(--igs-ink); color: #fff; border: 0;
  font-family: "Barlow Condensed", Inter, sans-serif; font-size: 18px;
  font-weight: 700; padding: 12px 28px; border-radius: 3px; cursor: pointer;
}
.woocommerce #review_form .submit:hover,
.woocommerce #review_form .cr-single-product-rev-submit:hover{ filter: brightness(1.12); }
/* "You must be logged in" / "only verified owners may review" - information,
   not an error, so it reads as a quiet note rather than a red warning. */
.woocommerce #reviews .must-log-in,
.woocommerce #reviews .woocommerce-verification-required{
  font-size: 13.5px; line-height: 1.6; color: var(--igs-muted);
  background: var(--igs-wash); border: 1px solid var(--igs-line);
  border-radius: 3px; padding: 13px 16px; margin: 0;
}

/* --------------------------------------------------------------------------
   28. MY ACCOUNT  (WooCommerce, no template)
   NO page template is assigned to My account, on purpose. Its content is
   WooCommerce's own shortcode and endpoint routing - login, register, lost
   password, orders, addresses, payment methods. A template that printed its
   own markup would break the lot. So it is styled, not rebuilt.
   -------------------------------------------------------------------------- */
.woocommerce-account .woocommerce{ max-width: var(--igs-wrap); margin: 0 auto; padding: 44px 24px 64px; }

/* Logged out: the login and register forms sit side by side. */
.woocommerce-account .u-columns.col2-set{ display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 800px){ .woocommerce-account .u-columns.col2-set{ grid-template-columns: 1fr 1fr; } }
.woocommerce-account .u-column1,
.woocommerce-account .u-column2{ width: auto !important; float: none !important; }
.woocommerce-account form.login,
.woocommerce-account form.register{
  border: 1px solid var(--igs-line); border-radius: 3px; padding: 26px 24px;
  background: #fff; margin: 0;
}
.woocommerce-account h2{
  font-family: "Barlow Condensed", Inter, sans-serif; font-size: 28px;
  font-weight: 700; margin: 0 0 16px; line-height: 1;
}

/* Logged in: the endpoint nav down the side. */
@media (min-width: 900px){
  .woocommerce-account .woocommerce-MyAccount-navigation{ width: 22%; }
  .woocommerce-account .woocommerce-MyAccount-content{ width: 74%; }
}
.woocommerce-account .woocommerce-MyAccount-navigation ul{ list-style: none; margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li{ margin: 0 0 2px; }
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display: block; padding: 10px 14px; border-radius: 3px;
  color: var(--igs-ink); text-decoration: none; font-weight: 600; font-size: 14.5px;
  border: 1px solid transparent;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{
  background: var(--igs-wash); border-color: var(--igs-hline, #D9D2C4);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
  background: var(--igs-ink); color: #fff;
}
.woocommerce-account .woocommerce-MyAccount-content{ font-size: 15px; line-height: 1.65; }

/* Orders table. Woo's default is a bare grid; this matches the rest of the site
   and stops it running off a phone. */
.woocommerce-account table.woocommerce-orders-table,
.woocommerce-account table.shop_table{
  border: 1px solid var(--igs-line); border-radius: 3px; border-collapse: separate;
  border-spacing: 0; overflow: hidden; width: 100%;
}
.woocommerce-account table.shop_table th{
  background: var(--igs-wash); font-size: 12px; text-transform: uppercase;
  letter-spacing: .06em; padding: 12px 14px; text-align: left;
}
.woocommerce-account table.shop_table td{
  padding: 13px 14px; border-top: 1px solid var(--igs-hline, #D9D2C4); font-size: 14.5px;
}

/* Woo's account forms use the same field classes as checkout. */
.woocommerce-account .woocommerce-Input,
.woocommerce-account input.input-text,
.woocommerce-account .form-row input,
.woocommerce-account .form-row select,
.woocommerce-account .form-row textarea{
  width: 100%; padding: 12px 14px; font: inherit; font-size: 15px;
  border: 1px solid var(--igs-line); border-radius: 3px; background: #fff;
  color: var(--igs-ink);
}
.woocommerce-account .form-row label,
.woocommerce-account .woocommerce-form-row label{
  display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 5px;
}
.woocommerce-account .woocommerce-form-login__rememberme{ font-weight: 400; margin: 12px 0; }
.woocommerce-account .woocommerce-LostPassword{ margin: 12px 0 0; font-size: 13.5px; }

/* Past shows: proof, not a schedule, so it compresses to chips. */
.igs-ev__past{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.igs-ev__past li{
  background: #fff; border: 1px solid var(--igs-hline, #D9D2C4); border-radius: 3px;
  padding: 8px 12px; font-size: 12.5px; line-height: 1.3;
}
.igs-ev__past b{ font-weight: 600; }
.igs-ev__past i{ font-style: normal; color: var(--igs-muted); }
.igs-ev__past i::before{ content: " \00b7 "; }

/* --------------------------------------------------------------------------
   29. POINTS AND REWARDS  (WP Swings "Points and Rewards for WooCommerce")
   The plugin awards the points; the theme only states the rule. All four
   placements share one look so the scheme reads as one thing rather than four
   unrelated notices. See section 6 in functions.php for the numbers.
   -------------------------------------------------------------------------- */
.igs-pts{
  background: var(--igs-wash); border: 1px solid var(--igs-hline, #D9D2C4);
  border-left: 3px solid var(--igs-yellow); border-radius: 3px;
  font-size: 14px; line-height: 1.6; color: var(--igs-ink);
}
/* Product page: a single line under the price. It must not out-shout the
   price it sits beneath, so it is quiet and narrow rather than a banner. */
.igs-pts--inline{ padding: 9px 13px; margin: 0 0 16px; font-size: 13.5px; }
.igs-pts--inline b{ font-weight: 700; }
/* My Account, logged out: the fuller pitch, where somebody is deciding
   whether to register. */
.igs-pts--band{ padding: 18px 20px; margin: 0 0 22px; }
.igs-pts--band b{
  display: block; font-family: "Barlow Condensed", Inter, sans-serif;
  font-size: 21px; font-weight: 700; line-height: 1.1; margin-bottom: 6px;
}
.igs-pts--band p{ margin: 0 0 6px; }
.igs-pts--band .igs-pts__cta{ font-weight: 600; margin: 0; }
/* My Account, logged in: sits beside the greeting. */
.igs-pts--acct{ padding: 13px 16px; max-width: 30rem; }
.igs-pts--acct b{ display: block; font-weight: 600; margin-bottom: 3px; }
.igs-pts--acct span{ font-size: 12.5px; color: var(--igs-muted); }
.igs-pts--acct i{ font-style: normal; font-weight: 600; color: var(--igs-ink); }
/* Cart and checkout: a row in the totals table, so it reads as part of the
   arithmetic rather than an advert stuck underneath it. */
.igs-pts-row th{ font-weight: 600; }
.igs-pts-row td span{ font-size: 12.5px; color: var(--igs-muted); }
.igs-pts-row th,
.igs-pts-row td{ border-top: 1px solid var(--igs-hline, #D9D2C4); }
/* Footer: one quiet line. It is on every page, so it has to be the smallest
   possible statement or it becomes wallpaper. */
.igs-ft__pts{ font-size: 12.5px; opacity: .85; }

/* --------------------------------------------------------------------------
   30. MY ACCOUNT, THE PARTS WOOCOMMERCE LEAVES BARE
   Extends section 28. Still NO page template - see the note there.
   -------------------------------------------------------------------------- */
/* The header printed by igs_account_header(). It sits before Woo's floated
   navigation, so it has to clear it or the nav rides up alongside. */
.woocommerce-account .igs-acct__head{
  width: 100%; clear: both; display: flex; flex-wrap: wrap; gap: 18px;
  align-items: flex-end; justify-content: space-between;
  margin: 0 0 26px; padding-bottom: 20px;
  border-bottom: 1px solid var(--igs-hline, #D9D2C4);
}
.woocommerce-account .igs-acct__title{ flex: 1 1 18rem; min-width: 0; }
.woocommerce-account .igs-acct__title h1{
  font-family: "Barlow Condensed", Inter, sans-serif;
  font-size: clamp(30px, 4vw, 42px); font-weight: 700; line-height: 1; margin: 0;
}
/* The dashboard's "Hello X (not X? Log out)" paragraph. */
.woocommerce-account .woocommerce-MyAccount-content > p:first-child{
  font-size: 15px; color: var(--igs-muted);
}
/* Addresses as cards rather than two bare stacks of text. */
.woocommerce-account .woocommerce-Addresses{
  display: grid; gap: 18px; grid-template-columns: 1fr;
}
@media (min-width: 720px){
  .woocommerce-account .woocommerce-Addresses{ grid-template-columns: 1fr 1fr; }
}
.woocommerce-account .woocommerce-Address{
  width: auto !important; float: none !important;
  background: #fff; border: 1px solid var(--igs-hline, #D9D2C4);
  border-radius: 3px; padding: 20px 22px;
}
.woocommerce-account .woocommerce-Address-title h3{
  font-family: "Barlow Condensed", Inter, sans-serif; font-size: 20px;
  font-weight: 700; margin: 0 0 10px; line-height: 1;
}
.woocommerce-account .woocommerce-Address address{ font-style: normal; font-size: 14.5px; line-height: 1.7; }
/* Empty states. Woo's "No order has been made yet" is a bare sentence next to
   a button; on a page with no other content it reads as a fault. */
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-error{
  background: var(--igs-wash); border: 1px solid var(--igs-hline, #D9D2C4);
  border-left: 3px solid var(--igs-yellow); border-radius: 3px;
  padding: 16px 18px; font-size: 14.5px; line-height: 1.6; list-style: none;
}
.woocommerce-account .woocommerce-error{ border-left-color: var(--igs-red); }
.woocommerce-account .woocommerce-message{ border-left-color: var(--igs-green); }
/* The nav gains a "Points" tab from the plugin. It needs no special rule - the
   generic endpoint styling in section 28 already covers it, which is the point
   of styling by endpoint rather than by name. */

/* --------------------------------------------------------------------------
   31. DELIVERY & PAYMENT  (template-payment-shipping.php)
   Every figure on this page came off the live WooCommerce zones, so the styling
   job is only to make the three UK options comparable at a glance - a price
   list is read by scanning, not by reading.
   -------------------------------------------------------------------------- */
.igs-ps2__rates{ display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 760px){ .igs-ps2__rates{ grid-template-columns: repeat(3, 1fr); } }
.igs-ps2__rate{
  background: #fff; border: 1px solid var(--igs-hline, #D9D2C4);
  border-radius: 3px; padding: 22px 22px 20px;
}
/* Free is the one worth noticing, so it gets the yellow edge rather than a
   different colour scheme - the same device the verified-review card uses. */
.igs-ps2__rate--free{ border-left: 3px solid var(--igs-yellow); }
.igs-ps2__rate b{
  display: block; font-family: "Barlow Condensed", Inter, sans-serif;
  font-size: clamp(32px, 4vw, 42px); font-weight: 700; line-height: 1;
  color: var(--igs-ink); font-variant-numeric: tabular-nums;
}
.igs-ps2__rate span{
  display: block; font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--igs-muted); margin: 8px 0 8px;
}
.igs-ps2__rate p{ margin: 0; font-size: 14px; line-height: 1.6; color: var(--igs-muted); }

.igs-ps2__note{
  background: var(--igs-wash); border: 1px solid var(--igs-hline, #D9D2C4);
  border-left: 3px solid var(--igs-yellow); border-radius: 3px;
  padding: 16px 18px; margin-top: 18px;
}
.igs-ps2__note b{ display: block; font-size: 15px; margin-bottom: 4px; }
.igs-ps2__note span{ font-size: 14px; line-height: 1.6; color: var(--igs-muted); }
.igs-ps2__note a{ color: var(--igs-ink); font-weight: 600; }

.igs-ps2__lead{ max-width: 46rem; font-size: 15.5px; line-height: 1.7; margin: 0 0 16px; }
.igs-ps2__shows{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 2px; max-width: 46rem;
}
.igs-ps2__shows li{
  display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline;
  padding: 11px 14px; background: #fff;
  border: 1px solid var(--igs-hline, #D9D2C4); border-radius: 3px;
}
.igs-ps2__shows b{ font-size: 15px; }
.igs-ps2__shows span{ font-size: 13.5px; color: var(--igs-muted); }

.igs-ps2__intl{ max-width: 46rem; }
.igs-ps2__intl p{ font-size: 15.5px; line-height: 1.7; margin: 0 0 12px; }
.igs-ps2__small{ font-size: 13px !important; line-height: 1.6; color: var(--igs-muted); }

/* --------------------------------------------------------------------------
   32. CATEGORY PAGES AND FILTERS  (woocommerce/archive-product.php,
       functions.php section 8)

   The filter panel sits left of the grid from 1000px; below that it is a
   drawer behind a "Filter" button. The grid loses one column to make room,
   so tiles stay the size they were.

   Links are scoped `.igs-flt a.x` - (0,2,1) - because Elementor's global kit
   colours links at `.elementor-kit-N a` (0,1,1) and would otherwise repaint
   every option in the site's link colour.
   -------------------------------------------------------------------------- */
.igs-cat__head{ margin: 0 0 4px; }
.igs-cat__count{
  font-size: 14px; color: var(--igs-muted); margin: 0 0 14px;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 1000px){
  .igs-cat__body.has-filters{
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    gap: 30px;
    align-items: start;
  }
  /* Stays in view down a long listing, and scrolls itself if taller than
     the window rather than hiding its bottom groups. */
  .igs-cat__body.has-filters .igs-flt{
    position: sticky; top: 16px;
    max-height: calc(100vh - 32px); overflow-y: auto;
    padding-right: 4px;
  }
  .igs-cat__body.has-filters ul.products{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1280px){
  .igs-cat__body.has-filters ul.products{ grid-template-columns: repeat(4, 1fr); }
}

/* --- the drawer toggle (phones and tablets) --- */
.igs-flt{ margin: 0 0 18px; }
.igs-flt__toggle{
  display: flex; align-items: center; justify-content: center; gap: 6px;
  list-style: none; cursor: pointer;
  border: 1px solid var(--igs-ink); border-radius: var(--igs-radius);
  background: #fff; color: var(--igs-ink);
  padding: 11px 16px; font-weight: 600; font-size: 14px;
}
.igs-flt__toggle::-webkit-details-marker{ display: none; }
.igs-flt__toggle::after{ content: "\25BE"; font-size: 12px; }
.igs-flt__drawer[open] > .igs-flt__toggle::after{ content: "\25B4"; }
.igs-flt__toggle span{ color: var(--igs-muted); font-weight: 500; }
.igs-flt__drawer[open] > .igs-flt__groups{
  border: 1px solid var(--igs-line); border-top: 0;
  border-radius: 0 0 var(--igs-radius) var(--igs-radius);
  padding: 6px 14px 4px;
}
@media (min-width: 1000px){
  .igs-flt__toggle{ display: none; }
  .igs-flt__drawer[open] > .igs-flt__groups{ border: 0; padding: 0; }
}

/* --- groups and options --- */
.igs-flt__group{ padding: 12px 0 10px; border-bottom: 1px solid var(--igs-line); }
.igs-flt__group:last-child{ border-bottom: 0; }
.igs-flt__k{
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--igs-muted); font-weight: 600; margin: 0 0 8px;
}
.igs-flt__list{ list-style: none; margin: 0; padding: 0; }
.igs-flt__list li{ margin: 0; }

.igs-flt a.igs-flt__opt,
.igs-flt a.igs-flt__opt:visited{
  display: flex; align-items: center; gap: 9px;
  padding: 5px 4px; border-radius: 3px;
  color: var(--igs-ink); text-decoration: none;
  font-size: 14px; line-height: 1.3;
}
.igs-flt a.igs-flt__opt:hover,
.igs-flt a.igs-flt__opt:focus-visible{ background: var(--igs-wash); color: var(--igs-ink); }
.igs-flt__box{
  flex: 0 0 15px; height: 15px;
  border: 1.5px solid #9b958b; border-radius: 3px; background: #fff;
  position: relative;
}
.igs-flt a.igs-flt__opt.is-on .igs-flt__box{ background: var(--igs-ink); border-color: var(--igs-ink); }
/* The tick: two borders of a rotated box, yellow on the ink fill. */
.igs-flt a.igs-flt__opt.is-on .igs-flt__box::after{
  content: ""; position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid var(--igs-yellow); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.igs-flt a.igs-flt__opt.is-on .igs-flt__name{ font-weight: 600; }
.igs-flt__name{ flex: 1 1 auto; min-width: 0; }
.igs-flt__n{
  font-size: 12px; color: var(--igs-muted);
  font-variant-numeric: tabular-nums;
}

.igs-flt__more > summary{
  cursor: pointer; list-style: none;
  font-size: 13px; font-weight: 600; color: var(--igs-ink);
  padding: 6px 4px 2px; text-decoration: underline; text-underline-offset: 3px;
}
.igs-flt__more > summary::-webkit-details-marker{ display: none; }
.igs-flt__more[open] > summary{ display: none; }

/* --- chips above the grid --- */
.igs-flt__chips{
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 16px;
}
.igs-flt__chips-k{ font-size: 13px; color: var(--igs-muted); margin-right: 2px; }
.igs-flt__chips a.igs-flt__chip,
.igs-flt__chips a.igs-flt__chip:visited{
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--igs-ink); color: #fff; text-decoration: none;
  border-radius: 3px; padding: 6px 10px; font-size: 13px; line-height: 1.2;
}
.igs-flt__chips a.igs-flt__chip:hover,
.igs-flt__chips a.igs-flt__chip:focus-visible{ background: #000; color: var(--igs-yellow); }
.igs-flt__chips a.igs-flt__clear,
.igs-flt__chips a.igs-flt__clear:visited{
  font-size: 13px; font-weight: 600; color: var(--igs-ink);
  text-decoration: underline; text-underline-offset: 3px; margin-left: 4px;
}

/* --- nothing matched --- */
.igs-cat__none{
  border: 1px dashed var(--igs-line); border-radius: var(--igs-radius);
  padding: 28px 24px; margin: 0 0 32px; background: var(--igs-wash);
}
.igs-cat__none p{ margin: 0; font-size: 15px; color: var(--igs-ink); }
.igs-cat__none .igs-cat__none-h{
  font-family: "Barlow Condensed", Inter, sans-serif;
  font-weight: 700; font-size: 26px; margin-bottom: 6px;
}
.igs-cat__none a{ color: var(--igs-ink); text-decoration: underline; }

/* --------------------------------------------------------------------------
   27f. REVIEWS PAGE - ONE LIST, NOT TWO

   The page body carries two Customer Reviews for WooCommerce widgets: a slider
   and the full list. The slider showed the same five reviews the list starts
   with, three times over as it looped, directly above them. The list is the
   one that searches, sorts and pages through all of them, so the slider goes.
   Scoped to this page's body, so a slider used anywhere else is untouched.
   -------------------------------------------------------------------------- */
.igs-rv__body .cr-reviews-slider{ display: none !important; }

/* --------------------------------------------------------------------------
   33. BASKET AND CHECKOUT  (shop-flow.php, functions.php section 10)

   WooCommerce's own cart and checkout markup, in the site's type, buttons and
   field style. Desktop: the basket or the form on the left, the totals or the
   order summary on the right, the summary following as you scroll so Place
   order is always in reach. Phones: one column in WooCommerce's order.

   Buttons are forced for the same reason as everywhere else on this site - a
   global Elementor button style beats a plain class. The two actions that move
   an order forward (Proceed to checkout, Place order) are yellow, the house
   primary; everything else is the dark button.

   --igs-wrap is SET here, not inherited. It is only defined inside .igs-home,
   and an undefined custom property drops the whole max-width declaration.
   -------------------------------------------------------------------------- */
.igs-flow{
  --igs-wrap: 1180px;
  background: #fff;
  padding: 26px 0 60px;
}
.igs-flow .igs-wrap{ max-width: var(--igs-wrap); margin: 0 auto; padding: 0 24px; }

.igs-flow__head{
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 10px 24px; border-bottom: 1px solid var(--igs-line);
  padding-bottom: 14px; margin-bottom: 22px;
}
.igs-flow__head h1{
  font-family: "Barlow Condensed", Inter, sans-serif; font-weight: 700;
  font-size: 40px; line-height: 1; margin: 0; color: var(--igs-ink);
}
.igs-flow__steps{
  display: flex; gap: 18px; list-style: none; margin: 0; padding: 0;
  font-size: 13px; font-weight: 600; color: var(--igs-muted);
}
.igs-flow__steps li{ display: inline-flex; align-items: center; gap: 7px; }
.igs-flow__steps span{
  display: inline-grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; border: 1.5px solid var(--igs-line); font-size: 11.5px;
}
.igs-flow__steps .is-now{ color: var(--igs-ink); }
.igs-flow__steps .is-now span{ background: var(--igs-yellow); border-color: var(--igs-yellow); color: var(--igs-ink); }
.igs-flow__steps .is-done span{ background: var(--igs-ink); border-color: var(--igs-ink); color: #fff; }

/* --- shared: tables, notices, links --- */
.igs-flow .woocommerce a{ color: var(--igs-ink); }
.igs-flow .woocommerce table.shop_table{
  border: 1px solid var(--igs-line); border-radius: 6px; border-collapse: separate;
  border-spacing: 0; margin: 0; width: 100%; font-size: 14.5px; background: #fff;
}
.igs-flow .woocommerce table.shop_table th,
.igs-flow .woocommerce table.shop_table td{ padding: 12px 14px; border-top: 1px solid var(--igs-line); vertical-align: middle; }
.igs-flow .woocommerce table.shop_table thead th{
  border-top: 0; background: var(--igs-wash); font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--igs-muted); font-weight: 700;
}
.igs-flow .woocommerce table.shop_table .amount{ font-weight: 700; color: var(--igs-ink); }

.igs-flow .woocommerce-message,
.igs-flow .woocommerce-info,
.igs-flow .woocommerce-error{
  background: var(--igs-wash) !important; color: var(--igs-ink) !important;
  border: 1px solid var(--igs-line) !important; border-left: 3px solid var(--igs-ink) !important;
  border-radius: 4px; padding: 12px 16px !important; margin: 0 0 14px !important;
  font-size: 14px; font-weight: 500; text-transform: none !important; letter-spacing: normal !important;
  list-style: none;
}
.igs-flow .woocommerce-message::before,
.igs-flow .woocommerce-info::before{ display: none; }
.igs-flow .woocommerce-error{ border-left-color: var(--igs-red) !important; }

/* The points plugin prints two banners in solid black capitals (its colour is
   inline, hence !important): the rule, and the first-order bonus. They stay -
   the plugin owns them - but as quiet notes, not shouting. */
.igs-flow #wps_wpr_order_notice{
  background: var(--igs-wash) !important; color: var(--igs-ink) !important;
  border-left-color: var(--igs-yellow) !important; font-size: 13.5px !important;
}
/* The first-order banner wraps its text in a SECOND element with its own
   inline black background - seen on staging after v0.40.0 went up, as a black
   bar with near-black text on it. Everything inside is flattened. */
.igs-flow #wps_wpr_order_notice *{
  background: transparent !important; color: inherit !important;
  padding: 0 !important; margin: 0 !important; box-shadow: none !important;
}
/* On the LIVE site the plugin's font rule sits on the inner element, so
   flattening it dropped the notes to the browser default serif (Times). */
.igs-flow #wps_wpr_order_notice,
.igs-flow #wps_wpr_order_notice *{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-weight: 600 !important; font-size: 13.5px !important; line-height: 1.45 !important;
}

/* "You may be interested in..." - moved under the basket, full width
   (functions.php section 10), up to four across. */
.igs-flow--cart .cross-sells{ margin: 34px 0 0; border-top: 1px solid var(--igs-line); padding-top: 22px; }
.igs-flow--cart .cross-sells > h2{
  font-family: "Barlow Condensed", Inter, sans-serif; font-weight: 700; font-size: 26px;
  margin: 0 0 14px; color: var(--igs-ink);
}
.igs-flow--cart .cross-sells ul.products{
  display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 16px !important;
  margin: 0 !important; padding: 0 !important;
}
.igs-flow--cart .cross-sells ul.products::before,
.igs-flow--cart .cross-sells ul.products::after{ display: none !important; }
.igs-flow--cart .cross-sells ul.products li.product{ width: auto !important; margin: 0 !important; float: none !important; }
@media (max-width: 900px){
  .igs-flow--cart .cross-sells ul.products{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Delivery options in the basket totals: label above, options full width, so
   "Pickup at The Other Partizan, 11 Oct 2026" is one line, not three. Desktop
   only - on phones WooCommerce already stacks the totals table its own way. */
@media (min-width: 769px){
  /* The whole table as a list, same as the checkout summary: a single grid row
     inside a real table stays squeezed into the first column. */
  .igs-flow--cart .cart_totals table.shop_table,
  .igs-flow--cart .cart_totals table.shop_table tbody{ display: block; width: 100%; }
  .igs-flow--cart .cart_totals table.shop_table tr{
    display: grid; grid-template-columns: 38% minmax(0, 1fr); border-top: 1px solid var(--igs-line);
  }
  .igs-flow--cart .cart_totals table.shop_table tr:first-child{ border-top: 0; }
  .igs-flow--cart .cart_totals table.shop_table th,
  .igs-flow--cart .cart_totals table.shop_table td{ border: 0 !important; width: auto !important; }
  .igs-flow--cart .cart_totals table.shop_table tr.woocommerce-shipping-totals{ grid-template-columns: 1fr; }
  .igs-flow--cart .cart_totals table.shop_table tr.woocommerce-shipping-totals th{ padding-bottom: 4px; }
  .igs-flow--cart .cart_totals table.shop_table tr.woocommerce-shipping-totals td{ padding-top: 0; }
}

/* --- buttons --- */
.igs-flow .woocommerce .button,
.igs-flow .woocommerce button.button,
.igs-flow .woocommerce a.button{
  appearance: none !important; -webkit-appearance: none !important;
  background: var(--igs-ink) !important; background-image: none !important;
  color: #fff !important; border: 0 !important; border-radius: 3px !important;
  box-shadow: none !important; text-shadow: none !important;
  font-family: "Barlow Condensed", Inter, sans-serif !important; font-weight: 700 !important;
  font-size: 17px !important; letter-spacing: .02em !important; text-transform: none !important;
  padding: 12px 20px !important; line-height: 1.1 !important; cursor: pointer;
}
.igs-flow .woocommerce .button:hover{ filter: brightness(1.15); }
.igs-flow .woocommerce .button:disabled,
.igs-flow .woocommerce .button[disabled]{ opacity: .45 !important; cursor: not-allowed; }
.igs-flow .woocommerce a.checkout-button,
.igs-flow .woocommerce #place_order{
  background: var(--igs-yellow) !important; color: var(--igs-ink) !important;
  display: block !important; width: 100% !important; text-align: center !important;
  font-size: 21px !important; padding: 17px 20px !important;
}
.igs-flow .woocommerce a.checkout-button:hover,
.igs-flow .woocommerce #place_order:hover{ filter: brightness(.96); }

/* --- fields --- */
.igs-flow .woocommerce form .form-row{ margin: 0 0 14px; padding: 0; }
.igs-flow .woocommerce form .form-row label{
  font-size: 13px; font-weight: 600; color: var(--igs-ink); margin: 0 0 5px; display: block; line-height: 1.3;
}
.igs-flow .woocommerce form .form-row .required{ color: var(--igs-red); text-decoration: none; }
.igs-flow .woocommerce input.input-text,
.igs-flow .woocommerce textarea,
.igs-flow .woocommerce select,
.igs-flow .woocommerce #coupon_code,
.igs-flow .select2-container .select2-selection--single{
  width: 100%; background: #fff !important; color: var(--igs-ink) !important;
  border: 1px solid #CFCAC1 !important; border-radius: 3px !important;
  font-size: 15px !important; font-family: inherit !important;
  padding: 11px 12px !important; min-height: 46px; box-shadow: none !important; line-height: 1.3;
}
.igs-flow .select2-container .select2-selection--single{ height: 46px !important; padding: 0 !important; }
.igs-flow .select2-container .select2-selection--single .select2-selection__rendered{ line-height: 44px !important; padding: 0 12px !important; }
.igs-flow .select2-container .select2-selection--single .select2-selection__arrow{ height: 44px !important; }
.igs-flow .woocommerce input.input-text:focus,
.igs-flow .woocommerce textarea:focus,
.igs-flow .woocommerce select:focus{ border-color: var(--igs-ink) !important; outline: 2px solid var(--igs-yellow); outline-offset: 0; }
.igs-flow .woocommerce textarea{ min-height: 90px; }

/* --- BASKET --- */
.igs-flow--cart .woocommerce{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 34px; }
.igs-flow--cart .woocommerce > *{ grid-column: 1 / -1; min-width: 0; }
@media (min-width: 900px){
  .igs-flow--cart .woocommerce{ grid-template-columns: minmax(0, 1fr) 360px; }
  .igs-flow--cart .woocommerce > form.woocommerce-cart-form{ grid-column: 1; }
  .igs-flow--cart .woocommerce > .cart-collaterals{ grid-column: 2; position: sticky; top: 18px; align-self: start; }
}
.igs-flow--cart .cart-collaterals{ width: 100%; }
.igs-flow--cart .cart-collaterals .cart_totals{ float: none !important; width: 100% !important; }
.igs-flow--cart .cart_totals > h2{
  font-family: "Barlow Condensed", Inter, sans-serif; font-weight: 700; font-size: 24px; margin: 0 0 10px;
  text-align: left !important;
}
.igs-flow--cart .cart_totals table.shop_table th{ width: 38%; font-size: 13.5px; font-weight: 600; color: var(--igs-muted); }
.igs-flow--cart .cart_totals .order-total .amount{ font-size: 22px; }
.igs-flow--cart .wc-proceed-to-checkout{ padding: 14px 0 0 !important; }
.igs-flow--cart td.product-thumbnail img{ width: 64px !important; height: 64px; object-fit: cover; border-radius: 4px; border: 1px solid var(--igs-line); }
.igs-flow--cart td.product-name a{ font-weight: 600; text-decoration: none; }
.igs-flow--cart td.product-name .variation{ font-size: 13px; color: var(--igs-muted); margin: 4px 0 0; }
.igs-flow--cart a.remove{
  color: var(--igs-muted) !important; font-size: 20px; line-height: 1; width: 28px; height: 28px;
  display: inline-grid; place-items: center; border-radius: 50%; text-decoration: none;
}
.igs-flow--cart a.remove:hover{ background: var(--igs-wash) !important; color: var(--igs-red) !important; }
.igs-flow--cart .quantity .qty{ height: 44px !important; width: 70px !important; }
.igs-flow--cart td.actions{ background: var(--igs-wash); }
.igs-flow--cart td.actions .coupon{ display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.igs-flow--cart td.actions .coupon #coupon_code{ width: 180px !important; min-height: 44px; }
.igs-flow--cart td.actions > .button{ float: right; background: #fff !important; color: var(--igs-ink) !important; box-shadow: inset 0 0 0 1.5px var(--igs-ink) !important; }
.igs-flow--cart ul#shipping_method{ list-style: none; margin: 0; padding: 0; }
.igs-flow--cart ul#shipping_method li{ margin: 0 0 6px; display: flex; gap: 8px; align-items: baseline; }
.igs-flow--cart .woocommerce-shipping-destination,
.igs-flow--cart .woocommerce-shipping-calculator{ font-size: 13px; color: var(--igs-muted); }
.igs-flow--cart .cart-empty{ font-size: 16px !important; }
.igs-flow--cart .return-to-shop{ margin: 16px 0 0; }

/* --- CHECKOUT --- */
.igs-flow--checkout .woocommerce-form-coupon-toggle .woocommerce-info,
.igs-flow--checkout .woocommerce-form-login-toggle .woocommerce-info{
  border-left-color: var(--igs-line) !important; font-size: 13.5px;
}
.igs-flow--checkout form.checkout_coupon,
.igs-flow--checkout form.woocommerce-form-login{
  border: 1px solid var(--igs-line) !important; border-radius: 6px; padding: 16px !important; margin: 0 0 16px !important;
}
.igs-flow--checkout form.checkout{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 40px; }
.igs-flow--checkout form.checkout > *{ grid-column: 1 / -1; min-width: 0; }
@media (min-width: 900px){
  .igs-flow--checkout form.checkout{ grid-template-columns: minmax(0, 1fr) 400px; }
  /* Row 1 is kept for the error list WooCommerce inserts at the top of the
     form, so a failed Place order reports above the fields, not below them. */
  .igs-flow--checkout form.checkout > .woocommerce-NoticeGroup{ grid-row: 1; }
  .igs-flow--checkout form.checkout > #customer_details{ grid-column: 1; grid-row: 2 / span 2; }
  .igs-flow--checkout form.checkout > #order_review_heading{ grid-column: 2; grid-row: 2; }
  .igs-flow--checkout form.checkout > #order_review{ grid-column: 2; grid-row: 3; position: sticky; top: 18px; align-self: start; }
}
.igs-flow--checkout #customer_details .col-1,
.igs-flow--checkout #customer_details .col-2{ float: none !important; width: 100% !important; }
.igs-flow--checkout #customer_details h3,
.igs-flow--checkout #order_review_heading{
  font-family: "Barlow Condensed", Inter, sans-serif; font-weight: 700; font-size: 24px;
  margin: 6px 0 12px; color: var(--igs-ink);
}
/* Name fields side by side, as WooCommerce intends; everything else full width. */
.igs-flow--checkout .woocommerce-billing-fields__field-wrapper,
.igs-flow--checkout .woocommerce-shipping-fields__field-wrapper{
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px;
}
.igs-flow--checkout .form-row{ grid-column: 1 / -1; float: none !important; width: 100% !important; }
.igs-flow--checkout .form-row-first{ grid-column: 1; }
.igs-flow--checkout .form-row-last{ grid-column: 2; }
@media (max-width: 480px){
  .igs-flow--checkout .form-row-first,
  .igs-flow--checkout .form-row-last{ grid-column: 1 / -1; }
}
/* "Ship to a different address?" reads as an option, not a heading - it now
   starts unticked (functions.php section 10). */
.igs-flow--checkout #ship-to-different-address{
  font-family: Inter, sans-serif !important; font-size: 15px !important; font-weight: 600 !important;
  margin: 8px 0 14px !important;
}
.igs-flow--checkout #ship-to-different-address label{ display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.igs-flow--checkout #ship-to-different-address input{ width: 18px; height: 18px; accent-color: var(--igs-ink); }

.igs-flow--checkout #order_review{
  border: 1px solid var(--igs-line); border-radius: 6px; padding: 14px; background: #fff;
}
.igs-flow--checkout #order_review table.shop_table{ border: 0; }
.igs-flow--checkout #order_review table.shop_table th,
.igs-flow--checkout #order_review table.shop_table td{ padding: 10px 4px; }
.igs-flow--checkout #order_review .order-total .amount{ font-size: 22px; }
/* The delivery options get the full width of the summary. As a normal table
   row they were squeezed into the right-hand half, so "Tracked 48: £4.00" and
   every "Pickup at ..." wrapped onto two lines. Label above, options below. */
/* So the summary is laid out as a LIST, not a table: each row a two-column
   grid (label, amount), the delivery row a single column. Making only that
   one row a grid was not enough - a table keeps the row inside its first
   column's width, which on a phone was still half the box (seen on staging). */
.igs-flow--checkout #order_review table.shop_table,
.igs-flow--checkout #order_review table.shop_table thead,
.igs-flow--checkout #order_review table.shop_table tbody,
.igs-flow--checkout #order_review table.shop_table tfoot{ display: block; width: 100%; }
.igs-flow--checkout #order_review table.shop_table tr{
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px;
  border-top: 1px solid var(--igs-line);
}
.igs-flow--checkout #order_review table.shop_table thead tr{ border-top: 0; }
.igs-flow--checkout #order_review table.shop_table th,
.igs-flow--checkout #order_review table.shop_table td{ border: 0 !important; background: transparent; }
.igs-flow--checkout #order_review table.shop_table td:last-child,
.igs-flow--checkout #order_review table.shop_table th:last-child{ text-align: right; }
.igs-flow--checkout #order_review table.shop_table tr.woocommerce-shipping-totals,
.igs-flow--checkout #order_review table.shop_table tr.igs-preorder-nudge{ grid-template-columns: 1fr; }
/* The pre-order nudge keeps its yellow and reads left to right. The list
   rules above (transparent cells, last cell right-aligned) had flattened it. */
.igs-flow--checkout #order_review table.shop_table tr.igs-preorder-nudge td{
  background: var(--igs-yellow); text-align: left; border-radius: 3px; margin: 8px 0;
}
.igs-flow--checkout #order_review table.shop_table tr.woocommerce-shipping-totals th{ padding-bottom: 4px; text-align: left; }
.igs-flow--checkout #order_review table.shop_table tr.woocommerce-shipping-totals td{ padding-top: 0; text-align: left; }
.igs-flow--checkout #order_review ul#shipping_method{ list-style: none; margin: 0; padding: 0; }
.igs-flow--checkout #order_review ul#shipping_method li{ margin: 0 0 6px; display: flex; gap: 8px; align-items: baseline; }
.igs-flow--checkout .igs-preorder-nudge td{
  background: var(--igs-yellow); color: var(--igs-ink); font-size: 13px; font-weight: 600;
  border-radius: 3px; padding: 9px 10px !important;
}
.igs-flow--checkout #payment{ background: var(--igs-wash) !important; border-radius: 6px; margin-top: 10px; }
.igs-flow--checkout #payment ul.payment_methods{ padding: 12px 14px !important; border-bottom: 1px solid var(--igs-line) !important; }
.igs-flow--checkout #payment ul.payment_methods li{ list-style: none; margin: 0 0 8px; }
.igs-flow--checkout #payment ul.payment_methods li > label{ font-weight: 600; font-size: 14.5px; }
.igs-flow--checkout #payment div.payment_box{ background: #fff !important; border: 1px solid var(--igs-line); border-radius: 4px; color: var(--igs-ink); }
.igs-flow--checkout #payment div.payment_box::before{ display: none !important; }
.igs-flow--checkout #payment .place-order{ padding: 14px !important; margin: 0 !important; }
.igs-flow--checkout .woocommerce-privacy-policy-text,
.igs-flow--checkout .woocommerce-terms-and-conditions-wrapper{ font-size: 12.5px; color: var(--igs-muted); line-height: 1.5; }
.igs-flow--checkout .woocommerce-terms-and-conditions-checkbox-text{ font-size: 13.5px; color: var(--igs-ink); }

/* The order-received page: the order summary lists, calm. */
.igs-flow--checkout ul.woocommerce-order-overview{
  display: flex; flex-wrap: wrap; gap: 12px 28px; list-style: none; padding: 16px !important;
  background: var(--igs-wash); border: 1px solid var(--igs-line); border-radius: 6px; margin: 0 0 22px !important;
}
.igs-flow--checkout ul.woocommerce-order-overview li{ border: 0 !important; margin: 0 !important; padding: 0 !important; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--igs-muted); }
.igs-flow--checkout ul.woocommerce-order-overview li strong{ display: block; font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--igs-ink); margin-top: 3px; }

@media (max-width: 600px){
  .igs-flow{ padding-top: 16px; }
  .igs-flow__head h1{ font-size: 32px; }
  .igs-flow__steps{ gap: 12px; font-size: 12px; }
  .igs-flow--cart td.actions > .button{ float: none; width: 100%; margin-top: 10px; }
  .igs-flow--cart td.actions .coupon #coupon_code{ width: 100% !important; flex: 1 1 140px; }
}