/* Ramiky Úsvit — Bauhaus toy-block design system */
:root{
  --sea:#3f6d5c;
  --sea-dark:#294a3e;
  --sand:#e9dcbd;
  --sand-deep:#d8c9a8;
  --driftwood:#a9876b;
  --ink:#24231f;
  --paper:#f7f2e7;
  --white:#fff;
  --error:#b4432f;
  --ok:#3f6d5c;
  --radius:6px;
  --shadow-paper:0 10px 0 -6px rgba(36,35,31,.12), 0 18px 24px -14px rgba(36,35,31,.3);
  --font-display:"Iowan Old Style","Georgia","Times New Roman",serif;
  --font-body:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:"SF Mono",Consolas,"Courier New",monospace;
  --maxw:1180px;
}
*{box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1rem,4vw,2.5rem)}
h1,h2,h3{font-family:var(--font-display);line-height:1.1;margin:0 0 .5em}
:focus-visible{outline:3px solid var(--sea);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ===== header ===== */
.site-header{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:2px solid var(--ink)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem clamp(1rem,4vw,2.5rem)}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.logo-mark{flex:none}
.logo-word{font-family:var(--font-display);font-size:1.3rem;font-weight:700;color:var(--ink)}
.logo-word em{font-style:normal;color:var(--sea)}
.menu-toggle{display:none;background:none;border:2px solid var(--ink);border-radius:var(--radius);width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer}
.main-nav{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.main-nav a{text-decoration:none;font-weight:600;font-size:.95rem;position:relative;padding:.2rem 0}
.main-nav a::after{content:"";position:absolute;left:0;bottom:-3px;width:0;height:2px;background:var(--sea);transition:width .25s}
.main-nav a:hover::after,.main-nav a.active::after{width:100%}
.main-nav a.active{color:var(--sea)}
.nav-cart{display:flex;align-items:center;gap:.3rem;text-decoration:none}
.cart-count{background:var(--sea);color:var(--white);font-size:.75rem;font-weight:700;border-radius:999px;min-width:1.4em;height:1.4em;display:flex;align-items:center;justify-content:center;padding:0 .3em}
.nav-cart.bump .cart-count{animation:bump .4s ease}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.4)}100%{transform:scale(1)}}

@media (max-width:860px){
  .menu-toggle{display:flex}
  .main-nav{
    position:fixed;top:0;right:0;height:100vh;width:min(78vw,320px);
    background:var(--sea-dark);color:var(--sand);flex-direction:column;align-items:flex-start;
    padding:5rem 1.5rem 2rem;gap:1.2rem;
    transform:translateX(100%);visibility:hidden;transition:transform .3s ease;
  }
  .main-nav.open{transform:translateX(0);visibility:visible}
  .main-nav a{color:var(--sand)}
  .nav-cart{margin-top:1rem}
}

/* ===== buttons ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border:2px solid var(--ink);border-radius:var(--radius);
  padding:.75rem 1.5rem;font-weight:700;font-size:.95rem;cursor:pointer;
  text-decoration:none;position:relative;overflow:hidden;background:var(--paper);color:var(--ink);
  min-height:44px;
}
.btn span,.btn svg{position:relative;z-index:1}
.btn::before{content:"";position:absolute;inset:0;left:-100%;width:100%;background:var(--ink);transition:left .25s ease;z-index:0}
.btn:hover::before{left:0}
.btn-sea{background:var(--sea);color:var(--white);border-color:var(--sea)}
.btn-sea::before{background:var(--sea-dark)}
.btn-sand{background:var(--sand);border-color:var(--ink)}
.btn-sand::before{background:var(--ink)}
.btn-sand:hover{color:var(--sand)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost::before{background:var(--ink)}
.btn-ghost:hover{color:var(--sand)}
.btn-block{width:100%}

/* ===== hero ===== */
.hero{padding:clamp(2.5rem,6vw,5rem) 0 clamp(2rem,5vw,3.5rem);position:relative}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:2.5rem;align-items:center}
.hero-headline{font-size:clamp(2.4rem,6vw,4.4rem);margin:0 0 .6em}
.hero-clip{display:inline-block;clip-path:inset(0 100% 0 0);animation:wipe 1s cubic-bezier(.65,0,.35,1) .1s forwards}
@keyframes wipe{to{clip-path:inset(0 0 0 0)}}
.hero-lede{font-size:1.15rem;max-width:32ch;margin-bottom:1.6rem}
.hero-visual{position:relative;aspect-ratio:1/1}
.hero-collage{position:relative;width:100%;height:100%}
.hero-collage img{position:absolute;border-radius:var(--radius);box-shadow:var(--shadow-paper);object-fit:cover}
.hero-shape{position:absolute;z-index:0}

