/*
Theme Name:   Comfort Cool
Theme URI:    https://comfortcool.com
Description:  Child theme of Storefront that styles the cart and checkout of shop.comfortcool.com to match the ComfortCool.com brand — Fraunces + Inter Tight type, a navy / teal / copper palette on cream, and pill buttons.
Author:       Comfort Cool, Inc.
Author URI:   https://comfortcool.com
Template:     storefront
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  comfort-cool
*/

/* ── DESIGN TOKENS ───────────────────────────────────────── */
:root {
	--cc-navy:        #1F3A6B;
	--cc-navy-deep:   #142848;
	--cc-teal:        #2A8A8E;
	--cc-teal-light:  #3FAAA8;
	--cc-copper:      #C97D4F;
	--cc-cream:       #FAFAF7;
	--cc-off-white:   #F4F6F9;
	--cc-ink:         #1A2436;
	--cc-muted:       #5A6478;
	--cc-line:        #E1E5EC;
	--cc-line-lt:     rgba(255, 255, 255, .18);
	--cc-footer-bg:   #07101f;

	--cc-serif:       'Fraunces', Georgia, 'Times New Roman', serif;
	--cc-sans:        'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	--cc-r:           12px;
	--cc-r-lg:        24px;
	--cc-trans:       all 0.25s cubic-bezier(0.2, 0.9, 0.3, 1);
	--cc-maxw:        1280px;
}

/* ── BASE TYPOGRAPHY & COLOR ─────────────────────────────── */
body,
button,
input,
select,
textarea,
.woocommerce,
.woocommerce-page {
	font-family: var(--cc-sans);
	color: var(--cc-ink);
}

body {
	background-color: var(--cc-cream);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title,
.woocommerce-order-details__title,
.woocommerce-column__title,
.cart_totals h2,
#order_review_heading {
	font-family: var(--cc-serif);
	color: var(--cc-ink);
	font-weight: 500;
	letter-spacing: -.01em;
	line-height: 1.1;
}

.entry-title,
.page-title {
	font-weight: 400;
	letter-spacing: -.02em;
}

a {
	color: var(--cc-teal);
	transition: color .2s;
}

a:hover {
	color: var(--cc-navy);
}

/* Widen Storefront's content column to match the marketing site rhythm. */
.col-full {
	max-width: var(--cc-maxw);
}

/* ── SHARED CONTAINER ────────────────────────────────────── */
.cc-container {
	max-width: var(--cc-maxw);
	margin: 0 auto;
	padding: 0 32px;
	width: 100%;
}

/* ── UTILITY BAR ─────────────────────────────────────────── */
.cc-utility-bar {
	background: var(--cc-navy);
	color: var(--cc-cream);
	font-size: 13px;
	padding: 10px 0;
	letter-spacing: .02em;
}

.cc-utility-bar .cc-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
}

.cc-utility-left {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
}

.cc-utility-left span {
	display: flex;
	align-items: center;
	gap: 6px;
	opacity: .85;
}

.cc-utility-left span::before {
	content: '';
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--cc-teal-light);
}

.cc-utility-left span:first-child::before {
	display: none;
}

.cc-utility-right {
	display: flex;
	gap: 20px;
	align-items: center;
}

.cc-utility-right a {
	color: var(--cc-cream);
	transition: color .2s;
}

.cc-utility-right a:hover {
	color: var(--cc-teal-light);
}

/* ── NAV / HEADER ────────────────────────────────────────── */
.cc-nav {
	background: var(--cc-cream);
	border-bottom: 1px solid var(--cc-line);
	position: sticky;
	top: 0;
	z-index: 100;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

/* Nudge the sticky header down when the WP admin bar is showing. */
.admin-bar .cc-nav {
	top: 32px;
}

.cc-nav .cc-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 20px;
	padding-bottom: 20px;
	gap: 32px;
}

