/**
 * Commerce7 Frontend V2 -- Coleman Vineyards brand overrides.
 *
 * Replaces ~3,000 lines of V1-era CSS (the retired plugin's stylesheets) plus
 * 129 lines removed from themes/vin/style.css. V2 was rebuilt with accessible
 * defaults and exposes 63 CSS custom properties, so nearly all of that is now
 * expressible as variables.
 *
 * Rules for maintaining this file:
 *   - Exhaust the variables before writing a selector.
 *   - No !important. No `body .c7-*` specificity escalation.
 *   - Every non-variable rule gets a comment saying what forced it.
 *
 * Values are carried over from the old ACF options (options_c7_*), which are
 * the only record of the previous design. Variable names verified against
 * https://cdn.commerce7.com/v2/commerce7.css.
 */

:root {
	/* Brand maroon. Was options_c7_button_default_{background,background_hover}. */
	--c7-primary-color: #98514f;
	--c7-primary-color-dark: #b3403d;
	--c7-primary-color-focus: rgba( 152, 81, 79, 0.25 );
	--c7-primary-color-text: #98514f;
	--c7-primary-button-text-color: #fff;

	/* Secondary button: white with a maroon label. Was options_c7_button_alt_*. */
	--c7-alt-button-bg: #fff;
	--c7-alt-button-text-color: #98514f;
	/* The old design hovered this to solid #b3403d, but V2 has no
	   alt-button-text-hover variable, so the label would stay maroon on maroon.
	   A light tint of the brand colour keeps the label readable. */
	--c7-alt-button-bg-hover: #f3ebeb;

	/* Surfaces and text. Was options_c7_cart_checkout_colors_*. */
	--c7-bg: #fff;
	--c7-bg-alt: #f1f1f1;
	--c7-body-text-color: #282828;
	--c7-border-color: #ccc;

	/* V1 headings were #282828, not V2's pure black. */
	--c7-heading-text-color: #282828;

	/* V1 buttons were effectively square (1px); V2 defaults to 4px. */
	--c7-button-border-radius: 1px;

	/* Form fields. Was options_c7_form_input_colors_*. */
	--c7-field-bg: #fff;
	--c7-field-border-color: #aaa;
	--c7-field-focus-border-color: #666;

	/* Was the c7-extra-wide content class (max-width: 1440px).
	   V2 defaults to 1300px; checkout keeps its own 1500px default. */
	--c7-page-width: 1440px;

	/* Shared vertical band for the header controls -- the account/cart box and
	   the theme's overlay-menu hamburger. Both sit on this band so they stay
	   aligned at every breakpoint. The size matches the hamburger's own 28px
	   box; nudge --coleman-header-control-top to move all three together. */
	--coleman-header-control-top: 33px;
	--coleman-header-control-size: 28px;
}

/*
 * No selectors needed yet -- and that is the intended end state.
 *
 * The one V1 rule that looked worth keeping was
 * `#c7-content { min-height: 500px }`, to stop the footer jumping while the app
 * booted. V2 already does this better: it sets `min-height: 100vh` inline on
 * #c7-content during load and drops it to 0 once content renders. An inline
 * style beats a stylesheet rule, so the carried-over version never applied --
 * it was silently dead, and making it win would have required !important
 * fighting the app's own layout management.
 *
 * Add rules here only when something is visibly wrong that a variable above
 * cannot express, and say which page and viewport forced it.
 */

/* ---------------------------------------------------------------------------
 * Collection and product appearance, matched to the pre-migration storefront.
 *
 * All values measured from the live V1 site at a 1440px viewport. V2 renamed
 * several of these elements, so the selectors differ from the retired plugin's
 * CSS even where the intent is identical:
 *
 *   V1 .c7-product__variant__price      ->  V2 .c7-product__add-to-cart__price
 *   V1 .c7-product__variant__add-to-cart -> V2 .c7-product__add-to-cart__form
 *   V1 .c7-button                        -> V2 .c7-btn
 * ------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
 * Account / cart controls in the header
 *
 * V1 rendered these as #c7-utility-nav, positioned by the retired plugin at
 * `right: 50px` -- deliberately clear of the theme's overlay-menu hamburger,
 * which sits at right: 20px.
 *
 * The 5forests floating cart box defaults to right: 0 and is ~152px wide, so it
 * covers the hamburger completely, and its z-index of 99999 puts it on top --
 * the menu button becomes unclickable. Restoring V1's offset gives the same
 * ~2px clearance the live site has, and 1005 matches the z-index V1 used
 * (above the menu at 1004, without shadowing modals).
 * ------------------------------------------------------------------------- */
