/* WordPress / WooCommerce layer on top of the shop styles (style.css … account.css). Colours come from Customize → Bermaxx – Të përgjithshme → Ngjyrat (CSS variables in ). */ .topbar { background: var(--topbar, #003944); } .topbar[hidden] { display: none; } .badge:not(.sale):not(.new):not(.top) { background: var(--badge, var(--brand)); } .logo img { height: var(--logo-h, 62px); width: auto; display: block; border-radius: 4px; } .site-header.compact .logo img { height: calc(var(--logo-h, 62px) * .7); } .footer-brand .logo img { height: calc(var(--logo-h, 62px) * 1.1); } @media (max-width: 900px) { .logo img, .site-header.compact .logo img { height: var(--logo-h-m, 40px); } } /* Sticky header below the admin bar */ .admin-bar .site-header { top: 32px; } @media (max-width: 782px) { .admin-bar .site-header { top: 46px; } } @media (max-width: 600px) { .admin-bar .site-header { top: 0; } } [data-icon] svg { width: 1em; height: 1em; display: block; } .main-nav a.nav-offer { color: var(--brand); } .main-nav a.nav-new { color: var(--gold); } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } /* Text pages & blog */ .entry { font-size: 17px; line-height: 1.8; } .entry h2 { font-size: 26px; margin: 36px 0 12px; } .entry h3 { font-size: 21px; margin: 28px 0 10px; } .entry a { text-decoration: underline; } .entry img { border-radius: 12px; height: auto; } .entry ul, .entry ol { padding-left: 22px; } .pagination { display: flex; gap: 8px; justify-content: center; margin-top: 40px; } .pagination .page-numbers { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 8px; } .pagination .current { background: var(--ink); color: #fff; border-color: var(--ink); } .cat-intro { max-width: 900px; margin: -20px 0 30px; color: var(--muted); } /* ---------- Form controls ---------- */ .wc-page .woocommerce input[type=text], .wc-page .woocommerce input[type=email], .wc-page .woocommerce input[type=tel], .wc-page .woocommerce input[type=password], .wc-page .woocommerce input[type=number], .wc-page .woocommerce input[type=search], .wc-page .woocommerce textarea, .wc-page .woocommerce select, .comment-form input[type=text], .comment-form input[type=email], .comment-form textarea, .comment-form select { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 6px; font: inherit; background: #fff; color: var(--ink); } .wc-page .woocommerce label, .comment-form label { display: block; font-size: 14px; font-weight: 700; margin: 0 0 6px; } .wc-page .woocommerce .form-row { margin: 0 0 16px; } .wc-page .woocommerce .required { color: var(--brand-2); text-decoration: none; border: 0; } .wc-page .woocommerce .optional { color: var(--muted); font-weight: 500; } .wc-page .woocommerce .button, .wc-page .woocommerce button.button, .wc-page .woocommerce a.button, .wc-page .woocommerce input.button, .comment-form .submit, .woocommerce #place_order { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--ink); color: #fff; border: 0; padding: 13px 26px; border-radius: 6px; font: inherit; font-weight: 700; cursor: pointer; text-transform: uppercase; letter-spacing: .5px; font-size: 14px; text-decoration: none; } .wc-page .woocommerce .button:hover, .comment-form .submit:hover { opacity: .9; } .wc-page .woocommerce .button:disabled, .wc-page .woocommerce .button.disabled { opacity: .45; cursor: not-allowed; } .woocommerce #place_order { width: 100%; height: 56px; background: #000; font-size: 16px; margin-top: 10px; } .wc-page .woocommerce .input-checkbox, .wc-page .woocommerce input[type=checkbox], .wc-page .woocommerce input[type=radio] { width: auto; margin-right: 8px; accent-color: var(--brand); } .wc-page .woocommerce form .form-row-first, .wc-page .woocommerce form .form-row-last { width: calc(50% - 7px); display: inline-block; vertical-align: top; } .wc-page .woocommerce form .form-row-first { margin-right: 10px; } .wc-page .woocommerce .password-input { position: relative; display: block; } .wc-page .woocommerce .show-password-input { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: 0; cursor: pointer; opacity: .6; } .wc-page .woocommerce .show-password-input::after { content: "👁"; } /* Notices */ .woocommerce-notices-wrapper:empty { display: none; } .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews, .wc-block-components-notice-banner { list-style: none; margin: 0 0 20px; padding: 14px 18px; border-radius: 10px; background: #eef1f1; font-size: 15px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; } .woocommerce-message { background: #e7efec; color: var(--brand); font-weight: 600; } .woocommerce-error { background: #fdecea; color: #b3261e; font-weight: 600; flex-direction: column; align-items: flex-start; } .woocommerce-error li { margin: 2px 0; } .woocommerce-message .button, .woocommerce-info .button { padding: 8px 16px; font-size: 13px; } .woocommerce-info a:not(.button) { font-weight: 700; text-decoration: underline; } /* ---------- Cart page ---------- */ .woocommerce-cart .wc-page .woocommerce { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 44px; align-items: start; } .woocommerce-cart .wc-page .woocommerce > .woocommerce-notices-wrapper, .woocommerce-cart .wc-page .woocommerce > .cart-empty, .woocommerce-cart .wc-page .woocommerce > .return-to-shop, .woocommerce-cart .wc-page .woocommerce > .wc-empty-cart-message { grid-column: 1 / -1; } .shop_table { width: 100%; border-collapse: collapse; } .shop_table th { text-align: left; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); padding: 10px 8px; border-bottom: 1px solid var(--line); } .shop_table td { padding: 16px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; } .woocommerce-cart-form .product-thumbnail img { width: 96px; height: 96px; object-fit: contain; background: var(--card); border-radius: 10px; } .woocommerce-cart-form .product-name a { font-weight: 700; } .woocommerce-cart-form .product-remove a { font-size: 22px; color: var(--muted); text-decoration: none; } .woocommerce-cart-form .quantity input { width: 80px; text-align: center; } .woocommerce-cart-form .product-subtotal { font-weight: 800; white-space: nowrap; } .woocommerce-cart-form .actions { padding-top: 20px; } .woocommerce-cart-form .coupon { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; } .woocommerce-cart-form .coupon input { width: 200px; } .woocommerce-cart-form .coupon label { display: none; } .woocommerce-cart-form button[name=update_cart] { float: right; background: #fff; color: var(--ink); border: 1.5px solid var(--ink); } .cart-collaterals .cart_totals { background: var(--soft); border-radius: 14px; padding: 26px; position: sticky; top: 110px; } .cart_totals h2 { font-size: 20px; margin: 0 0 16px; } .cart_totals .shop_table th, .cart_totals .shop_table td, .woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td { border-bottom: 1px solid #e3e1dc; padding: 12px 0; text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--ink); } .cart_totals .order-total th, .cart_totals .order-total td, .woocommerce-checkout-review-order-table .order-total th, .woocommerce-checkout-review-order-table .order-total td { font-size: 19px; font-weight: 800; border-bottom: 0; } .cart_totals td { text-align: right; } .woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; text-align: left; } .woocommerce-shipping-methods li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; margin: 0 0 8px; font-size: 14.5px; } .woocommerce-shipping-methods li label { display: inline; font-weight: 600; margin: 0; } .rate-time { display: block; width: 100%; color: var(--muted); font-size: 13px; font-weight: 500; padding-left: 26px; } .woocommerce-shipping-destination, .woocommerce-shipping-calculator { font-size: 13px; color: var(--muted); margin: 6px 0 0; } .shipping-calculator-button { text-decoration: underline; } .wc-proceed-to-checkout .checkout-button { width: 100%; height: 56px; background: #000; font-size: 16px; margin-top: 16px; } .cart-collaterals .ship-progress { margin-bottom: 16px; } /* ---------- Checkout ---------- */ .woocommerce-checkout .wc-page form.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 0 44px; align-items: start; } .woocommerce-checkout form.checkout > * { grid-column: 1; } .woocommerce-checkout form.checkout > #order_review_heading, .woocommerce-checkout form.checkout > #order_review { grid-column: 2; } .woocommerce-checkout form.checkout > #customer_details { grid-row: 1 / span 3; } #order_review_heading { font-size: 20px; margin: 0; background: var(--soft); border-radius: 14px 14px 0 0; padding: 24px 26px 6px; } #order_review { background: var(--soft); border-radius: 0 0 14px 14px; padding: 6px 26px 26px; position: sticky; top: 110px; } .woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { width: 100%; } .woocommerce-billing-fields h3, .woocommerce-shipping-fields h3, .woocommerce-additional-fields h3 { font-size: 19px; margin: 8px 0 16px; display: flex; align-items: center; gap: 10px; } #ship-to-different-address label { display: flex; align-items: center; font-size: 15px; } .woocommerce-checkout-review-order-table { margin-bottom: 20px; } .woocommerce-checkout-review-order-table .product-total, .woocommerce-checkout-review-order-table td:last-child { text-align: right; } .woocommerce-checkout-review-order-table .ship-progress { margin: 0; } #payment { margin-top: 10px; } #payment .payment_methods { list-style: none; margin: 0 0 16px; padding: 0; } #payment .payment_methods li { border: 1.5px solid var(--brand); border-radius: 10px; padding: 14px 16px; background: #fff; } #payment .payment_methods label { display: inline; font-size: 16px; } #payment .payment_box { margin-top: 8px; font-size: 14px; color: var(--muted); } #payment .payment_box p { margin: 0; } .woocommerce-terms-and-conditions-wrapper { font-size: 13.5px; color: var(--muted); } .woocommerce-privacy-policy-text p { margin: 0 0 10px; } .woocommerce-form-coupon-toggle .woocommerce-info { background: #fff; border: 1px dashed var(--line); } form.checkout_coupon { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 0 0 24px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; } form.checkout_coupon p { margin: 0; } form.checkout_coupon .form-row-first { flex: 1; width: auto; } .woocommerce-form-login-toggle .woocommerce-info { background: #fff; border: 1px dashed var(--line); } /* Thank-you page */ .woocommerce-order { max-width: 900px; } .woocommerce-thankyou-order-received { font-size: 22px; font-weight: 800; color: var(--brand); } .woocommerce-order-overview { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 20px 0 30px; } .woocommerce-order-overview li { background: var(--soft); border-radius: 10px; padding: 14px 16px; font-size: 13px; color: var(--muted); } .woocommerce-order-overview li strong { display: block; color: var(--ink); font-size: 16px; margin-top: 4px; } .thanks-text { background: #e7efec; border-radius: 10px; padding: 14px 18px; } .woocommerce-order-details, .woocommerce-customer-details { margin-top: 30px; } .woocommerce-order-details h2, .woocommerce-customer-details h2, .woocommerce-column__title { font-size: 20px; } .woocommerce-customer-details address { font-style: normal; background: var(--soft); border-radius: 10px; padding: 16px 18px; line-height: 1.7; } /* ---------- My account ---------- */ .woocommerce-account .wc-page .woocommerce { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; align-items: start; } .woocommerce-account .wc-page .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; } .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 8px; background: var(--soft); border-radius: 14px; } .woocommerce-MyAccount-navigation a { display: block; padding: 11px 14px; border-radius: 8px; font-weight: 600; } .woocommerce-MyAccount-navigation .is-active a { background: #fff; color: var(--brand); box-shadow: 0 1px 3px rgba(0,0,0,.06); } .woocommerce-MyAccount-content > p:first-child { font-size: 16px; } .woocommerce-MyAccount-content a:not(.button) { text-decoration: underline; } .woocommerce-orders-table .button { padding: 7px 14px; font-size: 12px; } .woocommerce-Addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .woocommerce-Address { background: var(--soft); border-radius: 14px; padding: 20px; } .woocommerce-Address address { font-style: normal; line-height: 1.7; } .woocommerce-Address-title { display: flex; justify-content: space-between; align-items: baseline; } .woocommerce-Address-title h2 { font-size: 18px; margin: 0 0 10px; } .woocommerce-EditAccountForm fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin: 20px 0; } /* Logged out: login + register side by side */ .woocommerce-account:not(.logged-in) .wc-page .woocommerce { display: block; } #customer_login { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1100px; } #customer_login > div { background: var(--soft); border-radius: 18px; padding: 28px 30px 30px; width: auto; float: none; } #customer_login h2 { font-size: 21px; margin: 0 0 16px; } #customer_login .button { width: 100%; height: 52px; background: #000; margin-top: 8px; } .woocommerce-form-login__rememberme { display: flex !important; align-items: center; font-weight: 600 !important; } .woocommerce-LostPassword { margin: 14px 0 0; font-size: 14px; } .woocommerce-LostPassword a { text-decoration: underline; } .woocommerce-privacy-policy-text { font-size: 13px; color: var(--muted); } .woocommerce-password-strength { font-size: 13px; margin-top: 6px; padding: 6px 10px; border-radius: 6px; background: #fff; } .woocommerce-password-strength.strong { color: #1c8a2e; } .woocommerce-password-strength.short, .woocommerce-password-strength.bad { color: #b3261e; } .woocommerce-password-hint { display: block; font-size: 12.5px; color: var(--muted); margin-top: 4px; } .woocommerce-ResetPassword { max-width: 520px; background: var(--soft); border-radius: 18px; padding: 28px 30px; } /* ---------- Reviews (product page) ---------- */ .review-form-wrap { max-width: 760px; margin: 10px 0 70px; } .review-form-wrap .comment-reply-title { font-size: 20px; font-weight: 800; display: block; margin-bottom: 14px; } .comment-form p { margin: 0 0 14px; } .comment-form-cookies-consent { display: flex; gap: 8px; align-items: center; font-size: 14px; } .comment-form-cookies-consent label { margin: 0; font-weight: 500; } .comment-form .stars { margin: 4px 0 10px; } .comment-form .stars a { font-size: 0; display: inline-block; width: 28px; height: 28px; text-decoration: none; position: relative; } .comment-form .stars a::before { content: "☆"; font-size: 26px; color: #e3a52b; position: absolute; inset: 0; line-height: 28px; } .comment-form .stars:hover a::before, .comment-form .stars.selected a::before { content: "★"; } .comment-form .stars a:hover ~ a::before, .comment-form .stars.selected a.active ~ a::before { content: "☆"; } .star-rating { position: relative; display: inline-block; font-size: 16px; line-height: 1; width: 5.4em; height: 1em; overflow: hidden; color: #e3a52b; } .star-rating::before { content: "☆☆☆☆☆"; position: absolute; left: 0; top: 0; letter-spacing: .1em; } .star-rating span { position: absolute; left: 0; top: 0; overflow: hidden; padding-top: 1.5em; } .star-rating span::before { content: "★★★★★"; position: absolute; top: 0; left: 0; letter-spacing: .1em; } .pdp-reviews .muted { font-size: 16px; } .wc-add-to-cart form.cart { display: flex; gap: 14px; flex-wrap: wrap; } @media (max-width: 1200px) { .woocommerce-cart .wc-page .woocommerce, .woocommerce-checkout .wc-page form.checkout { grid-template-columns: minmax(0, 1fr); } .woocommerce-cart-form, .cart-collaterals, #customer_details, #order_review { min-width: 0; } .woocommerce-checkout form.checkout > #order_review_heading, .woocommerce-checkout form.checkout > #order_review, .woocommerce-checkout form.checkout > #customer_details { grid-column: 1; grid-row: auto; } #order_review, .cart-collaterals .cart_totals { position: static; } } @media (max-width: 900px) { .woocommerce-account .wc-page .woocommerce, #customer_login, .woocommerce-Addresses { grid-template-columns: 1fr; gap: 20px; } #customer_login > div { padding: 20px 18px 22px; } .woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 100%; margin-right: 0; } /* Cart table as stacked cards */ .woocommerce-cart-form .shop_table thead { display: none; } .woocommerce-cart-form .shop_table tr.cart_item { display: grid; grid-template-columns: 80px 1fr auto; gap: 4px 12px; padding: 14px 0; border-bottom: 1px solid var(--line); } .woocommerce-cart-form .shop_table td { border: 0; padding: 0; } .woocommerce-cart-form .product-thumbnail { grid-row: 1 / span 3; } .woocommerce-cart-form .product-thumbnail img { width: 80px; height: 80px; } .woocommerce-cart-form .product-remove { grid-column: 3; grid-row: 1; text-align: right; } .woocommerce-cart-form .product-name { grid-column: 2; grid-row: 1; } .woocommerce-cart-form .product-price { display: none; } .woocommerce-cart-form .product-quantity { grid-column: 2; } .woocommerce-cart-form .product-subtotal { grid-column: 3; grid-row: 3; text-align: right; } .woocommerce-cart-form td[data-title]::before { display: none; } .woocommerce-cart-form .actions { display: block; } .woocommerce-cart-form button[name=update_cart] { float: none; width: 100%; margin-top: 10px; } .woocommerce-cart-form .coupon { display: flex; } .woocommerce-cart-form .coupon input { flex: 1; width: auto; min-width: 0; } } /* Header search and sort stay as designed on shop pages */ .search input[type=search] { border: 0; padding: 0; background: transparent; width: auto; } .sort select { width: auto; } /* Blog index: cards may shrink; one column on phones */ .grid > * { min-width: 0; } @media (max-width: 600px) { .blog .grid.three { grid-template-columns: 1fr; } } /* ---------- Phone fixes ---------- */ .event-card > *, .event-main > *, .events > * { min-width: 0; } .pdp-tabs button { min-width: 0; } @media (max-width: 600px) { .pdp-tabs { gap: 6px; } .pdp-tabs button { flex: 1 1 0; padding: 10px 6px; font-size: 11.5px; line-height: 1.25; } .event-card { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; } .event-card h4 { overflow-wrap: anywhere; } } /* WooCommerce tables (orders, downloads) as stacked cards on phones */ @media (max-width: 768px) { .woocommerce-MyAccount-content .shop_table_responsive thead { display: none; } .woocommerce-MyAccount-content .shop_table_responsive tbody tr { display: block; border: 1px solid var(--line); border-radius: 12px; padding: 6px 14px; margin-bottom: 12px; } .woocommerce-MyAccount-content .shop_table_responsive tbody td, .woocommerce-MyAccount-content .shop_table_responsive tbody th { display: flex; justify-content: space-between; gap: 12px; text-align: right; border: 0; border-bottom: 1px solid var(--line); padding: 9px 0; } .woocommerce-MyAccount-content .shop_table_responsive tbody tr > :last-child { border-bottom: 0; } .woocommerce-MyAccount-content .shop_table_responsive tbody td::before { content: attr(data-title); font-weight: 700; text-align: left; color: var(--muted); } .woocommerce-MyAccount-content .shop_table_responsive tbody td.woocommerce-orders-table__cell-order-actions { justify-content: flex-end; flex-wrap: wrap; } .woocommerce-MyAccount-content .shop_table_responsive tbody td.woocommerce-orders-table__cell-order-actions::before { display: none; } } /* Product cards: the gallery-thumb width rule (.thumb) must not shrink card images */ .card .thumb { width: auto; } /* Phones: totals tables, quantity, badges, hero price tag */ .wc-page .woocommerce-cart-form .quantity input.qty { width: 80px; } .woocommerce-order-overview li strong { overflow-wrap: anywhere; } @media (max-width: 768px) { .cart_totals tr.woocommerce-shipping-totals, .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals { display: block; border-bottom: 1px solid #e3e1dc; padding: 10px 0; } .cart_totals tr.woocommerce-shipping-totals th, .cart_totals tr.woocommerce-shipping-totals td, .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals th, .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td { display: block; border: 0; padding: 4px 0; text-align: left; } .cart_totals td::before { display: none; } .woocommerce-shipping-methods li { margin-bottom: 10px; } .rate-time { padding-left: 24px; } } @media (max-width: 600px) { .card .badges { gap: 4px; max-width: calc(100% - 44px); } .card .badge { font-size: 11px; padding: 1px 8px; gap: 4px; } .card .badge b { font-size: 15px; } .card .badge.new, .card .badge.top { font-size: 11px; } .hero-side .price-tag { transform: scale(.78); transform-origin: top right; } .hero-side .price-tag .big { font-size: 30px; } } @media (max-width: 600px) { .story-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; overflow: visible; margin: 30px 0 24px; } .story-cards a { height: 150px; } .story-cards [data-icon] { font-size: 38px; top: 34px; } .story-cards .num { font-size: 40px; top: 22px; } .story-cards small { top: 68px; padding: 0 8px; font-size: 11.5px; line-height: 1.25; } } /* Footer columns may shrink on very small phones (320 px) */ .footer-grid > * { min-width: 0; } .footer-grid a { overflow-wrap: anywhere; } @media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 360px) { .footer-grid { gap: 24px 14px; } } @media (max-width: 600px) { .rating-seal { width: 130px; height: 130px; } .rating-seal b { font-size: 30px; } .rating-seal i { font-size: 15px; } } .nav-close { display: none; } @media (max-width: 900px) { .main-nav.open .nav-close { display: block; position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 32px; line-height: 1; cursor: pointer; color: var(--ink); padding: 6px 10px; } } /* Phone menu sits inside the sticky header: lift the header above the overlay while it is open */ body.nav-open .site-header { z-index: 70; } /* Phone header: equal side columns so the logo is exactly centred */ @media (max-width: 900px) { .header-main, .site-header.compact .header-main { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } .burger { justify-self: start; } .logo, .site-header.compact .logo { justify-self: center; } .header-icons, .site-header.compact .header-icons { justify-self: end; } }