/* ==========================================================================
   Doris Sandals — WooCommerce Cart / Checkout / Account Reskin
   Applies the same colors, fonts, and square-edged button style used
   throughout the rest of the theme to WooCommerce's own pages, which
   otherwise render with default WooCommerce (blue button) styling.
   ========================================================================== */

/* --- Fix horizontal overflow on Checkout/Cart (WooCommerce Blocks grid
   was built LTR-first and can overflow the viewport in RTL layouts) --- */
html:has(.wc-block-checkout),
html:has(.wc-block-cart) {
  overflow-x: hidden;
}

.wc-block-checkout,
.wc-block-cart,
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart {
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

.wc-block-checkout *,
.wc-block-cart * {
  box-sizing: border-box;
  max-width: 100%;
}

.wc-block-components-sidebar-layout {
  overflow-x: hidden;
}

/* --- RTL: WooCommerce Blocks ships its own checkout-rtl.css / cart-rtl.css
   that correctly handles direction, positioning, and flex ordering for
   everything in these blocks (radio button dots, flex rows, etc.) — but
   ONLY once WordPress's site locale is actually an RTL language.
   Earlier, while this site's locale was still English, that stylesheet
   never loaded at all, which was the real cause of the checkout looking
   LTR-first. This theme used to blanket-force "direction: rtl
   !important" on every element here as a workaround for that — but now
   that the site language is properly set to Persian (fa_IR), WordPress
   loads WooCommerce's real RTL stylesheet automatically, and that old
   blanket override was left fighting it: it was overriding WooCommerce's
   own already-correct positioning of the radio button indicator,
   pushing it to sit on top of the option label text instead of beside
   it. Removed — WooCommerce's own RTL stylesheet handles this now.

   The one thing that's still needed is below: phone numbers and the
   country selector (flag emoji + Latin country name, e.g. "🇮🇷 Iran")
   are inherently left-to-right content regardless of the page's
   direction, on any RTL site. --- */
.wc-block-checkout input[type="tel"],
.wc-block-checkout input[type="email"],
.wc-block-checkout input[type="number"],
.wc-block-components-country-input,
.wc-block-components-country-input input,
.wc-block-components-country-input button,
.wc-block-components-phone-number-input input {
  direction: ltr !important;
  text-align: right !important;
}

/* --- Shared typography & color tokens (mirrors style.css) --- */
.woocommerce,
.wc-block-checkout,
.wc-block-cart,
.woocommerce-account {
  font-family: var(--doris-font-sans);
  color: var(--doris-text);
  line-height: 1.7;
}

/* Headings use the same bold Vazirmatn treatment as every other Persian
   heading on the site (see .doris-section-title) — NOT the Latin serif
   used for the "DORIS" logotype, which has no Persian glyphs and would
   silently fall back to a generic system font once this text is in Farsi. */
.woocommerce h1,
.woocommerce h2,
.woocommerce h3,
.wc-block-components-checkout-step__title,
.wc-block-components-title {
  font-family: var(--doris-font-sans);
  color: var(--doris-text);
  font-weight: 800;
}

/* --- Buttons: replace WooCommerce's default blue with the Doris dark/brown pair --- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button,
.wc-block-components-checkout-place-order-button {
  background-color: var(--doris-black) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--doris-black) !important;
  border-radius: 0 !important;
  font-family: var(--doris-font-sans);
  font-weight: 700;
  font-size: 0.8125rem;
  padding: 0.875rem 1.5rem !important;
  text-transform: none;
  box-shadow: none !important;
  transition: all 0.25s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.wc-block-components-button:hover,
.wc-block-components-checkout-place-order-button:hover {
  background-color: var(--doris-accent) !important;
  border-color: var(--doris-accent) !important;
  color: #FFFFFF !important;
}

.woocommerce a.button.alt,
.wc-block-components-checkout-place-order-button {
  background-color: var(--doris-black) !important;
}

/* --- Form fields: square edges, brand border color, brand focus color --- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.wc-block-components-text-input input,
.wc-block-components-address-form input,
.wc-block-components-radio-control input {
  border: 1px solid var(--doris-border) !important;
  border-radius: 0 !important;
  font-family: var(--doris-font-sans);
  background-color: var(--doris-surface);
  color: var(--doris-text);
}

.woocommerce form .form-row input.input-text:focus,
.wc-block-components-text-input input:focus {
  border-color: var(--doris-accent) !important;
  outline: none;
  box-shadow: 0 0 0 1px var(--doris-accent) !important;
}

/* --- Cart & Checkout tables / summary panels --- */
.woocommerce table.shop_table,
.wc-block-components-order-summary,
.wp-block-woocommerce-checkout-order-summary-block,
.wp-block-woocommerce-cart-order-summary-block {
  border-color: var(--doris-border) !important;
  background-color: var(--doris-surface);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td,
.wc-block-components-order-summary-item {
  border-color: var(--doris-border) !important;
  font-size: 0.8125rem;
}

.woocommerce-Price-amount,
.wc-block-components-formatted-money-amount,
.wc-block-components-totals-item__value {
  font-weight: 700;
  color: var(--doris-text);
}

/* --- Notices (the "no payment methods available" box etc.) --- */
.woocommerce-info,
.woocommerce-message,
.wc-block-components-notice-banner {
  border-radius: 0 !important;
  border-color: var(--doris-accent) !important;
  font-family: var(--doris-font-sans);
}

.woocommerce-info::before {
  color: var(--doris-accent) !important;
}

/* --- Coupon / accordion toggles --- */
.wc-block-components-panel {
  border-bottom: 1px solid var(--doris-border);
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
}

.wc-block-components-panel__button,
.woocommerce-form-coupon-toggle a {
  color: var(--doris-accent) !important;
  font-weight: 700;
  font-size: 0.8125rem;
}

.wc-block-components-panel__content {
  margin-top: 1rem;
}

/* ==========================================================================
   Checkout — layout: two-column grid (form + sticky order summary),
   each checkout step rendered as its own bordered "card" so the page
   reads like the rest of the site's editorial, boxed sections instead
   of one long undifferentiated form.
   ========================================================================== */

@media (min-width: 782px) {
  .wp-block-woocommerce-checkout .wc-block-components-sidebar-layout,
  .wc-block-checkout .wc-block-components-sidebar-layout {
    gap: 3.5rem;
  }
}

.wc-block-components-checkout-step {
  background-color: var(--doris-surface);
  border: 1px solid var(--doris-border);
  padding: 1.75rem 1.5rem;
  margin-bottom: 1.5rem !important;
}

@media (min-width: 640px) {
  .wc-block-components-checkout-step {
    padding: 2rem 2.25rem;
  }
}

.wc-block-components-checkout-step__title {
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
}

.wc-block-components-checkout-step__description {
  color: var(--doris-muted);
  font-size: 0.8125rem;
}

.wc-block-components-checkout-step__container-content,
.wc-block-components-checkout-step__content {
  margin-top: 1.25rem;
}

/* --- Field labels & floating-label inputs --- */
.wc-block-components-text-input label,
.wc-block-components-address-form label {
  font-family: var(--doris-font-sans);
  color: var(--doris-muted);
}

.wc-block-components-text-input.is-active label,
.wc-block-components-text-input input:focus + label {
  color: var(--doris-accent) !important;
}

/* Breathing room between stacked fields — WC's default spacing packs
   rows almost edge-to-edge, which reads as cramped next to the rest of
   the site's generous whitespace. */
.wc-block-components-address-form {
  row-gap: 1.25rem !important;
  column-gap: 1rem !important;
}

/* --- Checkboxes ("create an account", "ship to a different address") ---
   Deliberately hands-off: WC Blocks renders the checked/unchecked mark
   itself (the square only fills in once actually checked), and an
   earlier fixed fill color here painted the box white regardless of
   state, making it look permanently empty. --- */
.wc-block-components-checkbox svg {
  border-radius: 0 !important;
}

/* --- Radio steps: shipping method / payment method options styled as
   selectable cards, mirroring the size-selector buttons used on product
   pages elsewhere in the theme.

   Deliberately NOT setting padding here: WooCommerce's own RTL
   stylesheet sets "padding: 16px 48px 16px 16px" on this exact element —
   that lopsided 48px on the right is reserved space for the selection
   dot, which WooCommerce positions at a fixed "right: 16px" via CSS
   independently of this element. A plain uniform padding override here
   previously shrank that reserved space from 48px down to 16px, which
   made the dot land on top of the option's label text instead of
   beside it (visible as the first few letters of a shipping method's
   name disappearing behind the dot). --- */
.wc-block-components-radio-control__option {
  border: 1px solid var(--doris-border) !important;
  border-radius: 0 !important;
  margin-bottom: 0.625rem;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.wc-block-components-radio-control__option:hover {
  border-color: var(--doris-muted) !important;
}

.wc-block-components-radio-control__option.wc-block-components-radio-control__option--checked-option {
  border-color: var(--doris-black) !important;
  background-color: var(--doris-card);
}

.wc-block-components-radio-control__input {
  accent-color: var(--doris-black);
}

.wc-block-components-radio-control__option-layout .wc-block-components-formatted-money-amount {
  font-weight: 700;
}

/* --- Validation / error states --- */
.wc-block-components-validation-error {
  border: none !important;
  color: #B3261E !important;
  font-size: 0.75rem;
  margin-top: 0.375rem;
}

.wc-block-components-validation-error p {
  color: #B3261E !important;
}

.has-error .wc-block-components-text-input input.input-text,
.wc-block-components-text-input.has-error input {
  border-color: #B3261E !important;
}

/* --- Terms & return-to-cart link --- */
.wc-block-checkout__terms,
.wc-block-checkout__return-to-cart-button {
  font-size: 0.8125rem;
  color: var(--doris-muted);
}

.wc-block-checkout__terms a,
.wc-block-checkout__return-to-cart-button {
  color: var(--doris-text) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Sidebar: order summary as a sticky editorial card --- */
.wc-block-checkout__sidebar,
.wc-block-components-sidebar {
  margin-top: 0;
}

@media (min-width: 782px) {
  .wc-block-checkout__sidebar .wc-block-components-panel,
  .wc-block-checkout__sidebar > *,
  .wc-block-components-sidebar > * {
    position: sticky;
    top: 6.5rem;
  }
}

.wc-block-components-order-summary {
  border: 1px solid var(--doris-border) !important;
  padding: 1.75rem !important;
}

.wc-block-components-order-summary .wc-block-components-title {
  margin-bottom: 1.25rem;
}

.wc-block-components-order-summary__button-text,
.wc-block-components-totals-item__label {
  font-family: var(--doris-font-sans);
  color: var(--doris-text);
  font-size: 0.8125rem;
}

.wc-block-components-totals-item {
  padding-top: 0.65rem !important;
  padding-bottom: 0.65rem !important;
}

.wc-block-components-order-summary-item {
  border-color: var(--doris-border) !important;
  padding-top: 1.125rem !important;
  padding-bottom: 1.125rem !important;
  gap: 0.875rem !important;
}

.wc-block-components-order-summary-item__image {
  border: 1px solid var(--doris-border);
  flex-shrink: 0;
}

.wc-block-components-order-summary-item__description {
  line-height: 1.6;
}

/* Prices wrap onto their own line and collide with the "Save" badge in a
   narrow sidebar column unless kept on one line. */
.wc-block-components-formatted-money-amount,
.woocommerce-Price-amount {
  white-space: nowrap;
}

.wc-block-components-order-summary-item__quantity {
  background-color: var(--doris-black) !important;
  color: #FFFFFF !important;
  border-radius: 999px !important;
  font-weight: 700;
}

.wc-block-components-order-summary-item__individual-prices {
  color: var(--doris-muted) !important;
}

/* Grand total row: heavier weight + top divider so it reads as the final
   figure, the same emphasis pattern used for prices elsewhere on the site. */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--doris-font-sans);
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--doris-text) !important;
}

.wc-block-components-totals-footer-item {
  border-top: 1px solid var(--doris-border) !important;
  padding-top: 1rem !important;
  margin-top: 0.5rem !important;
}

.wc-block-components-totals-coupon .wc-block-components-totals-item__value {
  color: var(--doris-accent) !important;
}

/* --- Place order button: match the site's full-width primary CTA --- */
.wc-block-components-checkout-place-order-button {
  width: 100%;
  padding: 1rem 1.5rem !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.02em;
  margin-top: 1.5rem;
}

/* --- Express payment area (Apple Pay / Google Pay, if enabled) --- */
.wc-block-components-express-payment {
  border: 1px solid var(--doris-border);
  background-color: var(--doris-card);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.wc-block-components-express-payment__title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--doris-muted);
}

