/* ==========================================================================
   WooCommerce surfaces in the Channel GG design language: guide dropdown, buy box, notices,
   bag (cart), shop counter (checkout), account, order received, 404 bars.
   Uses only the tokens and component vocabulary from gg.css.
   ========================================================================== */
body.gg { min-height: 100vh; display: flex; flex-direction: column }
body.gg > main { flex: 1 }

/* header guide (no-JS <details>) */
.gg-guide { position: relative }
.gg-guide > summary { list-style: none; cursor: pointer }
.gg-guide > summary::-webkit-details-marker { display: none }
.gg-guide[open] > summary { background: var(--sun) }
.gg-guide-panel { position: absolute; right: 0; top: calc(100% + 12px); z-index: 60; width: min(340px, calc(100vw - 32px)); max-height: min(70vh, 560px); overflow-y: auto; background: var(--ink); color: var(--paper); border: 3px solid var(--ink); border-radius: 18px; padding: 14px; box-shadow: 0 8px 0 rgba(31, 26, 23, .35) }
.gg-guide-panel .kicker { color: var(--sun); margin: 2px 4px 10px }
.gg-guide-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px }
.gg-guide-panel a { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 15px; border: 2px solid rgba(249, 237, 213, .25); border-radius: 12px; padding: 8px 10px }
.gg-guide-panel a:hover { background: var(--c, var(--sun)); color: var(--on, var(--ink)); border-color: var(--ink) }
.gg-guide-panel small { flex: none; font: 400 11px/1 var(--accent); color: var(--sun); min-width: 44px; letter-spacing: .04em }
.gg-guide-panel a:hover small { color: inherit }
@media (max-width: 420px) { .gg-guide-panel { position: fixed; left: 16px; right: 16px; top: 76px; width: auto } }

/* product page buy box */
.gg-buy { display: grid; gap: 12px }
.gg-buy-price, .pdp-buy > .gg-buy-price { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border: 3px solid var(--ink); border-radius: 16px; padding: 10px 14px; background: var(--sun) }
.gg-buy-price .kicker { color: var(--ink) }
.gg-buy-price .price { font-size: 24px }
.gg-buy .buy-row { flex-wrap: nowrap }
.gg-story { margin-top: 12px }
.pdp-star .billing { display: inline-block; font: 400 .72em/1 var(--accent); letter-spacing: .12em; text-transform: uppercase; background: var(--white); border: 2px solid var(--ink); border-radius: 99px; padding: .4em .7em .34em; margin-right: .5em; vertical-align: .12em }
.add--off { cursor: default; background: var(--paper-2); font: 800 12px/1 var(--text); padding: .5em .7em; border: 2.5px solid var(--ink); border-radius: 999px }
a.add { color: var(--ink); text-decoration: none; display: inline-block }
.gg-shelf-truth { margin: 0 0 40px }

/* quantity input (Woo) styled as the site's .qty pill */
.quantity { display: inline-flex; align-items: center }
.quantity .qty, .quantity input.qty { width: 4.2em; height: 48px; text-align: center; font: 400 18px/1 var(--accent); border: 3px solid var(--ink); border-radius: 999px; background: var(--white); color: var(--ink); padding: 0 .4em; -moz-appearance: textfield; appearance: textfield }
.quantity .qty::-webkit-inner-spin-button, .quantity .qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0 }
.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 }

/* notices */
.woocommerce-notices-wrapper:empty { display: none }
.woocommerce-message, .woocommerce-info, .woocommerce-error, .wc-block-components-notice-banner { list-style: none; margin: 0 0 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; background: var(--white); color: var(--ink); border: 3px solid var(--ink); border-left: 14px solid var(--kelly); border-radius: 16px; padding: 12px 16px; font-weight: 700; font-size: 16px; box-shadow: 0 5px 0 var(--ink) }
.woocommerce-info { border-left-color: var(--pool) }
.woocommerce-error { border-left-color: var(--tangerine); display: grid }
.woocommerce-error li { margin: 0 }
.woocommerce-message .button, .woocommerce-info .button { order: 2; margin-left: auto }
.wc-block-components-notice-banner > svg { display: none }

