/* ============================================================================
   Cart groups — one line is one group (gn2-cart-groups.php).

   gn2-cart.css already turned each cart line into a card. What the card still did
   not say is that the line is a GROUP: N rolls sharing one configuration. So the
   quantity read as a number in a box, the subtotal read as a unit price, and the
   two choices worth catching — no scans, negatives discarded — were two rows of
   six in the middle of the option list.

   This layer adds four things and changes none of gn2-cart.css's layout:
     .gn2-cg          the group block, between the line title and the option list
     .gn2-cg__basis   under the subtotal amount: what that amount is the total of
     .gn2-cg__qtynote beside the quantity field: whose quantity it is
     .gn2-cg-*        the two disclosures (full details, discount code) and the
                      provisional-total row

   Selectors carry .woocommerce-cart-form and use !important for the same reason
   gn2-cart.css does: WooCommerce's own responsive cart rules are (0,2,4) with
   !important of their own and would otherwise win on anything inside a cart cell.
   Tokens are gn2-base :root — no colour is introduced here. Emphasis for a
   consequential choice is weight, a rule and a --bone fill, never a new hue.
   ============================================================================ */

/* ---- the group block ---------------------------------------------------- */
.woocommerce-cart-form table.cart tr.cart_item td.product-name .gn2-cg{display:block!important;margin:14px 0 0!important;padding:0!important;font-family:var(--sans)!important;font-size:16px!important;font-weight:400!important;line-height:1.45!important;text-align:left!important;color:var(--ink)!important;}

/* "3 rolls" is the fact; "all configured the same way" is the reassurance. The
   count is mono so it reads as a measured quantity next to the money below. */
.woocommerce-cart-form table.cart tr.cart_item td.product-name .gn2-cg__count{display:flex!important;align-items:baseline!important;flex-wrap:wrap!important;gap:4px 10px!important;margin:0!important;padding:0!important;}
.woocommerce-cart-form table.cart tr.cart_item td.product-name .gn2-cg__n{font-family:var(--mono)!important;font-size:15px!important;font-weight:700!important;line-height:1.3!important;letter-spacing:.02em!important;color:var(--ink)!important;font-variant-numeric:tabular-nums!important;}
.woocommerce-cart-form table.cart tr.cart_item td.product-name .gn2-cg__all{font-family:var(--sans)!important;font-size:14px!important;font-weight:400!important;line-height:1.35!important;color:var(--mut)!important;}

/* ---- the consequential choices, never collapsed ------------------------- */
/* These two rows also appear in the option list below. That is deliberate: the
   list is the full record and stays whole, while these are lifted out so they
   cannot be scrolled past. When the script collapses the list, the duplication
   is not visible at all. */
.woocommerce-cart-form table.cart tr.cart_item td.product-name ul.gn2-cg__keys{display:block!important;margin:14px 0 0!important;padding:0!important;list-style:none!important;}
.woocommerce-cart-form table.cart tr.cart_item td.product-name ul.gn2-cg__keys li.gn2-cg__k{display:block!important;margin:0 0 8px!important;padding:10px 12px!important;list-style:none!important;background:var(--paper)!important;border:1px solid var(--line)!important;}
.woocommerce-cart-form table.cart tr.cart_item td.product-name ul.gn2-cg__keys li.gn2-cg__k:last-child{margin-bottom:0!important;}
.woocommerce-cart-form table.cart tr.cart_item td.product-name .gn2-cg__kl{display:block!important;font-family:var(--mono)!important;font-size:11px!important;font-weight:600!important;letter-spacing:.14em!important;text-transform:uppercase!important;line-height:1.4!important;color:var(--mut)!important;}
.woocommerce-cart-form table.cart tr.cart_item td.product-name .gn2-cg__kv{display:block!important;margin-top:2px!important;font-family:var(--sans)!important;font-size:17px!important;font-weight:700!important;line-height:1.35!important;color:var(--ink)!important;overflow-wrap:anywhere!important;}

/* A consequential answer is marked with weight and a 3px ink rule, not a colour:
   the palette has no warning hue that belongs on this card, and an ink rule reads
   at a glance on a phone in daylight where a tint does not. */
.woocommerce-cart-form table.cart tr.cart_item td.product-name ul.gn2-cg__keys li.gn2-cg__k--warn{background:var(--bone)!important;border-color:var(--ink)!important;border-left-width:3px!important;}
.woocommerce-cart-form table.cart tr.cart_item td.product-name .gn2-cg__kn{display:block!important;margin-top:6px!important;padding-top:6px!important;border-top:1px solid var(--line)!important;font-family:var(--sans)!important;font-size:14px!important;font-weight:400!important;line-height:1.4!important;color:var(--ink)!important;}

