/*
 * PearlUAE – WordPress & WooCommerce layer on top of the Impact design system (theme.css).
 * Everything here reuses Impact's CSS custom properties so Customizer colors/radius apply everywhere.
 */

/* ------------------------------------------------------------------------------------------------------------------
 * WordPress core
 * ---------------------------------------------------------------------------------------------------------------- */

.screen-reader-text {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  white-space: nowrap;
  position: absolute !important;
  overflow: hidden;
}

.screen-reader-text:focus {
  clip: auto;
  clip-path: none;
  width: auto;
  height: auto;
  z-index: 100000;
  padding: var(--spacing-3);
  background: rgb(var(--background-primary));
}

.alignleft { float: left; margin-inline-end: var(--spacing-6); }
.alignright { float: right; margin-inline-start: var(--spacing-6); }
.aligncenter { margin-inline: auto; display: block; }
.wp-caption-text, .wp-element-caption { font-size: var(--text-sm); color: rgb(var(--text-color) / .7); }

.prose :is(.wp-block-image, .wp-block-gallery, figure) img { border-radius: var(--rounded-sm); }

/*
 * Block editor (Gutenberg) content inside Impact's .prose text column.
 */
body { overflow-x: clip; }

/* Buttons look like Impact buttons (the .prose link underline would otherwise replace their background). */
.prose a:is(.wp-block-button__link, .wp-element-button) {
	background: rgb(var(--button-background-primary));
	color: rgb(var(--button-text-primary));
	border-radius: var(--rounded-button);
	font-size: var(--text-sm);
	font-weight: bold;
	line-height: 1.6;
	padding: var(--spacing-2-5) var(--spacing-5);
	transition: opacity .15s ease-in-out;
}
.prose a:is(.wp-block-button__link, .wp-element-button):hover { opacity: .85; }
.prose .is-style-outline > a.wp-block-button__link { background: transparent; color: currentColor; box-shadow: inset 0 0 0 2px currentColor; }
.prose .wp-block-buttons { gap: var(--spacing-3); }

/* Columns: no stacked-paragraph margin on the second column. */
.prose .wp-block-columns > .wp-block-column { margin-block-start: 0; }
.prose .wp-block-column > :first-child { margin-block-start: 0; }

/* Wide and full width blocks break out of the text column. */
.prose > .alignwide { width: auto; max-width: none; margin-inline: calc((min(100vw - 2 * var(--container-gutter), 1200px) - 100%) / -2); }
.prose > .alignfull { width: auto; max-width: none; margin-inline: calc(50% - 50vw); border-radius: 0; }
.prose > .alignfull img { border-radius: 0; }

/* Blocks with a background color get breathing room, like Impact's boxed sections. */
.prose :is(.wp-block-group, .wp-block-columns, .wp-block-column).has-background { padding: var(--spacing-8) var(--spacing-10); border-radius: var(--rounded); }
.prose > .alignfull.has-background { padding-inline: var(--container-gutter); border-radius: 0; }
.prose .wp-block-cover { border-radius: var(--rounded); }
.prose > .wp-block-cover.alignfull { border-radius: 0; }

/*
 * Consistent card shapes. In Impact these follow each image's own proportions (the demo store uses photos shot to
 * the same shape); fixed ratios (the demo's) keep the layout steady whatever photos are uploaded. Images are cropped
 * to fill.
 */
.image-link-blocks__item .content-over-media { aspect-ratio: 1; }
.collection-card .content-over-media { aspect-ratio: 8 / 9; }
:is(.image-link-blocks__item, .collection-card) .content-over-media > :is(img, picture, .placeholder) { width: 100%; height: 100%; object-fit: cover; }
.multiple-images-with-text__image-list > img { aspect-ratio: 5 / 6; object-fit: cover; }
.timeline__image-wrapper > :is(img, .placeholder) { aspect-ratio: 1; width: 100%; height: auto; object-fit: cover; }
/* Keep the whole timeline (image, text and navigation) within the screen height on wide screens. */
@media screen and (min-width: 1000px) {
	.timeline__image-wrapper > :is(img, .placeholder) { max-width: max(320px, 100svh - 410px); }
}
.blog-post-card:not(.blog-post-card--featured) .blog-post-card__figure > :is(img, .placeholder) { aspect-ratio: 3 / 2; width: 100%; height: auto; object-fit: cover; }
.multi-column__item img.rounded { aspect-ratio: 1; width: 100%; height: auto; object-fit: cover; }