.cc-logo {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

.cc-logo picture,
.cc-logo img {
	display: block;
	height: 48px;
	width: auto;
}

.cc-nav-links {
	display: flex;
	gap: 32px;
	font-size: 14px;
	font-weight: 500;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cc-nav-links li {
	margin: 0;
}

.cc-nav-links a {
	position: relative;
	display: inline-block;
	padding: 8px 0;
	color: var(--cc-ink);
	transition: color .2s;
}

.cc-nav-links a:hover,
.cc-nav-links li.current-menu-item > a {
	color: var(--cc-teal);
}

.cc-nav-right {
	display: flex;
	align-items: center;
	gap: 20px;
}

.cc-nav-toggle {
	display: none;
}

/* DIY / PRO toggle */
.cc-mode-toggle {
	display: flex;
	background: transparent;
	border: 1px solid var(--cc-line);
	border-radius: 100px;
	padding: 4px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.cc-mode-toggle a {
	color: var(--cc-muted);
	padding: 8px 16px;
	border-radius: 100px;
	transition: var(--cc-trans);
	text-decoration: none;
}

.cc-mode-toggle a:hover:not(.active) {
	background: rgba(31, 58, 107, .06);
	color: var(--cc-ink);
}

.cc-mode-toggle a.active {
	background: var(--cc-copper);
	color: #fff;
}

.cc-icon-btn {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--cc-line);
	background: transparent;
	color: var(--cc-ink);
	transition: var(--cc-trans);
	position: relative;
	cursor: pointer;
}

.cc-icon-btn:hover {
	background: var(--cc-navy);
	color: var(--cc-cream);
}

.cc-cart-count {
	position: absolute;
	top: -4px;
	right: -4px;
	background: var(--cc-copper);
	color: var(--cc-cream);
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 9px;
	font-size: 10px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ── PAGE SHELL ──────────────────────────────────────────── */
.site-content {
	padding-top: 56px;
	padding-bottom: 80px;
}

.woocommerce .entry-title,
.woocommerce-page .entry-title,
.site-content .page-title {
	font-size: clamp(36px, 5vw, 56px);
	margin-bottom: 32px;
}

/* ── BUTTONS ─────────────────────────────────────────────── */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
.cc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 30px;
	font-family: var(--cc-sans);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .02em;
	line-height: 1;
	border: 1.5px solid var(--cc-navy);
	border-radius: 100px;
	background: var(--cc-navy);
	color: var(--cc-cream);
	text-transform: none;
	text-shadow: none;
	transition: var(--cc-trans);
	cursor: pointer;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page input.button:hover,
.cc-btn:hover {
	background: var(--cc-navy-deep);
	border-color: var(--cc-navy-deep);
	color: var(--cc-cream);
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(31, 58, 107, .3);
}

/* Primary / alt buttons (place order, proceed to checkout). */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce #place_order,
.woocommerce-checkout #place_order {
	background: var(--cc-navy);
	border-color: var(--cc-navy);
	color: var(--cc-cream);
}

.woocommerce #place_order:hover,
.woocommerce-checkout #place_order:hover {
	background: var(--cc-navy-deep);
	border-color: var(--cc-navy-deep);
}

/* Secondary / outline buttons (e.g. "Update cart", "Continue shopping"). */
.woocommerce a.button.wc-backward,
.woocommerce button[name="update_cart"],
.woocommerce input[name="update_cart"] {
	background: transparent;
	color: var(--cc-navy);
	border: 1.5px solid var(--cc-navy);
}

.woocommerce a.button.wc-backward:hover,
.woocommerce button[name="update_cart"]:hover,
.woocommerce input[name="update_cart"]:hover {
	background: var(--cc-navy);
	color: var(--cc-cream);
}

.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce input.button:disabled,
.woocommerce input.button[disabled] {
	opacity: .5;
	transform: none;
	box-shadow: none;
	cursor: not-allowed;
}

/* ── FORM FIELDS ─────────────────────────────────────────── */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .quantity input.qty,
.woocommerce-page form .form-row input.input-text,
.woocommerce #order_comments,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce select {
	font-family: var(--cc-sans);
	font-size: 15px;
	color: var(--cc-ink);
	background: #fff;
	border: 1px solid var(--cc-line);
	border-radius: var(--cc-r);
	padding: 13px 16px;
	box-shadow: none;
	transition: border-color .2s, box-shadow .2s;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce .quantity input.qty:focus,
.woocommerce input[type="text"]:focus,
.woocommerce input[type="email"]:focus,
.woocommerce input[type="tel"]:focus,
.woocommerce input[type="password"]:focus,
.woocommerce select:focus {
	outline: none;
	border-color: var(--cc-teal);
	box-shadow: 0 0 0 3px rgba(63, 170, 168, .18);
}

.woocommerce form .form-row label,
.woocommerce-checkout .form-row label {
	font-size: 13px;
	font-weight: 500;
	color: var(--cc-muted);
	margin-bottom: 6px;
}

.required {
	color: var(--cc-copper);
}

/* select2 (country / state dropdowns) to match native inputs. */
.woocommerce .select2-container .select2-selection--single,
.woocommerce-page .select2-container .select2-selection--single {
	height: 50px;
	border: 1px solid var(--cc-line);
	border-radius: var(--cc-r);
	background: #fff;
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 48px;
	padding-left: 16px;
	color: var(--cc-ink);
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 48px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
	background-color: var(--cc-teal);
}

/* ── TABLES (cart + order review) ────────────────────────── */
.woocommerce table.shop_table {
	border: 1px solid var(--cc-line);
	border-radius: var(--cc-r-lg);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: #fff;
}

.woocommerce table.shop_table th {
	font-family: var(--cc-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cc-muted);
	background: var(--cc-off-white);
	padding: 18px 20px;
}

.woocommerce table.shop_table td {
	padding: 20px;
	border-top: 1px solid var(--cc-line);
	vertical-align: middle;
}

.woocommerce table.shop_table .product-name a {
	color: var(--cc-ink);
	font-weight: 600;
}

.woocommerce table.shop_table .product-name a:hover {
	color: var(--cc-teal);
}

.woocommerce table.shop_table .amount {
	font-weight: 600;
	color: var(--cc-ink);
}

.woocommerce a.remove {
	color: var(--cc-copper) !important;
	border: 1px solid var(--cc-line);
	font-weight: 400;
	line-height: 22px;
	height: 24px;
	width: 24px;
}

.woocommerce a.remove:hover {
	background: var(--cc-copper) !important;
	color: #fff !important;
	border-color: var(--cc-copper);
}

/* ── CART TOTALS ─────────────────────────────────────────── */
.woocommerce-cart .cart-collateral .cart_totals,
.woocommerce .cart_totals {
	background: #fff;
	border: 1px solid var(--cc-line);
	border-radius: var(--cc-r-lg);
	padding: 32px;
}

.woocommerce .cart_totals h2 {
	font-size: 24px;
	margin-bottom: 20px;
}

.woocommerce .cart_totals table.shop_table {
	border: none;
	border-radius: 0;
}

.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td {
	background: transparent;
	padding: 14px 0;
	text-transform: none;
	font-size: 15px;
}

.woocommerce .cart_totals .order-total .amount {
	font-family: var(--cc-serif);
	font-size: 22px;
	color: var(--cc-navy);
}

.woocommerce .wc-proceed-to-checkout a.checkout-button {
	display: block;
	width: 100%;
	text-align: center;
	font-size: 16px;
	padding: 18px 30px;
}

/* Coupon row */
.woocommerce .cart .actions .coupon .input-text {
	min-width: 180px;
}

/* ── CHECKOUT LAYOUT ─────────────────────────────────────── */
.woocommerce-checkout #customer_details {
	margin-bottom: 8px;
}

