/*
 * Aperina shop — WooCommerce pages on the design system (WooCommerce's own CSS is off).
 * Archives, single product, notices, cart and checkout blocks. Mobile first.
 */

/* =========================================================
   Page shells
   ========================================================= */
.shop { padding-block: var(--space-2) var(--space-16); }
.page-section { padding-block: var(--space-6) var(--space-16); }
.page-title { font-size: var(--text-h1); font-weight: 200; line-height: var(--lh-h1); }
.page-section .page-head { margin-block-end: var(--space-6); }
@media (min-width: 768px) { .page-section { padding-block: var(--space-12) var(--space-20); } }

.woocommerce-breadcrumb { display: flex; gap: var(--space-2); overflow-x: auto; white-space: nowrap; scrollbar-width: none; padding-block: var(--space-3); font-size: var(--text-caption); line-height: var(--lh-caption); color: var(--text-muted); }
.woocommerce-breadcrumb::-webkit-scrollbar { display: none; }
.woocommerce-breadcrumb a { color: inherit; text-decoration: none; }
.woocommerce-breadcrumb a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 0.35em; }
.crumb-sep { color: var(--text-subtle); }

/* =========================================================
   Archive (shop, categories)
   ========================================================= */
.woocommerce-products-header { display: grid; gap: var(--space-2); margin-block: var(--space-2) var(--space-4); }
.woocommerce-products-header__title { font-size: var(--text-h1); font-weight: 200; line-height: var(--lh-h1); }
.term-description { max-width: 52ch; color: var(--text-muted); }
.term-description p { margin: 0; }
.shop-chips { margin-block-start: var(--space-2); }

.shop-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-block-end: var(--space-4); }
.woocommerce-result-count { margin: 0; font-size: var(--text-caption); color: var(--text-muted); }
.woocommerce-ordering { margin: 0; }
.woocommerce-ordering select, .shop select.orderby {
  height: 44px; padding-inline: var(--space-3) var(--space-8); border: 1px solid var(--border-strong); border-radius: var(--radius-field);
  background-color: var(--bg-raised); color: var(--text); font: inherit; font-size: var(--text-label);
}
.woocommerce-no-products-found .woocommerce-info { margin-block-start: var(--space-6); }

/* =========================================================
   Notices
   ========================================================= */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4);
  border: 1px solid; border-radius: var(--radius-panel); font-size: var(--text-small); line-height: var(--lh-small);
}
.woocommerce-message { background: var(--success-tint); color: var(--success); border-color: color-mix(in oklab, var(--success) 30%, transparent); }
.woocommerce-info { background: var(--info-tint); color: var(--info); border-color: color-mix(in oklab, var(--info) 30%, transparent); }
.woocommerce-error { background: var(--error-tint); color: var(--error); border-color: color-mix(in oklab, var(--error) 30%, transparent); }
.woocommerce-error li { width: 100%; }
.woocommerce-message .button, .woocommerce-info .button { order: 2; color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 0.4em; background: none; border: 0; padding: 0; }
.woocommerce-message .delivery-meter { order: 3; width: 100%; color: var(--text); }

/* =========================================================
   Buttons WooCommerce prints (single product, account, notices)
   ========================================================= */
.shop .button, .page-section .button, .woocommerce-account .button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding-inline: var(--space-6); border: 1px solid var(--text); border-radius: var(--radius-cta);
  background: transparent; color: var(--text); font: inherit; font-size: var(--text-label); font-weight: 500; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.shop .button:hover, .page-section .button:hover { background: var(--text); color: var(--bg); }
.shop .button.alt, .single_add_to_cart_button, .page-section .button.alt {
  border-color: var(--primary); background: var(--primary); color: var(--on-primary);
}
.shop .button.alt:hover, .single_add_to_cart_button:hover { border-color: var(--primary-hover); background: var(--primary-hover); color: var(--on-primary); }
.button:disabled, .button.disabled { opacity: 0.4; cursor: not-allowed; }
.button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

/* =========================================================
   Single product
   ========================================================= */
.single-product .shop > .product { display: grid; gap: var(--space-5); }
.woocommerce-product-gallery { position: relative; margin: 0 calc(var(--gutter) * -1); }
.woocommerce-product-gallery__wrapper { margin: 0; }
.woocommerce-product-gallery__image a { display: block; }
.woocommerce-product-gallery__image img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: var(--bg-muted); }
.woocommerce-product-gallery .flex-control-thumbs { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); margin: var(--space-2) var(--gutter) 0; padding: 0; }
.woocommerce-product-gallery .flex-control-thumbs img { cursor: pointer; opacity: 0.6; transition: opacity var(--dur-base); }
.woocommerce-product-gallery .flex-control-thumbs img.flex-active, .woocommerce-product-gallery .flex-control-thumbs img:hover { opacity: 1; }
.woocommerce-product-gallery__trigger { display: none; }
.onsale { position: absolute; z-index: 2; inset-block-start: var(--space-3); inset-inline-start: var(--space-3); padding: 2px var(--space-3); border-radius: var(--radius-pill); background: var(--primary); color: var(--on-primary); font-size: var(--text-micro); font-weight: 500; }

