/* =============================================
   PAGES.CSS — Shared CSS for gallery, our-story,
   collection, collections, terms, privacy pages.
   Uses the same design tokens as shop.php & index.php.
   ============================================= */

/* =============================================
   DESIGN SYSTEM — CSS Custom Properties
   ============================================= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root,[data-theme="light"]{
  --ivory:#fafaf8;
  --ivory2:#f2f1ee;
  --ivory3:#e5e3de;
  --glass-white:rgba(255,255,255,0.82);
  --glass-white-hover:rgba(255,255,255,0.95);
  --glass-border:rgba(255,255,255,0.9);
  --glass-border-soft:rgba(0,0,0,0.06);
  --sage:#7a9d8a;
  --sage-dark:#5a8070;
  --sage-light:rgba(122,157,138,0.12);
  --rose:#b87d74;
  --rose-light:rgba(184,125,116,0.12);
  --lavender:#8e87a8;
  --lavender-light:rgba(142,135,168,0.12);
  --gold:#b89660;
  --gold-light:rgba(184,150,96,0.12);
  --text-dark:#0d0d0d;
  --text-mid:#4a4a4a;
  --text-soft:#7a7a7a;
  --text-pale:#aaaaaa;
  --shadow-sm:0 2px 16px rgba(0,0,0,0.04);
  --shadow-md:0 8px 32px rgba(0,0,0,0.07);
  --shadow-lg:0 20px 60px rgba(0,0,0,0.11);
  --shadow-xl:0 40px 100px rgba(0,0,0,0.14);
  --radius-sm:6px;
  --radius-md:14px;
  --radius-lg:20px;
  --radius-xl:28px;
  --transition:0.45s cubic-bezier(0.16,1,0.3,1);
  /* Brand vars for legacy Tailwind compat */
  --pc-brand-50:#fff;
  --pc-brand-100:#f4f4f5;
  --pc-brand-200:#e4e4e7;
  --pc-brand-800:#d4af37;
  --pc-brand-900:#0f0f11;
}

[data-theme="dark"]{
  --ivory:#0c0c0c;
  --ivory2:#161616;
  --ivory3:#222222;
  --glass-white:rgba(22,22,22,0.88);
  --glass-white-hover:rgba(32,32,32,0.96);
  --glass-border:rgba(255,255,255,0.06);
  --glass-border-soft:rgba(255,255,255,0.10);
  --text-dark:#f2f2f2;
  --text-mid:#c0c0c0;
  --text-soft:#888888;
  --text-pale:#505050;
  --shadow-sm:0 2px 16px rgba(0,0,0,0.35);
  --shadow-md:0 8px 32px rgba(0,0,0,0.45);
  --shadow-lg:0 20px 60px rgba(0,0,0,0.55);
  --shadow-xl:0 40px 100px rgba(0,0,0,0.65);
}

html{scroll-behavior:smooth;overflow-x:hidden}
body{
  background:var(--ivory);color:var(--text-dark);
  font-family:'Satoshi',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-weight:400;overflow-x:hidden;line-height:1.6;
  transition:background 0.4s,color 0.4s;
  display:flex;flex-direction:column;min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button{cursor:pointer;border:none;background:none;font-family:inherit;color:inherit;outline:none}
ul,ol{list-style:none;padding:0;margin:0}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--ivory)}
::-webkit-scrollbar-thumb{background:var(--text-pale);border-radius:10px}

/* =============================================
   LAYOUT CONTAINERS
   ============================================= */
.page-container{
  max-width:1320px;margin:0 auto;width:100%;
  padding-left:1.5rem;padding-right:1.5rem;
}
@media(min-width:768px){.page-container{padding-left:3rem;padding-right:3rem}}

.page-body{flex:1}

/* =============================================
   PAGE HERO — shared across all content pages
   ============================================= */
.page-hero{
  padding:9rem 2rem 4rem;
  background:var(--ivory2);
  border-bottom:1px solid var(--ivory3);
  position:relative;overflow:hidden;
}
.page-hero::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 20% 80%,var(--sage-light) 0%,transparent 60%),
    radial-gradient(ellipse at 80% 20%,var(--rose-light) 0%,transparent 60%);
  pointer-events:none;
}
.page-hero-inner{
  max-width:1320px;margin:0 auto;
  position:relative;z-index:1;
}
.page-hero .eyebrow{
  font-size:0.7rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--sage);margin-bottom:1.2rem;display:flex;align-items:center;gap:0.7rem;
}
.page-hero .eyebrow::before{content:'';width:24px;height:1.5px;background:var(--sage)}
.page-hero h1{
  font-size:clamp(2.2rem,5vw,3.8rem);font-weight:300;line-height:1.08;
  letter-spacing:-0.02em;color:var(--text-dark);margin-bottom:0.75rem;
  font-family:'Playfair Display','Satoshi',serif;
  max-width:52rem;
}
.page-hero h1 em{font-family:'Playfair Display',serif;font-style:italic;font-weight:700;color:var(--rose)}
.page-hero .hero-desc{
  font-size:0.95rem;color:var(--text-soft);line-height:1.7;
  margin-top:1.2rem;max-width:40rem;font-weight:400;
}
.page-hero .hero-meta{
  display:flex;flex-wrap:wrap;gap:0.75rem;margin-top:2rem;align-items:center;
}

