/* ==========================================================================
   Raabta - WooCommerce styles (enqueued only when WooCommerce is active)
   Account / cart / checkout utility pages + branded login, lost-password and
   confirmation cards. `.raabta-woocommerce-page` is a <body> class (see
   inc/template-functions.php) and `.woocommerce` is a separate inner <div>,
   so selectors chain them as descendants (`.raabta-woocommerce-page .woocommerce`),
   never as a compound (`.woocommerce.raabta-woocommerce-page`, which can never
   match since no single element carries both classes) — that beats
   WooCommerce's own rules without !important.
   ========================================================================== */

/* Every WooCommerce page (body class set in inc/template-functions.php):
   centered 1040px column. The logged-out account page narrows it below. */
.raabta-woocommerce-page .raabta-main {
  margin: 0 auto;
  /* padding: 40px 20px; */
  width: 100%;
  max-width: 1040px;
}

/* Card wrapper shared by login form, lost-password form and confirmation */
.woocommerce-account-page form.woocommerce-form,
.woocommerce-account-page div.woocommerce-form {
  border: none;
  border-radius: var(--border-radius-medium);
  background: var(--color-surface);
  max-width: 500px;
  padding: 40px 32px;
  margin: 0 auto;
}

.raabta-woocommerce-page .entry-title {
  font-weight: var(--heading-font-weight);
  font-size: var(--sub-heading-font-size);
  color: var(--color-secondary);
  margin-bottom: 10px;
}

.raabta-woocommerce-page h3 {
  font-size: var(--small-heading-font-size);
  margin: 0;
}

.raabta-woocommerce-page #order_review_heading {
  margin-top: 1.4em;
  padding-bottom: 3px;
}

/* The page title is hidden on account pages; the form heading is the H1-equivalent */
.woocommerce-account-page h1.entry-title {
  display: none;
}

/* Logo on the minimal (raabta-header--only) header */
.raabta-header__wrapper.raabta-header--only .custom-logo-link {
  max-width: 200px;
  display: block;
  margin: 0 auto 20px;
  text-align: center;
}

.raabta-header__wrapper.raabta-header--only .custom-logo {
  max-height: 80px;
  width: auto;
  margin: 0 auto;
}

/* Form fields */
.woocommerce form .form-row label,
.woocommerce-page form .form-row label {
  font-weight: var(--small-font-weight);
  font-size: var(--mini-main-content);
  line-height: var(--content-line-height);
  color: var(--color-secondary);
  margin-bottom: 6px;
  text-transform: capitalize;
}

.woocommerce form .form-row .input-text,
.woocommerce form .form-row select,
#billing_country_field .select2-selection {
  font-size: var(--main-content);
  color: var(--neutral-grey);
  display: block;
  border: 1px solid var(--neutral-border);
  margin-top: 10px;
  padding: 12px 20px;
  border-radius: var(--border-radius-standard);
  width: 100%;
  background: var(--color-surface);
}

/* Password visibility toggle. WooCommerce's front-end script wraps every
   password input in <span class="password-input"> and appends an empty
   <button class="show-password-input"> but ships no styles for it, so the
   button rendered as a 4px blank below the field. The wrapper takes the
   input's top margin and becomes the positioning box; the eye is drawn with
   the uicons glyphs (same font the theme's <i class="fi fi-rr-eye"> uses). */
.woocommerce form .password-input {
  display: block;
  position: relative;
  margin-top: 10px;
}

.woocommerce form .password-input .input-text {
  margin-top: 0;
  padding-right: 52px;
}

.woocommerce form .show-password-input {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--neutral-grey);
  transition: color 0.2s;
}

.woocommerce form .show-password-input:hover,
.woocommerce form .show-password-input:focus-visible {
  color: var(--color-secondary);
}

.woocommerce form .show-password-input::before {
  content: "\e62c"; /* fi-rr-eye */
  font-family: uicons-regular-rounded;
  font-style: normal;
  font-weight: normal;
  font-size: var(--sub-heading-font-size);
  line-height: 1;
}

.woocommerce form .show-password-input.display-password::before {
  content: "\e62f"; /* fi-rr-eye-crossed */
}

/* Secondary / gradient link buttons used in the account templates */
.woocommerce-account-page .ui-button {
  display: block;
  width: 100%;
  padding: 12px 20px;
  border-radius: var(--border-radius-standard);
  font-size: var(--main-content);
  font-weight: var(--heading-font-weight);
  text-align: center;
  margin-top: 12px;
}

