/*
 * Divi Ecommerce Modules shared frontend design primitives.
 *
 * Typography consumes Divi's native global font variables: semantic headings
 * follow the Divi heading font and all other text follows the Divi body font.
 * Module styles may change layout, but should consume these defaults for shared UI.
 */
:where(.dem-shell, .dem-mini-cart, .dem-wishlist-view, .dem-account-login) {
  font-family: var(--et_global_body_font, inherit);
  --dem-design-primary-background: #000;
  --dem-design-primary-text: #fff;
  --dem-design-primary-icon: #fff;
  --dem-design-secondary-background: #fff;
  --dem-design-secondary-text: #000;
  --dem-design-secondary-icon: #000;
  --dem-design-secondary-border: #000;
  --dem-design-badge-background: rgba(0, 0, 0, .05);
  --dem-design-badge-text: #000;
  --dem-design-button-radius: 8px;
  --dem-design-button-min-height: 44px;
  --dem-design-button-padding-block: 10px;
  --dem-design-button-padding-inline: 16px;
  --dem-design-button-gap: 8px;
  --dem-design-button-font-size: 13px;
  --dem-design-button-font-weight: 650;
  --dem-design-small-font-size: 12px;
  --dem-design-small-line-height: 1.4;
  --dem-design-small-font-weight: 500;
  --dem-design-badge-radius: 999px;
  --dem-design-badge-padding-block: 5px;
  --dem-design-badge-padding-inline: 8px;
  --dem-design-badge-font-size: 11px;
  --dem-design-badge-font-weight: 600;
  --dem-design-transition: 180ms ease;
  --dem-choice-paper: #fff;
  --dem-choice-accent: #000;
  --dem-choice-indicator: #fff;
  --dem-choice-size: 18px;
  --dem-choice-radius: 3px;
  --dem-choice-ring-size: 2px;
  --dem-field-background: #fff;
  --dem-field-border: #e7e7e9;
  --dem-field-border-focus: #18191d;
  --dem-field-radius: 8px;
  --dem-field-min-height: 48px;
  --dem-field-text: #18191d;
  --dem-field-placeholder: #6d7178;
  --dem-field-icon-size: 18px;
  --dem-field-padding-inline: 14px;
  --dem-field-select-padding-inline: 18px;
}

:where(.dem-shell, .dem-mini-cart, .dem-wishlist-view, .dem-account-login) :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--et_global_heading_font, inherit);
}

:where(.dem-shell, .dem-mini-cart, .dem-wishlist-view, .dem-account-login) :where(button, input, select, textarea) {
  font-family: inherit;
}

.dem-ui-button,
.dem-account-login.woocommerce :is(button,a).dem-ui-button {
  align-items: center;
  appearance: none;
  border-radius: var(--dem-design-button-radius);
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: var(--dem-design-button-font-size);
  font-weight: var(--dem-design-button-font-weight);
  gap: var(--dem-design-button-gap);
  justify-content: center;
  line-height: 1.2;
  min-height: var(--dem-design-button-min-height);
  padding: var(--dem-design-button-padding-block) var(--dem-design-button-padding-inline);
  text-align: center;
  text-decoration: none;
  transition: background-color var(--dem-design-transition), border-color var(--dem-design-transition), color var(--dem-design-transition), box-shadow var(--dem-design-transition);
}

.dem-ui-button.dem-ui-button--primary,
.dem-account-login.woocommerce :is(button,a).dem-ui-button--primary {
  background: var(--dem-design-primary-background);
  border: 1px solid var(--dem-design-primary-background);
  color: var(--dem-design-primary-text);
}

.dem-ui-button.dem-ui-button--secondary,
.dem-account-login.woocommerce :is(button,a).dem-ui-button--secondary {
  background: var(--dem-design-secondary-background);
  border: 1px solid var(--dem-design-secondary-border);
  color: var(--dem-design-secondary-text);
}

/*
 * Divi Theme Builder's site-wide anchor color is more specific than a normal
 * component class. Restore the shared button defaults inside that context;
 * generated module order-class Design rules remain more specific than these.
 */
.et-db #et-boc .et-l a.dem-ui-button--primary {
  color: var(--dem-design-primary-text);
}

.et-db #et-boc .et-l .dem-account-login a.dem-ui-button--primary {
  color: var(--dem-design-primary-text);
}

.et-db #et-boc .et-l a.dem-ui-button--secondary {
  color: var(--dem-design-secondary-text);
}

.et-db #et-boc .et-l .dem-account-login a.dem-ui-button--secondary {
  color: var(--dem-design-secondary-text);
}

/*
 * Divi's Visual Builder canvases apply legacy generic `.et_pb_button` and
 * `.et-pb-icon` rules at a higher specificity than module CSS. Restore the
 * shared defaults only in the editor. Generated order-class Design rules keep
 * control, and explicit ProductDisplay padding is marked in rendered config.
 */
