@charset "utf-8";
/* CSS Document */

:root {
  --forest: #1d3028;
  --charcoal: #1b1b19;
  --ivory: #f5f2ea;
  --sand: #d8cebd;
  --olive: #68705a;
  --accent: #b76e3c;
  --white: #ffffff;

  --line: rgba(27, 27, 25, 0.14);
  --line-soft: rgba(27, 27, 25, 0.08);
  --muted: rgba(27, 27, 25, 0.56);
  --shadow-soft: 0 18px 50px -30px rgba(27, 27, 25, 0.4);

  --font-display: "Instrument Serif", "Cormorant Garamond", Georgia, serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;

  --gutter: 4.5vw;
  --max: 1440px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
/*----------------
RESET CSS
-----------------*/
body {
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	padding:0;
	margin:0;
	background: var(--ivory);
	color: var(--charcoal);
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.65;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}
div, ul, h1, h2, h3, h4, h5, li, p, img, form, input, textarea {margin:0;padding:0;}
header, section, footer, aside, nav, main, article, figure {display: block;}
table, tr, td {border:0;}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover {}
li {list-style:none;}
*{box-sizing:border-box;}
.img-full{max-width:100%;}
.clearall{
	clear:both;
	font-size:1px;
	line-height:1px;
	height:1px;
	}
.forMob,.forTab{ display:none;}


button { font: inherit; color: inherit; cursor: pointer; }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 1.02;
	margin: 0;
	text-transform: capitalize;
}

p { margin: 0; }

::selection { background: var(--accent); color: var(--white); }

.eyebrow {
  font-size: 10px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted);
}

.eyebrow--light { color: rgba(245, 242, 234, 0.72); }

.lede { font-size: 16px; color: var(--muted); line-height: 26px;}

.h-xl { font-size: clamp(2.9rem, 6.4vw, 6.6rem); }
.h-lg { font-size: clamp(34px, 4.6vw, 70px); }
.h-md { font-size: clamp(1.8rem, 2.6vw, 2.7rem); }
.h-sm { font-size: 1.3rem; }

.italic { font-style: italic; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* 3. LAYOUT ------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 20px;
}

.section { padding: clamp(50px, 9vw, 140px) 0; }
.section--tight { padding: clamp(48px, 5vw, 80px) 0; }
.section--dark { background: var(--forest); color: var(--ivory); }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

.stack-sm > * + * { margin-top: 15px; }
.stack-md > * + * { margin-top: 22px; }
.stack-lg > * + * { margin-top: 38px; }

/* 5. COMPONENTS --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 15px 0px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid var(--charcoal);
  background: transparent;
  color: var(--charcoal);
  transition: background 0.4s var(--ease), color 0.4s var(--ease),
    border-color 0.4s var(--ease);
	width: 300px;
}

.btn:hover { background: var(--charcoal); color: var(--ivory); }

.btn--accent { background: var(--accent); border-color: var(--accent); color: var(--white); }
.btn--accent:hover { background: var(--charcoal); border-color: var(--charcoal); }

.btn--ghost-light { border-color: rgba(245, 242, 234, 0.6); color: var(--ivory); }
.btn--ghost-light:hover { background: var(--ivory); color: var(--charcoal); border-color: var(--ivory); }

.btn--block { width: 100%; }
.btn--lg { padding: 18px 0;}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.link-arrow span:last-child { transition: transform 0.4s var(--ease); }
.link-arrow:hover span:last-child { transform: translateX(7px); }


/********************************/
.age-pop-overlay {
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0
}
.pop-up-bg {
	    width: 100%;
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    margin: 0px;
    padding: 0px;
    z-index: 9999600;
    border: 0px;
    opacity: 0.3;
    background: #000;
}
.pop-up-bg-in {
	position: fixed;
    bottom: 0px;
    padding: 0px;
    margin: 0px;
    border: 0px;
    background:#161c1a;
    transition: left 1s ease 0s;
    z-index: 10000010;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
    text-align: center;
    display: flex;
    justify-content: center;
}
.pop-up-left {
	width: 100% ;
	height: 100% ;
	position: fixed ;
	left: 0px ;
	top: 0px ;
	border: 0px;
	background-color: rgb(0, 0, 0) ;
	display: none ;
	opacity: 0.8 ;
	z-index: 10000001 ;
}
.pop-up-left-txt {
	font-size: 14px;
    box-sizing: initial;
    overflow-wrap: break-word;
    transition: left 1s ease 0s;
    display: flex;
    text-align: left;
    padding: 20px;
    line-height: 24px;
    color: #fff;
    float: left;
    width: 100%;
    justify-content: center;
    align-items: center;
    max-width: 1000px;
	flex-wrap: wrap;
}
.pop-innr {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 200px);
}
.pop-btn {
    display: inline-block;
    vertical-align: middle;
    width: 200px;
}
.pop-up-left-txt span{
    font-size: 24px;
    margin-bottom: 15px;
    display: block;
	font-family: var(--font-display);
	letter-spacing:1px;
	}