.woocommerce-account-page .ui-button-gradient {
  background: var(--gradient-primary);
  color: var(--color-surface);
  border: none;
}

.woocommerce-account-page .ui-button-secondary {
  background: var(--color-surface);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

/* .woocommerce-account-page .ui-button:hover,
.woocommerce-account-page .ui-button:focus-visible {
  text-decoration: none;
  opacity: 0.92;
} */

.woocommerce-form-login .lost_password a {
  font-size: var(--small-main-content);
  color: var(--color-info);
}

/* Notices inside the card */
.woocommerce-account-page .woocommerce-error,
.woocommerce-account-page .woocommerce-message,
.woocommerce-account-page .woocommerce-info {
  border-radius: var(--border-radius-standard);
  margin-bottom: 20px;
}

/* ==========================================================================
   Widths per WooCommerce page type
   ========================================================================== */
/* Login / register / lost password (logged-out account page): narrow card */
.woocommerce-account-page:not(.logged-in) .raabta-main {
  max-width: 660px;
}

.woocommerce-wrapper {
  padding-block: 32px 60px;
}

/* ==========================================================================
   Shared WooCommerce components
   ========================================================================== */
/* Buttons: same global button style used across the site */
.raabta-woocommerce-page .woocommerce a.button,
.raabta-woocommerce-page .woocommerce button.button,
.raabta-woocommerce-page .woocommerce input.button,
.raabta-woocommerce-page .woocommerce #respond input#submit,
.raabta-woocommerce-page .woocommerce a.button.alt,
.raabta-woocommerce-page .woocommerce button.button.alt,
.raabta-woocommerce-page .woocommerce input.button.alt,
.woocommerce ul.products li.product .button {
  background: var(--gradient-primary);
  color: var(--color-surface);
  padding: 12px 20px;
  border: 1px solid var(--color-primary);
  border-radius: var(--border-radius-standard);
  font-size: var(--main-content);
  line-height: var(--content-line-height);
  font-weight: var(--medium-font-weight);
  text-align: center;
  cursor: pointer;
  display: inline-block;
}

/* .raabta-woocommerce-page .woocommerce a.button:hover,
.raabta-woocommerce-page .woocommerce button.button:hover,
.raabta-woocommerce-page .woocommerce input.button:hover,
.raabta-woocommerce-page .woocommerce a.button.alt:hover,
.raabta-woocommerce-page .woocommerce button.button.alt:hover,
.raabta-woocommerce-page .woocommerce input.button.alt:hover {
  background: var(--gradient-primary);
  color: var(--color-surface);
  opacity: 0.92;
} */

/* .raabta-woocommerce-page .woocommerce button.button:disabled,
.raabta-woocommerce-page .woocommerce button.button:disabled:hover {
  background: var(--gradient-primary);
  color: var(--color-surface);
  opacity: 0.4;
  cursor: not-allowed;
} */

/* Tables (cart, order review, orders list) */
.raabta-woocommerce-page .woocommerce table.shop_table {
  border: 1px solid var(--neutral-border);
  border-radius: var(--border-radius-medium);
  background: var(--color-surface);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

.raabta-woocommerce-page .woocommerce table.shop_table th,
.raabta-woocommerce-page .woocommerce table.shop_table td {
  border-color: var(--neutral-border);
  padding: 14px 16px;
}

.raabta-woocommerce-page .woocommerce table.shop_table td {
  font-size: var(--main-content);
}

.raabta-woocommerce-page .woocommerce table.shop_table th {
  font-size: var(--small-main-content);
  color: var(--neutral-grey);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ==========================================================================
   Cart page layout: items table on top, totals card stacked below it,
   centered in a narrow column. Full widths come from the w-100 utility on
   the form / .cart-collaterals / .cart_totals in woocommerce/cart/*.php
   (WooCommerce's layout sheet is not loaded — see inc/woocommerce.php).
   ========================================================================== */
/* No extra top padding on any WC page: .raabta-main already pads the
   column (see top of file), so the page title / wrapper sit right under the
   header. .woocommerce-wrapper is printed by raabta_wc_wrapper_start() in
   inc/woocommerce.php. The account page hides its title, so the header
   rule is a no-op there. */
.raabta-woocommerce-page .entry-content,
.raabta-woocommerce-page .woocommerce-wrapper {
  padding-top: 0;
}

.raabta-woocommerce-page .entry-header {
  width: 100%;
  padding: 0;
}

/* Cart + checkout (+ thank-you, which is a checkout endpoint) only: stacked
   600px column. Not on the general class — the account dashboard and shop
   need the full 1040px. */
.woocommerce-cart-page .woocommerce,
.woocommerce-cart-page .entry-header,
.woocommerce-checkout-page .woocommerce,
.woocommerce-checkout-page .entry-header {
  max-width: 600px;
  margin-inline: auto;
}

/* Both are WooCommerce-printed markup (no template to put w-100 on). The
   notices wrapper sits above the cart form/totals in the flex column, which
   only stretches children that set their own width. */
.woocommerce-checkout-page form.woocommerce-checkout,
.woocommerce-cart-page .woocommerce-notices-wrapper {
  width: 100%;
}

/* Order received ("thank you") page: is_checkout() is also true on this
   endpoint, so it already inherits the checkout's stacked/centered 600px
   column above — this only styles the page's own markup (success message,
   order overview list, order-details heading). Line items + totals use the
   shared .raabta-cart__* cards (woocommerce/order/order-details.php). */
.raabta-checkout__notice {
  padding: 15px;
  color: var(--color-secondary);
  font-size: var(--main-content);
  font-weight: var(--medium-font-weight);
  background: var(--color-surface);
  border: 1px solid var(--neutral-border);
  border-radius: var(--border-radius-standard);
}

.raabta-checkout__notice--error {
  color: var(--color-danger);
  border-color: var(--color-danger);
}

.raabta-checkout__overview-heading {
  font-weight: var(--heading-font-weight);
  font-size: var(--sub-heading-font-size);
  color: var(--color-secondary);
  margin: 0 0 12px;
}
.woocommerce ul.order_details::after, .woocommerce ul.order_details::before{
  display: none;
}
.raabta-checkout__overview {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  column-gap: 15px !important;
  row-gap: 15px !important;
}

.woocommerce ul.order_details li.raabta-checkout__overview-row {
  float: none;
  margin: 0;
  min-width: 0;
  overflow-wrap: break-word;
  text-transform: capitalize;
  font-size: inherit;
  padding: 15px;
  border: 1px solid var(--neutral-border);
}

.woocommerce ul.order_details li.raabta-checkout__overview-row strong {
  /* color: var(--color-secondary); */
  font-weight: var(--medium-font-weight);
  font-size: inherit;
}

.raabta-checkout__overview-label,
.raabta-product__note {
  color: var(--neutral-grey);
  font-size: var(--small-main-content);
}

/* Cart items: each is its own card (div, not a table row) — see
   woocommerce/cart/cart.php. Grid areas lay out [thumb][name/subtotal on
   one line][qty below name], matching the reference layout. */
.raabta-cart__item {
  grid-template-columns: 96px 1fr auto;
  grid-template-areas:
    "thumb name    subtotal"
    "thumb qty     subtotal";
  column-gap: 20px;
  row-gap: 8px;
  background: var(--color-surface);
  border: 1px solid var(--neutral-border);
  border-radius: var(--border-radius-standard);
}

.raabta-cart__thumbnail {
  grid-area: thumb;
}

.raabta-cart__thumbnail img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--border-radius-standard);
}

.raabta-cart__name {
  grid-area: name;
  align-self: end;
}

.raabta-cart__name a {
  color: var(--color-secondary);
  font-weight: var(--small-font-weight);
}

.raabta-cart__quantity {
  grid-area: qty;
  align-self: start;
}

/* Order-details items (read-only order history): quantity sits inline right
   after the product name — "Product × 2" — instead of the cart page's own
   +/- stepper row below the name. */
.raabta-cart__item-quantity {
  margin-left: 6px;
  color: var(--neutral-grey);
  font-size: var(--small-main-content);
}

.raabta-cart__subtotal {
  grid-area: subtotal;
  color: var(--color-secondary);
  font-weight: var(--medium-font-weight);
  text-align: right;
  white-space: nowrap;
}

/* Remove button: pinned outside the card's top-left corner, poking past the
   border — same badge pattern as .raabta-header__cart-count. */
.raabta-cart__remove {
  top: -10px;
  left: -10px;
}

.raabta-cart__remove a.remove {
  width: 28px;
  height: 28px;
  border-radius: var(--border-radius-full);
  background: var(--color-surface);
  border: 1px solid var(--neutral-border);
  color: var(--color-danger) !important;
  font-size: var(--sub-heading-font-size);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--color-secondary) 8%, transparent);
}

