/* Theme Name: FLOKE CO. Premium Theme URI: https://example.com/ Author: FLOKE CO. Description: Custom FLOKE CO. hair ecommerce landing theme. Version: 1.4.5 Requires at least: 6.0 Tested up to: 6.6 Text Domain: floke-co */ * { box-sizing: border-box; } :root { --bg: #030303; --panel: #0b0b0b; --panel-2: #111; --text: #fff; --muted: #c9c9c9; --red: #e10016; --purple: #9d27d6; --line: #2a2a2a; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: Arial, Helvetica, sans-serif; } body.intro-active { overflow: hidden; } /* The original FLOKË launch screen is the only visible UI until START is pressed. */ body.intro-active > .topbar, body.intro-active > .site-header { visibility: hidden; } body:not(.intro-active) > .topbar, body:not(.intro-active) > .site-header { visibility: visible; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } img { display: block; max-width: 100%; } .intro-screen { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 28px; background: #000; overflow: hidden; transition: opacity 0.85s ease, visibility 0.85s ease; } .intro-screen::before { content: ""; position: absolute; inset: -20%; background: radial-gradient(circle at 68% 46%, rgba(225, 0, 22, 0.32), transparent 16%), radial-gradient(circle at 62% 54%, rgba(157, 39, 214, 0.2), transparent 26%), linear-gradient(180deg, #000 0%, #050000 100%); opacity: 0; animation: introAtmosphere 1.45s ease 0.2s forwards; } .intro-screen::after { content: ""; position: absolute; width: min(86vw, 980px); height: 230px; right: -8%; top: 40%; background: linear-gradient(108deg, transparent 0 47%, rgba(225, 0, 22, 0.5) 50%, transparent 56%), radial-gradient(ellipse at center, rgba(225, 0, 22, 0.25), transparent 66%); filter: blur(2px); opacity: 0; transform: translateX(-70px) scaleX(0.7); animation: introLightSweep 1.6s cubic-bezier(.2, .8, .2, 1) 0.65s forwards; } .intro-screen.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } /* Intro appears only once per browser session. The class is set in before the page paints, so returning Home does not flash the intro again. */ html.floke-intro-seen .intro-screen { display: none !important; } html.floke-intro-seen body.intro-active { overflow: auto !important; } html.floke-intro-seen body.intro-active > .topbar, html.floke-intro-seen body.intro-active > .site-header { visibility: visible !important; } /* WordPress menu current-item classes use the same FLOKË active treatment. */ .desktop-nav a.current-menu-item, .desktop-nav a.current_page_item { color: var(--accent); } .intro-inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: 24px; width: min(92vw, 1180px); } .intro-logo { opacity: 0; transform: translateY(24px) scale(0.94); animation: introLogoReveal 1.25s cubic-bezier(.2, .8, .2, 1) 0.45s forwards; } .intro-logo .logo-word { font-size: clamp(66px, 13vw, 178px); letter-spacing: 0.28em; padding-left: 0.28em; } .intro-logo .logo-co { --co-tracking: 0.16em; max-width: 620px; gap: 14px; margin-top: 14px; font-size: clamp(24px, 3vw, 48px); } .intro-logo .logo-tagline { margin-top: 22px; letter-spacing: 0.52em; padding-left: 0.52em; } .intro-start { min-width: 170px; min-height: 50px; margin-top: 8px; border: 1px solid rgba(225, 0, 22, 0.62); background: linear-gradient(90deg, rgba(85, 0, 5, 0.75), rgba(225, 0, 22, 0.94), rgba(72, 0, 85, 0.86)); color: white; cursor: pointer; font-size: 13px; font-weight: 950; letter-spacing: 0.22em; opacity: 0; transform: translateY(14px); box-shadow: 0 0 34px rgba(225, 0, 22, 0.22), 0 0 30px rgba(157, 39, 214, 0.12); animation: introButtonReveal 0.75s ease 1.85s forwards; } .intro-start:hover { border-color: rgba(157, 39, 214, 0.82); box-shadow: 0 0 44px rgba(225, 0, 22, 0.32), 0 0 36px rgba(157, 39, 214, 0.22); } .intro-screen.is-leaving .intro-logo, .intro-screen.is-leaving .intro-start { animation: introExit 0.55s ease forwards; } @keyframes introAtmosphere { from { opacity: 0; } to { opacity: 1; } } @keyframes introLightSweep { 0% { opacity: 0; transform: translateX(-80px) scaleX(0.7); } 45% { opacity: 1; } 100% { opacity: 0.86; transform: translateX(0) scaleX(1); } } @keyframes introLogoReveal { 0% { opacity: 0; transform: translateY(24px) scale(0.94); filter: blur(8px); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } @keyframes introButtonReveal { to { opacity: 1; transform: translateY(0); } } @keyframes introExit { to { opacity: 0; transform: translateY(-16px) scale(0.98); filter: blur(5px); } } .luxury-logo { position: relative; z-index: 1; display: inline-flex; flex-direction: column; align-items: center; color: #f6f4f0; font-family: Georgia, "Times New Roman", serif; text-align: center; text-shadow: 0 0 16px rgba(255, 255, 255, 0.16); } .logo-word { font-size: 48px; line-height: 0.86; font-weight: 400; letter-spacing: 0.34em; } .logo-word span { color: var(--red); text-shadow: 0 0 20px rgba(225, 0, 22, 0.35); } .logo-co { --co-tracking: 0.16em; width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; margin-top: 22px; color: var(--red); font-size: 20px; letter-spacing: 0; } .logo-co b { display: inline-block; font: inherit; font-weight: inherit; letter-spacing: var(--co-tracking); margin-right: calc(-1 * var(--co-tracking)); } .logo-co i { height: 1px; background: linear-gradient(90deg, transparent, var(--red)); } .logo-co i:last-child { background: linear-gradient(90deg, var(--red), transparent); } .logo-tagline { margin-top: 28px; color: #f1f1f1; font-size: 18px; letter-spacing: 0.72em; font-family: Arial, Helvetica, sans-serif; } .topbar { width: min(83%, 1500px); height: 48px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; padding: 0 8%; border: 1px solid rgba(225, 0, 22, 0.24); border-top: 0; background: linear-gradient(90deg, rgba(42, 0, 0, 0.92), rgba(120, 0, 8, 0.82), rgba(42, 0, 0, 0.92)); color: #f2f2f2; font-size: 12px; font-weight: 800; } .topbar span:first-child { justify-self: center; } .social-top { justify-self: end; letter-spacing: 10px; } .site-header { position: sticky; top: 0; z-index: 30; height: 92px; display: flex; align-items: center; justify-content: space-between; padding: 0 5.5%; background: #030303; border-bottom: 1px solid #151515; } .nav-logo { width: 170px; align-items: flex-start; } .nav-logo .logo-word { font-size: 37px; letter-spacing: 0.23em; } .nav-logo .logo-co { --co-tracking: 0.12em; gap: 8px; margin-top: 9px; font-size: 14px; } .desktop-nav { display: flex; align-items: center; gap: clamp(18px, 3vw, 42px); } .desktop-nav a { position: relative; padding: 31px 0 27px; font-size: 12px; font-weight: 900; } .desktop-nav a.active, .desktop-nav a:hover { color: var(--red); } .desktop-nav a.active::after, .desktop-nav a:hover::after { content: ""; position: absolute; left: 0; right: 0; bottom: 17px; height: 2px; background: var(--red); } .header-actions { display: flex; align-items: center; gap: 15px; } .icon-btn, .bag-btn, .cart-head button { border: 0; background: transparent; color: white; cursor: pointer; } .icon-btn { font-size: 28px; line-height: 1; } .bag-btn { position: relative; padding: 8px 0; font-size: 13px; font-weight: 900; } .bag-btn span { position: absolute; top: -5px; right: -15px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--red); font-size: 10px; } .hero { position: relative; min-height: 590px; display: flex; align-items: center; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--line); } .hero img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 68% 35%; } .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0, 0, 0, 0.98) 0%, rgba(0, 0, 0, 0.82) 30%, rgba(0, 0, 0, 0.24) 58%, rgba(0, 0, 0, 0.42) 100%), radial-gradient(circle at 56% 43%, rgba(225, 0, 22, 0.42), transparent 34%), radial-gradient(circle at 45% 58%, rgba(157, 39, 214, 0.26), transparent 32%); } .hero-content { width: min(92%, 1450px); margin: 0 auto; padding: 42px 0 96px; } .hero h1 { margin: 0; max-width: 620px; font-size: clamp(58px, 7.8vw, 108px); line-height: 0.9; font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: 0; text-shadow: 0 0 20px rgba(255, 255, 255, 0.14); } .hero h1 span { color: var(--red); } .hero p { margin: 22px 0 24px; color: #fff; font-size: clamp(20px, 2vw, 28px); font-weight: 700; line-height: 1.32; } .btn { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding: 0 30px; border: 0; cursor: pointer; color: white; font-size: 13px; font-weight: 950; } .btn-primary { background: linear-gradient(90deg, #b7000e, var(--red), #7a005f); box-shadow: 0 0 26px rgba(225, 0, 22, 0.22); } .btn-primary:hover { background: #ff1028; } .category-strip { width: min(91%, 1450px); margin: -58px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; position: relative; z-index: 5; } .category-tile { position: relative; min-height: 205px; overflow: hidden; border: 1px solid rgba(157, 39, 214, 0.5); background: #111; } .category-tile img { width: 100%; height: 100%; min-height: 205px; object-fit: cover; object-position: center 32%; opacity: 0.78; transition: transform 0.25s ease, opacity 0.25s ease; } .category-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 35%, rgba(0, 0, 0, 0.86)); } .category-tile span { position: absolute; left: 18px; right: 18px; bottom: 28px; z-index: 2; text-align: center; font-size: clamp(22px, 2.3vw, 31px); line-height: 0.98; font-weight: 950; } .category-tile span::after { content: ""; display: block; width: 42px; height: 2px; margin: 10px auto 0; background: linear-gradient(90deg, var(--red), var(--purple)); } .category-tile:hover img { transform: scale(1.05); opacity: 1; } .products-section { width: min(91%, 1450px); margin: 0 auto; padding: 10px 0 30px; } .title-rule { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 34px; margin: 10px 0 14px; } .title-rule span { height: 1px; background: linear-gradient(90deg, transparent, var(--purple)); } .title-rule span:last-child { background: linear-gradient(90deg, var(--purple), transparent); } .title-rule h2, .social-proof h2 { margin: 0; text-align: center; font-size: clamp(27px, 3vw, 37px); font-weight: 950; } .product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } .product-card { border: 1px solid rgba(157, 39, 214, 0.2); background: var(--panel); } .product-card img { width: 100%; aspect-ratio: 1.38 / 1; object-fit: cover; object-position: center 32%; background: #151515; } .product-info { padding: 15px 17px 16px; } .product-info h3 { margin: 0 0 6px; font-size: 17px; font-weight: 900; } .product-info p { margin: 0 0 7px; color: #e2e2e2; font-size: 13px; font-weight: 700; } .product-info .rating { color: var(--red); letter-spacing: 2px; font-size: 14px; } .product-info strong { display: block; margin: 10px 0 13px; font-size: 17px; } .add-to-cart { width: 100%; min-height: 43px; background: linear-gradient(90deg, #b7000e, var(--red)); } .benefits { margin-top: 18px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #080808; } .benefits > div { display: grid; grid-template-columns: 62px 1fr; column-gap: 18px; padding: 28px clamp(18px, 3vw, 52px); border-right: 1px solid var(--line); } .benefits > div:last-child { border-right: 0; } .benefits span { grid-row: span 2; align-self: center; color: var(--purple); font-size: 52px; line-height: 1; } .benefits h3 { margin: 0 0 7px; font-size: 15px; font-weight: 950; } .benefits p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; } .bundle-banner { display: grid; grid-template-columns: minmax(170px, 315px) 1fr minmax(230px, 330px) auto; align-items: center; gap: 36px; padding: 0 5.5%; min-height: 150px; background: linear-gradient(90deg, rgba(0, 0, 0, 0.1), rgba(72, 8, 91, 0.48), rgba(0, 0, 0, 0.1)), #130018; border-bottom: 1px solid #210025; overflow: hidden; } .bundle-banner img { width: 100%; height: 150px; object-fit: cover; object-position: center 35%; } .bundle-banner h2 { margin: 0; font-size: clamp(34px, 4vw, 53px); line-height: 0.96; font-weight: 950; } .bundle-banner h2 span { color: #d936ff; } .bundle-banner ul { margin: 0; padding: 0; list-style: none; color: #fff; font-size: 14px; font-weight: 800; line-height: 2.05; } .bundle-banner li::before { content: "\2713"; margin-right: 12px; color: var(--red); } .social-proof { width: min(91%, 1450px); margin: 0 auto; padding: 22px 0 18px; } .social-proof h2 { margin-bottom: 16px; } .social-proof h2 span { color: var(--purple); } .social-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; } .social-grid img { width: 100%; aspect-ratio: 1.12 / 1; object-fit: cover; object-position: center 30%; } footer { border-top: 1px solid var(--line); background: #030303; padding: 22px 5% 12px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.6fr; gap: 42px; } .footer-grid > div { display: flex; flex-direction: column; gap: 9px; } .footer-brand { transform: scale(0.82); transform-origin: left top; align-items: flex-start; width: 180px; } .footer-brand .logo-word { font-size: 36px; letter-spacing: 0.24em; } .footer-brand .logo-co { --co-tracking: 0.12em; gap: 8px; margin-top: 9px; font-size: 13px; } .footer-grid h4 { margin: 0 0 7px; font-size: 14px; font-weight: 950; } .footer-grid p, .footer-grid a { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; } .socials { color: white; letter-spacing: 10px; } .footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--line); color: #8b8b8b; font-size: 12px; } .cart-drawer { position: fixed; top: 0; right: -440px; z-index: 60; width: min(420px, 92vw); height: 100vh; display: flex; flex-direction: column; background: #070707; border-left: 1px solid var(--line); transition: right 0.28s ease; } .cart-drawer.open { right: 0; } .cart-head, .cart-footer { padding: 20px; border-bottom: 1px solid var(--line); } .cart-head { display: flex; align-items: center; justify-content: space-between; } .cart-head h3 { margin: 0; } .cart-head button { font-size: 28px; } .cart-items { flex: 1; overflow: auto; padding: 20px; } .cart-item { display: flex; justify-content: space-between; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); } .cart-item p { margin: 0; color: var(--muted); } .cart-total { display: flex; justify-content: space-between; margin-bottom: 16px; } .checkout-btn { width: 100%; } .checkout-note, .empty-cart { color: var(--muted); font-size: 12px; line-height: 1.6; } .professional-hero .hero-content { padding-bottom: 76px; } .professional-copy { max-width: 600px; color: var(--muted) !important; font-size: clamp(16px, 1.45vw, 20px) !important; font-weight: 700 !important; } .professional-actions { display: flex; flex-wrap: wrap; gap: 14px; } .professional-benefits { margin-top: 0; } .professional-panel, .professional-page { width: min(91%, 1450px); margin: 0 auto; padding: 58px 0; } .professional-panel { text-align: center; } .professional-lock { max-width: 900px; } .professional-lock .lock-icon { width: 58px; height: 58px; display: grid; place-items: center; margin: 0 auto 20px; border: 1px solid rgba(157, 39, 214, 0.65); color: var(--purple); font-size: 28px; } .professional-panel h3 { margin: 0 auto 12px; max-width: 760px; font-size: clamp(22px, 2.5vw, 34px); line-height: 1.08; font-weight: 950; } .professional-panel p, .professional-lead, .professional-small, .professional-lock-copy { color: var(--muted); font-size: 16px; line-height: 1.55; } .professional-panel .btn { margin-top: 14px; } .professional-page h1, .professional-page h2 { margin: 0; text-align: center; font-weight: 950; line-height: 1.05; } .professional-page h1 { font-size: clamp(32px, 4.6vw, 62px); } .professional-page h1 span, .login-page h1 span { color: var(--red); } .professional-lead, .professional-small { text-align: center; } .professional-small a, .forgot-link { color: var(--red); font-weight: 900; } .professional-form { width: min(100%, 980px); margin: 28px auto 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .professional-form label { display: grid; gap: 8px; color: #f2f2f2; font-size: 12px; font-weight: 950; letter-spacing: 0.06em; text-transform: uppercase; } .professional-form input, .professional-form select, .professional-form textarea { width: 100%; min-height: 48px; border: 1px solid rgba(157, 39, 214, 0.42); background: #080808; color: var(--text); padding: 12px 14px; font: inherit; text-transform: none; } .professional-form textarea { min-height: 128px; resize: vertical; } .wide-field, .checkbox-field, .professional-form .btn, .login-form .forgot-link { grid-column: 1 / -1; } .checkbox-field { display: flex !important; grid-template-columns: auto 1fr; align-items: center; gap: 12px !important; color: var(--muted) !important; text-transform: none !important; letter-spacing: 0 !important; } .checkbox-field input { width: 18px; min-height: 18px; accent-color: var(--red); } .professional-form .btn { width: 100%; } .login-form { max-width: 520px; grid-template-columns: 1fr; } .form-error { max-width: 520px; margin: 20px auto 0; padding: 14px 16px; border: 1px solid rgba(225, 0, 22, 0.65); color: #fff; background: rgba(225, 0, 22, 0.12); } .professional-message { min-height: 430px; display: grid; justify-items: center; align-content: center; gap: 16px; text-align: center; } .professional-message h1 { color: var(--red); } .dashboard-stats, .bulk-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 28px 0; } .dashboard-stats > div, .bulk-steps article { border: 1px solid rgba(157, 39, 214, 0.28); background: var(--panel); padding: 22px; } .dashboard-stats span, .bulk-steps span { display: block; color: var(--muted); font-size: 12px; font-weight: 950; text-transform: uppercase; } .dashboard-stats strong { display: block; margin-top: 8px; font-size: 32px; color: var(--red); } .professional-two-column { display: grid; grid-template-columns: 1.45fr 0.85fr; gap: 28px; margin-top: 22px; } .professional-two-column > section { border: 1px solid rgba(157, 39, 214, 0.22); background: var(--panel); padding: 24px; } .professional-two-column h2, .bulk-steps h3 { margin: 0 0 16px; text-align: left; font-size: 20px; font-weight: 950; } .professional-table { margin-bottom: 18px; } .table-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 14px; } .table-head { color: #fff; font-weight: 950; } .benefit-list { margin: 0; padding: 0; list-style: none; color: var(--muted); line-height: 2; font-weight: 700; } .benefit-list li::before { content: "\2713"; margin-right: 10px; color: var(--red); } .pro-shop-page { padding-top: 42px; } .pro-shop-layout { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: start; } .pro-filters { border: 1px solid rgba(157, 39, 214, 0.24); background: var(--panel); padding: 20px; } .pro-filters h3 { margin: 0 0 10px; color: var(--red); font-size: 14px; font-weight: 950; } .pro-filters h3:not(:first-child) { margin-top: 22px; } .pro-filters a, .pro-filters span { display: block; padding: 7px 0; color: var(--muted); font-size: 14px; font-weight: 800; } .length-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .length-grid span { display: grid; place-items: center; min-height: 34px; border: 1px solid var(--line); padding: 0; } .professional-price-label, .locked-price { display: block; margin-top: 5px; color: var(--red); font-size: 12px; font-weight: 950; text-transform: uppercase; } .bulk-steps article span { color: var(--purple); font-size: 42px; line-height: 1; } .bulk-steps article p { color: var(--muted); line-height: 1.5; } .backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, 0.68); opacity: 0; pointer-events: none; transition: 0.25s; } .backdrop.show { opacity: 1; pointer-events: auto; } @media (max-width: 1100px) { .desktop-nav { display: none; } .category-strip, .product-grid, .benefits { grid-template-columns: repeat(2, 1fr); } .bundle-banner { grid-template-columns: 1fr 1fr; padding: 24px 5%; } .professional-form, .dashboard-stats, .professional-two-column, .pro-shop-layout, .bulk-steps { grid-template-columns: 1fr; } .bundle-banner img { display: none; } .social-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 700px) { .topbar { height: auto; grid-template-columns: 1fr; justify-items: center; padding: 10px 16px; font-size: 10px; } .social-top { justify-self: center; } .site-header { height: 70px; padding: 0 17px; } .intro-screen { padding: 22px; } .intro-inner { gap: 22px; } .intro-logo .logo-word { font-size: clamp(50px, 16vw, 82px); letter-spacing: 0.15em; padding-left: 0.15em; } .intro-logo .logo-co { --co-tracking: 0.12em; max-width: 320px; gap: 9px; margin-top: 12px; font-size: 20px; } .intro-logo .logo-tagline { margin-top: 17px; letter-spacing: 0.34em; padding-left: 0.34em; } .intro-start { min-width: 148px; margin-top: 4px; } .logo-tagline { font-size: 10px; letter-spacing: 0.42em; } .nav-logo { width: 126px; } .nav-logo .logo-word { font-size: 25px; } .nav-logo .logo-co { font-size: 10px; margin-top: 6px; } .icon-btn { display: none; } .hero { min-height: 540px; } .hero img { object-position: 68% center; } .hero::after { background: linear-gradient(90deg, rgba(0, 0, 0, 0.98), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.38)), radial-gradient(circle at 66% 45%, rgba(225, 0, 22, 0.34), transparent 34%), radial-gradient(circle at 52% 64%, rgba(157, 39, 214, 0.24), transparent 34%); } .hero-content { padding: 30px 0 110px; } .hero h1 { font-size: clamp(52px, 15vw, 82px); } .category-strip, .product-grid, .benefits, .bundle-banner, .footer-grid { grid-template-columns: 1fr; } .category-strip { margin-top: -76px; } .category-tile { min-height: 185px; } .benefits > div { border-right: 0; border-bottom: 1px solid var(--line); } .bundle-banner { gap: 18px; } .social-grid { grid-template-columns: repeat(2, 1fr); } .footer-bottom { flex-direction: column; } .professional-actions { flex-direction: column; } .professional-actions .btn { width: 100%; } .table-row { grid-template-columns: 1fr; gap: 6px; } } /* V1.3.4 mobile-only professional hero copy scale */ @media (max-width: 520px) { .professional-hero.no-hero-image .hero-content > p.professional-copy { max-width: 94% !important; margin-top: 26px !important; font-size: clamp(15px, 4.9vw, 18px) !important; line-height: 1.42 !important; font-weight: 750 !important; letter-spacing: 0 !important; } } /* V1.3.5 premium WooCommerce account and professional endpoint styling */ .floke-account-page { min-height: 62vh; } .floke-account-page .floke-page-content, .floke-account-page .woocommerce { color: var(--floke-ink); } .floke-account-page .woocommerce { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: clamp(24px, 4vw, 58px); align-items: start; } .floke-account-page .woocommerce::before, .floke-account-page .woocommerce::after { display: none !important; } .floke-account-page .woocommerce-MyAccount-navigation { float: none !important; width: auto !important; margin: 0 !important; padding: 18px; border: 1px solid rgba(155, 111, 78, 0.18); background: linear-gradient(120deg, rgba(255, 250, 246, 0.96), rgba(239, 230, 221, 0.52)), var(--floke-cream); box-shadow: 0 24px 70px rgba(27, 20, 16, 0.06); } .floke-account-page .woocommerce-MyAccount-navigation ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .floke-account-page .woocommerce-MyAccount-navigation li { margin: 0; padding: 0; } .floke-account-page .woocommerce-MyAccount-navigation a { display: block; padding: 13px 14px; border: 1px solid transparent; color: rgba(27, 20, 16, 0.66); font-size: 12px; font-weight: 950; letter-spacing: 0.13em; line-height: 1.2; text-decoration: none; text-transform: uppercase; } .floke-account-page .woocommerce-MyAccount-navigation a:hover, .floke-account-page .woocommerce-MyAccount-navigation .is-active a { border-color: rgba(155, 111, 78, 0.24); background: rgba(255, 250, 246, 0.72); color: var(--floke-ink); } .floke-account-page .woocommerce-MyAccount-content { float: none !important; width: auto !important; min-width: 0; margin: 0 !important; padding: clamp(26px, 4vw, 44px); border: 1px solid rgba(155, 111, 78, 0.18); background: linear-gradient(120deg, rgba(255, 250, 246, 0.96), rgba(239, 230, 221, 0.5)), var(--floke-cream); box-shadow: 0 24px 70px rgba(27, 20, 16, 0.06); } .floke-account-page .woocommerce-MyAccount-content p, .floke-account-page .woocommerce-MyAccount-content address, .floke-account-page .woocommerce-MyAccount-content em, .floke-account-page .woocommerce-MyAccount-content td { color: rgba(27, 20, 16, 0.7); font-size: 16px; line-height: 1.55; } .floke-account-page .woocommerce-MyAccount-content h2, .floke-account-page .woocommerce-MyAccount-content h3, .floke-account-page legend { margin: 0 0 18px; color: var(--floke-ink); font-family: Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: 0; line-height: 1.05; text-transform: none; } .floke-account-page .woocommerce-MyAccount-content h2 { font-size: clamp(30px, 3.4vw, 46px); } .floke-account-page .woocommerce-MyAccount-content h3, .floke-account-page legend { font-size: clamp(24px, 2.6vw, 34px); } .floke-account-page .woocommerce-MyAccount-content a { color: var(--floke-accent); font-weight: 800; text-decoration: none; } .floke-account-page .woocommerce-MyAccount-content a:hover { color: var(--floke-ink); } .floke-account-page .woocommerce-info, .floke-account-page .woocommerce-message, .floke-account-page .woocommerce-error { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 24px !important; padding: 20px 22px !important; border: 1px solid rgba(155, 111, 78, 0.2) !important; border-top: 1px solid rgba(155, 111, 78, 0.2) !important; background: rgba(255, 250, 246, 0.74) !important; color: var(--floke-ink) !important; box-shadow: none !important; } .floke-account-page .woocommerce-info::before, .floke-account-page .woocommerce-message::before, .floke-account-page .woocommerce-error::before { position: static; display: inline-grid; flex: 0 0 18px; width: 18px; height: 18px; place-items: center; border: 1px solid var(--floke-accent); color: var(--floke-accent) !important; content: ""; } .floke-account-page .woocommerce-info .button, .floke-account-page .woocommerce-message .button, .floke-account-page .woocommerce-error .button { order: 2; margin-left: auto; } .floke-account-page table, .floke-account-page .woocommerce-orders-table, .floke-account-page .woocommerce-table { width: 100%; border-collapse: collapse; border: 1px solid rgba(155, 111, 78, 0.18) !important; background: rgba(255, 250, 246, 0.62); } .floke-account-page th, .floke-account-page td { padding: 15px 14px !important; border-color: rgba(155, 111, 78, 0.16) !important; color: rgba(27, 20, 16, 0.74) !important; } .floke-account-page th { color: var(--floke-ink) !important; font-size: 12px; font-weight: 950; letter-spacing: 0.13em; text-transform: uppercase; } .floke-account-page mark { background: rgba(155, 111, 78, 0.12); color: var(--floke-ink); } .floke-account-page fieldset { margin: 26px 0 0; padding: 22px; border: 1px solid rgba(155, 111, 78, 0.22); } .floke-account-page label { color: var(--floke-ink); font-size: 13px; font-weight: 900; } .floke-account-page input, .floke-account-page select, .floke-account-page textarea, .floke-account-page .select2-selection { min-height: 48px; border: 1px solid rgba(155, 111, 78, 0.3) !important; border-radius: 0 !important; background: rgba(255, 255, 255, 0.74) !important; color: var(--floke-ink) !important; box-shadow: none !important; } .floke-account-page input:focus, .floke-account-page select:focus, .floke-account-page textarea:focus { border-color: var(--floke-accent) !important; outline: 2px solid rgba(155, 111, 78, 0.14); } .floke-account-page .show-password-input { color: var(--floke-accent) !important; } .floke-account-page .button, .floke-account-page button.button, .floke-account-page input.button { min-height: 52px; padding: 0 28px !important; border: 1px solid var(--floke-ink) !important; border-radius: 0 !important; background: var(--floke-ink) !important; color: #fffaf6 !important; box-shadow: none !important; font-size: 13px !important; font-weight: 950 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; } .floke-account-page .button:hover, .floke-account-page button.button:hover, .floke-account-page input.button:hover { border-color: var(--floke-accent) !important; background: var(--floke-accent) !important; color: #fffaf6 !important; } .floke-account-page .woocommerce-Address, .floke-account-page .u-column1, .floke-account-page .u-column2 { padding: 22px; border: 1px solid rgba(155, 111, 78, 0.18); background: rgba(255, 250, 246, 0.58); } @media (max-width: 900px) { .floke-account-page .woocommerce { grid-template-columns: 1fr; gap: 22px; } .floke-account-page .woocommerce-MyAccount-navigation ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .floke-account-page .woocommerce-MyAccount-navigation, .floke-account-page .woocommerce-MyAccount-content { padding: 18px; } .floke-account-page .woocommerce-MyAccount-navigation ul { grid-template-columns: 1fr; } .floke-account-page .woocommerce-info, .floke-account-page .woocommerce-message, .floke-account-page .woocommerce-error { display: grid; grid-template-columns: 18px 1fr; align-items: center; } .floke-account-page .woocommerce-info .button, .floke-account-page .woocommerce-message .button, .floke-account-page .woocommerce-error .button { grid-column: 1 / -1; width: 100%; margin: 4px 0 0 !important; text-align: center; } .floke-account-page table, .floke-account-page thead, .floke-account-page tbody, .floke-account-page tr, .floke-account-page th, .floke-account-page td { display: block; width: 100%; } .floke-account-page thead { display: none; } .floke-account-page tr { padding: 14px 0; border-bottom: 1px solid rgba(155, 111, 78, 0.16); } .floke-account-page td { display: flex; justify-content: space-between; gap: 18px; padding: 9px 0 !important; } .floke-account-page td::before { content: attr(data-title); color: rgba(27, 20, 16, 0.58); font-size: 11px; font-weight: 950; letter-spacing: 0.12em; text-transform: uppercase; } } /* V1.3.6 reliable My Account endpoint styling, including Orders */ body.woocommerce-account main, body.woocommerce-account .floke-content-page, body.woocommerce-account .floke-page-content { background: linear-gradient(115deg, rgba(255, 255, 255, 0.3), transparent 32%, rgba(255, 255, 255, 0.18)), var(--floke-paper) !important; color: var(--floke-ink) !important; } body.woocommerce-account .floke-page-content > .woocommerce, body.woocommerce-account .woocommerce { display: grid !important; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) !important; gap: clamp(24px, 4vw, 58px) !important; align-items: start !important; } body.woocommerce-account .woocommerce::before, body.woocommerce-account .woocommerce::after { display: none !important; } body.woocommerce-account .woocommerce-MyAccount-navigation { float: none !important; width: auto !important; margin: 0 !important; padding: 18px !important; border: 1px solid rgba(155, 111, 78, 0.18) !important; background: linear-gradient(120deg, rgba(255, 250, 246, 0.96), rgba(239, 230, 221, 0.52)), var(--floke-cream) !important; box-shadow: 0 24px 70px rgba(27, 20, 16, 0.06) !important; } body.woocommerce-account .woocommerce-MyAccount-navigation ul { display: grid !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } body.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0 !important; padding: 0 !important; list-style: none !important; } body.woocommerce-account .woocommerce-MyAccount-navigation a { display: block !important; padding: 13px 14px !important; border: 1px solid transparent !important; color: rgba(27, 20, 16, 0.66) !important; font-size: 12px !important; font-weight: 950 !important; letter-spacing: 0.13em !important; line-height: 1.2 !important; text-decoration: none !important; text-transform: uppercase !important; } body.woocommerce-account .woocommerce-MyAccount-navigation a:hover, body.woocommerce-account .woocommerce-MyAccount-navigation .is-active a { border-color: rgba(155, 111, 78, 0.24) !important; background: rgba(255, 250, 246, 0.72) !important; color: var(--floke-ink) !important; } body.woocommerce-account .woocommerce-MyAccount-content { float: none !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: clamp(26px, 4vw, 44px) !important; border: 1px solid rgba(155, 111, 78, 0.18) !important; background: linear-gradient(120deg, rgba(255, 250, 246, 0.96), rgba(239, 230, 221, 0.5)), var(--floke-cream) !important; box-shadow: 0 24px 70px rgba(27, 20, 16, 0.06) !important; } body.woocommerce-account .woocommerce-MyAccount-content p, body.woocommerce-account .woocommerce-MyAccount-content address, body.woocommerce-account .woocommerce-MyAccount-content em, body.woocommerce-account .woocommerce-MyAccount-content td { color: rgba(27, 20, 16, 0.72) !important; font-size: 16px !important; line-height: 1.55 !important; } body.woocommerce-account .woocommerce-MyAccount-content h2, body.woocommerce-account .woocommerce-MyAccount-content h3, body.woocommerce-account .woocommerce-MyAccount-content legend { color: var(--floke-ink) !important; font-family: Georgia, "Times New Roman", serif !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; } body.woocommerce-account .woocommerce-info, body.woocommerce-account .woocommerce-message, body.woocommerce-account .woocommerce-error { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 18px !important; margin: 0 0 24px !important; padding: 20px 22px !important; border: 1px solid rgba(155, 111, 78, 0.2) !important; border-top: 1px solid rgba(155, 111, 78, 0.2) !important; background: rgba(255, 250, 246, 0.74) !important; color: var(--floke-ink) !important; box-shadow: none !important; } body.woocommerce-account .woocommerce-info::before, body.woocommerce-account .woocommerce-message::before, body.woocommerce-account .woocommerce-error::before { position: static !important; display: inline-grid !important; flex: 0 0 18px !important; width: 18px !important; height: 18px !important; place-items: center !important; border: 1px solid var(--floke-accent) !important; color: var(--floke-accent) !important; content: "" !important; } body.woocommerce-account .woocommerce-info .button, body.woocommerce-account .woocommerce-message .button, body.woocommerce-account .woocommerce-error .button { order: 2 !important; margin-left: auto !important; } body.woocommerce-account table, body.woocommerce-account .woocommerce-orders-table, body.woocommerce-account .woocommerce-table { width: 100% !important; border-collapse: collapse !important; border: 1px solid rgba(155, 111, 78, 0.18) !important; background: rgba(255, 250, 246, 0.62) !important; } body.woocommerce-account th, body.woocommerce-account td { padding: 15px 14px !important; border-color: rgba(155, 111, 78, 0.16) !important; color: rgba(27, 20, 16, 0.74) !important; } body.woocommerce-account th { color: var(--floke-ink) !important; font-size: 12px !important; font-weight: 950 !important; letter-spacing: 0.13em !important; text-transform: uppercase !important; } body.woocommerce-account fieldset { margin: 26px 0 0 !important; padding: 22px !important; border: 1px solid rgba(155, 111, 78, 0.22) !important; } body.woocommerce-account label { color: var(--floke-ink) !important; font-size: 13px !important; font-weight: 900 !important; } body.woocommerce-account input, body.woocommerce-account select, body.woocommerce-account textarea, body.woocommerce-account .select2-selection { min-height: 48px !important; border: 1px solid rgba(155, 111, 78, 0.3) !important; border-radius: 0 !important; background: rgba(255, 255, 255, 0.74) !important; color: var(--floke-ink) !important; box-shadow: none !important; } body.woocommerce-account .button, body.woocommerce-account button.button, body.woocommerce-account input.button { min-height: 52px !important; padding: 0 28px !important; border: 1px solid var(--floke-ink) !important; border-radius: 0 !important; background: var(--floke-ink) !important; color: #fffaf6 !important; box-shadow: none !important; font-size: 13px !important; font-weight: 950 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; } body.woocommerce-account .button:hover, body.woocommerce-account button.button:hover, body.woocommerce-account input.button:hover { border-color: var(--floke-accent) !important; background: var(--floke-accent) !important; color: #fffaf6 !important; } @media (max-width: 900px) { body.woocommerce-account .floke-page-content > .woocommerce, body.woocommerce-account .woocommerce { grid-template-columns: 1fr !important; gap: 22px !important; } body.woocommerce-account .woocommerce-MyAccount-navigation ul { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 560px) { body.woocommerce-account .woocommerce-MyAccount-navigation, body.woocommerce-account .woocommerce-MyAccount-content { padding: 18px !important; } body.woocommerce-account .woocommerce-MyAccount-navigation ul { grid-template-columns: 1fr !important; } body.woocommerce-account .woocommerce-info, body.woocommerce-account .woocommerce-message, body.woocommerce-account .woocommerce-error { display: grid !important; grid-template-columns: 18px 1fr !important; align-items: center !important; } body.woocommerce-account .woocommerce-info .button, body.woocommerce-account .woocommerce-message .button, body.woocommerce-account .woocommerce-error .button { grid-column: 1 / -1 !important; width: 100% !important; margin: 4px 0 0 !important; text-align: center !important; } } /* V1.3.7 logged-in professional landing cleanup */ .professional-entry-page { min-height: 62vh; display: grid; align-content: center; justify-items: center; text-align: center; } .professional-entry-page .professional-lead { max-width: 680px; margin: 0 auto 28px; font-size: clamp(17px, 2vw, 22px); line-height: 1.55; } .professional-entry-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } .professional-entry-actions .btn { min-width: 220px; } @media (max-width: 620px) { .professional-entry-page { min-height: 54vh; align-content: start; justify-items: stretch; text-align: left; } .professional-entry-page .professional-lead { margin-inline: 0; font-size: 16px; } .professional-entry-actions { display: grid; grid-template-columns: 1fr; } .professional-entry-actions .btn { width: 100%; min-width: 0; } } /* V1.3.8 account endpoint alignment polish */ body.woocommerce-account .woocommerce-info, body.woocommerce-account .woocommerce-message, body.woocommerce-account .woocommerce-error, .floke-account-page .woocommerce-info, .floke-account-page .woocommerce-message, .floke-account-page .woocommerce-error { display: grid !important; grid-template-columns: 18px minmax(0, 1fr) auto !important; align-items: center !important; column-gap: 22px !important; min-height: 92px !important; padding: 22px 28px !important; } body.woocommerce-account .woocommerce-info::before, body.woocommerce-account .woocommerce-message::before, body.woocommerce-account .woocommerce-error::before, .floke-account-page .woocommerce-info::before, .floke-account-page .woocommerce-message::before, .floke-account-page .woocommerce-error::before { grid-column: 1 !important; align-self: center !important; margin: 0 !important; } body.woocommerce-account .woocommerce-info .button, body.woocommerce-account .woocommerce-message .button, body.woocommerce-account .woocommerce-error .button, .floke-account-page .woocommerce-info .button, .floke-account-page .woocommerce-message .button, .floke-account-page .woocommerce-error .button { grid-column: 3 !important; align-self: center !important; justify-self: end !important; min-width: 230px !important; margin: 0 !important; text-align: center !important; } body.woocommerce-account .woocommerce-Address, body.woocommerce-account .u-column1, body.woocommerce-account .u-column2, .floke-account-page .woocommerce-Address, .floke-account-page .u-column1, .floke-account-page .u-column2 { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: start !important; gap: 10px 24px !important; } body.woocommerce-account .woocommerce-Address-title, .floke-account-page .woocommerce-Address-title { display: contents !important; } body.woocommerce-account .woocommerce-Address-title h2, .floke-account-page .woocommerce-Address-title h2 { grid-column: 1 !important; margin: 0 !important; } body.woocommerce-account .woocommerce-Address-title .edit, .floke-account-page .woocommerce-Address-title .edit { float: none !important; grid-column: 2 !important; justify-self: end !important; align-self: center !important; color: var(--floke-accent) !important; font-size: 13px !important; font-weight: 950 !important; letter-spacing: 0.08em !important; line-height: 1.25 !important; text-align: right !important; text-transform: uppercase !important; } body.woocommerce-account .woocommerce-Address address, .floke-account-page .woocommerce-Address address { grid-column: 1 / -1 !important; margin: 4px 0 0 !important; text-align: left !important; } body.woocommerce-account .woocommerce-Addresses, .floke-account-page .woocommerce-Addresses { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px !important; } @media (max-width: 760px) { body.woocommerce-account .woocommerce-info, body.woocommerce-account .woocommerce-message, body.woocommerce-account .woocommerce-error, .floke-account-page .woocommerce-info, .floke-account-page .woocommerce-message, .floke-account-page .woocommerce-error { grid-template-columns: 18px minmax(0, 1fr) !important; row-gap: 18px !important; min-height: 0 !important; padding: 22px !important; } body.woocommerce-account .woocommerce-info .button, body.woocommerce-account .woocommerce-message .button, body.woocommerce-account .woocommerce-error .button, .floke-account-page .woocommerce-info .button, .floke-account-page .woocommerce-message .button, .floke-account-page .woocommerce-error .button { grid-column: 1 / -1 !important; justify-self: stretch !important; width: 100% !important; min-width: 0 !important; } body.woocommerce-account .woocommerce-Addresses, .floke-account-page .woocommerce-Addresses { grid-template-columns: 1fr !important; } body.woocommerce-account .woocommerce-Address, body.woocommerce-account .u-column1, body.woocommerce-account .u-column2, .floke-account-page .woocommerce-Address, .floke-account-page .u-column1, .floke-account-page .u-column2 { grid-template-columns: 1fr !important; } body.woocommerce-account .woocommerce-Address-title .edit, .floke-account-page .woocommerce-Address-title .edit { grid-column: 1 !important; justify-self: start !important; text-align: left !important; } } /* V1.3.9 single-navigation professional account layout */ body.woocommerce-account .floke-page-content > .woocommerce, .floke-account-page .floke-page-content > .woocommerce, body.woocommerce-account .woocommerce, .floke-account-page .woocommerce { display: block !important; max-width: min(980px, 100%) !important; margin: 0 auto !important; } body.woocommerce-account .woocommerce-MyAccount-navigation, .floke-account-page .woocommerce-MyAccount-navigation { display: none !important; } body.woocommerce-account .woocommerce-MyAccount-content, .floke-account-page .woocommerce-MyAccount-content { width: 100% !important; max-width: 100% !important; float: none !important; margin: 0 auto !important; padding: clamp(28px, 4vw, 46px) !important; border: 1px solid rgba(155, 111, 78, 0.18) !important; background: linear-gradient(120deg, rgba(255, 250, 246, 0.96), rgba(239, 230, 221, 0.5)), var(--floke-cream) !important; box-shadow: 0 24px 70px rgba(27, 20, 16, 0.06) !important; } body.woocommerce-account .woocommerce-info, body.woocommerce-account .woocommerce-message, body.woocommerce-account .woocommerce-error, .floke-account-page .woocommerce-info, .floke-account-page .woocommerce-message, .floke-account-page .woocommerce-error { width: 100% !important; margin-inline: auto !important; } body.woocommerce-account .woocommerce-info .button, body.woocommerce-account .woocommerce-message .button, body.woocommerce-account .woocommerce-error .button, .floke-account-page .woocommerce-info .button, .floke-account-page .woocommerce-message .button, .floke-account-page .woocommerce-error .button { display: inline-grid !important; place-items: center !important; line-height: 1.1 !important; } @media (min-width: 1180px) { body.woocommerce-account .floke-page-content > .woocommerce, .floke-account-page .floke-page-content > .woocommerce, body.woocommerce-account .woocommerce, .floke-account-page .woocommerce { max-width: min(1040px, calc(100vw - 160px)) !important; } } @media (max-width: 640px) { body.woocommerce-account .woocommerce-MyAccount-content, .floke-account-page .woocommerce-MyAccount-content { padding: 22px 18px !important; } } /* V1.4.0 professional dropdown menu and account page balance */ .pro-account-nav { overflow: visible !important; } .pro-account-nav > span { position: relative; display: inline-flex; align-items: center; } .pro-account-nav > span > a { white-space: nowrap; } .pro-account-nav .menu-item-has-children > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 10px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); } .pro-account-nav .sub-menu { position: absolute; top: calc(100% + 18px); left: 50%; z-index: 60; display: grid; min-width: 230px; padding: 12px; border: 1px solid rgba(155, 111, 78, 0.2); background: linear-gradient(120deg, rgba(255, 250, 246, 0.98), rgba(239, 230, 221, 0.72)), var(--floke-cream); box-shadow: 0 24px 52px rgba(27, 20, 16, 0.12); opacity: 0; pointer-events: none; transform: translate(-50%, 8px); transition: opacity 160ms ease, transform 160ms ease; } .pro-account-nav .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px; } .pro-account-nav .menu-item-has-children:hover .sub-menu, .pro-account-nav .menu-item-has-children:focus-within .sub-menu { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); } .pro-account-nav .sub-menu span, .pro-account-nav .sub-menu a { display: block !important; width: 100%; } .pro-account-nav .sub-menu a { padding: 13px 14px !important; border: 1px solid transparent; color: rgba(27, 20, 16, 0.68) !important; font-size: 11px !important; text-align: left; } .pro-account-nav .sub-menu a:hover, .pro-account-nav .sub-menu a:focus { border-color: rgba(155, 111, 78, 0.22); background: rgba(255, 250, 246, 0.72); color: var(--floke-ink) !important; } .mobile-nav-links span { display: block; } .mobile-nav-links .sub-menu { display: grid; gap: 8px; margin: -4px auto 8px; width: min(420px, 100%); } .mobile-nav-links .sub-menu a { width: 100% !important; padding: 12px 16px !important; border: 1px solid rgba(155, 111, 78, 0.16) !important; background: rgba(255, 250, 246, 0.48); color: rgba(27, 20, 16, 0.66) !important; font-size: 11px !important; } body.woocommerce-account .woocommerce-Addresses, .floke-account-page .woocommerce-Addresses { display: grid !important; grid-template-columns: repeat(2, minmax(280px, 1fr)) !important; gap: 28px !important; } body.woocommerce-account .woocommerce-Address, body.woocommerce-account .u-column1, body.woocommerce-account .u-column2, .floke-account-page .woocommerce-Address, .floke-account-page .u-column1, .floke-account-page .u-column2 { display: flex !important; min-height: 240px !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; gap: 14px !important; padding: clamp(28px, 4vw, 42px) !important; text-align: left !important; } body.woocommerce-account .woocommerce-Address-title, .floke-account-page .woocommerce-Address-title { display: block !important; width: 100% !important; } body.woocommerce-account .woocommerce-Address-title h2, .floke-account-page .woocommerce-Address-title h2 { margin: 0 0 14px !important; max-width: 100% !important; font-size: clamp(34px, 4vw, 52px) !important; line-height: 0.98 !important; } body.woocommerce-account .woocommerce-Address-title .edit, .floke-account-page .woocommerce-Address-title .edit { float: none !important; display: inline-block !important; max-width: 100% !important; color: var(--floke-accent) !important; font-size: 13px !important; font-weight: 950 !important; letter-spacing: 0.08em !important; line-height: 1.25 !important; text-align: left !important; text-transform: uppercase !important; } body.woocommerce-account .woocommerce-Address address, .floke-account-page .woocommerce-Address address { width: 100% !important; margin: 0 !important; color: rgba(27, 20, 16, 0.72) !important; text-align: left !important; } body.woocommerce-account .woocommerce-info, body.woocommerce-account .woocommerce-message, body.woocommerce-account .woocommerce-error, .floke-account-page .woocommerce-info, .floke-account-page .woocommerce-message, .floke-account-page .woocommerce-error { align-items: center !important; min-height: 116px !important; } body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-info + .button, .floke-account-page .woocommerce-MyAccount-content > .woocommerce-info + .button { margin-top: 28px !important; } @media (max-width: 980px) { body.woocommerce-account .woocommerce-Addresses, .floke-account-page .woocommerce-Addresses { grid-template-columns: 1fr !important; } body.woocommerce-account .woocommerce-Address, body.woocommerce-account .u-column1, body.woocommerce-account .u-column2, .floke-account-page .woocommerce-Address, .floke-account-page .u-column1, .floke-account-page .u-column2 { min-height: 0 !important; } } @media (max-width: 760px) { .pro-account-nav .sub-menu { position: static; opacity: 1; pointer-events: auto; transform: none; } body.woocommerce-account .woocommerce-info, body.woocommerce-account .woocommerce-message, body.woocommerce-account .woocommerce-error, .floke-account-page .woocommerce-info, .floke-account-page .woocommerce-message, .floke-account-page .woocommerce-error { min-height: 0 !important; } body.woocommerce-account .woocommerce-Address-title h2, .floke-account-page .woocommerce-Address-title h2 { font-size: clamp(30px, 11vw, 42px) !important; } } /* V1.4.1 professional topbar centering and dropdown reliability */ .topbar { position: relative !important; display: flex !important; justify-content: center !important; align-items: center !important; gap: clamp(22px, 3vw, 34px) !important; padding-left: clamp(150px, 12vw, 220px) !important; padding-right: clamp(150px, 12vw, 220px) !important; text-align: center !important; } .topbar > span { min-width: 0 !important; text-align: center !important; } .topbar .floke-social-icons { position: absolute !important; right: clamp(28px, 4vw, 64px) !important; top: 50% !important; transform: translateY(-50%) !important; } .site-header, .site-header .desktop-nav, .pro-account-nav, .pro-account-nav > span { overflow: visible !important; } .pro-account-nav { align-items: center !important; } .pro-account-nav .menu-item-has-children { position: relative !important; } .pro-account-nav .menu-item-has-children > .sub-menu { visibility: hidden; } .pro-account-nav .menu-item-has-children:hover > .sub-menu, .pro-account-nav .menu-item-has-children:focus-within > .sub-menu { visibility: visible; opacity: 1 !important; pointer-events: auto !important; transform: translate(-50%, 0) !important; } @media (max-width: 1024px) { .topbar { display: grid !important; grid-template-columns: 1fr !important; justify-items: center !important; gap: 12px !important; padding: 18px 16px !important; } .topbar .floke-social-icons { position: static !important; transform: none !important; justify-content: center !important; } .mobile-nav-links .menu-item-has-children > .sub-menu { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; transform: none !important; } } /* V1.4.2 tablet/mobile professional submenu support */ @media (max-width: 1180px) { .mobile-nav-panel { overflow: visible !important; } .mobile-nav-links { display: grid !important; justify-items: center !important; gap: 10px !important; } .mobile-nav-links span, .mobile-nav-links .menu-item, .mobile-nav-links .menu-item-has-children { display: grid !important; justify-items: center !important; width: min(440px, 100%) !important; } .mobile-nav-links > span > a, .mobile-nav-links > .menu-item > a { width: 100% !important; } .mobile-nav-links .sub-menu, .mobile-nav-links .menu-item-has-children > .sub-menu { position: static !important; display: grid !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; width: min(380px, calc(100% - 28px)) !important; min-width: 0 !important; margin: -2px auto 8px !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; transform: none !important; } .mobile-nav-links .sub-menu span, .mobile-nav-links .sub-menu .menu-item { width: 100% !important; } .mobile-nav-links .sub-menu a { display: block !important; width: 100% !important; padding: 12px 16px !important; border: 1px solid rgba(155, 111, 78, 0.16) !important; background: rgba(255, 250, 246, 0.6) !important; color: rgba(27, 20, 16, 0.66) !important; font-size: 11px !important; font-weight: 950 !important; letter-spacing: 0.12em !important; line-height: 1.2 !important; text-align: center !important; text-transform: uppercase !important; } .mobile-nav-links .menu-item-has-children > a::after { content: "" !important; display: inline-block !important; width: 6px !important; height: 6px !important; margin-left: 10px !important; border-right: 1px solid currentColor !important; border-bottom: 1px solid currentColor !important; transform: translateY(-2px) rotate(45deg) !important; } } /* ========================================================= FLOKË FINAL NAVIGATION + SHOP ARCHIVE FIX ========================================================= */ /* Center the desktop menu independently of logo/actions. */ .site-header { display: grid !important; grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr); column-gap: 28px; } .site-header .nav-logo { justify-self: start; } .site-header .desktop-nav { justify-self: center; } .site-header .header-actions { justify-self: end; } /* No underline/line under active or hovered menu items. */ .desktop-nav a::after, .desktop-nav a.active::after, .desktop-nav a:hover::after, .desktop-nav a.current-menu-item::after, .desktop-nav a.current_page_item::after { display: none !important; content: none !important; } .desktop-nav a.active, .desktop-nav a:hover, .desktop-nav a.current-menu-item, .desktop-nav a.current_page_item { color: var(--red); } .mobile-menu-toggle { display: none; width: 42px; height: 42px; padding: 8px; border: 0; background: transparent; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .mobile-menu-toggle span { width: 24px; height: 2px; background: #fff; display: block; transition: transform .22s ease, opacity .22s ease; } .mobile-menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .mobile-menu-toggle.open span:nth-child(2) { opacity: 0; } .mobile-menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobile-nav-panel { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: 18px 5.5% 24px; background: #030303; border-top: 1px solid #1c1c1c; border-bottom: 1px solid #24102c; z-index: 60; } .mobile-nav-links { display: grid; text-align: center; } .mobile-nav-links a { padding: 14px 8px; border-bottom: 1px solid #181818; color: #fff; font-size: 13px; font-weight: 900; letter-spacing: .06em; } .mobile-nav-links a:hover, .mobile-nav-links a.current-menu-item { color: var(--red); } .mobile-product-search { display: grid; grid-template-columns: 1fr auto; gap: 8px; width: min(520px, 100%); margin: 20px auto 0; } .mobile-product-search input[type="search"] { min-width: 0; height: 44px; border: 1px solid #43204e; background: #080808; color: #fff; padding: 0 14px; outline: none; } .mobile-product-search input[type="search"]:focus { border-color: var(--red); } .mobile-product-search button { height: 44px; padding: 0 18px; border: 0; background: linear-gradient(90deg, #c80016, #8d005e); color: #fff; font-weight: 900; cursor: pointer; } /* Shop submenu */ .shop-page-subnav { min-height: 64px; display: flex; align-items: center; justify-content: flex-start; gap: clamp(26px, 4vw, 58px); padding: 0 2.1%; background: #030303; border-bottom: 1px solid #242424; overflow-x: auto; scrollbar-width: none; } .shop-page-subnav::-webkit-scrollbar { display: none; } .shop-page-subnav a { flex: 0 0 auto; padding: 22px 0 18px; font-size: 13px; font-weight: 900; white-space: nowrap; } .shop-page-subnav a:hover, .shop-page-subnav a.current-menu-item { color: var(--red); } .floke-shop-hero { position: relative; min-height: 320px; overflow: hidden; background: #050505; border-bottom: 1px solid #181818; } .floke-shop-hero-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); opacity: .48; } .floke-shop-hero-grid img { width: 100%; height: 100%; object-fit: cover; border-right: 3px solid #1b1b1b; } .floke-shop-hero-grid::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.72) 34%, rgba(0,0,0,.28) 72%, rgba(0,0,0,.12) 100%); } .floke-shop-hero-copy { position: relative; z-index: 2; min-height: 320px; display: flex; flex-direction: column; justify-content: center; padding: 38px 4.7%; } .floke-shop-hero-copy h1 { margin: 0 0 18px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(58px, 6vw, 94px); line-height: .95; font-weight: 500; } .floke-shop-hero-copy p { margin: 0; max-width: 620px; font-size: clamp(19px, 2vw, 27px); line-height: 1.25; font-weight: 800; } .floke-shop-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 24px 2.2% 38px; background: #050505; } .floke-shop-card { position: relative; min-height: 460px; overflow: hidden; border: 1px solid #5d236e; background: #0a0a0a; } .floke-shop-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.93) 100%); } .floke-shop-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } .floke-shop-card:hover img { transform: scale(1.025); } .floke-shop-card span { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 46px; text-align: center; font-size: clamp(23px, 2vw, 31px); line-height: 1.05; font-weight: 900; } .floke-shop-card i { position: absolute; z-index: 2; left: 50%; bottom: 25px; width: 50px; height: 3px; transform: translateX(-50%); background: linear-gradient(90deg, var(--red), var(--purple)); } .floke-category-heading { padding: 58px 4.5% 24px; text-align: center; background:#050505; } .floke-category-heading p { margin:0 0 8px; color:var(--red); font-weight:800; letter-spacing:.18em; } .floke-category-heading h1 { margin:0; font-family:Georgia,'Times New Roman',serif; font-size:clamp(44px,6vw,76px); font-weight:500; } .floke-woocommerce-products { padding: 18px 2.2% 56px; background:#050505; } .floke-woocommerce-products ul.products { display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; margin:0 !important; } .floke-woocommerce-products ul.products::before, .floke-woocommerce-products ul.products::after { display:none !important; } .floke-woocommerce-products ul.products li.product { width:auto !important; margin:0 !important; float:none !important; border:1px solid #3b2141; background:#090909; padding-bottom:16px; } .floke-woocommerce-products ul.products li.product img { margin:0 0 14px !important; aspect-ratio:1/1; object-fit:cover; } .floke-woocommerce-products .woocommerce-loop-product__title { color:#fff; font-size:17px !important; padding:0 15px !important; } .floke-woocommerce-products .price { color:#fff !important; padding:0 15px; font-weight:800; } .floke-woocommerce-products .button { margin:10px 15px 0 !important; background:var(--red) !important; color:#fff !important; border-radius:0 !important; } .floke-no-products { text-align:center; color:#aaa; padding:42px 0; } @media (max-width: 1100px) { .site-header { grid-template-columns: 1fr auto !important; padding-left: 24px; padding-right: 24px; } .site-header .desktop-nav { display:none !important; } .site-header .header-actions { justify-self:end; } .site-header .header-actions > .search-toggle, .site-header .header-actions > .account-link { display:none !important; } .mobile-menu-toggle { display:flex; } .site-header.mobile-menu-open .mobile-nav-panel { display:block; } .floke-shop-cards, .floke-woocommerce-products ul.products { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width: 700px) { .site-header { padding-left:16px; padding-right:16px; } .nav-logo { width:150px; } .nav-logo .logo-word { font-size:31px; } .header-actions { gap:8px; } .bag-btn { font-size:12px; } .shop-page-subnav { gap:26px; padding-left:18px; padding-right:18px; } .floke-shop-hero { min-height:360px; } .floke-shop-hero-grid { grid-template-columns:repeat(2,1fr); } .floke-shop-hero-grid img:nth-child(3), .floke-shop-hero-grid img:nth-child(4) { display:none; } .floke-shop-hero-copy { min-height:360px; padding:40px 22px; } .floke-shop-hero-copy h1 { font-size:54px; } .floke-shop-hero-copy p { font-size:19px; } .floke-shop-cards, .floke-woocommerce-products ul.products { grid-template-columns:1fr; } .floke-shop-card { min-height:430px; } } /* ========================================================= FLOKË 2026 FINAL HEADER / MENU / SEARCH OVERRIDES Keep this section last so it wins over older theme rules. ========================================================= */ /* Hide the legacy WPCode hamburger from earlier fixes. It is the stray white line/button that could appear before HOME on desktop. */ .floke-mobile-menu-btn { display: none !important; } /* Desktop header: logo left, menu truly centered, actions right. */ .site-header { position: sticky; top: 0; z-index: 100; display: grid !important; grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr) !important; align-items: center; gap: 24px; width: 100%; min-height: 96px; height: auto; padding: 0 4.8% !important; background: #030303; } .site-header .nav-logo { justify-self: start; } .site-header .desktop-nav { justify-self: center; display: flex !important; align-items: center; justify-content: center; gap: clamp(30px, 4vw, 64px); margin: 0; } .site-header .header-actions { justify-self: end; display: flex; align-items: center; gap: 14px; } /* NO underline, stripe, marker, pseudo-line, or list marker in the primary menu. */ .desktop-nav, .desktop-nav ul, .desktop-nav li { list-style: none !important; margin: 0 !important; padding-left: 0 !important; } .desktop-nav::before, .desktop-nav::after, .desktop-nav a::before, .desktop-nav a::after, .desktop-nav a.active::before, .desktop-nav a.active::after, .desktop-nav a:hover::before, .desktop-nav a:hover::after, .desktop-nav a.current-menu-item::before, .desktop-nav a.current-menu-item::after, .desktop-nav a.current_page_item::before, .desktop-nav a.current_page_item::after { content: none !important; display: none !important; width: 0 !important; height: 0 !important; border: 0 !important; background: transparent !important; } .desktop-nav a { display: inline-flex; align-items: center; min-height: 96px; padding: 0 !important; border: 0 !important; text-decoration: none !important; color: #fff; font-size: 13px; font-weight: 900; line-height: 1; white-space: nowrap; } .desktop-nav a:hover, .desktop-nav a:focus, .desktop-nav a.active, .desktop-nav a.current-menu-item, .desktop-nav a.current_page_item, .desktop-nav a.current-menu-ancestor { color: var(--red) !important; } /* Social icons in the announcement bar. */ .floke-social-icons { display: inline-flex; align-items: center; justify-self: end; gap: 14px; letter-spacing: 0 !important; } .floke-social-icons a { display: inline-flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; } .floke-social-icons a:hover { color: var(--red); } .floke-social-icons svg { width: 17px; height: 17px; display: block; } .footer-socials .floke-social-icons { justify-self: start; margin-top: 8px; } /* Desktop search: clean magnifying glass, no old symbol. */ .header-product-search { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin: 0; } .header-search-input { width: 0; min-width: 0; height: 38px; padding: 0; border: 1px solid transparent; outline: 0; opacity: 0; pointer-events: none; background: #080808; color: #fff; transition: width .22s ease, opacity .18s ease, padding .22s ease, border-color .18s ease; } .header-product-search.is-open .header-search-input { width: 190px; padding: 0 12px; border-color: #4b2457; opacity: 1; pointer-events: auto; } .floke-search-toggle { flex: 0 0 38px; width: 38px !important; height: 38px !important; padding: 7px !important; border: 0 !important; background: transparent !important; color: #fff !important; text-indent: 0 !important; overflow: visible !important; cursor: pointer; } .floke-search-toggle::before, .floke-search-toggle::after { content: none !important; display: none !important; } .search-icon-svg { width: 22px; height: 22px; display: block; } .floke-search-toggle:hover { color: var(--red) !important; } .mobile-search-trigger { display: none !important; width: 40px; height: 40px; padding: 8px !important; border: 0 !important; background: transparent !important; color: #fff !important; cursor: pointer; } .mobile-search-trigger:hover { color: var(--red) !important; } .mobile-search-trigger .search-icon-svg { width: 21px; height: 21px; } /* Built-in 3-line hamburger. */ .mobile-menu-toggle { display: none !important; width: 42px; height: 42px; padding: 8px; border: 0; background: transparent; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; z-index: 103; } .mobile-menu-toggle span { display: block; width: 25px; height: 2px; border-radius: 1px; background: #fff; transition: transform .22s ease, opacity .22s ease, background .2s ease; } .mobile-menu-toggle:hover span { background: var(--red); } .mobile-menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .mobile-menu-toggle.open span:nth-child(2) { opacity: 0; } .mobile-menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Tablet/mobile dropdown: links centered, then search directly below. */ .mobile-nav-panel { display: none !important; position: absolute; top: 100%; left: 0; right: 0; z-index: 102; padding: 14px clamp(18px, 5vw, 48px) 24px; background: #030303; border-top: 1px solid #171717; border-bottom: 1px solid #35123e; } .site-header.mobile-menu-open .mobile-nav-panel { display: block !important; } .mobile-nav-links { display: flex; flex-direction: column; align-items: stretch; width: min(560px, 100%); margin: 0 auto; text-align: center; } .mobile-nav-links a { display: block; width: 100%; padding: 15px 10px; border: 0 !important; border-bottom: 1px solid #181818 !important; color: #fff; text-decoration: none; font-size: 13px; font-weight: 900; letter-spacing: .06em; } .mobile-nav-links a::before, .mobile-nav-links a::after { content: none !important; display: none !important; } .mobile-nav-links a:hover, .mobile-nav-links a:focus, .mobile-nav-links a.current-menu-item, .mobile-nav-links a.current_page_item { color: var(--red) !important; } .mobile-product-search { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; width: min(560px, 100%); margin: 18px auto 0; } .mobile-product-search input[type="search"] { width: 100%; min-width: 0; height: 44px; padding: 0 13px; border: 1px solid #43204e; outline: none; background: #080808; color: #fff; font-size: 16px; } .mobile-product-search input[type="search"]:focus { border-color: var(--red); } .mobile-product-search button { height: 44px; padding: 0 18px; border: 0; background: linear-gradient(90deg,#c80016,#8d005e); color: #fff; font-weight: 900; cursor: pointer; } /* Shop category menu remains part of the FLOKË design and is horizontally scrollable on small widths instead of breaking the layout. */ .shop-page-subnav { display: flex !important; align-items: center; justify-content: flex-start; gap: clamp(28px, 4vw, 62px); min-height: 62px; padding: 0 3.5% !important; overflow-x: auto; scrollbar-width: none; background: #030303; border-bottom: 1px solid #1b1b1b; } .shop-page-subnav::-webkit-scrollbar { display: none; } .shop-page-subnav a { flex: 0 0 auto; padding: 21px 0 !important; border: 0 !important; color: #fff; text-decoration: none; font-size: 13px; font-weight: 900; white-space: nowrap; } .shop-page-subnav a::before, .shop-page-subnav a::after { content: none !important; display: none !important; } .shop-page-subnav a:hover, .shop-page-subnav a:focus, .shop-page-subnav a.current-menu-item, .shop-page-subnav a.current_page_item { color: var(--red) !important; } @media (max-width: 1100px) { .site-header { grid-template-columns: minmax(150px,1fr) auto minmax(150px,1fr) !important; min-height: 82px; padding: 0 24px !important; } .site-header .nav-logo { grid-column: 1; justify-self: start; } .site-header .desktop-nav { display: none !important; } .mobile-menu-toggle { display: flex !important; grid-column: 2; justify-self: center; } .site-header .header-actions { grid-column: 3; justify-self: end; gap: 8px; } .site-header .header-actions > .header-product-search, .site-header .header-actions > .account-link { display: none !important; } .mobile-search-trigger { display: inline-flex !important; align-items:center; justify-content:center; } } @media (max-width: 700px) { .topbar { width: 100% !important; grid-template-columns: 1fr !important; gap: 8px; padding: 10px 16px !important; text-align: center; } .topbar .floke-social-icons { justify-self: center; } .site-header { grid-template-columns: minmax(118px,1fr) 42px minmax(104px,1fr) !important; min-height: 72px; padding: 0 12px !important; } .site-header .nav-logo { width: 150px; } .site-header .nav-logo .logo-word { font-size: 30px; } .site-header .nav-logo .logo-co { font-size: 11px; margin-top: 6px; } .site-header .header-actions { gap: 3px; } .bag-btn { font-size: 12px; } .mobile-menu-toggle { width: 40px; height: 40px; padding: 7px; } .mobile-nav-panel { padding-left: 16px; padding-right: 16px; } .mobile-product-search { grid-template-columns: 1fr; } .mobile-product-search button { width: 100%; } .shop-page-subnav { gap: 26px; padding: 0 18px !important; } } /* FLOKË premium light theme refresh */ :root { --bg: #f7f1eb; --panel: #fffaf6; --panel-2: #f0e1d4; --text: #1b1410; --muted: #766a61; --red: #9b6f4e; --purple: #b99362; --line: rgba(27, 20, 16, 0.15); --floke-ink: #1b1410; --floke-paper: #f7f1eb; --floke-cream: #fffaf6; --floke-soft: #eadfd7; --floke-muted: #766a61; --floke-accent: #9b6f4e; --floke-deep: #5f4331; --floke-gold: #b99362; } body { background: var(--floke-paper); color: var(--floke-ink); font-family: Arial, Helvetica, sans-serif; } .floke-logo { display: inline-block; width: 160px; line-height: 0; } .floke-logo svg { display: block; width: 100%; height: auto; overflow: visible; } .floke-logo-word { fill: var(--floke-ink); } .floke-logo-accent, .floke-logo-co { fill: var(--floke-accent); } .floke-logo-line { stroke: var(--floke-accent); stroke-width: 1.5; stroke-linecap: butt; } .intro-screen { background: radial-gradient(circle at 50% 42%, rgba(185, 147, 98, 0.3), transparent 34%), linear-gradient(135deg, rgba(95, 67, 49, 0.24), transparent 34%), linear-gradient(315deg, rgba(255, 250, 246, 0.65), transparent 46%), linear-gradient(180deg, #fffaf6 0%, #f0e1d4 100%); } .intro-screen::before, .intro-screen::after, .intro-aura { display: none !important; } .intro-inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: 24px; } .intro-logo { width: min(78vw, 610px); } .intro-logo .floke-logo-word { fill: var(--floke-ink); } .intro-tagline, .logo-tagline { margin: -10px 0 0; color: rgba(27, 20, 16, 0.62); font-size: 12px; font-weight: 800; letter-spacing: 0.26em; text-transform: uppercase; } .intro-start { min-width: 148px; min-height: 48px; border: 1px solid rgba(27, 20, 16, 0.24); background: rgba(255, 250, 246, 0.58); color: var(--floke-ink); font-size: 12px; font-weight: 900; letter-spacing: 0.22em; text-transform: uppercase; } .intro-screen .floke-logo text { opacity: 0; transform: translateY(10px); animation: floke-logo-rise 0.9s ease forwards; } .intro-screen .floke-logo line { stroke-dasharray: 180; stroke-dashoffset: 180; animation: floke-line-draw 0.9s ease 0.45s forwards; } .intro-tagline, .intro-start { opacity: 0; transform: translateY(8px); animation: floke-soft-in 0.7s ease 0.95s forwards; } .intro-start { animation-delay: 1.18s; } @keyframes floke-logo-rise { to { opacity: 1; transform: translateY(0); } } @keyframes floke-line-draw { to { stroke-dashoffset: 0; } } @keyframes floke-soft-in { to { opacity: 1; transform: translateY(0); } } .topbar { display: flex; justify-content: center; gap: clamp(16px, 4vw, 46px); min-height: auto; padding: 10px 18px; background: #211711; color: var(--floke-paper); border-bottom: 0; font-size: 11px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; } .topbar .floke-social-icons { position: absolute; right: clamp(18px, 4vw, 56px); } .site-header { position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "logo nav actions" "panel panel panel"; align-items: center; gap: clamp(18px, 4vw, 54px); min-height: auto; padding: 14px clamp(18px, 4vw, 56px); border-bottom: 1px solid var(--floke-line); background: rgba(247, 241, 235, 0.84); backdrop-filter: blur(16px); } .site-header .nav-logo { grid-area: logo; width: 160px; margin: 0; justify-self: start; } .desktop-nav { grid-area: nav; display: flex; align-items: center; justify-content: center; gap: clamp(13px, 2vw, 24px); } .desktop-nav a { position: relative; padding: 12px 0; color: rgba(27, 20, 16, 0.72); font-size: 12px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; } .desktop-nav a:hover, .desktop-nav a.active { color: var(--floke-ink); } .desktop-nav a.active::after, .desktop-nav a:first-child::after { content: ""; position: absolute; left: 0; right: 0.14em; bottom: 5px; height: 1px; background: var(--floke-accent); } .header-actions { grid-area: actions; display: flex; align-items: center; justify-content: flex-end; gap: clamp(12px, 2vw, 22px); } .icon-btn, .bag-btn { color: var(--floke-ink); } .bag-btn { min-height: 44px; border: 1px solid var(--floke-line); background: rgba(255, 250, 246, 0.5); padding: 0 13px; font-size: 12px; font-weight: 900; letter-spacing: 0.13em; } .header-product-search { color: var(--floke-ink); } .mobile-menu-toggle { grid-area: toggle; display: none; width: 44px; height: 44px; border: 1px solid var(--floke-line); background: rgba(255, 250, 246, 0.7); color: var(--floke-ink); } .mobile-menu-toggle span { background: currentColor; } .mobile-nav-panel { grid-area: panel; position: static; display: none; width: 100%; max-height: none; padding: 14px 0 0; border-top: 1px solid var(--floke-line); background: transparent; box-shadow: none; transform: none; opacity: 1; pointer-events: auto; } .site-header.mobile-menu-open .mobile-nav-panel { display: block; } .mobile-nav-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .mobile-nav-links a, .mobile-product-search input, .mobile-product-search button { min-height: 42px; border: 1px solid var(--floke-line); background: rgba(255, 250, 246, 0.74); color: var(--floke-ink); font-size: 12px; font-weight: 900; letter-spacing: 0.13em; text-transform: uppercase; } .mobile-nav-links a { display: flex; align-items: center; padding: 0 12px; } .mobile-product-search { margin-top: 10px; } .floke-premium-hero { position: relative; display: grid; grid-template-columns: minmax(0, 650px) minmax(260px, 1fr); gap: 30px; align-items: end; min-height: 680px; padding: clamp(54px, 8vw, 108px) clamp(18px, 4vw, 56px) 48px; background: linear-gradient(90deg, rgba(247, 241, 235, 0.98) 0%, rgba(247, 241, 235, 0.85) 47%, rgba(247, 241, 235, 0.2) 100%); overflow: hidden; } .floke-premium-hero > img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: center right; } .floke-premium-hero .hero-content { position: static; max-width: 650px; padding: 0; color: var(--floke-ink); transform: none; } .hero-kicker { margin: 0 0 16px; color: var(--floke-deep); font-size: 12px; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; } .floke-premium-hero h1 { max-width: 650px; margin: 0; color: var(--floke-ink); font-family: Georgia, "Times New Roman", serif; font-size: clamp(50px, 9vw, 108px); font-weight: 500; line-height: 0.92; letter-spacing: 0; text-transform: none; } .floke-premium-hero .hero-content p:not(.hero-kicker) { max-width: 500px; margin: 24px 0 0; color: var(--floke-muted); font-size: 16px; font-weight: 500; line-height: 1.65; letter-spacing: 0; text-transform: none; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .btn, .button, .woocommerce a.button, .woocommerce button.button { border-radius: 0; font-weight: 900; letter-spacing: 0.13em; text-transform: uppercase; } .btn-primary, .woocommerce a.button, .woocommerce button.button { border: 1px solid var(--floke-ink); background: var(--floke-ink); color: var(--floke-paper); } .btn-secondary { border: 1px solid var(--floke-line); background: rgba(255, 250, 246, 0.72); color: var(--floke-ink); } .hero-trust-panel { justify-self: end; width: min(100%, 380px); padding: 22px; border: 1px solid var(--floke-line); background: rgba(255, 250, 246, 0.86); backdrop-filter: blur(14px); } .hero-trust-panel h2, .floke-premium-products h2, .floke-home-professional h2 { margin: 0; color: var(--floke-ink); font-family: Georgia, "Times New Roman", serif; font-size: 30px; font-weight: 500; letter-spacing: 0; text-transform: none; } .trust-list { display: grid; gap: 13px; margin-top: 18px; } .trust-list div { display: grid; grid-template-columns: 28px 1fr; gap: 12px; color: var(--floke-muted); font-size: 13px; line-height: 1.45; } .trust-list span { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid rgba(185, 147, 98, 0.64); color: var(--floke-accent); font-size: 12px; } .trust-list p { margin: 0; } .trust-list strong { display: block; color: var(--floke-ink); font-size: 12px; font-weight: 900; letter-spacing: 0.11em; text-transform: uppercase; } .floke-premium-categories { background: var(--floke-paper); border-top: 1px solid var(--floke-line); border-bottom: 1px solid var(--floke-line); } .floke-premium-categories .category-tile { background: var(--floke-cream); } .floke-premium-products, .floke-premium-benefits, .floke-home-professional { background: var(--floke-paper); color: var(--floke-ink); } .floke-premium-products .product-card { border: 1px solid var(--floke-line); background: var(--floke-cream); box-shadow: none; } .floke-premium-products .product-info h3 { font-family: Georgia, "Times New Roman", serif; font-size: 23px; font-weight: 500; letter-spacing: 0; text-transform: none; } .floke-premium-products .product-info p, .floke-home-professional p { color: var(--floke-muted); } .floke-premium-benefits { border-top: 1px solid var(--floke-line); border-bottom: 1px solid var(--floke-line); } .floke-home-professional { text-align: center; } .floke-home-professional .hero-actions { justify-content: center; } .shop-page-subnav, .floke-shop-hero, .floke-shop-cards, .floke-category-heading, .floke-woocommerce-products, .professional-page, .professional-panel, .products-section.pro-shop-page { background: var(--floke-paper); color: var(--floke-ink); } .shop-page-subnav { border-top: 1px solid var(--floke-line); border-bottom: 1px solid var(--floke-line); } .shop-page-subnav a, .pro-account-nav a { color: rgba(27, 20, 16, 0.72); } .shop-page-subnav a:hover, .pro-account-nav a:hover, .pro-account-nav a.active { color: var(--floke-ink); } .floke-shop-hero { border-bottom: 1px solid var(--floke-line); } .floke-shop-hero-copy h1, .floke-category-heading h1, .professional-page h1, .professional-page h2, .professional-panel h2, .bulk-steps h3 { color: var(--floke-ink); } .professional-page h1 span, .login-page h1 span { color: var(--floke-accent); } .professional-form label { color: var(--floke-ink); } .professional-form input, .professional-form select, .professional-form textarea { border: 1px solid rgba(155, 111, 78, 0.34); background: var(--floke-cream); color: var(--floke-ink); } .professional-two-column > section, .bulk-steps article, .pro-filters, .professional-lock { border-color: var(--floke-line); background: var(--floke-cream); color: var(--floke-ink); } .pro-filters a, .pro-filters span, .professional-lock-copy, .professional-lead, .professional-small, .benefit-list, .bulk-steps p, .professional-panel p { color: var(--floke-muted); } .pro-shop-layout .product-card { border: 1px solid var(--floke-line); background: var(--floke-cream); } .professional-price-label, .locked-price, .forgot-link, .professional-small a { color: var(--floke-accent); } footer { background: #211711; color: var(--floke-paper); } footer .floke-logo-word { fill: var(--floke-paper); } @media (max-width: 1120px) { .site-header { gap: 24px; } .site-header .nav-logo { width: 148px; } .desktop-nav, .header-actions { gap: 14px; } .desktop-nav a, .header-actions, .bag-btn { font-size: 11px; letter-spacing: 0.11em; } } @media (max-width: 1024px) { .site-header { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "logo actions toggle" "panel panel panel"; gap: 14px; } .desktop-nav { display: none; } .mobile-menu-toggle { display: flex !important; align-items: center; justify-content: center; grid-column: auto; justify-self: end; } .floke-premium-hero, .floke-home-professional { grid-template-columns: 1fr; } .hero-trust-panel { justify-self: start; width: min(100%, 520px); } } /* V1.3.3 professional dashboard readability and current-theme cleanup */ .professional-page .title-rule { margin: clamp(28px, 5vw, 56px) 0 clamp(22px, 4vw, 34px); grid-template-columns: minmax(48px, 1fr) auto minmax(48px, 1fr); align-items: center; gap: clamp(14px, 3vw, 28px); } .professional-page .title-rule h1 { margin: 0; max-width: min(760px, 100%); color: var(--floke-ink) !important; font-family: Georgia, "Times New Roman", serif !important; font-size: clamp(34px, 5vw, 62px); font-weight: 500; line-height: 1.02; letter-spacing: 0; text-align: center; text-transform: none; } .professional-page .title-rule span { min-width: 0; background: rgba(155, 111, 78, 0.42); } .dashboard-stats { align-items: stretch; } .dashboard-stats > div, .professional-two-column > section { border: 1px solid rgba(155, 111, 78, 0.18) !important; background: linear-gradient(120deg, rgba(255, 250, 246, 0.96), rgba(239, 230, 221, 0.54)), var(--floke-cream) !important; color: var(--floke-ink) !important; } .dashboard-stats span, .professional-table .table-head span { color: rgba(27, 20, 16, 0.68) !important; } .dashboard-stats strong { color: var(--floke-ink) !important; font-family: Georgia, "Times New Roman", serif; font-weight: 500; } .professional-table { color: var(--floke-ink); } .professional-table .table-row { border-bottom-color: rgba(155, 111, 78, 0.18) !important; color: rgba(27, 20, 16, 0.72) !important; } .professional-table .table-head { color: var(--floke-ink) !important; } .professional-table .table-head span { font-size: 12px; font-weight: 950; letter-spacing: 0.12em; text-transform: uppercase; } .professional-two-column .btn { box-shadow: none !important; } @media (max-width: 700px) { .professional-page .title-rule { display: block; margin: 24px 0 22px; text-align: left; } .professional-page .title-rule span { display: block; width: 86px; height: 1px; margin: 0 0 18px; } .professional-page .title-rule span:last-child { display: none; } .professional-page .title-rule h1 { max-width: 100%; font-size: clamp(32px, 9.5vw, 44px); line-height: 1; text-align: left; } .dashboard-stats { gap: 14px; margin: 22px 0 28px; } .dashboard-stats > div, .professional-two-column > section { padding: 26px 22px; } .professional-table .table-head { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; padding: 0 0 18px; } .professional-table .table-head span { color: rgba(27, 20, 16, 0.72) !important; font-size: 13px; } .professional-table .table-row:not(.table-head) { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 16px 0; } .professional-table .table-row:not(.table-head) span { display: flex; justify-content: space-between; gap: 18px; color: var(--floke-ink) !important; } .professional-table .table-row:not(.table-head) span::before { content: attr(data-label); color: rgba(27, 20, 16, 0.58); font-size: 11px; font-weight: 950; letter-spacing: 0.12em; text-transform: uppercase; } } @media (max-width: 700px) { .topbar { display: grid; grid-template-columns: 1fr !important; gap: 8px; text-align: center; } .topbar .floke-social-icons { position: static; justify-self: center; } .site-header { grid-template-columns: auto 1fr auto !important; min-height: auto; gap: 10px; padding: 12px 14px !important; } .site-header .nav-logo { width: 132px; } .site-header .header-actions > .header-product-search, .site-header .header-actions > .account-link { display: none !important; } .mobile-search-trigger { display: inline-flex !important; align-items: center; justify-content: center; } .bag-btn { min-width: auto; padding: 0 10px; font-size: 11px; } .mobile-nav-links { grid-template-columns: 1fr; } .floke-premium-hero { min-height: 650px; grid-template-columns: 1fr; padding: 52px 18px 34px; background: linear-gradient(180deg, rgba(247, 241, 235, 0.98) 0%, rgba(247, 241, 235, 0.88) 56%, rgba(247, 241, 235, 0.48) 100%); } .floke-premium-hero > img { object-position: center bottom; } .floke-premium-hero h1 { font-size: clamp(45px, 14vw, 68px); } .hero-actions .btn { width: 100%; } } /* Final polish after live upload review */ .topbar { position: relative; width: 100% !important; height: auto !important; min-height: 44px !important; margin: 0 !important; padding: 12px clamp(18px, 4vw, 56px) !important; background: #211711 !important; color: var(--floke-paper) !important; display: grid !important; grid-template-columns: 1fr auto 1fr !important; align-items: center !important; gap: 18px !important; } .topbar > span { color: var(--floke-paper) !important; line-height: 1.25 !important; } .topbar > span:first-child { justify-self: end !important; } .topbar > span:nth-child(2) { justify-self: center !important; } .topbar > span:nth-child(3) { justify-self: start !important; } .topbar .floke-social-icons { position: absolute !important; right: clamp(18px, 4vw, 56px) !important; top: 50% !important; transform: translateY(-50%) !important; gap: 13px !important; } .topbar .floke-social-icons a, footer .floke-social-icons a { color: var(--floke-paper) !important; opacity: 0.88 !important; } .topbar .floke-social-icons a:hover, footer .floke-social-icons a:hover { color: var(--floke-gold) !important; opacity: 1 !important; } .topbar .floke-social-icons svg { width: 18px !important; height: 18px !important; } .site-header .nav-logo { width: 184px !important; } .site-header .icon-btn, .site-header .floke-search-toggle, .site-header .mobile-search-trigger, .site-header .account-link { color: var(--floke-ink) !important; opacity: 0.88 !important; } .site-header .icon-btn:hover, .site-header .floke-search-toggle:hover, .site-header .mobile-search-trigger:hover, .site-header .account-link:hover { color: var(--floke-accent) !important; opacity: 1 !important; } .search-icon-svg { width: 22px !important; height: 22px !important; display: block !important; color: currentColor !important; } .search-icon-svg circle, .search-icon-svg line { stroke: currentColor !important; } .account-icon-svg { width: 22px !important; height: 22px !important; display: block !important; color: currentColor !important; } .account-icon-svg circle, .account-icon-svg path { stroke: currentColor !important; } .header-search-input { background: var(--floke-cream) !important; color: var(--floke-ink) !important; } .header-product-search.is-open .header-search-input { border-color: rgba(155, 111, 78, 0.42) !important; } .mobile-product-search { width: min(520px, 100%) !important; display: grid !important; grid-template-columns: minmax(0, 1fr) 46px !important; gap: 8px !important; margin: 12px 0 0 !important; } .mobile-product-search input[type="search"] { height: 46px !important; min-height: 46px !important; border: 1px solid var(--floke-line) !important; background: var(--floke-cream) !important; color: var(--floke-ink) !important; padding: 0 13px !important; font-size: 16px !important; letter-spacing: 0 !important; text-transform: none !important; } .mobile-product-search button { width: 46px !important; height: 46px !important; min-height: 46px !important; display: grid !important; place-items: center !important; padding: 0 !important; border: 1px solid var(--floke-line) !important; background: rgba(255, 250, 246, 0.78) !important; color: var(--floke-ink) !important; } .mobile-product-search button .search-icon-svg { width: 19px !important; height: 19px !important; } .mobile-product-search input[type="search"]:focus, .mobile-product-search button:focus { border-color: rgba(155, 111, 78, 0.55) !important; } .floke-premium-hero > img, .floke-shop-hero-grid img, .category-tile img, .floke-shop-card img, .product-card img { filter: sepia(0.12) saturate(0.82) contrast(0.96) brightness(1.03); } .floke-shop-hero { background: var(--floke-paper) !important; border-bottom: 1px solid var(--floke-line) !important; } .floke-shop-hero-grid { opacity: 0.32 !important; } .floke-shop-hero-grid::after { background: linear-gradient(90deg, rgba(247, 241, 235, 0.92) 0%, rgba(247, 241, 235, 0.72) 42%, rgba(247, 241, 235, 0.4) 100%) !important; } .floke-shop-hero-copy h1, .floke-shop-hero-copy p { color: var(--floke-ink) !important; } .hero-trust-panel, .floke-premium-hero .hero-content { text-shadow: none !important; } .hero-trust-panel p, .hero-trust-panel .trust-list p, .hero-trust-panel .trust-list div { color: var(--floke-muted) !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.45 !important; letter-spacing: 0 !important; text-transform: none !important; } @media (max-width: 1120px) { .site-header .nav-logo { width: 168px !important; } } @media (max-width: 1024px) { .site-header .nav-logo { width: 160px !important; } .topbar { grid-template-columns: 1fr !important; justify-items: center !important; padding-right: 70px !important; padding-left: 70px !important; text-align: center !important; } .topbar > span:first-child, .topbar > span:nth-child(2), .topbar > span:nth-child(3) { justify-self: center !important; } } @media (max-width: 700px) { .site-header .nav-logo { width: 148px !important; } .topbar { min-height: 42px !important; padding: 10px 16px !important; } .topbar .floke-social-icons { position: static !important; transform: none !important; justify-self: center !important; } .mobile-product-search { grid-template-columns: minmax(0, 1fr) 44px !important; } .mobile-product-search button, .mobile-product-search input[type="search"] { height: 44px !important; min-height: 44px !important; } .mobile-product-search button { width: 44px !important; } } /* Editable media and image-free premium states */ .floke-premium-hero.no-hero-image, .professional-hero.no-hero-image { overflow: hidden; background: linear-gradient(120deg, rgba(247, 241, 235, 0.98) 0%, rgba(232, 220, 209, 0.9) 48%, rgba(255, 250, 246, 0.96) 100%), repeating-linear-gradient(90deg, rgba(155, 111, 78, 0.08) 0, rgba(155, 111, 78, 0.08) 1px, transparent 1px, transparent 84px) !important; } .floke-premium-hero.no-hero-image::before, .professional-hero.no-hero-image::before { content: "FLOKË"; position: absolute; right: clamp(-20px, 4vw, 70px); bottom: clamp(18px, 5vw, 64px); z-index: 0; color: rgba(155, 111, 78, 0.08); font-family: Georgia, "Times New Roman", serif; font-size: clamp(86px, 16vw, 260px); line-height: 0.8; letter-spacing: 0; pointer-events: none; } .floke-premium-hero.no-hero-image .hero-content, .professional-hero.no-hero-image .hero-content, .floke-premium-hero.no-hero-image .hero-trust-panel { position: relative; z-index: 1; } .floke-premium-hero.no-hero-image .hero-trust-panel { background: rgba(255, 250, 246, 0.74) !important; border-color: rgba(155, 111, 78, 0.18) !important; } .floke-premium-categories { margin-top: 0 !important; } .category-tile.no-image, .floke-shop-card.no-image, .product-image-placeholder { display: grid; place-items: center; background: linear-gradient(145deg, rgba(255, 250, 246, 0.95), rgba(232, 220, 209, 0.82)), repeating-linear-gradient(135deg, rgba(155, 111, 78, 0.13) 0, rgba(155, 111, 78, 0.13) 1px, transparent 1px, transparent 18px) !important; } .category-tile.no-image::after, .floke-shop-card.no-image::after { background: linear-gradient(180deg, rgba(30, 20, 15, 0.02) 0%, rgba(30, 20, 15, 0.24) 100%) !important; } .category-tile.no-image .floke-placeholder-mark, .floke-shop-card.no-image .floke-placeholder-mark { position: static !important; z-index: 1; display: grid; place-items: center; width: 72px; height: 72px; border: 1px solid rgba(155, 111, 78, 0.28); color: rgba(155, 111, 78, 0.78); font-family: Georgia, "Times New Roman", serif; font-size: 34px; font-weight: 400; line-height: 1; } .category-tile.no-image > span:last-child, .floke-shop-card.no-image > span:last-child { color: var(--floke-ink) !important; } .product-card a:has(.product-image-placeholder) { display: block; text-decoration: none; } .product-image-placeholder { width: 100%; aspect-ratio: 1.38 / 1; border-bottom: 1px solid var(--floke-line); } .product-image-placeholder span { color: rgba(155, 111, 78, 0.7); font-family: Georgia, "Times New Roman", serif; font-size: clamp(28px, 5vw, 54px); font-weight: 400; letter-spacing: 0.12em; } .floke-shop-hero { min-height: 300px !important; background: linear-gradient(120deg, rgba(247, 241, 235, 1) 0%, rgba(232, 220, 209, 0.82) 52%, rgba(255, 250, 246, 1) 100%) !important; } .floke-shop-hero::after { content: "COLLECTION"; position: absolute; right: clamp(22px, 8vw, 150px); bottom: clamp(14px, 4vw, 42px); color: rgba(155, 111, 78, 0.1); font-family: Georgia, "Times New Roman", serif; font-size: clamp(52px, 9vw, 140px); letter-spacing: 0; line-height: 0.85; pointer-events: none; } .floke-shop-hero-copy { position: relative; z-index: 1; } .floke-shop-card { min-height: clamp(250px, 30vw, 390px) !important; } @media (max-width: 1024px) { .floke-premium-hero.no-hero-image, .professional-hero.no-hero-image { min-height: auto !important; } } @media (max-width: 700px) { .floke-shop-hero { min-height: 280px !important; } .floke-shop-hero::after, .floke-premium-hero.no-hero-image::before, .professional-hero.no-hero-image::before { opacity: 0.55; } .category-tile.no-image .floke-placeholder-mark, .floke-shop-card.no-image .floke-placeholder-mark { width: 58px; height: 58px; font-size: 28px; } } /* V1.1.3 final media-free polish */ .hero.no-hero-image::after, .floke-premium-hero.no-hero-image::after, .professional-hero.no-hero-image::after { background: none !important; } .floke-premium-hero.no-hero-image { min-height: clamp(560px, 68vh, 760px) !important; background: linear-gradient(100deg, rgba(247, 241, 235, 1) 0%, rgba(239, 230, 221, 0.96) 54%, rgba(255, 250, 246, 1) 100%), repeating-linear-gradient(90deg, rgba(155, 111, 78, 0.045) 0, rgba(155, 111, 78, 0.045) 1px, transparent 1px, transparent 96px) !important; } .floke-premium-hero.no-hero-image::before { right: clamp(12px, 6vw, 96px); bottom: clamp(20px, 6vw, 80px); color: rgba(155, 111, 78, 0.065) !important; opacity: 1 !important; } .floke-premium-hero.no-hero-image .hero-kicker, .floke-premium-hero.no-hero-image h1, .floke-premium-hero.no-hero-image .hero-content p:not(.hero-kicker) { color: var(--floke-ink) !important; } .floke-premium-hero.no-hero-image .hero-content p:not(.hero-kicker) { color: var(--floke-muted) !important; } .professional-hero.no-hero-image { background: linear-gradient(100deg, #070605 0%, #140d09 44%, #2a1710 100%) !important; } .professional-hero.no-hero-image::before { color: rgba(176, 128, 91, 0.1) !important; opacity: 1 !important; } .professional-hero.no-hero-image .hero-content { color: var(--floke-paper) !important; } .professional-hero.no-hero-image .hero-content h1, .professional-hero.no-hero-image .hero-content h1 span { color: var(--floke-gold) !important; } .professional-hero.no-hero-image .hero-content > p { color: #fffaf6 !important; } .professional-hero.no-hero-image .professional-copy { color: rgba(255, 250, 246, 0.78) !important; } .professional-benefits { background: #070605 !important; border-top: 1px solid rgba(176, 128, 91, 0.26) !important; } .professional-benefits h3 { color: #fffaf6 !important; } .professional-benefits p { color: rgba(255, 250, 246, 0.68) !important; } .professional-benefits span { color: var(--floke-gold) !important; border-color: rgba(176, 128, 91, 0.38) !important; } .site-header .bag-btn { min-width: 82px !important; height: 54px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 1px solid rgba(155, 111, 78, 0.16) !important; background: rgba(255, 250, 246, 0.72) !important; color: var(--floke-ink) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42) !important; text-decoration: none !important; } .site-header .bag-btn:hover { border-color: rgba(155, 111, 78, 0.35) !important; background: rgba(255, 250, 246, 0.94) !important; color: var(--floke-accent) !important; } .site-header .bag-btn span { top: -10px !important; right: -10px !important; width: 22px !important; height: 22px !important; display: grid !important; place-items: center !important; background: var(--floke-accent) !important; color: var(--floke-paper) !important; border: 1px solid rgba(255, 250, 246, 0.72) !important; font-size: 11px !important; } .site-header .account-link { width: 44px !important; height: 44px !important; display: inline-grid !important; place-items: center !important; border: 1px solid transparent !important; border-radius: 0 !important; text-decoration: none !important; } .site-header .account-link:hover { border-color: rgba(155, 111, 78, 0.18) !important; background: rgba(255, 250, 246, 0.54) !important; } .floke-shop-cards { padding-top: clamp(30px, 4vw, 56px) !important; } .floke-shop-card.has-image, .floke-shop-card.no-image { border-color: rgba(155, 111, 78, 0.2) !important; } .floke-shop-card.no-image { min-height: clamp(220px, 26vw, 340px) !important; } .floke-woocommerce-products { padding-top: clamp(22px, 4vw, 48px) !important; } @media (max-width: 1024px) { .site-header .bag-btn { height: 48px !important; min-width: 74px !important; } .floke-premium-hero.no-hero-image { min-height: auto !important; } } @media (max-width: 700px) { .site-header .bag-btn { height: 44px !important; min-width: 62px !important; padding: 0 9px !important; } .site-header .bag-btn span { top: -9px !important; right: -8px !important; width: 20px !important; height: 20px !important; } .floke-shop-card.no-image { min-height: 210px !important; } } /* V1.1.5 product card button refinement */ .product-card .add-to-cart, .floke-premium-products .product-card .add-to-cart, .pro-shop-layout .product-card .add-to-cart { width: 100% !important; min-height: 48px !important; margin-top: 18px !important; border: 1px solid rgba(155, 111, 78, 0.44) !important; background: linear-gradient(90deg, rgba(255, 250, 246, 0.96), rgba(232, 220, 209, 0.88)) !important; color: var(--floke-ink) !important; box-shadow: inset 0 -2px 0 rgba(155, 111, 78, 0.2) !important; font-size: 12px !important; letter-spacing: 0.15em !important; text-decoration: none !important; transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.22s ease !important; } .product-card .add-to-cart:hover, .floke-premium-products .product-card .add-to-cart:hover, .pro-shop-layout .product-card .add-to-cart:hover { border-color: var(--floke-ink) !important; background: var(--floke-ink) !important; color: var(--floke-paper) !important; transform: translateY(-1px); } .product-card .product-info { padding: 20px 20px 22px !important; } .product-card .product-info h3, .product-card .woocommerce-loop-product__title { color: var(--floke-ink) !important; font-family: Georgia, "Times New Roman", serif !important; font-weight: 400 !important; letter-spacing: 0 !important; } .product-card .product-info strong, .product-card .price { color: var(--floke-ink) !important; } .floke-woocommerce-products ul.products li.product { border: 1px solid var(--floke-line) !important; background: var(--floke-cream) !important; padding-bottom: 18px !important; } .floke-woocommerce-products .button { min-height: 46px !important; margin: 14px 15px 0 !important; border: 1px solid rgba(155, 111, 78, 0.44) !important; background: rgba(255, 250, 246, 0.92) !important; color: var(--floke-ink) !important; box-shadow: inset 0 -2px 0 rgba(155, 111, 78, 0.2) !important; font-size: 12px !important; } .floke-woocommerce-products .button:hover { border-color: var(--floke-ink) !important; background: var(--floke-ink) !important; color: var(--floke-paper) !important; } /* V1.1.6 responsive spacing and red-glow cleanup */ .btn, .btn-primary, .btn-secondary, .intro-start, .professional-actions .btn, .hero-actions .btn, .woocommerce a.button, .woocommerce button.button, .product-card .add-to-cart, .floke-woocommerce-products .button { box-shadow: none !important; } .btn-primary, .hero-actions .btn-primary, .professional-actions .btn-primary, .intro-start { border-color: var(--floke-ink) !important; background: var(--floke-ink) !important; color: var(--floke-paper) !important; } .btn-primary:hover, .hero-actions .btn-primary:hover, .professional-actions .btn-primary:hover, .intro-start:hover { border-color: var(--floke-accent) !important; background: var(--floke-accent) !important; color: var(--floke-paper) !important; } .btn-secondary, .hero-actions .btn-secondary { border-color: rgba(155, 111, 78, 0.24) !important; background: rgba(255, 250, 246, 0.76) !important; color: var(--floke-ink) !important; } .btn-secondary:hover, .hero-actions .btn-secondary:hover { border-color: rgba(155, 111, 78, 0.44) !important; background: rgba(255, 250, 246, 0.96) !important; color: var(--floke-accent) !important; } .floke-premium-hero.no-hero-image { min-height: clamp(500px, 58vh, 640px) !important; align-items: center !important; padding-top: clamp(48px, 5.5vw, 78px) !important; padding-bottom: clamp(44px, 5vw, 72px) !important; } .floke-premium-hero.no-hero-image .hero-content { align-self: center !important; transform: translateY(-18px) !important; } .floke-premium-hero.no-hero-image .hero-trust-panel { align-self: center !important; transform: translateY(8px) !important; } .floke-premium-hero h1 { font-size: clamp(56px, 7.2vw, 102px) !important; } .floke-premium-hero .hero-content p:not(.hero-kicker) { margin-top: 18px !important; } .floke-premium-hero .hero-actions { margin-top: 24px !important; } .professional-hero.no-hero-image { min-height: clamp(430px, 48vh, 560px) !important; align-items: center !important; padding-top: clamp(58px, 5vw, 86px) !important; padding-bottom: clamp(44px, 5vw, 70px) !important; } .professional-hero.no-hero-image .hero-content { transform: none !important; padding-bottom: 0 !important; } .professional-hero.no-hero-image .professional-copy { font-weight: 600 !important; } @media (max-width: 1180px) { .floke-premium-hero.no-hero-image { min-height: auto !important; padding-top: 52px !important; padding-bottom: 42px !important; } .floke-premium-hero.no-hero-image .hero-content, .floke-premium-hero.no-hero-image .hero-trust-panel { transform: none !important; } } @media (max-width: 1180px) { .site-header { grid-template-columns: auto 1fr auto !important; } .desktop-nav { display: none !important; } .mobile-menu-toggle { display: flex !important; justify-self: center !important; } .site-header .header-actions > .header-product-search, .site-header .header-actions > .account-link { display: none !important; } .mobile-search-trigger { display: inline-flex !important; align-items: center !important; justify-content: center !important; } .mobile-nav-panel { display: none !important; flex-direction: column !important; align-items: center !important; gap: 14px !important; padding: 18px clamp(18px, 5vw, 42px) 22px !important; border-top: 1px solid rgba(155, 111, 78, 0.16) !important; background: rgba(247, 241, 235, 0.98) !important; } .site-header.mobile-menu-open .mobile-nav-panel { display: flex !important; } .mobile-nav-links { order: 1 !important; width: min(440px, 100%) !important; } .mobile-product-search { order: 2 !important; width: min(420px, 100%) !important; grid-template-columns: minmax(0, 1fr) 44px !important; justify-content: center !important; align-items: center !important; margin: 2px auto 0 !important; } .mobile-product-search input[type="search"] { background: rgba(255, 250, 246, 0.9) !important; border-color: rgba(155, 111, 78, 0.24) !important; } .mobile-product-search input[type="search"]:focus { border-color: rgba(155, 111, 78, 0.54) !important; } .mobile-product-search button { width: 44px !important; height: 44px !important; min-height: 44px !important; padding: 0 !important; border: 1px solid rgba(155, 111, 78, 0.24) !important; background: rgba(255, 250, 246, 0.9) !important; color: var(--floke-ink) !important; } } @media (max-width: 700px) { .floke-premium-hero.no-hero-image { padding-top: 42px !important; padding-bottom: 34px !important; } .floke-premium-hero h1 { font-size: clamp(48px, 14vw, 66px) !important; } .floke-premium-hero .hero-actions { gap: 10px !important; } .mobile-product-search { width: min(360px, 100%) !important; } } /* V1.1.8 customizable copy and premium icon cleanup */ .professional-lock .lock-icon, .lock-icon { position: relative !important; width: 54px !important; height: 54px !important; display: grid !important; place-items: center !important; margin: 0 auto 22px !important; border: 1px solid rgba(155, 111, 78, 0.24) !important; background: rgba(255, 250, 246, 0.72) !important; color: transparent !important; font-size: 0 !important; box-shadow: none !important; } .professional-lock .lock-icon::before, .lock-icon::before { content: ""; width: 16px; height: 12px; border: 2px solid var(--floke-accent); border-top: 0; transform: translateY(4px); } .professional-lock .lock-icon::after, .lock-icon::after { content: ""; position: absolute; width: 14px; height: 11px; border: 2px solid var(--floke-accent); border-bottom: 0; border-radius: 9px 9px 0 0; transform: translateY(-6px); } .title-rule span, .category-tile span::after, .floke-shop-card i { background: linear-gradient(90deg, transparent, var(--floke-accent), transparent) !important; } .category-tile, .floke-shop-card, .floke-woocommerce-products ul.products li.product, .dashboard-stats > div, .bulk-steps article, .professional-two-column > section, .pro-filters, .professional-form input, .professional-form select, .professional-form textarea { border-color: rgba(155, 111, 78, 0.2) !important; } /* V1.2.0 smoother intro exit and clearer icon language */ .intro-screen.is-leaving { opacity: 0 !important; visibility: visible; pointer-events: none; transition: opacity 0.42s ease, visibility 0s linear 0.42s !important; } .intro-screen.is-leaving .intro-inner { opacity: 0 !important; transform: translateY(-8px) scale(0.985) !important; transition: opacity 0.28s ease, transform 0.28s ease !important; animation: none !important; } .floke-line-icon { width: 32px; height: 32px; display: block; color: currentColor; } .floke-line-icon path, .floke-line-icon circle, .floke-line-icon rect { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .trust-list span, .benefits > div > span { display: grid !important; place-items: center !important; width: 44px !important; height: 44px !important; color: var(--floke-accent) !important; font-size: 0 !important; line-height: 1 !important; } .trust-list .floke-line-icon { width: 22px; height: 22px; } .benefits .floke-line-icon { width: 34px; height: 34px; } .floke-premium-benefits > div, .professional-benefits > div { align-items: center !important; } .professional-benefits > div > span { color: var(--floke-gold) !important; } .lock-icon { color: var(--floke-accent) !important; } .professional-lock .lock-icon::before, .professional-lock .lock-icon::after, .lock-icon::before, .lock-icon::after { content: none !important; } .lock-icon .floke-line-icon { width: 26px; height: 26px; } .professional-lock .lock-icon { color: var(--floke-accent) !important; border-color: rgba(155, 111, 78, 0.24) !important; background: rgba(255, 250, 246, 0.72) !important; } .professional-lock .lock-icon .floke-line-icon, .lock-icon .floke-line-icon { color: currentColor !important; opacity: 1 !important; visibility: visible !important; } .lock-icon .floke-line-icon path, .lock-icon .floke-line-icon rect { stroke: currentColor !important; } .hero-trust-panel .trust-list { gap: 16px !important; } .hero-trust-panel .trust-list div { grid-template-columns: 44px minmax(0, 1fr) !important; column-gap: 16px !important; align-items: start !important; } .hero-trust-panel .trust-list span { grid-column: 1 !important; flex: 0 0 44px !important; margin: 0 !important; } .hero-trust-panel .trust-list p { grid-column: 2 !important; min-width: 0 !important; padding-top: 1px !important; } .hero-trust-panel .trust-list strong { line-height: 1.25 !important; margin-bottom: 4px !important; } /* V1.2.4 page and WooCommerce checkout polish */ .floke-content-page { min-height: 62vh; padding: clamp(42px, 6vw, 86px) clamp(18px, 4vw, 72px) clamp(54px, 7vw, 96px); background: linear-gradient(115deg, rgba(255, 250, 246, 0.94), rgba(239, 231, 224, 0.72)), var(--floke-paper); color: var(--floke-ink); } .floke-page-heading { width: min(1180px, 100%); margin: 0 auto clamp(24px, 4vw, 42px); } .floke-page-heading p { margin: 0 0 10px; color: var(--floke-accent); font-size: 12px; font-weight: 900; letter-spacing: 0.2em; text-transform: uppercase; } .floke-page-heading h1 { margin: 0; color: var(--floke-ink); font-family: Georgia, "Times New Roman", serif; font-size: clamp(44px, 6vw, 82px); font-weight: 500; line-height: 0.95; letter-spacing: 0; text-transform: none; } .floke-page-content { width: min(1180px, 100%); margin: 0 auto; } .floke-checkout-page .wp-block-woocommerce-checkout, .floke-checkout-page .wc-block-components-sidebar-layout, .floke-checkout-page form.checkout { color: var(--floke-ink); } .floke-checkout-page .wc-block-components-sidebar-layout { gap: clamp(22px, 4vw, 46px); } .floke-checkout-page .wc-block-components-main, .floke-checkout-page .wc-block-components-sidebar, .floke-checkout-page .woocommerce-billing-fields, .floke-checkout-page .woocommerce-checkout-review-order, .floke-checkout-page .woocommerce-additional-fields { border: 1px solid var(--floke-line); background: rgba(255, 250, 246, 0.78); box-shadow: 0 24px 70px rgba(27, 20, 16, 0.07); } .floke-checkout-page .wc-block-components-main { padding: clamp(22px, 3vw, 34px); } .floke-checkout-page .wc-block-components-sidebar, .floke-checkout-page .woocommerce-checkout-review-order { padding: clamp(20px, 2.6vw, 30px); } .floke-checkout-page .wc-block-components-title, .floke-checkout-page .wc-block-components-checkout-step__title, .floke-checkout-page .wc-block-components-sidebar__title, .floke-checkout-page .woocommerce-billing-fields h3, .floke-checkout-page #order_review_heading { color: var(--floke-ink); font-family: Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: 0; text-transform: none; } .floke-checkout-page .wc-block-components-checkout-step, .floke-checkout-page .wc-block-components-totals-wrapper, .floke-checkout-page .wc-block-components-order-summary-item, .floke-checkout-page .woocommerce-checkout-review-order table, .floke-checkout-page .woocommerce-checkout-review-order tr { border-color: var(--floke-line) !important; } .floke-checkout-page input, .floke-checkout-page select, .floke-checkout-page textarea, .floke-checkout-page .wc-block-components-text-input input, .floke-checkout-page .wc-block-components-combobox .wc-block-components-combobox-control input, .floke-checkout-page .wc-block-components-form .wc-block-components-text-input input { min-height: 50px; border: 1px solid rgba(155, 111, 78, 0.28) !important; border-radius: 0 !important; background: rgba(255, 255, 255, 0.72) !important; color: var(--floke-ink) !important; box-shadow: none !important; } .floke-checkout-page input:focus, .floke-checkout-page select:focus, .floke-checkout-page textarea:focus, .floke-checkout-page .wc-block-components-text-input input:focus { border-color: var(--floke-accent) !important; outline: 2px solid rgba(155, 111, 78, 0.16) !important; outline-offset: 0; } .floke-checkout-page .wc-block-components-button, .floke-checkout-page .wc-block-components-checkout-place-order-button, .floke-checkout-page #place_order { min-height: 56px; border: 1px solid var(--floke-ink) !important; border-radius: 0 !important; background: var(--floke-ink) !important; color: var(--floke-paper) !important; font-weight: 900 !important; letter-spacing: 0.13em !important; text-transform: uppercase !important; box-shadow: none !important; } .floke-checkout-page .wc-block-components-button:hover, .floke-checkout-page #place_order:hover { background: var(--floke-accent) !important; border-color: var(--floke-accent) !important; color: #fffaf6 !important; } .floke-checkout-page .wc-block-components-radio-control, .floke-checkout-page .wc-block-components-panel, .floke-checkout-page .wc-block-components-order-summary, .floke-checkout-page .wc-block-components-totals-coupon, .floke-checkout-page .wc-block-components-express-payment, .floke-checkout-page .woocommerce-info, .floke-checkout-page .woocommerce-message { border-color: var(--floke-line) !important; border-radius: 0 !important; background: rgba(255, 250, 246, 0.58) !important; color: var(--floke-ink) !important; } .floke-checkout-page .wc-block-components-product-name, .floke-checkout-page .wc-block-components-order-summary-item__quantity, .floke-checkout-page .wc-block-components-totals-item__label, .floke-checkout-page .wc-block-components-totals-item__value, .floke-checkout-page .woocommerce-checkout-review-order-table { color: var(--floke-ink) !important; } .floke-checkout-page .wc-block-components-order-summary-item__image img, .floke-checkout-page .woocommerce-checkout-review-order img { border-radius: 0 !important; border: 1px solid var(--floke-line); background: var(--floke-cream); } .floke-checkout-page .wc-block-components-order-summary-item__quantity { background: var(--floke-accent) !important; border-color: var(--floke-accent) !important; color: #fffaf6 !important; } @media (max-width: 1180px) { .floke-checkout-page .wc-block-components-sidebar-layout { display: grid !important; grid-template-columns: 1fr !important; } .floke-checkout-page .wc-block-components-sidebar { order: -1; width: 100% !important; } } @media (max-width: 640px) { .floke-content-page { padding-inline: 14px; } .floke-page-heading h1 { font-size: clamp(38px, 13vw, 54px); } .floke-checkout-page .wc-block-components-main, .floke-checkout-page .wc-block-components-sidebar { padding: 18px; } } /* V1.2.5 cart page polish */ .floke-cart-page .wp-block-woocommerce-cart, .floke-cart-page .wc-block-components-sidebar-layout, .floke-cart-page .woocommerce-cart-form, .floke-cart-page .cart_totals { color: var(--floke-ink); } .floke-cart-page .wc-block-components-sidebar-layout { gap: clamp(22px, 4vw, 46px); } .floke-cart-page .wc-block-cart-items, .floke-cart-page .wc-block-components-main, .floke-cart-page .wc-block-components-sidebar, .floke-cart-page .woocommerce-cart-form, .floke-cart-page .cart_totals { border: 1px solid var(--floke-line); background: rgba(255, 250, 246, 0.8); box-shadow: 0 24px 70px rgba(27, 20, 16, 0.07); } .floke-cart-page .wc-block-components-main, .floke-cart-page .woocommerce-cart-form { padding: clamp(22px, 3vw, 34px); } .floke-cart-page .wc-block-components-sidebar, .floke-cart-page .cart_totals { padding: clamp(20px, 2.6vw, 30px); } .floke-cart-page .wc-block-cart-items__header, .floke-cart-page .wc-block-cart-item__wrap, .floke-cart-page .wc-block-components-totals-wrapper, .floke-cart-page .shop_table, .floke-cart-page .shop_table th, .floke-cart-page .shop_table td { border-color: var(--floke-line) !important; } .floke-cart-page .wc-block-cart-items__header span, .floke-cart-page .wc-block-cart-item__product .wc-block-components-product-name, .floke-cart-page .wc-block-components-totals-item__label, .floke-cart-page .wc-block-components-totals-item__value, .floke-cart-page .cart_totals h2 { color: var(--floke-ink) !important; } .floke-cart-page .cart_totals h2, .floke-cart-page .wc-block-cart__totals-title { font-family: Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: 0; text-transform: none; } .floke-cart-page .wc-block-cart-item__image img, .floke-cart-page .woocommerce-cart-form img { border: 1px solid var(--floke-line); border-radius: 0 !important; background: var(--floke-cream); } .floke-cart-page input, .floke-cart-page .wc-block-components-quantity-selector, .floke-cart-page .wc-block-components-text-input input { border: 1px solid rgba(155, 111, 78, 0.28) !important; border-radius: 0 !important; background: rgba(255, 255, 255, 0.72) !important; color: var(--floke-ink) !important; box-shadow: none !important; } .floke-cart-page .wc-block-components-button, .floke-cart-page .wc-block-cart__submit-button, .floke-cart-page .checkout-button, .floke-cart-page button[name="update_cart"], .floke-cart-page .coupon .button { min-height: 54px; border: 1px solid var(--floke-ink) !important; border-radius: 0 !important; background: var(--floke-ink) !important; color: var(--floke-paper) !important; font-weight: 900 !important; letter-spacing: 0.13em !important; text-transform: uppercase !important; box-shadow: none !important; } .floke-cart-page .wc-block-components-button:hover, .floke-cart-page .checkout-button:hover, .floke-cart-page button[name="update_cart"]:hover, .floke-cart-page .coupon .button:hover { background: var(--floke-accent) !important; border-color: var(--floke-accent) !important; color: #fffaf6 !important; } .floke-cart-page .wc-block-components-panel, .floke-cart-page .wc-block-components-totals-coupon, .floke-cart-page .woocommerce-info, .floke-cart-page .woocommerce-message { border-color: var(--floke-line) !important; border-radius: 0 !important; background: rgba(255, 250, 246, 0.58) !important; color: var(--floke-ink) !important; } .floke-cart-page .wc-block-cart__empty-cart__title { color: var(--floke-ink); font-family: Georgia, "Times New Roman", serif; font-weight: 500; } @media (max-width: 1180px) { .floke-cart-page .wc-block-components-sidebar-layout { display: grid !important; grid-template-columns: 1fr !important; } .floke-cart-page .wc-block-components-sidebar { width: 100% !important; } } @media (max-width: 640px) { .floke-cart-page .wc-block-components-main, .floke-cart-page .wc-block-components-sidebar, .floke-cart-page .woocommerce-cart-form, .floke-cart-page .cart_totals { padding: 18px; } } /* V1.2.7 WooCommerce product cards and cart recommendations */ .woocommerce ul.products li.product, .wc-block-grid__product, .wp-block-woocommerce-product-template li, .floke-cart-page .wp-block-woocommerce-product-new, .floke-cart-page .wc-block-grid__product { position: relative; overflow: hidden; border: 1px solid var(--floke-line) !important; background: rgba(255, 250, 246, 0.86) !important; color: var(--floke-ink) !important; box-shadow: none !important; } .woocommerce ul.products li.product *, .wc-block-grid__product *, .wp-block-woocommerce-product-template li * { color: inherit; } .woocommerce ul.products li.product a, .wc-block-grid__product a, .wp-block-woocommerce-product-template li a { color: var(--floke-ink) !important; text-decoration: none !important; pointer-events: auto !important; } .woocommerce ul.products li.product img, .wc-block-grid__product-image img, .wc-block-components-product-image img, .wp-block-woocommerce-product-image img { display: block; width: 100%; aspect-ratio: 1 / 1.08; object-fit: cover; border-radius: 0 !important; background: var(--floke-cream); } .woocommerce-loop-product__title, .wc-block-grid__product-title, .wp-block-post-title, .wp-block-woocommerce-product-title { color: var(--floke-ink) !important; font-family: Georgia, "Times New Roman", serif !important; font-size: clamp(20px, 2.2vw, 28px) !important; font-weight: 500 !important; line-height: 1.08 !important; letter-spacing: 0 !important; text-transform: none !important; } .floke-woocommerce-products .woocommerce-loop-product__title, .floke-woocommerce-products ul.products li.product .woocommerce-loop-product__title { color: var(--floke-ink) !important; padding: 0 18px !important; } .woocommerce ul.products li.product .price, .wc-block-grid__product-price, .wp-block-woocommerce-product-price, .wc-block-components-product-price, .woocommerce-Price-amount { color: var(--floke-ink) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 15px !important; font-weight: 800 !important; letter-spacing: 0 !important; } .floke-woocommerce-products .price, .floke-woocommerce-products ul.products li.product .price { color: var(--floke-ink) !important; padding: 0 18px !important; } .woocommerce ul.products li.product .button, .wc-block-grid__product-add-to-cart .wp-block-button__link, .wp-block-woocommerce-product-button .wp-block-button__link, .floke-cart-page .wp-block-button__link, .floke-cart-page .wc-block-grid__product-add-to-cart a { position: relative !important; z-index: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 48px !important; min-width: 190px; padding: 14px 22px !important; border: 1px solid rgba(155, 111, 78, 0.34) !important; border-radius: 0 !important; background: rgba(255, 250, 246, 0.82) !important; color: var(--floke-ink) !important; font-size: 12px !important; font-weight: 900 !important; letter-spacing: 0.14em !important; line-height: 1 !important; text-transform: uppercase !important; text-decoration: none !important; box-shadow: none !important; cursor: pointer !important; } .woocommerce ul.products li.product .button:hover, .wc-block-grid__product-add-to-cart .wp-block-button__link:hover, .wp-block-woocommerce-product-button .wp-block-button__link:hover, .floke-cart-page .wp-block-button__link:hover, .floke-cart-page .wc-block-grid__product-add-to-cart a:hover { border-color: var(--floke-ink) !important; background: var(--floke-ink) !important; color: var(--floke-paper) !important; } .floke-cart-page .wc-block-cart__empty-cart__title, .floke-cart-page .wp-block-heading, .floke-cart-page .wc-block-grid__product-title { color: var(--floke-ink) !important; } .floke-cart-page .wc-block-cart__empty-cart__title { margin-bottom: 18px !important; font-family: Georgia, "Times New Roman", serif !important; font-size: clamp(32px, 5vw, 54px) !important; font-weight: 500 !important; } .floke-cart-page .wp-block-heading { font-family: Georgia, "Times New Roman", serif !important; font-size: clamp(28px, 4vw, 42px) !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; } .floke-cart-page .wc-block-grid__products, .floke-cart-page .wp-block-woocommerce-product-new ul { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px !important; padding: 0 !important; } .floke-cart-page .wc-block-grid__product, .floke-cart-page .wp-block-woocommerce-product-new li { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 0 20px !important; text-align: left !important; } .floke-cart-page .wc-block-grid__product-title, .floke-cart-page .wc-block-grid__product-price, .floke-cart-page .wc-block-grid__product-add-to-cart { padding-inline: 20px !important; } .floke-cart-page .wc-block-grid__product-title { margin-top: 18px !important; margin-bottom: 10px !important; } /* V1.2.9 consistent product cards and mobile professional hero fix */ .woocommerce ul.products { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px !important; } .woocommerce ul.products::before, .woocommerce ul.products::after { display: none !important; } .woocommerce ul.products li.product { width: auto !important; float: none !important; margin: 0 !important; padding: 0 0 24px !important; text-align: left !important; } .floke-woocommerce-products ul.products { grid-template-columns: repeat(3, minmax(240px, 1fr)) !important; align-items: start; } .floke-woocommerce-products ul.products li.product, .wc-block-grid__product, .floke-cart-page .wc-block-grid__product { background: var(--floke-cream) !important; } .floke-woocommerce-products ul.products li.product img, .woocommerce ul.products li.product img, .wc-block-grid__product-image img { margin: 0 0 0 !important; } .floke-woocommerce-products .woocommerce-loop-product__title, .woocommerce ul.products li.product .woocommerce-loop-product__title, .wc-block-grid__product-title { margin: 22px 0 8px !important; padding: 0 24px !important; } .floke-woocommerce-products .price, .woocommerce ul.products li.product .price, .wc-block-grid__product-price { display: block; margin: 0 0 20px !important; padding: 0 24px !important; } .woocommerce ul.products li.product .button, .floke-woocommerce-products .button, .wc-block-grid__product-add-to-cart .wp-block-button__link, .wp-block-woocommerce-product-button .wp-block-button__link { width: calc(100% - 48px) !important; min-width: 0 !important; margin: 0 24px !important; background: linear-gradient(90deg, rgba(255, 250, 246, 0.96), rgba(232, 220, 209, 0.88)) !important; color: var(--floke-ink) !important; } .floke-cart-page .wc-block-grid__products, .floke-cart-page .wp-block-woocommerce-product-new ul { width: min(1040px, 100%); margin-inline: auto !important; align-items: start; } .floke-cart-page .wc-block-grid__product, .floke-cart-page .wp-block-woocommerce-product-new li { max-width: 340px !important; justify-self: center; } .floke-cart-page .wc-block-grid__product-image img { aspect-ratio: 1 / 1.08; } .floke-cart-page .wc-block-grid__product-title { font-size: clamp(20px, 2vw, 26px) !important; } .floke-cart-page .wc-block-grid__product-add-to-cart .wp-block-button__link { width: calc(100% - 40px) !important; margin-inline: 20px !important; } @media (max-width: 1024px) { .woocommerce ul.products, .floke-woocommerce-products ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 900px) { .floke-cart-page .wc-block-grid__products, .floke-cart-page .wp-block-woocommerce-product-new ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .floke-cart-page .wc-block-grid__products, .floke-cart-page .wp-block-woocommerce-product-new ul { grid-template-columns: 1fr; } .woocommerce ul.products li.product .button, .wc-block-grid__product-add-to-cart .wp-block-button__link, .wp-block-woocommerce-product-button .wp-block-button__link, .floke-cart-page .wp-block-button__link { width: calc(100% - 40px); min-width: 0; } } @media (max-width: 520px) { .professional-hero.no-hero-image { min-height: auto !important; overflow: hidden; padding: 44px 28px 56px !important; } .professional-hero.no-hero-image::before { right: auto; left: 28px; bottom: auto; top: 42px; max-width: calc(100vw - 56px); font-size: clamp(68px, 20vw, 94px) !important; line-height: 0.86 !important; word-break: normal; overflow-wrap: normal; opacity: 0.42 !important; } .professional-hero.no-hero-image .hero-content { width: 100% !important; max-width: 100% !important; padding-top: 132px !important; } .professional-hero.no-hero-image .hero-content h1 { max-width: 100% !important; font-size: clamp(36px, 11.5vw, 48px) !important; line-height: 0.96 !important; overflow-wrap: normal; word-break: normal; } .professional-hero.no-hero-image .hero-content > p { max-width: 100% !important; font-size: clamp(20px, 6.2vw, 26px) !important; line-height: 1.26 !important; } .professional-hero.no-hero-image .professional-copy { font-size: 16px !important; line-height: 1.5 !important; } .professional-actions .btn { width: 100%; } .woocommerce ul.products, .floke-woocommerce-products ul.products { grid-template-columns: 1fr !important; } } /* V1.3.0 premium empty-cart state */ .floke-cart-page .wc-block-cart__empty-cart__image, .floke-cart-page .wc-block-cart__empty-cart__image svg, .floke-cart-page .wc-block-cart__empty-cart__image img { display: none !important; } .floke-cart-page .wc-block-cart__empty-cart { position: relative; max-width: 780px; margin: 0 auto clamp(34px, 6vw, 64px) !important; padding: clamp(34px, 6vw, 68px) clamp(22px, 5vw, 54px) !important; border: 1px solid var(--floke-line); background: linear-gradient(120deg, rgba(255, 250, 246, 0.92), rgba(239, 230, 221, 0.64)), var(--floke-cream); text-align: center; } .floke-cart-page .wc-block-cart__empty-cart::before { content: "FLOKË"; display: block; margin: 0 auto 18px; color: rgba(155, 111, 78, 0.76); font-family: Georgia, "Times New Roman", serif; font-size: clamp(34px, 6vw, 58px); font-weight: 500; letter-spacing: 0.12em; line-height: 1; } .floke-cart-page .wc-block-cart__empty-cart::after { content: ""; display: block; width: 96px; height: 1px; margin: 18px auto 0; background: var(--floke-accent); } .floke-cart-page .wc-block-cart__empty-cart__title { margin: 0 !important; color: var(--floke-ink) !important; font-family: Georgia, "Times New Roman", serif !important; font-size: clamp(30px, 4vw, 46px) !important; font-weight: 500 !important; line-height: 1.05 !important; letter-spacing: 0 !important; text-transform: none !important; } .floke-cart-page .wc-block-cart__empty-cart p, .floke-cart-page .wc-block-cart__empty-cart .wc-block-components-formatted-money-amount, .floke-cart-page .wc-block-cart__empty-cart a { color: var(--floke-muted) !important; font-family: Arial, Helvetica, sans-serif !important; } .floke-cart-page .wp-block-woocommerce-empty-cart-block, .floke-cart-page .wp-block-woocommerce-filled-cart-block { font-family: Arial, Helvetica, sans-serif; color: var(--floke-ink); } .floke-cart-page .wp-block-woocommerce-empty-cart-block > .wp-block-heading, .floke-cart-page .wp-block-woocommerce-empty-cart-block h2, .floke-cart-page .wp-block-woocommerce-product-new h2 { color: var(--floke-ink) !important; font-family: Georgia, "Times New Roman", serif !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; } .floke-cart-page .wp-block-woocommerce-empty-cart-block > .wp-block-heading, .floke-cart-page .wp-block-woocommerce-product-new h2 { display: flex; align-items: center; justify-content: center; gap: 22px; } .floke-cart-page .wp-block-woocommerce-empty-cart-block > .wp-block-heading::before, .floke-cart-page .wp-block-woocommerce-empty-cart-block > .wp-block-heading::after, .floke-cart-page .wp-block-woocommerce-product-new h2::before, .floke-cart-page .wp-block-woocommerce-product-new h2::after { content: ""; width: min(120px, 18vw); height: 1px; background: rgba(155, 111, 78, 0.42); } @media (max-width: 560px) { .floke-cart-page .wc-block-cart__empty-cart { padding: 30px 18px !important; } .floke-cart-page .wp-block-woocommerce-empty-cart-block > .wp-block-heading, .floke-cart-page .wp-block-woocommerce-product-new h2 { gap: 14px; } .floke-cart-page .wp-block-woocommerce-empty-cart-block > .wp-block-heading::before, .floke-cart-page .wp-block-woocommerce-empty-cart-block > .wp-block-heading::after, .floke-cart-page .wp-block-woocommerce-product-new h2::before, .floke-cart-page .wp-block-woocommerce-product-new h2::after { width: 42px; } } @media (min-width: 1025px) { .floke-cart-page .wp-block-woocommerce-empty-cart-block { width: min(1180px, 100%); margin-inline: auto !important; text-align: center !important; } .floke-cart-page .wc-block-cart__empty-cart { width: 100%; max-width: none; display: grid; justify-items: center; text-align: center !important; } .floke-cart-page .wc-block-cart__empty-cart__title { width: 100%; text-align: center !important; } } /* V1.3.2 remove old red edge bleed on tablet/mobile chrome */ @media (max-width: 1024px) { .topbar, .site-header, .mobile-nav-panel { border-left: 0 !important; border-right: 0 !important; outline: 0 !important; box-shadow: none !important; } .topbar { border-top: 0 !important; border-bottom: 1px solid rgba(176, 128, 91, 0.22) !important; background: #211711 !important; } .site-header, .mobile-nav-panel { border-bottom-color: rgba(155, 111, 78, 0.16) !important; } .mobile-menu-toggle:hover span, .mobile-menu-toggle.open span, .mobile-search-trigger:hover, .mobile-nav-links a:hover, .mobile-nav-links a.current-menu-item, .mobile-nav-links a.current_page_item, .mobile-product-search input[type="search"]:focus { color: var(--floke-accent) !important; border-color: var(--floke-accent) !important; } .mobile-menu-toggle:hover span, .mobile-menu-toggle.open span { background: var(--floke-ink) !important; } } /* V1.3.3 final professional dashboard overrides */ .professional-page .title-rule { margin: clamp(28px, 5vw, 56px) 0 clamp(22px, 4vw, 34px) !important; grid-template-columns: minmax(48px, 1fr) auto minmax(48px, 1fr) !important; align-items: center !important; gap: clamp(14px, 3vw, 28px) !important; } .professional-page .title-rule h1 { margin: 0 !important; max-width: min(760px, 100%) !important; color: var(--floke-ink) !important; font-family: Georgia, "Times New Roman", serif !important; font-size: clamp(34px, 5vw, 62px) !important; font-weight: 500 !important; line-height: 1.02 !important; letter-spacing: 0 !important; text-align: center !important; text-transform: none !important; } .professional-page .title-rule span { min-width: 0 !important; background: rgba(155, 111, 78, 0.42) !important; } .dashboard-stats > div, .professional-two-column > section { border: 1px solid rgba(155, 111, 78, 0.18) !important; background: linear-gradient(120deg, rgba(255, 250, 246, 0.96), rgba(239, 230, 221, 0.54)), var(--floke-cream) !important; color: var(--floke-ink) !important; } .dashboard-stats span, .professional-table .table-head span { color: rgba(27, 20, 16, 0.68) !important; } .dashboard-stats strong { color: var(--floke-ink) !important; font-family: Georgia, "Times New Roman", serif !important; font-weight: 500 !important; } .professional-table, .professional-table .table-row { color: rgba(27, 20, 16, 0.72) !important; } .professional-table .table-row { border-bottom-color: rgba(155, 111, 78, 0.18) !important; } .professional-table .table-head, .professional-table .table-head span { color: var(--floke-ink) !important; } .professional-table .table-head span { font-size: 12px !important; font-weight: 950 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; } .professional-two-column .btn { box-shadow: none !important; } @media (max-width: 700px) { .professional-page .title-rule { display: block !important; margin: 24px 0 22px !important; text-align: left !important; } .professional-page .title-rule span { display: block !important; width: 86px !important; height: 1px !important; margin: 0 0 18px !important; } .professional-page .title-rule span:last-child { display: none !important; } .professional-page .title-rule h1 { max-width: 100% !important; font-size: clamp(32px, 9.5vw, 44px) !important; line-height: 1 !important; text-align: left !important; } .dashboard-stats { gap: 14px !important; margin: 22px 0 28px !important; } .dashboard-stats > div, .professional-two-column > section { padding: 26px 22px !important; } .professional-table .table-head { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px 14px !important; padding: 0 0 18px !important; } .professional-table .table-head span { color: rgba(27, 20, 16, 0.72) !important; font-size: 13px !important; } .professional-table .table-row:not(.table-head) { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; padding: 16px 0 !important; } .professional-table .table-row:not(.table-head) span { display: flex !important; justify-content: space-between !important; gap: 18px !important; color: var(--floke-ink) !important; } .professional-table .table-row:not(.table-head) span::before { content: attr(data-label); color: rgba(27, 20, 16, 0.58); font-size: 11px; font-weight: 950; letter-spacing: 0.12em; text-transform: uppercase; } } @media (max-width: 1024px) { .benefits > div > span { width: 38px !important; height: 38px !important; } .benefits .floke-line-icon { width: 30px; height: 30px; } } /* ========================================================= FLOKË CO. — PREMIUM WOOCOMMERCE FINAL Single product + notices + reviews + info + cart Desktop / Tablet / Mobile ========================================================= */ /* ========================================================= 1. SINGLE PRODUCT — GLOBAL ========================================================= */ body.single-product { background: var(--floke-paper, #f7f1eb) !important; color: var(--floke-ink, #1b1410) !important; } body.single-product .floke-single-product-page { width: min(92%, 1480px); margin: 0 auto; padding: clamp(44px, 5vw, 82px) 0 clamp(80px, 8vw, 125px); } body.single-product div.product { display: grid !important; grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.95fr); gap: clamp(48px, 6vw, 96px); align-items: start; } body.single-product div.product::before, body.single-product div.product::after { display: none !important; } body.single-product div.product div.images, body.single-product div.product div.summary { float: none !important; width: auto !important; margin: 0 !important; } /* ========================================================= 2. PRODUCT IMAGE ========================================================= */ body.single-product .woocommerce-product-gallery { width: 100% !important; margin: 0 !important; } body.single-product .woocommerce-product-gallery__wrapper { margin: 0 !important; background: var(--floke-cream, #fffaf6); } body.single-product .woocommerce-product-gallery img { display: block !important; width: 100% !important; height: auto !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: var(--floke-cream, #fffaf6); object-fit: cover; } body.single-product .woocommerce-product-gallery__trigger { border: 1px solid rgba(155, 111, 78, 0.22) !important; border-radius: 0 !important; background: rgba(255, 250, 246, 0.94) !important; } /* ========================================================= 3. PRODUCT SUMMARY ========================================================= */ body.single-product .summary.entry-summary { padding-top: clamp(8px, 2vw, 26px) !important; } body.single-product .summary.entry-summary::before { content: "FLOKË COLLECTION"; display: block; margin: 0 0 15px; color: var(--floke-accent, #9b6f4e); font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: 900; letter-spacing: 0.22em; line-height: 1.2; text-transform: uppercase; } body.single-product .product_title { margin: 0 0 20px !important; color: var(--floke-ink, #1b1410) !important; font-family: Georgia, "Times New Roman", serif !important; font-size: clamp(42px, 4.2vw, 66px) !important; font-weight: 400 !important; line-height: 0.98 !important; letter-spacing: -0.025em !important; text-transform: none !important; } body.single-product .summary .price { display: block; margin: 0 0 32px !important; padding: 0 !important; color: var(--floke-accent, #9b6f4e) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: clamp(20px, 1.8vw, 25px) !important; font-weight: 800 !important; line-height: 1.25; } body.single-product .summary .price *, body.single-product .summary .price .amount { color: inherit !important; } body.single-product .summary .woocommerce-product-details__short-description { margin: -8px 0 30px; color: var(--floke-muted, #766a61); font-size: 15px; line-height: 1.65; } /* ========================================================= 4. RATINGS ========================================================= */ body.single-product .woocommerce-product-rating { display: flex; align-items: center; gap: 12px; margin: 0 0 20px !important; } body.single-product .star-rating { color: var(--floke-accent, #9b6f4e) !important; } body.single-product .woocommerce-review-link { color: var(--floke-muted, #766a61) !important; font-size: 12px !important; text-decoration: none !important; } /* ========================================================= 5. VARIATIONS ========================================================= */ body.single-product form.variations_form { width: 100%; margin: 0 !important; } body.single-product table.variations { width: 100% !important; margin: 0 0 22px !important; border: 0 !important; border-collapse: collapse; } body.single-product table.variations tbody { display: grid; gap: 18px; } body.single-product table.variations tr { display: grid !important; grid-template-columns: 140px minmax(0, 1fr); align-items: center; gap: 18px; width: 100%; } body.single-product table.variations th, body.single-product table.variations td { display: block !important; width: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } body.single-product table.variations th.label { display: flex !important; align-items: center !important; height: 56px; } body.single-product table.variations th.label label { display: flex !important; align-items: center !important; height: 56px; margin: 0 !important; color: var(--floke-ink, #1b1410) !important; font-size: 11px !important; font-weight: 950 !important; letter-spacing: 0.13em; line-height: 1; text-transform: uppercase; } body.single-product table.variations td.value { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; } body.single-product table.variations select { width: 100% !important; height: 56px !important; min-height: 56px !important; margin: 0 !important; padding: 0 48px 0 16px !important; border: 1px solid rgba(155, 111, 78, 0.3) !important; border-radius: 0 !important; background-color: rgba(255, 250, 246, 0.94) !important; color: var(--floke-ink, #1b1410) !important; font-family: Arial, Helvetica, sans-serif; font-size: 15px !important; box-shadow: none !important; outline: none !important; } body.single-product table.variations select:focus { border-color: var(--floke-accent, #9b6f4e) !important; outline: 2px solid rgba(155, 111, 78, 0.12) !important; } body.single-product .reset_variations { display: inline-block !important; margin: 0 !important; align-self: center; color: var(--floke-accent, #9b6f4e) !important; font-size: 10px !important; font-weight: 900 !important; letter-spacing: 0.1em; text-decoration: none !important; text-transform: uppercase; white-space: nowrap; } /* ========================================================= 6. SELECTED VARIATION PRICE ========================================================= */ body.single-product .single_variation_wrap { width: 100%; margin-top: 20px; } body.single-product .woocommerce-variation { margin-bottom: 18px; } body.single-product .woocommerce-variation-price .price { margin: 0 !important; color: var(--floke-accent, #9b6f4e) !important; font-size: 22px !important; font-weight: 900 !important; } /* ========================================================= 7. QUANTITY + ADD TO BAG ========================================================= */ body.single-product .woocommerce-variation-add-to-cart, body.single-product form.cart:not(.variations_form) { display: grid !important; grid-template-columns: 84px minmax(220px, 1fr); gap: 12px; align-items: stretch; width: min(100%, 520px); margin: 0 !important; } body.single-product .quantity { float: none !important; width: 84px !important; margin: 0 !important; } body.single-product .quantity .qty { width: 84px !important; height: 58px !important; min-height: 58px !important; margin: 0 !important; padding: 0 8px !important; border: 1px solid rgba(155, 111, 78, 0.3) !important; border-radius: 0 !important; background: rgba(255, 250, 246, 0.94) !important; color: var(--floke-ink, #1b1410) !important; font-size: 16px !important; text-align: center; box-shadow: none !important; } body.single-product .single_add_to_cart_button { width: 100% !important; min-height: 58px !important; margin: 0 !important; padding: 0 30px !important; border: 1px solid var(--floke-ink, #1b1410) !important; border-radius: 0 !important; background: var(--floke-ink, #1b1410) !important; color: #fffaf6 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 11px !important; font-weight: 950 !important; letter-spacing: 0.18em !important; line-height: 1 !important; text-align: center; text-transform: uppercase !important; box-shadow: none !important; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } body.single-product .single_add_to_cart_button:hover { border-color: var(--floke-accent, #9b6f4e) !important; background: var(--floke-accent, #9b6f4e) !important; color: #fffaf6 !important; } body.single-product .single_add_to_cart_button.disabled { opacity: 0.42 !important; cursor: not-allowed !important; } /* ========================================================= 8. REMOVE EXPRESS PAYMENT FROM PRODUCT PAGE Keep payment methods for Cart / Checkout ========================================================= */ body.single-product .wc-block-components-express-payment, body.single-product .wc-block-components-express-payment-continue-rule, body.single-product .wcpay-payment-request-wrapper, body.single-product .wcpay-express-checkout-wrapper, body.single-product #wc-stripe-payment-request-wrapper, body.single-product .wc-stripe-payment-request-wrapper, body.single-product .wc-stripe-product-checkout-container, body.single-product .wc-stripe-express-checkout-element, body.single-product [class*="express-checkout"], body.single-product [class*="payment-request"] { display: none !important; } /* ========================================================= 9. PRODUCT META ========================================================= */ body.single-product .product_meta { margin: 32px 0 0 !important; padding: 22px 0 0 !important; border-top: 1px solid rgba(155, 111, 78, 0.18); color: var(--floke-muted, #766a61) !important; font-size: 11px !important; line-height: 1.9; } body.single-product .product_meta > span { display: block; } body.single-product .product_meta a { color: var(--floke-accent, #9b6f4e) !important; text-decoration: none !important; } /* ========================================================= PRODUCT ADDED TO BAG — PREMIUM NOTICE ========================================================= */ body.single-product .woocommerce-message, body.single-product .woocommerce-info, body.single-product .woocommerce-error { position: relative !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 28px !important; width: 100% !important; margin: 0 0 40px !important; padding: 20px 22px 20px 28px !important; border: 1px solid rgba(27, 20, 16, 0.75) !important; border-radius: 0 !important; background: rgba(255, 250, 246, 0.72) !important; color: var(--floke-ink, #1b1410) !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 17px !important; line-height: 1.45 !important; box-shadow: none !important; transition: opacity 0.35s ease, transform 0.35s ease, max-height 0.45s ease, margin 0.45s ease, padding 0.45s ease !important; overflow: hidden !important; } /* Remove WooCommerce's default green check / icon */ body.single-product .woocommerce-message::before, body.single-product .woocommerce-info::before, body.single-product .woocommerce-error::before { display: none !important; content: none !important; } /* VIEW BAG — RIGHT SIDE */ body.single-product .woocommerce-message .button, body.single-product .woocommerce-info .button, body.single-product .woocommerce-error .button { order: 2 !important; flex: 0 0 auto !important; min-width: 180px !important; min-height: 54px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 16px 28px !important; border: 1px solid var(--floke-ink, #1b1410) !important; border-radius: 0 !important; background: var(--floke-ink, #1b1410) !important; color: #fffaf6 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 10px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: 0.17em !important; text-transform: uppercase !important; text-decoration: none !important; box-shadow: none !important; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important; } body.single-product .woocommerce-message .button:hover, body.single-product .woocommerce-info .button:hover, body.single-product .woocommerce-error .button:hover { background: var(--floke-accent, #9b6f4e) !important; border-color: var(--floke-accent, #9b6f4e) !important; color: #fffaf6 !important; } /* Fade-away state */ body.single-product .woocommerce-message.floke-notice-hide, body.single-product .woocommerce-info.floke-notice-hide, body.single-product .woocommerce-error.floke-notice-hide { opacity: 0 !important; transform: translateY(-8px) !important; pointer-events: none !important; } /* ========================================================= PRODUCT NOTICE — TABLET ========================================================= */ @media (max-width: 900px) { body.single-product .woocommerce-message, body.single-product .woocommerce-info, body.single-product .woocommerce-error { gap: 20px !important; padding: 18px 20px !important; margin-bottom: 30px !important; font-size: 15px !important; } body.single-product .woocommerce-message .button, body.single-product .woocommerce-info .button, body.single-product .woocommerce-error .button { min-width: 150px !important; min-height: 50px !important; padding: 14px 22px !important; } } /* ========================================================= PRODUCT NOTICE — MOBILE ========================================================= */ @media (max-width: 640px) { body.single-product .woocommerce-message, body.single-product .woocommerce-info, body.single-product .woocommerce-error { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; margin-bottom: 26px !important; padding: 18px !important; font-size: 15px !important; line-height: 1.45 !important; } body.single-product .woocommerce-message .button, body.single-product .woocommerce-info .button, body.single-product .woocommerce-error .button { order: 2 !important; width: 100% !important; min-width: 0 !important; min-height: 52px !important; margin: 0 !important; text-align: center !important; } } /* ========================================================= 11. PRODUCT TABS ========================================================= */ body.single-product .woocommerce-tabs { grid-column: 1 / -1; width: 100% !important; margin: clamp(68px, 7vw, 105px) 0 0 !important; padding: 0 !important; } body.single-product .woocommerce-tabs ul.tabs { display: flex !important; align-items: flex-end; gap: clamp(24px, 4vw, 46px); width: 100%; margin: 0 !important; padding: 0 !important; border: 0 !important; border-bottom: 1px solid rgba(155, 111, 78, 0.2) !important; list-style: none !important; } body.single-product .woocommerce-tabs ul.tabs::before, body.single-product .woocommerce-tabs ul.tabs::after { display: none !important; content: none !important; } body.single-product .woocommerce-tabs ul.tabs li { position: relative; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; } body.single-product .woocommerce-tabs ul.tabs li::before, body.single-product .woocommerce-tabs ul.tabs li::after { display: none !important; content: none !important; } body.single-product .woocommerce-tabs ul.tabs li a { display: block !important; padding: 0 0 16px !important; border: 0 !important; border-bottom: 2px solid transparent !important; color: rgba(27, 20, 16, 0.5) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 10px !important; font-weight: 950 !important; letter-spacing: 0.15em !important; line-height: 1.3; text-decoration: none !important; text-transform: uppercase !important; } body.single-product .woocommerce-tabs ul.tabs li.active a { border-bottom-color: var(--floke-accent, #9b6f4e) !important; color: var(--floke-ink, #1b1410) !important; } body.single-product .woocommerce-tabs .panel { width: 100%; margin: 0 !important; padding: clamp(34px, 4vw, 56px) 0 0 !important; color: var(--floke-muted, #766a61) !important; } /* ========================================================= 12. ADDITIONAL INFORMATION ========================================================= */ body.single-product .woocommerce-Tabs-panel h2 { margin: 0 0 28px !important; color: var(--floke-ink, #1b1410) !important; font-family: Georgia, "Times New Roman", serif !important; font-size: clamp(30px, 3vw, 44px) !important; font-weight: 400 !important; line-height: 1.05; letter-spacing: -0.01em !important; text-transform: none !important; } body.single-product table.woocommerce-product-attributes { width: min(860px, 100%) !important; margin: 0 !important; border: 1px solid rgba(155, 111, 78, 0.18) !important; border-collapse: collapse !important; background: rgba(255, 250, 246, 0.72) !important; } body.single-product table.woocommerce-product-attributes tr { border-bottom: 1px solid rgba(155, 111, 78, 0.14); } body.single-product table.woocommerce-product-attributes tr:last-child { border-bottom: 0; } body.single-product table.woocommerce-product-attributes th, body.single-product table.woocommerce-product-attributes td { margin: 0 !important; padding: 18px 22px !important; border: 0 !important; background: transparent !important; text-align: left !important; } body.single-product table.woocommerce-product-attributes th { width: 220px; color: var(--floke-ink, #1b1410) !important; font-size: 10px !important; font-weight: 950 !important; letter-spacing: 0.13em; text-transform: uppercase; } body.single-product table.woocommerce-product-attributes td { color: var(--floke-muted, #766a61) !important; font-size: 14px !important; line-height: 1.5; } body.single-product table.woocommerce-product-attributes p { margin: 0 !important; padding: 0 !important; } /* ========================================================= 13. REVIEWS ========================================================= */ body.single-product #reviews { display: block !important; width: 100% !important; } body.single-product #reviews #comments { width: 100% !important; margin: 0 0 clamp(42px, 5vw, 64px) !important; } body.single-product #reviews #review_form_wrapper { width: min(900px, 100%) !important; margin: 0 !important; } body.single-product #reviews #comments h2, body.single-product #review_form_wrapper .comment-reply-title { display: block !important; margin: 0 0 28px !important; color: var(--floke-ink, #1b1410) !important; font-family: Georgia, "Times New Roman", serif !important; font-size: clamp(28px, 3vw, 40px) !important; font-weight: 400 !important; line-height: 1.05 !important; letter-spacing: 0 !important; text-transform: none !important; } body.single-product #reviews #comments > p { color: var(--floke-muted, #766a61) !important; font-size: 15px !important; line-height: 1.6 !important; } body.single-product #reviews ol.commentlist { margin: 0 !important; padding: 0 !important; list-style: none !important; } body.single-product #reviews ol.commentlist li { margin: 0 0 18px !important; padding: 22px !important; border: 1px solid rgba(155, 111, 78, 0.18) !important; background: linear-gradient( 120deg, rgba(255, 250, 246, 0.94), rgba(239, 230, 221, 0.42) ) !important; } body.single-product #reviews .comment_container { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; align-items: start; } body.single-product #reviews .avatar { position: static !important; float: none !important; width: 52px !important; height: 52px !important; margin: 0 !important; padding: 0 !important; border: 1px solid rgba(155, 111, 78, 0.2) !important; border-radius: 50% !important; background: var(--floke-cream, #fffaf6); } body.single-product #reviews .comment-text { margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; } body.single-product #reviews .description { color: var(--floke-muted, #766a61) !important; font-size: 14px; line-height: 1.6; } body.single-product #reviews .meta { margin: 8px 0 10px !important; color: var(--floke-muted, #766a61) !important; font-size: 11px !important; } body.single-product #reviews .woocommerce-review__author { color: var(--floke-ink, #1b1410) !important; font-weight: 900 !important; } body.single-product #reviews .star-rating { color: var(--floke-accent, #9b6f4e) !important; } body.single-product #review_form { width: 100% !important; padding: clamp(28px, 4vw, 46px) !important; border: 1px solid rgba(155, 111, 78, 0.18) !important; background: linear-gradient( 120deg, rgba(255, 250, 246, 0.97), rgba(239, 230, 221, 0.48) ) !important; } body.single-product #review_form p { color: var(--floke-muted, #766a61) !important; font-size: 13px; line-height: 1.55; } body.single-product #review_form label { display: block; margin-bottom: 8px; color: var(--floke-ink, #1b1410) !important; font-size: 10px !important; font-weight: 950 !important; letter-spacing: 0.1em; text-transform: uppercase; } body.single-product #review_form input[type="text"], body.single-product #review_form input[type="email"], body.single-product #review_form textarea { width: 100% !important; min-height: 50px; padding: 12px 14px !important; border: 1px solid rgba(155, 111, 78, 0.28) !important; border-radius: 0 !important; background: rgba(255, 255, 255, 0.72) !important; color: var(--floke-ink, #1b1410) !important; box-shadow: none !important; outline: none !important; } body.single-product #review_form textarea { min-height: 170px !important; resize: vertical; } body.single-product #review_form input:focus, body.single-product #review_form textarea:focus { border-color: var(--floke-accent, #9b6f4e) !important; outline: 2px solid rgba(155, 111, 78, 0.11) !important; } body.single-product #review_form .stars a { color: var(--floke-accent, #9b6f4e) !important; } body.single-product #review_form #submit { min-height: 52px !important; padding: 0 28px !important; border: 1px solid var(--floke-ink, #1b1410) !important; border-radius: 0 !important; background: var(--floke-ink, #1b1410) !important; color: #fffaf6 !important; font-size: 10px !important; font-weight: 950 !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; box-shadow: none !important; } /* ========================================================= 14. RELATED PRODUCTS ========================================================= */ body.single-product .related.products, body.single-product .up-sells.products { grid-column: 1 / -1; width: 100%; margin-top: clamp(70px, 8vw, 110px) !important; } body.single-product .related.products > h2, body.single-product .up-sells.products > h2 { margin: 0 0 34px !important; color: var(--floke-ink, #1b1410) !important; font-family: Georgia, "Times New Roman", serif !important; font-size: clamp(34px, 4vw, 50px) !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; } /* ========================================================= 15. CART — PREMIUM DESKTOP BALANCE ========================================================= */ .floke-cart-page { background: var(--floke-paper, #f7f1eb) !important; } /* ---------- MAIN CART WIDTH ---------- */ .floke-cart-page .floke-page-content { width: min(92%, 1440px) !important; max-width: none !important; margin-inline: auto !important; } .floke-cart-page .wp-block-woocommerce-cart, .floke-cart-page .wp-block-woocommerce-filled-cart-block { width: 100% !important; max-width: none !important; margin-inline: auto !important; } /* ---------- CART CARDS ---------- */ .floke-cart-page .wc-block-cart-items, .floke-cart-page .wc-block-components-main, .floke-cart-page .wc-block-components-sidebar, .floke-cart-page .woocommerce-cart-form, .floke-cart-page .cart_totals { border: 1px solid rgba(155, 111, 78, 0.16) !important; border-radius: 0 !important; background: rgba(255, 250, 246, 0.82) !important; box-shadow: 0 22px 60px rgba(27, 20, 16, 0.055) !important; } /* ---------- CART PADDING ---------- */ .floke-cart-page .wc-block-components-main, .floke-cart-page .woocommerce-cart-form { padding: clamp(24px, 3vw, 36px) !important; } .floke-cart-page .wc-block-components-sidebar, .floke-cart-page .cart_totals { padding: clamp(24px, 2.8vw, 34px) !important; } /* ---------- DIVIDERS ---------- */ .floke-cart-page .wc-block-cart-items__header, .floke-cart-page .wc-block-components-totals-wrapper, .floke-cart-page .wc-block-cart-item__wrap { border-color: rgba(155, 111, 78, 0.16) !important; } /* ========================================================= CART TYPOGRAPHY ========================================================= */ /* ---------- PRODUCT / TOTAL HEADINGS ---------- */ .floke-cart-page .wc-block-cart-items__header span, .floke-cart-page .wc-block-cart-items__header th, .floke-cart-page .woocommerce-cart-form thead th { color: var(--floke-muted, #766a61) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 10px !important; font-weight: 900 !important; letter-spacing: 0.18em !important; line-height: 1.25 !important; text-transform: uppercase !important; } /* ---------- PRODUCT NAME ---------- */ .floke-cart-page .wc-block-components-product-name, .floke-cart-page .woocommerce-cart-form .product-name a { color: var(--floke-ink, #1b1410) !important; font-family: Georgia, "Times New Roman", serif !important; font-size: clamp(18px, 1.35vw, 21px) !important; font-weight: 400 !important; line-height: 1.2 !important; letter-spacing: 0 !important; text-decoration: none !important; } .floke-cart-page .wc-block-components-product-name:hover, .floke-cart-page .woocommerce-cart-form .product-name a:hover { color: var(--floke-accent, #9b6f4e) !important; } /* ---------- PRODUCT PRICE ---------- */ .floke-cart-page .wc-block-cart-item__prices, .floke-cart-page .wc-block-components-product-price, .floke-cart-page .woocommerce-cart-form .product-price, .floke-cart-page .woocommerce-cart-form .product-subtotal { color: var(--floke-ink, #1b1410) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 15px !important; font-weight: 800 !important; line-height: 1.35 !important; } /* ---------- LENGTH / VARIATION INFORMATION ---------- */ .floke-cart-page .wc-block-components-product-metadata, .floke-cart-page .wc-block-components-product-details, .floke-cart-page .variation { color: var(--floke-muted, #766a61) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.55 !important; } .floke-cart-page .wc-block-components-product-details__name, .floke-cart-page .variation dt { color: var(--floke-ink, #1b1410) !important; font-weight: 700 !important; } /* ========================================================= PRODUCT IMAGE ========================================================= */ .floke-cart-page .wc-block-cart-item__image img, .floke-cart-page .woocommerce-cart-form img { border: 1px solid rgba(155, 111, 78, 0.18) !important; border-radius: 0 !important; background: var(--floke-cream, #fffaf6) !important; } /* ========================================================= QUANTITY ========================================================= */ .floke-cart-page .wc-block-components-quantity-selector { border: 1px solid rgba(155, 111, 78, 0.25) !important; border-radius: 0 !important; background: rgba(255, 255, 255, 0.7) !important; } .floke-cart-page .wc-block-components-quantity-selector input { color: var(--floke-ink, #1b1410) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 13px !important; font-weight: 700 !important; } .floke-cart-page .wc-block-components-quantity-selector__button { color: var(--floke-ink, #1b1410) !important; } /* ========================================================= REMOVE ========================================================= */ .floke-cart-page .wc-block-cart-item__remove-link { color: var(--floke-muted, #766a61) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: 0.08em !important; text-decoration: none !important; text-transform: uppercase !important; } .floke-cart-page .wc-block-cart-item__remove-link:hover { color: var(--floke-accent, #9b6f4e) !important; } /* ========================================================= CART TOTALS ========================================================= */ /* ---------- CART TOTALS HEADING ---------- */ .floke-cart-page .wc-block-cart__totals-title, .floke-cart-page .cart_totals h2 { margin-bottom: 22px !important; color: var(--floke-ink, #1b1410) !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 26px !important; font-weight: 400 !important; line-height: 1.1 !important; letter-spacing: 0 !important; text-transform: none !important; } /* ---------- TOTAL ROW LABELS ---------- */ .floke-cart-page .wc-block-components-totals-item__label { color: var(--floke-muted, #766a61) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.4 !important; } /* ---------- TOTAL VALUES ---------- */ .floke-cart-page .wc-block-components-totals-item__value { color: var(--floke-ink, #1b1410) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 15px !important; font-weight: 800 !important; line-height: 1.4 !important; } /* ---------- GRAND TOTAL ---------- */ .floke-cart-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__label, .floke-cart-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { color: var(--floke-ink, #1b1410) !important; font-weight: 900 !important; } /* ========================================================= COUPON / DISCOUNT ========================================================= */ .floke-cart-page .wc-block-components-totals-coupon-link { color: var(--floke-accent, #9b6f4e) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: 0.06em !important; text-decoration: none !important; } .floke-cart-page .wc-block-components-totals-coupon-link:hover { color: var(--floke-ink, #1b1410) !important; } /* ========================================================= CHECKOUT BUTTON ========================================================= */ .floke-cart-page .wc-block-components-button, .floke-cart-page .wc-block-cart__submit-button, .floke-cart-page .checkout-button { min-height: 56px !important; border: 1px solid var(--floke-ink, #1b1410) !important; border-radius: 0 !important; background: var(--floke-ink, #1b1410) !important; color: #fffaf6 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 10px !important; font-weight: 950 !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; box-shadow: none !important; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .floke-cart-page .wc-block-components-button:hover, .floke-cart-page .wc-block-cart__submit-button:hover, .floke-cart-page .checkout-button:hover { border-color: var(--floke-accent, #9b6f4e) !important; background: var(--floke-accent, #9b6f4e) !important; color: #fffaf6 !important; } /* ========================================================= 16. DESKTOP CART ========================================================= */ @media (min-width: 1181px) { .floke-cart-page .floke-page-content { width: min(1440px, calc(100vw - 100px)) !important; } .floke-cart-page .wc-block-components-sidebar-layout { display: grid !important; grid-template-columns: minmax(0, 1.55fr) minmax(350px, 0.72fr) !important; gap: clamp(36px, 4vw, 62px) !important; align-items: start; width: 100% !important; } .floke-cart-page .wc-block-components-main { width: 100% !important; max-width: none !important; } .floke-cart-page .wc-block-components-sidebar { position: sticky; top: 125px; width: 100% !important; max-width: none !important; } .floke-cart-page .wc-block-cart-items { width: 100% !important; } .floke-cart-page .wc-block-cart-item__image { width: 120px !important; } .floke-cart-page .wc-block-cart-item__image img { width: 110px !important; height: 128px !important; object-fit: cover; } } /* ========================================================= 17. TABLET CART ========================================================= */ @media (min-width: 641px) and (max-width: 1180px) { .floke-cart-page .floke-page-content { width: min(92%, 960px) !important; } .floke-cart-page .wc-block-components-sidebar-layout { display: grid !important; grid-template-columns: 1fr !important; gap: 30px !important; } .floke-cart-page .wc-block-components-main, .floke-cart-page .wc-block-components-sidebar { width: 100% !important; max-width: none !important; } .floke-cart-page .wc-block-components-sidebar { position: static !important; } .floke-cart-page .wc-block-cart-item__image img { width: 95px !important; height: 112px !important; object-fit: cover; } } /* ========================================================= 18. MOBILE ========================================================= */ @media (max-width: 640px) { /* ======================================================= GLOBAL MOBILE SAFETY Prevent anything from escaping the viewport ======================================================= */ html, body { max-width: 100%; overflow-x: hidden; } body.single-product, body.single-product * { box-sizing: border-box; } body.single-product .floke-single-product-page, body.single-product div.product, body.single-product .summary, body.single-product .woocommerce-product-gallery, body.single-product .woocommerce-tabs, body.single-product .woocommerce-tabs .panel, body.single-product #reviews, body.single-product #review_form_wrapper, body.single-product #review_form, body.single-product .related.products, body.single-product .up-sells.products { min-width: 0 !important; max-width: 100% !important; } /* ======================================================= MAIN PRODUCT WRAPPER ======================================================= */ body.single-product .floke-single-product-page { width: calc(100% - 28px) !important; margin-inline: auto !important; padding-top: 28px !important; padding-bottom: 72px !important; } body.single-product div.product { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; width: 100% !important; gap: 30px !important; } /* ======================================================= PRODUCT IMAGE ======================================================= */ body.single-product .woocommerce-product-gallery { width: 100% !important; } body.single-product .woocommerce-product-gallery img { width: 100% !important; max-width: 100% !important; height: auto !important; } /* ======================================================= PRODUCT SUMMARY ======================================================= */ body.single-product .summary.entry-summary { width: 100% !important; min-width: 0 !important; padding: 0 !important; } body.single-product .summary.entry-summary::before { font-size: 9px !important; letter-spacing: 0.18em !important; } body.single-product .product_title { width: 100% !important; max-width: 100% !important; margin-bottom: 24px !important; font-size: clamp(36px, 10.5vw, 46px) !important; line-height: 0.98 !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: normal !important; } body.single-product .summary .price { margin-bottom: 26px !important; font-size: 19px !important; } /* Short description */ body.single-product .summary .woocommerce-product-details__short-description { width: 100% !important; max-width: 100% !important; margin: 0 0 28px !important; color: var(--floke-muted, #766a61) !important; font-size: 16px !important; line-height: 1.55 !important; white-space: normal !important; overflow-wrap: anywhere !important; } body.single-product .summary .woocommerce-product-details__short-description p { width: 100% !important; max-width: 100% !important; margin: 0 !important; white-space: normal !important; overflow-wrap: anywhere !important; } /* ======================================================= LENGTH / DENSITY VARIATIONS Stack properly on mobile ======================================================= */ body.single-product table.variations, body.single-product table.variations tbody, body.single-product table.variations tr, body.single-product table.variations th, body.single-product table.variations td { width: 100% !important; max-width: 100% !important; } body.single-product table.variations { display: block !important; } body.single-product table.variations tbody { display: grid !important; gap: 22px !important; } body.single-product table.variations tr { display: block !important; margin: 0 !important; } body.single-product table.variations th.label { display: block !important; width: 100% !important; height: auto !important; margin: 0 0 9px !important; } body.single-product table.variations th.label label { display: block !important; width: 100% !important; height: auto !important; margin: 0 !important; font-size: 10px !important; line-height: 1.3 !important; } body.single-product table.variations td.value { display: block !important; width: 100% !important; max-width: 100% !important; } body.single-product table.variations select { display: block !important; width: 100% !important; max-width: 100% !important; height: 54px !important; min-height: 54px !important; margin: 0 !important; padding-left: 14px !important; padding-right: 42px !important; font-size: 16px !important; } body.single-product .reset_variations { display: inline-block !important; margin: 9px 0 0 !important; font-size: 9px !important; white-space: normal !important; } /* ======================================================= QUANTITY + ADD TO BAG ======================================================= */ body.single-product .single_variation_wrap { width: 100% !important; } body.single-product .woocommerce-variation-add-to-cart, body.single-product form.cart:not(.variations_form) { display: grid !important; grid-template-columns: 1fr !important; width: 100% !important; max-width: 100% !important; gap: 12px !important; } body.single-product .quantity { width: 100% !important; } body.single-product .quantity .qty { width: 100% !important; min-height: 54px !important; } body.single-product .single_add_to_cart_button { width: 100% !important; min-height: 56px !important; } /* ======================================================= PRODUCT TABS ======================================================= */ body.single-product .woocommerce-tabs { width: 100% !important; margin-top: 54px !important; } body.single-product .woocommerce-tabs ul.tabs { display: flex !important; width: 100% !important; max-width: 100% !important; gap: 24px !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; } body.single-product .woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none; } body.single-product .woocommerce-tabs ul.tabs li { flex: 0 0 auto !important; } body.single-product .woocommerce-tabs ul.tabs li a { white-space: nowrap !important; font-size: 9px !important; letter-spacing: 0.13em !important; } /* ======================================================= TAB CONTENT / DESCRIPTION ======================================================= */ body.single-product .woocommerce-tabs .panel { width: 100% !important; padding-top: 32px !important; } body.single-product .woocommerce-tabs .panel h2 { width: 100% !important; font-size: clamp(34px, 10vw, 44px) !important; white-space: normal !important; overflow-wrap: anywhere !important; } body.single-product .woocommerce-tabs .panel p { width: 100% !important; max-width: 100% !important; font-size: 16px !important; line-height: 1.55 !important; white-space: normal !important; overflow-wrap: anywhere !important; } /* ======================================================= ADDITIONAL INFORMATION ======================================================= */ body.single-product table.woocommerce-product-attributes { display: block !important; width: 100% !important; max-width: 100% !important; } body.single-product table.woocommerce-product-attributes tbody { display: block !important; width: 100% !important; } body.single-product table.woocommerce-product-attributes tr { display: block !important; width: 100% !important; } body.single-product table.woocommerce-product-attributes th, body.single-product table.woocommerce-product-attributes td { display: block !important; width: 100% !important; max-width: 100% !important; padding: 14px 16px !important; } body.single-product table.woocommerce-product-attributes th { padding-bottom: 5px !important; } body.single-product table.woocommerce-product-attributes td { padding-top: 5px !important; overflow-wrap: anywhere !important; } /* ======================================================= REVIEWS ======================================================= */ body.single-product #reviews { display: block !important; width: 100% !important; } body.single-product #reviews #comments { width: 100% !important; margin-bottom: 30px !important; } body.single-product #reviews #comments h2 { width: 100% !important; font-size: clamp(34px, 10vw, 44px) !important; white-space: normal !important; overflow-wrap: anywhere !important; } body.single-product #reviews #review_form_wrapper { width: 100% !important; max-width: 100% !important; margin: 0 !important; } body.single-product #review_form { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 22px 16px !important; } /* Important — long review title */ body.single-product #review_form_wrapper .comment-reply-title { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 0 24px !important; font-size: clamp(29px, 8.5vw, 38px) !important; line-height: 1.06 !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: normal !important; } /* Review helper text */ body.single-product #review_form p { width: 100% !important; max-width: 100% !important; white-space: normal !important; overflow-wrap: anywhere !important; } /* Review fields */ body.single-product #review_form input, body.single-product #review_form textarea, body.single-product #review_form select { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; } body.single-product #review_form textarea { min-height: 180px !important; } /* Stars */ body.single-product #review_form .stars { width: 100% !important; margin-bottom: 18px !important; } body.single-product #review_form .stars span { display: flex !important; flex-wrap: wrap !important; gap: 2px; } /* Existing reviews */ body.single-product #reviews .comment_container { display: grid !important; grid-template-columns: 42px minmax(0, 1fr) !important; gap: 14px !important; } body.single-product #reviews .avatar { width: 42px !important; height: 42px !important; } body.single-product #reviews .comment-text { min-width: 0 !important; } /* ======================================================= RELATED PRODUCTS ======================================================= */ body.single-product .related.products, body.single-product .up-sells.products { width: 100% !important; margin-top: 58px !important; } body.single-product .related.products > h2, body.single-product .up-sells.products > h2 { width: 100% !important; margin-bottom: 28px !important; font-size: clamp(36px, 10vw, 46px) !important; line-height: 1 !important; white-space: normal !important; overflow-wrap: anywhere !important; } body.single-product .related.products ul.products, body.single-product .up-sells.products ul.products { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; width: 100% !important; max-width: 100% !important; gap: 22px !important; } body.single-product .related.products ul.products li.product, body.single-product .up-sells.products ul.products li.product { width: 100% !important; max-width: 100% !important; margin: 0 !important; } body.single-product .related.products ul.products li.product img, body.single-product .up-sells.products ul.products li.product img { width: 100% !important; max-width: 100% !important; height: auto !important; } /* ======================================================= ADDED TO BAG NOTICE — MOBILE ======================================================= */ body.single-product .woocommerce-message, body.single-product .woocommerce-info, body.single-product .woocommerce-error { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; gap: 14px !important; margin-bottom: 24px !important; padding: 17px !important; font-size: 15px !important; line-height: 1.45 !important; } body.single-product .woocommerce-message .button, body.single-product .woocommerce-info .button, body.single-product .woocommerce-error .button { width: 100% !important; min-width: 0 !important; min-height: 50px !important; margin: 0 !important; } /* ======================================================= MOBILE CART ======================================================= */ .floke-cart-page .floke-page-content { width: calc(100% - 28px) !important; margin-inline: auto !important; } .floke-cart-page .wc-block-components-sidebar-layout { display: grid !important; grid-template-columns: 1fr !important; gap: 20px !important; } .floke-cart-page .wc-block-components-main, .floke-cart-page .wc-block-components-sidebar, .floke-cart-page .woocommerce-cart-form, .floke-cart-page .cart_totals { width: 100% !important; max-width: 100% !important; padding: 18px !important; box-sizing: border-box !important; } }