@import "/scripts/shop.css"; /* Import general CSS */

/* ============================================================
   ELEGANT, PLAYFUL & COLORFUL MODERN THEME
   - Pastel accents, clean sans-serif, rounded corners
   - Generous whitespace, subtle hover animations
   - Light & bright, minimal clutter
   ============================================================ */

/* Google-style font import fallback via @font-face */
@font-face {
    font-family: 'Open Sans';
    src: local('Open Sans'), local('OpenSans'),
        url('/scripts/font/Open Sans.woff2') format('woff2'),
        url('/scripts/font/Open Sans.woff') format('woff');
}

/* ============================================================
   DESIGN TOKENS / VARIABLES
   ============================================================ */
html {
    /* Brand palette - soft pastels with vibrant pops */
    --color1:        #f9f7ff;   /* Page background - warm off-white */
    --color2:        #ffffff;   /* Header / menu background */
    --color3:        #4a4560;   /* Primary text - muted dark violet */
    --color4:        #7c6ef5;   /* Accent - soft violet */

    /* Extended palette */
    --accent:        #7c6ef5;   /* Violet accent */
    --accent-light:  #ede9ff;   /* Pale violet tint */
    --accent-hover:  #6254e0;   /* Deeper violet on hover */
    --accent-mint:   #4ecdc4;   /* Playful mint secondary */
    --accent-coral:  #ff6b7a;   /* Coral pop for highlights */
    --accent-yellow: #ffd166;   /* Warm yellow for badges */

    /* Neutrals */
    --bg:            #f9f7ff;
    --bg-card:       #ffffff;
    --fg:            #4a4560;
    --fg-muted:      #8b85a7;
    --border:        #e8e4f4;

    /* Spacing & shape */
    --radius-sm:     8px;
    --radius-md:     14px;
    --radius-lg:     24px;
    --radius-pill:   999px;

    /* Shadows - very soft, no heavy drops */
    --shadow-xs:     0 1px 4px rgba(124, 110, 245, 0.07);
    --shadow-sm:     0 2px 12px rgba(124, 110, 245, 0.09);
    --shadow-md:     0 4px 24px rgba(124, 110, 245, 0.12);

    /* Transitions */
    --ease:          0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   BASE & BODY
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--fg);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* ============================================================
   LINKS
   ============================================================ */
main a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color var(--ease), border-color var(--ease);
}

main a:hover {
    color: var(--accent-hover);
    border-bottom-color: var(--accent-hover);
}

/* ============================================================
   SVG ICONS
   ============================================================ */
svg,
svg path {
    fill: var(--fg-muted);
    transition: fill var(--ease);
}

svg:hover,
svg:hover path {
    fill: var(--accent);
}

/* ============================================================
   HEADER CONTAINER (#cont1)
   Top bar with logo, nav, header content.
   position:relative is critical - it makes #cont1 the
   containing block for the absolutely positioned nav
   on mobile, so the JS top offset calculation works.
   ============================================================ */
#cont1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 72px;
    background: var(--color2);
    border-bottom: 1px solid var(--border);
    padding: 0 32px;
    position: sticky;
    top: 0;
    z-index: 200;
    box-shadow: var(--shadow-xs);
    /* relative so absolute nav is offset from here on mobile */
    position: relative;
}

/* Logo area */
#header1 {
    text-align: left;
    padding: 10px 0;
    flex-shrink: 0;
}

#logo img {
    vertical-align: middle;
    max-height: 48px;
    width: auto;
    transition: opacity var(--ease);
}

#logo img:hover {
    opacity: 0.82;
}

/* Header CMS content area */
#headercontent {
    padding: 0 16px;
}

/* ============================================================
   NAV BAR (#header2)
   ============================================================ */
#header2 {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 0 0 16px;
    flex-grow: 1;
    justify-content: flex-end;
}

/* Icon buttons: search, cart, mnav */
#search,
#cart,
#mnav {
    margin: 0;
    display: inline-flex;
    align-items: center;
    padding: 8px;
    border-radius: var(--radius-md);
    transition: background var(--ease), transform var(--ease);
}

#search:hover,
#mnav:hover {
    background: var(--accent-light);
    transform: translateY(-1px);
}

/* Cart icon   badge */
#cart {
    position: relative;
}

#cart a {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#cart a:hover svg,
#cart a:hover svg path {
    fill: var(--accent);
}

#cart span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    margin-left: 2px;
    vertical-align: middle;
    font-size: 0.72em;
    font-weight: 700;
    color: #fff;
    background: var(--accent-coral);
    border-radius: var(--radius-pill);
    letter-spacing: 0;
    line-height: 1;
    transition: transform var(--ease), background var(--ease);
}