/* ---- "this applies to the whole group" --------------------------------- */
.woocommerce-cart-form table.cart tr.cart_item td.product-name .gn2-cg__whole{margin:12px 0 0!important;padding:0!important;font-family:var(--sans)!important;font-size:14px!important;font-weight:400!important;line-height:1.45!important;color:var(--mut)!important;}

/* ---- "change these options" -------------------------------------------- */
/* 44px comes from padding on an inline-flex box rather than a height, so a link
   that wraps to two lines on a narrow phone still has a full-size target. */
.woocommerce-cart-form table.cart tr.cart_item td.product-name .gn2-cg__change{display:block!important;margin:8px 0 0!important;padding:0!important;}
.woocommerce-cart-form table.cart tr.cart_item td.product-name a.gn2-cg__changelink{display:inline-flex!important;align-items:center!important;min-height:44px!important;padding:8px 0!important;font-family:var(--mono)!important;font-size:12px!important;font-weight:700!important;letter-spacing:.06em!important;text-transform:uppercase!important;line-height:1.3!important;color:var(--cobalt)!important;text-decoration:underline!important;text-underline-offset:3px!important;}
.woocommerce-cart-form table.cart tr.cart_item td.product-name a.gn2-cg__changelink:hover{color:var(--ink)!important;}
.woocommerce-cart-form table.cart tr.cart_item td.product-name a.gn2-cg__changelink:focus-visible{outline:2px solid var(--cobalt)!important;outline-offset:2px!important;}
.woocommerce-cart-form table.cart tr.cart_item td.product-name .gn2-cg__changenote{display:block!important;font-family:var(--sans)!important;font-size:13px!important;line-height:1.4!important;color:var(--mut)!important;}

/* ---- the full-details disclosure --------------------------------------- */
/* The button exists only when the script runs, so nothing here can hide the
   option list on a page without JavaScript: dl.variation is untouched by this
   file until .gn2-cg-folded is present, and only the script sets that. */
.woocommerce-cart-form table.cart tr.cart_item td.product-name button.gn2-cg__more{display:inline-flex!important;align-items:center!important;gap:8px!important;min-height:44px!important;margin:14px 0 0!important;padding:8px 0!important;border:0!important;background:none!important;box-shadow:none!important;font-family:var(--mono)!important;font-size:12px!important;font-weight:700!important;letter-spacing:.06em!important;text-transform:uppercase!important;line-height:1.3!important;color:var(--ink)!important;cursor:pointer!important;-webkit-appearance:none!important;appearance:none!important;}
.woocommerce-cart-form table.cart tr.cart_item td.product-name button.gn2-cg__more::after{content:"+"!important;font-family:var(--mono)!important;font-size:15px!important;font-weight:400!important;line-height:1!important;}
.woocommerce-cart-form table.cart tr.cart_item td.product-name button.gn2-cg__more[aria-expanded="true"]::after{content:"\2212"!important;}
.woocommerce-cart-form table.cart tr.cart_item td.product-name button.gn2-cg__more:hover{color:var(--cobalt)!important;}
.woocommerce-cart-form table.cart tr.cart_item td.product-name button.gn2-cg__more:focus-visible{outline:2px solid var(--cobalt)!important;outline-offset:2px!important;}
/* The hidden attribute alone cannot fold the list: gn2-cart.css sets dl.variation
   to display:grid !important, which beats [hidden]'s display:none. So the folded
   state needs its own rule at higher specificity — and it only ever matches a dl
   the script has actually hidden. */
.woocommerce-cart-form table.cart tr.cart_item dl.variation[hidden]{display:none!important;}

/* ---- what the subtotal is the total of --------------------------------- */
/* td.product-subtotal is a space-between flex row in gn2-cart.css, so the basis
   line claims a full row of its own rather than competing with the amount. */
.woocommerce-cart-form table.cart tr.cart_item td.product-subtotal .gn2-cg__basis{flex:1 0 100%!important;display:block!important;margin:0!important;font-family:var(--sans)!important;font-size:14px!important;font-weight:400!important;line-height:1.4!important;color:var(--mut)!important;}
.woocommerce-cart-form table.cart tr.cart_item td.product-subtotal .gn2-cg__basis .amount{font-family:var(--sans)!important;font-size:14px!important;font-weight:400!important;color:var(--mut)!important;}