.raabta-cart__remove a.remove:hover {
  background: var(--color-danger);
  color: var(--color-surface) !important;
}
/* Cart only: this .quantity wrapper comes from WooCommerce's global/quantity-input.php,
   so it cannot carry utility classes. The product page uses d-inline-flex align-center gap-10. */
.raabta-cart__quantity .quantity {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.raabta-cart__quantity .quantity .qty,
.raabta-product__buy .quantity .qty {
  text-align: center;
  width: 44px;
  height: 40px;
  padding: 0 4px;
}

.raabta-cart__quantity .quantity .qty-btn,
.raabta-product__buy .quantity .qty-btn {
  width: 40px;
  height: 40px;
  border: 1px solid var(--neutral-border);
  border-radius: var(--border-radius-standard);
  background: var(--color-surface);
  color: var(--color-secondary);
  font-size: var(--small-heading-font-size);
  cursor: pointer;
}

.raabta-cart__quantity .quantity .qty-btn:hover,
.raabta-product__buy .quantity .qty-btn:hover {
  background: var(--color-surface-muted);
}
.raabta-cart__actions {
  display: none;
}

.raabta-cart__totals-row,
.raabta-checkout__review-item,
.raabta-checkout__overview-row {
  background: var(--color-surface);
  border: 1px solid var(--neutral-border);
  border-radius: var(--border-radius-standard);
  padding: 15px;
}

.woocommerce-cart .cart_totals .wc-proceed-to-checkout .checkout-button {
  width: 100%;
  margin-bottom: 0;
}

/* Boxed panels: checkout billing column + My Account content area */
.woocommerce-checkout #customer_details .col-1,
.woocommerce-account.logged-in .woocommerce-MyAccount-content {
  background: var(--color-surface);
  border: 1px solid var(--neutral-border);
  border-radius: var(--border-radius-medium);
  padding: 24px;
}
.woocommerce-checkout #customer_details .col-2 {
  display: none;
}