#cart a:hover span {
    background: var(--accent);
    transform: scale(1.15);
}

/* Language selector */
#lang {
    display: inline-block;
    vertical-align: top;
    font-weight: 600;
    white-space: nowrap;
}

#lang a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 44px;
    padding: 0 12px;
    border-radius: var(--radius-md);
    outline: none;
    text-decoration: none;
    font-size: 0.9em;
    color: var(--fg-muted);
    transition: color var(--ease), background var(--ease), transform var(--ease);
}

#lang a:hover {
    color: var(--accent);
    background: var(--accent-light);
    transform: translateY(-1px);
}

#lang span,
#lang svg {
    vertical-align: middle;
}

/* ============================================================
   NAVIGATION - DESKTOP
   ============================================================ */
nav {
    font-weight: 600;
    background: transparent;
    /* No max-height restriction on desktop - let it show freely */
    overflow: visible;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

nav ul,
nav li {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav > ul {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin: 0;
}

nav li {
    display: inline-block;
    position: relative;
}

nav a {
    display: block;
    line-height: 44px;
    padding: 0 14px;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-size: 0.93em;
    font-weight: 600;
    outline: none;
    color: var(--fg);
    transition: color var(--ease), background var(--ease), transform var(--ease);
    white-space: nowrap;
}

nav > ul > li > a {
    line-height: 44px;
}

nav a:hover {
    color: var(--accent);
    background: var(--accent-light);
    transform: translateY(-1px);
}

/* Active / current nav item */
nav a.active,
nav li.active > a {
    color: var(--accent);
    background: var(--accent-light);
}

/* Sub-navigation dropdown - desktop */
nav > ul ul {
    position: absolute;
    top: calc(100%   8px);
    left: 0;
    min-width: 180px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    z-index: 300;
    padding: 6px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

nav > ul ul > li {
    display: block;
}

nav > ul ul a {
    border-radius: var(--radius-sm);
    line-height: 38px;
    font-size: 0.9em;
    font-weight: 500;
    padding: 0 12px;
}

nav > ul li:hover > ul {
    opacity: 1;
    max-height: 500px;
}

/* ============================================================
   ACCOUNT NAVIGATION
   ============================================================ */
#accountnav {
    text-align: right;
    font-size: 0.88em;
    padding: 4px 0;
    color: var(--fg-muted);
}

#accountnav a {
    padding: 0 10px;
    text-decoration: none;
    color: var(--fg-muted);
    transition: color var(--ease);
}

#accountnav a:hover {
    color: var(--accent);
}

/* ============================================================
   MOBILE HAMBURGER - hidden on desktop, shown on mobile
   ============================================================ */
#mnav {
    /* Hidden on wide screens per shop.css; shown below in mobile MQ */
    display: none;
    cursor: pointer;
    z-index: 210; /* above the nav panel */
}

#mnav a {
    outline: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Highlight hamburger when nav is open */
#mnav.active {
    background: var(--accent-light);
}

#mnav.active svg,
#mnav.active svg path {
    fill: var(--accent);
}

/* Category bar - hidden on mobile in base styles */
#cat {
    display: none;
}

/* ============================================================
   MAIN CONTENT CONTAINER (#cont2)
   ============================================================ */
#cont2 {
    display: flex;
    width: 1180px;
    margin: 32px auto;
    min-height: 60vh;
    gap: 24px;
}

/* Main content */
main {
    flex-grow: 2;
    padding: 24px 28px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
}

/* Aside / sidebar */
aside {
    float: none;
    flex-shrink: 0;
}

#asidecontent {
    width: 220px;
    padding: 20px 16px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
}

/* ============================================================
   BUTTONS & FORM ELEMENTS
   ============================================================ */
.webshop_stylebutton,
input[type=submit],
input[type=button] {
    display: inline-block;
    min-width: 160px;
    margin: 0 0 10px 0;
    padding: 0 22px;
    min-height: 46px;
    cursor: pointer;
    line-height: 46px;
    border: 0;
    border-radius: var(--radius-pill);     /* pill-shaped - playful */
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 0.97rem;
    white-space: nowrap;
    text-decoration: none;
    text-align: center;
    letter-spacing: 0.01em;
    color: #fff;
    background: var(--accent);
    box-shadow: 0 2px 12px rgba(124, 110, 245, 0.25);
    transition: background var(--ease), transform var(--ease), box-shadow var(--ease);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.webshop_stylebutton:hover,
input[type=submit]:hover,
input[type=button]:hover {
    background: var(--accent-hover);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(124, 110, 245, 0.32);
}

.webshop_stylebutton:active,
input[type=submit]:active,
input[type=button]:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(124, 110, 245, 0.2);
}