.pop-up-left-txt a{ text-decoration:underline;     display: inline-block; color: #fff}
.yes-btn, .no-btn {
    cursor: pointer;
    margin-top: 10px;
    height: 40px;
    color: #fff;
    font-size: 16px;
    text-align: center;
    font-weight: 700;
    outline: none;
    box-shadow: none;
    background: #ea580c;
    appearance: none;
    transition: left 1s ease 0s;
    display: inline-block;
    padding: 10px 20px;
    line-height: 16px;
    border-radius: 5px;
    border: none;
}
.no-btn {
    background: #333;
}
.yes-btn {
	
}

/* 4. HEADER ------------------------------------------------------------- */
.site-header {
  inset: 0 0 auto 0;
  z-index: 60;
  transition: background 0.45s var(--ease), color 0.45s var(--ease),
    border-color 0.45s var(--ease), padding 0.45s var(--ease);
  border-bottom: 1px solid transparent;
  padding: 22px 0;
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 40px;
  justify-content: space-between;
}

.brand {
    max-width: 190px;
}

.brand small {
  display: block;
  font-family: var(--font-body);
  font-size: 8px;
  letter-spacing: 0.4em;
  opacity: 0.6;
  margin-top: 2px;
}

.nav { display: flex; gap: 30px; margin-left: auto; }

.nav a {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  position: relative;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}

.nav a:hover::after,
.nav a[aria-current="page"]::after { transform: scaleX(1);}

.utility { /*display: flex; align-items: center; gap: 20px;*/ }

.utility button,
.utility a {
	display: flex;
	gap: 7px;
	background: none;
	border: 0;
	padding: 0;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.85;
	transition: opacity 0.3s var(--ease);
	flex-wrap: wrap;
	align-items: center;
	flex-direction: column;
}

.utility button:hover,
.utility a:hover { opacity: 1; }

.icon { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.2; }

.cart-count {
  font-variant-numeric: tabular-nums;
  border: 1px solid currentColor;
  border-radius: 50%;
  width: 18px; height: 18px;
  display: grid; place-items: center;
  font-size: 9px;
  letter-spacing: 0;
}

.burger { display: none; }

/* transparent over hero */
.site-header--over { color: var(--ivory); }
.site-header--solid {
  background: rgba(245, 242, 234, 0.7);
  backdrop-filter: saturate(140%) blur(10px);
  color: var(--charcoal);
  border-bottom-color: var(--line-soft);
  padding: 15px 0;
  position: fixed;
}

.header-spacer { height: 82px; }

/* mobile drawer nav */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--forest);
  color: var(--ivory);
  padding: 30px var(--gutter);
  transform: translateY(-100%);
  transition: transform 0.55s var(--ease);
  display: flex;
  flex-direction: column;
}

.mobile-nav.is-open { transform: none; }
.mobile-nav a { font-family: var(--font-display); font-size: 2rem; padding: 10px 0; }
.mobile-nav__close { align-self: flex-end; background: none; border: 0; font-size: 11px; letter-spacing: 0.2em; }
.bar1, .bar2, .bar3 {
	width: 24px;
	height: 2px;
	background-color: #000;
	transition: 0.4s;
	-webkit-border-radius: 2px 2px 2px 2px;
	border-radius: 2px 2px 2px 2px;
	}

/* hero */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--ivory);
}

.hero__media { position: absolute; inset: -8% 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20, 24, 20, 0.5) 0%, rgba(20, 24, 20, 0.12) 42%, rgba(20, 24, 20, 0.72) 100%);
}

.hero__inner { position: relative; z-index: 2; width: 100%; padding: clamp(50px, 12vw, 180px) 0; }
.hero__title {font-size: clamp(44px, 5.6vw, 88px); max-width: 700px; text-transform: capitalize; line-height: clamp(52px, 6.4vw, 96px);}
.hero__copy { color: rgb(255 255 255); max-width: 660px; font-size: 16px; font-weight: 400; line-height: 26px;}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top:40px;}

.hero__scroll {
  position: absolute; right: var(--gutter); bottom: 40px; z-index: 3;
  display: flex; align-items: center; gap: 12px;
  font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase;
  color: rgba(245, 242, 234, 0.7);
}
.hero__scroll i {
  display: block; width: 1px; height: 46px;
  background: linear-gradient(rgba(245,242,234,0.7), rgba(245,242,234,0));
  animation: drift 2.4s var(--ease) infinite;
}
@keyframes drift { 0%,100% { transform: scaleY(0.4); opacity: 0.4; } 50% { transform: scaleY(1); opacity: 1; } }

/* brand intro — asymmetric */
.intro { 
	display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(30px, 5vw, 80px);
    align-items: center; 
}
.intro__figure { position: relative; }
.intro__figure img { width: 100%; aspect-ratio: 4/4; object-fit: cover; }
.intro__inset {
	position: absolute; 
	right: -14%; 
	bottom: -8%;
	width: 46%; 
	box-shadow: var(--shadow-soft);
}
.intro__inset img { aspect-ratio: 4/3; }
.intro__title { font-size: clamp(32px, 3.7vw, 58px); text-transform: capitalize; line-height: clamp(42px, 4vw, 68px); }

.counter { display: flex; flex-direction: column; gap: 0; margin-top: 42px; border-top: 1px solid var(--line); }
.counter div {
	display: flex;
	align-items: baseline;
	gap: 18px;
	padding: 15px 0;
	border-bottom: 1px solid var(--line);
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
}
.counter span:first-child { color: var(--accent); font-variant-numeric: tabular-nums; }

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

.cat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(180px, auto);
  gap: 20px;
}