.woocommerce-cart .cart-collaterals .cart_totals {
  background: transparent;
  border: 0;
  padding: 0;
}

.woocommerce-checkout #payment {
  background: transparent;
  border-radius: 0;
}

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

.woocommerce-checkout #payment div.payment_box::before {
  border-bottom-color: var(--color-surface-muted);
}

.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order {
  float: none;
  width: 100%;
  margin-top: 10px;
}

/* Quantity input */
.woocommerce .quantity .qty {
  border: 1px solid var(--neutral-border);
  border-radius: var(--border-radius-standard);
  padding: 8px;
}

/* Native spinner arrows are redundant once the qty-btn +/- buttons exist */
.woocommerce .quantity .qty::-webkit-inner-spin-button,
.woocommerce .quantity .qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.woocommerce .quantity .qty[type='number'] {
  -moz-appearance: textfield;
}

/* Logged-in account navigation */
.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--color-surface);
  border: 1px solid var(--neutral-border);
  border-radius: var(--border-radius-medium);
  padding: 8px;
}

.woocommerce-account.logged-in .woocommerce-MyAccount-navigation a {
  display: block;
  padding: 10px 14px;
  border-radius: var(--border-radius-standard);
  color: var(--color-secondary);
}

.woocommerce-account.logged-in .woocommerce-MyAccount-navigation .is-active a,
.woocommerce-account.logged-in .woocommerce-MyAccount-navigation a:hover {
  background: var(--color-surface-muted);
  color: var(--color-primary);
  text-decoration: none;
}

/* Shop grid + product cards */
.woocommerce ul.products li.product {
  background: var(--color-surface);
  border: 1px solid var(--neutral-border);
  border-radius: var(--border-radius-medium);
  padding: 16px;
  text-align: center;
}

.woocommerce ul.products li.product img {
  border-radius: var(--border-radius-standard);
  margin-bottom: 12px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: var(--small-heading-font-size);
  font-weight: var(--small-font-weight);
  padding: 0;
}

.woocommerce ul.products li.product .price {
  color: var(--color-primary);
  font-weight: var(--heading-font-weight);
}

/* Single product */
.woocommerce div.product .product_title,
.raabta-product__price {
  font-size: var(--main-heading-font-size);
  font-weight: var(--heading-font-weight);
}