input[type=submit]:disabled,
input[type=button]:disabled {
    background: #d5d0e8;
    color: #a89ec4;
    cursor: default;
    box-shadow: none;
    transform: none;
}

/* Form inputs */
input,
select,
textarea {
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    margin: 0 0 10px 0;
    padding: 10px 14px;
    font-size: 1rem;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    color: var(--fg);
    background: #fff;
    transition: border-color var(--ease), box-shadow var(--ease);
}

input:focus,
textarea:focus,
select:focus {
    background: #fff;
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(124, 110, 245, 0.15);
}

/* ============================================================
   SLIDESHOW
   ============================================================ */
#slideshow {
    width: 100%;
    overflow: hidden;
    border-radius: 0;
}

.webshop_slideshow {
    border-radius: 0;
}

/* ============================================================
   PRODUCT LIST CARDS - Add card styling via li wrappers
   ============================================================ */
#prodlist > li,
#catlist > li {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}

#prodlist > li:hover,
#catlist > li:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: rgba(124, 110, 245, 0.25);
}

/* Product name / price inside cards */
#prodlist > li > a > div:nth-of-type(2),
#catlist > li > a > div:nth-of-type(2) {
    padding: 10px 14px 14px;
}

/* ============================================================
   PRICE & STATUS
   ============================================================ */
.webshop_price {
    color: var(--accent);
    font-weight: 700;
}

.webshop_status_ok {
    background: #d3f9ee;
    color: #1a7a5c;
    border-radius: var(--radius-pill);
    padding: 4px 12px;
    font-size: 0.85em;
}

.webshop_status_warning {
    color: #d97706;
}

.webshop_status_error {
    background: #ffe4e6;
    color: #be123c;
    border-radius: var(--radius-pill);
    padding: 4px 12px;
}

/* ============================================================
   NUMBER NAVIGATION (pagination)
   ============================================================ */
.numnav a:hover,
.numnav span.active {
    background: var(--accent-light);
    color: var(--accent);
    border-radius: var(--radius-pill);
}

.numnav span.active {
    background: var(--accent);
    color: #fff;
}

/* ============================================================
   PANEL (filters / sort / view)
   ============================================================ */
.panel > span {
    color: var(--fg-muted);
    font-weight: 600;
    transition: color var(--ease);
}

.panel:hover span {
    color: var(--accent);
}

.panel:hover svg,
.panel:hover svg path {
    fill: var(--accent);
}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.webshop_breadcrumb {
    color: var(--fg-muted);
    font-size: 0.88rem;
    margin-bottom: 16px;
}

.webshop_breadcrumb a {
    color: var(--fg-muted);
    text-decoration: none;
    transition: color var(--ease);
}

.webshop_breadcrumb a:hover {
    color: var(--accent);
}

/* ============================================================
   FOOTER - Modern, clean, airy redesign
   ============================================================ */

/* Outer footer wrapper */
#footer1 {
    background: #f3f0ff;       /* Pale violet tint - light & fresh */
    color: var(--fg);
    padding: 0;
    border-top: 1px solid var(--border);
    margin-top: 40px;
}

/* Inner footer - main content */
#footer2 {
    max-width: 1180px;
    margin: 0 auto;
    padding: 56px 32px 40px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px 32px;
    align-items: start;
}

/* Footer links - general */
footer a {
    color: var(--fg-muted);
    text-decoration: none;
    transition: color var(--ease);
}

footer a:hover {
    color: var(--accent);
}

/* Category list in footer */
footer #cat {
    grid-column: 1;
    margin-bottom: 0;
}

footer #cat ul,
#footnav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

footer #cat > ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 24px;
}

footer #cat li,
#footnav li {
    display: block;
    width: auto;
    vertical-align: top;
}

/* Top-level footer category labels */
footer #cat > ul > li > a {
    font-weight: 700;
    font-size: 0.82em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    line-height: 36px;
    display: block;
    margin-bottom: 2px;
}

footer #cat ul ul {
    margin: 0 0 16px 0;
    font-size: 0.91em;
}

footer #cat ul ul a {
    line-height: 28px;
    color: var(--fg-muted);
    font-weight: 400;
}

footer #cat ul ul a:hover {
    color: var(--accent);
}

/* Footer nav */
#footnav {
    margin-bottom: 0;
}

#footnav > ul > li > a {
    font-weight: 700;
    font-size: 0.82em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    line-height: 36px;
    display: block;
    margin-bottom: 2px;
}

