/* =========================================================
   CAFÉ KAFRO · MOBILE PRO V2
   Solo actúa en móvil. No cambia el diseño de escritorio.
========================================================= */

@media (max-width: 700px) {
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    -webkit-text-size-adjust: 100%;
  }

  /* ---------- TOP BAR ---------- */
  .topbar {
    min-height: 34px !important;
    padding: 7px 12px !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }

  /* ---------- CABECERA COMÚN ---------- */
  .header,
  header.header,
  header.top,
  .top {
    padding: 8px 10px 0 !important;
  }

  .header .nav,
  header .nav,
  .top .nav {
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 12px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    gap: 11px 10px !important;
    align-items: center !important;
    border-radius: 22px !important;
  }

  .logo-area,
  .brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .logo-area img,
  .brand img,
  .logo-nav {
    width: 145px !important;
    max-width: 145px !important;
    height: 54px !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  .logo-main,
  .brand-main {
    font-size: 19px !important;
    letter-spacing: 3px !important;
  }

  .logo-sub,
  .brand-sub {
    margin-top: 4px !important;
    font-size: 7px !important;
    letter-spacing: 1.4px !important;
  }

  .actions,
  .nav-actions,
  .cart {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    justify-content: flex-end !important;
    text-align: right !important;
    width: auto !important;
  }

  .actions a,
  .nav-actions a,
  .cart-link,
  a.cart {
    min-height: 42px !important;
    padding: 0 13px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  /* 6 pestañas visibles: 2 filas x 3 columnas */
  .menu,
  .nav-links,
  .links {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    overflow: visible !important;
    flex-wrap: initial !important;
  }

  .menu a,
  .nav-links a,
  .links a {
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 8px 5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 13px !important;
    background: #0a0a0a !important;
    color: #fff !important;
    font-size: 11.5px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .menu a.active,
  .nav-links a.active,
  .links a.active,
  .menu .match,
  .nav-links .match {
    background: var(--lime, #d7ff00) !important;
    color: #050505 !important;
    border-color: var(--lime, #d7ff00) !important;
  }

  /* ---------- HOME · HERO INTEGRADO ---------- */
  .hero {
    width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .hero-grid {
    min-height: 560px !important;
    max-height: 620px !important;
    padding: 0 18px 24px !important;
    display: flex !important;
    align-items: flex-end !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 24px !important;
  }

  .hero-copy {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 3 !important;
    text-align: left !important;
  }

  .hero-photo {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  .hero-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .hero .tag,
  .hero-tag {
    padding: 8px 11px !important;
    font-size: 10px !important;
  }

  .hero h1,
  .hero-copy h1 {
    margin: 14px 0 12px !important;
    font-size: 35px !important;
    line-height: .98 !important;
    letter-spacing: -1.1px !important;
  }

  .hero p,
  .hero-copy p {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  .hero-buttons {
    margin-top: 17px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .hero-buttons a,
  .hero-buttons .btn {
    min-height: 46px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }

  /* ---------- BENEFICIOS ---------- */
  .benefits {
    width: calc(100% - 20px) !important;
    margin: 10px auto 0 !important;
    padding: 12px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    border-radius: 18px !important;
  }

  .benefit {
    min-width: 0 !important;
    padding: 10px !important;
    grid-template-columns: 28px 1fr !important;
    gap: 8px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.025) !important;
  }

  .benefit-icon {
    font-size: 20px !important;
  }

  .benefit strong {
    font-size: 11.5px !important;
  }

  .benefit small {
    margin-top: 3px !important;
    font-size: 10px !important;
  }

  /* ---------- SECCIONES ---------- */
  .section,
  .catalog,
  .page,
  .wrap,
  .subscription-page {
    max-width: 100% !important;
  }

  .section {
    padding: 38px 10px !important;
  }

  .center-title,
  .heading-row h2,
  .section-title {
    font-size: 28px !important;
    line-height: 1.05 !important;
  }

  .heading-row {
    margin-bottom: 16px !important;
    gap: 8px !important;
  }

  /* ---------- HOME · CATEGORÍAS 2x2 ---------- */
  .categories {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .category {
    min-height: 0 !important;
    padding: 9px !important;
    grid-template-columns: 1fr !important;
    gap: 5px !important;
    border-radius: 16px !important;
  }

  .category img {
    width: 100% !important;
    height: 125px !important;
    object-fit: contain !important;
  }

  .category h3 {
    margin: 4px 0 9px !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
  }

  .small-button {
    padding: 7px 10px !important;
    font-size: 10px !important;
  }

  /* ---------- CAFÉS 2 POR FILA ---------- */
  .products,
  .product-grid,
  .coffee-grid,
  .cafes-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .product,
  .product-card {
    min-width: 0 !important;
    padding: 8px !important;
    border-radius: 15px !important;
  }

  .product-image,
  .image-box {
    height: 165px !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    border-radius: 11px !important;
  }

  .product h3,
  .product-card h3,
  .info h3 {
    margin: 10px 0 5px !important;
    font-size: 14px !important;
    line-height: 1.13 !important;
  }

  .product p,
  .product-card p,
  .description,
  .desc {
    min-height: 0 !important;
    font-size: 10.5px !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .info {
    min-height: 0 !important;
    padding: 9px 4px 5px !important;
  }

  .top-meta,
  .product-info,
  .card-bottom {
    gap: 6px !important;
  }

  .origin {
    font-size: 9.5px !important;
  }

  .sca,
  .badge,
  .stock {
    padding: 5px 6px !important;
    font-size: 8.5px !important;
  }

  .price,
  .product .price {
    font-size: 13px !important;
  }

  .view {
    width: 34px !important;
    height: 34px !important;
    font-size: 16px !important;
  }

  /* filtros del catálogo */
  .filters-wrap {
    width: calc(100% - 20px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 9px !important;
  }

  .filters,
  .filter-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .filter-button,
  .filters button,
  .filters a {
    padding: 8px 9px !important;
    font-size: 10px !important;
  }

  /* ---------- PACKS 2 POR FILA ---------- */
  .packs,
  .pack-grid,
  .grid.packs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  /* packs.php usa .grid */
  body .section > .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .pack,
  .pack-card,
  .section > .grid > .card {
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 10px !important;
    grid-template-columns: 1fr !important;
    border-radius: 16px !important;
  }

  .pack-visual,
  .visual {
    height: 145px !important;
    min-height: 145px !important;
  }

  .pack-visual img,
  .visual img {
    max-height: 135px !important;
  }

  .pack-box {
    max-width: 90% !important;
  }

  .pack h3,
  .pack-card h3,
  .content h3 {
    margin: 7px 0 6px !important;
    font-size: 16px !important;
    line-height: 1.08 !important;
  }

  .pack p,
  .pack-card p,
  .content p,
  .includes {
    font-size: 10.5px !important;
    line-height: 1.35 !important;
  }

  .pack-price,
  .pack-card .price,
  .content .price {
    font-size: 17px !important;
  }

  .pack .btn,
  .pack-card .btn,
  .content .btn {
    min-height: 39px !important;
    padding: 0 10px !important;
    font-size: 10.5px !important;
  }

  /* Caja de muestras en packs */
  .sample {
    margin: 14px 10px 28px !important;
    padding: 14px !important;
    grid-template-columns: 42% 58% !important;
    gap: 10px !important;
    border-radius: 18px !important;
  }

  .sample-visual {
    min-height: 150px !important;
  }

  .sample-visual img {
    width: 100% !important;
    max-height: 150px !important;
  }

  .sample h2 {
    margin: 7px 0 !important;
    font-size: 21px !important;
  }

  .sample p {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  /* ---------- SUSCRIPCIÓN ---------- */
  .subscription-hero,
  .suscripcion-hero,
  .subscription-page .hero {
    padding: 36px 14px 22px !important;
  }

  .subscription-hero h1,
  .suscripcion-hero h1,
  .subscription-page h1 {
    font-size: 35px !important;
    line-height: 1 !important;
  }

  .subscription-grid,
  .plans,
  .plan-grid,
  .subscription-options,
  .option-grid,
  .selector-grid,
  .coffee-options,
  .format-options,
  .frequency-options {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .subscription-card,
  .plan,
  .plan-card,
  .option,
  .option-card,
  .selector-card {
    min-width: 0 !important;
    padding: 12px !important;
    border-radius: 16px !important;
  }

  .subscription-card h2,
  .subscription-card h3,
  .plan h2,
  .plan h3,
  .plan-card h3,
  .option h3 {
    font-size: 16px !important;
  }

  .subscription-card p,
  .plan p,
  .plan-card p,
  .option p {
    font-size: 11px !important;
    line-height: 1.4 !important;
  }

  /* formularios: cómodos sin hacerse gigantes */
  form input,
  form select,
  form textarea {
    max-width: 100% !important;
    font-size: 16px !important;
  }

  form button,
  form .btn {
    min-height: 44px !important;
  }

  /* ---------- KAFRO MATCH ---------- */
  .km-section {
    padding: 18px 10px 48px !important;
  }

  .km-shell {
    min-height: 0 !important;
    padding: 18px 12px !important;
    border-radius: 20px !important;
  }

  .km-intro,
  .match-box {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .km-art img,
  .match-box img {
    height: 120px !important;
  }

  .km-copy h2,
  .match-text h2 {
    font-size: 34px !important;
  }

  .km-copy h3,
  .match-text h3 {
    font-size: 21px !important;
  }

  .km-copy p,
  .match-text p {
    font-size: 13px !important;
  }

  /* ---------- FOOTER ---------- */
  .footer {
    padding: 35px 14px 24px !important;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px 14px !important;
  }

  .footer h3 {
    font-size: 13px !important;
  }

  .footer p,
  .footer a {
    font-size: 11px !important;
  }
}

@media (max-width: 390px) {
  .menu a,
  .nav-links a,
  .links a {
    font-size: 10.5px !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
  }

  .logo-area img,
  .brand img,
  .logo-nav {
    width: 125px !important;
    max-width: 125px !important;
  }

  .hero h1,
  .hero-copy h1 {
    font-size: 32px !important;
  }

  .product-image,
  .image-box {
    height: 150px !important;
  }
}


/* =========================================================
   KAFRO MOBILE PRO V3 · FIX PACKS + PRODUCTO
   2026-09-04
========================================================= */
@media (max-width:700px){

  /* =========================
     PRODUCTO · FICHA DE CAFÉ
     ========================= */

  /* Corrige el conflicto del v2: la ficha NO debe ir a 2 columnas */
  body .product-shell .product-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:18px !important;
  }

  body .product-shell{
    width:100% !important;
    padding:20px 12px 150px !important;
  }

  body .product-shell .back{
    margin-bottom:12px !important;
    font-size:12px !important;
  }

  body .product-shell .gallery{
    position:relative !important;
    top:auto !important;
    width:100% !important;
  }

  body .product-shell .gallery-main{
    width:100% !important;
    min-height:0 !important;
    height:330px !important;
    border-radius:18px !important;
  }

  body .product-shell .gallery-main > img{
    width:100% !important;
    height:330px !important;
    padding:12px !important;
    object-fit:contain !important;
  }

  body .product-shell .character-mini{
    width:82px !important;
    height:105px !important;
    right:10px !important;
    bottom:8px !important;
  }

  body .product-shell .product-info{
    width:100% !important;
    min-width:0 !important;
    padding:0 !important;
  }

  body .product-shell .meta-row{
    margin:0 0 12px !important;
    gap:6px !important;
  }

  body .product-shell .product-info h1{
    margin:0 !important;
    font-size:34px !important;
    line-height:1 !important;
    letter-spacing:-1px !important;
    overflow-wrap:anywhere !important;
  }

  body .product-shell .price-line{
    margin:14px 0 4px !important;
  }

  body .product-shell .price{
    font-size:25px !important;
  }

  body .product-shell .tax{
    font-size:11px !important;
  }

  body .product-shell .description{
    margin:16px 0 !important;
    font-size:13px !important;
    line-height:1.5 !important;
    display:block !important;
    -webkit-line-clamp:unset !important;
    overflow:visible !important;
  }

  /* Datos de origen/proceso/variedad/altitud: 2 por fila */
  body .product-shell .details{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
    margin:16px 0 18px !important;
  }

  body .product-shell .detail{
    min-height:78px !important;
    padding:11px !important;
    border-radius:13px !important;
  }

  body .product-shell .detail small{
    margin-bottom:5px !important;
    font-size:9px !important;
  }

  body .product-shell .detail strong{
    font-size:12px !important;
    line-height:1.25 !important;
  }

  body .product-shell .taste-block{
    margin:16px 0 !important;
    padding:14px !important;
    border-radius:16px !important;
  }

  body .product-shell .taste-block h2{
    margin-bottom:10px !important;
    font-size:22px !important;
  }

  body .product-shell .chips{
    gap:6px !important;
  }

  body .product-shell .chip{
    padding:7px 9px !important;
    font-size:10px !important;
  }

  body .product-shell .levels{
    gap:9px !important;
    margin-top:14px !important;
  }

  body .product-shell .level{
    grid-template-columns:80px 1fr !important;
    gap:8px !important;
  }

  body .product-shell .level strong{
    font-size:11px !important;
  }

  body .product-shell .dots{
    gap:5px !important;
    justify-content:flex-start !important;
  }

  body .product-shell .dots span{
    width:13px !important;
    height:13px !important;
  }

  body .product-shell .character-card{
    margin:16px 0 !important;
    padding:13px !important;
    grid-template-columns:90px 1fr !important;
    gap:12px !important;
    text-align:left !important;
    border-radius:16px !important;
  }

  body .product-shell .character-card img{
    width:90px !important;
    height:115px !important;
  }

  body .product-shell .character-card small{
    font-size:9px !important;
  }

  body .product-shell .character-card h2{
    margin:4px 0 !important;
    font-size:22px !important;
  }

  body .product-shell .character-card p{
    font-size:11px !important;
    line-height:1.35 !important;
  }

  body .product-shell .option-block{
    margin:17px 0 !important;
  }

  body .product-shell .option-title{
    align-items:end !important;
    gap:8px !important;
    margin-bottom:9px !important;
  }

  body .product-shell .option-title label{
    font-size:13px !important;
  }

  body .product-shell .option-title span{
    max-width:48% !important;
    font-size:10px !important;
    line-height:1.2 !important;
    text-align:right !important;
  }

  /* Formatos 250 / 500 / 1kg en una fila */
  body .product-shell .format-grid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:7px !important;
  }

  body .product-shell .format-content{
    min-height:72px !important;
    padding:9px !important;
    border-radius:12px !important;
  }

  body .product-shell .format-content strong{
    font-size:15px !important;
  }

  body .product-shell .format-content span{
    margin-top:4px !important;
    font-size:10px !important;
  }

  body .product-shell .molienda-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
  }

  body .product-shell .molienda-card{
    min-height:52px !important;
    padding:9px !important;
    font-size:12px !important;
    border-radius:12px !important;
  }

  body .product-shell .quantity-row{
    margin-top:17px !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:space-between !important;
  }

  body .product-shell .qty{
    height:46px !important;
    grid-template-columns:40px 45px 40px !important;
  }

  body .product-shell .qty input{
    width:45px !important;
  }

  body .product-shell .shipping{
    margin-top:17px !important;
    padding:12px !important;
  }

  body .product-shell .shipping p{
    margin:5px 0 !important;
    font-size:11px !important;
  }

  body .story-section{
    width:calc(100% - 24px) !important;
    margin:0 auto 35px !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  body .story-card{
    padding:16px !important;
    border-radius:16px !important;
  }

  body .story-card h2{
    font-size:24px !important;
  }

  body .story-card p,
  body .pair{
    font-size:12px !important;
    line-height:1.45 !important;
  }

  /* Barra de compra inferior más compacta */
  body .buy-bar{
    padding:9px 12px calc(9px + env(safe-area-inset-bottom)) !important;
  }

  body .buy-inner{
    display:grid !important;
    grid-template-columns:1fr 150px !important;
    gap:8px !important;
  }

  body .buy-summary{
    min-width:0 !important;
    text-align:left !important;
  }

  body .buy-summary strong{
    font-size:12px !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  body .buy-summary span{
    margin-top:3px !important;
    font-size:10px !important;
  }

  body .buy-bar .price{
    font-size:17px !important;
  }

  body .add-cart{
    width:150px !important;
    height:48px !important;
    padding:0 10px !important;
    font-size:13px !important;
  }

  /* =========================
     PACKS · LISTADO
     ========================= */

  body .hero{
    padding-top:30px !important;
    padding-bottom:20px !important;
  }

  body .hero h1{
    font-size:38px !important;
    line-height:.95 !important;
  }

  body .hero p{
    max-width:100% !important;
    margin-top:14px !important;
    font-size:13px !important;
    line-height:1.45 !important;
  }

  /* Caja de muestras: una tarjeta vertical limpia */
  body .sample{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    margin:10px 10px 28px !important;
    padding:12px !important;
    overflow:hidden !important;
  }

  body .sample-visual{
    width:100% !important;
    min-height:0 !important;
    height:155px !important;
  }

  body .sample-visual img{
    width:100% !important;
    height:145px !important;
    max-height:145px !important;
    object-fit:contain !important;
  }

  body .sample .eyebrow{
    font-size:9px !important;
    letter-spacing:1.5px !important;
  }

  body .sample h2{
    margin:5px 0 6px !important;
    font-size:25px !important;
    line-height:1 !important;
  }

  body .sample p{
    margin:0 0 10px !important;
    font-size:11px !important;
    line-height:1.4 !important;
  }

  body .sample .btn{
    width:100% !important;
    min-height:42px !important;
    font-size:12px !important;
  }

  body .section{
    padding:20px 10px 50px !important;
  }

  body .section-title{
    margin-bottom:18px !important;
    font-size:28px !important;
    gap:10px !important;
  }

  /* Mantiene 2 packs por fila pero sin superposición */
  body .section > .grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:9px !important;
    align-items:stretch !important;
  }

  body .section > .grid > .card{
    width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
    border-radius:15px !important;
    padding:0 !important;
  }

  body .section > .grid > .card .visual{
    flex:0 0 auto !important;
    width:100% !important;
    height:145px !important;
    min-height:145px !important;
    overflow:hidden !important;
  }

  body .section > .grid > .card .visual img{
    width:100% !important;
    height:145px !important;
    max-height:145px !important;
    object-fit:contain !important;
  }

  body .section > .grid > .card .content{
    min-width:0 !important;
    flex:1 1 auto !important;
    padding:10px !important;
    display:flex !important;
    flex-direction:column !important;
  }

  body .section > .grid > .card .eyebrow{
    font-size:8.5px !important;
    letter-spacing:1px !important;
  }

  body .section > .grid > .card h3{
    margin:5px 0 !important;
    font-size:16px !important;
    line-height:1.05 !important;
    overflow-wrap:anywhere !important;
  }

  body .section > .grid > .card .content > p{
    margin:4px 0 7px !important;
    font-size:10px !important;
    line-height:1.3 !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
  }

  body .section > .grid > .card .includes{
    margin:3px 0 !important;
    font-size:9.5px !important;
    line-height:1.3 !important;
    display:-webkit-box !important;
    -webkit-line-clamp:3 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
  }

  body .section > .grid > .card .chips{
    margin:8px 0 !important;
    gap:4px !important;
  }

  body .section > .grid > .card .chip{
    padding:5px 6px !important;
    font-size:8.5px !important;
    white-space:nowrap !important;
  }

  body .section > .grid > .card .card-bottom{
    margin-top:auto !important;
    padding-top:8px !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:7px !important;
    align-items:stretch !important;
  }

  body .section > .grid > .card .price{
    font-size:17px !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }

  body .section > .grid > .card .btn{
    width:100% !important;
    min-width:0 !important;
    min-height:38px !important;
    padding:0 6px !important;
    font-size:10px !important;
    border-radius:10px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
}

@media(max-width:390px){
  body .product-shell .gallery-main,
  body .product-shell .gallery-main > img{
    height:300px !important;
  }

  body .product-shell .product-info h1{
    font-size:31px !important;
  }

  body .section > .grid > .card .visual,
  body .section > .grid > .card .visual img{
    height:130px !important;
    min-height:130px !important;
  }

  body .section > .grid > .card h3{
    font-size:15px !important;
  }
}