/* Mikella Ceramics – shared structural CSS. Each variant's style.css owns the look. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;line-height:1.5}
img,video,svg{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
ul[role=list],ol[role=list]{list-style:none;margin:0;padding:0}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.container{width:min(100% - 2.5rem, var(--max,1200px));margin-inline:auto}

/* header / nav skeleton */
.site-header{position:relative;z-index:20}
.nav-toggle{display:none;background:none;border:0;padding:.5rem;line-height:0}
.nav-toggle svg{width:26px;height:26px}
.nav-links{display:flex;gap:var(--nav-gap,1.5rem);align-items:center;flex-wrap:wrap}
.nav-links a{text-decoration:none}
.nav-links a[aria-current=page]{text-decoration:underline;text-underline-offset:.35em}
.cart-link{position:relative;display:inline-flex;align-items:center;gap:.35rem;text-decoration:none}
.cart-count{display:inline-block;min-width:1.35em;padding:0 .3em;border-radius:1em;font-size:.72em;text-align:center;line-height:1.35em}
.cart-count:empty{display:none}
@media (max-width:820px){
  .nav-toggle{display:inline-block}
  .nav-links{display:none;flex-direction:column;align-items:flex-start;gap:.9rem;padding:1rem 0}
  body.nav-open .nav-links{display:flex}
}

