@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ==========================================================================
   0. Design Tokens
   ========================================================================== */
:root{
	--f-bg:#faf7f0;
	--f-paper:#fffdf9;
	--f-ink:#1a1a1a;
	--f-ink-dim:#68624f;
	--f-line:rgba(26,26,26,0.14);
	--f-orange:#e8542a;
	--f-yellow:#f2c14e;
	--f-strawberry:#e63950;
	--f-green:#6b8f3c;
	--f-pink:#f2879a;
	--f-font-display:'Fraunces','Zen Kaku Gothic New',serif;
	--f-font-body:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN',sans-serif;
}

body{
	background:var(--f-bg) !important;
	color:var(--f-ink);
	font-family:var(--f-font-body);
}
.l-mainContents{ background:var(--f-bg); }
.post_content, .article, .l-content{ background:transparent; }
::selection{ background:var(--f-orange); color:#fff; }
img{ max-width:100%; }
a{ text-decoration:none; }

/* ==========================================================================
   1. Header
   ========================================================================== */
.l-header{
	background:var(--f-bg) !important;
	border-bottom:1px solid var(--f-line);
	box-shadow:none !important;
}
.l-header__inner{ align-items:center; }
.site-name, .site-name a{
	font-family:var(--f-font-display);
	font-weight:600;
	font-style:italic;
	color:var(--f-ink) !important;
	letter-spacing:.01em;
}
.c-gnav > li > a{
	color:var(--f-ink) !important;
	font-weight:500;
	font-size:.85rem;
	letter-spacing:.08em;
	position:relative;
}
.c-gnav > li > a::after{
	content:"";
	position:absolute;
	left:0; bottom:-2px;
	width:0; height:1px;
	background:var(--f-orange);
	transition:width .25s ease;
}
.c-gnav > li > a:hover::after,
.c-gnav > li > a.is-navActive::after{ width:100%; }

.l-fixHeader{ background:rgba(250,247,240,0.94) !important; box-shadow:0 1px 0 var(--f-line) !important; backdrop-filter:blur(6px); }
.l-fixHeader .c-gnav > li > a{ color:var(--f-ink) !important; }

.p-spMenuBtn span{ background:var(--f-ink) !important; }
.p-spMenu, .p-spMenu__inner{ background:var(--f-bg) !important; }
.p-spMenu .c-gnav a{ color:var(--f-ink) !important; }

.l-header__bar{ display:none !important; }

.c-gnav > li.f-headerReserve{ margin-left:10px; }
.c-gnav > li.f-headerReserve > a{
	display:inline-flex; align-items:center;
	background:var(--f-ink); color:#fff !important;
	font-size:.72rem !important; letter-spacing:.1em;
	padding:.55em 1.2em;
	border-radius:999px;
	transition:background .2s ease;
}
.c-gnav > li.f-headerReserve > a .ttl{ color:#fff !important; }
.c-gnav > li.f-headerReserve > a::after{ display:none !important; }
.c-gnav > li.f-headerReserve > a:hover{ background:var(--f-orange); }

/* ==========================================================================
   2. Hero — asymmetric magazine cover
   ========================================================================== */
.f-hero{
	position:relative;
	min-height:100vh;
	background:var(--f-bg);
	overflow:hidden;
	padding-top:90px;
}
.f-hero__eyebrow{
	position:absolute; top:14vh; left:6vw; z-index:3;
	font-family:var(--f-font-display);
	font-style:italic; font-size:.95rem;
	letter-spacing:.08em;
	color:var(--f-ink-dim);
}
.f-hero__photo{
	position:absolute;
	top:50%; left:50%;
	width:min(46vw,560px);
	aspect-ratio:1/1;
	transform:translate(-50%,-46%);
	border-radius:50%;
	overflow:hidden;
	z-index:2;
	box-shadow:0 30px 60px rgba(26,26,26,.18);
}
.f-hero__photo img{ width:100%; height:100%; object-fit:cover; }
.f-hero__titles{
	position:absolute; inset:0; z-index:1;
	display:flex; flex-direction:column; justify-content:center; align-items:center;
	pointer-events:none;
}
.f-hero__titles .f-word{
	font-family:var(--f-font-display);
	font-weight:900;
	font-size:clamp(4.5rem,15vw,13rem);
	line-height:.86;
	color:var(--f-ink);
	letter-spacing:-.01em;
}
.f-hero__titles .f-word--outline{
	color:transparent;
	-webkit-text-stroke:1.5px var(--f-ink);
}
.f-hero__copy{
	position:absolute; left:6vw; bottom:16vh; z-index:3;
	max-width:280px;
}
.f-hero__copy p{
	font-family:var(--f-font-display);
	font-style:italic; font-weight:500;
	font-size:1.5rem; line-height:1.5;
	margin:0 0 .8em;
}
.f-hero__info{
	position:absolute; right:6vw; bottom:8vh; z-index:3;
	text-align:right;
	font-size:.75rem;
	color:var(--f-ink-dim);
	line-height:1.9;
}
.f-hero__info strong{ display:block; font-family:var(--f-font-display); font-style:italic; font-size:1rem; color:var(--f-ink); margin-bottom:.4em; }

.f-hero__floaters{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.f-hero__floater{
	position:absolute;
	border-radius:50%;
	overflow:hidden;
	box-shadow:0 10px 24px rgba(26,26,26,.15);
	will-change:transform;
}
.f-hero__floater img{ width:100%; height:100%; object-fit:cover; }
.f-hero__floater--1{ width:64px; height:64px; top:26%; left:5%; }
.f-hero__floater--2{ width:50px; height:50px; top:80%; left:9%; }
.f-hero__floater--3{ width:56px; height:56px; top:16%; right:6%; }
.f-hero__floater--4{ width:42px; height:42px; top:88%; right:8%; }

.f-hero__scroll{
	position:absolute; left:6vw; bottom:2vh; z-index:3;
	font-size:.68rem; letter-spacing:.2em; color:var(--f-ink-dim);
}

@media (max-width:900px){
	.f-hero{ min-height:auto; padding:120px 6vw 60px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:22px; }
	.f-hero__eyebrow, .f-hero__scroll{ position:static; }
	.f-hero__photo{ position:static; transform:none; width:64vw; margin:0 auto; }
	.f-hero__titles{ position:static; max-width:100%; overflow:hidden; }
	.f-hero__titles .f-word{ font-size:clamp(2.6rem,15vw,4rem); }
	.f-hero__copy{ position:static; max-width:none; }
	.f-hero__info{ position:static; text-align:center; }
	.f-hero__info strong{ margin-bottom:.2em; }
	.f-hero__floaters{ display:none; }
}

/* ==========================================================================
   3. Section common / eyebrow / editorial headings
   ========================================================================== */
.f-section{ padding:110px 6vw; position:relative; }
.f-section--tight{ padding:70px 6vw; }
.f-eyebrow{
	display:block;
	font-family:var(--f-font-display);
	font-style:italic;
	color:var(--f-orange);
	font-size:.95rem;
	margin-bottom:.5em;
}
.f-headline{
	font-family:var(--f-font-display);
	font-weight:700;
	font-size:clamp(2.4rem,6vw,4.6rem);
	line-height:1.02;
	color:var(--f-ink);
	margin:0;
}
.f-lead{ color:var(--f-ink-dim); margin-top:1em; max-width:520px; line-height:1.9; }

/* ==========================================================================
   4. Marquee — direction-aware giant typography
   ========================================================================== */
.f-marquee{
	overflow:hidden;
	white-space:nowrap;
	padding:26px 0;
	border-top:1px solid var(--f-line);
	border-bottom:1px solid var(--f-line);
}
.f-marquee__track{ display:inline-flex; white-space:nowrap; will-change:transform; }
.f-marquee__track span{
	font-family:var(--f-font-display);
	font-weight:900; font-style:italic;
	font-size:clamp(2rem,6vw,4.5rem);
	padding:0 .5em;
	color:var(--f-ink);
}
.f-marquee__track span:nth-child(4n+2){ color:var(--f-orange); }
.f-marquee__track span:nth-child(4n+3){ color:var(--f-green); }
.f-marquee__track span:nth-child(4n+4){ color:var(--f-pink); -webkit-text-stroke:1px var(--f-ink); color:transparent; }

/* ==========================================================================
   5. Seasonal
   ========================================================================== */
.f-seasonal__head{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:20px; margin-bottom:50px; }
.f-seasonal__grid{
	display:grid;
	grid-template-columns:1.3fr .8fr .9fr;
	grid-template-rows:repeat(2,220px);
	gap:18px;
}
.f-seasonal__item{ position:relative; overflow:hidden; border-radius:4px; }
.f-seasonal__item img{ width:100%; height:100%; object-fit:cover; }
.f-seasonal__item:nth-child(1){ grid-column:1; grid-row:1 / 3; }
.f-seasonal__item:nth-child(2){ grid-column:2; grid-row:1; }
.f-seasonal__item:nth-child(3){ grid-column:3; grid-row:1 / 3; }
.f-seasonal__item:nth-child(4){ grid-column:2; grid-row:2; }
.f-seasonal__caption{
	position:absolute; left:14px; bottom:14px; z-index:2;
	background:var(--f-paper);
	padding:.4em 1em;
	border-radius:999px;
	font-size:.78rem;
	font-weight:700;
}

/* mask reveal (scroll-in clip animation) */
.f-maskReveal{ clip-path:inset(0 0 100% 0); transition:clip-path 1s cubic-bezier(.65,0,.35,1); }
.f-maskReveal.is-revealed{ clip-path:inset(0 0 0% 0); }
.f-maskReveal--circle{ clip-path:circle(0% at 50% 50%); transition:clip-path 1.1s cubic-bezier(.65,0,.35,1); }
.f-maskReveal--circle.is-revealed{ clip-path:circle(75% at 50% 50%); }

/* ==========================================================================
   6. Featured menu — editorial big/small layout
   ========================================================================== */
.f-featured{ display:grid; grid-template-columns:1.4fr 1fr; gap:26px; }
.f-featured__big{ position:relative; overflow:hidden; border-radius:4px; grid-row:1 / 3; }
.f-featured__big img{ width:100%; height:100%; object-fit:cover; min-height:520px; }
.f-featured__small{ position:relative; overflow:hidden; border-radius:4px; }
.f-featured__small img{ width:100%; height:100%; object-fit:cover; min-height:247px; }
.f-featured__tag{
	position:absolute; top:14px; left:14px; z-index:2;
	font-size:.68rem; letter-spacing:.1em; font-weight:700;
	padding:.35em .9em; border-radius:999px; color:#fff;
	background:var(--f-orange);
}
.f-featured__tag--new{ background:var(--f-green); }
.f-featured__tag--popular{ background:var(--f-strawberry); }
.f-featured__info{
	position:absolute; left:0; right:0; bottom:0; z-index:2;
	padding:20px;
	background:linear-gradient(0deg,rgba(0,0,0,.55),rgba(0,0,0,0));
	color:#fff;
}
.f-featured__info h3{ font-family:var(--f-font-display); font-size:1.4rem; margin:0 0 .2em; }
.f-featured__info span{ font-family:var(--f-font-display); font-style:italic; }

@media (max-width:900px){
	.f-featured{ grid-template-columns:1fr; }
	.f-featured__big{ grid-row:auto; }
	.f-featured__big img, .f-featured__small img{ min-height:260px; }
}

/* ==========================================================================
   7. Story
   ========================================================================== */
.f-story{ display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:center; }
.f-story__photo{ overflow:hidden; border-radius:4px; }
.f-story__photo img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.f-story__block + .f-story__block{ margin-top:2.4em; }
.f-story__block .f-headline{ font-size:clamp(1.8rem,3.2vw,2.6rem); }
.f-story__block p{ color:var(--f-ink-dim); margin-top:.6em; line-height:1.9; max-width:440px; }

@media (max-width:900px){
	.f-story{ grid-template-columns:1fr; }
}

/* ==========================================================================
   8. Color-shift section (scroll-driven background)
   ========================================================================== */
.f-colorShift{
	position:relative;
	transition:background-color .1s linear;
}
.f-colorShift__inner{ padding:110px 6vw; }
.f-colorShift__stop{ min-height:70vh; display:flex; flex-direction:column; justify-content:center; max-width:640px; margin:0 auto; }
.f-colorShift__stop + .f-colorShift__stop{ border-top:1px solid rgba(26,26,26,.12); }
.f-colorShift__stop .f-eyebrow{ color:var(--f-ink); opacity:.6; }
.f-colorShift__stop h3{ font-family:var(--f-font-display); font-weight:700; font-size:clamp(2rem,4.5vw,3.2rem); margin:0 0 .4em; }
.f-colorShift__stop p{ line-height:1.9; max-width:480px; }

/* ==========================================================================
   9. Fruit Journal
   ========================================================================== */
.f-journalGrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.f-journalCard{ display:block; cursor:pointer; }
.f-journalCard__photo{ overflow:hidden; border-radius:4px; aspect-ratio:4/3; }
.f-journalCard__photo img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.f-journalCard:hover .f-journalCard__photo img{ transform:scale(1.06); }
.f-journalCard__date{ display:block; margin-top:16px; font-size:.72rem; letter-spacing:.1em; color:var(--f-ink-dim); }
.f-journalCard__title{ font-family:var(--f-font-display); font-weight:700; font-size:1.3rem; margin:.3em 0; color:var(--f-ink); }
.f-journalCard__excerpt{ font-size:.85rem; color:var(--f-ink-dim); line-height:1.7; }

@media (max-width:900px){
	.f-journalGrid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   10. Instagram grid
   ========================================================================== */
.f-igGrid{ display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:150px; gap:8px; }
.f-igGrid a{ display:block; overflow:hidden; position:relative; }
.f-igGrid a:nth-child(1){ grid-column:span 2; grid-row:span 2; }
.f-igGrid a:nth-child(5){ grid-column:span 2; grid-row:span 2; }
.f-igGrid img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.f-igGrid a:hover img{ transform:scale(1.08); }

@media (max-width:900px){
	.f-igGrid{ grid-template-columns:repeat(3,1fr); grid-auto-rows:110px; }
	.f-igGrid a:nth-child(1), .f-igGrid a:nth-child(5){ grid-column:span 1; grid-row:span 1; }
}

/* ==========================================================================
   11. Shop gallery (editorial)
   ========================================================================== */
.f-shopGallery{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.f-shopGallery figure{ margin:0; overflow:hidden; border-radius:4px; }
.f-shopGallery figure img{ width:100%; height:100%; object-fit:cover; }
.f-shopGallery figure:nth-child(1){ grid-column:1/5; grid-row:1/3; }
.f-shopGallery figure:nth-child(1) img{ aspect-ratio:16/11; }
.f-shopGallery figure:nth-child(2){ grid-column:5/7; }
.f-shopGallery figure:nth-child(2) img{ aspect-ratio:1/1; }
.f-shopGallery figure:nth-child(3){ grid-column:5/7; }
.f-shopGallery figure:nth-child(3) img{ aspect-ratio:1/1; }
.f-shopGallery figure:nth-child(4){ grid-column:1/3; }
.f-shopGallery figure:nth-child(5){ grid-column:3/7; }
.f-shopGallery figure:nth-child(4) img, .f-shopGallery figure:nth-child(5) img{ aspect-ratio:16/9; }
.f-shopGallery figcaption{ margin-top:.5em; font-size:.78rem; color:var(--f-ink-dim); }

@media (max-width:900px){
	.f-shopGallery{ grid-template-columns:1fr 1fr; }
	.f-shopGallery figure:nth-child(1),
	.f-shopGallery figure:nth-child(2),
	.f-shopGallery figure:nth-child(3),
	.f-shopGallery figure:nth-child(4),
	.f-shopGallery figure:nth-child(5){ grid-column:span 2; }
}

/* ==========================================================================
   12. Access
   ========================================================================== */
.f-access{ display:grid; grid-template-columns:1fr 1fr; gap:50px; }
.f-access table{ width:100%; border-collapse:collapse; }
.f-access th, .f-access td{ text-align:left; padding:16px 10px; border-bottom:1px solid var(--f-line); }
.f-access th{ width:120px; font-weight:700; font-size:.85rem; color:var(--f-ink-dim); }
.f-access__map{ border-radius:4px; overflow:hidden; border:1px solid var(--f-line); }
.f-access__map iframe{ width:100%; height:100%; min-height:320px; border:0; display:block; }

@media (max-width:900px){
	.f-access{ grid-template-columns:1fr; }
}

/* ==========================================================================
   13. NEWS list
   ========================================================================== */
.f-newsList{ list-style:none; margin:0 auto; padding:0; max-width:820px; }
.f-newsList li{ display:flex; gap:24px; padding:26px 0; border-bottom:1px solid var(--f-line); flex-wrap:wrap; }
.f-newsList time{ font-family:var(--f-font-display); font-style:italic; color:var(--f-orange); flex:none; width:110px; }
.f-newsTag{ font-size:.68rem; letter-spacing:.08em; background:var(--f-ink); color:#fff; padding:.3em .8em; border-radius:999px; flex:none; }
.f-newsList p{ margin:.5em 0 0; width:100%; color:var(--f-ink-dim); }

/* ==========================================================================
   14. Closer (SEE YOU AT FRUIT TABLE)
   ========================================================================== */
.f-closer{
	position:relative;
	min-height:80vh;
	display:flex; align-items:center; justify-content:center;
	overflow:hidden;
}
.f-closer__bg{ position:absolute; inset:0; }
.f-closer__bg img{ width:100%; height:100%; object-fit:cover; filter:brightness(.5); }
.f-closer__content{ position:relative; z-index:2; text-align:center; color:#fff; }
.f-closer__content .f-word{
	display:block;
	font-family:var(--f-font-display); font-weight:900;
	font-size:clamp(2.6rem,8vw,6rem); line-height:1.02;
}
.f-closer__cta{ margin-top:36px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ==========================================================================
   15. Buttons
   ========================================================================== */
.f-btn{
	display:inline-flex; align-items:center; gap:.4em;
	font-size:.82rem; letter-spacing:.06em;
	padding:.95em 2em;
	border-radius:999px;
	transition:all .25s ease;
}
.f-btn--dark{ background:var(--f-ink); color:#fff !important; }
.f-btn--dark:hover{ background:var(--f-orange); }
.f-btn--light{ background:#fff; color:var(--f-ink) !important; }
.f-btn--light:hover{ background:var(--f-orange); color:#fff !important; }
.f-btn--line{ border:1px solid var(--f-ink); color:var(--f-ink) !important; }
.f-btn--line:hover{ background:var(--f-ink); color:#fff !important; }
.f-btn--lineLight{ border:1px solid #fff; color:#fff !important; }
.f-btn--lineLight:hover{ background:#fff; color:var(--f-ink) !important; }

/* ==========================================================================
   16. Menu tabs / cards (used on /menu/)
   ========================================================================== */
.f-menuTabs__nav{
	display:flex; gap:28px; overflow-x:auto;
	padding-bottom:16px; margin-bottom:50px;
	border-bottom:1px solid var(--f-line);
	-ms-overflow-style:none; scrollbar-width:none;
}
.f-menuTabs__nav::-webkit-scrollbar{ display:none; }
.f-menuTabs__nav button{
	flex:none;
	background:none; border:none; cursor:pointer;
	font-family:var(--f-font-display); font-style:italic; font-weight:600;
	font-size:1.1rem; color:var(--f-ink-dim);
	padding:.2em 0;
	position:relative;
}
.f-menuTabs__nav button::after{
	content:""; position:absolute; left:0; right:0; bottom:-17px;
	height:2px; background:var(--f-orange);
	transform:scaleX(0); transition:transform .25s ease;
}
.f-menuTabs__nav button.is-active{ color:var(--f-ink); }
.f-menuTabs__nav button.is-active::after{ transform:scaleX(1); }

.f-menuTabs__panel{ display:none; }
.f-menuTabs__panel.is-active{ display:block; }

.f-menuGrid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:34px 26px;
}
.f-menuGrid .f-productCard--wide{ grid-column:span 2; }
.f-productCard{ cursor:pointer; }
.f-productCard__photo{ position:relative; overflow:hidden; border-radius:4px; aspect-ratio:4/3; }
.f-productCard--wide .f-productCard__photo{ aspect-ratio:16/9; }
.f-productCard__photo img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.f-productCard:hover .f-productCard__photo img{ transform:scale(1.08); }
.f-productCard__label{
	position:absolute; top:12px; left:12px; z-index:2;
	font-size:.65rem; letter-spacing:.08em; font-weight:700; color:#fff;
	padding:.3em .8em; border-radius:999px;
	background:var(--f-orange);
	opacity:0; transform:translateY(-6px);
	transition:all .3s ease;
}
.f-productCard:hover .f-productCard__label{ opacity:1; transform:translateY(0); }
.f-productCard__label--new{ background:var(--f-green); }
.f-productCard__label--popular{ background:var(--f-strawberry); }
.f-productCard__label--seasonal{ background:var(--f-yellow); color:var(--f-ink); }
.f-productCard__row{
	display:flex; justify-content:space-between; align-items:baseline;
	margin-top:16px;
	transition:transform .3s ease;
}
.f-productCard:hover .f-productCard__row{ transform:translateX(6px); }
.f-productCard__name{ font-weight:700; font-size:1.02rem; margin:0; }
.f-productCard__price{ font-family:var(--f-font-display); font-style:italic; color:var(--f-orange); flex:none; }
.f-productCard__desc{ margin:.4em 0 0; font-size:.82rem; color:var(--f-ink-dim); line-height:1.6; }

@media (max-width:900px){
	.f-menuGrid{ grid-template-columns:1fr 1fr; }
	.f-menuGrid .f-productCard--wide{ grid-column:span 2; }
}
@media (max-width:600px){
	.f-menuGrid{ grid-template-columns:1fr; }
	.f-menuGrid .f-productCard--wide{ grid-column:span 1; }
}

/* cursor VIEW circle (PC only) */
.f-cursorView{
	position:fixed; top:0; left:0; z-index:9999;
	width:64px; height:64px; border-radius:50%;
	background:var(--f-ink); color:#fff;
	display:flex; align-items:center; justify-content:center;
	font-family:var(--f-font-display); font-style:italic; font-size:.72rem;
	opacity:0; transform:translate(-50%,-50%) scale(.6);
	transition:opacity .2s ease, transform .2s ease;
	pointer-events:none;
}
.f-cursorView.is-active{ opacity:1; transform:translate(-50%,-50%) scale(1); }
@media (hover:none), (pointer:coarse){ .f-cursorView{ display:none; } }

/* ==========================================================================
   17. Product modal
   ========================================================================== */
.f-modalOverlay{
	position:fixed; inset:0; z-index:9998;
	background:rgba(26,26,26,.7);
	display:flex; align-items:center; justify-content:center;
	padding:5vw;
	opacity:0; pointer-events:none;
	transition:opacity .3s ease;
}
.f-modalOverlay.is-open{ opacity:1; pointer-events:auto; }
.f-modal{
	background:var(--f-paper);
	max-width:760px; width:100%;
	max-height:88vh; overflow:auto;
	display:grid; grid-template-columns:1fr 1fr;
	border-radius:6px;
	transform:translateY(24px); opacity:0;
	transition:all .35s cubic-bezier(.34,1.2,.64,1);
	position:relative;
}
.f-modalOverlay.is-open .f-modal{ transform:translateY(0); opacity:1; }
.f-modal__close{
	position:absolute; top:12px; right:12px; z-index:2;
	width:36px; height:36px; border-radius:50%; border:none;
	background:var(--f-ink); color:#fff; font-size:1.2rem; cursor:pointer; line-height:1;
}
.f-modal__img{ width:100%; height:100%; object-fit:cover; min-height:260px; }
.f-modal__body{ padding:36px 32px; }
.f-modal__label{ font-size:.68rem; letter-spacing:.08em; font-weight:700; color:var(--f-orange); margin:0 0 .8em; }
.f-modal__name{ font-family:var(--f-font-display); font-size:1.7rem; margin:0 0 .3em; }
.f-modal__price{ font-family:var(--f-font-display); font-style:italic; color:var(--f-orange); font-size:1.2rem; margin:0 0 1em; }
.f-modal__desc{ color:var(--f-ink-dim); line-height:1.9; margin:0 0 1em; }
.f-modal__fruit{ font-size:.78rem; color:var(--f-ink-dim); border-top:1px solid var(--f-line); padding-top:1em; }

@media (max-width:700px){
	.f-modal{ grid-template-columns:1fr; }
	.f-modal__img{ min-height:200px; }
}

/* ==========================================================================
   18. Mobile fixed nav
   ========================================================================== */
.f-spNav{ display:none; }
@media (max-width:900px){
	.f-spNav{
		display:flex;
		position:fixed; left:0; right:0; bottom:0; z-index:500;
		background:var(--f-ink);
	}
	.f-spNav a{
		flex:1; text-align:center; padding:1em .3em;
		color:#fff; font-size:.7rem; letter-spacing:0; font-weight:700;
		border-right:1px solid rgba(255,255,255,.15);
		box-sizing:border-box;
		min-width:0;
		overflow:hidden;
	}
	.f-spNav a:last-child{ border-right:none; background:var(--f-orange); padding-right:calc(.3em + env(safe-area-inset-right)); }
	body{ padding-bottom:52px; }
}

/* ==========================================================================
   19. Page transition overlay (journal "page turn")
   ========================================================================== */
.f-pageTransition{
	position:fixed; inset:0; z-index:99999;
	background:var(--f-ink);
	transform:translateX(101%);
	pointer-events:none;
}
.f-pageTransition.is-active{
	transition:transform .5s cubic-bezier(.65,0,.35,1);
	transform:translateX(0%);
}

/* ==========================================================================
   20. Page hero (sub pages)
   ========================================================================== */
.f-pageHero{
	padding:150px 6vw 70px;
	position:relative;
}
.f-pageHero__label{ font-family:var(--f-font-display); font-style:italic; color:var(--f-orange); }
.f-pageHero__title{
	font-family:var(--f-font-display); font-weight:900;
	font-size:clamp(3rem,9vw,7rem); line-height:.95; margin:.1em 0;
}
.f-pageHero__copy{ color:var(--f-ink-dim); max-width:420px; line-height:1.8; }

/* ==========================================================================
   21. Footer / breadcrumb
   ========================================================================== */
.l-footer{ background:var(--f-ink) !important; }
.l-footer, .l-footer a{ color:rgba(250,247,240,.75) !important; }
.p-breadcrumb{ background:var(--f-bg) !important; }
.p-breadcrumb__text{ color:var(--f-ink-dim) !important; }

/* SWELL h2 boxed-heading override (background:var(--color_htag); color:#fff) */
.post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)){
	background:none !important; padding:0 !important; color:var(--f-ink) !important;
}
.post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::before{
	content:none !important; display:none !important;
}
.post_content h1, .post_content h2, .post_content h3, .post_content h4, .post_content h5, .post_content h6{
	color:var(--f-ink) !important;
}

/* ==========================================================================
   22. About page specifics
   ========================================================================== */
.f-fruitGrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.f-fruitCard{ }
.f-fruitCard__photo{ overflow:hidden; border-radius:4px; aspect-ratio:1/1; }
.f-fruitCard__photo img{ width:100%; height:100%; object-fit:cover; }
.f-fruitCard h3{ font-family:var(--f-font-display); font-style:italic; font-size:1.3rem; margin:16px 0 6px; }
.f-fruitCard__meta{ font-size:.82rem; color:var(--f-ink-dim); line-height:2; margin:0; }
.f-fruitCard__meta b{ color:var(--f-ink); font-weight:700; }

@media (max-width:900px){
	.f-fruitGrid{ grid-template-columns:1fr; }
}