/* ============================================================================ ORITA DESIGN LAYER — vendora-child / assets / orita.css ASOS-clean structure · Depop-thrift merchandising · Orita brand ---------------------------------------------------------------------------- Loaded after the Vendora parent stylesheet, so it wins. Revert anything here by deleting the rule; nothing else depends on it. ============================================================================ */ /* ── 1. PALETTE OVERRIDE ───────────────────────────────────────────────────── Vendora/Kitify prints its theme colours as inline CSS variables in — declared on `body, body .kitify`, which is why a plain :root rule loses: elements inherit the variable from , not from . Note the selector list below. Same specificity as the theme's declaration + !important (valid for custom properties) = ours wins no matter which prints first. Stock Kitify blue #3858E9 is replaced by Orita brown #3C2B0F (primary), yellow #FDBF30 (accent) and mushroom #F2E5DD (surface). */ :root{ /* Orita brand tokens — from the official palette sheet: Brown #3C2B0F (primary) Yellow #FDBF30 (accent) Mushroom #F2E5DD (surface / wash) Neutrals (not on the sheet but required for UI): charcoal #2D2D2D for text, white canvas, warm greys derived from the above. */ --orita-ink:#2d2d2d; --orita-muted:#79736c; --orita-line:#e8dace; --orita-wash:#f2e5dd; --orita-brown:#3c2b0f; --orita-yellow:#fdbf30; --orita-mushroom:#f2e5dd; --orita-radius:2px; } body, body .kitify, :root{ --kitify-primary-color:#3c2b0f !important; --kitify-secondary-color:#2d2d2d !important; --kitify-body-color:#5a544e !important; --kitify-pagination-link-hover-bg-color:#3c2b0f !important; --site-primary-color:#3c2b0f !important; --site-accent-color:#fdbf30 !important; --site-header-accent-color:#3c2b0f !important; --site-main-menu-accent-color:#3c2b0f !important; --site-main-menu-text-color:#5a544e !important; --site-main-menu-bg-color:#ffffff !important; --site-main-menu-border-color:#e8dace !important; --site-primary-button-bg:#3c2b0f !important; --site-primary-button-color:#ffffff !important; --site-secondary-button-bg:#ffffff !important; --site-secondary-button-color:#3c2b0f !important; --site-body-bg-color:#ffffff !important; --site-body-text-color:#5a544e !important; --site-heading-text-color:#2d2d2d !important; --site-border-color:#e8dace !important; /* Archivo is the typeface. ASOS's own face is proprietary and not licensed for third-party use (their wordmark is custom-drawn and trademarked); Archivo is the closest freely-licensed grotesque and is the standard recommendation. */ --site-main-font:'Archivo', -apple-system, "Helvetica Neue", Arial, sans-serif !important; --site-heading-font:'Archivo', -apple-system, "Helvetica Neue", Arial, sans-serif !important; } /* ── 2. TYPOGRAPHY ─────────────────────────────────────────────────────────── */ body, button, input, select, textarea, .elementor-widget-container, .woocommerce, .entry-content{ font-family:'Archivo', -apple-system, "Helvetica Neue", Arial, sans-serif; } body{ font-size:14px; line-height:1.4; color:var(--orita-ink); -webkit-font-smoothing:antialiased; } h1,h2,h3,h4,h5,h6,.elementor-heading-title,.entry-title,.page-title{ font-family:'Archivo',sans-serif; font-weight:700; letter-spacing:-.018em; color:var(--orita-ink); } h1{ line-height:1.04; } h2{ line-height:1.1; } .widget-title,.woocommerce-products-header__title,.section-title,.nova-section-title{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; } a{ color:inherit; } a:hover{ color:var(--orita-navy); } /* ── 3. FLAT, SQUARE CHROME (ASOS has almost none) ─────────────────────────── */ .btn, button, input[type="submit"], .elementor-button, .nova-button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .add_to_cart_button, .product-item .button{ border-radius:var(--orita-radius) !important; box-shadow:none !important; text-transform:uppercase; letter-spacing:.08em; font-weight:700; font-size:12px; } input, select, textarea, .select2-container .select2-selection, .form-row input.input-text{ border-radius:var(--orita-radius) !important; } img, .product-item, .product-item img, .elementor-image img{ border-radius:var(--orita-radius) !important; } .product-item, .nova-product, .card, .widget, .elementor-widget-container .product{ box-shadow:none !important; } /* ── 4. HEADER + NAV ───────────────────────────────────────────────────────── */ .site-header, .header-main, .nova-header{ background:#fff !important; border-bottom:1px solid var(--orita-line) !important; box-shadow:none !important; } .main-navigation a, .menu > li > a, .nav-menu a, .primary-menu a{ font-size:12.5px !important; font-weight:600 !important; letter-spacing:.05em !important; text-transform:uppercase !important; color:var(--orita-ink-2,#4a4f55) !important; } .main-navigation a:hover, .menu > li > a:hover{ color:var(--orita-ink) !important; } .sub-menu a, .dropdown-menu a, .main-navigation ul ul a{ text-transform:none !important; letter-spacing:normal !important; font-weight:500 !important; font-size:13px !important; } .header-search input[type="search"], .search-form input[type="search"], input.search-field{ background:var(--orita-wash) !important; border:1px solid var(--orita-line) !important; border-radius:var(--orita-radius) !important; height:42px; } .header-search input[type="search"]:focus, .search-form input[type="search"]:focus{ background:#fff !important; border-color:var(--orita-ink) !important; outline:none; } /* ── 5. PRODUCT GRID: denser, no card boxes ────────────────────────────────── */ ul.products, .products, .nova-products{ display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:26px 10px !important; margin:0 !important; } ul.products li.product, .products .product, .product-item{ width:auto !important; margin:0 !important; float:none !important; border:0 !important; padding:0 !important; background:transparent !important; } ul.products li.product img, .product-item img, .product-item .product-image img{ aspect-ratio:3/4; object-fit:cover; width:100%; } .product-item .product-title, .woocommerce-loop-product__title{ font-size:12.5px !important; font-weight:600 !important; line-height:1.3 !important; margin:8px 0 2px !important; } .product-item .price, ul.products li.product .price{ font-size:13.5px !important; font-weight:700 !important; } .star-rating{ display:none !important; } .product-item .add_to_cart_button, ul.products li.product .button{ margin-top:6px !important; background:transparent !important; color:var(--orita-ink) !important; border:1px solid var(--orita-ink) !important; padding:8px 12px !important; width:auto !important; } .product-item .add_to_cart_button:hover, ul.products li.product .button:hover{ background:var(--orita-ink) !important; color:#fff !important; } .stock, .nova-stock{ display:none !important; } /* one-of-one: stock counts read as "many available" */ .onsale, .badge-sale{ background:var(--orita-yellow,#fdbf30) !important; color:var(--orita-ink,#2d2d2d) !important; border-radius:0 !important; font-size:10px !important; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } /* ── 6. SIDEBAR / FILTERS ──────────────────────────────────────────────────── */ .widget, .sidebar .widget, .nova-widget{ background:transparent !important; border:0 !important; border-bottom:1px solid var(--orita-line) !important; padding:14px 0 !important; box-shadow:none !important; } /* ── 7. FOOTER ─────────────────────────────────────────────────────────────── */ footer, .site-footer{ background:#fff !important; border-top:1px solid var(--orita-line) !important; } .site-footer a{ font-size:12.5px !important; color:#4a4f55 !important; } /* ── 8. RESPONSIVE ─────────────────────────────────────────────────────────── */ @media (max-width:1180px){ ul.products,.products,.nova-products{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; } } @media (max-width:760px){ ul.products,.products,.nova-products{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:20px 8px !important; } } @media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } } /* ============================================================================ SECTION 9 — ORITA HOMEPAGE (page 1868). Palette: brown #3C2B0F, yellow #FDBF30, mushroom #F2E5DD, ink #2D2D2D, warm grey #5A544E, line #E8DACE. Edit text/images in Elementor; edit spacing/colour/type here. ============================================================================ */ .page-id-1868 .entry-header,.page-id-1868 .page-title,.page-id-1868 .elementor-page-title,.page-id-1868 .woocommerce-breadcrumb{display:none!important} .orita-home .elementor-widget-text-editor p{margin:0 0 10px} .orita-home .elementor-heading-title{margin:0} .orita-kicker .elementor-heading-title{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#5A544E;font-weight:700;margin:0 0 8px} /* ---- section header row (title left, link right) ---- */ .orita-sechead{direction:ltr} .orita-sechead .elementor-container,.orita-sechead .e-con-inner{justify-content:space-between;align-items:baseline} .orita-sechead .elementor-heading-title{font-size:clamp(20px,2.1vw,28px);line-height:1.15;letter-spacing:-.02em;color:#2D2D2D} .orita-sechead a.orita-link{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:#5A544E;text-decoration:none;border-bottom:1px solid #E8DACE;padding-bottom:2px;white-space:nowrap} .orita-sechead a.orita-link:hover{color:#3C2B0F;border-color:#3C2B0F} /* ---- hero (full-bleed store photo + brown overlay) ---- */ .orita-hero h1.elementor-heading-title{font-size:clamp(30px,4.6vw,58px);line-height:1.03;letter-spacing:-.028em;color:#fff;margin:0 0 14px;text-shadow:0 2px 10px rgba(0,0,0,.35)} .orita-hero .elementor-widget-text-editor p{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.92);max-width:48ch;margin:0 0 4px;text-shadow:0 1px 4px rgba(0,0,0,.4)} .orita-hero .elementor-widget-button .elementor-button{border-radius:2px;padding:15px 28px;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;text-decoration:none;border:0} .orita-btn-hero .elementor-button{background:#fff!important;color:#3C2B0F!important} .orita-btn-hero .elementor-button:hover{background:#FDBF30!important;color:#2D2D2D!important} .orita-hero .orita-stats .elementor-icon-list-items{display:flex!important;flex-wrap:wrap;gap:22px 34px} .orita-hero .orita-stats .elementor-icon-list-item{margin:0!important;padding:0!important} .orita-hero .orita-stats .elementor-icon-list-icon{display:none} .orita-hero .orita-stats .elementor-icon-list-text{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.95);line-height:1.4;text-shadow:0 1px 3px rgba(0,0,0,.55)} .orita-hero .orita-stats .elementor-icon-list-text strong{display:block;font-size:19px;letter-spacing:-.01em;text-transform:none;font-weight:700;color:#fff;margin-bottom:3px} /* ---- trust strip ---- */ .orita-trust .elementor-heading-title{font-size:12px;letter-spacing:.06em;text-transform:uppercase;line-height:1.35;margin:0 0 6px;color:#fff} .orita-trust .elementor-widget-text-editor p{font-size:12px;line-height:1.5;color:rgba(255,255,255,.78);margin:0} /* ---- trust strip — full-bleed brown band, four facts on one line ---- */ /* Same edge-to-edge recipe as the hero (SECTION 11): 100vw on the band, and the CONTENT stays on the site grid with the hero's own gutter formula, so the strip's first fact lines up with the hero copy and the boxed sections below it rather than drifting to a second content edge. */ .page-id-1868 .orita-trust-strip{ width:100vw!important;max-width:100vw!important; margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important; padding-left:max(40px,calc((100vw - 1290px) / 2))!important; padding-right:max(40px,calc((100vw - 1290px) / 2))!important} /* 25% columns leave no room for a flex gap, so the gutter rides on each column */ .orita-trust-strip > .e-con-inner > .e-con{padding-right:28px} .orita-trust-strip > .e-con-inner > .e-con:last-child{padding-right:0} /* ---- category tiles (image fills, overlay caption) ---- */ .orita-cats .orita-tile{position:relative;overflow:hidden;border-radius:2px;height:330px} .orita-cats .orita-tile .elementor-widget-image{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;padding:0} .orita-cats .orita-tile .elementor-widget-image a{display:block;width:100%;height:100%} .orita-cats .orita-tile .elementor-widget-image img{width:100%!important;height:100%!important;object-fit:cover;object-position:center top;display:block;transition:transform .5s cubic-bezier(.2,.7,.3,1)} .orita-cats .orita-tile:hover img{transform:scale(1.04)} .orita-cats .orita-tile .elementor-widget-text-editor{position:absolute;left:0;right:0;bottom:0;margin:0;padding:40px 18px 16px;background:linear-gradient(to top,rgba(45,45,45,.9),rgba(45,45,45,0))} .orita-tile-link{display:block;text-decoration:none!important;color:inherit} .orita-tile-link:hover .orita-tile-title{text-decoration:underline;text-underline-offset:3px} .orita-tile-eyebrow{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.85);margin:0 0 7px} .orita-tile-title{font-size:clamp(16px,1.5vw,21px);line-height:1.05;text-transform:uppercase;color:#fff;margin:0 0 4px;font-weight:700;letter-spacing:-.01em} .orita-tile-desc{font-size:11.5px;line-height:1.35;color:rgba(255,255,255,.85);margin:0} /* ---- chips ---- */ .orita-chips a{display:inline-block;border:1px solid #E8DACE;border-radius:99px;padding:9px 16px;margin:0 8px 8px 0;font-size:12.5px;line-height:1.2;color:#5A544E!important;text-decoration:none!important;background:#fff;transition:border-color .2s ease,color .2s ease} .orita-chips a:hover{border-color:#3C2B0F;color:#3C2B0F!important} .orita-chips{margin:0} /* ---- price tiles (Shop by price) — the tile IS the filter link ---- */ .orita-price .orita-price-tile{position:relative} .orita-price .orita-price-tile .elementor-widget-image{position:relative;margin:0;overflow:hidden;border-radius:2px} .orita-price .orita-price-tile .elementor-widget-image img{width:100%!important;height:210px!important;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.3,1)} .orita-price .orita-price-tile:hover img{transform:scale(1.04)} .orita-price .orita-price-tile .elementor-widget-text-editor{margin:0;padding:11px 0 0} .orita-price .orita-price-tile .orita-tile-eyebrow{display:none} .orita-price .orita-price-tile .orita-tile-title{font-size:14.5px;line-height:1.2;text-transform:none;color:#2D2D2D;margin:0 0 3px} .orita-price .orita-price-tile .orita-tile-desc{font-size:11.5px;color:#5A544E;margin:0} /* ---- trend chips with photos (Popular this week) ---- */ .orita-chiptiles .orita-chip-tile{padding-right:10px} .orita-chiptiles .orita-chip-tile .elementor-widget-image img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:2px;display:block} .orita-chiptiles .orita-chip-tile .elementor-widget-text-editor p{margin:8px 0 0} .orita-chiptiles .orita-chip-tile a{font-size:12px;line-height:1.35;color:#2D2D2D!important;font-weight:600;text-decoration:none!important} .orita-chiptiles .orita-chip-tile a:hover{color:#3C2B0F!important;text-decoration:underline!important;text-underline-offset:3px} /* ---- brand tiles (Popular brands) ---- */ .orita-brandtiles .orita-brand-tile{padding-right:10px;margin-bottom:16px} .orita-brandtiles .orita-brand-tile .elementor-widget-image{overflow:hidden;border-radius:2px} .orita-brandtiles .orita-brand-tile .elementor-widget-image img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#F2E5DD;transition:transform .45s cubic-bezier(.2,.7,.3,1)} .orita-brandtiles .orita-brand-tile:hover img{transform:scale(1.03)} .orita-brandtiles .orita-brand-tile .elementor-widget-text-editor p{margin:7px 0 0} .orita-brandtiles .orita-brand-tile a{font-size:12px;font-weight:600;color:#2D2D2D!important;text-decoration:none!important} .orita-brandtiles .orita-brand-tile a:hover{color:#3C2B0F!important;text-decoration:underline!important;text-underline-offset:3px} /* ---- New in product grid ---- */ .orita-newin .kitify-products__list{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:34px 16px!important;margin:0!important;padding:0!important;list-style:none!important;clear:both} .orita-newin .kitify-products__list>li{width:100%!important;max-width:100%!important;margin:0!important;float:none!important;clear:none!important;min-width:0} .orita-newin .product-item,.orita-newin .product-item__thumbnail,.orita-newin .product-item__thumbnail-placeholder,.orita-newin .product-item__thumbnail-placeholder>a{display:block!important;width:100%!important;max-width:100%!important} .orita-newin .product-item img{width:100%!important;max-width:100%!important;height:auto!important;aspect-ratio:3/4;object-fit:cover;display:block} .orita-newin .product_second_image{aspect-ratio:3/4;background-size:cover;background-position:center} .orita-newin .product-item__thumbnail{position:relative;background:#F2E5DD} .orita-newin .product-item__thumbnail::after{content:"Only 1 available";position:absolute;left:8px;bottom:8px;z-index:2;background:rgba(45,45,45,.82);color:#fff;font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;padding:4px 8px;border-radius:2px;pointer-events:none} .orita-newin .product-item__description--top-actions,.orita-newin .nova_product_quick_view_btn,.orita-newin .wcboost-wishlist-button,.orita-newin .add_to_wishlist{display:none!important} .orita-newin .woocommerce-loop-product__title{font-size:12.5px!important;padding:0!important;margin:10px 0 3px!important;line-height:1.4;min-height:2.8em} .orita-newin .price{font-size:13.5px!important;font-weight:700!important;color:#2D2D2D} .orita-newin .star-rating,.orita-newin .rating,.orita-newin .nova-rating{display:none!important} .orita-newin .product-item{margin-bottom:10px} /* ---- sell band (invitation only — the seller runbook lives on the seller page) ---- */ .orita-sell .elementor-heading-title{margin:0} .orita-sell .elementor-widget-text-editor p{font-size:14px;line-height:1.6;margin:0;max-width:56ch} .orita-sell .orita-sell-btn .elementor-button{border-radius:2px;padding:15px 28px} /* once the band stacks, the CTA must not stay pinned to the right edge */ @media(max-width:1200px){.orita-sell .orita-sell-btn{align-items:flex-start!important} .orita-sell .orita-sell-btn .elementor-widget-button{text-align:left!important}} /* retired from the band, kept for the seller page these blocks are moving to */ .orita-steps{list-style:none;counter-reset:s;margin:0;padding:0} .orita-steps li{counter-increment:s;position:relative;padding-left:30px;margin-bottom:12px;font-size:13px;line-height:1.45;color:#5A544E} .orita-steps li::before{content:counter(s);position:absolute;left:0;top:1px;width:19px;height:19px;border-radius:50%;background:#3C2B0F;color:#fff;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center} .orita-commission{width:100%;border-collapse:collapse;font-size:13px} .orita-commission td{padding:9px 0;border-bottom:1px solid #E8DACE;color:#5A544E} .orita-commission td:last-child{text-align:right;font-weight:700;color:#2D2D2D;white-space:nowrap} .orita-commission tr:first-child td{padding-top:0} .orita-commission-note{font-size:11.5px;color:#5A544E;margin:12px 0 0} .orita-partner{background:#fff;border:1px solid #E8DACE;padding:22px 22px 20px} .orita-partner .elementor-heading-title{font-size:16px;line-height:1.25;color:#2D2D2D;margin:0 0 8px} .orita-partner .elementor-widget-text-editor p{font-size:12.5px;line-height:1.5;color:#5A544E;margin:0 0 14px} .orita-partner .elementor-button{background:#fff;color:#3C2B0F;border:1px solid #3C2B0F;border-radius:2px;padding:12px 20px;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase} .orita-partner .elementor-button:hover{background:#3C2B0F;color:#fff} /* ---- focus visibility (keyboard) ---- */ .orita-chips a:focus-visible,.orita-sechead a:focus-visible{outline:2px solid #3C2B0F;outline-offset:2px} .orita-cats .orita-tile:focus-within{outline:2px solid #FDBF30;outline-offset:-3px} /* ---- responsive ---- */ @media(max-width:1024px){ .orita-cats .orita-tile{height:290px} .orita-newin .kitify-products__list{grid-template-columns:repeat(3,minmax(0,1fr))!important} } @media(max-width:767px){ .orita-cats .orita-tile{height:230px} .orita-newin .kitify-products__list{grid-template-columns:repeat(2,minmax(0,1fr))!important} .orita-hero h1.elementor-heading-title{font-size:clamp(26px,7vw,32px)} } /* ============================================================================ SECTION 10 — MEGA MENU (layout modelled on ASOS) ASOS anatomy: a dark category bar whose items open a FULL-WIDTH white panel beneath it, split into grouped columns with uppercase headings, circular thumbnails beside some links, and a portrait promo tile in the last column. Content model is Depop's (category · style · price · condition · brands · sell). Also repairs the theme's broken open mechanism: app.css hides the panel with `.kitify-category-menu__wrappper{z-index:-3}` and `.kitify-category-menu__content{opacity:0;pointer-events:none}`, and its only open rule targets `.menu-item-mega` items, which no longer exist here. ============================================================================ */ /* The panel is positioned against `.kitify-category-menu__inner` — the widget's own box, which already sits INSIDE the bar container's padding. That way the panel is exactly as wide as the bar and its content lines up with the logo, with no need to duplicate the container's responsive padding values in CSS. (Elementor's widget wrapper stays position:static so it can't cap the panel.) */ .elementor-element-7f3a9c1{position:relative;z-index:70} .elementor-element-4d4bc24{position:static!important} .kitify-category-menu__inner{position:relative!important} .kitify-category-menu{position:static} /* the theme positions this nav, which would cap the panel at the bar's width */ .kitify-category-menu__content-menu{position:static!important} /* the bar ul is also positioned by the theme — that is what capped the panel */ .kitify-category-menu__content-menu > ul.menu{position:static!important} /* NO gutter here. The bar container carries the header row's OWN responsive padding (set in Elementor: desktop 0, laptop 100, tablet 60, mobile 25), so the categories align with the logo at every breakpoint. A hardcoded/percentage gutter was wrong twice over: it mismatched the row, and on a wide screen it grew big enough to squeeze the 12 items onto a wrapped second line. */ .kitify-category-menu{--mm-gutter:0px} /* ---- the categories are ALWAYS VISIBLE (ASOS), not a hover dropdown ---- The widget is a dropdown by design, so its trigger button is hidden and its panel is returned to normal flow to become a real bar. The bar's brown background is the container's Elementor background setting, not CSS. */ .kitify-category-menu__title{display:none!important} .kitify-category-menu__wrappper{visibility:visible!important;opacity:1!important;z-index:60!important} .kitify-category-menu__content{ position:static!important;opacity:1!important;visibility:visible!important; pointer-events:auto!important;width:100%!important; background:transparent!important;box-shadow:none!important; /* the theme animates the dropdown with a transform, which silently becomes the containing block for the absolutely positioned panel — cap it at 1037px */ transform:none!important} .kitify-category-menu__wrappper{transform:none!important} /* ---- the category bar (ASOS's dark strip) ---- */ .kitify-category-menu__content .kitify-category-menu__content-menu > ul{ display:flex!important;flex-direction:row!important; flex-wrap:nowrap!important;justify-content:flex-start!important; width:100%!important;box-sizing:border-box; background:transparent!important;border:0!important;box-shadow:none!important; padding:0 var(--mm-gutter)!important;margin:0!important;min-width:0!important} .kitify-category-menu__content .kitify-category-menu__content-menu ul.menu > li{ padding:0!important;position:static!important} .kitify-category-menu__content .kitify-category-menu__content-menu ul.menu > li > a{ color:#fff!important;border-radius:0!important;box-shadow:none!important; font-size:12px!important;font-weight:600;letter-spacing:.07em;text-transform:uppercase; padding:12px 14px!important;line-height:1.2!important;display:block; transition:background .15s ease,color .15s ease} .kitify-category-menu__content .kitify-category-menu__content-menu ul.menu > li > a i{display:none} /* The Active Color (Kitify) is white, and the theme forces the label to #fff on the active item — which would be invisible on white. Flip the label dark while hovered. This one line is the only thing the widget genuinely cannot express. */ .kitify-category-menu__content .kitify-category-menu__content-menu ul.menu > li:hover > a{ color:#3C2B0F!important} /* The theme's JS marks the HOVERED item `is-active` too — and also parks a permanent `is-active` on the first item. Clearing is-active outright killed the hover effect (the item's background came out transparent). So clear it only when NOT hovered: the permanent tint on the first item goes, the hover/Active Color stays. */ .kitify-category-menu__content .kitify-category-menu__content-menu ul.menu > li.is-active:not(:hover) > a{ background:transparent!important;color:#fff!important} /* hover/active colour is set from the Kitify style control (Dropdown Content -> Active Color = drop_active_bg_color) */ .kitify-category-menu__content .kitify-category-menu__content-menu ul.menu > li:hover > a svg, .kitify-category-menu__content .kitify-category-menu__content-menu ul.menu > li:hover > a i{color:#3C2B0F!important} .kitify-category-menu__content .kitify-category-menu__content-menu ul.menu > li.orita-mm-cta > a{ font-weight:700;border-top:0!important;margin-top:0!important;padding-top:12px!important} /* ---- the panel: full width, directly under the bar ---- */ .kitify-category-menu__content .kitify-category-menu__content-menu ul.menu > li.menu-item-has-children > ul.sub-menu{ position:absolute;top:100%;left:0;width:100%;margin:0;list-style:none; opacity:0;visibility:hidden;pointer-events:none; transition:opacity .12s ease,visibility .12s ease} .kitify-category-menu__content .kitify-category-menu__content-menu ul.menu > li.menu-item-has-children:hover > ul.sub-menu, .kitify-category-menu__content .kitify-category-menu__content-menu ul.menu > li.menu-item-has-children:focus-within > ul.sub-menu{ opacity:1;visibility:visible;pointer-events:auto} .kitify-category-menu .sub-menu{ background:#fff!important;border:0!important; box-shadow:0 26px 48px rgba(45,45,45,.14)!important; padding:34px 308px 52px 32px!important; columns:3;column-gap:44px;min-width:0!important;min-height:340px; max-height:calc(100vh - 250px);overflow-y:auto;overflow-x:hidden;box-sizing:border-box} /* ---- links (ASOS: plain, roomy line-height, no underline until hover) ---- */ .kitify-category-menu .sub-menu > li{ display:block;break-inside:avoid;float:none;width:auto;position:static!important; padding:0!important;margin:0 0 2px!important} .kitify-category-menu .sub-menu > li > a{ font-size:14px!important;color:#2D2D2D;font-weight:400;text-decoration:none; display:inline-block;line-height:1.85!important;padding:0!important} /* Dropdown item hover — a visible row tint plus a ring on the thumbnail, ASOS style. The previous hover only shifted #2D2D2D -> #3C2B0F, which reads as no hover at all. */ .kitify-category-menu .sub-menu > li:not(.orita-mm-label) > a{ padding:2px 7px!important;margin-left:-7px!important;border-radius:3px; transition:color .15s ease,background .15s ease} .kitify-category-menu .sub-menu > li:not(.orita-mm-label) > a:hover{ color:#3C2B0F!important;background:#F7F1EA!important;text-decoration:none!important} .kitify-category-menu .sub-menu > li.orita-mm-thumb > a:hover::before{ box-shadow:0 0 0 2px #3C2B0F} .kitify-category-menu .sub-menu > li > a:focus-visible{ background:#F7F1EA!important;outline:2px solid #3C2B0F;outline-offset:2px} /* ---- uppercase column headings ---- */ .kitify-category-menu .sub-menu > li.orita-mm-label{break-after:avoid;break-before:column;margin:0 0 14px!important} .kitify-category-menu .sub-menu > li.orita-mm-label:first-child{break-before:auto} .kitify-category-menu .kitify-category-menu__content-menu .sub-menu > li.orita-mm-label > a{ font-size:12.5px!important;letter-spacing:.04em!important;text-transform:uppercase!important; color:#2D2D2D!important;font-weight:700!important;line-height:1.4!important; pointer-events:none;cursor:default;text-decoration:none!important} /* leftover theme menu icons (some items still carry an inline SVG) — the ASOS layout has no icons, so hide them */ .kitify-category-menu .sub-menu .menu-item-icon{display:none!important} /* ---- circular thumbnails beside some links (ASOS's edit rows) ---- */ .kitify-category-menu .sub-menu > li.orita-mm-thumb > a{ display:flex!important;align-items:center;gap:13px;padding:4px 7px!important;margin-left:-7px!important} .kitify-category-menu .sub-menu > li.orita-mm-thumb > a::before{ content:""!important;width:44px!important;height:44px!important;flex:0 0 44px!important;border-radius:50%!important; background-size:cover;background-position:center;background-color:#F2E5DD} .kitify-category-menu .sub-menu > li.orita-mm-img-ankara > a::before{ background-image:url(https://www.shoporita.com/wp-content/uploads/2026/10/orita-men-african-print-shirt.jpg)} .kitify-category-menu .sub-menu > li.orita-mm-img-thrift > a::before{ background-image:url(https://www.shoporita.com/wp-content/uploads/2026/10/orita-thrift-preloved-folding.jpg)} .kitify-category-menu .sub-menu > li.orita-mm-img-designer > a::before{ background-image:url(https://www.shoporita.com/wp-content/uploads/2026/10/orita-women-blazer-editorial.jpg)} .kitify-category-menu .sub-menu > li.orita-mm-img-everyday > a::before{ background-image:url(https://www.shoporita.com/wp-content/uploads/2026/10/orita-women-cargo-streetwear.jpg)} .kitify-category-menu .sub-menu > li.orita-mm-img-bestsellers > a::before{ background-image:url(https://www.shoporita.com/wp-content/uploads/2026/10/orita-new-in-clothing-rail.jpg)} .kitify-category-menu .sub-menu > li.orita-mm-img-bags > a::before{ background-image:url(https://www.shoporita.com/wp-content/uploads/2026/10/orita-accessories-flatlay.jpg)} /* ---- portrait promo tile in the last column (ASOS's "NEW EDITS") ---- */ .kitify-category-menu .sub-menu::after{ content:"Turn your wardrobe into value"; position:absolute;top:34px;right:0;width:264px;height:300px;box-sizing:border-box; padding:16px;display:flex;align-items:flex-end; color:#fff;font-size:15px;font-weight:700;line-height:1.25;letter-spacing:.02em;text-transform:uppercase; background-image:linear-gradient(to top,rgba(45,45,45,.86),rgba(45,45,45,0)), url(https://www.shoporita.com/wp-content/uploads/2026/10/orita-hero-store-interior.jpg); background-size:cover;background-position:center} .kitify-category-menu .menu-item-1898 > .sub-menu::after{ background-image:linear-gradient(to top,rgba(45,45,45,.86),rgba(45,45,45,0)), url(https://www.shoporita.com/wp-content/uploads/2026/10/orita-women-floral-dress.jpg)} .kitify-category-menu .menu-item-1899 > .sub-menu::after{ background-image:linear-gradient(to top,rgba(45,45,45,.86),rgba(45,45,45,0)), url(https://www.shoporita.com/wp-content/uploads/2026/10/orita-men-streetwear-bucket-hat.jpg)} .kitify-category-menu .menu-item-1900 > .sub-menu::after{ background-image:linear-gradient(to top,rgba(45,45,45,.86),rgba(45,45,45,0)), url(https://www.shoporita.com/wp-content/uploads/2026/10/orita-thrift-preloved-folding.jpg)} /* ---- keyboard focus ---- */ .kitify-category-menu .sub-menu > li > a:focus-visible{outline:2px solid #3C2B0F;outline-offset:2px} @media(max-width:1200px){ .kitify-category-menu .sub-menu{columns:2;padding:30px 40px 44px!important} .kitify-category-menu .sub-menu::after{display:none}} /* ============================================================================ SECTION 11 — FULL-BLEED HERO, FLUSH UNDER THE HEADER (page 1868) The theme wraps page content in `.nova-container` (margin:0 35px, max-width 1370) and gives `.site-content` top padding, so the hero is inset on both sides with an 89px gap above it. ASOS runs its hero edge to edge, directly under the header. The theme's only width control is the global `site_width` option (which would reflow every page, and the MCP has no option-write tool), so this is scoped to the front page. The hero breaks out with 100vw and cancels the 35px inset with `calc(50% - 50vw)`, while its CONTENT stays on the site grid via the same gutter the rest of the page uses. ============================================================================ */ /* padding-top:0 kills the theme's 2.7rem (48.6px) page padding. A further ~40px still separates the header from the content: it sits between `.cell.small-12` and `.site-content` and reports as neither margin nor padding (the theme's Foundation grid wrapper). Cancelled on the hero itself, which is what must sit flush under the header. Verified: gap 89px -> 0. */ .page-id-1868 .site-content{padding-top:0!important} .page-id-1868 .orita-hero{ width:100vw!important;max-width:100vw!important; margin-top:-40px!important; margin-left:calc(50% - 50vw)!important; margin-right:calc(50% - 50vw)!important; padding-left:max(40px,calc((100vw - 1290px) / 2))!important; padding-right:max(40px,calc((100vw - 1290px) / 2))!important} /* ---- hero height: REVERTED to Elementor's own min_height (470px) ---------------- A full-viewport hero (min-height:calc(100svh - var(--orita-header-h))) was built on the owner's ASOS reference and then rejected as too tall — "reduce the hero, maybe revert it to what it was". So the hero keeps only the full-bleed/flush-under-header treatment above; its height comes from the container's Elementor min_height again (470 desktop / 385 tablet). If a middle ground is ever wanted, add ONE rule here, e.g. .page-id-1868 .orita-hero{min-height:640px!important} Do not re-introduce the viewport-fill version unless asked. */ /* ============================================================================ SECTION 12 — FULL-BLEED EDGES + STICKY LOGO ROW 100vw includes the vertical scrollbar; the body's content box does not. So a 100vw band (the hero) ran 7-15px wider than a 100%-wide band (the header), which left a light strip beside the header and pushed the page into a horizontal scroll. The clip must be scoped to the STOREFRONT: a global html/body{overflow-x:clip} makes the other axis compute to `auto`, turning the body into a scroll container — that broke the Dokan vendor dashboard, whose sidebar then rendered with its menu items missing so the seller could not find how to add a product. ============================================================================ */ body.home,body.page-id-1868,body.archive,body.single-product,body.error404,body.search, body.tax-product_cat,body.post-type-archive-product{overflow-x:clip} html:has(body.home),html:has(body.page-id-1868),html:has(body.archive),html:has(body.single-product), html:has(body.error404),html:has(body.search){overflow-x:clip} .page-id-1868 .orita-hero, .elementor-element-613ba9e{ width:100vw!important;max-width:100vw!important; margin-left:calc(50% - 50vw)!important; margin-right:calc(50% - 50vw)!important} /* The logo/search/icons row must NOT be sticky. Elementor's `sticky: top` made it position:fixed, and Elementor also rendered a duplicate spacer copy of the row; the category bar below it stays in flow, so on scroll the bar — z-index:70 — slid up ACROSS the fixed row (measured at scrollY 80: row 0-100, bar 40-78 = a real overlap). The template setting is removed by header_unstick.py; this rule is the CSS-side guarantee and also neutralises Elementor's own sticky classes if the setting ever comes back. In flow the row still needs the 100vw breakout: without it a 100vw box starts at the inner container's left edge (250px) and pushes the logo to x=535. Scoped to >=1025px, where the sticky setting applied (desktop / laptop / tablet_extra); the theme's own mobile header is left alone. */ @media(min-width:1025px){ body:not(.elementor-editor-active) .elementor-element-2c9cb39d, body:not(.elementor-editor-active) .elementor-element-2c9cb39d.elementor-sticky--active, body:not(.elementor-editor-active) .elementor-element-2c9cb39d.elementor-sticky--effects{ position:relative!important;top:auto!important;z-index:auto!important; width:100vw!important;max-width:100vw!important; margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important; box-shadow:none!important} } /* ============================================================================ SECTION 13 — WIDE-SCREEN HEADER ALIGNMENT + HEADER CONTRAST Above 1599px the theme gives the header rows ZERO padding, so on a 1x 1940px monitor the logo sits flush at x=0 while the page container (.nova-container, max-width 1370) is centred ~278px in. Below 1600px the theme pads the rows itself, which is why a 2x laptop (~1280 logical) already looked right and is deliberately untouched by this rule. Verified at 1940px: without it logo x=0 / cat items x=0; with it logo x=285 and cat items x=278 (aligned). Reverting it re-breaks the monitor layout. ============================================================================ */ @media(min-width:1600px){ .elementor-element-2c9cb39d{ /* logo / search / icons row — full-bleed 100vw */ padding-left:max(40px,calc((100vw - 1370px) / 2))!important; padding-right:max(40px,calc((100vw - 1370px) / 2))!important} /* The category bar is NOT full-bleed (Elementor's .e-con-inner caps it at 1440px), so it only needs the constant 35px that box already gives it — giving it the container offset too pushed its items 250px right of the logo. */ .elementor-element-7f3a9c1{ padding-left:35px!important;padding-right:35px!important} } /* Header contrast: Checked at 1940px and 2560px: the theme ALREADY insets the header inside a centred box, so the logo and the category items both sit at x=278-285 and are aligned. A padding rule here was inert (A/B measured identical geometry with it forced to 0), and the earlier "logo flush at x=0" reading came from a stale cached page. Only the contrast work below is needed. ============================================================================ */ /* Header contrast: the search box sits on the brown header, but its placeholder, the "All Categories" label and the icons were dark greys (#888 / #2D2D2D) which read as almost invisible. The placeholder + input + submit colours come from the Kitify controls; these are the parts with no control (label + icon fills). */ .kitify-search-box__categories-label, .kitify-search-box__categories-label span, .kitify-search-box__categories-title{color:#CFC3B4!important} .kitify-search-box .kitify-search-box__categories-label svg, .kitify-search-box .kitify-search-box__categories-label i{color:#CFC3B4!important;fill:currentColor!important} .elementor-element-2d551598 svg, .elementor-element-2d551598 .vendora-svg-icon, .elementor-element-2d551598 i, .elementor-element-2d551598 a{color:#FFFFFF!important;fill:currentColor!important} /* ============================================================================ SECTION 14 — SEARCH BAR: THE CATEGORIES DROPDOWN MUST SIT ABOVE THE CATEGORY BAR The "All Categories" panel is `.kitify-search-box__categories`, position:absolute with z-index:9999 — and it STILL lost to the category bar below it. z-index only competes inside its own stacking context: the panel lives in the search column `.elementor-element-54af443e`, which is position:relative + z-index:9 and therefore creates a stacking context, while the bar carries z-index:70 in the band's context. 70 > 9, so the bar painted straight across the open panel — verified with document.elementFromPoint at the collision point, which returned the bar's nav link instead of the panel. Lifting the search column above the bar fixes it without touching the panel's own z-index. (The search column is only 50px tall inside the header row, so raising it cannot cover anything else; the bar's Z stays under it by design.) ============================================================================ */ .elementor-element-54af443e{z-index:90!important} /* Seller anonymity — the vendor identity must never reach a buyer. The theme prints it in the loop card (div.vendor-name-meta) and Dokan prints it again on the single product page. Hidden by SCOPE so the legitimately-public store page (/store//) keeps its masked store name, which is the one place an anonymous seller identity may show. */ .product-item .vendor-name-meta, .product-item__description--before-title, li.product .vendor-name, .single-product .vendor-name-meta, .single-product .vendor-name, .single-product .vendor-name-text, .single-product .dokan-vendor-name, .single-product .dokan-seller-name, .single-product .sold-by, .single-product [class*="sold-by"]{display:none!important} /* ============================================================================ SECTION 15 — CATEGORY / SHOP ARCHIVES: THE PRODUCT GRID + SELLER ANONYMITY Two defects, both measured on /product-category/for-women/: 1. Every card rendered at 1/3 of its own grid column. `ul.products` IS a 4-column grid (207.8px tracks), but `li.product_item` also carries the theme's block-grid sizing — here `max-width:33.3333%` — and a percentage max-width on a GRID ITEM resolves against the grid AREA, so each card computed to 69px inside a 208px column. Titles then wrapped one word per line. Neutralise the block-grid width, keep the grid. 2. The theme prints the raw vendor username + avatar under every card (`div.vendor-name-meta > a > img.avatar + span.vendor-name` = the raw account username). That is the one thing Orita must never show: seller identity is never revealed to buyers. Hidden here rather than deleted, so a later card-template override can replace it with a masked store name without hunting for it. ============================================================================ */ /* Archive / shop / store grids ONLY. Kitify's product CAROUSEL on the product page reuses these exact class names, but its layout belongs to Slick — forcing a grid there blanked the "You may also like" carousel (the arrows rendered over an empty ~1300px band). */ body.archive ul.products.kitify-products__list, body.tax-product_cat ul.products.kitify-products__list, body.post-type-archive-product ul.products.kitify-products__list, body.page ul.products.kitify-products__list, body.search ul.products.kitify-products__list, body.dokan-store ul.products.kitify-products__list, body.archive ul.products.products-grid, body.tax-product_cat ul.products.products-grid, body.page ul.products.products-grid, body.search ul.products.products-grid{ display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:36px 16px!important;margin:0!important;clear:both} body.archive ul.products > li.product_item, body.archive ul.products > li.product_grid_item, body.tax-product_cat ul.products > li.product_item, body.tax-product_cat ul.products > li.product_grid_item, body.post-type-archive-product ul.products > li.product_item, body.post-type-archive-product ul.products > li.product_grid_item, body.page ul.products > li.product_item, body.page ul.products > li.product_grid_item, body.search ul.products > li.product_item, body.search ul.products > li.product_grid_item, body.dokan-store ul.products > li.product_item, body.dokan-store ul.products > li.product_grid_item{ width:100%!important;max-width:100%!important;min-width:0!important; margin:0!important;float:none!important;clear:none!important} .product-item,.product-item__thumbnail,.product-item__thumbnail-placeholder, .product-item__thumbnail-placeholder>a{display:block!important;width:100%!important;max-width:100%!important} .product-item img{width:100%!important;max-width:100%!important;height:auto!important; aspect-ratio:3/4;object-fit:cover} /* one-of-one resale: no seller identity, no review depth, no stock counters */ .product-item .vendor-name-meta, .product-item .product-item__description--before-title{display:none!important} .product-item .star-rating,.product-item .rating,.product-item .nova-rating{display:none!important} .product-item .woocommerce-loop-product__title, .product-item .product-item__title{ font-size:12.5px!important;line-height:1.4!important;margin:10px 0 3px!important;min-height:2.8em} .product-item .price{font-size:13.5px!important;font-weight:700!important;color:#2D2D2D} @media(max-width:1024px){ body.archive ul.products.kitify-products__list,body.page ul.products.kitify-products__list, body.tax-product_cat ul.products.kitify-products__list,body.search ul.products.kitify-products__list, body.dokan-store ul.products.kitify-products__list, body.archive ul.products.products-grid,body.page ul.products.products-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}} @media(max-width:767px){ body.archive ul.products.kitify-products__list,body.page ul.products.kitify-products__list, body.tax-product_cat ul.products.kitify-products__list,body.search ul.products.kitify-products__list, body.dokan-store ul.products.kitify-products__list, body.archive ul.products.products-grid,body.page ul.products.products-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:26px 12px!important}} /* ---- SECTION 15b: the card itself — one left edge, stable row heights, quiet chrome ---- The theme's card put a bordered 57x37 "Add to Wishlist" box beside the title, which stole 67px of the 203px card and made every title wrap raggedly; the title, price and hover bar then started at three different heights. Everything below is about ONE left edge and rows that do not move between cards. Markup: .product-item > .product-item__thumbnail (img 3:4) + .product-item__description (--before-title [vendor, hidden] / --info > .info-left>a.title + .info-right>wishlist / --price > span.price) + .product-item__actions (absolute hover bar). */ ul.products .product-item{position:relative} .product-item__thumbnail{border-radius:2px;overflow:hidden;background:#F2E5DD} .product-item__thumbnail img{transition:transform .55s cubic-bezier(.2,.7,.3,1)} .product-item:hover .product-item__thumbnail img{transform:scale(1.035)} /* scarcity strip — the same label the homepage grid uses, so both read as one store */ .product-item__thumbnail::after{ content:"Only 1 available";position:absolute;left:8px;bottom:8px;z-index:3; background:rgba(45,45,45,.82);color:#fff;font-size:10px;font-weight:600; letter-spacing:.07em;text-transform:uppercase;padding:4px 8px;border-radius:2px;pointer-events:none} /* the wishlist: a quiet 18px icon, not a bordered box beside the title. The theme declares this button with a SIX-class selector (ul.products .product .product-item .product-item__description .product-item__description--info .info-right .vendora-button--wishlist) and a !important width/border — so an equally long selector is required here, not just !important. */ ul.products .product .product-item .product-item__description .product-item__description--info .info-right{ width:auto!important;min-width:0!important;flex:0 0 auto!important; /* the theme centres this 43px-tall box against the title row, so the icon floated down beside the price. Anchor the box to the row's top instead — the heart then sits on the title's first line, right-aligned, and the row keeps ONE left edge. */ align-self:flex-start!important;height:auto!important; margin:0!important;padding:0!important;position:static!important} ul.products .product .product-item .product-item__description .product-item__description--info .info-right .wcboost-wishlist-button, ul.products .product .product-item .product-item__description .product-item__description--info .info-right .vendora-button--wishlist, ul.products .product .product-item .product-item__description .product-item__description--info .info-right .button{ width:20px!important;min-width:20px!important;max-width:20px!important;height:20px!important; padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important; display:flex!important;align-items:center;justify-content:center;color:#B9B2AA!important} ul.products .product .product-item .product-item__description .product-item__description--info .info-right .wcboost-wishlist-button:hover{ color:#3C2B0F!important;background:transparent!important} .product-item__description--info .wcboost-wishlist-button .vendora-button__text, .product-item__description--info .wcboost-wishlist-button .add-to-wishlist-button__text{display:none!important} .product-item__description--info .wcboost-wishlist-button svg{width:17px;height:17px;fill:currentColor} .product-item__description{padding-top:0} .product-item__description--info{display:flex;align-items:flex-start;gap:8px;margin-top:10px} .product-item__description--info .info-left{flex:1 1 auto;min-width:0} .product-item__description--info .info-right{flex:0 0 auto;width:auto;margin:1px 0 0} .product-item__description--info .title, .product-item .woocommerce-loop-product__title{ display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; font-size:12.5px;line-height:1.4;color:#2D2D2D;text-decoration:none;min-height:2.8em} .product-item__description--info .title:hover{color:#3C2B0F} .product-item__description--info .wcboost-wishlist-button, .product-item__description--info .wcboost-wishlist-button--button{ width:20px!important;height:20px!important;min-width:0!important;padding:0!important; border:0!important;background:transparent!important;box-shadow:none!important; display:flex;align-items:center;justify-content:center;color:#B9B2AA} .product-item__description--info .wcboost-wishlist-button:hover{color:#3C2B0F;background:transparent!important} .product-item__description--info .wcboost-wishlist-button .vendora-button__text, .product-item__description--info .wcboost-wishlist-button .add-to-wishlist-button__text{display:none!important} .product-item__description--info .wcboost-wishlist-button svg{width:17px;height:17px;fill:currentColor} /* price row: sale price bold, original struck and muted, all on the card's left edge */ .product-item__description--price{display:flex;align-items:baseline;gap:8px;margin-top:2px} .product-item__description--price .price{font-size:13.5px;font-weight:700;color:#2D2D2D} .product-item__description--price .price del{order:2;color:#B9B2AA;font-weight:400;font-size:11.5px} .product-item__description--price .price ins{text-decoration:none;font-weight:700;color:#3C2B0F} .product-item__rating,.product-item .star-rating{display:none!important} /* the wishlist icon needs a light disc so it reads on any photo */ ul.products .product .product-item .product-item__description .product-item__description--info .info-right .wcboost-wishlist-button{ background:rgba(255,255,255,.94)!important;border-radius:50%!important; box-shadow:0 1px 5px rgba(45,45,45,.16)!important;width:26px!important;min-width:26px!important; max-width:26px!important;height:26px!important;color:#5A544E!important} /* actions: quick view on hover only, pinned to the photo's bottom-right */ .product-item__thumbnail .product-item__description--top-actions{ top:auto!important;bottom:10px!important;right:10px!important;left:auto!important; opacity:0;transition:opacity .18s ease} .product-item:hover .product-item__thumbnail .product-item__description--top-actions{opacity:1} .product-item:focus-within .product-item__thumbnail .product-item__description--top-actions{opacity:1} .product-item__description--top-actions .nova_product_quick_view_btn{ width:32px;height:32px;border:0;border-radius:50%;background:rgba(255,255,255,.95); display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(45,45,45,.14)} .product-item__actions{background:rgba(255,255,255,.97);box-shadow:0 -1px 0 #E8DACE} .product-item__actions .button{ border-radius:2px;padding:10px 16px;font-size:11px;font-weight:700;letter-spacing:.09em; text-transform:uppercase;background:#3C2B0F!important;color:#fff!important} .product-item__actions .button:hover{background:#FDBF30!important;color:#2D2D2D!important} .product-item__actions .button.loading{opacity:.75} /* ============================================================================ SECTION 15c — PRODUCT CARD v2 (editorial) Composed the way high-fashion retailers treat a grid card (SSENSE / COS / Net-a-Porter): the photograph carries the card, type is small and precise, price is quiet, and nothing shouts louder than the garment itself. Three deliberate moves: · a condition eyebrow above the title (the category class is already on the
  • , so this needs no template change) — buyers scan condition first; · the scarcity strip drops from a black bar to a hairline white chip, and speaks in the marketplace's own language: "One of one"; · the wishlist and quick-view become quiet 34px circles on the photograph, which appear on hover instead of competing with the title at rest. ============================================================================ */ /* grid rhythm — generous vertical gutter so rows read as separate lines of a spread. Scoped like the grid rules above so the product-page carousel keeps Slick's own layout. */ body.archive ul.products.kitify-products__list, body.tax-product_cat ul.products.kitify-products__list, body.page ul.products.kitify-products__list, body.search ul.products.kitify-products__list, body.dokan-store ul.products.kitify-products__list{column-gap:20px!important;row-gap:42px!important} li.product_item{margin:0!important} .product-item{display:flex;flex-direction:column;height:100%} /* the frame: sharp edges, one shared backdrop, 3:4 like an editorial crop */ .product-item__thumbnail{position:relative;aspect-ratio:3/4;border-radius:0!important;background:#F4F1EE!important} .product-item__thumbnail img{width:100%;height:100%;object-fit:cover;display:block} .product-item:hover .product-item__thumbnail img{transform:scale(1.04)} /* condition eyebrow — the first thing a thrift buyer reads */ .product-item__description--info .info-left::before{ display:block;font-size:9.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase; color:#9A9187;margin:0 0 5px} li.product_cat-new-with-tags .product-item__description--info .info-left::before{content:"New with tags"} li.product_cat-new-without-tags .product-item__description--info .info-left::before{content:"New without tags"} li.product_cat-pre-loved-like-new .product-item__description--info .info-left::before{content:"Pre-loved · like new"} li.product_cat-pre-loved-good .product-item__description--info .info-left::before{content:"Pre-loved"} /* "New" flag on the photograph, only for retail-new stock */ li.product_cat-new-with-tags .product-item__thumbnail::before, li.product_cat-new-without-tags .product-item__thumbnail::before{ content:"New";display:block;position:absolute;top:0;left:0;z-index:3; background:#fff;color:#23201D;font-size:9px;font-weight:600;letter-spacing:.14em; text-transform:uppercase;padding:5px 9px} /* scarcity, quieted to a hairline chip in the marketplace's own words */ .product-item__thumbnail::after{ content:"One of one"!important;left:8px!important;bottom:8px!important; background:rgba(255,255,255,.94)!important;color:#6B635B!important; font-size:9px!important;font-weight:500!important;letter-spacing:.1em!important; padding:3px 7px!important;border-radius:0!important;text-transform:uppercase!important} /* wishlist + quick view: quiet circles on the photograph, revealed on hover. The quick-view anchor already sits inside the thumbnail; the wishlist stays in the text row (its markup lives there) but reads as a 18px ghost, never a box. */ .product-item__description--top-actions{ position:absolute!important;right:8px!important;bottom:8px!important;z-index:4!important; opacity:0;transform:translateY(4px);transition:opacity .25s ease,transform .25s ease} .product-item:hover .product-item__description--top-actions{opacity:1;transform:none} .product-item__description--top-actions a{ width:34px!important;height:34px!important;border-radius:50%!important;background:#fff!important; display:flex!important;align-items:center!important;justify-content:center!important; box-shadow:0 1px 8px rgba(0,0,0,.12)!important;color:#23201D!important} .product-item__description--top-actions a svg{width:16px;height:16px} /* the text block: one left edge, a fixed 2-line title so every row aligns */ .product-item__description{padding:11px 0 0!important} .product-item__description--info{margin-top:0!important;align-items:flex-start!important;gap:10px!important} .product-item__description--info .title, .product-item .woocommerce-loop-product__title{ font-size:13px!important;font-weight:450!important;line-height:1.42!important; color:#23201D!important;letter-spacing:-.005em;min-height:2.84em!important; text-decoration:none;transition:color .2s ease} .product-item__description--info .title:hover{color:#3C2B0F!important} .product-item__description--info .wcboost-wishlist-button, .product-item__description--info .wcboost-wishlist-button--button{ width:18px!important;height:18px!important;color:#C6BFB7!important;margin-top:2px!important} .product-item__description--info .wcboost-wishlist-button:hover{color:#3C2B0F!important} .product-item__description--info .wcboost-wishlist-button svg{width:16px!important;height:16px!important} /* price: the only bold voice on the card, and it stays quiet about it */ .product-item__description--price{ margin-top:7px!important;font-size:13.5px!important;font-weight:600!important; color:#111!important;letter-spacing:.005em!important;gap:7px!important} .product-item__description--price del,.product-item__description--price del .amount{ font-size:12px!important;font-weight:400!important;color:#A8A29B!important} .product-item__description--price ins{text-decoration:none!important} /* phone: same language, tighter gutter */ @media(max-width:767px){ body.archive ul.products.kitify-products__list,body.page ul.products.kitify-products__list, body.tax-product_cat ul.products.kitify-products__list,body.search ul.products.kitify-products__list, body.dokan-store ul.products.kitify-products__list{column-gap:12px!important;row-gap:30px!important} .product-item__description--info .title{font-size:12.5px!important} .product-item__description--price{font-size:13px!important}} /* ============================================================================ SECTION 15d — the product-page carousel is Swiper, not a grid Measured cause of the blank "You may also like" band: the widget's