/*
Theme Name: IGW
Theme URI: https://indienetgrocers.com/
Description: Standalone WordPress theme for the IGW Group grocery retailers - Olsens Marketplace, Norm's, Garrett's, Foodtown, Tonto Basin, El Rancho, Del Sol, Butcher & Farmer and Keil's Food Store. Implements the IGA Arizona Master Design System (v1.0). Content is authored with ACF Flexible Content sections; there is no page-builder dependency. Every site shares this layout and design system; only the store logo, accent colour and store-specific content change per site.
Author: Elevation Brands
Author URI: https://elevationbrandsadv.com/
Version: 2.1.6
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: igw
Tags: grocery, retail, multisite, acf
*/

/* =========================================================================
   0. FONTS
   Self-hosted, latin subset. Both are variable fonts, so one file covers
   every weight in the range.

   font-display: swap. The brand font always shows; the text reflows a
   little when it arrives (0.001-0.012 CLS per page, against Google's 0.1
   "good" line). "optional" removed even that, but on a first visit over
   mobile data the ~77 KB of fonts miss its ~100ms window and the page stays
   in the fallback, which was the wrong trade for a brand (13 Oct 2026). The
   "Fallback" faces are Arial scaled to the web fonts' metrics, which is what
   keeps the swap that small.
   ========================================================================= */

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 600 800;
	font-display: swap;
	src: url("assets/fonts/montserrat-latin-var.woff2") format("woff2");
}

@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 400 700;
	font-stretch: 100%;
	font-display: swap;
	src: url("assets/fonts/open-sans-latin-var.woff2") format("woff2");
}

@font-face {
	font-family: "Montserrat Fallback";
	src: local("Arial");
	size-adjust: 112.83%;
	ascent-override: 85.79%;
	descent-override: 22.25%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Open Sans Fallback";
	src: local("Arial");
	size-adjust: 105.13%;
	ascent-override: 101.65%;
	descent-override: 27.86%;
	line-gap-override: 0%;
}

/* =========================================================================
   1. DESIGN TOKENS
   Sourced from "IGW Brand Components 2026F" master design system.
   --igw-accent is overridden per store in inc/brand.php (e.g. Keil's purple).
   ========================================================================= */

:root {
	/* Primary palette */
	--igw-red: #d71920;
	--igw-white: #ffffff;
	--igw-charcoal: #222222;
	--igw-light-gray: #f5f5f5;

	/* Secondary / accent palette (store-specific elements) */
	--igw-yellow: #ffc107;   /* Del Sol */
	--igw-green: #4caf50;    /* El Rancho */
	--igw-blue: #1565c0;     /* Garrett's */
	--igw-brown: #8d5a2b;    /* Butcher & Farmer */
	--igw-orange: #f57c00;
	--igw-purple: #6a1b9a;   /* Keil's Food Store */
	--igw-tan: #c2b280;

	/* Accent: the store's primary brand colour. Defaults to IGA Red and is
	   re-declared per site by igw_brand_css_vars(). */
	--igw-accent: var(--igw-red);
	--igw-accent-dark: #b0141a;

	/* Typography */
	--igw-font-heading: "Montserrat", "Montserrat Fallback", Arial, sans-serif;
	--igw-font-body: "Open Sans", "Open Sans Fallback", Arial, sans-serif;

	/* Spacing scale */
	--igw-gap-xs: 8px;
	--igw-gap-sm: 16px;
	--igw-gap-md: 24px;
	--igw-gap-lg: 40px;
	--igw-gap-xl: 64px;

	/*
	 * Layout.
	 *
	 * The design mock is a 1440-wide artboard with a ~60px gutter, i.e. the
	 * content column is ~91.5% of the viewport. --igw-container is the outer
	 * box including its gutter, so at 1440 the content lands on 1320px exactly
	 * as drawn, and the layout stops growing past that.
	 */
	--igw-container: 1400px;
	--igw-gutter: 40px;

	/* The promo tile row is drawn wider than everything else — near full
	   bleed, ~1.7% each side. */
	--igw-container-wide: 1520px;

	--igw-radius: 4px;
	--igw-radius-lg: 16px;

	/* The hairline that separates adjacent bands in the design. */
	--igw-rule: #e3e1de;

	/* Elevation */
	--igw-shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);
	--igw-shadow-md: 0 4px 14px rgba(0, 0, 0, .1);
}

/* =========================================================================
   2. RESET / BASE
   A light reset plus the design-system baseline. The theme is standalone, so
   nothing else establishes these defaults.
   ========================================================================= */

/*
 * Border-box everywhere.
 *
 * This theme previously ran as a Divi child and inherited Divi's reset;
 * standalone it needs its own, or every padded full-width element (the
 * container above all) overflows the viewport by its own padding.
 */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--igw-font-body);
	color: var(--igw-charcoal);
	font-size: 16px;
	line-height: 1.55;
	background: var(--igw-white);
	-webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

img { height: auto; }

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

h1, h2, h3, h4, h5, h6,
.igw-heading {
	font-family: var(--igw-font-heading);
	font-weight: 700;
	color: var(--igw-charcoal);
	line-height: 1.15;
}

h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }

a {
	color: var(--igw-accent);
	text-decoration: none;
}

a:hover,
a:focus {
	text-decoration: underline;
}

/* A link inside a sentence needs more than colour to stand out (WCAG 1.4.1;
   Lighthouse "links rely on color"). Buttons, cards and nav carry classes and
   keep their own look. */
main p a:not([class]),
.igw-breadcrumbs a,
main td a:not([class]),
main dd a:not([class]) {
	text-decoration: underline;
	text-underline-offset: .15em;
}

/* Visible focus ring. The designs include an Accessibility link in the
   footer, so keyboard focus must stay obvious. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--igw-accent);
	outline-offset: 2px;
}
img.aligncenter {display:block;margin-left:auto;margin-right:auto}
img.alignright {display:inline;margin:0 0 25px 40px;padding:0}
img.alignleft {display:inline;margin:0 40px 25px 0;padding:0}
.alignright {float:right}
.alignleft {float:left}
.igw-screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.igw-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 12px 20px;
	background: var(--igw-accent);
	color: #fff;
	font-family: var(--igw-font-heading);
	font-weight: 700;
}

.igw-skip-link:focus {
	left: 0;
}

/* =========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================= */

.igw-container {
	width: 100%;
	max-width: var(--igw-container);
	margin-inline: auto;
	padding-inline: var(--igw-gutter);
}

/* Near full bleed, as the promo row is drawn — a narrower gutter as well as a
   wider cap, or it just hits 100% and inherits the standard gutter. */
.igw-container--wide {
	max-width: var(--igw-container-wide);
	padding-inline: var(--igw-gap-md);
}

.igw-section {
	padding-block: var(--igw-gap-lg);
}
.igw-section h2 {
	margin-top: 0;
}
.igw-section--tight { padding-block: var(--igw-gap-md); }
.igw-section--loose { padding-block: var(--igw-gap-xl); }
.igw-section--gray { background: var(--igw-light-gray); }
section.igw-section--gray { margin-inline: 20px; }

/*
 * Band separators.
 *
 * The design rules a hairline between consecutive bands, which is what gives
 * the page its rhythm — without it the sections run together and only the
 * whitespace separates them. Drawn on the *following* section so the first
 * band under the header never gets one, and skipped whenever a colour change
 * already does the separating.
 */

.page-template-tpl-weekly-ad .igw-section + .igw-section,
.home .igw-section + .igw-section,
.igw-footer {
	border-top: 1px solid var(--igw-rule);
}

.igw-section--gray + .igw-section,
.igw-section + .igw-section--gray,
.igw-hero + .igw-section {
	border-top: 0 !important;
}

.igw-grid {
	display: grid;
	gap: var(--igw-gap-md);
}

/* =========================================================================
   4. BUTTONS  (design system section 5)
   ========================================================================= */