/* ===== reveal ===== */
.reveal{opacity:1;transform:none}
body:not(.no-js) .reveal{opacity:0;transform:translateY(24px)}
body:not(.no-js) .reveal.in-view{opacity:1;transform:translateY(0);transition:opacity .6s ease,transform .6s ease}
.reveal[data-delay="1"]{transition-delay:.08s}
.reveal[data-delay="2"]{transition-delay:.16s}
.reveal[data-delay="3"]{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  .hero-clip{animation:none;clip-path:none}
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
}

/* ===== page hero (inner pages) ===== */
.page-hero{padding:clamp(2.5rem,5vw,4rem) 0 2rem;border-bottom:2px solid var(--ink);background:var(--sand)}
.page-hero h1{font-size:clamp(2rem,4.5vw,3rem)}
.page-hero p{max-width:60ch;font-size:1.05rem}

/* ===== breadcrumbs ===== */
.breadcrumbs{font-size:.85rem;display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem;color:var(--driftwood)}
.breadcrumbs a{text-decoration:none;font-weight:600;color:var(--sea)}
.breadcrumbs span{opacity:.6}

/* ===== sections / grid helpers ===== */
section{padding:clamp(2.5rem,5vw,4.5rem) 0}
.section-head{max-width:46ch;margin-bottom:2rem}
.grid{display:grid;gap:1.5rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.mt-3{margin-top:3rem}
.mb-1{margin-bottom:1rem}.mb-2{margin-bottom:2rem}.mb-3{margin-bottom:3rem}

/* ===== product cards / strip ===== */
.product-strip{display:flex;gap:1.3rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.5rem;margin:0 -.2rem}
.product-strip .product-card{scroll-snap-align:start;flex:0 0 min(78vw,280px)}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.6rem}
.product-card{
  background:var(--white);border:2px solid var(--ink);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease;
}
.product-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-paper)}
.product-card .thumb{aspect-ratio:4/3;overflow:hidden;position:relative}
.product-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.product-card:hover .thumb img{transform:scale(1.08)}
.product-card .badge{position:absolute;top:.6rem;left:.6rem;background:var(--sea);color:#fff;font-size:.7rem;font-weight:700;padding:.25rem .55rem;border-radius:999px}
.product-card .body{padding:1rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.product-card .cat{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--driftwood);font-weight:700}
.product-card h3{font-size:1.1rem;margin:0}
.product-card .price{font-weight:700;color:var(--sea);font-size:1.1rem;margin-top:auto}
.product-card .card-actions{display:flex;gap:.5rem;padding:0 1rem 1rem}

/* ===== product detail ===== */
.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem}
.product-detail .gallery img{border:2px solid var(--ink);border-radius:var(--radius)}
.product-detail .meta-list{list-style:none;padding:0;margin:1rem 0;display:grid;gap:.4rem;font-size:.95rem}
.product-detail .price-lg{font-size:1.8rem;font-weight:700;color:var(--sea)}
.qty-field{display:flex;align-items:center;gap:.6rem;margin:1rem 0}
.qty-field input{width:4rem;text-align:center;padding:.5rem;border:2px solid var(--ink);border-radius:var(--radius)}
@media (max-width:760px){.product-detail{grid-template-columns:1fr}}

/* ===== cart / checkout ===== */
.cart-table{width:100%;border-collapse:collapse;margin-bottom:2rem}
.cart-table th,.cart-table td{text-align:left;padding:.8rem .5rem;border-bottom:1px solid var(--sand-deep)}
.cart-table .cart-item-img{width:64px;height:64px;object-fit:cover;border-radius:var(--radius);border:2px solid var(--ink)}
.cart-summary{background:var(--sand);border:2px solid var(--ink);border-radius:var(--radius);padding:1.5rem;max-width:380px;margin-left:auto}
.cart-summary .row{display:flex;justify-content:space-between;margin-bottom:.6rem}
.cart-summary .row.total{font-weight:700;font-size:1.2rem;border-top:2px solid var(--ink);padding-top:.6rem}
.cart-layout{display:grid;grid-template-columns:1.4fr .9fr;gap:2.5rem}
@media (max-width:860px){.cart-layout{grid-template-columns:1fr}.cart-summary{margin-left:0}}

/* ===== forms ===== */
.form-grid{display:grid;gap:1.1rem}
.form-grid.cols-2{grid-template-columns:1fr 1fr}
@media (max-width:620px){.form-grid.cols-2{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.35rem}
.field label{font-weight:700;font-size:.9rem}
.field input,.field select,.field textarea{
  border:2px solid var(--ink);border-radius:var(--radius);padding:.7rem .8rem;
  font-family:inherit;font-size:1rem;background:var(--white);accent-color:var(--sea);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--sea);outline-offset:1px}