/* The account/cart controls and the hamburger are independent elements, so
 * they are aligned by construction rather than by matching pixel offsets:
 * both occupy the same vertical band, and the cart box centres its children
 * within it. That holds at any breakpoint and whatever height the Commerce7
 * widget renders at -- previously the box was positioned by padding, so its
 * centre moved with its content height. On mobile the cart widget is shorter
 * than on desktop, which pulled the account and cart links up above the
 * hamburger.
 *
 * A transform would be the tidier way to centre this, but must not be used
 * here: the slide-out cart is a position: fixed descendant of #c7wp-cart-box,
 * and a transform on an ancestor makes it the containing block, which would
 * detach the drawer from the viewport. */
#c7wp-cart-box.top-right {
	top: var( --coleman-header-control-top );
	height: var( --coleman-header-control-size );
	align-items: center;
	right: 50px;
	z-index: 1005;
	padding: 0 15px;
}

/* Vertically align the theme's overlay-menu button with the account and cart
 * controls beside it.
 *
 * The toggle is `position: fixed` with no `top` of its own, so it holds the
 * static position it would have had inside the header (padding-top: 20px),
 * centring at y=34. V2's account link and cart icon both centre at y=47 --
 * V2's cart control is taller than V1's was, since it stacks a label above the
 * item count. An explicit `top` is therefore needed: 47 - 28/2 = 33.
 *
 * This lives here, not in the theme, because the thing it aligns to only
 * exists while the Commerce7 plugin is active -- if that is ever removed the
 * button returns to its original position on its own.
 *
 * Note the toggle is fixed while the cart box is absolute, so the two only
 * line up at the top of the page; once scrolled, the toggle stays put and the
 * cart scrolls away. That matches how the theme already behaved. */
.overlay-menu-toggle {
	top: var( --coleman-header-control-top );
}

/* Default link colour. Was options_c7_utility_nav_color_link_color / _hover.
   The icons are inline SVG, so they need stroke set alongside colour.
 *
 * IMPORTANT: these selectors stop at the two triggers on purpose. Commerce7
 * renders the whole slide-out cart INSIDE #c7-cart, so a descendant selector
 * like `#c7wp-cart-box a` also hits every link in the drawer -- which on the
 * white-override pages below turned the product names white on white and made
 * them disappear. The child combinators keep this to the header controls. */
#c7wp-cart-box > #c7-account > .c7-user-nav__account > a,
#c7wp-cart-box > #c7-cart > .c7-user-nav__cart > button {
	color: #717171;
}

#c7wp-cart-box > #c7-account > .c7-user-nav__account > a svg,
#c7wp-cart-box > #c7-cart > .c7-user-nav__cart > button svg {
	stroke: #717171;
}

#c7wp-cart-box > #c7-account > .c7-user-nav__account > a:hover,
#c7wp-cart-box > #c7-cart > .c7-user-nav__cart > button:hover {
	color: #90793a;
}

#c7wp-cart-box > #c7-account > .c7-user-nav__account > a:hover svg,
#c7wp-cart-box > #c7-cart > .c7-user-nav__cart > button:hover svg {
	stroke: #90793a;
}

/* Eight pages open with a full-bleed dark hero behind the header, where the
   default grey is close to invisible. V1 handled this with a per-page override
   repeater (options_c7_utility_nav_color_override_pages -> #FFFFFF); nothing
   carries that over, so it is restored explicitly.
   Pages: home(7) contact(47) layouts(384) visit(2603) people(2725)
          place(2726) wine(2944) wine-club(3633)

   The page list is repeated rather than folded into one :is() around the two
   trigger selectors: `A > :is(B > C > D)` would require D itself to be a child
   of A, which it is not. */