#footnav ul ul {
    margin: 0 0 16px 0;
    font-size: 0.91em;
}

#footnav ul ul a {
    line-height: 28px;
}

#footnav svg {
    display: none;
}

/* Footer address block */
footer address {
    width: auto;
    display: block;
    font-style: normal;
    font-size: 0.91em;
    line-height: 1.7;
}

address p {
    margin: 0 0 10px 0;
    color: var(--fg-muted);
}

address strong {
    color: var(--fg);
    font-weight: 700;
}

address a {
    color: var(--fg-muted);
    text-decoration: none;
    transition: color var(--ease);
}

address a:hover {
    color: var(--accent);
}

address svg {
    width: 14px;
    height: 14px;
    margin-right: 6px;
    vertical-align: middle;
    fill: var(--accent);
}

address svg path {
    fill: var(--accent);
}

/* Footer CMS content block */
#footercontent {
    display: block;
    font-size: 0.91em;
    color: var(--fg-muted);
}

/* Terms bar - bottom strip */
#terms {
    background: #ece8fb;
    border-top: 1px solid var(--border);
    padding: 14px 32px;
    font-size: 0.85em;
    color: var(--fg-muted);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

#terms span {
    margin: 0;
    color: var(--fg-muted);
}

#terms a {
    color: var(--fg-muted);
    text-decoration: none;
    margin: 0;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    transition: background var(--ease), color var(--ease);
}

#terms a:hover {
    background: var(--accent-light);
    color: var(--accent);
}

/* ============================================================
   HEADINGS
   ============================================================ */
h1 {
    font-size: 1.65em;
    font-weight: 800;
    color: var(--fg);
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin-top: 0;
}

h2 {
    font-size: 1.25em;
    font-weight: 700;
    color: var(--fg);
    letter-spacing: -0.01em;
}

/* ============================================================
   HORIZONTAL RULES
   ============================================================ */
hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 24px 0;
}

/* ============================================================
   INFO / ERROR BOXES
   ============================================================ */
div.info {
    background: var(--accent-light);
    border-left-color: var(--accent);
    color: var(--accent-hover);
    border-radius: var(--radius-md);
}

div.error {
    border-radius: var(--radius-md);
}

/* ============================================================
   SEARCH FORM
   ============================================================ */
#search_form {
    max-width: 360px;
}

#search_form input[type="search"] {
    border-radius: var(--radius-pill) 0 0 var(--radius-pill);
    border: 1.5px solid var(--border);
    border-right: none;
    padding: 8px 16px;
    font-size: 0.97em;
    background: #fff;
    transition: border-color var(--ease), box-shadow var(--ease);
}

#search_form input[type="search"]:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(124, 110, 245, 0.12);
    outline: none;
}

#search_form input[type="submit"] {
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
    min-width: 80px;
    margin: 0;
}

/* ============================================================
   UP ARROW
   ============================================================ */
#uparrow {
    bottom: 24px;
    right: 28px;
}

#uparrow a {
    background: var(--accent);
    border-radius: var(--radius-md);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--ease), transform var(--ease), box-shadow var(--ease);
    box-shadow: var(--shadow-sm);
}

#uparrow svg,
#uparrow svg path {
    fill: #fff;
    width: 24px;
    height: 24px;
}

#uparrow a:hover {
    background: var(--accent-hover);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

#uparrow a:hover svg,
#uparrow a:hover svg path {
    fill: #fff;
}

/* ============================================================
   SLIDESHOW DOTS
   ============================================================ */
.slideshow_bullets > div {
    border-radius: var(--radius-pill);
    border-color: rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.35);
    transition: background var(--ease), transform var(--ease);
}

.slideshow_bullets_active {
    background: #fff !important;
    transform: scale(1.2);
}

/* ============================================================
   CHECKOUT PROGRESS
   ============================================================ */
ul.checkoutprogress li {
    border-radius: var(--radius-md);
    background: #ece8fb;
    color: var(--fg-muted);
}

ul.checkoutprogress li:hover {
    background: var(--accent-light);
}

ul.checkoutprogress li.active {
    background: var(--accent);
    color: #fff;
}

ul.checkoutprogress li.active a {
    color: #fff;
}

ul.checkoutprogress li.active:after {
    border-left-color: var(--accent);
}

ul.checkoutprogress li:after {
    border-left-color: #ece8fb;
}

ul.checkoutprogress li:hover:after {
    border-left-color: var(--accent-light);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media all and (max-width: 1200px) {
    #cont2 {
        width: auto;
        margin: 24px 20px;
    }

    #footer2 {
        grid-template-columns: 1fr 1fr;
        padding: 40px 20px 32px;
    }
}

