/* ============================================================
Arabiva — Black / White / Copper theme layer (single layer)
Styles the ORIGINAL Journal3 header, footer and product cards.
Pure CSS: no JS injection, no display:none on theme elements,
no forced direction, no font-family overrides. RTL-safe
(logical properties + html[dir] variants).
Palette:
black #111111 white #ffffff
copper #b87333 copper-light #d9985f copper-deep #8c5a28
line #e8e8e8 muted #9a9a9a
NOTE: the active header on ALL viewports is Journal's
.mobile-header (site setting) — style it first; the classic
.top-bar/.mid-bar rules below it are kept in case the desktop
header ever gets enabled.
============================================================ */
/* ================= HEADER (active: .mobile-header) ================ */
/* --- Top strip: black, quiet, precise ----------------------------- */
.mobile-top-bar {
background: #111111 !important;
}
.mobile-top-bar .links-text,
.mobile-top-bar a,
.mobile-top-bar .top-menu > .j-menu > .menu-item > a,
.mobile-top-bar .language-currency a,
.mobile-top-bar .dropdown-toggle {
color: #f2f2f2 !important;
font-size: 12px;
letter-spacing: .04em;
transition: color .2s ease;
}
.mobile-top-bar a:hover,
.mobile-top-bar a:hover .links-text,
.mobile-top-bar .dropdown-toggle:hover {
color: #d9985f !important;
}
/* --- Main bar: white, hairline base, soft sticky shadow ----------- */
header.header-compact {
background: #ffffff !important;
box-shadow: 0 2px 14px rgba(17, 17, 17, .06);
}
.mobile-bar {
background: #ffffff !important;
border-bottom: 1px solid #e8e8e8;
}
.mobile-bar-group a,
.mobile-bar-group button,
.mobile-bar .menu-trigger,
.mobile-bar .search-trigger,
.mobile-bar .cart-heading {
color: #111111 !important;
transition: color .2s ease;
}
.mobile-bar-group a:hover,
.mobile-bar-group button:hover,
.mobile-bar .cart-heading:hover {
color: #b87333 !important;
}
.mobile-bar .count-badge,
.header .count-badge,
#cart .count-badge {
background: #b87333 !important;
color: #ffffff !important;
}
/* --- Search dropdown: clean white panel, copper focus ------------- */
.header-search {
background: #ffffff;
}
.header-search input {
border-color: #e8e8e8 !important;
color: #111111 !important;
}
.header-search input:focus {
border-color: #b87333 !important;
box-shadow: 0 0 0 2px rgba(184, 115, 51, .15) !important;
}
.header-search .search-button {
color: #111111;
}
.header-search .search-button:hover {
color: #b87333;
}
/* --- Off-canvas menu: white, black type, copper active ------------ */
.mobile-main-menu-container {
background: #ffffff !important;
}
.mobile-main-menu-container a,
.mobile-main-menu-container .links-text {
color: #111111;
transition: color .2s ease;
}
.mobile-main-menu-container a:hover,
.mobile-main-menu-container a:hover .links-text,
.mobile-main-menu-container .menu-item.active > a {
color: #b87333;
}
.mobile-wrapper-header {
background: #111111 !important;
color: #ffffff !important;
}
.mobile-wrapper-header span {
color: #ffffff !important;
letter-spacing: .06em;
text-transform: uppercase;
}
/* --- Classic desktop header (kept for future enable) -------------- */
.top-bar {
background: #111111 !important;
}
.top-bar a,
.top-bar .links-text,
.top-bar .top-menu > .j-menu > .menu-item > a {
color: #f2f2f2 !important;
}
.top-bar a:hover,
.top-bar .top-menu > .j-menu > .menu-item > a:hover {
color: #d9985f !important;
}
.header .main-menu > .j-menu > .menu-item > a,
.header .main-menu > .j-menu > .menu-item > a .links-text {
color: #111111;
transition: color .2s ease;
}
.header .main-menu > .j-menu > .menu-item > a:hover,
.header .main-menu > .j-menu > .menu-item > a:hover .links-text,
.header .main-menu > .j-menu > .menu-item.active > a {
color: #b87333;
}
/* ======================== FOOTER ================================== */
footer {
background: #111111 !important;
color: #d6d6d6;
}
/* Column / module titles: white caps with copper accent bar */
footer .title,
footer .module-title,
footer h2, footer h3, footer h4, footer h5 {
color: #ffffff !important;
text-transform: uppercase;
letter-spacing: .08em;
position: relative;
padding-bottom: 12px;
}
footer .module-title::after,
footer .title::after {
content: "";
position: absolute;
inset-inline-start: 0;
bottom: 0;
width: 36px;
height: 2px;
background: #b87333;
}
/* Journal centers the newsletter title — keep its accent centered */
footer .module-newsletter .module-title::after {
inset-inline-start: 50%;
transform: translateX(-50%);
}
/* Body text */
footer p, footer li, footer span:not(.count-badge),
footer .newsletter-text {
color: #b5b5b5;
}
/* Links: quiet gray, copper on hover with a gentle slide */
footer a,
footer a .links-text {
color: #c9c9c9 !important;
transition: color .2s ease, padding-inline-start .2s ease;
}
footer a:hover,
footer a:hover .links-text {
color: #d9985f !important;
}
footer .module-catalog a:hover,
footer .j-menu a:hover {
padding-inline-start: 4px;
}
/* Social / icon menus */
footer .icons-menu-item a {
color: #c9c9c9 !important;
}
footer .icons-menu-item a:hover {
color: #d9985f !important;
}
/* Newsletter form: dark field, copper ring + button */
footer .module-newsletter .newsletter-form input.form-control,
footer .newsletter-form input,
footer input[type="text"], footer input[type="email"] {
background: #1c1c1c !important;
border: 1px solid rgba(255, 255, 255, .18) !important;
color: #ffffff !important;
}
footer .module-newsletter .newsletter-form input.form-control:focus,
footer .newsletter-form input:focus,
footer input[type="text"]:focus, footer input[type="email"]:focus {
border-color: #b87333 !important;
box-shadow: 0 0 0 2px rgba(184, 115, 51, .2) !important;
}
footer input::placeholder {
color: #9a9a9a !important;
}
footer .module-newsletter .newsletter-form .input-group button,
footer .newsletter-form button,
footer button[type="submit"],
footer .btn.btn-primary {
background: #b87333 !important;
border-color: #b87333 !important;
color: #ffffff !important;
transition: background .2s ease;
}
footer .module-newsletter .newsletter-form .input-group button:hover,
footer .newsletter-form button:hover,
footer button[type="submit"]:hover,
footer .btn.btn-primary:hover {
background: #8c5a28 !important;
border-color: #8c5a28 !important;
}
/* Inner rows/modules must not paint over the black canvas
(Journal color-schemes give some footer rows a light background) */
footer .row-bg,
footer .col-bg,
footer .grid-row::before,
footer .grid-row::after,
footer .grid-rows::before,
footer .grid-cols::before,
footer .grid-col::before,
footer .grid-item::before,
footer .grid-rows,
footer .grid-row,
footer .grid-cols-wrapper,
footer .grid-cols,
footer .grid-col,
footer .grid-items,
footer .grid-item,
footer .module,
footer .module-body {
background: transparent !important;
}
/* Row separation: hairlines instead of heavy blocks */
footer .grid-row + .grid-row {
border-top: 1px solid rgba(255, 255, 255, .08);
}
footer .grid-row,
footer .module {
border-color: rgba(255, 255, 255, .08) !important;
}
/* Bottom row (copyright): quieter and smaller */
footer .grid-row-6,
footer .module-info_blocks {
color: #8a8a8a;
font-size: 13px;
}
footer .module-info_blocks span {
color: #8a8a8a;
}
/* ==================== PRODUCT CARDS =============================== */
.main-products .product-thumb,
.module-products .product-thumb {
background: #ffffff !important;
border: 1px solid #e8e8e8 !important;
border-radius: 14px !important;
overflow: hidden;
transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.main-products .product-thumb:hover,
.module-products .product-thumb:hover {
border-color: #b87333 !important;
box-shadow: 0 14px 30px rgba(17, 17, 17, .12) !important;
transform: translateY(-3px);
}
.product-thumb .caption .name a {
color: #111111;
}
.product-thumb .caption .name a:hover {
color: #b87333;
}
.product-thumb .price,
.product-thumb .price-new {
color: #b87333 !important;
}
.product-thumb .price-old {
color: #9a9a9a;
}
.product-thumb .image {
background: #ffffff;
}
.product-thumb .image img {
transition: transform .35s ease;
}
.product-thumb:hover .image img {
transform: scale(1.03);
}
.product-thumb .product-labels .product-label {
border-radius: 999px;
}
/* --- Marquee strip (fast-delivery ribbon): black, not orange ------ */
.grid-row-top-4,
.grid-row-top-4::before,
.grid-row-top-4::after,
.grid-row-top-4 .grid-item::before,
.grid-row-top-4 .row-bg,
.grid-row-top-4 .col-bg {
background: #111111 !important;
}
.grid-row-top-4 .module-marquee .marquee-items,
.grid-row-top-4 .module-marquee .marquee-items span,
.grid-row-top-4 .module-marquee .marquee-items p {
color: #f2f2f2 !important;
}
.grid-row-top-4 .module-marquee .marquee-items b,
.grid-row-top-4 .module-marquee .marquee-items strong {
color: #d9985f !important;
}
/* --- Info-blocks strip (24h service / secure / returns): black ---- */
.grid-row-top-6,
.grid-row-top-6::before,
.grid-row-top-6::after,
.grid-row-top-6 .grid-item::before,
.grid-row-top-6 .row-bg,
.grid-row-top-6 .col-bg {
background: #111111 !important;
}
.grid-row-top-6 .info-blocks .title,
.grid-row-top-6 .info-blocks .module-title {
color: #ffffff !important;
}
.grid-row-top-6 .info-blocks p,
.grid-row-top-6 .info-blocks span:not([class*="icon"]) {
color: #b5b5b5;
}
.grid-row-top-6 .info-blocks i,
.grid-row-top-6 .info-blocks .module-icon,
.grid-row-top-6 .info-blocks [class*="icon"] {
color: #d9985f !important;
}
/* --- PDP: per-product additional information ---------------------- */
.av-pinfo {
font-size: 14px;
line-height: 1.9;
color: #302317;
}
.av-pinfo__specs {
margin: 0 0 14px;
padding: 0;
border-top: 1px solid #e8e8e8;
}
.av-pinfo__row {
display: flex;
gap: 12px;
padding: 9px 0;
border-bottom: 1px solid #f0eeea;
}
.av-pinfo__row dt {
flex: 0 0 34%;
max-width: 190px;
margin: 0;
color: #8a7a68;
font-weight: 600;
}
.av-pinfo__row dd {
flex: 1 1 auto;
margin: 0;
color: #111111;
font-weight: 600;
}
.av-pinfo__lead {
margin: 0 0 12px;
color: #4a3f34;
}
.av-pinfo__lead strong {
color: #b87333;
}
.av-pinfo__care {
margin: 0;
padding-inline-start: 18px;
color: #6b6b6b;
}
.av-pinfo__care li {
margin-bottom: 4px;
}
@media (max-width: 520px) {
.av-pinfo__row {
flex-direction: column;
gap: 2px;
}
.av-pinfo__row dt {
flex-basis: auto;
max-width: none;
font-size: 13px;
}
}
/* ==================== LAYOUT GUARDS =============================== */
/* Marquee module: animation strip must clip, never scroll */
.module-marquee {
overflow: hidden !important;
}
/* Nothing inside the grid should force horizontal scroll */
.site-wrapper {
overflow-x: clip;
}
/* ============ FOOTER — MOBILE LAYOUT (<=767px) ==================== */
/* On phones Journal lays the three link groups out as a 3-across
carousel row (grid-auto-flow: column) inside a 327px module: the
columns collapse to ~130px, every label wraps, and the row overflows
its own module. Give each group the full width instead and split its
links into two columns. Nothing is hidden — only laid out.
grid-auto-flow is the load-bearing declaration: without it the
template-columns below are ignored and items keep flowing sideways. */
@media (max-width: 767px) {
/* --- one group per row, full width --- */
footer .module-catalog .catalog-grid .auto-grid-items {
grid-auto-flow: row !important;
grid-template-columns: 1fr !important;
gap: 18px !important;
transform: none !important;
}
footer .module-catalog .catalog-grid .module-item {
width: auto !important;
margin: 0 !important;
}
/* every group is visible at once, so the carousel arrows are inert */
footer .module-catalog .auto-carousel-controls {
display: none;
}
/* --- a group's links: two comfortable columns --- */
/* the theme makes .subitems a flex column, which disables multicol —
switch it back to block so the two link columns actually form */
footer .module-catalog .subitems {
display: block !important;
column-count: 2;
column-gap: 18px;
}
footer .module-catalog .subitems > * {
break-inside: avoid;
}
footer .module-catalog .item-assets {
display: block;
}
/* --- group titles: smaller, shorter accent bar --- */
footer .catalog-title,
footer .title,
footer .module-title,
footer .info-block-title {
font-size: 13px !important;
padding-bottom: 8px !important;
margin-bottom: 6px !important;
letter-spacing: .06em;
}
footer .module-title::after,
footer .title::after {
width: 24px;
}
/* --- links: tighter rhythm, comfortable tap height --- */
footer .module-catalog li,
footer .links-menu li {
margin: 0 !important;
}
footer .module-catalog a:not(.catalog-title),
footer .links-menu li a {
display: block;
padding: 4px 0;
font-size: 13px;
line-height: 1.4;
}
/* --- brand logo: centred, capped --- */
footer .module-image img {
max-width: 150px;
height: auto;
}
footer .module-image .module-body {
display: flex;
justify-content: center;
}
/* --- social row: ringed chips, centred --- */
footer .grid-row-5 .icons-menu ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin: 0;
padding: 0;
}
footer .grid-row-5 .icons-menu li {
margin: 0 !important;
}
footer .grid-row-5 .icons-menu-item a {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 38px;
padding: 0 14px;
border: 1px solid rgba(255, 255, 255, .18);
border-radius: 999px;
font-size: 12.5px;
line-height: 1;
}
footer .grid-row-5 .icons-menu-item a:hover {
border-color: #b87333;
}
/* --- newsletter: 16px field stops iOS focus zoom --- */
footer .module-newsletter .module-title {
text-align: center;
}
footer .newsletter-text {
text-align: center;
font-size: 13px;
}
footer .module-newsletter .newsletter-form .input-group input.form-control,
footer .newsletter-form input.form-control,
footer .newsletter-form input,
footer input[type="text"],
footer input[type="email"] {
font-size: 16px !important;
height: 46px;
}
/* --- row rhythm: trim dead space between blocks --- */
footer .grid-row-3 .grid-cols-wrapper,
footer .grid-row-5 .grid-cols-wrapper {
padding-top: 18px;
padding-bottom: 18px;
}
footer .grid-row-5 .grid-col-1 .grid-item {
margin-bottom: 14px;
}
/* --- closing bar: quiet type only. Do NOT touch its flex direction:
the info-blocks strip inside is a marquee and collapses into a
multi-million-pixel row when its parent becomes a column. --- */
footer .grid-row-6 p,
footer .grid-row-6 span {
font-size: 12px;
}
}
/* ================================================================
ARABIVA FORMAT STATION — black / white / copper compact list
Visual override only. Selection, option sync, cart and bundle logic
remain owned by hararah_format_stations.
================================================================ */
html[data-fsp-variant="compactlist"] .fs {
--fs-bg-deep: #ffffff;
--fs-bg-card: #ffffff;
--fs-bg-card-hover: #ffffff;
--fs-bg-card-open: #ffffff;
--fs-bg-chip: #ffffff;
--fs-bg-chip-active: #ffffff;
--fs-border-soft: rgba(17, 17, 17, .14);
--fs-border-mid: #111111;
--fs-border-active: #b87333;
--fs-gold: #b87333;
--fs-gold-soft: #d9985f;
--fs-gold-deep: #8c5a28;
--fs-text-primary: #111111;
--fs-text-secondary: rgba(17, 17, 17, .72);
--fs-text-muted: rgba(17, 17, 17, .58);
--fs-text-faint: rgba(17, 17, 17, .4);
margin: 16px 0 28px;
padding: 16px;
color: #111111;
background: #ffffff;
border: 1px solid #111111;
border-radius: 18px;
box-shadow: 0 14px 40px rgba(17, 17, 17, .08);
font-family: inherit;
}
html[data-fsp-variant="compactlist"] .fs .fs-title {
align-items: center;
min-height: 64px;
margin: -16px -16px 14px;
padding: 14px 18px;
background: #111111;
border-bottom: 3px solid #b87333;
border-radius: 16px 16px 0 0;
}
html[data-fsp-variant="compactlist"] .fs .fs-title h2 {
color: #ffffff;
font-family: inherit;
font-size: clamp(18px, 2.2vw, 24px);
font-weight: 700;
line-height: 1.2;
letter-spacing: -.02em;
}
html[data-fsp-variant="compactlist"] .fs .fs-title .fs-hint {
color: #d9985f;
font-size: 10px;
font-weight: 700;
letter-spacing: .12em;
}
html[dir="rtl"][data-fsp-variant="compactlist"] .fs .fs-title h2,
html[dir="rtl"][data-fsp-variant="compactlist"] .fs .fs-title .fs-hint {
letter-spacing: 0;
}
html[data-fsp-variant="compactlist"] .fs .fs-stations {
background: #ffffff !important;
border-color: #111111 !important;
}
html[data-fsp-variant="compactlist"] .fs .fs-station::before {
margin: 0 !important;
padding: 11px 16px !important;
color: #ffffff !important;
background: #111111 !important;
}
html[data-fsp-variant="compactlist"] .fs .fs-size {
min-height: 58px;
box-shadow: inset 0 -1px 0 rgba(17, 17, 17, .13);
transform: none;
transition: background-color .2s ease, box-shadow .2s ease;
}
html[data-fsp-variant="compactlist"] .fs .fs-size.is-selected {
background: #ffffff !important;
box-shadow: inset 4px 0 0 #b87333;
}
html[data-fsp-variant="compactlist"] .fs .fs-size:hover {
background: rgba(184, 115, 51, .06) !important;
box-shadow: inset 4px 0 0 #d9985f;
}
html[data-fsp-variant="compactlist"] .fs .fs-size:focus-visible,
html[data-fsp-variant="compactlist"] .fs .fs-bundle-cta:focus-visible,
html[data-fsp-variant="compactlist"] .fs .hh-fs-ask-expert:focus-visible {
outline: 2px solid #b87333;
outline-offset: 2px;
}
html[dir="rtl"][data-fsp-variant="compactlist"] .fs .fs-size:hover,
[dir="rtl"] html[data-fsp-variant="compactlist"] .fs .fs-size:hover {
box-shadow: inset -4px 0 0 #d9985f;
}
html[dir="rtl"][data-fsp-variant="compactlist"] .fs .fs-size.is-selected,
[dir="rtl"] html[data-fsp-variant="compactlist"] .fs .fs-size.is-selected {
box-shadow: inset -4px 0 0 #b87333 !important;
}
html[data-fsp-variant="compactlist"] .fs .fs-bottle {
color: #b87333;
background: #ffffff;
border-color: rgba(17, 17, 17, .16);
box-shadow: none;
}
html[data-fsp-variant="compactlist"] .fs .fs-label,
html[data-fsp-variant="compactlist"] .fs .fs-amount {
color: #111111;
font-weight: 700;
}
html[data-fsp-variant="compactlist"] .fs .fs-money {
margin-inline-start: auto;
text-align: end;
}
html[data-fsp-variant="compactlist"] .fs .fs-badge {
color: #8c5a28;
background: #ffffff;
border-color: #b87333;
}
html[data-fsp-variant="compactlist"] .fs .fs-size.is-selected .fs-badge {
color: #ffffff;
background: #b87333;
}
html[data-fsp-variant="compactlist"] .fs .fs-bundle {
padding: 18px;
color: #111111;
background: #ffffff !important;
border-color: #111111 !important;
border-radius: 14px;
box-shadow: 0 10px 28px rgba(17, 17, 17, .08);
}
html[data-fsp-variant="compactlist"] .fs .fs-bundle::before {
background: none;
}
html[data-fsp-variant="compactlist"] .fs .fs-bundle-header {
margin: -18px -18px 16px;
padding: 12px 16px;
color: #ffffff;
background: #111111;
border-radius: 12px 12px 0 0;
border-bottom: 2px solid #b87333;
}
html[data-fsp-variant="compactlist"] .fs .fs-bundle-title,
html[data-fsp-variant="compactlist"] .fs .fs-bundle-spark {
color: #d9985f;
font-family: inherit;
}
html[data-fsp-variant="compactlist"] .fs .fs-bundle-pair {
background: #ffffff;
border: 1px solid rgba(17, 17, 17, .14);
border-radius: 10px;
}
html[data-fsp-variant="compactlist"] .fs .fs-bundle-price,
html[data-fsp-variant="compactlist"] .fs .fs-bundle-plus,
html[data-fsp-variant="compactlist"] .fs .fs-bundle-cross-tag {
color: #8c5a28;
}
html[data-fsp-variant="compactlist"] .fs .fs-bundle-pricing {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: center;
gap: 6px;
background: #ffffff;
border-color: rgba(17, 17, 17, .14);
}
html[data-fsp-variant="compactlist"] .fs .fs-bundle-pricing .fs-bundle-row {
justify-content: space-between;
width: 100%;
}
html[data-fsp-variant="compactlist"] .fs .fs-bundle-save {
grid-column: 1 / -1;
text-align: start;
}
html[data-fsp-variant="compactlist"] .fs .fs-bundle-save-pill {
color: #8c5a28;
background: #ffffff;
border-color: #b87333;
}
html[data-fsp-variant="compactlist"] .fs .fs-bundle-cta {
min-height: 48px;
color: #ffffff !important;
background: #111111 !important;
border-radius: 8px;
box-shadow: none;
transition: background-color .2s ease, color .2s ease;
}
html[data-fsp-variant="compactlist"] .fs .fs-bundle-cta:hover:not(:disabled) {
color: #111111;
background: #d9985f;
box-shadow: none;
}
html[data-fsp-variant="compactlist"] .fs .hh-fs-ask-expert {
color: #8c5a28;
background: #ffffff;
border-color: #b87333;
}
@media (max-width: 520px) {
html[data-fsp-variant="compactlist"] .fs {
margin-inline: -4px;
padding: 12px;
border-radius: 14px;
}
html[data-fsp-variant="compactlist"] .fs .fs-title {
min-height: 58px;
margin: -12px -12px 12px;
padding: 12px 14px;
border-radius: 12px 12px 0 0;
}
html[data-fsp-variant="compactlist"] .fs .fs-title h2 {
font-size: 18px;
}
html[data-fsp-variant="compactlist"] .fs .fs-title .fs-hint {
max-width: 92px;
text-align: end;
}
html[data-fsp-variant="compactlist"] .fs .fs-size {
min-height: 56px;
}
html[data-fsp-variant="compactlist"] .fs .fs-bundle-pair {
grid-template-columns: 1fr auto 1fr;
}
html[data-fsp-variant="compactlist"] .fs .fs-bundle-item {
padding: 4px 0;
}
}
/* Arabiva fragrance DNA — refined pyramid presentation on product pages. */
@keyframes arabiva-pyramid-rise {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes arabiva-copper-glow {
0%, 100% { filter: drop-shadow(0 0 0 rgba(184, 115, 51, 0)); }
50% { filter: drop-shadow(0 10px 18px rgba(184, 115, 51, .18)); }
}
/* These two auxiliary product popups are intentionally removed from the product media area. */
.route-product-product .product-extra-html .product-blocks-popup-btn,
.route-product-product .product-extra-description .product-blocks-popup-btn {
display: none;
}
/* ========== PRIVATE COLLECTION — description + DNA card =============
The Arabic PDP showed a bare list of notes in theme grey and a mostly
empty DNA card. Both now read as one house-voice panel: copper hairline
rules, black type, generous rhythm. Scoped to these two blocks only. */
.arabiva-private-desc {
color: #111111;
font-size: 15px;
line-height: 1.9;
max-width: 760px;
}
.arabiva-private-desc .apd-eyebrow {
margin: 0 0 6px;
font-size: 11.5px;
letter-spacing: .14em;
color: #b87333;
text-transform: uppercase;
}
.arabiva-private-desc .apd-lede {
margin: 0 0 20px;
font-size: 17px;
line-height: 1.85;
color: #111111;
}
.arabiva-private-desc .apd-close {
margin: 18px 0 0;
padding-top: 16px;
border-top: 1px solid #ece7e0;
color: #5c5348;
font-size: 14.5px;
}
/* the pyramid: three quiet rows, copper stage labels */
.arabiva-private-desc .apd-pyramid {
border: 1px solid #ece7e0;
border-radius: 16px;
overflow: hidden;
background: linear-gradient(180deg, #fffdfa, #ffffff);
}
.arabiva-private-desc .apd-tier {
display: grid;
grid-template-columns: 88px 1fr;
gap: 14px;
align-items: baseline;
padding: 14px 18px;
border-bottom: 1px solid #f3efe9;
}
.arabiva-private-desc .apd-tier:last-child { border-bottom: 0; }
.arabiva-private-desc .apd-stage {
font-size: 12px;
font-weight: 700;
letter-spacing: .08em;
color: #b87333;
}
.arabiva-private-desc .apd-notes { font-size: 15px; color: #111111; }
/* facts: label over value, hairline separated */
.arabiva-private-desc .apd-facts {
list-style: none;
margin: 18px 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
gap: 1px;
background: #ece7e0;
border: 1px solid #ece7e0;
border-radius: 14px;
overflow: hidden;
}
.arabiva-private-desc .apd-facts li {
margin: 0;
padding: 12px 14px;
background: #ffffff;
display: flex;
flex-direction: column;
gap: 3px;
}
.arabiva-private-desc .apd-facts span {
font-size: 11px;
letter-spacing: .06em;
color: #8a8175;
}
.arabiva-private-desc .apd-facts b { font-size: 14px; color: #111111; font-weight: 600; }
@media (max-width: 767px) {
.arabiva-private-desc { font-size: 14.5px; }
.arabiva-private-desc .apd-lede { font-size: 15.5px; }
.arabiva-private-desc .apd-tier { grid-template-columns: 64px 1fr; padding: 12px 14px; gap: 10px; }
.arabiva-private-desc .apd-facts { grid-template-columns: repeat(2, 1fr); }
}
/* --- DNA card: give the panel the same material as the description --- */
.hh-dna2 {
border-color: #ece7e0 !important;
border-radius: 18px !important;
background: linear-gradient(180deg, #fffdfa, #ffffff) !important;
}
.hh-dna2 .hh-dna2-eyebrow {
letter-spacing: .14em;
text-transform: uppercase;
color: #b87333 !important;
font-size: 11.5px !important;
}
.hh-dna2 .hh-dna2-title {
font-size: 19px !important;
font-weight: 700;
color: #111111 !important;
}
.hh-dna2 .hh-dna2-story {
font-size: 15px !important;
line-height: 1.9;
color: #3f3830 !important;
}
.hh-dna2 .hh-dna2-chip {
border-color: #e3d9cb !important;
background: #fffaf4 !important;
}
.hh-dna2 .hh-dna2-chip b { color: #b87333 !important; }
/* ── Top-bar language / currency dropdowns ───────────────────────────────────
The panels inherit the dark top bar's text colour (#f2f2f2) on a white
dropdown, so every option reads as invisible. Restore the black/white/copper
palette. (The old arabiva-polish.css styled these, but it is no longer
loaded by header.twig.) */
#language .arabiva-language-switcher .j-dropdown,
#currency .arabiva-currency-switcher .j-dropdown {
background: #ffffff !important;
border: 1px solid #e8e8e8 !important;
color: #111111 !important;
}
#language .arabiva-language-option,
#currency .arabiva-currency-option,
#language .arabiva-language-option-name,
#currency .arabiva-currency-option-title {
color: #111111 !important;
}
#language .arabiva-language-option-code,
#currency .arabiva-currency-option-code {
color: #b87333 !important;
font-weight: 800;
}
#language .arabiva-language-option.is-active,
#language .arabiva-language-option:hover,
#currency .arabiva-currency-option.is-active,
#currency .arabiva-currency-option:hover {
background: #b87333 !important;
}
#language .arabiva-language-option.is-active *,
#language .arabiva-language-option:hover *,
#currency .arabiva-currency-option.is-active *,
#currency .arabiva-currency-option:hover * {
color: #ffffff !important;
}
/* code and name were glued together ("BHDBahraini Dinar") — space them out and
line the names up in a column. Logical gap keeps LTR and RTL both correct. */
#language .arabiva-language-option,
#currency .arabiva-currency-option {
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
#language .arabiva-language-option-code,
#currency .arabiva-currency-option-code {
flex: 0 0 auto !important;
min-width: 42px !important;
}
#language .arabiva-language-option-name,
#currency .arabiva-currency-option-title {
flex: 1 1 auto !important;
}
/* ── RTL bidi: keep the + in front of the country code ───────────────────────
In an RTL paragraph "+96565506090" resolves as "96565506090+". Phone numbers
are LTR runs, so isolate them. */
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href^="tel:"] .links-text,
html[dir="rtl"] .store-tel {
direction: ltr !important;
unicode-bidi: embed !important;
display: inline-block !important;
}
/* Mixed Latin/Arabic info lines resolve their own direction per line. */
html[dir="rtl"] .info-block-text {
unicode-bidi: plaintext;
}
/* ── Footer: the block title rendered #1c2021 on the #111111 footer ───────── */
footer .module-info_blocks .info-block .info-block-title {
color: #ffffff !important;
}
footer .module-info_blocks .info-block .info-block-text {
color: rgba(255, 255, 255, .62) !important;
}
/* ── Newsletter button: grey label on copper ─────────────────────────────── */
footer .module-newsletter .btn-primary,
footer .module-newsletter .btn-primary * {
color: #ffffff !important;
}
/* ── PDP description: give the note rows their own rhythm ────────────────── */
/* المقدمة / القلب / الأساس used to sit in one paragraph separated by
,
which stacks them with zero gap next to the 32px paragraph rhythm around
them — and Chrome ignores box properties on
, so CSS alone could not
space them. tooling/hh_desc_note_rows.py turned each row into its own
.hh-note-row paragraph; they only need a tighter gap than a full one. */
.product-extra-description .block-content p.hh-note-row + p.hh-note-row {
margin-top: 10px;
}
/* On a phone every row wraps to two lines, so a 10px gap is barely wider
than the line spacing inside a row and the three rows read as one block.
Widen it until the break between rows clearly beats the break inside one. */
@media (max-width: 767px) {
.product-extra-description .block-content p.hh-note-row + p.hh-note-row {
margin-top: 18px;
}
}
/* ── Category pager: put it back ─────────────────────────────────────────── */
/* Journal's infinite-scroll module hides the pager on load (inline
style="display:none") and then takes over paging. It never appends:
verified on a fresh category page, scrolled to the bottom, with its own
threshold satisfied (offset 9185 >= threshold 7409) and nextUrl resolved.
So every category stopped at its first 36 products with no way forward —
1765 of them in الزيوت العطرية المستوحاة.
!important is required because the theme sets the inline style from JS.
Remove this once the theme's pagination setting is fixed in admin. */
.main-products + .pagination-results {
display: flex !important;
}
/* ARABIVA-RESPONSIVE-13IN:START — re-applied by tooling/hh_rebase_responsive.py, keep the markers */
/* ── Home "Our Collections" (categories module 825) ──────────────────────────
Journal lays this row out with a 320px minimum track, so the five collection
cards reflow by whatever happens to fit: 5 in a row only above ~1750px, then
4+1 (1440–1700px) and 3+2 (1200–1430px). On a 13" laptop the row therefore
splits and the leftovers stretch across the full width — it reads as a
stacked, non-responsive list rather than one collection row.
Pin the row to five equal tracks from 1200px up (the whole laptop/desktop
range) using Journal's own grid variables — no !important, no new layer.
Setting the minimum track to 0 lets the max-col term win, which resolves to
exactly one fifth of the row minus the gaps. Below 1200px the theme's own
reflow is left alone: tablets and phones keep the 2-up / 1-up behaviour. */
@media (min-width: 1200px) {
body div.module-categories-825 .category-grid.auto-grid {
--grid-min-width: 0px;
--grid-min-col: 5;
--grid-max-col: 5;
}
}
/* ── Category / search listings: three products per row on a laptop ──────────
The listing grid asks for a 320px minimum track, but the product column is
only 896px at 1280 and 982px at 1366 (the filter sidebar takes the rest), so
a 13" laptop gets just two products per row at 438–481px each — the cards
blow up and the page reads as a single stacked column. Only from 1440px up
does a third card fit.
A 260px minimum track restores the intended rhythm: 3-up from 1200px and
4-up on large desktops, with card widths staying in the 274–339px range
everywhere.
Tablets need their own tier. Journal picks the listing style server-side
from the user agent, so an iPad only started rendering the grid once the
tablet default was switched from List to Grid in the admin; before that this
rule had nothing to apply to. With the grid in place the 320px track leaves
a tablet on 2-up with 352–432px cards, which is looser than the phone's 2-up
at 165px and looser than the desktop. A 220px track carries the desktop's
3-up rhythm down through the whole tablet band at 229–281px cards. Phones
are below 768px and keep the theme's own 2-up. */
@media (min-width: 768px) and (max-width: 1199px) {
body div.main-products.product-grid.auto-grid {
--grid-min-width: 220px;
}
}
@media (min-width: 1200px) {
body div.main-products.product-grid.auto-grid {
--grid-min-width: 260px;
}
}
/* ── Desktop header: logo to the start, menu beside it ───────────────────────
The logo sits absolutely centred in the mid bar, and the theme caps the menu
at `calc(50% - logo/2)` so it can never run under it. The five top-level
items need 824px, but that cap leaves only 508px at 1280, 551px at 1366 and
668px at 1600 — they fit on one line only above ~1910px. Below that the menu
wraps, and because the bar has a fixed height the second line escapes it and
lands on the icon strip (and on the "Filter" heading on listing pages), which
is what put ACCORD OILS / RAW MATERIALS on top of the categories.
Tightening padding and type is not enough — even 11px type with 8px padding
still wraps at 1440 — so the menu needs the room instead: take the logo out
of the absolute centre and let it lead the flex row, then drop the cap. The
five items then hold one line down to the theme's own desktop-header cutoff,
with ~150px still free before the cart group at the narrowest width. All
logical properties, so RTL mirrors it for free. */
@media (min-width: 1025px) {
html.desktop-header-active header:not(.header-slim) .header-compact .mid-bar .desktop-logo-wrapper {
position: static;
inset-inline: auto;
transform: none;
margin-inline-end: 0;
}
html.desktop-header-active header:not(.header-slim) .header-compact .mid-bar .desktop-main-menu-wrapper {
max-width: none;
margin-inline-start: 20px;
margin-inline-end: auto;
}
/* one line, with the item padding easing off as the bar narrows */
html.desktop-header-active .header-compact .mid-bar .desktop-main-menu-wrapper .main-menu > .j-menu {
flex-wrap: nowrap;
}
html.desktop-header-active .header-compact .mid-bar .desktop-main-menu-wrapper .main-menu > .j-menu > .menu-item > a {
padding-inline: clamp(10px, 1.3vw, 26px);
white-space: nowrap;
}
/* Cap the mark. Centred and absolutely positioned, the wrapper shrank to its
200px min-width and the image sat inside it. As a flex item it is sized by
the anchor's fixed 90px height instead, so the wordmark stretched to
312×90 — the full height of the bar, edge to edge, with no air above or
below. Hold it to 56px tall (≈194px wide, near its old footprint) and let
the wrapper centre it in the bar.
These four need !important: the anchor's height and the image's 100% box
come from rules the theme weights heavily, and without it the mark grows
to 484×140 and overflows the bar by 25px on each side — measured, not
assumed. Four declarations, not a storm, and scoped to the desktop bar. */
html.desktop-header-active header:not(.header-slim) .header-compact .mid-bar .desktop-logo-wrapper {
min-width: 0 !important;
align-items: center;
}
html.desktop-header-active header:not(.header-slim) .header-compact .mid-bar .desktop-logo-wrapper #logo {
display: flex;
min-width: 0 !important;
align-items: center;
}
html.desktop-header-active header:not(.header-slim) .header-compact .mid-bar .desktop-logo-wrapper #logo > a {
height: auto !important;
}
html.desktop-header-active header:not(.header-slim) .header-compact .mid-bar .desktop-logo-wrapper img.header-logo {
max-height: 56px !important;
width: auto !important;
}
}
/* ── Product hero badges ─────────────────────────────────────────────────────
The identity plugin builds these chips and ships identity.css to style them,
but header.twig only enqueues identity.js — the stylesheet is on the server
and never linked. So the spans landed with no box at all: display:inline,
no padding, no margin, no background. They butted straight up against each
other and read as one run-on string, "SintraLong-Lasting OilAlcohol-Free".
Styling them here rather than linking identity.css or editing the plugin:
that file is another session's active area (its live JS is ahead of the
repo), and pulling in the whole stylesheet would restyle the rest of the
hero in its own cream-and-terracotta palette. These few rules give the
chips a box in the house black/white/copper instead, scoped to the hero so
nothing else with these classes is touched. No !important — the chips have
no competing rules, and if identity.css is ever linked this layer loads
after it. */
#hh-identity-hero .hh-id-badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
#hh-identity-hero .hh-id-badge {
display: inline-flex;
align-items: center;
padding: 5px 12px;
border: 1px solid #e8e8e8;
border-radius: 999px;
background: #ffffff;
color: #6b6b6b;
font-size: 11.5px;
font-weight: 600;
letter-spacing: .04em;
line-height: 1.5;
white-space: nowrap;
}
/* The verified-match chip carries the original fragrance name, so it leads:
copper rather than the neutral grey of the attribute chips. */
#hh-identity-hero .hh-id-badge.match {
border-color: rgba(184, 115, 51, .34);
background: rgba(184, 115, 51, .07);
color: #8c5a28;
}
/* ARABIVA-RESPONSIVE-13IN:END */