:is(.page-id-7, .page-id-47, .page-id-384, .page-id-2603,
     .page-id-2725, .page-id-2726, .page-id-2944, .page-id-3633)
#c7wp-cart-box > #c7-account > .c7-user-nav__account > a,
:is(.page-id-7, .page-id-47, .page-id-384, .page-id-2603,
     .page-id-2725, .page-id-2726, .page-id-2944, .page-id-3633)
#c7wp-cart-box > #c7-cart > .c7-user-nav__cart > button {
	color: #fff;
}

:is(.page-id-7, .page-id-47, .page-id-384, .page-id-2603,
     .page-id-2725, .page-id-2726, .page-id-2944, .page-id-3633)
#c7wp-cart-box > #c7-account > .c7-user-nav__account > a svg,
:is(.page-id-7, .page-id-47, .page-id-384, .page-id-2603,
     .page-id-2725, .page-id-2726, .page-id-2944, .page-id-3633)
#c7wp-cart-box > #c7-cart > .c7-user-nav__cart > button svg {
	stroke: #fff;
}

/* Page width for the Commerce7 SPA routes (/collection, /product, /cart, ...).
 *
 * V2 constrains width with `.c7-wrapper { max-width: var(--c7-page-width);
 * padding: 0 20px; margin: 0 auto }`, but this tenant's V1-era templates never
 * emit a .c7-wrapper element -- verified: zero in the DOM. Under V1 the width
 * came from the retired plugin's own mount markup instead:
 *
 *   <div id="c7-content" class="c7-content c7-extra-wide">   (max-width: 1440px)
 *
 * The 5forests plugin renders a bare <div id="c7-content">, so without this
 * every SPA route ran full-bleed with body text touching the viewport edge.
 * Same declarations V2 would have applied, on the element that actually exists. */
#c7-content {
	max-width: var( --c7-page-width );
	margin: 0 auto;
	padding: 0 20px;
}

/* V2 lays collections out as a two-column grid (grid-template-columns: 1fr 1fr).
   V1 used a single column, because the tenant's product template already splits
   each item into bottle-beside-details -- two-up nests one two-column layout
   inside another and halves the width the details get. */
.c7-product-collection__product-list,
.c7-related-products__product-list {
	grid-template-columns: 1fr;
	/* V1 spaced items with margin-bottom: 30px; V2's grid defaults to an
	   80px row-gap, which left the list looking twice as sparse. */
	row-gap: 30px;
}

/* Bottle shots. V1 capped the height and let width follow; V2 leaves them
   unconstrained, so the image column towered over the details beside it. */
.c7-collection-item .c7-product-photo {
	text-align: center;
}

.c7-collection-item .c7-product-photo img {
	max-height: 250px;
	width: auto;
}

/* Product name. V2 renders it bold and pure black; V1 was light-weight #282828
   with slightly more space beneath. Colour comes from --c7-heading-text-color. */
.c7-collection-item .c7-product-info .c7-product__title {
	font-weight: 300;
	line-height: 1.25;
	margin-bottom: 9px;
}

/* Price. V1 was 16px/300; V2 sets 18px. */
.c7-product__add-to-cart__price {
	font-size: 16px;
	font-weight: 300;
	margin-bottom: 8px;
}

/* V2 appends the variant title after the price, so wines read "$45.00750ml"
   and gift certificates "$25.00-". V1 showed the price alone here and put the
   variant title in the options selector instead, so this is hidden to match.
   Multi-variant products still identify the variant in their options group. */