.igw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--igw-gap-xs);
	padding: 14px 28px;
	font-family: var(--igw-font-heading);
	font-weight: 700;
	font-size: .95rem;
	letter-spacing: .01em;
	text-align: center;
	border: 2px solid transparent;
	border-radius: var(--igw-radius);
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.igw-btn:hover,
.igw-btn:focus {
	text-decoration: none;
}

/* Primary */
.igw-btn--primary {
	background: var(--igw-accent);
	color: var(--igw-white);
}

.igw-btn--primary:hover,
.igw-btn--primary:focus {
	background: var(--igw-accent-dark);
	color: var(--igw-white);
}

/* Secondary — outlined */
.igw-btn--secondary {
	background: transparent;
	color: var(--igw-accent);
	border-color: var(--igw-accent);
}

.igw-btn--secondary:hover,
.igw-btn--secondary:focus {
	background: var(--igw-accent);
	color: var(--igw-white);
}

/* Tertiary — text + chevron */
.igw-btn--tertiary {
	padding-inline: 0;
	background: none;
	color: var(--igw-accent);
}

.igw-btn--tertiary::after {
	content: "›";
	font-size: 1.4em;
	line-height: 1;
}

.igw-btn--tertiary:hover,
.igw-btn--tertiary:focus {
	text-decoration: underline;
}

/* Disabled */
.igw-btn:disabled,
.igw-btn--disabled {
	background: #c9c9c9;
	color: #f7f7f7;
	border-color: transparent;
	cursor: not-allowed;
	pointer-events: none;
}

/* White-on-colour variant used inside the promo tiles. The design sets the
   label in the store accent, not charcoal. */
.igw-btn--onColor {
	background: var(--igw-white);
	color: var(--igw-accent);
}

.igw-btn--onColor:hover,
.igw-btn--onColor:focus {
	background: var(--igw-light-gray);
	color: var(--igw-accent-dark);
}

/* =========================================================================
   5. BADGES  (SAVE circle / HOT PICK label)
   ========================================================================= */

.igw-save-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	padding: 4px;
	background: var(--igw-accent);
	color: var(--igw-white);
	border-radius: 50%;
	font-family: var(--igw-font-heading);
	font-weight: 700;
	line-height: 1.05;
	text-align: center;
}

.igw-save-badge__label {
	font-size: .68rem;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.igw-save-badge__amount {
	font-size: 1.05rem;
}

.igw-tag {
	display: inline-block;
	padding: 6px 14px;
	border: 2px solid var(--igw-accent);
	border-radius: var(--igw-radius);
	color: var(--igw-accent);
	font-family: var(--igw-font-heading);
	font-weight: 700;
	font-size: .8rem;
	text-transform: uppercase;
}

/* =========================================================================
   6. DEAL CARD  (weekly-ad-item)
   Grid of styled deal cards — requirements PDF, "Weekly Ad page template".
   ========================================================================= */

/* The mockups show a fixed 5-up row of deals, so the desktop track count is
   declared rather than derived — auto-fill at this container width resolves to
   4 and silently loses the intended rhythm. */
.igw-deal-grid {
	display: grid;
	/* --igw-deal-cols is set inline from the item count (see igw_deal_grid())
	   so a short week still spans the full container and the last card lines
	   up with the "View all deals" link. Falls back to the five-across design. */
	grid-template-columns: repeat(var(--igw-deal-cols, 5), minmax(0, 1fr));
	gap: 48px;
	align-items: stretch;
}

/* Flat light-grey plate, square corners, no border — as drawn. The product
   photo sits directly on the plate rather than on a white panel of its own. */
.igw-deal-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--igw-light-gray);
	border: 0;
	border-radius: 0;
	overflow: hidden;
}

.igw-deal-card__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	background: transparent;
	padding: var(--igw-gap-xs);
}

.igw-deal-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.igw-deal-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	padding: var(--igw-gap-sm);
	padding-top: 0;
}

.igw-deal-card__name {
	font-family: var(--igw-font-heading);
	font-weight: 700;
	font-size: .95rem;
	line-height: 1.2;
	margin: 0;
}

.igw-deal-card__size {
	font-size: .85rem;
	color: #555;
	margin: 0;
}

/* Pushed to the bottom of the card so the price and "Reg." line share a
   baseline across every card in a row, regardless of whether an item has a
   size line or a two-line product name. */
.igw-deal-card__price {
	display: flex;
	align-items: baseline;
	gap: 4px;
	margin-top: auto;
	font-family: var(--igw-font-heading);
	font-weight: 700;
	color: var(--igw-accent);
	font-size: 2.1rem;
	line-height: 1;
	margin-bottom: 0;
}

/* "2/$7" and "BUY 1, GET 1" style labels replace the sale price. The leading
   quantity renders in charcoal, the money in accent — matches the mockups. */
.igw-deal-card__price--label {
	color: var(--igw-charcoal);
	font-size: 1.9rem;
}

.igw-deal-card__price--label .igw-price-money {
	color: var(--igw-accent);
}

.igw-deal-card__unit {
	font-size: .95rem;
	font-weight: 700;
	color: var(--igw-charcoal);
}

.igw-deal-card__regular {
	margin: var(--igw-gap-xs) 0 0;
	font-size: .8rem;
	color: #666;
}

.igw-deal-card__override {
	margin-top: 4px;
	font-size: .7rem;
	font-style: italic;
	color: #777;
}

/* =========================================================================
   7. ICON TILES  (department strip, amenities, "what we're known for")
   ========================================================================= */

.igw-icon-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
	gap: var(--igw-gap-md);
	text-align: center;
}

.igw-icon-tile__icon {
	width: 74px;
	height: 74px;
	margin: 0 auto var(--igw-gap-sm);
}

.igw-icon-tile__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/*
 * Two lines' worth of height whether the label needs them or not, so the
 * descriptions underneath sit on one line across the row instead of stepping
 * up and down with each label's wrap. In the design every label happens to run
 * to two lines; reserving the space is what keeps that true for any wording.
 */
.igw-icon-tile__title {
	margin: 0 0 var(--igw-gap-xs);
	min-height: 2.2em;
	font-family: var(--igw-font-heading);
	font-weight: 800;
	font-size: 1.3rem;
	color: var(--igw-accent);
	text-transform: uppercase;
	line-height: 1.1;
	letter-spacing: -.005em;
}

.igw-icon-strip--plate .igw-icon-tile__title { min-height: 0; }

.igw-icon-tile__text {
	margin: 0;
	font-size: .95rem;
	line-height: 1.3;
	color: #333;
}

/* Plate variant — grey card, icon beside the text. Used by "What We Are Known
   For" and the FAQ value strip. The base .igw-icon-strip track minimum
   (150px) is fine for the strip variant, where the icon sits above the text
   with room to wrap — but a plate tile puts a fixed 115px icon in a flex row
   beside the text, so at 150px there's only ~11px left for icon-h's sibling,
   collapsing text-h to almost nothing and wrapping every character onto its
   own line. A wider minimum leaves the text an actual column to sit in. */
.igw-icon-strip--plate {
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	text-align: left;
}

/*
 * Flex, not grid: a grid row's height is shared across every column in that
 * row, so the icon's own height used to force the title's row (and, once the
 * icon was row-spanned, the tile's whole height) to match it regardless of
 * how short the text actually was — the source of the dead space around
 * short copy. Flex has no such coupling: icon-h and text-h each size to
 * their own content, and align-items centers them against each other's real
 * heights instead of an inflated shared row.
 */
.igw-icon-strip--plate .igw-icon-tile {
	display: flex;
	align-items: center;
	gap: var(--igw-gap-md);
	padding: var(--igw-gap-md);
	background: var(--igw-light-gray);
	border-radius: var(--igw-radius);
}

.igw-icon-strip--plate .igw-icon-tile__icon.icon-h {
	flex: 0 0 auto;
	margin: 0;
	width: 115px;
	height: 115px;
}