/*
 * Impact's .object-fill images (e.g. the product card hover image) cover their container at height 100%; WooCommerce's
 * ".woocommerce-page img { height: auto }" would otherwise give them their natural height and let them spill over the
 * card.
 */
html img.object-fill { height: 100%; max-width: none; }

/* Mega menu featured product: full-width info so short product names are centered too. */
.navigation-promo .product-card__info { width: 100%; }

/* Pages built with Elementor take the full page width (the builder handles its own layout). */
.pearl-builder-content { width: 100%; }

.page-links, .pearl-post-navigation .nav-links {
  gap: var(--spacing-4);
  justify-content: space-between;
  display: flex;
}

.pearl-post-navigation .nav-links > div { display: grid; gap: var(--spacing-1); }
.pearl-post-navigation .nav-next { text-align: end; margin-inline-start: auto; }

.pearl-hp { position: absolute; left: -9999px; }

/* Comments */
.pearl-comments__list, .pearl-comments__list .children { list-style: none; padding: 0; }
.pearl-comments__list .children { margin-inline-start: var(--spacing-8); }
.pearl-comments .comment-body { padding-block: var(--spacing-4); border-bottom: 1px solid rgb(var(--border-color)); }
.pearl-comments .comment-meta { display: flex; gap: var(--spacing-3); align-items: center; font-size: var(--text-sm); }
.pearl-comments .avatar { border-radius: var(--rounded-full); }

/* ------------------------------------------------------------------------------------------------------------------
 * Forms (WordPress & WooCommerce fields get the Impact input look)
 * ---------------------------------------------------------------------------------------------------------------- */

:is(.woocommerce, .woocommerce-page, .pearl-comments, .pearl-wc-page) :is(
  input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"],
  input[type="search"], input[type="url"], input[type="date"], textarea, select
):not(.quantity-selector__input):not(.quantity-input):not(.input):not(.textarea) {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-height: var(--input-height);
  border-radius: var(--rounded-input);
  background: rgb(var(--input-background, transparent));
  color: rgb(var(--input-text-color, var(--text-color)));
  border: 1px solid rgb(var(--border-color));
  padding-inline: var(--input-padding-inline);
  font-size: var(--text-base);
}

:is(.woocommerce, .woocommerce-page, .pearl-comments) textarea {
  padding-block: var(--spacing-3);
  min-height: 8rem;
}

:is(.woocommerce, .woocommerce-page, .pearl-comments) select:not([multiple]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' viewBox='0 0 12 8'%3E%3Cpath stroke='%23888' stroke-width='1.5' d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--input-padding-inline) center;
  padding-inline-end: calc(var(--input-padding-inline) * 2.5);
}

[dir="rtl"] :is(.woocommerce, .woocommerce-page) select:not([multiple]) {
  background-position: left var(--input-padding-inline) center;
}

:is(.woocommerce, .woocommerce-page, .pearl-comments) :is(input, textarea, select):not(.input):not(.textarea):focus {
  border-color: currentColor;
  outline: none;
  box-shadow: inset 0 0 0 1px;
}

.woocommerce form .form-row,
.woocommerce-page form .form-row {
  margin-block-end: var(--spacing-4);
  padding: 0;
}

.woocommerce form .form-row label,
.pearl-comments label {
  display: block;
  margin-block-end: var(--spacing-1-5);
  font-size: var(--text-sm);
  font-weight: bold;
}

.woocommerce form .form-row .required { color: rgb(var(--error-text)); text-decoration: none; }
.woocommerce form .form-row.woocommerce-invalid :is(input, select) { border-color: rgb(var(--error-text)); }

.woocommerce form .form-row label.checkbox,
.woocommerce form .form-row .woocommerce-form__label-for-checkbox { display: flex; gap: var(--spacing-2); align-items: center; font-weight: normal; }

.woocommerce form :is(input[type="checkbox"], input[type="radio"]):not(.switch) { width: auto; accent-color: rgb(var(--accent)); }

/* Buttons generated by WooCommerce already carry the "button" class: just normalise the extra states. */
.woocommerce :is(a, button, input).button { cursor: pointer; border: 0; }
.woocommerce :is(a, button, input).button:is(.disabled, :disabled) { opacity: .5; cursor: not-allowed; }
.woocommerce :is(a, button).button.loading,
.button.is-loading { opacity: .6; pointer-events: none; }
.woocommerce a.added_to_cart { display: none !important; }
.woocommerce .onsale { display: none; }