/* =============================================
   BUTTONS — matching shop.php / index.php
   ============================================= */
.btn-dark{
  padding:1rem 2.4rem;background:var(--text-dark);color:var(--ivory);
  font-weight:700;font-size:0.78rem;letter-spacing:0.12em;text-transform:uppercase;
  border-radius:50px;transition:var(--transition);
  box-shadow:var(--shadow-md);border:1.5px solid var(--text-dark);
  display:inline-flex;align-items:center;gap:0.5rem;text-decoration:none;cursor:pointer;
}
.btn-dark:hover{transform:translateY(-2px);box-shadow:var(--shadow-xl);background:var(--sage);border-color:var(--sage)}

.btn-outline{
  padding:0.85rem 1.8rem;background:transparent;
  border:1.5px solid var(--glass-border-soft);border-radius:50px;
  font-weight:600;font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--text-dark);transition:var(--transition);
  display:inline-flex;align-items:center;gap:0.5rem;text-decoration:none;cursor:pointer;
}
.btn-outline:hover{background:var(--ivory2);transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--text-mid)}

.btn-sage{
  padding:0.85rem 1.8rem;background:var(--sage);color:white;
  font-weight:700;font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;
  border-radius:50px;transition:var(--transition);border:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:0.5rem;
}
.btn-sage:hover{background:var(--sage-dark);transform:translateY(-2px);box-shadow:var(--shadow-md)}

.btn-spring{transition:transform .2s cubic-bezier(.16,1,.3,1)}
.btn-spring:active{transform:scale(.96)}

.share-btn{
  width:46px;height:46px;border-radius:50%;border:1px solid var(--glass-border-soft);
  background:var(--glass-white);color:var(--text-mid);
  display:inline-flex;align-items:center;justify-content:center;
  transition:var(--transition);cursor:pointer;box-shadow:var(--shadow-sm);
  backdrop-filter:blur(12px);
}
.share-btn:hover{border-color:var(--sage);color:var(--sage);transform:translateY(-2px);box-shadow:var(--shadow-md)}

.pill{
  padding:0.65rem 1.4rem;border-radius:50px;
  background:var(--glass-white);border:1px solid var(--glass-border-soft);
  font-size:0.85rem;font-weight:600;color:var(--text-mid);
  box-shadow:var(--shadow-sm);backdrop-filter:blur(12px);
  display:inline-flex;align-items:center;gap:0.5rem;
}

/* =============================================
   GALLERY PAGE
   ============================================= */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1rem;
}
@media(min-width:768px){.gallery-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem}}
@media(min-width:1280px){.gallery-grid{grid-template-columns:repeat(4,1fr);gap:1.5rem}}

/* Gallery card sizes */
.gallery-small{grid-column:span 1}
.gallery-medium{grid-column:span 1}
.gallery-large{grid-column:span 2}
.gallery-tall{grid-column:span 1}
.gallery-wide{grid-column:span 2}
.gallery-xlarge{grid-column:span 2}
.gallery-tall img{aspect-ratio:4/5}
.gallery-wide img{aspect-ratio:5/4}

.art-card{
  border-radius:var(--radius-xl);overflow:hidden;
  border:1px solid var(--glass-border-soft);
  background:var(--ivory);
  box-shadow:var(--shadow-sm);
  transition:transform 0.5s cubic-bezier(0.16,1,0.3,1),box-shadow 0.5s;
  cursor:pointer;position:relative;
}
.art-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}

.art-card-img{
  position:relative;overflow:hidden;width:100%;height:100%;
  background:var(--ivory2);
}
.art-card-img img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1s cubic-bezier(0.16,1,0.3,1);
  opacity:0.95;
}
.art-card:hover .art-card-img img{transform:scale(1.05)}

/* Aspect ratios */
.aspect-square{aspect-ratio:1/1}
.aspect-4-5{aspect-ratio:4/5}
.aspect-video{aspect-ratio:16/9}
.aspect-3-5{aspect-ratio:3/5}
.aspect-5-3{aspect-ratio:5/3}
.aspect-16-9{aspect-ratio:16/9}

/* Card badges */
.card-badge{
  position:absolute;top:0.75rem;left:0.75rem;z-index:10;
  padding:0.3rem 0.8rem;border-radius:50px;
  font-size:0.62rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
  background:white;color:var(--sage);border:1px solid rgba(122,157,138,0.3);
  box-shadow:var(--shadow-sm);
}
@media(min-width:768px){.card-badge{top:1rem;left:1rem;padding:0.35rem 0.9rem;font-size:0.65rem}}
.card-badge.one-of-one{background:var(--text-dark);color:white;border:none}
.card-badge.sold{background:rgba(0,0,0,0.75);color:white;border:none}
.card-badge + .card-badge{top:2.6rem}
@media(min-width:768px){.card-badge + .card-badge{top:3rem}}

/* Card overlay */
.art-card-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,0.85) 0%,rgba(0,0,0,0.25) 45%,transparent 100%);
  opacity:1;display:flex;flex-direction:column;justify-content:flex-end;
  padding:1rem;gap:0.5rem;
  transition:opacity 0.3s;
}
@media(min-width:1024px){
  .art-card-overlay{opacity:0;padding:1.25rem;gap:0.75rem}
  .art-card:hover .art-card-overlay{opacity:1}
}