/* generic Woo buttons → brand .btn */
.gg .button, .gg button.button, .gg input.button, .gg a.button, .gg #place_order, .gg .checkout-button {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em; font: 800 16px/1 var(--text); padding: .8em 1.25em .85em; border: 3px solid var(--ink); border-radius: 999px; background: var(--white); color: var(--ink); text-decoration: none; box-shadow: 0 4px 0 var(--ink); cursor: pointer; transition: transform .1s steps(2), box-shadow .1s steps(2) }
.gg .button:hover, .gg #place_order:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink) }
.gg .button:active, .gg #place_order:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink) }
.gg .button:disabled, .gg .button[disabled] { opacity: .55; cursor: not-allowed; transform: none }
.gg a.checkout-button, .gg #place_order { background: var(--kelly); font-size: 18px; width: 100%; padding: .9em 1.35em .95em; box-shadow: 0 5px 0 var(--ink) }
.gg .single_add_to_cart_button { flex: 1 }

/* forms */
.gg-content input[type=text], .gg-content input[type=email], .gg-content input[type=tel], .gg-content input[type=password], .gg-content input[type=number], .gg-content textarea, .gg-content select, .select2-container .select2-selection--single {
  width: 100%; font: 600 16px/1.3 var(--text); color: var(--ink); background: var(--white); border: 3px solid var(--ink); border-radius: 14px; padding: .7em .85em; min-height: 50px }
.select2-container .select2-selection--single { display: flex; align-items: center; height: auto }
.select2-container--default .select2-selection--single .select2-selection__arrow { top: 50%; translate: 0 -50%; right: 8px }
.select2-dropdown { border: 3px solid var(--ink) !important; border-radius: 12px !important; font: 600 15px/1.3 var(--text) }
.gg-content input:focus-visible, .gg-content select:focus-visible, .gg-content textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 7px var(--sun) }
.gg-content label { display: block; font: 800 14px/1.3 var(--text); margin-bottom: 6px }
.gg-content .required { color: var(--tangerine-ink); text-decoration: none; border: 0 }
.gg-content .form-row { margin: 0 0 14px; padding: 0 }
.gg-content .form-row-first, .gg-content .form-row-last { display: inline-block; width: calc(50% - 8px); vertical-align: top }
.gg-content .form-row-first { margin-right: 12px }
@media (max-width: 560px) { .gg-content .form-row-first, .gg-content .form-row-last { width: 100%; margin-right: 0 } }
.gg-content fieldset { border: 0; padding: 0; margin: 0 }
.gg-content h2, .gg-content h3 { font: 400 clamp(26px, 2.6vw, 34px)/1.05 var(--display); margin: 0 0 14px }
.gg-content a { font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 3px }
.gg-content .woocommerce-input-wrapper { display: block }
.woocommerce-invalid input { border-color: var(--tangerine) !important }