/* --- My Account page --- */
.woocommerce-MyAccount-navigation ul {
  border: 1px solid var(--doris-border);
}

.woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid var(--doris-border);
}

.woocommerce-MyAccount-navigation li a {
  color: var(--doris-text);
  font-family: var(--doris-font-sans);
  font-weight: 600;
  padding: 0.875rem 1.25rem;
  display: block;
  text-decoration: none;
}

.woocommerce-MyAccount-navigation li.is-active a {
  color: var(--doris-accent);
}

.woocommerce-MyAccount-navigation li a:hover {
  background-color: var(--doris-card);
}

/* ==========================================================================
   Classic Checkout — the Checkout page now renders WooCommerce's real
   classic [woocommerce_checkout] shortcode instead of the Checkout
   Block, so the plugins depending on classic hooks (the map/location
   picker, the courier shipping method's city matching) actually work.
   This section restyles that classic markup with the same visual
   language used for the Block version above: bordered step cards, a
   sticky order-review sidebar, selectable payment-method rows.
   ========================================================================== */

@media (min-width: 782px) {
  form.woocommerce-checkout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 3.5rem;
  }

  form.woocommerce-checkout #customer_details {
    flex: 1 1 420px;
    min-width: 0;
  }

  /* Redundant next to the order-review card's own visual weight (which
     already has prices, items, and the place-order button) — the Block
     checkout didn't have an equivalent floating caption either. */
  form.woocommerce-checkout #order_review_heading {
    display: none;
  }

  form.woocommerce-checkout #order_review {
    flex: 0 0 400px;
    position: sticky;
    top: 6.5rem;
  }
}