.igw-icon-strip--plate .igw-icon-tile__content.text-h {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.igw-icon-strip--plate .igw-icon-tile__title,
.igw-icon-strip--plate .igw-icon-tile__text {
	overflow-wrap: break-word;
}

.igw-icon-strip--plate .igw-icon-tile__title {
	color: var(--igw-charcoal);
	text-transform: none;
	font-size: 1.35rem;
	line-height: 1.1;
	font-weight: 700;
}

.igw-icon-tile__title a { color: inherit; }

/* Amenities variant — icon above label on a light-gray plate */
.igw-amenity-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--igw-gap-md);
}

.igw-amenity {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--igw-gap-sm);
	min-height: 218px;
	padding: var(--igw-gap-md) var(--igw-gap-sm);
	background: var(--igw-light-gray);
	text-align: center;
}

.igw-amenity img {
	width: 120px;
	height: 120px;
	object-fit: contain;
}

.igw-amenity__label {
	font-family: var(--igw-font-heading);
	font-weight: 700;
	font-size: 1.15rem;
	line-height: 1.15;
}

/* =========================================================================
   8. PROMO TILES  (homepage 4-up: Weekly Email / Hot Picks / Senior / Pickup)
   ========================================================================= */

.igw-promo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 28px;
}

.igw-promo {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--igw-gap-sm);
	min-height: 300px;
	padding: var(--igw-gap-md);
	overflow: hidden;
	background: var(--igw-accent);
	color: var(--igw-white);
}

.igw-promo--yellow {
	background: var(--igw-yellow);
	color: var(--igw-charcoal);
}

.igw-promo__title {
	margin: 0;
	font-family: var(--igw-font-heading);
	font-weight: 800;
	font-size: clamp(1.7rem, 2.7vw, 2.4rem);
	line-height: .92;
	letter-spacing: -.01em;
	text-transform: uppercase;
	color: inherit;
}

.igw-promo__lede {
	margin: 0;
	font-size: 1.3rem;
	line-height: 1.2;
}

.igw-promo__text {
	margin: 0;
	font-size: .95rem;
	line-height: 1.3;
}

.igw-promo__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--igw-gap-xs);
}

/*
 * Two kinds of tile art, because the design uses both:
 *
 *   photo — a cut-out (phone, shoppers, grocery bag) anchored to the bottom
 *           right and running off the tile edge.
 *   icon  — a line mark (the envelope) sitting inside the tile beside the
 *           copy, fully visible.
 *
 * The editor picks which on the tile, so this is not inferred from the file.
 */
.igw-promo__media {
	position: absolute;
	right: -6%;
	bottom: 0;
	width: 62%;
	max-width: 210px;
	z-index: 0;
	pointer-events: none;
	line-height: 0;
}
.igw-promo:not(:nth-child(2)) .igw-promo__media {
	width: 52%;
}
.igw-promo__media img {
	width: 100%;
	height: auto;
	display: block;
}

.igw-promo--icon .igw-promo__media {
	right: var(--igw-gap-md);
	bottom: auto;
	top: 34%;
	width: 42%;
	max-width: 100px;
}

/* Keep the copy legible where it overlaps the art. */
.igw-promo__body,
.igw-promo .igw-btn {
	position: relative;
	z-index: 1;
}

.igw-promo__lede,
.igw-promo__text {
	max-width: 62%;
}

/*
 * The tile button is a compact two-line block in the design, not a full-width
 * bar: it is sized by its own text and wraps, so it must not stretch to the
 * tile and must not be set at body size.
 */
.igw-promo .igw-btn {
	position: relative;
	z-index: 1;
	align-self: flex-start;
	max-width: 130px;
	padding: 4px 3px;
	font-size: .8rem;
	line-height: 1.25;
	letter-spacing: .02em;
	text-transform: uppercase;
	border-radius: 0;
}

/* =========================================================================
   9. FORMS  (design system section 9)
   ========================================================================= */

.igw-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: var(--igw-gap-sm);
}

.igw-field label {
	font-family: var(--igw-font-heading);
	font-weight: 700;
	font-size: .95rem;
}

.igw-field .igw-required { color: var(--igw-accent); }

.igw-input,
.igw-select,
.igw-textarea {
	width: 100%;
	padding: 12px 14px;
	font-family: var(--igw-font-body);
	font-size: 1rem;
	color: var(--igw-charcoal);
	background: var(--igw-white);
	border: 1px solid #ccc;
	border-radius: var(--igw-radius);
}

.igw-input:focus,
.igw-select:focus,
.igw-textarea:focus {
	border-color: var(--igw-accent);
}

.igw-textarea { min-height: 140px; resize: vertical; }

/* =========================================================================
   9b. GRAVITY FORMS
   gform_disable_css (inc/renderers.php) strips the plugin's own stylesheets
   and its per-form inline colour block, so every rule a Gravity Form needs —
   layout, spacing, labels, inputs, button, validation, confirmation — is
   defined here from the theme's own tokens. Selectors are read straight off
   the rendered markup (Orbital theme output): fields are <div class="gfield">
   inside #gform_fields_N, labels carry .gform-field-label, the Name field is
   a .gform-grid-row of .gform-grid-col spans, and checkboxes are .gchoice
   rows — none of it depends on GF's own CSS being present.
   ========================================================================= */
.igw-section h2.gform_submission_error{
	font-size: 16px;
	margin-bottom: 0;
	color: #f00;
}
.gform_wrapper {
	font-family: var(--igw-font-body);
	color: var(--igw-charcoal);
	max-width: 560px;
}

.gform_wrapper ul,
.gform_wrapper li { list-style: none; margin: 0; padding: 0; }

.gform_wrapper fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.gform_wrapper legend { padding: 0; }

.gform_fields {
	display: flex;
	flex-direction: column;
	gap: var(--igw-gap-sm);
}

.gfield { display: flex; flex-direction: column; }

.gfield.gfield--type-checkbox { gap: var(--igw-gap-xs); }

.gform-field-label,
.gfield_label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--igw-font-heading);
	font-weight: 700;
	font-size: .95rem;
	color: var(--igw-charcoal);
}

.gform-field-label--type-sub {
	margin-top: 4px;
	margin-bottom: 0;
	font-family: var(--igw-font-body);
	font-weight: 400;
	font-size: .8rem;
	color: var(--igw-charcoal);
	opacity: .7;
}

.gform-field-label--type-inline {
	display: inline;
	margin: 0;
	font-family: var(--igw-font-body);
	font-weight: 400;
	font-size: .9rem;
}

.gfield_required { margin-left: 4px; color: var(--igw-accent); }
.gfield_required .gfield_required_text { font-size: .75rem; text-transform: uppercase; }

.ginput_container {
	margin-top: 0;
}

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="url"],
.gform_wrapper select,
.gform_wrapper textarea {
	display: block;
	width: 100%;
	padding: 12px 14px;
	font-family: var(--igw-font-body);
	font-size: 1rem;
	color: var(--igw-charcoal);
	background: var(--igw-white);
	border: 1px solid #ccc;
	border-radius: var(--igw-radius);
	appearance: none;
}

.gform_wrapper select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23222'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 34px;
}

.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
	border-color: var(--igw-accent);
	outline: none;
}

.gform_wrapper textarea { min-height: 140px; resize: vertical; }

/* Name field: First / Last side by side */
.ginput_complex.gform-grid-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--igw-gap-sm);
}

.ginput_complex .gform-grid-col {
	flex: 1 1 160px;
}

/* Checkbox / consent */
.ginput_container_checkbox .gchoice {
	display: flex;
	align-items: flex-start;
	gap: var(--igw-gap-xs);
}