.tile {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  color: var(--ivory);
  min-height: 300px;
}

.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,24,20,0.05), rgba(20,24,20,0.78)); }
.tile:hover img { transform: scale(1.05); }
.tile__body { position: relative; z-index: 2; padding: 26px; display: flex; flex-direction: column; gap: 8px; }
.tile__title { font-family: var(--font-display); font-size: clamp(1.4rem, 2vw, 2rem); }
.tile__desc { font-size: 12px; color: rgba(245,242,234,0.75); max-width: 34ch; }

.tile--a { grid-column: span 4; min-height: 460px; }
.tile--b { grid-column: span 2; min-height: 460px; }
.tile--c { grid-column: span 2; }
.tile--d { grid-column: span 2; }
.tile--e { grid-column: span 2; }

/* rail */
.rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(340px, 1fr);
	gap: 28px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 10px;
	scrollbar-width: thin;
	overflow-y: hidden;
}

.rail > * { scroll-snap-align: start; }

/* product card */
.product-card { position: relative; display: flex; flex-direction: column; }

.product-card__media {
  position: relative;
  overflow: hidden;
  background: #efeade;
  aspect-ratio: 4 / 4;
  padding:20px;
}

.product-card__media img {
  width: 100%; 
  transition: transform 1.1s var(--ease), opacity 0.6s var(--ease);
}

.product-card:hover .product-card__media img { transform: scale(1.055); }

.product-card__wish {
	position: absolute;
	top: 12px; right: 12px;
	width: 34px; height: 34px;
	display: grid; place-items: center;
	border: 1px solid var(--line);
	background: rgba(245, 242, 234, 0.8);
	transition: background 0.3s var(--ease), color 0.3s var(--ease);
	text-align: center;
}

.product-card__wish:hover,
.product-card__wish.is-active { background: var(--charcoal); color: var(--ivory); }

.product-card__quick {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 13px;
	background: rgba(27, 27, 25, 0.9);
	color: var(--ivory);
	font-size: 10px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	border: 0;
	transform: translateY(101%);
	transition: transform 0.45s var(--ease);
	text-align:center;
}

.product-card:hover .product-card__quick,
.product-card:focus-within .product-card__quick { transform: none; }

.product-card__body {
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.product-card__name { font-family: var(--font-display); font-size: 22px; line-height: 30px;}
.product-card__desc {font-size: 15px; color: var(--muted); line-height: 24px;}
.product-card__price {font-size: 18px; letter-spacing: 1px; margin-top: 5px;}
.product-card__pack { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--olive); }

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 46px 28px;
}

.product-grid.is-list { grid-template-columns: 1fr; gap: 0; }
.product-grid.is-list .product-card {
  flex-direction: row;
  gap: 30px;
  align-items: center;
  border-bottom: 1px solid var(--line-soft);
  padding: 22px 0;
}
.product-grid.is-list .product-card__media { width: 140px; flex: 0 0 140px; aspect-ratio: 1; }
.product-grid.is-list .product-card__body { padding: 0; }
.product-grid.is-list .product-card__quick { position: static; transform: none; background: none; color: var(--charcoal); text-align: left; padding: 8px 0 0; text-decoration: underline; }

/* ritual */
.ritual { position: relative; padding: 80px 0; display: flex; align-items: center; color: var(--ivory); overflow: hidden; }
.ritual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ritual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,20,17,0.72), rgba(15,20,17,0.18)); }
.ritual__inner { position: relative; z-index: 2; max-width: 750px; padding: 80px 0;}
.ritual__title { font-size: clamp(36px, 5vw, 72px); line-height: clamp(46px, 5vw, 80px);}

/* principles */
.principles { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(30px, 5vw, 80px); }
.principle-list { border-top: 1px solid var(--line); }
.principle {
	display: grid;
	grid-template-columns: 40px 1fr 2fr;
	gap: 24px;
	padding: 26px 0;
	border-bottom: 1px solid var(--line);
	align-items: center;
}
.principle svg { width: 24px; height: 24px; stroke: var(--accent); fill: none; stroke-width: 1.1; }
.principle h3 { font-size: 22px; line-height: 30px;}
.principle p { font-size: 16px; color: var(--muted); line-height: 26px; }

.strip { height: clamp(240px, 34vw, 460px); overflow: hidden; }
.strip img { width: 100%; height: 100%; object-fit: cover; }

/* page head */
.page-head { padding: clamp(40px, 6vw, 60px) 0 clamp(40px, 6vw, 60px); border-top: 1px solid var(--line);}
.page-head h1 {font-size: clamp(40px, 5.4vw, 60px); line-height: clamp(40px, 5.4vw, 60px); }
.innr-head{    display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;}
.shop-pg-head{ padding:40px 0; border-bottom: 1px solid var(--line);}

/* shop toolbar */
.toolbar {
	display: grid;
	grid-template-columns: 1fr repeat(3, 1fr) auto;
	gap: 16px;
	align-items: end;
	padding: 24px 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	margin-bottom: 46px;
}

.field {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--line);
    padding: 9px 14px;
    background: transparent;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
	justify-content: space-between;
}
.field select, .field input {
	border: 0;
	background: none;
	outline: none;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border-left: 1px solid var(--line);
	padding-left: 20px;
}