.woocommerce-billing-fields,
.woocommerce-shipping-fields,
.woocommerce-additional-fields {
  background-color: var(--doris-surface);
  border: 1px solid var(--doris-border);
  padding: 1.75rem 1.5rem;
  margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
  .woocommerce-billing-fields,
  .woocommerce-shipping-fields,
  .woocommerce-additional-fields {
    padding: 2rem 2.25rem;
  }
}

.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 {
  font-size: 1.0625rem;
  margin-bottom: 1.25rem;
}

.woocommerce form .form-row {
  margin-bottom: 1.25rem;
}

.woocommerce form .form-row label {
  font-size: 0.8125rem;
  color: var(--doris-muted);
  margin-bottom: 0.375rem;
  display: block;
}

.woocommerce form .form-row select {
  padding: 0.75rem 1rem;
}

/* Country/Region field: the store only ships within Iran, so
   WooCommerce's "sell to specific countries" setting is restricted to
   just Iran — WooCommerce itself still renders a dropdown even with
   only one country allowed (just a single pre-selected option, class
   "country_to_state--single" instead of the usual full list), so it's
   hidden here rather than left as a pointless one-choice field. Scoped
   to that specific class so this only disappears when there really is
   only one option — if more countries are ever allowed again, the
   normal full dropdown reappears automatically. */