.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
	float: none;
	width: 100%;
}

.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
	font-family: var(--cc-serif);
	font-size: 22px;
	font-weight: 500;
	margin-bottom: 20px;
}

.woocommerce-checkout #payment {
	background: var(--cc-off-white);
	border-radius: var(--cc-r-lg);
}

.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: 1px solid var(--cc-line);
}

.woocommerce-checkout #payment div.payment_box {
	background: #fff;
	border-radius: var(--cc-r);
	color: var(--cc-muted);
}

.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: #fff;
}

.woocommerce-checkout #payment .place-order {
	padding: 24px;
}

.woocommerce-checkout #place_order {
	width: 100%;
	font-size: 16px;
	padding: 18px 30px;
}

/* ── NOTICES ─────────────────────────────────────────────── */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	border-top-color: var(--cc-teal);
	background: #fff;
	border-radius: var(--cc-r);
	box-shadow: 0 6px 18px rgba(26, 36, 54, .06);
	color: var(--cc-ink);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--cc-teal);
}

.woocommerce-error {
	border-top-color: var(--cc-copper);
}

.woocommerce-error::before {
	color: var(--cc-copper);
}

.woocommerce-message a.button,
.woocommerce-info a.button,
.woocommerce-error a.button {
	padding: 10px 20px;
	font-size: 13px;
}