.woocommerce div.product p.price {
  color: var(--color-primary);
  font-size: var(--sub-heading-font-size);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: var(--color-surface);
  border-color: var(--neutral-border);
  border-radius: var(--border-radius-standard) var(--border-radius-standard) 0 0;
}

.woocommerce div.product .woocommerce-tabs .panel {
  background: var(--color-surface);
  border: 1px solid var(--neutral-border);
  border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) var(--border-radius-medium);
  padding: 24px;
}

/* Notices (global) */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
  border-radius: var(--border-radius-standard);
  background: var(--color-surface);
  border: 1px solid var(--neutral-border);
  border-top-width: 1px;
}

.woocommerce-message {
  border-inline-start: 4px solid var(--color-info);
}

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

.woocommerce-error {
  border-inline-start: 4px solid var(--color-danger);
}

.woocommerce-info {
  border-inline-start: 4px solid var(--color-accent);
}

/* ==========================================================================
   Card designer product page (template-parts/woocommerce/product-designer.php)
   Layout comes from the utility classes in the markup; this block only holds
   what utilities cannot express (box skins, previews, slider, swatches).
   ========================================================================== */
.raabta-product__intro {
  max-width: 720px;
  margin-inline: auto;
}

.raabta-product__title {
  font-size: var(--main-heading-font-size);
  font-weight: var(--heading-font-weight);
  line-height: var(--heading-line-height);
}

.raabta-product__subtitle,
.raabta-product__desc {
  color: var(--neutral-grey);
}

/* JS-toggled panels use the `hidden` attribute; beat any d-flex/d-grid on the same element */
.raabta-product [hidden] {
  display: none !important;
}

/* Same box skin as .raabta-cart__item / .raabta-cart__totals-row */
.raabta-product__box {
  background: var(--color-surface);
  border: 1px solid var(--neutral-border);
  border-radius: var(--border-radius-standard);
}

.raabta-product__box-title {
  font-size: var(--small-heading-font-size);
  font-weight: var(--heading-font-weight);
}

.raabta-product__required {
  color: var(--color-danger);
}

/* Card Type = WooCommerce variation, rendered as radio cards */
.raabta-product__type {
  cursor: pointer;
}

.raabta-product__type input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.raabta-product__type-card {
  border: 1px solid var(--neutral-border);
  border-radius: var(--border-radius-standard);
  padding: 16px;
  background: var(--color-surface);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.raabta-product__type input:checked + .raabta-product__type-card {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.raabta-product__type-name {
  font-weight: var(--small-font-weight);
}

.raabta-product__type-price {
  font-weight: var(--heading-font-weight);
  color: var(--color-primary);
  white-space: nowrap;
}

.raabta-product__type-badge {
  font-size: var(--mini-main-content);
  font-weight: var(--small-font-weight);
  color: var(--color-secondary);
  background: var(--color-accent);
  border-radius: var(--border-radius-standard);
  padding: 2px 8px;
}

/* Digital: product details — narrow media column so a tall phone mockup
   doesn't stretch the panel; the image is height-capped and centred. */
.raabta-product__details-grid {
  grid-template-columns: 240px minmax(0, 1fr);
}

.raabta-product__details-image {
  width: auto;
  max-width: 100%;
  max-height: 340px;
  border-radius: var(--border-radius-standard);
}

.raabta-product__desc p {
  margin-bottom: 10px;
}

.raabta-product__desc ul {
  list-style: disc;
  padding-left: 20px;
}

.raabta-product__desc li,
.raabta-product__about li {
  margin-bottom: 6px;
}

/* Segmented tabs */
.raabta-product__tabs {
  background: var(--color-surface);
  border: 1px solid var(--neutral-border);
  border-radius: var(--border-radius-standard);
  padding: 6px;
}

.raabta-product__tab {
  flex: 1;
  padding: 12px 16px;
  border: 0;
  border-radius: var(--border-radius-standard);
  background: transparent;
  color: var(--color-secondary);
  font-weight: var(--medium-font-weight);
  cursor: pointer;
}

.raabta-product__tab.is-active {
  background: var(--gradient-primary);
  color: var(--color-surface);
}

/* Designer: 380px controls | sticky live preview */
.raabta-product__designer {
  grid-template-columns: 380px minmax(0, 1fr);
  align-items: start;
}

.raabta-product__designer--single {
  grid-template-columns: minmax(0, 1fr);
}

.raabta-product__preview {
  top: calc(var(--header-height) + 20px);
}

/* Swatches + color pickers */
.raabta-product__swatch {
  width: 36px;
  height: 36px;
  border-radius: var(--border-radius-full);
  border: 2px solid var(--neutral-border);
  padding: 3px;
  background: var(--color-surface);
  cursor: pointer;
}

.raabta-product__swatch span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--c);
}

