/*
Theme Name: Elevation
Theme URI: https://elevation.am
Author: Gayane Aghababyan
Author URI: https://elevation.am
Description: Custom theme for elevation.am — fine art prints and handmade goods from Armenia's wild landscapes. WooCommerce and Polylang ready.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: elevation
*/
/* ===== Brand tokens — Brand Identity System v1.0 =====
Teal + Gold are accents, not fills for large areas (Gold: never a bg fill).
Near-black is reserved for the dark-mode logo mark and semi-transparent
photo overlays only. --ink is a separate, warmer charcoal used for
on-paper text. */
:root{
--teal:#197A6D;
--teal-deep:#0E4A42;
--gold:#C8A83C;
--white:#FFFFFF;
--near-black:#0D0D0D;
--paper:#F9F7F3;
--ink:#221F1A;
--ink-soft:#5B584F;
--line:rgba(200,168,60,0.35); /* gold-tinted hairline for dark backgrounds (header, dark forms) */
--line-ink:rgba(25,122,109,0.16); /* teal-tinted hairline for light backgrounds */
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
font-family:'Inter',sans-serif;
background:var(--paper);
color:var(--ink);
-webkit-font-smoothing:antialiased;
}
h1,h2,h3,blockquote{font-family:'Cormorant Garamond',serif; font-weight:600; letter-spacing:-0.005em;}
em.gold, .gold{font-style:italic; color:var(--gold); font-weight:600;}
a{color:inherit; text-decoration:none;}
img,.ph{display:block; width:100%; height:100%; object-fit:cover;}
.wrap{max-width:1240px; margin:0 auto; padding:0 32px;}
/* a global CSS snippet sets body{display:flex; flex-direction:column} for a sticky
footer; that makes main#main.wrap (used by the generic page template) a flex item,
and flex's auto-margin centering shrinks it to its content width instead of
filling the row. width:100% keeps its normal max-width-and-centered behavior. */
main#main.wrap{width:100%;}
.eyebrow{font-size:12px; letter-spacing:0.14em; text-transform:uppercase; font-weight:600;}
.label{font-size:13px; letter-spacing:0.14em; text-transform:uppercase;}
.skip-link{position:absolute; left:-9999px; top:0; z-index:100; background:var(--teal); color:var(--white); padding:12px 20px; font-size:13px;}
.skip-link:focus{left:12px; top:12px;}
a:focus-visible, button:focus-visible, .btn:focus-visible{outline:2px solid var(--teal); outline-offset:3px;}
/* Armenian display treatment: Noto Serif Armenian Bold, in Gold — applied
only to display-level elements (headlines/blockquote). */
html.lang-hy .i18n-display{font-family:'Noto Serif Armenian',serif; font-weight:700; color:var(--gold); font-style:normal;}
html.lang-hy .hero h1.i18n-display{color:var(--white); font-size:clamp(28px,4vw,52px); max-width:920px;}
html.lang-hy em.gold, html.lang-hy .gold{font-family:'Noto Serif Armenian',serif; font-weight:700; font-style:normal;}
/* Cormorant Garamond has no Armenian glyphs, so any h1/h2/h3 not already
tagged .i18n-display (generic page titles — About, Contact, Shop, Cart,
single posts) was silently falling back to the browser's default serif
on hy pages. Use Noto Serif Armenian everywhere so every main title
matches, not just the ones with the display treatment above. */
html.lang-hy h1, html.lang-hy h2, html.lang-hy h3{font-family:'Noto Serif Armenian',serif;}
/* placeholder photo blocks — shown until a real image is set in the Customizer.
Grade note: cool-lifted shadows, recovered highlights (no blown skies),
teal-shifted greens, medium-high contrast — no warm/orange shadow casts. */
.ph{position:relative; background:linear-gradient(180deg,#cdd8d2 0%,#7ea296 34%,#3c6a5f 64%,#152925 100%); overflow:hidden; background-size:cover; background-position:center;}
.ph.has-image::after{display:none;}
.ph::after{content:attr(data-label); position:absolute; left:12px; bottom:12px; font-size:11px; letter-spacing:.05em; color:rgba(255,255,255,.75); background:rgba(13,13,13,.35); padding:4px 8px; border-radius:3px; font-family:'Inter',sans-serif;}
.ph.slate{background:linear-gradient(180deg,#e2e8e8 0%,#b3c2c2 35%,#5f7a7c 68%,#233c3d 100%);}
.ph.forest{background:linear-gradient(180deg,#c9d6cd 0%,#719686 32%,#2f5347 64%,#11241d 100%);}
.ph.portrait{background:linear-gradient(180deg,#e4dfd2 0%,#aab3a5 55%,#546358 100%);}
#story .ph.portrait{background-position:center 14%;}
/* ---------- Nav ---------- */
header{position:sticky; top:0; z-index:50; background:rgba(13,13,13,0.82); backdrop-filter:blur(8px); color:var(--white);}
#collection, #story{scroll-margin-top:80px;}
.nav{display:flex; align-items:center; justify-content:space-between; padding:18px 32px; max-width:1240px; margin:0 auto;}
.brand{display:flex; align-items:center; gap:10px; font-family:'Cormorant Garamond',serif; font-weight:300; font-size:21px; letter-spacing:.18em; text-transform:lowercase;}
.brand .brand-logo{height:36px; width:auto; display:block;}
.navlinks{display:flex; gap:34px; list-style:none;}
.navlinks li{display:flex;}
.navlinks a{opacity:.85; transition:opacity .15s, color .15s; font-size:13px; letter-spacing:.14em; text-transform:uppercase;}
.navlinks a:hover, .navlinks .current-menu-item a, .navlinks .current_page_item a{opacity:1; color:var(--teal);}
.navright{display:flex; align-items:center; gap:18px; font-size:12px;}
.lang-toggle{display:flex; gap:6px; align-items:center; letter-spacing:.1em; font-size:12px;}
.lang-toggle a{color:var(--white); opacity:.55; padding:2px 0;}
.lang-toggle a.active{opacity:1; color:var(--gold); border-bottom:1px solid var(--gold);}
.icon-btn{position:relative; width:34px;height:34px;border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px;}
.cart-count{position:absolute; top:-6px; right:-6px; background:var(--gold); color:var(--near-black); font-size:10px; font-weight:700; min-width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; padding:0 3px; line-height:1; transition:transform .2s;}
.cart-count:empty, .cart-count[data-count="0"]{display:none;}
.cart-count.pulse{animation:cartCountPulse .7s ease;}
@keyframes cartCountPulse{
0%{transform:scale(1); box-shadow:0 0 0 0 rgba(200,168,60,.6);}
35%{transform:scale(1.6); box-shadow:0 0 0 6px rgba(200,168,60,0);}
100%{transform:scale(1); box-shadow:0 0 0 0 rgba(200,168,60,0);}
}
.hamburger{display:none; flex-direction:column; gap:5px; width:22px; cursor:pointer; background:none; border:none;}
.hamburger span{display:block; height:1px; background:var(--white); width:100%;}
@media (max-width:860px){
.navlinks{display:none; position:absolute; top:100%; left:0; right:0; background:rgba(13,13,13,.97); flex-direction:column; gap:0; padding:8px 32px 20px;}
.navlinks.is-open{display:flex;}
.navlinks a{display:block; padding:12px 0; border-bottom:1px solid var(--line);}
.hamburger{display:flex;}
}
/* ---------- Hero ---------- */
.hero{position:relative; height:92vh; min-height:560px; max-height:820px; color:var(--white); display:flex; align-items:flex-end;}
.hero .ph{position:absolute; inset:0;}
.hero-video{position:absolute; inset:0; overflow:hidden; pointer-events:none;}
.hero-video iframe{position:absolute; top:50%; left:50%; width:100vw; height:56.25vw; min-height:100%; min-width:177.78vh; transform:translate(-50%,-50%); border:0;}
.hero .scrim{position:absolute; inset:0; background:linear-gradient(180deg, rgba(13,13,13,.18) 0%, rgba(13,13,13,.06) 30%, rgba(13,13,13,.58) 78%, rgba(13,13,13,.88) 100%);}
.hero-inner{position:relative; z-index:2; width:100%; padding:0 32px 64px; max-width:1240px; margin:0 auto;}
.hero h1{font-size:clamp(38px,5.6vw,72px); line-height:1.06; max-width:840px; font-weight:600;}
.hero p.sub{margin-top:18px; font-size:17px; font-style:italic; opacity:.9; max-width:480px; font-family:'Cormorant Garamond',serif;}
html.lang-hy .hero p.sub{font-family:'Inter',sans-serif; font-style:normal; opacity:.85;}
.hero-ctas{margin-top:32px; display:flex; gap:28px; align-items:center; flex-wrap:wrap;}
.btn{display:inline-flex; align-items:center; gap:8px; padding:14px 28px; font-size:13px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; border-radius:2px; transition:all .18s ease; cursor:pointer; border:1px solid transparent; background:none;}
.btn-primary{background:var(--teal); color:var(--white);}
.btn-primary:hover{background:var(--teal-deep);}
.link-arrow{font-size:13px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--teal); border-bottom:1px solid transparent; padding-bottom:2px; transition:border-color .15s;}
.link-arrow:hover{border-color:var(--teal);}
.hero .link-arrow{color:var(--white);}
.hero .link-arrow:hover{border-color:var(--white);}
.scroll-cue{position:absolute; right:32px; bottom:28px; z-index:2; writing-mode:vertical-rl; font-size:11px; letter-spacing:.15em; text-transform:uppercase; opacity:.7; display:flex; align-items:center; gap:10px;}
@media (max-width:640px){ .hero{height:86vh;} .scroll-cue{display:none;} .hero-video{display:none;} }
/* ---------- Trust strip ---------- */
.trust{background:var(--teal); color:var(--white); padding:14px 0; font-size:12px; letter-spacing:.1em; text-transform:uppercase;}
.trust .wrap{display:flex; justify-content:center; flex-wrap:wrap; gap:10px 24px; opacity:.96; text-align:center;}
.trust .wrap span{position:relative;}
.trust .wrap span:not(:last-child)::after{content:''; position:absolute; top:50%; right:-13px; width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.5; transform:translateY(-50%);}
@media (max-width:900px){
.trust .wrap{flex-direction:column; gap:8px;}
.trust .wrap span:not(:last-child)::after{display:none;}
}
/* ---------- Section basics ---------- */
section{padding:96px 0;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:44px; flex-wrap:wrap;}
.section-head h2{font-size:clamp(28px,3.4vw,42px);}
.section-head .eyebrow{color:var(--teal); margin-bottom:10px;}
/* ---------- Product grid ---------- */
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.card{display:flex; flex-direction:column;}
.card .frame{aspect-ratio:4/5; overflow:hidden; margin-bottom:16px; background:#e6e2d6;}
.card h3{font-size:20px; font-weight:600; margin-bottom:4px;}
.card .meta{display:flex; justify-content:space-between; align-items:center; font-size:14px; color:var(--ink-soft);}
.card .price{color:var(--ink); font-weight:600; font-family:'Inter',sans-serif;}
.card .price del{opacity:.5; font-weight:400; margin-right:6px;}
.card .cta{margin-top:14px; align-self:flex-start; padding:10px 20px; font-size:12px; background:transparent; color:var(--teal); border:1px solid var(--teal);}
.card .cta:hover{background:var(--teal); color:var(--white);}
.card .cta.added{border-color:var(--gold); color:var(--gold);}
.card a.added_to_cart{display:inline-flex; align-items:center; gap:5px; align-self:flex-start; margin-top:12px; padding:4px 0; font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--gold); border-bottom:1px solid transparent; transition:border-color .15s;}
.card a.added_to_cart:hover{border-color:var(--gold);}
.card a.added_to_cart::before{content:"✓"; font-size:11px;}
.empty-note{color:var(--ink-soft); font-size:15px;}
@media (max-width:900px){ .grid3{grid-template-columns:1fr; gap:40px;} }
/* ---------- Story split ---------- */
.story{background:var(--paper);}
.split{display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:center;}
.split .frame{aspect-ratio:4/5; overflow:hidden;}
.about-split{align-items:start;}
.story h1{font-size:clamp(32px,4vw,48px); line-height:1.15; margin-bottom:10px;}
.story h2{font-size:clamp(20px,2.2vw,26px); font-weight:500; line-height:1.3; margin-bottom:22px;}
.story blockquote{font-style:italic; font-size:25px; line-height:1.45; margin-bottom:22px; font-weight:500;}
.story p{font-size:15.5px; line-height:1.7; color:var(--ink-soft); margin-bottom:16px; max-width:520px;}
.story .signoff{font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--teal); margin-top:24px;}
@media (max-width:860px){ .split{grid-template-columns:1fr; gap:32px;} }
/* ---------- Gallery strip ---------- */
.strip{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:14px; height:340px;}
.strip .frame{height:100%;}
@media (max-width:860px){ .strip{grid-template-columns:1fr 1fr; height:auto;} .strip .frame{aspect-ratio:1/1;} .strip .frame:first-child{grid-column:1/-1; aspect-ratio:16/9;} }
/* ---------- Live Instagram feed (Smash Balloon) ----------
The plugin renders its own responsive grid inside the builder's chosen
layout, so we only need to align it with the rest of the page rhythm —
not fight its internal markup. Fine-tune columns/spacing/chrome in
wp-admin → Instagram Feed → the feed's own design settings. */
.ig-live-feed{margin-top:0;}
.ig-live-feed #sb_instagram{margin:0 !important; padding:0 !important;}
/* ---------- Newsletter ---------- */
.newsletter{position:relative; color:var(--white); overflow:hidden;}
.newsletter .ph{position:absolute; inset:0;}
.newsletter .scrim{position:absolute; inset:0; background:rgba(13,13,13,.72);}
.nl-inner{position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
.newsletter h2{font-size:clamp(26px,3.2vw,38px); line-height:1.15;}
.newsletter p{margin-top:14px; opacity:.82; font-size:15px; max-width:420px;}
.nl-perks{margin-top:18px; font-size:13px; opacity:.75; display:flex; gap:22px; flex-wrap:wrap;}
form.nl{display:flex; flex-direction:column; gap:12px;}
.field-row{display:flex; gap:12px; flex-wrap:wrap;}
.field{flex:1; min-width:180px; background:transparent; border:1px solid var(--line); color:var(--white); padding:14px 16px; font-size:14px; border-radius:2px; font-family:'Inter',sans-serif;}
.field::placeholder{color:rgba(249,247,243,.55);}
.nl-msg{font-size:13px; margin-top:4px; min-height:1em;}
.nl-msg.is-success{color:var(--gold);}
.nl-msg.is-error{color:#e08a7d;}
@media (max-width:860px){ .nl-inner{grid-template-columns:1fr;} }
/* ---------- Footer ---------- */
footer{background:var(--paper); color:var(--ink); padding-top:60px; border-top:1px solid var(--teal);}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding-bottom:44px; border-bottom:1px solid var(--line-ink);}
.foot-grid h4{font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:16px; color:var(--ink-soft);}
.foot-grid a{display:block; font-size:14px; color:var(--ink); opacity:.86; margin-bottom:10px;}
.foot-grid a:hover{color:var(--teal); opacity:1;}
.foot-grid ul{list-style:none;}
.foot-brand .brand{color:var(--ink);}
.foot-brand p{font-size:13px; color:var(--ink-soft); margin-top:14px; max-width:260px; line-height:1.6;}
.foot-bottom{display:flex; justify-content:space-between; padding-top:20px; padding-bottom:20px; font-size:12px; color:var(--ink-soft); flex-wrap:wrap; gap:8px;}
@media (max-width:760px){ .foot-grid{grid-template-columns:1fr 1fr;} }
/* ---------- WooCommerce: Shop / Product Archive ---------- */
/* no woocommerce/archive-product.php override exists in this theme, so this
themes the plugin's default classic loop markup (ul.products/li.product)
to match the front page's .grid3/.card product cards. */
body.woocommerce-shop #primary,
body.tax-product_cat #primary,
body.tax-product_tag #primary{
max-width:1240px; margin:0 auto; padding:96px 32px;
}
.woocommerce-breadcrumb{font-size:12px; color:var(--ink-soft); margin-bottom:28px;}
.woocommerce-breadcrumb a{color:var(--ink-soft); transition:color .15s;}
.woocommerce-breadcrumb a:hover{color:var(--teal);}
.woocommerce-products-header{
background:none; color:var(--ink); position:static; z-index:auto; padding:0; margin-bottom:44px;
}
.woocommerce-products-header__title.page-title{font-size:clamp(28px,3.4vw,42px); line-height:1.1;}
.woocommerce-products-header .term-description,
.woocommerce-products-header .page-description{margin-top:14px; max-width:640px; font-size:15.5px; line-height:1.7; color:var(--ink-soft);}
.woocommerce-products-header .term-description p,
.woocommerce-products-header .page-description p{margin-bottom:12px;}
.woocommerce-products-header .term-description p:last-child,
.woocommerce-products-header .page-description p:last-child{margin-bottom:0;}
.woocommerce-message, .woocommerce-info, .woocommerce-error{
list-style:none; background:var(--white); border:1px solid var(--line-ink); border-left:3px solid var(--teal);
padding:16px 20px; margin:0 0 28px; font-size:14px; color:var(--ink);
display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
}
.woocommerce-error{border-left-color:#c0433a; padding-left:44px;}
.woocommerce-error li{
display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
flex:1 1 auto;
}
.woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button{
float:none; flex-shrink:0;
padding:8px 16px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
border:1px solid var(--teal) !important; color:var(--teal) !important; background:transparent !important; border-radius:2px;
}
.woocommerce-message .button:hover, .woocommerce-info .button:hover, .woocommerce-error .button:hover{background:var(--teal) !important; color:var(--white) !important;}
.woocommerce-message:focus, .woocommerce-info:focus, .woocommerce-error:focus{outline:2px solid var(--teal); outline-offset:3px;}
.woocommerce-result-count{font-size:13px; color:var(--ink-soft); margin:0; padding-top:8px;}
.woocommerce-ordering select{
border:1px solid var(--line-ink); background-color:var(--white); color:var(--ink); font-family:'Inter',sans-serif;
font-size:13px; padding:10px 32px 10px 14px; border-radius:2px; cursor:pointer; appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23221F1A'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 14px center;
}
.woocommerce-ordering select:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}
.woocommerce ul.products{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:8px;}
.woocommerce ul.products::before, .woocommerce ul.products::after{content:none; display:none;}
.woocommerce ul.products li.product{
float:none !important; width:auto !important; margin:0 !important; display:flex; flex-direction:column;
}
.woocommerce ul.products li.product a.woocommerce-loop-product__link{display:flex; flex-direction:column; flex:1; text-decoration:none;}
.woocommerce ul.products li.product a img{aspect-ratio:4/5; object-fit:cover; margin:0 0 16px; background:#e6e2d6;}
.woocommerce ul.products li.product .onsale{
top:12px; left:12px; right:auto; margin:0; min-height:0; min-width:0; line-height:1;
background:var(--gold); color:var(--near-black); font-size:11px; font-weight:700; letter-spacing:.05em;
text-transform:uppercase; padding:5px 10px; border-radius:2px; display:inline-flex; align-items:center;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:20px; padding:0; margin-bottom:4px;}
.woocommerce ul.products li.product .star-rating{color:var(--gold); margin:0 0 6px;}
.woocommerce ul.products li.product .price{
font-family:'Inter',sans-serif; font-weight:600; color:var(--ink); font-size:15px; margin-top:auto; margin-bottom:0;
}
.woocommerce ul.products li.product .price del{opacity:.5; font-weight:400; color:inherit;}
.woocommerce ul.products li.product .price ins{background:none; font-weight:600; text-decoration:none;}
.woocommerce ul.products li.product a.button{
align-self:flex-start; margin-top:14px; padding:10px 20px; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
font-weight:600; background:transparent; color:var(--teal); border:1px solid var(--teal); border-radius:2px; transition:all .18s ease;
}
.woocommerce ul.products li.product a.button:hover{background:var(--teal); color:var(--white);}
.woocommerce ul.products li.product a.button.added{border-color:var(--gold); color:var(--gold);}
.woocommerce ul.products li.product a.added_to_cart{
display:inline-flex; align-items:center; gap:5px; align-self:flex-start; margin-top:10px; padding:4px 0;
font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--gold);
border-bottom:1px solid transparent; transition:border-color .15s;
}
.woocommerce ul.products li.product a.added_to_cart:hover{border-color:var(--gold);}
.woocommerce ul.products li.product a.added_to_cart::before{content:"✓"; font-size:11px;}
.woocommerce-no-products-found{margin-top:8px;}
.woocommerce-pagination{margin-top:56px;}
.woocommerce-pagination ul.page-numbers{display:flex; list-style:none; gap:8px; justify-content:center; flex-wrap:wrap;}
.woocommerce-pagination .page-numbers li{display:flex;}
.woocommerce-pagination .page-numbers a, .woocommerce-pagination .page-numbers span{
display:flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 8px;
border:1px solid var(--line-ink); border-radius:2px; font-size:13px; color:var(--ink-soft); transition:all .15s ease;
}
.woocommerce-pagination .page-numbers a:hover{border-color:var(--teal); color:var(--teal);}
.woocommerce-pagination .page-numbers .current{background:var(--teal); border-color:var(--teal); color:var(--white);}
.woocommerce-pagination .page-numbers .dots{border:none;}
@media (max-width:900px){
.woocommerce ul.products{grid-template-columns:1fr; gap:40px;}
body.woocommerce-shop #primary, body.tax-product_cat #primary, body.tax-product_tag #primary{padding:64px 24px;}
}
/* ---------- WooCommerce: Single Product ---------- */
/* no woocommerce/content-single-product.php override exists in this theme, so
div.product (gallery + summary + tabs + related products, all as siblings
inside the one wrapper — WooCommerce's default template structure) arrives
completely unstyled: no container padding, no rhythm between the summary's
stacked fields, and the plugin's own boxy "browser tab" chrome. */
body.single-product #primary{
max-width:1240px; margin:0 auto; padding:96px 32px;
}
body.single-product.woocommerce div.product{
display:grid; grid-template-columns:1fr 1fr; column-gap:64px; align-items:start;
}
/* the plugin floats/widths these at 48% (.woocommerce div.product div.images/
.summary — same specificity as a plain override here, so the extra
".woocommerce" and child-class keep this reliably on top); grid ignores
float on its items but not an explicit width or margin-bottom, so those
still need resetting to let the columns own the sizing */
body.single-product.woocommerce div.product > .images,
body.single-product.woocommerce div.product > .summary{
float:none; width:auto; margin:0;
}
body.single-product.woocommerce div.product > .woocommerce-tabs,
body.single-product.woocommerce div.product > section.related{
grid-column:1/-1;
}
body.single-product .woocommerce-product-gallery{margin:0;}
body.single-product .flex-control-thumbs{display:flex; gap:12px; margin-top:14px; list-style:none;}
body.single-product .flex-control-thumbs li{width:auto; flex:1;}
/* summary column rhythm */
body.single-product .summary.entry-summary > *{margin:0 0 20px;}
body.single-product .summary.entry-summary > *:last-child{margin-bottom:0;}
body.single-product h1.product_title{margin-bottom:8px;}
body.single-product p.price{margin-bottom:24px;}
body.single-product .woocommerce-product-details__short-description{margin-bottom:24px;}
body.single-product.woocommerce div.product form.cart{
display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:28px;
}
/* WooCommerce's float clearfix pseudo-elements become empty flex items here,
each still claiming a `gap` on both sides — drop them since flex doesn't
need float clearing */
body.single-product.woocommerce div.product form.cart::before,
body.single-product.woocommerce div.product form.cart::after{content:none;}
body.single-product.woocommerce div.product form.cart .quantity{float:none; margin:0;}
/* stock of 1 renders the qty field as a hidden input — the wrapper div is
then empty but still a flex item claiming a `gap`; drop it from flow */
body.single-product.woocommerce div.product form.cart .quantity:has(input.qty[type="hidden"]){
display:none;
}
/* same outline/fill-on-hover treatment as the shop grid's
".woocommerce ul.products li.product a.button" — reused here for the
single_add_to_cart_button, which otherwise renders with the plugin's
unstyled default button chrome */
body.single-product.woocommerce div.product form.cart .button,
body.single-product.woocommerce div.product form.cart .single_add_to_cart_button{
padding:10px 20px; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
font-weight:600; background:transparent; color:var(--teal); border:1px solid var(--teal); border-radius:2px;
font-family:'Inter',sans-serif; cursor:pointer; transition:all .18s ease;
}
body.single-product.woocommerce div.product form.cart .button:hover,
body.single-product.woocommerce div.product form.cart .single_add_to_cart_button:hover{background:var(--teal); color:var(--white);}
body.single-product.woocommerce div.product form.cart .button.disabled,
body.single-product.woocommerce div.product form.cart .single_add_to_cart_button.disabled{opacity:.5; cursor:not-allowed;}
body.single-product .product_meta{
padding-top:20px; border-top:1px solid var(--line-ink); font-size:13px; color:var(--ink-soft);
}
/* same dot-separator idiom as .trust .wrap span, reused here for the
SKU / Category spans WooCommerce renders with no separator of its own */
body.single-product .product_meta span{position:relative; margin-right:20px;}
body.single-product .product_meta span:last-child{margin-right:0;}
body.single-product .product_meta span:not(:last-child)::after{
content:''; position:absolute; top:50%; right:-13px; width:4px; height:4px; border-radius:50%;
background:currentColor; opacity:.5; transform:translateY(-50%);
}
/* tabs: replace the plugin's boxy folder-tab chrome (background fills,
rounded corners, connector pseudo-elements) with a plain underline row.
WooCommerce's own tab rules are all qualified as
".woocommerce div.product .woocommerce-tabs ul.tabs li..." — this prefix
mirrors that chain (plus the theme's own classes) so it wins on
specificity without needing !important anywhere. */
body.single-product .woocommerce-tabs{margin-top:56px;}
body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs{
display:flex; gap:28px; flex-wrap:wrap; list-style:none; padding:0; margin:0 0 32px;
border-bottom:1px solid var(--line-ink); background:none;
}
body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs::before{content:none;}
body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li{
background:none; border:none; border-radius:0; margin:0; padding:0 0 14px;
}
body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li::before,
body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li::after{content:none;}
body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li a{
padding:0; font-size:13px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--ink-soft);
}
body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li.active{
border-bottom:2px solid var(--teal); margin-bottom:-1px;
}
body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li.active a{color:var(--ink);}
body.single-product.woocommerce div.product .woocommerce-tabs .panel{padding-top:8px; margin:0;}
body.single-product table.woocommerce-product-attributes{border-collapse:collapse;}
body.single-product table.woocommerce-product-attributes th,
body.single-product table.woocommerce-product-attributes td{
padding:12px 0; border-bottom:1px solid var(--line-ink); font-size:14px;
}
body.single-product section.related{border-top:1px solid var(--line-ink); margin-top:24px;}
body.single-product section.related > h2{margin-bottom:44px;}
@media (max-width:900px){
body.single-product #primary{padding:64px 24px;}
body.single-product.woocommerce div.product{grid-template-columns:1fr; row-gap:32px;}
body.single-product .woocommerce-tabs{margin-top:40px;}
}
/* ---------- Generic page content (fallback template — Terms, Privacy, etc.) ---------- */
main#main.wrap > article > h1{font-size:clamp(28px,3.4vw,42px); margin-bottom:32px;}
/* ---------- WooCommerce: Cart (Cart block) ---------- */
/* the page's Post Title block duplicates the theme's own Cart
*/
body.woocommerce-cart .wp-block-post-title{display:none;}
body.woocommerce-cart article > h1{font-size:clamp(28px,3.4vw,42px); margin-bottom:40px;}
/* .entry-content's 720px reading width (meant for prose pages) was clamping
the cart block well inside .wrap's 1240px, leaving a large empty margin. */
body.woocommerce-cart .entry-content{max-width:none;}
/* items table */
body.woocommerce-cart table.wc-block-cart-items{width:100%; border-collapse:collapse;}
body.woocommerce-cart .wc-block-cart-items__header th{
text-align:left; font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
color:var(--ink-soft); padding:0 12px 14px; border-bottom:1px solid var(--line-ink);
}
body.woocommerce-cart .wc-block-cart-items__header-total{text-align:right;}
body.woocommerce-cart .wc-block-cart-items__row{border-bottom:1px solid var(--line-ink);}
/* WooCommerce's own cart.css puts border-top on every td (inside a
@container(min-width:700px) block) on top of the border-bottom we put on
the row itself — a second, differently-colored line under each row. */
body.woocommerce-cart .wc-block-cart-items__row td{padding:22px 12px; vertical-align:top; border-top:none;}
body.woocommerce-cart .wc-block-cart-item__image img{width:80px; height:80px; object-fit:cover; background:#e6e2d6; border-radius:2px;}
body.woocommerce-cart .wc-block-components-product-name{
color:var(--ink); font-weight:600; font-size:15px; text-decoration:none; display:inline-block; margin-bottom:6px;
}
body.woocommerce-cart .wc-block-components-product-name:hover{color:var(--teal);}
body.woocommerce-cart .wc-block-cart-item__prices .wc-block-formatted-money-amount,
body.woocommerce-cart .wc-block-cart-item__total .wc-block-formatted-money-amount{
font-family:'Inter',sans-serif; font-weight:600; color:var(--ink);
}
body.woocommerce-cart .wc-block-cart-item__total{text-align:right;}
body.woocommerce-cart .wc-block-components-product-metadata__description p{font-size:12.5px; color:var(--ink-soft); margin-top:4px;}
/* quantity stepper + remove: align as a single row */
body.woocommerce-cart .wc-block-cart-item__quantity{margin-top:12px;}
body.woocommerce-cart .wc-block-components-quantity-selector{
display:inline-flex; align-items:center; border:1px solid var(--line-ink); border-radius:2px; overflow:hidden;
}
body.woocommerce-cart .wc-block-components-quantity-selector__input{
width:40px; border:none; text-align:center; font-family:'Inter',sans-serif; font-size:14px; color:var(--ink); background:var(--white); padding:8px 0;
}
body.woocommerce-cart .wc-block-components-quantity-selector__button{
width:32px; height:34px; border:none; background:var(--white); color:var(--ink-soft); cursor:pointer; transition:color .15s, background .15s;
}
body.woocommerce-cart .wc-block-components-quantity-selector__button:hover{color:var(--teal); background:var(--paper);}
body.woocommerce-cart .wc-block-components-quantity-selector__button--minus{border-right:1px solid var(--line-ink);}
body.woocommerce-cart .wc-block-components-quantity-selector__button--plus{border-left:1px solid var(--line-ink);}
/* remove item */
body.woocommerce-cart .wc-block-cart-item__remove-link{
color:var(--ink-soft); background:none; border:none; cursor:pointer; transition:color .15s;
}
body.woocommerce-cart .wc-block-cart-item__remove-link svg{fill:currentColor; width:18px; height:18px;}
body.woocommerce-cart .wc-block-cart-item__remove-link:hover{color:var(--teal);}
/* sidebar: cart totals card */
body.woocommerce-cart .wc-block-cart__sidebar{
background:var(--white); border:1px solid var(--line-ink); border-radius:2px; padding:32px;
}
/* WooCommerce puts its own border-top on each section wrapper (heading/coupon/
totals/footer) on top of the border-bottom we already put on the coupon
panel and each totals row below — two 1px lines a row-height apart at every
boundary. Our own lines are enough. */
body.woocommerce-cart .wc-block-cart__sidebar .wc-block-components-totals-wrapper,
body.woocommerce-cart .wc-block-cart__sidebar [class*="wp-block-woocommerce-cart-order-summary-"]{border-top:none;}
body.woocommerce-cart .wc-block-cart__totals-title{font-size:22px; margin-bottom:18px;}
body.woocommerce-cart .wc-block-components-totals-item{
display:flex; justify-content:space-between; align-items:baseline; padding:12px 0; border-bottom:1px solid var(--line-ink); font-size:14px;
}
body.woocommerce-cart .wc-block-components-totals-item__label{color:var(--ink-soft);}
/* WooCommerce indents the applied-coupon chip list 20px, so it sits out of
line with the "Discount" label above it. */
body.woocommerce-cart .wc-block-components-totals-discount__coupon-list{margin-left:0;}
body.woocommerce-cart .wc-block-components-totals-item__value{font-family:'Inter',sans-serif; font-weight:600; color:var(--ink);}
body.woocommerce-cart .wc-block-components-totals-item__description{width:100%; font-size:12.5px; color:var(--ink-soft); margin-top:4px;}
body.woocommerce-cart .wc-block-components-totals-footer-item{border-bottom:none; padding-top:18px;}
body.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label{color:var(--ink); font-weight:600;}
body.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{font-size:18px; color:var(--teal); font-weight:700;}
body.woocommerce-cart p.wc-block-components-totals-footer-item-shipping{color:var(--ink-soft); font-size:12.5px;}
/* WooCommerce's own cart.css puts a border-bottom on the whole order-summary
block (subtotal through estimated total), which shows up as a stray line
between "Estimated total" and the checkout button. */
body.woocommerce-cart .wp-block-woocommerce-cart-order-summary-block{border-bottom:none;}
/* coupon panel */
body.woocommerce-cart .wc-block-components-totals-coupon{border-bottom:1px solid var(--line-ink); padding-bottom:14px; margin-bottom:14px;}
body.woocommerce-cart .wc-block-components-panel__button{
font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--teal); display:flex; align-items:center; gap:6px; cursor:pointer;
}
body.woocommerce-cart .wc-block-components-panel__button-icon{fill:currentColor; width:16px; height:16px;}
body.woocommerce-cart .wc-block-components-totals-coupon input[type="text"]{
padding:10px 12px; border:1px solid var(--line-ink); font-family:'Inter',sans-serif; font-size:13px; border-radius:2px; background:var(--white); color:var(--ink);
}
body.woocommerce-cart .wc-block-components-totals-coupon button{
padding:10px 18px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
border:1px solid var(--teal); background:transparent; color:var(--teal); border-radius:2px; cursor:pointer; transition:all .18s ease;
}
body.woocommerce-cart .wc-block-components-totals-coupon button:hover{background:var(--teal); color:var(--white);}
/* proceed to checkout */
body.woocommerce-cart .wc-block-cart__submit-button{
display:flex; justify-content:center; width:100%; padding:16px 28px; background:var(--teal) !important; color:var(--white) !important;
font-size:13px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; border-radius:2px; transition:background .18s ease;
text-decoration:none !important;
}
body.woocommerce-cart .wc-block-cart__submit-button:hover{background:var(--teal-deep) !important;}
/* cross-sells (rendered only when the product has related items configured) */
body.woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block h2{font-size:19px; margin-bottom:16px;}
body.woocommerce-cart .wc-block-cart-cross-sells-products .wc-block-grid__product-title,
body.woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .wc-block-grid__product-title{font-size:14px; font-weight:600; color:var(--ink);}
body.woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .wc-block-grid__product-price{font-family:'Inter',sans-serif; color:var(--ink-soft); font-size:13px;}
/* empty-cart state + "New in store" product grid */
body.woocommerce-cart .wc-block-cart__empty-cart__title{font-size:clamp(24px,3vw,34px); margin-bottom:16px;}
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block > p a{color:var(--teal); font-weight:600; text-decoration:underline; text-underline-offset:3px;}
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block hr{margin:48px 0; border:none; border-top:1px solid var(--line-ink);}
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block h2.wp-block-heading:not(.wc-block-cart__empty-cart__title){font-size:clamp(22px,2.6vw,30px); margin-bottom:28px;}
body.woocommerce-cart .wc-block-grid__products{display:grid; grid-template-columns:repeat(4,1fr); gap:28px; list-style:none;}
/* the plugin's own flex-grid CSS ships ".wc-block-grid.has-4-columns .wc-block-grid__product
{flex:1 0 25%; max-width:25%}" for its default flexbox layout; since we switch
.wc-block-grid__products to CSS grid above, that leftover max-width:25% resolves
against the already-quartered grid cell instead of the row, squeezing each product
(and its "Add to cart" button) down to a quarter of a quarter and wrapping the
button label one letter per line */
body.woocommerce-cart .wc-block-grid__products .wc-block-grid__product{flex:none !important; max-width:none !important; width:auto !important; border:0 !important; padding:0 !important;}
body.woocommerce-cart .wc-block-grid__product-image img{aspect-ratio:4/5; object-fit:cover; background:#e6e2d6; border-radius:2px;}
body.woocommerce-cart .wc-block-grid__product-title{font-size:15px; font-weight:600; color:var(--ink); margin-top:14px;}
body.woocommerce-cart .wc-block-grid__product-price{font-family:'Inter',sans-serif; font-weight:600; color:var(--ink); font-size:14px; margin-top:4px;}
body.woocommerce-cart .wc-block-grid__product-add-to-cart .wp-block-button__link{
display:inline-flex; margin-top:14px; padding:10px 20px; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
font-weight:600; border:1px solid var(--teal); color:var(--teal); background:transparent; border-radius:2px; transition:all .18s ease;
}
body.woocommerce-cart .wc-block-grid__product-add-to-cart .wp-block-button__link:hover{background:var(--teal); color:var(--white);}
@media (max-width:900px){
body.woocommerce-cart .wc-block-components-sidebar-layout{flex-direction:column;}
body.woocommerce-cart .wc-block-grid__products{grid-template-columns:repeat(2,1fr);}
}
/* ---------- WooCommerce: Checkout (Checkout block) ---------- */
/* same duplicate-heading situation as the cart page, but here it's a literal
Heading block (not Post Title) sitting right above the checkout block. */
body.woocommerce-checkout .entry-content > h1.wp-block-heading:first-child{display:none;}
body.woocommerce-checkout article > h1{font-size:clamp(28px,3.4vw,42px); margin-bottom:40px;}
body.woocommerce-checkout .entry-content{max-width:none;}
/* form steps (contact / shipping / shipping options / payment) */
body.woocommerce-checkout .wc-block-components-checkout-step{
padding-bottom:32px; margin-bottom:32px; border-bottom:1px solid var(--line-ink);
}
body.woocommerce-checkout .wc-block-components-checkout-step:last-of-type{border-bottom:none; margin-bottom:0; padding-bottom:0;}
body.woocommerce-checkout .wc-block-components-checkout-step__heading-container{margin-bottom:20px;}
body.woocommerce-checkout .wc-block-components-checkout-step__title{
font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:600; color:var(--ink);
}
/* text inputs + select */
body.woocommerce-checkout .wc-block-components-text-input input{
border:1px solid var(--line-ink); border-radius:2px; font-family:'Inter',sans-serif; font-size:14px; color:var(--ink); padding:14px;
}
body.woocommerce-checkout .wc-block-components-text-input input:focus{border-color:var(--teal); outline:none;}
body.woocommerce-checkout .wc-block-components-text-input label{font-family:'Inter',sans-serif; color:var(--ink-soft);}
body.woocommerce-checkout .wc-blocks-components-select__select{
border:1px solid var(--line-ink); border-radius:2px; font-family:'Inter',sans-serif; font-size:14px; color:var(--ink);
}
body.woocommerce-checkout .wc-blocks-components-select__select:focus{border-color:var(--teal); outline:none;}
/* checkboxes (create account / use same address / add order note) */
body.woocommerce-checkout .wc-block-components-checkbox__input{border-color:var(--line-ink);}
body.woocommerce-checkout .wc-block-components-checkbox__input:checked{background-color:var(--teal); border-color:var(--teal);}
body.woocommerce-checkout .wc-block-components-checkbox__label{color:var(--ink-soft); font-size:14px;}
body.woocommerce-checkout .wc-block-checkout__guest-checkout-notice{font-size:12.5px; color:var(--ink-soft); margin:10px 0 16px;}
/* saved-address "view" card */
body.woocommerce-checkout .wc-block-components-address-card{
border:1px solid var(--line-ink); border-radius:2px; padding:16px 18px;
display:flex; justify-content:space-between; align-items:flex-start; gap:16px; font-size:14px; color:var(--ink-soft);
}
body.woocommerce-checkout .wc-block-components-address-card__edit{
color:var(--teal); font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; cursor:pointer; white-space:nowrap;
}
/* shipping options / payment methods radio list */
body.woocommerce-checkout .wc-block-components-radio-control__option{
border:1px solid var(--line-ink); border-radius:2px; padding:16px 18px 16px 48px; margin-bottom:10px;
font-size:14px; color:var(--ink); transition:border-color .15s;
}
body.woocommerce-checkout .wc-block-components-radio-control__option:hover{border-color:var(--teal);}
body.woocommerce-checkout .wc-block-components-radio-control__option[aria-checked="true"]{border-color:var(--teal); background:var(--paper);}
body.woocommerce-checkout .wc-block-components-radio-control__label{font-weight:600;}
body.woocommerce-checkout .wc-block-components-radio-control__secondary-label{font-family:'Inter',sans-serif; font-weight:600; color:var(--ink);}
body.woocommerce-checkout .wc-block-components-radio-control__input{accent-color:var(--teal);}
/* no-payment-methods / error notices */
body.woocommerce-checkout .wc-block-components-notice-banner{
background:var(--white); border:1px solid var(--line-ink); border-left:3px solid #c0433a;
padding:16px 20px; font-size:14px; color:var(--ink); border-radius:2px;
}
body.woocommerce-checkout .wc-block-components-notice-banner svg{fill:#c0433a;}
/* terms + place order */
body.woocommerce-checkout .wc-block-checkout__terms{font-size:12.5px; color:var(--ink-soft); margin-top:20px;}
body.woocommerce-checkout .wc-block-checkout__terms a{color:var(--teal); text-decoration:underline; text-underline-offset:3px;}
body.woocommerce-checkout .wc-block-components-checkout-place-order-button{
width:100%; justify-content:center; padding:16px 28px; background:var(--teal) !important; color:var(--white) !important;
font-size:13px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; border-radius:2px; border:none;
transition:background .18s ease; margin-top:24px;
}
body.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover{background:var(--teal-deep) !important;}
/* sidebar: order summary card */
body.woocommerce-checkout .wc-block-checkout__sidebar{
background:var(--white); border:1px solid var(--line-ink); border-radius:2px; padding:32px;
}
/* the order-summary block ships its own color-mix() border + radius, duplicating
the card border we just put on the sidebar itself */
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block{border:none; border-radius:0;}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__title-text{
font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:600; color:var(--ink);
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__title-price{
font-family:'Inter',sans-serif; font-weight:600; color:var(--teal); font-size:16px;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__title-icon svg{fill:var(--ink-soft);}
body.woocommerce-checkout .wc-block-components-order-summary-item{padding:16px 0; border-bottom:1px solid var(--line-ink);}
body.woocommerce-checkout .wc-block-components-order-summary-item__image img{border-radius:2px; background:#e6e2d6;}
body.woocommerce-checkout .wc-block-components-product-name{font-weight:600; font-size:14px; color:var(--ink);}
body.woocommerce-checkout .wc-block-components-product-metadata__description p{font-size:12px; color:var(--ink-soft); margin-top:4px;}
body.woocommerce-checkout .wc-block-components-order-summary-item__total-price .wc-block-formatted-money-amount,
body.woocommerce-checkout .wc-block-components-order-summary-item__individual-price{
font-family:'Inter',sans-serif; font-weight:600; color:var(--ink);
}
/* totals rows (Subtotal / Discount / Delivery / Total) */
body.woocommerce-checkout .wc-block-components-totals-item{
display:flex; justify-content:space-between; align-items:baseline; padding:12px 0; border-bottom:1px solid var(--line-ink); font-size:14px;
}
body.woocommerce-checkout .wc-block-components-totals-item__label{color:var(--ink-soft);}
body.woocommerce-checkout .wc-block-components-totals-discount__coupon-list{margin-left:0;}
body.woocommerce-checkout .wc-block-components-totals-item__value{font-family:'Inter',sans-serif; font-weight:600; color:var(--ink);}
body.woocommerce-checkout .wc-block-components-totals-item__description{width:100%; font-size:12.5px; color:var(--ink-soft); margin-top:4px;}
body.woocommerce-checkout .wc-block-components-totals-footer-item{border-bottom:none; padding-top:18px;}
body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label{color:var(--ink); font-weight:600;}
body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{font-size:18px; color:var(--teal); font-weight:700;}
/* coupon accordion ("Add coupons") */
body.woocommerce-checkout .wc-block-components-totals-coupon{border-bottom:1px solid var(--line-ink); padding-bottom:14px; margin-bottom:14px;}
body.woocommerce-checkout .wc-block-components-panel__button{
font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--teal); display:flex; align-items:center; gap:6px; cursor:pointer;
}
body.woocommerce-checkout .wc-block-components-panel__button-icon{fill:currentColor; width:16px; height:16px;}
body.woocommerce-checkout .wc-block-components-totals-coupon input[type="text"]{
padding:10px 12px; border:1px solid var(--line-ink); font-family:'Inter',sans-serif; font-size:13px; border-radius:2px; background:var(--white); color:var(--ink);
}
body.woocommerce-checkout .wc-block-components-totals-coupon button{
padding:10px 18px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
border:1px solid var(--teal); background:transparent; color:var(--teal); border-radius:2px; cursor:pointer; transition:all .18s ease;
}
body.woocommerce-checkout .wc-block-components-totals-coupon button:hover{background:var(--teal); color:var(--white);}
@media (max-width:900px){
body.woocommerce-checkout .wc-block-components-sidebar-layout{flex-direction:column;}
}
/* ---------- Contact page ---------- */
/* wider info column, narrower portrait — inverse of the About page's split */
.contact-split{grid-template-columns:1.15fr 0.85fr;}
@media (max-width:860px){ .contact-split{grid-template-columns:1fr;} }
.contact-content h3{
font-size:13px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
color:var(--teal); font-family:'Inter',sans-serif; margin:28px 0 16px;
}
.contact-content ul{list-style:none; display:flex; flex-direction:column; gap:14px; margin-bottom:28px;}
.contact-content li{
display:flex; align-items:center; gap:14px; font-size:15px; color:var(--ink-soft);
}
.contact-content li a{display:flex; align-items:center; gap:14px; color:var(--ink-soft); transition:color .15s;}
.contact-content li a:hover{color:var(--teal);}
/* raw