.gform_wrapper .gfield-choice-input {
	margin-top: 4px;
	accent-color: var(--igw-accent);
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.gform-field-label--type-inline a { color: var(--igw-accent); }

/* Validation */
.gfield_error input,
.gfield_error select,
.gfield_error textarea {
	border-color: var(--igw-accent);
}

.gfield_validation_message,
.validation_message {
	margin-top: 4px;
	font-size: .85rem;
	color: var(--igw-accent);
}

.gform_validation_errors {
	padding: var(--igw-gap-sm);
	margin-bottom: var(--igw-gap-sm);
	background: #fbeaea;
	border: 1px solid var(--igw-accent);
	border-radius: var(--igw-radius);
	color: var(--igw-accent-dark);
}

.gform_footer {
	margin-top: var(--igw-gap-sm);
}

.gform_wrapper .gform_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--igw-gap-xs);
	padding: 14px 28px;
	font-family: var(--igw-font-heading);
	font-weight: 700;
	font-size: .95rem;
	letter-spacing: .01em;
	background: var(--igw-accent);
	color: var(--igw-white);
	border: 2px solid transparent;
	border-radius: var(--igw-radius);
	cursor: pointer;
	transition: background-color .18s ease;
}

.gform_wrapper .gform_button:hover,
.gform_wrapper .gform_button:focus {
	background: var(--igw-accent-dark);
	color: var(--igw-white);
}

.gform_confirmation_message {
	padding: var(--igw-gap-md);
	background: var(--igw-light-gray);
	border-radius: var(--igw-radius-lg);
	color: var(--igw-charcoal);
}

/* =========================================================================
   10. ALERTS  (design system section 10)
   ========================================================================= */

.igw-alert {
	display: flex;
	align-items: flex-start;
	gap: var(--igw-gap-xs);
	padding: 14px 16px;
	margin-bottom: var(--igw-gap-sm);
	border-radius: var(--igw-radius);
	font-size: .95rem;
}

.igw-alert--success { background: #eaf7ed; color: #1b5e20; }
.igw-alert--info    { background: #e8f1fb; color: #0d47a1; }
.igw-alert--warning { background: #fff6e5; color: #8a5300; }
.igw-alert--error   { background: #fdecea; color: #a3140f; }

/* =========================================================================
   11. BREADCRUMBS
   ========================================================================= */

.igw-breadcrumbs {
	padding-block: var(--igw-gap-sm);
	font-size: 1rem;
	color: #555;
}

.igw-breadcrumbs a { color: var(--igw-charcoal); }
.igw-breadcrumbs__sep { margin-inline: var(--igw-gap-xs); color: var(--igw-accent); }
.igw-breadcrumbs [aria-current="page"] { color: #555; }

/* =========================================================================
   12. ACCORDION  (FAQ page)
   ========================================================================= */

.igw-faq-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: var(--igw-gap-sm) var(--igw-gap-md);
	align-items: start;
}

.igw-accordion__item {
	background: var(--igw-light-gray);
	margin-bottom: var(--igw-gap-sm);
	border-radius: var(--igw-radius);
	overflow: hidden;
}

.igw-accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--igw-gap-sm);
	width: 100%;
	padding: 18px 20px;
	background: none;
	border: 0;
	font-family: var(--igw-font-heading);
	font-weight: 700;
	font-size: 1rem;
	text-align: left;
	color: var(--igw-charcoal);
	cursor: pointer;
}

.igw-accordion__trigger[aria-expanded="true"] { color: var(--igw-accent); }

.igw-accordion__chevron {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-25%, -25%);
	transition: transform .2s ease;
}

.igw-accordion__trigger[aria-expanded="true"] .igw-accordion__chevron {
	transform: rotate(225deg) translate(-25%, -25%);
}

.igw-accordion__panel {
	padding: 0 20px 18px;
	font-size: .95rem;
	color: #444;
}

.igw-accordion__panel[hidden] { display: none; }
.igw-accordion__panel p { margin-top: 0; }
.igw-accordion__panel p:last-child { margin: 0; }
/* =========================================================================
   13. HERO / PAGE HEADERS
   ========================================================================= */

/*
 * The hero is a band, not a padded section: in the design the photo runs the
 * full height of the grey field, top edge to bottom edge. Any block padding
 * here inserts a grey margin above and below the photo and inflates the band
 * well past the drawn height, so the padding lives on the copy column instead.
 */
.igw-hero.igw-section,
.igw-hero.igw-section--tight,
.igw-hero.igw-section--loose {
	padding-block: 0;
}

.igw-hero {
	background: var(--igw-light-gray);
	overflow: hidden;
}

/*
 * The photo bleeds to the right edge of the viewport while the copy stays
 * aligned to the container: the inner grid is centred and capped, and the
 * media column is widened by the outer gutter and pulled back by the same
 * amount.
 */
.igw-hero__inner {
	display: grid;
	grid-template-columns: 30% 70%;
	align-items: stretch;
	width: 100%;
	max-width: var(--igw-container);
	margin-inline: auto;
	padding-left: var(--igw-gutter);
	min-height: clamp(320px, 33vw, 480px);
}

.igw-hero__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: var(--igw-gap-lg);
	padding-right: var(--igw-gap-lg);
}

.igw-hero__title {
	font-size: clamp(2.2rem, 4.1vw, 3.7rem);
	line-height: 1.02;
	letter-spacing: -.01em;
	margin: 0 0 var(--igw-gap-sm);
}

.igw-hero__title .igw-accent { color: var(--igw-accent); }

.igw-hero__lede {
	margin: 0 0 var(--igw-gap-md);
	font-size: 1.1rem;
	line-height: 1.45;
	max-width: 30ch;
}

.igw-hero .igw-btn { align-self: flex-start; }

/*
 * The photo bleeds to the right edge of the viewport while the copy stays on
 * the container: once the viewport is wider than the container, pull the media
 * column back out by exactly the gutter the centring created.
 */
.igw-hero__media {
	position: relative;
	overflow: hidden;
	margin-right: calc(min(50vw, var(--igw-container) / 2) - 50vw);
}

/*
 * Absolute, so the photo takes its height from the band rather than giving the
 * band its height. In flow, a 3:2 photo across a 990px column is 640px tall
 * and drags the whole hero down with it whatever min-height says.
 */
.igw-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.igw-page-header { padding-block: 0 var(--igw-gap-sm); }

.igw-page-header__title { margin: 0 0 25px; color: var(--igw-accent); }
.igw-page-header__title--dark { color: var(--igw-charcoal); }

.igw-page-header__sub {
	margin: 0 0 var(--igw-gap-xs);
	font-family: var(--igw-font-heading);
	font-weight: 700;
	font-size: 1.5rem;
	color: var(--igw-accent);
}

.igw-page-header__lede { margin: 0; font-size: 1.1rem;}
.page-template-tpl-contact .igw-page-header__lede { max-width: 35ch; }
@media (max-width: 980px) {
	.igw-hero__inner {
		grid-template-columns: 1fr;
		min-height: 0;
		padding-left: var(--igw-gutter);
		padding-right: var(--igw-gutter);
	}

	.igw-hero__content { padding: var(--igw-gap-lg) 0; }

	.igw-hero__media {
		position: relative;
		margin-inline: calc(var(--igw-gutter) * -1);
		height: 260px;
	}
}

/* =========================================================================
   14. SPLIT / MEDIA SECTIONS  (department, story, team, careers, contact)
   ========================================================================= */

.igw-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--igw-gap-lg);
	align-items: center;
}

.igw-split__media img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--igw-radius);
	max-height: 300px;
    object-fit: cover;
}
/* A fixed height, not just max-height: with width and height both auto the
   browser cannot size the image until it has downloaded, so it takes no room
   and then pushes the page down (layout shift). With the height fixed, the
   width comes from the width/height attributes before a byte arrives. */
.page-template-tpl-faq .igw-split__media img,
.page-template-tpl-contact .igw-split__media img {height: 250px;max-height: none;width: auto;max-width: 100%;object-fit: contain;margin-inline: auto;}
/* The App Badges photo is a tall phone-mockup shot (500x958), not a
   landscape store photo — the default max-height:300px + cover crops it down
   to a thin cropped strip. Let it keep its own portrait shape instead. */
.page-template-tpl-mobile-app .igw-split__media img {height: 480px;max-height: none;width: auto;max-width: 100%;margin-inline: auto;object-fit: contain;}
.igw-bio {
	display: grid;
	/* minmax(0,1fr) so the text can shrink, and the photo track only exists
	   when there is a photo — otherwise the bio is squeezed into 190px. */
	grid-template-columns: 190px minmax(0, 1fr);
	gap: var(--igw-gap-md);
	align-items: start;
	padding: var(--igw-gap-sm);
	margin-bottom: var(--igw-gap-md);
	background: var(--igw-light-gray);
}