.raabta-product__swatch.is-selected,
.raabta-product__dropzone:hover,
.raabta-product__slide.is-selected {
  border-color: var(--color-primary);
}

.raabta-product__color {
  height: 44px;
  width: 100%;
  padding: 4px;
  border: 1px solid var(--neutral-border);
  border-radius: var(--border-radius-standard);
  background: var(--color-surface);
  cursor: pointer;
}

.raabta-product__color::-webkit-color-swatch-wrapper {
  padding: 0;
}

.raabta-product__color::-webkit-color-swatch {
  border: 0;
  border-radius: 6px;
}

/* Upload dropzones (logo + design file) */
.raabta-product__dropzone {
  border: 1px dashed var(--neutral-grey);
  border-radius: var(--border-radius-standard);
  padding: 28px 16px;
  background: var(--color-surface-muted);
  color: var(--neutral-grey);
  cursor: pointer;
}

.raabta-product__dropzone--large {
  padding: 40px 16px;
}

.raabta-product__dropzone-icon {
  font-size: var(--main-heading-font-size);
  line-height: 1;
}

/* Logo size S / M / L */
.raabta-product__size {
  width: 40px;
  height: 36px;
  border: 1px solid var(--neutral-border);
  border-radius: var(--border-radius-standard);
  background: var(--color-surface);
  font-weight: var(--small-font-weight);
  cursor: pointer;
}

.raabta-product__size.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-surface);
}

.raabta-product__card {
  aspect-ratio: 1.586;
  overflow: hidden;
  border-radius: var(--border-radius-medium);
  background: var(--img, none) center / cover no-repeat, var(--bg, var(--color-secondary));
  color: var(--tc, var(--color-surface));
  box-shadow: 0 20px 40px color-mix(in srgb, var(--color-secondary) 14%, transparent);
}
.raabta-product__card.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-secondary) 25%, transparent);
  z-index: 3;
}

.raabta-product__card.is-loading::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  width: 18px;
  height: 18px;
  border: 2px solid color-mix(in srgb, var(--tc, var(--color-surface)) 40%, transparent);
  border-top-color: var(--tc, var(--color-surface));
  border-radius: var(--border-radius-full);
  z-index: 4;
  animation: raabta-spin 0.7s linear infinite;
}

@keyframes raabta-spin {
  to { transform: rotate(360deg); }
}

.raabta-product__card--back {
  padding: 18px;
}

.raabta-product__card-label {
  font-size: var(--small-main-content);
  font-weight: var(--small-font-weight);
  color: var(--neutral-grey);
}

.raabta-product__card-nfc {
  top: 14px;
  right: 16px;
  font-size: var(--sub-heading-font-size);
  line-height: 1;
  color: var(--ic, var(--color-surface));
  transform: rotate(90deg);
}

.raabta-product__card-logo {
  inset: 0;
}

.raabta-product__card-logo img {
  width: var(--logo, 64px);
  height: var(--logo, 64px);
  object-fit: contain;
}

.raabta-product__card-logo-fallback {
  width: var(--logo, 64px);
  height: var(--logo, 64px);
  border-radius: var(--border-radius-full);
  border: 2px solid var(--color-accent);
  font-size: var(--mini-main-content);
  font-weight: var(--heading-font-weight);
  letter-spacing: 0.08em;
}

.raabta-product__card-logo--back img,
.raabta-product__card-logo--back .raabta-product__card-logo-fallback {
  width: calc(var(--logo, 64px) * 0.6);
  height: calc(var(--logo, 64px) * 0.6);
  font-size: 9px;
}

.raabta-product__card[data-logo-size="medium"] {
  --logo: 88px;
}

.raabta-product__card[data-logo-size="large"] {
  --logo: 112px;
}

.raabta-product__card-name {
  font-size: var(--small-heading-font-size);
  font-weight: var(--heading-font-weight);
}

.raabta-product__card-meta {
  font-size: var(--mini-main-content);
  opacity: 0.85;
}