/* ------------------------------------------------------------------------------------------------------------------
 * Notices
 * ---------------------------------------------------------------------------------------------------------------- */

.woocommerce-notices-wrapper:not(:empty) {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
  margin-block: var(--spacing-6);
}

:is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .pearl-form-errors) {
  --banner-background: var(--success-background);
  --banner-color: var(--success-text);
  list-style: none;
  border-radius: var(--rounded-xs);
  font-size: var(--text-sm);
  color: rgb(var(--banner-color));
  background: rgb(var(--banner-background));
  padding: var(--spacing-3-5) var(--spacing-4);
  margin: 0 0 var(--spacing-4);
  gap: var(--spacing-3);
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

:is(.woocommerce-message, .woocommerce-info, .woocommerce-error) .button {
  order: 2;
  --button-background: var(--banner-color);
  font-size: var(--text-xs);
  padding-block: var(--spacing-1-5);
}

.woocommerce-info { --banner-background: var(--text-primary) / .05; --banner-color: var(--text-primary); }
.woocommerce-error, .pearl-form-errors { --banner-background: var(--error-background); --banner-color: var(--error-text); display: grid; }
.woocommerce-error li { margin: 0; }

/* ------------------------------------------------------------------------------------------------------------------
 * Product lists rendered by WooCommerce shortcodes/blocks outside of theme sections
 * ---------------------------------------------------------------------------------------------------------------- */

.product-list.products {
  list-style: none;
  margin: 0;
  padding: 0;
}

.product-list.products::before, .product-list.products::after { display: none; }

:not(.shopify-section) > reveal-items > .product-list.products,
.prose .product-list.products {
  --product-list-grid: auto-flow dense / repeat(var(--product-list-items-per-row, 2), minmax(0, 1fr));
  --product-list-gap: var(--product-list-row-gap) var(--product-list-column-gap);
}

@media screen and (min-width: 1000px) {
  .prose .product-list.products,
  :not(.shopify-section) > reveal-items > .product-list.products { --product-list-items-per-row: 4; }
}

.prose product-card a { text-decoration: none; }

/* ------------------------------------------------------------------------------------------------------------------
 * Shop page
 * ---------------------------------------------------------------------------------------------------------------- */

.collection-header { padding-block: var(--spacing-12) 0; text-align: center; }
.pearl-collection-description { max-width: 75ch; margin: var(--spacing-8) auto 0; text-align: center; }

.collection__top-bar .facets-summary { justify-content: space-between; align-items: center; display: flex; }
.woocommerce-result-count { margin: 0; }
.woocommerce-ordering { margin: 0; }
.woocommerce-ordering select { width: auto !important; min-width: 220px; }

.facets__floating-filter { z-index: 2; position: sticky; bottom: var(--spacing-5); justify-self: center; }
.pearl-mobile-sort { justify-self: center; }

.collection__pagination { grid-column: 1 / -1; }
.collection__pagination .pagination { margin-block-start: var(--spacing-10); }
.woocommerce-pagination { display: none; }

.pearl-facets { display: grid; gap: var(--spacing-8); }
.pearl-filter__title { margin-block-end: var(--spacing-4); }
.pearl-facets ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spacing-2-5); }
.pearl-facets ul ul { margin-inline-start: var(--spacing-4); margin-block-start: var(--spacing-2-5); }
.pearl-facets a { color: rgb(var(--text-color) / .7); transition: color .2s; }
.pearl-facets a:hover, .pearl-facets .current-cat > a, .pearl-facets .chosen a { color: rgb(var(--text-color)); }
.pearl-facets .count { font-size: var(--text-xs); color: rgb(var(--text-color) / .6); }
[data-pearl-facets-mobile] .pearl-facets { padding-block: var(--spacing-2); }

/* Price filter widget (jQuery UI slider) */
.price_slider_wrapper .price_slider { position: relative; height: 4px; margin: var(--spacing-3) var(--spacing-2) var(--spacing-6); background: rgb(var(--text-color) / .12); border-radius: 4px; }
.price_slider_wrapper .ui-slider-range { position: absolute; height: 100%; background: rgb(var(--text-color)); border-radius: 4px; }
.price_slider_wrapper .ui-slider-handle { position: absolute; top: 50%; width: 16px; height: 16px; margin-inline-start: -8px; transform: translateY(-50%); background: rgb(var(--background-primary)); border: 2px solid rgb(var(--text-color)); border-radius: 50%; cursor: grab; outline: none; }
.price_slider_amount { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-3); font-size: var(--text-sm); }
.price_slider_amount input { display: none; }
.price_slider_amount .button { font-size: var(--text-xs); padding-block: var(--spacing-1-5); }

