/* Ramlah — WooCommerce styling (shop, product, cart, checkout, account).
   Loads after ramlah.css; uses the same tokens (--ground, --ink, --petrol,
   --champagne, --serif, --sans). Restyles WooCommerce's default markup to the
   brand rather than overriding templates wholesale. */

/* ---------- shared page header for interior commerce pages ---------- */
.ramlah-page-head{max-width:var(--maxw);margin:0 auto;padding:8px var(--pad) 0;text-align:center}
.ramlah-page-head .eyebrow{display:block;margin-bottom:12px}
.ramlah-page-head h1{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.4vw,44px);line-height:1.15;color:var(--ink)}

/* ---------- buttons ---------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit{
  background:var(--ink);color:var(--ground);border:1px solid var(--ink);border-radius:0;
  font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  padding:15px 30px;line-height:1;transition:background-color .3s ease,color .3s ease,border-color .3s ease;box-shadow:none}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce #respond input#submit:hover{background:var(--petrol);border-color:var(--petrol);color:var(--ground)}
.woocommerce a.button.ghost,
.woocommerce .button.wc-backward{background:transparent;color:var(--ink);border:1px solid rgba(26,26,26,.3)}
.woocommerce a.button.ghost:hover,
.woocommerce .button.wc-backward:hover{background:transparent;border-color:var(--ink);color:var(--ink)}

/* ---------- shop archive: editorial showcase ---------- */
.shop-head{max-width:760px;margin:0 auto 84px;padding:0 var(--pad);text-align:center}
.shop-head .eyebrow{display:block;margin-bottom:16px}
.shop-head h1{font-family:var(--serif);font-weight:400;font-size:clamp(32px,3.8vw,50px);line-height:1.14;color:var(--ink);margin:0 0 20px;text-wrap:balance}
.shop-head p{font-size:16.5px;line-height:1.7;color:var(--ink-soft);max-width:56ch;margin:0 auto}

/* block, not flex-column: auto margins on a flex child suppress stretch and
   the row would shrink to its content width. */
.showcase-list{display:block}
.showcase{width:100%;box-sizing:border-box;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) 110px;display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:center}
.showcase--flip .showcase-media{order:2}
.showcase--flip .showcase-copy{order:1}
.showcase-media{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:#EFEAE0}
.showcase-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s ease,transform 1.6s cubic-bezier(.22,.61,.36,1)}
.showcase-media img.alt{opacity:0}
.showcase-media:hover img.main{opacity:0;transform:scale(1.04)}
.showcase-media:hover img.alt{opacity:1;transform:scale(1.04)}

.showcase-copy{max-width:44ch}
.showcase-index{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.22em;color:var(--champagne);margin-bottom:18px}
.showcase-copy h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.4vw,44px);line-height:1.12;margin:0 0 14px}
.showcase-copy h2 a{color:var(--ink)}
.showcase-copy h2 a:hover{color:var(--petrol)}
.showcase-price{font-family:var(--sans);font-size:19px;color:var(--ink);margin-bottom:26px}
.showcase-price del{color:var(--gray);opacity:.7;margin-right:6px}
.showcase-price ins{text-decoration:none}
.showcase-specs{list-style:none;margin:0 0 32px;padding:0;border-top:1px solid rgba(198,173,143,.5)}
.showcase-specs li{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid rgba(26,26,26,.08);font-size:14px;color:var(--ink-soft)}
.showcase-specs .numerals{font-size:16px;color:var(--ink)}
.showcase-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.btn-ink{display:inline-block;background:var(--ink);color:var(--ground);border:1px solid var(--ink);padding:15px 32px;
  font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;transition:background-color .3s ease,border-color .3s ease,color .3s ease}
.btn-ink:hover{background:var(--petrol);border-color:var(--petrol);color:var(--ground)}
.showcase-ship{font-size:12.5px;color:var(--gray)}

.shop-note{text-align:center;padding:0 var(--pad) 120px}
.shop-note p{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--ink-soft);margin:0 0 14px}

