/*
Theme Name: Pica Pico
Theme URI: https://picapico.se/
Author: Pica Pico
Description: Redigerbart WordPress-tema för Pica Picos webbplats.
Version: 1.6.4
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: pica-pico
*/

:root {
  --orange: #e55310;
  --texture: #b85228;
  --gold: #f9c15c;
  --cream: #faf7f2;
  --paper: #fffdf9;
  --ink: #321c14;
  --deep: #211b1a;
  --surface-shadow: 0 14px 32px rgb(55 32 16 / .09);
  --serif: Arvo, Georgia, serif;
  --display: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: var(--serif); }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }
section { scroll-margin-top: 90px; }
.page-width { width: min(100% - 48px, 1240px); margin-inline: auto; }
.section-pad { padding-block: clamp(76px, 9vw, 132px); }
.skip-link { position: absolute; top: -50px; left: 12px; z-index: 100; padding: 10px 14px; background: white; }
.skip-link:focus { top: 12px; }

.site-header { position: relative; isolation: isolate; background: var(--orange); color: var(--gold); z-index: 10; }
.header-texture { position: absolute; inset: 0; z-index: -1; background: var(--pp-pattern-image, url('assets/pattern.webp')) center / cover no-repeat; opacity: .64; pointer-events: none; }
.header-inner { width: min(100% - 48px, 1280px); min-height: 116px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand { display: block; width: clamp(190px, 21vw, 260px); flex: none; }
.brand img { width: 100%; height: auto; filter: drop-shadow(0 2px 3px rgb(46 22 13 / .38)); }
.site-nav { display: flex; gap: clamp(16px, 2.3vw, 38px); align-items: center; }
.site-nav-list { display: flex; align-items: center; gap: clamp(16px, 2.3vw, 38px); list-style: none; margin: 0; padding: 0; }
.site-nav a { color: #fff; text-decoration: none; font-size: clamp(14px, 1.15vw, 17px); font-weight: 700; white-space: nowrap; text-shadow: 0 2px 3px rgb(46 22 13 / .42); }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--gold); }
.header-rule { height: 12px; background: linear-gradient(to bottom, var(--gold) 0 4px, transparent 4px 8px, var(--gold) 8px 12px); box-shadow: 0 3px 8px rgb(0 0 0 / .24); }
.menu-toggle { display: none; }

.hero { min-height: min(810px, 76vw); position: relative; display: flex; align-items: center; overflow: hidden; color: #fff; background: #463528; }
.hero-image, .hero-shade { position: absolute; inset: 0; }
.hero-image { background: url('assets/hero.jpg') center 54% / cover no-repeat; transform: scale(1.005); }
.hero-shade { background: linear-gradient(90deg, rgb(22 15 13 / .66), rgb(25 16 12 / .39) 54%, rgb(18 13 11 / .2)), linear-gradient(0deg, rgb(21 12 7 / .38), transparent 35%); }
.hero-content { position: relative; z-index: 1; padding-block: 96px 110px; }
.eyebrow { font-size: 13px; text-transform: uppercase; letter-spacing: .23em; font-weight: 700; margin: 0 0 22px; }
.hero h1 { font: 400 clamp(68px, 8.2vw, 142px)/1.05 var(--display); letter-spacing: .015em; text-transform: uppercase; max-width: 1100px; margin: 0 0 26px; text-shadow: 0 3px 16px rgb(0 0 0 / .21); }
.hero-lead { color: var(--gold); font-size: clamp(19px, 2vw, 29px); font-weight: 700; margin: 0 0 39px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 52px; padding: 13px 24px; border: 2px solid transparent; text-decoration: none; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; transition: transform .18s ease, background .18s ease, color .18s ease; }
.button:hover, .button:focus-visible { transform: translateY(-3px); }
.button-gold { background: var(--gold); color: var(--ink); }
.button-gold:hover { background: #ffe1a2; }
.button-hero-outline { border-color: var(--gold); color: #fff; background: rgb(23 14 9 / .2); }
.button-hero-outline:hover { background: var(--gold); color: var(--ink); }
.hero-divider { height: 12px; background: linear-gradient(to bottom, var(--gold) 0 4px, var(--cream) 4px 8px, var(--gold) 8px 12px); }

.offer { background: var(--cream); }
.center { text-align: center; }
.serif-heading { font-size: clamp(34px, 4vw, 58px); line-height: 1.2; margin: 0; }
.double-rule { width: 290px; max-width: 54%; height: 12px; margin: 25px auto 62px; border-top: 4px solid var(--gold); border-bottom: 4px solid var(--gold); }
.offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.offer-card { min-height: 320px; position: relative; padding: 34px 32px 32px; background: var(--paper); box-shadow: var(--surface-shadow); display: flex; flex-direction: column; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.offer-card:hover, .offer-card:focus-within { transform: translateY(-5px); box-shadow: 0 22px 42px rgb(55 32 16 / .13); }
.offer-card:focus-within { outline: 3px solid var(--gold); outline-offset: 3px; }
.offer-icon { width: 152px; height: 76px; color: var(--orange); margin: 11px 0 14px; flex: none; transition: transform .2s ease; }
.offer-card:hover .offer-icon, .offer-card:focus-within .offer-icon { transform: translateY(-3px); }
.offer-card h3 { margin: 0 0 13px; font: 400 36px/.98 var(--display); text-transform: uppercase; }
.offer-card p { margin: 0 0 28px; color: #68564e; font-size: 14px; line-height: 1.7; }
.offer-card a { margin-top: auto; align-self: flex-start; font-weight: 700; font-size: 13px; text-decoration: none; border-bottom: 2px solid var(--gold); padding-bottom: 7px; }
.offer-card a::after { content: ''; position: absolute; inset: 0; }
.offer-card:hover a, .offer-card:focus-within a { color: var(--orange); }

.beer-range { background: var(--cream); }
.beer-range .eyebrow { color: var(--orange); }
.beer-range-heading { display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: end; margin-bottom: 44px; }
.beer-range h2 { font: 400 clamp(60px, 6vw, 104px)/.98 var(--display); text-transform: uppercase; margin: 0; }
.beer-range-heading > p { max-width: 460px; font-size: 16px; line-height: 1.75; margin: 0 0 6px; }
.beer-featured { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.beer-card { min-width: 0; display: flex; flex-direction: column; background: var(--paper); box-shadow: var(--surface-shadow); transition: transform .2s ease, box-shadow .2s ease; }
.beer-card:hover, .beer-card:focus-within { transform: translateY(-4px); box-shadow: 0 20px 34px rgb(55 32 16 / .15); }
.beer-card-image { height: 290px; min-width: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 24px; background: radial-gradient(circle at 50% 65%, #f8ede0, #e8d7c1 85%); border-bottom: 4px solid var(--gold); }
.beer-card-image img { width: auto; height: 230px; max-width: 100%; object-fit: contain; filter: drop-shadow(0 11px 12px rgb(47 26 16 / .25)); }
.beer-card-copy { display: flex; flex: 1; flex-direction: column; padding: 25px 25px 26px; }
.beer-card-style { color: var(--orange); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; line-height: 1.5; margin: 0 0 11px; }
.beer-card h3 { font: 400 clamp(29px, 2.5vw, 39px)/1.02 var(--display); text-transform: uppercase; margin: 0 0 13px; }
.beer-card-description { color: #66574e; font-size: 13px; line-height: 1.7; margin: 0 0 23px; }
.beer-card-links { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: auto; }
.beer-card-links a, .beer-row-links a { font-size: 12px; font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--gold); padding-bottom: 5px; }
.beer-card-links a:hover, .beer-card-links a:focus-visible, .beer-row-links a:hover, .beer-row-links a:focus-visible { color: var(--orange); border-color: var(--orange); }
.beer-interest-note { color: #66574e; font-size: 13px; line-height: 1.6; margin: 22px 0 0; }
.beer-archive { margin-top: 36px; background: #fbf8f3; box-shadow: var(--surface-shadow); }
.beer-archive > summary { list-style: none; padding: 22px 27px; cursor: pointer; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.beer-archive > summary::-webkit-details-marker { display: none; }
.beer-archive > summary:hover, .beer-archive > summary:focus-visible { background: #fff2dd; }
.beer-archive > summary span { font: 400 34px/1 var(--display); color: var(--orange); }
.beer-archive[open] > summary span { transform: rotate(45deg); }
.beer-archive-content { border-top: 1px solid #d8cabb; padding: clamp(25px, 4vw, 50px); }
.beer-archive-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 30px; }
.beer-archive-heading h3 { font: 400 clamp(35px, 4vw, 60px)/1 var(--display); text-transform: uppercase; margin: 0; }
.beer-archive-heading > p { color: #66574e; line-height: 1.7; margin: 0; }
.beer-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.beer-filter { cursor: pointer; padding: 9px 14px; background: transparent; border: 1px solid #bda996; color: var(--ink); font-size: 12px; font-weight: 700; }
.beer-filter:hover, .beer-filter:focus-visible, .beer-filter.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.beer-search-label { display: block; font-size: 12px; font-weight: 700; margin-bottom: 8px; }
.beer-search { width: min(100%, 420px); padding: 12px 14px; border: 1px solid #bda996; border-radius: 0; background: #fff; color: var(--ink); font: inherit; font-size: 14px; }
.beer-search:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.beer-result-count { color: #765f51; font-size: 12px; margin: 13px 0 20px; }
.beer-list { border-top: 3px solid var(--orange); }
.beer-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(150px, .75fr) auto; gap: 22px; align-items: center; padding: 17px 0; border-bottom: 1px solid #dbcdbf; }
.beer-row[hidden] { display: none; }
.beer-row h4 { margin: 0 0 5px; font-size: 15px; }
.beer-row p { margin: 0; color: #6f5e55; font-size: 12px; line-height: 1.55; }
.beer-row-meta { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: #6f5e55; }
.beer-row-links { display: flex; gap: 16px; white-space: nowrap; }
.beer-empty { padding: 30px 0; }

.news { background: #f0e7dc; }
.news-heading { display: grid; grid-template-columns: 1.2fr .8fr; gap: 60px; align-items: end; margin-bottom: 42px; }
.news .eyebrow { color: var(--orange); }
.news h2 { font: 400 clamp(60px, 6vw, 100px)/.98 var(--display); text-transform: uppercase; margin: 0; }
.news-heading > p { max-width: 430px; font-size: 16px; line-height: 1.75; margin: 0 0 6px; }
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.news-card { min-width: 0; position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--paper); box-shadow: var(--surface-shadow); cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.news-card:first-child { background: var(--deep); color: #fff; }
.news-card-media { height: 215px; overflow: hidden; background: #e9ded0; }
.news-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.news-card-media--product { padding: 13px; }
.news-card-media--product img { object-fit: contain; }
.news-card-media--fallback { display: grid; place-items: center; background: var(--orange) var(--pp-pattern-image, url('assets/pattern.webp')) center / cover no-repeat; }
.news-card-media--fallback img { width: 62%; height: 72%; object-fit: contain; }
.news-card-body { flex: 1; display: flex; flex-direction: column; padding: 29px 30px 30px; }
.news-card:first-child::before { content: ''; position: absolute; inset: 0; opacity: .08; background: var(--pp-pattern-image, url('assets/pattern.webp')) center / cover no-repeat; pointer-events: none; }
.news-card:hover, .news-card:focus-within { transform: translateY(-4px); box-shadow: 0 20px 34px rgb(55 32 16 / .15); }
.news-card:hover .news-card-media img, .news-card:focus-within .news-card-media img { transform: scale(1.035); }
.news-card:focus-within { outline: 3px solid var(--gold); outline-offset: 3px; }
.news-card-meta { display: flex; flex-wrap: wrap; gap: 8px 13px; color: var(--orange); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 28px; }
.news-card:first-child .news-card-meta { color: var(--gold); }
.news-card-meta span::before { content: '·'; margin-right: 13px; }
.news-card h3 { font: 400 clamp(30px, 2.8vw, 42px)/1.06 var(--display); text-transform: uppercase; margin: 0 0 20px; }
.news-card p { color: #66574e; font-size: 14px; line-height: 1.7; margin: 0 0 28px; }
.news-card:first-child p { color: #eadfd7; }
.news-card a { align-self: flex-start; margin-top: auto; padding-bottom: 7px; border-bottom: 2px solid var(--gold); font-size: 13px; font-weight: 700; text-decoration: none; text-transform: uppercase; }
.news-card a::after { content: ''; position: absolute; inset: 0; z-index: 2; }
.news-card a:hover, .news-card a:focus-visible { color: var(--orange); }
.news-card:first-child a:hover, .news-card:first-child a:focus-visible { color: var(--gold); }
.news-empty { margin: 0; font-size: 16px; }

.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 650px; }
.story-copy { display: flex; align-items: center; justify-content: flex-end; background: #e9ded0; }
.story-copy-inner { max-width: 620px; width: 100%; padding: 80px clamp(32px, 5vw, 72px); }
.story .eyebrow { color: var(--orange); }
.story h2, .contact h2 { font: 400 clamp(57px, 5.5vw, 92px)/.95 var(--display); text-transform: uppercase; margin: 0 0 30px; }
.story h2 { font-size: clamp(48px, 3.65vw, 66px); line-height: 1.06; }
.story h2 em { font-style: normal; color: var(--orange); }
.story-copy p:not(.eyebrow) { max-width: 500px; line-height: 1.8; font-size: 16px; margin: 0 0 38px; }
.text-link { display: inline-flex; align-items: center; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: 13px; text-decoration: none; border-bottom: 3px solid var(--orange); padding-bottom: 10px; }
.story-art { background: #22232a; overflow: hidden; min-width: 0; position: relative; }
.story-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 70%; }

.contact { background: var(--deep); color: #fff; position: relative; overflow: hidden; }
.contact::before { content: ''; position: absolute; inset: 0; opacity: .08; background: var(--pp-pattern-image, url('assets/pattern.webp')) center / cover no-repeat; pointer-events: none; }
.contact-inner { position: relative; display: grid; grid-template-columns: 1.2fr .8fr; gap: 80px; align-items: center; }
.contact .eyebrow { color: var(--gold); }
.contact h2 { margin: 0; }
.contact-side { max-width: 430px; }
.contact-side p { line-height: 1.8; margin: 0 0 28px; color: #e8dcd3; }
.contact-secondary-link { display: block; width: fit-content; margin-top: 22px; color: var(--gold); font-size: 14px; font-weight: 700; text-underline-offset: 5px; }
.contact-side address { font-style: normal; line-height: 1.9; margin-top: 26px; color: #d0bbb0; }
.contact-side address a { color: var(--gold); text-underline-offset: 4px; }
.button-outline { border-color: var(--gold); color: var(--gold); }
.button-outline:hover { background: var(--gold); color: var(--ink); }
.site-footer { background: var(--deep); color: #d0bbb0; border-top: 1px solid rgb(249 193 92 / .25); }
.footer-inner { min-height: 76px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 12px; }
.footer-inner a { color: var(--gold); text-decoration: none; }
.footer-inner a:hover, .footer-inner a:focus-visible { text-decoration: underline; }

.booking-hero { position: relative; display: flex; align-items: center; min-height: 490px; overflow: hidden; color: #fff; background: var(--deep); }
.booking-hero-image { position: absolute; inset: 0; background: url('assets/hero.jpg') center 54% / cover no-repeat; }
.booking-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(24 15 12 / .87), rgb(27 17 13 / .62) 62%, rgb(27 17 13 / .34)); }
.booking-hero-inner { position: relative; z-index: 1; padding-block: 90px; }
.booking-hero .eyebrow { color: var(--gold); }
.booking-hero h1 { max-width: 970px; margin: 0 0 22px; font: 400 clamp(58px, 6.5vw, 106px)/1.02 var(--display); text-transform: uppercase; }
.booking-hero-lead { max-width: 700px; margin: 0 0 30px; font-size: clamp(18px, 1.9vw, 24px); line-height: 1.5; }
.booking-page-content { display: flex; flex-direction: column; gap: 24px; padding-block: clamp(64px, 8vw, 110px); }
.booking-block { padding: clamp(30px, 5vw, 68px); }
.booking-block h2 { margin: 0 0 20px; font: 400 clamp(45px, 4.7vw, 72px)/1.02 var(--display); text-transform: uppercase; }
.booking-block > p:not(.eyebrow) { max-width: 780px; margin: 0 0 26px; line-height: 1.75; }
.booking-block-calendar { background: var(--paper); box-shadow: var(--surface-shadow); }
.booking-block-calendar .eyebrow { color: var(--orange); }
.booking-widget { width: min(100%, 860px); margin: 30px auto 0; padding: clamp(12px, 2vw, 24px); background: #fff; box-shadow: var(--surface-shadow); }
.booking-widget billetto-organiser-widget { display: block; width: 100%; }
.booking-page-content .booking-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; background: #eee3d6; box-shadow: var(--surface-shadow); }
.booking-info-grid > * { min-width: 0; padding: clamp(28px, 4vw, 46px); margin: 0; }
.booking-info-grid h3 { margin: 0 0 16px; font: 400 clamp(32px, 3vw, 46px)/1.04 var(--display); text-transform: uppercase; }
.booking-info-grid p { margin: 0; line-height: 1.75; }
.booking-block-gift, .booking-block-contact { position: relative; isolation: isolate; overflow: hidden; }
.booking-block-gift::before, .booking-block-contact::before { content: ''; position: absolute; inset: 0; z-index: 0; background: var(--pp-pattern-image, url('assets/pattern.webp')) center / cover no-repeat; pointer-events: none; }
.booking-block-gift > *, .booking-block-contact > * { position: relative; z-index: 1; }
.booking-block-gift { color: #fff; background: var(--deep); box-shadow: var(--surface-shadow); }
.booking-block-gift::before { opacity: .14; }
.booking-block-gift p { color: #eadfd7; }
.booking-block-gift .wp-block-button__link { display: inline-flex; padding: 14px 24px; border-radius: 0; background: var(--gold); color: var(--ink); font-size: 13px; font-weight: 700; text-transform: uppercase; text-decoration: none; }
.booking-block-contact { color: var(--ink); background: #f0e7dc; box-shadow: var(--surface-shadow); }
.booking-block-contact::before { opacity: .09; }
.booking-block-contact a { color: var(--ink); text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.booking-block-contact p { line-height: 1.75; }
.booking-block-contact input:not([type="submit"]), .booking-block-contact textarea { width: 100%; max-width: 650px; padding: 13px 15px; border: 1px solid #e8d6c3; background: #fff; color: var(--ink); font: inherit; }
.booking-block-contact input[type="submit"] { padding: 14px 24px; border: 0; border-radius: 0; background: var(--gold); color: var(--ink); font: 700 13px var(--serif); text-transform: uppercase; cursor: pointer; }
.booking-block-map { background: var(--paper); box-shadow: var(--surface-shadow); }
.booking-block-map .eyebrow { color: var(--orange); }
.booking-map-embed { margin-top: 30px; background: #e6ddd0; }
.booking-map-embed iframe { display: block; width: 100%; height: clamp(320px, 42vw, 500px); border: 0; }
.booking-map-link { margin: 22px 0 0 !important; }
.booking-map-link a { color: var(--ink); font-weight: 700; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.booking-map-link a:hover, .booking-map-link a:focus-visible { color: var(--orange); }

.gift-hero { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--deep); }
.gift-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .12; background: var(--pp-pattern-image, url('assets/pattern.webp')) center / cover no-repeat; }
.gift-hero-inner { padding-block: clamp(68px, 8vw, 118px); }
.gift-hero .eyebrow { color: var(--gold); }
.gift-hero h1 { max-width: 1000px; margin: 0 0 18px; font: 400 clamp(62px, 8vw, 124px)/1.02 var(--display); text-transform: uppercase; }
.gift-hero-inner > p:last-child { max-width: 720px; margin: 0; color: #f1e4d8; font-size: clamp(18px, 1.8vw, 23px); line-height: 1.55; }
.gift-store-content { padding-block: clamp(64px, 8vw, 110px); }
.gift-product-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 24px; align-items: start; }
.gift-product-media, .gift-product-purchase, .gift-product-details { min-width: 0; padding: clamp(28px, 4vw, 52px); background: var(--paper); box-shadow: var(--surface-shadow); }
.gift-store .gift-product-media { min-height: 580px; overflow: hidden; padding: 0; background: #e8d7c1; }
.gift-store .gift-product-purchase.summary { float: none !important; width: auto !important; margin: 0 !important; }
.gift-store .gift-product-media .woocommerce-product-gallery { float: none !important; width: 100% !important; margin: 0 !important; padding: clamp(28px, 4vw, 52px); background: var(--paper); }
.gift-store .woocommerce-product-gallery img { width: 100% !important; max-height: 640px; height: auto; object-fit: contain; }
.gift-store .gift-product-media .gift-product-placeholder { display: block; width: 100%; height: 580px; object-fit: cover; object-position: 65% center; }
.gift-product-purchase .eyebrow { color: var(--orange); }
.gift-product-purchase h2 { margin: 0 0 24px; font: 400 clamp(42px, 4vw, 62px)/1.04 var(--display); text-transform: uppercase; }
.gift-store .gift-product-purchase .price { display: block; margin: 0 0 20px; color: var(--orange); font: 700 clamp(20px, 2vw, 27px)/1.3 var(--serif); }
.gift-product-purchase p { line-height: 1.75; }
.gift-store .gift-product-purchase form.cart { margin-top: 24px; }
.gift-store .gift-product-purchase .variations { width: 100%; margin: 0 0 18px; }
.gift-store .gift-product-purchase .variations th, .gift-store .gift-product-purchase .variations td { display: block; width: 100%; padding: 0; text-align: left; }
.gift-store .gift-product-purchase .variations label, .gift-store .pwgc-label { display: block; margin: 0 0 8px; color: var(--ink); font-weight: 700; }
.gift-store .gift-product-purchase select, .gift-store .gift-product-purchase input[type="text"], .gift-store .gift-product-purchase input[type="email"], .gift-store .gift-product-purchase input[type="date"], .gift-store .gift-product-purchase input[type="number"], .gift-store .gift-product-purchase input[type="tel"], .gift-store .gift-product-purchase textarea { width: 100%; max-width: 100%; padding: 13px 15px; border: 1px solid #d9c8b6; border-radius: 0; background: #fff; color: var(--ink); font: inherit; }
.gift-store .gift-product-purchase textarea { min-height: 125px; }
.gift-store .pwgc-field-container { margin-bottom: 19px; }
.gift-store .pwgc-subtitle { margin-top: 7px; color: #6a5b50; font-size: 12px; line-height: 1.5; }
.gift-store .gift-recipient-help { display: block; margin: 7px 0 16px; color: #6a5b50; font-size: 12px; line-height: 1.6; }
.gift-store .gift-product-purchase .quantity { float: none !important; display: inline-block; margin: 0 12px 12px 0 !important; }
.gift-store .gift-product-purchase .quantity input.qty { width: 75px; }
.gift-store .gift-product-purchase button.single_add_to_cart_button, .gift-store #pwgc-email-preview-button { display: inline-flex; justify-content: center; align-items: center; min-height: 52px; padding: 13px 24px; border: 0; border-radius: 0; background: var(--gold); color: var(--ink); font: 700 13px var(--serif); text-transform: uppercase; letter-spacing: .06em; cursor: pointer; }
.gift-store .gift-product-purchase button.single_add_to_cart_button:hover, .gift-store #pwgc-email-preview-button:hover { background: #ffe1a2; color: var(--ink); }
.gift-store .gift-product-purchase .product_meta { margin-top: 28px; color: #6a5b50; font-size: 12px; }
.gift-product-details { margin-top: 24px; }
.gift-product-details h2 { margin: 0 0 15px; font: 400 clamp(36px, 3.4vw, 52px)/1.05 var(--display); text-transform: uppercase; }
.gift-product-details p { max-width: 780px; line-height: 1.75; }
.gift-product-details a { color: var(--orange); font-weight: 700; text-underline-offset: 4px; }
.gift-store .woocommerce-tabs { float: none !important; width: 100%; }
.gift-store .related.products { margin-top: 40px; }
.gift-store .related.products ul.products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.gift-store .related.products ul.products li.product { float: none !important; width: auto !important; margin: 0 !important; }
.commerce-page, body.woocommerce-cart .simple-page, body.woocommerce-checkout .simple-page { padding-block: clamp(64px, 8vw, 110px); }
body.woocommerce-cart .simple-page .entry-content, body.woocommerce-checkout .simple-page .entry-content { max-width: none; }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button { border-radius: 0; background: var(--gold); color: var(--ink); font-weight: 700; }
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background: #ffe1a2; color: var(--ink); }
.woocommerce-cart .simple-page h1, .woocommerce-checkout .simple-page h1 { margin: 0 0 30px; font: 400 clamp(54px, 6vw, 86px)/1 var(--display); text-transform: uppercase; }
.woocommerce-cart .simple-page article, .woocommerce-checkout .simple-page article { background: var(--paper); padding: clamp(24px, 4vw, 52px); box-shadow: var(--surface-shadow); }
.woocommerce-cart .woocommerce table.shop_table, .woocommerce-checkout .woocommerce table.shop_table { border-color: #e7d9c9; border-radius: 0; }
.woocommerce-cart .woocommerce table.shop_table th, .woocommerce-cart .woocommerce table.shop_table td, .woocommerce-checkout .woocommerce table.shop_table th, .woocommerce-checkout .woocommerce table.shop_table td { border-color: #e7d9c9; }
.woocommerce-cart .woocommerce input.input-text, .woocommerce-checkout .woocommerce input.input-text, .woocommerce-checkout .woocommerce textarea, .woocommerce-checkout .woocommerce select { padding: 12px 14px; border: 1px solid #d9c8b6; border-radius: 0; background: #fff; color: var(--ink); font: inherit; }
.woocommerce-cart .woocommerce .coupon input.input-text { width: 150px; }
.woocommerce-checkout .woocommerce form .form-row label { margin-bottom: 6px; font-weight: 700; }
.woocommerce-checkout #payment { border-radius: 0; background: #f2e9de; }
.woocommerce-checkout #payment div.payment_box { background: #fffdf9; color: var(--ink); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: #fffdf9; }
.woocommerce .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce .woocommerce-error { border-top-color: var(--orange); background: #fff9ee; color: var(--ink); }
.woocommerce-cart .wc-block-cart, .woocommerce-checkout .wc-block-checkout { font-family: var(--serif); }
.woocommerce-cart .wc-block-cart__submit-button, .woocommerce-checkout .wc-block-components-checkout-place-order-button { background: var(--gold); color: var(--ink); border: 0; border-radius: 0; font-weight: 700; text-transform: uppercase; }
.woocommerce-cart .wc-block-cart__submit-button:hover, .woocommerce-checkout .wc-block-components-checkout-place-order-button:hover { background: #ffe1a2; }

@media (max-width: 900px) {
  .header-inner { min-height: 94px; }
  .brand { width: 205px; }
  .menu-toggle { display: flex; position: relative; z-index: 12; background: transparent; border: 0; width: 48px; height: 48px; padding: 10px; flex-direction: column; justify-content: space-around; cursor: pointer; }
  .menu-toggle span { display: block; height: 3px; width: 100%; background: #fff; }
  .site-nav { display: none; position: absolute; top: 94px; left: 0; right: 0; padding: 20px 24px 28px; background: #b8420d; box-shadow: 0 10px 20px rgb(0 0 0 / .2); flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav.is-open { display: flex; }
  .site-nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav a { padding: 13px 0; font-size: 16px; color: #fff; }
  .hero { min-height: 680px; }
  .hero h1 { font-size: clamp(66px, 10vw, 96px); }
  .offer-grid { gap: 14px; }
  .offer-card { padding: 26px 23px; }
  .beer-featured { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-heading { gap: 26px; }
  .news-grid { grid-template-columns: 1fr; gap: 15px; }
  .news-card-media { height: 240px; }
  .beer-row { grid-template-columns: minmax(0, 1fr) auto; }
  .beer-row-meta { grid-column: 1; grid-row: 2; flex-direction: row; gap: 14px; }
  .beer-row-links { grid-column: 2; grid-row: 1 / 3; }
  .story-copy-inner { padding: 65px 42px; }
}

@media (max-width: 650px) {
  .page-width, .header-inner { width: min(100% - 34px, 1240px); }
  .header-inner { min-height: 84px; }
  .brand { width: 178px; }
  .site-nav { top: 84px; }
  .hero { min-height: 720px; align-items: flex-end; }
  .hero-image { background-position: 57% center; }
  .hero-shade { background: linear-gradient(0deg, rgb(20 13 11 / .79), rgb(20 13 11 / .35) 65%, rgb(20 13 11 / .18)); }
  .hero-content { padding-block: 70px 76px; }
  .hero h1 { font-size: clamp(56px, 13vw, 82px); }
  .hero-lead { font-size: 18px; line-height: 1.4; max-width: 340px; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .offer-grid { grid-template-columns: 1fr; gap: 15px; }
  .offer-card { min-height: 270px; }
  .double-rule { margin-bottom: 42px; }
  .beer-range-heading, .beer-archive-heading, .news-heading { grid-template-columns: 1fr; gap: 18px; }
  .beer-range h2 { font-size: clamp(62px, 14vw, 90px); }
  .beer-featured { grid-template-columns: 1fr; gap: 15px; }
  .beer-card-image { height: 260px; }
  .beer-card-image img { height: 200px; }
  .beer-archive-content { padding: 24px 18px; }
  .beer-row { grid-template-columns: 1fr; gap: 8px; }
  .beer-row-meta, .beer-row-links { grid-column: auto; grid-row: auto; }
  .beer-row-links { margin-top: 7px; }
  .story { grid-template-columns: 1fr; }
  .story-copy-inner { padding: 72px 26px; }
  .story-art { height: 560px; }
  .contact-inner { grid-template-columns: 1fr; gap: 40px; }
  .contact h2 { font-size: 72px; }
  .footer-inner { flex-direction: column; justify-content: center; text-align: center; padding-block: 22px; }
  .booking-hero { min-height: 420px; }
  .booking-hero-inner { padding-block: 70px; }
  .booking-hero h1 { font-size: clamp(52px, 12vw, 72px); }
  .booking-page-content .booking-info-grid { grid-template-columns: 1fr; }
  .booking-widget { padding: 10px; }
  .gift-product-grid { grid-template-columns: 1fr; }
  .gift-store .gift-product-media { min-height: 380px; }
  .gift-store .gift-product-media .gift-product-placeholder { height: 380px; }
  .gift-store .related.products ul.products { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button { transition: none; }
  .offer-card, .offer-icon, .beer-card, .news-card { transition: none; }
  .offer-card:hover, .offer-card:focus-within, .offer-card:hover .offer-icon, .offer-card:focus-within .offer-icon { transform: none; }
  .beer-card:hover, .beer-card:focus-within { transform: none; }
  .news-card:hover, .news-card:focus-within { transform: none; }
  .news-card:hover .news-card-media img, .news-card:focus-within .news-card-media img { transform: none; }
}

/* WordPress-renderade produkter och redigerbara kortbilder. */
.offer-icon-image { width: 152px; height: 76px; object-fit: contain; margin: 11px 0 14px; }
.beer-card-image:empty { display: none; }
.beer-row-links { flex-wrap: wrap; white-space: normal; }
.beer-card-links a, .beer-row-links a { white-space: nowrap; }
.beer-featured:empty { display: none; }
.wp-block-image img { height: auto; }
.simple-page { min-height: 50vh; padding-block: 80px; }
.simple-page h1 { font: 400 clamp(48px, 6vw, 88px)/1 var(--display); text-transform: uppercase; }
.simple-page .entry-content { max-width: 760px; line-height: 1.8; }

/* Pica Pico typography and homepage hero — integrated from Customizer CSS. */
h1, h2, h3, h4, h5, h6 { font-family: Impact, "Arial Narrow", sans-serif !important; }
body, p, li { font-family: 'Arvo', Arial, sans-serif; }
.home h1 { color: #ffffff !important; }
.home .hero p { font-family: 'Arvo', Georgia, serif !important; color: #f9c15c !important; }

/* Primary navigation: normalize WordPress menu output and keep it above header texture. */
.site-header .header-inner { position: relative; z-index: 2; }
.site-header .site-nav { flex: 1 1 auto; min-width: 0; justify-content: flex-end; visibility: visible; opacity: 1; }
.site-header .site-nav-list { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.site-header .site-nav-list > li { list-style: none; margin: 0; padding: 0; }
.site-header .site-nav-list > li > a { display: inline-block; }
@media (max-width: 900px) {
  .site-header .site-nav { display: none; position: absolute; top: 100%; left: -24px; right: -24px; z-index: 20; }
  .site-header .site-nav.is-open { display: flex; }
  .site-header .site-nav-list { flex-direction: column; align-items: stretch; justify-content: flex-start; width: 100%; }
  .site-header .site-nav-list > li > a { display: block; }
}

/* Keep primary navigation colors independent of plugin-wide link styling. */
.site-header #site-nav.site-nav a,
.site-header #site-nav.site-nav a:visited {
  color: #ffffff !important;
}
.site-header #site-nav.site-nav a:hover,
.site-header #site-nav.site-nav a:focus-visible {
  color: #f9c15c !important;
}

/* Primary-menu typography, including plugin-styled menu labels. */
.site-header #site-nav.site-nav a,
.site-header #site-nav.site-nav a * {
  font-family: 'Arvo', Georgia, serif !important;
}
/* Contact section: retain gold accents while keeping heading and copy white. */
#kontakt.contact h2,
#kontakt.contact .contact-side > p {
  color: #ffffff !important;
}
/* Start the booking page with the calendar, directly below navigation. */
.booking-page .booking-page-content { padding-top: clamp(28px, 4vw, 64px); }
.booking-page .booking-block-calendar > h2 { font-size: clamp(45px, 5.3vw, 80px); }
.booking-block-gift .button-gold { color: var(--ink); }

/* White headings and Arvo copy on dark gift-card sections. */
.gift-store .gift-hero h1,
.booking-page .booking-block-gift h2 {
  color: #ffffff !important;
}
.gift-store .gift-hero .gift-hero-inner > p:not(.eyebrow),
.booking-page .booking-block-gift > p {
  color: #ffffff !important;
  font-family: 'Arvo', Georgia, serif !important;
}

/* Use Arvo consistently for native, WordPress, Elementor and store buttons.
 * Target text spans explicitly without changing icon-font elements. */
body.wp-theme-pica-pico-theme button,
body.wp-theme-pica-pico-theme input[type="submit"],
body.wp-theme-pica-pico-theme input[type="button"],
body.wp-theme-pica-pico-theme input[type="reset"],
body.wp-theme-pica-pico-theme [role="button"],
body.wp-theme-pica-pico-theme .button,
body.wp-theme-pica-pico-theme .wp-element-button,
body.wp-theme-pica-pico-theme .wp-block-button__link,
body.wp-theme-pica-pico-theme .elementor-button,
body.wp-theme-pica-pico-theme .elementor-button-text,
body.wp-theme-pica-pico-theme .wc-block-components-button,
body.wp-theme-pica-pico-theme .wc-block-components-button__text {
  font-family: 'Arvo', Georgia, serif !important;
}
/* Gutenberg and Elementor may wrap the paragraph in additional containers. */
body.wp-theme-pica-pico-theme #innehall.booking-page .booking-block-gift p {
  font-family: 'Arvo', Georgia, serif !important;
  color: #ffffff !important;
}
body.wp-theme-pica-pico-theme.home .hero .hero-actions a.button-hero-outline,
body.wp-theme-pica-pico-theme.home .hero .hero-actions a.button-hero-outline:visited,
body.wp-theme-pica-pico-theme.home .hero .hero-actions a.button-hero-outline:hover,
body.wp-theme-pica-pico-theme.home .hero .hero-actions a.button-hero-outline:focus-visible {
  color: #ffffff !important;
}

/* Keep the featured news headline legible over its dark background. */
.home #nyheter .news-grid > .news-card:first-child h3 {
  color: #ffffff !important;
}

/* News links: Arvo with explicit colors independent of plugin link rules. */
.home #nyheter .news-card .news-card-body > a,
.home #nyheter .news-card .news-card-body > a:visited {
  font-family: 'Arvo', Georgia, serif !important;
  font-weight: 700;
  color: var(--ink) !important;
}
.home #nyheter .news-card:first-child .news-card-body > a,
.home #nyheter .news-card:first-child .news-card-body > a:visited {
  color: #ffffff !important;
}
.home #nyheter .news-card:not(:first-child) .news-card-body > a:hover,
.home #nyheter .news-card:not(:first-child) .news-card-body > a:focus-visible {
  color: #e55310 !important;
}
.home #nyheter .news-card:first-child .news-card-body > a:hover,
.home #nyheter .news-card:first-child .news-card-body > a:focus-visible {
  color: #f9c15c !important;
}