.art-card-overlay .card-cat{
  font-size:0.55rem;font-weight:700;letter-spacing:0.32em;text-transform:uppercase;
  color:var(--sage);margin-bottom:0.15rem;
}
@media(min-width:768px){.art-card-overlay .card-cat{font-size:0.6rem}}

.art-card-overlay .card-row{
  display:flex;align-items:flex-end;justify-content:space-between;gap:0.5rem;
}
.art-card-overlay .card-name{
  font-size:0.88rem;font-weight:600;color:white;line-height:1.3;
  font-family:'Playfair Display','Satoshi',serif;
}
@media(min-width:768px){.art-card-overlay .card-name{font-size:1rem}}
.art-card-overlay .card-price{
  font-size:0.82rem;font-weight:700;color:var(--sage);white-space:nowrap;
}
@media(min-width:768px){.art-card-overlay .card-price{font-size:0.88rem}}
.art-card-overlay .price-old{
  font-size:0.68rem;color:rgba(255,255,255,0.5);text-decoration:line-through;
  display:block;text-align:right;
}

.art-card-overlay .card-btns{
  display:flex;gap:0.5rem;
  transform:translateY(0);transition:transform 0.3s;
}
@media(min-width:1024px){
  .art-card-overlay .card-btns{transform:translateY(8px)}
  .art-card:hover .art-card-overlay .card-btns{transform:translateY(0)}
}

.card-btn-primary{
  flex:1;padding:0.55rem 0.8rem;border-radius:50px;
  background:var(--sage);color:white;border:none;
  font-size:0.62rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;
  transition:var(--transition);cursor:pointer;text-align:center;
}
@media(min-width:768px){.card-btn-primary{padding:0.65rem 1rem;font-size:0.65rem}}
.card-btn-primary:hover{background:var(--sage-dark)}

.card-btn-secondary{
  flex:1;padding:0.55rem 0.8rem;border-radius:50px;
  border:1px solid rgba(255,255,255,0.2);color:white;background:transparent;
  font-size:0.62rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;
  transition:var(--transition);cursor:pointer;text-align:center;
  backdrop-filter:blur(4px);
}
@media(min-width:768px){.card-btn-secondary{padding:0.65rem 1rem;font-size:0.65rem}}
.card-btn-secondary:hover{background:rgba(255,255,255,0.1)}

.card-btn-sold{
  flex:1;text-align:center;
  padding:0.55rem 0.8rem;border-radius:50px;
  border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.1);
  color:rgba(255,255,255,0.5);
  font-size:0.62rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;
  backdrop-filter:blur(4px);
}

/* =============================================
   PAGINATION — matching shop.php
   ============================================= */
.pagination{
  display:flex;justify-content:center;gap:0.5rem;margin-top:4rem;
  flex-wrap:wrap;
}
.pg-btn{
  width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:0.9rem;font-weight:700;transition:var(--transition);
  text-decoration:none;
}
.pg-btn.current{
  background:var(--text-dark);color:var(--ivory);box-shadow:var(--shadow-md);
}
.pg-btn:not(.current){
  background:var(--glass-white);color:var(--text-mid);
  border:1px solid var(--glass-border-soft);box-shadow:var(--shadow-sm);
}
.pg-btn:not(.current):hover{
  background:var(--ivory2);border-color:var(--text-mid);color:var(--text-dark);
}

/* =============================================
   OUR STORY PAGE
   ============================================= */
.story-hero-grid{
  display:grid;grid-template-columns:1fr;gap:2rem;align-items:center;
}
@media(min-width:1024px){.story-hero-grid{grid-template-columns:1fr 1fr;gap:3rem}}

.story-hero-text{text-align:center}
@media(min-width:1024px){.story-hero-text{text-align:left}}

.story-hero-text h1{
  font-size:clamp(1.8rem,4vw,3.2rem);font-weight:300;line-height:1.12;
  color:var(--text-dark);margin-bottom:1.5rem;
  font-family:'Playfair Display','Satoshi',serif;
}
.story-hero-text h1 strong{color:var(--sage);font-weight:600}
.story-hero-text p{
  font-size:0.92rem;color:var(--text-soft);line-height:1.8;margin-top:1rem;font-weight:400;
}
.story-hero-text p strong{color:var(--text-dark);font-weight:600}

.story-credentials{
  display:flex;flex-wrap:wrap;gap:0.75rem;margin-top:2rem;
  align-items:center;justify-content:center;
}
@media(min-width:1024px){.story-credentials{justify-content:flex-start}}
.credential-pill{
  padding:0.65rem 1.2rem;border-radius:50px;
  background:var(--ivory2);border:1px solid var(--glass-border-soft);
  font-size:0.82rem;font-weight:600;color:var(--text-mid);
  display:inline-flex;align-items:center;gap:0.5rem;
  box-shadow:var(--shadow-sm);
}
.credential-dot{width:6px;height:6px;border-radius:50%;background:var(--sage)}

.story-image-wrap{
  position:relative;overflow:hidden;border-radius:var(--radius-xl);
  border:1px solid var(--glass-border-soft);box-shadow:var(--shadow-lg);
  background:var(--ivory2);
}
.story-image-wrap img{width:100%;height:100%;object-fit:cover;opacity:0.95}
.story-image-wrap.square{aspect-ratio:1/1}
@media(min-width:768px){.story-image-wrap.square{aspect-ratio:4/5;height:500px}}
.glow-orb{
  position:absolute;width:8rem;height:8rem;
  background:var(--sage-light);border-radius:50%;
  filter:blur(40px);pointer-events:none;
}
.glow-orb.top-right{top:-1.5rem;right:-1.5rem}
.glow-orb.bottom-left{bottom:-1.5rem;left:-1.5rem}

