/* Theme Name: Orvena Store Theme URI: https://example.com Author: Your Store Author URI: https://example.com Description: An elegant, editorial WooCommerce store theme with a warm cream & gold aesthetic. Built to be beginner-friendly — add your logo, menus and products from the WordPress dashboard. Version: 2.9.9 Requires at least: 6.0 Tested up to: 6.6 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: orvena-store Tags: e-commerce, custom-menu, featured-images, translation-ready, woocommerce This theme, like WordPress, is licensed under the GPL. Use it to make something great. */ /* ========================================================= 1. DESIGN TOKENS --------------------------------------------------------- Matches the Orvena Canvas Creations palette: oklch-based terracotta / clay / sand palette, Fraunces display + DM Sans body type. ========================================================= */ :root{ --ink:oklch(0.24 0.018 60); --ink-soft:oklch(0.28 0.02 60); --ink-muted:oklch(0.5 0.018 62); --ink-subtle:oklch(0.62 0.014 62); --accent:oklch(0.55 0.135 38); /* primary — terracotta */ --accent-soft:oklch(0.62 0.12 38); --accent-deep:oklch(0.46 0.14 36); --accent-light:oklch(0.93 0.03 60); /* accent bg */ --cream:oklch(0.977 0.008 85); /* background */ --sand:oklch(0.945 0.014 82); /* secondary / muted bg */ --clay:oklch(0.895 0.021 70); /* newsletter band bg */ --line:oklch(0.9 0.014 72); /* border */ --white:oklch(0.995 0.004 90); /* card bg */ --font-display:'Fraunces', Georgia, 'Times New Roman', serif; --font-sans:'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --radius-sm:0.375rem; /* buttons, inputs, checkboxes */ --radius-md:0.5rem; /* general containers */ --radius-lg:0.75rem; /* product/feature cards */ --radius-xl:1rem; /* modals, hero/promo banners */ --radius-full:9999px; /* pills, circular icons/avatars */ --shadow-soft:0 1px 2px rgba(40,30,20,.04), 0 8px 24px -8px rgba(40,30,20,.08); --shadow-card:0 1px 3px rgba(40,30,20,.05), 0 12px 32px -12px rgba(40,30,20,.10); --shadow-lift:0 4px 12px rgba(40,30,20,.06), 0 24px 48px -16px rgba(40,30,20,.14); --container:1344px; --ease:cubic-bezier(.4,0,.2,1); } /* ========================================================= 2. RESET & BASE ========================================================= */ *,*::before,*::after{box-sizing:border-box;} html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth; /* Defensive fix: some WooCommerce plugins (sliding cart drawers, off-canvas menus) position their panels off-screen using fixed widths that can still register as part of the page's horizontal scroll area on real mobile browsers, even though they render fine in desktop devtools emulation. Setting this on (not just ) catches fixed-position elements that body's overflow-x:hidden alone does not clip. */ overflow-x:hidden; max-width:100vw; } body{ margin:0; background:var(--white); color:var(--ink); font-family:var(--font-sans); font-size:16px; line-height:1.6; overflow-x:hidden; } img{max-width:100%;height:auto;display:block;} a{color:inherit;text-decoration:none;} ul{list-style:none;margin:0;padding:0;} button,input,select,textarea{font-family:inherit;font-size:inherit;} button{cursor:pointer;} ::selection{background:rgba(200,169,106,.25);color:var(--ink);} h1,h2,h3,h4,h5,h6{ font-family:var(--font-display); font-weight:600; line-height:1.2; margin:0 0 .5em; color:var(--ink); } p{margin:0 0 1em;color:var(--ink-muted);} .entry-content p{color:var(--ink-muted);} :focus-visible{outline:2px solid rgba(200,169,106,.6);outline-offset:2px;} /* ========================================================= 3. LAYOUT HELPERS ========================================================= */ .container-content{ max-width:var(--container); margin:0 auto; padding:0 20px; } @media(min-width:640px){.container-content{padding:0 32px;}} @media(min-width:1024px){.container-content{padding:0 48px;}} .site-main{ min-height:40vh; padding-top:72px; } @media(min-width:1024px){ .site-main{ padding-top:88px; } } /* On the homepage, the hero section provides its own balanced padding */ .home .site-main{ padding-top:0; } /* .eyebrow{ display:inline-block; font-size:.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:.2em; color:var(--accent-deep); } */ .page-header-band .eyebrow{ display:inline-block; font-size:16px; font-weight:700; text-transform:uppercase; letter-spacing:0.25em; color:var(--accent-deep); margin-bottom:18px; } /* ========================================================= 4. BUTTONS ========================================================= */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:var(--radius-sm); padding:14px 28px; font-size:.875rem; font-weight:500; border:1px solid transparent; transition:all .3s var(--ease); white-space:nowrap; } .btn-primary, .woocommerce a.button, .woocommerce button.button, .woocommerce #respond input#submit, .woocommerce input.button, .woocommerce-page a.button, .woocommerce #payment #place_order{ background:var(--ink); color:var(--white) !important; border-radius:var(--radius-sm); border:1px solid var(--ink); padding:14px 28px; font-weight:500; font-size:.875rem; transition:all .3s var(--ease); } .btn-primary:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce #respond input#submit:hover, .woocommerce input.button:hover, .woocommerce #payment #place_order:hover{ background:var(--ink-soft); border-color:var(--ink-soft); box-shadow:var(--shadow-lift); color:var(--white) !important; } .btn-accent, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #respond input#submit.alt{ background:var(--accent) !important; border:1px solid var(--accent) !important; color:var(--white) !important; } .btn-accent:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover{ background:var(--accent-deep) !important; border-color:var(--accent-deep) !important; } .btn-secondary{ background:var(--white); color:var(--ink); border:1px solid var(--line); } .btn-secondary:hover{border-color:rgba(31,31,31,.3);background:var(--cream);} .btn:active,.woocommerce a.button:active{transform:scale(.98);} /* ========================================================= 5. CARDS ========================================================= */ .card{ border-radius:var(--radius-lg); border:1px solid var(--line); background:var(--white); box-shadow:var(--shadow-soft); transition:all .3s var(--ease); } .card-hover:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); border-color:rgba(200,169,106,.3); } .link-underline{position:relative;} .link-underline::after{ content:'';position:absolute;left:0;bottom:-2px;height:1px;width:0; background:currentColor;transition:width .3s var(--ease); } .link-underline:hover::after{width:100%;} /* ========================================================= 6. HEADER ========================================================= */ .site-header{ position:fixed;top:0;left:0;right:0;z-index:999; background:rgba(255,255,255,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); box-shadow:var(--shadow-soft); transition:all .3s var(--ease); padding-top:env(safe-area-inset-top,0); } @media(min-width:640px){ .site-header{ background:rgba(255,255,255,0); border-bottom-color:transparent; box-shadow:none; } } .site-header.is-scrolled{ background:rgba(255,255,255,.9); backdrop-filter:blur(10px); border-bottom-color:var(--line); box-shadow:var(--shadow-soft); } .site-header-inner{ display:flex;align-items:center;justify-content:space-between; height:64px; } @media(min-width:1024px){.site-header-inner{height:80px;}} .site-branding{display:flex;align-items:center;gap:6px;} .site-logo-mark{ display:flex;align-items:center;justify-content:center; width:34px;height:34px;border-radius:50%; background:var(--ink);color:var(--white); font-family:var(--font-display);font-weight:600;font-size:1.05rem; flex-shrink:0;transition:transform .3s var(--ease); } .site-branding:hover .site-logo-mark{transform:scale(1.06);} .site-branding img.custom-logo{max-height:40px;width:auto;} .site-title{ font-family:var(--font-display);font-weight:600;font-size:1.05rem; color:var(--ink);letter-spacing:-.01em; } .site-title .accent{color:var(--accent-deep);} .main-navigation{display:none;} @media(min-width:1024px){.main-navigation{display:flex;align-items:center;gap:2px;}} .main-navigation ul{display:flex;align-items:center;gap:2px;} .main-navigation li{position:relative;} .main-navigation a{ display:block;padding:10px 16px;border-radius:var(--radius-sm); font-size:.875rem;font-weight:500;color:var(--ink-muted); transition:color .2s,background .2s; } .main-navigation a:hover, .main-navigation .current-menu-item > a, .main-navigation .current_page_item > a{color:var(--ink);background:transparent;} /* dropdown */ .main-navigation ul ul{ display:none;position:absolute;top:100%;left:0; width:280px;background:var(--white); border:1px solid var(--line);border-radius:var(--radius-sm); box-shadow:var(--shadow-lift); /* Padding (not margin) creates the visual gap below the trigger link. Using padding keeps that gap INSIDE this element's own hoverable box, so moving the mouse straight down from the link into the dropdown never passes through empty, non-hoverable space — margin would leave a dead zone there that breaks the hover chain and closes the menu the instant the cursor crosses it. */ padding:14px 0 8px;margin-top:0; flex-direction:column; /* Plain scrollable list, like a native dropdown, instead of a fixed card — long category lists get their own scrollbar rather than growing the box past the viewport. */ max-height:70vh;overflow-y:auto; } /* Small pointer/tail at the top of the panel, pointing at the trigger. */ .main-navigation ul ul::after{ content:'';position:absolute;top:-7px;left:20px;width:12px;height:12px; background:var(--white);border-left:1px solid var(--line);border-top:1px solid var(--line); transform:rotate(45deg); } /* Invisible bridge covering the gap itself, so :hover keeps registering even in the small sliver between the link's bottom edge and where the dropdown's own background visually starts. */ .main-navigation ul ul::before{ content:'';position:absolute;top:-16px;left:0;right:0;height:16px; } .main-navigation li:hover > ul, .main-navigation li:focus-within > ul, .main-navigation .menu-item-has-children.is-open > ul{display:flex;} .main-navigation ul ul a{ padding:11px 24px;border-radius:0;color:var(--ink); text-align:left;font-weight:400;white-space:normal; } .main-navigation ul ul a:hover{background:var(--cream);color:var(--ink);} /* Thin, visible scrollbar for long category lists (matches the plain list style, rather than the browser's bulky default). */ .main-navigation ul ul::-webkit-scrollbar{width:8px;} .main-navigation ul ul::-webkit-scrollbar-track{background:transparent;} .main-navigation ul ul::-webkit-scrollbar-thumb{background:var(--line);border-radius:var(--radius-full);} .main-navigation ul ul{scrollbar-width:thin;scrollbar-color:var(--line) transparent;} /* chevron indicator on "Categories"-style dropdown parents */ .main-navigation .menu-item-has-children > a{display:flex;align-items:center;gap:4px;} .main-navigation .menu-item-has-children > a::after{ content:"";width:7px;height:7px;flex-shrink:0; border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor; transform:rotate(45deg);margin-top:-3px;transition:transform .2s ease;opacity:.6; } .main-navigation .menu-item-has-children.is-open > a::after, .main-navigation .menu-item-has-children:hover > a::after{transform:rotate(-135deg);margin-top:2px;} .header-actions{display:flex;align-items:center;gap:8px;} .header-shop-btn{ display:none;align-items:center;gap:8px; background:var(--ink);color:var(--white); border-radius:var(--radius-sm);padding:11px 20px; font-size:.875rem;font-weight:500;transition:all .2s; } @media(min-width:640px){.header-shop-btn{display:inline-flex;}} .header-shop-btn:hover{background:var(--ink-soft);box-shadow:var(--shadow-lift);} .header-action-icon, .header-cart-link{ position:relative;display:inline-flex;align-items:center;justify-content:center; width:40px;height:40px;border-radius:50%;color:var(--ink); background:transparent;border:0;outline:none;padding:0;margin:0; cursor:pointer;-webkit-appearance:none;appearance:none; transition:background .2s, transform .15s ease; } .header-action-icon:hover, .header-cart-link:hover{ background:var(--cream, #f7f5f0); } .header-cart-link:active{ transform:scale(0.95); } .header-cart-link svg{ display:block; pointer-events:none; } .header-cart-count{ position:absolute;top:2px;right:2px;min-width:17px;height:17px; background:#9e4a2b;color:#fff;border-radius:9999px; font-size:.65rem;font-weight:700;display:flex;align-items:center;justify-content:center; padding:0 4px;box-sizing:border-box;line-height:1;pointer-events:none; } .menu-toggle{ display:flex;align-items:center;justify-content:center; width:40px;height:40px;border:0;background:transparent;border-radius:50%;color:var(--ink); } .menu-toggle:hover{background:var(--cream);} @media(min-width:1024px){.menu-toggle{display:none;}} /* mobile drawer */ .mobile-drawer{ position:fixed;inset:0;z-index:1000;visibility:hidden; } .mobile-drawer.is-open{visibility:visible;} .mobile-drawer-overlay{ position:absolute;inset:0;background:rgba(31,31,31,.35);backdrop-filter:blur(2px); opacity:0;transition:opacity .3s var(--ease); } .mobile-drawer.is-open .mobile-drawer-overlay{opacity:1;} .mobile-drawer-panel{ position:absolute;right:0;top:0;height:100%;width:85%;max-width:340px; background:var(--white);box-shadow:var(--shadow-lift); padding:24px;overflow-y:auto; transform:translateX(100%);transition:transform .35s var(--ease); } .mobile-drawer.is-open .mobile-drawer-panel{transform:translateX(0);} .mobile-drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;} .mobile-drawer-close{width:36px;height:36px;border:0;background:transparent;border-radius:50%;} .mobile-drawer-close:hover{background:var(--cream);} /* Shop + Cart buttons at the top of the mobile drawer, above the nav links — matches the bolt.new prototype's mobile menu update. */ .mobile-drawer-shop-btn{ display:flex;align-items:center;justify-content:center;gap:8px; border-radius:var(--radius-sm);background:var(--ink);color:#fff; padding:14px 20px;font-size:.9rem;font-weight:500; transition:background .2s ease; } .mobile-drawer-shop-btn:hover{background:var(--ink-soft);color:#fff;} .mobile-drawer-cart-btn{ display:flex;align-items:center;justify-content:space-between;gap:8px; margin-top:10px;border-radius:var(--radius-sm);border:1px solid var(--line); padding:14px 20px;font-size:.9rem;font-weight:500;color:var(--ink); transition:background .2s ease; } .mobile-drawer-cart-btn:hover{background:var(--cream);color:var(--ink);} .mobile-drawer-cart-btn span{display:flex;align-items:center;gap:8px;} .mobile-drawer-cart-count{ display:flex;align-items:center;justify-content:center;min-width:20px;height:20px; border-radius:999px;background:var(--accent);color:#fff;font-size:.7rem;font-weight:600;padding:0 6px; } .mobile-drawer nav ul{display:flex;flex-direction:column;gap:2px;} .mobile-drawer nav a{display:block;padding:12px 14px;border-radius:var(--radius-sm);font-weight:500;color:var(--ink-muted);} .mobile-drawer nav a:hover{background:var(--cream);color:var(--ink);} .mobile-drawer nav ul ul{padding-left:12px;} /* Highlight the page the visitor is currently on. WordPress adds "current-menu-item" to the

automatically via wp_nav_menu() — no PHP change needed, just style it. */ .mobile-drawer nav li.current-menu-item > a, .mobile-drawer nav li.current-menu-parent > a, .mobile-drawer nav li.current-menu-ancestor > a, .mobile-drawer nav li.current_page_item > a, .mobile-drawer nav li.current_page_parent > a{ background:var(--ink); color:#fff; font-weight:600; } body.drawer-open{ overflow:hidden; position:fixed; left:0; right:0; width:100%; } /* ========================================================= 7. HERO ========================================================= */ .hero{ position:relative;overflow:hidden;background:var(--white); padding:90px 0 40px; } @media(min-width:1024px){.hero{padding:100px 0 60px;}} .hero-grid{display:grid;gap:48px;align-items:center;} @media(min-width:1024px){.hero-grid{grid-template-columns:1fr 1fr;gap:64px;}} .hero-badge{ display:inline-flex;align-items:center;gap:8px; border:1px solid var(--line);background:var(--cream); border-radius:var(--radius-sm);padding:6px 16px; } .hero-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);} .hero-badge span{font-size:.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.2em;color:var(--ink-muted);} .hero h1{ margin-top:20px;font-size:2rem;font-weight:700;letter-spacing:-.02em;line-height:1.1; } @media(min-width:640px){.hero h1{font-size:2.5rem;}} @media(min-width:1024px){.hero h1{font-size:3rem;}} .hero-lead{margin-top:20px;max-width:36em;font-size:1rem;line-height:1.7;color:var(--ink-muted);} .hero-cta{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px;} .hero-social-proof{margin-top:36px;display:flex;align-items:center;gap:16px;} .hero-avatars{display:flex;} .hero-avatars img{ width:36px;height:36px;border-radius:50%;object-fit:cover; border:2px solid var(--white);margin-left:-10px; } .hero-avatars img:first-child{margin-left:0;} .hero-rating{display:flex;align-items:center;gap:4px;} .hero-rating strong{font-size:.875rem;margin-left:4px;} .hero-social-proof small{display:block;font-size:.75rem;color:var(--ink-muted);} .hero-media{position:relative;} .hero-media-frame{ position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius-xl); background:var(--cream);box-shadow:var(--shadow-lift); } .hero-media-frame img{width:100%;height:100%;object-fit:cover;} .hero-float-card{ position:absolute;background:var(--white);border:1px solid var(--line); border-radius:var(--radius-lg);box-shadow:var(--shadow-lift);padding:14px 16px;display:none; } @media(min-width:640px){.hero-float-card{display:block;}} .hero-float-card.bottom-left{bottom:-18px;left:-18px;} .hero-float-card.top-right{top:-14px;right:-14px;padding:10px 16px;} .hero-float-card-row{display:flex;align-items:center;gap:12px;} .hero-float-icon{ width:38px;height:38px;border-radius:50%;background:rgba(200,169,106,.15); color:var(--accent-deep);display:flex;align-items:center;justify-content:center; } .hero-float-card p{margin:0;} .hero-float-title{font-size:.8125rem;font-weight:600;color:var(--ink);} .hero-float-sub{font-size:.6875rem;color:var(--ink-muted);} /* ========================================================= 8. GENERIC SECTIONS ========================================================= */ .section{padding:48px 0;} @media(min-width:1024px){.section{padding:64px 0;}} .section.bg-cream{background:var(--cream);} .section.bg-ink{background:var(--ink);color:#fff;} .section-head{ display:flex;flex-direction:column;gap:16px;justify-content:space-between;margin-bottom:40px; } @media(min-width:640px){.section-head{flex-direction:row;align-items:flex-end;}} .section-head h2{font-size:1.9rem;margin-top:10px;} @media(min-width:640px){.section-head h2{font-size:2rem;}} .section-head p{margin-top:12px;max-width:34em;} .section.bg-ink .section-head{justify-content:center;text-align:center;flex-direction:column;align-items:center;} .section.bg-ink .eyebrow{color:var(--accent);} .section.bg-ink p{color:rgba(255,255,255,.7);} /* category grid (matching orvena-canvas-creations-main) */ .category-grid{display:grid;grid-template-columns:1fr;gap:16px;} @media(min-width:640px){.category-grid{grid-template-columns:repeat(2,1fr);}} @media(min-width:1024px){.category-grid{grid-template-columns:repeat(3,1fr);gap:20px;}} .category-card{ display:grid; grid-template-columns:64px minmax(0,1fr); align-items:center; gap:16px; padding:16px; min-width:0; border-radius:var(--radius-lg); border:1px solid var(--line); background:var(--white); box-shadow:var(--shadow-card); text-decoration:none; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .category-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lift); border-color:rgba(158,74,43,.5); } .category-icon{ flex-shrink:0; width:64px; height:80px; border-radius:6px; background:var(--sand); display:flex; align-items:center; justify-content:center; overflow:hidden; transition:transform .3s var(--ease); } .category-icon img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:6px; } .category-card:hover .category-icon{ transform:scale(1.04); } .category-details{ display:flex; flex-direction:column; min-width:0; } .category-card h3{ font-family:var(--font-sans, inherit); font-size:.95rem; font-weight:600; color:var(--ink); margin:0; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color .2s ease; } .category-card:hover h3{ color:#9e4a2b; } .category-blurb{ font-size:.75rem; color:var(--ink-muted); margin:2px 0 0; line-height:1.35; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; } .category-action{ font-size:.75rem; color:#9e4a2b; font-weight:600; margin:6px 0 0; text-decoration:none; } /* product / bundle grid reused by woocommerce */ .product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;} @media(min-width:640px){.product-grid{gap:24px;}} @media(min-width:1024px){.product-grid{grid-template-columns:repeat(4,1fr);}} /* Product Horizontal Scrollable Carousel (Best sellers / New arrivals) */ .product-carousel-wrapper{ position:relative; margin-top:20px; width:100%; } .product-carousel-track{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding:8px 4px 20px; scrollbar-width:none; /* Firefox */ } .product-carousel-track::-webkit-scrollbar{ display:none; /* Chrome, Safari, Edge */ } .product-carousel-item{ flex:0 0 68vw; max-width:280px; min-width:220px; scroll-snap-align:start; } @media(min-width:640px){ .product-carousel-track{ gap:20px; } .product-carousel-item{ flex:0 0 38vw; max-width:280px; } } @media(min-width:1024px){ .product-carousel-track{ gap:24px; } .product-carousel-item{ flex:0 0 calc(25% - 18px); max-width:320px; } } /* feature grid ("why choose") */ .feature-grid{display:grid;grid-template-columns:1fr;gap:24px;margin-top:56px;} @media(min-width:640px){.feature-grid{grid-template-columns:1fr 1fr;}} @media(min-width:1024px){.feature-grid{grid-template-columns:repeat(3,1fr);}} .feature-card{ border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05); border-radius:var(--radius-lg);padding:28px;transition:background .2s; } .feature-card:hover{background:rgba(255,255,255,.08);} .feature-icon{ width:44px;height:44px;border-radius:var(--radius-sm);background:rgba(200,169,106,.15); color:var(--accent);display:flex;align-items:center;justify-content:center; } .feature-card h3{color:#fff;font-size:1.1rem;margin-top:16px;} .feature-card p{color:rgba(255,255,255,.7);font-size:.9rem;margin-top:8px;} /* Light-background variant: used on sections (like "What You Get") that sit on a white/cream background rather than the dark bg-ink section, so the text stays dark/readable instead of inheriting the white text meant for dark cards. */ .feature-grid.is-light .feature-card{background:var(--white);box-shadow:var(--shadow-soft);} .feature-grid.is-light .feature-card:hover{background:var(--white);box-shadow:var(--shadow-card);} .feature-grid.is-light .feature-icon{background:var(--cream);color:var(--accent-deep);} .feature-grid.is-light .feature-card h3{color:var(--ink);} .feature-grid.is-light .feature-card p{color:var(--ink-muted);} /* "How it works" 4-step card box on the homepage. */ .how-it-works-box{ border:1px solid var(--line);border-radius:var(--radius-xl); background:var(--white);padding:48px 24px; } @media(min-width:640px){.how-it-works-box{padding:56px 48px;}} .how-it-works-steps{ display:grid;grid-template-columns:1fr;gap:32px;margin-top:40px;list-style:none;padding:0; } @media(min-width:640px){.how-it-works-steps{grid-template-columns:1fr 1fr;}} @media(min-width:1024px){.how-it-works-steps{grid-template-columns:repeat(4,1fr);}} .how-it-works-step-head{display:flex;align-items:center;gap:12px;} .how-it-works-step-icon{ display:flex;align-items:center;justify-content:center;flex-shrink:0; width:36px;height:36px;border-radius:50%;background:var(--cream);color:var(--accent-deep); } .how-it-works-steps h3{margin-top:12px;font-size:1.125rem;} .how-it-works-steps p{margin-top:6px;font-size:.875rem;} .how-it-works-steps-cards{margin-top:0;} .how-it-works-steps-cards li{list-style:none;} /* testimonials */ .testimonial-grid{display:grid;grid-template-columns:1fr;gap:24px;margin-top:48px;} @media(min-width:640px){.testimonial-grid{grid-template-columns:1fr 1fr;}} @media(min-width:1024px){.testimonial-grid{grid-template-columns:repeat(3,1fr);}} .testimonial-card{padding:24px;} .testimonial-card h3{font-size:1rem;margin-top:12px;} .testimonial-card p{font-size:.9rem;} .testimonial-foot{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:16px;margin-top:20px;} .testimonial-avatar{ width:36px;height:36px;border-radius:50%;background:var(--cream); display:flex;align-items:center;justify-content:center; font-family:var(--font-display);font-weight:600;color:var(--ink); } .testimonial-name{font-size:.875rem;font-weight:500;color:var(--ink);} .testimonial-role{font-size:.75rem;color:var(--ink-muted);} .stars{display:flex;gap:2px;color:var(--line);} .stars .filled{color:var(--accent);} /* CTA */ .cta-box{ position:relative;overflow:hidden;background:var(--cream); border-radius:var(--radius-xl);padding:56px 24px;text-align:center; } @media(min-width:1024px){.cta-box{padding:88px 64px;}} .cta-box h2{margin-top:12px;font-size:1.9rem;max-width:32em;margin-left:auto;margin-right:auto;} @media(min-width:640px){.cta-box h2{font-size:2rem;}} .cta-box p{max-width:28em;margin:16px auto 0;} .cta-actions{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;} .cta-badges{margin-top:28px;display:flex;flex-wrap:wrap;gap:20px;justify-content:center;} .cta-badges span{display:flex;align-items:center;gap:6px;font-size:.75rem;color:var(--ink-muted);} .cta-badges svg{color:var(--accent-deep);} /* ========================================================= 9. FOOTER ========================================================= */ .site-footer{margin-top:80px;border-top:1px solid var(--line);background:var(--cream);} .footer-newsletter{border-bottom:1px solid var(--line);} .footer-newsletter-inner{padding:48px 0;display:grid;gap:32px;align-items:center;} @media(min-width:1024px){.footer-newsletter-inner{grid-template-columns:1fr 1fr;}} .footer-newsletter h3{font-size:1.5rem;margin-top:10px;} @media(min-width:640px){.footer-newsletter h3{font-size:1.75rem;}} .footer-newsletter p{max-width:30em;margin-top:10px;} .newsletter-form{display:flex;flex-direction:column;gap:10px;max-width:420px;} @media(min-width:640px){.newsletter-form{flex-direction:row;}} @media(min-width:1024px){.newsletter-form{margin-left:auto;}} .newsletter-form input[type=email]{ flex:1;border:1px solid var(--line);border-radius:var(--radius-sm);padding:13px 16px 13px 42px; background:var(--white);position:relative;width:100%; } .newsletter-field{position:relative;flex:1;} .newsletter-field svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ink-subtle);} .newsletter-msg{margin-top:14px;font-size:.875rem;color:var(--accent-deep);} .footer-columns{padding:56px 0;display:grid;gap:40px;grid-template-columns:1fr;} @media(min-width:640px){.footer-columns{grid-template-columns:1fr 1fr;}} @media(min-width:1024px){.footer-columns{grid-template-columns:2fr 1fr 1fr 1fr;}} .footer-brand p{max-width:26em;margin-top:16px;font-size:.9rem;} .footer-socials{display:flex;gap:10px;margin-top:20px;} .footer-socials a{ width:40px;height:40px;border-radius:50%;border:1px solid var(--line); background:var(--white);display:flex;align-items:center;justify-content:center; color:var(--ink-muted);transition:all .2s; } .footer-socials a:hover{border-color:var(--accent);color:var(--accent-deep);} .footer-col-title{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.2em;color:var(--ink);} .footer-col ul{margin-top:16px;display:flex;flex-direction:column;gap:10px;} .footer-col a{font-size:.875rem;color:var(--ink-muted);} .footer-col a:hover{color:var(--ink);} .footer-bottom{ border-top:1px solid var(--line);padding:28px 0; display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:space-between;text-align:center; } @media(min-width:640px){.footer-bottom{flex-direction:row;text-align:left;}} .footer-bottom p{margin:0;font-size:.75rem;color:var(--ink-subtle);} /* ========================================================= 10. WOOCOMMERCE ========================================================= */ .woocommerce-page .site-main, .woocommerce .site-main{padding-top:64px;padding-bottom:48px;} @media(min-width:1024px){ .woocommerce-page .site-main, .woocommerce .site-main{padding-top:80px;padding-bottom:64px;} } /* badges/eyebrow above product title */ .woocommerce ul.products{display:grid !important;grid-template-columns:repeat(2,1fr);gap:16px;margin:0 !important;padding:0 !important;} @media(min-width:640px){.woocommerce ul.products{gap:24px;}} @media(min-width:1024px){.woocommerce ul.products{grid-template-columns:repeat(4,1fr) !important;}} .woocommerce ul.products li.product{ width:100% !important;margin:0 !important;float:none !important; border-radius:var(--radius-lg);border:1px solid var(--line);background:#fff; box-shadow:var(--shadow-soft);transition:all .3s var(--ease);overflow:hidden;padding:0 !important; } .woocommerce ul.products li.product:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:rgba(200,169,106,.3);} .woocommerce ul.products li.product a img{ width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:0;margin:0;transition:transform .5s var(--ease); } .woocommerce ul.products li.product:hover a img{transform:scale(1.03);} .woocommerce ul.products li.product a.woocommerce-LoopProduct-link{display:flex;flex-direction:column;flex:1;} .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-family:var(--font-display);font-weight:500;font-size:1rem;color:var(--ink); padding:6px 16px 0;margin:0;line-height:1.4; } .woocommerce ul.products li.product .price{ padding:6px 16px 16px;font-family:var(--font-display);font-weight:600;color:var(--ink);font-size:1.1rem; } .woocommerce ul.products li.product .price ins{text-decoration:none;color:var(--ink);} .woocommerce ul.products li.product .price del{color:var(--ink-subtle);opacity:1;font-size:.85rem;margin-right:6px;} .woocommerce ul.products li.product .star-rating{margin:8px 16px 0;color:var(--accent);font-size:.85rem;} .woocommerce span.onsale{ position:absolute;top:12px;left:12px;min-height:0;min-width:0; background:var(--accent) !important;color:#fff;border-radius:var(--radius-sm); padding:5px 12px;font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;line-height:1; } .woocommerce ul.products li.product{position:relative;} .woocommerce ul.products li.product .add_to_cart_button, .woocommerce ul.products li.product a.button{ margin:0 16px 16px;align-self:flex-start; } /* single product */ .woocommerce div.product .product_title{font-size:2rem;margin-bottom:8px;} .woocommerce div.product p.price, .woocommerce div.product span.price{ font-family:var(--font-display);font-weight:600;color:var(--ink);font-size:1.6rem; } .woocommerce div.product .woocommerce-product-rating{margin-bottom:20px;} .woocommerce div.product .star-rating{color:var(--accent);} .woocommerce #reviews #comments ol.commentlist li img.avatar{border-radius:50%;} .woocommerce div.product form.cart .quantity input.qty{ border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px;height:auto; } .woocommerce div.product .woocommerce-tabs ul.tabs li{border-radius:var(--radius-sm) !important;background:transparent !important;border:1px solid var(--line) !important;margin-right:8px;} .woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:var(--ink) !important;border-color:var(--ink) !important;} .woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:#fff !important;} .woocommerce div.product .woocommerce-tabs ul.tabs li a{padding:10px 20px !important;font-weight:500;} .woocommerce div.product .woocommerce-tabs ul.tabs::before{border-bottom-color:var(--line) !important;} .woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none !important;} /* ========================================================= CART PAGE (WooCommerce Blocks & Classic Support) ========================================================= */ .woocommerce-cart .page-header-band{ padding:28px 0 12px !important; } .woocommerce-cart .content-wrap{ padding:12px 0 64px !important; } .woocommerce-cart .entry-content, .woocommerce-cart .page-content, .woocommerce-cart .wp-block-woocommerce-cart, .woocommerce-cart .wp-block-woocommerce-empty-cart-block, .woocommerce-cart .wc-block-cart, .woocommerce-cart .wc-block-cart.wp-block-woocommerce-empty-cart-block, .woocommerce-cart .wc-block-cart.is-empty{ max-width:var(--container) !important; width:100% !important; margin:0 auto !important; padding:0 12px 48px 6px !important; box-sizing:border-box !important; } @media(min-width:640px){ .woocommerce-cart .entry-content, .woocommerce-cart .page-content, .woocommerce-cart .wp-block-woocommerce-cart, .woocommerce-cart .wp-block-woocommerce-empty-cart-block, .woocommerce-cart .wc-block-cart, .woocommerce-cart .wc-block-cart.wp-block-woocommerce-empty-cart-block{ padding:0 24px 64px !important; } } @media(min-width:1024px){ .woocommerce-cart .entry-content, .woocommerce-cart .page-content, .woocommerce-cart .wp-block-woocommerce-cart, .woocommerce-cart .wp-block-woocommerce-empty-cart-block, .woocommerce-cart .wc-block-cart, .woocommerce-cart .wc-block-cart.wp-block-woocommerce-empty-cart-block{ padding:0 36px 80px !important; } } /* --------------------------------------------------------- PROCEED TO CHECKOUT BUTTON (WooCommerce Blocks & Classic) --------------------------------------------------------- */ .wc-block-cart__submit, .wc-block-cart__submit-button-wrapper, .wc-proceed-to-checkout{ width:100% !important; box-sizing:border-box !important; padding:0 !important; margin-top:16px !important; } .wc-block-cart__submit-button, .wc-block-components-checkout-button, .wc-block-components-checkout-button__button, .wc-proceed-to-checkout .checkout-button, .woocommerce-cart .wc-proceed-to-checkout a.checkout-button, .woocommerce-cart .checkout-button, a.wc-block-components-checkout-button__button, button.wc-block-components-checkout-button__button, .wp-block-woocommerce-cart .wc-block-cart__submit a{ display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; min-width:100% !important; max-width:100% !important; min-height:50px !important; background:var(--ink) !important; color:#ffffff !important; border-radius:var(--radius-full) !important; padding:14px 24px !important; font-family:var(--font-sans) !important; font-size:1rem !important; font-weight:600 !important; text-decoration:none !important; white-space:nowrap !important; border:none !important; box-shadow:var(--shadow-soft) !important; transition:all .25s var(--ease) !important; cursor:pointer !important; box-sizing:border-box !important; } .wc-block-cart__submit-button:hover, .wc-block-components-checkout-button:hover, .wc-block-components-checkout-button__button:hover, .wc-proceed-to-checkout .checkout-button:hover, .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover, .woocommerce-cart .checkout-button:hover, a.wc-block-components-checkout-button__button:hover, button.wc-block-components-checkout-button__button:hover, .wp-block-woocommerce-cart .wc-block-cart__submit a:hover{ background:var(--accent-deep) !important; color:#ffffff !important; transform:translateY(-2px) !important; box-shadow:var(--shadow-lift) !important; } /* Force crisp white text on all checkout button inner elements */ .wc-block-cart__submit-button *, .wc-block-components-checkout-button *, .wc-block-components-checkout-button__button *, .wc-proceed-to-checkout .checkout-button *, .woocommerce-cart .wc-proceed-to-checkout a.checkout-button *, a.wc-block-components-checkout-button__button *, .wp-block-woocommerce-cart .wc-block-cart__submit *{ color:#ffffff !important; } /* --------------------------------------------------------- ADD TO CART BUTTONS (Website Color Palette) --------------------------------------------------------- */ .wc-block-grid__product-add-to-cart .wp-block-button__link, .wc-block-components-product-button .wp-element-button, .wc-block-components-product-button__button, .wc-block-grid__product-add-to-cart a, .wp-block-button__link.add_to_cart_button, .woocommerce-cart .product-add-to-cart a, .woocommerce .add_to_cart_button, .btn-add-v2{ display:inline-flex !important; align-items:center !important; justify-content:center !important; background:var(--white) !important; color:var(--ink) !important; border:1px solid var(--line) !important; border-radius:var(--radius-full) !important; padding:8px 24px !important; font-family:var(--font-sans) !important; font-size:.8125rem !important; font-weight:600 !important; text-decoration:none !important; white-space:nowrap !important; transition:all .2s var(--ease) !important; box-shadow:0 1px 2px rgba(0,0,0,.03) !important; cursor:pointer !important; box-sizing:border-box !important; } .wc-block-grid__product-add-to-cart .wp-block-button__link:hover, .wc-block-components-product-button .wp-element-button:hover, .wc-block-components-product-button__button:hover, .wc-block-grid__product-add-to-cart a:hover, .wp-block-button__link.add_to_cart_button:hover, .woocommerce-cart .product-add-to-cart a:hover, .woocommerce .add_to_cart_button:hover, .btn-add-v2:hover{ background:var(--ink) !important; color:#ffffff !important; border-color:var(--ink) !important; transform:translateY(-1px) !important; box-shadow:var(--shadow-soft) !important; } .wc-block-grid__product-add-to-cart .wp-block-button__link *, .wc-block-components-product-button .wp-element-button *, .wc-block-components-product-button__button *{ color:inherit !important; } /* --------------------------------------------------------- EMPTY CART STATE (WooCommerce Blocks & Classic) --------------------------------------------------------- */ .woocommerce-cart .wc-block-cart.wp-block-woocommerce-empty-cart-block{ display:block !important; width:100% !important; max-width:100% !important; margin:0 auto !important; } .woocommerce-cart .wc-block-cart__empty-cart-section, .woocommerce-cart .wc-empty-cart-section, .woocommerce-cart .cart-empty{ border:1px dashed var(--line) !important; background:var(--cream) !important; border-radius:var(--radius-xl) !important; padding:44px 20px 36px !important; text-align:center !important; max-width:600px !important; width:100% !important; margin:0 auto 40px !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; box-shadow:var(--shadow-card) !important; box-sizing:border-box !important; } /* Hide default SVG icon */ .woocommerce-cart .wc-block-cart__empty-cart-icon svg, .woocommerce-cart .wc-block-cart__empty-cart-section svg, .woocommerce-cart .wp-block-woocommerce-empty-cart-block svg, .woocommerce-cart .wc-empty-cart-section svg, .woocommerce-cart .cart-empty svg, .woocommerce-cart svg.wc-block-cart__empty-cart-icon-svg{ display:none !important; visibility:hidden !important; opacity:0 !important; width:0 !important; height:0 !important; } .woocommerce-cart .wc-block-cart__empty-cart-icon img{ display:none !important; } /* --------------------------------------------------------- EMPTY CART - SAD FACE & CLEAN CARD --------------------------------------------------------- */ .woocommerce-cart .wc-block-cart__empty-cart-section, .woocommerce-cart .wc-empty-cart-section, .woocommerce-cart .cart-empty, .woocommerce-cart p.cart-empty{ text-align:center !important; margin:24px auto !important; max-width:560px !important; background:var(--cream) !important; border:1px solid var(--line) !important; border-radius:var(--radius-xl) !important; padding:44px 28px !important; box-shadow:0 4px 20px -4px rgba(0,0,0,0.03) !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; box-sizing:border-box !important; } /* Hide WooCommerce SVG icons in empty cart */ .woocommerce-cart .wc-block-cart__empty-cart-icon svg, .woocommerce-cart .cart-empty svg{ display:none !important; } /* Show sad face as a clean block element above the text */ .woocommerce-cart .cart-empty::before{ content:'' !important; display:block !important; width:96px !important; height:96px !important; margin:0 auto 16px !important; background:url("assets/images/sad-face.png") no-repeat center center !important; background-size:contain !important; } .woocommerce-cart .wc-block-cart__empty-cart-icon{ display:block !important; width:96px !important; height:96px !important; margin:0 auto 16px !important; background:url("assets/images/sad-face.png") no-repeat center center !important; background-size:contain !important; } .woocommerce-cart .wc-block-cart__empty-cart-section h2, .woocommerce-cart .wc-block-cart__empty-cart-section .wp-block-heading, .woocommerce-cart .wc-empty-cart-section h2, .woocommerce-cart .cart-empty, .woocommerce-cart p.cart-empty{ font-family:var(--font-display) !important; font-size:1.5rem !important; font-weight:600 !important; color:var(--ink) !important; margin:0 0 12px !important; line-height:1.35 !important; } .woocommerce-cart .return-to-shop{ text-align:center !important; margin:20px auto 0 !important; } .woocommerce-cart .wc-block-cart__empty-cart-section a.wp-element-button, .woocommerce-cart .wc-block-cart__empty-cart-section .wp-block-button__link, .woocommerce-cart .return-to-shop .button{ display:inline-flex !important; align-items:center !important; justify-content:center !important; background:var(--ink) !important; color:#ffffff !important; border-radius:var(--radius-full) !important; padding:14px 36px !important; font-size:.9375rem !important; font-weight:600 !important; text-decoration:none !important; box-shadow:var(--shadow-soft) !important; transition:all .2s var(--ease) !important; margin-top:12px !important; } .woocommerce-cart .wc-block-cart__empty-cart-section a.wp-element-button:hover, .woocommerce-cart .wc-block-cart__empty-cart-section .wp-block-button__link:hover, .woocommerce-cart .return-to-shop .button:hover{ background:var(--accent-deep) !important; color:#ffffff !important; transform:translateY(-2px) !important; box-shadow:var(--shadow-card) !important; } /* --------------------------------------------------------- RECOMMENDED PRODUCTS IN EMPTY CART ("NEW IN STORE") --------------------------------------------------------- */ .woocommerce-cart .wp-block-heading, .woocommerce-cart .wc-block-grid__title{ font-family:var(--font-display) !important; font-size:1.75rem !important; font-weight:600 !important; text-align:center !important; margin:44px auto 24px !important; color:var(--ink) !important; } .woocommerce-cart .wp-block-group, .woocommerce-cart .wc-block-grid, .woocommerce-cart .wp-block-handpicked-products, .woocommerce-cart .wc-block-handpicked-products{ width:100% !important; max-width:100% !important; margin:0 auto !important; box-sizing:border-box !important; } /* Horizontal peekable scrollable track on mobile, 4-column grid on tablet/desktop */ .woocommerce-cart .wc-block-grid__products{ display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; overflow-x:auto !important; scroll-snap-type:x mandatory !important; -webkit-overflow-scrolling:touch !important; gap:14px !important; width:100% !important; max-width:100% !important; margin:20px 0 0 !important; padding:8px 2px 20px !important; list-style:none !important; box-sizing:border-box !important; } .woocommerce-cart .wc-block-grid__products::-webkit-scrollbar{ height:4px; } .woocommerce-cart .wc-block-grid__products::-webkit-scrollbar-thumb{ background:var(--line); border-radius:4px; } @media(min-width:768px){ .woocommerce-cart .wc-block-grid__products{ display:grid !important; grid-template-columns:repeat(4, 1fr) !important; gap:28px !important; overflow-x:visible !important; padding:0 !important; } } /* Compact multi-item scroll card width on mobile (160px) */ .woocommerce-cart .wc-block-grid__product{ display:flex !important; flex-direction:column !important; text-align:center !important; height:auto !important; width:160px !important; min-width:160px !important; max-width:160px !important; flex:0 0 160px !important; scroll-snap-align:start !important; margin:0 !important; padding:0 !important; box-sizing:border-box !important; } @media(min-width:768px){ .woocommerce-cart .wc-block-grid__product{ width:100% !important; min-width:0 !important; max-width:100% !important; flex:none !important; } } .woocommerce-cart .wc-block-grid__product-link{ display:block !important; width:100% !important; text-decoration:none !important; } .woocommerce-cart .wc-block-grid__product-image{ width:100% !important; aspect-ratio:1 / 1 !important; border-radius:var(--radius-lg) !important; overflow:hidden !important; background:var(--sand) !important; margin:0 0 12px !important; } .woocommerce-cart .wc-block-grid__product-image img{ width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; transition:transform .4s var(--ease) !important; } .woocommerce-cart .wc-block-grid__product:hover .wc-block-grid__product-image img{ transform:scale(1.03) !important; } .woocommerce-cart .wc-block-grid__product-title{ font-family:var(--font-sans) !important; font-size:.9375rem !important; font-weight:600 !important; color:var(--ink) !important; line-height:1.4 !important; margin:6px 0 8px !important; height:2.8em !important; display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical !important; overflow:hidden !important; white-space:normal !important; word-break:normal !important; } .woocommerce-cart .wc-block-grid__product-title a{ color:var(--ink) !important; text-decoration:none !important; white-space:normal !important; transition:color .2s var(--ease) !important; } .woocommerce-cart .wc-block-grid__product-title a:hover{ color:var(--accent-deep) !important; } .woocommerce-cart .wc-block-grid__product-price{ font-family:var(--font-display) !important; font-size:1rem !important; font-weight:600 !important; color:var(--ink) !important; margin:0 0 14px !important; } .woocommerce-cart .wc-block-grid__product-price ins{ text-decoration:none !important; color:var(--accent-deep) !important; } .woocommerce-cart .wc-block-grid__product-price del{ color:var(--ink-subtle) !important; font-size:.85em !important; margin-right:6px !important; } .woocommerce-cart .wc-block-grid__product-add-to-cart{ margin-top:auto !important; padding-top:6px !important; width:100% !important; } /* --------------------------------------------------------- FILLED CART WOOCOMMERCE BLOCKS & CLASSIC --------------------------------------------------------- */ .woocommerce-cart .wc-block-cart.wp-block-woocommerce-filled-cart-block, .woocommerce-cart .wc-block-cart:not(.wp-block-woocommerce-empty-cart-block){ display:flex !important; flex-direction:column !important; gap:24px !important; width:100% !important; max-width:100% !important; box-sizing:border-box !important; } @media(min-width:1024px){ .woocommerce-cart .woocommerce{ display:grid; grid-template-columns:minmax(0, 1fr) 380px; gap:40px; align-items:start; width:100%; } .woocommerce-cart .woocommerce-cart-form{ grid-column:1; } .woocommerce-cart .cart-collaterals{ grid-column:2; position:sticky; top:100px; } .woocommerce-cart .wc-block-cart.wp-block-woocommerce-filled-cart-block, .woocommerce-cart .wc-block-cart:not(.wp-block-woocommerce-empty-cart-block){ display:grid !important; grid-template-columns:minmax(0, 1fr) 380px !important; gap:40px !important; align-items:start !important; } .woocommerce-cart .wc-block-cart__main{ min-width:0 !important; width:100% !important; } .woocommerce-cart .wc-block-cart__sidebar, .woocommerce-cart .wc-block-components-sidebar{ width:380px !important; min-width:380px !important; max-width:380px !important; position:sticky !important; top:100px !important; box-sizing:border-box !important; } } .wc-block-cart-items, .woocommerce-cart table.shop_table.cart{ border:1px solid var(--line) !important; border-radius:var(--radius-lg) !important; background:var(--white) !important; overflow:hidden !important; width:100% !important; max-width:100% !important; border-collapse:separate !important; box-sizing:border-box !important; } /* ------------------------------------------------------- Hide product short description in ALL cart line items (Blocks & Classic — desktop and mobile) ------------------------------------------------------- */ .wc-block-components-product-metadata, .wc-block-components-product-metadata p, .wc-block-components-product-metadata span, .wc-block-components-product-metadata *, .wc-block-components-cart-line-item .wc-block-components-product-metadata, .woocommerce-cart .wc-block-components-product-metadata, /* Classic cart short description */ .woocommerce-cart table.cart td.product-name .variation, .woocommerce-cart table.cart td.product-name .woocommerce-product-attributes, .woocommerce-cart table.cart td.product-name .short-description, .woocommerce-cart table.cart td.product-name p:not(.product-name), /* Classic WC variation description */ .woocommerce .cart_item .variation, .woocommerce .cart_item td.product-name dl.variation, .woocommerce .cart_item td.product-name p.description{ display:none !important; visibility:hidden !important; height:0 !important; overflow:hidden !important; margin:0 !important; padding:0 !important; } /* Desktop: add comfortable padding and image/price margins to each line item row */ .wc-block-components-cart-line-item{ padding:16px 24px 16px 16px !important; box-sizing:border-box !important; } /* Image margin left — push image away from card edge */ .wc-block-components-cart-line-item .wc-block-components-product-image, .wc-block-cart-items .wc-block-components-product-image, .wc-block-components-product-image{ margin-left:16px !important; flex-shrink:0 !important; } /* Total price margin right */ .wc-block-components-cart-line-item .wc-block-components-formatted-money-amount, .wc-block-cart-items .wc-block-formatted-money-amount, .woocommerce-cart .wc-block-cart-items__header-total, td.product-subtotal{ padding-right:8px !important; } /* Classic cart: image and total price */ .woocommerce-cart table.cart td.product-thumbnail{ padding-left:20px !important; } .woocommerce-cart table.cart td.product-subtotal{ padding-right:20px !important; } @media(max-width:767px){ .woocommerce-cart .wc-block-cart-items, .woocommerce-cart table.shop_table.cart{ padding:16px 14px !important; border-radius:var(--radius-xl) !important; } .woocommerce-cart .wc-block-components-cart-line-item{ display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; align-items:flex-start !important; gap:12px !important; padding:14px 0 !important; width:100% !important; max-width:100% !important; box-sizing:border-box !important; writing-mode:horizontal-tb !important; overflow:visible !important; } .woocommerce-cart .wc-block-components-cart-line-item:first-child{ padding-top:0 !important; } .woocommerce-cart .wc-block-components-product-image{ width:64px !important; height:64px !important; max-width:64px !important; flex:0 0 64px !important; margin-left:0 !important; } .woocommerce-cart .wc-block-components-product-image img{ width:64px !important; height:64px !important; } .woocommerce-cart .wc-block-components-product-name{ writing-mode:horizontal-tb !important; white-space:normal !important; word-break:break-word !important; overflow-wrap:break-word !important; min-width:0 !important; display:block !important; } .woocommerce-cart .wc-block-components-product-price{ writing-mode:horizontal-tb !important; white-space:nowrap !important; text-align:right !important; flex-shrink:0 !important; } } .wc-block-cart-items th, .woocommerce-cart table.shop_table.cart th{ background:var(--cream) !important; color:var(--ink) !important; font-size:.75rem !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:.08em !important; padding:14px 16px !important; border-bottom:1px solid var(--line) !important; } /* "PRODUCT" header aligns with image margin */ .wc-block-cart-items th:first-child, .woocommerce-cart table.shop_table.cart th.product-name{ padding-left:28px !important; } /* "TOTAL" header aligns with price margin */ .wc-block-cart-items th:last-child, .wc-block-cart-items__header-total, .woocommerce-cart table.shop_table.cart th.product-subtotal{ padding-right:28px !important; text-align:right !important; } /* Per-row total price cell (Block cart) */ .wc-block-cart-items__row .wc-block-components-product-price, .wc-block-cart-items .wc-block-cart-items__row > *:last-child{ padding-right:8px !important; text-align:right !important; } .woocommerce-cart table.shop_table.cart td{ padding:18px 16px !important; border-bottom:1px solid var(--line) !important; vertical-align:middle !important; } .woocommerce-cart table.shop_table.cart tr:last-child td{ border-bottom:none !important; } .woocommerce-cart table.cart td.product-thumbnail img, .wc-block-components-product-image img{ width:72px !important; height:72px !important; object-fit:cover !important; border-radius:var(--radius-md) !important; border:1px solid var(--line) !important; } .woocommerce-cart table.cart td.product-name a, .wc-block-components-product-name{ font-weight:600 !important; font-size:.9375rem !important; color:var(--ink) !important; text-decoration:none !important; transition:color .2s var(--ease) !important; } .woocommerce-cart table.cart td.product-name a:hover, .wc-block-components-product-name:hover{ color:var(--accent-deep) !important; } .woocommerce-cart table.cart td.product-price, .woocommerce-cart table.cart td.product-subtotal, .wc-block-components-product-price{ font-family:var(--font-display) !important; font-size:1.05rem !important; font-weight:600 !important; color:var(--ink) !important; } .woocommerce-cart table.cart a.remove, .wc-block-components-cart-line-item__remove-item{ display:inline-flex !important; align-items:center !important; justify-content:center !important; width:28px !important; height:28px !important; border-radius:50% !important; background:var(--cream) !important; color:var(--ink-muted) !important; font-size:16px !important; line-height:1 !important; transition:all .2s var(--ease) !important; } .woocommerce-cart table.cart a.remove:hover, .wc-block-components-cart-line-item__remove-item:hover{ background:#fee2e2 !important; color:#dc2626 !important; } .woocommerce-cart .actions{ background:var(--cream) !important; padding:16px !important; } .woocommerce-cart .coupon{ display:flex !important; align-items:center !important; gap:8px !important; } .woocommerce-cart .coupon input.input-text{ border-radius:var(--radius-full) !important; padding:10px 18px !important; border:1px solid var(--line) !important; font-size:.875rem !important; } .woocommerce-cart .actions .button{ border-radius:var(--radius-full) !important; padding:10px 22px !important; font-size:.875rem !important; font-weight:600 !important; background:var(--white) !important; color:var(--ink) !important; border:1px solid var(--line) !important; transition:all .2s var(--ease) !important; } .woocommerce-cart .actions .button:hover{ background:var(--ink) !important; color:var(--white) !important; } /* Cart Collaterals / Totals (Classic & Blocks) */ .woocommerce-cart .cart_totals, .wc-block-cart__sidebar, .wc-block-cart__sidebar.wp-block-woocommerce-cart-totals-block, .wc-block-components-sidebar{ border:1px solid var(--line) !important; background:var(--white) !important; border-radius:var(--radius-xl) !important; padding:22px 18px !important; box-shadow:var(--shadow-card) !important; width:100% !important; max-width:100% !important; box-sizing:border-box !important; } @media(min-width:1024px){ .woocommerce-cart .cart_totals, .wc-block-cart__sidebar, .wc-block-cart__sidebar.wp-block-woocommerce-cart-totals-block, .wc-block-components-sidebar{ padding:28px !important; width:380px !important; max-width:380px !important; } } .woocommerce-cart .cart_totals h2, .wc-block-cart__sidebar-title{ font-family:var(--font-display) !important; font-size:1.35rem !important; margin:0 0 20px !important; padding-bottom:12px !important; border-bottom:1px solid var(--line) !important; color:var(--ink) !important; } .woocommerce-cart .cart_totals table.shop_table{ border:none !important; border-radius:0 !important; width:100% !important; margin-bottom:20px !important; border-collapse:collapse !important; } .woocommerce-cart .cart_totals table.shop_table th, .woocommerce-cart .cart_totals table.shop_table td{ background:transparent !important; padding:12px 0 !important; border-top:none !important; border-bottom:1px solid var(--line) !important; } .woocommerce-cart .cart_totals table.shop_table tr.order-total th, .woocommerce-cart .cart_totals table.shop_table tr.order-total td{ font-family:var(--font-display) !important; font-size:1.35rem !important; font-weight:600 !important; color:var(--ink) !important; border-bottom:none !important; padding-top:16px !important; } /* Ensure total amount and rows display completely without clipping */ .wc-block-components-totals-item, .wc-block-components-totals-footer-item{ display:flex !important; align-items:center !important; justify-content:space-between !important; width:100% !important; overflow:visible !important; white-space:normal !important; } .wc-block-components-totals-item__label, .wc-block-components-totals-item__value, .wc-block-components-totals-footer-item .wc-block-components-totals-item__label, .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{ white-space:normal !important; overflow:visible !important; text-overflow:clip !important; display:inline-block !important; min-width:0 !important; } .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{ font-family:var(--font-display) !important; font-size:1.35rem !important; font-weight:600 !important; color:var(--ink) !important; } /* ========================================================= CHECKOUT PAGE: PREMIUM EDITORIAL DESIGN & LAYOUT ========================================================= */ .woocommerce-checkout { margin-top: 10px; padding-bottom: 60px; } .woocommerce-checkout .woocommerce { max-width: 1140px; margin: 0 auto; } .woocommerce-checkout form.checkout { display: grid; grid-template-columns: 1fr; gap: 32px; } @media(min-width: 992px) { .woocommerce-checkout form.checkout { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 48px; align-items: start; } } /* Left Column: Customer Details (Contact Info) */ #customer_details { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 32px 28px; box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.03); } @media(max-width: 767px) { #customer_details { padding: 22px 18px; border-radius: var(--radius-lg); } } #customer_details h3 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: var(--ink); margin-top: 0; margin-bottom: 8px; letter-spacing: -0.01em; } #customer_details .woocommerce-billing-fields::before { content: "Enter your name and email where your digital download access links will be sent."; display: block; font-size: 0.875rem; color: var(--ink-muted); margin-bottom: 24px; line-height: 1.5; } /* Form Fields & Inputs */ .woocommerce form .form-row { margin-bottom: 18px; padding: 0; } .woocommerce form .form-row label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; } .woocommerce form .form-row label .required { color: var(--accent-deep); text-decoration: none; font-weight: 700; } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce-checkout select { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px 16px; background: var(--white); font-family: var(--font-sans); font-size: 0.9375rem; color: var(--ink); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); box-sizing: border-box; } .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(200, 169, 106, .2); } /* Right Column: Order Review & Payment Sticky Sidebar */ #order_review_heading { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: var(--ink); margin-top: 0; margin-bottom: 16px; } .woocommerce-checkout-review-order { background: var(--cream); border-radius: var(--radius-xl); padding: 32px 28px; border: 1px solid var(--line); box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.03); } @media(min-width: 992px) { .woocommerce-checkout-review-order { position: sticky; top: 100px; } } @media(max-width: 767px) { .woocommerce-checkout-review-order { padding: 22px 18px; border-radius: var(--radius-lg); } } /* Checkout Review Table */ .woocommerce table.shop_table { width: 100%; background: var(--white); border-radius: var(--radius-md); border: 1px solid var(--line); overflow: hidden; border-collapse: separate; margin-bottom: 24px; } .woocommerce table.shop_table th { background: var(--cream); font-family: var(--font-sans); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); padding: 12px 16px; border-bottom: 1px solid var(--line); } .woocommerce table.shop_table td { padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 0.875rem; color: var(--ink); } .woocommerce table.shop_table .cart_item td.product-name { font-weight: 500; } .woocommerce table.shop_table .cart_item td.product-total, .woocommerce table.shop_table tr.order-total td { font-family: var(--font-display); font-weight: 600; text-align: right; } .woocommerce table.shop_table tr.order-total th, .woocommerce table.shop_table tr.order-total td { font-size: 1.15rem; font-weight: 700; color: var(--ink); background: var(--white); border-bottom: none; padding: 16px; } /* Payment Gateway Box */ .woocommerce #payment { background: transparent; border: none; padding: 0; } .woocommerce #payment ul.payment_methods { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); padding: 16px 20px; margin-bottom: 20px; list-style: none; } .woocommerce #payment ul.payment_methods li { margin-bottom: 10px; } .woocommerce #payment ul.payment_methods li:last-child { margin-bottom: 0; } .woocommerce #payment ul.payment_methods label { font-weight: 600; color: var(--ink); cursor: pointer; } .woocommerce #payment div.payment_box { background: var(--cream); border-radius: var(--radius-sm); padding: 12px 16px; margin-top: 10px; font-size: 0.8125rem; color: var(--ink-muted); line-height: 1.5; } .woocommerce #payment div.payment_box::before { display: none; } /* Place Order / Complete Checkout Button */ .woocommerce #payment #place_order, .woocommerce-page #payment #place_order { width: 100%; padding: 16px 24px; font-family: var(--font-sans); font-size: 1rem; font-weight: 600; border-radius: var(--radius-full); background: var(--ink); color: var(--white); border: none; cursor: pointer; letter-spacing: 0.02em; transition: all .25s var(--ease); display: block; text-align: center; margin-top: 16px; box-shadow: 0 4px 14px rgba(0,0,0,0.1); } .woocommerce #payment #place_order:hover, .woocommerce-page #payment #place_order:hover { background: var(--accent-deep); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.15); } /* Select2 / Selects */ .select2-container--default .select2-selection--single { border-radius: var(--radius-sm) !important; border-color: var(--line) !important; height: 46px !important; padding: 8px 4px; } /* messages */ .woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noreviews, p.no-comments{ border-top-color:var(--accent) !important;border-radius:var(--radius-sm);background:var(--cream); } .woocommerce-message::before,.woocommerce-info::before{color:var(--accent-deep) !important;} /* breadcrumb */ .woocommerce-breadcrumb{color:var(--ink-subtle);font-size:.8125rem;margin-bottom:24px;} .woocommerce-breadcrumb a{color:var(--ink-muted);} .woocommerce-breadcrumb a:hover{color:var(--ink);} /* Fix: WooCommerce's built-in category list (block/widget) can render the product count with no space before it — "Barber0 products" — when the theme's list-reset removes the natural gap between the category name and count. Force a gap so it always reads correctly. */ .wc-block-product-categories-list-item-count, .woocommerce-product-categories .count, .product-categories .count{ display:inline-block;margin-left:6px; } /* result count / ordering */ .woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering select{font-size:.875rem;color:var(--ink-muted);} .woocommerce .woocommerce-ordering select{border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 12px;} /* pagination */ .woocommerce nav.woocommerce-pagination ul{border:0;} .woocommerce nav.woocommerce-pagination ul li{border:0;margin:0 4px;} .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span{ border-radius:50% !important;width:38px;height:38px;display:flex;align-items:center;justify-content:center; border:1px solid var(--line) !important;color:var(--ink-muted); } .woocommerce nav.woocommerce-pagination ul li a:hover, .woocommerce nav.woocommerce-pagination ul li span.current{ background:var(--ink) !important;color:#fff !important;border-color:var(--ink) !important; } /* ========================================================= 11. GENERIC PAGE / BLOG / 404 ========================================================= */ .page-header-band{padding:100px 0 32px;text-align:center;background:var(--cream);border-bottom:1px solid var(--line);} .woocommerce-page .page-header-band{padding-top:32px;} .page-header-band h1{font-size:2rem;margin:0;} /* Centered, single-line subtitle used on About/FAQ/Contact header bands. Falls back to wrapping on very small screens so it never overflows. */ /* .page-header-subtitle{ max-width:none;margin:12px auto 0;white-space:nowrap; } @media(max-width:640px){ .page-header-subtitle{white-space:normal;max-width:480px;} } */ .page-header-band .page-header-subtitle{ max-width:900px; margin:24px auto 0; padding:0 24px; font-size:22px; line-height:1.8; text-align:center; white-space:normal !important; overflow:visible; text-overflow:unset; } @media (max-width:768px){ .page-header-band .eyebrow{ font-size:14px; } .page-header-band h1{ font-size:42px; line-height:1.15; padding:0 20px; } .page-header-band .page-header-subtitle{ font-size:18px; padding:0 20px; } } @media (max-width:480px){ .page-header-band h1{ font-size:34px; } .page-header-band .page-header-subtitle{ font-size:16px; } } .content-wrap{padding:70px 0;} .entry-content h2{font-size:1.5rem;margin-top:1.6em;} .entry-content h3{font-size:1.25rem;margin-top:1.4em;} .entry-content ul{list-style:disc;padding-left:1.4em;margin-bottom:1em;} .entry-content ul li{color:var(--ink-muted);margin-bottom:.4em;} .entry-content a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:3px;} .entry-content img{border-radius:var(--radius-lg);} .blog-grid{display:grid;grid-template-columns:1fr;gap:32px;} @media(min-width:768px){.blog-grid{grid-template-columns:repeat(2,1fr);}} @media(min-width:1024px){.blog-grid{grid-template-columns:repeat(3,1fr);}} .blog-card{overflow:hidden;} .blog-card img{aspect-ratio:16/10;object-fit:cover;} .blog-card .inner{padding:20px;} .blog-card time{font-size:.75rem;color:var(--ink-subtle);text-transform:uppercase;letter-spacing:.1em;} .blog-card h2{font-size:1.15rem;margin-top:8px;} .blog-card h2 a:hover{color:var(--accent-deep);} .error-404{padding:170px 0 100px;text-align:center;} .error-404 h1{font-size:6rem;color:var(--accent);margin:0;} .error-404 p{max-width:30em;margin:16px auto 30px;} .comment-form input,.comment-form textarea{ width:100%;border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;margin-top:6px; } .comment-form p{margin-bottom:16px;} .comment-form label{font-size:.875rem;font-weight:500;} .widget{margin-bottom:32px;} .widget-title{font-size:1rem;font-family:var(--font-display);margin-bottom:14px;} /* skip link */ .skip-link{ position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 20px;z-index:9999;border-radius:0 0 8px 0; } .skip-link:focus{left:0;} /* utility */ .screen-reader-text{position:absolute !important;clip:rect(1px,1px,1px,1px);overflow:hidden;height:1px;width:1px;} .text-center{text-align:center;} /* ========================================================= ABOUT / FAQ / CONTACT / LEGAL PAGE TEMPLATES (page-templates/template-about.php, template-faq.php, template-contact.php, template-legal.php) ========================================================= */ /* --- About: story block --- */ .about-story-grid{display:grid;gap:48px;align-items:center;} @media(min-width:1024px){.about-story-grid{grid-template-columns:1fr 1fr;gap:64px;}} .about-story-media{ position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius-xl); background:var(--cream);box-shadow:0 20px 40px -20px rgba(31,31,31,.15); } .about-story-media img{width:100%;height:100%;object-fit:cover;} .about-story-text h2{margin-top:12px;} .about-story-text p{margin-top:16px;} /* --- About: stats --- */ .about-stats-grid{display:grid;gap:32px;text-align:center;grid-template-columns:repeat(2,1fr);} @media(min-width:640px){.about-stats-grid{grid-template-columns:repeat(4,1fr);}} .about-stat-value{font-family:var(--font-display);font-size:2.25rem;font-weight:600;color:var(--ink);margin:0;} .about-stat-label{margin-top:8px;font-size:.875rem;color:var(--ink-muted);} /* --- FAQ --- */ .faq-wrap{max-width:760px;margin:0 auto;} .faq-group + .faq-group{margin-top:48px;} .faq-group h2{font-size:1.25rem;} .faq-list{ margin-top:16px;border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;overflow:hidden; } .faq-item{border-bottom:1px solid var(--line);padding:20px;} .faq-item:last-child{border-bottom:none;} .faq-item summary{ display:flex;align-items:center;justify-content:space-between;gap:12px; cursor:pointer;font-weight:500;color:var(--ink);list-style:none;font-size:.9rem; } .faq-item summary::-webkit-details-marker{display:none;} .faq-item summary span:first-child{flex:1;} .faq-item .faq-icon-plus,.faq-item .faq-icon-minus{color:var(--ink-muted);flex-shrink:0;} .faq-item .faq-icon-minus{display:none;} .faq-item[open] .faq-icon-plus{display:none;} .faq-item[open] .faq-icon-minus{display:inline-flex;} .faq-item p{margin:12px 0 0;font-size:.9rem;line-height:1.6;} .faq-cta{ margin-top:48px;border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--cream); padding:40px;text-align:center; } .faq-cta-icon{ margin:0 auto;width:48px;height:48px;border-radius:999px;background:rgba(200,169,106,.15); color:var(--accent-deep);display:flex;align-items:center;justify-content:center; } .faq-cta h2{margin-top:16px;font-size:1.25rem;} .faq-cta p{margin-top:8px;} /* --- Contact --- */ .contact-grid{display:grid;gap:40px;} @media(min-width:1024px){.contact-grid{grid-template-columns:1fr 1.4fr;gap:64px;}} .contact-info{display:flex;flex-direction:column;gap:20px;} .contact-info-card{ display:flex;align-items:flex-start;gap:16px;border:1px solid var(--line);border-radius:var(--radius-lg); background:#fff;padding:20px; } .contact-info-icon{ flex-shrink:0;width:44px;height:44px;border-radius:var(--radius-sm);background:var(--cream); color:var(--accent-deep);display:flex;align-items:center;justify-content:center; } .contact-info-title{font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin:0;} .contact-info-value{margin:4px 0 0;font-size:.9rem;font-weight:500;color:var(--ink);} .contact-info-sub{margin:2px 0 0;font-size:.8rem;color:var(--ink-muted);} .contact-form-card{padding:32px;} .contact-form-head{display:flex;align-items:center;gap:12px;} .contact-form-icon{ width:40px;height:40px;border-radius:var(--radius-sm);background:rgba(200,169,106,.15); color:var(--accent-deep);display:flex;align-items:center;justify-content:center;flex-shrink:0; } .contact-form-head h2{font-size:1.25rem;margin:0;} .contact-form-body{margin-top:24px;} .contact-form-placeholder{ border:1px dashed var(--line);border-radius:1rem;padding:24px;text-align:center; color:var(--ink-muted);font-size:.875rem; } /* Make most contact-form plugins (WPForms, CF7, Fluent Forms) inherit the site's input styling automatically without extra config. */ .contact-form-body input[type=text], .contact-form-body input[type=email], .contact-form-body input[type=tel], .contact-form-body textarea, .contact-form-body select{ width:100%;border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px; font-family:var(--font-body);font-size:.9rem;color:var(--ink); } .contact-form-body button, .contact-form-body input[type=submit]{ background:var(--ink);color:#fff;border:1px solid var(--ink);border-radius:var(--radius-sm); padding:12px 24px;font-weight:500;font-size:.9rem;cursor:pointer; } .contact-form-body button:hover, .contact-form-body input[type=submit]:hover{background:var(--ink-soft);border-color:var(--ink-soft);} /* --- Legal pages --- */ .legal-updated{margin-top:8px;font-size:.85rem;color:var(--ink-muted);} .legal-content{max-width:760px;margin:0 auto;} .legal-content h2{margin-top:40px;font-size:1.15rem;} .legal-content h2:first-child{margin-top:0;} .legal-content p{font-size:.9rem;line-height:1.7;} /* ========================================================= SHOP PAGE — toolbar, filters, product cards ========================================================= */ .shop-page{padding:14px 0 48px;} @media(min-width:1024px){.shop-page{padding:18px 0 64px;}} .shop-toolbar{ display:flex;flex-direction:column;gap:12px;margin-bottom:16px; } @media(min-width:640px){ .shop-toolbar{flex-direction:row;align-items:center;justify-content:space-between;} } .shop-search{ position:relative;flex:1;max-width:420px;display:flex;align-items:center; } .shop-search .icon{position:absolute;left:14px;color:var(--ink-subtle);pointer-events:none;width:16px;height:16px;} .shop-search input{ width:100%;padding:12px 14px 12px 40px;border:1px solid var(--line);border-radius:999px; font-size:.875rem;background:var(--white);color:var(--ink); } .shop-search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(200,169,106,.15);} .shop-toolbar-right{display:flex;align-items:center;gap:10px;} .shop-filter-toggle{ display:flex;align-items:center;gap:8px;padding:11px 18px;border:1px solid var(--line); border-radius:999px;background:var(--white);font-size:.875rem;color:var(--ink-muted);cursor:pointer; } .shop-filter-toggle:hover{color:var(--ink);} .shop-filter-toggle .icon{width:16px;height:16px;} .filter-count{ display:flex;align-items:center;justify-content:center;min-width:20px;height:20px; border-radius:999px;background:var(--ink);color:#fff;font-size:.65rem;font-weight:600;padding:0 5px; } @media(min-width:1024px){.shop-filter-toggle{display:none;}} .shop-sort{ padding:11px 16px;border:1px solid var(--line);border-radius:999px;background:var(--white); font-size:.875rem;color:var(--ink);cursor:pointer; } .shop-active-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:20px;} .filter-chip{ display:flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px; background:var(--cream);font-size:.75rem;color:var(--ink); } .filter-chip .icon{width:12px;height:12px;} .filter-clear-all{font-size:.75rem;color:var(--ink-muted);text-decoration:underline;} .shop-layout{display:grid;gap:32px;margin-top:8px;} @media(min-width:1024px){.shop-layout{grid-template-columns:220px 1fr;}} /* Filters sidebar (desktop) / drawer (mobile) */ .shop-filters{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg,12px); padding:20px; align-self:start; } .shop-filters-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;} .shop-filters-title{font-family:var(--font-display);font-weight:600;font-size:1rem;color:var(--ink);margin:0;} .shop-filter-close{display:none;background:none;border:none;cursor:pointer;color:var(--ink);padding:4px;} .shop-filter-group{margin-bottom:28px;} .shop-filter-label{ font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em; color:var(--ink);margin:0 0 10px; } .shop-filter-group ul{display:flex;flex-direction:column;gap:4px;} .shop-filter-group a{ display:block;padding:8px 12px;border-radius:var(--radius-sm);font-size:.875rem;color:var(--ink-muted); } .shop-filter-group a:hover{background:var(--cream);color:var(--ink);} .shop-filter-group a.is-active{background:var(--ink);color:#fff;} .shop-filter-overlay{display:none;} @media(max-width:1023px){ .shop-filters{ position:fixed;bottom:0;left:0;right:0;z-index:60;max-height:85vh;overflow-y:auto; background:var(--white);border-radius:24px 24px 0 0;box-shadow:var(--shadow-lift); padding:24px;transform:translateY(100%);transition:transform .3s var(--ease); } .shop-filters.is-open{transform:translateY(0);} .shop-filter-close{display:block;} .shop-filter-overlay{ display:none;position:fixed;inset:0;z-index:55;background:rgba(31,31,31,.3);backdrop-filter:blur(2px); } .shop-filter-overlay.is-open{display:block;} } /* Results */ .shop-results-count{font-size:.875rem;color:var(--ink-muted);margin-bottom:16px;} .shop-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;} @media(min-width:640px){.shop-grid{gap:24px;}} @media(min-width:1024px){.shop-grid{grid-template-columns:repeat(3,1fr);}} .product-card{display:flex;flex-direction:column;overflow:hidden;} .product-card-media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--cream);} .product-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);} .product-card:hover .product-card-media img{transform:scale(1.03);} .product-card-media-placeholder{ width:100%;height:100%;display:flex;align-items:center;justify-content:center; font-family:var(--font-display);font-size:2rem;color:var(--ink-subtle); } .product-card-badges{position:absolute;left:12px;top:12px;display:flex;flex-direction:column;gap:6px;} .badge{ border-radius:999px;padding:4px 10px;font-size:.65rem;font-weight:600; text-transform:uppercase;letter-spacing:.08em;color:#fff; } .badge-accent{background:var(--accent);} .product-card-arrow{ position:absolute;right:12px;top:12px;display:flex;align-items:center;justify-content:center; width:32px;height:32px;border-radius:999px;background:rgba(255,255,255,.9); opacity:0;transition:opacity .3s var(--ease);box-shadow:var(--shadow-soft); } .product-card-arrow .icon{width:16px;height:16px;color:var(--ink);} .product-card:hover .product-card-arrow{opacity:1;} .product-card-body{padding:16px;} .product-card-cat{ font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em; color:var(--accent-deep);margin:0; } .product-card-title{ font-family:var(--font-display);font-size:1rem;font-weight:500;line-height:1.4; color:var(--ink);margin:6px 0 0; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .product-card-rating{display:flex;align-items:center;gap:5px;margin-top:8px;} .product-card-rating .icon{width:14px;height:14px;color:var(--accent);fill:var(--accent);} .product-card-rating span{font-size:.75rem;color:var(--ink);font-weight:500;} .product-card-review-count{color:var(--ink-subtle) !important;font-weight:400 !important;} .product-card-price{margin-top:10px;font-family:var(--font-display);font-size:1.05rem;font-weight:600;color:var(--ink);} .product-card-price del{color:var(--ink-subtle);font-weight:400;font-size:.85em;margin-right:6px;} .product-card-price ins{text-decoration:none;} .shop-empty-state{ border:1px solid var(--line);background:var(--cream);border-radius:var(--radius-lg); padding:48px 32px;text-align:center; } .shop-empty-title{font-family:var(--font-display);font-size:1.15rem;font-weight:500;color:var(--ink);margin:0;} .shop-empty-text{margin-top:8px;font-size:.875rem;color:var(--ink-muted);} .shop-pagination{display:flex;justify-content:center;gap:6px;margin-top:40px;} .shop-pagination .page-numbers{ display:flex;align-items:center;justify-content:center;min-width:38px;height:38px; border-radius:999px;font-size:.875rem;color:var(--ink-muted);padding:0 10px; } .shop-pagination .page-numbers.current{background:var(--ink);color:#fff;} .shop-pagination .page-numbers:hover:not(.current){background:var(--cream);color:var(--ink);} /* ========================================================= BUNDLE CARDS & BUNDLES PAGE V2 (Empty & Filled States) ========================================================= */ .badge-ink{background:var(--ink);} .bundles-page{padding:24px 20px 80px;} @media(min-width:640px){.bundles-page{padding:32px 32px 96px;}} .bundles-grid-v2, .bundle-grid{ display:grid; grid-template-columns:1fr; gap:32px; margin-top:24px; } @media(min-width:768px){ .bundles-grid-v2, .bundle-grid{ grid-template-columns:repeat(2,1fr); gap:36px; } } .bundle-card-v2, .bundle-card{ display:flex; flex-direction:column; border-radius:var(--radius-xl); border:1px solid var(--line); background:var(--white); box-shadow:var(--shadow-card); overflow:hidden; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .bundle-card-v2:hover, .bundle-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); border-color:rgba(200,169,106,.4); } .bundle-card-v2-media, .bundle-card-media{ position:relative; display:block; width:100%; aspect-ratio:16/9; background:var(--sand); overflow:hidden; } .bundle-card-v2-media img, .bundle-card-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease); } .bundle-card-v2:hover .bundle-card-v2-media img, .bundle-card:hover .bundle-card-media img{ transform:scale(1.04); } .bundle-card-placeholder{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:var(--sand); color:var(--ink-subtle); font-family:var(--font-display); font-size:3rem; font-weight:600; } .bundle-save-badge{ position:absolute; top:14px; left:14px; background:var(--accent-deep); color:var(--white); border-radius:var(--radius-full); padding:4px 14px; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; box-shadow:0 2px 8px rgba(0,0,0,.2); } .bundle-card-v2-body, .bundle-card-body{ padding:24px; display:flex; flex-direction:column; flex:1; } .bundle-card-v2-eyebrow{ font-size:.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--accent-deep); margin:0; } .bundle-card-v2-title{ margin:8px 0 0; font-family:var(--font-display); font-size:1.35rem; font-weight:600; line-height:1.3; } .bundle-card-v2-title a{color:var(--ink);transition:color .2s var(--ease);} .bundle-card-v2-title a:hover{color:var(--accent-deep);} .bundle-card-v2-desc, .bundle-card-desc{ margin:10px 0 0; font-size:.875rem; line-height:1.55; color:var(--ink-muted); } .bundle-card-v2-included, .bundle-card-included{ margin:16px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; } .bundle-card-v2-included li, .bundle-card-included li{ display:flex; align-items:center; gap:10px; font-size:.8125rem; color:var(--ink); } .bundle-card-v2-included .icon, .bundle-card-included .icon{ width:16px; height:16px; color:var(--accent-deep); flex-shrink:0; } .bundle-more-item{ font-size:.75rem !important; color:var(--ink-subtle) !important; padding-left:26px; } .bundle-card-v2-footer{ margin-top:auto; padding-top:20px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; } .bundle-card-v2-pricing{ display:flex; align-items:center; gap:10px; } .bundle-card-v2-price, .bundle-card .product-card-price{ font-family:var(--font-display); font-size:1.35rem; font-weight:600; color:var(--ink); margin:0; } .bundle-card-v2-price del, .bundle-card .product-card-price del{ color:var(--ink-subtle); font-size:.85em; margin-right:6px; } .bundle-discount-pill{ background:rgba(200,169,106,.15); color:var(--accent-deep); font-size:.75rem; font-weight:700; padding:3px 10px; border-radius:var(--radius-full); text-transform:uppercase; letter-spacing:.04em; } .bundle-buy-btn{ border-radius:var(--radius-full) !important; padding:12px 28px !important; font-size:.875rem !important; font-weight:600 !important; } /* Empty State for Bundles */ .bundle-empty-state{ border:1px dashed var(--line); background:var(--cream); border-radius:var(--radius-xl); padding:64px 24px; text-align:center; max-width:680px; margin:40px auto; } .bundle-empty-icon{ width:64px; height:64px; border-radius:50%; background:rgba(200,169,106,.2); color:var(--accent-deep); display:inline-flex; align-items:center; justify-content:center; margin-bottom:16px; } .bundle-empty-icon .icon{ width:32px; height:32px; } .bundle-empty-title{ font-family:var(--font-display); font-size:1.6rem; margin:0 0 10px; color:var(--ink); } .bundle-empty-text{ font-size:.9375rem; color:var(--ink-muted); max-width:480px; margin:0 auto 24px; line-height:1.6; } .bundles-bottom-hint{ text-align:center; margin-top:48px; font-size:.9375rem; color:var(--ink-muted); } .bundles-bottom-hint a{ color:var(--accent-deep); font-weight:600; text-decoration:underline; margin-left:4px; } .bundles-bottom-hint a:hover{ color:var(--ink); } /* ========================================================= CATEGORIES BROWSE PAGE ========================================================= */ .categories-page{padding:48px 0 64px;} .categories-grid{display:grid;grid-template-columns:1fr;gap:24px;} @media(min-width:640px){.categories-grid{grid-template-columns:repeat(2,1fr);}} @media(min-width:1024px){.categories-grid{grid-template-columns:repeat(3,1fr);gap:28px;}} .category-browse-card{ display:flex; flex-direction:column; border-radius:var(--radius-lg); border:1px solid var(--line); background:var(--white); box-shadow:var(--shadow-card); overflow:hidden; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .category-browse-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); border-color:rgba(200,169,106,.4); } .category-browse-media{ position:relative; width:100%; aspect-ratio:16/10; background:var(--sand); overflow:hidden; } .category-browse-media img, .category-browse-media .category-card-img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s var(--ease); } .category-browse-card:hover .category-browse-media img, .category-browse-card:hover .category-browse-media .category-card-img{ transform:scale(1.04); } .category-browse-placeholder{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:var(--sand); color:var(--ink-subtle); font-family:var(--font-display); font-size:2.5rem; font-weight:600; } .category-browse-body{ padding:20px 24px 24px; display:flex; flex-direction:column; flex:1; } .category-browse-title{ margin:0; font-family:var(--font-display); font-size:1.2rem; font-weight:600; color:var(--ink); transition:color .2s var(--ease); } .category-browse-card:hover .category-browse-title{ color:var(--accent-deep); } .category-browse-desc{ margin:8px 0 16px; font-size:.875rem; line-height:1.55; color:var(--ink-muted); flex:1; } .category-browse-footer{ display:flex; align-items:center; justify-content:space-between; padding-top:12px; border-top:1px solid var(--line); font-size:.8125rem; font-weight:600; color:var(--accent-deep); } .category-browse-arrow{ display:inline-flex; align-items:center; transition:transform .2s var(--ease); } .category-browse-card:hover .category-browse-arrow{ transform:translateX(4px); } /* ========================================================= FICHE PRODUIT — image trop grande (WooCommerce n'a pas de contrainte de taille par défaut sur la galerie produit) ========================================================= */ .back-to-shop { display:inline-flex; align-items:center; gap:8px; color:var(--ink-muted); font-size:.875rem; font-weight:500; text-decoration:none; margin-bottom:24px; transition:color .2s ease; } .back-to-shop:hover { color:var(--ink); } .back-to-shop .icon { width:16px; height:16px; transition:transform .2s ease; } .back-to-shop:hover .icon { transform:translateX(-3px); } .single-product div.product{ display:grid;grid-template-columns:1fr;gap:32px; } @media(min-width:900px){ .single-product div.product{grid-template-columns:1.1fr 0.9fr;gap:64px;align-items:start;} } .single-product div.product .woocommerce-product-gallery{max-width:100%;width:100%;} .single-product div.product .woocommerce-product-gallery img{ width:100%;height:auto;max-height:600px;object-fit:cover; border-radius:var(--radius-lg,12px);display:block; } .single-product div.product .woocommerce-product-gallery__wrapper{margin:0;} /* Single Product Details Overrides to match Lovable/Image 2 */ .single-product div.product .product_title { font-size: 2.25rem !important; font-weight: 700; line-height: 1.2; margin-top: 8px; margin-bottom: 12px; color: var(--ink); } .single-product div.product p.price, .single-product div.product span.price { font-family: var(--font-display); font-size: 1.5rem !important; color: var(--ink) !important; font-weight: 600; margin-bottom: 16px; } .single-product div.product .woocommerce-product-details__short-description { font-size: 0.9375rem; line-height: 1.6; color: var(--ink-muted); margin-bottom: 24px; } /* Quantity & Add to Cart form adjustments */ .single-product div.product form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 24px; margin-bottom: 32px; } .single-product div.product form.cart .quantity { margin: 0 !important; float: none !important; } .single-product div.product form.cart .quantity input.qty { width: 72px !important; height: 46px !important; border-radius: 999px !important; border: 1px solid var(--line) !important; background: transparent !important; font-size: 0.9375rem !important; font-weight: 500 !important; } .single-product div.product form.cart .button { height: 46px !important; padding: 0 32px !important; border-radius: 999px !important; font-size: 0.9375rem !important; font-weight: 600 !important; background: var(--ink) !important; color: #fff !important; border: none !important; transition: background .2s ease; } .single-product div.product form.cart .button:hover { background: var(--ink-soft) !important; } /* Styled lists and layout adjustments */ .single-product div.product .woocommerce-tabs { margin-top: 48px; border-top: 1px solid var(--line); padding-top: 32px; } /* ========================================================= SHOP PAGE V2 — rebuilt to match the "All templates" design reference (breadcrumb, simple H1, sidebar filters, colored product cards with NEW/BEST SELLER badges). ========================================================= */ .shop-page-v2{ padding:14px 12px 48px; } @media(min-width:640px){ .shop-page-v2{ padding:16px 20px 56px 24px; } } @media(min-width:1024px){ .shop-page-v2{ padding:18px 24px 64px 36px; } } @media(min-width:1280px){ .shop-page-v2{ padding:18px 28px 64px 48px; } } .shop-breadcrumb{display:flex;align-items:center;gap:8px;font-size:.8125rem;color:var(--ink-muted);margin-bottom:10px;} .shop-breadcrumb a{color:var(--ink-muted);} .shop-breadcrumb a:hover{color:var(--ink);} .shop-breadcrumb span:last-child{color:var(--ink);} .shop-title{font-size:2.25rem;margin:0;line-height:1.15;} .shop-subtitle{margin-top:6px;color:var(--ink-muted);font-size:.9375rem;max-width:44em;} .shop-layout-v2{display:grid;gap:28px;margin-top:24px;} @media(min-width:1024px){.shop-layout-v2{grid-template-columns:240px 1fr;align-items:start;margin-top:28px;}} /* Sidebar filters */ .shop-filters-v2{background:transparent;} .shop-filters-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;} .shop-filters-title{font-family:var(--font-display);font-weight:600;font-size:1.0625rem;color:var(--ink);margin:0;} .filter-clear-all{font-size:.8125rem;color:var(--accent-deep);text-decoration:underline;} .shop-filter-close{display:none;background:none;border:none;cursor:pointer;color:var(--ink);padding:4px;} .shop-filter-group{margin-top:24px;padding-top:24px;border-top:1px solid var(--line);} .shop-filter-group:first-of-type{border-top:none;padding-top:0;} .shop-filter-group-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px;} .shop-filter-group-head .shop-filter-label{margin-bottom:0;} .shop-filter-group-clear{font-size:.75rem;color:var(--accent-deep);text-decoration:underline;} .shop-filter-group-clear:hover{color:var(--ink);} .shop-filter-label{ font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em; color:var(--ink);margin:0 0 14px; } .shop-filter-checklist{display:flex;flex-direction:column;gap:12px;} .shop-filter-checklist label{ display:flex;align-items:center;gap:10px;font-size:.875rem;color:var(--ink-muted);cursor:pointer; } .shop-filter-checklist input[type="checkbox"]{ width:16px;height:16px;border-radius:4px;accent-color:var(--accent);cursor:pointer; } .shop-filter-checklist label:hover{color:var(--ink);} .shop-price-slider{ -webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:var(--radius-full); background:var(--line);outline:none;margin-top:6px;accent-color:var(--accent); } .shop-price-slider::-webkit-slider-thumb{ -webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%; background:var(--accent);cursor:pointer;border:2px solid var(--white);box-shadow:0 1px 3px rgba(0,0,0,.2); } .shop-price-slider::-moz-range-thumb{ width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer; border:2px solid var(--white);box-shadow:0 1px 3px rgba(0,0,0,.2); } .shop-price-value{margin-top:10px;font-size:.8125rem;color:var(--ink-muted);} .shop-filter-overlay{display:none;} @media(max-width:1023px){ .shop-filters-v2{ position:fixed;bottom:0;left:0;right:0;z-index:60;max-height:85vh;overflow-y:auto; background:var(--white);border-radius:24px 24px 0 0;box-shadow:var(--shadow-lift); padding:24px;transform:translateY(100%);transition:transform .3s var(--ease); } .shop-filters-v2.is-open{transform:translateY(0);} .shop-filter-close{display:block;} .shop-filter-overlay{display:none;position:fixed;inset:0;z-index:55;background:rgba(31,31,31,.3);backdrop-filter:blur(2px);} .shop-filter-overlay.is-open{display:block;} } /* Results toolbar */ .shop-results-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap;} .shop-filter-toggle{ display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--line); border-radius:var(--radius-full);font-size:.875rem;color:var(--ink);background:var(--white); } @media(min-width:1024px){.shop-filter-toggle{display:none;}} .shop-filter-toggle .filter-count{ background:var(--accent);color:var(--white);border-radius:var(--radius-full); font-size:.6875rem;padding:1px 7px; } .shop-results-count{font-size:.875rem;color:var(--ink-muted);margin:0;flex:1;} .shop-sort-form{margin-left:auto;} .shop-sort{ border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 14px; font-size:.8125rem;color:var(--ink);background:var(--white); } /* Product grid v2 */ .product-grid-v2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;align-items:stretch;} @media(min-width:640px){.product-grid-v2{grid-template-columns:repeat(3,1fr);gap:24px;}} @media(min-width:1280px){.product-grid-v2{grid-template-columns:repeat(4,1fr);gap:24px;}} .product-card-v2{ display:flex; flex-direction:column; height:100%; min-width:0; } .product-card-v2-media{ position:relative; display:block; aspect-ratio:4/5; width:100%; flex-shrink:0; overflow:hidden; border-radius:8px; background:var(--sand); } .product-card-v2-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s var(--ease); } .product-card-v2:hover .product-card-v2-media img{transform:scale(1.03);} .product-card-media-placeholder{ width:100%;height:100%;display:flex;align-items:center;justify-content:center; background:var(--sand);color:var(--ink-subtle);font-family:var(--font-display);font-size:2.5rem; } .badge-pill{ position:absolute;top:10px;left:10px;border-radius:var(--radius-full); padding:4px 10px;font-size:.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em; color:var(--white); } .badge-pill.badge-new{background:#9e4a2b;} .badge-pill.badge-best-seller{background:#ffffff;color:#1f1f1f;box-shadow:0 2px 6px rgba(0,0,0,0.06);} .product-card-v2-body{ padding-top:10px; display:flex; flex-direction:column; flex:1; min-height:0; } .product-card-v2-title{ margin:0; font-family:var(--font-sans, inherit); font-size:.9375rem; font-weight:500; line-height:1.35; min-height:2.7em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .product-card-v2-title a{color:var(--ink);text-decoration:none;} .product-card-v2-title a:hover{color:#9e4a2b;} .product-card-v2-footer{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:8px; } .product-card-v2-price{font-family:var(--font-sans, inherit);font-size:.9375rem;font-weight:600;color:var(--ink);} .product-card-v2-price del{color:var(--ink-subtle);font-weight:400;font-size:.85em;margin-right:6px;} .product-card-v2-price ins{text-decoration:none;} .btn-add-v2{ display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--line);border-radius:var(--radius-full); padding:5px 14px;font-size:.8125rem;font-weight:500;color:var(--ink);background:var(--secondary, #f0ede6); transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease); flex-shrink:0; text-decoration:none; } .btn-add-v2:hover{background:var(--ink);color:var(--white);border-color:var(--ink);} .btn-add-v2.added::after{content:" ✓";} /* Hide WooCommerce "View cart" link in shop product cards on ALL screen sizes */ .product-card-v2-footer .added_to_cart, .product-card-v2-footer .wc-forward, .product-card-v2-footer a.added_to_cart, .product-grid-v2 .added_to_cart, .product-grid-v2 .wc-forward, .shop-layout .added_to_cart, .shop-layout .wc-forward, .woocommerce-page .product-card-v2-footer .added_to_cart, .woocommerce-page .product-card-v2-footer .wc-forward{ display:none !important; } /* On mobile: restrict product card footer so button never overflows */ @media(max-width:639px){ .product-card-v2-footer{ flex-wrap:nowrap; gap:6px; overflow:hidden; } .product-card-v2-price{ min-width:0; flex-shrink:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .btn-add-v2{ padding:6px 10px; font-size:.75rem; flex-shrink:0; } } /* ========================================================= SINGLE PRODUCT PAGE V2 ========================================================= */ .single-product-page-v2{ padding-bottom:64px; } /* Breadcrumb */ .single-product-breadcrumb{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:12px 0 16px; font-size:.8125rem; color:var(--ink-subtle); margin:0; } @media(min-width:1024px){ .single-product-breadcrumb{ padding:14px 0 20px; } } .single-product-breadcrumb a{ color:var(--ink-muted); transition:color .2s var(--ease); } .single-product-breadcrumb a:hover{ color:var(--accent-deep); text-decoration:underline; } .single-product-breadcrumb .crumb-sep{ color:var(--ink-subtle); font-size:.875rem; user-select:none; } .single-product-breadcrumb .crumb-current{ color:var(--ink); font-weight:500; } /* Main 2-Column Grid Layout */ .single-product-layout-v2{ display:grid; gap:40px; align-items:start; } @media(min-width:1024px){ .single-product-layout-v2{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:56px; } } @media(min-width:1280px){ .single-product-layout-v2{ grid-template-columns:minmax(0, 1.05fr) minmax(0, 0.95fr); gap:72px; } } /* Gallery Showcase Column (Left) — Clean product image without blue background */ .single-product-gallery-col{ display:flex; flex-direction:column; } .single-product-showcase-card{ position:relative; overflow:hidden; border-radius:var(--radius-lg); background:var(--white); border:1px solid var(--line); box-shadow:var(--shadow-card); width:100%; display:flex; align-items:center; justify-content:center; } .single-product-main-img-wrap{ width:100%; height:auto; display:flex; align-items:center; justify-content:center; } .single-main-img{ width:100%; height:auto; display:block; object-fit:cover; border-radius:var(--radius-lg); transition:opacity .25s var(--ease); } /* Thumbnails Row */ .single-product-thumbnails-row{ display:flex; align-items:center; gap:12px; margin-top:14px; overflow-x:auto; padding-bottom:4px; } .single-thumb-btn{ width:76px; height:76px; flex-shrink:0; border-radius:var(--radius-md); overflow:hidden; background:var(--sand); border:2px solid transparent; padding:0; cursor:pointer; transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); } .single-thumb-btn:hover{ border-color:var(--line); transform:translateY(-1px); } .single-thumb-btn.is-active{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); } .single-thumb-btn img{ width:100%; height:100%; object-fit:cover; } /* Info Column (Right) */ .single-product-info-col{ display:flex; flex-direction:column; } .single-product-eyebrow{ font-size:.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-subtle); margin:0 0 8px; } .single-product-title{ font-family:var(--font-display); font-size:clamp(1.875rem, 2.5vw, 2.375rem); font-weight:600; line-height:1.15; color:var(--ink); margin:0 0 10px; } .single-product-price{ font-family:var(--font-display); font-size:1.5rem; font-weight:600; color:var(--ink); margin:0 0 16px; } .single-product-price del{ color:var(--ink-subtle); font-weight:400; font-size:.85em; margin-right:8px; } .single-product-price ins{ text-decoration:none; } .single-product-short-desc{ font-size:.9375rem; line-height:1.6; color:var(--ink-muted); margin:0 0 24px; max-width:48ch; } .single-product-short-desc p{ margin:0 0 10px; } .single-product-short-desc p:last-child{ margin-bottom:0; } /* Full Product Description Section (Below 2-column showcase) */ .single-product-full-description-section{ margin-top:40px; padding-top:32px; border-top:1px solid var(--line, #e2ded5); } @media(min-width:768px){ .single-product-full-description-section{ margin-top:64px; padding-top:48px; } } .single-product-description-container{ max-width:760px; margin:0 auto; padding:0; } .single-product-description-container h2{ font-family:var(--font-display, 'Fraunces', serif); font-size:1.35rem; font-weight:600; color:var(--ink, #1f1f1f); margin:28px 0 12px; line-height:1.3; } @media(min-width:768px){ .single-product-description-container h2{ font-size:1.65rem; margin:36px 0 16px; } } .single-product-description-container h2:first-child{ margin-top:0; } .single-product-description-container h3{ font-family:var(--font-display, 'Fraunces', serif); font-size:1.15rem; font-weight:600; color:var(--ink, #1f1f1f); margin:24px 0 10px; } @media(min-width:768px){ .single-product-description-container h3{ font-size:1.3rem; margin:28px 0 12px; } } .single-product-description-container p{ font-size:.9375rem; line-height:1.7; color:var(--ink-muted, #555); margin:0 0 16px; } @media(min-width:768px){ .single-product-description-container p{ font-size:1rem; line-height:1.75; margin:0 0 18px; } } .single-product-description-container strong{ color:var(--ink, #1f1f1f); font-weight:600; } .single-product-description-container ul, .single-product-description-container ol{ margin:0 0 20px 16px; padding:0; color:var(--ink-muted, #555); line-height:1.65; } @media(min-width:768px){ .single-product-description-container ul, .single-product-description-container ol{ margin:0 0 24px 20px; line-height:1.75; } } .single-product-description-container li{ margin-bottom:8px; font-size:.9375rem; } @media(min-width:768px){ .single-product-description-container li{ margin-bottom:10px; font-size:1rem; } } .single-product-description-container a{ color:var(--accent-deep, #9e4a2b); text-decoration:underline; word-break:break-word; } .single-product-description-container a:hover{ color:var(--ink, #1f1f1f); } /* Actions: Quantity + Add to Cart + Buy Now */ .single-product-actions-area{ margin-bottom:20px; } .single-product-btn-group{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; } /* Quantity Stepper */ .qty-stepper{ display:inline-flex; align-items:center; justify-content:space-between; height:44px; background:var(--sand); border:1px solid var(--line); border-radius:var(--radius-sm); padding:0 2px; min-width:104px; } .qty-step-btn{ background:transparent; border:none; color:var(--ink-muted); width:32px; height:36px; display:flex; align-items:center; justify-content:center; font-size:1.125rem; font-weight:500; cursor:pointer; border-radius:var(--radius-sm); transition:color .15s var(--ease), background .15s var(--ease); } .qty-step-btn:hover{ color:var(--ink); background:rgba(0,0,0,0.04); } .qty-input{ width:30px; text-align:center; border:none; background:transparent; font-family:var(--font-sans); font-size:.9375rem; font-weight:600; color:var(--ink); -moz-appearance:textfield; padding:0; cursor:default; } .qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; } /* Add to Cart Button */ .btn-single-add-to-cart{ display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 30px; background:var(--ink); color:var(--white) !important; font-family:var(--font-sans); font-size:.875rem; font-weight:600; border:1px solid var(--ink); border-radius:var(--radius-full); cursor:pointer; transition:all .2s var(--ease); white-space:nowrap; box-shadow:var(--shadow-soft); } .btn-single-add-to-cart:hover{ background:var(--accent-deep); border-color:var(--accent-deep); color:var(--white) !important; transform:translateY(-1px); box-shadow:var(--shadow-card); } .btn-single-add-to-cart.is-added{ background:var(--accent-deep); border-color:var(--accent-deep); } /* Buy Now Button */ .btn-single-buy-now{ display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 28px; background:var(--white); color:var(--ink); font-family:var(--font-sans); font-size:.875rem; font-weight:600; border:1px solid var(--line); border-radius:var(--radius-full); cursor:pointer; transition:all .2s var(--ease); white-space:nowrap; } .btn-single-buy-now:hover{ background:var(--cream); border-color:var(--accent); color:var(--accent-deep); transform:translateY(-1px); } .btn-single-buy-now.is-loading{ opacity:.7; pointer-events:none; } /* Trust Perks List */ .single-product-perks-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:24px; } .perk-item{ display:flex; align-items:center; gap:10px; font-size:.8125rem; color:var(--ink-muted); } .perk-icon{ display:flex; align-items:center; justify-content:center; width:18px; height:18px; flex-shrink:0; } .perk-icon svg{ width:16px; height:16px; } .perk-icon.perk-zap{ color:var(--accent); } .perk-icon.perk-shield{ color:var(--accent-deep); } /* "What's included" Feature Box */ .single-product-included-card{ background:var(--cream); border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px; } .included-card-heading{ font-family:var(--font-display); font-size:1.125rem; font-weight:600; color:var(--ink); margin:0 0 16px; } .included-checklist{ display:flex; flex-direction:column; gap:10px; margin:0 0 18px; } .included-checklist li{ display:flex; align-items:flex-start; gap:10px; font-size:.875rem; color:var(--ink-soft); line-height:1.4; } .check-mark{ color:var(--accent); font-weight:700; font-size:.9375rem; flex-shrink:0; margin-top:1px; } .included-card-license{ border-top:1px solid var(--line); padding-top:14px; } .license-heading{ font-size:.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-subtle); margin:0 0 4px; } .license-desc{ font-size:.8125rem; line-height:1.45; color:var(--ink-muted); margin:0; } /* Related Products Section */ .single-product-related-section{ margin-top:64px; padding-top:48px; border-top:1px solid var(--line); } .related-section-title{ font-family:var(--font-display); font-size:1.75rem; font-weight:600; color:var(--ink); margin:0 0 28px; } .related-grid-v2{ display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; } @media(min-width:768px){ .related-grid-v2{ grid-template-columns:repeat(3, 1fr); } } /* ========================================================= CART DRAWER (SLIDE-OUT SHEET — LOVABLE DESIGN) ========================================================= */ .cart-drawer{ position:fixed; inset:0; z-index:99999; visibility:hidden; pointer-events:none; transition:visibility .3s ease; } .cart-drawer.is-open{ visibility:visible; pointer-events:auto; } .cart-drawer-overlay{ position:absolute; inset:0; background:rgba(31,31,31,.45); backdrop-filter:blur(3px); opacity:0; transition:opacity .3s ease; } .cart-drawer.is-open .cart-drawer-overlay{ opacity:1; } .cart-drawer-panel{ position:absolute; top:0; right:0; bottom:0; width:100%; max-width:440px; background:#fff; box-shadow:-8px 0 32px rgba(0,0,0,.15); display:flex; flex-direction:column; transform:translateX(100%); transition:transform .3s cubic-bezier(0.16,1,0.3,1); box-sizing:border-box; } .cart-drawer.is-open .cart-drawer-panel{ transform:translateX(0); } .cart-drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid var(--line, #e2ded5); background:#fff; } .cart-drawer-title{ font-family:var(--font-display, 'Fraunces', serif); font-size:1.25rem; font-weight:600; color:var(--ink, #1f1f1f); margin:0; } .cart-drawer-close{ background:none; border:none; padding:6px; cursor:pointer; color:var(--ink-muted, #76736d); display:inline-flex; align-items:center; justify-content:center; border-radius:50%; transition:all .2s ease; } .cart-drawer-close:hover{ background:var(--cream, #f7f5f0); color:var(--ink, #1f1f1f); } /* Empty drawer */ .cart-drawer-empty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px 28px; text-align:center; } .cart-drawer-empty-icon{ width:48px; height:48px; display:flex; align-items:center; justify-content:center; color:var(--ink-muted, #76736d); margin-bottom:12px; } .cart-drawer-empty-text{ font-size:.9rem; color:var(--ink-muted, #76736d); max-width:280px; margin:0 0 20px; line-height:1.45; } .cart-drawer-browse-btn{ display:inline-flex; align-items:center; justify-content:center; background:#9e4a2b; color:#fff !important; padding:12px 28px; border-radius:9999px; font-size:.875rem; font-weight:600; text-decoration:none; transition:background .2s ease, transform .2s ease; } .cart-drawer-browse-btn:hover{ background:#873e23; transform:translateY(-1px); } /* Items List */ .cart-drawer-items{ flex:1; overflow-y:auto; list-style:none; margin:0; padding:0 20px; } .cart-drawer-item{ display:grid; grid-template-columns:64px minmax(0,1fr); gap:16px; padding:18px 0; border-bottom:1px solid var(--line, #f0ede6); align-items:start; } .cart-drawer-item:last-child{ border-bottom:none; } .cart-drawer-item-thumb{ width:64px; height:76px; border-radius:6px; overflow:hidden; background:var(--sand, #f0ede6); flex-shrink:0; } .cart-drawer-item-thumb img{ width:100%; height:100%; object-fit:cover; display:block; } .cart-drawer-item-info{ min-width:0; display:flex; flex-direction:column; height:100%; } .cart-drawer-item-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; } .cart-drawer-item-title{ font-family:var(--font-sans, inherit); font-size:.9rem; font-weight:500; color:var(--ink, #1f1f1f); margin:0; line-height:1.3; } .cart-drawer-item-title a{ color:inherit; text-decoration:none; } .cart-drawer-item-title a:hover{ color:#9e4a2b; } .cart-drawer-item-remove{ color:var(--ink-muted, #76736d); padding:2px; line-height:1; text-decoration:none; transition:color .2s ease; flex-shrink:0; } .cart-drawer-item-remove:hover{ color:var(--ink, #1f1f1f); } .cart-drawer-item-bottom{ display:flex; align-items:center; justify-content:space-between; margin-top:12px; } .cart-drawer-qty-pill{ display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line, #e2ded5); border-radius:9999px; padding:3px 12px; font-size:.8125rem; color:var(--ink, #1f1f1f); background:#fff; } .cart-drawer-item-price{ font-size:.9375rem; font-weight:600; color:var(--ink, #1f1f1f); } /* Footer Section */ .cart-drawer-footer{ border-top:1px solid var(--line, #e2ded5); padding:20px 24px 24px; background:#fff; } .cart-drawer-subtotal-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; } .cart-drawer-subtotal-label{ font-size:.9375rem; color:var(--ink-muted, #76736d); } .cart-drawer-subtotal-val{ font-family:var(--font-display, 'Fraunces', serif); font-size:1.25rem; font-weight:600; color:var(--ink, #1f1f1f); } .cart-drawer-perk-hint{ font-size:.78rem; color:var(--ink-muted, #76736d); margin:0 0 16px; } .cart-drawer-actions{ display:grid; gap:10px; } .cart-drawer-btn-checkout{ display:block; width:100%; padding:12px 20px; border-radius:9999px; background:#9e4a2b; color:#fff !important; font-size:.9375rem; font-weight:600; text-align:center; text-decoration:none; transition:all .2s ease; box-sizing:border-box; } .cart-drawer-btn-checkout:hover{ background:#873e23; transform:translateY(-1px); } .cart-drawer-btn-viewcart{ display:block; width:100%; padding:11px 20px; border-radius:9999px; background:#fff; color:var(--ink, #1f1f1f) !important; border:1px solid var(--line, #e2ded5); font-size:.9375rem; font-weight:500; text-align:center; text-decoration:none; transition:all .2s ease; box-sizing:border-box; } .cart-drawer-btn-viewcart:hover{ background:var(--cream, #f7f5f0); border-color:var(--ink, #1f1f1f); } /* ========================================================= .orvena-blog-page{ padding:32px 20px 80px; max-width:var(--container, 1344px); margin:0 auto; box-sizing:border-box; } @media(min-width:640px){ .orvena-blog-page{ padding-left:32px; padding-right:32px; } } @media(min-width:1024px){ .orvena-blog-page{ padding-left:48px; padding-right:48px; } } .blog-archive-header{ max-width:680px; margin:16px 0 48px; } .blog-archive-title{ font-family:var(--font-display, 'Fraunces', serif); font-size:2.25rem; font-weight:600; color:var(--ink, #1f1f1f); margin:8px 0 12px; line-height:1.2; } @media(min-width:768px){ .blog-archive-title{ font-size:2.75rem; } } .blog-archive-subtitle{ font-size:.95rem; color:var(--ink-muted, #76736d); margin:0; line-height:1.5; } /* Blog Grid */ .blog-journal-grid{ display:grid; grid-template-columns:1fr; gap:36px; } @media(min-width:640px){ .blog-journal-grid{ grid-template-columns:repeat(2, 1fr); gap:32px; } } @media(min-width:1024px){ .blog-journal-grid{ grid-template-columns:repeat(3, 1fr); gap:40px; } } .blog-journal-card{ display:flex; flex-direction:column; min-width:0; } .blog-journal-thumb-link{ display:block; text-decoration:none; } .blog-journal-media{ position:relative; width:100%; aspect-ratio:3/2; border-radius:12px; overflow:hidden; background:var(--sand, #f0ede6); transition:transform .3s var(--ease); } .blog-journal-card:hover .blog-journal-media{ transform:translateY(-3px); } .blog-journal-media img, .blog-mockup-img{ width:100%; height:100%; object-fit:cover; display:block; } /* Mockup Canvas Graphic Generator */ .blog-mockup-container{ position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; overflow:hidden; } .blog-mockup-orb{ position:absolute; top:-20px; right:-20px; width:120px; height:120px; border-radius:50%; opacity:.4; } .blog-mockup-card{ position:relative; width:62%; height:78%; background:#fff; border-radius:4px; padding:14px; box-shadow:0 18px 40px -20px rgba(60,40,20,.35); display:flex; flex-direction:column; justify-content:space-between; box-sizing:border-box; } .mockup-header-lines{ display:flex; flex-direction:column; gap:5px; } .mockup-line{ border-radius:1px; } .mockup-media-box{ width:100%; height:44%; border-radius:2px; } .mockup-footer-lines{ display:flex; flex-direction:column; gap:4px; } .mockup-split-layout{ display:grid; grid-template-columns:1fr 1fr; gap:8px; height:100%; } .mockup-split-left{ display:flex; flex-direction:column; justify-content:center; gap:4px; } .mockup-split-right{ border-radius:2px; height:100%; } /* Card Body */ .blog-journal-body{ padding-top:16px; display:flex; flex-direction:column; flex:1; } .blog-journal-meta{ font-size:.7rem; font-weight:700; letter-spacing:.08em; color:#9e4a2b; margin:0 0 8px; text-transform:uppercase; } .blog-journal-card-title{ font-family:var(--font-display, 'Fraunces', serif); font-size:1.25rem; font-weight:600; line-height:1.3; margin:0 0 8px; } .blog-journal-card-title a{ color:var(--ink, #1f1f1f); text-decoration:none; transition:color .2s ease; } .blog-journal-card-title a:hover{ color:#9e4a2b; } .blog-journal-excerpt{ font-size:.875rem; color:var(--ink-muted, #76736d); line-height:1.55; margin:0; } /* Pagination */ .blog-pagination-wrapper{ margin-top:56px; display:flex; justify-content:center; } .blog-pagination-wrapper .nav-links, .blog-pagination-wrapper .page-numbers{ display:flex; align-items:center; gap:8px; } .blog-pagination-wrapper .page-numbers:not(.dots){ display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 12px; border-radius:9999px; border:1px solid var(--line, #e2ded5); background:#fff; color:var(--ink, #1f1f1f); font-size:.875rem; font-weight:500; text-decoration:none; transition:all .2s ease; } .blog-pagination-wrapper .page-numbers.current, .blog-pagination-wrapper .page-numbers:hover:not(.dots){ background:#1f1f1f; color:#fff; border-color:#1f1f1f; } /* ========================================================= SINGLE BLOG ARTICLE ========================================================= */ .orvena-blog-single-page{ padding:24px 20px 80px; max-width:var(--container, 1344px); margin:0 auto; } @media(min-width:640px){ .orvena-blog-single-page{ padding-left:32px; padding-right:32px; } } @media(min-width:1024px){ .orvena-blog-single-page{ padding-left:48px; padding-right:48px; } } .blog-single-article{ max-width:100%; width:100%; margin:0; padding:0; text-align:left; } .blog-single-header{ margin-bottom:28px; text-align:left; } .blog-single-title{ font-family:var(--font-display, 'Fraunces', serif); font-size:2.25rem; font-weight:600; color:var(--ink, #1f1f1f); line-height:1.2; margin:0 0 10px; text-align:left; } @media(min-width:768px){ .blog-single-title{ font-size:2.75rem; } } .blog-single-date{ font-size:.875rem; color:var(--ink-muted, #76736d); margin:0; text-align:left; } .blog-single-media-banner{ margin:28px 0 36px; width:100%; aspect-ratio:3/2; border-radius:16px; overflow:hidden; box-shadow:0 8px 30px -10px rgba(0,0,0,.08); } .blog-single-media-banner img{ width:100%; height:100%; object-fit:cover; display:block; } .blog-single-content{ font-size:1.05rem; line-height:1.75; color:var(--ink, #333); text-align:left; } .blog-single-content *{ text-align:left; } .blog-single-content p{ margin-bottom:1.5em; color:var(--ink-muted, #555); } .blog-single-content h2, .blog-single-content h3{ font-family:var(--font-display, 'Fraunces', serif); color:var(--ink, #1f1f1f); margin-top:2em; margin-bottom:.6em; } /* "Keep reading" Section */ .blog-keep-reading-section{ max-width:100%; margin:64px auto 0; padding-top:40px; border-top:1px solid var(--line, #e2ded5); text-align:left; } .keep-reading-title{ font-family:var(--font-display, 'Fraunces', serif); font-size:1.35rem; font-weight:600; color:var(--ink, #1f1f1f); margin:0 0 16px; text-align:left; } .keep-reading-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; text-align:left; } .keep-reading-list a{ font-size:.9375rem; color:var(--ink, #1f1f1f); text-decoration:none; transition:color .2s ease; } .keep-reading-list a:hover{ color:#9e4a2b; }