:root{--orl-ground:#FAF7F2;--orl-stone:#EEE7DA;--orl-stone-deep:#DDD3C2;--orl-ink:#2A2A28;--orl-ink-soft:#6A6864;--orl-accent:#9DB4C2;--orl-accent-deep:#4E6D7E;--orl-sky:#E4ECF0;--orl-sky-deep:#CBD9E1;--orl-sale:#7A2E22;--orl-stone-pale:#F3F0EA;--orl-stone-photo:url(/wp-content/themes/or-leami/assets/stone-band.webp?v=2);--orl-grain:url("data:image/svg+xml;utf8,");
--orl-ease: 200ms cubic-bezier(.2,.7,.3,1);
}
/* ---------- ground and type ---------- */
body { background: var(--orl-ground); color: var(--orl-ink); line-height: 1.65; }
h1, h2, h3, h4, .section-title span { color: var(--orl-ink); letter-spacing: 0; }
h1 { font-weight: 600; line-height: 1.1; }
.site-title, .site-title a { text-transform: uppercase; }
p.category.is-smaller, .product-small .category,
.woocommerce-breadcrumb, .breadcrumbs, .product_meta,
.woocommerce-result-count { color: var(--orl-ink-soft); }
a { color: var(--orl-ink); }
a:hover { color: var(--orl-accent-deep); }
/* ---------- stone surfaces with grain ---------- */
.header-bottom {
background-color: var(--orl-stone);
background-image: var(--orl-grain);
background-size: 180px 180px;
}
.footer-1 { background-color: var(--orl-sky); background-image: var(--orl-grain); background-size: 180px 180px; border-top: 1px solid var(--orl-sky-deep); }
.header-bottom { border-top: 1px solid var(--orl-stone-deep); border-bottom: 1px solid var(--orl-stone-deep); }
.header-main { border-bottom: 0; }
.absolute-footer, .absolute-footer.dark { background: var(--orl-sky-deep); color: var(--orl-ink); }
.absolute-footer a { color: var(--orl-ink); }
.footer-1 .widget-title, .footer-1 .widget a, .footer-1 { color: var(--orl-ink); }
.footer-1 .widget-title { font-family: "EB Garamond", Georgia, serif; font-weight: 600; letter-spacing: .04em; }
.footer-1 .menu li, .footer-1 .widget_product_categories li { border-color: var(--orl-stone-deep); }
/* ---------- topbar: the UVP line ---------- */
#top-bar { background: var(--orl-sky-deep); }
#top-bar, #top-bar a, #top-bar .nav > li > a { color: var(--orl-ink); font-family: "Assistant", sans-serif; letter-spacing: .06em; }
#top-bar a u { text-decoration-color: var(--orl-accent-deep); text-underline-offset: 3px; }
/* ---------- wide nav ---------- */
body #wide-nav .flex-left .nav-top-link {
border-right: 1px solid var(--orl-stone-deep);
letter-spacing: .08em;
transition: color var(--orl-ease), background-color var(--orl-ease);
}
body #wide-nav .menu-item:nth-child(5) .nav-top-link { border: none; }
#wide-nav .nav > li > a { color: var(--orl-ink); }
#wide-nav .nav > li > a:hover, #wide-nav .nav > li.current-menu-item > a { color: var(--orl-accent-deep); }
.nav-dropdown { border-color: var(--orl-stone-deep); background: var(--orl-ground); }
.nav-dropdown > li > a { color: var(--orl-ink); }
/* ---------- section titles: hairlines, not grey bars ---------- */
.section-title b, .section-title-center b, .section-title-normal b, .section-title-bold-center b { border-color: var(--orl-stone-deep) !important; border-top-width: 1px; opacity: 1; }
/* Home about band: the builder sets a cold grey overlay; warm it to the ground tone */
.page-id-2 .section .section-bg-overlay { background-color: rgba(250,247,242,.9) !important; }
.page-id-2 .section:has(.section-bg-overlay) .section-bg { background-color: var(--orl-stone) !important; }
/* "SEE MORE" pills: one style everywhere — ink outline, olive on hover */
.page-id-2 .button.primary, .page-id-2 .button.secondary, .page-id-2 a.button { background: transparent; border: 1px solid var(--orl-ink); color: var(--orl-ink); }
.page-id-2 .button.primary:hover, .page-id-2 .button.secondary:hover, .page-id-2 a.button:hover { background: var(--orl-accent-deep); border-color: var(--orl-accent-deep); color: #fff; }
.section-title span { font-family: "EB Garamond", Georgia, serif; font-weight: 600; letter-spacing: .04em; }
/* ---------- product cards: tiles set in a wall ---------- */
.product-small.box { background: #fff; border: 1px solid var(--orl-stone-deep); transition: border-color var(--orl-ease), transform var(--orl-ease); }
.product-small.box:hover { border-color: var(--orl-ink-soft); transform: translateY(-2px); }
.product-small .box-text { padding-top: 12px; padding-bottom: 14px; }
.product-small .product-title, .product-small .product-title a { font-size: 15px; font-weight: 500; color: var(--orl-ink); line-height: 1.35; }
.product-small .price, .price { color: var(--orl-ink); font-weight: 600; font-size: 15px; }
.price del, .product-small .price del { color: var(--orl-ink-soft); font-weight: 400; }
.price ins { text-decoration: none; }
.badge-inner.on-sale, .badge-inner { background: var(--orl-sale); color: #fff; font-family: "Assistant", sans-serif; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.badge-inner.new-bubble { background: var(--orl-accent-deep); }
.box-shadow, .row-box-shadow-1 .col-inner { box-shadow: none !important; }
/* ---------- buttons ---------- */
.button, button, input[type="submit"], .single_add_to_cart_button, .checkout-button, .wc-block-components-button {
font-family: "Assistant", sans-serif; font-weight: 600; letter-spacing: .08em;
border-radius: 2px; transition: background-color var(--orl-ease), color var(--orl-ease), border-color var(--orl-ease);
}
.button.primary, .single_add_to_cart_button, .checkout-button, button.primary, input[type="submit"].primary {
background: var(--orl-accent); border-color: var(--orl-accent); color: var(--orl-ink);
}
.button.primary:hover, .single_add_to_cart_button:hover, .checkout-button:hover, button.primary:hover {
background: var(--orl-accent-deep); border-color: var(--orl-accent-deep); color: #fff;
}
.single_add_to_cart_button.disabled, .single_add_to_cart_button:disabled { background: var(--orl-stone); border-color: var(--orl-stone-deep); color: var(--orl-ink-soft); opacity: 1; }
.button.is-outline, .button.secondary.is-outline { color: var(--orl-ink); border-color: var(--orl-ink); }
.button.is-outline:hover { background: var(--orl-ink); color: var(--orl-ground); }
.button.secondary { background: var(--orl-ink); border-color: var(--orl-ink); color: var(--orl-ground); }
.button.secondary:hover { background: var(--orl-accent-deep); border-color: var(--orl-accent-deep); }
/* ---------- forms ---------- */
select, input[type="text"], input[type="email"], input[type="search"], input[type="number"], textarea,
.select2-container .select2-selection--single {
border-color: var(--orl-stone-deep); background: #fff; color: var(--orl-ink); border-radius: 2px;
transition: border-color var(--orl-ease), box-shadow var(--orl-ease);
}
select:focus, input:focus, textarea:focus { border-color: var(--orl-accent-deep); box-shadow: 0 0 0 2px rgba(78,109,126,.22); }
.searchform .button.icon { background: var(--orl-ink); border-color: var(--orl-ink); }
.searchform .button.icon:hover { background: var(--orl-accent-deep); border-color: var(--orl-accent-deep); }
.qty, .quantity .button.minus, .quantity .button.plus { border-color: var(--orl-stone-deep); color: var(--orl-ink); }
/* ---------- shop sidebar and page title: the doorpost rule ---------- */
.shop-sidebar { border-inline-start: 6px solid var(--orl-stone); padding-inline-start: 18px;
background-image: linear-gradient(to right, var(--orl-stone-deep) 0, var(--orl-stone-deep) 1px, transparent 1px); background-size: 7px 100%; background-repeat: no-repeat; background-position: 0 0; }
.shop-sidebar .widget-title { font-family: "EB Garamond", Georgia, serif; font-weight: 600; font-size: 18px; letter-spacing: .03em; color: var(--orl-ink); }
.widget_product_categories li, .widget_layered_nav li { border-color: var(--orl-stone-deep); }
.widget_product_categories a { color: var(--orl-ink-soft); transition: color var(--orl-ease); }
.widget_product_categories a:hover, .widget_product_categories .current-cat > a { color: var(--orl-accent-deep); font-weight: 600; }
.shop-page-title .page-title-inner { border-inline-start: 6px solid var(--orl-stone); padding-inline-start: 18px; }
.shop-page-title h1 { font-family: "EB Garamond", Georgia, serif; }
.page-title-small { background: transparent; }
/* ---------- product page atoms ---------- */
.product-info .price { font-size: 22px; }
.product-info .product-short-description { color: var(--orl-ink); }
table.variations td.label { color: var(--orl-ink-soft); font-family: "Assistant", sans-serif; letter-spacing: .04em; text-transform: uppercase; font-size: 12px; }
.woocommerce-tabs .nav > li > a { color: var(--orl-ink-soft); }
.woocommerce-tabs .nav > li.active > a { color: var(--orl-ink); border-color: var(--orl-accent-deep); }
.nav-line > li > a:before, .nav-line-bottom > li > a:before { background: var(--orl-accent-deep); }
.tabbed-content hr, .product-info hr, .entry-content hr { border-color: var(--orl-stone-deep); }
.product-thumbnails .col { transition: opacity var(--orl-ease); }
.product-thumbnails .is-nav-selected a { border-color: var(--orl-accent-deep); }
/* ---------- PR 3: the gallery column is the doorpost ---------- */
.product-main .content-row { align-items: stretch; }
.product-main .product-gallery {
background-color: var(--orl-stone-pale);
background-image: var(--orl-stone-photo); background-size: cover; background-position: center top;
border-inline-end: 1px solid var(--orl-stone-deep); padding: 32px 32px 40px; margin-bottom: 0;
}
.product-main .product-gallery .woocommerce-product-gallery { border: 1px solid var(--orl-stone-deep); background: #fff; margin-bottom: 14px; }
.product-main .product-gallery .product-thumbnails img { background: #fff; }
.product-main .product-info { padding-inline-start: 40px; }
/* ---------- PR 3: trust block under the price (functions.php → .orl-trust) ---------- */
.product-info .orl-trust { list-style: none; margin: 14px 0 6px; padding: 14px 0; border-top: 1px solid var(--orl-stone-deep); border-bottom: 1px solid var(--orl-stone-deep); display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.product-info .orl-trust li { margin: 0; padding-inline-start: 12px; border-inline-start: 3px solid var(--orl-stone-deep); font-family: "Assistant", sans-serif; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--orl-ink); }
.product-info .orl-trust__link { margin: 0 0 18px; font-size: 13px; }
.product-info .orl-trust__link a { color: var(--orl-ink-soft); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--orl-stone-deep); }
.product-info .orl-trust__link a:hover { color: var(--orl-accent-deep); text-decoration-color: var(--orl-accent-deep); }
/* ---------- PR 3: size picker above the cart form (functions.php → .orl-sizes) ---------- */
.product-info .orl-sizes { margin: 4px 0 20px; }
.product-info .orl-sizes__label { font-family: "Assistant", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--orl-ink-soft); margin: 0 0 8px; }
.product-info .orl-sizes__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.product-info .orl-size, .product-info .orl-size:hover, .product-info .orl-size:focus {
display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 0; height: auto; margin: 0; padding: 10px 12px;
background: #fff; border: 1px solid var(--orl-stone-deep); border-radius: 2px; box-shadow: none; text-shadow: none;
color: var(--orl-ink); font-family: "Assistant", sans-serif; font-weight: 400; text-transform: none; letter-spacing: 0; line-height: 1.2; text-align: left;
cursor: pointer; transition: border-color var(--orl-ease), background-color var(--orl-ease), box-shadow var(--orl-ease);
}
.product-info .orl-size:hover { border-color: var(--orl-ink-soft); }
.product-info .orl-size.is-active, .product-info .orl-size.is-active:hover { border-color: var(--orl-accent-deep); box-shadow: inset 0 0 0 1px var(--orl-accent-deep); background: var(--orl-ground); }
.product-info .orl-size__in { font-family: "EB Garamond", Georgia, serif; font-size: 22px; font-weight: 600; line-height: 1; }
.product-info .orl-size__cm { font-size: 12px; color: var(--orl-ink-soft); }
.product-info .orl-size__price, .product-info .orl-size__price .woocommerce-Price-amount { font-size: 13px; font-weight: 600; color: var(--orl-ink); }
.product-info .orl-size__price { margin-top: 4px; }
.product-info .orl-sizes__note { font-size: 13px; color: var(--orl-ink-soft); line-height: 1.5; margin: 10px 0 0; max-width: 42em; }
.product-info table.variations { margin-bottom: 8px; }
/* ---------- pagination, breadcrumbs, misc ---------- */
.page-number { color: var(--orl-ink-soft); border-color: transparent; }
.page-number.current, .page-number:hover { background: var(--orl-accent-deep); color: #fff; border-color: var(--orl-accent-deep); }
.woocommerce-breadcrumb a:hover { color: var(--orl-accent-deep); }
.back-to-top, .back-to-top.button { background: var(--orl-ink) !important; border-color: var(--orl-ink) !important; color: var(--orl-ground) !important; }
.accordion-title, .accordion-inner { border-color: var(--orl-stone-deep); }
.accordion-title.active { color: var(--orl-accent-deep); }
.is-divider { background: var(--orl-stone-deep); }
.icon-box .icon-inner svg, .icon-box i { color: var(--orl-accent-deep); }
/* =====================================================================
PR 3 — Home hero: the doorpost (page ID 2, UX Builder section .orl-hero)
A tall vertical stone band on the left third; the product photo hangs in it,
overlapping its edge like a mezuzah mounted on the post. Copy = the UVP.
===================================================================== */
.orl-hero { position: relative; overflow: hidden; background: var(--orl-ground); min-height: clamp(560px, 74vh, 720px); display: flex; }
.orl-hero > .section-content { position: relative; z-index: 1; width: 100%; display: flex; align-items: center; }
.orl-hero::before {
content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 33.333%;
background-color: var(--orl-stone-pale);
background-image: var(--orl-stone-photo); background-size: cover; background-position: center top;
border-inline-end: 1px solid var(--orl-stone-deep);
transform-origin: top; animation: orl-post 600ms cubic-bezier(.2,.7,.3,1) both;
}
.orl-hero .row { margin: 0; width: 100%; max-width: 100%; }
/* sizes and padding live on .col-inner: the builder writes inline padding on .col */
.orl-hero .orl-hero__post { overflow: visible; }
.orl-hero .orl-hero__post > .col-inner { overflow: visible; width: 74%; max-width: 380px; margin: 0 0 0 34%; padding: 56px 0; }
.orl-hero .orl-hero__photo { width: 100%; margin: 0; position: relative; z-index: 2;
box-shadow: 18px 28px 48px -22px rgba(42,42,40,.38); animation: orl-rise 600ms cubic-bezier(.2,.7,.3,1) 150ms both; }
.orl-hero .orl-hero__photo .img-inner { border-radius: 0; }
.orl-hero .orl-hero__photo img { display: block; width: 100%; height: auto; }
.orl-hero .orl-hero__copy > .col-inner { padding: 72px clamp(24px, 6vw, 96px) 72px clamp(88px, 8.5vw, 128px); }
.orl-hero__eyebrow { font-family: "Assistant", sans-serif; font-weight: 600; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--orl-ink-soft); margin: 0 0 18px; }
.orl-hero__title { font-family: "EB Garamond", Georgia, serif; font-weight: 600; font-size: clamp(38px, 4.4vw, 64px); line-height: 1.05; letter-spacing: -.005em; color: var(--orl-ink); margin: 0 0 24px; max-width: 12em; }
.orl-hero__title span { display: block; }
.orl-hero__lede { font-family: "Assistant", sans-serif; font-size: 18px; line-height: 1.6; color: var(--orl-ink-soft); max-width: 30em; margin: 0 0 32px; }
.orl-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 0; }
.page-id-2 .orl-hero a.button.orl-hero__cta, .orl-hero a.button.orl-hero__cta {
background: var(--orl-accent); border: 1px solid var(--orl-accent); color: var(--orl-ink);
font-size: 15px; letter-spacing: .08em; padding: 0 30px; line-height: 3em; margin: 0; border-radius: 2px;
}
.page-id-2 .orl-hero a.button.orl-hero__cta:hover, .orl-hero a.button.orl-hero__cta:hover { background: var(--orl-accent-deep); border-color: var(--orl-accent-deep); color: #fff; }
.orl-hero__policy { font-family: "Assistant", sans-serif; font-size: 14px; color: var(--orl-ink-soft); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--orl-stone-deep); transition: color var(--orl-ease), text-decoration-color var(--orl-ease); }
.orl-hero__policy:hover { color: var(--orl-accent-deep); text-decoration-color: var(--orl-accent-deep); }
/* one orchestrated entrance: post grows, photo hangs, copy follows in three steps */
.orl-hero__text > * { animation: orl-rise 500ms cubic-bezier(.2,.7,.3,1) both; }
.orl-hero__text > :nth-child(1) { animation-delay: 240ms; }
.orl-hero__text > :nth-child(2) { animation-delay: 320ms; }
.orl-hero__text > :nth-child(3) { animation-delay: 400ms; }
.orl-hero__text > :nth-child(4) { animation-delay: 480ms; }
@keyframes orl-post { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes orl-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media only screen and (max-width: 849px) {
.orl-hero { min-height: 0; }
.orl-hero::before { width: 16%; }
.orl-hero .orl-hero__post > .col-inner { width: 62%; max-width: 260px; margin: 0 0 0 9%; padding: 24px 0 0; }
.product-main .product-gallery { padding: 20px 20px 24px; border-inline-end: 0; border-bottom: 1px solid var(--orl-stone-deep); }
.product-main .product-info { padding-inline-start: 15px; padding-top: 24px; }
.orl-hero .orl-hero__photo { box-shadow: 12px 18px 36px -18px rgba(42,42,40,.38); }
.orl-hero .orl-hero__copy > .col-inner { padding: 28px 20px 44px calc(16% + 18px); }
.orl-hero__title { font-size: clamp(30px, 8.4vw, 40px); max-width: none; margin-bottom: 18px; }
.orl-hero__title span { display: inline; }
.orl-hero__lede { font-size: 16px; margin-bottom: 24px; }
}
/* ---------- PR 3c: cart and checkout skin — colours only, no markup ---------- */
input[type="radio"], input[type="checkbox"] { accent-color: var(--orl-accent-deep); }
.breadcrumb-step, .checkout-breadcrumbs .breadcrumb-step { background: var(--orl-stone-deep); color: var(--orl-ink); }
/* `.current` sits on the , not an , and Flatsome's Customizer sets the
current step inline with !important — so match the real element and outrank it. */
.checkout-breadcrumbs a.current .breadcrumb-step,
.breadcrumbs a.current .breadcrumb-step { background-color: var(--orl-accent-deep) !important; color: #fff; }
.checkout-breadcrumbs a, .checkout-breadcrumbs li { color: var(--orl-ink-soft); }
.checkout-breadcrumbs li.current, .checkout-breadcrumbs li.current a { color: var(--orl-ink); }
.checkout-breadcrumbs .divider { color: var(--orl-stone-deep); }
.button.primary.is-outline, .button.is-outline, a.button-continue-shopping { background: transparent; border-color: var(--orl-ink); color: var(--orl-ink); }
.button.primary.is-outline:hover, .button.is-outline:hover, a.button-continue-shopping:hover { background: var(--orl-ink); border-color: var(--orl-ink); color: var(--orl-ground); }
.shop_table th, .shop_table td, .cart_totals th, .cart_totals td, .cart_totals .shop_table,
.woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td { border-color: var(--orl-stone-deep); }
.shop_table thead th, .cart_totals th, .woocommerce-checkout-review-order-table thead th { color: var(--orl-ink-soft); }
.woocommerce-cart-form .remove { color: var(--orl-ink-soft); border-color: var(--orl-stone-deep); }
.woocommerce-cart-form .remove:hover { color: #fff; background: var(--orl-sale); border-color: var(--orl-sale); }
#shipping_method li, .woocommerce-shipping-methods li, .wc_payment_methods li, .wc_payment_method, .payment_box { border-color: var(--orl-stone-deep); }
.payment_box, .woocommerce-checkout #payment .payment_box { background: var(--orl-stone); color: var(--orl-ink); }
.has-border, .is-dashed, .checkout_coupon.has-border { border-color: var(--orl-stone-deep); }
.coupon input, #coupon_code, .checkout_coupon input { border-color: var(--orl-stone-deep); }
.coupon .button.is-form, button.is-form, .button.is-form { background: #fff; border-color: var(--orl-stone-deep); color: var(--orl-ink); }
.coupon .button.is-form:hover, button.is-form:hover, .button.is-form:hover { background: var(--orl-ink); border-color: var(--orl-ink); color: var(--orl-ground); }
#place_order, .button.alt, button.alt, .woocommerce-checkout button.alt { background: var(--orl-accent); border-color: var(--orl-accent); color: var(--orl-ink); }
#place_order:hover, .button.alt:hover, button.alt:hover { background: var(--orl-accent-deep); border-color: var(--orl-accent-deep); color: #fff; }
.woocommerce-info, .woocommerce-message, .woocommerce-error { border-color: var(--orl-stone-deep); background: var(--orl-stone); color: var(--orl-ink); }
.woocommerce-message { border-left-color: var(--orl-accent-deep); }
.woocommerce-error { border-left-color: var(--orl-sale); }
.woocommerce-info a, .woocommerce-message a { color: var(--orl-accent-deep); }
.cart-icon strong { border-color: var(--orl-ink); color: var(--orl-ink); }
.cart-icon strong:after { border-color: var(--orl-ink); }
.header-cart-link .cart-icon strong .cart-count, .cart-count, .icon-shopping-basket + .cart-count { background: var(--orl-accent-deep); color: #fff; }
/* ---------- Rosh Hashanah creative (creative/rosh-hashanah): hero variant + category strip ---------- */
.orl-hero--rh .orl-hero__title { font-size: clamp(36px, 4vw, 58px); max-width: 13em; }
.orl-rh-strip { position: relative; margin: 0 0 28px; padding: 22px 28px 24px 36px;
background-color: var(--orl-stone-pale); background-image: var(--orl-stone-photo); background-size: cover; background-position: center; border: 1px solid var(--orl-stone-deep); }
.orl-rh-strip::before { content: ""; position: absolute; top: -1px; bottom: -1px; left: -1px; width: 8px; background: var(--orl-stone-deep); }
.orl-rh-strip__title { margin: 0 0 6px; font-family: "EB Garamond", Georgia, serif; font-weight: 600; font-size: 26px; line-height: 1.15; color: var(--orl-ink); }
.orl-rh-strip__uvp { margin: 0; font-family: "Assistant", sans-serif; font-size: 14px; color: var(--orl-ink-soft); }
@media only screen and (max-width: 849px) {
.orl-hero--rh .orl-hero__title { font-size: clamp(28px, 7.6vw, 36px); }
.orl-rh-strip { padding: 18px 18px 20px 26px; }
.orl-rh-strip__title { font-size: 22px; }
}
/* ---------- button chevrons ----------
Flatsome's reveal-icon keeps the arrow at opacity 0 until hover, and lands it
flush against the label (measured gap: -1px) with 48px of dead space after it.
One treatment everywhere: the chevron is always visible, sits after the label
with real space, points the way the link goes, and nudges forward on hover. */
.button.reveal-icon i, a.button.reveal-icon i,
.button i.icon-angle-right, a.button i.icon-angle-right {
opacity: 1; margin-left: 12px; margin-right: 0;
transition: transform var(--orl-ease);
}
.button.reveal-icon:hover i, a.button.reveal-icon:hover i,
.button:hover i.icon-angle-right, a.button:hover i.icon-angle-right { transform: translateX(4px); }
/* the hero CTA carries the same chevron, added in CSS so the copy stays one string */
.orl-hero__cta::after {
content: "\f105 "; font-family: "fl-icons"; font-weight: 400; font-size: 1.1em;
display: inline-block; margin-left: 12px; line-height: 1;
transition: transform var(--orl-ease);
}
.orl-hero__cta:hover::after { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
.button i, .orl-hero__cta::after { transition: none !important; }
.button:hover i, .orl-hero__cta:hover::after { transform: none !important; }
}
/* ---------- responsive polish (measured 1920 → 360) ---------- */
/* trust block: two columns get cramped under ~420px */
@media only screen and (max-width: 420px) {
.product-info .orl-trust { grid-template-columns: 1fr; gap: 8px; }
}
/* small phones: tighten the hero so the CTA lands near the fold on a 640px screen */
@media only screen and (max-width: 400px) {
.orl-hero .orl-hero__post > .col-inner { width: 58%; max-width: 210px; padding-top: 18px; }
.orl-hero .orl-hero__copy > .col-inner { padding: 20px 18px 32px calc(16% + 14px); }
.orl-hero__eyebrow { margin-bottom: 12px; }
.orl-hero__title { margin-bottom: 14px; }
.orl-hero__lede { margin-bottom: 18px; font-size: 15px; }
.orl-hero__actions { gap: 10px 16px; }
}
/* the size tiles never need more than five columns */
@media only screen and (min-width: 700px) {
.product-info .orl-sizes__list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* ---------- focus and reduced motion ---------- */
a:focus-visible, button:focus-visible, .button:focus-visible, input:focus-visible, select:focus-visible {
outline: 2px solid var(--orl-accent-deep); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
.product-small.box:hover { transform: none; }
}
@media only screen and (max-width: 48em) {
.shop-sidebar { border-inline-start: 0; padding-inline-start: 0; background-image: none; }
.product-small .product-title, .product-small .product-title a { font-size: 14px; }
}
/* ---------- AOV stage 2: kosher scroll add-on (functions.php → .orl-scroll) ---------- */
.product-info .orl-scroll { margin: 0 0 20px; padding: 12px 14px; border: 1px solid var(--orl-stone-deep); border-radius: 2px; background: #fff; }
.product-info .orl-scroll[hidden] { display: none; }
.product-info .orl-scroll__row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px; margin: 0; cursor: pointer; font-weight: 400; }
.product-info .orl-scroll__row input { margin: 3px 0 0; width: 16px; height: 16px; accent-color: var(--orl-accent-deep); }
.product-info .orl-scroll__text { display: block; min-width: 0; }
.product-info .orl-scroll__name { display: block; font-size: 15px; font-weight: 600; color: var(--orl-ink); line-height: 1.3; }
.product-info .orl-scroll__price { font-weight: 400; color: var(--orl-ink-soft); }
.product-info .orl-scroll__note { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--orl-ink-soft); }
/* ---------- AOV after-sale: one-time offer over the thank-you page (functions.php → .orl-after) ----------
Deliberately outside the site's quiet stone palette (Gil, 2026-09-22): it has to stop the eye.
Dark box, Jerusalem gold, one huge number, centred. Local tokens only — nothing leaks out. */
.orl-after {
--oa-bg: #1c1b19; --oa-bg-2: #262420; --oa-gold: #d9ad45; --oa-gold-hi: #f0c860; --oa-gold-deep: #a8801f;
--oa-text: #f7f2e8; --oa-mute: rgba(247,242,232,.68); --oa-line: rgba(217,173,69,.28);
position: fixed; inset: 0; z-index: 2147483647; /* above the WhatsApp (…645) and accessibility (…646) buttons */ display: flex; align-items: center; justify-content: center;
padding: 16px; overflow-y: auto; background: rgba(18,17,15,.8); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
animation: orl-after-fade 260ms ease-out both;
}
body:has(.orl-after) { overflow: hidden; }
.orl-after__box {
position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 32px); overflow-y: auto; margin: auto;
padding: 30px 30px 20px; text-align: center; color: var(--oa-text); font-family: "Assistant", sans-serif;
background: radial-gradient(120% 70% at 50% 0%, #34302a 0%, var(--oa-bg) 62%); border: 1px solid var(--oa-line); border-radius: 10px;
box-shadow: 0 0 0 6px rgba(217,173,69,.08), 0 40px 90px -30px rgba(0,0,0,.8);
animation: orl-after-pop 420ms cubic-bezier(.2,.9,.25,1.15) 80ms both;
}
.orl-after__box::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 10px 10px 0 0; background: linear-gradient(90deg, var(--oa-gold-deep), var(--oa-gold-hi), var(--oa-gold-deep)); }
.orl-after__flag { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--oa-mute); }
.orl-after__tick { width: 18px; height: 18px; border-radius: 50%; background: #3f8f5a; position: relative; flex: none; }
.orl-after__tick::after { content: ""; position: absolute; left: 6px; top: 3px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.orl-after__big { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 2px 0 0; line-height: .85; }
.orl-after__pct { font-family: "Assistant", sans-serif; font-weight: 800; font-size: clamp(84px, 22vw, 128px); letter-spacing: -.045em;
background: linear-gradient(180deg, var(--oa-gold-hi) 0%, var(--oa-gold) 55%, var(--oa-gold-deep) 100%); -webkit-background-clip: text; background-clip: text; color: var(--oa-gold); -webkit-text-fill-color: transparent; }
.orl-after__off { font-weight: 800; font-size: clamp(22px, 6vw, 32px); letter-spacing: .12em; color: var(--oa-text); writing-mode: vertical-rl; transform: rotate(180deg); }
.orl-after__title { margin: 10px 0 6px; font-family: "EB Garamond", Georgia, serif; font-weight: 600; font-size: clamp(26px, 6vw, 34px); line-height: 1.1; color: var(--oa-text); }
.orl-after__lede { margin: 0 auto 18px; max-width: 30em; font-size: 16px; line-height: 1.45; color: var(--oa-mute); }
.orl-after__hero { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0 0 14px; }
.orl-after__hero img { display: block; width: 116px; height: 116px; object-fit: cover; margin: 0; border-radius: 8px; border: 2px solid var(--oa-gold); box-shadow: 0 12px 28px -12px rgba(0,0,0,.7); }
.orl-after__name { margin: 4px 0 0; font-size: 15px; font-weight: 600; color: var(--oa-text); }
.orl-after__save { display: inline-block; margin: 2px 0 0; padding: 4px 12px; border-radius: 999px; background: rgba(63,143,90,.18); border: 1px solid rgba(98,190,128,.45); color: #9fe0b3; font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.orl-after__sizes { margin: 0 0 16px; padding: 0; border: 0; min-width: 0; }
.orl-after__sizes legend { float: left; width: 100%; padding: 0; margin: 0 0 8px; border: 0; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--oa-mute); }
.orl-after__tiles { clear: both; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.orl-after__tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; margin: 0; padding: 10px 4px 8px; cursor: pointer;
background: var(--oa-bg-2); border: 1px solid var(--oa-line); border-radius: 6px; font-weight: 400; transition: border-color 150ms, background-color 150ms, transform 150ms; }
.orl-after__tile:hover { border-color: var(--oa-gold); }
.orl-after__tile input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.orl-after__tile:has(input:checked) { background: rgba(217,173,69,.14); border-color: var(--oa-gold); box-shadow: inset 0 0 0 1px var(--oa-gold); transform: translateY(-1px); }
.orl-after__tile:has(input:focus-visible) { outline: 2px solid var(--oa-gold-hi); outline-offset: 2px; }
.orl-after__tile-size { font-size: 15px; font-weight: 700; color: var(--oa-text); line-height: 1.1; }
.orl-after__tile-in { font-size: 11px; color: var(--oa-mute); }
.orl-after__tile-now { margin-top: 4px; font-size: 17px; font-weight: 800; color: var(--oa-gold-hi); line-height: 1; }
.orl-after__tile-was { font-size: 12px; color: var(--oa-mute); text-decoration-thickness: 1px; }
.orl-after .orl-after__cta, .orl-after .orl-after__cta:hover, .orl-after .orl-after__cta:focus {
display: block; width: 100%; margin: 0; padding: 18px 20px; min-height: 0; border: 0; border-radius: 8px; cursor: pointer;
background: linear-gradient(180deg, var(--oa-gold-hi) 0%, var(--oa-gold) 100%); color: #1c1b19;
font-family: "Assistant",sans-serif;font-size:20px;font-weight:800;line-height:1.15;letter-spacing:.01em;text-transform:none;text-shadow:none;box-shadow:0 14px 30px -12px rgb(217 173 69 / .75),inset 0 -2px 0 rgb(0 0 0 / .18);animation:orl-after-pulse 2.2s ease-in-out 900ms infinite;position:sticky;bottom:0;z-index:2}.orl-after__take{position:relative}.orl-after .orl-after__cta:hover{background:linear-gradient(180deg,#ffd978 0%,var(--oa-gold-hi) 100%);transform:translateY(-1px)}.orl-after .orl-after__alt{display:inline-block;margin:10px 0 0;padding:6px;min-height:0;background:none;border:0;box-shadow:none;cursor:pointer;color:var(--oa-gold-hi);font-size:14px;font-weight:600;text-transform:none;letter-spacing:0;text-decoration:underline;text-underline-offset:3px}.orl-after__decline{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px;margin:16px 0 0;padding:14px 0 0;border-top:1px solid rgb(247 242 232 / .12);text-align:left}.orl-after__no{display:flex;align-items:flex-start;gap:8px;margin:0;flex:1 1 15em;font-size:13px;font-weight:400;line-height:1.4;color:var(--oa-mute);cursor:pointer}.orl-after__no input{margin:2px 0 0;flex:none;width:16px;height:16px;accent-color:var(--oa-gold)}.orl-after .orl-after__continue{margin:0;padding:8px 16px;min-height:0;background:#fff0;border:1px solid rgb(247 242 232 / .25);box-shadow:none;border-radius:6px;color:var(--oa-mute);font-size:13px;font-weight:600;text-transform:none;letter-spacing:0}.orl-after .orl-after__cta:focus-visible,.orl-after .orl-after__alt:focus-visible,.orl-after .orl-after__continue:focus-visible{outline:2px solid var(--oa-gold-hi);outline-offset:3px}@keyframes orl-after-fade{from{opacity:0}to{opacity:1}}@keyframes orl-after-pop{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}@keyframes orl-after-pulse{0%,100%{box-shadow:0 14px 30px -12px rgb(217 173 69 / .75),0 0 0 0 rgb(240 200 96 / .45),inset 0 -2px 0 rgb(0 0 0 / .18)}50%{box-shadow:0 14px 30px -12px rgb(217 173 69 / .75),0 0 0 10px #fff0,inset 0 -2px 0 rgb(0 0 0 / .18)}}@media (prefers-reduced-motion:reduce){.orl-after,.orl-after__box,.orl-after .orl-after__cta{animation:none}}@media only screen and (min-width:521px) and (max-height:860px){.orl-after__box{padding-top:22px}.orl-after__pct{font-size:100px}.orl-after__lede{margin-bottom:12px}.orl-after__hero img{width:88px;height:88px}}@media only screen and (max-width:520px){.orl-after{padding:8px}.orl-after__box{padding:20px 14px 14px;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px)}.orl-after__flag{font-size:11px;letter-spacing:.04em}.orl-after__pct{font-size:80px}.orl-after__off{font-size:20px}.orl-after__title{margin-top:6px;font-size:25px}.orl-after__lede{margin-bottom:12px;font-size:14px}.orl-after__hero{display:grid;grid-template-columns:64px 1fr;grid-template-rows:auto auto;column-gap:12px;row-gap:4px;align-items:center;justify-items:start;text-align:left;margin-bottom:12px}.orl-after__hero img{grid-row:1 / 3;width:64px;height:64px;border-radius:6px}.orl-after__name{margin:0;font-size:14px}.orl-after__save{margin:0;font-size:12px;padding:3px 10px}.orl-after__tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.orl-after__tile{padding:7px 2px 6px}.orl-after__tile-size{font-size:14px}.orl-after__tile-now{margin-top:2px;font-size:16px}.orl-after .orl-after__cta{font-size:18px;padding:15px 12px}.orl-after .orl-after__alt{margin-top:6px;font-size:13px}.orl-after__decline{margin-top:10px;padding-top:10px}}