/* Info Cards */
.info-cards{
  display:grid;grid-template-columns:1fr;gap:1.5rem;
}
@media(min-width:768px){.info-cards{grid-template-columns:repeat(3,1fr)}}

.info-card{
  border-radius:var(--radius-xl);border:1px solid var(--glass-border-soft);
  background:var(--ivory);padding:1.5rem 1.8rem;
  box-shadow:var(--shadow-sm);transition:border-color 0.3s,box-shadow 0.3s,transform 0.3s;
}
.info-card:hover{border-color:var(--sage);box-shadow:var(--shadow-md);transform:translateY(-4px)}

.info-card-icon{
  width:48px;height:48px;border-radius:var(--radius-md);
  background:var(--ivory2);border:1px solid var(--glass-border-soft);
  color:var(--sage);display:flex;align-items:center;justify-content:center;
  margin-bottom:1.2rem;
}
.info-card h2,.info-card h3{
  font-size:1.15rem;font-weight:600;color:var(--text-dark);
  font-family:'Playfair Display','Satoshi',serif;margin-bottom:0.75rem;
}
.info-card p{
  font-size:0.88rem;color:var(--text-soft);line-height:1.7;font-weight:400;
}

/* Quote / Philosophy */
.quote-section{
  padding:4rem 2rem;background:var(--ivory2);
  border-top:1px solid var(--ivory3);border-bottom:1px solid var(--ivory3);
}
.quote-inner{max-width:52rem;margin:0 auto;text-align:center}
.quote-inner blockquote{
  font-size:clamp(1.5rem,3.5vw,2.5rem);font-style:italic;
  font-family:'Playfair Display','Satoshi',serif;
  font-weight:300;line-height:1.4;color:var(--text-dark);padding:0 1rem;
}
.quote-author{margin-top:2rem;text-align:center}
.quote-author .name{
  font-family:'Great Vibes',cursive;font-size:clamp(1.8rem,3vw,2.5rem);
  color:var(--sage);
}
.quote-author .title{
  font-size:0.72rem;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--text-pale);margin-top:0.5rem;
}

/* CTA Banner (story page) */
.cta-banner{
  border-radius:var(--radius-xl);padding:2.5rem;overflow:hidden;
  background:var(--ivory2);border:1px solid rgba(122,157,138,0.2);
  position:relative;box-shadow:var(--shadow-sm);
}
@media(min-width:768px){.cta-banner{padding:3.5rem}}
.cta-banner .cta-glow{
  position:absolute;right:-5rem;bottom:-5rem;
  width:20rem;height:20rem;border-radius:50%;
  background:var(--sage-light);filter:blur(60px);pointer-events:none;
}
.cta-banner-inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr;gap:2rem;
  text-align:center;
}
@media(min-width:1024px){
  .cta-banner-inner{grid-template-columns:1fr auto;text-align:left;align-items:center}
}
.cta-banner h2{
  font-size:clamp(1.5rem,3vw,2.2rem);font-weight:300;line-height:1.2;
  color:var(--text-dark);font-family:'Playfair Display','Satoshi',serif;
}
.cta-banner p{
  font-size:0.92rem;color:var(--text-soft);line-height:1.7;margin-top:1rem;
}
.cta-banner-actions{
  display:flex;flex-direction:column;gap:0.75rem;
  align-items:center;
}
@media(min-width:640px){.cta-banner-actions{flex-direction:row}}

/* =============================================
   COLLECTION / COLLECTIONS PAGES
   ============================================= */
.collection-hero-grid{
  display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center;
}
@media(min-width:1024px){
  .collection-hero-grid{grid-template-columns:1.15fr 0.85fr}
}

.collection-hero-img{
  border-radius:var(--radius-xl);overflow:hidden;
  border:1px solid var(--glass-border-soft);box-shadow:var(--shadow-md);
  background:var(--ivory2);min-height:320px;
}
.collection-hero-img img{width:100%;height:100%;object-fit:cover}

.product-cards{
  display:grid;grid-template-columns:1fr;gap:2rem;
}
@media(min-width:640px){.product-cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1280px){.product-cards{grid-template-columns:repeat(3,1fr)}}

.product-card{
  border-radius:var(--radius-xl);overflow:hidden;
  border:1px solid var(--glass-border-soft);background:var(--ivory);
  box-shadow:var(--shadow-sm);
  transition:box-shadow 0.3s,transform 0.3s;
}
.product-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}
.product-card-img{
  display:block;position:relative;background:var(--ivory2);aspect-ratio:4/5;
  overflow:hidden;
}
.product-card-img img{width:100%;height:100%;object-fit:cover}
.product-card-body{padding:1.5rem}
.product-card-head{
  display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;margin-bottom:0.75rem;
}
.product-card-head h2{
  font-size:1.15rem;font-weight:600;color:var(--text-dark);line-height:1.3;
  font-family:'Playfair Display','Satoshi',serif;
}
.product-card-head .cat{
  font-size:0.6rem;font-weight:700;letter-spacing:0.32em;text-transform:uppercase;
  color:var(--sage);margin-top:0.4rem;
}
.product-card-head .price{font-size:1.1rem;font-weight:800;color:var(--text-dark);white-space:nowrap}
.product-card-head .price s{font-size:0.78rem;font-weight:500;color:var(--text-pale);margin-right:0.3rem}
.product-card-desc{
  font-size:0.88rem;color:var(--text-soft);line-height:1.7;margin-bottom:1.2rem;
}
.product-card-foot{
  display:flex;align-items:center;justify-content:space-between;gap:0.75rem;
}
.product-card-foot .link-view{
  font-size:0.68rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--text-dark);transition:color 0.2s;
}
.product-card-foot .link-view:hover{color:var(--sage)}

