/* Liedon Frisbeegolfseura /store */

:root {
    --orange:#f56e1d;
    --orange-dark:#d34d0d;
    --black:#141414;
    --ink:#202020;
    --muted:#666;
    --paper:#fff;
    --soft:#f5f5f3;
    --line:#e6e2de;
    --shadow:0 18px 50px rgba(25,25,25,.10);
    --radius:22px;
    --drawerW:400px;
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    margin:0;
    background:#fff;
    color:var(--ink);
    font-family:"Outfit",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    line-height:1.5
}

body::before {
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-2;
    background:radial-gradient(circle at 90% 5%,rgba(245,110,29,.11),transparent 30%),radial-gradient(circle at 5% 55%,rgba(245,110,29,.05),transparent 28%)
}

a {
    color:inherit;
    text-decoration:none
}

a:hover {
    color:var(--orange-dark)
}

.wrap {
    width:min(1180px,calc(100% - 36px));
    margin:0 auto
}

.muted {
    color:var(--muted)
}

.small {
    font-size:.9rem
}

.tiny {
    font-size:.8rem
}

.skip {
    position:absolute;
    left:-9999px
}

.skip:focus {
    left:16px;
    top:16px;
    background:#fff;
    padding:10px;
    z-index:9999
}

.topbar {
    position:sticky;
    top:0;
    z-index:70;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line)
}

.topbar-inner {
    min-height:84px;
    display:flex;
    align-items:center;
    gap:22px
}

.brand {
    display:flex;
    align-items:center;
    gap:14px;
    margin-right:auto
}

.logo-img {
    width:72px;
    height:72px;
    object-fit:contain
}

.brand-copy {
    display:flex;
    flex-direction:column;
    line-height:1.05
}

.brand-copy strong {
    font-size:1.25rem;
    letter-spacing:.08em
}

.brand-copy small {
    margin-top:6px;
    color:#666
}

.home-link {
    white-space:nowrap
}

.btn,.cartbtn,.drawer-close,.qbtn {
    font:inherit
}

.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:0;
    border-radius:999px;
    padding:12px 18px;
    font-weight:800;
    letter-spacing:.035em;
    cursor:pointer;
    transition:.18s ease
}

.btn-primary {
    background:var(--orange);
    color:#fff;
    box-shadow:0 8px 22px rgba(245,110,29,.24)
}

.btn-primary:hover {
    background:var(--orange-dark);
    color:#fff;
    transform:translateY(-1px)
}

.btn-ghost {
    background:#fff;
    color:var(--black);
    border:1px solid var(--line)
}

.btn-ghost:hover {
    border-color:var(--orange);
    color:var(--orange-dark)
}

.wide {
    width:100%
}

.cartbtn {
    border:0;
    border-radius:999px;
    padding:12px 16px;
    background:var(--black);
    color:#fff;
    font-weight:800;
    cursor:pointer
}

.pill {
    display:inline-grid;
    place-items:center;
    min-width:25px;
    height:25px;
    margin-left:6px;
    padding:0 7px;
    border-radius:99px;
    background:var(--orange);
    color:#fff
}

.hero {
    position: relative;
    overflow: hidden;
    background-image:
        linear-gradient(
            100deg,
            rgba(255, 255, 255, 0.94) 0%,
            rgba(255, 255, 255, 0.84) 45%,
            rgba(255, 255, 255, 0.62) 100%
        ),
        url("/assets/images/tausta2.jpg");
    background-position: center, center;
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
    border-bottom: 1px solid var(--line);
}

.hero::after {
    content:"";
    position:absolute;
    width:620px;
    height:120px;
    right:-100px;
    top:220px;
    transform:rotate(-13deg);
    background:linear-gradient(90deg,transparent,rgba(245,110,29,.82),rgba(20,20,20,.86),transparent);
    filter:blur(1px);
    opacity:.13
}

.hero-inner {
    min-height:500px;
    display:grid;
    grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);
    align-items:center;
    gap:70px;
    padding:64px 0
}

.eyebrow {
    display:inline-block;
    color:var(--orange-dark);
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.16em
}

.eyebrow.dark {
    color:var(--orange-dark)
}

.hero h1 {
    margin:12px 0 18px;
    font-size:clamp(3rem,6vw,5.8rem);
    line-height:.88;
    letter-spacing:-.045em;
    color:var(--black)
}

.hero h1 span {
    color:var(--orange)
}

.lead {
    max-width:720px;
    margin:0 0 24px;
    font-size:clamp(1.05rem,2vw,1.25rem);
    color:#4d4d4d
}

.chips {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:18px 0 26px
}

.chip {
    padding:7px 11px;
    border-radius:999px;
    background:#fff;
    border:1px solid var(--line);
    font-size:.88rem;
    font-weight:650
}