@media (max-width:980px){
  .shop-head{margin-bottom:56px}
  .showcase{grid-template-columns:1fr;gap:32px;padding-bottom:80px}
  .showcase--flip .showcase-media{order:0}
  .showcase--flip .showcase-copy{order:0}
  .showcase-copy{max-width:none}
  .showcase-media{aspect-ratio:1/1}
}

/* ---------- shop archive (grid fallback) ----------
   The site (Loobek-derived) renders a non-standard loop: div.products >
   section.product > .product-wrapper > .thumbnail-wrapper (which holds the
   image, title and price). Selectors below are element-agnostic so they work
   for that markup and for standard ul.products/li.product alike. */

/* breadcrumb — hidden (it escapes the fixed-nav offset and overlaps the nav;
   a 2-product catalogue doesn't need it). */
.woocommerce .woocommerce-breadcrumb{display:none}

/* page title */
.woocommerce-products-header{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);text-align:center}
.woocommerce-products-header__title.page-title,
.woocommerce .page-title{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.4vw,44px);color:var(--ink);text-align:center;margin:0 0 24px}

/* result count + sorting: hidden for the small catalogue (Loobek's custom
   ordering dropdown renders unstyled here). Re-enable when the range grows. */
.woocommerce-result-count,
.woocommerce-ordering{display:none}
.woocommerce-notices-wrapper:empty{display:none}

/* products grid */
.woocommerce .products{display:grid !important;grid-template-columns:repeat(2,1fr);gap:56px;max-width:var(--maxw);margin:40px auto 0;padding:0 var(--pad);list-style:none;width:auto}
/* WooCommerce's clearfix pseudos become phantom grid cells and shove the first
   product into column 2 — remove them from the grid. */
.woocommerce .products::before,
.woocommerce .products::after{display:none !important;content:none !important}
.woocommerce .products .product{width:auto !important;margin:0 !important;float:none !important;padding:0;text-align:center;list-style:none}
.woocommerce .products .product .product-wrapper,
.woocommerce .products .product .thumbnail-wrapper{display:block;border:0;padding:0;margin:0;box-shadow:none;background:none}
.woocommerce .products .product .ramlah-loop-img{position:relative;aspect-ratio:1/1;overflow:hidden;background:#EFEAE0;display:block;margin:0 0 22px}
.woocommerce .products .product .ramlah-loop-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;margin:0;max-width:none;transition:transform 1.2s ease}
.woocommerce .products .product:hover .ramlah-loop-img img{transform:scale(1.03)}
.woocommerce .products .product .woocommerce-loop-product__title{font-family:var(--serif);font-weight:400;font-size:21px;color:var(--ink);padding:0;margin:0 0 6px}
.woocommerce .products .product .price{color:var(--ink);font-size:15px;font-weight:400;font-family:var(--sans);display:block;margin:0}
.woocommerce .products .product .price del{color:var(--gray);opacity:.7;font-weight:400}
.woocommerce .products .product .price ins{text-decoration:none;color:var(--ink)}
.woocommerce .products .product .button,
.woocommerce .products .product .added_to_cart{display:inline-block;margin-top:16px}
/* Loobek adds empty overlay links inside the card — keep them from stealing space */
.woocommerce .products .product .product-wrapper > a.woocommerce-loop-product__link:empty,
.woocommerce .products .product .thumbnail-wrapper > a.woocommerce-loop-product__link:empty{display:none}
.woocommerce span.onsale{background:var(--petrol);color:var(--ground);border-radius:0;font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;min-height:auto;min-width:auto;padding:6px 12px;line-height:1;top:12px;right:12px;left:auto;margin:0;position:absolute}

/* pagination */
.woocommerce nav.woocommerce-pagination{max-width:var(--maxw);margin:64px auto 0;text-align:center}
.woocommerce nav.woocommerce-pagination ul{border:0}
.woocommerce nav.woocommerce-pagination ul li{border:0;margin:0 4px}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{font-family:var(--sans);font-size:14px;color:var(--gray);border:1px solid transparent;padding:8px 12px;border-radius:0}
.woocommerce nav.woocommerce-pagination ul li span.current{color:var(--ink);border-color:var(--champagne)}
.woocommerce nav.woocommerce-pagination ul li a:hover{color:var(--ink);background:transparent}