.view-toggle { display: flex; gap: 0; border: 1px solid var(--line); }
.view-toggle button { padding: 9px 14px; background: none; border: 0; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; }
.view-toggle button.is-active { background: var(--charcoal); color: var(--ivory); }

.result-count { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 22px; }


/* footer */
.site-footer {    
	background: var(--forest);
    color: var(--ivory);
    padding: clamp(60px, 7vw, 70px) 0 30px;
    display: inline-block;
    width: 100%;
}
.site-footer a:hover { color: var(--sand); }

.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.6fr;
	gap: 50px;
}
.footer-grid .brand img{
    filter: brightness(0) invert(1);
	max-width:200px;
}

.footer-links { display: flex; flex-direction: column; gap: 11px; font-size: 13px; }
.footer-title { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(245,242,234,0.55); margin-bottom: 20px; }

.newsletter-form { display: flex; border-bottom: 1px solid rgba(245, 242, 234, 0.4); }
.newsletter-form input {
  flex: 1; background: none; border: 0; color: var(--ivory);
  font: inherit; font-size: 14px; padding: 12px 0;
}
.newsletter-form input::placeholder { color: rgba(245, 242, 234, 0.45); }
.newsletter-form input:focus { outline: none; }
.newsletter-form button {
  background: none; border: 0; color: var(--ivory);
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
}

.socials { display: flex; gap: 16px; margin-top: 26px; }
.socials a { width: 34px; height: 34px; border: 1px solid rgba(245,242,234,0.3); display: grid; place-items: center; }
.socials a:hover { background: rgba(245,242,234,0.12); }

.footer-base {
  margin-top: 60px;
  padding-top: 22px;
  border-top: 1px solid rgba(245, 242, 234, 0.16);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(245, 242, 234, 0.55);
}
	
/* ---------- Page banner ---------- */
.pbanner{position: relative; margin-top: 0; padding: 70px 0; overflow: hidden; color: #fff; display: inline-block; width: 100%;}
.pbanner img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.pbanner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,32,24,.72),rgba(20,32,24,.82));}
.pbanner .wrap{position:relative;z-index:2;}
.pbanner p{color:rgba(255,255,255,.78);margin-top:16px; z-index: 1; position: relative;}
.pbanner h1{z-index: 1; position: relative;}
.crumbs{ font-size: 14px; color: rgba(255, 255, 255, .6); margin-bottom: 16px; z-index: 1; position: relative;}

.crumbs a:hover{color:#fff;}
/*====================
CONTACT_SECTION
==========================*/
.contact-sec {
	float: left;
	width: 100%;
	padding: 60px 0;
	border-top: 1px solid var(--line);
	}
.cont-image{
    border-radius: 10px;
	}	
ul.contact-list{
    float: left;
    width: 49%;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 0;
    row-gap:25px;
    column-gap: 10px;
	}
ul.contact-list li{
	float: left;
    width: 100%;
    text-align: left;
    padding: 0 0 0 0px;
	position:relative;
	}
ul.contact-list li:last-child{ border:none;}	
ul.contact-list li img{
	    position: absolute;
    left: 0;
    top: 6px;
    filter: hue-rotate(131deg);
	display:none;
	}
ul.contact-list li p{
	float:left;
	width:100%;
	font-size:16px;
	line-height:22px;
	color:#4b4d4a;
	font-weight:300;
	}				
ul.contact-list li p span{
	    float: left;
    width: 100%;
    font-size: 22px;
    line-height: 32px;
    color: #000000;
    margin: 0px 0 5px;
    font-family: var(--font-display);
	}
.cntct-form{
	display:inline-block;
	vertical-align:middle;
	width:48%;
	background:#f0f1f5;
	padding:30px 75px 45px;
	text-align:center;
	margin-top:70px;
	}
.msgbx-txt {
    float: left;
    width: 100%;
    font-size: 36px;
    line-height: 36px;
    color: #444444;
    padding-bottom: 15px;
	font-weight:600;		
	}
.msg-frmfild{
	float:left;
	width:100%;
	height:55px;
	border:1px solid #cccccc;
	padding:5px;
	margin-top:10px;
	background:#fff;
	text-align:left;
	position:relative;
	}
.msg-frmfild input,.msg-frmfild textarea{
	float:left;
	width:100%;
	height:100%;
	font-size:16px;
	color:#555555;
	outline:none;
	border:none;
	padding-left:10px;
	font-family: inherit;
	font-weight:300;
	}
.msg-areafild{
	height:100%;
	min-height:110px;
	padding-top:15px;
	}
.msg-frmfild textarea{ 
	height:100%;
	min-height:110px;
	resize:none;
	}
.submit{
	margin-top: 25px;
    outline: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
	}	
/*====================
SHOP_SECTION
==========================*/
.shop-section {
    float: left;
    width: 100%;
    padding: 50px 0 50px;
    background: #fff;
}
ul.shop-prdcts-list {
    float: left;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin-top: 50px;
    row-gap: 10px;
}
ul.shop-prdcts-list li {
    float: left;
    width: 24%;
    padding: 20px 0 0;
}

.shop-prod{
	display:block;
	margin:0 auto;
	max-width:250px;
	width:100%;
	}
ul.shop-prdcts-list li span{
	float: left;
    width: 100%;
    font-size: 18px;
    line-height: 27px;
    color: #444444;
    font-weight: 600;
}
	
/*ul.shop-prdcts-list li p{
	float:left;
	width:100%;
	font-size:16px;
	line-height:22px;
	color:#4b4d4a;
	margin-top:10px;
	}*/
.shop-btn-strip{
	padding:35px 0;
	border-top:1px solid #f0f1f5;
	}

a.learn-more{
	display:inline-block;
	vertical-align:middle;
	font-size:16px;
	font-weight:500;
	color:#ef6623;
	line-height:24px;
	border-bottom:2px solid #ef6623;
	margin-top:5px;
	}
a.learn-more2{
	display: inline-block;
	vertical-align:middle;
    font-size: 17px;
    width: 100%;
    font-weight: 500;
    max-width: 190px;
    color: #ef6623;
    line-height:40px;
    border: 1px solid #ef6623;
    margin-top: 10px;
	}
.shop-prc{
    float: left;
    width: 100%;
    margin: 6px 0 0px 0px;
    font-family: var(--font-display);
    font-size: 1.4rem;
    line-height: 1.6;
    font-weight: 700;
    color: var(--forest-700);
	}
.shop-prc small{
	color:#2d2d2d;
	position:relative;
	font-size:24px;
	margin-right:10px;
	}
.shop-prc small img{
	position:absolute;
	width:100%;
	left:0;
	top:0;
	}
.shop-qnty{
	width:30px !important;
	height:35px !important;
	}
.shop-value{
	width:50px !important;
	height:35px !important; 
	}
.shop-sec-qtDv{
	margin-bottom:10px;
	}

/*===========================================
PRODUCT DETAILS PAGE
==============================================*/
.prdcts-details-s1{
	display: inline-block;
    width: 100%;
    padding: 80px 0 0;
    background: var(--grad-earth);
    vertical-align: top;
}
.prdcts-mid{
	float: left;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(34px, 5vw, 66px);
    align-items: start;
	}
.prodSlider-Left{
	float: left;
	background: #fff;
	padding: 20px 20px;
	border-radius: var(--r-xl);
	box-shadow: var(--sh-md);
	position: sticky;
	top: 100px;
}
.prodDetls-Rght{
	float: right;
    text-align: left;
}
.prod-nameHdng{
	    float: left;
    width: 100%;
    line-height: clamp(32px, 3.2vw, 50px);
    font-size: clamp(32px, 3.2vw, 50px);
	}
.prod-nameHdng span {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--orange);
	margin-bottom: 10px;
}
.prd-p3 {
    float: left;
    width: 100%;
    font-size: 24px;
    line-height: 30px;
    margin: 10px 0 0;
}
.prd-p1 {
	float: left;
    width: 100%;
    color: #404040;
    font-size: 16px;
	vertical-align:middle;
	margin-top:5px;
	padding-bottom:15px;
	border-bottom:1px solid #ebebeb;
	}