/* Collections index cards */
.collections-grid{
  display:grid;grid-template-columns:1fr;gap:2rem;
}
@media(min-width:1024px){.collections-grid{grid-template-columns:repeat(2,1fr)}}

.collection-card{
  border-radius:var(--radius-xl);overflow:hidden;
  border:1px solid var(--glass-border-soft);background:var(--ivory);
  box-shadow:var(--shadow-sm);
}
.collection-card-inner{
  display:grid;grid-template-columns:1fr;
}
@media(min-width:768px){.collection-card-inner{grid-template-columns:1.1fr 0.9fr}}

.collection-card-img{
  min-height:280px;background:var(--ivory2);overflow:hidden;display:block;
}
.collection-card-img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.collection-card-img:hover img{transform:scale(1.05)}

.collection-card-body{
  padding:1.5rem;display:flex;flex-direction:column;justify-content:space-between;gap:1.25rem;
}
@media(min-width:768px){.collection-card-body{padding:1.75rem}}
.collection-card-body .eyebrow{
  font-size:0.65rem;font-weight:700;letter-spacing:0.35em;text-transform:uppercase;
  color:var(--sage);
}
.collection-card-body h2{
  font-size:1.8rem;font-weight:300;color:var(--text-dark);margin-top:0.6rem;
  font-family:'Playfair Display','Satoshi',serif;
}
.collection-card-body .desc{
  font-size:0.88rem;color:var(--text-soft);line-height:1.7;margin-top:0.6rem;
}