/* Block-based filters */
.pearl-facets .wc-block-components-checkbox-list, .pearl-facets .wc-block-product-filter-checkbox-list__items { gap: var(--spacing-2-5); }

/* ------------------------------------------------------------------------------------------------------------------
 * Star rating (replacement for WooCommerce's icon font)
 * ---------------------------------------------------------------------------------------------------------------- */

.star-rating {
  --percent: 0%;
  position: relative;
  display: inline-block;
  font-size: var(--text-sm);
  line-height: 1;
  letter-spacing: 2px;
  color: rgb(var(--text-color) / .2);
  overflow: hidden;
  width: 5.6em;
}

.star-rating::before { content: "★★★★★"; }
.star-rating > span { position: absolute; inset: 0 auto 0 0; overflow: hidden; color: rgb(var(--star-color)); padding-top: 1.5em; }
.star-rating > span::before { content: "★★★★★"; position: absolute; top: 0; inset-inline-start: 0; }
.star-rating > span strong, .star-rating > span .rating, .star-rating > span::after { font-size: 0; }

p.stars { display: inline-flex; gap: var(--spacing-1); margin-block: var(--spacing-2); }
p.stars a { position: relative; width: 1.25em; height: 1.25em; font-size: var(--text-lg); text-indent: -999em; overflow: hidden; display: inline-block; }
p.stars a::before { content: "★"; position: absolute; inset: 0; text-indent: 0; color: rgb(var(--text-color) / .25); line-height: 1; }
p.stars:hover a::before, p.stars.selected a::before { color: rgb(var(--star-color)); }
p.stars:hover a:hover ~ a::before, p.stars.selected a.active ~ a::before { color: rgb(var(--text-color) / .25); }
p.stars.selected a.active::before { color: rgb(var(--star-color)); }

/* ------------------------------------------------------------------------------------------------------------------
 * Product page
 * ---------------------------------------------------------------------------------------------------------------- */

.product-info .cart:not(.variations_form), .product-info .variations_form, .product-info .woocommerce-variation-add-to-cart {
  margin: 0;
}

.product-info form.cart { display: grid; gap: var(--spacing-6); }

.pearl-buy-row {
  gap: var(--spacing-3);
  align-items: stretch;
  display: flex;
}

.pearl-buy-row .quantity { flex-shrink: 0; }
.pearl-buy-row .quantity-selector { height: 100%; }
.pearl-buy-row .single_add_to_cart_button { flex: 1 1 auto; }

.product-info .single_add_to_cart_button {
  --button-background: var(--button-background-secondary) / var(--button-background-opacity, 1);
  --button-text-color: var(--button-text-secondary);
  --button-outline-color: var(--button-background-secondary);
  font-size: var(--text-base);
  padding-block: var(--spacing-4);
  padding-inline: var(--spacing-8);
}

.product-info .single_add_to_cart_button.disabled { opacity: .5; }

.product-info .variations { display: grid; gap: var(--spacing-6); border: 0; margin: 0; }
.variant-picker__option { border: 0; padding: 0; margin: 0; min-width: 0; }
.variant-picker__option legend { float: left; padding: 0; }
.variant-picker__option-info { justify-content: space-between; align-items: center; display: flex; }
.pearl-variation-select { display: none; }
.reset_variations { visibility: hidden; }
.reset_variations[style*="visible"] { visibility: visible; }
.woocommerce-variation-price { display: none; }
.woocommerce-variation-description { font-size: var(--text-sm); }
.woocommerce-variation-availability .stock, .product-info .stock { font-size: var(--text-sm); margin: 0; }
.product-info .stock.in-stock { color: rgb(var(--success-text)); }
.product-info .stock.out-of-stock { color: rgb(var(--error-text)); }
.single_variation_wrap { display: grid; gap: var(--spacing-4); }
.woocommerce-variation.single_variation:empty { display: none; }

.product-info form.grouped_form table { width: 100%; border-collapse: collapse; }
.product-info form.grouped_form td { padding-block: var(--spacing-2); vertical-align: middle; }