/* generic product card structure (styled per variant) */
.product-grid{display:grid;gap:var(--grid-gap,1.5rem);grid-template-columns:repeat(auto-fill,minmax(var(--card-min,220px),1fr))}
.product-card{position:relative;margin:0}
.product-card a{text-decoration:none;display:block}
.product-card .thumb{aspect-ratio:1/1;overflow:hidden;background:var(--thumb-bg,#eee)}
.product-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.product-card:hover .thumb img{transform:scale(1.04)}
.product-card .badge{position:absolute;top:.75rem;left:.75rem;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding:.3em .6em}
.product-card h3{margin:.9rem 0 .2rem;font-size:1rem;font-weight:500}
.product-card .price{margin:0;opacity:.75}
.product-card .short{margin:.25rem 0 0;font-size:.9rem;opacity:.7}

/* gallery grid + lightbox */
.gallery-grid{display:grid;gap:var(--gallery-gap,.75rem);grid-template-columns:repeat(auto-fill,minmax(var(--gallery-min,180px),1fr))}
.gallery-grid figure{margin:0;position:relative;overflow:hidden;background:#ddd}
.gallery-grid img{width:100%;aspect-ratio:4/5;object-fit:cover;cursor:zoom-in;transition:transform .6s}
.gallery-grid figure:hover img{transform:scale(1.03)}
.gallery-grid figcaption{position:absolute;inset:auto 0 0 0;padding:.6rem .75rem;font-size:.8rem;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.65));opacity:0;transition:opacity .3s;pointer-events:none}
.gallery-grid figure:hover figcaption{opacity:1}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(15,12,10,.94);display:none;align-items:center;justify-content:center;padding:1rem}
.lightbox.open{display:flex}
.lightbox img{max-width:min(100%,1100px);max-height:82vh;object-fit:contain;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lightbox .lb-caption{position:absolute;left:0;right:0;bottom:1rem;text-align:center;color:#eee;font-size:.9rem;padding:0 4rem}
.lightbox .lb-caption a{color:#fff}
.lightbox button{position:absolute;background:none;border:0;color:#fff;font-size:2rem;line-height:1;padding:.5rem 1rem;opacity:.8}
.lightbox button:hover{opacity:1}
.lightbox .lb-close{top:.5rem;right:.5rem}
.lightbox .lb-prev{left:.25rem;top:50%;transform:translateY(-50%)}
.lightbox .lb-next{right:.25rem;top:50%;transform:translateY(-50%)}

/* toast */
.toast{position:fixed;left:50%;bottom:1.5rem;transform:translate(-50%,20px);background:#222;color:#fff;padding:.75rem 1.25rem;border-radius:2rem;font-size:.9rem;opacity:0;transition:.3s;z-index:90;pointer-events:none;white-space:nowrap}
.toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast a{color:#fff;margin-left:.75rem;text-decoration:underline}

/* forms & cart tables */
.form-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.form-grid .full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:.3rem;font-size:.9rem}
.field input,.field select,.field textarea{padding:.65rem .8rem;border:1px solid var(--line,#cfc7bd);background:var(--input-bg,#fff);border-radius:var(--radius,4px);width:100%}
.cart-table{width:100%;border-collapse:collapse}
.cart-table th,.cart-table td{padding:.9rem .5rem;text-align:left;border-bottom:1px solid var(--line,#e3ddd5);vertical-align:middle}
.cart-table img{width:64px;height:64px;object-fit:cover;border-radius:var(--radius,4px)}
.cart-table .qty{display:inline-flex;align-items:center;border:1px solid var(--line,#cfc7bd);border-radius:var(--radius,4px)}
.cart-table .qty button{background:none;border:0;padding:.3rem .7rem}
.cart-table .qty span{min-width:2ch;text-align:center}
.cart-table .remove{background:none;border:0;opacity:.6;text-decoration:underline;padding:0}
.summary{display:grid;gap:.5rem}
.summary div{display:flex;justify-content:space-between}
.summary .total{font-weight:600;border-top:1px solid var(--line,#cfc7bd);padding-top:.5rem;margin-top:.25rem}
.empty{padding:2rem 0;opacity:.7}
.choice{display:flex;gap:.75rem;align-items:flex-start;padding:.75rem;border:1px solid var(--line,#cfc7bd);border-radius:var(--radius,4px);margin-bottom:.5rem;cursor:pointer}
.choice input{margin-top:.3rem}
.fame-box{border:1px solid var(--line,#cfc7bd);border-radius:var(--radius,4px);padding:1rem 1.25rem;margin:1.5rem 0}
.fame-box p{margin:.25rem 0}
.fame-box .fame-link{font-size:.9rem}
.demo-note{font-size:.8rem;opacity:.65;margin-top:1rem}

/* misc reusable */
.section{padding-block:var(--section-pad,4rem)}
.two-col{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));align-items:center}
.news-list article{display:grid;gap:1.25rem;grid-template-columns:minmax(90px,140px) 1fr;align-items:start;padding:1.5rem 0;border-bottom:1px solid var(--line,#e3ddd5)}
.news-list img{aspect-ratio:4/5;object-fit:cover;width:100%}
.news-list time{font-size:.8rem;opacity:.65;letter-spacing:.05em;text-transform:uppercase}
.news-list h3{margin:.2rem 0 .4rem}
.news-list p{margin:0}
.upcoming li{display:grid;grid-template-columns:110px 1fr;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--line,#e3ddd5)}
.upcoming .d{font-weight:600}
.upcoming small{display:block;opacity:.7}
.markets-list article{padding:1.5rem 0;border-bottom:1px solid var(--line,#e3ddd5)}
.markets-list h3{margin:0 0 .25rem}
.markets-list .meta{opacity:.75;font-size:.95rem;margin:.1rem 0}
.faq details{border-bottom:1px solid var(--line,#e3ddd5);padding:.75rem 0}
.faq summary{cursor:pointer;font-weight:500}
.faq p{margin:.5rem 0 0;opacity:.8}
.facts{display:grid;gap:.75rem 1.5rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:0}
.facts dt{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;opacity:.6}
.facts dd{margin:0 0 .5rem}
.process{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.process h3{margin:.5rem 0 .25rem}
.process p{margin:0;opacity:.8}
.testimonials{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.testimonials blockquote{margin:0;padding:1.5rem;border:1px solid var(--line,#e3ddd5)}
.testimonials cite{display:block;margin-top:.75rem;font-style:normal;font-size:.85rem;opacity:.65}
.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.5rem}
.filters button{border:1px solid var(--line,#cfc7bd);background:none;padding:.4rem 1rem;border-radius:var(--pill,2rem)}
.filters button[aria-pressed=true]{background:var(--accent,#333);color:var(--accent-ink,#fff);border-color:var(--accent,#333)}
.product-page{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.product-page .hero-img{aspect-ratio:1;object-fit:cover;width:100%}
.qty-row{display:flex;gap:.75rem;align-items:center;margin:1.25rem 0}
.qty-row input{width:70px;padding:.6rem;border:1px solid var(--line,#cfc7bd);border-radius:var(--radius,4px)}
.btn{display:inline-block;border:1px solid var(--accent,#333);background:var(--accent,#333);color:var(--accent-ink,#fff);padding:.8rem 1.6rem;text-decoration:none;border-radius:var(--radius,4px);letter-spacing:.04em}
.btn.ghost{background:none;color:inherit;border-color:currentColor}
.btn:disabled{opacity:.5;cursor:default}

/* buttons placed inside text blocks must keep their own colours */
.prose a.btn,p a.btn{color:var(--accent-ink,#fff);text-decoration:none;border-bottom:1px solid var(--accent,#333)}
.prose a.btn.ghost,p a.btn.ghost{color:inherit;border-bottom-color:currentColor}
/* cart table on phones: each row becomes a small card */
@media (max-width:640px){
  .cart-table,.cart-table tbody{display:block;width:100%}
  .cart-table thead{display:none}
  .cart-table tr{display:grid;grid-template-columns:56px 1fr auto;grid-template-areas:"img name remove" "img qty total";gap:.3rem .75rem;align-items:center;padding:.75rem 0;border-bottom:1px solid var(--line,#e3ddd5)}
  .cart-table td{display:block;padding:0;border:0}
  .cart-table td:nth-child(1){grid-area:img}
  .cart-table td:nth-child(2){grid-area:name}
  .cart-table td:nth-child(3){grid-area:qty}
  .cart-table td:nth-child(4){grid-area:total;text-align:right;font-weight:600}
  .cart-table td:nth-child(5){grid-area:remove;text-align:right}
  .cart-table img{width:56px;height:56px}
  .cart-table .remove{font-size:0;text-decoration:none}
  .cart-table .remove::before{content:"×";font-size:1.3rem;line-height:1}
}
}