.collection-featured{display:flex;flex-direction:column;gap:0.6rem}
.collection-featured-item{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:0.75rem 1rem;border-radius:var(--radius-md);
  border:1px solid var(--glass-border-soft);background:var(--ivory2);
  transition:border-color 0.2s;text-decoration:none;
}
.collection-featured-item:hover{border-color:var(--sage)}
.collection-featured-item .item-name{
  font-size:0.88rem;font-weight:600;color:var(--text-dark);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.collection-featured-item .item-price{
  font-size:0.88rem;font-weight:700;color:var(--text-dark);flex-shrink:0;
}

.collection-card-actions{
  display:flex;align-items:center;gap:0.75rem;padding-top:0.5rem;
}

/* =============================================
   TERMS / PRIVACY PAGES
   ============================================= */
.legal-body{
  padding:3rem 2rem 5rem;
}
@media(min-width:768px){.legal-body{padding:4rem 2rem 5rem}}

.legal-grid{
  max-width:800px;margin:0 auto;
  display:flex;flex-direction:column;gap:1.5rem;
}

.legal-card{
  border-radius:var(--radius-xl);background:var(--ivory);
  border:1px solid var(--glass-border-soft);padding:2rem;
  box-shadow:var(--shadow-sm);
}
@media(min-width:768px){.legal-card{padding:2.5rem}}

.legal-card h2{
  font-size:clamp(1.3rem,2.5vw,1.8rem);font-weight:300;
  color:var(--text-dark);margin-bottom:1.2rem;
  font-family:'Playfair Display','Satoshi',serif;
}
.legal-card-content{display:flex;flex-direction:column;gap:1rem}
.legal-card-content p{
  font-size:0.92rem;color:var(--text-soft);line-height:1.8;font-weight:400;
}

.effective-date{
  font-size:0.68rem;font-weight:700;letter-spacing:0.3em;text-transform:uppercase;
  color:var(--text-pale);margin-top:2rem;
}

/* =============================================
   SECTION SPACING
   ============================================= */
.section-sm{padding:3rem 2rem}
.section-md{padding:4rem 2rem}
@media(min-width:768px){
  .section-sm{padding:3.5rem 3rem}
  .section-md{padding:5rem 3rem}
}

/* =============================================
   REVEAL / ANIMATIONS
   ============================================= */
.reveal-node{opacity:0;transform:translateY(18px);transition:all 0.8s cubic-bezier(0.16,1,0.3,1)}
.revealed{opacity:1;transform:none}

/* =============================================
   TOAST (matching shop/index)
   ============================================= */
.toast{
  position:fixed;bottom:2rem;right:2rem;z-index:9999;
  background:var(--ivory);border:1px solid var(--ivory3);
  border-radius:var(--radius-md);padding:1.2rem 1.6rem;
  backdrop-filter:blur(20px);
  display:flex;align-items:center;gap:1rem;
  transform:translateY(80px);opacity:0;pointer-events:none;
  transition:all 0.4s cubic-bezier(0.16,1,0.3,1);
  box-shadow:var(--shadow-lg);max-width:340px;
}
.toast.show{transform:translateY(0);opacity:1;pointer-events:auto}
.toast-icon{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:var(--sage-light);border:1px solid rgba(125,181,160,0.3);
  display:flex;align-items:center;justify-content:center;
}
.toast-icon[data-type="error"]{background:var(--rose-light);border-color:rgba(201,137,122,0.3)}
.toast-icon[data-type="error"] svg{stroke:var(--rose)}
.toast p:first-child{font-size:0.95rem;font-weight:700;color:var(--text-dark)}
.toast p:last-child{font-size:0.85rem;font-weight:500;color:var(--text-soft);margin-top:2px}

/* =============================================
   CART SIDEBAR (matching shop/index)
   ============================================= */
#cart-overlay{
  position:fixed;inset:0;background:rgba(20,15,10,0.4);z-index:10000;
  backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity 0.4s;
}
#cart-overlay.show{opacity:1;pointer-events:auto}
#cart-sidebar{
  position:fixed;top:0;right:0;bottom:0;width:100%;max-width:480px;
  background:var(--ivory);z-index:10010;
  transform:translateX(100%);transition:transform 0.4s cubic-bezier(0.16,1,0.3,1);
  box-shadow:var(--shadow-lg);border-left:1px solid var(--ivory3);
  display:flex;flex-direction:column;
}
#cart-sidebar.show{transform:translateX(0)}
.cs-head{display:flex;align-items:center;justify-content:space-between;padding:1.5rem;border-bottom:1px solid var(--ivory3)}
.cs-head h2{font-size:1.5rem;font-weight:300;font-family:serif;color:var(--text-dark)}
.cs-close{
  width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--ivory2);color:var(--text-mid);transition:var(--transition);cursor:pointer;
}
.cs-close:hover{background:var(--ivory3);color:var(--text-dark)}
.cs-body{flex:1;overflow-y:auto;padding:1.5rem;display:flex;flex-direction:column;gap:1.5rem}
.cs-empty{margin:auto;text-align:center;color:var(--text-mid)}
.cs-empty svg{width:48px;height:48px;stroke-width:1.5;margin:0 auto 1.5rem;color:var(--text-pale)}
.c-item{display:flex;gap:1rem;background:var(--ivory2);padding:1rem;border-radius:var(--radius-md);border:1px solid var(--ivory3)}
.c-item-img{width:80px;height:100px;border-radius:var(--radius-sm);object-fit:cover;background:white;flex-shrink:0}
.c-item-info{flex:1;display:flex;flex-direction:column;justify-content:center}
.c-item-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:0.5rem}
.c-item-name{font-size:1rem;font-weight:700;color:var(--text-dark);line-height:1.2}
.c-item-del{color:var(--text-pale);transition:color 0.2s;cursor:pointer}
.c-item-del:hover{color:var(--rose)}
.c-item-price{font-weight:800;color:var(--text-dark);font-size:1.1rem;margin-bottom:0.5rem}
.c-qty-wrap{display:inline-flex;align-items:center;background:var(--ivory);border:1px solid var(--glass-border-soft);border-radius:50px;overflow:hidden}
.c-qty-btn{padding:0.3rem 0.8rem;font-weight:800;color:var(--text-mid);transition:background 0.2s;cursor:pointer}
.c-qty-btn:hover{background:var(--ivory3);color:var(--text-dark)}
.c-qty-val{padding:0 0.5rem;font-weight:700;font-size:0.85rem;color:var(--text-dark)}
.cs-foot{padding:1.5rem;border-top:1px solid var(--ivory3);background:var(--ivory2)}
.cs-sub{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.cs-sub-lbl{font-size:0.85rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-mid)}
.cs-sub-val{font-size:1.5rem;font-weight:800;font-family:serif;color:var(--text-dark)}

/* =============================================
   COMMISSION MODAL
   ============================================= */
#comm-overlay{
  position:fixed;inset:0;background:rgba(20,15,10,0.6);z-index:10000;
  backdrop-filter:blur(12px);opacity:0;pointer-events:none;transition:opacity 0.4s;
  display:flex;align-items:center;justify-content:center;padding:1.5rem;
}
#comm-overlay.show{opacity:1;pointer-events:auto}
#comm-modal{
  background:var(--ivory);border-radius:var(--radius-lg);width:100%;max-width:600px;
  max-height:90vh;overflow-y:auto;position:relative;
  transform:scale(0.95);transition:transform 0.4s cubic-bezier(0.16,1,0.3,1);
  box-shadow:var(--shadow-lg);border:1px solid var(--ivory3);padding:3rem;
}
#comm-overlay.show #comm-modal{transform:scale(1)}
.comm-close{
  position:absolute;top:1.5rem;right:1.5rem;width:40px;height:40px;border-radius:50%;
  background:var(--ivory2);display:flex;align-items:center;justify-content:center;
  transition:var(--transition);color:var(--text-mid);cursor:pointer;
}
.comm-close:hover{background:var(--ivory3);color:var(--text-dark)}
.comm-title{font-size:2rem;font-weight:900;line-height:1.1;margin-bottom:0.5rem;color:var(--text-dark);letter-spacing:-0.03em}
.comm-sub{font-size:1rem;color:var(--text-mid);margin-bottom:2rem}
.comm-field{margin-bottom:1.5rem}
.comm-label{display:block;font-size:0.85rem;font-weight:700;color:var(--text-dark);margin-bottom:0.5rem}
.comm-input{
  width:100%;padding:1rem;border-radius:var(--radius-sm);
  background:var(--ivory2);border:1px solid var(--ivory3);
  font-family:inherit;color:var(--text-dark);outline:none;transition:var(--transition);
}
.comm-input:focus{border-color:var(--sage);background:var(--ivory);box-shadow:var(--shadow-sm)}
textarea.comm-input{resize:vertical;min-height:100px}

