/* ==========================================================================
   Dynasty — Single Product
   Layout objetivo: Single.jpg del Figma.
   IMPORTANT: muchas reglas usan !important porque Cartsy parent + RnB plugin
   inyectan reglas con alta especificidad sobre `.summary`, `.entry-summary`,
   `.date-time-picker`, `.redq-*` y `.payable-*` (clases reales del plugin
   RnB, extraídas de _tema-actual/cartsy/dist/cartsy_rnb_style.css).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Reset del wrapper que Woo/Cartsy mete arriba.
   -------------------------------------------------------------------------- */

.dynasty-single-main {
    background: var(--dynasty-white, #FFFFFF);
}

.dynasty-single {
    padding: 32px 0 0;
}

.dynasty-single__wrap {
    padding-bottom: 40px;
}

/* --------------------------------------------------------------------------
   Grid principal
   Desktop: LEFT (pill + title + price + image)  |  RIGHT (form + disclaimer)
   Mobile: stacked
   -------------------------------------------------------------------------- */

.dynasty-single__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
}

@media (min-width: 1024px) {
    .dynasty-single__grid {
        grid-template-columns: minmax(0, 1.15fr) minmax(380px, 1fr);
        gap: 48px;
    }
}

.dynasty-single__left {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.dynasty-single__right {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* --------------------------------------------------------------------------
   Pill "Most popular" — caja con borde claro (NO el eyebrow gold antiguo)
   -------------------------------------------------------------------------- */

.dynasty-single__pill {
    display: inline-block;
    align-self: flex-start;
    border: 1px solid #D8D8D8;
    border-radius: 8px;
    padding: 7px 16px;
    font-family: var(--dynasty-font-body, "Raleway", sans-serif);
    font-size: 11px;
    font-weight: 400;
    color: #2A2A2A;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.4;
    background: var(--dynasty-white, #FFFFFF);
}

/* --------------------------------------------------------------------------
   Heading: título grande + precio en flex row, alineados al top.
   En mobile se apilan automáticamente por flex-wrap.
   -------------------------------------------------------------------------- */

/* Heading: SIEMPRE en una fila (sin wrap). Title izquierda con flex: 1 (puede
   crecer a 2 líneas) + price derecha con flex-shrink: 0 + white-space: nowrap. */
.dynasty-single__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: nowrap;
    margin: 4px 0 8px;
}

/* H1 — Montserrat Regular. Tamaño reducido para que precio entre en la misma
   fila. min-width: 0 permite que el texto haga wrap interno si es largo. */
.dynasty-single__title {
    font-family: var(--dynasty-font-heading, "Montserrat", sans-serif) !important;
    font-weight: 400 !important;
    font-size: clamp(22px, 2.8vw, 32px) !important;
    line-height: 1.15 !important;
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
    margin: 0 !important;
    padding: 0 !important;
    letter-spacing: -0.01em;
    flex: 1 1 auto;
    min-width: 0;
}

/* Precio — Lógica invertida: el padre tiene tamaño BASE pequeño/gris.
   HTML real del plugin RnB (confirmed 2026-06-02):
   <span class="dynasty-single__price">
     <span class="amount rnb_price_unit_XXX">
       <span class="woocommerce-Price-amount amount">
         <span class="woocommerce-Price-currencySymbol">$</span>158
       </span>
       / Per Hour                                          ← text node SUELTO
     </span>
   </span>
   El sufijo "/ Per Hour" es text node hijo directo del WRAPPER outer
   `.amount.rnb_price_unit_*` — NO del `.woocommerce-Price-amount` interno. */

.dynasty-single__price {
    font-family: var(--dynasty-font-heading, "Montserrat", sans-serif);
    font-weight: 400;
    font-size: 13px;
    line-height: 1.3;
    color: var(--dynasty-gray-brand, #6D6E70);
    letter-spacing: 0;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px 6px;
    max-width: 55%;
    text-align: right;
}

/* Wrapper outer del plugin RnB (`.amount.rnb_price_unit_*`) — chico/gris para
   que el text node suelto "/ Per Hour" herede ese tamaño chico. */
.dynasty-single__price > .amount[class*="rnb_price_unit"],
.dynasty-single__price > .amount[class*="rnb-price-unit"] {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--dynasty-gray-brand, #6D6E70) !important;
    letter-spacing: 0 !important;
}

/* Solo el precio Woo interno (`.woocommerce-Price-amount`) es grande+bold+negro.
   Sus hijos (currency symbol, bdi) heredan. */
.dynasty-single__price .woocommerce-Price-amount,
.dynasty-single__price .woocommerce-Price-amount *,
.dynasty-single__price > ins,
.dynasty-single__price > ins *,
.dynasty-single__price > bdi {
    font-family: var(--dynasty-font-heading, "Montserrat", sans-serif) !important;
    font-size: clamp(22px, 2.6vw, 30px) !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em !important;
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
}

/* Precio "secundario" del rango (max price) — strikethrough chico gris. */
.dynasty-single__price del,
.dynasty-single__price del .woocommerce-Price-amount,
.dynasty-single__price del .amount,
.dynasty-single__price del * {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--dynasty-gray-brand, #6D6E70) !important;
    text-decoration: line-through;
}

/* --------------------------------------------------------------------------
   Media (galería del producto)
   Fondo blanco (sin gris), sin padding extra, sin border-radius.
   La imagen ocupa el ancho completo de su columna.
   -------------------------------------------------------------------------- */

.dynasty-single__media {
    background: transparent;
    padding: 0;
    border-radius: 0;
    position: relative;
    min-height: 400px;
}

.dynasty-single__media > * {
    width: 100% !important;
    max-width: 100% !important;
}

/* Wrapper externo RnB + Woo estándar. */
.dynasty-single__media .cartsy-single-product-thumbs,
.dynasty-single__media .woocommerce-product-gallery,
.dynasty-single__media .woocommerce-product-gallery__wrapper,
.dynasty-single__media .images,
.dynasty-single__media .flex-viewport {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

/* Swiper containers — galería principal del plugin RnB. */
.dynasty-single__media .swiper-container.rnb-product-gallery {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.dynasty-single__media .swiper-container.rnb-product-gallery .swiper-wrapper {
    display: flex !important;
    width: 100% !important;
}

.dynasty-single__media .swiper-container.rnb-product-gallery .swiper-slide {
    flex: 0 0 100% !important;
    width: 100% !important;
    height: auto !important;
}

.dynasty-single__media .swiper-container.rnb-product-gallery .swiper-slide img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
    margin: 0 auto !important;
}

/* Swiper de thumbs — fila horizontal de miniaturas debajo. */
.dynasty-single__media .swiper-container.rnb-product-gallery-thumb {
    margin-top: 16px !important;
    padding: 0 !important;
}

.dynasty-single__media .swiper-container.rnb-product-gallery-thumb .swiper-wrapper {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.dynasty-single__media .swiper-container.rnb-product-gallery-thumb .swiper-slide {
    flex: 0 0 70px !important;
    width: 70px !important;
    height: 60px !important;
    overflow: hidden;
    border-radius: 2px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease, border-color 0.2s ease;
    border: 1px solid #E5E5E5;
}

.dynasty-single__media .swiper-container.rnb-product-gallery-thumb .swiper-slide.swiper-slide-thumb-active,
.dynasty-single__media .swiper-container.rnb-product-gallery-thumb .swiper-slide:hover {
    opacity: 1;
    border-color: var(--dynasty-brand-gold, #D4AF37);
}

.dynasty-single__media .swiper-container.rnb-product-gallery-thumb .swiper-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Woo gallery estándar (cuando no es producto rental). */
.dynasty-single__media .woocommerce-product-gallery__image img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    background: transparent !important;
    display: block !important;
}

.dynasty-single__media .flex-control-thumbs {
    margin-top: 12px !important;
    padding: 0 !important;
    list-style: none !important;
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.dynasty-single__media .flex-control-thumbs li {
    width: 80px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Lupita / magnify trigger — el cliente no la quiere. */
.dynasty-single__media .woocommerce-product-gallery__trigger,
.dynasty-single__media .cartsy-single-product-thumbs .woocommerce-product-gallery__trigger,
.dynasty-single .woocommerce-product-gallery__trigger {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Form box: caja blanca con borde claro que envuelve el form RnB.
   -------------------------------------------------------------------------- */

.dynasty-single__form-box {
    background: var(--dynasty-white, #FFFFFF);
    border: 1px solid #E5E5E5;
    border-radius: 4px;
    padding: 32px;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .dynasty-single__form-box {
        padding: 24px;
    }
}

/* --------------------------------------------------------------------------
   Summary wrapper (donde RnB inyecta el form).
   Aumentamos specificity con `body.single-product` para ganarle al CSS del
   plugin RnB que carga después de mi stylesheet y usa selectores planos.
   -------------------------------------------------------------------------- */

body.single-product .dynasty-single .summary,
.dynasty-single__form.summary,
.dynasty-single__form .summary {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

/* form.cart.rnb-cart: el plugin RnB lo emite con display: flex que tira el
   botón Book Now a la derecha. Forzamos flex column para poder reordenar
   los hijos con `order` (el plugin renderiza date/time antes que locations,
   pero el cliente quiere locations primero). */
body.single-product .dynasty-single .summary form.cart,
body.single-product .dynasty-single .summary form.cart.rnb-cart {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

body.single-product .dynasty-single .summary form.cart > *,
body.single-product .dynasty-single .summary form.cart.rnb-cart > * {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    box-sizing: border-box !important;
}

/* Orden visual de los bloques del form (flex `order`).
   IMPORTANTE: NO usar `:nth-of-type` porque cuenta TODOS los <div> del form
   (incluyendo locations, modals, scripts, etc.), no solo los date-time-pickers.
   En su lugar, asignamos el mismo `order` a los 2 date-time-pickers — el orden
   entre ellos sigue siendo el DOM order (pickup date antes que dropoff date).

   1. Locations (ambos comparten clase .redq-pick-up-location — bug del plugin)
   3. Date/Time pickers (ambos)
   5-9. Deposits / Extras / Categories (ocultos por CSS pero conservamos order)
   50. Loader del plugin
   99. Book Now                                                            */
body.single-product .dynasty-single .summary form .redq-pick-up-location,
body.single-product .dynasty-single .summary form .redq-drop-off-location,
body.single-product .dynasty-single .summary form #pickupLocationPreview,
body.single-product .dynasty-single .summary form #dropoffLocationPreview { order: 1 !important; }

body.single-product .dynasty-single .summary form .date-time-picker        { order: 3 !important; }

body.single-product .dynasty-single .summary form .redq-quantity           { order: 5 !important; }
body.single-product .dynasty-single .summary form .payable-security_deposites { order: 6 !important; }
body.single-product .dynasty-single .summary form .payable-extras          { order: 7 !important; }
body.single-product .dynasty-single .summary form .payable-categories      { order: 8 !important; }
body.single-product .dynasty-single .summary form .additional-person       { order: 9 !important; }
body.single-product .dynasty-single .summary form .rnb-loader              { order: 50 !important; }
body.single-product .dynasty-single .summary form button[type="submit"],
body.single-product .dynasty-single .summary form .single_add_to_cart_button,
body.single-product .dynasty-single .summary form .btn-book-now            { order: 99 !important; }

/* Notice vacío del plugin (#formError) — no debe ocupar espacio. */
body.single-product .dynasty-single .summary .rnb-notice:empty,
body.single-product .dynasty-single .summary #formError:empty {
    display: none !important;
}

/* Loader del plugin — visible pero sin padding extra. */
body.single-product .dynasty-single .summary .rnb-loader {
    margin: 0 !important;
    padding: 0 !important;
}

/* Ocultar elementos Cartsy/Woo que NO van en el panel derecho del target. */
body.single-product .dynasty-single .summary .yith-wcwl-add-to-wishlist,
body.single-product .dynasty-single .summary .product_meta,
body.single-product .dynasty-single .summary .product-bottom-actions,
body.single-product .dynasty-single .summary .cartsy-wishlist-wrap,
body.single-product .dynasty-single .summary .product-social-share,
body.single-product .dynasty-single .summary .single-product-sharing,
body.single-product .dynasty-single .summary .compare-button,
body.single-product .dynasty-single .summary .product_title,
body.single-product .dynasty-single .summary > .price,
body.single-product .dynasty-single .summary > .woocommerce-product-rating,
body.single-product .dynasty-single .summary .woocommerce-product-details__short-description {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Form RnB — HTML real verificado del plugin (sesión 2026-05-31).
   Structure:
     <form class="cart rnb-cart">
       <div class="payable-inventory rnb-component-wrapper rnb-booking-inventory" style="display:none">...</div>
       <div class="date-time-picker rnb-component-wrapper">
         <h5>Pickup Date & Time</h5>
         <span class="pick-up-date-picker"><i></i><input></span>
         <span class="pick-up-time-picker"><i></i><input></span>
       </div>
       <div class="date-time-picker rnb-component-wrapper">[Dropoff idéntico]</div>
       <input class="inventory-qty-next" style="width:0!important">
       <div class="rnb-loader"><div class="booking-pricing-info" style="display:none"></div></div>
       <input type="hidden" name="currency-symbol">
       <input type="hidden" name="add-to-cart">
       <input type="hidden" name="quote_price">
       <button class="single_add_to_cart_button ... button alt" disabled>Book Now</button>
     </form>
   -------------------------------------------------------------------------- */

/* Headings de cada bloque del form (matchea el diseño objetivo: ~15px,
   regular, color casi negro). */
body.single-product .dynasty-single .summary .date-time-picker h5,
body.single-product .dynasty-single .summary .redq-pick-up-location h5,
body.single-product .dynasty-single .summary .redq-drop-off-location h5,
body.single-product .dynasty-single .summary .redq-quantity h5,
body.single-product .dynasty-single .summary .payable-security_deposites h5,
body.single-product .dynasty-single .summary .payable-extras h5,
body.single-product .dynasty-single .summary .payable-categories h5,
body.single-product .dynasty-single .summary .additional-person h5 {
    font-family: var(--dynasty-font-body, sans-serif) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    letter-spacing: 0;
    text-transform: none !important;
    color: #2A2A2A !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    width: 100% !important;
}

/* Wrapper .date-time-picker: flex column con el <h5> arriba y los 2 <span>s
   abajo en una fila (Date | Time). */
body.single-product .dynasty-single .summary .date-time-picker,
body.single-product .dynasty-single .summary .date-time-picker.rnb-component-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 14px !important;
    width: 100% !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-sizing: border-box !important;
}

body.single-product .dynasty-single .summary .date-time-picker > h5 {
    flex: 1 0 100% !important;
    width: 100% !important;
    margin: 0 0 6px !important;
}

/* Date/Time spans: en desktop cada uno 50% - gap (Date | Time en fila).
   En mobile: 100% (apilados 1 por fila para mejor usabilidad). */
body.single-product .dynasty-single .summary .date-time-picker > .pick-up-date-picker,
body.single-product .dynasty-single .summary .date-time-picker > .pick-up-time-picker,
body.single-product .dynasty-single .summary .date-time-picker > .drop-off-date-picker,
body.single-product .dynasty-single .summary .date-time-picker > .drop-off-time-picker {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    background: var(--dynasty-white, #FFFFFF) !important;
    border: 1px solid #D8D8D8 !important;
    padding: 18px 20px !important;
    border-radius: 2px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    min-height: 58px !important;
}

@media (min-width: 768px) {
    body.single-product .dynasty-single .summary .date-time-picker > .pick-up-date-picker,
    body.single-product .dynasty-single .summary .date-time-picker > .pick-up-time-picker,
    body.single-product .dynasty-single .summary .date-time-picker > .drop-off-date-picker,
    body.single-product .dynasty-single .summary .date-time-picker > .drop-off-time-picker {
        flex: 1 1 calc(50% - 7px) !important;
        width: calc(50% - 7px) !important;
        max-width: calc(50% - 7px) !important;
    }
}

/* Iconos: order 2 (a la derecha). */
body.single-product .dynasty-single .summary .pick-up-date-picker > i,
body.single-product .dynasty-single .summary .pick-up-time-picker > i,
body.single-product .dynasty-single .summary .drop-off-date-picker > i,
body.single-product .dynasty-single .summary .drop-off-time-picker > i {
    flex: 0 0 auto !important;
    order: 2 !important;
    color: #2A2A2A !important;
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1 !important;
}

/* Time pickers: mantener el ícono "clock" del plugin (font-awesome fa-clock).
   Sólo aseguramos color/tamaño consistente con el calendar de date pickers. */

/* Inputs dentro de cada picker — order 1 (izquierda), grandes y legibles. */
body.single-product .dynasty-single .summary .pick-up-date-picker > input,
body.single-product .dynasty-single .summary .pick-up-time-picker > input,
body.single-product .dynasty-single .summary .drop-off-date-picker > input,
body.single-product .dynasty-single .summary .drop-off-time-picker > input,
body.single-product .dynasty-single .summary input#pickup-date,
body.single-product .dynasty-single .summary input#pickup-time,
body.single-product .dynasty-single .summary input#dropoff-date,
body.single-product .dynasty-single .summary input#dropoff-time {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    order: 1 !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: var(--dynasty-font-body, sans-serif) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
    height: 22px !important;
    line-height: 22px !important;
    box-shadow: none !important;
    outline: none !important;
    text-align: left !important;
    cursor: pointer !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body.single-product .dynasty-single .summary .pick-up-date-picker > input::placeholder,
body.single-product .dynasty-single .summary .pick-up-time-picker > input::placeholder,
body.single-product .dynasty-single .summary .drop-off-date-picker > input::placeholder,
body.single-product .dynasty-single .summary .drop-off-time-picker > input::placeholder {
    color: #2A2A2A !important;
    opacity: 1 !important;
    font-weight: 400 !important;
}

/* Bloques opcionales (cuando el producto SÍ los tenga configurados): selects
   de Pickup/Dropoff Location, Quantity, Payable extras/categories. */
body.single-product .dynasty-single .summary .redq-pick-up-location,
body.single-product .dynasty-single .summary .redq-drop-off-location,
body.single-product .dynasty-single .summary .redq-quantity,
body.single-product .dynasty-single .summary .additional-person {
    display: block !important;
    width: 100% !important;
    margin: 0 0 20px !important;
}

/* Chosen.js selects */
body.single-product .dynasty-single .summary .chosen-container,
body.single-product .dynasty-single .summary .chosen-container-single {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

body.single-product .dynasty-single .summary .chosen-container-single .chosen-single,
body.single-product .dynasty-single .summary .chosen-container .chosen-single {
    position: relative !important;
    height: 58px !important;
    line-height: 58px !important;
    background: var(--dynasty-white, #FFFFFF) !important;
    border: 1px solid #D8D8D8 !important;
    border-radius: 2px !important;
    padding: 0 50px 0 20px !important;
    font-family: var(--dynasty-font-body, sans-serif) !important;
    font-size: 16px !important;
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
    box-shadow: none !important;
}

body.single-product .dynasty-single .summary .chosen-container-single .chosen-single span {
    line-height: 58px !important;
    color: inherit !important;
    font-size: inherit !important;
    margin-right: 0 !important;
}

/* Flecha de Chosen.js — ocultamos el sprite default y agregamos SVG custom. */
body.single-product .dynasty-single .summary .chosen-container-single .chosen-single div {
    width: 50px !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
}

body.single-product .dynasty-single .summary .chosen-container-single .chosen-single div b {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A2A2A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") center/14px no-repeat !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

body.single-product .dynasty-single .summary .chosen-container-active.chosen-with-drop .chosen-single div b {
    transform: rotate(180deg);
}

body.single-product .dynasty-single .summary .chosen-container-single .chosen-drop {
    border: 1px solid #D8D8D8 !important;
    border-radius: 0 0 2px 2px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
}

/* Hidden inputs/utility inputs del plugin — no añadir espacio. */
body.single-product .dynasty-single .summary .inventory-qty-next {
    display: none !important;
}

/* Pickup/Dropoff Location: el plugin renderiza un <select> envuelto en
   .chosen-container (de la librería Chosen.js). Forzamos full-width y
   restyle del .chosen-single. */
body.single-product .dynasty-single .summary select,
body.single-product .dynasty-single .summary .chosen-container,
body.single-product .dynasty-single .summary .chosen-container-single,
body.single-product .dynasty-single .summary .select2-container,
body.single-product .dynasty-single .summary .select2-selection,
body.single-product .dynasty-single .summary .select2-container--default .select2-selection--single {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

body.single-product .dynasty-single .summary .chosen-container-single .chosen-single,
body.single-product .dynasty-single .summary .chosen-container .chosen-single {
    height: 46px !important;
    line-height: 46px !important;
    background: var(--dynasty-white, #FFFFFF) !important;
    border: 1px solid #E5E5E5 !important;
    border-radius: 2px !important;
    padding: 0 14px !important;
    font-family: var(--dynasty-font-body, sans-serif) !important;
    font-size: 14px !important;
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
    box-shadow: none !important;
}

body.single-product .dynasty-single .summary .chosen-container-single .chosen-single span {
    line-height: 46px !important;
    color: inherit !important;
    font-size: inherit !important;
}

body.single-product .dynasty-single .summary .chosen-container-single .chosen-drop {
    background: var(--dynasty-white, #FFFFFF) !important;
    border: 1px solid #E5E5E5 !important;
    border-radius: 0 0 2px 2px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
}

/* Lista de opciones del dropdown: fondo/texto explícitos para no depender del
   modo oscuro del navegador (ver color-scheme en style.css). */
body.single-product .dynasty-single .summary .chosen-container-single .chosen-results li {
    background: var(--dynasty-white, #FFFFFF) !important;
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
}
body.single-product .dynasty-single .summary .chosen-container-single .chosen-results li.highlighted {
    background: var(--dynasty-black-obsidian, #0A0A0A) !important;
    color: var(--dynasty-white, #FFFFFF) !important;
}
body.single-product .dynasty-single .summary select option {
    background: var(--dynasty-white, #FFFFFF) !important;
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
}

body.single-product .dynasty-single .summary select,
body.single-product .dynasty-single .summary .select2-selection {
    height: 58px !important;
    line-height: 58px !important;
    background: var(--dynasty-white, #FFFFFF) !important;
    border: 1px solid #D8D8D8 !important;
    border-radius: 2px !important;
    padding: 0 50px 0 20px !important;
    font-family: var(--dynasty-font-body, sans-serif) !important;
    font-size: 16px !important;
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A2A2A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 20px center !important;
    background-size: 14px !important;
}

/* Payable blocks (Sunpass / Surcharge / Vehicle License Recovery Fee /
   payable-extras / payable-categories) — OCULTOS visualmente: son charges
   OBLIGATORIAS que siempre se aplican. El JS `initPayableAutoCheck()` marca
   los checkboxes como `checked` y dispara `change`, así el plugin RnB los
   suma al total aunque el bloque entero esté display:none. Los inputs en
   display:none SÍ se incluyen en el form submit estándar. */
body.single-product .dynasty-single .summary .payable-extras,
body.single-product .dynasty-single .summary .payable-categories {
    display: none !important;
}

/* Cargos (Sunpass / Surcharge / Vehicle License Recovery Fee) — VISIBLES como
   lista informativa. Son obligatorios (el checkbox sigue oculto + auto-checked);
   acá solo se muestran nombre + monto para transparencia. RnB los inyecta por JS. */
body.single-product .dynasty-single .summary .payable-security_deposites {
    display: block !important;
    margin: 6px 0 4px !important;
    padding: 14px 16px !important;
    background: #FAFAFA !important;
    border: 1px solid #EFEFEF !important;
    border-radius: 8px !important;
}
body.single-product .dynasty-single .summary .payable-security_deposites h5 {
    font-family: var(--dynasty-font-heading, "Montserrat", sans-serif) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
    margin: 0 0 8px !important;
}
body.single-product .dynasty-single .summary .payable-security_deposites .attributes {
    padding: 7px 0 !important;
    border-bottom: 1px solid #EFEFEF !important;
}
body.single-product .dynasty-single .summary .payable-security_deposites .attributes:last-child { border-bottom: 0 !important; }
body.single-product .dynasty-single .summary .payable-security_deposites .attributes label {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: default !important;
    font-family: var(--dynasty-font-body, "Raleway", sans-serif) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
body.single-product .dynasty-single .summary .payable-security_deposites .attributes label .amount,
body.single-product .dynasty-single .summary .payable-security_deposites .attributes label .price,
body.single-product .dynasty-single .summary .payable-security_deposites .attributes label .dynasty-pct-charge__rate {
    white-space: nowrap !important;
    font-weight: 600 !important;
}
/* % de los cargos Woo (Sales Tax / Processing Fee) a la derecha, como los montos. */
body.single-product .dynasty-single .summary .payable-security_deposites .dynasty-pct-charge label {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
}
body.single-product .dynasty-single .summary .payable-security_deposites .dynasty-pct-charge__name { flex: 1 1 auto !important; }
body.single-product .dynasty-single .summary .payable-security_deposites .dynasty-pct-charge__rate { color: #2A2A2A !important; }

/* Nota al pie del cuadro de cargos (devolución tardía). */
body.single-product .dynasty-single .summary .payable-security_deposites .dynasty-charges-note {
    margin: 12px 0 0 !important;
    padding: 12px 0 0 !important;
    border-top: 1px solid #EFEFEF !important;
    font-family: var(--dynasty-font-body, "Raleway", sans-serif) !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: var(--dynasty-gray-brand, #6D6E70) !important;
}
/* Si hay 2 notas seguidas, la 2ª va sin línea (se leen como grupo). */
body.single-product .dynasty-single .summary .payable-security_deposites .dynasty-charges-note + .dynasty-charges-note {
    margin-top: 6px !important;
    padding-top: 0 !important;
    border-top: 0 !important;
}
body.single-product .dynasty-single .summary .payable-security_deposites .attributes p {
    margin: 4px 0 0 !important;
    font-size: 12px !important;
    color: var(--dynasty-gray-brand, #6D6E70) !important;
}

/* Neutralizar el "toggle" que Cartsy dibuja en .custom-block span (::after = perilla,
   span = pista). Lo dejamos como texto plano. */
body.single-product .dynasty-single .summary .payable-security_deposites .custom-block span {
    position: static !important;
    display: inline !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
body.single-product .dynasty-single .summary .payable-security_deposites .custom-block span::before,
body.single-product .dynasty-single .summary .payable-security_deposites .custom-block span::after,
body.single-product .dynasty-single .summary .payable-security_deposites .custom-block::before,
body.single-product .dynasty-single .summary .payable-security_deposites .custom-block::after {
    display: none !important;
    content: none !important;
    background: none !important;
}
body.single-product .dynasty-single .summary .payable-security_deposites .custom-block {
    padding-left: 0 !important;
}

/* Lista con punto dorado en cada cargo. */
body.single-product .dynasty-single .summary .payable-security_deposites .attributes {
    position: relative !important;
    padding-left: 18px !important;
}
body.single-product .dynasty-single .summary .payable-security_deposites .attributes::before {
    content: "" !important;
    position: absolute !important;
    left: 2px !important;
    top: 15px !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--dynasty-brand-gold, #D4AF37) !important;
}

body.single-product .dynasty-single .summary .item-extras,
body.single-product .dynasty-single .summary .item-arrtributes {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 9px 0 !important;
    border: 0 !important;
    width: 100% !important;
    font-family: var(--dynasty-font-body, sans-serif) !important;
    font-size: 16px !important;
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
    line-height: 1.4 !important;
}

body.single-product .dynasty-single .summary .item-extras label,
body.single-product .dynasty-single .summary .item-arrtributes label {
    flex: 1 1 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--dynasty-font-body, sans-serif) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: default !important;
}

body.single-product .dynasty-single .summary .item-extras .amount,
body.single-product .dynasty-single .summary .item-arrtributes .amount,
body.single-product .dynasty-single .summary .item-extras .price,
body.single-product .dynasty-single .summary .item-arrtributes .price,
body.single-product .dynasty-single .summary .item-extras span,
body.single-product .dynasty-single .summary .item-arrtributes span {
    color: #2A2A2A !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    white-space: nowrap;
}

/* Ocultar el checkbox del plugin — el cliente no quiere mostrarlo en el
   diseño objetivo (la charge se considera siempre aplicada). Si el plugin
   requiere que el checkbox esté checked para sumar al total, complementar
   con JS que fuerce checked=true. */
body.single-product .dynasty-single .summary .item-extras input[type="checkbox"],
body.single-product .dynasty-single .summary .item-arrtributes input[type="checkbox"],
body.single-product .dynasty-single .summary .payable-security_deposites input[type="checkbox"],
body.single-product .dynasty-single .summary .payable-extras input[type="checkbox"],
body.single-product .dynasty-single .summary .payable-categories input[type="checkbox"] {
    display: none !important;
}

/* Quantity input */
body.single-product .dynasty-single .summary .redq-quantity input[type="number"] {
    width: 100% !important;
    height: 46px !important;
    padding: 0 14px !important;
    border: 1px solid #E5E5E5 !important;
    border-radius: 2px !important;
    background: var(--dynasty-white, #FFFFFF) !important;
    font-family: var(--dynasty-font-body, sans-serif) !important;
    font-size: 14px !important;
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
    box-shadow: none !important;
}

/* Ocultar bloques del plugin que NO van en el diseño objetivo. */
body.single-product .dynasty-single .summary .rnb-pricing-plan-button,
body.single-product .dynasty-single .summary .price-showing,
body.single-product .dynasty-single .summary .rnb-attributes-wrapper,
body.single-product .dynasty-single .summary .rnb-short-description,
body.single-product .dynasty-single .summary .cartsy-product-single-breadcrumb {
    display: none !important;
}

/* Mensajes de error del plugin RnB */
body.single-product .dynasty-single .summary .rnb-error-message {
    display: block !important;
    padding: 10px 14px !important;
    background: #FEF3F2 !important;
    color: #B42318 !important;
    border-radius: 2px !important;
    font-size: 13px !important;
    margin: 10px 0 !important;
}

/* --------------------------------------------------------------------------
   Botón Book Now (HTML real: <button class="single_add_to_cart_button
   redq_add_to_cart_button btn-book-now button alt" disabled>)

   El plugin RnB deja el botón disabled hasta que el usuario elige date/time.
   Mantenemos el look gold incluso disabled (con opacity reducida + cursor
   not-allowed para señalizar UX) y full gold cuando se habilita.
   -------------------------------------------------------------------------- */
body.single-product .dynasty-single .summary form button[type="submit"],
body.single-product .dynasty-single .summary form input[type="submit"],
body.single-product .dynasty-single .summary form button.button.alt,
body.single-product .dynasty-single .summary form a.button.alt,
body.single-product .dynasty-single .summary form .single_add_to_cart_button,
body.single-product .dynasty-single .summary form button.single_add_to_cart_button,
body.single-product .dynasty-single .summary form button.redq_add_to_cart_button,
body.single-product .dynasty-single .summary form .btn-book-now,
/* Botón "Request For Quote" del plugin RnB (mansiones / yates / limos).
   Confirmed via inspection 2026-06-02:
   <button id="quote-content-confirm" class="redq_request_for_a_quote btn-book-now button">
   Puede estar dentro o fuera del form (modal popup) — usamos selectores globales
   sin restringir al .summary form. */
body.single-product #quote-content-confirm,
body.single-product button#quote-content-confirm,
body.single-product .redq_request_for_a_quote,
body.single-product button.redq_request_for_a_quote {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 24px 0 0 !important;
    padding: 24px 24px !important;
    background: #D4AF37 !important;
    background-color: #D4AF37 !important;
    background-image: none !important;
    color: #0A0A0A !important;
    font-family: var(--dynasty-font-body, "Raleway", sans-serif) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    text-decoration: none !important;
    border: 0 !important;
    border-radius: 2px !important;
    cursor: pointer !important;
    transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease !important;
    box-shadow: none !important;
    text-shadow: none !important;
    float: none !important;
    line-height: 1 !important;
    height: auto !important;
    min-height: 64px !important;
    opacity: 1 !important;
    filter: none !important;
}

/* Estado disabled (mientras el cliente no llena date/time): gold suave + cursor not-allowed. */
body.single-product .dynasty-single .summary form .single_add_to_cart_button:disabled,
body.single-product .dynasty-single .summary form .single_add_to_cart_button[disabled],
body.single-product .dynasty-single .summary form button.button.alt:disabled,
body.single-product .dynasty-single .summary form button.button.alt[disabled],
body.single-product .dynasty-single .summary form button[type="submit"]:disabled,
body.single-product .dynasty-single .summary form button[type="submit"][disabled],
body.single-product .dynasty-single .summary form button[class*="rfq"]:disabled,
body.single-product .dynasty-single .summary form button[class*="quote"]:disabled,
body.single-product #quote-content-confirm:disabled,
body.single-product #quote-content-confirm[disabled],
body.single-product .redq_request_for_a_quote:disabled,
body.single-product .redq_request_for_a_quote[disabled] {
    background: #D4AF37 !important;
    background-color: #D4AF37 !important;
    color: #0A0A0A !important;
    opacity: 0.55 !important;
    cursor: not-allowed !important;
}

/* Hover sólo cuando NO está disabled. */
body.single-product .dynasty-single .summary form .single_add_to_cart_button:not(:disabled):hover,
body.single-product .dynasty-single .summary form button.button.alt:not(:disabled):hover,
body.single-product .dynasty-single .summary form button[type="submit"]:not(:disabled):hover,
body.single-product .dynasty-single .summary form input[type="submit"]:not(:disabled):hover {
    background: #0A0A0A !important;
    background-color: #0A0A0A !important;
    color: #D4AF37 !important;
}

/* Disclaimer debajo del form box. */
.dynasty-single__disclaimer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0 0 !important;
    padding: 16px 20px;
    background: var(--dynasty-white-accent, #F9F9F9);
    border-radius: 4px;
    font-family: var(--dynasty-font-body);
    font-size: 14px;
    color: var(--dynasty-gray-brand, #6D6E70);
    line-height: 1.5;
}

.dynasty-single__disclaimer-icon {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--dynasty-brand-gold, #D4AF37);
    color: var(--dynasty-white, #FFFFFF);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--dynasty-font-heading);
    font-size: 11px;
    font-weight: 700;
    font-style: italic;
}

/* --------------------------------------------------------------------------
   Description section + 4 spec cards
   -------------------------------------------------------------------------- */

.dynasty-single-desc {
    padding: 64px 0;
    background: var(--dynasty-white, #FFFFFF);
}

.dynasty-single-desc__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

@media (min-width: 900px) {
    .dynasty-single-desc__inner {
        grid-template-columns: 1fr 1.2fr;
        gap: 56px;
        align-items: start;
    }
}

.dynasty-single-desc__copy .dynasty-eyebrow {
    margin-bottom: 20px;
}

.dynasty-single-desc__text {
    font-family: var(--dynasty-font-body);
    font-size: 15px;
    line-height: 1.7;
    color: var(--dynasty-black-obsidian, #0A0A0A);
}

.dynasty-single-desc__text p {
    margin: 0 0 14px !important;
    color: inherit !important;
}

/* Carousel horizontal a la derecha del texto. */
.dynasty-single-desc__carousel {
    position: relative;
    min-width: 0; /* permite que grid item se encoja */
}

.dynasty-single-desc__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    padding-bottom: 4px;
}

.dynasty-single-desc__viewport::-webkit-scrollbar {
    display: none;
}

.dynasty-single-desc__track {
    display: flex;
    gap: 16px;
    padding: 0 0 4px;
}

.dynasty-spec-card {
    flex: 0 0 230px;
    scroll-snap-align: start;
    background: var(--dynasty-white, #FFFFFF);
    border: 1px solid #D8D8D8;
    border-radius: 4px;
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 200px;
    box-sizing: border-box;
}

.dynasty-spec-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 24px;
    height: 24px;
    color: var(--dynasty-black-obsidian, #0A0A0A);
}

.dynasty-spec-card__icon img,
.dynasty-spec-card__icon svg {
    display: block;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.dynasty-spec-card__label {
    font-family: var(--dynasty-font-heading, sans-serif) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.dynasty-spec-card__value {
    font-family: var(--dynasty-font-body, sans-serif);
    font-size: 13px;
    line-height: 1.55;
    color: var(--dynasty-gray-brand, #6D6E70);
    margin: 0 !important;
}

/* Progress bar debajo del carousel — track gris claro + thumb negro
   cuyo ancho refleja la proporción visible y la posición indica scroll. */
.dynasty-single-desc__progress {
    position: relative;
    margin-top: 28px;
    height: 2px;
    background: #E5E5E5;
    border-radius: 1px;
    overflow: visible;
}

.dynasty-single-desc__progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 33%; /* default, JS lo ajusta */
    background: var(--dynasty-black-obsidian, #0A0A0A);
    border-radius: 1px;
    transition: width 0.15s ease, transform 0.15s ease;
    will-change: transform, width;
}

/* --------------------------------------------------------------------------
   Related products (reutiliza .dynasty-fleet-card del homepage)
   -------------------------------------------------------------------------- */

.dynasty-related {
    padding: 64px 0;
    background: var(--dynasty-white-accent, #F9F9F9);
}

.dynasty-related__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.dynasty-related__head .dynasty-section-title {
    margin: 8px 0 0 !important;
    max-width: 720px;
}

.dynasty-related__view-all {
    flex: 0 0 auto;
}

.dynasty-related__carousel {
    position: relative;
}

.dynasty-related__viewport {
    overflow: hidden;
}

.dynasty-related__track {
    display: flex;
    transition: transform 0.4s ease;
}

.dynasty-related__slide {
    flex: 0 0 100%;
    padding: 0 8px;
    box-sizing: border-box;
}

.dynasty-related__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}

.dynasty-related__dots button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 0;
    background: #D0D0D0;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease, transform 0.2s ease;
}

.dynasty-related__dots button[aria-current="true"] {
    background: var(--dynasty-brand-gold, #D4AF37);
    transform: scale(1.2);
}

@media (min-width: 768px) {
    .dynasty-related__track {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
        transform: none !important;
    }
    .dynasty-related__slide {
        flex: none;
        width: auto;
        padding: 0;
    }
    .dynasty-related__dots {
        display: none !important;
    }
}

/* --------------------------------------------------------------------------
   FAQ accordion
   -------------------------------------------------------------------------- */

.dynasty-single-faq {
    padding: 64px 0;
    background: var(--dynasty-white, #FFFFFF);
}

.dynasty-single-faq__head {
    text-align: center;
    margin-bottom: 32px;
}

.dynasty-single-faq__list {
    list-style: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    max-width: 820px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dynasty-faq-item {
    border: 1px solid #E5E5E5;
    border-radius: 2px;
    background: var(--dynasty-white, #FFFFFF);
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
}

.dynasty-faq-item__q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: var(--dynasty-font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--dynasty-black-obsidian, #0A0A0A);
    text-align: left;
}

.dynasty-faq-item__q:hover {
    background: var(--dynasty-white-accent, #F9F9F9);
}

.dynasty-faq-item__icon {
    font-family: var(--dynasty-font-heading);
    font-size: 18px;
    font-weight: 400;
    color: var(--dynasty-gray-brand, #6D6E70);
    transition: transform 0.2s ease;
    flex: 0 0 auto;
}

.dynasty-faq-item__q[aria-expanded="true"] .dynasty-faq-item__icon {
    transform: rotate(45deg);
    color: var(--dynasty-brand-gold, #D4AF37);
}

.dynasty-faq-item__a {
    padding: 0 20px 16px;
    font-family: var(--dynasty-font-body);
    font-size: 13px;
    line-height: 1.6;
    color: var(--dynasty-gray-brand, #6D6E70);
}

.dynasty-faq-item__a p {
    margin: 0 !important;
    color: inherit !important;
}

.dynasty-single-faq__cta {
    text-align: center;
    margin-top: 28px;
}

/* --------------------------------------------------------------------------
   CTA banner
   -------------------------------------------------------------------------- */

.dynasty-single-cta {
    position: relative;
    background-color: var(--dynasty-black-obsidian, #0A0A0A);
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
    color: var(--dynasty-white, #FFFFFF) !important;
    padding-block: 110px;
    isolation: isolate;
    overflow: hidden;
}

.dynasty-single-cta__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(10, 10, 10, 0) 0%,
        rgba(10, 10, 10, 0) 22%,
        rgba(10, 10, 10, 0.55) 38%,
        rgba(10, 10, 10, 0.92) 52%,
        rgba(10, 10, 10, 1) 64%,
        rgba(10, 10, 10, 1) 100%
    );
    z-index: 0;
    pointer-events: none;
}

.dynasty-single-cta__inner {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: flex-end;
}

.dynasty-single-cta__body {
    max-width: 600px;
    margin-left: auto;
}

.dynasty-single-cta__title {
    font-family: var(--dynasty-font-heading) !important;
    font-weight: 700 !important;
    font-size: clamp(28px, 3vw, 38px) !important;
    line-height: 1.15 !important;
    text-transform: uppercase;
    color: var(--dynasty-white, #FFFFFF) !important;
    margin: 0 0 16px !important;
}

.dynasty-single-cta__copy {
    font-family: var(--dynasty-font-body);
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255,255,255,0.85);
    margin: 0 0 16px !important;
}

.dynasty-single-cta__brands {
    list-style: none !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 0 0 28px !important;
    padding: 0 !important;
    font-family: var(--dynasty-font-body);
    font-size: 13px;
    color: var(--dynasty-brand-gold, #D4AF37);
}

.dynasty-single-cta__brands li {
    position: relative;
    padding-right: 14px;
    margin: 0 !important;
}

.dynasty-single-cta__brands li:not(:last-child)::after {
    content: '·';
    position: absolute;
    right: 0;
    color: rgba(255,255,255,0.4);
}

.dynasty-single-cta__btn {
    border: 1.5px solid var(--dynasty-white, #FFFFFF);
}

/* ==========================================================================
   Related Products card — diseño compacto para single product (NO se usa
   en homepage; el Featured Fleet del homepage sigue con .dynasty-fleet-card).
   Hover: muestra descripción 20 palabras + 3 specs encima del precio.
   ========================================================================== */

.dynasty-related-card {
    position: relative;
    background: var(--dynasty-white, #FFFFFF);
    border-radius: 4px;
    overflow: hidden;
    height: 100%;
    transition: box-shadow 0.3s ease;
}

.dynasty-related-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.dynasty-related-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none !important;
    color: inherit !important;
}

/* Media: imagen grande con badge AVAILABLE en cápsula esquina top-right. */
.dynasty-related-card__media {
    position: relative;
    background: var(--dynasty-white, #FFFFFF);
    padding: 16px 16px 0;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dynasty-related-card__media img,
.dynasty-related-card__media .dynasty-related-card__img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
}

/* Badge AVAILABLE: cápsula negra con dot verde. */
.dynasty-related-card__badge {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: var(--dynasty-black-obsidian, #0A0A0A);
    color: var(--dynasty-white, #FFFFFF);
    border-radius: 99px;
    font-family: var(--dynasty-font-body, sans-serif);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1;
}

.dynasty-related-card__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22C55E; /* verde brillante para in-stock */
    flex: 0 0 8px;
}

.dynasty-related-card__badge--out {
    background: #4A4A4A;
}

.dynasty-related-card__dot--out {
    background: #999999;
}

/* Body: título, hover content (oculto), footer (precio + botón). */
.dynasty-related-card__body {
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.dynasty-related-card__title {
    font-family: var(--dynasty-font-heading, sans-serif) !important;
    font-weight: 700 !important;
    font-size: 22px !important;
    line-height: 1.15 !important;
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
}

/* Hover content: descripción + specs. Oculto por default, aparece en hover. */
.dynasty-related-card__hover {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.25s ease, margin 0.35s ease;
    margin: 0;
}

.dynasty-related-card:hover .dynasty-related-card__hover {
    max-height: 320px;
    opacity: 1;
    margin: 0 0 16px;
}

.dynasty-related-card__desc {
    font-family: var(--dynasty-font-body, sans-serif);
    font-size: 13px;
    line-height: 1.55;
    color: var(--dynasty-gray-brand, #6D6E70);
    margin: 0 !important;
}

/* Footer: precio + botón VIEW RENTAL CAR */
.dynasty-related-card__footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dynasty-related-card__price-block {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.dynasty-related-card__price {
    font-family: var(--dynasty-font-heading, sans-serif) !important;
    font-weight: 700 !important;
    font-size: 28px !important;
    line-height: 1 !important;
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
    letter-spacing: -0.01em;
}

.dynasty-related-card__price .woocommerce-Price-amount,
.dynasty-related-card__price bdi {
    color: inherit;
    font: inherit;
}

.dynasty-related-card__per {
    font-family: var(--dynasty-font-body, sans-serif);
    font-size: 14px;
    color: var(--dynasty-gray-brand, #6D6E70);
    font-weight: 400;
}

.dynasty-related-card__btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px 20px;
    background: transparent;
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
    border: 1.5px solid var(--dynasty-black-obsidian, #0A0A0A);
    border-radius: 2px;
    font-family: var(--dynasty-font-body, sans-serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: background 0.2s ease, color 0.2s ease;
    line-height: 1;
}

.dynasty-related-card:hover .dynasty-related-card__btn {
    background: var(--dynasty-black-obsidian, #0A0A0A);
    color: var(--dynasty-white, #FFFFFF) !important;
}