.igw-bio--nophoto { grid-template-columns: minmax(0, 1fr); }

.igw-bio__photo img {
	width: 100%;
	height: auto;
	display: block;
}

/* Assistant managers. One sits full width, reading at the same size as the
   department manager above it; two or more share the row at half a page each,
   where the photo track has to come in so the bio still has room to breathe. */
.igw-bio-grid {
	display: grid;
	grid-template-columns: repeat(var(--igw-bio-cols, 1), minmax(0, 1fr));
	gap: var(--igw-gap-md);
}
.igw-bio-grid .igw-bio { margin-bottom: 0; }
.igw-bio-grid--split .igw-bio { grid-template-columns: 175px minmax(0, 1fr); }


.igw-bio__name { margin: 10px 0 0; color: var(--igw-accent); font-size: 1.5rem; }
.igw-bio__role { margin: 0 0 var(--igw-gap-sm); font-size: 1.2rem; color: #444; }
.igw-bio__text p { margin: 0 0 var(--igw-gap-xs); font-size: .95rem; }

/* Department hours / info cards */
.igw-info-card {
	display: grid;
	/* minmax(0,1fr): a bare 1fr will not shrink below its content's intrinsic
	   min-width, which pushes long headings out of the card. */
	grid-template-columns: 180px minmax(0, 1fr);
	gap: var(--igw-gap-md);
	align-items: center;
	padding: var(--igw-gap-sm);
	background: var(--igw-light-gray);
	overflow: hidden;
}
.single-department .igw-info-card{
	grid-template-columns: 300px minmax(0, 1fr);
}
.single-department .igw-info-card:first-child .igw-info-card__media img{
	aspect-ratio: 3/2;
}
.igw-info-card__media {
	align-self: stretch;
	border-radius: 12px;
	overflow: hidden;
}

.igw-info-card__media img {
	width: 100%;
	height: 100%;
	min-height: 180px;
	object-fit: cover;
	display: block;
}

.igw-info-card__body {
	min-width: 0;
	padding-block: var(--igw-gap-xs);
	padding-right: var(--igw-gap-sm);
}

.igw-info-card__title {
	margin: 0 0 var(--igw-gap-xs);
	font-size: 1.4rem;
	line-height: 1.1;
}
.single-department .igw-info-card__title {
	color: var(--igw-accent);
	font-size: 1.8rem;
}
.single-department .igw-info-card__body {
	font-size: 1.1rem;
}
.igw-info-card__body p { margin: 0 0 var(--igw-gap-xs); }

/* =========================================================================
   15. STORE INFO PANEL  (location / contact)
   ========================================================================= */

.igw-store-panel {
	display: flex;
	flex-direction: column;
	gap: var(--igw-gap-md);
	padding: var(--igw-gap-sm) var(--igw-gap-lg);
	background: var(--igw-light-gray);
	border-radius: var(--igw-radius-lg);
}

.igw-store-row {
	display: grid;
	/* minmax(0,1fr) plus the wrap below: a store email address is one long
	   unbreakable token and will push the panel off a phone screen otherwise. */
	grid-template-columns: 80px minmax(0, 1fr);
	gap: var(--igw-gap-sm);
	align-items: center;
}

.igw-store-row > * { min-width: 0; }
.igw-store-row a { overflow-wrap: anywhere; }
.igw-store-row .igw-btn { padding: 4px 8px; font-size: .85rem;min-width: 150px;margin-top: 10px;}
.igw-store-row img { width: 80px; height: 80px; object-fit: contain; }
.igw-store-row__title { margin: 0 0 2px; font-size: 1.25rem; }
.igw-store-row__title--lg { font-size: 1.4rem; }
.igw-store-row p { margin: 0; }

.igw-store-phone {
	font-family: var(--igw-font-heading);
	font-weight: 700;
	font-size: 1.5rem;
	color: var(--igw-accent);
}

.igw-hours-table { width: 100%; border-collapse: collapse; }
.igw-hours-table th { text-align: left; font-weight: 400; padding-right: var(--igw-gap-md); }
.igw-hours-table td { text-align: left; }

/* =========================================================================
   16. FLIPBOOK / PDF STRIP  (weekly ad, below the deal grid)
   ========================================================================= */

/*
 * A plain block: the thumbnail strip and the full-size viewer stack. This was
 * a grid in the first build, when the section was only a row of thumbnails —
 * left as one it laid the viewer out *beside* the strip instead of under it.
 */
.igw-flipbook { display: block; }

.igw-flipbook img {
	width: 100%;
	height: auto;
	display: block;
	box-shadow: var(--igw-shadow-sm);
}

.igw-pdf-link {
	display: inline-flex;
	align-items: center;
	gap: var(--igw-gap-xs);
	font-family: var(--igw-font-heading);
	font-weight: 700;
	font-size: 1.2rem;
	color: var(--igw-accent);
}

/* =========================================================================
   17. NEWSLETTER BAND  ("Never Miss A Deal")
   ========================================================================= */

.igw-newsletter {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--igw-gap-lg);
	align-items: center;
}

.igw-newsletter__title { margin: 0 0 var(--igw-gap-xs); }
.igw-newsletter__text { margin: 0;font-size: 1.3rem;max-width: 425px; }
.igw-newsletter__form { background: var(--igw-white); padding: var(--igw-gap-md); }
.single-department .igw-newsletter__title{color: var(--igw-accent);}
/* Groups text + form into one grid cell when a side image is present, so the
   band reads as two columns (pitch+form, image) rather than three. */
.igw-newsletter__content {
	display: flex;
	flex-direction: column;
	gap: var(--igw-gap-md);
}

/* Icon + copy + action, as used by the FAQ "Still have a question?" band.
   Declared as a modifier rather than an inline style so the mobile collapse
   below can actually take effect — an inline grid-template-columns would win
   over any media query. */
.igw-newsletter--callout {
	grid-template-columns: 80px 1fr auto;
	align-items: center;
}

.igw-newsletter--callout img { width: 80px; height: 80px; object-fit: contain; }

/* Icon + statement, as used by the Community closing band. */
.igw-newsletter--statement {
	grid-template-columns: 180px 1fr;
	align-items: center;
}

.igw-newsletter--statement img { width: 100%; max-width: 180px; height: auto; }

.page-template-tpl-signup h2 {
	margin-bottom: var(--igw-gap-sm);
}
.page-template-tpl-signup .igw-newsletter__content {
	max-width: 500px;
}
.page-template-tpl-signup .igw-newsletter__form {
	padding: 0;
}
.page-template-tpl-signup .igw-newsletter__media {
	max-width: 500px;
	margin-left: auto;
}
/* =========================================================================
   18. FOOTER
   ========================================================================= */

.igw-footer { background: var(--igw-white); padding-block: var(--igw-gap-lg); }

.igw-footer__inner {
	display: grid;
	grid-template-columns: 1.4fr repeat(3, 1fr) 1.2fr;
	gap: var(--igw-gap-lg);
	align-items: stretch;
}

/*
 * The design rules off the social column from the link columns. `align-items:
 * stretch` above is what lets the rule run the full height of the row rather
 * than stopping at the end of its own short content.
 */
.igw-footer__social-col {
	border-left: 1px solid var(--igw-rule);
	padding-left: var(--igw-gap-lg);
}

.igw-footer__logo img { max-width: 230px; height: auto; }

.igw-footer__heading {
	margin: 0 0 var(--igw-gap-sm);
	font-family: var(--igw-font-heading);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--igw-accent);
	text-transform: uppercase;
}

.igw-footer__list { list-style: none; margin: 0; padding: 0; }
.igw-footer__list li { margin-bottom: var(--igw-gap-xs); }
.igw-footer__list a { color: var(--igw-charcoal); }
.igw-footer__list a:hover { color: var(--igw-accent); }
.igw-footer__list .current-menu-item > a { color: var(--igw-accent); }

