/* ==========================================================================
   Potensic — cart, cart drawer, search page, predictive panel, account, 404
   Spec: docs/spec/09-cart-search.md

   T8 owns a single stylesheet, so everything that belongs to those five
   templates lives here. Ported 1:1 from the source theme's cart-items.css,
   cart-summary.css, predictive-search.css and search-suggestions.css; the
   account / checkout / 404 blocks have no original and are built from tokens.

   Contents
     0. Nested-container guard
     1. Cart page layout            (§2.1)
     2. Empty cart                  (§2.2)
     3. Line items                  (§2.3 – §2.6)
     4. Order summary               (§2.8)
     5. Recommendations carousel    (§2.7)
     6. Cart drawer                 (§3.2)
     7. Search page                 (§4.2 – §4.6)
     8. Predictive search panel     (§5.3)
     9. Account, checkout, 404      (§6)
   ========================================================================== */


/* ==========================================================================
   0. Nested-container guard

   The cart / account templates are rendered inside the page template, which
   already provides .section > .container. Their own container must therefore
   not add a second gutter.
   ========================================================================== */

.container .cc-main-cart > .container,
.container .cc-main-search > .container,
.container .cc-main-404 > .container {
	max-width: none;
	padding-right: 0;
	padding-left: 0;
}

.section .cc-main-cart.section,
.section .cc-main-search.section,
.section .cc-main-404.section {
	margin-top: 0;
	margin-bottom: 0;
}


/* ==========================================================================
   1. Cart page layout (§2.1, cart-summary.css)
   ========================================================================== */

.cart__summary {
	margin-top: calc(12 * var(--space-unit));
	padding-bottom: calc(8 * var(--space-unit));
	border: 1px solid rgba(var(--text-color)/.15);
}
.cart__summary:empty,
.cart__summary[hidden] { display: none; }

.cart.heading--text-start .free-shipping-notice__heading { text-align: start; }

.free-shipping-notice:empty { display: none; }

/* The two-column rules only apply once there are items: in the source theme
   cart-summary.css is not even loaded for an empty cart, so its empty state is
   full width. */
@media (min-width: 850px) {
	.cart--with-items { display: flex; align-items: flex-start; }
	.cart--with-items .cart__items { flex: 1 1 auto; max-width: 50%; }
	.cart--with-items .cart__summary {
		position: sticky;
		top: var(--header-end-padded, 48px);
		flex: 0 0 45%;
		margin-top: 0;
		transition: top .3s;
	}
}

@media (min-width: 1024px) {
	.cart--with-items { column-gap: calc(16 * var(--space-unit)); }
	.cart--with-items .cart__summary { flex: 0 0 35%; width: 416px; }
}

@media (min-width: 1280px) {
	.cart--with-items { column-gap: 144px; }
}

/* No-JS: the hidden "update cart" submit becomes visible so quantities can
   still be saved without the AJAX layer. */
.no-js .no-js-visible {
	position: static !important;
	width: auto !important;
	height: auto !important;
	margin: 16px 0 0 !important;
	overflow: visible !important;
	clip: auto !important;
	clip-path: none !important;
	white-space: normal !important;
}


/* ==========================================================================
   2. Empty cart (§2.2)
   ========================================================================== */

[data-empty=true] .cart-empty svg {
	display: block;
	width: 44px;
	height: 44px;
	margin-bottom: 1em;
}
.cc-main-cart .icon--cart { display: none; }
.cart-empty p { margin: 0 0 1em; }
.cart-empty { text-align: center; }


/* ==========================================================================
   3. Line items (§2.3 – §2.6, cart-items.css)
   ========================================================================== */

cart-items { display: block; position: relative; }

.cart-items { border-collapse: collapse; }
.cart-items tr { border-bottom: 1px solid rgba(var(--text-color)/.15); }
.cart-items td { border: 0; vertical-align: top; }

.cart-item {
	grid-template-columns: 64px auto;
	padding: 2.4rem 0;
	transition: opacity .4s;
}
.pointer-events-none .cart-item { opacity: .3; }
.cart-item:first-child { padding-top: 0; }

.cart-item .price__current { font-size: 1em; }
.cart-item .price__was { font-size: .8em; margin-inline-end: calc(2 * var(--space-unit)); }
.cart-item .backorder { margin-top: calc(3 * var(--space-unit)); font-size: .88em; }
.cart-item .backorder[hidden] { display: none; }