/* ---------- single product ---------- */
.woocommerce div.product{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  display:grid !important;grid-template-columns:1fr 1fr !important;gap:72px;align-items:start;float:none}
.woocommerce div.product>.woocommerce-product-gallery,
.woocommerce div.product>div.images{width:auto !important;margin:0 !important;float:none !important}
.woocommerce div.product>.summary,
.woocommerce div.product>div.summary{width:auto !important;margin:0 !important;float:none !important}
.woocommerce div.product .woocommerce-product-gallery__wrapper{margin:0}
.woocommerce div.product .woocommerce-product-gallery__image img,
.woocommerce div.product .woocommerce-product-gallery img{width:100%;height:auto}
.woocommerce div.product .woocommerce-product-gallery__image{background:#EFEAE0}
.woocommerce div.product .woocommerce-product-gallery .flex-viewport{background:#EFEAE0}
.woocommerce div.product div.summary{margin:0;width:100%;float:none;position:sticky;top:96px}
.woocommerce div.product .product_title{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3vw,40px);line-height:1.15;color:var(--ink);margin:0 0 8px}
.woocommerce div.product p.price,
.woocommerce div.product span.price{font-family:var(--sans);font-size:22px;color:var(--ink);font-weight:400;margin-bottom:22px}
.woocommerce div.product p.price del{color:var(--gray);opacity:.7}
.woocommerce div.product p.price ins{text-decoration:none;color:var(--ink)}
.woocommerce div.product .woocommerce-product-rating{margin-bottom:20px}
.woocommerce .star-rating span::before{color:var(--champagne)}
.woocommerce div.product .woocommerce-product-details__short-description{font-size:16px;line-height:1.7;color:var(--ink-soft);margin-bottom:28px}
.woocommerce div.product .woocommerce-product-details__short-description p{margin-bottom:12px}
.woocommerce div.product form.cart{margin-bottom:28px;display:flex;gap:14px;align-items:stretch;flex-wrap:wrap}
.woocommerce div.product form.cart .quantity{margin:0}
.woocommerce .quantity input.qty{width:64px;height:100%;min-height:48px;border:1px solid rgba(26,26,26,.2);border-radius:0;font-family:var(--sans);font-size:15px;text-align:center;color:var(--ink);background:transparent;padding:0}
.woocommerce div.product form.cart .button.single_add_to_cart_button{flex:1;min-width:200px;padding:16px 30px}
.woocommerce div.product .product_meta{font-size:12.5px;color:var(--gray);letter-spacing:.02em;border-top:1px solid rgba(198,173,143,.4);padding-top:20px}
.woocommerce div.product .product_meta>span{display:block;margin-bottom:6px}
.woocommerce div.product .product_meta a{color:var(--petrol)}

/* ramlah trust strip under add-to-cart */
.ramlah-product-trust{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:12px;letter-spacing:.03em;color:var(--gray);margin:-8px 0 26px}
.ramlah-product-trust span{display:flex;align-items:center;gap:7px}
.ramlah-product-trust span::before{content:"";width:5px;height:5px;background:var(--champagne);border-radius:50%;display:inline-block}

/* tabs */
.woocommerce div.product .woocommerce-tabs{grid-column:1 / -1;margin-top:80px}
.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0;margin:0 0 32px;border-bottom:1px solid rgba(26,26,26,.1);text-align:left}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{border:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li{background:transparent;border:0;border-radius:0;margin:0 32px 0 0;padding:0 0 14px}
.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 a{font-family:var(--sans);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);padding:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--ink)}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{box-shadow:0 2px 0 var(--ink)}
.woocommerce div.product .woocommerce-Tabs-panel{max-width:70ch;font-size:16px;line-height:1.75;color:var(--ink-soft)}
.woocommerce div.product .woocommerce-Tabs-panel h2{font-family:var(--serif);font-weight:400;font-size:24px;color:var(--ink);margin-bottom:16px}