.igw-social { display: flex; flex-wrap: wrap; gap: var(--igw-gap-xs); }
.igw-social img { width: 70px; height: 70px; }
/* Social marks are inline SVG (see inc/social.php) so the disc can take the
   store's own accent colour. Sized a little tighter than the legacy PNGs
   because the glyph sits closer to the disc edge. */
.igw-social__icon { display: block; width: 44px; height: 44px; }
.igw-social a { display: inline-flex; border-radius: 50%; transition: opacity .15s ease; }
.igw-social a:hover .igw-social__icon,
.igw-social a:focus-visible .igw-social__icon { opacity: .82; }

.igw-colophon {
	background: var(--igw-accent);
	color: var(--igw-white);
	padding-block: var(--igw-gap-sm);
	font-size: .85rem;
}

.igw-colophon__inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--igw-gap-md);
	align-items: center;
	justify-content: space-between;
}

.igw-colophon a { color: var(--igw-white); }
.igw-colophon__links { display: flex; flex-wrap: wrap; gap: var(--igw-gap-lg);list-style: none;padding: 0;margin: 0; }
.igw-colophon__links li{list-style: none; }
.igw-colophon p { margin: 0; }

/* =========================================================================
   19. HEADER / NAVIGATION
   ========================================================================= */

.igw-topbar {
	height: 44px;
	background: var(--igw-accent);
	color: var(--igw-white);
	display: flex;
	align-items: center;
}
.igw-topbar__inner { display: flex; justify-content: flex-end; align-items: center; }
.igw-topbar__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--igw-white);
	text-decoration: none;
	font-weight: 700;
	font-size: .95rem;
	line-height: 1;
}
.igw-topbar__link:hover,
.igw-topbar__link:focus-visible { text-decoration: underline; }
.igw-topbar__icon { flex: 0 0 auto; }

.igw-header { background: var(--igw-white); border-bottom: 1px solid #e6e6e6; }

.igw-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--igw-gap-lg);
	padding-block: 12px;
}

.igw-header__logo img { max-width: 240px; height: auto; display: block; }

.igw-nav__list {
	display: flex;
	align-items: center;
	gap: var(--igw-gap-lg);
	list-style: none;
	margin: 0;
	padding: 0;
}

.igw-nav__list > li { position: relative; }

.igw-nav__list a {
	font-family: var(--igw-font-heading);
	font-weight: 700;
	font-size: 1rem;
	color: var(--igw-charcoal);
	text-transform: uppercase;
	white-space: nowrap;
}

.igw-nav__list > li > a:hover,
.igw-nav__list > li.current-menu-item > a,
.igw-nav__list > li.current-menu-ancestor > a {
	color: var(--igw-accent);
	text-decoration: none;
}

/* Sub-menu — matches the dropdown shown on Departments / Locations / About */
.igw-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 50;
	min-width: 100%;
	margin: 0;
	padding: var(--igw-gap-sm) 0;
	list-style: none;
	background: var(--igw-light-gray);
	box-shadow: var(--igw-shadow-md);
	border-top: 5px solid var(--igw-accent);
	opacity: 0;
	visibility: hidden;
	transition: opacity .15s ease;
}

.igw-nav__list li:hover > .sub-menu,
.igw-nav__list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
}

.igw-nav__list .sub-menu li { text-align: center; }
.igw-nav__list .sub-menu a { display: block; padding: 7px 20px; }
.igw-nav__list .sub-menu a:hover,
.igw-nav__list .sub-menu .current-menu-item > a { color: var(--igw-accent); }

.igw-search-toggle {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	font-size: .8rem;
	color: var(--igw-charcoal);
}

.igw-search-toggle svg { width: 26px; height: 26px; }

.igw-search-panel { display: none; padding-block: var(--igw-gap-sm); border-top: 1px solid #e6e6e6; }
.igw-search-panel.is-open { display: block; }
.igw-search-panel form { display: flex; gap: var(--igw-gap-xs); }

.igw-nav-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	padding: 10px;
	background: none;
	border: 0;
	cursor: pointer;
}

.igw-nav-toggle span {
	display: block;
	width: 26px;
	height: 3px;
	background: var(--igw-charcoal);
}

/* =========================================================================
   20. UTILITIES
   ========================================================================= */

.igw-accent { color: var(--igw-accent); }
.igw-uppercase { text-transform: uppercase; }
.igw-center { text-align: center; }
.igw-mt-0 { margin-top: 0; }
.igw-mb-0 { margin-bottom: 0; }
.igw-stack > * + * { margin-top: var(--igw-gap-sm); }

.igw-rule {
	display: flex;
	align-items: center;
	gap: var(--igw-gap-md);
	margin-bottom: var(--igw-gap-lg);
}

.igw-rule::before,
.igw-rule::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #ddd;
}

.igw-rule__label {
	/* An h2, so the section has a real heading in the outline. These reset the
	   browser's heading size and margins so it still draws as the rule label
	   it was before. */
	margin: 0;
	font-family: var(--igw-font-heading);
	font-size: 1rem;
	line-height: 1.2;
	font-weight: 700;
	color: var(--igw-accent);
	text-transform: uppercase;
}

.igw-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--igw-gap-sm);
	margin-bottom: var(--igw-gap-md);
}

.igw-section-head h2 { margin: 0; }

/* =========================================================================
   21. RESPONSIVE
   ========================================================================= */

@media (max-width: 1024px) {
	.igw-footer__inner { grid-template-columns: 1fr 1fr 1fr; }
	.igw-hero { grid-template-columns: 1fr; }
	.igw-hero__content { padding: var(--igw-gap-lg) var(--igw-gap-md); }
	.igw-deal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
	.igw-deal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.igw-nav-toggle { display: flex; }

	/* The desktop header packs logo + nav + search on one row with 40px gaps.
	   Once the nav collapses behind the toggle, that spacing plus a 240px logo
	   overflows narrow viewports and pushes the search button off-screen, so
	   both are tightened here. */
	.igw-header__inner {
		gap: var(--igw-gap-sm);
		flex-wrap: nowrap;
	}

	.igw-header__logo { min-width: 0;order: 1; }
	.igw-header__logo img { max-width: min(170px, 45vw); }
	.igw-search-toggle { flex: 0 0 auto; order: 2; margin-left: auto; }
	.igw-search-toggle span	{display: none;}
	.igw-nav-toggle { flex: 0 0 auto; padding: 10px 0; order: 3; }

	.igw-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 60;
		display: none;
		background: var(--igw-white);
		box-shadow: var(--igw-shadow-md);
	}

	.igw-nav.is-open { display: block; }

	.igw-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: var(--igw-gap-sm) 0;
	}

	.igw-nav__list > li > a { display: block; padding: 12px var(--igw-gap-md); }

	/* Sub-menus stack inline on mobile rather than overlaying */
	.igw-nav__list .sub-menu {
		position: static;
		transform: none;
		opacity: 1;
		visibility: visible;
		box-shadow: none;
		padding: 0 0 var(--igw-gap-xs);
	}

	.igw-nav__list .sub-menu li { text-align: left; }
	.igw-nav__list .sub-menu a { padding-left: var(--igw-gap-lg); }

	.igw-header__inner { position: relative; }
}

