/* Zen Old Mincho / Zen Maru Gothic are loaded via +
in each page's for faster rendering (avoids @import render-blocking delay). */
:root{
--cream:#faf3e7;
--cream-deep:#f2e6d3;
--brown:#4a3728;
--brown-soft:#7a6252;
--terracotta:#c97b4a;
--terracotta-deep:#b5673a;
--green:#8b9a6b;
--white:#fffdf9;
--shadow: 0 8px 24px rgba(74,55,40,0.08);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
font-family:'Zen Maru Gothic','Hiragino Maru Gothic ProN','Yu Gothic',sans-serif;
background:var(--cream);
color:var(--brown);
line-height:1.9;
letter-spacing:0.02em;
}
h1,h2,h3,.brand{
font-family:'Zen Old Mincho', serif;
font-weight:700;
letter-spacing:0.06em;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.wrap{
max-width:1080px;
margin:0 auto;
padding:0 24px;
}
/* Header */
.site-header{
position:sticky;
top:0;
z-index:100;
background:rgba(250,243,231,0.94);
backdrop-filter:blur(6px);
border-bottom:1px solid rgba(74,55,40,0.08);
}
.site-header .wrap{
display:flex;
align-items:center;
justify-content:space-between;
height:76px;
max-width:1240px;
}
.brand-row{
display:flex;
align-items:center;
gap:12px;
flex-shrink:0;
}
.logo-mark{
width:42px;
height:42px;
border-radius:50%;
flex-shrink:0;
}
.brand{
font-size:22px;
color:var(--brown);
white-space:nowrap;
}
.brand span{
display:block;
font-family:'Zen Maru Gothic',sans-serif;
font-size:11px;
font-weight:400;
letter-spacing:0.25em;
color:var(--terracotta-deep);
margin-top:2px;
}
nav.main-nav > ul{
display:flex;
gap:26px;
list-style:none;
flex-shrink:0;
}
nav.main-nav a{
font-size:14px;
font-weight:500;
letter-spacing:0.08em;
position:relative;
padding-bottom:6px;
white-space:nowrap;
}
nav.main-nav a.active,
nav.main-nav a:hover{
color:var(--terracotta-deep);
}
nav.main-nav a.active::after{
content:"";
position:absolute;
left:0; right:0; bottom:0;
height:2px;
background:var(--terracotta-deep);
}
.nav-toggle{ display:none; }
/* Dropdown (MENU) */
nav.main-nav li.has-dropdown{
position:relative;
}
nav.main-nav .dropdown{
position:absolute;
top:100%;
left:50%;
transform:translateX(-50%);
background:var(--white);
border-radius:12px;
box-shadow:var(--shadow);
padding:8px;
min-width:210px;
list-style:none;
display:none;
flex-direction:column;
gap:2px;
z-index:200;
}
nav.main-nav li.has-dropdown:hover .dropdown,
nav.main-nav li.has-dropdown:focus-within .dropdown{
display:flex;
}
nav.main-nav .dropdown a{
padding:10px 14px;
border-radius:8px;
font-size:13px;
font-weight:400;
white-space:nowrap;
display:block;
}
nav.main-nav .dropdown a:hover{
background:var(--cream-deep);
color:var(--terracotta-deep);
}
.dropdown-tag{
display:inline-block;
font-size:10px;
letter-spacing:0.05em;
color:var(--terracotta-deep);
background:var(--cream-deep);
border-radius:999px;
padding:1px 8px;
margin-left:6px;
}
/* Header login-status widget（ログイン中はアバター、未ログインは無料会員登録CTA） */
.nav-and-auth{
display:flex;
align-items:center;
gap:22px;
flex-shrink:0;
}
.header-auth{
display:flex;
align-items:center;
min-height:36px;
flex-shrink:0;
}
.header-auth-cta{
font-size:12px;
font-weight:700;
padding:8px 16px;
border-radius:999px;
border:1px solid var(--brown);
color:var(--brown);
white-space:nowrap;
transition:background .15s, color .15s;
}
.header-auth-cta:hover{
background:var(--brown);
color:#fff;
}
.header-auth-menu{ position:relative; }
.header-auth-avatar{
width:36px;
height:36px;
border-radius:50%;
background:var(--terracotta);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:14px;
font-weight:700;
flex-shrink:0;
border:none;
padding:0;
font-family:inherit;
cursor:pointer;
}
.header-auth-avatar:hover{ background:var(--terracotta-deep); }
.header-auth-dropdown{
display:none;
position:absolute;
top:calc(100% + 12px);
right:0;
background:var(--white);
border-radius:12px;
box-shadow:var(--shadow);
padding:8px;
min-width:170px;
z-index:200;
}
.header-auth-menu.open .header-auth-dropdown{ display:block; }
.header-auth-dropdown-name{
font-size:12px;
color:var(--brown-soft);
padding:6px 10px 10px;
margin-bottom:4px;
border-bottom:1px solid rgba(74,55,40,0.08);
white-space:nowrap;
}
.header-auth-dropdown a,
.header-auth-dropdown button{
display:block;
width:100%;
text-align:left;
padding:10px;
border-radius:8px;
font-size:13px;
font-family:inherit;
background:none;
border:none;
cursor:pointer;
color:var(--brown);
white-space:nowrap;
}
.header-auth-dropdown a:hover,
.header-auth-dropdown button:hover{
background:var(--cream-deep);
color:var(--terracotta-deep);
}
/* Hero */
.hero{
position:relative;
padding:170px 0 140px;
text-align:center;
overflow:hidden;
background-image:
linear-gradient(180deg, rgba(30,20,12,0.58), rgba(30,20,12,0.74)),
url('images/main_hero_bn.jpg');
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}
.hero .eyebrow{
display:inline-block;
font-size:13px;
letter-spacing:0.3em;
color:#eabb8c;
margin-bottom:20px;
}
.hero h1{
font-size:clamp(30px,5vw,52px);
line-height:1.5;
color:#fffdf9;
margin-bottom:24px;
text-shadow:0 4px 18px rgba(0,0,0,0.35);
}
.hero p{
max-width:520px;
margin:0 auto 36px;
color:rgba(255,253,249,0.9);
font-size:15px;
}
.hero .btn-outline{
border:1px solid var(--white);
color:var(--white);
}
.page-hero{
padding:88px 0 56px;
text-align:center;
background:
radial-gradient(circle at 15% 20%, rgba(139,154,107,0.14), transparent 45%),
radial-gradient(circle at 85% 80%, rgba(201,123,74,0.16), transparent 50%),
var(--cream);
}
.page-hero .eyebrow{
display:inline-block;
font-size:13px;
letter-spacing:0.3em;
color:var(--terracotta-deep);
margin-bottom:14px;
}
.page-hero h1{
font-size:clamp(28px,4.5vw,44px);
color:var(--brown);
}
.page-hero p{
margin-top:14px;
color:var(--brown-soft);
font-size:14px;
}
/* Buttons */
.btn{
display:inline-flex;
align-items:center;
gap:8px;
padding:14px 32px;
border-radius:999px;
font-size:14px;
font-weight:500;
letter-spacing:0.08em;
transition:transform .2s ease, box-shadow .2s ease;
}
.btn-primary{
background:var(--terracotta);
color:var(--white);
box-shadow:var(--shadow);
}
.btn-outline{
border:1px solid var(--brown);
color:var(--brown);
}
.btn:hover{ transform:translateY(-2px); }
.btn-row{
display:flex;
gap:16px;
justify-content:center;
flex-wrap:wrap;
}
/* Sections */
section{ padding:80px 0; }
.section-head{
text-align:center;
margin-bottom:52px;
}
.section-head .eyebrow{
display:block;
font-size:12px;
letter-spacing:0.3em;
color:var(--terracotta-deep);
margin-bottom:12px;
}
.section-head h2{
font-size:clamp(24px,3.4vw,34px);
color:var(--brown);
}
.section-head p{
margin-top:14px;
color:var(--brown-soft);
font-size:14px;
}
.insta-feed{
max-width:920px;
margin:0 auto 36px;
min-height:60px;
}
.insta-feed iframe{
width:100%;
border:0;
display:block;
}
.alt-bg{ background:var(--cream-deep); }
/* Cards */
.grid{
display:grid;
gap:28px;
}
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.card{
background:var(--white);
border-radius:16px;
padding:32px 28px;
box-shadow:var(--shadow);
}
.card .icon{
font-size:30px;
margin-bottom:16px;
}
.card h3{
font-size:17px;
margin-bottom:10px;
color:var(--brown);
}
.card p{
font-size:13.5px;
color:var(--brown-soft);
}
/* Info strip */
.info-strip{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
background:var(--white);
border-radius:20px;
padding:40px;
box-shadow:var(--shadow);
}
.info-strip .item{
text-align:center;
padding:0 12px;
}
.info-strip .item + .item{
border-left:1px solid rgba(74,55,40,0.1);
}
.info-strip h4{
font-size:12px;
letter-spacing:0.2em;
color:var(--terracotta-deep);
margin-bottom:10px;
}
.info-strip p{ font-size:14px; }
/* Zigzag photo + text sections */
.zigzag{
display:grid;
grid-template-columns:1fr 1fr;
gap:56px;
align-items:center;
}
.zigzag .photo{
border-radius:20px;
overflow:hidden;
box-shadow:var(--shadow);
}
.zigzag .photo img{
width:100%;
height:100%;
aspect-ratio:4/3;
object-fit:cover;
display:block;
}
.zigzag .content .eyebrow{
display:block;
font-size:12px;
letter-spacing:0.3em;
color:var(--terracotta-deep);
margin-bottom:14px;
}
.zigzag .content h2{
font-size:clamp(22px,3.2vw,30px);
color:var(--brown);
margin-bottom:18px;
}
.zigzag .content p{
color:var(--brown-soft);
font-size:14.5px;
margin-bottom:28px;
}
.zigzag .content ul{
list-style:none;
margin-bottom:28px;
}
.zigzag .content ul li{
font-size:14px;
color:var(--brown-soft);
padding:8px 0 8px 20px;
position:relative;
border-bottom:1px dashed rgba(74,55,40,0.15);
}
.zigzag .content ul li::before{
content:"";
position:absolute;
left:0; top:16px;
width:6px; height:6px;
border-radius:50%;
background:var(--terracotta);
}
/* Photo grid (menu highlight) */
.photo-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
}
.photo-card{
border-radius:16px;
overflow:hidden;
background:var(--white);
box-shadow:var(--shadow);
}
.photo-card img{
width:100%;
aspect-ratio:4/3;
object-fit:cover;
display:block;
}
.photo-card .cap{
padding:18px 20px;
}
.photo-card .cap h3{
font-size:15px;
color:var(--brown);
margin-bottom:4px;
}
.photo-card .cap p{
font-size:12.5px;
color:var(--brown-soft);
}
/* Takeout grid */
.takeout-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:24px;
margin-bottom:36px;
}
.takeout-grid .photo-card .cap{
text-align:center;
}
.tag-pill{
display:inline-block;
font-size:11px;
letter-spacing:0.15em;
padding:5px 14px;
border-radius:999px;
background:var(--brown);
color:var(--white);
margin-bottom:10px;
}
/* Mini access (homepage) */
.mini-access{
display:grid;
grid-template-columns:1fr 1fr;
gap:32px;
align-items:start;
}
.mini-access-list{
list-style:none;
}
.mini-access-list li{
display:flex;
gap:16px;
padding:14px 0;
border-bottom:1px solid rgba(74,55,40,0.1);
font-size:14px;
}
.mini-access-list li span{
flex-shrink:0;
width:88px;
font-size:12px;
letter-spacing:0.1em;
color:var(--terracotta-deep);
}
/* Story section */
.story-photo img{
aspect-ratio:3/4;
}
/* Menu page item photos */
.menu-block-photo{
border-radius:16px;
overflow:hidden;
box-shadow:var(--shadow);
margin-bottom:24px;
}
.menu-block-photo img{
width:100%;
max-height:320px;
object-fit:cover;
display:block;
}
.menu-tabs{
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:center;
margin-bottom:48px;
}
.menu-tab{
padding:12px 26px;
border-radius:999px;
border:1px solid rgba(74,55,40,0.2);
background:var(--white);
color:var(--brown-soft);
font-size:13.5px;
font-weight:500;
letter-spacing:0.05em;
cursor:pointer;
font-family:'Zen Maru Gothic',sans-serif;
transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.menu-tab:hover{
border-color:var(--terracotta);
color:var(--terracotta-deep);
}
.menu-tab.active{
background:var(--terracotta);
border-color:var(--terracotta);
color:var(--white);
}
.menu-banner{
border-radius:20px;
overflow:hidden;
box-shadow:var(--shadow);
margin-bottom:64px;
}
.menu-banner img{
width:100%;
max-height:420px;
object-fit:cover;
display:block;
}
/* Menu page */
.menu-block{
margin-bottom:56px;
}
.menu-block-head{
display:flex;
align-items:baseline;
gap:14px;
margin-bottom:22px;
border-bottom:2px solid var(--terracotta);
padding-bottom:10px;
}
.menu-block-head .emoji{ font-size:22px; }
.menu-block-head h2{
font-size:20px;
color:var(--brown);
}
.menu-block-note{
font-size:13px;
color:var(--brown-soft);
margin-bottom:18px;
}
.menu-sub{
margin-bottom:22px;
}
.menu-sub h3{
font-size:13px;
letter-spacing:0.15em;
color:var(--green);
margin-bottom:10px;
}
.menu-items{
list-style:none;
}
.menu-items li{
padding:10px 0;
border-bottom:1px dashed rgba(74,55,40,0.15);
font-size:14.5px;
}
.menu-items-priced{
list-style:none;
}
.menu-items-priced li{
display:flex;
justify-content:space-between;
align-items:baseline;
gap:12px;
padding:10px 0;
border-bottom:1px dashed rgba(74,55,40,0.15);
font-size:14.5px;
}
.menu-items-priced li .price{
color:var(--terracotta-deep);
font-weight:500;
white-space:nowrap;
}
.menu-set{
margin-top:14px;
font-size:13px;
color:var(--brown-soft);
background:var(--cream-deep);
padding:12px 16px;
border-radius:10px;
}
/* Concept page */
.concept-lead{
font-size:clamp(20px,3vw,28px);
text-align:center;
color:var(--brown);
max-width:640px;
margin:0 auto 40px;
font-family:'Zen Old Mincho',serif;
line-height:1.9;
}
.concept-body{
max-width:680px;
margin:0 auto;
font-size:15px;
color:var(--brown-soft);
}
.concept-body p{ margin-bottom:22px; }
.time-split{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:28px;
margin-top:48px;
}
.time-split .card h3{
font-size:15px;
letter-spacing:0.15em;
color:var(--terracotta-deep);
}
/* Access page */
.map-frame{
border-radius:16px;
overflow:hidden;
box-shadow:var(--shadow);
margin-bottom:40px;
}
.map-frame iframe{
width:100%;
height:380px;
border:0;
display:block;
}
.access-table{
width:100%;
border-collapse:collapse;
}
.access-table th,
.access-table td{
text-align:left;
padding:16px 0;
border-bottom:1px solid rgba(74,55,40,0.12);
font-size:14.5px;
}
.access-table th{
width:140px;
color:var(--terracotta-deep);
font-weight:500;
letter-spacing:0.1em;
font-size:12.5px;
vertical-align:top;
}
/* Breadcrumb */
.breadcrumb{
padding:18px 0 0;
}
.breadcrumb ol{
display:flex;
flex-wrap:wrap;
gap:6px;
list-style:none;
font-size:12px;
color:var(--brown-soft);
}
.breadcrumb li:not(:last-child)::after{
content:"›";
margin-left:6px;
color:var(--terracotta-deep);
}
.breadcrumb a{ color:var(--brown-soft); }
.breadcrumb a:hover{ color:var(--terracotta-deep); }
.breadcrumb li[aria-current]{ color:var(--brown); font-weight:500; }
/* FAQ */
.faq-list{
max-width:760px;
margin:0 auto;
}
.faq-item{
border-bottom:1px solid rgba(74,55,40,0.15);
}
.faq-item summary{
cursor:pointer;
font-size:15px;
font-weight:500;
color:var(--brown);
padding:18px 32px 18px 8px;
list-style:none;
position:relative;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
content:"+";
position:absolute;
right:8px;
top:16px;
color:var(--terracotta-deep);
font-size:20px;
line-height:1;
}
.faq-item[open] summary::after{ content:"–"; }
.faq-item p{
padding:0 8px 20px;
color:var(--brown-soft);
font-size:14px;
}
/* Footer */
footer{
background:var(--brown);
color:var(--cream);
padding:56px 0 28px;
}
footer .footer-top{
display:flex;
justify-content:space-between;
flex-wrap:wrap;
gap:32px;
margin-bottom:36px;
}
footer .brand{ color:var(--cream); }
footer .brand span{ color:#d9a675; }
footer nav ul{
display:flex;
gap:24px;
list-style:none;
flex-wrap:wrap;
}
footer nav a{ font-size:13px; letter-spacing:0.06em; }
footer nav a:hover{ color:#d9a675; }
.footer-cols{
display:grid;
grid-template-columns:1.4fr 1fr 1fr 1fr;
gap:32px;
margin-bottom:40px;
}
.footer-cols h5{
font-size:12px;
letter-spacing:0.15em;
color:#d9a675;
margin-bottom:16px;
}
.footer-cols ul{ list-style:none; }
.footer-cols li{ margin-bottom:10px; }
.footer-cols a{ font-size:13px; color:rgba(250,243,231,0.85); }
.footer-cols a:hover{ color:#d9a675; }
.footer-cols p{ font-size:13px; color:rgba(250,243,231,0.75); }
.footer-bottom{
border-top:1px solid rgba(250,243,231,0.15);
padding-top:22px;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
gap:12px;
font-size:12px;
color:rgba(250,243,231,0.7);
}
.sns-icon{
display:inline-flex;
align-items:center;
gap:8px;
font-size:13px;
}
/* Responsive */
@media (max-width:820px){
.grid-4{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:1fr; }
.grid-2{ grid-template-columns:1fr; }
.info-strip{ grid-template-columns:1fr; }
.info-strip .item + .item{ border-left:0; border-top:1px solid rgba(74,55,40,0.1); padding-top:20px; }
.time-split{ grid-template-columns:1fr; }
.zigzag{ grid-template-columns:1fr; gap:28px; }
.zigzag .photo{ order:-1; }
.photo-grid{ grid-template-columns:1fr; }
.takeout-grid{ grid-template-columns:1fr; }
.mini-access{ grid-template-columns:1fr; }
.footer-cols{ grid-template-columns:1fr 1fr; }
}
@media (max-width:680px){
nav.main-nav > ul{
position:fixed;
top:76px; left:0; right:0;
background:var(--cream);
flex-direction:column;
gap:0;
padding:8px 24px 20px;
display:none;
border-bottom:1px solid rgba(74,55,40,0.08);
max-height:calc(100vh - 76px);
overflow-y:auto;
}
nav.main-nav > ul.open{ display:flex; }
nav.main-nav li{ padding:12px 0; border-bottom:1px solid rgba(74,55,40,0.08); }
nav.main-nav .dropdown{
position:static;
transform:none;
display:flex;
box-shadow:none;
padding:6px 0 0 16px;
background:transparent;
min-width:0;
}
nav.main-nav .dropdown a{ padding:8px 0; font-size:13px; }
.nav-toggle{
display:block;
background:none;
border:0;
font-size:20px;
padding:6px;
color:var(--brown);
cursor:pointer;
}
/* Compact brand lockup so it never fights the nav-toggle/CTA/cart for room */
.brand-row{ gap:8px; }
.logo-mark{ width:32px; height:32px; }
.brand{ font-size:16px; }
.brand span{ font-size:9px; letter-spacing:0.18em; }
.nav-and-auth{ gap:8px; }
/* Below 680px the CTA collapses to an icon-only circle (matching the
cart icon) so its label length never causes horizontal overflow -
the link text stays in the DOM for screen readers, just visually
hidden via font-size:0. */
.header-auth-cta{
font-size:0;
width:32px;
height:32px;
padding:0;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
}
.header-auth-cta::before{
content:"👤";
font-size:14px;
line-height:1;
}
.header-auth-avatar{ width:32px; height:32px; font-size:13px; }
.header-cart-btn{ width:32px; height:32px; font-size:14px; }
}
@media (max-width:480px){
.grid-4{ grid-template-columns:1fr; }
.hero{ padding:130px 0 90px; }
section{ padding:56px 0; }
.footer-cols{ grid-template-columns:1fr; gap:28px; }
.footer-bottom{ flex-direction:column; gap:8px; }
.access-table{ border:0; }
.access-table tr{
display:block;
padding-bottom:14px;
margin-bottom:14px;
border-bottom:1px solid rgba(74,55,40,0.12);
}
.access-table th,
.access-table td{
display:block;
width:100%;
border-bottom:0;
padding:2px 0;
}
.access-table th{ padding-top:0; }
.mini-access-list li{
flex-direction:column;
gap:4px;
}
.mini-access-list li span{ width:auto; }
.btn{ padding:13px 26px; font-size:13.5px; }
}
@media (max-width:380px){
.wrap{ padding:0 16px; }
.brand{ font-size:14.5px; }
.brand-row{ gap:6px; }
.logo-mark{ width:28px; height:28px; }
}
/* Legal / policy page prose (privacy-policy.html) */
.legal-content{
max-width:760px;
margin:0 auto;
}
.legal-content > p:first-child{
margin-bottom:28px;
color:var(--brown-soft);
}
.legal-content h2{
font-size:19px;
color:var(--brown);
margin:36px 0 14px;
}
.legal-content h2:first-of-type{ margin-top:0; }
.legal-content p{
margin-bottom:14px;
color:var(--brown-soft);
}
.legal-content ul{
list-style:disc;
padding-left:22px;
margin-bottom:14px;
}
.legal-content li{
margin-bottom:6px;
color:var(--brown-soft);
}
.legal-content a{
color:var(--terracotta-deep);
text-decoration:underline;
}
@media (max-width:640px){
.legal-content h2{ font-size:17px; }
}
/* Header cart (site-wide, far right of header) */
.header-cart{ display:flex; align-items:center; flex-shrink:0; }
.header-cart-btn{
position:relative;
width:36px;
height:36px;
border-radius:50%;
background:var(--cream-deep);
border:1px solid rgba(74,55,40,0.15);
color:var(--brown);
display:flex;
align-items:center;
justify-content:center;
font-size:15px;
cursor:pointer;
font-family:inherit;
flex-shrink:0;
transition:background .15s, color .15s, border-color .15s;
}
.header-cart-btn:hover{
background:var(--terracotta);
color:#fff;
border-color:var(--terracotta);
}
.header-cart-badge{
position:absolute;
top:-4px;
right:-4px;
background:var(--terracotta);
color:#fff;
border-radius:999px;
min-width:18px;
height:18px;
display:none;
align-items:center;
justify-content:center;
font-size:10.5px;
font-weight:700;
padding:0 4px;
border:2px solid var(--cream);
}
.header-cart-overlay{
position:fixed; inset:0;
background:rgba(30,20,12,0.45);
display:none;
z-index:400;
}
.header-cart-overlay.open{ display:block; }
.header-cart-panel{
position:fixed;
top:0; right:0;
height:100%;
width:min(420px, 92vw);
background:#fff;
z-index:410;
transform:translateX(100%);
transition:transform .25s ease;
display:flex;
flex-direction:column;
box-shadow:-12px 0 30px rgba(0,0,0,0.15);
}
.header-cart-panel.open{ transform:translateX(0); }
.header-cart-panel-head{
padding:20px 22px;
border-bottom:1px solid rgba(74,55,40,0.1);
display:flex;
align-items:center;
justify-content:space-between;
}
.header-cart-panel-head h3{ font-size:18px; color:var(--brown); }
.header-cart-panel-close{ background:none; border:0; font-size:22px; cursor:pointer; color:var(--brown-soft); line-height:1; }
.header-cart-panel-body{ padding:18px 22px; overflow-y:auto; flex:1; }
.header-cart-panel-foot{ padding:18px 22px; border-top:1px solid rgba(74,55,40,0.1); }
.header-cart-line{
display:flex;
gap:12px;
padding:12px 0;
border-bottom:1px solid rgba(74,55,40,0.08);
}
.header-cart-line .info{ flex:1; }
.header-cart-line .name{ font-size:14px; color:var(--brown); font-weight:700; }
.header-cart-line .opts{ font-size:12px; color:var(--brown-soft); margin-top:2px; }
.header-cart-line .qty-row{ display:flex; align-items:center; gap:8px; margin-top:8px; }
.header-cart-line .qty-num{ font-size:13px; color:var(--brown); min-width:16px; text-align:center; }
.header-cart-qty-btn{
width:26px; height:26px; border-radius:6px; border:1px solid var(--brown);
background:#fff; color:var(--brown); cursor:pointer; font-size:14px; line-height:1;
font-family:inherit;
}
.header-cart-line-total{ font-size:14px; font-weight:700; color:var(--brown); white-space:nowrap; }
.header-cart-remove{ background:none; border:0; color:#a33; font-size:12px; cursor:pointer; margin-top:6px; font-family:inherit; }
.header-cart-empty{ text-align:center; color:var(--brown-soft); padding:60px 10px; font-size:14px; }
.header-cart-total-row{
display:flex; justify-content:space-between; align-items:center;
font-size:16px; color:var(--brown); margin-bottom:14px;
}
.header-cart-total-row strong{ font-size:20px; }
.header-cart-actions{ display:flex; gap:10px; }
@media (max-width:640px){
.header-cart-panel{ width:100vw; }
}
/* Footer copyright line */
.footer-copyright{
text-align:center;
font-size:11.5px;
color:rgba(250,243,231,0.55);
margin-top:16px;
}
/* ============================================================
Page loader (index.html only) - shown while the top page loads,
then fades out. See inline script right after #pageLoader.
============================================================ */
body.is-loading{ overflow:hidden; }
.page-loader{
position:fixed;
inset:0;
z-index:9999;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg, var(--cream) 0%, var(--cream-deep) 100%);
transition:opacity .7s ease, visibility .7s ease;
}
.page-loader.is-hidden{
opacity:0;
visibility:hidden;
pointer-events:none;
}
.page-loader-inner{
display:flex;
flex-direction:column;
align-items:center;
}
.page-loader-logo{
width:64px;
height:64px;
object-fit:contain;
border-radius:50%;
background:#fff;
box-shadow:var(--shadow);
padding:10px;
animation:pageLoaderPulse 1.8s ease-in-out infinite;
}
.page-loader-brand{
margin-top:20px;
font-family:'Zen Old Mincho', serif;
font-size:21px;
font-weight:700;
color:var(--brown);
letter-spacing:.04em;
opacity:0;
animation:pageLoaderFadeIn .8s ease forwards .25s;
}
.page-loader-sub{
font-size:11px;
color:var(--brown-soft);
letter-spacing:.15em;
margin-top:6px;
opacity:0;
animation:pageLoaderFadeIn .8s ease forwards .45s;
}
.page-loader-bar{
margin-top:28px;
width:120px;
height:2px;
background:rgba(74,55,40,0.12);
border-radius:999px;
overflow:hidden;
}
.page-loader-bar span{
display:block;
width:40%;
height:100%;
background:var(--terracotta);
border-radius:999px;
animation:pageLoaderBar 1.3s ease-in-out infinite;
}
@keyframes pageLoaderPulse{
0%,100%{ transform:scale(1); }
50%{ transform:scale(1.08); }
}
@keyframes pageLoaderFadeIn{
from{ opacity:0; transform:translateY(6px); }
to{ opacity:1; transform:translateY(0); }
}
@keyframes pageLoaderBar{
0%{ transform:translateX(-120%); }
50%{ transform:translateX(60%); }
100%{ transform:translateX(280%); }
}
@media (prefers-reduced-motion: reduce){
.page-loader-logo, .page-loader-bar span{ animation:none; }
.page-loader-brand, .page-loader-sub{ animation:none; opacity:1; }
}
@media (max-width:480px){
.page-loader-logo{ width:54px; height:54px; }
.page-loader-brand{ font-size:18px; }
}