.raabta-product__card-qr {
  width: 56px;
  height: 56px;
  flex: none;
}

.raabta-product__card-qr canvas {
  width: 100% !important;
  height: 100% !important;
}

/* Template slider (card-skins): scroll-snap track + arrows */
.raabta-product__slider {
  padding-inline: 36px;
}

.raabta-product__track {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.raabta-product__track::-webkit-scrollbar {
  display: none;
}

.raabta-product__slide {
  flex: 0 0 120px;
  aspect-ratio: 1.586;
  border: 2px solid var(--neutral-border);
  border-radius: var(--border-radius-standard);
  background: var(--color-surface);
  overflow: hidden;
  scroll-snap-align: start;
  cursor: pointer;
}

.raabta-product__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.raabta-product__slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: 1px solid var(--neutral-border);
  border-radius: var(--border-radius-full);
  background: var(--color-surface);
  color: var(--color-secondary);
  cursor: pointer;
  z-index: 1;
}

.raabta-product__slider-arrow--prev {
  left: 0;
}

.raabta-product__slider-arrow--next {
  right: 0;
}

/* Buy bar (price size/weight is shared with the product title, see "Single product") */
.raabta-product__price del {
  font-size: var(--main-content);
  color: var(--neutral-grey);
  margin-right: 6px;
}

.raabta-product__buy .single_add_to_cart_button {
  min-width: 200px;
}

/* About / SEO text under the buy bar: the product's main Description.
   Editor content, so restore the list bullets the theme reset removed. */
.raabta-product__about h2,
.raabta-product__about h3 {
  font-weight: var(--heading-font-weight);
  line-height: var(--heading-line-height);
  margin: 20px 0 8px;
}

.raabta-product__about h2:first-child,
.raabta-product__about h3:first-child {
  margin-top: 0;
}

.raabta-product__about h2 {
  font-size: var(--sub-heading-font-size);
}

.raabta-product__about h3 {
  font-size: var(--small-heading-font-size);
}

.raabta-product__about p {
  color: var(--neutral-grey);
  margin-bottom: 12px;
}

.raabta-product__about ul {
  list-style: disc;
  padding-left: 20px;
  color: var(--neutral-grey);
}


/* ==========================================================================
   Cart / checkout / thank-you item meta
   - WooCommerce's own variation list ("Card Type: Physical"): one small line
     under the product name.
   - Physical card design: collapsed "Design details" toggle (native
     <details>, no JS) on its own full-width row under the card body — printed
     by cart.php, checkout/review-order.php and order/order-details-item.php
     via raabta_card_design_details().
   ========================================================================== */
.raabta-cart__name .variation,
.raabta-checkout__review-name .variation {
  font-size: var(--small-main-content);
  color: var(--neutral-grey);
  margin: 2px 0 0;
}

.raabta-cart__name .variation dt,
.raabta-checkout__review-name .variation dt {
  display: inline;
  font-weight: var(--medium-font-weight);
}

.raabta-cart__name .variation dd,
.raabta-checkout__review-name .variation dd {
  display: inline;
  margin: 0 10px 0 0;
}

.raabta-cart__name .variation dd p,
.raabta-checkout__review-name .variation dd p {
  display: inline;
  margin: 0;
}

.raabta-cart__design {
  grid-column: 1 / -1;
  width: 100%;
  border-top: 1px solid var(--neutral-border);
  padding-top: 12px;
  margin-top: 4px;
}

.raabta-cart__design summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--small-main-content);
  font-weight: var(--small-font-weight);
  color: var(--color-primary);
}

.raabta-cart__design summary::-webkit-details-marker {
  display: none;
}

.raabta-cart__design summary i {
  font-size: var(--small-heading-font-size);
  transition: transform 0.15s;
}

.raabta-cart__design[open] summary i {
  transform: rotate(180deg);
}

.raabta-cart__design-mode {
  font-weight: var(--content-font-weight);
  color: var(--neutral-grey);
}

.raabta-cart__design-mode::before {
  content: "·";
  margin-right: 8px;
}

.raabta-cart__design-grid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.raabta-cart__design-row {
  background: var(--color-surface-muted);
  border-radius: var(--border-radius-standard);
  padding: 8px 10px;
  min-width: 0;
}

.raabta-cart__design-row--wide {
  grid-column: 1 / -1;
}

.raabta-cart__design-label {
  display: block;
  font-size: var(--mini-main-content);
  color: var(--neutral-grey);
  line-height: 1.3;
}