#billing_country_field:has(.country_to_state--single),
#shipping_country_field:has(.country_to_state--single) {
  display: none;
}

/* --- Order review card + table --- */
#order_review {
  border: 1px solid var(--doris-border);
  padding: 1.75rem;
  background-color: var(--doris-surface);
}

.woocommerce-checkout-review-order-table {
  border: none !important;
  margin-bottom: 1rem;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  border-color: var(--doris-border) !important;
  padding: 0.75rem 0 !important;
  background: transparent !important;
}

.woocommerce-checkout-review-order-table .cart-subtotal th,
.woocommerce-checkout-review-order-table .cart-subtotal td,
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
  border-top: 1px solid var(--doris-border) !important;
}

.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
  font-family: var(--doris-font-sans);
  font-size: 1.125rem;
  font-weight: 800;
}

/* --- Payment methods: same selectable-card treatment as the Block
   checkout's shipping/payment radio options. --- */
ul.wc_payment_methods {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

ul.payment_methods li.wc_payment_method {
  border: 1px solid var(--doris-border) !important;
  padding: 0.9rem 1rem;
  margin-bottom: 0.625rem;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

ul.payment_methods li.wc_payment_method:has(input:checked) {
  border-color: var(--doris-black) !important;
  background-color: var(--doris-card);
}

ul.payment_methods li.wc_payment_method label {
  font-weight: 600;
  cursor: pointer;
}

ul.payment_methods li.wc_payment_method .payment_box {
  background-color: transparent !important;
  border: none !important;
  padding: 0.75rem 0 0 !important;
  font-size: 0.8125rem;
  color: var(--doris-muted);
}

ul.payment_methods li.wc_payment_method .payment_box:before {
  display: none;
}

/* --- Coupon toggle --- */
.woocommerce-form-coupon-toggle {
  margin-bottom: 1.25rem;
}

.woocommerce-form-coupon .form-row {
  margin-bottom: 0.75rem;
}

/* --- Place order button --- */
#place_order {
  width: 100%;
}

/* --- Location picker (persian-woocommerce-shipping's map) — leave the
   map itself alone, just give it the same card framing as everything
   else on this page so it doesn't look bolted on. --- */
.pws-map__container {
  border: 1px solid var(--doris-border);
  margin-bottom: 1.5rem;
}

/* ==========================================================================
   Classic Cart — same switch as checkout above, and for the same
   reasons (the Block cart has no advantage here and this keeps both
   pages on WooCommerce's real, plugin-compatible rendering path).
   ========================================================================== */

.woocommerce table.cart,
.woocommerce table.shop_table_responsive {
  border: 1px solid var(--doris-border) !important;
  border-collapse: collapse;
}

.woocommerce table.cart th,
.woocommerce table.cart td {
  border-color: var(--doris-border) !important;
  padding: 1rem !important;
}

.woocommerce table.cart thead th {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--doris-muted);
  background-color: var(--doris-card);
}