.hero-card {
    position: relative;
    min-height: 330px;
    display: grid;
    place-items: center;
    overflow: visible;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.hero-card::before {
    content: none;
}

.hero-card::after {
    content: none;
}

.hero-card img {
    position:relative;
    z-index:2;
    width:416px;
    max-width:none;
    height:auto;
    filter:drop-shadow(0 8px 16px rgba(0,0,0,.35));
    background:#fff;
    border-radius:50%;
    padding:12px
}

.actions {
    display:flex;
    gap:10px;
    flex-wrap:wrap
}

.section {
    padding:64px 0
}

.merch {
    background:var(--soft)
}

.section-head {
    display:flex;
    justify-content:space-between;
    gap:30px;
    align-items:end;
    margin-bottom:26px
}

.section-head h2 {
    font-size:clamp(2rem,4vw,3.2rem);
    margin:5px 0 0;
    line-height:1
}

.section-head p {
    max-width:520px;
    margin:0
}

.grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px
}

.panel {
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:22px
}

.product {
    padding:0;
    overflow:hidden;
    grid-column:span 2
}

.product .img {
    background:#fff;
    min-height:440px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-bottom:1px solid var(--line)
}

.product .img img {
    width:100%;
    height:100%;
    max-height:600px;
    object-fit:contain
}

.pbody {
    padding:22px
}

.pbody h3 {
    font-size:1.65rem;
    margin:0 0 8px
}

.fields {
    display:grid;
    grid-template-columns:1fr 120px;
    gap:12px;
    margin:18px 0
}

.form label,.fields label {
    display:flex;
    flex-direction:column;
    gap:6px;
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.08em
}

.form input,.form select,.form textarea,.fields input,.fields select,.drawer-coupon input {
    width:100%;
    border:1px solid #d8d4cf;
    border-radius:13px;
    background:#fff;
    padding:12px 13px;
    font:inherit;
    color:var(--ink);
    outline:none
}

.form input:focus,.form select:focus,.form textarea:focus,.fields input:focus,.fields select:focus,.drawer-coupon input:focus {
    border-color:var(--orange);
    box-shadow:0 0 0 3px rgba(245,110,29,.12)
}

.buyrow {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px
}

.price {
    font-size:2rem;
    font-weight:800;
    color:var(--black)
}

.checkout {
    display:none;
    background:#fff
}

.show-checkout .checkout {
    display:block
}

.checkout-grid {
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
    gap:24px;
    align-items:start
}

.panel-title {
    font-size:1rem;
    text-transform:uppercase;
    font-weight:800;
    letter-spacing:.1em;
    border-bottom:1px solid var(--line);
    padding-bottom:12px;
    margin-bottom:18px
}

.twocol {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-bottom:14px
}

.form>label {
    margin-bottom:14px
}

.support-box {
    margin:20px 0;
    border:1px solid #ffd6bd;
    border-radius:18px;
    background:#fff8f3;
    padding:18px
}

.support-box legend {
    padding:0 8px;
    color:var(--orange-dark);
    font-size:.82rem;
    font-weight:800;
    letter-spacing:.1em
}

.support-box p {
    margin:0 0 13px;
    color:#6d574a
}

.support-options {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px
}

.support-options label {
    display:block
}

.support-options input {
    position:absolute;
    opacity:0;
    pointer-events:none
}

.support-options span {
    display:block;
    text-align:center;
    padding:11px 8px;
    background:#fff;
    border:1px solid #e7d7cd;
    border-radius:12px;
    cursor:pointer;
    font-weight:700;
    letter-spacing:0
}

.support-options input:checked+span {
    background:var(--orange);
    border-color:var(--orange);
    color:#fff;
    box-shadow:0 6px 15px rgba(245,110,29,.18)
}

.totals {
    margin:18px 0;
    border-top:1px solid var(--line);
    padding-top:10px
}

.trow,.drow,.sumrow {
    display:flex;
    justify-content:space-between;
    gap:16px;
    padding:7px 0
}

.trow.total,.sumrow {
    font-size:1.2rem;
    border-top:1px solid var(--line);
    margin-top:5px;
    padding-top:12px
}

.support-total strong {
    color:var(--orange-dark)
}

.discount strong {
    color:#27813b
}

.checkbox {
    display:grid!important;
    grid-template-columns:22px 1fr;
    align-items:start;
    gap:10px!important;
    font-size:.95rem!important;
    letter-spacing:0!important;
    font-weight:500!important
}

.checkbox input {
    width:18px;
    height:18px;
    margin-top:3px
}

.terms {
    margin:20px 0
}

.terms a {
    text-decoration:underline;
    color:var(--orange-dark)
}

.hint {
    margin-top:10px;
    color:#777;
    font-size:.86rem
}

.cart-summary {
    position:sticky;
    top:110px
}

.support-note {
    margin-top:18px;
    padding:16px;
    border-radius:15px;
    background:var(--black);
    color:#fff
}

.support-note strong {
    color:#ff9453
}

.drawer-backdrop {
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.38);
    z-index:89
}