.summary { display: grid; gap: var(--space-3); align-content: start; }
.product_title { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); font-weight: 500; line-height: 1.45; text-wrap: balance; }
.summary .price { font-size: var(--text-h3); font-weight: 600; line-height: 1.4; }
.summary .price del { font-size: var(--text-body); font-weight: 400; color: var(--text-muted); }
.summary .price ins { text-decoration: none; }
.summary .price .aperina-weight__unit { font-size: var(--text-small); }
.woocommerce-product-details__short-description { color: var(--text-muted); }
.woocommerce-product-details__short-description p { margin: 0; }
.preorder-note { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-panel); background: var(--bg-sunken); font-size: var(--text-small); line-height: var(--lh-small); }
.preorder-note svg { flex: none; width: 18px; height: 18px; margin-block-start: 4px; }
.stock { font-size: var(--text-small); }
.stock.out-of-stock { color: var(--error); }

form.cart { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: var(--space-3); margin-block-start: var(--space-2); }
form.cart > .aperina-weight { grid-column: 1 / -1; margin: 0; }
form.cart .single_add_to_cart_button { width: 100%; min-height: 52px; font-size: var(--text-body); }
.quantity { display: flex; }
.quantity .qty {
  width: 84px; height: 52px; padding: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-field);
  background: var(--bg-raised); color: var(--text); font: inherit; font-size: var(--text-body); font-weight: 600; text-align: center;
}
.quantity .qty:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 3px color-mix(in oklab, var(--focus-ring) 22%, transparent); }

.product_meta { display: grid; gap: var(--space-1); padding-block-start: var(--space-3); border-block-start: 1px solid var(--divider); font-size: var(--text-caption); line-height: var(--lh-caption); color: var(--text-muted); }
.product_meta a { color: inherit; }

.woocommerce-tabs { margin-block-start: var(--space-6); }
.woocommerce-tabs ul.tabs { list-style: none; display: flex; gap: var(--space-6); margin: 0 0 var(--space-4); padding: 0; overflow-x: auto; border-block-end: 1px solid var(--divider); }
.woocommerce-tabs ul.tabs a { display: block; padding-block: var(--space-3); border-block-end: 2px solid transparent; color: var(--text-muted); font-weight: 500; text-decoration: none; white-space: nowrap; }
.woocommerce-tabs ul.tabs li.active a { color: var(--text); border-block-end-color: var(--primary); }
.woocommerce-Tabs-panel { max-width: var(--measure); }
.woocommerce-Tabs-panel > h2:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.related, .upsells { margin-block-start: var(--space-12); }
.related > h2, .upsells > h2 { margin-block-end: var(--space-4); font-size: var(--text-h3); font-weight: 600; line-height: var(--lh-h3); }

@media (min-width: 900px) {
  .single-product .shop > .product { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-12); align-items: start; }
  .single-product .shop > .product > .woocommerce-tabs, .single-product .shop > .product > .related, .single-product .shop > .product > .upsells { grid-column: 1 / -1; }
  /* Not sticky: a sticky grid item is bounded by the whole grid and slides over related products. */
  .woocommerce-product-gallery { margin: 0; }
  .woocommerce-product-gallery .flex-control-thumbs { margin-inline: 0; }
  .summary { padding-block-start: var(--space-4); }
}

/* =========================================================
   Cart and checkout blocks
   ========================================================= */
.cart-meter { margin-block-end: var(--space-5); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--bg-raised); }
.cart-meter:empty { display: none; }

.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout { color: var(--text); font-family: var(--font-sans); }
.wc-block-components-main, .wc-block-components-sidebar { font-size: var(--text-small); }
.wc-block-components-title.wc-block-components-title, .wc-block-cart__totals-title { font-size: var(--text-title) !important; font-weight: 600 !important; line-height: 1.5; }

.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  min-height: 52px; border: 0; border-radius: var(--radius-cta) !important;
  background: var(--primary) !important; color: var(--on-primary) !important;
  font-family: var(--font-sans); font-size: var(--text-body); font-weight: 500;
}
.wc-block-components-button:not(.is-link):hover { background: var(--primary-hover) !important; }
.wc-block-components-button.is-link { color: var(--link); }