.c7-product__add-to-cart__price__variant {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Cart line items -- quantity first, as V1 had it
 *
 * V1 laid each row out as:  quantity | image | title | price | total
 * V2 ships:                 image | title+remove | (price, quantity, total)
 *
 * The quantity sits inside .c7-order-item__pricing, so it is a grandchild of
 * the row and `order` cannot reach it. `display: contents` drops the pricing
 * wrapper's own box and promotes price/quantity/total into the row's flex
 * formatting context, which makes all five siblings orderable. The wrapper is
 * a plain div, so nothing semantic is lost.
 *
 * Scoped to .c7-order-items--cart, which is the modifier Commerce7 puts on the
 * editable cart list (both the slide-out and the /cart/ page). The same
 * .c7-order-item component is reused for checkout review, order confirmation
 * and account order history, where the quantity is not editable and this
 * reordering would be wrong.
 * ------------------------------------------------------------------------- */
.c7-order-items--cart .c7-order-item__pricing {
	display: contents;
}

.c7-order-items--cart .c7-order-item__quantity {
	order: -1;
}

/* Radio options (gift certificate amounts, and any other variant selector).
   .c7-radio is a flexbox, and V2 aligns the control with a hard-coded
   `margin-top: 4px` that assumes its own text metrics. The theme's typography
   is taller, so the control landed 2px below the centre of its label. Aligning
   on the cross axis instead keeps them centred whatever the line height. */
.c7-radio {
	align-items: center;
}

.c7-radio__control {
	margin-top: 0;
}

/* Quantity field and Add to Cart. V1's pair was markedly more compact than
   V2's defaults -- 10px/11px type against V2's 16px, and tighter padding. */
.c7-product__add-to-cart__form__quantity .c7-form__field input {
	width: 48px;
	padding: 10px 15px;
	font-size: 11px;
}

/* Scoped to the add-to-cart form on purpose. V1's compact button belonged to
   the product listing; applying it to every .c7-btn also shrank the cart and
   checkout buttons, where V2's larger default is correct. */
.c7-product__add-to-cart .c7-btn {
	padding: 10px 12px;
	font-size: 10px;
	font-weight: 400;
	line-height: 1;
}

/* Theme bleed-through. themes/vin/stylesheets/custom-styles.css sets
   `a, a:link { color: #666666 }`, and `a:link` scores (0,1,1) -- which beats
   V2's own `.c7-btn--primary { color: var(--c7-primary-button-text-color) }`
   at (0,1,0). Commerce7 buttons rendered as anchors therefore lost their text
   colour: "Proceed to Checkout" came out grey on maroon, and "View Cart" grey
   instead of brand maroon.
   V2's variables are re-asserted with enough specificity to win, rather than
   disabling the theme's link colour wholesale. */
a.c7-btn--primary:link,
a.c7-btn--primary:visited,
a.c7-btn--primary:hover,
a.c7-btn--primary:focus {
	color: var( --c7-primary-button-text-color );
}

a.c7-btn--alt:link,
a.c7-btn--alt:visited,
a.c7-btn--alt:hover,
a.c7-btn--alt:focus {
	color: var( --c7-alt-button-text-color );
}

/* ---------------------------------------------------------------------------
 * Product detail page
 *
 * V2 rebuilt this template outright -- V1's .c7-product-detail__photo /
 * __info / __titles no longer exist; it is now a two-child flexbox of
 * .c7-product__image and .c7-product__details.
 *
 * V1 placed the description, price and Add to Cart on the LEFT with the bottle
 * shot on the RIGHT. V2 ships the mirror image. Reversing the flex direction
 * restores the original arrangement; scoped to the desktop breakpoint so the
 * stacked mobile order (bottle first) is left alone.
 * ------------------------------------------------------------------------- */

@media screen and (min-width: 769px) {
	.c7-product-detail .c7-product {
		flex-direction: row-reverse;
	}

	/* The 40px gutter has to move with it, or it lands on the outside edge. */
	.c7-product-detail .c7-product__image {
		margin-right: 0;
		margin-left: 40px;
	}
}

/* V1's product title was 48px and flush left; V2 renders it 45px and centred. */
.c7-product-detail .c7-product__title {
	font-size: 48px;
	text-align: left;
}

/* V2 sets .c7-product__info to a flex row, so the wine specs become a narrow
   column squeezed beside the description (93px wide here). V1 stacked them:
   description first, specs underneath. */
.c7-product-detail .c7-product__info {
	flex-direction: column;
}

/* V2 sizes the specs block as a 200px side column. Stacked, that leaves only
   ~30px for values once the label column is allowed for, wrapping "Pinot Noir"
   onto two lines. */
.c7-product-detail .c7-product__specs {
	width: 100%;
	max-width: none;
}

/* V1 printed a "Wine Specs" heading above this table; V2's rebuilt template
   dropped it and emits the specs bare.
   NOTE: generated content is not a real DOM heading -- it is not in the
   document outline and is unreliable for screen readers and SEO. The better
   fix is to add the heading to the product template in the Commerce7 admin,
   which would also restore it on the V1 storefront. Doing that here is a
   tenant-side change shared with the live site, so it is deliberately left as
   presentation-only for now. */
.c7-product-detail .c7-product__specs::before {
	content: "Wine Specs";
	display: block;
	margin-bottom: 20px;
	font-family: Centaur, "Times New Roman", Times, serif;
	font-size: 36px;
	line-height: 1.1;
	color: var( --c7-heading-text-color );
}

/* Wine specs. V2 emits each spec as two bare divs and stacks label over value;
   V1 laid them out as a two-column table with uppercase labels:
       VINTAGE:      2023
   The markup carries no classes, hence the child selectors. */
.c7-product-detail .c7-product__spec {
	display: flex;
	gap: 20px;
	margin-bottom: 10px;
}

.c7-product-detail .c7-product__spec > div:first-child {
	flex: 0 0 150px;
	text-transform: uppercase;
}

.c7-product-detail .c7-product__spec > div:first-child::after {
	content: ":";
}

/* ---------------------------------------------------------------------------
 * Commerce7 layout grid (.c7-row / .c7-col-*)
 *
 * Commerce7 renders product collections and product detail pages from
 * TENANT-LEVEL templates configured in the Commerce7 admin. This tenant's
 * templates date from the V1 era and emit Bootstrap-style grid markup:
 *
 *   <div class="c7-collection-item">
 *     <div class="row">
 *       <div class="c7-col-xs-12 c7-col-sm-6 c7-col-md-4 ...">  <- image
 *       <div class="c7-col-xs-12 c7-col-sm-6 c7-col-md-8 ...">  <- details
 *
 * Neither V2's CDN stylesheet nor the 5forests plugin defines those classes --
 * the retired Vin Agency plugin did, and it took them with it. Without them
 * every column sizes to content and the two-up product rows collapse.
 *
 * Extracted from the retired plugin's commerce7-public.css (the exact rules
 * that produced the current live appearance), with the IE10-era -webkit-box /
 * -ms-flexbox prefixes and unused offset/alignment helpers removed: ~1,090
 * lines down to this. Breakpoints and widths are unchanged, and match the
 * theme's own .col-* grid exactly.
 *
 * Longer term the tenant's Commerce7 product templates could be rebuilt on
 * V2 conventions, which would make this section unnecessary -- but those
 * templates are shared with the live V1 storefront, so changing them is a
 * separate, coordinated task.
 * ------------------------------------------------------------------------- */

.c7-row {
	box-sizing: border-box;
	display: flex;
	flex: 0 1 auto;
	flex-direction: row;
	flex-wrap: wrap;
	margin-right: -1.00rem;
	margin-left: -1.00rem;
	justify-content: center;
}
.c7-col-xs,
.c7-col-xs-1,
.c7-col-xs-2,
.c7-col-xs-3,
.c7-col-xs-4,
.c7-col-xs-5,
.c7-col-xs-6,
.c7-col-xs-7,
.c7-col-xs-8,
.c7-col-xs-9,
.c7-col-xs-10,
.c7-col-xs-11,
.c7-col-xs-12 {
	box-sizing: border-box;
	flex: 0 0 auto;
	padding-right: 1.00rem;
	padding-left: 1.00rem;
}
.c7-col-xs {
	flex-grow: 1;
	flex-basis: 0;
	max-width: 100%;
}
.c7-col-xs-1 {
	flex-basis: 8.333%;
	max-width: 8.333%;
}
.c7-col-xs-2 {
	flex-basis: 16.666%;
	max-width: 16.666%;
}
.c7-col-xs-3 {
	flex-basis: 25%;
	max-width: 25%;
}
.c7-col-xs-4 {
	flex-basis: 33.333%;
	max-width: 33.333%;
}
.c7-col-xs-5 {
	flex-basis: 41.667%;
	max-width: 41.667%;
}
.c7-col-xs-6 {
	flex-basis: 50%;
	max-width: 50%;
}
.c7-col-xs-7 {
	flex-basis: 58.333%;
	max-width: 58.333%;
}
.c7-col-xs-8 {
	flex-basis: 66.667%;
	max-width: 66.667%;
}
.c7-col-xs-9 {
	flex-basis: 75%;
	max-width: 75%;
}
.c7-col-xs-10 {
	flex-basis: 83.333%;
	max-width: 83.333%;
}
.c7-col-xs-11 {
	flex-basis: 91.667%;
	max-width: 91.667%;
}
.c7-col-xs-12 {
	flex-basis: 100%;
	max-width: 100%;
}
@media only screen and (min-width: 481px) {
	.c7-col-sm,
	.c7-col-sm-1,
	.c7-col-sm-2,
	.c7-col-sm-3,
	.c7-col-sm-4,
	.c7-col-sm-5,
	.c7-col-sm-6,
	.c7-col-sm-7,
	.c7-col-sm-8,
	.c7-col-sm-9,
	.c7-col-sm-10,
	.c7-col-sm-11,
	.c7-col-sm-12 {
		box-sizing: border-box;
		flex: 0 0 auto;
		padding-right: 1.00rem;
		padding-left: 1.00rem;
	}
	.c7-col-sm {
		flex-grow: 1;
		flex-basis: 0;
		max-width: 100%;
	}
	.c7-col-sm-1 {
		flex-basis: 8.333%;
		max-width: 8.333%;
	}
	.c7-col-sm-2 {
		flex-basis: 16.666%;
		max-width: 16.666%;
	}
	.c7-col-sm-3 {
		flex-basis: 25%;
		max-width: 25%;
	}
	.c7-col-sm-4 {
		flex-basis: 33.333%;
		max-width: 33.333%;
	}
	.c7-col-sm-5 {
		flex-basis: 41.667%;
		max-width: 41.667%;
	}
	.c7-col-sm-6 {
		flex-basis: 50%;
		max-width: 50%;
	}
	.c7-col-sm-7 {
		flex-basis: 58.333%;
		max-width: 58.333%;
	}
	.c7-col-sm-8 {
		flex-basis: 66.667%;
		max-width: 66.667%;
	}
	.c7-col-sm-9 {
		flex-basis: 75%;
		max-width: 75%;
	}
	.c7-col-sm-10 {
		flex-basis: 83.333%;
		max-width: 83.333%;
	}
	.c7-col-sm-11 {
		flex-basis: 91.667%;
		max-width: 91.667%;
	}
	.c7-col-sm-12 {
		flex-basis: 100%;
		max-width: 100%;
	}
}
@media only screen and (min-width: 769px) {
	.c7-col-md,
	.c7-col-md-1,
	.c7-col-md-2,
	.c7-col-md-3,
	.c7-col-md-4,
	.c7-col-md-5,
	.c7-col-md-6,
	.c7-col-md-7,
	.c7-col-md-8,
	.c7-col-md-9,
	.c7-col-md-10,
	.c7-col-md-11,
	.c7-col-md-12 {
		box-sizing: border-box;
		flex: 0 0 auto;
		padding-right: 1.00rem;
		padding-left: 1.00rem;
	}
	.c7-col-md {
		flex-grow: 1;
		flex-basis: 0;
		max-width: 100%;
	}
	.c7-col-md-1 {
		flex-basis: 8.333%;
		max-width: 8.333%;
	}
	.c7-col-md-2 {
		flex-basis: 16.666%;
		max-width: 16.666%;
	}
	.c7-col-md-3 {
		flex-basis: 25%;
		max-width: 25%;
	}
	.c7-col-md-4 {
		flex-basis: 33.333%;
		max-width: 33.333%;
	}
	.c7-col-md-5 {
		flex-basis: 41.667%;
		max-width: 41.667%;
	}
	.c7-col-md-6 {
		flex-basis: 50%;
		max-width: 50%;
	}
	.c7-col-md-7 {
		flex-basis: 58.333%;
		max-width: 58.333%;
	}
	.c7-col-md-8 {
		flex-basis: 66.667%;
		max-width: 66.667%;
	}
	.c7-col-md-9 {
		flex-basis: 75%;
		max-width: 75%;
	}
	.c7-col-md-10 {
		flex-basis: 83.333%;
		max-width: 83.333%;
	}
	.c7-col-md-11 {
		flex-basis: 91.667%;
		max-width: 91.667%;
	}
	.c7-col-md-12 {
		flex-basis: 100%;
		max-width: 100%;
	}
}
@media only screen and (min-width: 999px) {
	.c7-col-lg,
	.c7-col-lg-1,
	.c7-col-lg-2,
	.c7-col-lg-3,
	.c7-col-lg-4,
	.c7-col-lg-5,
	.c7-col-lg-6,
	.c7-col-lg-7,
	.c7-col-lg-8,
	.c7-col-lg-9,
	.c7-col-lg-10,
	.c7-col-lg-11,
	.c7-col-lg-12 {
		box-sizing: border-box;
		flex: 0 0 auto;
		padding-right: 1.00rem;
		padding-left: 1.00rem;
	}
	.c7-col-lg {
		flex-grow: 1;
		flex-basis: 0;
		max-width: 100%;
	}
	.c7-col-lg-1 {
		flex-basis: 8.333%;
		max-width: 8.333%;
	}
	.c7-col-lg-2 {
		flex-basis: 16.666%;
		max-width: 16.666%;
	}
	.c7-col-lg-3 {
		flex-basis: 25%;
		max-width: 25%;
	}
	.c7-col-lg-4 {
		flex-basis: 33.333%;
		max-width: 33.333%;
	}
	.c7-col-lg-5 {
		flex-basis: 41.667%;
		max-width: 41.667%;
	}
	.c7-col-lg-6 {
		flex-basis: 50%;
		max-width: 50%;
	}
	.c7-col-lg-7 {
		flex-basis: 58.333%;
		max-width: 58.333%;
	}
	.c7-col-lg-8 {
		flex-basis: 66.667%;
		max-width: 66.667%;
	}
	.c7-col-lg-9 {
		flex-basis: 75%;
		max-width: 75%;
	}
	.c7-col-lg-10 {
		flex-basis: 83.333%;
		max-width: 83.333%;
	}
	.c7-col-lg-11 {
		flex-basis: 91.667%;
		max-width: 91.667%;
	}
	.c7-col-lg-12 {
		flex-basis: 100%;
		max-width: 100%;
	}
}
@media only screen and (min-width: 1200px) {
	.c7-col-xl,
	.c7-col-xl-1,
	.c7-col-xl-2,
	.c7-col-xl-3,
	.c7-col-xl-4,
	.c7-col-xl-5,
	.c7-col-xl-6,
	.c7-col-xl-7,
	.c7-col-xl-8,
	.c7-col-xl-9,
	.c7-col-xl-10,
	.c7-col-xl-11,
	.c7-col-xl-12 {
		box-sizing: border-box;
		flex: 0 0 auto;
		padding-right: 1.00rem;
		padding-left: 1.00rem;
	}
	.c7-col-xl {
		flex-grow: 1;
		flex-basis: 0;
		max-width: 100%;
	}
	.c7-col-xl-1 {
		flex-basis: 8.333%;
		max-width: 8.333%;
	}
	.c7-col-xl-2 {
		flex-basis: 16.666%;
		max-width: 16.666%;
	}
	.c7-col-xl-3 {
		flex-basis: 25%;
		max-width: 25%;
	}
	.c7-col-xl-4 {
		flex-basis: 33.333%;
		max-width: 33.333%;
	}
	.c7-col-xl-5 {
		flex-basis: 41.667%;
		max-width: 41.667%;
	}
	.c7-col-xl-6 {
		flex-basis: 50%;
		max-width: 50%;
	}
	.c7-col-xl-7 {
		flex-basis: 58.333%;
		max-width: 58.333%;
	}
	.c7-col-xl-8 {
		flex-basis: 66.667%;
		max-width: 66.667%;
	}
	.c7-col-xl-9 {
		flex-basis: 75%;
		max-width: 75%;
	}
	.c7-col-xl-10 {
		flex-basis: 83.333%;
		max-width: 83.333%;
	}
	.c7-col-xl-11 {
		flex-basis: 91.667%;
		max-width: 91.667%;
	}
	.c7-col-xl-12 {
		flex-basis: 100%;
		max-width: 100%;
	}
}