.drawer {
    position:fixed;
    z-index:90;
    right:0;
    top:0;
    bottom:0;
    width:min(var(--drawerW),100vw);
    background:#fff;
    box-shadow:-20px 0 50px rgba(0,0,0,.16);
    transform:translateX(102%);
    transition:.22s ease;
    display:flex;
    flex-direction:column
}

.drawer[aria-hidden="false"] {
    transform:translateX(0)
}

.drawer-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px;
    border-bottom:1px solid var(--line)
}

.drawer-title {
    font-size:1.3rem;
    font-weight:800
}

.drawer-close {
    border:0;
    background:#eee;
    width:40px;
    height:40px;
    border-radius:50%;
    cursor:pointer
}

.drawer-body {
    padding:20px;
    overflow:auto;
    flex:1
}

.drawer-items {
    margin:16px 0
}

.ditem {
    display:grid;
    grid-template-columns:1fr auto;
    gap:12px;
    align-items:center;
    padding:14px 0;
    border-bottom:1px solid var(--line)
}

.dname {
    font-weight:750
}

.dsize {
    display:inline-block;
    margin-left:8px;
    color:#777;
    font-weight:500
}

.dmeta {
    font-size:.86rem
}

.dqty {
    display:flex;
    align-items:center;
    gap:8px
}

.qbtn {
    width:32px;
    height:32px;
    border:1px solid var(--line);
    background:#fff;
    border-radius:50%;
    cursor:pointer
}

.qnum {
    min-width:20px;
    text-align:center;
    font-weight:800
}

.drawer-coupon {
    margin-top:24px
}

.coupon-label {
    display:block;
    font-size:.75rem;
    font-weight:800;
    letter-spacing:.1em;
    margin-bottom:6px
}

.drawer-foot {
    padding:20px;
    border-top:1px solid var(--line)
}

.drawer-actions {
    display:grid;
    gap:8px;
    margin:12px 0
}

.footer {
    border-top:1px solid var(--line);
    background:#fff;
    padding:30px 0
}

.footer-inner {
    display:flex;
    justify-content:space-between;
    gap:20px
}

#ffmBanner {
    max-width:1180px!important;
    margin:16px auto!important
}

.imgSwitchBtn {
    padding:7px 11px!important;
    min-width:38px
}

.added {
    transform:scale(.98)!important
}

@media(max-width:900px) {
    .topbar-inner {
        min-height:76px
    }

    .brand-copy small {
        display:none
    }

    .home-link {
        display:none
    }

    .hero-inner {
        grid-template-columns:1fr;
        gap:26px;
        min-height:auto;
        padding:42px 0
    }

    .hero-card {
        min-height:250px
    }

    .grid {
        grid-template-columns:1fr
    }

    .product {
        grid-column:auto
    }

    .checkout-grid {
        grid-template-columns:1fr
    }

    .cart-summary {
        position:static
    }

    .support-options {
        grid-template-columns:1fr 1fr
    }

    .section-head {
        align-items:start;
        flex-direction:column
    }

    .product .img {
        min-height:300px
    }

}

@media(max-width:580px) {
    .hero-card img {
        width:100%;
        max-width:416px
    }

    .wrap {
        width:min(100% - 24px,1180px)
    }

    .logo-img {
        width:58px;
        height:58px
    }

    .brand-copy strong {
        font-size:1rem
    }

    .cartbtn {
        padding:10px 12px;
        font-size:.82rem
    }

    .hero h1 {
        font-size:3.15rem
    }

    .section {
        padding:46px 0
    }

    .twocol {
        grid-template-columns:1fr
    }

    .support-options {
        grid-template-columns:1fr 1fr
    }

    .footer-inner {
        flex-direction:column
    }

    .product .img {
        min-height:250px
    }

    .buyrow {
        align-items:stretch;
        flex-direction:column
    }

    .price {
        font-size:1.7rem
    }

}

/* =========================================================
   VERKKOKAUPPA / RATATUKI -NOSTO
   Sama ulkoasu kuin /store-sivulla
   ========================================================= */

.support-strip {
    background: #141414;
    color: #ffffff;
    padding: 34px 0;
}

.support-strip .wrap {
    width: min(1180px, calc(100% - 36px));
    margin: 0 auto;
}

.support-grid {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 55px;
    align-items: center;
}

.support-strip .eyebrow.dark {
    display: inline-block;
    color: #f56e1d;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.support-grid h2 {
    margin: 7px 0 0;
    color: #ffffff;
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    line-height: 1.05;
    font-weight: 700;
}

.support-grid p {
    margin: 0;
    color: #dddddd;
    font-size: 1.02rem;
    line-height: 1.6;
}

.support-grid strong {
    color: #ffffff;
    font-weight: 800;
}

@media (max-width: 900px) {
    .support-strip {
        padding: 30px 0;
    }

    .support-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

}

@media (max-width: 580px) {
    .support-strip .wrap {
        width: min(100% - 24px, 1180px);
    }

    .support-grid h2 {
        font-size: 1.7rem;
    }

    .support-grid p {
        font-size: 0.98rem;
    }

}