.wc-block-components-text-input input,
.wc-block-components-combobox .wc-block-components-combobox-control input,
.wc-block-components-select-input select,
.wc-blocks-components-select__select,
.wc-block-components-textarea {
  border: 1px solid var(--border-strong) !important; border-radius: var(--radius-field) !important;
  background: var(--bg-raised) !important; color: var(--text) !important; font-family: var(--font-sans) !important;
}
.wc-blocks-components-select__container { border-radius: var(--radius-field) !important; }
.wc-block-components-text-input input:focus,
.wc-blocks-components-select__select:focus { border-color: var(--text) !important; box-shadow: 0 0 0 3px color-mix(in oklab, var(--focus-ring) 22%, transparent) !important; }
.wc-block-components-text-input label, .wc-blocks-components-select__label { color: var(--text-muted); font-family: var(--font-sans); }

.wc-block-components-radio-control__option, .wc-block-components-radio-control-accordion-option { border-radius: var(--radius-field); }
.wc-block-components-radio-control__input:checked { border-color: var(--primary); }
.wc-block-components-radio-control__input:checked::before { background: var(--primary); }
.wc-block-components-checkbox .wc-block-components-checkbox__input:checked { background: var(--primary); border-color: var(--primary); }

.wc-block-components-product-name { color: var(--text); font-weight: 600; text-decoration: none; }
.wc-block-cart-item__image img, .wc-block-components-order-summary-item__image img { aspect-ratio: 1; object-fit: cover; }
.wc-block-components-product-metadata { color: var(--text-muted); font-size: var(--text-caption); }
.wc-block-components-quantity-selector { border-radius: var(--radius-field); }
/* Quantity box: WooCommerce fixes it at 107px, too narrow for 44px buttons — widen it so − and + stay inside. */
.wp-block-woocommerce-cart .wc-block-components-quantity-selector:where(:has(input:not([type=hidden]))) {
  width: 132px; height: 44px; border: 1px solid var(--border-strong); border-radius: var(--radius-field);
  background: var(--bg-raised); overflow: hidden;
}
.wp-block-woocommerce-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
  flex: none; width: 44px; min-width: 44px; height: 100%; border-radius: 0; opacity: 0.75; font-size: 1.15em;
}
.wp-block-woocommerce-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover:not(:disabled) { opacity: 1; background: color-mix(in oklab, var(--text) 7%, transparent); }
.wp-block-woocommerce-cart .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
  min-width: 0; width: 100%; height: 100%; padding: 0; font: inherit; font-size: var(--text-body); font-weight: 600;
}
/* Delete button: a 44px square centred on the quantity box.
   On phones WooCommerce puts the quantity row in the narrow image column; let it span the whole item,
   otherwise the 132px box + delete button overflow and widen the page. (Ignored by the desktop table layout.) */
.wp-block-woocommerce-cart .wc-block-cart-item__quantity { align-items: center; }
.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row { grid-template-columns: 80px minmax(0, 1fr) !important; }
.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity { grid-column: 1 / -1 !important; min-width: 0; padding-inline: 0 !important; }
.wp-block-woocommerce-cart .wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
  display: inline-grid !important; place-items: center; width: 44px !important; height: 44px !important;
  border-radius: var(--radius-cta) !important; color: var(--text-muted) !important;
}
.wp-block-woocommerce-cart .wc-block-cart-item__quantity .wc-block-cart-item__remove-link:hover { background: color-mix(in oklab, var(--text) 7%, transparent) !important; color: var(--error) !important; }
.wp-block-woocommerce-cart .wc-block-cart-item__quantity .wc-block-cart-item__remove-link svg { width: 20px; height: 20px; }

/* Tehran-only shop: the country is always Iran, and the guest-checkout sentence adds nothing. */
.wc-block-components-address-form__country, .wc-block-checkout__guest-checkout-notice { display: none !important; }
.wc-block-components-totals-item__value, .wc-block-components-product-price { font-weight: 600; }
.wc-block-components-notice-banner { border-radius: var(--radius-panel); }
.wc-block-components-panel__button { font-family: var(--font-sans); }
.wc-block-checkout__actions_row .wc-block-components-checkout-return-to-cart-button { color: var(--text-muted); }

/* =========================================================
   My account (menu and dashboard: account.css)
   ========================================================= */
.woocommerce form .form-row { display: grid; gap: var(--space-1); margin: 0 0 var(--space-4); }
.woocommerce form .input-text { height: 48px; padding-inline: var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-field); background: var(--bg-raised); color: var(--text); font: inherit; }