/* ---- whose quantity it is ---------------------------------------------- */
.woocommerce-cart-form table.cart tr.cart_item td.product-quantity .gn2-cg__qtynote{flex:1 0 100%!important;display:block!important;margin:0!important;font-family:var(--sans)!important;font-size:14px!important;font-weight:400!important;line-height:1.4!important;color:var(--mut)!important;}

/* ---- remove, and Woo's own Undo ---------------------------------------- */
/* Nothing about removal is reimplemented. WooCommerce's cart remove link is a
   plain GET that its own form handler answers with "<item> removed. Undo?", and
   that restore link is the undo. All that was wrong with it on a phone was that
   it was 13px of underlined text inside a notice — so it gets a real target. */
.woocommerce-cart .woocommerce-message a.restore-item,
.woocommerce .woocommerce-message a.restore-item{display:inline-flex!important;align-items:center!important;min-height:44px!important;padding:8px 14px!important;margin-left:8px!important;border:1px solid var(--ink)!important;background:var(--white)!important;font-family:var(--mono)!important;font-size:12px!important;font-weight:700!important;letter-spacing:.06em!important;text-transform:uppercase!important;line-height:1.2!important;color:var(--ink)!important;text-decoration:none!important;}
.woocommerce-cart .woocommerce-message a.restore-item:hover{background:var(--bone)!important;color:var(--ink)!important;}
.woocommerce-cart .woocommerce-message a.restore-item:focus-visible{outline:2px solid var(--cobalt)!important;outline-offset:2px!important;}

/* ---- the discount-code disclosure ------------------------------------- */
/* Same rule as the option list: the toggle is created by the script, so without
   JavaScript the coupon field is simply visible, exactly as WooCommerce ships
   it. An APPLIED coupon is not here at all — it is a row in the totals table —
   so folding this away never hides a discount the shopper already has. */
.woocommerce-cart-form td.actions button.gn2-cg__coupontoggle{display:inline-flex!important;align-items:center!important;gap:8px!important;min-height:44px!important;margin:0 0 12px!important;padding:8px 0!important;border:0!important;background:none!important;box-shadow:none!important;font-family:var(--mono)!important;font-size:12px!important;font-weight:700!important;letter-spacing:.06em!important;text-transform:uppercase!important;line-height:1.3!important;color:var(--ink)!important;cursor:pointer!important;-webkit-appearance:none!important;appearance:none!important;}
.woocommerce-cart-form td.actions button.gn2-cg__coupontoggle::after{content:"+"!important;font-family:var(--mono)!important;font-size:15px!important;font-weight:400!important;line-height:1!important;}
.woocommerce-cart-form td.actions button.gn2-cg__coupontoggle[aria-expanded="true"]::after{content:"\2212"!important;}
.woocommerce-cart-form td.actions button.gn2-cg__coupontoggle:hover{color:var(--cobalt)!important;}
.woocommerce-cart-form td.actions button.gn2-cg__coupontoggle:focus-visible{outline:2px solid var(--cobalt)!important;outline-offset:2px!important;}
/* Woo and the theme both give .coupon a display of their own, so the folded state
   is asserted here rather than left to the hidden attribute's default. */
.woocommerce-cart-form td.actions .coupon[hidden]{display:none!important;}
/* 48px, not the 44px floor: gn2-woo-skin.css already sets every Woo text input to
   48px, and revealing this field must not make it the one short target on the page. */
.woocommerce-cart-form td.actions .coupon input#coupon_code{min-height:48px!important;padding:10px 12px!important;border:1px solid var(--ink)!important;background:var(--paper)!important;font-family:var(--mono)!important;font-size:14px!important;color:var(--ink)!important;border-radius:0!important;}
.woocommerce-cart-form td.actions .coupon button{min-height:48px!important;}

/* The remove-coupon × in the totals table is the other place a 13px link was the
   only control, and it has the same consequence as removing a line. */
.woocommerce-cart .cart-collaterals a.woocommerce-remove-coupon{display:inline-flex!important;align-items:center!important;min-height:44px!important;padding:0 8px!important;color:var(--cobalt)!important;}