/* the bag (cart) */
.gg-content .woocommerce { display: block }
.woocommerce-cart .gg-content .woocommerce { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px 40px; align-items: start }
.woocommerce-cart .gg-content .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1 }
.woocommerce-cart-form { min-width: 0 }
.shop_table { width: 100%; border-collapse: separate; border-spacing: 0 }
.woocommerce-cart-form .shop_table thead { display: none }
.woocommerce-cart-form .shop_table tbody { display: grid; gap: 12px }
.woocommerce-cart-form .cart_item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "art name remove" "art price qty" "art sub sub"; gap: 6px 14px; align-items: center; background: var(--white); border: 3px solid var(--ink); border-radius: 16px; padding: 12px 14px }
.woocommerce-cart-form .cart_item td { display: block; padding: 0; border: 0 }
.woocommerce-cart-form .cart_item td::before { content: none }
.cart_item .product-thumbnail { grid-area: art; align-self: start }
.cart_item .product-name { grid-area: name; font: 400 19px/1.1 var(--display) }
.cart_item .product-name a { text-decoration: none }
.cart_item .product-name a:hover { text-decoration: underline }
.cart_item .product-price { grid-area: price; font: 400 15px/1 var(--accent) }
.cart_item .product-quantity { grid-area: qty; justify-self: end }
.cart_item .product-quantity .qty { height: 40px; width: 3.6em; font-size: 15px }
.cart_item .product-subtotal { grid-area: sub; justify-self: end; font: 400 15px/1 var(--accent); color: var(--ink-2) }
.cart_item .product-remove { grid-area: remove; justify-self: end }
.cart_item a.remove { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 2.5px solid var(--ink); border-radius: 50%; background: var(--white); color: var(--ink); text-decoration: none; font: 800 20px/1 var(--text) }
.cart_item a.remove:hover { background: var(--tangerine) }
.bag-item-art { width: 64px; height: 64px; border-radius: 12px; border: 2.5px solid var(--ink); background: var(--c); display: grid; place-items: center; overflow: hidden }
.bag-item-art img { width: 82%; height: 82%; object-fit: contain }
.woocommerce-cart-form .actions { display: flex !important; flex-wrap: wrap; gap: 10px; justify-content: space-between; padding: 6px 0 0 !important; background: none !important; border: 0 !important; grid-template-columns: none }
.woocommerce-cart-form tr:has(.actions) { display: block }
.coupon { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.coupon label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0) }
.coupon input.input-text { width: 180px; min-height: 44px; font: 600 15px/1 var(--text); border: 3px solid var(--ink); border-radius: 999px; padding: 0 14px; background: var(--white) }
.cart-collaterals { background: var(--white); border: 4px solid var(--ink); border-radius: 24px; padding: 18px 20px 20px; box-shadow: 0 8px 0 var(--ink); position: sticky; top: calc(var(--head-h) + 20px) }
.cart-collaterals h2 { margin: 0 0 12px; font: 400 30px/1 var(--display) }
.cart_totals table { width: 100%; border-collapse: collapse }
.cart_totals th, .cart_totals td { text-align: left; padding: 9px 0; border-bottom: 2px solid var(--paper-2); font-size: 15px; vertical-align: top }
.cart_totals td { text-align: right; font: 400 16px/1.3 var(--accent) }
.cart_totals td::before { content: none !important }
.cart_totals .order-total th { font-size: 18px; font-weight: 800 }
.cart_totals .order-total td { font-size: 22px }
.cart_totals .woocommerce-shipping-destination, .cart_totals .woocommerce-shipping-methods, .cart_totals .woocommerce-shipping-calculator { font: 600 13.5px/1.4 var(--text); text-align: right; list-style: none; padding: 0; margin: 0 }
.wc-proceed-to-checkout { margin-top: 16px }
.gg-bag-fine { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--ink-2) }
@media (max-width: 900px) { .woocommerce-cart .gg-content .woocommerce { grid-template-columns: minmax(0, 1fr) } .cart-collaterals { position: static } }