.prd-p1 img {
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
	}
.prd-p1 a{ vertical-align:middle;}
.prd-p2{
	color: var(--muted);
	font-size: clamp(15px, 1vw, 17px);
	line-height: clamp(26px, 2vw, 28px);
	max-width: 100%;
	display: inline-block;
	}
p.prd-txt1 {
	list-style: none;
	cursor: pointer;
	padding: 18px 0;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.prd-strength-row{
	float: left;
	width: 100%;
	padding: 0px 0 0px;
	border-top: 1px solid #ebebeb;
	margin-bottom: 30px;
}
.prd-strength-p1{
	display:inline-block;
	vertical-align:middle;
    font-size: 24px;
    line-height: 28px;
    color: #24334a;
	font-weight:500;
	letter-spacing:-0.5px;
}	
.option-field1{
	float: left;
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.option-field1 li.option {
	position: relative;
	cursor: pointer;
	border: 1.5px solid var(--line);
	border-radius: 24px;
	padding: 24px;
	background: #fff;
	transition: all .3s var(--ease);
	font-family: var(--font-display);
	font-size: 22px;
	display: inline-flex;
	align-items: center;
	gap: 15px;
}
.option-field1 li.active-li {
    border-color: var(--accent);
    background: #fafcff;
    box-shadow: 0 0 0 4px rgba(47, 111, 237, .08);
}

.option-field1 li.option .prc {
    margin-left: auto;
    text-align: right;
}
.option-field1 li.option:hover {
  background-color: #f5f5f5;
}
.option-field1 li .dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #e6eaf0;
    display: inline-grid;
    place-items: center;
    transition: all .25s var(--ease);
}
.option-field1 li .dot::after {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #fff;
    transform: scale(0);
    transition: transform .25s var(--ease);
}
.option-field1 li.active-li .dot::after {
    transform: scale(1);
}
.option-field1 li.active-li .dot {
    border-color: var(--accent);
    background: var(--accent);
}
.prd-list{
	float: left;
	width: 100%;
	padding: 0 0px;
	margin-bottom: 20px;	
}
.prd-list li{
	float: left;
    width: 100%;
    position: relative;
    text-align: left;
    padding-left: 20px;
    font-size: 15px;
    line-height: 26px;
    color: var(--muted);
    padding: 13px 0;
    border-bottom: 1px dashed var(--line);
    display: flex;
    justify-content: space-between;
	}
.prd-list li:last-child{ border:none;}
.prd-list li strong {
    float: left;
    width: 32%;
}
.prd-list li span {
    float: left;
    margin-right: 10px;
}

.accordion { border-top: 1px solid var(--line); margin-top: 40px; display:inline-block;}
.accordion details { border-bottom: 1px solid var(--line); display: inline-block; width: 100%;}
.accordion summary {
  list-style: none; cursor: pointer;
  padding: 18px 0;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  display: flex; justify-content: space-between; align-items: center;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; font-size: 15px; }
.accordion details[open] summary::after { content: "–"; }
.accordion__body { padding-bottom: 20px; font-size: 15px; color: var(--muted); }
.accordion__body ul { margin: 0; padding-left: 18px; }

.spec-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.spec-table th, .spec-table td { text-align: left; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-weight: 400; }
.spec-table th { color: var(--muted); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; width: 45%; }

.pdp-editorial { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: clamp(24px, 4vw, 60px); align-items: center; }
.pdp-editorial img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }

.sticky-buy {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  display: none;
  align-items: center; gap: 14px;
  padding: 12px var(--gutter);
  background: rgba(245, 242, 234, 0.96);
  border-top: 1px solid var(--line-soft);
}
		
.prod-prc-row{
	float:left;
	width:100%;
	}
.prd-prc-txt{
	float: left;
    font-size:28px;
    line-height:35px;
	color:#000;
	position:relative;
	width: 100%;
	}
.prc-dscnt{
	float:left;
	width:100%;
	vertical-align:middle;
	margin-bottom:10px;
	}
.book-prc{ width:auto; margin:5px 0 0 0;}
.prd-prc-txt2{ 
	font-size: clamp(26px, 3.2vw, 32px);
    line-height: clamp(26px, 3.2vw, 32px);
	}
.prd-prc-txt img{
	position:absolute;
	left:0;
	top:3px;
	width:100%;
	}
.qty-div {
    float: left;
    padding: 0 25px 0 0;
    text-align: center;
	}
.sub2, .add2 {
    float: left;
    width:40px;
    border: 1px solid #ced4da;
    height: 46px;
    padding: 2px 0px 0;
    text-align: center;
	background:#fff;
    outline: none;
    cursor: pointer;
	}
.qty-div input {
    float: left;
	border:none;
	border-top: 1px solid #ced4da;
	border-bottom: 1px solid #ced4da;
    background: none;
    width:70px;
    text-align: center;
    height:46px;
    padding: 1px 0px 0;
    font-size: 21px;
    color: #2d2d2d;
	font-weight:300;
	font-family: inherit;
	outline:none;
	-webkit-appearance:none;
	border-radius:0;
	}
.slct-size-row{
	float:left;
	width:100%;
	margin:0 0 20px;
	}
.slctHdng{
	font-size:18px;
	line-height:20px;
	margin-bottom:10px;
	color:#444444;
	font-weight:500;
	}
.slct-clr{
	float:left;
	max-width:220px;
	width:100%;
	}
.slct-clr select{
	float:left;
	width:100%;
	height:46px;
	border:1px solid #ced4da;
	outline:none;
	font-size:18px;
	color:#000;
	padding:5px 10px;
	-webkit-appearance:none;
	font-family: inherit;
	background:url(../images/dtls-slct-ico.png) no-repeat 96% center;
	}
.slct-size{
	display:inline-block;
	vertical-align:middle;
	}
.slct-size ul{
	display:inline-block;
	vertical-align:middle;
	}
.slct-size ul li{
	display:inline-block;
	vertical-align:middle;
	margin-right:10px;
	min-width:40px;
	text-align:center;
	}

.prd_quantity {
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    column-gap: 10px;
    margin-bottom: 20px;
    padding: 10px;
}

.prd_quantity p {
    font-size: 20px;
    line-height: 30px;
    float: left;
    font-weight: 700;
}
a.add-to-btn{
    width: 65%;
    font-size: 20px;
    font-weight: 500;
    border-radius: 50px;
    margin-top: 20px;
	}
.secure-logo{
	display: inline-block;
	vertical-align: middle;
	margin: 0px 0 0 20px;
	max-width: 100%;
	}
.buyOpt-row{
	float:left;
	width:100%;
	padding:0 5px;
	cursor:pointer;
	position:relative;
	border:1px solid #808080;
	border-radius:5px;
	}
.buyOpt-row.active{
	background:#444444;
	color:#fff;
	}