@media (max-width: 782px) {
	.igw-container { padding-inline: 25px; }
	.igw-newsletter--callout,
	.igw-newsletter--statement {
		grid-template-columns: 1fr;
		justify-items: start;
	}
	.igw-newsletter,
	.igw-bio { grid-template-columns: 1fr; }
	.igw-bio__photo img { max-width: 220px; }
	/* Assistants stack rather than staying two-up on a phone. */
	.igw-bio-grid,
	.igw-bio-grid--split .igw-bio { grid-template-columns: 1fr; }
	.single-department .igw-info-card,
	.igw-info-card { grid-template-columns: 1fr; }
	.igw-info-card__body { padding: 0 var(--igw-gap-md) var(--igw-gap-md); }
	.igw-colophon__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 600px) {
	/* Shrink the icon rather than squeezing a 115px column beside text on a
	   phone; icon-h and text-h stay side by side, just smaller. */
	.igw-icon-strip--plate .igw-icon-tile {
		padding: var(--igw-gap-sm);
	}

	.igw-icon-strip--plate .igw-icon-tile__icon.icon-h {
		width: 64px;
		height: 64px;
	}
	.igw-footer__brand {grid-column: span 2;}
	.igw-footer__inner { grid-template-columns: 1fr 1fr; }
	.igw-deal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.igw-deal-card__price { font-size: 1.7rem; }
	.igw-save-badge { width: 60px; height: 60px; }
	.igw-section { padding-block: var(--igw-gap-lg); }
	.igw-colophon__links { gap: var(--igw-gap-sm);  }
	.igw-footer__social-col {padding-left: 0;border-left: none;}
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* =========================================================================
   22. PRINT  (store teams print the weekly ad page)
   ========================================================================= */

@media print {
	.igw-topbar,
	.igw-header,
	.igw-footer,
	.igw-colophon,
	.igw-promo-grid,
	.igw-newsletter { display: none !important; }

	.igw-deal-grid { grid-template-columns: repeat(4, 1fr); }
	.igw-deal-card { break-inside: avoid; }
}

/* =========================================================================
   23. SECTION LAYOUTS  (ACF Flexible Content)
   ========================================================================= */

/* Two adjacent bands of the same colour should not double their gutter. */
.igw-section--gray + .igw-section--gray { padding-top: 0; }

.igw-split--reverse > *:first-child { order: 2; }
.igw-split--top { align-items: start; }
.igw-split--map { align-items: stretch; }

.igw-map iframe,
.igw-map > * {
	width: 100%;
	min-height: 340px;
	border: 0;
	display: block;
}

/* Stands in for a map until it scrolls into view (igw_render_map_embed()).
   Same height as the iframe, so the swap moves nothing. */
.igw-map-defer {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--igw-light-gray);
}
.igw-map-defer__link { font-weight: 600; }

.igw-card-grid {
	display: grid;
	grid-template-columns:  repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: var(--igw-gap-md);
}
.single-department .igw-card-grid {
	grid-template-columns: 1.5fr 1fr;
}
.igw-card-grid--wide {
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}
@media (max-width: 1200px) {
	.single-department .igw-card-grid {
		grid-template-columns: 1fr;
	}
}
.igw-info-card--plain { grid-template-columns: minmax(0, 1fr); }
.igw-info-card--plain .igw-info-card__body { padding: var(--igw-gap-sm); }

/* Photo on the right — the design mirrors the two cards in this row. */
.igw-info-card--flip { grid-template-columns: minmax(0, 1fr) 180px; }
.igw-info-card--flip .igw-info-card__body { padding-left: var(--igw-gap-sm); padding-right: 0; }

.igw-photo-grid {
	display: grid;
	grid-template-columns: repeat(var(--igw-photo-cols, 4), minmax(0, 1fr));
	gap: var(--igw-gap-md);
}

.igw-photo-grid__item { margin: 0; }

.igw-photo-grid__item img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--igw-radius);
}

.igw-photo-grid figcaption {
	margin-top: var(--igw-gap-xs);
	font-size: .85rem;
	color: #555;
}
.igw-prose h3 {
	color: var(--igw-accent);
}
/*
 * The classic [gallery] shortcode, dropped into a WYSIWYG field (Simple
 * Content, Rich Text + Image) via Add Media. WordPress core only emits the
 * gallery-columns-N class, not layout CSS, so without this a gallery is
 * just images stacked one per row.
 */
.igw-prose .gallery {
	clear: both;
	display: grid;
	grid-template-columns: repeat(var(--igw-gallery-cols, 3), minmax(0, 1fr));
	gap: var(--igw-gap-md);
	list-style: none;
	margin: var(--igw-gap-md) 0;
	padding: 0;
}

.igw-prose .gallery-columns-1 { --igw-gallery-cols: 1; }
.igw-prose .gallery-columns-2 { --igw-gallery-cols: 2; }
.igw-prose .gallery-columns-3 { --igw-gallery-cols: 3; }
.igw-prose .gallery-columns-4 { --igw-gallery-cols: 4; }
.igw-prose .gallery-columns-5 { --igw-gallery-cols: 5; }
.igw-prose .gallery-columns-6 { --igw-gallery-cols: 6; }
.igw-prose .gallery-columns-7 { --igw-gallery-cols: 7; }
.igw-prose .gallery-columns-8 { --igw-gallery-cols: 8; }
.igw-prose .gallery-columns-9 { --igw-gallery-cols: 9; }

.igw-prose .gallery-item { margin: 0; }

.igw-prose .gallery-item img {
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	border-radius: var(--igw-radius);
}

.igw-prose .gallery-caption {
	margin-top: var(--igw-gap-xs);
	font-size: .85rem;
	color: #555;
}

/* CTA banner ------------------------------------------------------------- */

.igw-cta {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--igw-gap-md);
	align-items: center;
	background: var(--igw-light-gray);
	border-radius: var(--igw-radius);
}

.igw-cta--has-icon { grid-template-columns: 115px 1fr auto; }

.igw-cta__icon img { width: 115px; height: auto; object-fit: contain; }
.igw-cta__title { margin: 0 0 4px; }
.igw-cta__text { margin: 0; font-size: 1.05rem; }

.igw-cta__action .igw-btn { padding: 14px 28px; font-size: 1.2rem; }

@media (min-width: 783px) {
	.page-template-tpl-about .igw-cta--has-icon {
		grid-template-columns: 250px 1fr auto;
	}
	.page-template-tpl-about .igw-cta__icon img {
		width: 250px;
	}
}
/* Awards ----------------------------------------------------------------- */

.igw-awards {
	display: grid;
	gap: var(--igw-gap-lg);
	align-items: center;
}

.igw-awards--has-image { grid-template-columns: 1fr 1fr; }
.igw-awards__title { margin: 0 0 var(--igw-gap-xs); color: var(--igw-accent); text-transform: uppercase;}

.igw-awards__media img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--igw-radius);
}

/* App badges ------------------------------------------------------------- */

.igw-app-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--igw-gap-sm);
	align-items: center;
	margin-top: var(--igw-gap-md);
}

.igw-app-badges img { width: auto; height: 60px; }

/* Newsletter side image ---------------------------------------------------- */

.igw-newsletter__media img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--igw-radius);
}

/* Account sign-up + app promo ---------------------------------------------- */
.igw-account-promo__grid p,
.igw-account-promo__grid h1{
	max-width: 500px;
	margin-bottom: var(--igw-gap-md);
}
.igw-account-promo__grid p {
	font-size: 1.3rem;
}
.igw-account-promo__accent {
	color: var(--igw-accent);
	margin: var(--igw-gap-xs) 0;
}

.igw-account-promo__app-row {
	display: flex;
	align-items: start;
	gap: var(--igw-gap-md);
	flex-wrap: wrap;
}
.igw-account-promo__app-badges {
	padding-top: 70px;
}
.igw-account-promo__phone img {
	width: auto;
	max-height: 390px;
}

.igw-account-promo__deal {
	text-align: center;
}

.igw-account-promo__badge img {
	width: 100%;
	max-width: 340px;
	height: auto;
	margin: 0 auto var(--igw-gap-md);
}

.igw-account-promo__tile {
	display: block;
}

.igw-account-promo__tile img {
	width: 100%;
	height: auto;
	display: block;
}

.igw-account-promo__tile-hint {
	margin: 0;
	padding: var(--igw-gap-lg);
	border: 1px dashed var(--igw-rule);
	border-radius: var(--igw-radius);
	color: var(--igw-charcoal);
	opacity: 0.6;
	font-size: 0.9rem;
}

/* Network landing -------------------------------------------------------- */

.igw-store-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: var(--igw-gap-md);
}

