/* ==========================================================================
   Matekmentor — webshop
   A WooCommerce sajat sablonjait oltozteti fel; sablont alig irunk felul,
   igy egy Woo-frissites nem tor el semmit.
   ========================================================================== */

.mm-shop .woocommerce-notices-wrapper{margin-bottom:26px}
.mm-ertesites{
  background:var(--gold-soft);border:2.5px solid var(--gold);border-radius:var(--r-l);
  padding:16px 22px;list-style:none;font-weight:700;display:flex;gap:14px;
  align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.woocommerce-error.mm-ertesites{background:var(--coral-soft);border-color:var(--coral)}
.mm-ertesites::before{display:none}

/* termeklista */
.woocommerce ul.products{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:0;padding:0;list-style:none}
@media(max-width:980px){.woocommerce ul.products{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.woocommerce ul.products{grid-template-columns:1fr}}
/* A WooCommerce uszo racsat kikapcsoljuk. A `columns-3` valtozat
   (`li.product{width:30.75%}`) 4 osztaly + 2 elem specifikussagu, ezert az
   attributumszelektorral ugyanarra a szintre kell emelni – kulonben a kartya a
   racscella harmadara zsugorodik. A sorrendet az assets.php 30-as prioritasa adja. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product,
.woocommerce[class*="columns-"] ul.products li.product,
.woocommerce-page[class*="columns-"] ul.products li.product{
  float:none;width:auto;margin:0;background:#fff;border:2.5px solid var(--ink);
  border-radius:var(--r-xl);overflow:hidden;display:flex;flex-direction:column;
  box-shadow:var(--shadow-s);transition:transform .25s ease,box-shadow .25s ease;padding:0;
}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none}
.woocommerce ul.products li.product:hover{transform:translateY(-5px);box-shadow:var(--shadow-m)}
.woocommerce ul.products li.product a img{margin:0;border-bottom:2.5px solid var(--ink);border-radius:0;aspect-ratio:4/3;object-fit:cover}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--f-display);font-size:1.08rem;padding:20px 22px 0;color:var(--ink-deep);
}
.woocommerce ul.products li.product .price{
  display:block;padding:8px 22px 0;font-family:var(--f-display);font-size:1.25rem;
  color:var(--ink-deep);font-weight:700;
}
.woocommerce ul.products li.product .price del{font-size:.95rem;opacity:.6;font-family:var(--f-text)}
.woocommerce ul.products li.product .price ins{text-decoration:none}
.woocommerce ul.products li.product .button{margin:auto 22px 22px;align-self:flex-start}
.woocommerce ul.products li.product .onsale{
  position:absolute;top:14px;left:14px;background:var(--coral);color:#fff;border-radius:999px;
  padding:.35em 1em;font-weight:800;font-size:.75rem;margin:0;min-height:0;min-width:0;line-height:1.4;
}
.woocommerce ul.products li.product{position:relative}
.woocommerce .woocommerce-result-count,.woocommerce .woocommerce-ordering{margin-bottom:26px}
.woocommerce .woocommerce-ordering select{width:auto}

/* egy termek */
.woocommerce div.product{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,56px);align-items:start}
@media(max-width:860px){.woocommerce div.product{grid-template-columns:1fr}}
.woocommerce div.product div.images,.woocommerce div.product div.summary{width:auto;float:none;margin:0}
.woocommerce div.product div.images img{border:2.5px solid var(--ink);border-radius:var(--r-xl)}
.woocommerce div.product p.price,.woocommerce div.product span.price{
  font-family:var(--f-display);font-size:clamp(1.7rem,3vw,2.3rem);color:var(--ink-deep);font-weight:700;
}
.woocommerce div.product p.price del{font-size:1.1rem;font-family:var(--f-text);opacity:.6}
.woocommerce div.product p.price ins{text-decoration:none}
.woocommerce div.product form.cart{margin:26px 0}
.woocommerce div.product form.cart div.quantity{margin-right:14px}
.woocommerce div.product form.cart .qty{width:88px;text-align:center}
.woocommerce div.product .woocommerce-tabs{grid-column:1/-1;margin-top:46px}
.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0;margin:0 0 22px;display:flex;gap:10px;flex-wrap:wrap}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:#fff;border:2.5px solid var(--ink);border-radius:999px;margin:0;padding:0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{padding:.6em 1.4em;font-weight:800;color:var(--ink)}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:var(--gold);border-color:var(--gold-deep)}
.woocommerce .related.products{grid-column:1/-1;margin-top:56px}

/* kosar, penztar, fiok */
.woocommerce table.shop_table{border:2.5px solid var(--ink);border-radius:var(--r-l);border-collapse:separate;overflow:hidden}
.woocommerce table.shop_table th{background:var(--paper-2);font-weight:800}
.woocommerce table.shop_table td,.woocommerce table.shop_table th{padding:16px 18px;border-color:var(--line)}
.woocommerce .cart-collaterals .cart_totals{width:100%;float:none}
.woocommerce-checkout #payment{background:var(--paper-2);border:2.5px solid var(--ink);border-radius:var(--r-l)}
.woocommerce-checkout #payment div.payment_box{background:#fff;border:2px dashed var(--line)}
.woocommerce-checkout #payment div.payment_box::before{display:none}
.woocommerce form .form-row{padding:0;margin-bottom:16px}
.woocommerce form .form-row label{font-weight:700}
.woocommerce-MyAccount-navigation ul{list-style:none;padding:0;display:flex;gap:10px;flex-wrap:wrap;margin-bottom:30px}
.woocommerce-MyAccount-navigation li{background:#fff;border:2.5px solid var(--ink);border-radius:999px}
.woocommerce-MyAccount-navigation li a{display:block;padding:.55em 1.3em;text-decoration:none;font-weight:800;font-size:.9rem}
.woocommerce-MyAccount-navigation li.is-active{background:var(--gold);border-color:var(--gold-deep)}
.woocommerce-MyAccount-content{width:100%;float:none}

/* Egyseges kartya-magassag: a termekkepek nagyon kulonbozo aranyuak, ezert
   fix magassagu dobozba kerulnek. Az aspect-ratio nem eleg, mert a Woo
   `height:auto` szabalya ugyanolyan specifikus. */
.woocommerce ul.products li.product img,
.woocommerce-page ul.products li.product img{
  width:100%;height:230px;object-fit:cover;margin:0;border-radius:0;
  border-bottom:2.5px solid var(--ink);display:block;
}
@media(max-width:640px){
  .woocommerce ul.products li.product img,
  .woocommerce-page ul.products li.product img{height:200px}
}
/* a cim ket sorra alljon be, hogy a kartyak also sora egy vonalban legyen */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  min-height:2.6em;display:flex;align-items:flex-start;
}

/* A WooCommerce sajat szabalya (.woocommerce .button:hover{color:#515151})
   hoverre elszurkiti az ecsetvonasos gombok feliratat. A gomb sajat szinet
   allitjuk vissza: az alap-, az "alt" es a torles-gomb egyarant a temaeban
   marad. NEM `inherit` - az a szulotol venne at a szint, es a sotet
   ecsetvonason olvashatatlan lenne. */
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover{color:var(--ink-deep)}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover{color:var(--ink-deep)}