.product-info__accordion .prose > :first-child { margin-block-start: 0; }
.pearl-tab h2:first-child { display: none; }
.woocommerce-product-attributes { width: 100%; border-collapse: collapse; }
.woocommerce-product-attributes :is(th, td) { padding: var(--spacing-2) 0; text-align: start; border-bottom: 1px solid rgb(var(--border-color)); vertical-align: top; }
.woocommerce-product-attributes p { margin: 0; }

#reviews .commentlist { list-style: none; padding: 0; display: grid; gap: var(--spacing-6); }
#reviews .commentlist li .comment_container { display: flex; gap: var(--spacing-4); }
#reviews .commentlist li img.avatar { width: 48px; height: 48px; border-radius: var(--rounded-full); }
#reviews .comment-text { flex: 1; }
#reviews .comment-text .meta { font-size: var(--text-sm); color: rgb(var(--text-color) / .7); }
#review_form .comment-reply-title { font-weight: bold; display: block; margin-block-end: var(--spacing-3); }
#review_form .form-submit input { margin-block-start: var(--spacing-3); }

/* Theme-generated price list in the WooCommerce price markup, if a plugin uses it. */
.price del { opacity: .6; }
.price ins { text-decoration: none; }

/* ------------------------------------------------------------------------------------------------------------------
 * Cart drawer
 * ---------------------------------------------------------------------------------------------------------------- */

.pearl-line-quantity { align-items: center; }
.line-item.is-loading { opacity: .5; pointer-events: none; }
.line-item__info .pearl-line-quantity { margin-block-start: var(--spacing-1); }
.line-item .variation { display: none; }

/* ------------------------------------------------------------------------------------------------------------------
 * Cart, checkout & account pages
 * ---------------------------------------------------------------------------------------------------------------- */

.pearl-wc-page { max-width: var(--container-max-width); margin-inline: auto; display: grid; gap: var(--spacing-8); }
.pearl-wc-page > h1 { margin-block-end: var(--spacing-2); }
.woocommerce-checkout .pearl-wc-page > h1, .woocommerce-cart .pearl-wc-page > h1 { font-size: var(--text-h2); }

.woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid rgb(var(--border-color));
  border-radius: var(--rounded-sm);
  overflow: hidden;
  font-size: var(--text-sm);
}

.woocommerce table.shop_table :is(th, td) {
  padding: var(--spacing-3) var(--spacing-4);
  border-bottom: 1px solid rgb(var(--border-color));
  text-align: start;
  vertical-align: middle;
}

.woocommerce table.shop_table thead th { font-weight: bold; background: rgb(var(--text-color) / .04); }
.woocommerce table.shop_table img { width: 64px; border-radius: var(--rounded-xs); }
.woocommerce table.shop_table .product-remove a { font-size: 1.5em; line-height: 1; color: rgb(var(--text-color) / .6); }
.woocommerce table.cart td.actions { text-align: end; }
.woocommerce table.cart td.actions .coupon { display: inline-flex; gap: var(--spacing-2); float: inline-start; }
.woocommerce table.cart td.actions .coupon .input-text { width: 180px; }
.woocommerce .cart-collaterals { margin-block-start: var(--spacing-8); }
.woocommerce .cart_totals h2 { font-size: var(--text-h4); margin-block-end: var(--spacing-4); }
.woocommerce .wc-proceed-to-checkout .checkout-button { width: 100%; font-size: var(--text-base); padding-block: var(--spacing-4); }

.woocommerce-checkout #payment {
  background: rgb(var(--text-color) / .04);
  border-radius: var(--rounded-sm);
  padding: var(--spacing-5);
}

.woocommerce-checkout #payment ul.payment_methods { list-style: none; padding: 0; margin: 0 0 var(--spacing-4); display: grid; gap: var(--spacing-3); }
.woocommerce-checkout #payment div.payment_box { font-size: var(--text-sm); padding: var(--spacing-3); border-radius: var(--rounded-xs); background: rgb(var(--background-primary)); margin-block-start: var(--spacing-2); }
.woocommerce-checkout #place_order { width: 100%; }

.woocommerce-account .woocommerce { display: grid; gap: var(--spacing-8); }

@media screen and (min-width: 1000px) {
  .woocommerce-account .woocommerce { grid-template-columns: 240px minmax(0, 1fr); }
  .woocommerce-account .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
}

