/* GrandShop 2026 — ajustes para el HTML nativo de WooCommerce y WordPress (app.css = estilos de la vista previa) */

/* ---------- campos del checkout y Mi cuenta (form-row nativo con el aspecto de .campo-f) ---------- */
.gs-oculto,.woocommerce form .gs-oculto{display:none!important}
.form-row{display:grid;gap:6px;margin:0 0 16px;min-width:0}
.form-row label{font-weight:700;font-size:15px}
.form-row .optional,.form-row abbr.required,.form-row label .required{display:none}
.form-row .woocommerce-input-wrapper{display:block}
.form-row input.input-text,.form-row textarea,.form-row select,.woocommerce-EditAccountForm input.input-text{width:100%;min-height:50px;border-radius:12px;border:1.5px solid #B9B3A6;background:var(--blanco);padding:12px 14px;font:500 16px var(--texto);color:var(--tinta);transition:border-color .2s,box-shadow .2s}
.form-row textarea{min-height:96px;resize:vertical}
.form-row input.input-text:focus,.form-row textarea:focus,.form-row select:focus{outline:none;border-color:var(--tinta);box-shadow:0 0 0 3px var(--lima)}
.form-row input::placeholder,.form-row textarea::placeholder{color:#6B645A}
.form-row .description{font-size:13.5px;color:var(--tinta-2);margin:2px 0 0;display:block!important;position:static!important;background:none!important;padding:0!important;color:var(--tinta-2)!important}
.form-row .description::before{display:none!important}
.form-row.woocommerce-invalid input.input-text,.form-row.woocommerce-invalid .ciudad-btn{border-color:#B3261E;box-shadow:0 0 0 1px #B3261E}
.form-row.ck-check,.form-row.create-account{display:block;margin:4px 0 14px}
.form-row.ck-check label,.form-row.create-account label{display:flex;gap:10px;align-items:flex-start;font-weight:500;font-size:15px;cursor:pointer}
.form-row.ck-check input,.form-row.create-account input{width:20px;height:20px;margin-top:1px;accent-color:var(--tinta);flex:none}
.ck-fila{grid-template-columns:1fr 1fr;gap:0 16px}
.ck-fila>.form-row,.ck-fila>.campo-f{min-width:0}
.ck-fila .gs-si-interior[hidden]{display:none!important}
.campo-f.ciudad-f{position:relative}
.ck-retiro .form-row{margin-top:8px}
.woocommerce-additional-fields .form-row{margin-bottom:0}

/* opciones de entrega y pago (radios nativos de WooCommerce) */
#gs-entrega .opciones{margin-bottom:18px}
ul.opciones{list-style:none;margin:0 0 18px;padding:0}
ul.opciones li{margin:0}
.wc_payment_method .payment_box{padding:10px 16px 0;font-size:14px}
#payment .opciones .opcion input[type=radio]{display:block!important}
.blockUI.blockOverlay{background:rgba(250,250,246,.6)!important;border-radius:20px}

/* resumen del checkout */
.ck-items li img{width:56px;height:56px;object-fit:contain;border-radius:10px;background:#fff;box-shadow:0 0 0 1px var(--hilo-linea)}
.ck-totales .total-t,.ck-totales .total-v{font:800 22px var(--display);font-stretch:110%;padding-top:6px}
.ck-quitar{font-size:13px;font-weight:600;margin-left:6px;color:var(--tinta-2)}
.ck-cupon{margin-top:16px}
.ck-cupon-abrir{border:0;background:none;padding:4px 0;font:700 15px var(--texto);text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.ck-cupon-f{display:flex;gap:8px;margin-top:10px}
.ck-cupon-f input{flex:1;min-width:0;min-height:48px;border-radius:999px;border:1.5px solid var(--tinta);padding:0 16px;font:600 15px var(--texto);text-transform:uppercase}
.ck-cupon-f .btn{min-height:48px;padding:0 18px;font-size:15px}
.ck-cupon-msg{margin:10px 0 0;font-size:14px;color:var(--amaderado);font-weight:600}
.ck-cupon-msg.mal{color:#B3261E}
.ck-confirmar-caja{margin-top:8px}
.woocommerce-terms-and-conditions-wrapper{font-size:14px}
.woocommerce-terms-and-conditions-wrapper .woocommerce-privacy-policy-text p{font-size:13px;color:var(--tinta-2);margin:0 0 10px}
.woocommerce-terms-and-conditions-wrapper .form-row{display:block}
.woocommerce-terms-and-conditions-wrapper label{display:flex!important;gap:10px;align-items:flex-start;font-weight:500!important;cursor:pointer}
.woocommerce-terms-and-conditions-wrapper input[type=checkbox]{width:20px;height:20px;accent-color:var(--tinta);flex:none;margin-top:1px}
.woocommerce-terms-and-conditions-wrapper a{color:var(--tinta);font-weight:700}
.woocommerce-terms-and-conditions{max-height:200px;overflow:auto;font-size:13px;background:var(--algodon);padding:12px;border-radius:12px}
.ck-confirmar svg{color:var(--lima)}

/* avisos de WooCommerce con el estilo de la vista previa */
.woocommerce-error,.woocommerce-message,.woocommerce-info,.woocommerce-NoticeGroup .woocommerce-error,.wc-block-components-notice-banner{list-style:none;margin:0 0 18px;padding:14px 18px;border-radius:14px;font-size:15px}
.woocommerce-error,.wc-block-components-notice-banner.is-error{background:#FCEDEC;border:1.5px solid #B3261E;color:#5F1410}
.woocommerce-error li{margin:4px 0}
.woocommerce-error a{color:inherit;font-weight:600}
.woocommerce-message,.wc-block-components-notice-banner.is-success{background:#EEF4D2;border:1.5px solid var(--lima-osc);color:var(--tinta)}
.woocommerce-info,.wc-block-components-notice-banner.is-info{background:#F4F3EC;border:1.5px solid var(--hilo-linea);color:var(--tinta)}
.woocommerce-message .button,.woocommerce-info .button{float:right;font-weight:700;margin-left:12px}
.woocommerce-NoticeGroup-checkout:focus{outline:none}

/* ---------- tarjetas ---------- */
.prod .acc .added_to_cart{display:none}
.prod .acc .btn.loading{opacity:.6;pointer-events:none}
.prod .acc .btn.added::after{content:"✓";margin-left:2px}
.prod .sin.sin-pedido{background:var(--citrico);color:var(--tinta)}
.prod .foto img{width:100%;height:100%;object-fit:contain}
.estado.pedido i{background:var(--citrico);box-shadow:0 0 0 4px color-mix(in srgb,var(--citrico) 25%,transparent)}
.btn-aviso[aria-disabled="true"]{opacity:.7;cursor:default}

/* ---------- ficha ---------- */
.cantidad input.qty{width:44px;border:0;background:none;text-align:center;font:700 17px var(--texto);color:var(--tinta);-moz-appearance:textfield;appearance:textfield;padding:0}
.cantidad input.qty::-webkit-outer-spin-button,.cantidad input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.compra-variable form.cart{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.desc-completa{margin-top:14px}
.desc-completa summary{font-weight:700;cursor:pointer}
.huele .texto-largo img{height:auto;border-radius:12px}
.pdp-info .gsr-pbadge{margin-top:18px}

/* ---------- categoría ---------- */
.f-chip{display:inline-flex;cursor:pointer}
.f-chip input{position:absolute;opacity:0;pointer-events:none}
.f-chip span{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 12px;border-radius:999px;border:1.5px solid var(--tinta);font-weight:600;font-size:13.5px}
.f-chip i{width:10px;height:10px;border-radius:50%;background:var(--c)}
.f-chip input:checked+span{background:var(--tinta);color:var(--algodon)}
.f-chip input:focus-visible+span{outline:3px solid var(--tinta);outline-offset:2px}
.activos a{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border-radius:999px;background:var(--lima);font-weight:700;font-size:14px;text-decoration:none}
.activos a.todo{background:transparent;text-decoration:underline;text-underline-offset:.2em}
.woocommerce-ordering{margin:0}
.woocommerce-ordering select{height:46px;border-radius:999px;border:1.5px solid var(--tinta);background:var(--blanco);padding:0 40px 0 16px;font:600 15px var(--texto);color:var(--tinta);-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231E1A16' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;cursor:pointer;max-width:220px}
.paginas{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:32px 0 8px}
.paginas .page-numbers{display:inline-grid;place-items:center;min-width:46px;height:46px;padding:0 14px;border-radius:999px;border:1.5px solid var(--tinta);font-weight:700;text-decoration:none}
.paginas .page-numbers.current{background:var(--tinta);color:var(--algodon)}
.paginas .page-numbers.dots{border:0}

/* ---------- carrito ---------- */
.gs-actualizar{display:none}
.carrito .linea .variation{font-size:13px;color:var(--tinta-2);margin:0 0 8px}
.carrito .linea .variation dt,.carrito .linea .variation dd{display:inline;margin:0}

/* ---------- Mi cuenta ---------- */
.acc-tabs a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;border:2px solid var(--tinta);font-weight:700;font-size:15px;text-decoration:none}
.acc-tabs a[aria-current="page"]{background:var(--tinta);color:var(--algodon)}
.acc-btn{width:100%;margin-top:8px}
.olvido{margin:-4px 0 14px;font-size:14px}
.mc-nav li{margin:0}
.mc-nav li.woocommerce-MyAccount-navigation-link--customer-logout a{color:var(--tinta-2)}
.mc-panel h2{font:800 24px var(--display);font-stretch:110%;margin:24px 0 14px}
.mc-panel table.shop_table,.ok-detalle table.shop_table{width:100%;border-collapse:collapse;background:var(--blanco);border-radius:16px;overflow:hidden;font-size:15px}
.mc-panel table.shop_table th,.mc-panel table.shop_table td,.ok-detalle table.shop_table th,.ok-detalle table.shop_table td{padding:12px 14px;text-align:left;border-bottom:1.5px dashed var(--hilo-linea)}
.mc-panel .button,.ok-detalle .button,.woocommerce-Button,.woocommerce-address-fields .button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:999px;border:2px solid var(--tinta);background:var(--tinta);color:var(--algodon);font:700 15px var(--texto);text-decoration:none;cursor:pointer}
.woocommerce-Addresses address,.woocommerce-customer-details address{font-style:normal;background:var(--blanco);border-radius:16px;padding:16px 18px;line-height:1.6}
.woocommerce-Address-title{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.woocommerce-EditAccountForm fieldset{border:0;padding:0;margin:20px 0 0}
.woocommerce-EditAccountForm legend{font:800 20px var(--display);margin-bottom:10px}
.estado-chip.e-processing{background:#E4EDFB}
.estado-chip.e-completed{background:#EEF4D2}
.estado-chip.e-on-hold,.estado-chip.e-pending{background:#FFF3CC}
.mini-fotos img{width:48px;height:48px;object-fit:contain;border-radius:8px;background:#fff}

/* ---------- página de gracias ---------- */
.ok-detalle{max-width:720px;margin:0 auto 48px}
.ok-detalle h2{font:800 24px var(--display);font-stretch:110%;margin:28px 0 12px}
.ok-detalle .wc-bacs-bank-details,.ok-detalle ul.order_details{list-style:none;padding:16px 18px;background:var(--blanco);border-radius:16px}
.ok-detalle ul.order_details li{margin:4px 0}

/* ---------- textos de páginas y entradas ---------- */
.texto-largo{max-width:66ch;font-size:17px}
.texto-largo img{max-width:100%;height:auto}
.dlg-aviso .gs-trampa{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

@media (max-width:640px){
  .ck-fila{grid-template-columns:1fr}
  .ck-cupon-f{flex-direction:column}
  .woocommerce-ordering select{max-width:170px}
}

/* Entre 861 y 1180 px (tablets, laptops chicas y la vista previa del personalizador) el menú de
   categorías de la cabecera se ocultaba y la fila de pastillas todavía no aparecía: se muestran las pastillas. */
@media (min-width:861px) and (max-width:1180px){
  .chips-cat{display:flex;gap:8px;overflow-x:auto;padding:0 var(--gutter) 12px;scrollbar-width:none;overscroll-behavior-x:contain}
  .chips-cat::-webkit-scrollbar{display:none}
  .chips-cat a{flex:none;padding:9px 14px;border-radius:999px;border:1.5px solid var(--tinta);font-weight:600;font-size:14px;text-decoration:none;background:var(--blanco)}
  .chips-cat a:hover{background:#EFEDE4}
}

/* Con la barra de administrador de WordPress (solo la ven los administradores), la cabecera fija queda debajo de ella */
.admin-bar .cabecera{top:32px}
@media (max-width:782px){.admin-bar .cabecera{top:46px}}
@media (max-width:600px){.admin-bar .cabecera{top:0}}

/* Franja de avisos: un aviso por vez; el color es un campo entero (nunca texto de color sobre algodón) */
.franja-avisos{position:relative;background:var(--lima);color:var(--tinta);font:600 14px/1.35 var(--texto);text-align:center;padding:9px 92px 9px 48px;min-height:40px;display:flex;align-items:center;justify-content:center}
.franja-avisos[hidden]{display:none}
.franja-avisos.fc-tinta{background:var(--tinta);color:var(--algodon)}
.franja-avisos.fc-naranja{background:var(--naranja);color:#fff}
.franja-avisos.fc-azul{background:var(--tarjeta);color:#fff}
.fa-pista{width:100%}
.fa-aviso p{margin:0;animation:fa-entra .45s var(--ease)}
@keyframes fa-entra{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.fa-codigo{display:inline-block;margin-left:6px;padding:2px 10px;border:1.5px dashed currentColor;border-radius:999px;background:rgba(255,255,255,.85);color:var(--tinta);font:800 13.5px var(--texto);letter-spacing:.04em;cursor:pointer}
.fc-tinta .fa-codigo{background:var(--lima);border-color:var(--lima)}
.fa-ok{font-weight:700}
.fa-boton{display:inline-block;margin-left:8px;padding:3px 12px;border-radius:999px;background:var(--tinta);color:var(--algodon);font:700 13px var(--texto);text-decoration:none;white-space:nowrap}
.fc-tinta .fa-boton{background:var(--lima);color:var(--tinta)}
.fc-naranja .fa-boton,.fc-azul .fa-boton{background:#fff;color:var(--tinta)}
.fa-puntos{position:absolute;right:46px;top:50%;transform:translateY(-50%);display:flex;gap:5px}
.fa-puntos button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:currentColor;opacity:.35;cursor:pointer}
.fa-puntos button[aria-current="true"]{opacity:1}
.fa-cerrar{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:999px;background:transparent;color:inherit;cursor:pointer}
.fa-cerrar:hover{background:rgba(0,0,0,.1)}
@media (max-width:640px){.franja-avisos{font-size:13px;padding:8px 44px 18px 14px;text-align:left;justify-content:flex-start}.fa-puntos{right:auto;left:14px;top:auto;bottom:6px;transform:none}}
@media (max-width:640px){.franja-avisos:has(.fa-puntos:empty){padding-bottom:8px}}

/* ---------- Ventana emergente de promociones ---------- */
.vpop{padding:0;border:0;background:transparent;max-width:none;max-height:none;width:min(880px,calc(100% - 32px));color:inherit;overflow:visible}
.vpop::backdrop{background:rgba(30,26,22,.62);backdrop-filter:blur(3px)}
.vpop[open]{animation:vp-entra .5s var(--ease)}
@keyframes vp-entra{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.vp-caja{position:relative;display:grid;grid-template-columns:1fr;border-radius:24px;overflow:hidden;background:var(--tinta);color:var(--algodon);box-shadow:0 30px 80px -30px rgba(0,0,0,.6);margin:0}
.vp-con-img .vp-caja{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.vp-lima .vp-caja{background:var(--lima);color:var(--tinta)}
.vp-naranja .vp-caja{background:var(--naranja);color:#fff}
.vp-txt{padding:44px 40px 34px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:460px}
.vp-logo{height:30px;width:auto;margin-bottom:22px;background:var(--tinta);border-radius:8px;padding:5px 9px;box-sizing:content-box}
.vp-tinta .vp-logo{background:rgba(255,255,255,.08)}
.vp-reloj{display:inline-block;margin:0 0 16px;padding:7px 14px;border-radius:12px;background:var(--algodon);color:var(--tinta);font:800 15px var(--display);font-stretch:108%;letter-spacing:.01em}
.vp-txt h2{font:800 clamp(22px,2.6vw,30px)/1.1 var(--display);font-stretch:112%;letter-spacing:-.02em;margin:0 0 6px;text-wrap:balance}
.vp-grande{font:800 clamp(54px,7vw,92px)/.92 var(--display);font-stretch:118%;letter-spacing:-.04em;margin:6px 0 10px;color:var(--lima)}
.vp-lima .vp-grande,.vp-naranja .vp-grande{color:inherit}
.vp-detalle{font-size:16.5px;line-height:1.45;max-width:34ch;margin:0 auto 20px;opacity:.92;text-wrap:pretty}
.vp-codigo{position:relative;width:min(300px,100%);min-height:72px;border:2px dashed currentColor;border-radius:16px;display:grid;place-items:center;margin:0 auto 18px;overflow:hidden}
.vp-cod-txt{display:grid;gap:2px;padding:10px 16px}
.vp-cod-label{font:700 12px var(--texto);opacity:.75}
.vp-codigo b{font:800 26px var(--display);font-stretch:112%;letter-spacing:.04em}
.vp-rascar{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;border-radius:14px}
.vp-tapa{position:absolute;inset:0;border:0;border-radius:14px;background:#DADDCB;color:var(--tinta);font:700 14px var(--texto);cursor:pointer;pointer-events:none}
.vp-codigo[data-revelar="tocar"] .vp-tapa{pointer-events:auto;background:var(--algodon)}
.vp-codigo[data-revelar="rascar"] .vp-tapa{background:transparent;pointer-events:none;z-index:2;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.vp-codigo.visto .vp-rascar,.vp-codigo.visto .vp-tapa,.vp-codigo.rascando .vp-tapa{display:none}
.vp-codigo.visto b{animation:vp-cod .5s var(--ease)}
@keyframes vp-cod{from{transform:scale(.9);opacity:.4}to{transform:none;opacity:1}}
.vp-acc{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.vp-btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border-radius:999px;border:2px solid currentColor;background:var(--algodon);color:var(--tinta);font:700 16px var(--texto);text-decoration:none;cursor:pointer;transition:transform .2s var(--ease)}
.vp-btn:active{transform:scale(.97)}
.vp-btn:disabled{opacity:.45;cursor:not-allowed}
.vp-tinta .vp-btn:not(.vp-sec){background:var(--lima);border-color:var(--lima)}
.vp-lima .vp-btn:not(.vp-sec){background:var(--tinta);color:var(--algodon);border-color:var(--tinta)}
.vp-btn.vp-sec{background:transparent;color:inherit}
.vp-nota{font-size:12.5px;opacity:.7;margin:18px 0 0;max-width:40ch}
.vp-foto{position:relative;min-height:100%}
.vp-foto .vp-img,.vp-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vp-cerrar{position:absolute;top:12px;left:12px;z-index:3;width:42px;height:42px;display:grid;place-items:center;border:0;border-radius:999px;background:rgba(0,0,0,.18);color:inherit;cursor:pointer}
.vp-con-img .vp-cerrar{left:auto;right:12px;background:rgba(255,255,255,.88);color:var(--tinta)}
.vp-cerrar:hover{background:rgba(0,0,0,.3)}
.vp-abierta{overflow:hidden}
/* En el celular: hoja desde abajo, sin foto, para no tapar toda la pantalla */
@media (max-width:700px){
  .vpop{width:100%;margin:auto 0 0;max-height:88vh}
  .vpop[open]{animation:vp-sube .45s var(--ease)}
  @keyframes vp-sube{from{transform:translateY(100%)}to{transform:none}}
  .vp-con-img .vp-caja,.vp-caja{grid-template-columns:1fr;border-radius:24px 24px 0 0;max-height:88vh;overflow:auto}
  .vp-foto{display:none}
  .vp-txt{min-height:0;padding:30px 20px calc(24px + env(safe-area-inset-bottom))}
  .vp-logo{display:none}
  .vp-con-img .vp-cerrar{right:10px;top:10px;background:rgba(0,0,0,.18);color:inherit}
  .vp-grande{font-size:56px}
}