.cart-item__image { grid-column: 1/2; grid-row: 1/4; padding: 0; }
.cart-item__image img { width: 100%; height: auto; max-height: 200px; object-fit: contain; }

.cart-item__details,
.cart-item__qty,
.cart-item__total { grid-column: 2/3; padding: 0; }

.cart-item__title { display: block; text-decoration: none; }
.cart-item__info { padding-top: calc(2 * var(--space-unit)); }
.cart-item__info .price__current { padding-inline-end: .5rem; }
.cart-item__variants dl { margin: calc(2 * var(--space-unit)) 0 0; }
.cart-item__variants dd { margin: 0; }

.cart-item__qty quantity-input { margin-inline-end: calc(2 * var(--space-unit)); }
.cart-item__qty .qty-input--combined .qty-input__btn,
.cart-item__qty .qty-input__input { height: calc(14px + 2rem); }
.cart-item__qty .qty-input__input {
	-moz-appearance: textfield;
	appearance: textfield;
}
.cart-item__qty .qty-input__input::-webkit-outer-spin-button,
.cart-item__qty .qty-input__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
}

.cart-item__total { padding-top: calc(4 * var(--space-unit)); }

.cart-item__loader { position: absolute; z-index: 1; top: 50%; left: 50%; margin-top: -20px; }
.cart-item__loader.is-loading { width: 20px; margin-inline-start: calc(6 * var(--space-unit)); }
/* The 20px spinner itself comes from the global `.is-loading:after` rule in
   base.css, exactly as it does in the source theme's main.css. */

.cart-item__remove { flex: 0 0 auto; transition: color .3s; }
.cart-item__remove path { transform-origin: 50% 55%; transition: transform .2s; }
.cart-item__remove:hover { color: rgb(var(--link-color-og, var(--text-color))); }
.cart-item__remove:hover path:nth-child(2) { transform: scaleX(-1); }

.cart-item__error[hidden] { display: none; }

.cart:has([data-empty=true]) .cart__shipping-calculator { display: none; }

@media (min-width: 769px) {
	.cart-item { grid-template-columns: 112px auto auto; }
	.cart-item__details,
	.cart-item__qty { grid-column: 2/3; }
	.cart-item__total {
		grid-column: 3/4;
		grid-row: 1/4;
		padding-top: 0;
		text-align: end;
	}
	.cart-item__total .price__current { padding-inline-end: 0; }
	.cart-item__qty { grid-row: 3/4; margin-top: 0; }
}


/* ==========================================================================
   4. Order summary (§2.8)
   ========================================================================== */

.cart__summary .h5 { margin-bottom: .5em; }
.cart-note-disclosure > summary { cursor: pointer; list-style: none; }
.cart-note-disclosure > summary::-webkit-details-marker { display: none; }
.cart-note-disclosure textarea.input {
	border-radius: var(--textarea-border-radius, 12px);
	resize: vertical;
}
.cart__summary .checkout-button { display: flex; align-items: center; justify-content: center; }
.dynamic-cart-btns:empty { display: none; }
.dynamic-cart-btns .wc-proceed-to-checkout { padding: 0; margin: 0; }


/* ==========================================================================
   5. Recommendations carousel (§2.7)
   ========================================================================== */

.cart-page-recommendations:empty { display: none; }
/* The source theme only outputs the block when the cart has items; after the
   last line is removed over AJAX the placeholder must collapse too. */
.cart:has([data-empty=true]) .cart-page-recommendations { display: none; }
.cart-recommendations .price__current { font-size: 1em; }
.cart-recommendations .price__was { font-size: .8em; }
.cart-recommendations .slider-nav { right: 0; }
.cart-recommendations .card--related { margin-top: 0; }
.cart-recommendations .card__info { min-width: 0; }
.cart-recommendations .card__info .h6 { overflow-wrap: anywhere; }

@media (min-width: 850px) and (max-width: 1279px) {
	.cart-page-recommendations .slider__grid { grid-auto-columns: 100%; }
}


/* ==========================================================================
   6. Cart drawer (§3.2)
   ========================================================================== */

cart-drawer { display: block; }