.igw-store-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--igw-gap-xs);
	padding: var(--igw-gap-lg) var(--igw-gap-md);
	background: var(--igw-white);
	border: 1px solid #ececec;
	border-radius: var(--igw-radius);
	text-align: center;
	text-decoration: none;
}

.igw-store-card:hover { border-color: var(--igw-accent); text-decoration: none; }
.igw-store-card img { max-width: 200px; height: auto; }
.igw-store-card__name { margin: 0; font-size: 1.15rem; }

/* Prose, lists, misc ----------------------------------------------------- */

.igw-prose > *:first-child { margin-top: 0; }
.igw-prose > *:last-child { margin-bottom: 0; }
.igw-prose img { max-width: 100%; height: auto; }

.igw-list { margin: var(--igw-gap-sm) 0; padding-left: 1.2em; }
.igw-list li { margin-bottom: 6px; }

.igw-note { font-size: .85rem; color: #666; }
.igw-store-row__action { margin-top: 12px; }

.igw-split--contact { grid-template-columns: 1.7fr 1fr; }

@media (max-width: 900px) {
	.igw-split--contact { grid-template-columns: 1fr; }
}

.igw-contact-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--igw-gap-sm);
}

.igw-contact-sidebar .igw-store-panel { padding: var(--igw-gap-md); }

.igw-connect-panel {
	padding: var(--igw-gap-md);
	background: var(--igw-light-gray);
	border-radius: var(--igw-radius-lg);
}

.igw-connect-panel h3 { margin: 0 0 var(--igw-gap-xs); }
.igw-connect-panel p { margin: 0 0 var(--igw-gap-sm); }

/* The design draws this one as a wide bar with a car mark, not a pill. */
.igw-btn--directions {
	justify-content: flex-start;
	gap: var(--igw-gap-sm);
	padding: 12px var(--igw-gap-md);
	border-radius: 0;
	text-transform: uppercase;
	letter-spacing: .02em;
}

.igw-btn--directions svg {
	width: 30px;
	height: 30px;
	flex: 0 0 auto;
}

/* The newsletter band's own sign-up form. */
.igw-signup { max-width: 520px; }
.igw-signup__note { margin: 0 0 var(--igw-gap-xs); font-size: .85rem; text-align: right; }
.igw-signup__trap { position: absolute; left: -5000px; }

.igw-store-row--card {
	background: var(--igw-light-gray);
	padding: var(--igw-gap-md);
	border-radius: var(--igw-radius);
}

.igw-searchform { display: flex; gap: var(--igw-gap-xs); }

.igw-post-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: var(--igw-gap-md);
}

.igw-post-card { background: var(--igw-light-gray); border-radius: var(--igw-radius); overflow: hidden; }
.igw-post-card__media img { width: 100%; height: auto; display: block; }
.igw-post-card__body { padding: var(--igw-gap-md); }
.igw-post-card__title { margin: 0 0 var(--igw-gap-xs); font-size: 1.25rem; }
.igw-post-card__title a { color: var(--igw-charcoal); }
.igw-post-card__title a:hover { color: var(--igw-accent); }

.igw-404-actions {
	display: flex;
	flex-direction: column;
	gap: var(--igw-gap-md);
	align-items: center;
	margin-top: var(--igw-gap-lg);
}

.igw-single__media { margin-bottom: var(--igw-gap-md); }
.igw-single__media img { width: 100%; height: auto; border-radius: var(--igw-radius); }

.igw-accordion__h { margin: 0; font-size: 1rem; }

@media (max-width: 782px) {
	.igw-cta,
	.igw-cta--has-icon { grid-template-columns: 1fr; text-align: left; }
	.igw-awards--has-image { grid-template-columns: 1fr; }
	.igw-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.igw-prose .gallery { --igw-gallery-cols: 2; }
}

/* =========================================================================
   24. HOT PICKS  (scheduled artwork + PDF downloads)
   ========================================================================= */

.igw-hotpicks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: var(--igw-gap-lg);
	align-items: start;
}

.igw-hotpick { margin: 0; }

.igw-hotpick img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--igw-radius);
	box-shadow: var(--igw-shadow-sm);
}

.igw-hotpick__caption {
	display: flex;
	flex-direction: column;
	gap: var(--igw-gap-xs);
	align-items: flex-start;
	margin-top: var(--igw-gap-sm);
}

.igw-hotpick__title {
	font-family: var(--igw-font-heading);
	font-weight: 700;
	font-size: 1.05rem;
}

.igw-pdf-link svg { width: 26px; height: 26px; }

/* Full ad pages, shown when the ad service's own viewer is not installed. */
.igw-flipbook__strip {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: var(--igw-gap-sm);
	align-items: center;
}

.igw-flipbook__thumb {
	display: block;
	border: 2px solid transparent;
	transition: border-color .15s ease;
}

.igw-flipbook__thumb:hover,
.igw-flipbook__thumb:focus-visible { border-color: var(--igw-accent); }
.igw-flipbook__thumb.is-active { border-color: var(--igw-accent); }

/* The selected page, full width underneath the strip. */
.igw-flipbook__viewer {
	margin: var(--igw-gap-lg) 0 0;
	background: var(--igw-white);
}

.igw-flipbook__viewer[hidden] { display: none; }

.igw-flipbook__viewer img {
	width: 100%;
	height: auto;
	display: block;
}

.igw-flipbook__track {
	display: flex;
	gap: var(--igw-gap-lg);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.igw-flipbook__track::-webkit-scrollbar { display: none; }

.igw-flipbook__page {
	flex: 0 0 calc(25% - var(--igw-gap-lg) * 3 / 4);
	scroll-snap-align: start;
}

.igw-flipbook__page img {
	width: 100%;
	height: auto;
	display: block;
	box-shadow: var(--igw-shadow-sm);
}

.igw-flipbook__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	color: var(--igw-charcoal);
	border: 1px solid var(--igw-charcoal);
	border-radius: 50%;
	cursor: pointer;
}

.igw-flipbook__nav svg { width: 22px; height: 22px; }

.igw-flipbook__nav[disabled] {
	opacity: .3;
	cursor: default;
}

/* Sits above the thumbnails, as on the live site. */
.igw-flipbook__download { margin: 40px 0 0;text-align: right; }

@media (max-width: 900px) {
	.igw-flipbook__page { flex-basis: calc(50% - var(--igw-gap-lg) / 2); }
}

@media (max-width: 560px) {
	.igw-flipbook__strip { grid-template-columns: minmax(0, 1fr); }
	.igw-flipbook__nav { display: none; }
	.igw-flipbook__page { flex-basis: 78%; }
}

/* Language switch (dual-language stores) --------------------------------- */

.igw-lang-switch {
	font-family: var(--igw-font-heading);
	font-weight: 700;
	font-size: .9rem;
	text-transform: uppercase;
	color: var(--igw-charcoal);
	white-space: nowrap;
	padding: 6px 12px;
	border: 2px solid var(--igw-accent);
	border-radius: var(--igw-radius);
}

.igw-lang-switch:hover,
.igw-lang-switch:focus {
	background: var(--igw-accent);
	color: var(--igw-white);
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
   Ad preview bar

   Shown only to a signed-in editor viewing a future ad week. Deliberately
   loud: a preview that is indistinguishable from the live site is how wrong
   prices get reported as bugs.
   --------------------------------------------------------------------------- */
.igw-preview-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;
	background: #1d2327;
	color: #fff;
	font-family: var(--igw-font-body);
	font-size: 14px;
	text-align: center;
}

.igw-preview-bar a {
	color: #fff;
	text-decoration: underline;
}

.igw-preview-bar a:hover,
.igw-preview-bar a:focus-visible {
	color: #ffc107;
}

/* Hot Picks: the validity line and the combined-PDF download. */
.igw-hotpicks__validity {
	margin: 0 0 var(--igw-gap-md);
	font-family: var(--igw-font-heading);
	font-weight: 700;
	color: var(--igw-accent);
	text-align: center;
}

.igw-hotpicks__combined {
	margin: var(--igw-gap-md) 0 0;
	text-align: center;
}