/* =============================================
   PAGE SHARE MODAL — vanilla CSS
   ============================================= */
#page-share-modal{
  position:fixed;inset:0;z-index:9500;
  display:none;align-items:center;justify-content:center;padding:1.5rem;
  opacity:0;transition:opacity 0.3s;
}
#page-share-modal.psh-open{display:flex;opacity:1}
#page-share-modal.psh-closing{opacity:0}
.psh-backdrop{position:absolute;inset:0;background:rgba(20,15,10,0.6);backdrop-filter:blur(20px);cursor:pointer}
.psh-inner{
  position:relative;width:100%;max-width:380px;
  background:var(--ivory);border:1px solid var(--glass-border-soft);
  border-radius:var(--radius-xl);padding:2.5rem 2rem;
  box-shadow:var(--shadow-xl);text-align:center;
  transform:scale(0.95);transition:transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
#page-share-modal.psh-open .psh-inner{transform:scale(1)}
.psh-close{
  position:absolute;top:1rem;right:1rem;width:36px;height:36px;border-radius:50%;
  background:var(--ivory2);display:flex;align-items:center;justify-content:center;
  color:var(--text-mid);transition:var(--transition);cursor:pointer;
}
.psh-close:hover{background:var(--ivory3);color:var(--text-dark)}
.psh-img-shell{
  width:80px;height:80px;border-radius:var(--radius-md);overflow:hidden;
  background:var(--ivory2);margin:0 auto 1.5rem;border:1px solid var(--glass-border-soft);
}
.psh-img-shell img{width:100%;height:100%;object-fit:cover}
.psh-title{font-size:1.5rem;font-weight:900;color:var(--text-dark);margin-bottom:0.5rem;letter-spacing:-0.02em}
.psh-name{font-size:0.7rem;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:var(--sage);margin-bottom:2rem}
.psh-buttons{display:flex;justify-content:center;gap:0.75rem;flex-wrap:wrap}
.psh-btn{
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--ivory2);color:var(--text-dark);
  border:1px solid var(--glass-border-soft);
  transition:var(--transition);cursor:pointer;text-decoration:none;
}
.psh-btn:hover{background:var(--sage);color:white;border-color:var(--sage);transform:translateY(-2px)}
.psh-btn-wa{background:rgba(37,211,102,0.08);color:#25D366}
.psh-btn-wa:hover{background:#25D366;color:white;border-color:#25D366}

/* =============================================
   RESPONSIVE TWEAKS
   ============================================= */
@media(max-width:640px){
  .page-hero{padding:7rem 1.5rem 3rem}
  .page-hero h1{font-size:clamp(1.8rem,6vw,2.4rem)}
  #comm-modal{padding:1.8rem}
}
/* * MODULAR NAVIGATION CSS 
 * Make sure your root CSS variables (--glass-white, --sage, etc.) 
 * are loaded globally in your main style.css or index.php before this file. 
 */

#mainNav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0 1.5rem;
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 68px;
    max-width: 1360px;
    margin: 0 auto;
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    background: var(--glass-white);
    border: 1px solid var(--glass-border-soft);
    border-radius: 100px;
    padding: 0 0.5rem 0 1.8rem;
    margin-top: 18px;
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: var(--transition);
}

.nav-inner.scrolled {
    background: var(--glass-white-hover);
    box-shadow: var(--shadow-lg);
    margin-top: 12px;
}

.nav-logo img {
    height: 54px;
    width: auto;
    transition: var(--transition);
}

/* Desktop Links */
.nav-links {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

.nav-links a,
.nav-links button.commission-btn {
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--text-mid);
    transition: color 0.2s;
    position: relative;
    background: transparent;
    border: none;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--sage);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s;
}

/* Active Page & Hover Styling */
.nav-links a:hover,
.nav-links button.commission-btn:hover,
.nav-links a.active,
.nav-links a:hover .account-icon {
    color: var(--text-dark);
}

.nav-links a:hover::after,
.nav-links a.active::after {
    transform: scaleX(1);
}

/* Actions & Cart */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.nav-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--ivory);
    border: 1px solid var(--glass-border-soft);
    border-radius: 50px;
    padding: 0.5rem 1.2rem;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
    cursor: text;
}

.nav-search:focus-within {
    background: var(--ivory2);
    border-color: var(--sage);
    box-shadow: var(--shadow-md);
}

.nav-search input {
    border: none;
    background: transparent;
    outline: none;
    width: 90px;
    font-family: 'Satoshi', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-dark);
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-search input::placeholder {
    color: var(--text-pale);
    font-weight: 400;
}

.nav-search input:focus {
    width: 180px;
}

.nav-cart {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 1.4rem;
    background: var(--text-dark);
    border: 1px solid transparent;
    border-radius: 50px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ivory);
    transition: var(--transition);
    box-shadow: var(--shadow-md);
    cursor: pointer;
}