.woocommerce table.cart .product-thumbnail img {
  border: 1px solid var(--doris-border);
  width: 70px;
  height: auto;
}

.woocommerce table.cart .product-remove a.remove {
  color: var(--doris-muted) !important;
  background: transparent !important;
  font-size: 1.125rem;
}

.woocommerce table.cart .product-remove a.remove:hover {
  color: #B3261E !important;
  background: transparent !important;
}

.woocommerce .quantity .qty {
  border: 1px solid var(--doris-border) !important;
  border-radius: 0 !important;
  padding: 0.5rem !important;
  width: 4rem;
  text-align: center;
}

.woocommerce table.cart td.actions {
  background-color: transparent;
}

.woocommerce .coupon {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.woocommerce .coupon .input-text {
  border: 1px solid var(--doris-border) !important;
  border-radius: 0 !important;
  padding: 0.75rem 1rem;
  max-width: 200px;
}

/* --- Cart totals: same bordered-card treatment as the order review box --- */
.cart_totals {
  border: 1px solid var(--doris-border);
  background-color: var(--doris-surface);
  padding: 1.75rem;
}

.cart_totals h2 {
  font-size: 1.0625rem;
  margin-bottom: 1.25rem;
}

.cart_totals table.shop_table {
  border: none !important;
}

.cart_totals table.shop_table th,
.cart_totals table.shop_table td {
  border-color: var(--doris-border) !important;
  padding: 0.75rem 0 !important;
}

.cart_totals .order-total th,
.cart_totals .order-total td {
  border-top: 1px solid var(--doris-border) !important;
  font-family: var(--doris-font-sans);
  font-size: 1.125rem;
  font-weight: 800;
}

.wc-proceed-to-checkout .checkout-button {
  display: block;
  text-align: center;
  width: 100%;
}

.shipping-calculator-button {
  color: var(--doris-accent) !important;
  font-weight: 700;
  font-size: 0.8125rem;
}

/* The cart's "change address" shipping estimator has its own separate
   country field — same single-Iran-store reasoning as the checkout
   fields above, but this one doesn't get WooCommerce's usual
   single-country shortcut (it always shows a placeholder option
   alongside the one real country), so it's hidden unconditionally
   rather than via the ":has()" guard used for the checkout fields. */
#calc_shipping_country_field {
  display: none;
}

