/* Callia Couture — WooCommerce components (shop, product, cart, checkout, account). Loaded only on store pages. */ .shop-wrap, .single-wrap, .shop-flow { padding-bottom: clamp(80px, 12vh, 140px); } .single-wrap { padding-top: calc(var(--header-h) + 40px); } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } /* --- Buttons, fields, notices -------------------------------------------------- */ .woocommerce :is(.button, button.button, a.button, input.button, #place-order, .checkout-button), :is(.button, .wc-forward, .wc-backward) { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 28px; border: 0; border-radius: 999px; background: var(--plum); color: var(--ivory); font: 500 14px/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background .3s, box-shadow .3s, opacity .3s; } :lang(ar) :is(.button, .wc-forward, .wc-backward) { font-size: 16px; text-transform: none; } :is(.button, .wc-forward):hover { background: var(--plum-2); box-shadow: 0 14px 40px -16px rgba(59, 17, 84, .6); } .button:is(:disabled, .disabled) { opacity: .45; cursor: not-allowed; box-shadow: none; } .button.loading { opacity: .7; } .button.added::after { content: ' ✓'; } .added_to_cart { margin-inline-start: 12px; color: var(--plum); text-decoration: underline; } .woocommerce :is(input.input-text, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], textarea, select), .shop-flow :is(input.input-text, textarea, select) { width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); font: 400 16px/1.4 var(--f-body); transition: border-color .25s, box-shadow .25s; } .woocommerce :is(input, textarea, select):focus { outline: none; border-color: var(--plum); box-shadow: 0 0 0 3px rgba(59, 17, 84, .12); } .woocommerce select { appearance: none; padding-inline-end: 42px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b1154' stroke-width='1.6'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px; } [dir="rtl"] .woocommerce select { background-position: left 14px center; } /* Searchable dropdowns (WooCommerce's select2 — e.g. checkout "Area") look like the plain selects above. */ .woocommerce .select2-container { width: 100% !important; } .woocommerce .select2-container .select2-selection--single { height: auto; min-height: 52px; display: flex; align-items: center; border: 1px solid var(--line); border-radius: 14px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b1154' stroke-width='1.6'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px; transition: border-color .25s, box-shadow .25s; } [dir="rtl"] .woocommerce .select2-container .select2-selection--single { background-position: left 14px center; } .woocommerce .select2-container .select2-selection--single .select2-selection__rendered { padding-block: 14px; padding-inline: 16px 42px; line-height: 1.4; color: var(--ink); font: 400 16px/1.4 var(--f-body); } .woocommerce .select2-container .select2-selection--single .select2-selection__placeholder { color: #8a7f8f; } .woocommerce .select2-container .select2-selection--single .select2-selection__arrow { display: none; } .woocommerce .select2-container:is(.select2-container--focus, .select2-container--open) .select2-selection--single { border-color: var(--plum); box-shadow: 0 0 0 3px rgba(59, 17, 84, .12); outline: none; } /* The open list is attached to , outside .woocommerce. */ .select2-container .select2-dropdown { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 14px 34px rgba(59, 17, 84, .12); font: 400 15px/1.4 var(--f-body); color: var(--ink); } .select2-container--open .select2-dropdown--below { margin-top: 6px; } .select2-container--open .select2-dropdown--above { margin-top: -6px; } .select2-container .select2-search--dropdown { padding: 10px; } .select2-container .select2-search--dropdown .select2-search__field { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; outline: none; } .select2-container .select2-search--dropdown .select2-search__field:focus { border-color: var(--plum); } .select2-container .select2-results__option { padding: 10px 16px; } .select2-container .select2-results__option--highlighted[aria-selected], .select2-container .select2-results__option--highlighted[data-selected] { background: rgba(59, 17, 84, .07); color: var(--plum); } .select2-container .select2-results__option[aria-selected="true"], .select2-container .select2-results__option[data-selected="true"] { background: var(--plum); color: #fff; } .woocommerce label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; color: var(--plum); } .woocommerce .required { color: #b3261e; text-decoration: none; border: 0; } .woocommerce .form-row { margin: 0 0 18px; } .woocommerce :is(.form-row-first, .form-row-last) { width: calc(50% - 9px); display: inline-block; vertical-align: top; } .woocommerce .form-row-first { margin-inline-end: 14px; } .woocommerce .woocommerce-input-wrapper { display: block; } .woocommerce .quantity .qty { width: 78px; text-align: center; padding-inline: 8px; } .woocommerce-notices-wrapper:empty { display: none; } :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) { list-style: none; margin: 0 0 28px; padding: 18px 22px; border-radius: 16px; background: var(--blush-2); color: var(--ink); border-inline-start: 3px solid var(--plum); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; } .woocommerce-error { background: #fbeceb; border-color: #b3261e; display: block; } .woocommerce-error li + li { margin-top: 6px; } :is(.woocommerce-message, .woocommerce-info) .button { order: 2; padding: 10px 18px; font-size: 12px; } /* --- Shop grid --------------------------------------------------------------------- */ .shop-wrap .woocommerce-result-count { float: inline-start; margin: 10px 0 36px; color: rgba(38, 18, 47, .6); font-size: 14px; } .shop-wrap .woocommerce-ordering { float: inline-end; margin: 0 0 36px; } .shop-wrap .woocommerce-ordering select { width: auto; min-width: 220px; border-radius: 999px; padding-block: 11px; font-size: 14px; } ul.products { clear: both; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px clamp(18px, 2.4vw, 36px); list-style: none; margin: 0; padding: 0; } ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } ul.products::before, ul.products::after { display: none; } /* --- Shop layout: filters + grid --------------------------------------------------- */ .shop-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 44px; align-items: start; } .shop-layout .shop-wrap { padding-bottom: 96px; } .filters { position: sticky; top: calc(var(--header-h) + 20px); } .filters__toggle { display: none; } .filters__group { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line); } .filters__group:last-child { border-bottom: 0; } .filters__group h2 { margin-bottom: 10px; font: 500 12px var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--plum-2); } :lang(ar) .filters__group h2 { font-size: 14px; } .filters__sub { margin: 10px 0 6px; font-size: 13px; color: rgba(38, 18, 47, .55); } .filters__list { list-style: none; margin: 0; padding: 0; display: grid; } .filters__list a { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; color: var(--ink); } .filters__list a:hover, .filters__list a[aria-current] { color: var(--plum); } .filters__list a[aria-current] { font-weight: 500; } .filters__list small, .opt small { color: rgba(38, 18, 47, .45); font-size: 12px; } .filters__opts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .opt { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; color: var(--ink); transition: box-shadow .2s, background .2s; } .opt:hover { box-shadow: inset 0 0 0 1px var(--plum); } .opt[aria-checked="true"] { background: var(--plum); color: var(--ivory); box-shadow: none; } .opt[aria-checked="true"] small { color: rgba(250, 246, 241, .7); } .opt__dot { width: 13px; height: 13px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); } .active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; } .chip-x { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--blush-2); color: var(--plum); font-size: 13px; } .chip-x::after { content: '×'; font-size: 16px; line-height: 1; } .chip-x:hover { background: var(--blush); } .active-filters__clear { margin-inline-start: 4px; font-size: 13px; color: var(--plum); text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 899px) { .shop-layout { grid-template-columns: 1fr; gap: 16px; } .filters { position: static; border-radius: var(--radius); background: #fff; box-shadow: inset 0 0 0 1px var(--line); } .filters__toggle { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; font-weight: 500; color: var(--plum); cursor: pointer; list-style: none; } .filters__toggle::-webkit-details-marker { display: none; } .filters__toggle small { font-weight: 400; color: var(--plum-2); } .filters__body { padding: 4px 18px 6px; } } @media (max-width: 899px) { ul.products, ul.products.columns-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 14px; } .card__title { font-size: 17px; } } .woocommerce-pagination ul { display: flex; justify-content: center; gap: 8px; list-style: none; padding: 0; margin: 64px 0 0; } .woocommerce-pagination :is(a, span) { display: grid; place-items: center; min-width: 44px; height: 44px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line); color: var(--plum); } .woocommerce-pagination .current { background: var(--plum); color: var(--ivory); } .woocommerce-no-products-found { padding: 60px 0; } /* --- Single product ----------------------------------------------------------------- */ .single-wrap div.product { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px clamp(32px, 6vw, 100px); align-items: start; } .single-wrap div.product > :is(.woocommerce-tabs, .related, .upsells, .up-sells) { grid-column: 1 / -1; } .single-wrap div.product > .onsale { position: absolute; } .woocommerce-product-gallery { position: relative; margin: 0; } .woocommerce-product-gallery__wrapper { margin: 0; } .woocommerce-product-gallery__image { border-radius: 26px; overflow: hidden; background: var(--blush-2); } .woocommerce-product-gallery__image img { width: 100%; } .woocommerce-product-gallery__image--placeholder img { aspect-ratio: 4 / 5; object-fit: cover; } .woocommerce-product-gallery__trigger { position: absolute; inset-block-start: 18px; inset-inline-end: 18px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; background: var(--ivory); display: grid; place-items: center; font-size: 0; } .woocommerce-product-gallery__trigger::before { content: ''; width: 16px; height: 16px; border: 1.5px solid var(--plum); border-radius: 50%; } .flex-control-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; list-style: none; padding: 0; margin: 12px 0 0; } .flex-control-thumbs img { border-radius: 12px; opacity: .55; cursor: pointer; transition: opacity .3s; } .flex-control-thumbs img:is(.flex-active, :hover) { opacity: 1; } .summary { position: sticky; top: calc(var(--header-h) + 30px); } .summary .product_title { font-size: clamp(28px, 2.6vw, 42px); line-height: 1.15; margin-bottom: 18px; } :lang(ar) .summary .product_title { font-size: clamp(26px, 2.4vw, 38px); line-height: 1.5; } .summary .price { font-size: 22px; font-weight: 500; color: var(--ink); margin-bottom: 24px; } .summary .woocommerce-product-details__short-description { color: rgba(38, 18, 47, .74); font-size: 17px; } .summary form.cart { margin: 28px 0; padding-block: 28px; border-block: 1px solid var(--line); } .summary table.variations { width: 100%; border-collapse: collapse; margin-bottom: 18px; } .summary table.variations :is(th, td) { display: block; padding: 0; text-align: start; } .summary table.variations th label { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 12px; } :lang(ar) .summary table.variations th label { font-size: 15px; } .summary .reset_variations { display: inline-block; margin-top: 10px; font-size: 13px; color: var(--plum); text-decoration: underline; } .summary .single_variation_wrap .woocommerce-variation-price { margin-bottom: 16px; font-size: 18px; } .summary .woocommerce-variation-availability .stock { font-size: 14px; } .summary .woocommerce-variation-add-to-cart, .summary form.cart:not(.variations_form) { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; } .summary .single_add_to_cart_button { flex: 1; min-height: 56px; } .summary .product_meta { font-size: 13px; color: rgba(38, 18, 47, .6); display: grid; gap: 4px; } .summary .product_meta a { color: var(--plum); } .stock.out-of-stock { color: #b3261e; } /* Size swatches (built by main.js over the native select, which stays in sync). */ .swatches { display: flex; flex-wrap: wrap; gap: 10px; } .swatch { min-width: 96px; padding: 12px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); background: #fff; color: var(--plum); font-size: 14px; font-weight: 500; transition: box-shadow .25s, background .25s, color .25s; } .swatch:hover { box-shadow: inset 0 0 0 1px var(--plum); } .swatch[aria-pressed="true"] { background: var(--plum); color: var(--ivory); box-shadow: none; } .swatch:disabled { opacity: .35; text-decoration: line-through; cursor: not-allowed; } .has-swatches select { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; } .woocommerce-tabs { margin-top: 60px; } .woocommerce-tabs ul.tabs { display: flex; gap: 32px; list-style: none; margin: 0 0 30px; padding: 0; border-bottom: 1px solid var(--line); } .woocommerce-tabs ul.tabs li a { display: block; padding: 0 0 14px; font-weight: 500; color: rgba(38, 18, 47, .55); border-bottom: 2px solid transparent; margin-bottom: -1px; } .woocommerce-tabs ul.tabs li.active a { color: var(--plum); border-color: var(--plum); } .woocommerce-tabs .panel { max-width: 780px; } .woocommerce-tabs .panel > h2:first-child { display: none; } .woocommerce-product-attributes { width: 100%; border-collapse: collapse; } .woocommerce-product-attributes :is(th, td) { padding: 14px 0; border-bottom: 1px solid var(--line); text-align: start; } .woocommerce-product-attributes p { margin: 0; } .related, .upsells { margin-top: 100px; } .related > h2, .upsells > h2 { font-size: clamp(32px, 4vw, 56px); margin-bottom: 44px; } @media (max-width: 899px) { .single-wrap div.product { grid-template-columns: 1fr; } .summary { position: static; } } /* --- Tables (cart, order review, order details) ------------------------------------- */ .shop_table { width: 100%; border-collapse: collapse; } .shop_table :is(th, td) { padding: 18px 12px; text-align: start; border-bottom: 1px solid var(--line); vertical-align: middle; } .shop_table thead th { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(38, 18, 47, .55); font-weight: 500; } :lang(ar) .shop_table thead th { font-size: 14px; } .shop_table .product-thumbnail img { width: 84px; border-radius: 14px; } .shop_table .product-name a { font-family: var(--f-display); font-size: 19px; color: var(--plum); } .shop_table .product-remove a { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--plum); font-size: 20px; box-shadow: inset 0 0 0 1px var(--line); } .shop_table .product-remove a:hover { background: var(--plum); color: var(--ivory); } .shop_table .variation { display: flex; gap: 6px; margin: 6px 0 0; font-size: 14px; color: rgba(38, 18, 47, .65); } .shop_table .variation :is(dt, dd, p) { margin: 0; } .shop_table td.actions { padding-top: 26px; } .shop_table .coupon { display: inline-flex; gap: 10px; align-items: center; } .shop_table .coupon .input-text { width: 200px; } .shop_table .coupon label { display: none; } .shop_table td.actions > .button { float: inline-end; background: transparent; color: var(--plum); box-shadow: inset 0 0 0 1px var(--plum); } .wc-item-meta { list-style: none; padding: 0; margin: 6px 0 0; font-size: 14px; color: rgba(38, 18, 47, .65); } .wc-item-meta :is(strong, p) { display: inline; margin: 0; font-weight: 400; } @media (max-width: 767px) { .shop_table_responsive thead { display: none; } .shop_table_responsive tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); } .shop_table_responsive td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 6px 0; } .shop_table_responsive td::before { content: attr(data-title); font-size: 13px; color: rgba(38, 18, 47, .55); } .shop_table_responsive td:is(.product-remove, .product-thumbnail, .actions)::before { display: none; } .shop_table .coupon { display: flex; width: 100%; margin-bottom: 12px; } .shop_table td.actions > .button { float: none; width: 100%; } } /* --- Cart ------------------------------------------------------------------------------ */ .woocommerce-cart-form { margin-bottom: 50px; } .cart-collaterals { display: flex; justify-content: flex-end; } .cart_totals { width: min(100%, 460px); padding: 34px; border-radius: 26px; background: var(--blush-2); } .cart_totals h2 { font-size: 30px; margin-bottom: 14px; } .cart_totals .shop_table :is(th, td) { padding-inline: 0; } .cart_totals .order-total :is(th, td) { font-size: 20px; border: 0; } .wc-proceed-to-checkout { margin-top: 18px; } .wc-proceed-to-checkout .checkout-button { width: 100%; min-height: 58px; } .cart-empty.woocommerce-info { font-family: var(--f-display); font-size: 26px; background: none; border: 0; padding: 20px 0; } .return-to-shop { margin-top: 10px; } /* --- Checkout ---------------------------------------------------------------------------- */ form.checkout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0 clamp(30px, 5vw, 80px); align-items: start; } /* Explicit rows: WooCommerce prepends the error box (.woocommerce-NoticeGroup) to the form when validation fails — row 1, full width. Without this it was auto-placed under the billing fields and pushed "Your order" below it. Row 1 is empty (0 height) when there are no errors. */ form.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; grid-row: 1; } form.checkout #customer_details { grid-column: 1; grid-row: 2 / span 3; } form.checkout #order_review_heading, form.checkout #order_review { grid-column: 2; } form.checkout #order_review_heading { grid-row: 2; } form.checkout #order_review { grid-row: 3; } form.checkout #order_review_heading { font-size: 30px; margin-bottom: 18px; } form.checkout #order_review { position: sticky; top: calc(var(--header-h) + 24px); padding: 30px; border-radius: 26px; background: var(--blush-2); } .col2-set .col-1, .col2-set .col-2 { width: 100%; } .woocommerce-billing-fields h3, .woocommerce-shipping-fields h3, .woocommerce-additional-fields h3 { font-size: 30px; margin: 0 0 22px; } #ship-to-different-address label { display: flex; gap: 10px; align-items: center; font-family: var(--f-body); font-size: 16px; } .woocommerce-checkout-review-order-table :is(th, td) { padding-inline: 0; } .woocommerce-checkout-review-order-table .order-total :is(th, td) { font-size: 20px; } #payment { margin-top: 20px; } #payment .wc_payment_methods { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; } #payment .wc_payment_method { padding: 16px 18px; border-radius: 16px; background: #fff; } #payment .wc_payment_method > label { display: inline; margin-inline-start: 6px; } #payment .payment_box { margin-top: 10px; font-size: 14px; color: rgba(38, 18, 47, .7); } #payment .payment_box p { margin: 0; } #payment .woocommerce-privacy-policy-text { font-size: 13px; color: rgba(38, 18, 47, .6); } #payment .woocommerce-privacy-policy-text a { color: var(--plum); text-decoration: underline; } #place_order { width: 100%; min-height: 60px; font-size: 15px; } .woocommerce-form-coupon-toggle .woocommerce-info { font-size: 15px; } .woocommerce-form-coupon-toggle a { color: var(--plum); text-decoration: underline; } form.checkout_coupon { display: flex; gap: 10px; margin-bottom: 26px; } form.checkout_coupon .form-row { margin: 0; } @media (max-width: 899px) { form.checkout { grid-template-columns: 1fr; } form.checkout :is(#customer_details, #order_review_heading, #order_review) { grid-column: 1; grid-row: auto; } form.checkout #order_review { position: static; } .woocommerce :is(.form-row-first, .form-row-last) { width: 100%; margin-inline-end: 0; } } /* --- Order received & account --------------------------------------------------------------- */ .woocommerce-order { display: grid; gap: 34px; } .woocommerce-thankyou-order-received { font-family: var(--f-display); font-size: clamp(26px, 3vw, 40px); color: var(--plum); margin: 0; } .woocommerce-order-overview { display: flex; flex-wrap: wrap; gap: 16px; list-style: none; margin: 0; padding: 0; } .woocommerce-order-overview li { flex: 1 1 180px; padding: 20px 22px; border-radius: 18px; background: var(--blush-2); font-size: 13px; color: rgba(38, 18, 47, .6); } .woocommerce-order-overview li strong { display: block; margin-top: 6px; font-size: 17px; color: var(--ink); font-weight: 500; } .woocommerce-order-details__title, .woocommerce-column__title { font-size: 30px; margin-bottom: 16px; } .woocommerce-customer-details address { font-style: normal; padding: 22px; border-radius: 18px; background: var(--blush-2); line-height: 1.8; } .woocommerce-account .shop-flow > .woocommerce { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 50px; align-items: start; } .woocommerce-account .shop-flow > .woocommerce:has(.u-columns, .woocommerce-form-login) { display: block; } .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .woocommerce-MyAccount-navigation a { display: block; padding: 12px 18px; border-radius: 14px; color: var(--plum); } .woocommerce-MyAccount-navigation .is-active a, .woocommerce-MyAccount-navigation a:hover { background: var(--blush-2); } .u-columns.col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; } .u-columns h2 { font-size: 32px; margin-bottom: 20px; } :is(.woocommerce-form-login, .woocommerce-form-register) { padding: 34px; border-radius: 26px; background: var(--blush-2); } .woocommerce-form-login__rememberme { display: flex !important; gap: 8px; align-items: center; margin: 4px 0 14px; } .woocommerce-LostPassword a { color: var(--plum); text-decoration: underline; font-size: 14px; } @media (max-width: 899px) { .woocommerce-account .shop-flow > .woocommerce, .u-columns.col2-set { grid-template-columns: 1fr; } }