/* the shop counter (checkout, classic) */
form.checkout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px 40px; align-items: start }
form.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1 }
#customer_details { min-width: 0; background: var(--white); border: 4px solid var(--ink); border-radius: 24px; padding: 20px 22px }
#customer_details .col-1, #customer_details .col-2 { width: 100%; float: none }
#customer_details .col-2 { margin-top: 18px; padding-top: 18px; border-top: 3px dashed var(--ink) }
#order_review_heading { display: none }
#order_review { background: var(--white); border: 4px solid var(--ink); border-radius: 24px; padding: 18px 20px 22px; box-shadow: 0 8px 0 var(--ink); position: sticky; top: calc(var(--head-h) + 20px) }
#order_review::before { content: "Your order"; display: block; font: 400 30px/1 var(--display); margin-bottom: 12px }
.woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; font-size: 15px }
.woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td { padding: 9px 0; border-bottom: 2px solid var(--paper-2); text-align: left; vertical-align: top }
.woocommerce-checkout-review-order-table td:last-child, .woocommerce-checkout-review-order-table tfoot td { text-align: right; font: 400 15px/1.3 var(--accent) }
.woocommerce-checkout-review-order-table .product-name { font-weight: 700 }
.woocommerce-checkout-review-order-table .order-total th { font-size: 18px; font-weight: 800 }
.woocommerce-checkout-review-order-table .order-total td { font-size: 22px }
.woocommerce-checkout-review-order-table #shipping_method, .woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; font: 600 14px/1.4 var(--text) }
#payment { margin-top: 16px }
#payment ul.payment_methods { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px }
#payment ul.payment_methods li { border: 3px solid var(--ink); border-radius: 14px; padding: 10px 12px; background: var(--paper); font-weight: 700 }
#payment ul.payment_methods li.woocommerce-notice { border-left: 14px solid var(--sun); font-weight: 600; font-size: 15px; line-height: 1.45 }
#payment .payment_box { margin-top: 8px; font-weight: 500; font-size: 14px }
.woocommerce-terms-and-conditions-wrapper, .woocommerce-privacy-policy-text { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); margin: 10px 0 }
.woocommerce-form-coupon-toggle .woocommerce-info, .woocommerce-form-login-toggle .woocommerce-info { box-shadow: none; font-size: 15px }
form.checkout_coupon, form.woocommerce-form-login { background: var(--white); border: 3px dashed var(--ink); border-radius: 18px; padding: 14px 16px; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 10px; align-items: end }
form.checkout_coupon p { margin: 0 }
@media (max-width: 900px) { form.checkout { grid-template-columns: minmax(0, 1fr) } #order_review { position: static } }

/* order received + account */
.woocommerce-order { display: grid; gap: 18px }
.woocommerce-order-overview { list-style: none; margin: 0; padding: 14px 18px; display: flex; flex-wrap: wrap; gap: 10px 26px; background: var(--white); border: 3px solid var(--ink); border-radius: 18px; font-size: 14px }
.woocommerce-order-overview strong { display: block; font: 400 16px/1.2 var(--accent) }
.woocommerce-order-details, .woocommerce-customer-details { background: var(--white); border: 3px solid var(--ink); border-radius: 18px; padding: 16px 18px }
.woocommerce-table--order-details { width: 100%; border-collapse: collapse }
.woocommerce-table--order-details th, .woocommerce-table--order-details td { text-align: left; padding: 8px 0; border-bottom: 2px solid var(--paper-2) }
.woocommerce-account .gg-content .woocommerce { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px 36px; align-items: start }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px }
.woocommerce-MyAccount-navigation a { display: block; font-weight: 700; text-decoration: none; border: 3px solid var(--ink); border-radius: 999px; padding: .5em 1em; background: var(--white) }
.woocommerce-MyAccount-navigation .is-active a, .woocommerce-MyAccount-navigation a:hover { background: var(--sun) }
.woocommerce-account:not(.logged-in) .gg-content .woocommerce { grid-template-columns: minmax(0, 1fr); max-width: 560px }
.woocommerce-form-login, .woocommerce-form-register { background: var(--white); border: 4px solid var(--ink); border-radius: 24px; padding: 20px 22px }
@media (max-width: 760px) { .woocommerce-account .gg-content .woocommerce { grid-template-columns: minmax(0, 1fr) } }

/* empty bag on the cart page */
.woocommerce-cart .empty-bag { grid-column: 1 / -1; background: var(--white); border: 4px solid var(--ink); border-radius: 24px; padding: 34px 16px; box-shadow: 0 8px 0 var(--ink) }
.cart-empty.woocommerce-info { display: none }
.return-to-shop { display: none }

/* loops outside the aisle (search, related) */
ul.products { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 16px }
ul.products::before, ul.products::after { content: none !important }
body.woocommerce ul.products li.product { width: auto !important; float: none !important; margin: 0 !important }

/* 404 colour bars */
.gg-bars { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); aspect-ratio: 4/3; border: 4px solid var(--paper); border-radius: 26px/30px; overflow: hidden }
.gg-bars span:nth-child(1) { background: var(--white) } .gg-bars span:nth-child(2) { background: var(--sun) } .gg-bars span:nth-child(3) { background: var(--pool) } .gg-bars span:nth-child(4) { background: var(--kelly) } .gg-bars span:nth-child(5) { background: var(--bubblegum) } .gg-bars span:nth-child(6) { background: var(--tangerine) } .gg-bars span:nth-child(7) { background: var(--grape) }
.gg-bars b { position: absolute; left: 50%; top: 50%; translate: -50% -50%; font: 400 clamp(18px, 3vw, 30px)/1 var(--accent); letter-spacing: .08em; text-transform: uppercase; color: var(--osd); background: var(--ink); padding: .5em .8em; border-radius: 10px; white-space: nowrap }
@media (max-width: 860px) { .tc-grid { grid-template-columns: minmax(0, 1fr) } }

/* motion: the site's on-twos letter drop only once JS is known to run */
html:not(.js) .bouncy .l { animation: none !important }