/* ==========================================================
   TIENDA MOYA GLOBAL RETAIL V3
   ========================================================== */

:root{
  --tm-blue:#075ea8;
  --tm-blue-dark:#06497f;
  --tm-yellow:var(--tm-primary,#ff7b00);
  --tm-yellow-dark:#e8c400;

  --tm-ink:#26313b;
  --tm-muted:#707983;

  --tm-bg:#f5f6f7;
  --tm-card:#fff;
  --tm-border:#e2e6e9;

  --tm-radius:18px;

  --tm-shadow:
    0 14px 36px
    rgba(28,42,56,.08);
}

html,
body{
  background:var(--tm-bg) !important;
  color:var(--tm-ink) !important;
}

body,
input,
select,
textarea,
button{
  font-family:
    "DM Sans",
    Arial,
    Helvetica,
    sans-serif !important;
}

/* quitar lenguaje visual luxury */
h1,
h2,
h3,
h4,
.page-title,
.section-title,
.product-title,
.contact-panel h2,
.contact-hero h1{
  font-family:
    "DM Sans",
    Arial,
    sans-serif !important;

  letter-spacing:-.035em !important;

  font-weight:800 !important;
}

/* ==========================================================
   ESTRUCTURA GENERAL
   ========================================================== */

main{
  background:var(--tm-bg);
}

.container,
.shop-shell,
.product-shell,
.cart-shell,
.checkout-shell,
.account-shell,
.contact-shell,
.service-shell,
.about-shell{
  width:
    min(
      1400px,
      calc(100% - 48px)
    ) !important;

  max-width:1400px !important;

  margin-left:auto !important;
  margin-right:auto !important;
}

main > section:first-child,
.page-hero,
.shop-hero,
.product-hero,
.contact-hero{
  padding-top:34px;
}

.eyebrow,
.kicker{
  color:var(--tm-blue) !important;

  font-family:
    "DM Sans",
    Arial,
    sans-serif !important;

  font-size:10px !important;

  font-weight:800 !important;

  letter-spacing:.13em !important;

  text-transform:uppercase;
}

/* ==========================================================
   PANELES / TARJETAS
   ========================================================== */

.panel,
.card,
.shop-card,
.product-card,
.cart-card,
.checkout-card,
.account-card,
.contact-panel,
.summary-card,
.order-card,
.form-card{
  background:#fff !important;

  border:
    1px solid var(--tm-border) !important;

  border-radius:
    var(--tm-radius) !important;

  box-shadow:none !important;
}

.panel:hover,
.shop-card:hover,
.product-card:hover{
  border-color:
    rgba(7,94,168,.24) !important;
}

/* ==========================================================
   BOTONES
   ========================================================== */

button,
.button,
.btn,
.checkout,
.add-to-cart,
.add-cart,
.primary-button,
.contact-submit{
  border-radius:999px !important;

  font-family:
    "DM Sans",
    Arial,
    sans-serif !important;

  font-weight:800 !important;

  letter-spacing:0 !important;

  text-transform:none !important;
}

button[type="submit"],
.button-primary,
.btn-primary,
.primary-button,
.checkout,
.contact-submit,
.add-to-cart,
.add-cart{
  background:
    var(--tm-blue) !important;

  color:#fff !important;

  border-color:
    var(--tm-blue) !important;
}

button[type="submit"]:hover,
.button-primary:hover,
.btn-primary:hover,
.primary-button:hover,
.checkout:hover,
.contact-submit:hover,
.add-to-cart:hover,
.add-cart:hover{
  background:
    var(--tm-blue-dark) !important;
}

.btn-secondary,
.button-secondary{
  background:
    var(--tm-yellow) !important;

  color:var(--tm-ink) !important;

  border-color:
    var(--tm-yellow) !important;
}

/* ==========================================================
   INPUTS
   ========================================================== */

input,
select,
textarea{
  border:
    1px solid #d9dee2 !important;

  border-radius:12px !important;

  background:#fff !important;

  color:var(--tm-ink) !important;

  outline:0 !important;
}

input:focus,
select:focus,
textarea:focus{
  border-color:
    var(--tm-blue) !important;

  box-shadow:
    0 0 0 3px
    rgba(7,94,168,.08) !important;
}

/* ==========================================================
   TIENDA
   ========================================================== */

.shop-header,
.shop-top,
.catalog-header{
  background:transparent !important;
}

.filters,
.shop-filters,
.catalog-sidebar{
  background:#fff !important;

  border:
    1px solid var(--tm-border) !important;

  border-radius:16px !important;
}

.product-grid,
.products-grid,
.shop-grid{
  gap:14px !important;
}

.product-card{
  overflow:hidden;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.product-card:hover{
  transform:
    translateY(-3px);

  box-shadow:
    var(--tm-shadow) !important;
}

.product-card img{
  object-fit:contain !important;
}

.price,
.product-price,
.current-price{
  color:
    var(--tm-blue) !important;

  font-weight:900 !important;
}

.old-price,
.regular-price{
  color:#90969c !important;
}

/* ==========================================================
   PRODUCTO
   ========================================================== */

.product-gallery,
.product-info,
.product-summary{
  background:#fff;

  border:
    1px solid var(--tm-border);

  border-radius:20px;
}

.product-gallery{
  padding:20px;
}

.product-info,
.product-summary{
  padding:28px;
}

.product-title{
  color:var(--tm-ink) !important;
}

.product-description,
.product-short-description{
  color:var(--tm-muted) !important;

  line-height:1.75;
}

/* ==========================================================
   CARRITO
   ========================================================== */

.cart-item,
.cart-row{
  background:#fff !important;

  border:
    1px solid var(--tm-border) !important;

  border-radius:14px !important;
}

.cart-summary,
.order-summary{
  background:#fff !important;

  border:
    1px solid var(--tm-border) !important;

  border-radius:18px !important;

  box-shadow:none !important;
}

.cart-total,
.total,
.grand-total{
  color:
    var(--tm-blue) !important;
}

/* ==========================================================
   CHECKOUT
   ========================================================== */

.checkout-grid{
  gap:22px !important;
}

.checkout-section,
.checkout-panel{
  background:#fff !important;

  border:
    1px solid var(--tm-border) !important;

  border-radius:18px !important;

  box-shadow:none !important;
}

/* ==========================================================
   CUENTA
   ========================================================== */

.account-nav,
.account-sidebar{
  background:#fff !important;

  border:
    1px solid var(--tm-border) !important;

  border-radius:16px !important;
}

.account-nav a,
.account-sidebar a{
  border-radius:10px;
}

.account-nav a:hover,
.account-sidebar a:hover{
  background:#eef5fb !important;

  color:
    var(--tm-blue) !important;
}

/* ==========================================================
   CONTACTO
   ========================================================== */

.contact-shell{
  padding-top:46px !important;
}

.contact-hero{
  max-width:820px !important;
}

.contact-hero h1{
  color:var(--tm-ink) !important;

  font-size:
    clamp(
      40px,
      5vw,
      62px
    ) !important;
}

.contact-hero p,
.contact-aside-copy{
  color:
    var(--tm-muted) !important;

  line-height:1.75 !important;
}

.contact-shortcuts a{
  background:#eef5fb !important;

  border:
    1px solid #dce8f2 !important;

  color:
    var(--tm-blue) !important;

  border-radius:999px !important;

  letter-spacing:0 !important;

  text-transform:none !important;

  font-weight:700;
}

.contact-panel{
  border-radius:18px !important;

  padding:30px !important;
}

.contact-detail{
  border-color:
    var(--tm-border) !important;
}

.contact-detail span{
  color:
    var(--tm-blue) !important;

  letter-spacing:.08em !important;
}

/* ==========================================================
   SERVICIOS / NOSOTROS
   ========================================================== */

.services-grid,
.about-grid,
.info-grid{
  gap:16px !important;
}

.service-card,
.about-card,
.info-card{
  background:#fff !important;

  border:
    1px solid var(--tm-border) !important;

  border-radius:18px !important;

  box-shadow:none !important;
}

/* ==========================================================
   TABLAS
   ========================================================== */

table{
  border-collapse:
    separate !important;

  border-spacing:0 !important;

  overflow:hidden;

  background:#fff;

  border:
    1px solid var(--tm-border);

  border-radius:14px;
}

th{
  background:#f2f5f7 !important;

  color:var(--tm-ink) !important;
}

td,
th{
  border-color:
    var(--tm-border) !important;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media(max-width:900px){

  .container,
  .shop-shell,
  .product-shell,
  .cart-shell,
  .checkout-shell,
  .account-shell,
  .contact-shell,
  .service-shell,
  .about-shell{
    width:
      calc(100% - 28px) !important;
  }

  .product-info,
  .product-summary,
  .contact-panel{
    padding:22px !important;
  }
}

@media(max-width:600px){

  .contact-shell{
    padding-top:
      28px !important;
  }

  .contact-panel{
    border-radius:
      15px !important;
  }
}


/* ==========================================================
   TIENDA MOYA CUSTOMER AREA V3
   ========================================================== */

.customer-shell,
.customer-layout,
.customer-page,
.account-layout{
  width:min(1380px,calc(100% - 48px));
  margin-left:auto;
  margin-right:auto;
}

.customer-page{
  padding-top:38px;
  padding-bottom:70px;
}

.customer-layout,
.account-layout{
  display:grid;
  grid-template-columns:250px minmax(0,1fr);
  gap:22px;
  align-items:start;
}

.customer-sidebar,
.customer-nav,
.account-sidebar,
.account-nav{
  overflow:hidden;

  background:#fff !important;

  border:1px solid var(--tm-border) !important;
  border-radius:18px !important;

  box-shadow:none !important;

  padding:12px !important;
}

.customer-sidebar a,
.customer-nav a,
.account-sidebar a,
.account-nav a{
  min-height:44px;

  display:flex;
  align-items:center;

  padding:0 14px;

  border-radius:11px;

  color:var(--tm-ink) !important;

  text-decoration:none;

  font-size:13px;
  font-weight:700;

  transition:
    background .16s ease,
    color .16s ease;
}

.customer-sidebar a:hover,
.customer-nav a:hover,
.account-sidebar a:hover,
.account-nav a:hover,
.customer-sidebar a.active,
.customer-nav a.active,
.account-sidebar a.active,
.account-nav a.active{
  background:#eef5fb !important;
  color:var(--tm-blue) !important;
}

.customer-content,
.account-content,
.customer-panel{
  min-width:0;

  background:#fff;

  border:1px solid var(--tm-border);

  border-radius:20px;

  padding:28px;
}

.customer-content h1,
.customer-content h2,
.account-content h1,
.account-content h2{
  color:var(--tm-ink);

  font-family:
    "DM Sans",
    Arial,
    sans-serif !important;

  font-weight:800 !important;

  letter-spacing:-.035em !important;
}

.customer-content table,
.account-content table{
  width:100%;
}

.customer-content .empty,
.account-content .empty,
.customer-empty,
.account-empty{
  padding:34px;

  background:#f7f9fa;

  border:1px dashed #d8dfe4;

  border-radius:14px;

  color:var(--tm-muted);

  text-align:center;
}

.customer-content form,
.account-content form{
  display:grid;
  gap:14px;
}

.customer-content label,
.account-content label{
  font-size:12px;
  font-weight:700;
  color:var(--tm-ink);
}

@media(max-width:900px){

  .customer-shell,
  .customer-layout,
  .customer-page,
  .account-layout{
    width:calc(100% - 28px);
  }

  .customer-layout,
  .account-layout{
    grid-template-columns:1fr;
  }

  .customer-sidebar,
  .customer-nav,
  .account-sidebar,
  .account-nav{
    display:flex;
    overflow-x:auto;
    gap:4px;
  }

  .customer-sidebar a,
  .customer-nav a,
  .account-sidebar a,
  .account-nav a{
    flex:0 0 auto;
    white-space:nowrap;
  }

  .customer-content,
  .account-content,
  .customer-panel{
    padding:20px;
  }
}