/* ═════════════════════════════════════════════════════════
 * WOOCOMMERCE CART & CHECKOUT BLOCKS
 * The Cart and Checkout pages use the block versions
 * (wp:woocommerce/cart + wp:woocommerce/checkout), which hydrate
 * via JS into .wc-block-* markup — different from the classic
 * shortcode markup styled above. These rules brand the blocks.
 * ═════════════════════════════════════════════════════════ */

/* Block titles → Fraunces */
.wc-block-components-title,
.wc-block-cart__totals-title,
.wc-block-components-checkout-step__title,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-title {
	font-family: var(--cc-serif) !important;
	color: var(--cc-ink);
	font-weight: 500;
	letter-spacing: -.01em;
}

/* Step numbers (checkout) */
.wc-block-components-checkout-step__heading-content,
.wc-block-components-checkout-step__description {
	color: var(--cc-muted);
}

/* ── Block buttons → navy pill ───────────────────────────── */
.wc-block-components-button:not(.is-link) {
	background-color: var(--cc-navy) !important;
	border: 1.5px solid var(--cc-navy) !important;
	color: var(--cc-cream) !important;
	border-radius: 100px !important;
	font-family: var(--cc-sans);
	font-weight: 600;
	letter-spacing: .02em;
	padding: 16px 30px;
	transition: var(--cc-trans);
	box-shadow: none;
}

.wc-block-components-button:not(.is-link):hover {
	background-color: var(--cc-navy-deep) !important;
	border-color: var(--cc-navy-deep) !important;
	color: var(--cc-cream) !important;
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(31, 58, 107, .3);
}

.wc-block-components-button.wc-block-components-button:not(.is-link) .wc-block-components-button__text {
	color: var(--cc-cream) !important;
}

/* "Proceed to Checkout" + "Place Order" full width */
.wc-block-cart__submit-button,
.wc-block-cart__submit-container .wc-block-components-button,
.wc-block-checkout__actions .wc-block-components-button,
.wc-block-components-checkout-place-order-button {
	width: 100%;
	justify-content: center;
	font-size: 16px;
}

/* Link-style buttons (e.g. "Edit", "Remove") → teal text */
.wc-block-components-button.is-link {
	color: var(--cc-teal);
}

.wc-block-components-button.is-link:hover {
	color: var(--cc-navy);
}

/* ── Block form fields ───────────────────────────────────── */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-text-input input[type="password"],
.wc-block-components-address-form input,
.wc-block-components-select .wc-block-components-select__container,
.wc-block-components-combobox .components-form-token-field__input-container,
.wc-block-components-combobox-control input {
	border: 1px solid var(--cc-line) !important;
	border-radius: var(--cc-r) !important;
	background: #fff;
	font-family: var(--cc-sans);
	color: var(--cc-ink);
}

.wc-block-components-text-input.is-active label,
.wc-block-components-text-input input:focus ~ label {
	color: var(--cc-teal);
}

.wc-block-components-text-input input:focus,
.wc-block-components-address-form input:focus,
.wc-block-components-combobox-control input:focus {
	border-color: var(--cc-teal) !important;
	box-shadow: 0 0 0 2px rgba(63, 170, 168, .18) !important;
	outline: none;
}

/* ── Totals rows ─────────────────────────────────────────── */
.wc-block-components-totals-item__label {
	color: var(--cc-muted);
}

.wc-block-components-totals-item__value {
	color: var(--cc-ink);
	font-weight: 600;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--cc-serif);
	font-size: 22px;
	color: var(--cc-navy);
}

/* ── Sidebar / summary as a card ─────────────────────────── */
.wc-block-cart__sidebar .wc-block-components-totals-wrapper,
.wp-block-woocommerce-checkout-totals-block,
.wc-block-checkout__sidebar > .is-large {
	background: #fff;
	border: 1px solid var(--cc-line);
	border-radius: var(--cc-r-lg);
	padding: 28px;
}

/* ── Cart items table ────────────────────────────────────── */
.wc-block-cart-items__header {
	font-family: var(--cc-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cc-muted);
	border-bottom: 1px solid var(--cc-line);
}