.nav-cart:hover {
    background: var(--sage);
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

.cart-count {
    background: var(--rose);
    color: white;
    font-size: 0.6rem;
    font-weight: 800;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.cart-count.hidden {
    display: none !important;
}

/* Mobile Hamburger */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
    background: var(--ivory);
    border: 1px solid var(--glass-border-soft);
    border-radius: 12px;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
    z-index: 1001;
    position: relative;
}

.hamburger span {
    width: 22px;
    height: 2px;
    background: var(--text-dark);
    transition: 0.3s ease;
    transform-origin: center;
    display: block;
    border-radius: 2px;
}

.hamburger.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.hamburger.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Menu Panel */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 999;
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    background: rgba(250, 247, 242, 0.92);
    padding: 120px 2rem 3rem;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

[data-theme="dark"] .mobile-menu {
    background: rgba(30, 30, 30, 0.95);
}

.mobile-menu.open {
    opacity: 1;
    pointer-events: all;
}

.mobile-menu-inner {
    max-width: 500px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
    transform: translateY(20px);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-menu.open .mobile-menu-inner {
    transform: translateY(0);
}

.mob-search-wrap {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: var(--ivory2);
    border: 1px solid var(--glass-border-soft);
    border-radius: 50px;
    padding: 0.9rem 1.4rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 3rem;
}

.mob-search-wrap input {
    border: none;
    background: transparent;
    outline: none;
    width: 100%;
    font-family: 'Satoshi', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-dark);
}

.mob-search-wrap input::placeholder {
    color: var(--text-pale);
    font-weight: 400;
}

.mobile-menu a.mob-link,
.mobile-menu button.mob-link {
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-mid);
    padding: 1rem 0;
    border-bottom: 1px solid var(--glass-border-soft);
    transition: color 0.2s, transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
}

.mobile-menu a.mob-link:hover,
.mobile-menu button.mob-link:hover,
.mobile-menu a.mob-link.active {
    color: var(--text-dark);
    transform: translateX(8px);
}

.mobile-menu a.mob-link::after,
.mobile-menu button.mob-link::after {
    content: '→';
    font-size: 1.4rem;
    opacity: 0.3;
    transition: opacity 0.2s, transform 0.2s;
}

.mobile-menu a.mob-link:hover::after,
.mobile-menu button.mob-link:hover::after,
.mobile-menu a.mob-link.active::after {
    opacity: 1;
    transform: translateX(4px);
}

.mobile-menu-cta {
    margin-top: auto;
    padding: 1.2rem 2rem;
    background: var(--text-dark);
    color: var(--ivory);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 50px;
    text-align: center;
    box-shadow: var(--shadow-lg);
    display: block;
}

/* Responsiveness adjustments specifically for nav */
@media (max-width: 1100px) {
    .nav-search input {
        width: 0;
        padding: 0;
    }

    .nav-search:focus-within input {
        width: 140px;
        padding-left: 0.5rem;
    }
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
    }

    .nav-search {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    #mainNav {
        padding: 0 0.8rem;
    }

    .nav-inner {
        padding: 0 0.8rem 0 1.2rem;
        margin-top: 10px;
        height: 62px;
        border-radius: 50px;
    }

    .nav-logo img {
        height: 42px;
    }
}
/* FOOTER CSS */
footer {
    background: #0d0d0d;
    padding: 5.5rem 2rem 2.5rem;
    color: rgba(255, 255, 255, 0.7);
}

.footer-inner {
    max-width: 1320px;
    margin: 0 auto;
}

.f-top {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 5rem;
    padding-bottom: 3.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.f-brand p {
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.9;
    max-width: 320px;
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.5);
}

.f-social {
    display: flex;
    gap: 0.6rem;
}

.soc {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    color: rgba(255, 255, 255, 0.6);
}

.soc:hover {
    background: var(--sage);
    border-color: var(--sage);
    color: white;
    transform: translateY(-3px);
}

.f-col h4 {
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 1.5rem;
}

.f-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.f-col ul a {
    font-size: 0.88rem;
    font-weight: 400;
    transition: color 0.2s;
    color: rgba(255, 255, 255, 0.6);
}

.f-col ul a:hover {
    color: white;
}

.f-bot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.f-bot p,
.f-bot a {
    font-size: 0.8rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.3);
}

.f-bot a {
    transition: color 0.2s;
}

.f-bot a:hover {
    color: rgba(255, 255, 255, 0.7);
}

.f-bot-links {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

/* THEME TOGGLE (Global Floating Action Button) */
.theme-toggle {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 9000;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--glass-white);
    border: 1px solid var(--glass-border-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    color: var(--text-mid);
    backdrop-filter: blur(12px);
    cursor: pointer;
}

.theme-toggle:hover {
    transform: scale(1.08);
    color: var(--sage);
}

.theme-toggle .icon-sun {
    display: none;
}

.theme-toggle .icon-moon {
    display: block;
}

[data-theme="dark"] .theme-toggle .icon-sun {
    display: block;
}

[data-theme="dark"] .theme-toggle .icon-moon {
    display: none;
}

/* Footer & Global Elements Responsiveness */
@media(max-width: 1100px) {
    .f-top {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }

    .f-brand {
        grid-column: 1 / -1;
    }
}

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

    .f-brand {
        grid-column: auto;
    }

    .f-bot {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}