/* Contenedor principal del PDP personalizado */
.restaurateur-pdp {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 40px;
    background: #f5f5f5;
    padding: 30px;
    border-radius: 10px;
}

.restaurateur-grid,
.restaurateur-pdp {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; // o "flex-start" si no quieres separación
align-items: flex-start;
    gap: 30px;
    margin-top: 30px;
}

.restaurateur-pdp-left,
.restaurateur-grid-left {
    flex: 1;
    min-width: 300px;
    max-width: 48%;
}

.restaurateur-pdp-right,
.restaurateur-grid-right {
    flex: 1;
    min-width: 300px;
    max-width: 48%;
}

/* Corrección de alineaciones */
.restaurateur-pdp,
.restaurateur-pdp * {
    text-align: left !important;
    direction: ltr !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Columnas izquierda y derecha */
.restaurateur-pdp-left,
.restaurateur-pdp-right {
    flex: 1;
    min-width: 300px;
}

/* Imagen principal */
.product-main-image img {
    max-width: 100%;
    border-radius: 12px;
    margin-bottom: 15px;
}

/* Miniaturas de galería */
.product-thumbnails {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.thumb-item img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border: 1px solid #ccc;
    border-radius: 8px;
    cursor: pointer;
}

/* Título del producto */
.product-name,
.product-title {
    font-size: 28px;
    font-weight: bold;
    margin-top: 10px;
}

/* Descripción del producto */
.product-description,
.product-desc {
    margin-top: 15px;
    color: #555;
    line-height: 1.6;
}

/* Precios */
.product-price-box {
    margin-bottom: 20px;
}

.product-price-box .special-price {
    font-size: 26px;
    font-weight: bold;
    color: #2ecc71;
}

.product-price-box .old-price {
    color: #999;
    font-size: 18px;
}

.product-price-box .regular-price {
    font-size: 24px;
    font-weight: bold;
}

/* Etiqueta de más vendido */
.badge.bestseller {
    display: inline-block;
    background: #2ecc71;
    color: #fff;
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 20px;
    margin-bottom: 10px;
}

/* Mensaje de suscripción */
.subscription-note {
    font-size: 14px;
    color: #444;
    margin-bottom: 15px;
}

/* Secciones de suscripción */
.subscription-period,
.subscription-details,
.payment-method-select,
.autorenew-consent {
    margin-bottom: 15px;
}

/* Selects */
.subscription-period select,
.payment-method-select select {
    width: 100%;
    padding: 8px;
    font-size: 14px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

/* Lista de opciones si se usa <ul> */
.subscribe-options ul {
    list-style: none;
    padding-left: 0;
    margin-top: 10px;
}

.subscribe-options li {
    display: inline-block;
    margin-right: 15px;
    font-weight: 600;
}

/* Nota pequeña */
.autorenew-note {
    font-size: 12px;
    color: #666;
}

/* Botones */
button.subscribe,
.buy-button {
    background: #000;
    color: #fff;
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    margin-top: 0px;
    margin-left: -2%;
    font-size: 16px;
    cursor: pointer;
}

button.tocart {
    background: #f3f3f3;
    border: 1px solid #ccc;
    padding: 12px 20px;
    font-size: 16px;
    border-radius: 6px;
    color: #333;
    margin-top: 10px;
    cursor: pointer;
}
/* ==========================================================================
   ESTILOS PERSONALIZADOS - THEME ANDRÓMEDA
   Categoría: Servicios para Restaurantes
   ========================================================================== */

/* 1) Estilos base para el grid de servicios */
.restaurateur-grid-wrapper {
    background-color: #f5f5f5;
    padding: 40px 20px;
    box-sizing: border-box;
}

.restaurateur-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.restaurateur-card {
    display: flex;
    background: #000;
    color: #fff;
    border-radius: 18px;
    overflow: hidden;
    align-items: stretch;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.restaurateur-image {
    flex: 0 0 30%;
    background: #ddd;
    position: relative;
    padding: 30px;
    box-sizing: border-box;
}

.restaurateur-image img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.restaurateur-info {
    flex: 1;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}

/* 2) Overrides específicos para la categoría "Servicios para Restaurantes" */
body.category-servicios-para-restaurantes .restaurateur-grid-wrapper {
    max-width: 770px;
    margin: 0 auto;
}

body.category-servicios-para-restaurantes .restaurateur-card {
    width: 100% !important;
    max-width: 100% !important;
}

body.category-servicios-para-restaurantes .restaurateur-image {
    flex: 0 0 30% !important;
    max-width: 30% !important;
}

body.category-servicios-para-restaurantes .restaurateur-info {
    flex: 0 0 70% !important;
    max-width: 70% !important;
}

/* Ocultar encabezado, breadcrumbs y filtros en esta vista */
body.category-servicios-para-restaurantes .top-content-theme,
body.category-servicios-para-restaurantes .page-title-wrapper,
body.category-servicios-para-restaurantes .breadcrumbs,
body.category-servicios-para-restaurantes .block.filter {
    display: none !important;
}

/* 3) Estilos de contenido interno (según Figma) */
body.category-servicios-para-restaurantes .restaurateur-category {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    align-self: flex-start;
    margin-bottom: 16px;
}

body.category-servicios-para-restaurantes .restaurateur-title a {
    display: block;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    margin: 0 0 16px 0;
}

body.category-servicios-para-restaurantes .restaurateur-description {
    font-size: 1.6rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.75);
    margin: 0 0 24px 0;
}

body.category-servicios-para-restaurantes .restaurateur-price {
    position: relative;
    color: #fff;
    font-size: 2rem;
    font-weight: 600;
    margin: 0 0 32px 0;
    padding-left: 2.4rem;
}

body.category-servicios-para-restaurantes .restaurateur-price::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    background: url('../images/icon-coin.svg') no-repeat center/contain;
}

body.category-servicios-para-restaurantes .restaurateur-frequencies {
    display: flex;
    gap: 16px;
    margin-top: 16px;
}

body.category-servicios-para-restaurantes .restaurateur-frequencies button {
    background: transparent;
    border: 2px solid #fff;
    border-radius: 6px;
    padding: 8px 12px;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 600;
    transition: background 0.2s, color 0.2s;
}

body.category-servicios-para-restaurantes .restaurateur-frequencies button:hover,
body.category-servicios-para-restaurantes .restaurateur-frequencies button.active {
    background: #fff;
    color: #000;
}

/* 4) Responsive (<768px) */
@media (max-width: 767px) {
    .restaurateur-grid-wrapper {
        max-width: 100% !important;
        padding: 20px !important;
    }
    .restaurateur-card {
        flex-direction: column !important;
    }
    .restaurateur-image,
    .restaurateur-info {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .restaurateur-image {
        margin-bottom: 15px;
    }
    .restaurateur-info {
        padding: 24px 16px !important;
    }
    .restaurateur-title a {
        font-size: 2rem;
        margin-bottom: 16px;
    }
    .restaurateur-description {
        font-size: 1.4rem;
        margin-bottom: 24px;
    }
    .restaurateur-price {
        font-size: 1.8rem;
        margin-bottom: 24px;
        padding-left: 2rem;
    }
    .restaurateur-price::before {
        width: 1.6rem;
        height: 1.6rem;
        margin-right: 0.6rem;
    }
    .restaurateur-frequencies button {
        padding: 6px 12px;
        font-size: 1.2rem;
    }
}

body.category-servicios-para-restaurantes .restaurateur-header {
    font-family: Inter;
    font-weight: 700;
    font-size: 19.4px !important;
    line-height: 44px;
    letter-spacing: 0px;
    vertical-align: middle;
    color: #111111;
    text-align: center;
}



/* Fondo general gris claro */
.restaurateur-wrapper {
    background-color: #f0f0f0;
    padding: 40px 20px;
}

/* Contenedores blancos con bordes redondeados */
.restaurateur-pdp-left,
.restaurateur-pdp-right {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

/* Estilo para botón de suscripción */
button.subscribe {
    background-color: #000;
    color: #fff;
    border: none;
    padding: 12px 24px;
    font-size: 19.4px !important;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button.subscribe:hover {
    background-color: #333;
}

/* Botón de agregar al carrito */
button.tocart {
    background: #fff;
    color: #000;
    border: 1px solid #ccc;
    padding: 12px 24px;
    font-size: 19.4px !important;;
    border-radius: 8px;
    margin-top: 10px;
    cursor: pointer;
}

/* Título de sección destacado */
.restaurateur-pdp-right h2 {
    font-size: 22px;
    margin-bottom: 10px;
}

/* Precio con margen adecuado */
.price-wrapper {
    margin-top: 20px;
}

/* Responsive en tablet */
@media screen and (max-width: 768px) {
    .restaurateur-pdp {
        flex-direction: column;
    }

    .restaurateur-pdp-left,
    .restaurateur-pdp-right {
        max-width: 100%;
    }
}


/* Contenedor gris general */
.restaurateur-wrapper {
    background: #f5f5f5;
    padding: 40px 20px;
}

/* Flex en dos columnas */
.restaurateur-pdp {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: space-between;
}

/* Panel izquierdo y derecho */
.restaurateur-pdp-left,
.restaurateur-pdp-right {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    flex: 1 1 48%;
    /*max-width: 48%;*/
    box-sizing: border-box;
    height: fit-content !important;
}

/* Slider de imágenes */
.product-media-slider {
    margin-bottom: 20px;
}

/* Forzamos izquierdo 60% y derecho 40% */
.restaurateur-pdp-left {
    flex: 0 0 55% !important;
    max-width: 60% !important;
}

.restaurateur-pdp-right {
    flex: 0 0 40% !important;
    max-width: 40% !important;
}

.restaurateur-pdp-right .subscription-period,
.restaurateur-pdp-right .subscription-period select {
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    display: block !important;
    height: fit-content;
}
/* Nombre y descripción */
.product-name {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 15px;
}
.product-description {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
}
.product-description .read-more {
    display: inline-block;
    margin-top: 10px;
    color: #000;
    text-decoration: underline;
}

/* Tarjeta de detalle */
.product-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Badge */
.badge.bestseller {
    background: #2ecc71;
    color: #fff;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    align-self: flex-start;
}

/* Precios */
.price-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.old-price {
    font-size: 18px;
    color: #999;
    text-decoration: line-through;
}
.final-price {
    font-size: 24px;
    font-weight: bold;
    color: #000;
}
.tax-amount {
    font-size: 14px;
    color: #444;
}

/* Suscripción */
.subscription-note {
    font-size: 14px;
    color: #444;
}
.subscription-period label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}
.subscription-period select {
    width: 100%;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid #ccc;
}

/* Botones */
.action-buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}
button.subscribe {
    background: #000;
    color: #fff;
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}
button.tocart {
    background: #fff;
    color: #000;
    padding: 12px 24px;
    border: 1px solid #ccc;
    border-radius: 6px;
    cursor: pointer;
}

/* Responsive */
@media (max-width: 768px) {
    .restaurateur-pdp {
        flex-direction: column;
    }
    .restaurateur-pdp-left,
    .restaurateur-pdp-right {
        max-width: 100%;
        flex: 1 1 100%;
    }
}


.restaurateur-wrapper { background: #f5f5f5 !important; padding: 40px !important; }
.restaurateur-pdp { display: flex !important; gap: 30px !important; flex-wrap: wrap !important; }
.restaurateur-pdp-left,
.restaurateur-pdp-right {
    flex: 1 1 48% !important;
    background: #fff; padding: 30px !important; border-radius: 12px !important;
}
.product-info-main {
    width: 100% !important;
    float: right;
}

/*.product-media {*/
/*    width: 100% !important;*/
/*}*/
.restaurateur-pdp-right {
    .subscribe,
    .tocart {
        height: auto;
        text-align: center !important;
        font-weight: bold !important;
    }
}
/* ------------------------------------------------------------
   1) Aseguramos que las dos columnas estén a la misma altura
------------------------------------------------------------ */
.restaurateur-pdp {
    align-items: stretch; /* obliga a las dos columnas a tener la misma altura */
}

/* ------------------------------------------------------------
   2) Ajustes para el panel izquierdo: imagen a todo el ancho
------------------------------------------------------------ */
.restaurateur-pdp-left .product-main-image {
    width: 100%;
}
.restaurateur-pdp-left .product-main-image img {
    width: 100%;
    height: auto;
    /* Forzamos un min‐height igual al contenido derecho */
    min-height: 400px; /* ajusta este valor según necesites */
    object-fit: cover;
}

/* ------------------------------------------------------------
   3) Fuerza al panel derecho a mostrar sus botones en columna
------------------------------------------------------------ */
.restaurateur-pdp-right .action-buttons {
    flex-direction: column; /* apila verticalmente */
}
.restaurateur-pdp-right .action-buttons button {
    width: 100%;         /* toman todo el ancho del card */
    margin-bottom: 12px; /* separación entre botones */
}

/* ------------------------------------------------------------
   4) Botón “Agregar al carrito” en blanco con texto negro
------------------------------------------------------------ */
.restaurateur-pdp-right button.tocart {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #000 !important;
}

/* ------------------------------------------------------------
   5) Asegurar padding interno igual en ambas columnas
------------------------------------------------------------ */
.restaurateur-pdp-left,
.restaurateur-pdp-right {
    padding: 30px !important;
}
/* ------------------ TABLET (hasta 1024px) ------------------ */
@media (max-width: 1024px) {
    /* Una sola columna, gap más pequeño */
    .restaurateur-pdp {
        flex-direction: column;
        gap: 20px;
    }

    .restaurateur-pdp-left,
    .restaurateur-pdp-right {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }

    /* Reduce padding para ganar espacio */
    .restaurateur-pdp-left,
    .restaurateur-pdp-right {
        padding: 20px !important;
    }
}

/* ------------------- SMARTPHONE (hasta 768px) ------------------- */
@media (max-width: 768px) {
    /* Ajustes tipográficos */
    .restaurateur-pdp-left .product-name,
    .restaurateur-pdp-right .product-name {
        font-size: 24px;
    }
    .product-description {
        font-size: 14px;
        line-height: 1.4;
    }
    .price-block .final-price {
        font-size: 20px;
    }

    /* Imágenes más altas para compensar */
    .restaurateur-pdp-left .product-main-image img {
        min-height: 300px; /* ajusta según contenido */
    }

    /* Botones apilados full width */
    .restaurateur-pdp-right .action-buttons {
        gap: 12px;
    }
    .restaurateur-pdp-right button.subscribe,
    .restaurateur-pdp-right button.tocart {
        padding: 12px !important;
        font-size: 14px;
    }

    /* Menos espacio interno */
    .restaurateur-pdp-left,
    .restaurateur-pdp-right {
        padding: 16px !important;
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }

}

/* -------------------- MÓVILES PEQUEÑOS (hasta 480px) -------------------- */
@media (max-width: 480px) {
    /* Título aún más pequeño */
    .restaurateur-pdp-left .product-name,
    .restaurateur-pdp-right .product-name {
        font-size: 20px;
    }

    /* Select ocupa todo el ancho */
    .subscription-period select {
        font-size: 13px;
    }

    /* Leer más más compacto */
    .product-description .read-more {
        font-size: 14px;
    }
    /* Menos espacio interno */
    .restaurateur-pdp-left,
    .restaurateur-pdp-right {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
}
/* -------------------------------------------------- */
/* Cantidad y botones en el panel derecho             */
/* -------------------------------------------------- */
.restaurateur-pdp-right .quantity-field {
    display: flex !important;
    align-items: center;        /* centra verticalmente */
    justify-content: center;    /* centra horizontalmente */
    gap: 12px;                  /* espacio entre label e input */
    margin: 20px 0;             /* tu margen superior e inferior */
}

.restaurateur-pdp-right .quantity-field label {
    margin: 0;                  /* quita el margin-bottom */
    font-weight: 600;           /* mantén el peso */
}

.restaurateur-pdp-right .quantity-field input[type="number"] {
    width: 80px;                /* ancho fijo para el input */
    padding: 8px;
    font-size: 16px;
    text-align: center;         /* cifra centrada */
    box-sizing: border-box;
}

/* 1) Input principal: apariencia nativa + overflow visible + espacio para spin */
.restaurateur-pdp-right .quantity-field input[type="number"] {
    /* apariencias nativas */
    -moz-appearance: auto !important;
    appearance: auto !important;

    /* que no recorte los botones */
    overflow: visible !important;

    /* agregar un padding-right suficiente para que no queden fuera */
    padding-inline-end: 24px !important;
    /* Centrar texto si quieres */
    text-align: center !important;
}

/* 2) Firefox: restaura el spinner vertical */
.restaurateur-pdp-right .quantity-field input[type="number"]::-moz-inner-spin-button,
.restaurateur-pdp-right .quantity-field input[type="number"]::-moz-outer-spin-button {
    -moz-appearance: spinner-vertical !important;
    display: block !important;
}

/* 3) WebKit (Chrome/Safari/Edge): muestra los spin buttons */
.restaurateur-pdp-right .quantity-field input[type="number"]::-webkit-inner-spin-button,
.restaurateur-pdp-right .quantity-field input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: inner-spin-button !important;
    display: block !important;
    margin: 0; /* asegúrate de que no los saque del área */
}