@media all and (max-width: 900px) {
    #footer2 {
        grid-template-columns: 1fr 1fr;
        gap: 32px 24px;
    }
}

/* ============================================================
   MOBILE NAV - 600px breakpoint
   The JS (mNav) works by:
     1. Setting nav.style.top    = mnav.offsetTop   mnav.offsetHeight
     2. Setting nav.style.maxHeight = items * itemHeight
     3. Toggling #mnav.active class
   So we need:
     - #cont1 position:relative  (JS offset parent)
     - nav starts with max-height:0 and overflow:hidden
     - nav position:absolute so it drops below the header bar
     - nav has a known background so it overlays the page
   ============================================================ */
@media all and (max-width: 600px) {

    /* Make #cont1 the JS offset parent for nav.style.top */
    #cont1 {
        position: relative;     /* JS calculates top relative to this */
        padding: 0 16px;
        flex-wrap: wrap;        /* allow nav to break onto its own row */
    }

    /* Show hamburger */
    #mnav {
        display: inline-flex;
        order: -1;              /* hamburger first in flex row */
    }

    /* Nav panel: collapsed by default, JS expands via style.maxHeight */
    nav {
        position: absolute;
        /* top is set dynamically by JS: mnav.offsetTop   mnav.offsetHeight */
        left: 0;
        width: 100%;
        max-height: 0;          /* collapsed; JS overrides this inline */
        overflow: hidden;
        background: var(--bg-card);
        border-bottom: 2px solid var(--border);
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
        box-shadow: var(--shadow-md);
        z-index: 199;           /* just below #cont1 z-index:200 */
        /* transition matches the JS animation expectation */
        transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* All list items become block / full-width */
    nav ul,
    nav ul li {
        display: block;
    }

    nav > ul {
        display: block;
    }

    nav li {
        display: block;
        position: relative;
    }

    /* Nav links - full-width rows */
    nav a {
        border-radius: 0;
        padding: 0 20px;
        line-height: 48px;
        font-size: 0.95em;
        transform: none;        /* disable lift on mobile */
        border-bottom: 1px solid var(--border);
        color: var(--fg);
        background: transparent;
    }

    nav a:hover {
        background: var(--accent-light);
        color: var(--accent);
        transform: none;
    }

    /* Sub-menus: static position, toggled by JS inline maxHeight */
    nav > ul ul {
        position: static;
        opacity: 1;             /* always visible when parent is expanded */
        max-height: 0;          /* JS sets this inline when toggling */
        box-shadow: none;
        border: none;
        border-radius: 0;
        background: var(--accent-light);
        padding: 0;
        /* inherit the transition so JS-driven open/close is smooth */
        transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Indent sub-menu links */
    nav > ul ul a {
        padding-left: 36px;
        font-size: 0.9em;
        line-height: 44px;
        border-bottom: 1px solid rgba(124, 110, 245, 0.12);
    }

    /* Disable desktop hover-open for sub-menus on mobile
       (JS handles it via onclick   inline maxHeight) */
    nav > ul li:hover > ul {
        max-height: 0;
    }

    /* Caret icons injected by JS into sub-menu parent links */
    nav a svg.caret {
        float: right;
        margin-right: 8px;
        margin-top: 14px;
        transition: transform var(--ease);
    }

    /* Rotate caret when submenu is open (JS sets data-open="1") */
    nav a[data-open="1"] svg.caret {
        transform: rotate(90deg);
    }

    /* Layout */
    #cont2 {
        width: auto;
        flex-flow: column;
        margin: 16px 12px;
        gap: 16px;
    }

    main {
        padding: 16px;
        border-radius: var(--radius-md);
    }

    #asidecontent {
        width: auto;
        margin: 0;
        padding: 16px;
        border-radius: var(--radius-md);
    }

    /* Footer */
    #footer2 {
        grid-template-columns: 1fr;
        padding: 32px 16px 24px;
        gap: 24px;
    }

    footer address {
        float: none;
        width: auto;
    }

    #terms {
        padding: 14px 16px;
        gap: 12px;
        font-size: 0.82em;
    }
}

@media all and (max-width: 460px) {
    #cont1 {
        padding: 0 12px;
    }

    #cont2 {
        margin: 12px 8px;
    }

    main {
        padding: 12px;
    }

    /* Buttons full-width on small screens */
    .webshop_stylebutton,
    input[type=submit],
    input[type=button] {
        min-width: 120px;
    }
}