body.et-db.et-fb #et-boc .et-l :is(.dem-shell, .dem-mini-cart, .dem-wishlist-view, .dem-account-login) .dem-ui-button {
  align-items: center;
  appearance: none;
  border-radius: var(--dem-design-button-radius);
  display: inline-flex;
  font-family: inherit;
  font-size: var(--dem-design-button-font-size);
  font-weight: var(--dem-design-button-font-weight);
  gap: var(--dem-design-button-gap);
  justify-content: center;
  line-height: 1.2 !important;
  min-height: var(--dem-design-button-min-height);
  padding: var(--dem-design-button-padding-block) var(--dem-design-button-padding-inline);
  text-align: center;
  text-decoration: none;
}

body.et-db.et-fb #et-boc .et-l :is(.dem-shell, .dem-mini-cart, .dem-wishlist-view, .dem-account-login) .dem-ui-button--primary {
  background: var(--dem-design-primary-background);
  border: 1px solid var(--dem-design-primary-background);
  color: var(--dem-design-primary-text);
}

body.et-db.et-fb #et-boc .et-l :is(.dem-shell, .dem-mini-cart, .dem-wishlist-view, .dem-account-login) .dem-ui-button--secondary {
  background: var(--dem-design-secondary-background);
  border: 1px solid var(--dem-design-secondary-border);
  color: var(--dem-design-secondary-text);
}

body.et-db.et-fb #et-boc .et-l .dem-shell .dem-quick-add:not([data-dem-custom-padding="1"]) {
  padding: var(--dem-design-button-padding-block) var(--dem-design-button-padding-inline) !important;
}

body.et-db.et-fb #et-boc .et-l .dem-shell .dem-card-quick-view {
  align-items: center;
  background: rgba(255, 255, 255, .94);
  border: 0;
  border-radius: 50%;
  color: var(--dem-ink);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: var(--dem-design-button-font-size);
  height: 30px;
  justify-content: center;
  line-height: 1 !important;
  min-height: 0;
  width: 30px;
}

body.et-db.et-fb.et-tb #et-boc .et-l .dem-shell .dem-card-quick-view:not([data-dem-custom-padding="1"]) {
  padding: 0 !important;
}

/*
 * View Product is a Divi button element for Design-tab compatibility, but its
 * untouched ProductDisplay presentation is a quiet secondary action. Restore
 * that default in the backend Theme Builder canvas without outranking Divi's
 * generated important rules for explicit user styling.
 */
body.et-db.et-fb.et-tb #et-boc .et-l .dem-shell :where(.dem-view-product) {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--dem-design-button-radius, 8px);
  color: var(--dem-ink);
  display: inline-flex;
  font-family: inherit;
  font-size: var(--dem-design-button-font-size, 13px);
  font-weight: var(--dem-design-button-font-weight, 650);
  gap: var(--dem-design-button-gap, 8px);
  justify-content: center;
  min-height: var(--dem-design-button-min-height, 44px);
  text-align: center;
  text-decoration: none;
}

body.et-db.et-fb.et-tb #et-boc .et-l .dem-shell .dem-view-product:not([data-dem-custom-padding="1"]) {
  padding: var(--dem-design-button-padding-block, 10px) var(--dem-design-button-padding-inline, 16px) !important;
}

@media (max-width: 980px) {
  body.et-db.et-fb.et-tb #et-boc .et-l .dem-shell :where(.dem-view-product) {
    min-height: 42px;
  }

  body.et-db.et-fb.et-tb #et-boc .et-l .dem-shell .dem-view-product:not([data-dem-custom-padding="1"]) {
    padding: 9px 10px !important;
  }
}

body.et-db.et-fb.et-tb #et-boc .et-l .dem-module-icon {
  font-size: var(--dem-module-icon-size, 19px);
  line-height: 1;
}

.dem-button-design-icon .dem-module-icon {
  --dem-module-icon-size: 1em;
}

.dem-wishlist-visual .dem-module-icon,
.dem-card-quick-view .dem-module-icon {
  --dem-module-icon-size: 13px;
}

.dem-ui-field-icon .dem-module-icon {
  --dem-module-icon-size: var(--dem-field-icon-size, 18px);
}

.dem-ui-button :where(svg, .dem-button-design-icon, .dem-module-icon, [class*="__button-icon"]) {
  align-items: center;
  color: currentColor;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1em;
  height: 1em;
  justify-content: center;
  line-height: 1;
  width: 1em;
}

:where(.dem-ui-badge) {
  background: var(--dem-design-badge-background);
  border-radius: var(--dem-design-badge-radius);
  color: var(--dem-design-badge-text);
  font-family: inherit;
  font-size: var(--dem-design-badge-font-size);
  font-weight: var(--dem-design-badge-font-weight);
  letter-spacing: normal;
  line-height: 1;
  padding: var(--dem-design-badge-padding-block) var(--dem-design-badge-padding-inline);
  text-transform: none;
}

:where(.dem-ui-meta) {
  font-family: inherit;
  font-size: var(--dem-design-small-font-size);
  font-weight: var(--dem-design-small-font-weight);
  line-height: var(--dem-design-small-line-height);
}

:where(.dem-ui-field-wrap) {
  display: block;
  position: relative;
}

