/* ===================================================================
   Loomiva look "Material – Material design, minimalist, utility". Loaded after app.css and theme.css only when
   this look is chosen. Fonts are stored on this server (assets/fonts,
   SIL Open Font License / Apache License 2.0 for Roboto).
   =================================================================== */
@font-face{font-family:"Roboto";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/roboto-400.woff2) format("woff2")}
@font-face{font-family:"Roboto";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/roboto-500.woff2) format("woff2")}
@font-face{font-family:"Roboto";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/roboto-700.woff2) format("woff2")}

body.shop.style-material {
    --ink:#191c1b; --muted:#4a5451; --line:#d7dcd9; --bg:#f6f8f7; --card:#ffffff; --accent:#2e6b60; --on-accent:#ffffff;
    --head:Roboto,system-ui,-apple-system,"Segoe UI",sans-serif; --body:Roboto,system-ui,-apple-system,"Segoe UI",sans-serif; --r:12px; --btn-r:20px; --panel:#ffffff;
    font-family:var(--body); color:var(--ink); background:var(--bg);
}
body.shop.style-material h1, body.shop.style-material h2, body.shop.style-material h3, body.shop.style-material .logo, body.shop.style-material .hero-headline,
body.shop.style-material .consent-title, body.shop.style-material .promo-percent { font-family:var(--head); font-weight:500; letter-spacing:0; font-variant-numeric:lining-nums; }
.style-material a { color:var(--accent); }
.style-material .muted, .style-material .crumbs, .style-material .crumbs a { color:var(--muted); }

