/* DCE product page: behaviour and shapes that Elementor has no control for. No colours, fonts or sizes of the design. */

.dce-pe [hidden] { display: none !important; }

/* The price of the chosen variant is shown in the price at the top; hide WooCommerce's second copy. */
.dce-pe form.cart .woocommerce-variation-price { display: none; }

/* Quantity: border and background are copied from the Elementor "Quantity" style by the script. */
.dce-pe form.cart .quantity.dce-qty { display: inline-flex; flex: 0 0 auto; align-items: stretch; overflow: hidden; }
.dce-pe form.cart .quantity.dce-qty input.qty { border: 0 !important; background: transparent !important; text-align: center; -moz-appearance: textfield; appearance: textfield; min-width: 2.2em; width: 2.6em; }
.dce-pe form.cart .quantity.dce-qty input.qty::-webkit-outer-spin-button,
.dce-pe form.cart .quantity.dce-qty input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dce-pe form.cart .quantity.dce-qty button.dce-qty-btn { min-width: 44px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; font: inherit; letter-spacing: 0; cursor: pointer; }

/* Description: shortened until "read the full description" is used. */
.dce-pe .dce-clamp.is-clamped { max-height: var(--dce-clamp, 11.5em); overflow: hidden; }

/* Flavour and aroma labels: outline in the text colour of the widget. */
.dce-pe .dce-chip { display: inline-block; margin: 0 8px 8px 0; padding: 0.4em 0.85em; border: 1px solid; border-color: color-mix(in srgb, currentColor 28%, transparent); border-radius: 6px; }

/* Phone: fold blocks with class dce-acc. The arrow takes the heading colour. */
.dce-pe .dce-acc-btn { display: none; }
@media (max-width: 767px) {
  .dce-pe .dce-acc-head .elementor-heading-title { display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
  .dce-pe .dce-acc-btn { display: inline-flex; width: 44px; height: 44px; margin: -10px -12px -10px 0; padding: 0; border: 0; background: none; color: inherit; align-items: center; justify-content: center; cursor: pointer; }
  .dce-pe .dce-acc-btn::before { content: ""; width: 9px; height: 9px; border-left: 2px solid; border-top: 2px solid; transform: translateY(3px) rotate(45deg); }
  .dce-pe .dce-acc.is-closed .dce-acc-btn::before { transform: translateY(-3px) rotate(225deg); }
  .dce-pe .dce-acc.is-closed .dce-acc-body { display: none; }
}