.dem-account-login.woocommerce form :is(input, select, textarea).dem-ui-field,
:is(.dem-shell, .dem-wishlist-view, .dem-account-login) .dem-ui-field {
  background: var(--dem-field-background);
  border: 1px solid var(--dem-field-border);
  border-radius: var(--dem-field-radius);
  color: var(--dem-field-text);
  min-height: var(--dem-field-min-height);
  padding: 11px var(--dem-field-padding-inline);
  transition: border-color var(--dem-design-transition), box-shadow var(--dem-design-transition);
  width: 100%;
}

:is(.dem-shell, .dem-wishlist-view, .dem-account-login) .dem-ui-field::placeholder {
  color: var(--dem-field-placeholder);
  opacity: 1;
}

:is(.dem-shell, .dem-wishlist-view, .dem-account-login) .dem-ui-field:focus-visible {
  border-color: var(--dem-field-border-focus);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--dem-field-border-focus) 12%, transparent);
  outline: 0;
}

:is(.dem-shell, .dem-wishlist-view, .dem-account-login) .dem-ui-field:disabled {
  cursor: not-allowed;
  opacity: .55;
}

:is(.dem-shell, .dem-wishlist-view, .dem-account-login) .dem-ui-field-wrap--search .dem-ui-field {
  padding-inline-start: calc(var(--dem-field-padding-inline) + var(--dem-field-icon-size) + 10px);
}

:where(.dem-ui-field-icon) {
  align-items: center;
  color: var(--dem-field-placeholder);
  display: inline-flex;
  font-size: var(--dem-field-icon-size);
  height: var(--dem-field-icon-size);
  inset-inline-start: var(--dem-field-padding-inline);
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--dem-field-icon-size);
  z-index: 1;
}

:where(.dem-ui-field-icon) :where(svg, .dem-module-icon) {
  display: block;
  height: 100%;
  width: 100%;
}

:is(.dem-shell, .dem-wishlist-view, .dem-account-login) .dem-ui-field--select {
  appearance: none;
  padding-inline-start: var(--dem-field-select-padding-inline);
  padding-inline-end: calc(var(--dem-field-select-padding-inline) + 24px);
}

:where(.dem-ui-field-wrap--select)::after {
  border-block-end: 1.5px solid currentColor;
  border-inline-end: 1.5px solid currentColor;
  content: "";
  height: 7px;
  inset-inline-end: var(--dem-field-select-padding-inline);
  pointer-events: none;
  position: absolute;
  top: calc(50% - 2px);
  transform: translateY(-50%) rotate(45deg);
  width: 7px;
}

.dem-ui-button[disabled],
.dem-ui-button.disabled,
.dem-ui-button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .55;
}

:is(.dem-shell, .dem-wishlist-view, .dem-account-login) .dem-choice-control {
  appearance: none;
  background: var(--dem-choice-paper);
  border: 1.5px solid #8d928e;
  cursor: pointer;
  display: grid;
  height: var(--dem-choice-size);
  margin: 0;
  place-content: center;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
  width: var(--dem-choice-size);
}

:is(.dem-shell, .dem-wishlist-view, .dem-account-login) .dem-choice-control[type="checkbox"] { border-radius: var(--dem-choice-radius); }
:is(.dem-shell, .dem-wishlist-view, .dem-account-login) .dem-choice-control[type="radio"] { border-radius: 50%; }
:is(.dem-shell, .dem-wishlist-view, .dem-account-login) .dem-choice-control::after { content: ""; display: block; transform: scale(0); transition: transform .14s ease; }
:is(.dem-shell, .dem-wishlist-view, .dem-account-login) .dem-choice-control[type="checkbox"]::after { border: solid var(--dem-choice-indicator); border-width: 0 2px 2px 0; height: 8px; transform: rotate(45deg) scale(0); width: 4px; }
:is(.dem-shell, .dem-wishlist-view, .dem-account-login) .dem-choice-control[type="radio"]::after { background: var(--dem-choice-indicator); border-radius: 50%; height: 7px; width: 7px; }
:is(.dem-shell, .dem-wishlist-view, .dem-account-login) .dem-choice-control:checked { background: var(--dem-choice-accent); border-color: var(--dem-choice-accent); box-shadow: 0 0 0 var(--dem-choice-ring-size) color-mix(in srgb,var(--dem-choice-accent) 16%,transparent); }
:is(.dem-shell, .dem-wishlist-view, .dem-account-login) .dem-choice-control:checked::after { transform: scale(1); }
:is(.dem-shell, .dem-wishlist-view, .dem-account-login) .dem-choice-control[type="checkbox"]:checked::after { transform: rotate(45deg) scale(1); }
:is(.dem-shell, .dem-wishlist-view, .dem-account-login) .dem-choice-control:hover:not(:disabled) { border-color: var(--dem-choice-accent); }
:is(.dem-shell, .dem-wishlist-view, .dem-account-login) .dem-choice-control:focus-visible { outline: 2px solid var(--dem-choice-accent); outline-offset: 3px; }
:is(.dem-shell, .dem-wishlist-view, .dem-account-login) .dem-choice-control:disabled { cursor: not-allowed; opacity: .55; }