/* related products */
.woocommerce .related.products,
.woocommerce .upsells.products{grid-column:1 / -1;margin-top:96px}
.woocommerce .related.products>h2,
.woocommerce .upsells.products>h2{font-family:var(--serif);font-weight:400;font-size:28px;text-align:center;margin-bottom:48px;color:var(--ink)}

/* ---------- cart ---------- */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.woocommerce table.shop_table{border:0;border-radius:0}
.woocommerce table.shop_table thead th{font-family:var(--sans);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);border-bottom:1px solid rgba(198,173,143,.5);padding:0 12px 16px}
.woocommerce table.shop_table td{border-top:1px solid rgba(26,26,26,.08);padding:22px 12px;vertical-align:middle}
.woocommerce table.shop_table td.product-name a{font-family:var(--serif);font-size:18px;color:var(--ink)}
.woocommerce table.shop_table .product-thumbnail img{width:84px;border-radius:0}
.woocommerce a.remove{color:var(--ink) !important;font-weight:400;border:1px solid rgba(26,26,26,.2)}
.woocommerce a.remove:hover{background:var(--ink);color:var(--ground) !important}
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals{float:none;width:100%}
.woocommerce .cart_totals h2{font-family:var(--serif);font-weight:400;font-size:24px;margin-bottom:20px}
.woocommerce .cart_totals table th{color:var(--gray);font-weight:400}
.woocommerce .wc-proceed-to-checkout a.checkout-button{font-size:13px;padding:18px 30px}
.woocommerce .coupon input.input-text{border:1px solid rgba(26,26,26,.2);border-radius:0;padding:14px 16px;font-family:var(--sans)}
/* the "Update cart" button — ghost, and readable even when disabled */
.woocommerce button[name="update_cart"]{background:transparent;color:var(--ink);border:1px solid rgba(26,26,26,.3)}
.woocommerce button[name="update_cart"]:disabled,
.woocommerce button[name="update_cart"][disabled]{opacity:.4;background:transparent;color:var(--ink);border-color:rgba(26,26,26,.2)}
.woocommerce button[name="update_cart"]:hover:not(:disabled){background:var(--ink);color:var(--ground);border-color:var(--ink)}
.woocommerce .cart-empty,
.woocommerce-cart .cart-empty{font-family:var(--serif);font-size:22px;color:var(--ink);text-align:center}

/* ---------- checkout / account form fields ---------- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-checkout input[type=text],
.woocommerce-checkout input[type=email],
.woocommerce-checkout input[type=tel],
.select2-container--default .select2-selection--single{border:1px solid rgba(26,26,26,.2);border-radius:0;padding:13px 15px;font-family:var(--sans);font-size:15px;color:var(--ink);background:transparent}
.woocommerce form .form-row label,
.woocommerce-checkout label{font-family:var(--sans);font-size:12px;letter-spacing:.04em;color:var(--gray)}
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout h3{font-family:var(--serif);font-weight:400;color:var(--ink)}

/* ---------- notices ---------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews{border-radius:0;border-top:none;font-family:var(--sans);font-size:14px;background:#F3EFE7;padding:16px 20px 16px 44px}
.woocommerce-message::before,
.woocommerce-info::before{color:var(--petrol)}
.woocommerce-message{border-left:3px solid var(--petrol)}
.woocommerce-info{border-left:3px solid var(--champagne)}
.woocommerce-error{border-left:3px solid #a13b2f;background:#f7ece9}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .woocommerce div.product{grid-template-columns:1fr;gap:40px}
  .woocommerce div.product div.summary{position:static}
  .woocommerce div.product .woocommerce-tabs{margin-top:56px}
}
@media (max-width:680px){
  .woocommerce ul.products,
  .woocommerce-page ul.products{grid-template-columns:1fr;gap:44px}
  .woocommerce .woocommerce-ordering{margin:12px 0 0;display:block}
}