.elementor-36408 .elementor-element.elementor-element-decf657{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-36408 .elementor-element.elementor-element-307b02a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-36408 .elementor-element.elementor-element-ea430d4{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-36408 .elementor-element.elementor-element-fcd9385{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-36408 .elementor-element.elementor-element-f8dcd17{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-36408 .elementor-element.elementor-element-9661926{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-36408 .elementor-element.elementor-element-09cc81a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS *//* ========================================================= OMINIA HOME HERO SLIDER Elementor / Woodmart Resistant ========================================================= */ /* --------------------------------------------------------- COMPONENT ISOLATION --------------------------------------------------------- */ html body .oh-hero-bleed, html body .elementor .oh-hero-bleed { position: relative !important; left: 50% !important; display: block !important; width: 100vw !important; max-width: 100vw !important; margin: 0 !important; padding: 0 !important; transform: translateX(-50%) !important; overflow: hidden !important; overflow: clip !important; box-sizing: border-box !important; } html body .oh-hero, html body .elementor .oh-hero { --oh-ease: cubic-bezier(.22, .61, .36, 1); --oh-transition: 850ms; --oh-autoplay-duration: 6500ms; position: relative !important; display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: #f3eee7 !important; overflow: hidden !important; isolation: isolate; box-sizing: border-box !important; } /* --------------------------------------------------------- FORCE BOX SIZING --------------------------------------------------------- */ html body .oh-hero *, html body .oh-hero *::before, html body .oh-hero *::after { box-sizing: border-box; } /* --------------------------------------------------------- VIEWPORT --------------------------------------------------------- */ html body .oh-hero .oh-hero__viewport { position: relative !important; display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; touch-action: pan-y; } /* --------------------------------------------------------- TRACK --------------------------------------------------------- */ html body .oh-hero .oh-hero__track { position: relative !important; display: flex !important; flex-wrap: nowrap !important; direction: ltr !important; width: 100% !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; transform: translate3d(0, 0, 0); transition: transform var(--oh-transition) var(--oh-ease) !important; will-change: transform; } /* --------------------------------------------------------- SLIDE --------------------------------------------------------- */ html body .oh-hero .oh-hero__slide { position: relative !important; display: block !important; flex: 0 0 100% !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; } /* --------------------------------------------------------- LINK RESET --------------------------------------------------------- */ html body .oh-hero a.oh-hero__link, html body .oh-hero a.oh-hero__link:hover, html body .oh-hero a.oh-hero__link:focus, html body .oh-hero a.oh-hero__link:active { position: relative !important; display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: inherit !important; text-decoration: none !important; box-shadow: none !important; outline-offset: -3px; -webkit-tap-highlight-color: transparent; } /* --------------------------------------------------------- PICTURE --------------------------------------------------------- */ html body .oh-hero picture.oh-hero__media { position: relative !important; display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; aspect-ratio: 1000 / 365; background: #f3eee7 !important; overflow: hidden !important; } /* --------------------------------------------------------- IMAGE RESET --------------------------------------------------------- */ html body .oh-hero img.oh-hero__image { display: block !important; width: 100% !important; max-width: none !important; height: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; object-fit: cover !important; box-shadow: none !important; transform: scale(1.008); transition: transform var(--oh-autoplay-duration) cubic-bezier(.18, .7, .22, 1) !important; user-select: none; -webkit-user-drag: none; } html body .oh-hero .oh-hero__slide.is-active img.oh-hero__image { transform: scale(1); } /* ========================================================= ARROWS Strong reset against Woodmart / Elementor buttons ========================================================= */ html body .oh-hero button.oh-hero__arrow, html body .elementor .oh-hero button.oh-hero__arrow { all: unset; position: absolute !important; z-index: 30 !important; top: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; width: clamp(42px, 3.2vw, 52px) !important; min-width: 0 !important; max-width: none !important; height: clamp(42px, 3.2vw, 52px) !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 1px solid rgba(88, 67, 44, 0.16) !important; border-radius: 999px !important; background: rgba(255,255,255,.92) !important; color: #493826 !important; box-shadow: 0 8px 28px rgba(52,39,25,.12) !important; font-size: 0 !important; line-height: 1 !important; text-align: center !important; text-decoration: none !important; text-transform: none !important; cursor: pointer !important; opacity: .92 !important; transform: translateY(-50%) !important; transition: opacity 220ms ease, transform 220ms ease, background-color 220ms ease, box-shadow 220ms ease !important; appearance: none !important; -webkit-appearance: none !important; -webkit-tap-highlight-color: transparent; } /* Kill Woodmart pseudo elements */ html body .oh-hero button.oh-hero__arrow::before, html body .oh-hero button.oh-hero__arrow::after { content: none !important; display: none !important; } /* --------------------------------------------------------- ARROW SVG --------------------------------------------------------- */ html body .oh-hero button.oh-hero__arrow svg { display: block !important; width: 21px !important; height: 21px !important; margin: 0 !important; padding: 0 !important; fill: none !important; color: currentColor !important; pointer-events: none !important; transition: transform 220ms ease !important; } html body .oh-hero button.oh-hero__arrow svg path { fill: none !important; stroke: currentColor !important; stroke-width: 1.6 !important; vector-effect: non-scaling-stroke; } /* --------------------------------------------------------- POSITIONS --------------------------------------------------------- */ html body .oh-hero button.oh-hero__arrow--prev { left: auto !important; right: auto !important; inset-inline-start: clamp(14px, 2vw, 32px) !important; } html body .oh-hero button.oh-hero__arrow--next { left: auto !important; right: auto !important; inset-inline-end: clamp(14px, 2vw, 32px) !important; } /* RTL icon direction */ html body .oh-hero[dir="rtl"] button.oh-hero__arrow svg { transform: rotate(180deg) !important; } /* --------------------------------------------------------- HOVER --------------------------------------------------------- */ @media (hover:hover) { html body .oh-hero button.oh-hero__arrow:hover { background: #fff !important; color: #302519 !important; opacity: 1 !important; box-shadow: 0 12px 38px rgba(52,39,25,.18) !important; } html body .oh-hero button.oh-hero__arrow--prev:hover { transform: translateY(-50%) translateX(-3px) !important; } html body .oh-hero button.oh-hero__arrow--next:hover { transform: translateY(-50%) translateX(3px) !important; } html body .oh-hero[dir="rtl"] button.oh-hero__arrow--prev:hover { transform: translateY(-50%) translateX(3px) !important; } html body .oh-hero[dir="rtl"] button.oh-hero__arrow--next:hover { transform: translateY(-50%) translateX(-3px) !important; } } /* --------------------------------------------------------- FOCUS --------------------------------------------------------- */ html body .oh-hero button.oh-hero__arrow:focus-visible { outline: 2px solid #fff !important; outline-offset: 3px !important; } /* ========================================================= PAGINATION WRAPPER ========================================================= */ html body .oh-hero .oh-hero__pagination { position: absolute !important; z-index: 35 !important; left: 50% !important; right: auto !important; bottom: clamp(15px, 1.7vw, 26px) !important; display: flex !important; align-items: center !important; justify-content: center !important; width: auto !important; gap: 7px !important; margin: 0 !important; padding: 8px 10px !important; border: 1px solid rgba(255,255,255,.40) !important; border-radius: 999px !important; background: rgba(42,31,22,.34) !important; box-shadow: 0 5px 20px rgba(0,0,0,.08) !important; transform: translateX(-50%) !important; } /* ========================================================= DOT RESET ========================================================= */ html body .oh-hero button.oh-hero__dot, html body .elementor .oh-hero button.oh-hero__dot { all: unset; display: block !important; flex: 0 0 auto !important; width: 7px !important; min-width: 0 !important; height: 7px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; background: rgba(255,255,255,.58) !important; box-shadow: none !important; cursor: pointer !important; opacity: 1 !important; transition: width 350ms var(--oh-ease), background-color 250ms ease, opacity 250ms ease !important; appearance: none !important; -webkit-appearance: none !important; } html body .oh-hero button.oh-hero__dot::before, html body .oh-hero button.oh-hero__dot::after { content: none !important; display: none !important; } html body .oh-hero button.oh-hero__dot.is-active { width: 24px !important; background: #fff !important; } html body .oh-hero button.oh-hero__dot:hover { background: rgba(255,255,255,.88) !important; } /* ========================================================= PROGRESS ========================================================= */ html body .oh-hero .oh-hero__progress { position: absolute !important; z-index: 40 !important; left: 0 !important; right: auto !important; bottom: 0 !important; display: block !important; width: 100% !important; height: 2px !important; min-height: 2px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: rgba(255,255,255,.18) !important; overflow: hidden !important; pointer-events: none !important; } html body .oh-hero .oh-hero__progress > span.oh-hero__progress-bar { position: absolute !important; top: 0 !important; left: 0 !important; display: block !important; width: 0 !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: rgba(255,255,255,.95) !important; transform: none !important; } html body .oh-hero.is-playing .oh-hero__progress > span.oh-hero__progress-bar { animation: ohHeroProgress var(--oh-autoplay-duration) linear forwards !important; } @keyframes ohHeroProgress { from { width: 0; } to { width: 100%; } } /* ========================================================= TABLET ========================================================= */ @media (max-width:1024px) { html body .oh-hero button.oh-hero__arrow { width: 42px !important; height: 42px !important; } html body .oh-hero button.oh-hero__arrow svg { width: 19px !important; height: 19px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px) { html body .oh-hero picture.oh-hero__media { aspect-ratio: 1000 / 365; } html body .oh-hero .oh-hero__slide.has-mobile picture.oh-hero__media { aspect-ratio: var(--oh-mobile-ratio, 4 / 5) !important; } html body .oh-hero .oh-hero__slide.has-mobile img.oh-hero__image { object-fit: cover !important; } html body .oh-hero button.oh-hero__arrow { display: none !important; } html body .oh-hero .oh-hero__pagination { bottom: 9px !important; gap: 6px !important; padding: 6px 8px !important; } html body .oh-hero button.oh-hero__dot { width: 6px !important; height: 6px !important; } html body .oh-hero button.oh-hero__dot.is-active { width: 20px !important; } html body .oh-hero img.oh-hero__image, html body .oh-hero .oh-hero__slide.is-active img.oh-hero__image { transform: none !important; transition: none !important; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion:reduce) { html body .oh-hero .oh-hero__track, html body .oh-hero img.oh-hero__image, html body .oh-hero button.oh-hero__arrow, html body .oh-hero button.oh-hero__dot { transition: none !important; animation: none !important; } html body .oh-hero img.oh-hero__image { transform: none !important; } html body .oh-hero .oh-hero__progress { display: none !important; } } /* ========================================================= OMINIA HOME TOP CATEGORIES Luxury Editorial Collection Grid ========================================================= */ /* --------------------------------------------------------- SECTION --------------------------------------------------------- */ html body .oh-categories, html body .elementor .oh-categories { --oh-cat-bg: #f7f3ec; --oh-cat-paper: #fffdf9; --oh-cat-ink: #241d17; --oh-cat-muted: #746a60; --oh-cat-gold: #a88755; --oh-cat-gold-soft: #c9ad7e; --oh-cat-border: rgba(97, 73, 44, .15); --oh-cat-ease: cubic-bezier(.22, .61, .36, 1); position: relative !important; display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: clamp(72px, 8vw, 130px) 0 clamp(78px, 8vw, 132px) !important; background: var(--oh-cat-bg) !important; color: var(--oh-cat-ink) !important; overflow: hidden !important; isolation: isolate; box-sizing: border-box !important; } html body .oh-categories *, html body .oh-categories *::before, html body .oh-categories *::after { box-sizing: border-box; } /* --------------------------------------------------------- SOFT AMBIENT BACKGROUND --------------------------------------------------------- */ html body .oh-categories .oh-categories__ambient { position: absolute !important; z-index: -1 !important; top: -20% !important; left: 50% !important; width: min(1000px, 90vw) !important; aspect-ratio: 1 !important; border-radius: 50% !important; background: radial-gradient( circle, rgba(195, 163, 112, .12) 0%, rgba(195, 163, 112, .045) 34%, rgba(195, 163, 112, 0) 70% ) !important; transform: translateX(-50%) !important; pointer-events: none !important; } /* --------------------------------------------------------- CONTAINER --------------------------------------------------------- */ html body .oh-categories .oh-categories__container { position: relative !important; width: min(1440px, calc(100% - 64px)) !important; max-width: 1440px !important; margin: 0 auto !important; padding: 0 !important; } /* ========================================================= HEADER ========================================================= */ html body .oh-categories .oh-categories__header { position: relative !important; width: min(760px, 100%) !important; margin: 0 auto clamp(48px, 5vw, 76px) !important; padding: 0 !important; text-align: center !important; opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity 850ms var(--oh-cat-ease), transform 850ms var(--oh-cat-ease); } html body .oh-categories .oh-categories__header.is-visible { opacity: 1; transform: translate3d(0, 0, 0); } /* --------------------------------------------------------- EYEBROW --------------------------------------------------------- */ html body .oh-categories .oh-categories__eyebrow { display: flex !important; align-items: center !important; justify-content: center !important; gap: 13px !important; width: 100% !important; margin: 0 0 17px !important; padding: 0 !important; } html body .oh-categories .oh-categories__eyebrow-line { display: block !important; width: 34px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; background: linear-gradient( 90deg, transparent, var(--oh-cat-gold) ) !important; } html body .oh-categories .oh-categories__eyebrow-line:last-child { background: linear-gradient( 90deg, var(--oh-cat-gold), transparent ) !important; } html body .oh-categories .oh-categories__eyebrow-text { display: inline-block !important; margin: 0 !important; padding: 0 !important; color: var(--oh-cat-gold) !important; font-size: clamp(10px, .8vw, 12px) !important; font-weight: 600 !important; line-height: 1.5 !important; letter-spacing: .22em !important; text-transform: uppercase !important; } /* * Arabic needs less letter spacing */ html body .oh-categories[dir="rtl"] .oh-categories__eyebrow-text { letter-spacing: .03em !important; } /* --------------------------------------------------------- H2 --------------------------------------------------------- */ html body .oh-categories h2.oh-categories__title { display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; color: var(--oh-cat-ink) !important; background: transparent !important; font-size: clamp(34px, 4vw, 58px) !important; font-weight: 400 !important; line-height: 1.08 !important; letter-spacing: -.035em !important; text-align: center !important; text-transform: none !important; text-shadow: none !important; } html body .oh-categories[dir="rtl"] h2.oh-categories__title { letter-spacing: 0 !important; } /* --------------------------------------------------------- DESCRIPTION --------------------------------------------------------- */ html body .oh-categories p.oh-categories__description { width: min(660px, 100%) !important; margin: 20px auto 0 !important; padding: 0 !important; color: var(--oh-cat-muted) !important; font-size: clamp(14px, 1.2vw, 16px) !important; font-weight: 400 !important; line-height: 1.8 !important; text-align: center !important; } /* ========================================================= GRID ========================================================= */ html body .oh-categories .oh-categories__grid { position: relative !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: clamp(16px, 1.6vw, 26px) !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= CARD ========================================================= */ html body .oh-categories article.oh-category-card { position: relative !important; display: block !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; opacity: 0; transform: translate3d(0, 34px, 0); transition: opacity 850ms var(--oh-cat-ease) var(--oh-delay), transform 850ms var(--oh-cat-ease) var(--oh-delay); } html body .oh-categories article.oh-category-card.is-visible { opacity: 1; transform: translate3d(0, 0, 0); } /* --------------------------------------------------------- CARD LINK --------------------------------------------------------- */ html body .oh-categories a.oh-category-card__link, html body .oh-categories a.oh-category-card__link:hover, html body .oh-categories a.oh-category-card__link:focus, html body .oh-categories a.oh-category-card__link:active { position: relative !important; display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: inherit !important; text-decoration: none !important; box-shadow: none !important; outline: none; -webkit-tap-highlight-color: transparent; } /* ========================================================= IMAGE AREA ========================================================= */ html body .oh-categories .oh-category-card__visual { position: relative !important; width: 100% !important; aspect-ratio: 1 / 1 !important; margin: 0 !important; padding: 0 !important; border-radius: 2px !important; background: #ebe3d7 !important; overflow: hidden !important; box-shadow: 0 18px 54px rgba(53, 40, 28, .065) !important; transform: translateZ(0); transition: box-shadow 550ms var(--oh-cat-ease); } /* --------------------------------------------------------- IMAGE --------------------------------------------------------- */ html body .oh-categories img.oh-category-card__image { position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; max-width: none !important; height: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; object-fit: cover !important; box-shadow: none !important; transform: scale(1.001); transition: transform 1100ms cubic-bezier(.18, .72, .2, 1), filter 700ms ease !important; will-change: transform; } /* --------------------------------------------------------- SUBTLE BOTTOM SHADE --------------------------------------------------------- */ html body .oh-categories .oh-category-card__shade { position: absolute !important; z-index: 2 !important; inset: 0 !important; display: block !important; background: linear-gradient( 180deg, rgba(20, 15, 10, 0) 52%, rgba(20, 15, 10, .03) 100% ) !important; pointer-events: none !important; } /* --------------------------------------------------------- LUXURY SHINE --------------------------------------------------------- */ html body .oh-categories .oh-category-card__shine { position: absolute !important; z-index: 4 !important; top: -25% !important; left: -80% !important; display: block !important; width: 46% !important; height: 150% !important; background: linear-gradient( 100deg, transparent 0%, rgba(255,255,255,.05) 25%, rgba(255,255,255,.34) 50%, rgba(255,255,255,.04) 75%, transparent 100% ) !important; transform: rotate(8deg); transition: left 950ms var(--oh-cat-ease); pointer-events: none !important; } /* --------------------------------------------------------- NUMBER --------------------------------------------------------- */ html body .oh-categories .oh-category-card__number { position: absolute !important; z-index: 6 !important; top: 18px !important; inset-inline-start: 18px !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; height: 38px !important; margin: 0 !important; padding: 0 !important; border: 1px solid rgba(255,255,255,.60) !important; border-radius: 50% !important; background: rgba(255,255,255,.77) !important; color: #5d4a33 !important; box-shadow: 0 5px 22px rgba(31,23,15,.075) !important; font-size: 10px !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: .08em !important; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); } /* --------------------------------------------------------- INNER FRAME --------------------------------------------------------- */ html body .oh-categories .oh-category-card__frame { position: absolute !important; z-index: 5 !important; inset: 10px !important; display: block !important; border: 1px solid rgba(255,255,255,0) !important; pointer-events: none !important; transition: inset 500ms var(--oh-cat-ease), border-color 500ms ease; } /* ========================================================= CARD CONTENT ========================================================= */ html body .oh-categories .oh-category-card__content { position: relative !important; width: 100% !important; margin: 0 !important; padding: 20px 3px 3px !important; } /* --------------------------------------------------------- TITLE ROW --------------------------------------------------------- */ html body .oh-categories .oh-category-card__heading { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* --------------------------------------------------------- H3 --------------------------------------------------------- */ html body .oh-categories h3.oh-category-card__title { display: block !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--oh-cat-ink) !important; font-size: clamp(20px, 1.65vw, 27px) !important; font-weight: 450 !important; line-height: 1.2 !important; letter-spacing: -.025em !important; text-transform: none !important; transition: color 320ms ease, transform 450ms var(--oh-cat-ease) !important; } html body .oh-categories[dir="rtl"] h3.oh-category-card__title { letter-spacing: 0 !important; } /* --------------------------------------------------------- CIRCLE ARROW --------------------------------------------------------- */ html body .oh-categories .oh-category-card__arrow { display: flex !important; flex: 0 0 auto !important; align-items: center !important; justify-content: center !important; width: 39px !important; height: 39px !important; margin: 0 !important; padding: 0 !important; border: 1px solid var(--oh-cat-border) !important; border-radius: 50% !important; background: transparent !important; color: var(--oh-cat-gold) !important; transition: background-color 380ms ease, border-color 380ms ease, color 380ms ease, transform 450ms var(--oh-cat-ease) !important; } html body .oh-categories .oh-category-card__arrow svg { display: block !important; width: 16px !important; height: 16px !important; margin: 0 !important; padding: 0 !important; fill: none !important; overflow: visible !important; } html body .oh-categories .oh-category-card__arrow svg path { fill: none !important; stroke: currentColor !important; stroke-width: 1.45 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body .oh-categories[dir="rtl"] .oh-category-card__arrow svg { transform: rotate(180deg) !important; } /* --------------------------------------------------------- EXPLORE ROW --------------------------------------------------------- */ html body .oh-categories .oh-category-card__footer { display: flex !important; align-items: center !important; gap: 11px !important; width: 100% !important; margin: 11px 0 0 !important; padding: 0 !important; } html body .oh-categories .oh-category-card__explore { display: block !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; color: var(--oh-cat-muted) !important; font-size: 10px !important; font-weight: 600 !important; line-height: 1.3 !important; letter-spacing: .15em !important; text-transform: uppercase !important; transition: color 320ms ease !important; } html body .oh-categories[dir="rtl"] .oh-category-card__explore { letter-spacing: .01em !important; } html body .oh-categories .oh-category-card__rule { position: relative !important; display: block !important; flex: 1 1 auto !important; height: 1px !important; margin: 0 !important; padding: 0 !important; background: rgba(94,74,49,.13) !important; overflow: hidden !important; } html body .oh-categories .oh-category-card__rule::after { content: "" !important; position: absolute !important; inset: 0 !important; display: block !important; background: var(--oh-cat-gold) !important; transform: scaleX(0); transform-origin: left center; transition: transform 550ms var(--oh-cat-ease); } html body .oh-categories[dir="rtl"] .oh-category-card__rule::after { transform-origin: right center; } /* ========================================================= DESKTOP HOVER EXPERIENCE ========================================================= */ @media (hover:hover) and (pointer:fine) { html body .oh-categories .oh-category-card__link:hover .oh-category-card__visual { box-shadow: 0 25px 70px rgba(55,40,24,.13) !important; } html body .oh-categories .oh-category-card__link:hover img.oh-category-card__image { transform: scale(1.045); filter: saturate(1.025) contrast(1.015); } html body .oh-categories .oh-category-card__link:hover .oh-category-card__shine { left: 135% !important; } html body .oh-categories .oh-category-card__link:hover .oh-category-card__frame { inset: 13px !important; border-color: rgba(255,255,255,.55) !important; } html body .oh-categories .oh-category-card__link:hover h3.oh-category-card__title { color: #8d7046 !important; transform: translateX(3px); } html body .oh-categories[dir="rtl"] .oh-category-card__link:hover h3.oh-category-card__title { transform: translateX(-3px); } html body .oh-categories .oh-category-card__link:hover .oh-category-card__arrow { border-color: var(--oh-cat-gold) !important; background: var(--oh-cat-gold) !important; color: #fff !important; transform: rotate(-5deg); } html body .oh-categories[dir="rtl"] .oh-category-card__link:hover .oh-category-card__arrow { transform: rotate(5deg); } html body .oh-categories .oh-category-card__link:hover .oh-category-card__explore { color: var(--oh-cat-gold) !important; } html body .oh-categories .oh-category-card__link:hover .oh-category-card__rule::after { transform: scaleX(1); } } /* ========================================================= FOCUS ACCESSIBILITY ========================================================= */ html body .oh-categories a.oh-category-card__link:focus-visible .oh-category-card__visual { outline: 2px solid var(--oh-cat-gold) !important; outline-offset: 4px !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width:1024px) { html body .oh-categories { padding: 76px 0 88px !important; } html body .oh-categories .oh-categories__container { width: min(100% - 40px, 900px) !important; } html body .oh-categories .oh-categories__grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 38px 20px !important; } html body .oh-categories .oh-categories__header { margin-bottom: 44px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px) { html body .oh-categories { padding: 60px 0 72px !important; } html body .oh-categories .oh-categories__container { width: calc(100% - 28px) !important; } html body .oh-categories .oh-categories__header { margin-bottom: 34px !important; } html body .oh-categories .oh-categories__eyebrow { margin-bottom: 13px !important; } html body .oh-categories h2.oh-categories__title { font-size: clamp(30px, 9vw, 42px) !important; } html body .oh-categories p.oh-categories__description { margin-top: 15px !important; font-size: 14px !important; line-height: 1.7 !important; } /* * Keep 2 columns on normal smartphones. */ html body .oh-categories .oh-categories__grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 29px 11px !important; } html body .oh-categories .oh-category-card__content { padding: 13px 1px 0 !important; } html body .oh-categories h3.oh-category-card__title { font-size: clamp(16px, 4.7vw, 20px) !important; } html body .oh-categories .oh-category-card__arrow { width: 31px !important; height: 31px !important; } html body .oh-categories .oh-category-card__arrow svg { width: 13px !important; height: 13px !important; } html body .oh-categories .oh-category-card__number { top: 10px !important; inset-inline-start: 10px !important; width: 29px !important; height: 29px !important; font-size: 8px !important; } html body .oh-categories .oh-category-card__frame { inset: 7px !important; } html body .oh-categories .oh-category-card__footer { margin-top: 8px !important; gap: 7px !important; } html body .oh-categories .oh-category-card__explore { font-size: 8px !important; letter-spacing: .08em !important; } /* * Avoid unnecessary image GPU animation on touch. */ html body .oh-categories img.oh-category-card__image { will-change: auto; transition: none !important; } html body .oh-categories .oh-category-card__shine { display: none !important; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width:420px) { html body .oh-categories .oh-categories__grid { grid-template-columns: 1fr !important; gap: 34px !important; } html body .oh-categories h3.oh-category-card__title { font-size: 21px !important; } html body .oh-categories .oh-category-card__arrow { width: 37px !important; height: 37px !important; } html body .oh-categories .oh-category-card__explore { font-size: 9px !important; letter-spacing: .11em !important; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion:reduce) { html body .oh-categories .oh-categories__header, html body .oh-categories article.oh-category-card { opacity: 1 !important; transform: none !important; transition: none !important; } html body .oh-categories img.oh-category-card__image, html body .oh-categories .oh-category-card__shine, html body .oh-categories .oh-category-card__frame, html body .oh-categories .oh-category-card__arrow, html body .oh-categories .oh-category-card__rule::after { transition: none !important; } } /* ========================================================= OMINIA HOME LATEST DINING PRODUCTS Luxury Editorial Product Rail ========================================================= */ html body .oh-new-products, html body .elementor .oh-new-products { --oh-p-bg: #fffdf9; --oh-p-bg-soft: #f4eee5; --oh-p-ink: #211a14; --oh-p-muted: #746a60; --oh-p-gold: #9b794a; --oh-p-gold-light: #c6a776; --oh-p-border: rgba(82, 62, 39, .14); --oh-p-ease: cubic-bezier(.22, .61, .36, 1); position: relative !important; display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: clamp(76px, 8vw, 128px) 0 clamp(82px, 8vw, 130px) !important; background: var(--oh-p-bg) !important; color: var(--oh-p-ink) !important; overflow: hidden !important; isolation: isolate; } html body .oh-new-products *, html body .oh-new-products *::before, html body .oh-new-products *::after { box-sizing: border-box; } /* ========================================================= AMBIENT BACKGROUND ========================================================= */ html body .oh-new-products .oh-new-products__ambient { position: absolute !important; z-index: -1 !important; top: -320px !important; right: -240px !important; width: 820px !important; height: 820px !important; border-radius: 50% !important; background: radial-gradient( circle, rgba(177, 139, 86, .105) 0%, rgba(177, 139, 86, .035) 42%, rgba(177, 139, 86, 0) 72% ) !important; pointer-events: none !important; } html body .oh-new-products[dir="rtl"] .oh-new-products__ambient { right: auto !important; left: -240px !important; } /* ========================================================= CONTAINER ========================================================= */ html body .oh-new-products .oh-new-products__container { position: relative !important; width: min(1440px, calc(100% - 64px)) !important; max-width: 1440px !important; margin: 0 auto !important; padding: 0 !important; } /* ========================================================= HEADER ========================================================= */ html body .oh-new-products .oh-new-products__header { display: flex !important; align-items: flex-end !important; justify-content: space-between !important; gap: 48px !important; width: 100% !important; margin: 0 0 clamp(42px, 5vw, 68px) !important; padding: 0 !important; opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 850ms var(--oh-p-ease), transform 850ms var(--oh-p-ease); } html body .oh-new-products .oh-new-products__header.is-visible { opacity: 1; transform: translate3d(0, 0, 0); } /* ========================================================= HEADING ========================================================= */ html body .oh-new-products .oh-new-products__heading-group { width: min(760px, 100%) !important; margin: 0 !important; padding: 0 !important; } html body .oh-new-products .oh-new-products__eyebrow { display: flex !important; align-items: center !important; gap: 12px !important; margin: 0 0 15px !important; padding: 0 !important; } html body .oh-new-products .oh-new-products__eyebrow-line { display: block !important; width: 38px !important; height: 1px !important; margin: 0 !important; background: linear-gradient( 90deg, var(--oh-p-gold), transparent ) !important; } html body .oh-new-products[dir="rtl"] .oh-new-products__eyebrow-line { background: linear-gradient( 270deg, var(--oh-p-gold), transparent ) !important; } html body .oh-new-products .oh-new-products__eyebrow-text { color: var(--oh-p-gold) !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1.4 !important; letter-spacing: .2em !important; text-transform: uppercase !important; } html body .oh-new-products[dir="rtl"] .oh-new-products__eyebrow-text { letter-spacing: .02em !important; } html body .oh-new-products h2.oh-new-products__title { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--oh-p-ink) !important; font-size: clamp(36px, 4vw, 60px) !important; font-weight: 400 !important; line-height: 1.05 !important; letter-spacing: -.04em !important; text-transform: none !important; } html body .oh-new-products[dir="rtl"] h2.oh-new-products__title { letter-spacing: 0 !important; } html body .oh-new-products p.oh-new-products__description { width: min(650px, 100%) !important; margin: 19px 0 0 !important; padding: 0 !important; color: var(--oh-p-muted) !important; font-size: clamp(14px, 1.1vw, 16px) !important; font-weight: 400 !important; line-height: 1.8 !important; } /* ========================================================= HEADER ACTIONS ========================================================= */ html body .oh-new-products .oh-new-products__header-actions { display: flex !important; flex: 0 0 auto !important; align-items: center !important; gap: 18px !important; margin: 0 !important; } /* --------------------------------------------------------- VIEW ALL --------------------------------------------------------- */ html body .oh-new-products a.oh-new-products__view-all, html body .oh-new-products a.oh-new-products__view-all:hover { display: inline-flex !important; align-items: center !important; gap: 11px !important; margin: 0 !important; padding: 10px 0 !important; border: 0 !important; background: transparent !important; color: var(--oh-p-ink) !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: .1em !important; text-decoration: none !important; text-transform: uppercase !important; box-shadow: none !important; } html body .oh-new-products[dir="rtl"] a.oh-new-products__view-all { letter-spacing: .01em !important; } html body .oh-new-products .oh-new-products__view-all-icon { display: flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; border: 1px solid var(--oh-p-border) !important; border-radius: 50% !important; color: var(--oh-p-gold) !important; transition: background-color 350ms ease, color 350ms ease, border-color 350ms ease, transform 450ms var(--oh-p-ease) !important; } html body .oh-new-products .oh-new-products__view-all-icon svg { width: 14px !important; height: 14px !important; fill: none !important; } html body .oh-new-products .oh-new-products__view-all-icon path { fill: none !important; stroke: currentColor !important; stroke-width: 1.5 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body .oh-new-products[dir="rtl"] .oh-new-products__view-all-icon svg { transform: rotate(180deg) !important; } /* ========================================================= NAVIGATION ========================================================= */ html body .oh-new-products .oh-new-products__navigation { display: flex !important; gap: 8px !important; margin: 0 !important; } html body .oh-new-products button.oh-new-products__nav { all: unset; display: flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; border: 1px solid var(--oh-p-border) !important; border-radius: 50% !important; background: transparent !important; color: var(--oh-p-ink) !important; cursor: pointer !important; transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease, transform 350ms var(--oh-p-ease), opacity 300ms ease !important; } html body .oh-new-products button.oh-new-products__nav::before, html body .oh-new-products button.oh-new-products__nav::after { display: none !important; content: none !important; } html body .oh-new-products button.oh-new-products__nav svg { display: block !important; width: 17px !important; height: 17px !important; fill: none !important; } html body .oh-new-products button.oh-new-products__nav path { fill: none !important; stroke: currentColor !important; stroke-width: 1.45 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body .oh-new-products[dir="rtl"] button.oh-new-products__nav svg { transform: rotate(180deg) !important; } html body .oh-new-products button.oh-new-products__nav:disabled { opacity: .25 !important; cursor: default !important; } @media (hover:hover) { html body .oh-new-products button.oh-new-products__nav:not(:disabled):hover { background: var(--oh-p-ink) !important; border-color: var(--oh-p-ink) !important; color: #fff !important; transform: translateY(-2px); } html body .oh-new-products a.oh-new-products__view-all:hover .oh-new-products__view-all-icon { background: var(--oh-p-gold) !important; border-color: var(--oh-p-gold) !important; color: #fff !important; transform: translateX(3px); } html body .oh-new-products[dir="rtl"] a.oh-new-products__view-all:hover .oh-new-products__view-all-icon { transform: translateX(-3px); } } /* ========================================================= PRODUCTS RAIL ========================================================= */ html body .oh-new-products .oh-new-products__rail { display: grid !important; grid-auto-flow: column !important; grid-auto-columns: calc( (100% - 72px) / 4 ) !important; gap: 24px !important; direction: ltr !important; width: 100% !important; margin: 0 !important; padding: 0 0 5px !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-inline: contain; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } html body .oh-new-products .oh-new-products__rail::-webkit-scrollbar { display: none !important; } /* ========================================================= PRODUCT CARD ========================================================= */ html body .oh-new-products article.oh-product-card { position: relative !important; display: block !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; scroll-snap-align: start; opacity: 0; transform: translate3d(0, 34px, 0); transition: opacity 800ms var(--oh-p-ease) var(--oh-product-delay), transform 800ms var(--oh-p-ease) var(--oh-product-delay); } html body .oh-new-products[dir="rtl"] article.oh-product-card { direction: rtl !important; } html body .oh-new-products article.oh-product-card.is-visible { opacity: 1; transform: translate3d(0, 0, 0); } /* ========================================================= CARD LINK RESET ========================================================= */ html body .oh-new-products a.oh-product-card__link, html body .oh-new-products a.oh-product-card__link:hover { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: inherit !important; text-decoration: none !important; box-shadow: none !important; } /* ========================================================= PRODUCT VISUAL ========================================================= */ html body .oh-new-products .oh-product-card__visual { position: relative !important; width: 100% !important; aspect-ratio: 1 / 1 !important; margin: 0 !important; padding: 0 !important; background: var(--oh-p-bg-soft) !important; overflow: hidden !important; box-shadow: 0 16px 45px rgba(51, 37, 23, .045) !important; transform: translateZ(0); } /* ========================================================= IMAGE ========================================================= */ html body .oh-new-products img.oh-product-card__image { position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; max-width: none !important; height: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; object-fit: cover !important; transform: scale(1.001); transition: transform 900ms cubic-bezier(.18,.72,.2,1), filter 600ms ease !important; will-change: transform; } /* ========================================================= FRAME ========================================================= */ html body .oh-new-products .oh-product-card__frame { position: absolute !important; z-index: 4 !important; inset: 10px !important; border: 1px solid rgba(255,255,255,0) !important; pointer-events: none !important; transition: inset 450ms var(--oh-p-ease), border-color 450ms ease !important; } /* ========================================================= OVERLAY ========================================================= */ html body .oh-new-products .oh-product-card__overlay { position: absolute !important; z-index: 2 !important; inset: 0 !important; background: linear-gradient( 180deg, transparent 54%, rgba(22,16,11,.19) 100% ) !important; opacity: 0 !important; transition: opacity 500ms ease !important; pointer-events: none !important; } /* ========================================================= NUMBER ========================================================= */ html body .oh-new-products .oh-product-card__number { position: absolute !important; z-index: 7 !important; top: 16px !important; inset-inline-start: 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 35px !important; height: 35px !important; border: 1px solid rgba(255,255,255,.63) !important; border-radius: 50% !important; background: rgba(255,255,255,.81) !important; color: #5a4732 !important; font-size: 9px !important; font-weight: 600 !important; letter-spacing: .08em !important; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); } /* ========================================================= BADGES ========================================================= */ html body .oh-new-products .oh-product-card__badges { position: absolute !important; z-index: 7 !important; top: 15px !important; inset-inline-end: 15px !important; display: flex !important; flex-direction: column !important; align-items: flex-end !important; gap: 6px !important; } html body .oh-new-products .oh-product-card__badge { display: inline-flex !important; align-items: center !important; min-height: 28px !important; padding: 0 11px !important; border-radius: 100px !important; font-size: 9px !important; font-weight: 650 !important; line-height: 1 !important; letter-spacing: .08em !important; text-transform: uppercase !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } html body .oh-new-products .oh-product-card__badge--sale { background: rgba(151,112,61,.88) !important; color: #fff !important; } html body .oh-new-products .oh-product-card__badge--stock { background: rgba(31,26,21,.84) !important; color: #fff !important; } /* ========================================================= DISCOVER CTA ========================================================= */ html body .oh-new-products .oh-product-card__discover { position: absolute !important; z-index: 8 !important; left: 50% !important; bottom: 20px !important; display: flex !important; align-items: center !important; gap: 9px !important; padding: 10px 15px !important; border: 1px solid rgba(255,255,255,.50) !important; border-radius: 100px !important; background: rgba(255,255,255,.91) !important; color: #2a2119 !important; font-size: 10px !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: .08em !important; text-transform: uppercase !important; opacity: 0; transform: translate3d(-50%, 12px, 0); transition: opacity 420ms ease, transform 500ms var(--oh-p-ease) !important; white-space: nowrap !important; backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); } html body .oh-new-products[dir="rtl"] .oh-product-card__discover { letter-spacing: .01em !important; } html body .oh-new-products .oh-product-card__discover svg { width: 14px !important; height: 14px !important; fill: none !important; } html body .oh-new-products .oh-product-card__discover path { stroke: currentColor !important; stroke-width: 1.5 !important; fill: none !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body .oh-new-products[dir="rtl"] .oh-product-card__discover svg { transform: rotate(180deg) !important; } /* ========================================================= CARD CONTENT ========================================================= */ html body .oh-new-products .oh-product-card__content { position: relative !important; width: 100% !important; margin: 0 !important; padding: 19px 2px 2px !important; } html body .oh-new-products h3.oh-product-card__title { display: -webkit-box !important; margin: 0 !important; padding: 0 !important; color: var(--oh-p-ink) !important; background: transparent !important; font-size: clamp(14px, 1.15vw, 17px) !important; font-weight: 500 !important; line-height: 1.5 !important; letter-spacing: -.01em !important; text-transform: none !important; overflow: hidden !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-height: 3em !important; transition: color 300ms ease !important; } html body .oh-new-products[dir="rtl"] h3.oh-product-card__title { letter-spacing: 0 !important; } /* ========================================================= PRICE ROW ========================================================= */ html body .oh-new-products .oh-product-card__bottom { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin: 11px 0 0 !important; } html body .oh-new-products .oh-product-card__price { color: var(--oh-p-gold) !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.4 !important; } html body .oh-new-products .oh-product-card__price del { opacity: .45 !important; margin-inline-end: 4px !important; color: var(--oh-p-muted) !important; } html body .oh-new-products .oh-product-card__price ins { color: var(--oh-p-gold) !important; text-decoration: none !important; } /* ========================================================= MINI ARROW ========================================================= */ html body .oh-new-products .oh-product-card__mini-arrow { display: flex !important; align-items: center !important; justify-content: center !important; width: 29px !important; height: 29px !important; border: 1px solid var(--oh-p-border) !important; border-radius: 50% !important; color: var(--oh-p-gold) !important; transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease, transform 400ms var(--oh-p-ease) !important; } html body .oh-new-products .oh-product-card__mini-arrow svg { width: 13px !important; height: 13px !important; fill: none !important; } html body .oh-new-products .oh-product-card__mini-arrow path { fill: none !important; stroke: currentColor !important; stroke-width: 1.5 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body .oh-new-products[dir="rtl"] .oh-product-card__mini-arrow svg { transform: rotate(180deg) !important; } /* ========================================================= CARD RULE ========================================================= */ html body .oh-new-products .oh-product-card__rule { position: relative !important; display: block !important; width: 100% !important; height: 1px !important; margin: 17px 0 0 !important; background: var(--oh-p-border) !important; overflow: hidden !important; } html body .oh-new-products .oh-product-card__rule::after { content: "" !important; position: absolute !important; inset: 0 !important; background: var(--oh-p-gold) !important; transform: scaleX(0); transform-origin: left center; transition: transform 550ms var(--oh-p-ease) !important; } html body .oh-new-products[dir="rtl"] .oh-product-card__rule::after { transform-origin: right center; } /* ========================================================= HOVER ========================================================= */ @media (hover:hover) and (pointer:fine) { html body .oh-new-products .oh-product-card__link:hover img.oh-product-card__image { transform: scale(1.045); filter: saturate(1.025) contrast(1.015); } html body .oh-new-products .oh-product-card__link:hover .oh-product-card__overlay { opacity: 1 !important; } html body .oh-new-products .oh-product-card__link:hover .oh-product-card__frame { inset: 13px !important; border-color: rgba(255,255,255,.52) !important; } html body .oh-new-products .oh-product-card__link:hover .oh-product-card__discover { opacity: 1; transform: translate3d(-50%,0,0); } html body .oh-new-products .oh-product-card__link:hover h3.oh-product-card__title { color: var(--oh-p-gold) !important; } html body .oh-new-products .oh-product-card__link:hover .oh-product-card__mini-arrow { background: var(--oh-p-gold) !important; border-color: var(--oh-p-gold) !important; color: #fff !important; transform: translateX(2px); } html body .oh-new-products[dir="rtl"] .oh-product-card__link:hover .oh-product-card__mini-arrow { transform: translateX(-2px); } html body .oh-new-products .oh-product-card__link:hover .oh-product-card__rule::after { transform: scaleX(1); } } /* ========================================================= PROGRESS ========================================================= */ html body .oh-new-products .oh-new-products__progress { position: relative !important; width: 100% !important; height: 1px !important; margin: 38px 0 0 !important; background: rgba(79,61,40,.13) !important; overflow: hidden !important; } html body .oh-new-products .oh-new-products__progress-bar { position: absolute !important; inset: 0 !important; display: block !important; background: var(--oh-p-gold) !important; transform: scaleX(.08); transform-origin: left center; transition: transform 120ms linear; } html body .oh-new-products[dir="rtl"] .oh-new-products__progress-bar { transform-origin: right center; } /* ========================================================= EMPTY ========================================================= */ html body .oh-new-products .oh-new-products__empty { padding: 50px 20px !important; border: 1px solid var(--oh-p-border) !important; color: var(--oh-p-muted) !important; text-align: center !important; font-size: 15px !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width:1024px) { html body .oh-new-products .oh-new-products__container { width: calc(100% - 40px) !important; } html body .oh-new-products .oh-new-products__header { align-items: flex-end !important; gap: 28px !important; } html body .oh-new-products .oh-new-products__rail { grid-auto-columns: calc((100% - 20px) / 2) !important; gap: 20px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px) { html body .oh-new-products { padding: 62px 0 72px !important; } html body .oh-new-products .oh-new-products__container { width: calc(100% - 28px) !important; } html body .oh-new-products .oh-new-products__header { display: block !important; margin-bottom: 34px !important; } html body .oh-new-products h2.oh-new-products__title { font-size: clamp(31px, 9vw, 43px) !important; } html body .oh-new-products p.oh-new-products__description { margin-top: 14px !important; font-size: 14px !important; } html body .oh-new-products .oh-new-products__header-actions { margin-top: 22px !important; } html body .oh-new-products .oh-new-products__navigation { display: none !important; } /* * One large product + part of the next one visible. * Encourages native swipe. */ html body .oh-new-products .oh-new-products__rail { grid-auto-columns: 78% !important; gap: 13px !important; scroll-padding-inline: 0; } html body .oh-new-products .oh-product-card__content { padding-top: 15px !important; } html body .oh-new-products h3.oh-product-card__title { font-size: 15px !important; } html body .oh-new-products img.oh-product-card__image { will-change: auto; transition: none !important; } html body .oh-new-products .oh-product-card__discover { display: none !important; } html body .oh-new-products .oh-new-products__progress { margin-top: 28px !important; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion:reduce) { html body .oh-new-products .oh-new-products__header, html body .oh-new-products article.oh-product-card { opacity: 1 !important; transform: none !important; transition: none !important; } html body .oh-new-products img.oh-product-card__image, html body .oh-new-products .oh-product-card__frame, html body .oh-new-products .oh-product-card__discover, html body .oh-new-products .oh-product-card__mini-arrow { transition: none !important; } html body .oh-new-products .oh-new-products__rail { scroll-behavior: auto !important; } } /* ========================================================= SHARED ========================================================= */ html body .oh-hd *, html body .oh-brands *, html body .oh-tea *, html body .oh-journal * { box-sizing: border-box; } html body .oh-hd img, html body .oh-brands img, html body .oh-tea img, html body .oh-journal img { max-width: none !important; } /* ========================================================= HOME DECOR ========================================================= */ html body .oh-hd { --ink: #211b16; --muted: #70675e; --gold: #9b794c; --line: rgba(72,55,37,.14); --ease: cubic-bezier(.22,.61,.36,1); position: relative !important; overflow: hidden !important; padding: clamp(80px,8vw,132px) 0 !important; background: #f4efe7 !important; color: var(--ink) !important; } html body .oh-hd__container { width: min(1440px,calc(100% - 64px)) !important; margin: 0 auto !important; } html body .oh-hd__ornament { position: absolute; width: 650px; height: 650px; left: -280px; top: -260px; border: 1px solid rgba(155,121,76,.1); border-radius: 50%; } html body .oh-hd__header { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 70px !important; align-items: end !important; margin-bottom: 55px !important; } html body .oh-hd__eyebrow { display: flex !important; align-items: center !important; gap: 13px !important; margin-bottom: 17px !important; color: var(--gold) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .18em !important; text-transform: uppercase !important; } html body .oh-hd[dir="rtl"] .oh-hd__eyebrow { letter-spacing: .02em !important; } html body .oh-hd__eyebrow-line { width: 36px; height: 1px; background: var(--gold); } html body .oh-hd h2.oh-hd__title { margin: 0 !important; color: var(--ink) !important; font-size: clamp(40px,4.5vw,68px) !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: -.045em !important; } html body .oh-hd[dir="rtl"] h2 { letter-spacing: 0 !important; } html body .oh-hd__intro p { max-width: 590px; margin: 0 0 22px !important; color: var(--muted) !important; font-size: 15px !important; line-height: 1.85 !important; } html body .oh-hd a.oh-hd__all { display: inline-flex !important; gap: 10px !important; align-items: center !important; color: var(--ink) !important; text-decoration: none !important; font-size: 11px !important; font-weight: 650 !important; letter-spacing: .1em !important; text-transform: uppercase !important; } html body .oh-hd__all svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; } html body .oh-hd[dir="rtl"] .oh-hd__all svg { transform: rotate(180deg); } html body .oh-hd__grid { display: grid !important; grid-template-columns: repeat(4,1fr) !important; grid-template-rows: repeat(2,minmax(0,1fr)) !important; gap: 20px !important; } html body .oh-hd-card { min-width: 0; } html body .oh-hd-card--featured { grid-column: span 2; grid-row: span 2; } html body .oh-hd-card__link { display: block !important; height: 100% !important; color: inherit !important; text-decoration: none !important; } html body .oh-hd-card__visual { position: relative; aspect-ratio: 1/1; overflow: hidden; background: #e8e1d7; } html body .oh-hd-card--featured .oh-hd-card__visual { height: calc(100% - 78px); aspect-ratio: auto; } html body .oh-hd-card__image { width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform 1s var(--ease) !important; } html body .oh-hd-card__veil { position: absolute; inset: 0; background: linear-gradient( to top, rgba(24,17,11,.22), transparent 42% ); opacity: 0; transition: opacity .5s ease; } html body .oh-hd-card__frame { position: absolute; inset: 11px; border: 1px solid transparent; transition: inset .45s var(--ease), border-color .45s ease; } html body .oh-hd-card__badges { position: absolute; top: 15px; inset-inline-end: 15px; display: flex; gap: 6px; } html body .oh-hd-card__badges span { padding: 7px 10px; border-radius: 30px; background: rgba(255,255,255,.88); color: #453727; font-size: 9px; font-weight: 600; text-transform: uppercase; backdrop-filter: blur(8px); } html body .oh-hd-card__discover { position: absolute; left: 50%; bottom: 20px; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 50px; background: rgba(255,255,255,.92); color: #2e251e; font-size: 10px; font-weight: 600; opacity: 0; transform: translate(-50%,12px); transition: opacity .4s ease, transform .45s var(--ease); } html body .oh-hd-card__discover svg { width: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; } html body .oh-hd-card__info { padding: 16px 2px 0; } html body .oh-hd-card__info h3 { margin: 0 0 7px !important; color: var(--ink) !important; font-size: 15px !important; font-weight: 500 !important; line-height: 1.45 !important; } html body .oh-hd-card__price { color: var(--gold) !important; font-size: 13px !important; font-weight: 600 !important; } @media (hover:hover) { html body .oh-hd-card:hover .oh-hd-card__image { transform: scale(1.045); } html body .oh-hd-card:hover .oh-hd-card__veil { opacity: 1; } html body .oh-hd-card:hover .oh-hd-card__frame { inset: 14px; border-color: rgba(255,255,255,.55); } html body .oh-hd-card:hover .oh-hd-card__discover { opacity: 1; transform: translate(-50%,0); } } /* ========================================================= BRANDS ========================================================= */ html body .oh-brands { --cream: #f5eee4; --gold: #bea177; --dark: #171411; position: relative !important; overflow: hidden !important; padding: clamp(85px,9vw,145px) 0 !important; background: linear-gradient( 145deg, #181512, #211b16 55%, #151210 ) !important; color: var(--cream) !important; } html body .oh-brands__container { width: min(1440px,calc(100% - 64px)) !important; margin: 0 auto !important; } html body .oh-brands__glow { position: absolute; width: 900px; height: 900px; top: -600px; left: 50%; border-radius: 50%; background: radial-gradient( circle, rgba(190,161,119,.16), transparent 67% ); transform: translateX(-50%); } html body .oh-brands__header { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 70px !important; margin-bottom: 58px !important; } html body .oh-brands__eyebrow { display: block; margin-bottom: 16px; color: var(--gold) !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: .2em !important; text-transform: uppercase !important; } html body .oh-brands h2 { margin: 0 !important; color: var(--cream) !important; font-size: clamp(40px,4.5vw,67px) !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: -.045em !important; } html body .oh-brands__header p { align-self: end; max-width: 590px; margin: 0 !important; color: rgba(245,238,228,.63) !important; line-height: 1.85 !important; } html body .oh-brands__rail { display: grid !important; grid-auto-flow: column !important; grid-auto-columns: calc((100% - 66px)/4) !important; gap: 22px !important; overflow-x: auto !important; scroll-snap-type: x mandatory; scrollbar-width: none; } html body .oh-brands__rail::-webkit-scrollbar { display: none; } html body .oh-brand-card { scroll-snap-align: start; } html body .oh-brand-card a { color: inherit !important; text-decoration: none !important; } html body .oh-brand-card__image-wrap { position: relative; aspect-ratio: 4/5; overflow: hidden; background: #29231e; } html body .oh-brand-card img { width: 100% !important; height: 100% !important; object-fit: cover !important; transform: scale(1.001); transition: transform 1.1s cubic-bezier(.18,.72,.2,1), filter .65s ease !important; } html body .oh-brand-card__overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(13,10,8,.52), transparent 50% ); } html body .oh-brand-card__frame { position: absolute; inset: 10px; border: 1px solid rgba(255,255,255,.16); transition: inset .45s ease; } html body .oh-brand-card__meta { padding: 18px 2px 0; } html body .oh-brand-card__count { display: block; margin-bottom: 9px; color: var(--gold); font-size: 9px; letter-spacing: .15em; } html body .oh-brand-card h3 { margin: 0 0 12px !important; color: var(--cream) !important; font-size: 22px !important; font-weight: 400 !important; } html body .oh-brand-card__cta { display: flex; align-items: center; gap: 8px; color: rgba(245,238,228,.57); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; } html body .oh-brand-card__cta svg { width: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; } html body .oh-brands[dir="rtl"] .oh-brand-card__cta svg { transform: rotate(180deg); } html body .oh-brands__controls { display: flex; align-items: center; gap: 14px; margin-top: 38px; } html body .oh-brands__controls button { all: unset; display: flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; border: 1px solid rgba(255,255,255,.16) !important; border-radius: 50% !important; color: var(--cream) !important; cursor: pointer !important; } html body .oh-brands__controls svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; } html body .oh-brands__control-line { width: 70px; height: 1px; background: rgba(255,255,255,.15); } @media (hover:hover) { html body .oh-brand-card:hover img { transform: scale(1.05); filter: saturate(1.08); } html body .oh-brand-card:hover .oh-brand-card__frame { inset: 14px; } } /* ========================================================= TEA & COFFEE ========================================================= */ html body .oh-tea { --ink: #30261d; --muted: #756a60; --gold: #a78353; padding: clamp(85px,9vw,145px) 0 !important; background: linear-gradient( 180deg, #fbf7f0, #f1e9de ) !important; overflow: hidden !important; } html body .oh-tea__container { width: min(1440px,calc(100% - 64px)) !important; margin: 0 auto !important; } html body .oh-tea__header { max-width: 720px; margin: 0 auto 55px !important; text-align: center !important; } html body .oh-tea__ornament { display: flex; justify-content: center; align-items: center; gap: 9px; margin-bottom: 15px; } html body .oh-tea__ornament span { width: 30px; height: 1px; background: rgba(167,131,83,.5); } html body .oh-tea__ornament i { width: 5px; height: 5px; border: 1px solid var(--gold); transform: rotate(45deg); } html body .oh-tea__eyebrow { display: block; margin-bottom: 15px; color: var(--gold); font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; } html body .oh-tea h2 { margin: 0 !important; color: var(--ink) !important; font-size: clamp(38px,4.2vw,64px) !important; font-weight: 400 !important; line-height: 1.05 !important; letter-spacing: -.04em !important; } html body .oh-tea__header p { max-width: 650px; margin: 18px auto 0 !important; color: var(--muted) !important; font-size: 15px !important; line-height: 1.8 !important; } html body .oh-tea__rail { display: grid !important; grid-auto-flow: column !important; grid-auto-columns: calc((100% - 72px)/4) !important; gap: 24px !important; overflow-x: auto !important; scroll-snap-type: x mandatory; scrollbar-width: none; } html body .oh-tea__rail::-webkit-scrollbar { display: none; } html body .oh-tea-card { scroll-snap-align: start; } html body .oh-tea-card a { color: inherit !important; text-decoration: none !important; } html body .oh-tea-card__arch { position: relative; aspect-ratio: .82; overflow: hidden; border-radius: 46% 46% 5px 5px; background: #e9ded0; } html body .oh-tea-card__image { width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform 1s cubic-bezier(.18,.72,.2,1) !important; } html body .oh-tea-card__number { position: absolute; top: 22px; left: 50%; color: rgba(255,255,255,.9); font-size: 10px; letter-spacing: .15em; transform: translateX(-50%); } html body .oh-tea-card__action { position: absolute; bottom: 18px; left: 50%; display: flex; align-items: center; gap: 8px; padding: 10px 15px; border-radius: 50px; background: rgba(255,255,255,.91); color: #33271d; font-size: 10px; font-weight: 600; opacity: 0; transform: translate(-50%,12px); transition: opacity .4s ease, transform .45s ease; } html body .oh-tea-card__action svg { width: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; } html body .oh-tea-card__info { padding-top: 18px; } html body .oh-tea-card h3 { margin: 0 0 8px !important; color: var(--ink) !important; font-size: 16px !important; font-weight: 500 !important; line-height: 1.5 !important; } html body .oh-tea-card__price { color: var(--gold); font-size: 13px; font-weight: 600; } html body .oh-tea__footer { display: flex; align-items: center; gap: 30px; margin-top: 45px; } html body .oh-tea__footer > a { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; color: var(--ink) !important; text-decoration: none !important; font-size: 11px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; } html body .oh-tea__footer svg { width: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; } html body .oh-tea__progress { position: relative; flex: 1; height: 1px; background: rgba(81,61,41,.14); } html body .oh-tea__progress span { position: absolute; inset: 0; background: var(--gold); transform: scaleX(.08); transform-origin: left; transition: transform .12s linear; } @media (hover:hover) { html body .oh-tea-card:hover .oh-tea-card__image { transform: scale(1.045); } html body .oh-tea-card:hover .oh-tea-card__action { opacity: 1; transform: translate(-50%,0); } } /* ========================================================= JOURNAL ========================================================= */ html body .oh-journal { --ink: #211b16; --muted: #776e65; --gold: #9b794c; padding: clamp(85px,9vw,145px) 0 !important; background: #fffdf9 !important; } html body .oh-journal__container { width: min(1440px,calc(100% - 64px)) !important; margin: 0 auto !important; } html body .oh-journal__header { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 70px !important; align-items: end !important; margin-bottom: 52px !important; } html body .oh-journal__eyebrow { display: block; margin-bottom: 15px; color: var(--gold); font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; } html body .oh-journal h2 { margin: 0 !important; color: var(--ink) !important; font-size: clamp(40px,4.5vw,66px) !important; font-weight: 400 !important; line-height: 1.02 !important; letter-spacing: -.045em !important; } html body .oh-journal__header p { max-width: 590px; margin: 0 !important; color: var(--muted) !important; line-height: 1.85 !important; } html body .oh-journal__grid { display: grid !important; grid-template-columns: 1.35fr .65fr !important; gap: 24px !important; } html body .oh-journal-card:not(.oh-journal-card--lead) { grid-column: 2; } html body .oh-journal-card--lead { grid-row: 1 / span 3; } html body .oh-journal-card a { display: grid !important; grid-template-columns: 170px 1fr !important; gap: 20px !important; color: inherit !important; text-decoration: none !important; } html body .oh-journal-card--lead a { display: block !important; } html body .oh-journal-card__media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: #e8e1d8; } html body .oh-journal-card:not(.oh-journal-card--lead) .oh-journal-card__media { aspect-ratio: 1; } html body .oh-journal-card__media img { width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform .9s ease !important; } html body .oh-journal-card__overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(20,15,10,.17), transparent 45% ); } html body .oh-journal-card__body { padding-top: 16px; } html body .oh-journal-card:not(.oh-journal-card--lead) .oh-journal-card__body { padding: 6px 0; } html body .oh-journal-card__meta { display: flex; gap: 15px; margin-bottom: 11px; color: var(--gold); font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } html body .oh-journal-card h3 { margin: 0 !important; color: var(--ink) !important; font-size: 20px !important; font-weight: 450 !important; line-height: 1.4 !important; } html body .oh-journal-card--lead h3 { font-size: clamp(26px,2.4vw,38px) !important; } html body .oh-journal-card__body p { max-width: 650px; margin: 14px 0 0 !important; color: var(--muted) !important; line-height: 1.75 !important; } html body .oh-journal-card__read { display: flex; align-items: center; gap: 8px; margin-top: 15px; color: var(--gold); font-size: 10px; font-weight: 600; text-transform: uppercase; } html body .oh-journal-card__read svg { width: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; } html body .oh-journal__all { margin-top: 45px; text-align: center; } html body .oh-journal__all a { display: inline-block; padding: 13px 24px; border: 1px solid rgba(80,61,40,.18); color: var(--ink) !important; text-decoration: none !important; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; transition: background .3s ease, color .3s ease; } @media (hover:hover) { html body .oh-journal-card:hover img { transform: scale(1.04); } html body .oh-journal__all a:hover { background: var(--ink); color: white !important; } } /* ========================================================= TABLET ========================================================= */ @media (max-width:1024px) { html body .oh-hd__container, html body .oh-brands__container, html body .oh-tea__container, html body .oh-journal__container { width: calc(100% - 40px) !important; } html body .oh-hd__grid { grid-template-columns: repeat(2,1fr) !important; grid-template-rows: auto !important; } html body .oh-hd-card--featured { grid-column: span 2; grid-row: auto; } html body .oh-hd-card--featured .oh-hd-card__visual { height: auto; aspect-ratio: 16/10; } html body .oh-brands__rail { grid-auto-columns: calc((100% - 22px)/2) !important; } html body .oh-tea__rail { grid-auto-columns: calc((100% - 20px)/2) !important; } html body .oh-journal__grid { grid-template-columns: 1fr !important; } html body .oh-journal-card--lead, html body .oh-journal-card:not(.oh-journal-card--lead) { grid-column: 1; grid-row: auto; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px) { html body .oh-hd, html body .oh-brands, html body .oh-tea, html body .oh-journal { padding: 64px 0 !important; } html body .oh-hd__container, html body .oh-brands__container, html body .oh-tea__container, html body .oh-journal__container { width: calc(100% - 28px) !important; } html body .oh-hd__header, html body .oh-brands__header, html body .oh-journal__header { grid-template-columns: 1fr !important; gap: 20px !important; } html body .oh-hd h2, html body .oh-brands h2, html body .oh-tea h2, html body .oh-journal h2 { font-size: clamp(32px,9vw,44px) !important; } html body .oh-hd__grid { gap: 11px !important; } html body .oh-hd-card__info h3 { font-size: 13px !important; } html body .oh-hd-card__discover { display: none; } html body .oh-brands__rail { grid-auto-columns: 82% !important; gap: 13px !important; } html body .oh-brand-card__image-wrap { aspect-ratio: 4/4.6; } html body .oh-tea__rail { grid-auto-columns: 76% !important; gap: 13px !important; } html body .oh-tea-card__action { opacity: 1; transform: translate(-50%,0); } html body .oh-journal-card:not(.oh-journal-card--lead) a { grid-template-columns: 115px 1fr !important; gap: 14px !important; } html body .oh-journal-card h3 { font-size: 16px !important; } } /* ========================================================= REVEAL ========================================================= */ html body [data-oh-reveal] { opacity: 0; transform: translate3d(0,28px,0); transition: opacity .8s cubic-bezier(.22,.61,.36,1) var(--delay,0ms), transform .8s cubic-bezier(.22,.61,.36,1) var(--delay,0ms); } html body [data-oh-reveal].is-visible { opacity: 1; transform: translate3d(0,0,0); } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion:reduce) { html body [data-oh-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } html body .oh-hd img, html body .oh-brand-card img, html body .oh-tea-card img, html body .oh-journal-card img { transition: none !important; } }/* End custom CSS */