.raabta-cart__design-value {
  font-size: var(--small-main-content);
  font-weight: var(--medium-font-weight);
  overflow-wrap: anywhere;
}

.raabta-cart__swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: var(--border-radius-full);
  background: var(--c);
  border: 1px solid var(--neutral-border);
  vertical-align: -2px;
  margin-right: 6px;
}

.raabta-cart__design-thumb {
  display: inline-block;
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 6px;
  background: var(--color-surface);
  border: 1px solid var(--neutral-border);
  padding: 3px;
  vertical-align: middle;
  margin-top: 4px;
}

.raabta-cart__design-thumb--card {
  width: 64px;
  object-fit: cover;
  margin: 0 0 0 8px;
}
@media (max-width: 768px) {
  .entry-content {
    padding: 0;
  }

  .woocommerce-checkout #customer_details .col-1,
  .woocommerce-account.logged-in .woocommerce-MyAccount-content {
    padding: 16px;
  }
}
@media (max-width: 480px) {
  .raabta-cart__item {
    grid-template-columns: 64px 1fr;
    grid-template-areas:
      "thumb name"
      "thumb qty"
      "subtotal subtotal";
    row-gap: 10px;
    column-gap: 12px;
    padding: 16px;
  }

  .raabta-cart__thumbnail img {
    width: 64px;
    height: 64px;
  }

  .raabta-cart__subtotal {
    text-align: left;
  }
}
/* Card designer product page */
@media (max-width: 900px) {
  .raabta-product__designer {
    grid-template-columns: minmax(0, 1fr);
  }

  .raabta-product__preview {
    position: static;
  }
}

@media (max-width: 600px) {
  .raabta-product .grid-cols-2,
  .raabta-product .grid-cols-3,
  .raabta-product__details-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .raabta-product__details-image {
    max-height: 260px;
  }

  .raabta-product__box {
    padding: 16px;
  }

  .raabta-product__title {
    font-size: var(--sub-heading-font-size);
  }
  .raabta-product__preview {
    order: -1;
    position: sticky;
    top: var(--header-height);
    z-index: 5;
    margin: 0 -16px;
  }

  .raabta-product__preview .raabta-product__box {
    border-radius: 0;
    padding: 10px 16px 12px;
    background: color-mix(in srgb, var(--color-surface) 92%, transparent);
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--color-secondary) 35%, transparent);
  }

  .raabta-product__preview .grid-cols-2 {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 10px;
    scrollbar-width: none;
  }

  .raabta-product__preview .grid-cols-2::-webkit-scrollbar {
    display: none;
  }

  .raabta-product__preview .grid-cols-2 > * {
    flex: 0 0 62%;
    scroll-snap-align: start;
    gap: 4px;
  }

  .raabta-product__card {
    box-shadow: 0 8px 18px color-mix(in srgb, var(--color-secondary) 18%, transparent);
  }

  .raabta-product__card--back {
    padding: 12px;
  }

  .raabta-product__card-label {
    font-size: 11px;
  }

  .raabta-product__card-name {
    font-size: var(--mini-main-content);
  }

  .raabta-product__card-meta {
    font-size: 9px;
  }

  .raabta-product__card-qr,
  .raabta-product__card-qr canvas {
    width: 44px !important;
    height: 44px !important;
  }
  .raabta-product__tabs {
    gap: 4px;
  }

  .raabta-product__tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 6px;
    font-size: var(--small-main-content);
    white-space: nowrap;
  }

  .raabta-product__tab i {
    font-size: var(--small-heading-font-size);
    line-height: 1;
    display: inline-flex;
  }

  .raabta-product__tab-extra {
    display: none;
  }
  .raabta-product__type-card {
    flex-direction: column;
    gap: 6px;
  }

  .raabta-product__type-name {
    flex-wrap: wrap;
  }

  .raabta-product__type-badge {
    white-space: nowrap;
  }
  .raabta-product__color-grid.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .raabta-product__color-grid.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .raabta-product__swatch {
    width: 36px;
    height: 36px;
  }
  .raabta-product__buy > div:first-child,
  .raabta-product__buy-actions {
    flex: 1 1 100%;
  }

  .raabta-product__buy-actions {
    flex-wrap: wrap;
  }

  .raabta-product__buy .single_add_to_cart_button {
    flex: 1 1 100%;
    min-width: 0;
  }
}