.wc-block-cart-items .wc-block-cart-item__total .wc-block-components-product-price__value,
.wc-block-components-product-name {
	color: var(--cc-ink);
}

a.wc-block-components-product-name:hover {
	color: var(--cc-teal);
}

.wc-block-cart-item__remove-link {
	color: var(--cc-copper);
}

/* Quantity stepper */
.wc-block-components-quantity-selector {
	border: 1px solid var(--cc-line);
	border-radius: 100px;
}

.wc-block-components-quantity-selector__button {
	color: var(--cc-navy);
}

/* ── Radio controls (shipping + payment options) ─────────── */
.wc-block-components-radio-control__option {
	border-radius: var(--cc-r);
}

.wc-block-components-radio-control__input:checked {
	border-color: var(--cc-teal);
	background: var(--cc-teal);
}

.wc-block-components-radio-control-accordion-option--checked-option,
.wc-block-components-radio-control__option-checked {
	border-color: var(--cc-teal);
}

/* Links within blocks */
.wc-block-components-checkout-step a,
.wc-block-components-totals-coupon a,
.wc-block-checkout__main a {
	color: var(--cc-teal);
}

/* ── FOOTER ──────────────────────────────────────────────── */
.cc-site-footer {
	background: var(--cc-footer-bg);
	color: var(--cc-cream);
	padding: 80px 0 32px;
	margin-top: 0;
}

.cc-footer-top {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
	gap: 48px;
	margin-bottom: 64px;
}

.cc-footer-brand .cc-logo img {
	height: 32px;
}

.cc-footer-brand p {
	font-size: 14px;
	line-height: 1.65;
	opacity: .6;
	margin-top: 20px;
	max-width: 300px;
}

.cc-footer-col h4 {
	font-family: var(--cc-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--cc-teal-light);
	margin-bottom: 20px;
}

.cc-footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cc-footer-col li {
	margin-bottom: 12px;
}

.cc-footer-col a {
	font-size: 14px;
	color: var(--cc-cream);
	opacity: .7;
	transition: var(--cc-trans);
}

.cc-footer-col a:hover {
	opacity: 1;
	color: var(--cc-teal-light);
}

.cc-footer-bottom {
	border-top: 1px solid var(--cc-line-lt);
	padding-top: 32px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	font-size: 13px;
	opacity: .5;
}

.cc-footer-bottom a {
	color: var(--cc-cream);
}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1024px) {
	.cc-footer-top {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

@media (max-width: 900px) {
	.cc-container {
		padding: 0 20px;
	}

	.cc-nav .cc-container {
		flex-wrap: wrap;
		gap: 8px;
	}

	.cc-logo picture,
	.cc-logo img {
		height: 36px;
	}

	/* Hamburger */
	.cc-nav-toggle {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 5px;
		width: 40px;
		height: 40px;
		padding: 8px;
		background: transparent;
		border: 0;
		cursor: pointer;
		order: -1;
	}

	.cc-nav-toggle span {
		display: block;
		width: 22px;
		height: 2px;
		background: var(--cc-ink);
		border-radius: 1px;
		transition: transform .2s ease, opacity .2s ease;
	}

	.cc-nav-open .cc-nav-toggle span:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	.cc-nav-open .cc-nav-toggle span:nth-child(2) {
		opacity: 0;
	}

	.cc-nav-open .cc-nav-toggle span:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}

	/* Slide-down drawer */
	.cc-nav-links {
		flex-basis: 100%;
		order: 5;
		flex-direction: column;
		gap: 0;
		max-height: 0;
		overflow: hidden;
		transition: max-height .25s ease;
	}

	.cc-nav-links a {
		display: block;
		padding: 14px 0;
		border-top: 1px solid var(--cc-line);
	}

	.cc-nav-open .cc-nav-links {
		max-height: 600px;
	}

	.cc-footer-top {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}

	.cc-utility-left {
		gap: 12px;
	}
}

@media (max-width: 640px) {
	.cc-utility-bar .cc-container {
		flex-direction: column;
		gap: 8px;
		align-items: center;
	}

	.cc-utility-left {
		flex-direction: column;
		gap: 4px;
		align-items: center;
	}

	.cc-utility-left span::before {
		display: none;
	}

	.cc-mode-toggle {
		display: none;
	}
}