.buyOpt-row.active .packageOpt p{ color:#fff;}
.packageOpt{
	float:left;
	width:100%;
	text-align:left;
	position:relative;
	}
.packageOpt input[type=radio]{
	position:absolute;
	opacity:0;
	}
.packageOpt p{
	float:left;
	width:100%;
	color:#282828;
	font-size:16px;
	line-height:40px;
	font-weight:500;
	text-align:center;
	}
/*============prdcts-details-s2==========*/
.prod-sec2{}
.tabs-body{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,3vw,38px);}
.tick{  
	display: flex;
    gap: 10px;
    align-items: center;
    font-size: 16px;
    padding: 5px 0;
    color: var(--ink-soft);
}
.tick img{max-width:14px;color:var(--forest);flex-shrink:0;margin-top:3px;}
.review{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;}
.rev-head{display:flex;align-items:center;gap:13px;margin-bottom:12px;}
.avatar{width:44px;height:44px;border-radius:var(--r-pill);background:var(--grad-forest);color:#fff;
  display:grid;place-items:center;font-weight:600;font-size:.92rem;flex-shrink:0;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media(max-width:820px){.grid-3{grid-template-columns:1fr;}}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
@media(max-width:760px){.grid-2{grid-template-columns:1fr;}}

.show-desk{
	display:block;
}
.show-mob{
	display:none;
}	

/*====================
About Section
==========================*/	
.intro-section{
	float:left;
	width:100%;
	padding:60px 0 0;
	}
.intro-lft{
	float:left;
	width:58%;
	text-align:left;
	}
.hdng-btmbdr{
	max-width:100%;
    display: inline-block;
    margin: 15px 0 5px;	
	}
.abtHdng-txt{
	float:left;
	width:100%;
	text-align:left;
	font-size:24px;
	line-height:24px;
	color:#444444;
	font-weight:bold;
	margin-top:30px;
	}	
ul.intro-list{
	float:left;
	width:100%;
	text-align:left;
	margin-top:10px;
	}	
ul.intro-list li{
	background:url(../images/intro-tike.png) no-repeat left 5px;
	float:left;
	width:100%;
	font-size:18px;
	color:#4b4d4a;
	margin-top:15px;
	padding-left:25px;
	}
.shopnow-btn{
	float:left;
    width: 100%;
    max-width: 190px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 18px;
    color: #ffffff;
    background: #e85710;
    margin-top: 25px;
    font-weight: bold;	
	}
.intro-rgt{
	float:right;
	width:41%;
	position:relative;
	}	
.people-fit-img{
	max-width:100%;
	position:absolute;
	top:5px;
	right:0;
	}				
	
.why-section{
	float:left;
	width:100%;
	padding:60px 0;
	}
.why-lft{
	float:left;
	width:40%;
	position:relative;
	}
.whylogo-img{
    max-width: 100%;
    position: absolute;
    top: 0;
    right: 0;
	}			
.why-rgt{
	float:right;
	width:57%;
	text-align:left;
	}	
ul.why-list{
	float:left;
	width:100%;
	margin:30px 0 20px;
	}
ul.why-list li{
	float:left;
	width:25%;
	text-align:left;
	font-size:18px;
	line-height:20px;
	color:#4b4d4a;
	border-left:1.5px solid #444444;
	padding:4px 0 4px 10px;
	}	
.why-t1{
	float:left;
	width:100%;
	font-size:18px;
	line-height:22px;
	color:#444444;
	font-weight:500;
	margin-top:20px;
	}	
	
.bndle-prod{
	display:inline-block;
	vertical-align:middle;
	max-width:100%;
	margin:40px 0 0;
	}	
	
.cancel-subs .cntct-form{margin-top:50px;}
.cancel-subs ul.contact-list{padding:0 360px;}
.cancel-subs ul.contact-list li{width:49%;}
.cancel-subs ul.contact-list li p{padding:0;}

/*===========Bundle============*/
.bndle-pkg{
	float:left;
	width:70%;
	margin:10px 0;
	}
.buyOpt-row2 {
	float: left;
	width:100%;
	padding:10px 10px 10px 15px;
	cursor: pointer;
	position: relative;
	border:1px solid #a09e9e;
	margin:5px 0 0;
	border-radius:3px;
	}
.buyOpt-row2.active {background: #a09e9e; }
.buyOpt-row2.active P {
    color: #fff;}
.packageOpt2 {
	float: left;
	width:100%;
	text-align: left;
	position: relative;
	padding-left: 30px;
	}
.packageOpt2 input[type=radio] {
	position: absolute;
	opacity: 0;
	}
.packageOpt2 input[type=radio] + span {
	position: absolute;
	display: inline-block;
	left: 3px;
	top:4px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid #000;
	}
.packageOpt2 input[type=radio]:checked + span:after {
	content: '';
	position: absolute;
	left: 3px;
	top: 3px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #000;
	}
.packageOpt2 p {
	float: left;
	width: 100%;
	color: #2c2c2c;
	font-size: 17px;
	line-height: 23px;
	text-align:left;
	}
.packageOpt2 p span {
	color: #0089cc;
	font-weight:normal;
	}

/* Tooltip text */
.tooltip .tooltiptext {
	visibility: hidden;
	background: #e85710;
	color: #fff;
	padding: 8px 15px;
	border-radius: 6px;
	position: absolute;
	z-index: 1;
	text-align:left;
	left:0;
	font-size:15px;
	line-height:20px;
	letter-spacing:0.5px;
	top:-100%;
	}
.tooltiptext::after {
	content: "";
	position: absolute;
	left:15px;
	top:100%;
	border-left: 10px solid transparent;
  	border-right: 10px solid transparent;
  	border-top: 10px solid #e85710;
	}
/* Show the tooltip text when you mouse over the tooltip container */
	.tooltip:hover .tooltiptext {
	visibility: visible;
	}
	
/*==========================*/
.i-pop{
	position:fixed;
	width:100%;
	top:0;
	bottom:0;
	background:rgba(0,0,0,0.7);
	z-index:999;
	}
.i-pop-cont{
	width:400px;
	max-width:90%;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%, -50%);
	background:#fff;
	padding:20px;
	border:1px solid #f89a20;
	border-radius:3px;
	z-index:99;
	text-align:left;
	font-size:17px;
	}
.close{
	width:20px;
	position:absolute;
	right:-10px;
	top:-10px;
	}


/********************************/
/****************************************/
.thank-you {
    min-height: 38vh;
    text-align: center;
    padding: 50px 0;
	float:left;
	width:100%;
}
.thnx-txt1 {
   display: inline-block;
    width: 100%;
    font-size: 40px;
    line-height: 55px;
    font-weight: 600;
    color: #2fa999;
    margin-bottom: 10px;
}
.thnx-txt2 {
    display: inline-block;
    width: 100%;
    font-size: 18px;
    line-height: 26px;
    margin-bottom: 10px;
}
/*****************************/
/*TERMS- PRIVACY*/

.tems_bg {
	float: left;
	width: 100%;
	padding: 40px 0;
}
.trm-bx {
	width: 100%;
	float: left;
	text-align: left;
}
.trm-bx h1 {
	line-height: 30px;
    color: #000000;
    margin: 0;
    padding: 0px 0 10px;
    font-size: 22px;
    float: left;
    width: 100%;
    margin-top: 0px;
    margin-bottom: 20px;
    font-weight: 700;
    border-bottom: 5px solid #000000;
}
.trm-bx h3 {
	line-height: 28px;
	text-align: left;
	font-size: 24px;
	float: left;
	width: 100%;
	margin: 0px 0 15px;
	color: #000;
	font-weight: 600;
}
.trm-bx li {
	font-size: 16px;
    line-height: 24px;
    float: left;
    width: 100%;
    list-style: decimal;
}
.trm-bx ol li {
    list-style: lower-roman;
}
.trm-bx li ol li {
    list-style: lower-alpha;
}
.trm-bx strong {
	text-transform: capitalize;
}
.trm-bx span {
	text-transform: capitalize;
    display: block;
    font-weight: 700;
    margin-bottom: 5px;
}
.trm-bx p {
	font-size: 16px;
	line-height: 26px;
	float: left;
	width: 100%;
	margin-bottom: 10px;
	font-weight: 400;
}
.trm-bx h4, .trm-bx h5 {
	    font-size: 22px;
    float: left;
    width: 100%;
    margin: 0px 0 10px;
    font-weight: 500;
    line-height: 30px;
}
.ingr-lst h4 {
    text-align: center;
}
.ingr-lst img {
    display: block;
    margin: 0 auto 20px;
    max-width: 530px;
    width: 100%;
}
.trm-bx h5 {
	font-size: 20px;
	font-weight: 500;
}
.privacy-list {
	padding: 0 0 0 30px
}
.privacy-list li {
	font-weight: bold;
}
.privacy-list li p {
	font-weight: normal;
	margin-top: 10px;
}
.mrg-tp {
	margin: 15px 0 !important;
	float: left;
	width: 100%
}
.trm-txt {
	float: left;
	width: 100%;
	background: #fff;
	padding: 20px 20px
}
.disclr-bx {
	border: 2px solid #000;
	padding: 10px;
	font-weight: 500;
	float: left;
	width: 100%;
	margin: 0;
}
.disclr-bx p {
	margin-bottom: 0;
	font-weight: bold;
}
.trm-bx ol, .trm-bx ul {
	margin-bottom: 20px;
    float: left;
    width: 100%;
    font-weight: 400;
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap;
    row-gap: 10px;
}
.trm-bx .disclmr {
	width: 100% !important;
}
.trm-bx table {
    float: left;
    width: 100%;
    border-collapse: collapse;
}
.trm-bx table td, .trm-bx table th {
    padding: 14px;
    border: 1px solid #ccc;
}
.s2txt{
	display: inline-block;
    width: 100%;
    font-weight: 700;
    font-size: 26px;
    line-height: 37px;
	}
.error-sec{
	float:left;
	width:100%;
	text-align:center;
	}
.error-hed {
	color: red;
	font-size: 44px;
	font-family: var(--font-display);
}
.card-error {
    max-width: 250px;
    margin: 0px auto 20px;
}	

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.reveal.in{opacity:1;transform:none;}	

/* 7. RESPONSIVE --------------------------------------------------------- */
@media (max-width: 1180px) {
  .nav { display: none; }
  .burger { display: inline-flex; }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .toolbar { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 900px) {
  :root { --gutter: 22px; }
  .utility .label { display: none; }
  .intro, .principles, .pdp, .cart-layout, .checkout-layout, .contact-layout,
  .pdp-editorial { grid-template-columns: 1fr; }
  .intro__inset { position: static; width: 60%; margin-top: 18px; }
  .intro__body { padding-bottom: 0; }
  .cat-grid { grid-template-columns: repeat(4, 1fr); }
  .tile--a, .tile--b, .tile--c, .tile--d, .tile--e { grid-column: span 2; min-height: 320px; }
  .pdp__panel, .summary, .order-panel { position: static; }
  .principle { grid-template-columns: 32px 1fr; }
  .principle p { grid-column: 2; }
  .sticky-buy { display: flex; }
  body.pdp-page { padding-bottom: 72px; }
}

@media (max-width: 640px) {
  .product-grid { grid-template-columns: 1fr; gap: 30px 16px; }
  .toolbar { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .contact-cards { grid-template-columns: 1fr; }
  .cart-line { grid-template-columns: 74px 1fr; row-gap: 12px; }
  .cart-line__price { text-align: left; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-base { flex-direction: column; }
}