.field textarea{resize:vertical;min-height:120px}
.field-error{color:var(--error);font-size:.85rem;min-height:1.2em}
.field.has-error input,.field.has-error textarea{border-color:var(--error)}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.field-row{display:flex;gap:.6rem}
.field-row input{flex:1}

/* ===== notice ===== */
.notice{border:2px solid var(--ink);border-radius:var(--radius);padding:1rem 1.2rem;background:var(--sand);margin:1rem 0}
.notice-ok{background:#dcebe3;border-color:var(--ok);color:var(--sea-dark)}
.notice-error{background:#f6ded8;border-color:var(--error);color:var(--error)}

/* ===== prose (legal pages) ===== */
.prose{max-width:68ch;font-size:1.02rem}
.prose h2{margin-top:2em;font-size:1.5rem}
.prose h3{margin-top:1.5em;font-size:1.15rem}
.prose p,.prose ul,.prose ol{margin-bottom:1em}
.prose ul{padding-left:1.3em}
.legal-toc{background:var(--sand);border:2px solid var(--ink);border-radius:var(--radius);padding:1.2rem 1.5rem;max-width:68ch;margin-bottom:2rem}
.legal-toc ol{margin:0;padding-left:1.3em}
.legal-toc a{text-decoration:none;font-weight:600;color:var(--sea)}

/* ===== faq ===== */
.faq{max-width:68ch}
.faq-item{border-bottom:1px solid var(--sand-deep);padding:.9rem 0}
.faq-item summary{font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:1.3rem;color:var(--sea)}
.faq-item[open] summary::after{content:"\2212"}
.faq-item p{margin:.7rem 0 0;color:var(--ink)}

/* ===== contact layout ===== */
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem}
.contact-info{display:grid;gap:1.2rem;align-content:start}
.contact-info .item{display:flex;gap:.8rem;align-items:flex-start}
.contact-info svg{flex:none;color:var(--sea)}
@media (max-width:860px){.contact-layout{grid-template-columns:1fr}}

/* ===== wall planner (signature feature) ===== */
.wall-planner{background:var(--sea-dark);border-radius:var(--radius);padding:1.5rem;color:var(--sand)}
.wall-controls{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1rem}
.wall-controls .btn{min-height:40px;padding:.55rem 1rem;font-size:.85rem}
.wall-board{
  position:relative;background:var(--sand) url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22><rect width=%2220%22 height=%2220%22 fill=%22%23e9dcbd%22/><rect width=%221%22 height=%2220%22 fill=%22%23d8c9a8%22/><rect width=%2220%22 height=%221%22 fill=%22%23d8c9a8%22/></svg>');
  border:2px solid var(--ink);border-radius:var(--radius);height:min(60vw,420px);overflow:hidden;touch-action:none;
}
.wall-shape{
  position:absolute;background:var(--white);border:2px solid var(--ink);border-radius:3px;
  display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;text-align:center;
  cursor:grab;user-select:none;box-shadow:0 4px 0 -2px rgba(0,0,0,.2);padding:.2rem;
}
.wall-shape.dragging{cursor:grabbing;box-shadow:0 8px 16px -4px rgba(0,0,0,.4);z-index:5}

/* ===== decorative dividers / patterns ===== */
.divider{width:100%;height:auto;display:block}
.footer-divider{width:100%;height:30px;display:block}

/* ===== footer ===== */
.site-footer{background:var(--sea-dark);color:var(--sand);padding-top:2.5rem}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr 1.2fr;gap:2rem;padding-bottom:2rem}
.footer-brand p{max-width:28ch;opacity:.85}
.footer-mail{display:flex;align-items:center;gap:.5rem}
.footer-col h3{font-family:var(--font-body);font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.8rem}
.footer-col{display:flex;flex-direction:column;gap:.5rem}
.footer-col a{text-decoration:none;opacity:.85}
.footer-col a:hover{opacity:1;text-decoration:underline}
.footer-newsletter h3{font-family:var(--font-display);font-size:1.2rem;margin-bottom:.3rem}
.footer-newsletter input[type=email]{border-radius:var(--radius);border:2px solid var(--sand);padding:.6rem .8rem;background:var(--sea-dark);color:var(--sand)}
.footer-newsletter input::placeholder{color:#cdbf9e}
.footer-bottom{border-top:1px solid rgba(233,220,189,.25);padding:1.2rem 0;font-size:.85rem;opacity:.75}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}