/* ---- the figure is a subtotal while shipping and tax are unknown ------- */
.woocommerce-cart .cart-collaterals tr.gn2-cg-provisional td{padding:0 0 14px!important;border:0!important;}
.woocommerce-cart .cart-collaterals .gn2-cg__provisional{margin:0!important;padding:10px 12px!important;border-left:3px solid var(--ink)!important;background:var(--bone)!important;font-family:var(--sans)!important;font-size:14px!important;font-weight:400!important;line-height:1.45!important;color:var(--ink)!important;}

/* The last block on the cart page sits above the home indicator on a phone, so
   the final control is not half under it. This is the only place the inset is
   needed: nothing in this file is fixed or sticky. */
.woocommerce-cart .cart-collaterals{padding-bottom:max(0px,env(safe-area-inset-bottom))!important;}

/* ---- tablet up: the group block follows the option list's label column -- */
@media (min-width:768px){
	.woocommerce-cart-form table.cart tr.cart_item td.product-name .gn2-cg{margin-top:16px!important;}
	.woocommerce-cart-form table.cart tr.cart_item td.product-name ul.gn2-cg__keys{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))!important;gap:10px!important;}
	.woocommerce-cart-form table.cart tr.cart_item td.product-name ul.gn2-cg__keys li.gn2-cg__k{margin:0!important;}
}

/* ---- motion ------------------------------------------------------------ */
/* The two disclosures animate their fill only, and not at all when the reader
   has asked for less motion. Nothing moves layout either way: both panels are
   toggled with the hidden attribute, so there is no height animation to skip. */
@media (prefers-reduced-motion:no-preference){
	.woocommerce-cart-form table.cart tr.cart_item td.product-name button.gn2-cg__more,
	.woocommerce-cart-form td.actions button.gn2-cg__coupontoggle,
	.woocommerce-cart .woocommerce-message a.restore-item{transition:color .16s ease,background-color .16s ease;}
}

/* Undo toast — Woo's ajax removal says nothing, so this carries core's restore link. */
.gn2-cg-undo {
	position: fixed;
	left: 16px; right: 16px;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	z-index: 9990;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 16px;
	border-radius: 10px;
	background: var(--ink, #131313);
	color: var(--white, #fff);
	font-family: var(--sans, system-ui, sans-serif);
	font-size: 14px;
	box-shadow: 0 6px 24px rgba(19,19,19,.22);
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity .18s ease, transform .18s ease;
}
.gn2-cg-undo.is-up { opacity: 1; transform: translateY(0); pointer-events: auto; }
.gn2-cg-undo__go {
	flex: none;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 8px;
	color: var(--white, #fff);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.gn2-cg-undo__go:focus-visible { outline: 2px solid var(--white, #fff); outline-offset: 2px; }

@media (min-width: 640px) { .gn2-cg-undo { left: auto; right: 20px; min-width: 320px; } }
@media (prefers-reduced-motion: reduce) { .gn2-cg-undo { transition: none; } }


/* Discount code row.

   Woo lays the field, the Apply button and its error notice out as one no-wrap flex row. The
   error is a sentence, not a control, so above the phone breakpoint it took ~392px of the row
   and crushed the input: measured 26px wide at 641px and at 768px, 80px at 1280px. At that size
   the shopper cannot see what they typed — pressing select-all and retyping at 768px appended
   instead of replacing, turning BADCODE-9 into NOPE-42BADCODE-9 and producing a second, more
   confusing error.

   So the notice always takes its own line, at every width, and the field keeps a usable minimum.
   Below 640px the field and button take full lines too, since side by side they are both too
   narrow to use on a phone. */
.woocommerce-cart-form td.actions .coupon {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
.woocommerce-cart-form td.actions .coupon .coupon-error-notice,
.woocommerce-cart-form td.actions .coupon-error-notice {
	flex: 1 1 100%;
	width: 100%;
	margin: 0;
}
.woocommerce-cart-form td.actions .coupon #coupon_code,
.woocommerce-cart-form td.actions .coupon input[name="coupon_code"] {
	flex: 1 1 16ch;
	min-width: 16ch;
	min-height: 48px;
	box-sizing: border-box;
}
.woocommerce-cart-form td.actions .coupon button[name="apply_coupon"] {
	flex: 0 0 auto;
	min-height: 48px;
}

@media (max-width: 640px) {
	.woocommerce-cart-form td.actions .coupon #coupon_code,
	.woocommerce-cart-form td.actions .coupon input[name="coupon_code"],
	.woocommerce-cart-form td.actions .coupon button[name="apply_coupon"] {
		flex: 1 1 100%;
		width: 100%;
	}
}