/* Header */
.style-material .shop-header { background:#ffffff; border-bottom:1px solid var(--line); }
.style-material .logo { color:var(--ink); }
.style-material .account-link, .style-material .cart-link { color:var(--ink); }
.style-material .shop-search input { background:#ffffff; color:var(--ink); border-color:var(--line); border-radius:var(--btn-r) 0 0 var(--btn-r); }
.style-material .shop-search button { border-radius:0 var(--btn-r) var(--btn-r) 0; }
.style-material .cart-count { background:var(--accent); color:var(--on-accent); }
.style-material .shop-nav a { color:var(--muted); }
.style-material .shop-nav a:hover, .style-material .shop-nav a.active { color:var(--ink); border-bottom-color:var(--accent); }
/* Menus and pop-ups always get a solid surface, so links stay readable over the page behind them */
.style-material .nav-sub, .style-material .mega-panel, .style-material .suggest, .style-material .mini-cart, .style-material .card-choices, .style-material .img-popup-box {
    background:var(--panel); border-color:var(--line); border-radius:var(--r); color:var(--ink); box-shadow:0 16px 40px rgba(0,0,0,.16); }
.style-material .mega-panel { border-top-left-radius:0; border-top-right-radius:0; }
.style-material .shop-nav a.mega-feature, .style-material .shop-nav a.mega-feature:hover { background:var(--panel); }
.style-material .shop-nav .nav-sub a:hover, .style-material .suggest a:hover, .style-material .suggest li[aria-selected=true] a { background:#eef2f0; }
.style-material .suggest a, .style-material .shop-nav .mega-col a.mega-head { color:var(--ink); }

/* Buttons (icon-only and carousel buttons keep their own shape below) */
.style-material button, .style-material a.button { background:var(--accent); color:var(--on-accent); border:1px solid var(--accent); border-radius:var(--btn-r); padding:.7rem 1.3rem; font-family:var(--body);  }
.style-material button:hover, .style-material a.button:hover { filter:brightness(1.08); color:var(--on-accent); }
.style-material button.secondary, .style-material a.button-secondary { background:transparent; color:var(--ink); border:1px solid #79847f; }
.style-material button.secondary:hover, .style-material a.button-secondary:hover { background:#eef2f0; color:var(--ink); filter:none; }
.style-material button.link { background:none; border:0; padding:0; color:var(--accent); border-radius:0; text-transform:none; letter-spacing:0; font-size:inherit; }
.style-material button.card-round { padding:0; width:2.5rem; height:2.5rem; border-radius:50%; background:#ffffff; color:var(--ink); border:1px solid var(--line); text-transform:none; letter-spacing:0; }
.style-material button.card-quick { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.style-material button.gallery-arrow, .style-material button.carousel-arrow { padding:0; width:40px; height:40px; border-radius:50%; background:#ffffff; color:var(--ink); border:1px solid var(--line); letter-spacing:0; }
.style-material .hero-dots button { padding:0; width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,.55); border:1px solid rgba(0,0,0,.25); }
.style-material .hero-dots button.active { background:#fff; }
.style-material button.share-button { background:transparent; color:var(--ink); border:1px solid var(--line); padding:.45rem .9rem; font-size:.85rem; }
.style-material button.share-button:hover { border-color:var(--accent); color:var(--accent); filter:none; }
.style-material input[type=text], .style-material input[type=email], .style-material input[type=password], .style-material input[type=tel],
.style-material input[type=number], .style-material select, .style-material textarea, .style-material .qty { border-radius:8px; border-color:var(--line); background:#ffffff; color:var(--ink); }

/* Start page */
.style-material .home-intro h1 { font-size:clamp(1.9rem,4.5vw,3rem); line-height:1.05; }
.style-material .home-intro-body p, .style-material .home-intro-text > p { color:var(--muted); text-align:left; hyphens:manual; }
.style-material .home-cat { background:var(--card); border:1px solid var(--line); border-radius:var(--r); color:var(--ink); }
.style-material .home-cat:hover { border-color:var(--accent); }
.style-material .home-cat span { color:var(--muted); }
.style-material .hero { border-radius:var(--r); }
.style-material .home-section > h2, .style-material .list-title { font-size:1.5rem; }
.style-material .list-tabs { border-bottom-color:var(--line); }
.style-material .list-tabs a { color:var(--muted); }
.style-material .list-tabs a:hover, .style-material .list-tabs a.active { color:var(--ink); border-bottom-color:var(--accent); }
.style-material .chip { background:transparent; border-color:var(--line); color:var(--ink); border-radius:var(--btn-r); }
.style-material .chip:hover { border-color:var(--accent); }
.style-material .chip.is-on { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }

/* Product cards */
body.shop.style-material .card { background:var(--card); border:0; border-radius:var(--r); box-shadow:0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.06); }
body.shop.style-material .card:hover { border:0; box-shadow:0 4px 12px rgba(0,0,0,.14); }
body.shop.style-material .card-image { background:#eef2f0; border-radius:0; }
body.shop.style-material .card-title, body.shop.style-material .card-body h2, body.shop.style-material .row-scroll .card-body h3 { font:400 .95rem/1.4 Roboto,system-ui,sans-serif; color:var(--ink); }
.style-material .price { color:var(--ink); }
.style-material .card-buy button, .style-material .card-buy .button { background:transparent; color:var(--ink); border:1px solid #79847f; }
.style-material .card-buy button:hover, .style-material .card-buy .button:hover { background:var(--accent); border-color:var(--accent); color:var(--on-accent); filter:none; }
.style-material .card-buy button[disabled] { background:transparent; color:var(--muted); border-color:var(--line); }
.style-material .opt.is-active { border-color:var(--accent); }
.style-material .card-title a, .style-material .home-cat strong, .style-material .suggest-name { color:inherit; }

/* Product page */
.style-material .gallery-main { background:#eef2f0; border-color:var(--line); border-radius:var(--r); }
.style-material .gallery-thumbs a { border-color:var(--line); border-radius:8px; background:#eef2f0; }
.style-material .gallery-thumbs a.active, .style-material .gallery-thumbs a:hover, .style-material .colour:hover img, .style-material .colour.active img { border-color:var(--accent); }
.style-material .colour { color:var(--ink); }
.style-material .product-info h1 { font-size:clamp(1.6rem,3.2vw,2.4rem); line-height:1.12; }

/* Side column, guide, info, footer */
.style-material .consent-box { background:var(--panel); border-color:var(--line); border-radius:var(--r); color:var(--ink); }
.style-material .side-links, .style-material .bundle-bar, .style-material .panel { background:var(--card); border-color:var(--line); border-radius:var(--r); color:var(--ink); }
.style-material .side-links a { color:var(--ink); }
.style-material .home-guide details { border-bottom-color:var(--line); }
.style-material .home-guide summary { color:var(--ink); }
.style-material .info-section { background:#ffffff; border-top-color:var(--line); color:var(--ink); }
body.shop.style-material .site-footer { background:#e8edeb; color:#191c1b; }
.style-material .site-footer a { color:#191c1b; }
.style-material .site-footer.border-thick { border-top-color:var(--accent); }
.style-material .flash { background:#eef2f0; border-color:var(--line); color:var(--ink); border-radius:8px; }
.style-material .toast { border-radius:8px; }
@media (max-width:820px) { .style-material .dock { background:#ffffff; border-top-color:var(--line); } .style-material .dock a { color:var(--ink); } }

/* Look-specific details */

.style-material .shop-header { box-shadow:0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08); border-bottom:0; }
.style-material .logo { font-weight:500; font-size:1.45rem; letter-spacing:0; }
.style-material .shop-search input { background:#eef2f0; border:0; border-radius:28px 0 0 28px; padding:.75rem 1.2rem; }
.style-material .shop-search button { border-radius:0 28px 28px 0; }
.style-material .shop-nav a { font-weight:500; font-size:.9rem; border-bottom-width:3px; }
.style-material button, .style-material a.button { font-weight:500; letter-spacing:.01em; padding:.65rem 1.5rem; min-height:40px; box-shadow:none; }
.style-material button:hover, .style-material a.button:hover { box-shadow:0 1px 3px rgba(0,0,0,.2); filter:brightness(1.06); }
.style-material button.secondary, .style-material a.button-secondary { background:#d3e8e2; border-color:#d3e8e2; color:#0f3d36; }
.style-material button.secondary:hover, .style-material a.button-secondary:hover { background:#c3ded6; }
body.shop.style-material .container { padding-top:1.5rem; }
.style-material .home-intro-wrap { background:#fff; border-radius:16px; padding:clamp(1.25rem,4vw,2.5rem); margin-bottom:1.5rem; box-shadow:0 1px 3px rgba(0,0,0,.1); }
.style-material .home-intro h1 { font-weight:500; letter-spacing:-.01em; }
.style-material .home-cats { gap:.75rem; }
.style-material .home-cat { border:0; background:#eef2f0; border-radius:12px; min-height:72px; }
.style-material .home-cat:hover { background:#d3e8e2; }
.style-material .home-cat strong { font-weight:500; }
.style-material .home-section > h2, .style-material .list-title { font-weight:500; }
.style-material .list-tabs { border-bottom:0; gap:.5rem; flex-wrap:wrap; }
.style-material .list-tabs a { border:1px solid #79847f; border-radius:8px; min-height:36px; padding:.3rem .9rem; color:var(--ink); font-weight:500; font-size:.9rem; }
.style-material .list-tabs a.active { background:#d3e8e2; border-color:#d3e8e2; color:#0f3d36; }
.style-material .list-tabs a.active::before { content:"✓ "; }
.style-material .chip { border-radius:8px; border-color:#79847f; font-size:.88rem; }
.style-material .chip.is-on { background:#d3e8e2; border-color:#d3e8e2; color:#0f3d36; }
body.shop.style-material .grid { gap:1rem; }
body.shop.style-material .card-body { padding:.9rem 1rem 1rem; }
.style-material .price { font-weight:500; font-size:1.05rem; }
.style-material .card-buy button, .style-material .card-buy .button { background:var(--accent); color:#fff; border-color:var(--accent); font-weight:500; border-radius:20px; }
.style-material .card-buy button:hover, .style-material .card-buy .button:hover { filter:brightness(1.08); }
.style-material button.card-round { border:0; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.style-material .badge { border-radius:8px; font-weight:500; }
.style-material .gallery-main { border:0; box-shadow:0 1px 3px rgba(0,0,0,.12); background:#fff; }
.style-material .product-info h1 { font-weight:500; }
.style-material .side-links, .style-material .panel, .style-material .bundle-bar { border:0; box-shadow:0 1px 3px rgba(0,0,0,.1); }
.style-material .suggest, .style-material .mini-cart, .style-material .nav-sub { border:0; box-shadow:0 4px 12px rgba(0,0,0,.15); }
.style-material .footer-cols h2 { font-weight:500; }