/* --- Login / Register forms --- */
.woocommerce form.login,
.woocommerce form.register {
  border: 1px solid var(--doris-border) !important;
  border-radius: 0 !important;
  background-color: var(--doris-surface);
  padding: 2rem !important;
}

.woocommerce form.login .button,
.woocommerce form.register .button {
  width: 100%;
}


/* ==========================================================================
   Single Product Page — a custom gallery (main photo + thumbnail strip
   that swaps with the selected color) paired with WooCommerce's own
   summary/tabs output, restyled to match the rest of the site instead of
   WooCommerce's plain default product page. The summary/tabs markup
   itself stays native (kept for plugin/review compatibility) — only
   restyled here.
   ========================================================================== */

.doris-pdp-main {
  padding: 2.5rem 0 3rem;
}

.doris-pdp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 900px) {
  .doris-pdp-grid {
    grid-template-columns: 1.1fr 1fr;
    gap: 4rem;
    align-items: start;
  }
}

/* --- Gallery --- */
.doris-pdp-gallery-frame {
  background-color: var(--doris-card);
  aspect-ratio: 1;
  overflow: hidden;
}

.doris-pdp-gallery-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.doris-pdp-thumbs {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.875rem;
  flex-wrap: wrap;
}

.doris-pdp-thumb {
  width: 76px;
  height: 76px;
  object-fit: cover;
  cursor: pointer;
  border: 1px solid var(--doris-border);
  opacity: 0.7;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

.doris-pdp-thumb:hover {
  opacity: 1;
}

.doris-pdp-thumb.active {
  opacity: 1;
  border-color: var(--doris-black);
}

/* --- Summary column --- */
.doris-pdp-summary .product_title {
  font-size: 1.75rem;
  margin: 0.5rem 0 0.75rem;
  line-height: 1.3;
}

.doris-pdp-summary .woocommerce-product-rating {
  margin-bottom: 0.875rem;
  font-size: 0.8125rem;
  color: var(--doris-muted);
}

.doris-pdp-summary .price {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--doris-text);
  display: block;
  margin-bottom: 1.25rem;
}

.doris-pdp-summary .price del {
  color: var(--doris-muted);
  font-weight: 400;
  font-size: 1rem;
  margin-left: 0.5rem;
}

.doris-pdp-summary .price ins {
  text-decoration: none;
}

.doris-pdp-summary .woocommerce-product-details__short-description {
  font-size: 0.9375rem;
  line-height: 1.85;
  color: var(--doris-muted);
  margin-bottom: 1.5rem;
}

.doris-pdp-summary .woocommerce-product-details__short-description p:last-child {
  margin-bottom: 0;
}

/* --- Custom color swatches: skin only, WooCommerce's own hidden <select>
   still resolves price/stock/variation_id — see single-product.js. --- */
.doris-pdp-swatches {
  margin-bottom: 1.5rem;
}

.doris-pdp-swatches-row {
  display: flex;
  gap: 0.625rem;
}

.doris-pdp-swatch {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-block;
  border: 2px solid var(--doris-surface);
  outline: 1px solid var(--doris-border);
  outline-offset: 2px;
  transition: outline-color 0.2s ease;
}

.doris-pdp-swatch.active {
  outline-color: var(--doris-black);
}

/* Native variation table: stays in the DOM (WooCommerce needs it to
   resolve price/stock/variation_id). The color attribute's row is hidden
   — single-product.js tags it .doris-color-row since it's visually
   replaced by the swatches above — but other attributes (size, say) have
   no custom control yet, so their row stays visible, just restyled to
   match the theme instead of WooCommerce's default table chrome. */
.doris-pdp-summary table.variations {
  width: 100%;
  margin-bottom: 1.5rem;
  border-collapse: collapse;
}