.drawer {
	visibility: hidden;
	z-index: 40;
	max-width: 540px;
	height: var(--viewport-height, 100vh);
	overflow: auto;
	transform: translate3d(100%, 0, 0);
	transition: visibility 0s .6s, transform .7s cubic-bezier(.19, 1, .22, 1);
	background-color: rgba(var(--drawer-bg-color));
	color: rgb(var(--drawer-text-color));
}
.drawer[open] {
	visibility: visible;
	transform: translateZ(0);
	transition: visibility 0s 0s, transform .7s cubic-bezier(.19, 1, .22, 1);
}
.drawer:not(.facets) {
	border-radius: var(--drawer-border-radius) 0 0 var(--drawer-border-radius);
	box-shadow: -2px 1px 10px 2px #0003;
}
.drawer[aria-modal] {
	--bg-color: var(--drawer-bg-color);
	--heading-color: var(--drawer-text-color);
	--text-color: var(--drawer-text-color);
}
.drawer__header {
	justify-content: space-between;
	border-bottom: 1px solid rgba(var(--drawer-text-color)/.2);
}
.drawer__header,
.drawer__footer,
.drawer__content,
.cart-drawer__summary { padding: var(--gutter); }

.drawer--cart .drawer__header {
	position: sticky;
	z-index: 4;
	top: 0;
	background-color: rgba(var(--bg-color));
}
.drawer--cart .drawer__content { padding: 0; }
.cart-drawer__content { padding: var(--gutter); }
.cart-drawer__summary { background-color: rgba(var(--drawer-bg-color)); }

.drawer__footer {
	z-index: 5;
	transform: translate3d(0, 100%, 0);
	transition: transform 0s .4s, opacity .7s;
	opacity: 0;
	box-shadow: 0 -2px 8px rgba(var(--drawer-text-color)/.08);
}
[open] > .drawer__footer:not(.drawer__footer--out),
[open] > .cart-drawer__summary:not(.drawer__footer--out) {
	transform: translateZ(0);
	transition: transform .4s cubic-bezier(.165, .84, .44, 1) .2s, opacity .7s;
	opacity: 1;
}
.cart-drawer__summary[hidden] { display: none; }

.drawer--cart .cart-item__qty {
	--input-bg-color: var(--drawer-bg-color);
	--input-text-color: var(--drawer-text-color);
}
.drawer--cart .cart-item { grid-template-columns: 64px auto; }
.drawer--cart .cart-item__total { grid-column: 2/3; grid-row: auto; padding-top: calc(4 * var(--space-unit)); text-align: start; }
.drawer--cart .cart-empty { padding: calc(12 * var(--space-unit)) 0; }

@media (min-width: 769px) {
	.drawer__header,
	.drawer__footer,
	.drawer__content,
	.cart-drawer__content,
	.cart-drawer__summary { padding: calc(6 * var(--space-unit)) calc(8 * var(--space-unit)); }
	.drawer--cart .drawer__content { padding: 0; }
	/* The drawer keeps the narrow two-column row, so the line total needs the
	   "Subtotal" label that the wide cart table drops above 769px. */
	.drawer--cart .cart-item__total > .md\:hidden { display: block; }
}

@media (max-width: 767px) {
	.drawer {
		top: auto;
		bottom: 0;
		height: calc(var(--viewport-height, 100vh) - 100px);
		transform: translate3d(0, 100%, 0);
	}
	.drawer:not(.facets) { border-radius: var(--drawer-border-radius) var(--drawer-border-radius) 0 0; }
}


/* ==========================================================================
   7. Search page (§4.2 – §4.6)
   ========================================================================== */

.cc-main-search .search { margin: 0; }
.cc-main-search .search__input { padding-inline-end: 95px; }
.cc-main-search h1 { margin-bottom: .5em; }

