/* ==========================================================================
OMIS · WooCommerce — חנות, קטגוריה, מוצר, עגלה, צ׳קאאוט וחשבון
========================================================================== */
/* --------------------------------------------------------------------------
1. כפתורים משותפים
-------------------------------------------------------------------------- */
.omis-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .woocommerce-Button,
.wc-block-components-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
height: 5rem;
padding-inline: 3rem;
border: 1px solid var(--omis-ink);
border-radius: 999px;
background: var(--omis-ink);
color: var(--omis-cream);
font-family: var(--omis-font);
font-size: 1.55rem;
font-weight: var(--omis-medium);
line-height: 1;
text-align: center;
cursor: pointer;
transition: background-color 0.25s var(--omis-ease), color 0.25s var(--omis-ease),
border-color 0.25s var(--omis-ease), transform 0.25s var(--omis-ease);
}
.omis-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .woocommerce-Button:hover {
background: var(--omis-olive);
border-color: var(--omis-olive);
color: var(--omis-cream);
transform: translateY(-2px);
}
.omis-btn--ghost,
.woocommerce a.button.omis-btn--ghost,
.woocommerce .product a.button {
background: transparent;
color: var(--omis-ink);
border-color: var(--omis-ink);
}
.omis-btn--ghost:hover,
.woocommerce .product a.button:hover {
background: var(--omis-ink);
color: var(--omis-cream);
border-color: var(--omis-ink);
}
.omis-btn--sage {
background: var(--omis-sage);
border-color: var(--omis-sage);
color: var(--omis-ink);
}
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
background: var(--omis-ink);
border-color: var(--omis-ink);
color: var(--omis-cream);
}
.woocommerce button.button:disabled,
.woocommerce button.button.disabled,
.woocommerce a.button.disabled {
opacity: 0.45;
cursor: not-allowed;
transform: none;
}
@media (max-width: 1023.98px) {
.omis-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
height: 4.2rem;
padding-inline: 2.2rem;
font-size: 1.35rem;
}
}
/* --------------------------------------------------------------------------
2. שדות טופס גנריים
-------------------------------------------------------------------------- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single,
.omis-input {
width: 100%;
min-height: 5rem;
background: var(--omis-white);
border: 1px solid var(--omis-line);
border-radius: 1rem;
padding: 1.2rem 1.6rem;
font-family: var(--omis-font);
font-size: 1.5rem;
color: var(--omis-ink);
transition: border-color 0.2s var(--omis-ease), box-shadow 0.2s var(--omis-ease);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.omis-input:focus {
outline: none;
border-color: var(--omis-sage);
box-shadow: 0 0 0 0.4rem rgba(167, 165, 120, 0.22);
}
.woocommerce form .form-row label {
font-size: 1.4rem;
font-weight: var(--omis-medium);
margin-bottom: 0.7rem;
display: block;
}
.woocommerce form .form-row {
margin-bottom: 1.8rem;
padding: 0;
}
.required {
color: var(--omis-sale);
text-decoration: none;
}
/* --------------------------------------------------------------------------
3. Hero לעמודי חנות / קטגוריה
-------------------------------------------------------------------------- */
.omis-shop-hero {
background: var(--omis-sage);
color: var(--omis-ink);
position: relative;
background-size: cover;
background-position: center;
isolation: isolate;
}
.omis-shop-hero--image {
color: var(--omis-cream);
}
.omis-shop-hero--image::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(30, 32, 27, 0.72), rgba(30, 32, 27, 0.28));
z-index: -1;
}
.omis-shop-hero__inner {
padding: 7.6rem var(--omis-gutter) 6.4rem;
text-align: center;
}
.omis-shop-hero__title {
font-size: 4.8rem;
font-weight: var(--omis-medium);
line-height: 1.12;
letter-spacing: -0.01em;
margin-top: 1.2rem;
}
.omis-shop-hero__desc {
margin-top: 1.4rem;
font-size: 1.7rem;
line-height: 1.7;
max-width: 62rem;
margin-inline: auto;
opacity: 0.86;
}
.omis-breadcrumbs ol {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.7rem;
font-size: 1.3rem;
opacity: 0.8;
}
.omis-breadcrumbs li + li::before {
content: '›';
margin-inline-end: 0.7rem;
opacity: 0.6;
}
.omis-breadcrumbs a:hover {
text-decoration: underline;
text-underline-offset: 0.3rem;
}
@media (max-width: 1023.98px) {
.omis-shop-hero__inner {
padding: 3.4rem var(--omis-gutter) 3rem;
}
.omis-shop-hero__title {
font-size: 2.9rem;
}
.omis-shop-hero__desc {
font-size: 1.35rem;
}
.omis-breadcrumbs ol {
font-size: 1.1rem;
}
}
.woocommerce-products-header,
.woocommerce-breadcrumb {
display: none;
}
/* --------------------------------------------------------------------------
4. גריד החנות
-------------------------------------------------------------------------- */
.omis-shop {
background: var(--omis-cream);
padding-block: 5.4rem 10rem;
}
.omis-shop__inner {
padding-inline: var(--omis-gutter);
}
.woocommerce-notices-wrapper:empty {
display: none;
}
.omis-shop-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
flex-wrap: wrap;
padding-bottom: 2.4rem;
margin-bottom: 3.6rem;
border-bottom: 1px solid var(--omis-line);
}
.woocommerce-result-count {
margin: 0;
font-size: 1.45rem;
color: var(--omis-ink-70);
}
.woocommerce-ordering select {
min-height: 3.8rem;
border: 1px solid var(--omis-line);
border-radius: 999px;
background: var(--omis-white);
/* רווח נשימה בין המלל לחץ (החץ יושב בצד שמאל), והפיל כולו צר יותר. */
padding: 0 2rem 0 3.4rem;
font-size: 1.35rem;
appearance: none;
background-image: linear-gradient(45deg, transparent 50%, var(--omis-ink) 50%), linear-gradient(135deg, var(--omis-ink) 50%, transparent 50%);
background-position: calc(1.4rem) calc(50% + 1px), calc(1.9rem) calc(50% + 1px);
background-size: 0.5rem 0.5rem, 0.5rem 0.5rem;
background-repeat: no-repeat;
}
.omis-cat-pills {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 3.2rem;
}
.omis-cat-pills a {
display: inline-flex;
align-items: center;
height: 3.8rem;
padding-inline: 1.8rem;
border: 1px solid var(--omis-line);
border-radius: 999px;
font-size: 1.4rem;
background: var(--omis-white);
transition: background-color 0.2s var(--omis-ease), color 0.2s var(--omis-ease), border-color 0.2s var(--omis-ease);
}
.omis-cat-pills a:hover,
.omis-cat-pills a.is-active {
background: var(--omis-ink);
border-color: var(--omis-ink);
color: var(--omis-cream);
}
.woocommerce ul.products {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 3.4rem 2.2rem;
margin: 0;
padding: 0;
list-style: none;
align-items: stretch;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after {
display: none;
}
.woocommerce ul.products li.product {
width: auto !important;
margin: 0 !important;
float: none !important;
text-align: start;
display: flex;
flex-direction: column;
height: 100%;
}
.omis-card__media {
position: relative;
display: block;
width: 100%;
aspect-ratio: 4 / 5;
height: auto;
border-radius: var(--omis-radius-card);
overflow: hidden;
background: var(--omis-cream-soft);
margin: 0;
}
.omis-card__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: opacity 0.55s var(--omis-ease);
}
.omis-card__hover {
position: absolute;
inset: 0;
opacity: 0;
}
.omis-card__mediawrap:hover .omis-card__hover,
.omis-card__media:hover .omis-card__hover {
opacity: 1;
}
.omis-badge {
position: absolute;
top: 1.2rem;
inset-inline-start: 1.2rem;
z-index: 2;
padding: 0.5rem 1.1rem;
border-radius: 999px;
font-size: 1.15rem;
font-weight: var(--omis-medium);
letter-spacing: 0.02em;
background: var(--omis-sale);
color: var(--omis-cream);
}
.omis-badge--out {
background: var(--omis-ink);
}
.omis-card__body {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
.omis-card__title {
font-size: 1.55rem;
font-weight: var(--omis-medium);
line-height: 1.35;
margin-bottom: 0.5rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: calc(1.55rem * 1.35 * 2);
}
.omis-price-range {
display: inline-flex;
align-items: baseline;
gap: 0.45rem;
white-space: nowrap;
}
.omis-price-from {
font-size: 0.62em;
font-weight: var(--omis-regular);
color: var(--omis-ink-45);
letter-spacing: 0.02em;
}
.omis-card__title a:hover {
opacity: 0.7;
}
.omis-card__foot {
margin-bottom: 1.2rem;
}
.woocommerce ul.products li.product .price {
font-size: 1.5rem;
}
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price {
color: var(--omis-ink);
font-size: 1.6rem;
font-weight: var(--omis-medium);
margin: 0;
}
.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del {
color: var(--omis-ink-45);
font-weight: var(--omis-regular);
margin-inline-end: 0.8rem;
}
.woocommerce ul.products li.product .price ins,
.woocommerce div.product p.price ins {
text-decoration: none;
color: var(--omis-sale);
}
.omis-card__cta {
margin-top: auto;
}
.omis-card__cta .button {
width: 100%;
height: 4.2rem;
font-size: 1.32rem;
padding-inline: 1.4rem;
}
.woocommerce ul.products li.product .added_to_cart {
display: none;
}
/* פאגינציה */
.woocommerce nav.woocommerce-pagination {
margin-top: 6rem;
}
.woocommerce nav.woocommerce-pagination ul {
display: flex;
justify-content: center;
gap: 0.8rem;
border: 0;
}
.woocommerce nav.woocommerce-pagination ul li {
border: 0;
margin: 0;
overflow: visible;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
min-width: 4.2rem;
height: 4.2rem;
display: grid;
place-items: center;
border-radius: 999px;
border: 1px solid var(--omis-line);
font-size: 1.45rem;
padding: 0 1.2rem;
background: var(--omis-white);
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
background: var(--omis-ink);
border-color: var(--omis-ink);
color: var(--omis-cream);
}
@media (max-width: 1023.98px) {
.omis-shop {
padding-block: 2.6rem 5rem;
}
.woocommerce ul.products {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2.4rem 1.2rem;
}
.omis-card__title {
font-size: 1.4rem;
min-height: calc(1.4rem * 1.35 * 2);
}
.woocommerce ul.products li.product .price {
font-size: 1.3rem;
}
.omis-card__cta .button {
height: 3.6rem;
font-size: 1.2rem;
}
.omis-shop-toolbar {
margin-bottom: 2.4rem;
padding-bottom: 1.6rem;
}
.woocommerce-result-count,
.woocommerce-ordering select {
font-size: 1.25rem;
}
}
/* --------------------------------------------------------------------------
5. עמוד מוצר
-------------------------------------------------------------------------- */
.omis-product {
/* הוחלף עם גוון ההדר לבקשת הלקוחה — רקע בהיר יותר, הטקסט בולט יותר. */
background: var(--omis-cream);
padding-block: 3rem 9rem;
border-top: 1px solid var(--omis-line);
}
.omis-product__inner {
padding-inline: var(--omis-gutter);
}
/* גלריה מימין (עמודה ראשונה ב-RTL), פרטי המוצר משמאל */
.woocommerce div.product {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
gap: 5rem;
align-items: start;
margin-top: 2.6rem;
background: var(--omis-cream);
border: 1px solid var(--omis-line);
border-radius: 2.4rem;
padding: 4rem;
box-shadow: 0 2rem 5rem rgba(47, 51, 45, 0.05);
}
.woocommerce div.product > .omis-breadcrumbs {
grid-column: 1 / -1;
margin-bottom: -1.4rem;
}
.woocommerce div.product > .omis-breadcrumbs ol {
justify-content: flex-start;
}
.woocommerce div.product .woocommerce-product-gallery {
width: 100% !important;
float: none !important;
margin: 0 !important;
position: sticky;
top: calc(var(--omis-header-h) + 2rem);
}
.woocommerce div.product .woocommerce-product-gallery__wrapper {
border-radius: var(--omis-radius-card);
overflow: hidden;
background: var(--omis-cream-soft);
}
.woocommerce div.product .woocommerce-product-gallery img {
border-radius: var(--omis-radius-card);
}
.woocommerce div.product .flex-control-thumbs {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.2rem;
margin-top: 1.2rem;
padding: 0;
}
.woocommerce div.product .flex-control-thumbs li {
width: auto !important;
float: none !important;
margin: 0;
}
.woocommerce div.product .flex-control-thumbs img {
border-radius: 1rem;
opacity: 0.65;
transition: opacity 0.25s var(--omis-ease);
aspect-ratio: 1;
object-fit: cover;
}
.woocommerce div.product .flex-control-thumbs img.flex-active,
.woocommerce div.product .flex-control-thumbs img:hover {
opacity: 1;
}
.woocommerce div.product .summary {
width: 100% !important;
float: none !important;
margin: 0 !important;
}
.woocommerce div.product .product_title {
font-size: 3.8rem;
font-weight: var(--omis-medium);
line-height: 1.16;
letter-spacing: -0.01em;
margin-bottom: 1.2rem;
}
.woocommerce div.product p.price {
font-size: 2.4rem;
margin-bottom: 2rem;
}
.woocommerce div.product .woocommerce-product-details__short-description {
font-size: 1.6rem;
/* 1.5 ולא 1.8 — זה בדיוק ה-line-height של עורך התוכן של וורדפרס
(wp-includes/js/tinymce/skins/wordpress/wp-content.css:15), שהוא מה
שהלקוחה רואה בזמן ההקלדה בתיאור הקצר. ב-1.8 השורות באתר יצאו רחבות
ב-20% ממה שהיא הקלידה, ולכן הריווח בין השורות "לא התאים". */
line-height: 1.5;
color: var(--omis-ink-70);
margin-bottom: 2.6rem;
}
.woocommerce div.product form.cart {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.2rem;
/* אוויר בין הטקסט לכפתור ההוספה לעגלה — הוגדל שוב לבקשת הלקוחה. */
margin-top: 4.2rem;
margin-bottom: 2.4rem;
}
.omis-qty,
.woocommerce div.product form.cart .quantity {
display: inline-flex;
align-items: center;
height: 5rem;
border: 1px solid var(--omis-line);
border-radius: 999px;
background: var(--omis-white);
overflow: hidden;
}
.omis-qty button {
width: 4.2rem;
height: 100%;
display: grid;
place-items: center;
font-size: 1.9rem;
line-height: 1;
color: var(--omis-ink);
transition: background-color 0.2s var(--omis-ease);
}
.omis-qty button:hover {
background: rgba(47, 51, 45, 0.06);
}
.woocommerce .quantity input.qty {
width: 4.4rem;
height: 100%;
border: 0;
background: none;
text-align: center;
font-size: 1.5rem;
appearance: textfield;
}
.woocommerce .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .quantity input.qty::-webkit-inner-spin-button {
appearance: none;
margin: 0;
}
.woocommerce div.product form.cart .button {
flex: 1;
min-width: 20rem;
}
.woocommerce div.product form.cart .variations {
width: 100%;
margin-bottom: 0.6rem;
}
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
padding: 0.6rem 0;
text-align: start;
vertical-align: middle;
}
.woocommerce div.product form.cart .variations label {
font-size: 1.45rem;
font-weight: var(--omis-medium);
}
.woocommerce div.product form.cart .reset_variations {
font-size: 1.3rem;
color: var(--omis-ink-70);
text-decoration: underline;
}
.omis-perks {
list-style: none;
padding: 2rem 0 0;
margin: 0;
border-top: 1px solid var(--omis-line);
display: grid;
gap: 0.9rem;
}
.omis-perks li {
position: relative;
padding-inline-start: 2.4rem;
font-size: 1.45rem;
color: var(--omis-ink-70);
}
.omis-perks li::before {
content: '';
position: absolute;
inset-inline-start: 0;
top: 0.55rem;
width: 1.1rem;
height: 0.6rem;
border-left: 1.6px solid var(--omis-sage);
border-bottom: 1.6px solid var(--omis-sage);
transform: rotate(-45deg);
}
.woocommerce div.product .product_meta {
margin-top: 2rem;
font-size: 1.35rem;
color: var(--omis-ink-45);
display: grid;
gap: 0.4rem;
}
/* לשוניות */
.woocommerce div.product .woocommerce-tabs {
grid-column: 1 / -1;
margin-top: 5rem;
border-top: 1px solid var(--omis-line);
padding-top: 3.4rem;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
display: flex;
flex-wrap: wrap;
gap: 1rem;
padding: 0;
margin: 0 0 2.8rem;
list-style: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
display: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
background: var(--omis-white);
border: 1px solid var(--omis-line);
border-radius: 999px;
margin: 0;
padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
display: block;
padding: 1.1rem 2.2rem;
font-size: 1.45rem;
font-weight: var(--omis-regular);
color: var(--omis-ink);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
background: var(--omis-ink);
border-color: var(--omis-ink);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
color: var(--omis-cream);
font-weight: var(--omis-medium);
}
.woocommerce div.product .woocommerce-tabs .panel {
max-width: 82rem;
font-size: 1.6rem;
line-height: 1.85;
}
.woocommerce div.product .woocommerce-tabs .panel h2 {
font-size: 2.2rem;
font-weight: var(--omis-medium);
margin-bottom: 1.4rem;
}
.woocommerce div.product .woocommerce-tabs .panel p + p {
margin-top: 1.4rem;
}
.woocommerce table.shop_attributes {
border: 0;
width: 100%;
}
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
border: 0;
border-bottom: 1px solid var(--omis-line);
padding: 1.2rem 0;
font-size: 1.5rem;
text-align: start;
font-style: normal;
}
.woocommerce table.shop_attributes th {
font-weight: var(--omis-medium);
width: 22rem;
}
/* מוצרים קשורים */
.woocommerce .related,
.woocommerce .upsells {
grid-column: 1 / -1;
margin-top: 6rem;
}
.woocommerce .related > h2,
.woocommerce .upsells > h2 {
font-size: 3rem;
font-weight: var(--omis-medium);
margin-bottom: 3rem;
text-align: center;
}
@media (max-width: 1023.98px) {
.omis-product {
padding-block: 1.6rem 5rem;
}
.woocommerce div.product {
grid-template-columns: 1fr;
gap: 2.4rem;
margin-top: 1.6rem;
padding: 1.8rem;
border-radius: 1.6rem;
}
.woocommerce div.product > .omis-breadcrumbs {
margin-bottom: -0.6rem;
}
.woocommerce div.product .woocommerce-product-gallery {
position: static;
}
.woocommerce div.product .product_title {
font-size: 2.4rem;
}
.woocommerce div.product p.price {
font-size: 1.8rem;
}
.woocommerce div.product .woocommerce-product-details__short-description {
font-size: 1.35rem;
}
.woocommerce div.product form.cart .button {
min-width: 0;
}
.omis-qty,
.woocommerce div.product form.cart .quantity {
height: 4.2rem;
}
.omis-perks li {
font-size: 1.25rem;
}
.woocommerce div.product .woocommerce-tabs {
margin-top: 3rem;
padding-top: 2.4rem;
}
.woocommerce div.product .woocommerce-tabs .panel {
font-size: 1.35rem;
}
.woocommerce .related > h2,
.woocommerce .upsells > h2 {
font-size: 2rem;
margin-bottom: 2rem;
}
}
/* --------------------------------------------------------------------------
6. עגלה
-------------------------------------------------------------------------- */
.woocommerce table.shop_table {
border: 0;
border-collapse: collapse;
border-radius: 0;
width: 100%;
}
.woocommerce table.shop_table th {
font-size: 1.35rem;
font-weight: var(--omis-medium);
letter-spacing: 0.04em;
color: var(--omis-ink-70);
border-bottom: 1px solid var(--omis-line);
padding: 0 0 1.4rem;
text-align: start;
}
.woocommerce table.shop_table td {
border: 0;
border-bottom: 1px solid var(--omis-line);
padding: 2rem 0;
font-size: 1.5rem;
vertical-align: middle;
}
.woocommerce table.cart img {
width: 8.6rem;
border-radius: 1rem;
}
.woocommerce a.remove {
width: 2.6rem;
height: 2.6rem;
line-height: 2.4rem;
font-size: 1.8rem;
color: var(--omis-ink-45) !important;
border: 1px solid var(--omis-line);
border-radius: 50%;
}
.woocommerce a.remove:hover {
background: var(--omis-sale);
color: #fff !important;
border-color: var(--omis-sale);
}
.woocommerce .cart-collaterals,
.woocommerce-page .cart-collaterals {
width: 100%;
}
.woocommerce .cart_totals {
width: 100%;
float: none;
background: var(--omis-white);
border: 1px solid var(--omis-line);
border-radius: 1.6rem;
padding: 2.8rem;
}
.woocommerce .cart_totals h2 {
font-size: 2rem;
font-weight: var(--omis-medium);
margin-bottom: 1.6rem;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
width: 100%;
margin-top: 1.4rem;
}
.omis-cart-layout {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
gap: 4rem;
align-items: start;
}
.woocommerce .coupon {
display: flex;
gap: 1rem;
align-items: center;
flex-wrap: wrap;
}
.woocommerce .coupon input.input-text {
min-width: 20rem;
width: auto;
}
@media (max-width: 1023.98px) {
.omis-cart-layout {
grid-template-columns: 1fr;
gap: 2.4rem;
}
.woocommerce table.shop_table td {
padding: 1.2rem 0;
font-size: 1.3rem;
}
.woocommerce table.cart img {
width: 6rem;
}
.woocommerce .cart_totals {
padding: 1.8rem;
}
}
/* --------------------------------------------------------------------------
7. צ׳קאאוט
-------------------------------------------------------------------------- */
.woocommerce-checkout .omis-shop__inner form.checkout {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
/* שורה 2 גמישה — כך טופס הפרטים המשתרע על שתי השורות לא "מנפח" את שורה 1 */
grid-template-rows: min-content 1fr;
gap: 4.4rem;
align-items: start;
}
/* אלמנט נסתר של ווקומרס — שלא יתפוס תא בגריד */
.woocommerce-checkout .omis-shop__inner form.checkout > wc-order-attribution-inputs {
display: none;
}
.woocommerce-checkout #customer_details {
grid-column: 1;
grid-row: 1 / span 2;
}
.woocommerce-checkout h3 {
font-size: 2.2rem;
font-weight: var(--omis-medium);
margin-bottom: 1.8rem;
}
.woocommerce-checkout #order_review_heading {
grid-column: 2;
grid-row: 1;
margin-bottom: 0;
}
.woocommerce-checkout #order_review {
grid-column: 2;
grid-row: 2;
background: var(--omis-white);
border: 1px solid var(--omis-line);
border-radius: 1.6rem;
padding: 2.6rem;
position: sticky;
top: calc(var(--omis-header-h) + 2rem);
}
.woocommerce-checkout #payment {
background: transparent;
border-radius: 0;
}
.woocommerce-checkout #payment ul.payment_methods {
border: 0;
padding: 0;
margin: 0 0 1.6rem;
}
.woocommerce-checkout #payment ul.payment_methods li {
border: 1px solid var(--omis-line);
border-radius: 1.2rem;
padding: 1.4rem 1.6rem;
margin-bottom: 1rem;
background: var(--omis-cream);
font-size: 1.45rem;
}
.woocommerce-checkout #payment div.payment_box {
background: transparent;
font-size: 1.35rem;
padding: 0.8rem 0 0;
}
.woocommerce-checkout #payment div.payment_box::before {
display: none;
}
.woocommerce-checkout #payment div.form-row.place-order {
padding: 0;
margin-top: 1.6rem;
}
.woocommerce-checkout #place_order {
width: 100%;
}
.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
background: var(--omis-white);
border: 1px solid var(--omis-line);
border-top: 3px solid var(--omis-sage);
border-radius: 1.2rem;
padding: 1.6rem 2rem;
font-size: 1.45rem;
color: var(--omis-ink);
margin-bottom: 2.4rem;
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.2rem;
}
.woocommerce-error {
border-top-color: var(--omis-sale);
}
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before {
display: none;
}
.woocommerce-info .button,
.woocommerce-message .button {
margin-inline-start: auto;
height: 3.8rem;
font-size: 1.3rem;
padding-inline: 1.8rem;
}
@media (max-width: 1023.98px) {
.woocommerce-checkout .omis-shop__inner form.checkout {
grid-template-columns: 1fr;
grid-template-rows: none;
gap: 2.4rem;
}
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
grid-column: 1;
grid-row: auto;
}
.woocommerce-checkout #order_review {
grid-row: auto;
position: static;
padding: 1.8rem;
}
.woocommerce-checkout h3 {
font-size: 1.7rem;
}
}
/* --------------------------------------------------------------------------
8. החשבון שלי
-------------------------------------------------------------------------- */
/* פריסת החשבון מוגדרת ב-.omis-account */
.woocommerce-account .woocommerce-MyAccount-navigation {
width: auto;
float: none;
background: var(--omis-white);
border: 1px solid var(--omis-line);
border-radius: 1.6rem;
padding: 1.2rem;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
display: grid;
gap: 0.3rem;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
display: block;
padding: 1.1rem 1.4rem;
border-radius: 1rem;
font-size: 1.5rem;
transition: background-color 0.2s var(--omis-ease);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
background: rgba(47, 51, 45, 0.06);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
background: var(--omis-ink);
color: var(--omis-cream);
}
.woocommerce-account .woocommerce-MyAccount-content {
width: auto;
float: none;
font-size: 1.55rem;
line-height: 1.8;
}
/* מסך התחברות/הרשמה בחזית */
.woocommerce-account:not(.logged-in) .omis-shop__inner .woocommerce {
grid-template-columns: 1fr;
max-width: 96rem;
margin-inline: auto;
}
.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.lost_reset_password {
border: 1px solid var(--omis-line);
border-radius: 1.8rem;
background: var(--omis-white);
padding: 3.2rem;
margin: 0;
box-shadow: var(--omis-shadow-soft);
}
.omis-account-intro {
text-align: center;
margin-bottom: 3rem;
}
.omis-account-intro img {
height: 4.4rem;
width: auto;
margin: 0 auto 1.8rem;
}
.omis-account-intro p {
color: var(--omis-ink-70);
font-size: 1.55rem;
}
.omis-account-cols {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 3rem;
}
@media (max-width: 1023.98px) {
.woocommerce-account .woocommerce {
grid-template-columns: 1fr;
gap: 2rem;
}
.omis-account-cols {
grid-template-columns: 1fr;
gap: 2rem;
}
.woocommerce form.login,
.woocommerce form.register {
padding: 2rem;
}
}
/* --------------------------------------------------------------------------
9. שכבת החיפוש
-------------------------------------------------------------------------- */
.omis-search-overlay {
position: fixed;
inset: 0;
z-index: 210;
visibility: hidden;
pointer-events: none;
}
.omis-search-overlay.is-open {
visibility: visible;
pointer-events: auto;
}
.omis-search-overlay__backdrop {
position: absolute;
inset: 0;
background: rgba(47, 51, 45, 0.5);
opacity: 0;
transition: opacity 0.3s var(--omis-ease);
}
.omis-search-overlay.is-open .omis-search-overlay__backdrop {
opacity: 1;
}
.omis-search-overlay__panel {
position: absolute;
inset-inline: 0;
top: 0;
background: var(--omis-cream);
padding: 5rem var(--omis-gutter) 4rem;
transform: translateY(-100%);
transition: transform 0.4s var(--omis-ease);
}
.omis-search-overlay.is-open .omis-search-overlay__panel {
transform: translateY(0);
}
.omis-search-overlay__close {
position: absolute;
top: 2rem;
inset-inline-end: var(--omis-gutter);
width: 3.6rem;
height: 3.6rem;
display: grid;
place-items: center;
border-radius: 50%;
color: var(--omis-ink);
}
.omis-search-overlay__close:hover {
background: rgba(47, 51, 45, 0.07);
}
.omis-search-overlay__close svg {
width: 1.6rem;
height: 1.6rem;
}
.omis-search-overlay form {
max-width: 76rem;
margin-inline: auto;
display: flex;
gap: 1.2rem;
align-items: center;
}
.omis-search-overlay input[type="search"] {
flex: 1;
height: 5.6rem;
border: 0;
border-bottom: 1.5px solid var(--omis-ink);
background: none;
font-size: 2.2rem;
padding: 0 0.6rem;
min-width: 0;
}
.omis-search-overlay input[type="search"]:focus {
outline: none;
}
.omis-search-overlay__quick {
max-width: 76rem;
margin: 2.4rem auto 0;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
font-size: 1.4rem;
color: var(--omis-ink-70);
}
.omis-search-overlay__quick ul {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
}
.omis-search-overlay__quick a {
display: inline-flex;
height: 3.4rem;
align-items: center;
padding-inline: 1.4rem;
border: 1px solid var(--omis-line);
border-radius: 999px;
background: var(--omis-white);
color: var(--omis-ink);
transition: background-color 0.2s var(--omis-ease), color 0.2s var(--omis-ease);
}
.omis-search-overlay__quick a:hover {
background: var(--omis-ink);
color: var(--omis-cream);
}
@media (max-width: 1023.98px) {
.omis-search-overlay__panel {
padding: 4.4rem 2rem 3rem;
}
.omis-search-overlay input[type="search"] {
height: 4.4rem;
font-size: 1.6rem;
}
.omis-search-overlay__quick {
font-size: 1.2rem;
}
}
/* --------------------------------------------------------------------------
10. תוצאות חיפוש ו-404
-------------------------------------------------------------------------- */
.omis-results {
display: grid;
gap: 1.2rem;
max-width: 82rem;
margin-inline: auto;
}
.omis-result {
display: flex;
gap: 1.8rem;
align-items: center;
padding: 1.6rem;
border: 1px solid var(--omis-line);
border-radius: 1.4rem;
background: var(--omis-white);
transition: transform 0.2s var(--omis-ease), box-shadow 0.2s var(--omis-ease);
}
.omis-result:hover {
transform: translateY(-2px);
box-shadow: var(--omis-shadow-soft);
}
.omis-result__thumb {
width: 7rem;
height: 7rem;
border-radius: 1rem;
object-fit: cover;
flex: none;
background: var(--omis-cream-soft);
}
.omis-result__title {
font-size: 1.7rem;
font-weight: var(--omis-medium);
}
.omis-result__meta {
font-size: 1.35rem;
color: var(--omis-ink-70);
margin-top: 0.3rem;
}
.omis-empty {
text-align: center;
padding: 4rem 0 2rem;
color: var(--omis-ink-70);
font-size: 1.6rem;
}
.omis-404 {
text-align: center;
}
.omis-404__code {
font-size: 12rem;
font-weight: var(--omis-medium);
line-height: 1;
color: var(--omis-sage);
letter-spacing: -0.03em;
}
.omis-404__links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.2rem;
margin-top: 3rem;
}
@media (max-width: 1023.98px) {
.omis-404__code {
font-size: 7rem;
}
.omis-result__thumb {
width: 5.4rem;
height: 5.4rem;
}
.omis-result__title {
font-size: 1.4rem;
}
}
/* --------------------------------------------------------------------------
11. עמוד יצירת קשר
-------------------------------------------------------------------------- */
.omis-contact {
display: grid;
grid-template-columns: minmax(0, 1fr) 34rem;
gap: 4rem;
align-items: start;
max-width: 106rem;
margin-inline: auto;
}
.omis-contact__card {
background: var(--omis-white);
border: 1px solid var(--omis-line);
border-radius: 1.8rem;
padding: 3rem;
}
.omis-contact__aside {
background: var(--omis-olive);
color: var(--omis-cream);
border-radius: 1.8rem;
padding: 3rem;
display: grid;
gap: 2rem;
}
.omis-contact__aside h2 {
font-size: 2.2rem;
font-weight: var(--omis-medium);
}
.omis-contact__item {
display: grid;
gap: 0.4rem;
font-size: 1.5rem;
}
.omis-contact__item span {
font-size: 1.25rem;
opacity: 0.75;
letter-spacing: 0.06em;
}
.omis-contact__item a:hover {
text-decoration: underline;
text-underline-offset: 0.3rem;
}
.omis-contact__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.6rem;
}
.omis-contact__grid .omis-field--full {
grid-column: 1 / -1;
}
.omis-contact label {
display: block;
font-size: 1.35rem;
font-weight: var(--omis-medium);
margin-bottom: 0.6rem;
}
.omis-contact input,
.omis-contact textarea {
width: 100%;
min-height: 4.8rem;
background: var(--omis-cream);
border: 1px solid var(--omis-line);
border-radius: 1rem;
padding: 1.2rem 1.4rem;
font-size: 1.5rem;
transition: border-color 0.2s var(--omis-ease), box-shadow 0.2s var(--omis-ease);
}
.omis-contact textarea {
min-height: 13rem;
resize: vertical;
}
.omis-contact input:focus,
.omis-contact textarea:focus {
outline: none;
border-color: var(--omis-sage);
box-shadow: 0 0 0 0.4rem rgba(167, 165, 120, 0.22);
}
@media (max-width: 1023.98px) {
.omis-contact {
grid-template-columns: 1fr;
gap: 2rem;
}
.omis-contact__card,
.omis-contact__aside {
padding: 1.8rem;
}
.omis-contact__grid {
grid-template-columns: 1fr;
gap: 1.2rem;
}
}
/* ==========================================================================
12. גלריית מוצר מותאמת
========================================================================== */
.omis-gallery {
position: relative;
display: grid;
grid-template-columns: 7.6rem minmax(0, 1fr);
gap: 1.2rem;
align-items: start;
}
/* מוצר עם תמונה בודדת (אין רצועת תמוניות, למשל הגיפט קארד): הבמה תופסת
את כל הרוחב במקום ליפול לעמודת התמוניות הצרה ולהתמוטט. */
.omis-gallery:not(.omis-gallery--empty):not(:has(.omis-gallery__thumbs)) {
grid-template-columns: minmax(0, 1fr);
}
.omis-gallery__stage {
position: relative;
aspect-ratio: 4 / 5;
/* תקרת גובה כדי שהתוכן יישאר מעל הקיפול גם בתמונות מאורכות */
max-height: min(58rem, calc(100vh - var(--omis-header-h) - 14rem));
border-radius: var(--omis-radius-card);
overflow: hidden;
background: var(--omis-cream-soft);
box-shadow: 0 1.6rem 4rem rgba(47, 51, 45, 0.08);
}
.omis-gallery__slide {
position: absolute;
inset: 0;
margin: 0;
opacity: 0;
transition: opacity 0.45s var(--omis-ease);
pointer-events: none;
}
.omis-gallery__slide.is-active {
opacity: 1;
pointer-events: auto;
}
.omis-gallery__slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.omis-gallery__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 4.4rem;
height: 4.4rem;
border-radius: 50%;
background: rgba(254, 244, 228, 0.9);
color: var(--omis-ink);
display: grid;
place-items: center;
box-shadow: 0 0.4rem 1.4rem rgba(47, 51, 45, 0.16);
opacity: 0;
transition: opacity 0.25s var(--omis-ease), background-color 0.25s var(--omis-ease);
z-index: 3;
}
.omis-gallery__stage:hover .omis-gallery__nav,
.omis-gallery__nav:focus-visible {
opacity: 1;
}
.omis-gallery__nav:hover {
background: var(--omis-cream);
}
.omis-gallery__nav::before {
content: '';
width: 1rem;
height: 1rem;
border-top: 1.6px solid currentColor;
border-inline-start: 1.6px solid currentColor;
}
.omis-gallery__nav--prev {
inset-inline-start: 1.4rem;
}
.omis-gallery__nav--prev::before {
transform: rotate(-45deg);
margin-inline-start: 0.3rem;
}
.omis-gallery__nav--next {
inset-inline-end: 1.4rem;
}
.omis-gallery__nav--next::before {
transform: rotate(135deg);
margin-inline-end: 0.3rem;
}
.omis-gallery__thumbs {
grid-column: 1;
grid-row: 1;
display: grid;
grid-auto-rows: 7.6rem;
gap: 1rem;
margin: 0;
max-height: min(58rem, calc(100vh - var(--omis-header-h) - 14rem));
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
padding-inline-end: 0.2rem;
}
.omis-gallery__thumbs::-webkit-scrollbar {
width: 3px;
}
.omis-gallery__thumbs::-webkit-scrollbar-thumb {
background: var(--omis-line);
border-radius: 999px;
}
.omis-gallery__thumb {
border-radius: 0.9rem;
overflow: hidden;
aspect-ratio: 1;
width: 100%;
background: var(--omis-cream-soft);
border: 1.5px solid transparent;
transition: border-color 0.25s var(--omis-ease), opacity 0.25s var(--omis-ease);
opacity: 0.72;
padding: 0;
}
.omis-gallery__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.omis-gallery__thumb:hover,
.omis-gallery__thumb.is-active {
opacity: 1;
border-color: var(--omis-ink);
}
/* ==========================================================================
13. מלאי, מידות ומועדפים
========================================================================== */
.omis-stock {
display: inline-flex;
align-items: center;
gap: 0.8rem;
padding: 0.7rem 1.4rem;
border-radius: 999px;
font-size: 1.35rem;
font-weight: var(--omis-medium);
margin-bottom: 1.8rem;
}
.omis-stock__dot {
width: 0.8rem;
height: 0.8rem;
border-radius: 50%;
background: currentColor;
flex: none;
position: relative;
}
.omis-stock--in {
background: rgba(167, 165, 120, 0.22);
color: #5d6b3f;
}
.omis-stock--in .omis-stock__dot::after {
content: '';
position: absolute;
inset: -0.35rem;
border-radius: 50%;
background: currentColor;
opacity: 0.35;
animation: omis-pulse 2.2s var(--omis-ease) infinite;
}
.omis-stock--low {
background: rgba(154, 91, 60, 0.14);
color: var(--omis-sale);
}
.omis-stock--out {
background: rgba(47, 51, 45, 0.1);
color: var(--omis-ink-70);
}
@keyframes omis-pulse {
0% { transform: scale(0.7); opacity: 0.5; }
70% { transform: scale(1.6); opacity: 0; }
100% { transform: scale(1.6); opacity: 0; }
}
.omis-sizeguide-trigger {
display: inline-flex;
align-items: center;
gap: 0.7rem;
font-size: 1.35rem;
color: var(--omis-ink-70);
text-decoration: underline;
text-underline-offset: 0.4rem;
text-decoration-thickness: 1px;
margin-bottom: 1.6rem;
transition: color 0.2s var(--omis-ease);
}
.omis-sizeguide-trigger:hover {
color: var(--omis-ink);
}
.omis-sizeguide-trigger svg {
width: 1.8rem;
height: 1.8rem;
}
/* --- כפתור הלב --- */
.omis-wish {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.7rem;
color: var(--omis-ink);
transition: color 0.25s var(--omis-ease), transform 0.25s var(--omis-ease), background-color 0.25s var(--omis-ease);
}
.omis-wish svg {
width: 1.8rem;
height: auto;
transition: transform 0.25s var(--omis-ease);
}
.omis-wish--card {
position: absolute;
top: 1.1rem;
inset-inline-end: 1.1rem;
z-index: 3;
width: 3.4rem;
height: 3.4rem;
border-radius: 50%;
background: rgba(254, 244, 228, 0.82);
backdrop-filter: blur(4px);
opacity: 0;
transform: translateY(-0.4rem);
}
li.product:hover .omis-wish--card,
.omis-wish--card:focus-visible,
.omis-wish--card.is-active {
opacity: 1;
transform: translateY(0);
}
.omis-wish--gallery {
position: absolute;
top: 1.4rem;
inset-inline-end: 1.4rem;
z-index: 4;
width: 4rem;
height: 4rem;
border-radius: 50%;
background: rgba(254, 244, 228, 0.88);
box-shadow: 0 0.4rem 1.2rem rgba(47, 51, 45, 0.12);
}
.omis-wish--single {
font-size: 1.4rem;
color: var(--omis-ink-70);
margin-bottom: 1.8rem;
}
.omis-wish--single:hover {
color: var(--omis-ink);
}
.omis-wish.is-active {
color: var(--omis-sale);
}
.omis-wish.is-active svg path {
fill: currentColor;
}
/* .omis-wish.is-animating הוסר — ה-JS כבר לא מוסיף את המחלקה, והמצבים
is-pending / is-adding / is-removing מוגדרים בסקשן 39. */
.omis-wish--single.is-active .omis-wish__label::after {
content: ' ✓';
}
/* --- כרטיס מוצר --- */
.omis-card__mediawrap {
position: relative;
flex: none; /* לא נמתח — שומר על יחס קבוע בכל הכרטיסים */
margin-bottom: 1.4rem;
border-radius: var(--omis-radius-card);
overflow: hidden;
background: var(--omis-cream-soft);
}
.omis-card__flags {
position: absolute;
top: 1.1rem;
inset-inline-start: 1.1rem;
z-index: 3;
display: grid;
gap: 0.5rem;
justify-items: start;
}
.omis-card__flags .omis-badge {
position: static;
}
.omis-badge--last {
background: var(--omis-cream);
color: var(--omis-ink);
border: 1px solid var(--omis-line);
}
.omis-card__sizes {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.9rem;
list-style: none;
padding: 0;
}
.omis-card__sizes li {
min-width: 2.8rem;
height: 2.4rem;
padding-inline: 0.7rem;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--omis-line);
border-radius: 0.6rem;
font-size: 1.15rem;
color: var(--omis-ink-70);
background: var(--omis-white);
white-space: nowrap;
}
/* ==========================================================================
14. עגלת צד
========================================================================== */
.omis-minicart {
position: fixed;
inset: 0;
z-index: 220;
visibility: hidden;
pointer-events: none;
}
.omis-minicart.is-open {
visibility: visible;
pointer-events: auto;
}
.omis-minicart__backdrop {
position: absolute;
inset: 0;
background: rgba(47, 51, 45, 0.45);
opacity: 0;
transition: opacity 0.35s var(--omis-ease);
}
.omis-minicart.is-open .omis-minicart__backdrop {
opacity: 1;
}
.omis-minicart__panel {
position: absolute;
inset-block: 0;
inset-inline-end: 0;
width: min(92vw, 42rem);
background: var(--omis-cream);
display: flex;
flex-direction: column;
transform: translateX(-100%);
transition: transform 0.42s var(--omis-ease);
box-shadow: -1rem 0 4rem rgba(47, 51, 45, 0.18);
}
[dir="rtl"] .omis-minicart__panel {
transform: translateX(-100%);
}
.omis-minicart.is-open .omis-minicart__panel,
[dir="rtl"] .omis-minicart.is-open .omis-minicart__panel {
transform: translateX(0);
}
.omis-minicart__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 2.4rem 2.4rem 1.8rem;
border-bottom: 1px solid var(--omis-line);
flex: none;
}
.omis-minicart__head h2 {
display: flex;
align-items: center;
gap: 0.9rem;
font-size: 2rem;
font-weight: var(--omis-medium);
}
.omis-minicart__count {
min-width: 2.2rem;
height: 2.2rem;
padding: 0 0.6rem;
border-radius: 999px;
background: var(--omis-ink);
color: var(--omis-cream);
font-size: 1.2rem;
font-weight: var(--omis-medium);
display: inline-grid;
place-items: center;
}
.omis-minicart__close {
width: 3.4rem;
height: 3.4rem;
display: grid;
place-items: center;
border-radius: 50%;
color: var(--omis-ink);
transition: background-color 0.2s var(--omis-ease);
}
.omis-minicart__close:hover {
background: rgba(47, 51, 45, 0.07);
}
.omis-minicart__close svg {
width: 1.5rem;
height: 1.5rem;
}
.omis-minicart__body {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 0;
}
.omis-minicart__ship {
padding: 1.6rem 2.4rem;
background: rgba(167, 165, 120, 0.16);
flex: none;
}
.omis-minicart__ship p {
display: flex;
align-items: center;
gap: 0.6rem;
font-size: 1.35rem;
margin-bottom: 0.9rem;
}
.omis-minicart__ship svg {
width: 1.4rem;
height: 1.4rem;
color: #5d6b3f;
}
.omis-minicart__ship .amount {
font-weight: var(--omis-semibold);
}
/* --- 14.1 פס "משלוח חינם" — מילוי, ניצוץ וחגיגת חצייה ---
הכללים הבסיסיים מוגדרים כאן ולא בסוף הקובץ בכוונה: הם באותה ספציפיות
בדיוק כמו המקור, כך שסידור מחדש של הקובץ לא יחזיר בשקט את הערכים הישנים. */
/* הקשר מיקום לשכבת ההבהוב. isolation כדי ש-z-index:-1 של ::before יישאר
מתחת לטקסט ולפס אבל מעל רקע הבלוק. */
.omis-minicart__ship {
position: relative;
isolation: isolate;
}
.omis-minicart__bar {
display: block;
position: relative;
height: 0.7rem; /* היה 0.5rem — מעט יותר נוכח, עדיין עדין */
border-radius: 999px;
background: rgba(47, 51, 45, 0.1);
overflow: hidden;
}
.omis-minicart__bar i {
display: block;
position: relative;
height: 100%;
min-width: 0.7rem; /* גם 2% נראה כמו נקודה ולא כמו כלום */
border-radius: 999px;
overflow: hidden; /* חותך את הניצוץ הפנימי */
background-color: var(--omis-sage);
background-image: linear-gradient(180deg, rgba(255, 250, 241, 0.32), rgba(255, 250, 241, 0) 65%);
transition: width 0.75s var(--omis-ease);
}
/* מעל הסף — גוון עמוק יותר. מגיע ישירות מה-PHP, בלי JS */
.omis-minicart__ship[data-free="1"] .omis-minicart__bar i {
background-color: var(--omis-sage-dark);
}
/* --- הניצוץ הנע (רק מתחת לסף, ורק כשהמגירה פתוחה) --- */
.omis-minicart__bar i::after {
content: '';
position: absolute;
inset-block: 0;
inset-inline-start: -45%;
width: 45%;
/* גרדיאנט סימטרי — 90deg כאן אינו תלוי כיוון */
background: linear-gradient(90deg,
rgba(255, 250, 241, 0) 0%,
rgba(255, 250, 241, 0.9) 50%,
rgba(255, 250, 241, 0) 100%);
opacity: 0;
pointer-events: none;
}
/* ההצמדה ל-.is-open הכרחית: המגירה היא visibility:hidden ולא display:none,
ובלעדיה אנימציה אינסופית הייתה רצה ברקע בכל עמוד באתר. */
.omis-minicart.is-open .omis-minicart__bar i::after {
animation: omis-ship-sheen 3.2s linear infinite;
}
/* translateX תמיד פיזי — ב-RTL הסחיפה חייבת לרוץ לכיוון ההפוך */
[dir="rtl"] .omis-minicart.is-open .omis-minicart__bar i::after {
animation-name: omis-ship-sheen-rtl;
}
/* עברנו את הסף — אין יותר "עוד קצת", אין ניצוץ */
.omis-minicart__ship[data-free="1"] .omis-minicart__bar i::after {
display: none;
}
@keyframes omis-ship-sheen {
0%, 6% { transform: translateX(0); opacity: 0; }
16% { opacity: 0.85; }
38% { opacity: 0.85; }
50%, 100% { transform: translateX(300%); opacity: 0; }
}
@keyframes omis-ship-sheen-rtl {
0%, 6% { transform: translateX(0); opacity: 0; }
16% { opacity: 0.85; }
38% { opacity: 0.85; }
50%, 100% { transform: translateX(-300%); opacity: 0; }
}
/* --- חגיגת החצייה --- */
.omis-minicart__ship::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: var(--omis-sage);
opacity: 0;
pointer-events: none;
}
.omis-minicart__ship.is-celebrating::before {
animation: omis-ship-glow 0.95s var(--omis-ease) both;
}
/* הבזק אור שחולף על הפס */
.omis-minicart__bar::after {
content: '';
position: absolute;
inset-block: 0;
inset-inline-start: -40%;
width: 40%;
background: linear-gradient(90deg,
rgba(255, 250, 241, 0) 0%,
var(--omis-white) 50%,
rgba(255, 250, 241, 0) 100%);
opacity: 0;
pointer-events: none;
}
.omis-minicart__ship.is-celebrating .omis-minicart__bar::after {
animation: omis-ship-flash 0.8s var(--omis-ease) both;
}
[dir="rtl"] .omis-minicart__ship.is-celebrating .omis-minicart__bar::after {
animation-name: omis-ship-flash-rtl;
}
/* הילה יוצאת מהפס — box-shadow ולא פסאודו, כי לפס יש overflow:hidden
שהיה חותך כל טבעת פנימית. צל של אלמנט אינו נחתך ע"י ה-overflow שלו. */
.omis-minicart__ship.is-celebrating .omis-minicart__bar {
animation: omis-ship-halo 0.9s var(--omis-ease) both;
}
.omis-minicart__ship.is-celebrating p {
animation: omis-ship-rise 0.55s var(--omis-ease) both;
}
.omis-minicart__ship.is-celebrating p svg {
transform-origin: 50% 50%;
animation: omis-ship-check 0.72s var(--omis-ease) both;
}
@keyframes omis-ship-glow {
0% { opacity: 0; }
22% { opacity: 0.3; }
100% { opacity: 0; }
}
@keyframes omis-ship-halo {
0% { box-shadow: 0 0 0 0 rgba(141, 139, 96, 0); }
30% { box-shadow: 0 0 0 0.5rem rgba(141, 139, 96, 0.22); }
100% { box-shadow: 0 0 0 1.1rem rgba(141, 139, 96, 0); }
}
@keyframes omis-ship-flash {
0% { transform: translateX(0); opacity: 0; }
18% { opacity: 1; }
100% { transform: translateX(400%); opacity: 0; }
}
@keyframes omis-ship-flash-rtl {
0% { transform: translateX(0); opacity: 0; }
18% { opacity: 1; }
100% { transform: translateX(-400%); opacity: 0; }
}
@keyframes omis-ship-rise {
0% { transform: translateY(0.5rem); opacity: 0.25; }
100% { transform: none; opacity: 1; }
}
@keyframes omis-ship-check {
0% { transform: scale(0.3) rotate(-14deg); opacity: 0; }
45% { transform: scale(1.22) rotate(3deg); opacity: 1; }
72% { transform: scale(0.94) rotate(0deg); opacity: 1; }
100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.omis-minicart__bar i {
transition: none;
}
.omis-minicart__bar i::after,
.omis-minicart__bar::after,
.omis-minicart__ship::before {
display: none;
}
.omis-minicart__ship.is-celebrating .omis-minicart__bar,
.omis-minicart__ship.is-celebrating p,
.omis-minicart__ship.is-celebrating p svg {
animation: none;
}
}
/* מסלקים את שכבות הקישוט לגמרי, כדי שלא תרוץ אנימציה אינסופית בת 0.001ms
ברקע כשמתג התנועה של האתר דלוק. */
html.omis-a11y-motion .omis-minicart__bar i::after,
html.omis-a11y-motion .omis-minicart__bar::after,
html.omis-a11y-motion .omis-minicart__ship::before {
display: none;
}
.omis-minicart__items {
flex: 1;
overflow-y: auto;
overscroll-behavior: contain;
padding: 0.6rem 2.4rem;
margin: 0;
list-style: none;
min-height: 0;
}
.omis-minicart__item {
display: flex;
gap: 1.4rem;
padding: 1.6rem 0;
border-bottom: 1px solid var(--omis-line);
}
.omis-minicart__thumb {
width: 8rem;
flex: none;
border-radius: 1rem;
overflow: hidden;
background: var(--omis-cream-soft);
aspect-ratio: 4 / 5;
}
.omis-minicart__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.omis-minicart__info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.omis-minicart__name {
font-size: 1.45rem;
font-weight: var(--omis-medium);
line-height: 1.35;
}
.omis-minicart__name:hover {
opacity: 0.7;
}
.omis-minicart__meta {
font-size: 1.2rem;
color: var(--omis-ink-45);
}
.omis-minicart__price {
font-size: 1.35rem;
color: var(--omis-ink-70);
}
.omis-minicart__row {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 0.6rem;
}
.omis-minicart__qty {
display: inline-flex;
align-items: center;
border: 1px solid var(--omis-line);
border-radius: 999px;
background: var(--omis-white);
height: 3.2rem;
overflow: hidden;
}
.omis-minicart__qty button {
width: 3rem;
height: 100%;
font-size: 1.6rem;
line-height: 1;
color: var(--omis-ink);
transition: background-color 0.2s var(--omis-ease);
}
.omis-minicart__qty button:hover {
background: rgba(47, 51, 45, 0.06);
}
.omis-minicart__qty span {
min-width: 2.6rem;
text-align: center;
font-size: 1.35rem;
}
.omis-minicart__remove {
width: 3.2rem;
height: 3.2rem;
display: grid;
place-items: center;
border-radius: 50%;
color: var(--omis-ink-45);
transition: color 0.2s var(--omis-ease), background-color 0.2s var(--omis-ease);
}
.omis-minicart__remove:hover {
color: var(--omis-sale);
background: rgba(154, 91, 60, 0.1);
}
.omis-minicart__remove svg {
width: 1.6rem;
height: 1.6rem;
}
.omis-minicart__foot {
flex: none;
padding: 2rem 2.4rem 2.4rem;
border-top: 1px solid var(--omis-line);
background: var(--omis-cream);
display: grid;
gap: 1rem;
}
.omis-minicart__total {
display: flex;
align-items: baseline;
justify-content: space-between;
font-size: 1.6rem;
}
.omis-minicart__total strong {
font-size: 2rem;
font-weight: var(--omis-semibold);
}
.omis-minicart__note {
font-size: 1.2rem;
color: var(--omis-ink-45);
margin-bottom: 0.4rem;
}
.omis-minicart__foot .omis-btn {
width: 100%;
}
.omis-minicart__empty {
flex: 1;
display: grid;
place-content: center;
justify-items: center;
gap: 1rem;
text-align: center;
padding: 4rem 3rem;
}
.omis-minicart__empty svg {
width: 5rem;
height: 5rem;
color: var(--omis-ink-45);
margin-bottom: 0.6rem;
}
.omis-minicart__empty p {
font-size: 1.8rem;
font-weight: var(--omis-medium);
}
.omis-minicart__empty span {
font-size: 1.4rem;
color: var(--omis-ink-70);
max-width: 28rem;
line-height: 1.6;
}
.omis-minicart__empty .omis-btn {
margin-top: 1rem;
}
.omis-minicart.is-loading .omis-minicart__body {
opacity: 0.45;
pointer-events: none;
transition: opacity 0.2s var(--omis-ease);
}
/* ==========================================================================
15. מודאל (טבלת מידות)
========================================================================== */
.omis-modal {
position: fixed;
inset: 0;
z-index: 230;
visibility: hidden;
pointer-events: none;
display: grid;
place-items: center;
padding: 2rem;
}
.omis-modal.is-open {
visibility: visible;
pointer-events: auto;
}
.omis-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(47, 51, 45, 0.5);
opacity: 0;
transition: opacity 0.3s var(--omis-ease);
}
.omis-modal.is-open .omis-modal__backdrop {
opacity: 1;
}
.omis-modal__panel {
position: relative;
width: min(100%, 60rem);
max-height: min(86vh, 76rem);
overflow-y: auto;
background: var(--omis-cream);
border-radius: 1.8rem;
padding: 3.2rem;
box-shadow: 0 2rem 6rem rgba(47, 51, 45, 0.25);
transform: translateY(1.6rem) scale(0.98);
opacity: 0;
transition: transform 0.35s var(--omis-ease), opacity 0.35s var(--omis-ease);
}
.omis-modal.is-open .omis-modal__panel {
transform: none;
opacity: 1;
}
.omis-modal__close {
position: absolute;
top: 1.6rem;
inset-inline-end: 1.6rem;
width: 3.4rem;
height: 3.4rem;
display: grid;
place-items: center;
border-radius: 50%;
color: var(--omis-ink);
transition: background-color 0.2s var(--omis-ease);
}
.omis-modal__close:hover {
background: rgba(47, 51, 45, 0.08);
}
.omis-modal__close svg {
width: 1.5rem;
height: 1.5rem;
}
.omis-modal__panel h2 {
font-size: 2.6rem;
font-weight: var(--omis-medium);
margin-bottom: 0.6rem;
}
.omis-modal__panel h3 {
font-size: 1.7rem;
font-weight: var(--omis-medium);
margin: 2.6rem 0 1rem;
}
.omis-modal__lead {
font-size: 1.35rem;
color: var(--omis-ink-45);
}
.omis-modal__panel p {
font-size: 1.45rem;
line-height: 1.75;
color: var(--omis-ink-70);
}
.omis-modal__panel p + p {
margin-top: 0.8rem;
}
.omis-sizetable {
width: 100%;
border-collapse: collapse;
background: var(--omis-white);
border-radius: 1.2rem;
overflow: hidden;
font-size: 1.4rem;
}
.omis-sizetable th,
.omis-sizetable td {
padding: 1.1rem 1.4rem;
text-align: start;
border-bottom: 1px solid var(--omis-line);
}
.omis-sizetable thead th {
background: var(--omis-sage);
color: var(--omis-cream);
font-weight: var(--omis-medium);
border: 0;
}
.omis-sizetable tbody tr:last-child td {
border-bottom: 0;
}
.omis-sizetable tbody tr:nth-child(even) td {
background: rgba(167, 165, 120, 0.08);
}
@media (max-width: 1023.98px) {
.omis-modal__panel {
padding: 2.2rem 1.8rem;
border-radius: 1.4rem;
}
.omis-modal__panel h2 {
font-size: 2rem;
}
.omis-sizetable {
font-size: 1.2rem;
}
.omis-sizetable th,
.omis-sizetable td {
padding: 0.9rem 1rem;
}
.omis-gallery {
grid-template-columns: 1fr;
gap: 0.8rem;
}
.omis-gallery__stage {
grid-column: 1;
grid-row: 1;
max-height: none;
}
.omis-gallery__thumbs {
grid-column: 1;
grid-row: 2;
grid-auto-rows: auto;
grid-template-columns: repeat(5, 1fr);
grid-auto-flow: column;
gap: 0.7rem;
max-height: none;
overflow-x: auto;
overflow-y: hidden;
}
.omis-minicart__panel {
width: min(100vw, 42rem);
}
.omis-minicart__head,
.omis-minicart__items,
.omis-minicart__foot,
.omis-minicart__ship {
padding-inline: 1.8rem;
}
.omis-minicart__thumb {
width: 6.4rem;
}
}
/* ==========================================================================
16. וריאציות ומצבי כפתור
========================================================================== */
.woocommerce div.product form.cart .variations {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin-bottom: 1.4rem;
}
.woocommerce div.product form.cart .variations tr {
display: block;
margin-bottom: 1.2rem;
}
.woocommerce div.product form.cart .variations th.label {
display: block;
padding: 0 0 0.7rem;
}
.woocommerce div.product form.cart .variations td.value {
display: block;
padding: 0;
}
.woocommerce div.product form.cart .variations select {
width: 100%;
min-height: 5rem;
border: 1px solid var(--omis-line);
border-radius: 1rem;
background: var(--omis-white);
padding: 0 4rem 0 1.6rem;
font-size: 1.5rem;
appearance: none;
background-image: linear-gradient(45deg, transparent 50%, var(--omis-ink) 50%), linear-gradient(135deg, var(--omis-ink) 50%, transparent 50%);
background-position: 1.6rem calc(50% + 1px), 2.1rem calc(50% + 1px);
background-size: 0.55rem 0.55rem, 0.55rem 0.55rem;
background-repeat: no-repeat;
transition: border-color 0.2s var(--omis-ease), box-shadow 0.2s var(--omis-ease);
}
.woocommerce div.product form.cart .variations select:focus {
outline: none;
border-color: var(--omis-sage);
box-shadow: 0 0 0 0.4rem rgba(167, 165, 120, 0.22);
}
/* בוררי מידה כ"גלולות" */
.omis-swatches {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 0.6rem;
}
.omis-swatch {
position: relative;
min-width: 9.2rem;
min-height: 6rem;
padding: 1rem 1.6rem;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.35rem;
border: 1.5px solid rgba(167, 165, 120, 0.5);
border-radius: 1.2rem;
background: var(--omis-cream-soft);
font-size: 1.6rem;
font-weight: var(--omis-medium);
line-height: 1.15;
color: var(--omis-ink);
transition: border-color 0.22s var(--omis-ease), background-color 0.22s var(--omis-ease),
color 0.22s var(--omis-ease), transform 0.22s var(--omis-ease), box-shadow 0.22s var(--omis-ease);
}
.omis-swatch__label {
white-space: nowrap;
}
.omis-swatch__price {
font-size: 1.25rem;
font-weight: var(--omis-regular);
color: var(--omis-ink-70);
transition: color 0.22s var(--omis-ease);
white-space: nowrap;
}
.omis-swatch:hover {
border-color: var(--omis-sage);
background: var(--omis-white);
transform: translateY(-2px);
box-shadow: 0 0.6rem 1.6rem rgba(47, 51, 45, 0.08);
}
.omis-swatch.is-active {
background: var(--omis-sage);
border-color: var(--omis-sage);
color: var(--omis-cream);
box-shadow: 0 0.6rem 1.8rem rgba(167, 165, 120, 0.4);
}
.omis-swatch.is-active .omis-swatch__price {
color: rgba(254, 244, 228, 0.88);
}
/* סימון וי קטן על הבחירה הפעילה */
.omis-swatch.is-active::after {
content: '';
position: absolute;
top: 0.7rem;
inset-inline-end: 0.8rem;
width: 0.85rem;
height: 0.45rem;
border-left: 1.6px solid var(--omis-cream);
border-bottom: 1.6px solid var(--omis-cream);
transform: rotate(-45deg);
}
.omis-swatch.is-disabled {
opacity: 0.4;
cursor: not-allowed;
background: transparent;
border-style: dashed;
}
.omis-swatch.is-disabled:hover {
transform: none;
box-shadow: none;
border-color: rgba(167, 165, 120, 0.5);
background: transparent;
}
.omis-swatch.is-disabled .omis-swatch__label {
text-decoration: line-through;
}
/* כותרת הבורר + רמז לבחירה */
.woocommerce div.product form.cart .variations th.label label {
display: flex;
align-items: baseline;
gap: 0.8rem;
font-size: 1.5rem;
font-weight: var(--omis-medium);
}
.omis-swatch-hint {
display: block;
font-size: 1.25rem;
color: var(--omis-ink-45);
margin-bottom: 1.4rem;
}
.omis-swatch-hint.is-chosen {
color: var(--omis-ink-70);
}
.omis-swatch-hint strong {
font-weight: var(--omis-medium);
color: var(--omis-ink);
}
.woocommerce div.product .woocommerce-variation-price {
margin-bottom: 1.2rem;
font-size: 1.9rem;
font-weight: var(--omis-medium);
}
.woocommerce div.product .woocommerce-variation-availability p {
font-size: 1.35rem;
color: var(--omis-ink-70);
}
.woocommerce div.product .single_variation_wrap {
width: 100%;
}
.woocommerce div.product form.cart.variations_form .woocommerce-variation-add-to-cart {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.2rem;
width: 100%;
}
/* מצב "צריך לבחור וריאציה" */
.woocommerce div.product form.cart .button.disabled,
.woocommerce div.product form.cart .button:disabled,
.woocommerce div.product form.cart .button.wc-variation-selection-needed {
background: var(--omis-ink-15);
border-color: transparent;
color: var(--omis-ink-45);
opacity: 1;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.woocommerce div.product form.cart .button.is-loading {
opacity: 0.7;
cursor: progress;
}
.woocommerce div.product form.cart .reset_variations {
display: inline-block;
margin-bottom: 1rem;
}
/* צ׳ק אמיתי ברשימת היתרונות */
.omis-perks li::before {
content: '';
position: absolute;
inset-inline-start: 0;
top: 0.7rem;
width: 1.2rem;
height: 0.62rem;
border-left: 1.7px solid var(--omis-sage);
border-bottom: 1.7px solid var(--omis-sage);
transform: rotate(-45deg);
border-radius: 1px;
}
/* ==========================================================================
17. עמוד המועדפים
========================================================================== */
.omis-wishlist-empty {
text-align: center;
padding: 5rem 2rem;
display: grid;
justify-items: center;
gap: 1.2rem;
}
.omis-wishlist-empty svg {
width: 5.4rem;
height: 5.4rem;
color: var(--omis-ink-45);
}
.omis-wishlist-empty p {
font-size: 1.9rem;
font-weight: var(--omis-medium);
}
.omis-wishlist-empty span {
font-size: 1.5rem;
color: var(--omis-ink-70);
max-width: 42rem;
line-height: 1.7;
}
/* בוררי הווריאציה מוחלפים ב"כפתורים" — ה-select נשאר לצורכי הטופס */
.omis-hidden-select {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
padding: 0;
margin: -1px;
}
.woocommerce div.product form.cart .variations td.value {
position: relative;
}
.omis-swatches {
margin-bottom: 0;
}
@media (max-width: 1023.98px) {
.omis-swatches {
gap: 0.6rem;
}
.omis-swatch {
min-width: 7.4rem;
min-height: 5rem;
padding: 0.8rem 1.1rem;
font-size: 1.35rem;
border-radius: 1rem;
}
.omis-swatch__price {
font-size: 1.1rem;
}
.omis-swatches {
gap: 0.7rem;
}
.omis-swatch-hint {
font-size: 1.1rem;
margin-bottom: 1rem;
}
}
/* ==========================================================================
18. החשבון שלי — פריסה
========================================================================== */
.omis-account {
display: grid;
grid-template-columns: 26rem minmax(0, 1fr);
gap: 3.4rem;
align-items: start;
}
.omis-account .woocommerce-MyAccount-navigation {
width: auto;
float: none;
background: var(--omis-white);
border: 1px solid var(--omis-line);
border-radius: 1.6rem;
padding: 1.2rem;
position: sticky;
top: calc(var(--omis-header-h) + 2rem);
}
.omis-account__content {
width: auto;
float: none;
background: var(--omis-white);
border: 1px solid var(--omis-line);
border-radius: 1.6rem;
padding: 3rem;
font-size: 1.55rem;
line-height: 1.8;
}
.omis-account__content h2,
.omis-account__content h3 {
font-size: 2.1rem;
font-weight: var(--omis-medium);
margin-bottom: 1.4rem;
}
@media (max-width: 1023.98px) {
.omis-account {
grid-template-columns: 1fr;
gap: 1.6rem;
}
.omis-account .woocommerce-MyAccount-navigation {
position: static;
}
.omis-account__content {
padding: 1.8rem;
font-size: 1.4rem;
}
}
/* ---- מסך התחברות/הרשמה בחזית ---- */
.omis-login {
max-width: 96rem;
margin-inline: auto;
}
.omis-login__intro {
text-align: center;
margin-bottom: 3.4rem;
}
.omis-login__intro img {
height: 4.4rem;
width: auto;
margin: 0 auto 2rem;
}
.omis-login__intro h2 {
font-size: 3rem;
font-weight: var(--omis-medium);
margin-bottom: 0.8rem;
letter-spacing: -0.01em;
}
.omis-login__intro p {
font-size: 1.6rem;
color: var(--omis-ink-70);
max-width: 52rem;
margin-inline: auto;
line-height: 1.7;
}
.omis-login__cols {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2.4rem;
align-items: start;
}
.omis-login__cols--single {
grid-template-columns: minmax(0, 46rem);
justify-content: center;
}
.omis-login__card {
background: var(--omis-white);
border: 1px solid var(--omis-line);
border-radius: 1.8rem;
padding: 3rem;
box-shadow: 0 1.4rem 3.6rem rgba(47, 51, 45, 0.06);
}
.omis-login__card--register {
background: var(--omis-cream-soft);
}
.omis-login__card h3 {
font-size: 2rem;
font-weight: var(--omis-medium);
margin-bottom: 2rem;
}
.omis-login .woocommerce-form,
.woocommerce .omis-login form.login,
.woocommerce .omis-login form.register {
border: 0;
padding: 0;
margin: 0;
background: none;
box-shadow: none;
}
.omis-login__actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.2rem;
flex-wrap: wrap;
}
.omis-login__actions label {
display: inline-flex;
align-items: center;
gap: 0.7rem;
font-size: 1.4rem;
font-weight: var(--omis-regular);
margin: 0;
}
.omis-login__actions input[type="checkbox"] {
width: 1.7rem;
height: 1.7rem;
accent-color: var(--omis-ink);
}
.omis-login__lost {
font-size: 1.35rem;
color: var(--omis-ink-70);
text-decoration: underline;
text-underline-offset: 0.3rem;
}
.omis-login__lost:hover {
color: var(--omis-ink);
}
.omis-login__hint {
font-size: 1.35rem;
color: var(--omis-ink-70);
margin-bottom: 1.4rem;
}
.omis-login .button {
width: 100%;
}
.omis-login__perks {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2.4rem;
margin-top: 3.4rem;
list-style: none;
padding: 0;
}
.omis-login__perks li {
position: relative;
padding-inline-start: 2.2rem;
font-size: 1.4rem;
color: var(--omis-ink-70);
}
.omis-login__perks li::before {
content: '';
position: absolute;
inset-inline-start: 0;
top: 0.55rem;
width: 1.1rem;
height: 0.6rem;
border-left: 1.6px solid var(--omis-sage);
border-bottom: 1.6px solid var(--omis-sage);
transform: rotate(-45deg);
}
@media (max-width: 1023.98px) {
.omis-login__cols {
grid-template-columns: 1fr;
gap: 1.4rem;
}
.omis-login__card {
padding: 1.8rem;
border-radius: 1.4rem;
}
.omis-login__intro h2 {
font-size: 2.1rem;
}
.omis-login__intro p {
font-size: 1.35rem;
}
.omis-login__intro img {
height: 3.2rem;
}
.omis-login__perks {
flex-direction: column;
align-items: center;
gap: 0.8rem;
margin-top: 2.2rem;
}
}
/* ==========================================================================
19. מעטפת עמודי מסחר + שלבי רכישה
========================================================================== */
.omis-shop-hero--slim .omis-shop-hero__inner {
padding-block: 4.6rem 4rem;
}
.omis-steps {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
margin-top: 2.4rem;
list-style: none;
padding: 0;
flex-wrap: wrap;
}
.omis-steps li {
display: inline-flex;
align-items: center;
gap: 0.8rem;
font-size: 1.4rem;
color: var(--omis-ink-45);
}
.omis-steps li + li::before {
content: '';
width: 3.2rem;
height: 1px;
background: currentColor;
opacity: 0.4;
margin-inline-end: 0.8rem;
}
.omis-steps__num {
width: 2.6rem;
height: 2.6rem;
border-radius: 50%;
border: 1.5px solid currentColor;
display: grid;
place-items: center;
font-size: 1.25rem;
}
.omis-steps li.is-active {
color: var(--omis-ink);
font-weight: var(--omis-medium);
}
.omis-steps li.is-active .omis-steps__num {
background: var(--omis-ink);
color: var(--omis-cream);
border-color: var(--omis-ink);
}
.omis-steps li.is-done {
color: var(--omis-sage);
}
/* ---- צ׳קאאוט: 2 עמודות ---- */
.woocommerce-checkout .omis-shop__inner form.checkout {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
/* שורה 2 גמישה (1fr) ולא auto — אחרת טופס הפרטים שמשתרע על שתי השורות
מנפח גם את שורה 1, ונוצר "שטח מת" בין הכותרת לתיבת הסיכום. */
grid-template-rows: min-content 1fr;
gap: 1.6rem 3.4rem;
align-items: start;
}
.woocommerce-checkout .omis-shop__inner #customer_details {
grid-column: 1;
grid-row: 1 / span 2;
background: var(--omis-white);
border: 1px solid var(--omis-line);
border-radius: 1.8rem;
padding: 3rem;
}
.woocommerce-checkout .omis-shop__inner #customer_details .col-1,
.woocommerce-checkout .omis-shop__inner #customer_details .col-2 {
width: 100%;
float: none;
}
.woocommerce-checkout .omis-shop__inner #order_review_heading {
grid-column: 2;
grid-row: 1;
margin: 0;
padding-top: 0.4rem;
font-size: 2rem;
align-self: start;
}
.woocommerce-checkout .omis-shop__inner #order_review {
grid-column: 2;
grid-row: 2;
background: var(--omis-white);
border: 1px solid var(--omis-line);
border-radius: 1.8rem;
padding: 2.6rem;
position: sticky;
top: calc(var(--omis-header-h) + 2rem);
}
.woocommerce-checkout .omis-shop__inner .woocommerce-form-coupon-toggle,
.woocommerce-checkout .omis-shop__inner .woocommerce-form-coupon,
.woocommerce-checkout .omis-shop__inner .woocommerce-form-login-toggle,
.woocommerce-checkout .omis-shop__inner .woocommerce-form-login {
grid-column: 1 / -1;
}
/* שדות נקיים */
.woocommerce-checkout .form-row {
margin-bottom: 1.6rem;
}
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
width: calc(50% - 0.7rem);
float: none;
display: inline-block;
vertical-align: top;
}
.woocommerce-checkout .form-row-first {
margin-inline-end: 1.2rem;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-checkout .select2-container--default .select2-selection--single {
height: 5rem;
border-radius: 1rem;
border: 1px solid var(--omis-line);
background: var(--omis-cream-soft);
}
.woocommerce form .form-row textarea {
height: auto;
min-height: 10rem;
padding-block: 1.2rem;
}
.woocommerce-checkout .select2-container--default .select2-selection--single {
display: flex;
align-items: center;
padding-inline: 1.6rem;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 1.4;
padding: 0;
font-size: 1.5rem;
color: var(--omis-ink);
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 100%;
inset-inline-end: 1.2rem;
inset-inline-start: auto;
}
.woocommerce-checkout .form-row label {
font-size: 1.35rem;
color: var(--omis-ink-70);
font-weight: var(--omis-regular);
margin-bottom: 0.6rem;
}
.woocommerce-checkout #order_review table.shop_table {
margin-bottom: 1.6rem;
}
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
font-size: 1.4rem;
padding: 1.1rem 0;
}
.woocommerce-checkout #order_review .order-total th,
.woocommerce-checkout #order_review .order-total td {
font-size: 1.7rem;
font-weight: var(--omis-semibold);
border-bottom: 0;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
font-size: 1.3rem;
color: var(--omis-ink-70);
margin-bottom: 1.2rem;
}
@media (max-width: 1023.98px) {
.omis-shop-hero--slim .omis-shop-hero__inner {
padding-block: 2.4rem 2.2rem;
}
.omis-steps {
margin-top: 1.6rem;
gap: 0.5rem;
}
.omis-steps li {
font-size: 1.1rem;
}
.omis-steps li + li::before {
width: 1.6rem;
margin-inline-end: 0.5rem;
}
.omis-steps__num {
width: 2rem;
height: 2rem;
font-size: 1rem;
}
.woocommerce-checkout .omis-shop__inner form.checkout {
grid-template-columns: 1fr;
grid-template-rows: none;
gap: 1.6rem;
}
.woocommerce-checkout .omis-shop__inner #customer_details,
.woocommerce-checkout .omis-shop__inner #order_review_heading,
.woocommerce-checkout .omis-shop__inner #order_review {
grid-column: 1;
grid-row: auto;
}
.woocommerce-checkout .omis-shop__inner #customer_details {
padding: 1.8rem;
}
.woocommerce-checkout .omis-shop__inner #order_review {
position: static;
padding: 1.8rem;
}
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
width: 100%;
margin-inline-end: 0;
}
}
/* ==========================================================================
20. שורת צ׳קאאוט קומפקטית (במקום hero)
========================================================================== */
.omis-checkbar {
background: var(--omis-cream);
border-bottom: 1px solid var(--omis-line);
}
.omis-checkbar__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
flex-wrap: wrap;
padding: 1.8rem var(--omis-gutter);
}
.omis-checkbar__title {
font-size: 2.2rem;
font-weight: var(--omis-medium);
letter-spacing: -0.01em;
margin: 0;
}
.omis-checkbar__trust {
display: inline-flex;
align-items: center;
gap: 0.7rem;
font-size: 1.3rem;
color: var(--omis-ink-70);
}
.omis-checkbar__trust svg {
width: 1.4rem;
height: 1.4rem;
color: #5d6b3f;
}
.omis-checkbar .omis-steps {
margin: 0;
}
.omis-shop--tight {
padding-block: 3rem 6rem;
}
@media (max-width: 1023.98px) {
.omis-checkbar__inner {
padding: 1.2rem var(--omis-gutter);
gap: 0.8rem;
}
.omis-checkbar__title {
font-size: 1.7rem;
}
.omis-checkbar__trust {
font-size: 1.1rem;
width: 100%;
}
.omis-shop--tight {
padding-block: 1.8rem 4rem;
}
}
/* ==========================================================================
21. קופון בתוך סיכום ההזמנה
========================================================================== */
.omis-coupon {
margin: 1.6rem 0;
border: 1px dashed var(--omis-sage);
border-radius: 1.2rem;
background: rgba(167, 165, 120, 0.08);
overflow: hidden;
transition: background-color 0.25s var(--omis-ease);
}
.omis-coupon.is-open {
background: rgba(167, 165, 120, 0.14);
}
.omis-coupon__toggle {
display: flex;
align-items: center;
gap: 0.9rem;
width: 100%;
padding: 1.2rem 1.4rem;
font-size: 1.4rem;
font-weight: var(--omis-medium);
color: var(--omis-ink);
text-align: start;
}
.omis-coupon__icon {
width: 2.4rem;
height: 2.4rem;
border-radius: 50%;
background: var(--omis-sage);
color: var(--omis-cream);
display: grid;
place-items: center;
font-size: 1.25rem;
font-weight: var(--omis-semibold);
flex: none;
}
.omis-coupon__chev {
margin-inline-start: auto;
width: 0.8rem;
height: 0.8rem;
border-inline-end: 1.6px solid var(--omis-ink-45);
border-block-end: 1.6px solid var(--omis-ink-45);
transform: rotate(45deg) translateY(-2px);
transition: transform 0.25s var(--omis-ease);
}
.omis-coupon.is-open .omis-coupon__chev {
transform: rotate(225deg) translateY(-2px);
}
.omis-coupon__body {
padding: 0 1.4rem 1.4rem;
}
.omis-coupon__row {
display: flex;
gap: 0.8rem;
}
.omis-coupon__row input {
flex: 1;
min-width: 0;
height: 4.4rem;
border: 1px solid var(--omis-line);
border-radius: 0.9rem;
background: var(--omis-white);
padding-inline: 1.4rem;
font-size: 1.45rem;
letter-spacing: 0.04em;
}
.omis-coupon__row input:focus {
outline: none;
border-color: var(--omis-sage);
box-shadow: 0 0 0 0.35rem rgba(167, 165, 120, 0.25);
}
.omis-coupon__apply {
height: 4.4rem;
padding-inline: 2rem;
border-radius: 0.9rem;
background: var(--omis-ink);
color: var(--omis-cream);
font-size: 1.4rem;
font-weight: var(--omis-medium);
flex: none;
transition: background-color 0.2s var(--omis-ease);
}
.omis-coupon__apply:hover {
background: var(--omis-olive);
}
.omis-coupon__apply:disabled {
opacity: 0.55;
cursor: progress;
}
.omis-coupon__msg {
margin-top: 0.9rem;
font-size: 1.3rem;
line-height: 1.5;
}
.omis-coupon__msg:empty {
display: none;
}
.omis-coupon__msg.is-ok {
color: #5d6b3f;
}
.omis-coupon__msg.is-error {
color: var(--omis-sale);
}
/* הבאנרים המקוריים של ווקומרס בצ׳קאאוט — מוסתרים לטובת הרכיב שלנו */
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout form.checkout_coupon {
display: none !important;
}
/* ==========================================================================
22. הירו של האזור האישי
========================================================================== */
.omis-portal-hero {
position: relative;
overflow: hidden;
background:
radial-gradient(120% 140% at 85% -20%, rgba(254, 244, 228, 0.55), transparent 60%),
linear-gradient(135deg, var(--omis-sage) 0%, #b4b287 55%, var(--omis-sage) 100%);
color: var(--omis-ink);
isolation: isolate;
}
.omis-portal-hero::after {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 18% 82%, rgba(254, 244, 228, 0.28) 0 0.9rem, transparent 0.95rem),
radial-gradient(circle at 32% 24%, rgba(254, 244, 228, 0.2) 0 0.55rem, transparent 0.6rem),
radial-gradient(circle at 8% 40%, rgba(254, 244, 228, 0.16) 0 0.35rem, transparent 0.4rem);
pointer-events: none;
z-index: -1;
}
.omis-portal-hero__watermark {
position: absolute;
inset-inline-end: -3rem;
top: 50%;
transform: translateY(-50%);
width: 34rem;
height: auto;
opacity: 0.07;
z-index: -1;
pointer-events: none;
}
.omis-portal-hero__inner {
padding: 4.4rem var(--omis-gutter) 0;
}
.omis-portal-hero .omis-breadcrumbs ol {
justify-content: flex-start;
opacity: 0.72;
}
.omis-portal-hero__greeting {
margin-top: 1.4rem;
font-size: 1.35rem;
letter-spacing: 0.12em;
color: rgba(47, 51, 45, 0.62);
}
.omis-portal-hero__title {
display: flex;
align-items: center;
gap: 1rem;
margin-top: 0.5rem;
font-size: 4rem;
font-weight: var(--omis-medium);
line-height: 1.15;
letter-spacing: -0.015em;
}
.omis-portal-hero__badge {
min-width: 3rem;
height: 3rem;
padding-inline: 0.9rem;
border-radius: 999px;
background: var(--omis-ink);
color: var(--omis-cream);
font-size: 1.4rem;
font-weight: var(--omis-medium);
display: inline-grid;
place-items: center;
}
.omis-portal-hero__sub {
margin-top: 1rem;
max-width: 58rem;
font-size: 1.6rem;
line-height: 1.65;
color: rgba(47, 51, 45, 0.75);
}
.omis-portal-hero__tabs {
display: flex;
gap: 0.6rem;
margin-top: 3rem;
flex-wrap: wrap;
}
.omis-portal-hero__tabs a {
display: inline-flex;
align-items: center;
gap: 0.8rem;
padding: 1.1rem 1.8rem;
border-radius: 1.2rem 1.2rem 0 0;
background: rgba(254, 244, 228, 0.4);
font-size: 1.45rem;
color: var(--omis-ink);
transition: background-color 0.25s var(--omis-ease), transform 0.25s var(--omis-ease);
}
.omis-portal-hero__tabs a:hover {
background: rgba(254, 244, 228, 0.7);
}
.omis-portal-hero__tabs a.is-active {
background: var(--omis-cream);
font-weight: var(--omis-medium);
}
.omis-portal-hero__tabs svg {
width: 1.7rem;
height: auto;
}
.omis-page--portal {
padding-top: 5rem;
}
@media (max-width: 1023.98px) {
.omis-portal-hero__inner {
padding: 2.2rem var(--omis-gutter) 0;
}
.omis-portal-hero__title {
font-size: 2.4rem;
}
.omis-portal-hero__badge {
min-width: 2.2rem;
height: 2.2rem;
font-size: 1.15rem;
}
.omis-portal-hero__sub {
font-size: 1.32rem;
}
.omis-portal-hero__greeting {
font-size: 1.15rem;
}
.omis-portal-hero__watermark {
width: 20rem;
opacity: 0.06;
}
.omis-portal-hero__tabs {
margin-top: 2rem;
gap: 0.3rem;
overflow-x: auto;
flex-wrap: nowrap;
scrollbar-width: none;
}
.omis-portal-hero__tabs::-webkit-scrollbar {
display: none;
}
.omis-portal-hero__tabs a {
padding: 0.9rem 1.2rem;
font-size: 1.2rem;
white-space: nowrap;
}
.omis-page--portal {
padding-top: 2.6rem;
}
}
/* ==========================================================================
23. עמוד תודה / אישור הזמנה
========================================================================== */
.omis-thankyou {
max-width: 96rem;
margin-inline: auto;
}
.omis-thankyou__hero {
position: relative;
overflow: hidden;
text-align: center;
background: linear-gradient(150deg, var(--omis-olive) 0%, #6f6754 100%);
color: var(--omis-cream);
border-radius: 2.4rem;
padding: 5rem 3rem 4.4rem;
isolation: isolate;
}
.omis-thankyou__hero::after {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 12% 78%, rgba(254, 244, 228, 0.16) 0 1.1rem, transparent 1.15rem),
radial-gradient(circle at 88% 22%, rgba(254, 244, 228, 0.13) 0 0.8rem, transparent 0.85rem),
radial-gradient(circle at 74% 88%, rgba(254, 244, 228, 0.1) 0 0.5rem, transparent 0.55rem);
z-index: -1;
}
.omis-thankyou__logo {
width: 11rem;
height: auto;
margin: 0 auto 2.6rem;
opacity: 0.92;
}
.omis-thankyou__mark {
width: 7rem;
height: 7rem;
border-radius: 50%;
background: rgba(254, 244, 228, 0.14);
border: 1.5px solid rgba(254, 244, 228, 0.55);
display: grid;
place-items: center;
margin: 0 auto 2rem;
animation: omis-pop 0.5s var(--omis-ease) both;
}
.omis-thankyou__mark::after {
content: '';
width: 2.4rem;
height: 1.25rem;
border-left: 2px solid var(--omis-cream);
border-bottom: 2px solid var(--omis-cream);
transform: rotate(-45deg) translate(2px, -3px);
}
@keyframes omis-pop {
from { transform: scale(0.6); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.omis-thankyou__hero h1 {
font-size: 3.6rem;
font-weight: var(--omis-medium);
line-height: 1.2;
letter-spacing: -0.015em;
}
.omis-thankyou__hero p {
margin-top: 1.2rem;
font-size: 1.65rem;
line-height: 1.7;
opacity: 0.88;
max-width: 52rem;
margin-inline: auto;
}
.omis-thankyou__hero--failed {
background: linear-gradient(150deg, #8a5340 0%, #6d4132 100%);
}
/* ---- נתוני הזמנה ---- */
.omis-thankyou__facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: 0;
margin-top: -2.6rem;
position: relative;
z-index: 2;
background: var(--omis-cream);
border: 1px solid var(--omis-line);
border-radius: 1.8rem;
box-shadow: 0 1.6rem 4rem rgba(47, 51, 45, 0.08);
overflow: hidden;
list-style: none;
padding: 0;
margin-inline: 2.4rem;
}
.omis-thankyou__facts li {
padding: 1.8rem 1.6rem;
text-align: center;
border-inline-end: 1px solid var(--omis-line);
}
.omis-thankyou__facts li:last-child {
border-inline-end: 0;
}
.omis-thankyou__facts span {
display: block;
font-size: 1.2rem;
color: var(--omis-ink-45);
margin-bottom: 0.5rem;
}
.omis-thankyou__facts strong {
font-size: 1.6rem;
font-weight: var(--omis-medium);
word-break: break-word;
}
/* ---- שלבים ---- */
.omis-thankyou__steps {
margin-top: 4.4rem;
}
.omis-thankyou__steps h2,
.omis-thankyou__panel h2,
.omis-thankyou__care h2 {
font-size: 2.2rem;
font-weight: var(--omis-medium);
margin-bottom: 2rem;
}
.omis-thankyou__steps ol {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.6rem;
list-style: none;
padding: 0;
counter-reset: none;
}
.omis-thankyou__steps li {
background: var(--omis-white);
border: 1px solid var(--omis-line);
border-radius: 1.6rem;
padding: 2.2rem 2rem;
position: relative;
}
.omis-thankyou__steps li.is-active {
border-color: var(--omis-sage);
box-shadow: 0 0 0 0.35rem rgba(167, 165, 120, 0.18);
}
.omis-thankyou__step-num {
width: 3rem;
height: 3rem;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--omis-cream-soft);
color: var(--omis-ink-45);
font-size: 1.35rem;
font-weight: var(--omis-medium);
margin-bottom: 1.2rem;
}
.omis-thankyou__steps li.is-done .omis-thankyou__step-num {
background: var(--omis-sage);
color: var(--omis-cream);
}
.omis-thankyou__steps li.is-active .omis-thankyou__step-num {
background: var(--omis-ink);
color: var(--omis-cream);
}
.omis-thankyou__steps h3 {
font-size: 1.65rem;
font-weight: var(--omis-medium);
margin-bottom: 0.5rem;
}
.omis-thankyou__steps p {
font-size: 1.4rem;
line-height: 1.65;
color: var(--omis-ink-70);
}
/* ---- פאנלים ---- */
.omis-thankyou__panel {
background: var(--omis-white);
border: 1px solid var(--omis-line);
border-radius: 1.8rem;
padding: 2.8rem;
margin-top: 2rem;
}
.omis-thankyou__items {
list-style: none;
padding: 0;
margin: 0;
}
.omis-thankyou__items li {
display: flex;
align-items: center;
gap: 1.6rem;
padding: 1.4rem 0;
border-bottom: 1px solid var(--omis-line);
}
.omis-thankyou__items li:last-child {
border-bottom: 0;
}
.omis-thankyou__thumb {
width: 7.2rem;
flex: none;
border-radius: 1rem;
overflow: hidden;
background: var(--omis-cream-soft);
aspect-ratio: 4 / 5;
}
.omis-thankyou__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.omis-thankyou__item-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.omis-thankyou__item-info strong {
font-size: 1.55rem;
font-weight: var(--omis-medium);
}
.omis-thankyou__item-meta,
.omis-thankyou__item-meta p {
font-size: 1.25rem;
color: var(--omis-ink-45);
margin: 0;
}
.omis-thankyou__item-qty {
font-size: 1.3rem;
color: var(--omis-ink-70);
}
.omis-thankyou__item-total {
font-size: 1.55rem;
font-weight: var(--omis-medium);
white-space: nowrap;
}
.omis-thankyou__totals {
margin: 1.8rem 0 0;
border-top: 1px solid var(--omis-line);
padding-top: 1.6rem;
}
.omis-thankyou__totals > div {
display: flex;
justify-content: space-between;
gap: 1.6rem;
padding: 0.55rem 0;
font-size: 1.45rem;
}
.omis-thankyou__totals dt {
color: var(--omis-ink-70);
}
.omis-thankyou__totals dd {
margin: 0;
font-weight: var(--omis-medium);
}
.omis-thankyou__totals .is-grand {
margin-top: 0.8rem;
padding-top: 1.2rem;
border-top: 1px solid var(--omis-line);
font-size: 1.9rem;
}
.omis-thankyou__totals .is-grand dd {
font-weight: var(--omis-semibold);
}
.omis-thankyou__addresses {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
.omis-thankyou__addresses .omis-thankyou__panel {
margin-top: 2rem;
}
.omis-thankyou__addresses address {
font-style: normal;
font-size: 1.5rem;
line-height: 1.75;
color: var(--omis-ink-70);
}
.omis-thankyou__contact {
margin-top: 0.8rem;
font-size: 1.45rem;
color: var(--omis-ink-70);
}
/* ---- טיפוח + עזרה ---- */
.omis-thankyou__care {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
margin-top: 2rem;
}
.omis-thankyou__care-text,
.omis-thankyou__help {
border-radius: 1.8rem;
padding: 2.8rem;
}
.omis-thankyou__care-text {
background: var(--omis-cream-soft);
border: 1px solid var(--omis-line);
}
.omis-thankyou__care-text ul {
list-style: none;
padding: 0;
margin: 0 0 1.4rem;
display: grid;
gap: 0.8rem;
}
.omis-thankyou__care-text li {
position: relative;
padding-inline-start: 2.2rem;
font-size: 1.45rem;
color: var(--omis-ink-70);
}
.omis-thankyou__care-text li::before {
content: '';
position: absolute;
inset-inline-start: 0;
top: 0.7rem;
width: 1.1rem;
height: 0.6rem;
border-left: 1.6px solid var(--omis-sage);
border-bottom: 1.6px solid var(--omis-sage);
transform: rotate(-45deg);
}
.omis-thankyou__care-text p {
font-size: 1.35rem;
color: var(--omis-ink-45);
line-height: 1.7;
}
.omis-thankyou__help {
background: var(--omis-sage);
color: var(--omis-ink);
}
.omis-thankyou__help p {
font-size: 1.5rem;
line-height: 1.7;
opacity: 0.85;
margin-bottom: 2rem;
}
.omis-thankyou__help-links {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.omis-thankyou__help-links .omis-btn--sage {
background: var(--omis-cream);
border-color: var(--omis-cream);
color: var(--omis-ink);
}
.omis-thankyou__social {
display: flex;
align-items: center;
gap: 1.4rem;
margin-top: 2.4rem;
padding-top: 2rem;
border-top: 1px solid rgba(47, 51, 45, 0.18);
font-size: 1.3rem;
}
.omis-thankyou__social a {
width: 2.2rem;
height: 2.2rem;
display: grid;
place-items: center;
color: var(--omis-ink);
transition: transform 0.2s var(--omis-ease), opacity 0.2s var(--omis-ease);
}
.omis-thankyou__social a:hover {
transform: translateY(-2px);
opacity: 0.75;
}
.omis-thankyou__note p {
font-size: 1.5rem;
line-height: 1.7;
color: var(--omis-ink-70);
}
.omis-thankyou__actions {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1.2rem;
margin-top: 3.4rem;
}
/* פרטי ההזמנה של ווקומרס עצמם — מוסתרים, יש לנו תצוגה משלנו */
.woocommerce-order .woocommerce-order-details,
.woocommerce-order .woocommerce-customer-details,
.woocommerce-order > .woocommerce-order-overview,
.woocommerce-order > p.woocommerce-notice--success {
display: none;
}
@media (max-width: 1023.98px) {
.omis-thankyou__hero {
padding: 3rem 1.8rem 3rem;
border-radius: 1.6rem;
}
.omis-thankyou__hero h1 {
font-size: 2.2rem;
}
.omis-thankyou__hero p {
font-size: 1.35rem;
}
.omis-thankyou__logo {
width: 8rem;
margin-bottom: 1.8rem;
}
.omis-thankyou__mark {
width: 5.2rem;
height: 5.2rem;
}
.omis-thankyou__mark::after {
width: 1.8rem;
height: 0.95rem;
}
.omis-thankyou__facts {
grid-template-columns: repeat(2, 1fr);
margin-inline: 0.8rem;
border-radius: 1.2rem;
}
.omis-thankyou__facts li {
padding: 1.2rem 0.9rem;
border-bottom: 1px solid var(--omis-line);
}
.omis-thankyou__facts li:nth-child(2n) {
border-inline-end: 0;
}
.omis-thankyou__facts strong {
font-size: 1.3rem;
}
.omis-thankyou__facts span {
font-size: 1.05rem;
}
.omis-thankyou__steps {
margin-top: 2.8rem;
}
.omis-thankyou__steps ol {
grid-template-columns: 1fr;
gap: 1rem;
}
.omis-thankyou__steps li {
padding: 1.6rem;
border-radius: 1.2rem;
}
.omis-thankyou__steps h2,
.omis-thankyou__panel h2,
.omis-thankyou__care h2 {
font-size: 1.75rem;
margin-bottom: 1.4rem;
}
.omis-thankyou__panel,
.omis-thankyou__care-text,
.omis-thankyou__help {
padding: 1.8rem;
border-radius: 1.2rem;
}
.omis-thankyou__addresses,
.omis-thankyou__care {
grid-template-columns: 1fr;
gap: 1.2rem;
}
.omis-thankyou__thumb {
width: 5.6rem;
}
.omis-thankyou__item-info strong {
font-size: 1.35rem;
}
.omis-thankyou__item-total {
font-size: 1.35rem;
}
}
/* ==========================================================================
24. סקשן "אולי תאהבו גם"
========================================================================== */
.omis-related {
background: var(--omis-cream);
border-top: 1px solid var(--omis-line);
margin-top: 5rem;
/* מרווח נשימה לפני הפוטר */
padding-block: 6rem 9rem;
}
.omis-related__inner {
padding-inline: var(--omis-gutter);
}
.omis-related .related,
.omis-related .upsells {
margin-top: 0;
}
.omis-related .upsells + .related {
margin-top: 6rem;
}
.omis-related > .omis-wrap > section > h2,
.omis-related .related > h2,
.omis-related .upsells > h2 {
font-size: 3.2rem;
font-weight: var(--omis-medium);
letter-spacing: -0.01em;
text-align: center;
margin-bottom: 3.4rem;
}
.omis-related ul.products {
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1023.98px) {
.omis-related {
margin-top: 2.4rem;
padding-block: 3.2rem 6rem;
}
.omis-related .related > h2,
.omis-related .upsells > h2 {
font-size: 2rem;
margin-bottom: 2rem;
}
.omis-related ul.products {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.omis-related .upsells + .related {
margin-top: 3.2rem;
}
}
/* ==========================================================================
25. עמוד יצירת קשר — בשפת סקשן OMIS's friends
========================================================================== */
.omis-contact-page {
background: var(--omis-cream);
padding-block: 4.4rem 8rem;
}
.omis-contact-page__inner {
padding-inline: var(--omis-gutter);
}
.omis-contact-page__head {
text-align: center;
max-width: 72rem;
margin-inline: auto;
margin-bottom: 4.4rem;
}
.omis-contact-page__eyebrow {
display: inline-block;
font-size: 1.3rem;
letter-spacing: 0.18em;
color: var(--omis-ink-45);
margin-bottom: 1.2rem;
}
.omis-contact-page__title {
font-size: 4.4rem;
font-weight: var(--omis-medium);
line-height: 1.15;
letter-spacing: -0.015em;
}
.omis-contact-page__lead {
margin-top: 1.4rem;
font-size: 1.7rem;
line-height: 1.7;
color: var(--omis-ink-70);
}
/* ---- הכרטיס ---- */
.omis-contact-card {
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
border-radius: var(--omis-radius-card);
overflow: hidden;
background: var(--omis-olive);
color: var(--omis-cream);
box-shadow: 0 2.4rem 6rem rgba(47, 51, 45, 0.14);
}
.omis-contact-card__photo {
position: relative;
min-height: 52rem;
}
.omis-contact-card__photo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.omis-contact-card__panel {
position: relative;
padding: 4.4rem 4.4rem 4rem;
display: flex;
flex-direction: column;
isolation: isolate;
}
.omis-contact-card__panel::after {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 88% 12%, rgba(254, 244, 228, 0.09) 0 1.1rem, transparent 1.15rem),
radial-gradient(circle at 12% 90%, rgba(254, 244, 228, 0.07) 0 0.75rem, transparent 0.8rem);
z-index: -1;
pointer-events: none;
}
.omis-contact-card__brand {
width: 8.4rem;
height: auto;
opacity: 0.9;
margin-bottom: 2.6rem;
}
.omis-contact-card__title {
font-size: 3rem;
font-weight: var(--omis-medium);
line-height: 1.2;
margin-bottom: 0.8rem;
}
.omis-contact-card__sub {
font-size: 1.5rem;
line-height: 1.7;
opacity: 0.82;
margin-bottom: 2.6rem;
max-width: 42rem;
}
/* ---- הטופס ---- */
.omis-contact-form {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.2rem;
}
.omis-contact-form .omis-field--full {
grid-column: 1 / -1;
}
.omis-contact-form input,
.omis-contact-form textarea {
width: 100%;
height: 4.8rem;
background: var(--omis-cream);
border: 1px solid rgba(167, 165, 120, 0.85);
border-radius: 0.8rem;
color: var(--omis-ink);
font-size: 1.5rem;
padding-inline: 1.6rem;
transition: border-color 0.2s var(--omis-ease), box-shadow 0.2s var(--omis-ease);
}
.omis-contact-form textarea {
height: 11rem;
padding-block: 1.4rem;
resize: none;
line-height: 1.65;
}
.omis-contact-form input::placeholder,
.omis-contact-form textarea::placeholder {
color: var(--omis-ink-70);
opacity: 1;
}
.omis-contact-form input:focus,
.omis-contact-form textarea:focus {
outline: none;
border-color: var(--omis-cream);
box-shadow: 0 0 0 0.35rem rgba(254, 244, 228, 0.22);
}
.omis-contact-form__actions {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.6rem;
flex-wrap: wrap;
margin-top: 0.6rem;
}
.omis-contact-form__submit {
height: 4.8rem;
padding-inline: 3.2rem;
border: 0;
border-radius: 999px;
background: var(--omis-cream);
color: var(--omis-ink);
font-size: 1.5rem;
font-weight: var(--omis-medium);
transition: background-color 0.25s var(--omis-ease), transform 0.25s var(--omis-ease);
}
.omis-contact-form__submit:hover {
background: var(--omis-white);
transform: translateY(-2px);
}
.omis-contact-form__submit[disabled] {
opacity: 0.6;
cursor: progress;
}
.omis-contact-form__social {
display: flex;
align-items: center;
gap: 2rem;
}
.omis-contact-form__social a {
width: 2.2rem;
height: 2.2rem;
display: grid;
place-items: center;
color: var(--omis-cream);
transition: transform 0.2s var(--omis-ease), opacity 0.2s var(--omis-ease);
}
.omis-contact-form__social a:hover {
transform: translateY(-2px);
opacity: 0.78;
}
.omis-contact-form .omis-form-message {
position: static;
grid-column: 1 / -1;
text-align: start;
font-size: 1.35rem;
color: var(--omis-cream);
margin-top: 0.4rem;
}
.omis-contact-card .omis-thanks {
position: static;
width: auto;
margin-top: 1rem;
}
.omis-contact-form.is-hidden {
display: none;
}
/* ---- פס פרטי קשר ---- */
.omis-contact-strip {
margin-top: 2.4rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
gap: 1.2rem;
}
.omis-contact-strip__item {
position: relative;
display: flex;
align-items: center;
gap: 1.3rem;
background: var(--omis-cream-soft);
border: 1px solid rgba(167, 165, 120, 0.42);
border-radius: 1.6rem;
padding: 1.8rem;
overflow: hidden;
isolation: isolate;
transition: transform 0.28s var(--omis-ease), box-shadow 0.28s var(--omis-ease),
border-color 0.28s var(--omis-ease), background-color 0.28s var(--omis-ease);
}
/* הילה עדינה בשפת הסקשן של OMIS's friends */
.omis-contact-strip__item::before {
content: '';
position: absolute;
inset-inline-end: -4rem;
top: -4rem;
width: 11rem;
height: 11rem;
border-radius: 50%;
background: radial-gradient(circle, rgba(167, 165, 120, 0.3), transparent 70%);
opacity: 0;
transform: scale(0.7);
transition: opacity 0.45s var(--omis-ease), transform 0.45s var(--omis-ease);
z-index: -1;
}
a.omis-contact-strip__item:hover {
transform: translateY(-3px);
border-color: var(--omis-sage);
background: var(--omis-white);
box-shadow: 0 1.2rem 2.8rem rgba(47, 51, 45, 0.1);
}
a.omis-contact-strip__item:hover::before {
opacity: 1;
transform: scale(1);
}
.omis-contact-strip__item svg {
width: 1.8rem;
height: 1.8rem;
}
/* עיגול אייקון בשפת המותג */
.omis-contact-strip__item > svg {
width: 3.8rem;
height: 3.8rem;
flex: none;
padding: 1rem;
border-radius: 50%;
background: var(--omis-sage);
color: var(--omis-cream);
box-sizing: border-box;
transition: transform 0.28s var(--omis-ease);
}
a.omis-contact-strip__item:hover > svg {
transform: translateY(-2px) rotate(-5deg);
}
.omis-contact-strip__item span {
display: grid;
gap: 0.15rem;
min-width: 0;
}
.omis-contact-strip__item em {
font-style: normal;
font-size: 1.15rem;
letter-spacing: 0.08em;
color: var(--omis-ink-45);
}
.omis-contact-strip__item strong {
font-size: 1.45rem;
font-weight: var(--omis-medium);
overflow-wrap: anywhere;
}
/* מדינת העסק ליד הטלפון — דרישה של חברת הסליקה.
בלי כלל משלה היא יורשת 16px מברירת המחדל של הדפדפן ויוצאת גדולה
ממספר הטלפון עצמו (1.45rem). היא מידע משני, ולכן מקבלת את אותו
טיפול מושתק כמו התווית מעליה. */
.omis-contact-strip__item .omis-contact-strip__country {
font-size: 1.15rem;
font-weight: var(--omis-regular);
color: var(--omis-ink-45);
}
@media (max-width: 1023.98px) {
.omis-contact-page {
padding-block: 3rem 5rem;
}
.omis-contact-page__head {
margin-bottom: 2.4rem;
}
.omis-contact-page__title {
font-size: 2.7rem;
}
.omis-contact-page__lead {
font-size: 1.4rem;
}
.omis-contact-page__eyebrow {
font-size: 1.1rem;
}
.omis-contact-card {
grid-template-columns: 1fr;
border-radius: 1.4rem;
}
.omis-contact-card__photo {
min-height: 22rem;
order: 2;
}
.omis-contact-card__panel {
padding: 2.2rem 1.8rem 2.4rem;
}
.omis-contact-card__brand {
width: 6.4rem;
margin-bottom: 1.6rem;
}
.omis-contact-card__title {
font-size: 2.1rem;
}
.omis-contact-card__sub {
font-size: 1.32rem;
margin-bottom: 1.8rem;
}
.omis-contact-form {
grid-template-columns: 1fr;
gap: 0.9rem;
}
.omis-contact-form input,
.omis-contact-form textarea {
height: 4.2rem;
font-size: 1.35rem;
}
.omis-contact-form textarea {
height: 9rem;
}
.omis-contact-form__submit {
height: 4.2rem;
font-size: 1.35rem;
width: 100%;
}
.omis-contact-form__actions {
flex-direction: column;
align-items: stretch;
gap: 1.4rem;
}
.omis-contact-form__social {
justify-content: center;
}
.omis-contact-strip {
grid-template-columns: 1fr;
gap: 0.8rem;
}
.omis-contact-strip__item {
padding: 1.3rem 1.4rem;
border-radius: 1.2rem;
gap: 1rem;
}
.omis-contact-strip__item > svg {
width: 3.2rem;
height: 3.2rem;
padding: 0.85rem;
}
}
/* ==========================================================================
26. דריסת צבעי ברירת המחדל של ווקומרס (הסגול #a46497)
========================================================================== */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce div.product form.cart .button,
.woocommerce div.product form.cart .single_add_to_cart_button {
background-color: var(--omis-ink);
color: var(--omis-cream);
border-color: var(--omis-ink);
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce div.product form.cart .button:hover,
.woocommerce div.product form.cart .single_add_to_cart_button:hover {
background-color: var(--omis-olive);
border-color: var(--omis-olive);
color: var(--omis-cream);
}
/* וריאנט "רוח" — רקע שקוף עד לריחוף */
.woocommerce .product a.button,
.woocommerce a.button.omis-btn--ghost,
.omis-btn--ghost {
background-color: transparent;
color: var(--omis-ink);
border-color: var(--omis-ink);
}
.woocommerce .product a.button:hover,
.woocommerce a.button.omis-btn--ghost:hover,
.omis-btn--ghost:hover {
background-color: var(--omis-ink);
color: var(--omis-cream);
border-color: var(--omis-ink);
}
.omis-btn--sage,
.woocommerce a.button.omis-btn--sage {
background-color: var(--omis-cream);
border-color: var(--omis-cream);
color: var(--omis-ink);
}
.omis-btn--sage:hover,
.woocommerce a.button.omis-btn--sage:hover {
background-color: var(--omis-white);
border-color: var(--omis-white);
color: var(--omis-ink);
}
/* מצב לא־זמין */
.woocommerce div.product form.cart .button.disabled,
.woocommerce div.product form.cart .button:disabled,
.woocommerce div.product form.cart .button.disabled:hover,
.woocommerce div.product form.cart .button:disabled:hover,
.woocommerce div.product form.cart .button.wc-variation-selection-needed,
.woocommerce div.product form.cart .button.wc-variation-selection-needed:hover {
background-color: var(--omis-ink-15);
border-color: transparent;
color: var(--omis-ink-45);
transform: none;
box-shadow: none;
}
/* לינקים כלליים של ווקומרס לא יקבלו את הסגול — אבל בלי לדרוס כפתורים.
ה-:where() מאפס את משקל ה-:not() כדי שהכלל הזה יישאר "רצפה" בלבד (0,1,1)
ולא ידרוס צבעי טקסט מכוונים של המותג (למשל פריט פעיל על רקע כהה). */
.woocommerce a:where(:not(.button)):where(:not(.omis-btn)):where(:not([class*="omis-"])),
.woocommerce-page a:where(:not(.button)):where(:not(.omis-btn)):where(:not([class*="omis-"])) {
color: inherit;
}
/* כפתורים שומרים על צבע הטקסט שלהם בכל הקשר */
a.omis-btn,
.woocommerce a.omis-btn,
.woocommerce-page a.omis-btn,
.omis-minicart a.omis-btn,
.omis-thankyou a.omis-btn {
color: var(--omis-cream);
}
a.omis-btn--ghost,
.woocommerce a.omis-btn--ghost,
.woocommerce-page a.omis-btn--ghost,
.omis-minicart a.omis-btn--ghost,
.omis-thankyou a.omis-btn--ghost {
color: var(--omis-ink);
}
a.omis-btn--ghost:hover,
.woocommerce a.omis-btn--ghost:hover,
.woocommerce-page a.omis-btn--ghost:hover,
.omis-minicart a.omis-btn--ghost:hover {
color: var(--omis-cream);
}
a.omis-btn--sage,
.woocommerce a.omis-btn--sage,
.woocommerce-page a.omis-btn--sage,
.omis-thankyou a.omis-btn--sage {
color: var(--omis-ink);
}
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
border-top-color: var(--omis-sage);
}
/* המחיר כבר מופיע על כפתור המידה — אין צורך לחזור עליו מעל הכפתור */
.woocommerce div.product .woocommerce-variation-price {
display: none;
}
.woocommerce div.product .woocommerce-variation-availability {
margin-bottom: 1rem;
}
.woocommerce div.product .woocommerce-variation-availability p {
margin: 0;
font-size: 1.3rem;
color: var(--omis-ink-70);
}
/* ==========================================================================
27. שורת יתרונות בעמוד המוצר
========================================================================== */
.omis-perks {
list-style: none;
padding: 2rem 0 0;
margin: 0;
border-top: 1px solid var(--omis-line);
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
.omis-perks li {
position: static;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.7rem;
}
.omis-perks li::before {
content: none;
}
.omis-perks__icon {
width: 3.6rem;
height: 3.6rem;
border-radius: 50%;
background: var(--omis-cream-soft);
color: var(--omis-sage);
display: grid;
place-items: center;
transition: background-color 0.25s var(--omis-ease), color 0.25s var(--omis-ease);
}
.omis-perks li:hover .omis-perks__icon {
background: var(--omis-sage);
color: var(--omis-cream);
}
.omis-perks__icon svg {
width: 1.7rem;
height: 1.7rem;
}
.omis-perks__text {
display: grid;
gap: 0.1rem;
line-height: 1.3;
}
.omis-perks__text strong {
font-size: 1.25rem;
font-weight: var(--omis-medium);
color: var(--omis-ink);
}
.omis-perks__text em {
font-style: normal;
font-size: 1.1rem;
color: var(--omis-ink-45);
}
/* מפרט — מק״ט וקולקציה */
.omis-product-meta {
margin: 2rem 0 0;
display: grid;
gap: 0;
}
.omis-product-meta > div {
display: flex;
gap: 1.2rem;
padding: 1.2rem 0;
border-bottom: 1px solid var(--omis-line);
font-size: 1.5rem;
}
.omis-product-meta > div:last-child {
border-bottom: 0;
}
.omis-product-meta dt {
width: 22rem;
flex: none;
font-weight: var(--omis-medium);
}
.omis-product-meta dd {
margin: 0;
color: var(--omis-ink-70);
}
.omis-product-meta dd a:hover {
text-decoration: underline;
text-underline-offset: 0.3rem;
}
@media (max-width: 1023.98px) {
.omis-perks {
grid-template-columns: repeat(2, 1fr);
gap: 1.4rem 0.8rem;
padding-top: 1.6rem;
}
.omis-perks__icon {
width: 3rem;
height: 3rem;
}
.omis-perks__icon svg {
width: 1.5rem;
height: 1.5rem;
}
.omis-perks__text strong {
font-size: 1.15rem;
}
.omis-perks__text em {
font-size: 1rem;
}
.omis-product-meta > div {
flex-direction: column;
gap: 0.3rem;
font-size: 1.35rem;
}
.omis-product-meta dt {
width: auto;
}
}
/* ביניים: 3 בשורה בטאבלט רחב */
@media (min-width: 1024px) and (max-width: 1279.98px) {
.woocommerce ul.products,
.omis-related ul.products {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* ==========================================================================
28. הידוק אזור הרכישה בעמוד המוצר
========================================================================== */
/* "נקה" של ווקומרס מוסתר — לחיצה נוספת על מידה מבטלת אותה */
.woocommerce div.product form.cart .reset_variations {
display: none !important;
}
.woocommerce div.product form.cart.variations_form {
gap: 0;
display: block;
}
.woocommerce div.product form.cart .variations {
margin-bottom: 0;
}
.woocommerce div.product form.cart .variations tr:last-child {
margin-bottom: 0;
}
.omis-swatch-hint {
margin-bottom: 0;
}
.woocommerce div.product form.cart .single_variation_wrap {
margin-top: 1.6rem;
}
.woocommerce div.product form.cart .woocommerce-variation {
margin: 0;
}
.woocommerce div.product form.cart .woocommerce-variation:empty {
display: none;
}
.woocommerce div.product form.cart.variations_form .woocommerce-variation-add-to-cart {
margin-top: 0;
gap: 1.2rem;
}
/* מבטל את הפער שנוצר מ-clear של ווקומרס */
.woocommerce div.product form.cart::before,
.woocommerce div.product form.cart::after,
.woocommerce div.product form.cart .clear {
display: none;
content: none;
}
/* איקס קטן לביטול הבחירה, מופיע רק על הכפתור הנבחר */
.omis-swatch.is-active .omis-swatch__clear {
position: absolute;
top: -0.6rem;
inset-inline-start: -0.6rem;
width: 1.9rem;
height: 1.9rem;
border-radius: 50%;
background: var(--omis-ink);
color: var(--omis-cream);
display: grid;
place-items: center;
font-size: 1.1rem;
line-height: 1;
box-shadow: 0 0.2rem 0.6rem rgba(47, 51, 45, 0.25);
opacity: 0;
transform: scale(0.7);
transition: opacity 0.2s var(--omis-ease), transform 0.2s var(--omis-ease);
pointer-events: none;
}
.omis-swatch.is-active:hover .omis-swatch__clear,
.omis-swatch.is-active:focus-visible .omis-swatch__clear {
opacity: 1;
transform: scale(1);
}
.omis-swatch__clear {
display: none;
}
.omis-swatch.is-active .omis-swatch__clear {
display: grid;
}
/* ==========================================================================
29. שורת כותרת עם לב + שורת יתרונות ברוחב מלא
========================================================================== */
.omis-title-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1.6rem;
margin-bottom: 1.2rem;
}
.omis-title-row .product_title {
margin-bottom: 0;
flex: 1;
min-width: 0;
}
.omis-wish--title {
flex: none;
width: 4.4rem;
height: 4.4rem;
border-radius: 50%;
background: var(--omis-cream-soft);
border: 1px solid var(--omis-line);
margin-top: 0.6rem;
transition: background-color 0.25s var(--omis-ease), border-color 0.25s var(--omis-ease),
color 0.25s var(--omis-ease), transform 0.25s var(--omis-ease);
}
.omis-wish--title svg {
width: 2rem;
}
.omis-wish--title:hover {
background: var(--omis-white);
border-color: var(--omis-sage);
transform: translateY(-2px);
}
.omis-wish--title.is-active {
background: rgba(154, 91, 60, 0.1);
border-color: rgba(154, 91, 60, 0.35);
color: var(--omis-sale);
}
/* הלב שעל הגלריה מיותר כשהוא כבר ליד הכותרת */
.omis-wish--gallery {
display: none;
}
/* שורת היתרונות — רוחב מלא מתחת לשתי העמודות */
.woocommerce div.product .omis-perks {
grid-column: 1 / -1;
margin-top: 3.4rem;
padding: 2.8rem 0 0;
border-top: 1px solid var(--omis-line);
gap: 2rem;
}
.woocommerce div.product .omis-perks li {
flex-direction: row;
align-items: center;
text-align: start;
gap: 1.2rem;
justify-content: center;
}
.woocommerce div.product .omis-perks__icon {
width: 4.6rem;
height: 4.6rem;
}
.woocommerce div.product .omis-perks__icon svg {
width: 2.1rem;
height: 2.1rem;
}
.woocommerce div.product .omis-perks__text strong {
font-size: 1.5rem;
}
.woocommerce div.product .omis-perks__text em {
font-size: 1.3rem;
}
/* "נקה" של ווקומרס — מוסתר לחלוטין */
.woocommerce a.reset_variations,
.woocommerce div.product a.reset_variations,
.woocommerce div.product form.cart a.reset_variations {
display: none !important;
visibility: hidden !important;
}
@media (max-width: 1023.98px) {
.omis-title-row {
gap: 1rem;
margin-bottom: 0.8rem;
}
.omis-wish--title {
width: 3.6rem;
height: 3.6rem;
margin-top: 0.2rem;
}
.omis-wish--title svg {
width: 1.7rem;
}
.woocommerce div.product .omis-perks {
margin-top: 2rem;
padding-top: 1.8rem;
gap: 1.4rem 1rem;
}
.woocommerce div.product .omis-perks li {
flex-direction: column;
text-align: center;
gap: 0.7rem;
}
.woocommerce div.product .omis-perks__icon {
width: 3.4rem;
height: 3.4rem;
}
.woocommerce div.product .omis-perks__icon svg {
width: 1.6rem;
height: 1.6rem;
}
.woocommerce div.product .omis-perks__text strong {
font-size: 1.2rem;
}
.woocommerce div.product .omis-perks__text em {
font-size: 1.05rem;
}
}
/* ==========================================================================
30. תמונות מוצר — מילוי מלא תמיד, בכל יחס מקור
ווקומרס מגדיר .woocommerce ul.products li.product a img { height:auto }
בסלקטור חזק יותר. הכללים כאן גוברים עליו בכל מקום שיש "קופסת יחס".
========================================================================== */
.woocommerce ul.products li.product .omis-card__media,
.omis-card__media {
position: relative;
display: block;
width: 100%;
height: 0;
padding-top: 125%; /* יחס 4:5 — עובד בכל דפדפן */
aspect-ratio: auto;
overflow: hidden;
border-radius: var(--omis-radius-card);
background: var(--omis-cream-soft);
margin: 0;
}
.woocommerce ul.products li.product .omis-card__media img,
.woocommerce ul.products li.product a.omis-card__media img,
.omis-card__media img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover !important;
object-position: center !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
display: block;
}
.woocommerce ul.products li.product .omis-card__media picture,
.omis-card__media picture {
display: contents;
}
/* אותו עיקרון לכל קופסאות היחס האחרות באתר */
.omis-gallery__stage img,
.omis-gallery__thumb img,
.omis-minicart__thumb img,
.omis-thankyou__thumb img,
.omis-result__thumb,
.woocommerce div.product .omis-gallery img {
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover !important;
object-position: center !important;
}
.omis-gallery__stage,
.omis-gallery__thumb,
.omis-minicart__thumb,
.omis-thankyou__thumb {
overflow: hidden;
}
/* תמונת ברירת מחדל כשאין תמונת מוצר */
.omis-card__media .woocommerce-placeholder {
object-fit: contain !important;
padding: 15% !important;
opacity: 0.4;
}
/* ==========================================================================
31. כרטיס מוצר — עידון טיפוגרפי ולחצן מעודן
========================================================================== */
.omis-card__title {
letter-spacing: -0.005em;
}
.woocommerce ul.products li.product .price {
display: block;
font-size: 1.45rem;
font-weight: var(--omis-medium);
letter-spacing: 0.01em;
color: var(--omis-ink);
}
.woocommerce ul.products li.product .price del {
font-size: 0.86em;
opacity: 0.65;
}
.woocommerce ul.products li.product .price ins {
font-weight: var(--omis-semibold);
}
/* לחצן "הוספה לעגלה" מעודן — קו דק, לא צועק */
.woocommerce ul.products li.product .omis-card__cta .button,
.woocommerce ul.products li.product a.button {
height: 3.8rem;
font-size: 1.3rem;
font-weight: var(--omis-regular);
letter-spacing: 0.01em;
border-width: 1px;
border-color: var(--omis-ink-15);
background: transparent;
color: var(--omis-ink);
border-radius: 999px;
transform: none;
}
.woocommerce ul.products li.product .omis-card__cta .button:hover,
.woocommerce ul.products li.product a.button:hover {
background: var(--omis-ink);
border-color: var(--omis-ink);
color: var(--omis-cream);
transform: none;
}
@media (max-width: 1023.98px) {
/* כותרת בשורה אחת — מסיר את הרווח המוגזם שנוצר מ-min-height של שתי שורות */
.omis-card__title {
font-size: 1.32rem;
line-height: 1.3;
-webkit-line-clamp: 2;
min-height: 0;
margin-bottom: 0.35rem;
}
.omis-card__mediawrap {
margin-bottom: 1rem;
}
.omis-card__foot {
margin-bottom: 0.9rem;
}
.woocommerce ul.products li.product .price {
font-size: 1.28rem;
font-weight: var(--omis-medium);
}
.woocommerce ul.products li.product .omis-card__cta .button,
.woocommerce ul.products li.product a.button {
height: 3.2rem;
font-size: 1.15rem;
padding-inline: 1rem;
}
.omis-badge {
font-size: 1rem;
padding: 0.4rem 0.85rem;
top: 0.8rem;
}
.omis-card__flags {
top: 0.8rem;
inset-inline-start: 0.8rem;
}
.omis-wish--card {
top: 0.8rem;
inset-inline-end: 0.8rem;
width: 3rem;
height: 3rem;
opacity: 1;
transform: none;
}
.omis-wish--card svg {
width: 1.5rem;
}
}
/* ==========================================================================
32. לשוניות המוצר — שורה מסודרת, גם במובייל
========================================================================== */
@media (max-width: 1023.98px) {
.woocommerce div.product .woocommerce-tabs ul.tabs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.7rem;
margin-bottom: 2rem;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
border-radius: 1rem;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
padding: 1.1rem 0.8rem;
font-size: 1.2rem;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* מרווח נשימה לפני הפוטר (ל-.omis-related המרווח מוגדר בסקשן 24) */
.omis-shop {
padding-bottom: 5.6rem;
}
.omis-product {
padding-bottom: 4.4rem;
}
.omis-page {
padding-bottom: 5.6rem;
}
}
/* ==========================================================================
33. חוות דעת — עיצוב בשפת המותג במקום ברירת המחדל של וורדפרס
========================================================================== */
.woocommerce #reviews {
max-width: 82rem;
}
.woocommerce #reviews #comments > h2 {
font-size: 2.2rem;
font-weight: var(--omis-medium);
margin-bottom: 2rem;
}
.woocommerce #reviews .woocommerce-noreviews {
background: var(--omis-cream-soft);
border: 1px dashed rgba(167, 165, 120, 0.55);
border-radius: 1.4rem;
padding: 2.4rem;
text-align: center;
font-size: 1.5rem;
color: var(--omis-ink-70);
margin-bottom: 2.4rem;
}
.woocommerce #reviews ol.commentlist {
list-style: none;
padding: 0;
margin: 0 0 3rem;
display: grid;
gap: 1.2rem;
}
.woocommerce #reviews ol.commentlist li {
margin: 0;
padding: 0;
background: var(--omis-white);
border: 1px solid var(--omis-line);
border-radius: 1.6rem;
}
.woocommerce #reviews ol.commentlist li .comment_container {
display: flex;
gap: 1.6rem;
padding: 2rem 2.2rem;
background: none;
border: 0;
border-radius: 0;
}
.woocommerce #reviews ol.commentlist li img.avatar {
position: static;
width: 4.6rem;
height: 4.6rem;
border-radius: 50%;
border: 0;
padding: 0;
background: var(--omis-cream-soft);
flex: none;
}
.woocommerce #reviews ol.commentlist li .comment-text {
margin: 0;
border: 0;
padding: 0;
border-radius: 0;
flex: 1;
min-width: 0;
}
.woocommerce #reviews .comment-text p.meta {
font-size: 1.35rem;
color: var(--omis-ink-45);
margin-bottom: 0.6rem;
}
.woocommerce #reviews .comment-text p.meta strong {
color: var(--omis-ink);
font-weight: var(--omis-medium);
font-size: 1.5rem;
margin-inline-end: 0.6rem;
}
.woocommerce #reviews .comment-text .description {
font-size: 1.5rem;
line-height: 1.8;
color: var(--omis-ink-70);
}
/* דירוג בכוכבים — בגוון המותג */
.woocommerce .star-rating,
.woocommerce p.stars a {
color: var(--omis-sage);
}
.woocommerce .star-rating::before {
color: var(--omis-ink-15);
}
/* ---- טופס הוספת חוות דעת ---- */
.woocommerce #review_form_wrapper {
background: var(--omis-cream-soft);
border: 1px solid var(--omis-line);
border-radius: 1.8rem;
padding: 3rem;
}
.woocommerce #review_form #respond {
margin: 0;
padding: 0;
background: none;
border: 0;
}
.woocommerce #reviews #respond .comment-reply-title {
display: block;
font-size: 2rem;
font-weight: var(--omis-medium);
margin-bottom: 0.6rem;
}
.woocommerce #review_form #respond .omis-review-lead {
font-size: 1.45rem;
color: var(--omis-ink-70);
margin-bottom: 2rem;
line-height: 1.7;
}
.woocommerce #review_form #respond form {
display: grid;
gap: 1.4rem;
}
.woocommerce #review_form #respond .comment-form-rating {
display: flex;
align-items: center;
gap: 1.4rem;
flex-wrap: wrap;
background: var(--omis-white);
border: 1px solid var(--omis-line);
border-radius: 1.2rem;
padding: 1.4rem 1.8rem;
margin: 0;
}
.woocommerce #review_form #respond .comment-form-rating label {
margin: 0;
font-size: 1.45rem;
font-weight: var(--omis-medium);
}
.woocommerce p.stars {
margin: 0;
}
.woocommerce p.stars a {
font-size: 2rem;
margin-inline-end: 0.4rem;
transition: transform 0.15s var(--omis-ease);
}
.woocommerce p.stars a:hover {
transform: scale(1.18);
}
.woocommerce #review_form #respond p {
margin: 0;
}
.woocommerce #review_form #respond label {
display: block;
font-size: 1.35rem;
font-weight: var(--omis-medium);
margin-bottom: 0.6rem;
}
.woocommerce #review_form #respond input[type="text"],
.woocommerce #review_form #respond input[type="email"],
.woocommerce #review_form #respond textarea {
width: 100%;
background: var(--omis-white);
border: 1px solid var(--omis-line);
border-radius: 1rem;
padding: 1.2rem 1.5rem;
font-family: var(--omis-font);
font-size: 1.5rem;
color: var(--omis-ink);
transition: border-color 0.2s var(--omis-ease), box-shadow 0.2s var(--omis-ease);
}
.woocommerce #review_form #respond textarea {
min-height: 12rem;
line-height: 1.7;
resize: vertical;
}
.woocommerce #review_form #respond input:focus,
.woocommerce #review_form #respond textarea:focus {
outline: none;
border-color: var(--omis-sage);
box-shadow: 0 0 0 0.35rem rgba(167, 165, 120, 0.22);
}
.woocommerce #review_form #respond .comment-form-author,
.woocommerce #review_form #respond .comment-form-email {
display: inline-block;
width: calc(50% - 0.7rem);
vertical-align: top;
}
.woocommerce #review_form #respond .comment-form-author {
margin-inline-end: 1.2rem;
}
.woocommerce #review_form #respond .comment-form-cookies-consent {
display: flex;
align-items: flex-start;
gap: 0.8rem;
font-size: 1.3rem;
color: var(--omis-ink-70);
}
.woocommerce #review_form #respond .comment-form-cookies-consent label {
margin: 0;
font-weight: var(--omis-regular);
font-size: 1.3rem;
}
.woocommerce #review_form #respond .comment-form-cookies-consent input {
width: 1.7rem;
height: 1.7rem;
margin-top: 0.15rem;
flex: none;
}
.woocommerce #review_form #respond .form-submit input#submit {
width: auto;
min-width: 20rem;
}
.woocommerce #reviews .omis-review-perks {
display: flex;
flex-wrap: wrap;
gap: 1.6rem;
margin-top: 1.8rem;
padding-top: 1.6rem;
border-top: 1px solid var(--omis-line);
list-style: none;
font-size: 1.3rem;
/* הוכהה מ-ink-45 שנבלע (בקשת הלקוחה) */
color: var(--omis-ink-70);
}
.woocommerce #reviews .omis-review-perks li {
position: relative;
padding-inline-start: 2rem;
}
.woocommerce #reviews .omis-review-perks li::before {
content: '';
position: absolute;
inset-inline-start: 0;
top: 0.55rem;
width: 1rem;
height: 0.55rem;
/* הוכהה מ-sage שנבלע לגוון דיו כהה (בקשת הלקוחה) */
border-left: 2px solid var(--omis-sage-dark, #8d8b60);
border-bottom: 2px solid var(--omis-sage-dark, #8d8b60);
transform: rotate(-45deg);
}
/* --- חוות דעת: שדה ההסכמה יושב על רקע לבן ולא על פאנל זית, ולכן בלי
הריבוע האפור (rgba של --omis-optin) ובטקסט כהה במקום קרם. --- */
.omis-consent-slot--review .omis-optin {
background: transparent;
padding-inline: 0;
}
.omis-consent-slot--review .omis-optin__label {
color: var(--omis-ink-70);
}
.omis-consent-slot--review .omis-optin__link {
color: var(--omis-ink);
}
.omis-consent-slot--review .omis-optin__link:hover {
color: var(--omis-sage-dark, #8d8b60);
}
/* התיבה עצמה נבלעה: המסגרת קרם-שקוף מיועדת לרקע זית. על הלבן — מסגרת
כהה ורקע לבן, ובמצב מסומן מילוי זית עם וי קרם (בקשת הלקוחה). */
.omis-consent-slot--review .omis-optin__input {
border-color: rgba(47, 51, 45, 0.55);
background-color: #fff;
}
.omis-consent-slot--review .omis-optin__input:checked {
background-color: var(--omis-sage);
border-color: var(--omis-sage);
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.6l3.1 3.1 6.5-6.9' fill='none' stroke='%23fef4e4' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (max-width: 1023.98px) {
.woocommerce #review_form_wrapper {
padding: 1.8rem;
border-radius: 1.4rem;
}
.woocommerce #reviews #respond .comment-reply-title {
font-size: 1.7rem;
}
.woocommerce #review_form #respond .comment-form-author,
.woocommerce #review_form #respond .comment-form-email {
width: 100%;
margin-inline-end: 0;
}
.woocommerce #review_form #respond .comment-form-rating {
padding: 1.2rem 1.4rem;
}
.woocommerce #reviews ol.commentlist li .comment_container {
padding: 1.5rem 1.6rem;
gap: 1.2rem;
}
.woocommerce #reviews ol.commentlist li img.avatar {
width: 3.6rem;
height: 3.6rem;
}
.woocommerce #review_form #respond .form-submit input#submit {
width: 100%;
min-width: 0;
}
}
/* ==========================================================================
34. תיקוני גלריה: כיווני חצים, ללא פס מעל "אולי תאהבו גם", לייטבוקס
========================================================================== */
.omis-related {
border-top: 0;
}
/* חצים אופקיים בכיוון הנכון ל-RTL (בורדרים פיזיים, לא לוגיים) */
.omis-gallery__nav::before,
.omis-lightbox__nav::before {
content: '';
width: 1rem;
height: 1rem;
border-top: 1.6px solid currentColor;
border-left: 1.6px solid currentColor;
border-inline-start: 0;
border-right: 0;
border-bottom: 0;
}
/* הכפתור בצד ימין → מוביל לתמונה הקודמת → חץ ימינה.
שברון מ-border-top+border-left מצביע ↖ בזווית 0; לכן ימינה = 135deg.
קודם היה 225deg, שזה ↓ — ומכאן החצים "ההפוכים". */
.omis-gallery__nav--prev::before,
.omis-lightbox__nav--prev::before {
transform: rotate(135deg);
margin-inline-end: 0.3rem;
margin-inline-start: 0;
}
/* הכפתור בצד שמאל → מוביל לתמונה הבאה → חץ שמאלה = 315deg.
קודם היה 45deg, שזה ↑. */
.omis-gallery__nav--next::before,
.omis-lightbox__nav--next::before {
transform: rotate(315deg);
margin-inline-start: 0.3rem;
margin-inline-end: 0;
}
.omis-gallery__stage {
cursor: zoom-in;
}
/* רמז ויזואלי שאפשר להגדיל */
.omis-gallery__zoom {
position: absolute;
bottom: 1.4rem;
inset-inline-start: 1.4rem;
z-index: 3;
width: 3.6rem;
height: 3.6rem;
border-radius: 50%;
background: rgba(254, 244, 228, 0.88);
color: var(--omis-ink);
display: grid;
place-items: center;
box-shadow: 0 0.4rem 1.2rem rgba(47, 51, 45, 0.14);
opacity: 0;
transition: opacity 0.25s var(--omis-ease);
pointer-events: none;
font-size: 1.5rem;
}
.omis-gallery__stage:hover .omis-gallery__zoom {
opacity: 1;
}
/* ---- לייטבוקס ---- */
.omis-lightbox {
position: fixed;
inset: 0;
z-index: 260;
visibility: hidden;
pointer-events: none;
display: grid;
grid-template-rows: 1fr auto;
background: rgba(30, 32, 27, 0.92);
opacity: 0;
transition: opacity 0.3s var(--omis-ease), visibility 0.3s;
}
.omis-lightbox.is-open {
visibility: visible;
pointer-events: auto;
opacity: 1;
}
.omis-lightbox__stage {
position: relative;
display: grid;
place-items: center;
padding: 6rem 8rem 2rem;
min-height: 0;
}
.omis-lightbox__img {
/* תצוגה נוחה בגודל המקור — לא זום מלא-מסך (בקשת הלקוחה):
תקרת גובה 78vh ורוחב עד 40rem, ולעולם לא מוגדל מעבר לפיקסלים של המקור. */
max-width: min(90vw, 40rem);
max-height: 78vh;
width: auto;
height: auto;
object-fit: contain;
border-radius: 1.2rem;
box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.45);
transition: opacity 0.25s var(--omis-ease);
}
.omis-lightbox__close {
position: absolute;
top: 2rem;
inset-inline-end: 2rem;
width: 4.4rem;
height: 4.4rem;
border-radius: 50%;
background: rgba(254, 244, 228, 0.14);
color: var(--omis-cream);
display: grid;
place-items: center;
transition: background-color 0.25s var(--omis-ease);
z-index: 4;
}
.omis-lightbox__close:hover {
background: rgba(254, 244, 228, 0.28);
}
.omis-lightbox__close svg {
width: 1.8rem;
height: 1.8rem;
}
.omis-lightbox__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 5rem;
height: 5rem;
border-radius: 50%;
background: rgba(254, 244, 228, 0.14);
color: var(--omis-cream);
display: grid;
place-items: center;
transition: background-color 0.25s var(--omis-ease);
z-index: 4;
}
.omis-lightbox__nav:hover {
background: rgba(254, 244, 228, 0.3);
}
.omis-lightbox__nav--prev { inset-inline-start: 2rem; }
.omis-lightbox__nav--next { inset-inline-end: 2rem; }
.omis-lightbox__counter {
position: absolute;
top: 2.4rem;
inset-inline-start: 2.4rem;
color: rgba(254, 244, 228, 0.72);
font-size: 1.4rem;
letter-spacing: 0.06em;
z-index: 4;
}
.omis-lightbox__thumbs {
display: flex;
justify-content: center;
gap: 1rem;
padding: 1.6rem 2rem 3rem;
overflow-x: auto;
scrollbar-width: none;
}
.omis-lightbox__thumbs::-webkit-scrollbar { display: none; }
.omis-lightbox__thumbs button {
width: 6.4rem;
height: 6.4rem;
flex: none;
border-radius: 0.9rem;
overflow: hidden;
border: 1.5px solid transparent;
opacity: 0.55;
transition: opacity 0.25s var(--omis-ease), border-color 0.25s var(--omis-ease);
padding: 0;
}
.omis-lightbox__thumbs button img {
width: 100%;
height: 100%;
object-fit: cover;
}
.omis-lightbox__thumbs button:hover,
.omis-lightbox__thumbs button.is-active {
opacity: 1;
border-color: var(--omis-cream);
}
@media (max-width: 1023.98px) {
.omis-lightbox__stage {
padding: 5.4rem 1.4rem 1rem;
}
.omis-lightbox__nav {
width: 4rem;
height: 4rem;
}
.omis-lightbox__nav--prev { inset-inline-start: 0.8rem; }
.omis-lightbox__nav--next { inset-inline-end: 0.8rem; }
.omis-lightbox__close {
top: 1.2rem;
inset-inline-end: 1.2rem;
width: 3.8rem;
height: 3.8rem;
}
.omis-lightbox__counter {
top: 1.8rem;
inset-inline-start: 1.6rem;
font-size: 1.2rem;
}
.omis-lightbox__thumbs {
padding: 1rem 1.2rem 2rem;
gap: 0.7rem;
justify-content: flex-start;
}
.omis-lightbox__thumbs button {
width: 5rem;
height: 5rem;
}
.omis-gallery__zoom { display: none; }
}
/* ==========================================================================
35. לשוניות המוצר — קו תחתון נקי, בלי לבן טהור ובלי "כפתורים"
========================================================================== */
.woocommerce div.product .woocommerce-tabs ul.tabs {
display: flex;
flex-wrap: wrap;
gap: 0;
padding: 0;
margin: 0 0 3rem;
list-style: none;
border-bottom: 1px solid var(--omis-line);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
background: transparent;
border: 0;
border-radius: 0;
margin: 0;
padding: 0;
position: relative;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
display: block;
padding: 1.3rem 2.2rem;
font-size: 1.5rem;
font-weight: var(--omis-regular);
color: var(--omis-ink-45);
white-space: nowrap;
position: relative;
transition: color 0.25s var(--omis-ease);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a::after {
content: '';
position: absolute;
inset-inline: 1.4rem;
bottom: -1px;
height: 2px;
background: var(--omis-ink);
transform: scaleX(0);
transform-origin: center;
transition: transform 0.3s var(--omis-ease);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
color: var(--omis-ink-70);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
background: transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
color: var(--omis-ink);
font-weight: var(--omis-medium);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a::after {
transform: scaleX(1);
}
/* פאנל אחד בכל פעם */
.woocommerce div.product .woocommerce-tabs .panel {
display: none;
}
.woocommerce div.product .woocommerce-tabs .panel.is-active {
display: block;
animation: omis-panel-in 0.35s var(--omis-ease) both;
}
@keyframes omis-panel-in {
from { opacity: 0; transform: translateY(0.6rem); }
to { opacity: 1; transform: none; }
}
/* טבלאות המפרט — גוונים חמים בלבד, בלי לבן טהור */
.woocommerce table.shop_attributes,
.omis-product-meta {
background: transparent;
}
.woocommerce table.shop_attributes tr:nth-child(even) td,
.woocommerce table.shop_attributes tr:nth-child(even) th {
background: rgba(167, 165, 120, 0.07);
}
.woocommerce table.shop_attributes td p {
margin: 0;
padding: 0;
}
@media (max-width: 1023.98px) {
.woocommerce div.product .woocommerce-tabs ul.tabs {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
gap: 0;
margin-bottom: 2rem;
scrollbar-width: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar {
display: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
padding: 1.1rem 1.4rem;
font-size: 1.3rem;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a::after {
inset-inline: 0.9rem;
}
}
/* ==========================================================================
36. שורת היתרונות — אייקונים גדולים יותר בדסקטופ, בלי חלל מת מתחתיה
========================================================================== */
@media (min-width: 1024px) {
.woocommerce div.product .omis-perks {
margin-top: 2.4rem;
padding: 2.6rem 0 0;
gap: 2.4rem;
}
.woocommerce div.product .omis-perks li {
gap: 1.5rem;
}
.woocommerce div.product .omis-perks__icon {
width: 5.6rem;
height: 5.6rem;
}
.woocommerce div.product .omis-perks__icon svg {
width: 2.6rem;
height: 2.6rem;
}
.woocommerce div.product .omis-perks__text strong {
font-size: 1.6rem;
}
.woocommerce div.product .omis-perks__text em {
font-size: 1.35rem;
}
/* מצמצם את המרווח בין היתרונות לקו של הלשוניות */
.woocommerce div.product .woocommerce-tabs {
margin-top: 2.6rem;
padding-top: 2.8rem;
}
/* הגלריה לא תמתח את השורה מעבר לצורך */
.omis-gallery__stage {
max-height: min(52rem, calc(100vh - var(--omis-header-h) - 16rem));
}
.omis-gallery__thumbs {
max-height: min(52rem, calc(100vh - var(--omis-header-h) - 16rem));
}
}
/* ==========================================================================
37. שלד טעינה לתמונות כרטיס המוצר — משטח רגוע + הבזק אלכסוני עדין
----------------------------------------------------------------------
עקרון: השלד הוא ::before של קופסת היחס, כלומר תיבת הילד הראשונה בעץ.
.omis-card__media הוא עם position:relative ו-z-index:auto — הוא לא
פותח הקשר ערימה, ולכן ה-::before והתמונות (כולן position:absolute,
z-index:auto) נצבעות לפי סדר העץ: השלד ראשון, התמונות מעליו.
אין צורך ב-z-index בכלל, ולכן אין התנגשות עם .omis-card__flags ועם
.omis-wish--card שיושבים על z-index:3 (שורות 1858 ו-1928).
מכיוון שהשלד תמיד מתחת לתמונה — הוא לא יכול "להיתקע" ולחסום תוכן,
וגם בלי ג׳אווהסקריפט הכל נראה תקין.
התמונה עצמה גלויה כברירת מחדל; ה-opacity:0 מתווסף רק ב-JS ורק לתמונות
שמתחת לקיפול, כדי לא לגעת במועמדת ה-LCP.
========================================================================== */
/* שכבת האור.
הכיוון פיזי בכוונה — אין מקבילה לוגית ל-transform או לזווית של
linear-gradient, ושתיהן לא מתהפכות לבד תחת dir="rtl". לכן הן נכתבו
מלכתחילה בכיוון RTL: ההבהק נע מימין לשמאל, עם כיוון הקריאה,
והזווית היא שיקוף של 115deg (360-115=245). */
.omis-card__media::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(
245deg,
rgba(255, 250, 241, 0) 38%,
rgba(255, 250, 241, 0.6) 50%,
rgba(255, 250, 241, 0) 62%
);
transform: translate3d(120%, 0, 0);
/* ease-in-out ולא var(--omis-ease): ה-ease של האתר הוא ease-out, ובלולאה
הוא נקרא כזינוק-ואז-זחילה. חמש חזרות ולא infinite — גם אם ה-JS לא רץ
אף פעם, האנימציה נגמרת מעצמה אחרי ~11 שניות ונשארת מחוץ למסגרת
(fill-mode: both), כך שלא נשאר עומס קומפוזיטור. */
animation: omis-card-sweep 2.2s ease-in-out 5 both;
}
@keyframes omis-card-sweep {
0% { transform: translate3d(120%, 0, 0); }
55% { transform: translate3d(-120%, 0, 0); }
100% { transform: translate3d(-120%, 0, 0); } /* נשימה בין הבזק להבזק */
}
/* התמונה הגיעה — עוצרים את ההבזק לגמרי, לא רק מסתירים.
content:none מבטל את יצירת הפסאודו ולכן גם משחרר את שכבת הקומפוזיטור. */
.omis-card__media.is-ready::before {
content: none;
}
/* הופעת התמונה. גובר על .omis-card__media img (0,1,1, שורה 5204) שמגדיר
0.55s — נחוץ כדי שההופעה תרגיש מהירה. משקל 0,2,0, עדיין נמוך.
שים לב: הבלוק בשורות 5202-5216 מסמן !important על inset/width/height/
object-fit/margin/padding/border-radius בלבד — לא על transition ולא על
opacity — ולכן אין כאן צורך ב-!important. */
.omis-card__media .omis-card__img {
transition: opacity 0.38s var(--omis-ease);
}
/* ההסתרה הזמנית. משקל 0,3,0, בלי !important.
.is-fading לעולם לא מתווסף ל-.woocommerce-placeholder — ה-JS מחריג אותו
בסלקטור — ולכן הכלל הזה לא יכול לגבור על
.omis-card__media .woocommerce-placeholder { opacity: .4 } (שורה 5245). */
.omis-card__media .omis-card__img.is-fading {
opacity: 0;
}
/* --- כיבוי תנועה: גם העדפת מערכת וגם המתג של האתר --- */
@media (prefers-reduced-motion: reduce) {
.omis-card__media::before {
content: none; /* עצירה מלאה, לא הסתרה */
}
.omis-card__media .omis-card__img {
transition: none;
}
/* רשת ביטחון: ה-JS ממילא לא מוסיף .is-fading במצב הזה */
.omis-card__media .omis-card__img.is-fading {
opacity: 1;
}
}
html.omis-a11y-motion .omis-card__media::before {
content: none;
}
/* רשת ביטחון למקרה שהמשתמש מדליק את מתג התנועה *אחרי* הטעינה, בזמן
שתמונה עדיין ב-.is-fading. משקל 0,3,1 — גובר על כלל הבסיס, בלי !important. */
html.omis-a11y-motion .omis-card__img.is-fading {
opacity: 1;
}
/* ==========================================================================
38. כניסה מדורגת לכרטיסי המוצר — חנות, קטגוריות ו"אולי תאהבו גם"
========================================================================== */
/* ברירת המחדל של הכרטיסים היא גלוי. ההסתרה חלה רק תחת .omis-stagger,
ומחלקה זו מתווספת אך ורק ע"י ה-JS — אחרי שווידא שיש IntersectionObserver
ואחרי שכל הכרטיסים כבר נצפים. כלומר: אין JS / ה-JS נפל / אין IO /
הרשת מוסתרת → אין .omis-stagger → הכרטיסים גלויים. */
.omis-stagger > .product {
opacity: 0;
transform: translateY(1.2rem);
}
.omis-stagger > .product.is-in {
animation: omis-card-in 0.7s var(--omis-ease) forwards;
animation-delay: var(--omis-delay, 0ms);
}
@keyframes omis-card-in {
to { opacity: 1; transform: none; }
}
/* נגישות — העדפת המערכת.
ה-JS ממילא לא נוגע בכלום כשההעדפה דלוקה; הכלל כאן מכסה את המקרה שבו
המשתמש משנה את הגדרת המערכת אחרי טעינת העמוד (matchMedia נדגם פעם אחת). */
@media (prefers-reduced-motion: reduce) {
.omis-stagger > .product,
.omis-stagger > .product.is-in {
opacity: 1;
transform: none;
animation: none;
}
}
/* נגישות — המתג של האתר (main.css שורות 1301-1306).
הכלל הגורף של html.omis-a11y-motion מאפס animation-duration בלבד ולא
animation-delay, ולכן בלי הכלל הזה כרטיס עם --omis-delay של 240ms היה
נשאר שקוף 240ms ואז קופץ. כאן מבטלים גם את ההשהיה וגם את מצב הפתיחה,
כך שהדלקת המתג באמצע גלילה חושפת מיד את כל מה שעדיין מוסתר.
משקל: 0-3-1 — מנצח את 0-3-0 שמעליו, בלי !important. */
html.omis-a11y-motion .omis-stagger > .product,
html.omis-a11y-motion .omis-stagger > .product.is-in {
opacity: 1;
transform: none;
animation: none;
}
/* ==========================================================================
39. לב המועדפים — דופק כפול והתפזרות נקודות
========================================================================== */
/* חובה למחוק במקביל: הכלל המת בשורות 1905-1907
`.omis-wish.is-animating svg { transform: scale(1.28); }`
ה-JS כבר לא מוסיף את `is-animating`, וזהו טרנספורם סטטי שמתג הנגישות
(שנוגע רק ב-animation-duration / transition-duration) לא יכול לנטרל. */
/* לחיצה: משוב מיידי אך ניטרלי — עדיין לא ידוע אם נוסף או הוסר */
.omis-wish.is-pending svg {
transform: scale(0.88);
transition-duration: 0.12s;
}
/* הוספה מאושרת: דופק כפול */
.omis-wish.is-adding svg {
animation: omis-wish-pop 0.52s var(--omis-ease) both;
}
/* הסרה: כיווץ רך בלבד, בלי חלקיקים */
.omis-wish.is-removing svg {
animation: omis-wish-drop 0.3s var(--omis-ease) both;
}
/* קריטי: מעברים (transitions) גוברים על אנימציות בסדר הקסקייד.
הכלל הבסיסי `.omis-wish svg` (שורה 1848) מגדיר `transition: transform .25s`,
ולכן הסרת `is-pending` (scale .88 -> none) מתחילה מעבר שמשתלט על
ה-transform ומשתיק את הדופק בדיוק ב-250 המילישניות שבהן הוא נראה.
הסרת המאפיין מ-transition-property מבטלת את המעבר הרץ לפני ה-paint הבא.
משקל (0,2,1) מול (0,1,1) של כלל הבסיס — מנצח בלי !important. */
.omis-wish.is-adding svg,
.omis-wish.is-removing svg {
transition: none;
}
@keyframes omis-wish-pop {
0% { transform: scale(1); }
22% { transform: scale(1.35); }
48% { transform: scale(0.92); }
72% { transform: scale(1.08); }
100% { transform: scale(1); }
}
@keyframes omis-wish-drop {
0% { transform: scale(1); }
45% { transform: scale(0.82); }
100% { transform: scale(1); }
}
/* שכבת החלקיקים — ה-JS יוצר אותה על ולא בתוך הכפתור,
כי .omis-card__mediawrap (שורה 1920) ו-.omis-gallery__stage (שורה 1636)
הם overflow:hidden והיו חותכים את הנקודות. כך זה עובד בכל ארבעת
הווריאנטים בלי לגעת ב-PHP ובלי לשבור את הפינות המעוגלות של הכרטיס.
left/top נקבעים inline ב-JS מתוך getBoundingClientRect — קואורדינטות
פיזיות במכוון; אין כאן inset בגיליון כדי לא להתנגש עם ה-inline.
z-index 80 — מעל תוכן העמוד, מתחת להדר (90), לכפתורים הצפים (120)
ולכל שכבות-העל (200+). הערך 80 פנוי בשני הגיליונות. */
.omis-burst {
position: absolute;
z-index: 80;
width: 0;
height: 0;
pointer-events: none;
}
.omis-burst__dot,
.omis-burst__ring {
--omis-burst-angle: 0deg;
--omis-burst-dist: 3rem;
--omis-burst-size: 0.4rem;
position: absolute;
/* מרכוז על נקודת המקור: מכיוון שהשכבה היא 0×0, ההיסט הלוגי
מרכז נכון גם ב-RTL וגם ב-LTR */
inset-block-start: calc(var(--omis-burst-size) / -2);
inset-inline-start: calc(var(--omis-burst-size) / -2);
display: block;
width: var(--omis-burst-size);
height: var(--omis-burst-size);
border-radius: 50%;
opacity: 0;
}
.omis-burst__dot {
background: var(--omis-sale);
animation: omis-burst-dot 0.62s var(--omis-ease) both;
}
.omis-burst__dot:nth-child(1) { --omis-burst-angle: -16deg; --omis-burst-dist: 3.4rem; animation-delay: 0ms; }
.omis-burst__dot:nth-child(2) { --omis-burst-angle: 40deg; --omis-burst-dist: 2.7rem; --omis-burst-size: 0.34rem; animation-delay: 40ms; }
.omis-burst__dot:nth-child(3) { --omis-burst-angle: 96deg; --omis-burst-dist: 3.1rem; background: var(--omis-sage); animation-delay: 70ms; }
.omis-burst__dot:nth-child(4) { --omis-burst-angle: 160deg; --omis-burst-dist: 2.5rem; --omis-burst-size: 0.34rem; animation-delay: 20ms; }
.omis-burst__dot:nth-child(5) { --omis-burst-angle: -132deg; --omis-burst-dist: 3.2rem; background: var(--omis-sage); animation-delay: 90ms; }
.omis-burst__dot:nth-child(6) { --omis-burst-angle: -74deg; --omis-burst-dist: 2.9rem; --omis-burst-size: 0.46rem; animation-delay: 55ms; }
/* טבעת רכה שנפתחת מתחת לנקודות (הילד השביעי — לא נתפס ע"י nth-child(1..6)) */
.omis-burst__ring {
--omis-burst-size: 2.6rem;
border: 0.15rem solid var(--omis-sale);
animation: omis-burst-ring 0.5s var(--omis-ease) both;
}
@keyframes omis-burst-dot {
0% { opacity: 0; transform: rotate(var(--omis-burst-angle)) translateY(0) scale(0.3); }
22% { opacity: 1; transform: rotate(var(--omis-burst-angle)) translateY(calc(var(--omis-burst-dist) * -0.34)) scale(1); }
100% { opacity: 0; transform: rotate(var(--omis-burst-angle)) translateY(calc(var(--omis-burst-dist) * -1)) scale(0.45); }
}
@keyframes omis-burst-ring {
0% { opacity: 0.5; transform: scale(0.3); }
100% { opacity: 0; transform: scale(1.45); }
}
/* --- כיבוי תנועה: גם העדפת מערכת וגם המתג של סרגל הנגישות --- */
@media (prefers-reduced-motion: reduce) {
.omis-wish.is-pending svg,
.omis-wish.is-adding svg,
.omis-wish.is-removing svg {
animation: none;
transform: none;
}
.omis-burst {
display: none;
}
}
/* animation: none מאפס את animation-name — לונגהנד שהכלל
`animation-duration: .001ms !important` (main.css:1301) לא נוגע בו,
ולכן האנימציה באמת כבויה ולא רק מהירה. משקל (0,3,2) כדי לגבור
על (0,2,1) שלמעלה, בלי !important. */
html.omis-a11y-motion .omis-wish.is-pending svg,
html.omis-a11y-motion .omis-wish.is-adding svg,
html.omis-a11y-motion .omis-wish.is-removing svg {
animation: none;
transform: none;
}
html.omis-a11y-motion .omis-burst {
display: none;
}
/* ==========================================================================
40. גלריית המוצר — טעינה מדורגת (blur-up)
שכבת LQIP יושבת מעל התמונה האמיתית ונמוגה ברגע שהיא נטענה.
השכבה נוצרת רק אחרי ש-JS מוסיף .is-lqip — כך שאם הסקריפט חסום/נכשל
ההתנהגות זהה למצב היום (רקע קרם), ואין סיכון לתמונה מטושטשת תקועה.
התמונה האמיתית עצמה לעולם לא מוסתרת (בלי opacity/visibility) — קריטי ל-LCP.
מיקום בקובץ: בסוף הקובץ, ברמה העליונה (לא בתוך media query),
אחרי סקשן 12 שמגדיר .omis-gallery__slide { position: absolute }.
========================================================================== */
/* מוגבל ל-.is-active בכוונה: לכל היותר שכבת blur אחת נצבעת בכל רגע נתון.
ספציפיות (0,3,1) — אין כלל קיים על .omis-gallery__slide::before בשום
קובץ בתבנית, ואין כאן דריסה של ווקומרס, ולכן לא נדרש משקל נוסף. */
.omis-gallery__slide.is-active.is-lqip::before {
content: '';
position: absolute;
/* מרווח שלילי קבוע ולא transform:scale — blur(1.2rem) הוא sigma של 12px
והדעיכה מגיעה ל~3rem, מה שסקייל יחסי לא מכסה בקופסאות גדולות והיה
משאיר טבעת שקופה בקצוות. .omis-gallery__stage הוא overflow:hidden,
ולכן החריגה נחתכת. inset סימטרי — ניטרלי ל-RTL. */
inset: -3.6rem;
/* בין השכבות הקיימות: מעל ה-img (סטטי/inline), מתחת ל-.omis-badge (2),
ל-.omis-gallery__nav (3) ול-.omis-gallery__zoom (3). */
z-index: 1;
pointer-events: none;
background-image: var(--omis-lqip);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
/* המקור הוא בייטמאפ של 24 פיקסלים — ההגדלה של הדפדפן היא רוב הטשטוש,
ה-blur רק מרכך שאריות JPEG. רדיוס קטן = מעבר ריסטר זול. */
filter: blur(1.2rem);
transition: opacity 0.35s var(--omis-ease);
}
/* היעלמות; מיד אחריה ה-JS מסיר את .is-lqip והשכבה יורדת מהקומפוזיטור */
.omis-gallery__slide.is-lqip-done::before {
opacity: 0;
}
/* --- כיבוי תנועה --- */
@media (prefers-reduced-motion: reduce) {
.omis-gallery__slide.is-active.is-lqip::before {
transition-duration: 0.001ms;
}
}
/* מתג הנגישות של האתר כבר מכסה *::before עם !important (main.css:1301-1306),
השורה כאן מפורשת כדי שהתלות הזו לא תישבר בריפקטור עתידי. */
html.omis-a11y-motion .omis-gallery__slide.is-active.is-lqip::before {
transition-duration: 0.001ms;
}
/* ==========================================================================
42. כרטיס המוצר — היררכיה, רווחים וכפתור
========================================================================== */
/* הכותרת מתהדקת לטקסט שלה.
קודם היה min-height שמשריין תמיד שתי שורות, כדי ליישר מחירים בין כרטיסים —
אבל בכותרת של שורה אחת זה יצר 22px של חלל רפאים בין השם למחיר.
היישור עובר ל-.omis-card__foot שנצמד לתחתית: גם כותרת בשורה אחת וגם
בשתיים נראות נכון, והמחירים והכפתורים מיושרים בכל השורה. */
.woocommerce ul.products li.product .omis-card__title {
font-size: 1.7rem;
font-weight: var(--omis-medium);
line-height: 1.32;
min-height: 0;
margin-bottom: 0.6rem;
}
/* המחיר קטן ודק מהכותרת — היררכיה במקום שני קולות באותו גובה */
.woocommerce ul.products li.product .price {
font-size: 1.45rem;
font-weight: var(--omis-regular);
color: var(--omis-ink-70);
}
.woocommerce ul.products li.product .price ins {
font-weight: var(--omis-medium);
color: var(--omis-sale);
}
/* המחיר והכפתור נצמדים לתחתית — יישור נקי בין הכרטיסים */
.woocommerce ul.products li.product .omis-card__foot {
margin-top: auto;
margin-bottom: 1rem;
}
.woocommerce ul.products li.product .omis-card__cta {
margin-top: 0;
}
/* הכפתור: הכללים הקיימים מכוונים ל-.button, אבל omis_loop_footer() מדפיס
'omis-btn omis-btn--ghost add_to_cart_button ajax_add_to_cart' — בלי המחלקה
button. לכן כל העיצוב הייעודי לכרטיס היה קוד מת, והכפתור ירש את גודל ה-CTA
הראשי (5rem / 1.55rem) ונראה כבד מדי בתוך הכרטיס. */
.woocommerce ul.products li.product .omis-card__cta .omis-btn {
width: 100%;
height: 4rem;
font-size: 1.35rem;
font-weight: var(--omis-regular);
letter-spacing: 0.01em;
padding-inline: 1.4rem;
}
@media (max-width: 1023.98px) {
.woocommerce ul.products li.product .omis-card__title {
font-size: 1.45rem;
margin-bottom: 0.45rem;
}
.woocommerce ul.products li.product .price {
font-size: 1.3rem;
}
.woocommerce ul.products li.product .omis-card__foot {
margin-bottom: 0.8rem;
}
.woocommerce ul.products li.product .omis-card__cta .omis-btn {
height: 3.6rem;
font-size: 1.2rem;
}
}
/* ==========================================================================
43. תיקון גלישה אופקית במובייל — רצועת הלשוניות
----------------------------------------------------------------------
פריטי גריד מקבלים min-width:auto כברירת מחדל, והקישורים בלשוניות הם
white-space:nowrap. לכן "משלוחים והחזרות" לא יכול להתכווץ, ה-track של
div.product נדחף ל-357px על מסך 375px, והעמוד כולו גולש 25px הצידה.
min-width:0 מחזיר ל-text-overflow:ellipsis את היכולת לפעול.
========================================================================== */
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .woocommerce-tabs ul.tabs,
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs .panel {
min-width: 0;
}
/* רשת ביטחון: שדות טקסט עם cols/size אינטרינזיים לא ידחפו את העמוד */
.woocommerce div.product textarea,
.woocommerce div.product input[type="text"],
.woocommerce div.product input[type="email"] {
max-width: 100%;
}
/* ==========================================================================
44. תיקון "צריך ללחוץ פעמיים" על תמונת מוצר (דסקטופ)
----------------------------------------------------------------------
תמונות הן draggable כברירת מחדל. כשהעכבר זז ולו 1-2 פיקסלים בין mousedown
ל-mouseup, הדפדפן מתחיל גרירת תמונה במקום לירות click — והניווט לא קורה.
זה בדיוק ההסבר ל"לפעמים": תלוי אם היד זזה.
pointer-events:none על התמונות הופך את ה- עצמו ליעד הלחיצה, ולכן
גרירה לא יכולה להתחיל. מצבי ה-hover נשענים על ההורה ולא על התמונה,
אז החלפת תמונת הריחוף ממשיכה לעבוד.
========================================================================== */
.omis-card__media img,
.omis-gallery__thumb img {
pointer-events: none;
-webkit-user-drag: none;
user-select: none;
}
/* בבמת הגלריה הלייטבוקס מאזין על ה-figure, לכן גם כאן התמונה לא צריכה
לתפוס אירועים — ובלי זה גרירה מבטלת את פתיחת הלייטבוקס. */
.omis-gallery__slide img {
-webkit-user-drag: none;
user-select: none;
}
/* =============================================================================
קובץ יעד: assets/css/woocommerce.css — להוסיף בסוף הקובץ (אחרי סעיף 40).
============================================================================= */
/* ==========================================================================
41. הסכמות — תיבת התקנון בצ׳קאאוט, הסכמה שיווקית בהרשמה ובחוות דעת
========================================================================== */
/* ---- 41.1 מעטפת משותפת לשדה ההסכמה ---------------------------------------
.omis-consent-slot היא מעטפת דקה שה-PHP עוטף בה את omis_consent_field().
היא לא מניחה דבר על ה-markup הפנימי של הרנדרר: הפריסה נכונה גם כשה-input
יושב בתוך ה-label וגם כשהוא אח שלו. העיצוב הפנימי של הרכיב עצמו נשאר
באחריות ה-CSS שמגיע עם הרנדרר. */
.omis-consent-slot {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
gap: 0.9rem;
margin-block-start: 0.6rem;
}
.omis-consent-slot > * {
flex: 1 1 auto;
min-inline-size: 0;
margin: 0;
}
/* משקל הכללים הקיימים שעלולים לפגוש את ה-label הזה:
.woocommerce form .form-row label = 0,2,2 (שורה 128)
.woocommerce-checkout .form-row label = 0,2,1 (שורה 3377)
הרנדרר המשותף עשוי לעטוף את עצמו ב-.form-row (זה הדפוס בכל שאר התבנית),
ולכן לא מסתפקים ב-.omis-consent-slot label (0,2,1) — הוא היה מפסיד ל-128
וחוזר ל-display:block. שלוש הווריאציות למטה מגיעות ל-0,2,2 / 0,3,2 ומנצחות
בכל הרכבה, בלי ID ובלי !important. */
.omis-consent-slot label,
.woocommerce form .omis-consent-slot label,
.woocommerce form .omis-consent-slot .form-row label {
display: flex;
align-items: flex-start;
gap: 0.9rem;
margin: 0;
padding-block: 0.2rem;
font-size: 1.3rem;
font-weight: var(--omis-regular);
line-height: 1.65;
color: var(--omis-ink-70);
cursor: pointer;
}
/* 2rem + padding-block של ה-label = יעד מגע גבוה מ-24px לכל רוחב השורה. */
.omis-consent-slot input[type="checkbox"] {
flex: none;
inline-size: 2rem;
block-size: 2rem;
margin-block: 0.1rem 0;
accent-color: var(--omis-sage);
cursor: pointer;
transition: box-shadow 0.2s var(--omis-ease);
}
/* מסגרת מלאה ולא רק box-shadow: box-shadow נעלם ב-forced-colors,
ו-rgba בשקיפות נמוכה לא מגיע ל-3:1 שנדרש לסימון מיקוד.
--omis-sage-dark מול --omis-white = 3.37:1. */
.omis-consent-slot input[type="checkbox"]:focus-visible {
outline: 2px solid var(--omis-sage-dark);
outline-offset: 2px;
box-shadow: 0 0 0 0.35rem rgba(167, 165, 120, 0.28);
}
/* מצב שגיאה — נצבע גם אם הרנדרר לא הכיר את הארגומנט 'invalid' */
.omis-consent-slot.is-invalid input[type="checkbox"],
.omis-consent-slot input[type="checkbox"][aria-invalid="true"] {
outline: 2px solid var(--omis-sale);
outline-offset: 2px;
}
.omis-consent-slot.is-invalid label {
color: var(--omis-ink);
}
/* הודעת השגיאה יורדת לשורה משלה ומיושרת מתחת לטקסט, לא מתחת לתיבה.
--omis-sale מול --omis-white = 5.13:1. */
.omis-consent-slot__error {
flex: 1 1 100%;
margin-block-start: 0.6rem;
padding-inline-start: 2.9rem;
font-size: 1.25rem;
line-height: 1.6;
color: var(--omis-sale);
}
/* ---- 41.2 שרידות הצבע של הקישורים ----------------------------------------
"רצפת" הצבע של ווקומרס (woocommerce.css:4937):
.woocommerce a:where(:not(.button)):where(:not(.omis-btn)):where(:not([class*="omis-"]))
שוקלת 0,1,1 כי ה-:where() מאפס את ה-:not(). כאן מוסיפים [href] ומגיעים
ל-0,2,1 — כלומר הצבע שורד בלי תלות בסדר הקבצים ובלי !important, וגם אם
הרנדרר לא נותן לקישור מחלקה בתחילית omis-. */
.omis-consent-slot a[href],
.woocommerce-terms-and-conditions-wrapper a[href] {
color: var(--omis-ink);
text-decoration: underline;
text-underline-offset: 0.3rem;
transition: color 0.2s var(--omis-ease);
}
.omis-consent-slot a[href]:hover,
.omis-consent-slot a[href]:focus-visible,
.woocommerce-terms-and-conditions-wrapper a[href]:hover,
.woocommerce-terms-and-conditions-wrapper a[href]:focus-visible {
color: var(--omis-sage-dark);
}
.omis-consent-slot a[href]:focus-visible,
.woocommerce-terms-and-conditions-wrapper a[href]:focus-visible {
outline: 2px solid var(--omis-sage-dark);
outline-offset: 3px;
border-radius: 0.3rem;
}
/* ---- 41.3 בהקשר טופס ההרשמה ---------------------------------------------
הכרטיס עצמו הוא --omis-cream-soft (שורה 3085), ולכן ההסכמה מקבלת משטח
לבן פנימי כדי שהיא לא תיקרא כהערת שוליים.
--omis-ink-70 מול --omis-white = 4.91:1. */
.omis-login__card--register .omis-consent-slot,
.woocommerce form.register .omis-consent-slot {
background: var(--omis-white);
border: 1px solid var(--omis-line);
border-radius: 1.2rem;
padding: 1.3rem 1.5rem;
margin-block: 0.6rem 1.8rem;
}
.omis-login__card--register .omis-consent-slot.is-invalid,
.woocommerce form.register .omis-consent-slot.is-invalid {
border-color: var(--omis-sale);
}
/* ---- 41.4 בהקשר טופס חוות הדעת -------------------------------------------
משקל 2,2,1 מול .woocommerce #review_form #respond label (2,1,1) בשורה 5747,
שקובע display:block ומשקל medium — כאן זה חייב להישאר flex. */
.woocommerce #review_form #respond .omis-consent-slot {
background: var(--omis-white);
border: 1px solid var(--omis-line);
border-radius: 1.2rem;
padding: 1.3rem 1.5rem;
margin: 0;
}
.woocommerce #review_form #respond .omis-consent-slot label {
display: flex;
align-items: flex-start;
gap: 0.9rem;
margin: 0;
padding-block: 0.2rem;
font-size: 1.3rem;
font-weight: var(--omis-regular);
line-height: 1.65;
color: var(--omis-ink-70);
cursor: pointer;
}
/* ---- 41.5 תיבת התקנון בצ׳קאאוט -------------------------------------------
ווקומרס מדפיס את המעטפת בתוך #payment > .form-row.place-order
(templates/checkout/payment.php). ה-#payment בסלקטור מביא ל-1,2,0 ולכן
הבלוק גובר על .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper
(0,2,0, שורה 3401) בלי תלות בסדר.
--omis-ink-70 מול --omis-cream = 4.80:1. */
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper {
background: var(--omis-cream);
border: 1px solid var(--omis-line);
border-radius: 1.2rem;
padding: 1.4rem 1.6rem;
margin-block-end: 1.6rem;
font-size: 1.3rem;
line-height: 1.7;
color: var(--omis-ink-70);
}
/* משפט הפרטיות היה --omis-ink-45 על --omis-cream = 2.49:1 — נפילה ברורה
מתחת ל-4.5:1, ובגודל 1.25rem גם ההקלה של "טקסט גדול" לא חלה.
ink-70 ב-1.3rem = 4.80:1. */
.woocommerce-checkout #payment .woocommerce-privacy-policy-text p {
margin: 0 0 1.1rem;
font-size: 1.3rem;
line-height: 1.7;
color: var(--omis-ink-70);
}
/* תוכן עמוד התקנון שנפתח בתוך העמוד.
wc_terms_and_conditions_page_content() מדפיס עליו
style="display:none; max-height:200px; overflow:auto" ישירות ב-HTML.
שלושת המאפיינים האלה נשארים בידי ווקומרס (inline מנצח בלי !important,
וה-display מנוהל ממילא ע"י ה-slideToggle שלה) — כאן מעצבים רק את השאר. */
.woocommerce-checkout #payment .woocommerce-terms-and-conditions {
background: var(--omis-white);
border: 1px solid var(--omis-line);
border-radius: 1rem;
padding: 1.2rem 1.4rem;
margin-block: 0.4rem 1.2rem;
font-size: 1.3rem;
line-height: 1.75;
color: var(--omis-ink-70);
overscroll-behavior: contain;
}
.woocommerce-checkout #payment .woocommerce-terms-and-conditions p:last-child {
margin-bottom: 0;
}
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper .form-row {
margin: 0;
padding: 0;
}
/* 1,3,1 מול .woocommerce-checkout .form-row label (0,2,1, שורה 3377)
ומול .woocommerce form .form-row label (0,2,2, שורה 128).
--omis-ink מול --omis-cream = 11.6:1. */
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper label.checkbox {
display: flex;
align-items: flex-start;
gap: 0.9rem;
margin: 0;
padding-block: 0.2rem;
font-size: 1.35rem;
font-weight: var(--omis-regular);
line-height: 1.65;
color: var(--omis-ink);
cursor: pointer;
}
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper input#terms {
flex: none;
inline-size: 2rem;
block-size: 2rem;
margin-block: 0.1rem 0;
margin-inline: 0;
accent-color: var(--omis-sage);
cursor: pointer;
transition: box-shadow 0.2s var(--omis-ease);
}
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper input#terms:focus-visible {
outline: 2px solid var(--omis-sage-dark);
outline-offset: 2px;
box-shadow: 0 0 0 0.35rem rgba(167, 165, 120, 0.28);
}
/* checkout.js מוסיף .woocommerce-invalid לשורת ה-validate-required.
--omis-sale מול --omis-cream = 4.90:1. */
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper .form-row.woocommerce-invalid label.checkbox {
color: var(--omis-sale);
}
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper .form-row.woocommerce-invalid input#terms {
outline: 2px solid var(--omis-sale);
outline-offset: 2px;
}
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper abbr.required {
border: 0;
text-decoration: none;
color: var(--omis-sale);
cursor: help;
}
/* ---- 41.6 מובייל ---------------------------------------------------------- */
@media (max-width: 1023.98px) {
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper {
padding: 1.2rem 1.3rem;
border-radius: 1rem;
}
.omis-login__card--register .omis-consent-slot,
.woocommerce form.register .omis-consent-slot,
.woocommerce #review_form #respond .omis-consent-slot {
padding: 1.1rem 1.2rem;
border-radius: 1rem;
}
}
/* ---- 41.7 כיבוי תנועה ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.omis-consent-slot input[type="checkbox"],
.omis-consent-slot a[href],
.woocommerce-terms-and-conditions-wrapper a[href],
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper input#terms {
transition: none;
}
}
/* מתג הנגישות של האתר כבר מאפס transition-duration עם !important
(main.css:1301-1306); השורות כאן מפורשות כדי שהתלות הזאת לא תישבר
בריפקטור עתידי — בדיוק כמו בסעיפים 37 ו-40. */
html.omis-a11y-motion .omis-consent-slot input[type="checkbox"],
html.omis-a11y-motion .omis-consent-slot a[href],
html.omis-a11y-motion .woocommerce-terms-and-conditions-wrapper a[href],
html.omis-a11y-motion .woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper input#terms {
transition: none;
}
/* ==========================================================================
45. עמוד המוצר — פריסה בלי כרטיס, גלריה רחבה, תמונה שלמה
----------------------------------------------------------------------
הבעיה: `.woocommerce div.product` היה כרטיס --omis-cream עם מסגרת, פינות
וצל, שיושב על עמוד --omis-cream-soft. שני משטחים כמעט זהים שמתחרים
בצילום. כאן המוצר יושב ישירות על העמוד; המשטח היחיד שנשאר הוא התצלום.
הסקשן מתווסף אחרי סקשן 44 ולכן מנצח בסדר המקור בספציפיות שווה.
!important מופיע כאן פעם אחת בלבד (45.6) ומנומק בדיוק במקומו.
כל מספרי הספציפיות בהערות נספרו מחדש ואומתו מול הקובץ.
========================================================================== */
/* --------------------------------------------------------------------------
45.1 המעטפת — אוויר במקום מסגרת
-------------------------------------------------------------------------- */
/* לא "מחקנו padding": ה-4rem של הכרטיס מוחלפים באוויר אנכי גדול יותר,
וה-gutter של .omis-product__inner (5.4rem) ממשיך להחזיק את התוכן הרחק
מקצה החלון. הרוחב הפנימי ב-1440 עולה מ-1252px ל-1332px. */
.omis-product {
padding-block: 3.2rem 10rem;
}
.woocommerce div.product {
/* עמודת התמונה גדולה מעמודת הטקסט. ב-1440: 680px מול 592px
(קודם 586 מול 616 — הטקסט היה הרחב מהשניים). */
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
/* column-gap ו-row-gap בנפרד: ה-gap המקורי (5rem) היה משותף, ושינוי שלו
היה מזיז גם את margin-bottom:-1.4rem המכויל של פירורי הלחם. */
column-gap: 6rem;
row-gap: 5rem;
margin-top: 2.2rem;
background: transparent;
border: 0;
border-radius: 0;
padding: 0;
box-shadow: none;
}
/* --------------------------------------------------------------------------
45.2 רשת ביטחון לגלישה אופקית
-------------------------------------------------------------------------- */
/* פריט גריד/פלקס מקבל min-width:auto, וזה בדיוק המקור לבאג ה-25px שתועד
בסקשן 43. שם זה נסגר לרצועת הלשוניות בלבד; כאן זה מוחל על כל ילדי
div.product ועל כל שלד הגלריה, שהוא הצרכן החדש של הרוחב. */
.woocommerce div.product > *,
.omis-gallery,
.omis-gallery__stage,
.omis-gallery__slide,
.omis-gallery__thumbs {
min-inline-size: 0;
}
/* --------------------------------------------------------------------------
45.3 מידת שורה בעמודת הטקסט
-------------------------------------------------------------------------- */
/* עמודת הסיכום היא 591.6px ב-1440 ו-525.9px ב-1280 — בשני המקרים 36.98em
של טקסט 1.6rem, כי rem נגזר-viewport והיחס נשמר. זה ~74 תווים, ממש על
התקרה. 62ch ≈ 34em (ספרה ב-Google Sans היא ~0.55em) ≈ 65-70 תווים. */
.woocommerce div.product .woocommerce-product-details__short-description {
max-inline-size: 62ch;
}
/* --------------------------------------------------------------------------
45.4 סטיקי — מועבר לאלמנט שקיים בפועל
-------------------------------------------------------------------------- */
/* הכלל בשורות 577-583 מכוון ל-.woocommerce-product-gallery, שאינו מודפס
כלל: inc/woocommerce.php:431 עושה remove_action ל-
woocommerce_show_product_images. כלומר הסטיקי מעולם לא פעל, וגם
.woocommerce-product-gallery__wrapper ו-.flex-control-thumbs (585-620)
הם קוד מת.
נבדק שהוא חוקי כאן:
- אין overflow על .omis-product, .omis-product__inner או .omis-wrap.
- ל-html אין overflow, ולכן overflow-x:hidden של body (main.css:49)
מתפשט ל-viewport ו-body עצמו מחושב visible. ה-scrollport הוא הדפדפן.
- ה-containing block של פריט גריד sticky הוא *אזור הגריד* ולא קופסת
הפריט, ולכן הגלריה נוסעת לאורך כל גובה שורה 2 (גלריה+סיכום).
- .omis-header-stack הוא sticky/top:0 בגובה --omis-header-h (main.css:208),
וההיצמדות כאן מתחילה 2rem מתחתיו. */
@media (min-width: 1024px) {
/* ה-sticky הוסר במכוון.
נמדד ב-Chrome: הגלריה יצאה מתא הגריד שלה ונסעה 476px מטה, מעל שורת
היתרונות, רצועת הלשוניות והמפרט. גובה הגלריה (558.6px) שווה בדיוק
לגובה שורה 2 — כלומר לא אמור להיות לה מרווח נסיעה כלל — ובכל זאת נסעה.
כדי ש-sticky יעבוד אמין בגריד צריך אלמנט-עטיפה שהוא פריט הגריד,
וה-sticky יושב בתוכו. ממילא כשהגלריה היא הגבוהה בשורה אין ל-sticky ערך. */
}
/* --------------------------------------------------------------------------
45.5 גובה הבמה
-------------------------------------------------------------------------- */
/* התקרה הקודמת, min(58rem, 100vh - header - 14rem), נועלת על 580px. בעמודה
החדשה (680px) זה הופך קופסת 4:5 לקופסה *לרוחב* 680x580 — עם cover אף אחד
לא הבחין, עם contain תמונה לאורך הייתה מצטמצמת ל-464px ומבזבזת 108px מכל
צד. ה-14rem נועדו להשאיר את המחיר מעל הקיפול, וזה רלוונטי רק במובייל שבו
הגלריה מעל הסיכום; בדסקטופ עמודת הסיכום מתחילה באותה שורה וממילא מעל
הקיפול. התקרה כאן נגזרת מהתנאי האמיתי: שהגלריה כולה תיכנס לחלון, שזה
התנאי לכך שהסטיקי יהיה שימושי.
max-height (סקשן 12) ו-max-block-size הם אותו property במצב כתיבה אופקי
ולכן מתחרים בקסקייד; ספציפיות זהה (0,1,0) והסקשן הזה מאוחר יותר. */
@media (min-width: 1024px) {
.omis-gallery {
--omis-stage-h: min(78rem, calc(100vh - var(--omis-header-h) - 7rem));
}
.omis-gallery__stage,
.omis-gallery__thumbs {
max-block-size: var(--omis-stage-h);
}
}
/* הרקע זהה בדיוק לרקע .omis-product (שניהם --omis-cream-soft). זה הפתרון
ל"פסי letterbox": כשהמשטח מאחורי התמונה הוא העמוד עצמו, מה ש-contain
משאיר פנוי אינו פס אלא חלל של העמוד. הצל חייב לרדת מאותה סיבה — צל היה
מסמן את גבולות הקופסה הבלתי־נראית ומחזיר את החלל להיקרא כבאג. */
.omis-gallery__stage {
background: var(--omis-cream-soft);
box-shadow: none;
}
/* --------------------------------------------------------------------------
45.6 contain — התצלום השלם, עם קצוות משלו
-------------------------------------------------------------------------- */
/* למה shrink-wrap ולא רק object-fit: עם width/height:100% קופסת ה-![]()
ממשיכה למלא את הבמה, ולכן border-radius חל על מלבן שקוף ולא נראה —
התצלום היה מופיע כמלבן עם פינות חדות שצף בחלל, וזה בדיוק המראה של באג.
כשהאלמנט מתכווץ לתצלום, הרדיוס יושב על הקצוות האמיתיים והתצלום נקרא
כאובייקט מונח. אותו --omis-radius-card של כרטיסי הקטלוג — שפה אחת.
התגית, הזכוכית והחצים נשארים מעוגנים לבמה ולא לתצלום, בכוונה: עיגון
לתצלום היה מקפיץ את מיקום החצים בין תמונות ביחסים שונים. */
.omis-gallery__slide {
display: flex;
align-items: center;
justify-content: center;
}
/* !important נדרש ומנומק: סקשן 30 (שורות 5407-5418) מגדיר
`.woocommerce div.product .omis-gallery img { width:100% !important;
height:100% !important; max-width:none !important; object-fit:cover
!important }`. ספציפיות אמיתית שם: 3 מחלקות (.woocommerce, .product,
.omis-gallery) + 2 טיפוסים (div, img) = (0,3,2).
הסלקטור כאן מוסיף את .omis-gallery__slide ולכן הוא (0,4,2) — גובר.
(גם בתיקו היה גובר, כי בין הצהרות !important באותה ספציפיות מכריע סדר
המקור, והסקשן הזה מאוחר יותר.) */
.woocommerce div.product .omis-gallery .omis-gallery__slide img {
inline-size: auto !important;
block-size: auto !important;
max-inline-size: 100% !important;
max-block-size: 100% !important;
/* פריט פלקס מקבל min-*-size:auto = הגודל האינטרינזי. בלי האיפוס הזה
תמונה רחבה מסרבת להתכווץ, דוחפת את הבמה ומחזירה בדיוק את הגלישה
האופקית שסקשן 43 תיקן. */
min-inline-size: 0;
min-block-size: 0;
object-fit: contain !important;
border-radius: var(--omis-radius-card);
}
/* סקשן 34 (שורה 5919) שם cursor:zoom-in על הבמה. עכשיו חלק ניכר מהבמה הוא
רקע העמוד, וסמן "הגדל" מעל שטח שנראה ריק קורא כתקלה. הסמן עובר לתצלום.
ההתנהגות לא משתנה: מאזין הקליק ב-JS יושב על ה-stage (main.js:509).
הכפתורים לא נפגעים — main.css:77 קובע button{cursor:pointer}. */
.omis-gallery__stage {
cursor: default;
}
.omis-gallery__slide img {
cursor: zoom-in;
}
/* --------------------------------------------------------------------------
45.7 מובייל — במה ברוחב מלא, תמוניות ברצועה מתחתיה
-------------------------------------------------------------------------- */
/* למה רצועה מתחת ולא קרוסלה עם נקודות:
1. הבמה בנויה משקופיות position:absolute עם crossfade. קרוסלת scroll-snap
דורשת שקופיות בזרימה — זה היה שובר את ה-crossfade, את שכבת ה-LQIP
(סקשן 40 נשען על overflow:hidden של הבמה) ואת פתיחת הלייטבוקס.
2. ההחלקה כבר קיימת ועובדת: main.js:513-519, touchstart/touchend על הבמה
בסף 40px. אין מה להרוויח מ-scroll-snap.
3. scrollLeft ב-RTL עדיין מתנהג שונה בין מנועים; רצועה שמונעת ב-scrollBy
(דלתא פיזית) עוקפת את זה לחלוטין.
4. הרצועה משמשת גם סימון מיקום וגם affordance. נקודות היו נותנות רק את
הראשון, ובמובייל החצים ממילא opacity:0 (אין hover במגע).
הרווח ב-375px: 7.6rem רייל + 1.2rem gap = 84px חוזרים לתמונה, הבמה
עולה מ-208px ל-326px. */
@media (max-width: 1023.98px) {
.omis-product {
padding-block: 1.8rem 5.6rem;
}
.woocommerce div.product {
grid-template-columns: minmax(0, 1fr);
column-gap: 0;
row-gap: 2.4rem;
margin-top: 1.4rem;
padding: 0;
}
.omis-gallery {
grid-template-columns: minmax(0, 1fr);
gap: 1rem;
}
/* מפורש: בדסקטופ התמוניות יושבות ב-grid-row:1 / grid-column:1 (הרייל).
בלי האיפוס הזה הן היו נערמות על הבמה בגריד של עמודה אחת. */
.omis-gallery__stage {
grid-column: 1;
grid-row: 1;
/* התקרה שומרת את הכותרת והמחיר קרוב לקיפול. שתי הצהרות: דפדפן שאינו
מכיר svh פוסל את השנייה בזמן פענוח ונשאר עם vh. svh ולא vh כברירת
מחדל כי vh במובייל מודד את החלון הגדול ומגזים בגובה. */
max-block-size: min(46rem, calc(100vh - var(--omis-header-h) - 21rem));
max-block-size: min(46rem, calc(100svh - var(--omis-header-h) - 21rem));
}
.omis-gallery__thumbs {
grid-column: 1;
grid-row: 2;
display: flex;
flex-wrap: nowrap;
/* מפורש ולא ברירת המחדל stretch: עם stretch גובה התמונית נגזר מגובה
שורת הפלקס ולא מ-aspect-ratio:1 שלה. היום זה יוצא אותו 56px רק
מפני שכל הפריטים באותו רוחב — כלומר רצפת המגע הייתה מקרית.
flex-start מחזיר את השליטה ל-aspect-ratio ומקבע אותה. */
align-items: flex-start;
grid-auto-rows: auto;
gap: 0.8rem;
max-block-size: none;
overflow-x: auto;
overflow-y: hidden;
/* קיצור ולא overscroll-behavior-inline: הלוגי אינו נתמך ב-Safari
מתחת ל-16 ושם ההצהרה נזרקת וגלילה מגיעה עד סוף הרצועה וממשיכה
לעמוד. הקיצור נתמך בכל מקום, וציר ה-block ממילא לא נגלל
(overflow-y:hidden). זה גם מה שסקשן 12 עושה ברייל הדסקטופ. */
overscroll-behavior: contain;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-inline-end: 0;
padding-block-end: 0.2rem;
}
.omis-gallery__thumbs::-webkit-scrollbar {
display: none;
}
.omis-gallery__thumb {
flex: 0 0 auto;
/* 6.4rem מתכווץ ל-52px ב-320px, כי 1rem נגזר-viewport (1000vw/393).
הרצפה בפיקסלים שומרת על יעד מגע >= 44px (WCAG 2.5.5) בכל רוחב:
320px -> 56px, 360px -> 58.6px, 375px -> 61.1px, 393px -> 64px.
aspect-ratio:1 (סקשן 12) הופך את הרוחב לגובה, ולכן שני הצירים
עוברים את הסף. inline-size גובר על width:100% של סקשן 12 —
אותו property בקסקייד, ספציפיות זהה, מיקום מאוחר יותר. */
inline-size: 6.4rem;
min-inline-size: 56px;
block-size: auto;
}
}
/* כיבוי תנועה משני המקורות. הגלילה החלקה של הרצועה מוגדרת ב-CSS ולא
ב-JS בדיוק כדי שהמדיניות תשב כאן. */
@media (prefers-reduced-motion: reduce) {
.omis-gallery__thumbs {
scroll-behavior: auto;
}
}
html.omis-a11y-motion .omis-gallery__thumbs {
scroll-behavior: auto;
}
/* --------------------------------------------------------------------------
45.8 אלמנטים שהסתמכו על הקרם של הכרטיס
-------------------------------------------------------------------------- */
/* עם הסרת הכרטיס המשטח הוא --omis-cream-soft, וכל מה שהיה עיגול
cream-soft על cream פשוט נעלם. היחס נשמר בהיפוך: cream על cream-soft. */
.woocommerce div.product .omis-perks__icon,
.omis-wish--title,
.omis-gallery__thumb {
background: var(--omis-cream);
}
/* חובה מיד אחרי הכלל שלמעלה, ואסור למחוק:
`.omis-perks li:hover .omis-perks__icon` (סקשן 27, שורה 5032) הוא
3 מחלקות/פסאודו-מחלקות (.omis-perks, :hover, .omis-perks__icon) + טיפוס
אחד (li) = (0,3,1).
`.woocommerce div.product .omis-perks__icon` הוא 3 מחלקות + טיפוס אחד
(div) = (0,3,1). תיקו מדויק — ולכן מכריע סדר המקור, והכלל החדש (מאוחר
יותר בקובץ) היה מבטל את מצב ה-hover בעמוד המוצר לחלוטין.
השחזור כאן הוא (0,5,2) ולכן חוזר לגבור. */
.woocommerce div.product .omis-perks li:hover .omis-perks__icon {
background: var(--omis-sage);
color: var(--omis-cream);
}
/* --------------------------------------------------------------------------
45.9 שכבת ה-LQIP מתיישרת ל-contain
-------------------------------------------------------------------------- */
/* סקשן 40 מגדיר inset:-3.6rem + background-size:cover. זה היה נכון כשהתמונה
הייתה cover: השכבה מילאה את הבמה בדיוק כמו התצלום, וה-blur שגלש נחתך ע"י
overflow:hidden של הבמה. עם contain הצביעה מפסיקה להגיע לקצוות הבמה,
ולכן ה-blur גולש החוצה אל רקע העמוד ומייצר הילה מטושטשת סביב התצלום —
בתצלום עם רקע כהה זה כתם נראה לעין בזמן הטעינה.
ספציפיות זהה לסקשן 40 (0,3,1); מנצח בסדר המקור. */
.omis-gallery__slide.is-active.is-lqip::before {
inset: 0;
background-size: contain;
filter: blur(0.9rem);
/* המסכה היא אותה תמונה בדיוק באותה גאומטריה: האלפא שלה היא 1 בתוך
טביעת הרגל של ה-contain ו-0 מחוצה לה. במודל הציור המסכה מוחלת
*אחרי* ה-filter, ולכן היא גוזמת את הילת הטשטוש בדיוק בקצה התצלום.
ה-mask-box הוא ה-border-box של הפסאודו — אותה קופסה שכנגדה נפתר
background-size:contain, ולכן שתי הגאומטריות זהות בהגדרה.
דפדפן ללא תמיכה מפיל את ההצהרות ומציג את ההילה — פגיעה חזותית
קלה בזמן טעינה בלבד, לא שבירה. */
-webkit-mask-image: var(--omis-lqip);
-webkit-mask-size: contain;
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-image: var(--omis-lqip);
mask-size: contain;
mask-position: center;
mask-repeat: no-repeat;
/* מפורש: match-source על JPEG יפול ממילא ל-alpha, אבל בלי זה מנוע
שיפרש luminance היה מעלים את השכבה בתצלום כהה. */
mask-mode: alpha;
}
/* --------------------------------------------------------------------------
45.10 מוצר בלי תמונה כלל
-------------------------------------------------------------------------- */
/* omis_product_gallery() מדפיס .omis-gallery.omis-gallery--empty עם
wc_placeholder_img(). בכל assets/css אין ולו כלל אחד ל---empty, ולכן
.omis-gallery נשאר grid-template-columns: 7.6rem minmax(0,1fr) והתמונה
נשתלת ברייל התמוניות ברוחב 76px. הבאג קדם להצעה, אבל הוא בדיוק "מוצר
בלי תמונה" מרשימת הבדיקה, וההצעה לא נגעה בו.
ספציפיות (0,1,0) כמו .omis-gallery — מנצח בסדר המקור, גם מול כלל
המובייל בשורה 2635. */
.omis-gallery--empty {
grid-template-columns: minmax(0, 1fr);
}
/* (0,3,2) — תיקו עם סקשן 30, מנצח בסדר המקור. height:100% על הורה בגובה
auto ממילא נפתר ל-auto, אבל מפורש כדי שלא יהיה תלוי בכך. */
.woocommerce div.product .omis-gallery--empty img {
block-size: auto !important;
border-radius: var(--omis-radius-card);
}
/* --------------------------------------------------------------------------
45.11 שורת היתרונות — עמידה בשינוי מספר הפריטים
-------------------------------------------------------------------------- */
/* החלטת הלקוח מורידה את פריט ההחזרות, כלומר 3 פריטים במקום 4. סקשן 27
קובע repeat(4,1fr) בדסקטופ ו-repeat(2,1fr) במובייל — ולכן היו נשארים
עמודה מתה בדסקטופ ופריט יתום במובייל.
auto-fit עם רצפה של 18rem: ב-1440 שורת התוכן היא 1332px ו-gap 2rem,
כלומר עד 6 מסלולים; auto-fit מקפל את הריקים, ולכן 4 פריטים -> 4 מסלולים
של 318px ו-3 פריטים -> 3 מסלולים של 430.7px. שני המצבים נכונים בלי
לגעת בשום דבר אחר. (0,3,1) — גובר על .omis-perks של סקשן 27. */
.woocommerce div.product .omis-perks {
grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}
@media (max-width: 1023.98px) {
/* במובייל שורת התוכן היא 342px ב-393 ו-278.6px ב-320 — 18rem לא נכנס
פעמיים, ו-auto-fit היה קורס לעמודה אחת. לכן 2 עמודות מפורשות. */
.woocommerce div.product .omis-perks {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* מספר אי-זוגי של פריטים משאיר יתום בעמודת ה-inline-start. הפריט
האחרון נפרש על שתי העמודות ומתמרכז.
הכלל אינרטי לחלוטין כשהמספר זוגי: ב-4 פריטים הפריט האחרון הוא
nth-child(even) ואין התאמה. כלומר בטוח גם אם ההסרה לא תבוצע. */
.woocommerce div.product .omis-perks li:last-child:nth-child(odd) {
grid-column: 1 / -1;
}
}
/* ==========================================================================
45. לשוניות המוצר — שורה בדסקטופ, אקורדיון אמיתי במובייל
----------------------------------------------------------------------
מתווסף בסוף assets/css/woocommerce.css (אחרי סקשן 44, שורה 6742).
woocommerce.css נטען אחרי main.css (functions.php:71) — סדר המקור מובטח.
הגישה: סימון אחד לשני הברייקפוינטים. ה-CSS מחליף פריסה בלבד —
רצועת הלשוניות יורדת מהמסך במובייל, כותרות האקורדיון יורדות מהמסך
בדסקטופ. ה-JS נוגע רק ב-ARIA, כי role לא ניתן להתניה במדיה קווארי.
ארבע הערות ספציפיות (סקשן 7 בהנחיות — בלי !important):
1. הסלקטורים הארוכים כאן אינם הסלמה. סקשן 35 מגדיר
`.woocommerce div.product .woocommerce-tabs .panel { display: none }`
(0,4,1) ו-`… .panel.is-active { display: block }` (0,5,1). כדי להפוך
פאנל לקופסת גריד מתקפלת חייבים בדיוק את אותם סלקטורים — לא יותר —
וסדר המקור (הסקשן הזה אחרון בקובץ) מכריע את התיקו.
2. סקשן 32 (גריד 2x2 במובייל), החלק המובייל של סקשן 35 וסקשן 43
מטפלים כולם ברצועת הלשוניות במובייל. כאן הרצועה display:none,
ולכן הם הופכים לקוד מת — אפשר למחוק אותם בניקיון נפרד.
3. הקיפול נעשה ב-grid-template-rows: 0fr→1fr ולא ב-max-height. פאנל
חוות הדעת מכיל טופס תגובה שגובהו לא ידוע מראש; כל max-height מנחש
היה או חותך אותו או משאיר קפיצה.
4. כל מידה שנראית למשתמש עוברת דרך max() עם רצפה בפיקסלים. main.css
שורה 30 מגדיר html { font-size: calc(1000vw / 393) } מתחת ל-1024px,
כלומר 1rem = 9.54px ב-375 ו-8.14px ב-320 — בלי רצפה, טקסט של
1.4rem היה מגיע ל-11.4px במכשירים הקטנים. רצפה בלבד, בלי תקרה,
כדי לא לשנות את קנבס הטאבלט (560–1023px, בסיס 14.25px).
========================================================================== */
/* -- 45.1 דסקטופ: שורה נקייה שבאמת מתכווצת ------------------------------- */
/* הגישה הקודמת (ellipsis) לא עבדה כי min-width:0 ניתן ל- בלבד (סקשן 43),
בזמן ש- הוא white-space:nowrap בלי overflow — כלומר הוא, ולא ה-li,
קבע את הרוחב. החיתוך חייב לשבת על ה- עצמו. */
.woocommerce div.product .woocommerce-tabs ul.tabs {
flex-wrap: nowrap;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
flex: 0 1 auto;
min-width: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
max-width: 100%;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* כותרות האקורדיון קיימות ב-DOM תמיד ומוסתרות בדסקטופ. display:none
מוציא אותן גם מעץ הנגישות וגם מסדר הפוקוס — אין כפילות כותרות. */
.omis-tabs__head {
display: none;
}
/* שכבת ה-DOM החדשה בין הפאנל לתוכן. בדסקטופ הפאנל הוא display:block
ולכן זו סתם עטיפה שקופה; min-inline-size שומר עליה גם אם מישהו יהפוך
את הפאנל לקופסת גריד/פלקס בעתיד. */
.omis-tabs__inner {
min-inline-size: 0;
}
/* -- 45.2 המפרט בתוך "על התכשיט" ---------------------------------------- */
.omis-tab-body > :first-child {
margin-block-start: 0;
}
.omis-specs {
margin-block-start: 3rem;
padding-block-start: 2.4rem;
border-block-start: 1px solid var(--omis-line);
}
/* מוצר בלי טקסט תיאור: המפרט הוא התוכן הראשון בפאנל, ואז הקו המפריד
מרחף מעל כלום. omis_description_tab() מוסיף את המודיפייר במקרה הזה. */
.omis-specs--bare {
margin-block-start: 0;
padding-block-start: 0;
border-block-start: 0;
}
.omis-specs__title {
margin: 0 0 1.2rem;
font-size: 1.8rem;
font-weight: var(--omis-medium);
}
.omis-specs .omis-product-meta {
margin-block-start: 1.6rem;
}
/* -- 45.3 מובייל: אקורדיון ----------------------------------------------- */
@media (max-width: 1023.98px) {
/* רצועת הלשוניות יורדת מהמסך. היא המקור לגלישה האופקית שסקשן 43 ניסה
לרפא, ובעברית ברוחב 320px אין לה סיכוי גם עם ellipsis. */
.woocommerce div.product .woocommerce-tabs ul.tabs {
display: none;
}
/* הקו העליון של .woocommerce-tabs (סקשן 5) הוא כבר הקו של המדור
הראשון — מקצצים את הריפוד שהיה מיועד לרצועה. */
.woocommerce div.product .woocommerce-tabs {
padding-block-start: 0.6rem;
}
.omis-tabs__section {
border-block-end: 1px solid var(--omis-line);
}
.omis-tabs__head {
display: block;
margin: 0;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
}
.omis-tabs__toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.2rem;
inline-size: 100%;
/* WCAG 2.5.5. 5.4rem = 54px ב-393px אבל 44px ב-320px — max()
מקבע רצפה של 52px שלא תלויה ברוחב המסך. */
min-block-size: max(5.4rem, 52px);
padding-block: 1.1rem;
padding-inline: 0.2rem;
margin: 0;
background: none;
border: 0;
border-radius: 0;
color: var(--omis-ink);
font-family: inherit;
/* 1.55rem = 12.6px ב-320px. רצפה של 15px. */
font-size: max(1.55rem, 15px);
font-weight: var(--omis-medium);
line-height: 1.35;
text-align: start;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.omis-tabs__toggle:focus-visible {
outline: 2px solid var(--omis-sage-dark);
outline-offset: -2px;
border-radius: 0.6rem;
}
.omis-tabs__toggle-text {
min-inline-size: 0;
overflow-wrap: anywhere; /* כותרת ארוכה מהגדרות (ship_tab_title) נשברת ולא דוחפת */
}
/* חץ: גבולות פיזיים בכוונה. הצורה נוצרת ע"י transform: rotate שהוא
פיזי מעצם הגדרתו — פינת ימין־תחתון מסובבת 45° נותנת חץ מטה סימטרי
סביב הציר האנכי, ולכן זהה בדיוק ב-RTL וב-LTR. עם border-inline-end
הפינה הייתה מתהפכת בעברית והחץ היה מצביע הצידה.
הצבע הוא ink-70 ולא ink-45: ink-45 מעל הקרם נותן 2.49:1 והחץ הוא
המחוון החזותי היחיד למצב פתוח/סגור — WCAG 1.4.11 דורש 3:1.
ink-70 נותן ≈4.8:1. */
.omis-tabs__chev {
flex: none;
inline-size: max(0.9rem, 8px);
block-size: max(0.9rem, 8px);
margin-inline-end: 0.6rem;
border-right: 2px solid var(--omis-ink-70);
border-bottom: 2px solid var(--omis-ink-70);
transform: rotate(45deg);
transform-origin: 60% 60%;
transition: transform 0.32s var(--omis-ease), border-color 0.32s var(--omis-ease);
}
.omis-tabs__section.is-open .omis-tabs__chev {
transform: rotate(-135deg);
border-color: var(--omis-ink);
}
/* הפאנל הופך לקופסת גריד בגובה 0. ראה הערה 1 בראש הסקשן לגבי הסלקטור. */
.woocommerce div.product .woocommerce-tabs .panel {
display: grid;
grid-template-rows: 0fr;
max-width: none;
/* 1.4rem = 11.4px ב-320px. רצפה של 13px. */
font-size: max(1.4rem, 13px);
line-height: 1.75;
transition: grid-template-rows 0.32s var(--omis-ease);
}
.woocommerce div.product .woocommerce-tabs .panel.is-active {
display: grid; /* חייב לחזור כאן: סקשן 35 קובע display:block ב-(0,5,1) */
grid-template-rows: 1fr;
animation: none; /* omis-panel-in מסקשן 35 מתנגש בקיפול */
}
/* הקופסה הנחתכת.
min-inline-size:0 הוא חובה ולא קישוט: .omis-tabs__inner הוא פריט
גריד בתוך .panel, ופריט גריד מקבל min-width:auto — כלומר רוחב
המינימום שלו הוא min-content. ערך מאפיין ארוך ב-shop_attributes או
מחרוזת בלי רווחים בחוות דעת היו מותחים אותו מעבר לרוחב המסך,
בדיוק כמו הבאג של 25px בסקשן 43.
visibility מוציא את הטופס הסגור מסדר הפוקוס ומעץ הנגישות —
overflow:hidden לבדו לא עושה את זה. */
.omis-tabs__inner {
min-inline-size: 0;
min-block-size: 0;
overflow: hidden;
visibility: hidden;
padding-block: 0.2rem 2.2rem;
transition: visibility 0s linear 0.32s;
}
.panel.is-active > .omis-tabs__inner {
visibility: visible;
transition-delay: 0s;
}
/* טבלת המאפיינים בתוך האקורדיון — table-layout:fixed מונע מערך ארוך
למתוח את הטבלה מעבר לרוחב המסך. */
.woocommerce table.shop_attributes {
table-layout: fixed;
}
.woocommerce table.shop_attributes th {
width: 38%;
padding-inline-end: 1.2rem;
}
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
/* 1.3rem = 10.6px ב-320px. רצפה של 12.5px. */
font-size: max(1.3rem, 12.5px);
padding-block: 1rem;
overflow-wrap: anywhere;
}
.omis-specs {
margin-block-start: 2.2rem;
padding-block-start: 1.8rem;
}
.omis-specs__title {
font-size: max(1.5rem, 14px);
}
}
/* -- 45.4 כיבוי תנועה — שני המקורות ------------------------------------- */
/* אין בתבנית הזו איפוס גלובלי ל-prefers-reduced-motion: main.css:197
מכבה רק את .omis-announcement__track, ו-main.css:1301 נוגע רק
ב-html.omis-a11y-motion. לכן animation:none חייב להיות כאן ומחוץ
למדיה קווארי של המובייל — אחרת omis-panel-in (סקשן 35) ממשיך לרוץ
בדסקטופ תחת reduce. */
@media (prefers-reduced-motion: reduce) {
.omis-tabs__chev,
.omis-tabs__inner,
.woocommerce div.product .woocommerce-tabs .panel {
transition: none;
}
.woocommerce div.product .woocommerce-tabs .panel.is-active {
animation: none;
}
}
/* main.css:1301 מאפס transition-duration בלבד ולא transition-delay —
ולכן ההשהיה של ה-visibility הייתה שורדת. transition:none מאפס גם אותה.
animation-duration שם הוא !important, אבל animation:none מאפס את
animation-name — ובלי שם אין אנימציה, בלי צורך ב-!important. */
html.omis-a11y-motion .omis-tabs__chev,
html.omis-a11y-motion .omis-tabs__inner,
html.omis-a11y-motion .woocommerce div.product .woocommerce-tabs .panel {
transition: none;
}
html.omis-a11y-motion .woocommerce div.product .woocommerce-tabs .panel.is-active {
animation: none;
}
/* ==========================================================================
45. אזור הרכישה — יתרונות צמודים ל-CTA, זמן אספקה, תשלום מאובטח,
פס רכישה דביק במובייל, וטופס "עדכנו אותי כשחוזר למלאי"
----------------------------------------------------------------------
נספח לכל מי שנוגע כאן אחרי:
1. rem נגזר מה-viewport במובייל. main.css שורות 17-38:
html { font-size: 10px } בדסקטופ, calc(1000vw / 393) מתחת ל-1024px,
ונעול על 14.25px בין 560 ל-1023.98px. כלומר 1rem = 10px ב-393,
9.54px ב-375, ו-8.14px בלבד ב-320. לכן כל מידה שחייבת להישאר
44px אמיתיים (WCAG 2.5.5) או 24px (2.5.8) נכתבת max(44px, Xrem) —
ה-rem נותן את הפרופורציה בקנבס, ה-px הוא רצפת בטיחות בטלפון צר.
2. main.css ממקם את .omis-form-message (שורה 1003) ואת .omis-thanks
(שורה 2287) אבסולוטית לפי כרטיס ה-hero של "OMIS's friends" —
left: 65.57rem, top: 40.66rem, בצבע cream. showSuccess() ב-main.js
מזריק בדיוק את .omis-thanks הזה גם לטופס שלנו. בלי האיפוסים ב-45.5
הודעת השגיאה בלתי נראית ומסך התודה עף אל מחוץ לעמוד.
3. הסקשן הזה נכתב אחרי כל 44 הסעיפים הקודמים, ולכן מנצח בסדר מקור
בכל מקום שהמשקל שווה. אין כאן ולו !important אחד.
========================================================================== */
/* --------------------------------------------------------------------------
45.0 רשת ביטחון לגלישה אופקית — פריטי הגריד של div.product
----------------------------------------------------------------------
במובייל (woocommerce.css:868) הגריד הוא grid-template-columns: 1fr,
שהוא minmax(auto, 1fr) — כלומר ה-track נדחף ע"י ה-min-content של
הפריטים. ל-.summary אין min-width:0 (woocommerce.css:622 קובע רק
width/float/margin), וזה בדיוק המנגנון שגרם ל-25px הגלישה שסעיף 43
תיקן נקודתית עבור הלשוניות. הסעיף הזה מוסיף ל-.summary תוכן חדש
(טופס עם input, ושורות טקסט), ולכן החסימה נסגרת פה במקור ולא בעוד
טלאי נקודתי.
-------------------------------------------------------------------------- */
.woocommerce div.product > .summary,
.woocommerce div.product > .omis-gallery,
.woocommerce div.product > .omis-perks {
min-width: 0;
}
/* --------------------------------------------------------------------------
45.1 קופסת הביטחון שמתחת לכפתור ההוספה לעגלה (בתוך .summary)
-------------------------------------------------------------------------- */
/* form.cart מביא margin-bottom: 2.4rem (סעיף 5, woocommerce.css:653).
במקום לדרוס סלקטור בן 5 חלקים בסלקטור חזק יותר, הקופסה נדחסת אליו
חזרה. אם המרווח ההוא ישתנה — הערך השלילי הזה צריך לזוז איתו. */
.omis-buybox {
margin-top: -1.2rem;
margin-bottom: 2.2rem;
display: grid;
gap: 1.1rem;
min-width: 0;
}
.omis-buybox__perks {
list-style: none;
margin: 0;
padding-block: 1.4rem;
padding-inline: 1.6rem;
display: flex;
flex-wrap: wrap;
gap: 1.2rem 1.6rem;
background: var(--omis-cream-soft);
border: 1px solid var(--omis-line);
border-radius: 1.2rem;
}
/* שתי עמודות תמיד (50% פחות חצי מרווח־העמודה): 2 יתרונות יושבים בשורה
אחת, ו-4 (כולל תשלום מאובטח + מיוצר בישראל) נשברים ל-2x2 במקום שורה
אחת צפופה. min-width:0 מבטיח שטקסט ארוך יישבר במקום לדחוף את ה-track. */
.omis-buybox__perks li {
flex: 1 1 calc(50% - 0.8rem);
min-width: 0;
display: flex;
align-items: center;
gap: 1rem;
padding: 0;
}
.omis-buybox__perks li::before {
content: none;
}
.omis-buybox__icon {
flex: none;
width: 3rem;
height: 3rem;
border-radius: 50%;
background: var(--omis-white);
color: var(--omis-sage-dark);
display: grid;
place-items: center;
}
.omis-buybox__icon svg {
width: 1.5rem;
height: 1.5rem;
}
.omis-buybox__text {
min-width: 0;
display: grid;
gap: 0.1rem;
line-height: 1.25;
overflow-wrap: break-word;
}
.omis-buybox__text strong {
font-size: 1.3rem;
font-weight: var(--omis-medium);
color: var(--omis-ink);
}
/* --omis-ink-45 על --omis-cream-soft נותן 2.45:1 — נופל מ-4.5:1
בטקסט של ~12px. --omis-ink-70 נותן 4.68:1 ועובר. */
.omis-buybox__text em {
font-style: normal;
font-size: 1.15rem;
color: var(--omis-ink-70);
}
/* זמן אספקה + תשלום מאובטח */
.omis-buybox__eta,
.omis-buybox__secure {
margin: 0;
display: flex;
align-items: center;
gap: 0.8rem;
font-size: 1.35rem;
line-height: 1.45;
color: var(--omis-ink-70);
}
/* ה- הזה הוא הסיבה שהטקסט לא נשאר חשוף ב-PHP: טקסט חשוף בתוך
flex הופך ל-anonymous flex item שאי אפשר לתת לו min-width:0 בשום
סלקטור, ומחרוזת ארוכה הייתה קובעת רוחב מינימלי ל-.summary. */
.omis-buybox__line {
min-width: 0;
overflow-wrap: anywhere;
}
/* אין אייקון שעון בסט. נקודה עדינה עדיפה על אייקון מושאל שמשקר על המשמעות */
.omis-buybox__dot {
flex: none;
width: 0.7rem;
height: 0.7rem;
border-radius: 50%;
background: var(--omis-sage);
}
.omis-buybox__ico {
flex: none;
width: 1.9rem;
height: 1.9rem;
border-radius: 50%;
background: rgba(167, 165, 120, 0.28);
color: #5d6b3f;
display: grid;
place-items: center;
}
.omis-buybox__ico svg {
width: 1.1rem;
height: 1.1rem;
}
@media (max-width: 1023.98px) {
.omis-buybox {
margin-top: -0.6rem;
margin-bottom: 1.8rem;
gap: 0.9rem;
}
.omis-buybox__perks {
padding-block: 1.2rem;
padding-inline: 1.3rem;
gap: 1rem 1.2rem;
}
.omis-buybox__icon {
width: 2.7rem;
height: 2.7rem;
}
.omis-buybox__icon svg {
width: 1.35rem;
height: 1.35rem;
}
.omis-buybox__eta,
.omis-buybox__secure {
font-size: max(12px, 1.25rem);
}
}
/* --------------------------------------------------------------------------
45.2 השורה הרחבה — לפי מספר הפריטים בפועל
----------------------------------------------------------------------
סעיף 27 קובע repeat(4, 1fr) ובמובייל repeat(2, 1fr). מאז שהיתרונות
התפצלו הרשימה הזו מכילה בין פריט אחד (מוצר במלאי) לשלושה (מוצר שאזל
או מוצר מקובץ/חיצוני, שם omis_buybox() לא רץ וה-PHP מחזיר את הכול
לכאן). ה-PHP סופר ומדפיס omis-perks--count-N, כך שהגריד מתקן את
עצמו בכל תרחיש, כולל פילטר של הלקוח.
כל המחלקות במשקל (0,1,0) או שווה לקיים — ומנצחות בסדר מקור.
-------------------------------------------------------------------------- */
.omis-perks--count-1 { grid-template-columns: minmax(0, 1fr); }
.omis-perks--count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.omis-perks--count-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.omis-perks--count-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* פריט בודד קורא כשורה אחת ממורכזת, לא כעמודה יתומה */
.woocommerce div.product .omis-perks--count-1 li {
justify-content: center;
}
@media (max-width: 1023.98px) {
/* שלושה פריטים בשתי עמודות — האחרון נפרש על שתיהן במקום להיתקע יתום */
.omis-perks--count-3,
.omis-perks--count-4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.omis-perks--count-3 li:last-child {
grid-column: 1 / -1;
}
/* סעיף 29 הופך כל פריט לעמודה ממורכזת במובייל. לפריט יחיד שורה
אופקית מנצלת את הרוחב טוב יותר. משקל זהה (0,3,2) — סדר מקור מכריע. */
.woocommerce div.product .omis-perks--count-1 li {
flex-direction: row;
text-align: start;
gap: 1.1rem;
}
}
/* --------------------------------------------------------------------------
45.3 פס הרכישה הדביק — מובייל בלבד
-------------------------------------------------------------------------- */
/* ברירת המחדל היא display:none, ולכן בדסקטופ הפס לא קיים בפריסה, לא
בעץ הנגישות ולא בסדר ה-tab. אין צורך ב-aria-hidden. */
.omis-buybar {
display: none;
}
@media (max-width: 1023.98px) {
.omis-buybar {
display: block;
position: fixed;
inset-inline: 0;
bottom: 0;
/* 130: מעל הכפתורים הצפים (120/121), מתחת לבאנר העוגיות המתוכנן (150)
ומתחת למגירות/מיני־עגלה (200-230) — כך שמגירה פתוחה מכסה אותו */
z-index: 130;
background: var(--omis-white);
border-top: 1px solid var(--omis-line);
/* צל פיזי כלפי מעלה: offset אנכי שלילי. אנכי אינו תלוי כיוון
כתיבה, ולכן נשאר box-shadow ולא שום מקבילה לוגית */
box-shadow: 0 -0.8rem 2.4rem rgba(47, 51, 45, 0.14);
padding-inline: var(--omis-gutter);
padding-block: 0.9rem;
/* פס הבית של האייפון. header.php:18 חסר viewport-fit=cover, ולכן
env() מחזיר היום 0 והפס ממילא יושב מעל האזור הבטוח. ה-calc
כתוב כך שיתמלא מעצמו ביום שהמטה־תג יעודכן. */
padding-bottom: calc(0.9rem + env(safe-area-inset-bottom, 0px));
transform: translateY(115%);
visibility: hidden;
pointer-events: none;
transition: transform 0.28s var(--omis-ease), visibility 0.28s;
}
.omis-buybar.is-on {
transform: none;
visibility: visible;
pointer-events: auto;
}
/* מגירת התפריט, שכבת החיפוש, הלייטבוקס והמיני־עגלה כולן מוסיפות
omis-no-scroll ל-body. משקל (0,2,1) מנצח את .is-on (0,2,0) —
הפס יורד בזמן שהן פתוחות */
body.omis-no-scroll .omis-buybar {
transform: translateY(115%);
visibility: hidden;
pointer-events: none;
}
.omis-buybar__inner {
max-width: var(--omis-canvas);
margin-inline: auto;
display: flex;
align-items: center;
gap: 1.2rem;
}
.omis-buybar__info {
flex: 1 1 auto;
min-width: 0;
display: grid;
gap: 0.1rem;
}
/* min-width:0 על ההורה + הצמד הזה = חיתוך בשלוש נקודות. ב-RTL
הדפדפן שם את ה-ellipsis בקצה הנכון לבד — אין כאן כיווניות ידנית.
ה-max() כי 1.25rem נטו יורד ל-10.2px ב-320px. */
.omis-buybar__name {
font-size: max(12px, 1.25rem);
font-weight: var(--omis-medium);
color: var(--omis-ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.omis-buybar__price {
font-size: max(13px, 1.4rem);
font-weight: var(--omis-semibold);
color: var(--omis-ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.omis-buybar__price .amount {
white-space: nowrap;
}
/* מחיר לפני מבצע נשאר גלוי — הסתרתו הייתה מייפה את המחיר */
.omis-buybar__price del {
font-weight: var(--omis-regular);
opacity: 0.5;
margin-inline-end: 0.5rem;
}
.omis-buybar__price ins {
text-decoration: none;
}
/* 44px אמיתיים (WCAG 2.5.5). ב-393px 4.6rem = 46px, אבל ב-320px הוא
מתכווץ ל-37px — ולכן max() ולא rem נקי. אותו היגיון על ה-font-size. */
.omis-buybar__cta {
flex: 0 0 auto;
min-height: max(44px, 4.6rem);
min-width: max(126px, 13.5rem);
padding-inline: 1.6rem;
border: 0;
border-radius: 999px;
background: var(--omis-ink);
color: var(--omis-cream);
font-family: inherit;
font-size: max(14px, 1.4rem);
font-weight: var(--omis-medium);
line-height: 1.15;
cursor: pointer;
transition: background-color 0.22s var(--omis-ease), opacity 0.22s var(--omis-ease);
}
.omis-buybar__cta:hover {
background: var(--omis-olive);
}
.omis-buybar__cta:focus-visible {
outline: 2px solid var(--omis-sage);
outline-offset: 2px;
}
/* "בחירת מידה" איננו מצב מושבת — הוא חייב להישאר לחיץ כדי לגלול
אל בורר המידות. לכן מראה אחר לגמרי, לא כפתור אפור.
sage #a7a578 מול ink #2f332d = 5.08:1, עובר 4.5:1. */
.omis-buybar__cta.is-choose {
background: var(--omis-sage);
color: var(--omis-ink);
}
.omis-buybar__cta.is-choose:hover {
background: var(--omis-sage-dark);
color: var(--omis-cream);
}
/* צירוף וריאציה לא זמין: aria-disabled ולא disabled, כדי שהכפתור
יישאר במוקד ויוכל להסביר את עצמו ב-toast. לכן גם בלי
pointer-events:none — אחרת ההסבר לעולם לא יופיע. */
.omis-buybar__cta[aria-disabled="true"] {
background: var(--omis-ink-15);
color: var(--omis-ink);
cursor: default;
}
.omis-buybar__cta[aria-disabled="true"]:hover {
background: var(--omis-ink-15);
color: var(--omis-ink);
}
/* "טוען" הוא מצב חולף ואמיתי — כאן כן מנטרלים לגמרי */
.omis-buybar__cta.is-loading,
.omis-buybar__cta:disabled {
opacity: 0.55;
pointer-events: none;
}
/* ---- תיאום עם שאר הרכיבים הצפים, במקום כיסוי ----
--omis-buybar-h נכתב מ-JS לפי הגובה בפועל (כולל safe-area). הערך
שאחרי הפסיק הוא נפילה חיננית לפריים שלפני שה-JS מדד.
כל הכללים במשקל (0,2,0) מול (0,1,0) של main.css — בלי !important. */
body.omis-buybar-on {
padding-bottom: var(--omis-buybar-h, 7rem);
}
body.omis-buybar-on .omis-floats,
body.omis-buybar-on .omis-a11y-toggle {
bottom: calc(1.2rem + var(--omis-buybar-h, 7rem));
}
body.omis-buybar-on .omis-a11y-panel {
bottom: calc(6.4rem + var(--omis-buybar-h, 7rem));
}
body.omis-buybar-on .omis-toast {
bottom: calc(7.4rem + var(--omis-buybar-h, 7rem));
}
/* ל-.omis-floats אין transition היום, אז הוספה כאן בטוחה. */
.omis-floats {
transition: bottom 0.28s var(--omis-ease);
}
/* ל-.omis-a11y-toggle כן יש (main.css:1212), והוא shorthand שכולל רק
transform. כתיבתו מחדש בלי לשחזר את transform הייתה מוחקת בשקט את
אנימציית ה-hover (translateY(-3px) scale(1.05), main.css:1215). */
.omis-a11y-toggle {
transition: transform 0.25s var(--omis-ease), bottom 0.28s var(--omis-ease);
}
}
/* --------------------------------------------------------------------------
45.4 כיבוי תנועה — שני המקורות, כנדרש
----------------------------------------------------------------------
חייב לשבת אחרי 45.3: המשקל זהה ומדיה־קוורי לא מוסיפה משקל, ולכן רק
סדר המקור מכריע. הפס עדיין עובד — הוא פשוט מופיע ונעלם מיד.
scroll-behavior הוא הסעיף החשוב כאן: main.css:20 קובע
html { scroll-behavior: smooth }, ו-scrollIntoView({behavior:'auto'})
פירושו "לך לפי ה-CSS" — כלומר עדיין חלק. בלי האיפוס הזה כיבוי
התנועה לא באמת עוצר את הגלילה של focusVariations() ושל showSuccess().
html.omis-a11y-motion * (main.css:1301) כבר מכבה transition/animation
עם !important, אבל אין לו מקבילה ב-prefers-reduced-motion (main.css:197
מכסה רק את .omis-announcement__track) — ולכן שני הבלוקים נחוצים.
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
.omis-buybar,
.omis-floats,
.omis-a11y-toggle {
transition: none;
}
/* .omis-thanks נושא animation: omis-fade-up .45s (main.css:2287) */
.omis-thanks,
.omis-restock .omis-thanks {
animation: none;
}
}
html.omis-a11y-motion {
scroll-behavior: auto;
}
html.omis-a11y-motion .omis-buybar,
html.omis-a11y-motion .omis-floats,
html.omis-a11y-motion .omis-a11y-toggle {
transition: none;
}
/* --------------------------------------------------------------------------
45.5 טופס "עדכנו אותי כשחוזר למלאי"
-------------------------------------------------------------------------- */
.omis-restock {
margin-top: 1.6rem;
margin-bottom: 2.2rem;
padding: 1.8rem;
background: var(--omis-cream-soft);
border: 1px solid var(--omis-line);
border-radius: 1.4rem;
min-width: 0;
}
.omis-restock__title {
margin: 0 0 0.6rem;
font-size: 1.8rem;
font-weight: var(--omis-medium);
line-height: 1.3;
color: var(--omis-ink);
}
.omis-restock__lead {
margin: 0 0 1.4rem;
font-size: 1.35rem;
line-height: 1.6;
color: var(--omis-ink-70);
}
.omis-restock__form {
display: grid;
gap: 1rem;
}
.omis-restock__row {
display: grid;
gap: 0.4rem;
min-width: 0;
}
/* תווית גלויה ולא .omis-sr-only: placeholder ב---omis-ink-45 על
--omis-white נותן 2.52:1, והוא היה כאן התווית היחידה שנראית לעין.
--omis-ink-70 על --omis-cream-soft = 4.68:1. */
.omis-restock__label {
font-size: max(12px, 1.25rem);
line-height: 1.35;
color: var(--omis-ink-70);
}
/* 16px מינימום על ה-input הוא דרישה של iOS Safari: מתחת לזה הדפדפן
מזנק זום בפוקוס ומזיז את כל העמוד. 1.5rem לבדו יורד ל-12px ב-320px.
max-width:100% הוא רשת הביטחון של סעיף 43 — היא מכסה שם רק
input[type=text] ו-input[type=email], והשדה השני כאן הוא type=tel. */
.omis-restock__row input {
width: 100%;
max-width: 100%;
min-height: max(44px, 4.6rem);
padding-inline: 1.4rem;
background: var(--omis-white);
border: 1px solid var(--omis-line);
border-radius: 999px;
font-family: inherit;
font-size: max(16px, 1.5rem);
color: var(--omis-ink);
}
/* --omis-ink-70 על --omis-white = 5.06:1 */
.omis-restock__row input::placeholder {
color: var(--omis-ink-70);
opacity: 1;
}
.omis-restock__row input:focus-visible {
outline: 2px solid var(--omis-sage);
outline-offset: 1px;
border-color: var(--omis-sage);
}
.omis-restock__submit {
min-height: max(44px, 4.6rem);
border: 0;
border-radius: 999px;
background: var(--omis-ink);
color: var(--omis-cream);
font-family: inherit;
font-size: max(14px, 1.5rem);
font-weight: var(--omis-medium);
cursor: pointer;
transition: background-color 0.22s var(--omis-ease);
}
.omis-restock__submit:hover {
background: var(--omis-olive);
}
.omis-restock__submit:focus-visible {
outline: 2px solid var(--omis-sage);
outline-offset: 2px;
}
.omis-restock__submit:disabled {
opacity: 0.55;
pointer-events: none;
}
/* ---- האיפוסים ההכרחיים (ראו הערה 2 בראש הסעיף) ----
.omis-form-message ו-.omis-thanks ממוקמים ב-main.css אבסולוטית לפי
כרטיס ה-hero הכהה של "OMIS's friends", כולל left/top בערכי rem קשיחים
וצבע cream. showSuccess() מזריק בדיוק את המבנה הזה גם כאן. */
.omis-restock .omis-form-message {
position: static;
inset: auto;
margin: 0;
font-size: 1.3rem;
line-height: 1.5;
color: var(--omis-ink-70);
text-align: start;
}
/* (0,3,0) — חייב לגבור על .omis-restock .omis-form-message שלמעלה,
ששוקל בדיוק כמו .omis-form-message.is-error (main.css:2350). */
.omis-restock .omis-form-message.is-error {
color: var(--omis-sale);
}
.omis-restock__form.is-hidden {
display: none;
}
.omis-restock .omis-thanks {
position: static;
inset: auto;
width: auto;
margin: 0;
padding: 2rem 1.6rem;
background: var(--omis-white);
border-color: var(--omis-line);
color: var(--omis-ink);
text-align: center;
}
.omis-restock .omis-thanks__mark,
.omis-restock .omis-thanks__mark::after {
border-color: var(--omis-sage);
}
.omis-restock .omis-thanks__title {
font-size: 1.9rem;
}
.omis-restock .omis-thanks__text {
font-size: 1.35rem;
}
/* כפתור עצמאי, לא קישור בתוך משפט — ולכן WCAG 2.5.8 חל עליו.
1.35rem ב-375px נותן שורה של ~19px; ה-min-height מרים ל-24px. */
.omis-restock .omis-thanks__again {
color: var(--omis-ink-70);
min-height: 24px;
padding-block: 4px;
padding-inline: 2px;
}
@media (max-width: 1023.98px) {
.omis-restock {
padding: 1.4rem;
margin-bottom: 1.8rem;
}
.omis-restock__title {
font-size: 1.6rem;
}
.omis-restock__lead {
font-size: max(12px, 1.25rem);
margin-bottom: 1.2rem;
}
/* משקל (0,2,0) מול (0,1,0) של הכלל שבמדיה של main.css:2381 */
.omis-restock .omis-thanks {
padding: 1.6rem 1.2rem;
}
.omis-restock .omis-thanks__title {
font-size: 1.7rem;
}
.omis-restock .omis-thanks__text {
font-size: max(12px, 1.25rem);
}
}
/* ==========================================================================
46. מכשירי מגע — ביטול אפקטי ריחוף שגורמים ל"נגיעה כפולה"
----------------------------------------------------------------------
במסך מגע אין hover אמיתי. כשנגיעה משנה מצב :hover על האלמנט שנגעו בו
(או על אב שלו), הדפדפן מפרש את הנגיעה הראשונה כריחוף ודורש נגיעה שנייה
כדי להפעיל את הקישור. זה בדיוק מה שקרה בכרטיס המוצר: הנגיעה הראשונה
חשפה את תמונת הריחוף ואת כפתור המועדפים, ורק השנייה ניווטה.
הבחירה ב-(hover: none) ולא ב-max-width מכוונת: רוחב מסך אינו מעיד על
סוג הקלט. אייפד לרוחב ולפטופ עם מסך מגע יושבים מעל 1024px ועדיין
סובלים מאותה בעיה, בעוד חלון דפדפן צר בדסקטופ כן צריך ריחוף תקין.
הסלקטורים משוכפלים במדויק מהכללים המקוריים כדי לשמור על אותה
ספציפיות — הניצחון כאן הוא לפי סדר המקורות בלבד, בלי !important.
========================================================================== */
@media (hover: none) {
/* תמונת הריחוף השנייה — אין מה לחשוף בלי עכבר */
.omis-card__mediawrap:hover .omis-card__hover,
.omis-card__media:hover .omis-card__hover {
opacity: 0;
}
/* כפתור המועדפים גלוי תמיד: אין ריחוף שיחשוף אותו, והוא חייב
להיות נגיש גם במגע. בכל רוחב מסך, לא רק מתחת ל-1024px. */
.omis-wish--card,
li.product:hover .omis-wish--card {
opacity: 1;
transform: none;
}
/* חצי הגלריה — אותו סיפור: בלי זה הנגיעה הראשונה רק חושפת אותם */
.omis-gallery__nav,
.omis-gallery__stage:hover .omis-gallery__nav {
opacity: 1;
}
}
/* ==========================================================================
47. במת הגלריה — היחס נגזר מהתמונה, לא קבוע
----------------------------------------------------------------------
aspect-ratio: 4/5 קבוע גרם לכל צילום שאינו בדיוק 0.8 להיכנס לפי הגובה
ולהשאיר פסים בצדדים. במדידה: במה 327px, תמונה 293px, 41px מכל צד —
מה שנראה כאילו התמונה לא ממורכזת ולא מלאה.
--omis-stage-ratio מגיע מ-PHP לפי מידות הקובץ, וה-JS מעדכן אותו בכל
החלפת שקופית. הנפילה ל-4/5 שומרת על ההתנהגות הישנה אם אין מטא-דאטה.
========================================================================== */
/* מובייל בלבד. בדסקטופ העמודה רחבה (680px) ותקרת הגובה נמוכה יחסית,
כך שיחס תמונה צר היה מכווץ את הבמה ל-401px בתוך עמודה של 680px
ומשאיר שטח מת. שם 4/5 עם contain נשאר הפתרון הנכון. */
@media (max-width: 1023.98px) {
.omis-gallery__stage {
aspect-ratio: var(--omis-stage-ratio, 4 / 5);
/* הרוחב הוא האילוץ: תקרת גובה נדיבה כדי שהיחס האמיתי ינצח
ולא ייחתך בחזרה לפסים בצדדים. */
max-block-size: min(72rem, calc(100svh - var(--omis-header-h) - 12rem));
}
}
/* ==========================================================================
48. טקסט שהלקוחה כותבת בגוטנברג — שחזור הריווח
==========================================================================
הבעיה: main.css:92 מאפס margin על p, h1-h6, ul, ol ו-fieldset, ומיד אחריו
ul,ol מקבלים list-style:none. זה איפוס מכוון לרכיבי העיצוב, אבל הוא חל גם
על התוכן שהלקוחה כותבת בעורך המוצר. התוצאה שנמדדה בעמוד מוצר:
gap P->P = 0px (שתי פסקאות נדבקות זו לזו)
gap P->UL = 0px
ul list-style: none (הנקודות נעלמות)
כלומר כל ריווח שהיא עושה בגוטנברג פשוט לא מגיע לאתר.
עמודי התוכן פתרו את זה מזמן דרך .omis-page__content (main.css:1358+).
הסקשן הזה עושה את אותו הדבר לשני האזורים שהיא עורכת בעמוד המוצר:
.woocommerce-product-details__short-description — התיאור הקצר
.omis-tab-body — התיאור הארוך בלשונית
.woocommerce-Tabs-panel--omis_shipping .omis-tabs__inner > p
— לשונית המשלוחים
מה שבמכוון *לא* נכלל:
- .omis-specs — טבלת המפרט, נוצרת בקוד ולא ע"י הלקוחה.
- לשונית חוות הדעת — ה-ul שם הוא רשימת הביקורות, ונקודות תבלטנה בה.
-------------------------------------------------------------------------- */
.woocommerce div.product .woocommerce-product-details__short-description p,
.woocommerce div.product .omis-tab-body p,
.woocommerce div.product .woocommerce-Tabs-panel--omis_shipping .omis-tabs__inner > p {
margin-block: 0 1.2em;
}
.woocommerce div.product .woocommerce-product-details__short-description > :last-child,
.woocommerce div.product .omis-tab-body > :last-child,
.woocommerce div.product .woocommerce-Tabs-panel--omis_shipping .omis-tabs__inner > p:last-child {
margin-block-end: 0;
}
/* פסקה ריקה שהלקוחה משאירה בגוטנברג כדי "לפתוח רווח" מגיעה כ-
.
בלי גובה מפורש היא מתמוטטת ל-0 והרווח שהיא התכוונה אליו נעלם. */
.woocommerce div.product .woocommerce-product-details__short-description p:empty,
.woocommerce div.product .omis-tab-body p:empty {
min-block-size: 1.2em;
}
/* רשימות — החזרת הנקודות והמספרים שהאיפוס הכללי הוריד. */
.woocommerce div.product .woocommerce-product-details__short-description ul,
.woocommerce div.product .omis-tab-body ul {
list-style: disc;
padding-inline-start: 2.2rem;
margin-block: 0 1.2em;
}
.woocommerce div.product .woocommerce-product-details__short-description ol,
.woocommerce div.product .omis-tab-body ol {
list-style: decimal;
padding-inline-start: 2.2rem;
margin-block: 0 1.2em;
}
.woocommerce div.product .woocommerce-product-details__short-description li,
.woocommerce div.product .omis-tab-body li {
margin-block-end: 0.4em;
padding-inline-start: 0;
}
/* ::before מנוטרל: .omis-page__content משתמש בו לנקודה מצוירת, ואם כלל כזה
יחלחל לכאן נקבל נקודה כפולה לצד ה-list-style האמיתי. */
.woocommerce div.product .woocommerce-product-details__short-description li::before,
.woocommerce div.product .omis-tab-body li::before {
content: none;
}
/* כותרות בתוך התיאור. */
.woocommerce div.product .woocommerce-product-details__short-description :is(h2, h3, h4, h5, h6),
.woocommerce div.product .omis-tab-body :is(h2, h3, h4, h5, h6) {
margin-block: 1.6em 0.5em;
font-weight: var(--omis-medium);
line-height: 1.35;
color: var(--omis-ink);
}
.woocommerce div.product .woocommerce-product-details__short-description :is(h2, h3, h4, h5, h6):first-child,
.woocommerce div.product .omis-tab-body :is(h2, h3, h4, h5, h6):first-child {
margin-block-start: 0;
}
.woocommerce div.product .woocommerce-product-details__short-description h2,
.woocommerce div.product .omis-tab-body h2 { font-size: 1.15em; }
.woocommerce div.product .woocommerce-product-details__short-description :is(h3, h4, h5, h6),
.woocommerce div.product .omis-tab-body :is(h3, h4, h5, h6) { font-size: 1.05em; }
/* בלוקים נוספים שגוטנברג מייצר. */
.woocommerce div.product .omis-tab-body blockquote {
margin-block: 1.4em;
padding: 1.4rem 1.8rem;
background: var(--omis-cream-soft);
border-inline-start: 3px solid var(--omis-sage);
border-radius: 0 1rem 1rem 0;
}
.woocommerce div.product .omis-tab-body blockquote > :last-child {
margin-block-end: 0;
}
.woocommerce div.product .woocommerce-product-details__short-description :is(figure, .wp-block-image),
.woocommerce div.product .omis-tab-body :is(figure, .wp-block-image) {
margin-block: 1.4em;
}
.woocommerce div.product .omis-tab-body :is(img, iframe, video) {
max-inline-size: 100%;
block-size: auto;
border-radius: 1rem;
}
/* מפריד שהלקוחה מוסיפה מגוטנברג. */
.woocommerce div.product .omis-tab-body hr,
.woocommerce div.product .omis-tab-body .wp-block-separator {
margin-block: 1.8em;
border: 0;
border-block-start: 1px solid var(--omis-line);
}
/* בלוק "מרווח" של גוטנברג מגיע עם גובה inline — לכבד אותו ולא לאפס. */
.woocommerce div.product .woocommerce-product-details__short-description .wp-block-spacer,
.woocommerce div.product .omis-tab-body .wp-block-spacer {
display: block;
flex: none;
}
/* --------------------------------------------------------------------------
48.1 תיאור קצר "אחד לאחד" עם העורך
--------------------------------------------------------------------------
pre-line: שומר על תווי שורה ועל שורות ריקות, ומכווץ רק רצפי רווחים אופקיים.
ביחד עם omis_short_description_format() (inc/woocommerce.php) זה נותן מיפוי
מדויק בין מה שהלקוחה מקלידה בעורך המוצר לבין מה שמוצג באתר.
הכללים של סעיף 48 ל-p אינם חלים כאן, כי בטקסט פשוט אין בכלל תגיות p —
הרווח מגיע מהשורות עצמן. אם היא כן תדביק בלוקים, הפילטר מחזיר wpautop
והכללים של 48 נכנסים לפעולה כרגיל.
-------------------------------------------------------------------------- */
.woocommerce div.product .woocommerce-product-details__short-description .omis-shortdesc--verbatim,
.woocommerce div.product .omis-tab-body .omis-shortdesc--verbatim {
white-space: pre-line;
}
/* pre-line הופך גם את תו השורה שאחרי התגית הפותחת לשורה נראית. */
.woocommerce div.product .woocommerce-product-details__short-description .omis-shortdesc--verbatim::before,
.woocommerce div.product .woocommerce-product-details__short-description .omis-shortdesc--verbatim::after,
.woocommerce div.product .omis-tab-body .omis-shortdesc--verbatim::before,
.woocommerce div.product .omis-tab-body .omis-shortdesc--verbatim::after {
content: '';
display: block;
}
/* ==========================================================================
"הצג עוד" בארכיון (במקום עמודים)
========================================================================== */
.omis-loadmore {
text-align: center;
margin-top: 4rem;
}
.omis-loadmore__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
min-width: 22rem;
padding: 1.4rem 3rem;
border: 0.15rem solid var(--omis-ink);
border-radius: var(--omis-radius-field);
background: transparent;
color: var(--omis-ink);
font-family: inherit;
font-size: 1.5rem;
font-weight: var(--omis-medium);
cursor: pointer;
transition: background 0.2s var(--omis-ease), color 0.2s var(--omis-ease);
}
.omis-loadmore__btn:hover {
background: var(--omis-ink);
color: var(--omis-cream);
}
.omis-loadmore__btn.is-loading {
opacity: 0.6;
pointer-events: none;
}
/* --------------------------------------------------------------------------
51. אייקוני יתרונות — תמונה מותאמת מההגדרות + מצב "ירוק קבוע"
-------------------------------------------------------------------------- */
/* תמונה שהועלתה בהגדרות OMIS ממלאת את העיגול במקום האיור הקווי */
.omis-perks__icon img,
.omis-buybox__icon img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
display: block;
}
/* "צבע ירוק קבוע" (הגדרות OMIS ← עמוד המוצר): העיגולים צבועים תמיד,
באותם צבעים בדיוק כמו מצב הריחוף — ולכן הריחוף פשוט לא משנה כלום. */
.omis-perks--green .omis-perks__icon,
.omis-perks--green li:hover .omis-perks__icon {
background: var(--omis-sage);
color: var(--omis-cream);
}
.omis-buybox__perks--green .omis-buybox__icon {
background: var(--omis-sage);
color: var(--omis-cream);
}
/* --------------------------------------------------------------------------
52. לשוניות המידע — שורת "למידע המלא לחצי כאן" + תוכן טבלת המידות
-------------------------------------------------------------------------- */
.omis-tab-more {
margin: 1.6rem 0 0;
font-size: 1.4rem;
}
.omis-tab-more a {
font-weight: var(--omis-medium);
color: var(--omis-ink);
text-decoration: underline;
text-underline-offset: 0.35rem;
}
.omis-tab-more a:hover {
color: var(--omis-sage-dark, var(--omis-sage));
}
.omis-tab-sizes .omis-sizetable {
margin: 0.6rem 0 1.8rem;
}
.omis-sizes__heading {
margin: 1.8rem 0 0.7rem;
font-size: 1.6rem;
font-weight: var(--omis-medium);
}
.omis-tab-sizes .omis-sizes__heading:first-child {
margin-top: 0.2rem;
}
/* --------------------------------------------------------------------------
53. רצועת אמצעי תשלום — עמוד מוצר + עמוד תשלום
(הרצועה בפוטר מעוצבת ב-main.css; כאן רק ההופעות בתוך זרימת המוצר/צ׳קאאוט)
-------------------------------------------------------------------------- */
.omis-product-payments {
margin: 1.6rem 0 0;
}
.omis-checkout-payments {
/* אוויר בין רצועת אמצעי התשלום לכפתור "סיום הזמנה" שמתחתיה (בקשת הלקוחה). */
margin: 1.4rem 0 2.4rem;
}
/* יישור המערך (SVG או תמונה) לפי ההקשר */
.omis-payments--product,
.omis-payments--checkout {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.8rem;
margin: 0;
padding: 0;
list-style: none;
direction: ltr;
justify-content: flex-start;
}
.omis-payments--product li::before,
.omis-payments--checkout li::before {
content: none;
}
.omis-payments--product svg,
.omis-payments--checkout svg {
width: auto;
height: 2.5rem;
display: block;
border-radius: 0.5rem;
box-shadow: 0 1px 3px rgba(47, 51, 45, 0.08);
}
/* תמונה שהעלתה הלקוחה — נשלטת רוחב, ממורכזת בפוטר, מיושרת-התחלה במוצר/צ׳קאאוט */
.omis-payments--img {
line-height: 0;
}
.omis-payments--img img {
height: auto;
max-width: 100%;
display: block;
}
.omis-payments--footer.omis-payments--img {
display: flex;
justify-content: center;
margin-top: 2.6rem;
}
.omis-payments--footer.omis-payments--img img {
max-width: 32rem;
}
.omis-payments--product.omis-payments--img img,
.omis-payments--checkout.omis-payments--img img {
max-width: 26rem;
}
.omis-checkout-payments .omis-payments--checkout {
justify-content: center;
}
.omis-checkout-payments .omis-payments--img {
justify-content: center;
}
/* --------------------------------------------------------------------------
54. תגית מותאמת אישית (Custom badge) — צבעים מגיעים inline מעריכת המוצר
-------------------------------------------------------------------------- */
/* בעמוד המוצר: מחסנית תגיות בפינה, כמו .omis-card__flags בכרטיס */
.omis-gallery__flags {
position: absolute;
top: 1.2rem;
inset-inline-start: 1.2rem;
z-index: 3;
display: grid;
gap: 0.5rem;
justify-items: start;
}
.omis-gallery__flags .omis-badge {
position: static;
}
/* --------------------------------------------------------------------------
55. "למידה אחרת שלחי הודעה" — כפתור + טופס בפופאפ
-------------------------------------------------------------------------- */
.omis-sr-trigger {
display: inline-flex;
align-items: center;
gap: 0.8rem;
margin-top: 1.4rem;
padding: 0;
background: none;
border: 0;
cursor: pointer;
font-family: var(--omis-font);
font-size: 1.4rem;
font-weight: var(--omis-medium);
color: var(--omis-ink);
text-decoration: underline;
text-underline-offset: 0.4rem;
text-decoration-thickness: 1px;
transition: color 0.2s var(--omis-ease);
}
.omis-sr-trigger:hover {
color: var(--omis-sage-dark, var(--omis-sage));
}
.omis-sr-trigger svg {
width: 1.7rem;
height: 1.7rem;
flex: none;
}
/* טופס הפופאפ — יושב בתוך .omis-modal__panel הקיים */
.omis-sr-form {
display: grid;
gap: 1rem;
margin-top: 1.6rem;
text-align: start;
}
.omis-sr-form input[type="text"],
.omis-sr-form input[type="tel"],
.omis-sr-form input[type="email"],
.omis-sr-form textarea {
width: 100%;
background: var(--omis-cream);
border: 1px solid rgba(167, 165, 120, 0.85);
border-radius: 0.8rem;
color: var(--omis-ink);
font-family: var(--omis-font);
font-size: 1.5rem;
padding: 1.2rem 1.6rem;
box-sizing: border-box;
transition: border-color 0.2s var(--omis-ease), box-shadow 0.2s var(--omis-ease);
}
.omis-sr-form textarea {
min-height: 8rem;
resize: vertical;
line-height: 1.5;
}
.omis-sr-form input::placeholder,
.omis-sr-form textarea::placeholder {
color: var(--omis-ink-70, #6f6a5d);
opacity: 1;
}
.omis-sr-form input:focus,
.omis-sr-form textarea:focus {
outline: none;
border-color: var(--omis-olive, #a7a578);
box-shadow: 0 0 0 0.35rem rgba(167, 165, 120, 0.18);
}
.omis-sr-submit {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: 5rem;
border: 1px solid var(--omis-ink);
border-radius: 999px;
background: var(--omis-ink);
color: var(--omis-cream);
font-family: var(--omis-font);
font-size: 1.55rem;
font-weight: var(--omis-medium);
line-height: 1;
cursor: pointer;
transition: background-color 0.25s var(--omis-ease), border-color 0.25s var(--omis-ease);
}
.omis-sr-submit:hover {
background: var(--omis-olive);
border-color: var(--omis-olive);
}
.omis-sr-submit:disabled {
opacity: 0.6;
cursor: default;
}
.omis-sr-msg {
margin: 0.4rem 0 0;
font-size: 1.3rem;
min-height: 1.2em;
}
.omis-sr-msg.is-error {
color: #a94442;
}
.omis-sr-ok {
margin: 0;
padding: 1.4rem 1.6rem;
background: #eef6ea;
border: 1px solid #cfe3c4;
border-radius: 0.8rem;
color: #3c763d;
font-size: 1.45rem;
line-height: 1.55;
text-align: center;
}
/* ==========================================================================
56. גלריית מוצר — קופסה אחידה + מילוי מלא (בקשת הלקוחה 2026-09-06)
----------------------------------------------------------------------
מבטל את מצב "תמונה מלאה" (section 45.6/47: object-fit:contain + יחס דינמי
לכל שקופית). עכשיו כל התמונות באותה קופסה בדיוק (4/5) וממלאות אותה לרוחב
(object-fit:cover) — מראה אחיד, מחשב ומובייל. גם אם המקור ביחס שונה.
========================================================================== */
.omis-gallery__stage,
.omis-gallery__stage[style] {
aspect-ratio: 4 / 5 !important;
}
@media (max-width: 1023.98px) {
.omis-gallery__stage,
.omis-gallery__stage[style] {
aspect-ratio: 4 / 5 !important;
}
}
/* השקופית ממלאת את הבמה, בלי flex-center של ה-shrink-wrap */
.omis-gallery__slide {
display: block;
}
/* התמונה ממלאת את הקופסה וחותכת עודף — אחיד לכל תמונה. הפינות המעוגלות
מטופלות ע"י overflow:hidden של הבמה, ולכן אין border-radius על התמונה. */
.woocommerce div.product .omis-gallery .omis-gallery__slide img,
.omis-gallery__slide img {
inline-size: 100% !important;
block-size: 100% !important;
width: 100% !important;
height: 100% !important;
max-inline-size: none !important;
max-block-size: none !important;
object-fit: cover !important;
object-position: center !important;
border-radius: 0 !important;
}