.doris-pdp-summary table.variations tr.doris-color-row {
  display: none;
}

.doris-pdp-summary table.variations tr {
  display: block;
  margin-bottom: 0.75rem;
}

.doris-pdp-summary table.variations th.label {
  display: block;
  text-align: right;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--doris-text);
  padding-bottom: 0.375rem;
}

.doris-pdp-summary table.variations td.value {
  display: block;
}

.doris-pdp-summary table.variations select {
  width: 100%;
  max-width: 260px;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--doris-border);
  border-radius: 2px;
  background-color: var(--doris-surface);
  color: var(--doris-text);
  font-family: inherit;
  font-size: 0.9375rem;
}

.doris-pdp-summary .woocommerce-variation-add-to-cart,
.doris-pdp-summary .cart {
  margin-top: 0;
}

.doris-pdp-summary .woocommerce-variation-price,
.doris-pdp-summary .single_variation_wrap .price {
  margin-bottom: 1rem;
}

.doris-pdp-summary .quantity {
  display: inline-flex;
  margin-left: 0.75rem;
  vertical-align: middle;
}

.doris-pdp-summary .product_meta {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--doris-border);
  font-size: 0.8125rem;
  color: var(--doris-muted);
}

.doris-pdp-summary .product_meta > span {
  display: block;
  margin-bottom: 0.375rem;
}

.doris-pdp-summary .product_meta a {
  color: var(--doris-text);
}

/* --- Tabs (description / additional info / reviews) --- */
.doris-pdp-details {
  background-color: var(--doris-card);
  border-top: 1px solid var(--doris-border);
  padding: 3.5rem 0;
  margin-top: 3rem;
}

.woocommerce-tabs ul.tabs {
  display: flex;
  gap: 2rem;
  list-style: none;
  border-bottom: 1px solid var(--doris-border);
  margin-bottom: 2rem;
  flex-wrap: wrap;
  padding: 0;
}

.woocommerce-tabs ul.tabs li {
  padding: 0 0 1rem;
}

.woocommerce-tabs ul.tabs li a {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--doris-muted);
}

.woocommerce-tabs ul.tabs li.active {
  border-bottom: 2px solid var(--doris-black);
  margin-bottom: -1px;
}

.woocommerce-tabs ul.tabs li.active a {
  color: var(--doris-text);
}

.woocommerce-tabs .panel {
  max-width: 760px;
  font-size: 0.9375rem;
  line-height: 1.85;
  color: var(--doris-muted);
}

.woocommerce-tabs .panel h2 {
  font-size: 1.25rem;
  margin-bottom: 1.25rem;
  color: var(--doris-text);
}

.woocommerce-tabs table.shop_attributes {
  border: 1px solid var(--doris-border);
}

.woocommerce-tabs table.shop_attributes th,
.woocommerce-tabs table.shop_attributes td {
  border-color: var(--doris-border) !important;
  padding: 0.75rem 1rem !important;
  font-size: 0.8125rem;
}

.woocommerce-tabs #reviews .commentlist {
  list-style: none;
  padding: 0;
}

.woocommerce-tabs #reviews .comment-text {
  border: 1px solid var(--doris-border);
  background-color: var(--doris-surface);
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.woocommerce-tabs #review_form input,
.woocommerce-tabs #review_form textarea {
  border: 1px solid var(--doris-border) !important;
  border-radius: 0 !important;
  padding: 0.75rem !important;
}

/* --- Related products --- */
.doris-pdp-related {
  padding: 4rem 0;
}

.doris-pdp-related ul.products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  list-style: none;
  padding: 0;
}

@media (min-width: 640px) {
  .doris-pdp-related ul.products {
    grid-template-columns: repeat(4, 1fr);
  }
}

.doris-pdp-related ul.products li.product {
  border: 1px solid var(--doris-border);
  padding: 1rem;
  background-color: var(--doris-surface);
}

.doris-pdp-related ul.products li.product img {
  aspect-ratio: 4/5;
  object-fit: cover;
  margin-bottom: 0.75rem;
}

.doris-pdp-related ul.products li.product .woocommerce-loop-product__title {
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: 0.375rem;
}