.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--spacing-1); }
.woocommerce-MyAccount-navigation a { display: block; padding: var(--spacing-2-5) var(--spacing-4); border-radius: var(--rounded-button); transition: background .2s; }
.woocommerce-MyAccount-navigation a:hover { background: rgb(var(--text-color) / .05); }
.woocommerce-MyAccount-navigation .is-active a { background: rgb(var(--text-color)); color: rgb(var(--background-primary)); }
.woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content { width: auto; float: none; }

.woocommerce .col2-set { gap: var(--spacing-8); display: grid; }
@media screen and (min-width: 1000px) { .woocommerce .col2-set { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.woocommerce .col2-set > * { width: auto !important; float: none !important; }
.woocommerce .col2-set::before, .woocommerce .col2-set::after { display: none; }

.woocommerce form.login, .woocommerce form.register, .woocommerce form.checkout_coupon, .woocommerce form.lost_reset_password {
  border: 1px solid rgb(var(--border-color));
  border-radius: var(--rounded-sm);
  padding: var(--spacing-6);
  margin: 0 0 var(--spacing-6);
}

.woocommerce .woocommerce-order-overview { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--spacing-6); }
.woocommerce .woocommerce-order-overview li { display: grid; font-size: var(--text-sm); color: rgb(var(--text-color) / .7); }
.woocommerce .woocommerce-order-overview strong { color: rgb(var(--text-color)); font-size: var(--text-base); }
.woocommerce address { font-style: normal; line-height: 1.7; }

/* WooCommerce blocks inherit theme fonts and buttons */
.wc-block-components-button:not(.is-link) { border-radius: var(--rounded-button) !important; background-color: rgb(var(--button-background-primary)) !important; color: rgb(var(--button-text-primary)) !important; }
.wc-block-components-text-input input, .wc-block-components-select select, .wc-blocks-components-select__select { border-radius: var(--rounded-input) !important; }

/* ------------------------------------------------------------------------------------------------------------------
 * Pearl UAE: delivery & payment trust badges
 * ---------------------------------------------------------------------------------------------------------------- */

.pearl-trust {
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--spacing-2-5) var(--spacing-6);
  flex-wrap: wrap;
  display: flex;
  font-size: var(--text-sm);
  font-weight: bold;
}

.pearl-trust__item { gap: var(--spacing-2); align-items: center; display: inline-flex; }
.pearl-trust__item .icon { flex-shrink: 0; color: rgb(var(--button-background-secondary)); }
.pearl-trust--center { justify-content: center; }
.pearl-trust--compact { font-size: var(--text-xs); gap: var(--spacing-2) var(--spacing-4); }
.pearl-trust--compact .icon { width: 18px; height: 18px; }

.pearl-trust--boxed {
  border-radius: var(--rounded-sm);
  background: rgb(var(--button-background-secondary) / .12);
  padding: var(--spacing-4);
  display: grid;
  gap: var(--spacing-3);
}

.pearl-trust--boxed.pearl-trust--center { justify-content: center; display: flex; }
.pearl-trust--shop { margin-block-start: var(--spacing-6); }

/* ------------------------------------------------------------------------------------------------------------------
 * Contact page
 * ---------------------------------------------------------------------------------------------------------------- */

.pearl-contact { gap: var(--spacing-10); align-items: start; display: grid; }

@media screen and (min-width: 1000px) {
  .pearl-contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--spacing-16); }
}

.pearl-contact__details { list-style: none; padding: 0; margin: 0; }
.pearl-contact__form { padding: var(--spacing-6); }
@media screen and (min-width: 700px) { .pearl-contact__form { padding: var(--spacing-10); } }
.pearl-contact__form .fieldset { gap: var(--input-gap); display: grid; }
.pearl-contact__form .banner { margin-block-end: var(--spacing-4); }

/* ------------------------------------------------------------------------------------------------------------------
 * Track your order
 * ---------------------------------------------------------------------------------------------------------------- */

.woocommerce form.track_order {
  max-width: 560px;
  margin-inline: auto;
  border: 1px solid rgb(var(--border-color));
  border-radius: var(--rounded-sm);
  padding: var(--spacing-6);
}

.woocommerce form.track_order .form-row-first,
.woocommerce form.track_order .form-row-last { width: 100%; float: none; }
.woocommerce form.track_order .button { width: 100%; font-size: var(--text-base); padding-block: var(--spacing-4); }
.woocommerce form.track_order .clear { display: none; }