/* ===== cookie banner ===== */
.cookie-banner{
  position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:60;max-width:560px;margin:0 auto;
  background:var(--sea-dark);color:var(--sand);border:2px solid var(--ink);border-radius:var(--radius);
  padding:1.2rem 1.4rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  box-shadow:var(--shadow-paper);
}
.cookie-banner a{color:var(--sand);text-decoration:underline}
.cookie-actions{display:flex;gap:.6rem}
.cookie-banner .btn-ghost{color:var(--sand);border-color:var(--sand)}

/* ===== 404 ===== */
.page-404{text-align:center;padding:5rem 0}
.page-404 h1{font-size:clamp(4rem,12vw,8rem)}

/* ===== catalog filters & product actions ===== */
.catalog-filters{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:2rem}
.btn-filter{padding:.6rem 1.2rem;font-size:.9rem}
.btn-filter.active{background:var(--sea);color:var(--white);border-color:var(--sea)}
.product-actions{display:flex;gap:.6rem;flex-direction:column}
.product-shipping{background:var(--sand);border:2px solid var(--ink);border-radius:var(--radius);padding:1rem;margin-top:1.5rem;display:flex;flex-direction:column;gap:.8rem;font-size:.9rem}
.product-shipping p{margin:0;display:flex;align-items:center;gap:.5rem}
.product-shipping svg{flex:none;color:var(--sea)}
.cart-item{opacity:1}
.cart-item td{vertical-align:middle}
.cart-item input[type=number]{width:4rem;text-align:center;padding:.4rem;border:2px solid var(--ink);border-radius:var(--radius)}
.btn-remove{background:none;border:none;color:var(--driftwood);cursor:pointer;font-size:1.5rem;padding:0;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;border-radius:var(--radius);transition:background .2s ease,color .2s ease}
.btn-remove:hover{background:var(--sand);color:var(--error)}
.summary-row{display:flex;justify-content:space-between;margin-bottom:.8rem}
.summary-row span:last-child{font-weight:700}

/* COMPONENTS:
.wrap - centered max-width content wrapper
.btn / .btn-sea / .btn-sand / .btn-ghost / .btn-block - button variants with fill-sweep hover
.hero / .hero-grid / .hero-headline / .hero-clip / .hero-lede / .hero-visual / .hero-collage / .hero-shape - home hero composition
.page-hero - inner page intro banner (title + lede)
.breadcrumbs - small trail of links above a page title
.reveal / .in-view / [data-delay] - scroll-reveal animation hooks
.section-head - heading + intro paragraph above a section
.grid / .grid-2 / .grid-3 / .grid-4 - responsive CSS grid helpers
.mt-1..3 / .mb-1..3 - spacing utilities
.product-strip - horizontal scroll-snap row of product cards (mobile)
.product-grid - responsive grid of product cards (catalog)
.product-card / .thumb / .badge / .body / .cat / .price / .card-actions - product card anatomy
.product-detail / .gallery / .meta-list / .price-lg / .qty-field - single product page layout
.cart-table / .cart-item-img - cart line items table
.cart-summary / .cart-layout - order summary box and two-column cart page layout
.form-grid / .field / .field-error / .honeypot / .field-row - form layout and validation
.notice / .notice-ok / .notice-error - inline alert boxes
.prose - readable long-form legal/content text column
.legal-toc - table of contents box for legal pages
.faq / .faq-item - details/summary accordion
.contact-layout / .contact-info - contact page split layout
.wall-planner / .wall-controls / .wall-board / .wall-shape - signature gallery-wall planner widget
.divider / .footer-divider - decorative SVG dividers
.site-footer / .footer-grid / .footer-brand / .footer-col / .footer-newsletter / .footer-bottom - footer anatomy
.cookie-banner / .cookie-actions - cookie consent banner
.page-404 - 404 page centered layout
.catalog-filters / .btn-filter - category filter buttons
.product-actions - product action buttons container
.product-shipping - shipping info box
.cart-item / .btn-remove - cart table row and remove button
.summary-row - summary line in cart total
*/

/* ===== form messages ===== */
.form-msg{border:2px solid var(--ink);border-radius:var(--radius);padding:1rem 1.2rem;background:var(--sand);margin:1rem 0}

/* ===== wall planner section ===== */
.wall-planner-section{padding:clamp(2.5rem,5vw,4.5rem) 0}

/* ===== quantity input ===== */
.qty-input{width:4rem;text-align:center;padding:.5rem;border:2px solid var(--ink);border-radius:var(--radius);font-family:inherit;font-size:1rem;background:var(--white);accent-color:var(--sea)}

/* ===== product info ===== */
.product-info{display:flex;flex-direction:column;gap:1rem}

/* wg-contrast-autofix */
#wallClear { color: #ffffff !important; }
footer.site-footer div.wrap.footer-grid div.footer-brand span.logo-word { color: #ffffff !important; }