.search__submit {
	position: absolute;
	top: calc(50% - 22px);
	min-height: 44px;
	padding: 12px 24px;
	padding-inline-end: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.search__submit.start { left: 0; }
.search__speech.end { right: 0; }

@media (max-width: 768.98px) {
	.search__submit { padding-inline-start: 20px; }
}

/* Toolbar (sort + view as) */
.products-toolbar { gap: calc(3 * var(--space-unit)); }
.products-toolbar__form { gap: calc(3 * var(--space-unit)); }
.products-toolbar__sort { gap: calc(2 * var(--space-unit)); }
.products-toolbar__sort .label { white-space: nowrap; }
.products-toolbar__select { padding-top: 8px; padding-bottom: 8px; }
.products-toolbar__layout { gap: calc(2 * var(--space-unit)); }
.products-toolbar__view { opacity: .4; transition: opacity .2s; }
.products-toolbar__view.is-active,
.products-toolbar__view:hover { opacity: 1; }

.cc-main-search hr { margin: 0 0 calc(8 * var(--space-unit)); border: 0; border-top: 1px solid rgba(var(--text-color)/.15); }

/* base.css declares `.wp-block-image img,.wp-post-image{height:auto}` after
   `.img-fit`, so every WordPress featured image inside a fixed-ratio .media
   box collapses to its natural height. Same specificity, later rule wins —
   this raises the specificity just enough to restore the crop. */
.img-fit.wp-post-image { position: absolute; height: 100%; object-fit: cover; }

/* Result cards */
.cc-main-search .card { max-width: 768px; margin: 0 auto; }
.cc-main-search .card--page .card__info { padding-top: 0; }
.cc-main-search .card--page .card__title { margin-bottom: .5em; }
.cc-main-search .card__title { margin-bottom: .5em; }
.cc-main-search .card--article .card__media { display: block; }

.main-products-grid--contained { flex-wrap: wrap; }
.main-products-grid__results { min-width: 0; }

/* List layout (View as → List) */
.cc-main-search .main-products-grid[data-layout=list] .grid { grid-template-columns: 1fr; }
.cc-main-search .main-products-grid[data-layout=list] .card--product { flex-direction: row; }
.cc-main-search .main-products-grid[data-layout=list] .card--product .card__media { flex: 0 0 33%; }
.cc-main-search .main-products-grid[data-layout=list] .card--product .card__info { padding-top: 0; padding-inline-start: calc(6 * var(--space-unit)); }

/* Pagination (§4.6) */
.pagination__page-current {
	padding: 8px 14px;
	background: linear-gradient(to top, currentColor 2px, transparent 2px) no-repeat center bottom/1.3em;
}
.pagination__page-link { padding: 8px 14px; color: rgba(var(--text-color)/.8); }
.pagination__page-link:hover { background: linear-gradient(to top, currentColor 2px, transparent 2px) no-repeat center bottom/1.3em; }
.pagination__nav-link { display: inline-block; padding: 8px 14px; }
.pagination__nav-link[aria-disabled=true] { opacity: .4; }
.pagination__mobile { font-weight: 700; }

@media (min-width: 1280px) {
	.pagination__nav-link { padding: 0 26px; }
	.pagination__prev { margin-inline-end: calc(8 * var(--space-unit)); }
	.pagination__next { margin-inline-start: calc(8 * var(--space-unit)); }
}


/* ==========================================================================
   8. Predictive search panel (§5.3)

   The panel's position and background live in header.css (it anchors to the
   header field). Everything below is the panel body, which T8 renders.
   ========================================================================== */

.predictive-search__loading { padding: 16px var(--gutter) 24px; color: rgba(var(--text-color)/.6); }
.predictive-search__no-results { padding: 16px var(--gutter) 24px; }
.predictive-search__scroller { overflow-y: auto; }
.predictive-search__results { display: flex; flex-direction: column; }
.predictive-search__tabpanel { margin-top: 8px; }
.predictive-search__tabpanel[hidden] { display: none; }

.predictive-search .tablist { background-color: rgba(var(--bg-color)); }
.predictive-search .tablist__scroller { margin-inline-start: var(--gutter); padding: 8px 0; }

.predictive-search .tablist__tab {
	border: 0;
	background: none;
	font-weight: 700;
	cursor: pointer;
}

.predictive-search__list { margin: 0; padding: 0; list-style: none; }

.predictive-result { display: flex; align-items: flex-start; text-decoration: none; }
.predictive-result__list-suggestions > h3 { padding: 8px 0; }
.predictive-result__title { margin: 0 0 4px; }
.predictive-result__title:last-child { margin-bottom: 0; }
.predictive-result__sub-title { margin-top: .4rem; margin-bottom: 0; color: rgba(var(--text-color)/.8); font-size: .88em; }
.predictive-result__info { min-width: 0; }
.predictive-result__info .price__current { font-size: 1.6rem; font-weight: 400; }
.predictive-result__info .price__was { font-size: 1.3rem; }
.predictive-result--suggestion { display: block; }
.predictive-result mark { background: transparent; color: inherit; font-weight: 700; }
.predictive-result span { font-weight: 400; }

.predictive-search__view-all {
	display: block;
	width: 100%;
	border: 0;
	background: none;
	font-weight: 700;
	text-align: start;
	cursor: pointer;
}
.predictive-search__view-all > .icon { width: 16px; margin-inline-start: 8px; vertical-align: middle; }

.cc-main-search .predictive-result__title { font-size: 1em; }

@media (min-width: 769px) {
	.predictive-search .tablist__scroller { margin-inline-start: var(--gutter-md); }
}

@media (max-width: 768.98px) {
	.predictive-search__scroller--suggestions { margin-top: 16px; }
	predictive-search .tablist { top: -1px; }
}

/* Below 769px header.css lets the panel bleed to 100vw, which is right for the
   full-width header field but overflows the centred 416px field on the search
   and 404 pages once the container is wider than it is. */
@media (min-width: 600px) and (max-width: 768.98px) {
	.cc-main-search .predictive-search,
	.cc-main-404 .predictive-search {
		left: -12px;
		width: calc(100% + 24px);
	}
}


/* ==========================================================================
   9. Account, checkout, 404 (§6)

   No original exists for these — they are laid out with the theme's tokens so
   they read as part of the same store.
   ========================================================================== */

.account { display: block; }
.account__nav-list { margin: 0; padding: 0; list-style: none; }
.account__nav-list li { border-bottom: 1px solid rgba(var(--text-color)/.15); }
.account__nav-list li:first-child { border-top: 1px solid rgba(var(--text-color)/.15); }
.account__nav-list a { display: block; padding: 14px 0; text-decoration: none; }
.account__nav-list .is-active > a,
.account__nav-list li[class*="--active"] > a { font-weight: 700; }
.account__content { min-width: 0; }
.account__content table { width: 100%; border-collapse: collapse; }
.account__content th,
.account__content td { padding: 12px 8px; border-bottom: 1px solid rgba(var(--text-color)/.15); text-align: start; }

@media (min-width: 850px) {
	.account { display: flex; align-items: flex-start; }
	.account__nav { flex: 0 0 25%; }
	.account__content { flex: 1 1 auto; }
}

.account-forms { display: grid; gap: calc(10 * var(--space-unit)); }
.account-forms--single { max-width: 26em; margin: 0 auto; }
.account-form .form-row { margin: 0 0 calc(5 * var(--space-unit)); }
.account-form .label { display: block; margin-bottom: calc(2 * var(--space-unit)); }
.account-form .h5 { margin-bottom: calc(5 * var(--space-unit)); }
.account-form input[type=checkbox] { margin-inline-end: 8px; }

@media (min-width: 769px) {
	.account-forms--split { grid-template-columns: 1fr 1fr; gap: calc(16 * var(--space-unit)); }
}

.checkout__summary .shop_table { width: 100%; border-collapse: collapse; }
.checkout__summary .shop_table th,
.checkout__summary .shop_table td {
	padding: 10px 0;
	border: 0;
	border-bottom: 1px solid rgba(var(--text-color)/.15);
	text-align: start;
	vertical-align: top;
}
.checkout__summary .shop_table th:last-child,
.checkout__summary .shop_table td:last-child {
	width: 1%;
	padding-inline-start: calc(4 * var(--space-unit));
	text-align: end;
	white-space: nowrap;
}
.checkout__summary .shop_table .variation { margin: 4px 0 0; font-size: .88em; }
.checkout__summary .shop_table .variation dt,
.checkout__summary .shop_table .variation dd { display: inline; margin: 0; }
.checkout__summary .shop_table .variation dd p { display: inline; margin: 0; }
.checkout__summary .shop_table .variation dd:after { content: ""; display: block; }
.checkout__summary .woocommerce-shipping-totals th { font-weight: 700; }
.checkout .form-row { margin: 0 0 calc(5 * var(--space-unit)); }
.checkout .form-row label { display: block; margin-bottom: calc(2 * var(--space-unit)); }
.checkout .input-text,
.checkout select,
.checkout textarea { width: 100%; }
.checkout #place_order { width: 100%; }
.checkout .col2-set { display: grid; gap: calc(8 * var(--space-unit)); }

@media (min-width: 769px) {
	.checkout .col2-set { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 850px) {
	.cc-main-checkout .cart__items { max-width: 55%; }
	.cc-main-checkout .cart__summary { flex: 0 0 40%; }
}

.cc-main-404 p { margin-bottom: 0; }