/* ------------------------------------------------------------------------------------------------------------------
 * Mobile-first checkout
 * ---------------------------------------------------------------------------------------------------------------- */

.woocommerce-checkout .pearl-wc-page { gap: var(--spacing-6); }

@media screen and (max-width: 999px) {
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last { width: 100%; float: none; }

  .woocommerce-checkout #order_review_heading { margin-block-start: var(--spacing-8); }
  .woocommerce-checkout #place_order,
  .woocommerce .wc-proceed-to-checkout .checkout-button { position: sticky; bottom: var(--spacing-3); z-index: 2; box-shadow: var(--shadow); }
}

/* Large tap targets and no iOS zoom on focus. */
:is(.woocommerce-checkout, .woocommerce-cart) main :is(input, select, textarea) { font-size: max(16px, var(--text-base)) !important; }
.woocommerce-checkout #payment ul.payment_methods li label { font-weight: bold; padding-block: var(--spacing-1); display: inline-block; }

@media screen and (min-width: 1000px) {
  .woocommerce-checkout form.checkout { gap: var(--spacing-12); grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); display: grid; }
  .woocommerce-checkout form.checkout > .col2-set { grid-template-columns: 1fr; grid-column: 1; grid-row: 1 / span 3; }
  .woocommerce-checkout form.checkout > #order_review_heading,
  .woocommerce-checkout form.checkout > #order_review { grid-column: 2; }
  .woocommerce-checkout form.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; }
}

/* My account: centred login/register forms when logged out (as Shopify's customer login page). */
.woocommerce-account:not(.logged-in) .woocommerce { max-width: 560px; margin-inline: auto; display: block; }
.woocommerce-account:not(.logged-in) .woocommerce > h2 { text-align: center; font-size: var(--text-h4); margin-block-end: var(--spacing-6); }
.woocommerce-account:not(.logged-in) .col2-set .woocommerce > h2 { text-align: start; }
.woocommerce-account:not(.logged-in) .woocommerce:has(.u-columns) { max-width: 1000px; }
.woocommerce-account form.login .button, .woocommerce-account form.register .button { width: 100%; font-size: var(--text-base); padding-block: var(--spacing-3-5); margin-block-start: var(--spacing-2); }
.woocommerce-account form .woocommerce-form-login__rememberme { display: flex; gap: var(--spacing-2); align-items: center; margin-block-end: var(--spacing-3); }
.woocommerce-account .lost_password { text-align: center; margin-block-start: var(--spacing-4); font-size: var(--text-sm); }

/* ------------------------------------------------------------------------------------------------------------------
 * Horizontal shop filters
 * ---------------------------------------------------------------------------------------------------------------- */

.collection--filters-horizontal .facets-summary { align-items: center; justify-content: space-between; }
.collection--filters-horizontal .facets-horizontal { flex: 1 1 auto; }
.facets-horizontal .facet-dialog { top: calc(100% + var(--spacing-4)); }
.sort-by-facet { gap: var(--spacing-2); align-items: center; display: flex; position: relative; justify-content: flex-end; }
.pearl-sort-dialog { inset-inline: auto 0 !important; }
.facet-dialog-option.is-active { background: rgb(var(--text-primary) / .06); opacity: 1; font-weight: bold; }
.facet-dialog .color-swatch.is-selected::before, .color-list .color-swatch.is-selected::before { opacity: 1; transform: scale(1); }
.pearl-price-filter { display: flex; gap: var(--spacing-3); align-items: center; flex-wrap: wrap; padding: var(--spacing-2); }
.pearl-price-filter__inputs { display: flex; gap: var(--spacing-2); }
.pearl-price-filter__field { position: relative; display: block; width: 130px; }
.pearl-price-filter__field span { position: absolute; inset-inline-start: var(--spacing-3); top: 50%; transform: translateY(-50%); font-size: var(--text-xs); color: rgb(var(--text-color) / .6); }
.pearl-price-filter__field .input { padding-inline-start: 3rem; height: 2.75rem; }
.collection--filters-horizontal .active-facets { grid-column: 1 / -1; justify-content: center; }
.pearl-mobile-filters .facet-dialog-option { padding: var(--spacing-2) var(--spacing-3); }
.pearl-mobile-filters .availability-facet { padding-block: var(--spacing-2); }
.pearl-mobile-filters .pearl-price-filter { padding: 0; }
.pearl-mobile-filters .pearl-price-filter__field { width: 120px; }